Skip to content

Support aliases in SystemUI Showcases #106

@m4dz

Description

@m4dz

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions