Skip to content

fix: generate dark mode overrides for tokens referencing other tokens #132

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.

Sign up for GitHub

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

Open
TrevorBurnham wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: generate dark mode overrides for tokens referencing other tokens #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions src/browser/__tests__/__snapshots__/index.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`applyTheme > with baseThemeId > attaches one style node containing over
}
@media not print {.dark.dark.secondary-theme:not(#\\9){
--shadow-css:orange;
--boxShadow-css:var(--brown-css);
--boxShadow-css:black;
}}
.secondary-theme.secondary-theme .navigation:not(#\\9){
--shadow-css:pink;
Expand All @@ -21,11 +21,11 @@ exports[`applyTheme > with baseThemeId > attaches one style node containing over
--shadow-css:pink;
}
@media not print {.dark.dark.secondary-theme .navigation:not(#\\9){
--shadow-css:var(--grey-css);
--shadow-css:grey;
--buttonShadow-css:green;
}}
@media not print {.dark.dark.navigation.secondary-theme:not(#\\9){
--shadow-css:var(--grey-css);
--shadow-css:grey;
--buttonShadow-css:green;
}}"
`;
Expand All @@ -42,18 +42,18 @@ exports[`applyTheme > with secondary theme > attaches one style node containing
}
@media not print {.dark.dark:not(#\\9){
--shadow-css:orange;
--boxShadow-css:var(--brown-css);
--boxShadow-css:brown;
}}
.navigation.navigation:not(#\\9){
--shadow-css:pink;
--boxShadow-css:purple;
}
@media not print {.dark.dark .navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}
@media not print {.dark.dark.navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}"
`;
Expand All @@ -70,18 +70,18 @@ exports[`applyTheme > with targetDocument > attaches one style node containing o
}
@media not print {.dark.dark:not(#\\9){
--shadow-css:orange;
--boxShadow-css:var(--brown-css);
--boxShadow-css:brown;
}}
.navigation.navigation:not(#\\9){
--shadow-css:pink;
--boxShadow-css:purple;
}
@media not print {.dark.dark .navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}
@media not print {.dark.dark.navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}"
`;
Expand All @@ -98,18 +98,18 @@ exports[`applyTheme > without secondary theme > attaches one style node containi
}
@media not print {.dark.dark:not(#\\9){
--shadow-css:orange;
--boxShadow-css:var(--brown-css);
--boxShadow-css:brown;
}}
.navigation.navigation:not(#\\9){
--shadow-css:pink;
--boxShadow-css:purple;
}
@media not print {.dark.dark .navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}
@media not print {.dark.dark.navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}"
`;
Expand All @@ -126,7 +126,7 @@ exports[`generateThemeStylesheet > with baseThemeId > creates override styles 1`
}
@media not print {.dark.dark.secondary-theme:not(#\\9){
--shadow-css:orange;
--boxShadow-css:var(--brown-css);
--boxShadow-css:black;
}}
.secondary-theme.secondary-theme .navigation:not(#\\9){
--shadow-css:pink;
Expand All @@ -135,11 +135,11 @@ exports[`generateThemeStylesheet > with baseThemeId > creates override styles 1`
--shadow-css:pink;
}
@media not print {.dark.dark.secondary-theme .navigation:not(#\\9){
--shadow-css:var(--grey-css);
--shadow-css:grey;
--buttonShadow-css:green;
}}
@media not print {.dark.dark.navigation.secondary-theme:not(#\\9){
--shadow-css:var(--grey-css);
--shadow-css:grey;
--buttonShadow-css:green;
}}"
`;
Expand All @@ -163,18 +163,18 @@ exports[`generateThemeStylesheet > with secondary theme > creates override style
}
@media not print {.dark.dark:not(#\\9){
--shadow-css:orange;
--boxShadow-css:var(--brown-css);
--boxShadow-css:brown;
}}
.navigation.navigation:not(#\\9){
--shadow-css:pink;
--boxShadow-css:purple;
}
@media not print {.dark.dark .navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}
@media not print {.dark.dark.navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}"
`;
Expand All @@ -191,18 +191,18 @@ exports[`generateThemeStylesheet > without secondary theme > creates override st
}
@media not print {.dark.dark:not(#\\9){
--shadow-css:orange;
--boxShadow-css:var(--brown-css);
--boxShadow-css:brown;
}}
.navigation.navigation:not(#\\9){
--shadow-css:pink;
--boxShadow-css:purple;
}
@media not print {.dark.dark .navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}
@media not print {.dark.dark.navigation:not(#\\9){
--shadow-css:var(--brown-css);
--shadow-css:brown;
--buttonShadow-css:green;
}}"
`;
10 changes: 5 additions & 5 deletions src/build/__tests__/__snapshots__/internal.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ exports[`builds internal themed components without errors 1`] = `
--font-family-base-91xi75:"Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
--color-orange-500-vz48fa:#ec7211;
--color-orange-700-sk82ji:#dd6b10;
--color-background-button-primary-default-nhput1:var(--color-orange-500-vz48fa);
--color-background-button-primary-active-xbf2p5:var(--color-orange-700-sk82ji);
--color-background-button-primary-default-nhput1:#ec7211;
--color-background-button-primary-active-xbf2p5:#dd6b10;
--space-xxs-c0i4qj:4px;
--space-xs-djjbsd:8px;
--space-scaled-xs-yqelf2:var(--space-xs-djjbsd);
--space-scaled-xs-yqelf2:8px;
}

.compact-mode:not(#\\9) {
--space-scaled-xs-yqelf2:var(--space-xxs-c0i4qj);
--space-scaled-xs-yqelf2:4px;
}

.dark-mode:not(#\\9) {
--color-background-button-primary-active-xbf2p5:var(--color-orange-500-vz48fa);
--color-background-button-primary-active-xbf2p5:#ec7211;
}"
`;
30 changes: 15 additions & 15 deletions src/build/__tests__/__snapshots__/public-secondary.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,31 @@ exports[`Build-time theming of main theme with matching baseThemeId generates th
--color-orange-500-25sm1g:#ec7211;
--color-orange-700-2auf4j:#dd6b10;
--color-background-button-primary-default-cqohzr:#aaaaaa;
--color-background-button-primary-active-h8she0:var(--color-orange-700-2auf4j);
--color-background-button-primary-active-h8she0:#dd6b10;
--space-xxs-ihlmrd:4px;
--space-xs-xhls0c:8px;
--space-scaled-xs-26ut8b:var(--space-xs-xhls0c);
--space-scaled-xs-26ut8b:8px;
}

.compact-mode:not(#\\9) {
--space-scaled-xs-26ut8b:var(--space-xxs-ihlmrd);
--space-scaled-xs-26ut8b:4px;
}

.dark-mode:not(#\\9) {
--color-background-button-primary-default-cqohzr:#bbbbbb;
--color-background-button-primary-active-h8she0:var(--color-orange-500-25sm1g);
--color-background-button-primary-active-h8she0:#ec7211;
}

.secondary:not(#\\9) {
--color-orange-500-25sm1g:#ec72aa;
--color-orange-700-2auf4j:#dd6baa;
--color-background-button-primary-default-cqohzr:var(--color-orange-500-25sm1g);
--color-background-button-primary-active-h8she0:var(--color-orange-700-2auf4j);
--color-background-button-primary-default-cqohzr:#ec72aa;
--color-background-button-primary-active-h8she0:#dd6baa;
}

.dark-mode.secondary:not(#\\9) {
--color-background-button-primary-default-cqohzr:var(--color-orange-700-2auf4j);
--color-background-button-primary-active-h8she0:var(--color-orange-500-25sm1g);
--color-background-button-primary-default-cqohzr:#dd6baa;
--color-background-button-primary-active-h8she0:#ec72aa;
}"
`;

Expand All @@ -39,30 +39,30 @@ exports[`Build-time theming of secondary theme generates the correct css files 1
--font-family-base-rpbu7d:"Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
--color-orange-500-25sm1g:#ec7211;
--color-orange-700-2auf4j:#dd6b10;
--color-background-button-primary-default-l567s3:var(--color-orange-500-25sm1g);
--color-background-button-primary-active-h8she0:var(--color-orange-700-2auf4j);
--color-background-button-primary-default-l567s3:#ec7211;
--color-background-button-primary-active-h8she0:#dd6b10;
--space-xxs-ihlmrd:4px;
--space-xs-xhls0c:8px;
--space-scaled-xs-26ut8b:var(--space-xs-xhls0c);
--space-scaled-xs-26ut8b:8px;
}

.compact-mode:not(#\\9) {
--space-scaled-xs-26ut8b:var(--space-xxs-ihlmrd);
--space-scaled-xs-26ut8b:4px;
}

.dark-mode:not(#\\9) {
--color-background-button-primary-active-h8she0:var(--color-orange-500-25sm1g);
--color-background-button-primary-active-h8she0:#ec7211;
}

.secondary:not(#\\9) {
--color-orange-500-25sm1g:#ec72aa;
--color-orange-700-2auf4j:#dd6baa;
--color-background-button-primary-default-l567s3:#aaaaaa;
--color-background-button-primary-active-h8she0:var(--color-orange-700-2auf4j);
--color-background-button-primary-active-h8she0:#dd6baa;
}

.dark-mode.secondary:not(#\\9) {
--color-background-button-primary-default-l567s3:#bbbbbb;
--color-background-button-primary-active-h8she0:var(--color-orange-500-25sm1g);
--color-background-button-primary-active-h8she0:#ec72aa;
}"
`;
Loading
Loading