Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add basic support for theming on Web #71

Merged
merged 1 commit into from
Feb 8, 2024

Conversation

robintown
Copy link
Member

@robintown robintown commented Feb 6, 2024

This adds basic support for overriding semantic tokens on Web via a CSS cascade layer, for which it was necessary to separate base and semantic tokens into different sets of files. Documentation for this theming mechanism will be provided over at the Compound Storybook repository, but it can be used like so:

@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css" layer(compound);

@layer compound.custom {
  :root, [class*="cpd-theme-"] {
    --cpd-color-icon-accent-tertiary: var(--cpd-color-blue-800);
  }
}

This is for element-hq/element-web#26285

This adds basic support for overriding semantic tokens on Web via a CSS cascade layer, for which it was necessary to separate base and semantic tokens into different sets of files. Documentation for this theming mechanism will be provided over at the Compound Storybook repository, but it can be used like so:

@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css" layer(compound);

@layer compound.custom {
  :root, [class*="cpd-theme-"] {
    --cpd-color-icon-accent-tertiary: var(--cpd-color-blue-800);
  }
}
Copy link
Member

@jmartinesp jmartinesp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand CSS layers at all and my knowledge of TS/JS isn't that good either, so I'm going to assume the implementation is correct and approve based on the build command not failing 😅 .

@robintown robintown removed the request for review from pixlwave February 7, 2024 18:42
@robintown robintown merged commit 20e3647 into element-hq:main Feb 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants