[BD-46] feat: refactoring design tokens folders structure (openedx#2069)

* feat: refactoring design tokens folders structure * fix: add missing "type" attribute to tokens and consider token's theme in color-yiq function * docs: update docstring for colorYiq function --------- Co-authored-by: Viktor Rusakov <[email protected]>
raccoongang · Aug 17, 2023 · f24460f · f24460f
1 parent a467d09
commit f24460f
Show file tree

Hide file tree

Showing 118 changed files with 1,383 additions and 1,261 deletions.
diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 16 Feb 2023 10:37:12 GMT
+ * Generated on Fri, 24 Feb 2023 12:30:21 GMT
  */
 
 .bg-dark {

diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
diff --git a/tokens/sass-helpers.js b/tokens/sass-helpers.js
@@ -7,21 +7,21 @@ const chroma = require('chroma-js');
  * based on contrast value of the input color
  *
  * @param color - chroma-js color instance
- * @param {String} [light] - light color variant, defaults to 'yiq-text-light' from ./src/global/other.json
- * @param {String} [dark] - dark color variant, defaults to 'yiq-text-dark' from ./src/global/other.json
- * @param {Number} [threshold] - contrast threshold, defaults to 'yiq-contrasted-threshold'
- * from ./src/global/other.json
+ * @param {String} [themeVariant] - theme variant name that will be used to find default contrast colors
+ * @param {String} [light] - light color variant from ./src/themes/{themeVariant}/global/other.json
+ * @param {String} [dark] - dark color variant from ./src/themes/{themeVariant}/global/other.json
+ * @param {Number} [threshold] - contrast threshold from ./src/core/global/other.json
  * @return chroma-js color instance (one of dark or light variants)
  */
-function colorYiq(color, light, dark, threshold) {
-  const defaultsFile = fs.readFileSync(path.resolve(__dirname, 'src', 'global', 'other.json'), 'utf8');
-  const defaults = JSON.parse(defaultsFile);
+function colorYiq(color, light, dark, threshold, themeVariant = 'light') {
+  const defaultThresholdFile = fs.readFileSync(path.resolve(__dirname, 'src/core/global', 'other.json'), 'utf8');
+  const defaultThreshold = JSON.parse(defaultThresholdFile)['yiq-contrasted-threshold'];
 
+  const defaultColorsFile = fs.readFileSync(path.resolve(__dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8');
   const {
     'yiq-text-dark': defaultDark,
     'yiq-text-light': defaultLight,
-    'yiq-contrasted-threshold': defaultThreshold,
-  } = defaults;
+  } = JSON.parse(defaultColorsFile);
 
   const contrastThreshold = threshold || defaultThreshold;
   const lightColor = light || defaultLight;

diff --git a/tokens/src/alias/size.json → tokens/src/core/alias/size.json b/tokens/src/alias/size.json → tokens/src/core/alias/size.json
diff --git a/tokens/src/components/ActionRow.json → tokens/src/core/components/ActionRow.json b/tokens/src/components/ActionRow.json → tokens/src/core/components/ActionRow.json
diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json
@@ -0,0 +1,30 @@
+{
+  "spacing": {
+    "alert": {
+      "padding": {
+        "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" },
+        "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" }
+      },
+      "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" },
+      "actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" },
+      "icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" }
+    }
+  },
+  "typography": {
+    "alert": {
+      "font": {
+        "weight-link": { "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" },
+        "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" }
+      },
+      "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" }
+    }
+  },
+  "size": {
+    "alert": {
+      "border": {
+        "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" },
+        "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" }
+      }
+    }
+  }
+}
diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json
@@ -0,0 +1,25 @@
+{
+  "spacing": {
+    "annotation": {
+      "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" },
+      "arrow-side": {
+        "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" }
+      }
+    }
+  },
+  "typography": {
+    "annotation": {
+      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" },
+      "line-height": { "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height" }
+    }
+  },
+  "size": {
+    "annotation": {
+      "arrow-border": {
+        "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" }
+      },
+      "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" },
+      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" }
+    }
+  }
+}
diff --git a/tokens/src/components/Avatar.json → tokens/src/core/components/Avatar.json b/tokens/src/components/Avatar.json → tokens/src/core/components/Avatar.json
@@ -1,9 +1,4 @@
 {
-  "color": {
-    "avatar": {
-      "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" }
-    }
-  },
   "size": {
     "avatar": {
       "base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" },

diff --git a/tokens/src/components/AvatarButton.json → tokens/src/core/components/AvatarButton.json b/tokens/src/components/AvatarButton.json → tokens/src/core/components/AvatarButton.json
diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
@@ -0,0 +1,33 @@
+{
+  "spacing": {
+    "badge": {
+      "padding": {
+        "x": {
+          "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" },
+          "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" }
+        },
+        "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" }
+      }
+    }
+  },
+  "typography": {
+    "badge": {
+      "font": {
+        "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" },
+        "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight" }
+      }
+    }
+  },
+  "size": {
+    "badge": {
+      "border-radius": {
+        "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" },
+        "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" }
+      },
+      "focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" }
+    }
+  },
+  "transition": {
+    "badge": { "value": "none", "type": "transition", "source": "$badge-transition" }
+  }
+}
diff --git a/tokens/src/components/Breadcrumb.json → tokens/src/core/components/Breadcrumb.json b/tokens/src/components/Breadcrumb.json → tokens/src/core/components/Breadcrumb.json
@@ -1,17 +1,4 @@
 {
-  "color": {
-    "breadcrumb": {
-      "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
-      "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
-      "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" },
-      "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
-      "inverse": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
-        "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" },
-        "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" }
-      }
-    }
-  },
   "typography": {
     "breadcrumb": {
       "font-size": { "value": "inherit", "type": "dimension", "source": "$breadcrumb-font-size" }

diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
@@ -0,0 +1,10 @@
+{
+  "spacing": {
+    "bubble": {
+      "expandable-padding": {
+        "y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" },
+        "x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" }
+      }
+    } 
+  }
+}
diff --git a/tokens/src/components/Button/core.json → tokens/src/core/components/Button/core.json b/tokens/src/components/Button/core.json → tokens/src/core/components/Button/core.json
@@ -1,9 +1,4 @@
 {
-  "color": {
-    "btn": {
-      "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" }
-    }
-  },
   "spacing": {
     "btn": {
       "padding": {
@@ -80,23 +75,6 @@
       }
     }
   },
-  "elevation":  {
-    "btn": {
-      "box-shadow": {
-        "base": {
-          "value": "none",
-          "type": "shadow",
-          "source": "$btn-box-shadow"
-        },
-        "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" }
-      }
-    }
-  },
-  "other": {
-    "btn": {
-      "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" }
-    }
-  },
   "size": {
     "btn": {
       "border": {

diff --git a/tokens/src/components/Card.json → tokens/src/core/components/Card.json b/tokens/src/components/Card.json → tokens/src/core/components/Card.json
@@ -1,36 +1,4 @@
 {
-  "color": {
-    "card": {
-      "base": { "value": "inherit", "type": "color", "source": "$card-color" },
-      "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" },
-        "dark": { "value": "{color.primary.500}", "type": "color", "source": "$card-bg-dark" },
-        "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" }
-      },
-      "border": {
-        "base": { 
-          "value": "{color.black}",
-          "type": "color",
-          "source": "$card-border-color",
-          "modify": [{ "type": "alpha", "amount": 0.125 }]
-        },
-        "focus": {
-          "base": {
-            "value": "{color.black}",
-            "type": "color",
-            "source": "$card-border-focus-color",
-            "modify": [{ "type": "alpha", "amount": 0.5 }]
-          },
-          "dark": {
-            "value": "{color.theme.focus.primary}",
-            "type": "color",
-            "source": "$card-border-focus-color-dark"
-          }
-        }
-      },
-      "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" }
-    }
-  },
   "spacing": {
     "card": {
       "spacer": {

diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
@@ -0,0 +1,37 @@
+{
+  "size": {
+    "carousel": {
+      "control": {
+        "width": {
+          "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" },
+          "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" }
+        }
+      },
+      "indicator": {
+        "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
+        "height": {
+          "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
+          "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
+        }
+      },
+      "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
+    }
+  },
+  "spacing": {
+    "carousel": {
+      "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" }
+    }
+  },
+  "transition": {
+    "carousel": {
+      "base": {
+        "value": "transform {transition.carousel.duration} ease-in-out",
+        "type": "transition",
+        "source": "$carousel-transition-duration"
+      },
+      "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
+      "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
+      "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" }
+    }
+  }
+}
diff --git a/tokens/src/components/Chip.json → tokens/src/core/components/Chip.json b/tokens/src/components/Chip.json → tokens/src/core/components/Chip.json
@@ -1,16 +1,4 @@
 {
-  "color": {
-    "chip": {
-      "text": {
-        "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" },
-        "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" }
-      },
-      "bg": {
-        "light": { "value": "{color.light.500}", "type": "color", "source": "$chip-light-bg" },
-        "dark": { "value": "{color.dark.200}", "type": "color", "source": "$chip-dark-bg" }
-      }
-    }
-  },
   "spacing": {
     "chip": {
       "margin": { "value": ".125rem", "type": "dimension", "source": "$chip-margin" },
@@ -22,11 +10,6 @@
       }
     }
   },
-  "other": {
-    "chip": {
-      "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" }
-    }
-  },
   "size": {
     "chip": {
       "border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" },

diff --git a/tokens/src/components/CloseButton.json → tokens/src/core/components/CloseButton.json b/tokens/src/components/CloseButton.json → tokens/src/core/components/CloseButton.json
@@ -1,7 +1,4 @@
 {
-  "color": {
-    "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" }
-  },
   "typography": {
     "close-button": {
       "font": {
@@ -13,10 +10,5 @@
         }
       }
     }
-  },
-  "elevation": {
-    "close-button": {
-      "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow",  "source": "$close-text-shadow" }
-    }
   }
 }
diff --git a/tokens/src/components/Code.json → tokens/src/core/components/Code.json b/tokens/src/components/Code.json → tokens/src/core/components/Code.json
@@ -1,14 +1,4 @@
 {
-  "color": {
-    "code": {
-      "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" },
-      "kbd": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" },
-        "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" }
-      },
-      "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" }
-    }
-  },
   "typography": {
     "code": {
       "font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" },
@@ -40,16 +30,5 @@
         }
       }
     }
-  },
-  "elevation": {
-    "code": {
-      "kbd": {
-        "box-shadow": {
-          "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)",
-          "type": "shadow",
-          "source": "$kbd-box-shadow"
-        }
-      }
-    }
   }
 }
diff --git a/tokens/src/components/Collapsible.json → tokens/src/core/components/Collapsible.json b/tokens/src/components/Collapsible.json → tokens/src/core/components/Collapsible.json
diff --git a/tokens/src/components/Container.json → tokens/src/core/components/Container.json b/tokens/src/components/Container.json → tokens/src/core/components/Container.json
diff --git a/tokens/src/components/DataTable.json → tokens/src/core/components/DataTable.json b/tokens/src/components/DataTable.json → tokens/src/core/components/DataTable.json
@@ -1,23 +1,4 @@
 {
-  "color": {
-    "data-table": {
-      "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" },
-        "is-loading": {
-          "value": "{color.white}",
-          "type": "color",
-          "source": "$data-table-is-loading-bg",
-          "modify": [{ "type": "alpha", "amount": 0.7 }]
-        }
-      },
-      "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
-    }
-  },
-  "elevation": {
-    "data-table": {
-      "box-shadow": { "value": "{elevation.box-shadow.sm}", "source": "$data-table-box-shadow", "type": "shadow" }
-    }
-  },
   "size": {
     "data-table": {
       "border": { "value": "1px", "type": "dimension", "source": "$data-table-border" },