How to use the bobril.styleDefEx function in bobril

const rootStyle = b.styleDef([c.userSelectNone, c.positionAbsolute, {
    lineHeight: '22px',
    top: 38,
    transition: transitions.easeOut(),
    zIndex: 1, // Needed to display label above Chrome's autocomplete field background
    cursor: "text",
    transform: 'scale(1) translate3d(0, 0, 0)',
    transformOrigin: 'left top'
}]);

const disabledStyle = b.styleDefEx(rootStyle, {
    cursor: "default"
});

const shrinkStyle = b.styleDefEx(rootStyle, [c.pointerEventsNone, {
    transform: "perspective(1px) scale(0.75) translate3d(2px, -28px, 0)"
}]);

export const TextFieldLabel = (data: ITextFieldLabel) => {
    return b.style({ tag: "label", attrs: { htmlFor: data.htmlFor }, children: data.children }, rootStyle, data.disabled && disabledStyle, data.shrink && shrinkStyle, { color: data.color });
};

shrink?: boolean;
    htmlFor?: string;
    color?: string;
}

const rootStyle = b.styleDef([c.userSelectNone, c.positionAbsolute, {
    lineHeight: '22px',
    top: 38,
    transition: transitions.easeOut(),
    zIndex: 1, // Needed to display label above Chrome's autocomplete field background
    cursor: "text",
    transform: 'scale(1) translate3d(0, 0, 0)',
    transformOrigin: 'left top'
}]);

const disabledStyle = b.styleDefEx(rootStyle, {
    cursor: "default"
});

const shrinkStyle = b.styleDefEx(rootStyle, [c.pointerEventsNone, {
    transform: "perspective(1px) scale(0.75) translate3d(2px, -28px, 0)"
}]);

export const TextFieldLabel = (data: ITextFieldLabel) => {
    return b.style({ tag: "label", attrs: { htmlFor: data.htmlFor }, children: data.children }, rootStyle, data.disabled && disabledStyle, data.shrink && shrinkStyle, { color: data.color });
};

}]);

let rippleStyle = b.styleDef([c.positionAbsolute, c.noTapHighlight, c.circle, {
    backgroundColor: "#000",
}]);

let trackToggledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: () => colorUtils.withTransparency(styles.strPrimary1Color, 0.5)
});

let thumbToggledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.primary1Color,
    left: toggleTrackWidth,
});

let trackDisabledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: styles.primary3Color
});

let thumbDisabledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.borderColor,
});

export const Toggle = b.createComponent({
    init(ctx: IToggleCtx) {
        ctx.focusFromKeyboard = false;
        ctx.down = false;
        ctx.rippleStart = 0;
    },
    render(ctx: IToggleCtx, me: b.IBobrilNode) {
        let d = ctx.data;
        let disabled = d.disabled;

}]);

let trackToggledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: () => colorUtils.withTransparency(styles.strPrimary1Color, 0.5)
});

let thumbToggledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.primary1Color,
    left: toggleTrackWidth,
});

let trackDisabledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: styles.primary3Color
});

let thumbDisabledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.borderColor,
});

export const Toggle = b.createComponent({
    init(ctx: IToggleCtx) {
        ctx.focusFromKeyboard = false;
        ctx.down = false;
        ctx.rippleStart = 0;
    },
    render(ctx: IToggleCtx, me: b.IBobrilNode) {
        let d = ctx.data;
        let disabled = d.disabled;
        let checked = d.checked;
        let focusFromKeyboard = ctx.focusFromKeyboard;
        let hasRipple = ctx.rippleStart != 0;
        let t: number = 0;

left: 0,
    width: toggleSize,
    height: toggleSize,
    lineHeight: '24px',
    backgroundColor: styles.accent2Color,
}]);

let rippleStyle = b.styleDef([c.positionAbsolute, c.noTapHighlight, c.circle, {
    backgroundColor: "#000",
}]);

let trackToggledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: () => colorUtils.withTransparency(styles.strPrimary1Color, 0.5)
});

let thumbToggledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.primary1Color,
    left: toggleTrackWidth,
});

let trackDisabledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: styles.primary3Color
});

let thumbDisabledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.borderColor,
});

export const Toggle = b.createComponent({
    init(ctx: IToggleCtx) {
        ctx.focusFromKeyboard = false;
        ctx.down = false;

import * as transitions from "./transitions";
import * as c from "./styleConsts";

export interface ITextFieldHint {
    children?: b.IBobrilChildren;
    show?: boolean;
}

const rootStyle = b.styleDef([c.positionAbsolute, {
    color: styles.disabledColor,
    transition: transitions.easeOut(),
    opacity: 0,
    bottom: 12
}]);

const showStyle = b.styleDefEx(rootStyle, {
    opacity: 1
});

export const TextFieldHint = (data: ITextFieldHint) => {
    return b.styledDiv(data.children, rootStyle, data.show !== false && showStyle);
};

top: 0,
  right: 0,
  fontWeight: "medium",
  fontSize: radius,
  width: radius2x,
  height: radius2x,
  backgroundColor: styles.alternateTextColor,
  color: styles.textColor,
}]);

const primaryStyle = b.styleDefEx(badgeStyle, {
  backgroundColor: styles.accent1Color,
  color: styles.alternateTextColor
});

const secondaryStyle = b.styleDefEx(badgeStyle, {
  backgroundColor: styles.primary1Color,
  color: styles.alternateTextColor
});

export const Badge = b.createComponent({
  render(ctx: IBadgeCtx, me: b.IBobrilNode) {
    const d = ctx.data;
    b.style(me, rootStyle);
    me.children = [
      d.children,
      b.styledDiv(d.badgeContent, badgeStyle, d.primary && primaryStyle, d.secondary && secondaryStyle)
    ];
  }
});

let thumbStyle = b.styleDef([c.positionAbsolute, c.noTapHighlight, styles.zDepthShadows[0], c.circle, {
    transition: transitions.easeOut(),
    top: 1,
    left: 0,
    width: toggleSize,
    height: toggleSize,
    lineHeight: '24px',
    backgroundColor: styles.accent2Color,
}]);

let rippleStyle = b.styleDef([c.positionAbsolute, c.noTapHighlight, c.circle, {
    backgroundColor: "#000",
}]);

let trackToggledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: () => colorUtils.withTransparency(styles.strPrimary1Color, 0.5)
});

let thumbToggledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.primary1Color,
    left: toggleTrackWidth,
});

let trackDisabledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: styles.primary3Color
});

let thumbDisabledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.borderColor,
});

flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  top: 0,
  right: 0,
  fontWeight: "medium",
  fontSize: radius,
  width: radius2x,
  height: radius2x,
  backgroundColor: styles.alternateTextColor,
  color: styles.textColor,
}]);

const primaryStyle = b.styleDefEx(badgeStyle, {
  backgroundColor: styles.accent1Color,
  color: styles.alternateTextColor
});

const secondaryStyle = b.styleDefEx(badgeStyle, {
  backgroundColor: styles.primary1Color,
  color: styles.alternateTextColor
});

export const Badge = b.createComponent({
  render(ctx: IBadgeCtx, me: b.IBobrilNode) {
    const d = ctx.data;
    b.style(me, rootStyle);
    me.children = [
      d.children,
      b.styledDiv(d.badgeContent, badgeStyle, d.primary && primaryStyle, d.secondary && secondaryStyle)