feat: added expanded tokens

openedx · Sep 8, 2024 · e73a4f9 · e73a4f9
1 parent 029325a
commit e73a4f9
Show file tree

Hide file tree

Showing 17 changed files with 873 additions and 77 deletions.
diff --git a/lib/build-tokens.js b/lib/build-tokens.js
@@ -4,7 +4,7 @@ const {
   initializeStyleDictionary,
   colorTransform,
 } = require('../tokens/style-dictionary');
-const { createIndexCssFile } = require('../tokens/utils');
+const { createIndexCssFile, constructExpandedToken } = require('../tokens/utils');
 
 /**
  * Builds tokens for CSS styles from JSON source files.
@@ -53,6 +53,7 @@ async function buildTokensCommand(commandArgs) {
       path.resolve(__dirname, '../tokens/src/core/**/*.json'),
       path.resolve(__dirname, '../tokens/src/core/**/*.toml'),
     ],
+    expand: (token) => constructExpandedToken(token),
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -41,7 +41,7 @@
   --pgn-transition-carousel-control: opacity .15s ease;
   --pgn-transition-carousel-indicator: opacity .6s ease;
   --pgn-transition-carousel-duration: .6s;
-  --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
+  --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out 0ms;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
   --pgn-typography-print-page-size: a3;

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1573,8 +1573,8 @@
   --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
   --pgn-elevation-scrollable-body-box-shadow: #0000008C;
   --pgn-elevation-progress-bar-box-shadow: none;
-  --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
-  --pgn-elevation-menu-box-shadow: var(--pgn-elevation-box-shadow-base);
+  --pgn-elevation-pagination-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
+  --pgn-elevation-menu-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .3);
   --pgn-elevation-image-thumbnail-box-shadow: none;
   --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-black-active: none;
@@ -1612,9 +1612,9 @@
   --pgn-elevation-icon-button-box-shadow-primary-active: none;
   --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
   --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
-  --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
+  --pgn-elevation-form-control-select-border-focus: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
   --pgn-elevation-form-control-select-border-base: none;
-  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
+  --pgn-elevation-form-control-file-focus: 0 0 0 1px var(--pgn-color-primary-500);
   --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
   --pgn-elevation-form-control-range-thumb-base: none;
@@ -1630,7 +1630,7 @@
   --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
   --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);
   --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300);
-  --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
+  --pgn-elevation-data-table-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);
   --pgn-elevation-code-kbd-box-shadow: none;
   --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
   --pgn-elevation-btn-box-shadow-active: none;

diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
@@ -1,6 +1,6 @@
 {
   "spacing": {
-    "$type": "transition",
+    "$type": "dimension",
     "bubble": {
       "expandable-padding": {
         "y": { "source": "$bubble-expandable-padding-y", "$value": "0" },

diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
@@ -25,11 +25,20 @@
     }
   },
   "transition": {
+    "$type": "transition",
     "carousel": {
-      "base": { "source": "$carousel-transition", "$value": "transform {transition.carousel.duration} ease-in-out", "$type": "transition" },
+      "base": {
+        "source": "$carousel-transition",
+        "$value": {
+          "property": "transform",
+          "duration": "{transition.carousel.duration}",
+          "delay": "0ms",
+          "timingFunction": "ease-in-out"
+        }
+      },
       "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" },
-      "indicator": { "source": "$carousel-indicator-transition", "$value": "opacity .6s ease", "$type": "transition" },
-      "control": { "source": "$carousel-control-transition", "$value": "opacity .15s ease", "$type": "transition" }
+      "indicator": { "source": "$carousel-indicator-transition", "$value": "opacity .6s ease" },
+      "control": { "source": "$carousel-control-transition", "$value": "opacity .15s ease" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
@@ -4,7 +4,22 @@
     "annotation": {
       "box-shadow": {
         "source": "$annotation-box-shadow",
-        "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))"
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px",
+            "dropShadow": true
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px",
+            "dropShadow": true
+          }
+        ]
       }
     }
   },

diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json
@@ -6,7 +6,15 @@
   "elevation": {
     "$type": "shadow",
     "close-button": {
-      "text-shadow": { "source": "$close-text-shadow", "$value": "0 1px 0 {color.white}" }
+      "text-shadow": {
+        "source": "$close-text-shadow",
+        "$value": {
+          "color": "{color.white}",
+          "offsetX": "0",
+          "offsetY": "1px",
+          "blur": "0"
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
@@ -12,10 +12,50 @@
   "elevation": {
     "$type": "shadow",
     "dropzone": {
-      "hover": { "source": "$dropzone-box-shadow-hover", "$value": "inset 0 0 0 2px {color.info.300}" },
-      "focus": { "source": "$dropzone-box-shadow-focus", "$value": "inset 0 0 0 2px {color.info.300}" },
-      "active": { "source": "$dropzone-box-shadow-active", "$value": "inset 0 0 0 2px {color.primary.500}" },
-      "error": { "source": "$dropzone-box-shadow-error", "$value": "inset 0 0 0 2px {color.danger.300}" }
+      "hover": {
+        "source": "$dropzone-box-shadow-hover",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": true
+        }
+      },
+      "focus": {
+        "source": "$dropzone-box-shadow-focus",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": true
+        }
+      },
+      "active": {
+        "source": "$dropzone-box-shadow-active",
+        "$value": {
+          "color": "{color.primary.500}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": true
+        }
+      },
+      "error": {
+        "source": "$dropzone-box-shadow-error",
+        "$value": {
+          "color": "{color.danger.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": true
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
@@ -4,14 +4,32 @@
     "form": {
       "input": {
         "base": { "source": "$input-box-shadow", "$value": "none" },
-        "focus": { "source": "$input-focus-box-shadow", "$value": "0 0 0 1px {color.primary.500}" }
+        "focus": {
+          "source": "$input-focus-box-shadow",
+          "$value": {
+            "color": "{color.primary.500}",
+            "spread": "1px",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
+        }
       },
       "control": {
         "indicator": {
           "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
           "checked": {
             "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
-            "focus": { "source": "$custom-control-indicator-focus-box-shadow", "$value": "0 0 0 4px rgba(0, 0, 0, .1)" }
+            "focus": {
+              "source": "$custom-control-indicator-focus-box-shadow",
+              "$value": {
+                "color": "rgba(0, 0, 0, .1)",
+                "spread": "4px",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "0"
+              }
+            }
           },
           "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
         },
@@ -26,7 +44,16 @@
             "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
             "focus": {
               "source": "$custom-range-thumb-focus-box-shadow",
-              "$value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}"
+              "$value": [
+                {
+                  "color": "{color.body.bg}",
+                  "spread": "1px",
+                  "offsetX": "0",
+                  "offsetY": "0",
+                  "blur": "0"
+                },
+                "{size.form.input.width.focus}"
+              ]
             }
           }
         },