How to use @xstyled/system - 10 common examples

);

// TH

th('colors.primary900')({});

th.color(2)({});
th.color('primary')({});

th.px(2)({});
th.px('2rpx')({});

th.percent(0.3)({});
th.percent('20em')({});

th.radius(2)({});
th.radius('sm')({});

th.transition(2)({});
th.transition('fade')({});

th.space(2)({});
th.space('sm')({});

th.size(2)({});
th.size('sm')({});

th.font(2)({});
th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

const InnerSystemComponentBox = createSystemComponent(React, 'div', shadows);

const SystemComponentBox = styled(InnerSystemComponentBox)`
    ${shadows}
`;

const systemComponentBoxTest = () => (
    <div>
        
    </div>
);

// TH

th('colors.primary900')({});

th.color(2)({});
th.color('primary')({});

th.px(2)({});
th.px('2rpx')({});

th.percent(0.3)({});
th.percent('20em')({});

th.radius(2)({});
th.radius('sm')({});

th.transition(2)({});
th.transition('fade')({});

default: 'primary',
    variants: {
        primary: 'color: red',
        secondary: 'color: blue',
    },
})({});

// Responsive Utilities

breakpoints({
    xs: 'color: red',
    md: 'color: blue',
    lg: 'color: green',
})({});

up('md', 'color: red')({});

down('md', 'color: red')({});

between('md', 'lg', 'color: red')({});

// RPX Transformers

rpxTransformers.px(16).toString();
rpxTransformers.px('16rpx').toString();
rpxTransformers.border(10).toString();
rpxTransformers.border('10px solid').toString();

th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});

th.fontSize(2)({});
th.fontSize('sm')({});

th.zIndex(2)({});
th.zIndex('modal')({});

th.border(2)({});
th.border('main')({});

th.borderWidth(2)({});
th.borderWidth('sm')({});

th.borderStyle(2)({});
th.borderStyle('selected')({});

th.shadow(2)({});
th.shadow('xl')({});

// Style

const size = style({
    prop: ['size', 's'],
    cssProperty: ['width', 'height'],
    themeGet: getFontSize,
});

const StyleBox = styled.div<{ size: FontSizeProps['fontSize']; s: FontSizeProps['fontSize'] }>`

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});

th.fontSize(2)({});
th.fontSize('sm')({});

th.zIndex(2)({});
th.zIndex('modal')({});

th.border(2)({});
th.border('main')({});

th.borderWidth(2)({});
th.borderWidth('sm')({});

th.borderStyle(2)({});
th.borderStyle('selected')({});

th.shadow(2)({});
th.shadow('xl')({});

// Style

const size = style({
    prop: ['size', 's'],
    cssProperty: ['width', 'height'],
    themeGet: getFontSize,
});

th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});

th.fontSize(2)({});
th.fontSize('sm')({});

th.zIndex(2)({});
th.zIndex('modal')({});

th.border(2)({});
th.border('main')({});

th.borderWidth(2)({});
th.borderWidth('sm')({});

th.borderStyle(2)({});
th.borderStyle('selected')({});

th.shadow(2)({});
th.shadow('xl')({});

// Style

const size = style({

th.font(2)({});
th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});

th.fontSize(2)({});
th.fontSize('sm')({});

th.zIndex(2)({});
th.zIndex('modal')({});

th.border(2)({});
th.border('main')({});

th.borderWidth(2)({});
th.borderWidth('sm')({});

th.borderStyle(2)({});
th.borderStyle('selected')({});

th.shadow(2)({});
th.shadow('xl')({});

// Style

);

// Compose

const customSystem = compose(margin, padding);

type CustomSystemBoxProps = MarginProps & PaddingProps;

const CustomSystemBox = styled.div`
    ${customSystem}
`;

const customSystemBoxTest = () => (
    <div>
        
    </div>
);

// createSystemComponent

const InnerSystemComponentBox = createSystemComponent(React, 'div', shadows);

type CustomSystemBoxProps = MarginProps & PaddingProps;

const CustomSystemBox = styled.div`
    ${customSystem}
`;

const customSystemBoxTest = () => (
    <div>
        
    </div>
);

// createSystemComponent

const InnerSystemComponentBox = createSystemComponent(React, 'div', shadows);

const SystemComponentBox = styled(InnerSystemComponentBox)`
    ${shadows}
`;

const systemComponentBoxTest = () =&gt; (
    <div>
        
    </div>
);

// TH

th('colors.primary900')({});

th.color(2)({});

primary: 'color: red',
        secondary: 'color: blue',
    },
})({});

// Responsive Utilities

breakpoints({
    xs: 'color: red',
    md: 'color: blue',
    lg: 'color: green',
})({});

up('md', 'color: red')({});

down('md', 'color: red')({});

between('md', 'lg', 'color: red')({});

// RPX Transformers

rpxTransformers.px(16).toString();
rpxTransformers.px('16rpx').toString();
rpxTransformers.border(10).toString();
rpxTransformers.border('10px solid').toString();