WCSS support for themes #134
Comments
|
This work to be refined once we have decided and released updated auro tokens. |
blackfalcon
added a commit
that referenced
this issue
Sep 14, 2023
BREAKING CHANGE: This commit updates the repo's dependency on the newly released Auro Design Tokens 4.x. Changes to be committed: modified: package-lock.json modified: package.json
Merged
6 tasks
blackfalcon
added a commit
that referenced
this issue
Sep 15, 2023
Changes to be committed: modified: src/_core.scss modified: src/_essentials.scss
blackfalcon
added a commit
that referenced
this issue
Sep 15, 2023
This commit updates all uses** of Sass variables to use CSS custom
properties with a Sass variable as a fallback. This will allow WCSS to
be used in themed environments and the themed token will pass into WCSS.
If the toke is not updated and the token is simply not available, the
Sass variable's value from the last processed version will take it's
place.
**Some calc functions that us the `#{}` syntax is still left to only use
Sass variables. This to keep the code simplified.
Changes to be committed:
modified: src/_core.scss
modified: src/_essentials.scss
modified: src/_fonts.scss
modified: src/_grids.scss
modified: src/_headings.scss
modified: src/_normalize.scss
modified: src/componentSupport/_containedButtons.scss
modified: src/componentSupport/_table.scss
modified: src/componentSupport/_tablist.scss
modified: src/elementDemoStyles/demoWrapper.scss
modified: src/elementDemoStyles/elementDemoStyles.scss
modified: src/utilityClasses/_fontStyles.scss
modified: src/utilityClasses/_listProperties.scss
blackfalcon
added a commit
that referenced
this issue
Sep 16, 2023
blackfalcon
added a commit
that referenced
this issue
Sep 16, 2023
blackfalcon
added a commit
that referenced
this issue
Sep 16, 2023
blackfalcon
added a commit
that referenced
this issue
Sep 16, 2023
blackfalcon
added a commit
that referenced
this issue
Sep 19, 2023
blackfalcon
added a commit
that referenced
this issue
Sep 20, 2023
This commit will address the updated needed to update import references for the newly released @aurodesignsystem/design-tokens. Changes to be committed: modified: src/elementDemoStyles/demoWrapper.scss modified: src/utilityMixins/_layoutPropertiesGenerator.scss modified: src/utilityVariables/_spacing-options.scss modified: tests/breakpoint.spec.scss modified: tests/grids.spec.scss modified: tests/propGenerator.spec.scss modified: tests/roleButton.spec.scss modified: tests/roleTab.spec.scss modified: tests/spacing.spec.scss
blackfalcon
added a commit
that referenced
this issue
Sep 25, 2023
BREAKING CHANGE: This commit updates the repo's dependency on the newly released Auro Design Tokens 4.x. Changes to be committed: modified: package-lock.json modified: package.json
blackfalcon
added a commit
that referenced
this issue
Sep 25, 2023
This commit updates all uses** of Sass variables to use CSS custom
properties with a Sass variable as a fallback. This will allow WCSS to
be used in themed environments and the themed token will pass into WCSS.
If the toke is not updated and the token is simply not available, the
Sass variable's value from the last processed version will take it's
place.
**Some calc functions that us the `#{}` syntax is still left to only use
Sass variables. This to keep the code simplified.
Changes to be committed:
modified: src/_core.scss
modified: src/_essentials.scss
modified: src/_fonts.scss
modified: src/_grids.scss
modified: src/_headings.scss
modified: src/_normalize.scss
modified: src/componentSupport/_containedButtons.scss
modified: src/componentSupport/_table.scss
modified: src/componentSupport/_tablist.scss
modified: src/elementDemoStyles/demoWrapper.scss
modified: src/elementDemoStyles/elementDemoStyles.scss
modified: src/utilityClasses/_fontStyles.scss
modified: src/utilityClasses/_listProperties.scss
blackfalcon
added a commit
that referenced
this issue
Sep 25, 2023
This commit will address the updated needed to update import references for the newly released @aurodesignsystem/design-tokens. Changes to be committed: modified: src/elementDemoStyles/demoWrapper.scss modified: src/utilityMixins/_layoutPropertiesGenerator.scss modified: src/utilityVariables/_spacing-options.scss modified: tests/breakpoint.spec.scss modified: tests/grids.spec.scss modified: tests/propGenerator.spec.scss modified: tests/roleButton.spec.scss modified: tests/roleTab.spec.scss modified: tests/spacing.spec.scss
blackfalcon
pushed a commit
that referenced
this issue
Sep 25, 2023
# [5.0.0](v4.8.0...v5.0.0) (2023-09-25) ### Features * remove all deprecated references [#169](#169) ([711d729](711d729)) * update to use CSS variables with fallback [#134](#134) ([9546be4](9546be4)) ### Performance Improvements * **deps:** update repo to support Node 18 [#155](#155) ([c208bad](c208bad)) * **tokens:** update to design tokens 4.x [#134](#134) ([8f17359](8f17359)) * update all references from auro- to ds- [#169](#169) ([57831ef](57831ef)) * update insetUtility to maintain current support ([a136b9d](a136b9d)) * update package config [#171](#171) ([4ca4e7d](4ca4e7d)) ### BREAKING CHANGES * This commit updates the .npmignore package config to reduce the scope of the packaged files and directories This commit also removes the necessity of copying all the src files to a dist dir and instead allows the src dir to be added to the package. Consumers will have to update dir references from ./dist to ./src in most import cases. Processed files are still located in the ./dist dir. Changes to be committed: modified: .github/workflows/testPublish.yml modified: .npmignore modified: README.md modified: package.json * This commit removes the legacy insetUtility mixin and replaces it with a static output of the generated legacy values from the previous version of WCSS and design tokens. Users will not get a failure when importing the file reference src/utilityMixins/_insetUtility.scss but instead of the mixin generating a subset of selectors, all the static selectors will be added to the project's CSS output. This legacy feature has also been designated as DEPRECATED and should be deleted with the next MAJOR release. * This commit will require all consumers to update their app to use @aurodesignsystem/design-tokens v4.x All references in documentation and code has been updated from `auro-` to `ds-` per the new design token specification. Changes to be committed: modified: FAQ.md modified: README.md modified: demo/3col.html modified: packageScripts/postinstall.js modified: src/* modified: tests/* * **tokens:** This commit updates the repo's dependency on the newly released Auro Design Tokens 4.x. Changes to be committed: modified: package-lock.json modified: package.json
6 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
General Support Request
Now that we are supporting themes with Auro elements, we need to consider the impact on WCSS. Currently, 100% of the code is using Sass variables. This results in a static CSS output, see example
Support request
WCSS should be updated to remove all references to Sass variables in place of CSS custom properties using Sass variables as fallbacks.
There is no guarantee that all teams are using WCSS with design tokens and they are expecting that all the CSS will be delivered with the actual values. If this is true, then there will be a huge issue with breaking UIs as the tokens are not loaded.
This work will also require the general mapping between a defined theme naming convention, e.g.
auro-and the variable used in the code. This is necessary as to allow for additional themes to be applied to WCSS.Exit criteria
This work will be considered complete once
The text was updated successfully, but these errors were encountered: