search

divriots / dockit-react

5 stars 5 forks source link

Support aliases in SystemUI Showcases #106

Open m4dz opened 2 years ago

m4dz commented 2 years ago

System UI Theme Specification allows for Scale aliases, e.g.:

// example fontSizes aliases
fontSizes: [
  12, 14, 16, 20, 24, 32
]
// aliases
fontSizes.body = fontSizes[2]
fontSizes.display = fontSizes[5]

but we don't support aliases syntax in the <SystemUIShowcases /> component. E.g.:

export const colors = {
  red500: 'hsl(352,100%,62%)',
  red600: 'hsl(352,100%,72%)',

  primary: '$red500',
  primary_light: '$red600',
};
<SystemUIShowcases
  theme={theme}
  showcaseKey="bg"
  componentProps={{
    width: '8rem',
    height: '8rem',
    boxShadow: 'large',
    borderRadius: 4,
    checkeredBackground: true,
  }}
/>

Screenshot 2021-12-22 at 13 00 23

primary and primary_light should be rendered as red500 and red600.

georges-gomes commented 2 years ago

This is not system UI compliant I think. This is stitches specific.

We can support it but optionally I think