style: support design tokens in ::selection

https://kilianvalkhof.com/2023/css-html/root-isnt-global/
nl-design-system · May 4, 2023 · fb62efe · fb62efe · vercel · May 4, 2023
1 parent 508f158
commit fb62efe
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/proprietary/design-tokens/src/background-image-icon.scss b/proprietary/design-tokens/src/background-image-icon.scss
@@ -5,7 +5,8 @@
  */
 
 .utrecht-theme,
-.utrecht-theme ::backdrop {
+.utrecht-theme ::backdrop,
+.utrecht-theme ::selection {
   --utrecht-menulijst-item-background-image: url("./pijltje.svg");
   --utrecht-link-icon-left-background-image: url("./pijltje.svg");
   --utrecht-search-bar-input-background-image: url("./icoon-zoek-rood.svg");

diff --git a/proprietary/design-tokens/src/dark/index.scss b/proprietary/design-tokens/src/dark/index.scss
@@ -8,6 +8,7 @@
 @import "../../dist/dark/mixin-theme";
 
 .utrecht-theme--color-scheme-dark,
-.utrecht-theme--color-scheme-dark ::backdrop {
+.utrecht-theme--color-scheme-dark ::backdrop,
+.utrecht-theme--color-scheme-dark ::selection {
   @include utrecht-theme--dark;
 }
diff --git a/proprietary/design-tokens/src/index.scss b/proprietary/design-tokens/src/index.scss
@@ -12,7 +12,8 @@
 @import "./responsive";
 
 .utrecht-theme,
-.utrecht-theme ::backdrop {
+.utrecht-theme ::backdrop,
+.utrecht-theme ::selection {
   @include utrecht-theme;
 
   utrecht-page-footer,
@@ -29,8 +30,10 @@
 @media (prefers-color-scheme: dark) {
   .utrecht-theme--media-query,
   .utrecht-theme--media-query ::backdrop,
+  .utrecht-theme--media-query ::selection,
   .utrecht-theme--media-query-color-scheme,
-  .utrecht-theme--media-query-color-scheme ::backdrop {
+  .utrecht-theme--media-query-color-scheme ::backdrop,
+  .utrecht-theme--media-query-color-scheme ::selection {
     @include utrecht-theme--dark;
   }
 }
diff --git a/proprietary/design-tokens/src/style-dictionary-config-dark.js b/proprietary/design-tokens/src/style-dictionary-config-dark.js
@@ -18,7 +18,7 @@ module.exports = {
           destination: 'root.css',
           format: 'css/variables',
           options: {
-            selector: ':root, ::backdrop',
+            selector: ':root, ::backdrop, ::selection',
             outputReferences: true,
           },
         },
@@ -32,7 +32,7 @@ module.exports = {
           destination: 'index.css',
           format: 'css/variables',
           options: {
-            selector: '.utrecht-theme--dark, .utrecht-theme--dark ::backdrop',
+            selector: '.utrecht-theme--dark, .utrecht-theme--dark ::backdrop, .utrecht-theme--dark ::selection',
             outputReferences: true,
           },
         },

diff --git a/proprietary/design-tokens/style-dictionary.config.json b/proprietary/design-tokens/style-dictionary.config.json
@@ -50,7 +50,7 @@
           "destination": "root.css",
           "format": "css/variables",
           "options": {
-            "selector": ":root, ::backdrop",
+            "selector": ":root, ::backdrop, ::selection",
             "outputReferences": true
           }
         }
@@ -64,7 +64,7 @@
           "destination": "theme.css",
           "format": "css/variables",
           "options": {
-            "selector": ".utrecht-theme, .utrecht-theme ::backdrop",
+            "selector": ".utrecht-theme, .utrecht-theme ::backdrop, .utrecht-theme ::selection",
             "outputReferences": true
           }
         }