feat: increase the specificity of the wpds-dark selector to ensure it…

… overrides light variables
washingtonpost · Mar 25, 2024 · fd7748f · fd7748f
1 parent 2640be2
commit fd7748f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -8,4 +8,4 @@ node_modules
 out
 jest-coverage
 plop-templates
-/ui/theme/src/tokens.ts
+ui/theme/src/tokens.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "./tsconfig.base.json",
+  "exclude": ["./ui/theme/src/tokens.ts"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {

diff --git a/ui/theme/src/stitches.config.ts b/ui/theme/src/stitches.config.ts
@@ -113,14 +113,21 @@ export const {
 } = WPDS;
 export const utils = config.utils;
 
-export const darkTheme = createTheme(`${prefix}-dark`, {
+const _darkTheme = createTheme(`${prefix}-dark.${prefix}-dark`, {
   colors: {
     ...tokens.dark,
     ...tokens.staticColors,
     ...tokens.darkTheme,
   },
 });
 
+export const darkTheme = {
+  className: `${prefix}-dark`,
+  selector: _darkTheme.selector,
+  colors: _darkTheme.colors,
+  toString: () => `${prefix}-dark`,
+};
+
 export const globalStyles = globalCss({
   ":root": {
     "--base": `${tokens.base}`,