refactor: update design tokens structure

openedx · Aug 1, 2024 · 69c2200 · 69c2200
1 parent 96036c8
commit 69c2200
Show file tree

Hide file tree

Showing 33 changed files with 1,631 additions and 1,536 deletions.
diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss
@@ -461,12 +461,12 @@ $max-width-xl: var(--pgn-container-max-width-xl) !default;
 $line-height-lg: var(--pgn-line-height-lg) !default;
 $line-height-sm: var(--pgn-line-height-sm) !default;
 
-$border-width: var(--pgn-border-width) !default;
-$border-color: var(--pgn-border-color) !default;
+$border-width: var(--pgn-size-border-width) !default;
+$border-color: var(--pgn-color-border) !default;
 
-$border-radius: var(--pgn-border-radius-base) !default;
-$border-radius-lg: var(--pgn-border-radius-lg) !default;
-$border-radius-sm: var(--pgn-border-radius-sm) !default;
+$border-radius: var(--pgn-size-border-radius-base) !default;
+$border-radius-lg: var(--pgn-size-border-radius-lg) !default;
+$border-radius-sm: var(--pgn-size-border-radius-sm) !default;
 
 $rounded-pill:                50rem !default;
 

diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss
diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss
diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json
diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json
diff --git a/tokens/build/variables.css b/tokens/build/variables.css
diff --git a/tokens/src/alias/color.json b/tokens/src/alias/color.json
@@ -30,6 +30,7 @@
     "input": {
       "focus": { "value": "{color.primary.500.value}" }
     },
+    "border": { "value": "{color.gray.200.value}", "source": "$border-color" },
     "theme": {
       "background": {
         "primary": { "value": "{color.primary.100.value}" },

diff --git a/tokens/src/alias/size.json b/tokens/src/alias/size.json
@@ -0,0 +1,12 @@
+{
+  "size": {
+    "border": {
+      "width": { "value": "0.063rem", "source": "$border-width" },
+      "radius": {
+        "base": { "value": ".375rem", "source": "$border-radius" },
+        "lg": { "value": ".425rem", "source": "$border-radius-lg" },
+        "sm": { "value": ".25rem", "source": "$border-radius-sm" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/components/Alert.json b/tokens/src/components/Alert.json
@@ -8,7 +8,7 @@
       "bottom": { "value": "1rem", "source": "$alert-margin-bottom" }
     },
     "border": {
-      "radius": { "value": "{border.radius.base}", "source": "$alert-border-radius" },
+      "radius": { "value": "{size.border.radius.base}", "source": "$alert-border-radius" },
       "width": { "value": "0", "source": "$alert-border-width" }
     },
     "font": {

diff --git a/tokens/src/components/Breadcrumb.json b/tokens/src/components/Breadcrumb.json
@@ -21,7 +21,7 @@
         "width": { "value": ".0625rem", "source": "$breadcrumb-border-focus-width" }
       },
       "radius": {
-        "base": { "value": "{border.radius.base.value}", "source": "$breadcrumb-border-radius" },
+        "base": { "value": "{size.border.radius.base.value}", "source": "$breadcrumb-border-radius" },
         "focus": { "value": ".125rem", "source": "$breadcrumb-focus-border-radius" }
       }
     },

diff --git a/tokens/src/components/Button/core.json b/tokens/src/components/Button/core.json
@@ -31,9 +31,9 @@
     "border": {
       "width": { "value": "{input.btn.border.width.value}", "source": "$btn-border-width" },
       "radius": {
-        "base": { "value": "{border.radius.base.value}", "source": "$btn-border-radius" },
-        "lg": { "value": "{border.radius.lg.value}", "source": "$btn-border-radius-lg" },
-        "sm": { "value": "{border.radius.sm.value}", "source": "$btn-border-radius-sm" }
+        "base": { "value": "{size.border.radius.base.value}", "source": "$btn-border-radius" },
+        "lg": { "value": "{size.border.radius.lg.value}", "source": "$btn-border-radius-lg" },
+        "sm": { "value": "{size.border.radius.sm.value}", "source": "$btn-border-radius-sm" }
       }
     },
     "box-shadow": {

diff --git a/tokens/src/components/Card.json b/tokens/src/components/Card.json
@@ -5,9 +5,9 @@
       "y": { "value": ".75rem", "source": "$card-spacer-y" }
     },
     "border": {
-      "width": { "value": "{border.width.value}", "source": "$card-border-width" },
+      "width": { "value": "{size.border.width.value}", "source": "$card-border-width" },
       "radius": {
-        "base": { "value": "{border.radius.base.value}", "source": "$card-border-radius" },
+        "base": { "value": "{size.border.radius.base.value}", "source": "$card-border-radius" },
         "image": { "value": ".3125rem", "source": "$card-image-border-radius" },
         "logo": { "value": ".25rem", "source": "$card-logo-border-radius" }
       },

diff --git a/tokens/src/components/Dropdown.json b/tokens/src/components/Dropdown.json
@@ -36,9 +36,9 @@
           "amount": 0.15
         }]
       },
-      "width": { "value": "{border.width.value}", "source": "$dropdown-border-width" },
+      "width": { "value": "{size.border.width.value}", "source": "$dropdown-border-width" },
       "radius": {
-        "base": { "value": "{border.radius.base.value}", "source": "$dropdown-border-radius" },
+        "base": { "value": "{size.border.radius.base.value}", "source": "$dropdown-border-radius" },
         "inner": {
           "value": "calc({dropdown.border.radius.base.value} - {dropdown.border.width.value})",
           "source": "$dropdown-inner-border-radius"