refactor: corrected expanded tokens

openedx · Sep 9, 2024 · 55c47d5 · 55c47d5
1 parent e73a4f9
commit 55c47d5
Show file tree

Hide file tree

Showing 29 changed files with 1,343 additions and 266 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, constructExpandedToken } = require('../tokens/utils');
+const { createIndexCssFile } = require('../tokens/utils');
 
 /**
  * Builds tokens for CSS styles from JSON source files.
@@ -53,7 +53,7 @@ async function buildTokensCommand(commandArgs) {
       path.resolve(__dirname, '../tokens/src/core/**/*.json'),
       path.resolve(__dirname, '../tokens/src/core/**/*.toml'),
     ],
-    expand: (token) => constructExpandedToken(token),
+    expand: true,
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],

diff --git a/src/Annotation/index.scss b/src/Annotation/index.scss
@@ -4,7 +4,19 @@
   padding: var(--pgn-spacing-annotation-padding);
   border-radius: var(--pgn-size-annotation-border-radius);
   max-width: var(--pgn-size-annotation-max-width);
-  filter: var(--pgn-elevation-annotation-box-shadow);
+  filter:
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-1-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-1-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-1-blur)
+      var(--pgn-elevation-annotation-box-shadow-1-color)
+    ),
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-2-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-2-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-2-blur)
+      var(--pgn-elevation-annotation-box-shadow-2-color)
+    );
   word-wrap: break-word;
   position: relative;
   display: inline-block;

diff --git a/src/Card/index.scss b/src/Card/index.scss
@@ -353,7 +353,15 @@ a.pgn__card {
       width: var(--pgn-size-card-logo-width);
       height: var(--pgn-size-card-logo-height);
       border-radius: var(--pgn-size-card-border-radius-logo);
-      box-shadow: var(--pgn-elevation-box-shadow-level-1);
+      box-shadow:
+        var(--pgn-elevation-box-shadow-level-1-1-offset-y)
+        var(--pgn-elevation-box-shadow-level-1-1-offset-x)
+        var(--pgn-elevation-box-shadow-level-1-1-blur)
+        var(--pgn-elevation-box-shadow-level-1-1-color),
+        var(--pgn-elevation-box-shadow-level-1-2-offset-y)
+        var(--pgn-elevation-box-shadow-level-1-2-offset-x)
+        var(--pgn-elevation-box-shadow-level-1-2-blur)
+        var(--pgn-elevation-box-shadow-level-1-2-color);
       padding: map_get($spacers, 2);
       background-color: var(--pgn-color-white);
       display: none;

diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss
@@ -21,7 +21,11 @@
   width: 100%;
   margin-right: -100%;
   backface-visibility: hidden;
-  transition: var(--pgn-transition-carousel-base);
+  transition:
+    var(--pgn-transition-carousel-base-property)
+    var(--pgn-transition-carousel-base-duration)
+    var(--pgn-transition-carousel-base-timing-function)
+    var(--pgn-transition-carousel-base-delay);
 }
 
 .carousel-item.active,
@@ -58,7 +62,11 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    transition: opacity 0s var(--pgn-transition-carousel-base);
+    transition:
+      opacity 0s var(--pgn-transition-carousel-base-property)
+      var(--pgn-transition-carousel-base-duration)
+      var(--pgn-transition-carousel-base-timing-function)
+      var(--pgn-transition-carousel-base-delay);
   }
 }
 

diff --git a/src/CloseButton/index.scss b/src/CloseButton/index.scss
@@ -3,7 +3,11 @@
   font-weight: var(--pgn-typography-close-button-font-weight);
   line-height: 1;
   color: var(--pgn-color-close-button);
-  text-shadow: var(--pgn-elevation-close-button-text-shadow);
+  text-shadow:
+    var(--pgn-elevation-close-button-text-shadow-offset-x)
+    var(--pgn-elevation-close-button-text-shadow-offset-y)
+    var(--pgn-elevation-close-button-text-shadow-blur)
+    var(--pgn-elevation-close-button-text-shadow-color);
   opacity: .5;
 
   @include font-size(var(--pgn-typography-close-button-font-size));

diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
@@ -2,7 +2,11 @@
   font-size: var(--pgn-typography-font-size-sm);
   border-radius: var(--pgn-size-border-radius-base);
   background-color: var(--pgn-color-data-table-bg-base);
-  box-shadow: var(--pgn-elevation-data-table-box-shadow);
+  box-shadow:
+    var(--pgn-elevation-data-table-box-shadow-offset-x)
+    var(--pgn-elevation-data-table-box-shadow-offset-y)
+    var(--pgn-elevation-data-table-box-shadow-blur)
+    var(--pgn-elevation-data-table-box-shadow-color);
 
   &.hide-shadow {
     box-shadow: none;
@@ -93,7 +97,11 @@
   .pgn__data-table-layout-sidebar {
     background-color: var(--pgn-color-data-table-bg-base);
     border-radius: var(--pgn-size-border-radius-base);
-    box-shadow: var(--pgn-elevation-data-table-box-shadow);
+    box-shadow:
+      var(--pgn-elevation-data-table-box-shadow-offset-x)
+      var(--pgn-elevation-data-table-box-shadow-offset-y)
+      var(--pgn-elevation-data-table-box-shadow-blur)
+      var(--pgn-elevation-data-table-box-shadow-color);
     padding: var(--pgn-spacing-data-table-padding-small);
     margin-right: var(--pgn-spacing-spacer-4);
     flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
@@ -286,7 +294,15 @@
 .pgn__data-table__overflow-actions-menu {
   background: var(--pgn-color-white);
   padding: var(--pgn-spacing-spacer-2);
-  box-shadow: var(--pgn-elevation-box-shadow-level-1);
+  box-shadow:
+    var(--pgn-elevation-box-shadow-level-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-1-1-blur)
+    var(--pgn-elevation-box-shadow-level-1-1-color),
+    var(--pgn-elevation-box-shadow-level-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-1-2-blur)
+    var(--pgn-elevation-box-shadow-level-1-2-color);
   border-radius: 4px;
 }
 

diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss
@@ -16,19 +16,43 @@
   }
 
   &:hover {
-    box-shadow: var(--pgn-elevation-dropzone-hover);
+    box-shadow:
+      var(--pgn-elevation-dropzone-hover-inset)
+      var(--pgn-elevation-dropzone-hover-offset-x)
+      var(--pgn-elevation-dropzone-hover-offset-y)
+      var(--pgn-elevation-dropzone-hover-blur)
+      var(--pgn-elevation-dropzone-hover-spread)
+      var(--pgn-elevation-dropzone-hover-color);
   }
 
   &:focus {
-    box-shadow: var(--pgn-elevation-dropzone-focus);
+    box-shadow:
+      var(--pgn-elevation-dropzone-focus-inset)
+      var(--pgn-elevation-dropzone-focus-offset-x)
+      var(--pgn-elevation-dropzone-focus-offset-y)
+      var(--pgn-elevation-dropzone-focus-blur)
+      var(--pgn-elevation-dropzone-focus-spread)
+      var(--pgn-elevation-dropzone-focus-color);
   }
 
   &.pgn__dropzone-validation-error {
-    box-shadow: var(--pgn-elevation-dropzone-error);
+    box-shadow:
+      var(--pgn-elevation-dropzone-error-inset)
+      var(--pgn-elevation-dropzone-error-offset-x)
+      var(--pgn-elevation-dropzone-error-offset-y)
+      var(--pgn-elevation-dropzone-error-blur)
+      var(--pgn-elevation-dropzone-error-spread)
+      var(--pgn-elevation-dropzone-error-color);
   }
 
   &.pgn__dropzone-active {
-    box-shadow: var(--pgn-elevation-dropzone-active);
+    box-shadow:
+      var(--pgn-elevation-dropzone-active-inset)
+      var(--pgn-elevation-dropzone-active-offset-x)
+      var(--pgn-elevation-dropzone-active-offset-y)
+      var(--pgn-elevation-dropzone-active-blur)
+      var(--pgn-elevation-dropzone-active-spread)
+      var(--pgn-elevation-dropzone-active-color);
   }
 }
 

diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
@@ -39,7 +39,12 @@
   }
 
   &:focus ~ .custom-control-label::before {
-    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
+    box-shadow:
+      var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+      var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+      var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+      var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+      var(--pgn-elevation-form-control-indicator-checked-focus-color);
   }
 
   &:focus:not(:checked) ~ .custom-control-label::before {
@@ -249,7 +254,12 @@
   &:focus {
     border-color: var(--pgn-color-form-control-select-border-focus);
     outline: 0;
-    box-shadow: var(--pgn-elevation-form-control-select-border-focus);
+    box-shadow:
+      var(--pgn-elevation-form-control-select-border-focus-offset-x)
+      var(--pgn-elevation-form-control-select-border-focus-offset-y)
+      var(--pgn-elevation-form-control-select-border-focus-blur)
+      var(--pgn-elevation-form-control-select-border-focus-spread)
+      var(--pgn-elevation-form-control-select-border-focus-color);
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
@@ -328,7 +338,12 @@
 
   &:focus ~ .custom-file-label {
     border-color: var(--pgn-color-form-control-file-border-focus);
-    box-shadow: var(--pgn-elevation-form-control-file-focus);
+    box-shadow:
+      var(--pgn-elevation-form-control-file-focus-offset-x)
+      var(--pgn-elevation-form-control-file-focus-offset-y)
+      var(--pgn-elevation-form-control-file-focus-blur)
+      var(--pgn-elevation-form-control-file-focus-spread)
+      var(--pgn-elevation-form-control-file-focus-color);
   }
 
   // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247

diff --git a/src/Form/_index.scss b/src/Form/_index.scss
@@ -411,7 +411,12 @@ select.form-control {
   }
 
   &:not(:disabled):hover {
-    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
+    box-shadow:
+      var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+      var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+      var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+      var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+      var(--pgn-elevation-form-control-indicator-checked-focus-color);
   }
 
   &:disabled {

diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss
@@ -50,7 +50,12 @@
     background-color: var(--pgn-color-form-input-focus-bg);
     border-color: var(--pgn-color-form-input-focus-border);
     outline: 0;
-    box-shadow: var(--pgn-elevation-form-input-focus);
+    box-shadow:
+      var(--pgn-elevation-form-input-focus-offset-x)
+      var(--pgn-elevation-form-input-focus-offset-y)
+      var(--pgn-elevation-form-input-focus-blur)
+      var(--pgn-elevation-form-input-focus-spread)
+      var(--pgn-elevation-form-input-focus-color);
   }
 
   @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);