How to use the typestyle.style function in typestyle
To help you get started, we’ve selected a few typestyle examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
vanilla / vanilla / plugins / rich-editor / src / scripts / menuBar / paragraph / pieces / ParagraphMenuCheckRadio.tsx View on Github 
public render() {
const classes = paragraphMenuCheckRadioClasses();
const { checked, type, icon, text, onClick } = this.props;
const isRadio = type === IMenuBarItemTypes.RADIO;
const globalStyles = globalVariables();
const iconStyle = style({
width: unit(globalStyles.icon.sizes.default),
height: unit(globalStyles.icon.sizes.default),
});
const checkStyle = style({
color: colorOut(globalStyles.mainColors.primary),
});
return (public render() {
const classes = paragraphMenuCheckRadioClasses();
const { checked, type, icon, text, onClick } = this.props;
const isRadio = type === IMenuBarItemTypes.RADIO;
const globalStyles = globalVariables();
const iconStyle = style({
width: unit(globalStyles.icon.sizes.default),
height: unit(globalStyles.icon.sizes.default),
});
const checkStyle = style({
color: colorOut(globalStyles.mainColors.primary),
});
return (export function textarea(c: Context) {
const raw = textareaRaw(c);
const textareaClass = style(raw.normal);
return {
container: style(raw.container),
textarea: textareaClass,
underline: style(raw.underline, {
$nest: {
[`.${textareaClass}:focus + &`]: raw.focusUnderline,
},
}),
label: style(raw.label),
};
}export function sidebar(context: IContext) {
const { rem, font } = context;
const { sizes, weights } = font;
return {
container: style({
height: '100%',
}),
header: {
title: style(sizes.title, weights.semibold),
welcomeText: style({
marginTop: rem(0.8),
}),
},
body: {
button: style({
width: '100%',
marginTop: '8px',
marginBottom: '8px',
}),
},
};
}};
static getSelected = (): ActiveFilter[] => {
return FilterSelected.selectedFilters || [];
};
static isInitialized = () => {
return FilterSelected.selectedFilters !== undefined;
};
}
const rightToolbar = style({
marginLeft: 'auto'
});
const dividerStyle = style({ borderRight: '1px solid #d1d1d1;', padding: '10px', display: 'inherit' });
const paddingStyle = style({ padding: '10px' });
export class StatefulFilters extends React.Component {
private promises = new PromisesRegistry();
constructor(props: StatefulFiltersProps) {
super(props);
let active = FilterSelected.getSelected();
if (!FilterSelected.isInitialized()) {
active = FilterHelper.getFiltersFromURL(this.props.initialFilters);
FilterSelected.setSelected(active);
} else if (!FilterHelper.filtersMatchURL(this.props.initialFilters, active)) {
active = FilterHelper.setFiltersToURL(this.props.initialFilters, active);
FilterSelected.setSelected(active);
}export function textarea(c: Context) {
const raw = textareaRaw(c);
const textareaClass = style(raw.normal);
return {
container: style(raw.container),
textarea: textareaClass,
underline: style(raw.underline, {
$nest: {
[`.${textareaClass}:focus + &`]: raw.focusUnderline,
},
}),
label: style(raw.label),
};
}export function component(
$debugName: string,
tag: Tag,
...styles: CSSProps[]
): React.FunctionComponent {
const styleClassName = style({ $debugName }, ...styles);
return ({ className, ...props }: any) => {
return React.createElement(tag, {
className: classes(className, styleClassName),
...props,
});
};
}export function textarea(c: Context) {
const raw = textareaRaw(c);
const textareaClass = style(raw.normal);
return {
container: style(raw.container),
textarea: textareaClass,
underline: style(raw.underline, {
$nest: {
[`.${textareaClass}:focus + &`]: raw.focusUnderline,
},
}),
label: style(raw.label),
};
}export function textarea(c: Context) {
const raw = textareaRaw(c);
const textareaClass = style(raw.normal);
return {
container: style(raw.container),
textarea: textareaClass,
underline: style(raw.underline, {
$nest: {
[`.${textareaClass}:focus + &`]: raw.focusUnderline,
},
}),
label: style(raw.label),
};
}export function padding(units?: number, directions?: string): string {
return style(_paddingInternal(units, directions));
}
