feat: add new tokens and cleanup after rebase

openedx · Feb 20, 2023 · 626f43e · 626f43e
1 parent 01c0178
commit 626f43e
Show file tree

Hide file tree

Showing 17 changed files with 884 additions and 133 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,8 +53,7 @@
     "build-types": "tsc --emitDeclarationOnly",
     "build-tokens": "node tokens/build-tokens.js --build-dir ./scss/core/css/",
     "replace-variables-usage-with-css": "node tokens/replace-variables.js -p src -t usage",
-    "replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition",
-    "build-scss-to-css-map": "node tokens/map-scss-to-css.js"
+    "replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",

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 Wed, 15 Feb 2023 14:44:39 GMT
+ * Generated on Thu, 16 Feb 2023 10:37:12 GMT
  */
 
 .bg-dark {

diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 15 Feb 2023 14:44:39 GMT
+ * Generated on Thu, 16 Feb 2023 10:37:12 GMT
  */
 
 :root {
@@ -263,6 +263,7 @@
   --pgn-spacing-chip-padding-y: .125rem;
   --pgn-spacing-chip-margin: .125rem;
   --pgn-spacing-carousel-indicator-spacer: 3px;
+  --pgn-spacing-card-focus-border-offset: 5px;
   --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem;
   --pgn-spacing-card-logo-bottom-offset-base: 1rem;
   --pgn-spacing-card-logo-left-offset-horizontal: .4375rem;
@@ -400,6 +401,8 @@
   --pgn-size-card-logo-width: 7.25rem;
   --pgn-size-card-image-vertical-max-height: 140px;
   --pgn-size-card-image-horizontal-width-max: 240px;
+  --pgn-size-card-focus-border-radius: 5px;
+  --pgn-size-card-focus-border-width: 2px;
   --pgn-size-card-border-radius-logo: .25rem;
   --pgn-size-card-border-radius-image: .3125rem;
   --pgn-size-btn-focus-width: 2px;
@@ -486,7 +489,6 @@
   --pgn-color-btn-disabled-bg-outline-secondary: inherit;
   --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit;
   --pgn-color-btn-disabled-bg-outline-primary: inherit;
-  --pgn-color-btn-disabled-bg-inverse-primary: inherit;
   --pgn-color-btn-disabled-bg-inverse-outline-light: inherit;
   --pgn-color-btn-disabled-bg-inverse-light: inherit;
   --pgn-color-btn-disabled-bg-outline-light: inherit;
@@ -499,7 +501,6 @@
   --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit;
   --pgn-color-btn-disabled-bg-inverse-danger: #00000000;
   --pgn-color-btn-disabled-bg-outline-danger: inherit;
-  --pgn-color-btn-disabled-bg-inverse-brand: #00000000;
   --pgn-color-btn-disabled-bg-outline-brand: inherit;
   --pgn-color-btn-disabled-text-inverse-secondary: inherit;
   --pgn-color-btn-disabled-text-outline-secondary: inherit;
@@ -689,6 +690,7 @@
   --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
   --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
+  --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
   --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
   --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
   --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
@@ -863,13 +865,14 @@
   --pgn-color-carousel-caption: var(--pgn-color-white);
   --pgn-color-carousel-indicator-active-bg: var(--pgn-color-white);
   --pgn-color-carousel-control-base: var(--pgn-color-white);
-  --pgn-color-card-border-focus: #00000080;
+  --pgn-color-card-border-focus-base: #00000080;
   --pgn-color-card-border-base: #00000020;
   --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary);
   --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary);
   --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary);
-  --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand);
+  --pgn-color-btn-disabled-bg-inverse-primary: var(--pgn-color-white);
   --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand);
+  --pgn-color-btn-disabled-bg-inverse-brand: var(--pgn-color-white);
   --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white);
   --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white);
   --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white);
@@ -997,6 +1000,9 @@
   --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg);
   --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm);
   --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base);
+  --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
   --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
   --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
   --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
@@ -1009,6 +1015,7 @@
   --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
+  --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
   --pgn-color-danger-900: #892029FF;
   --pgn-color-danger-800: #92222CFF;
@@ -1123,7 +1130,9 @@
   --pgn-color-chip-bg-dark: var(--pgn-color-dark-200);
   --pgn-color-chip-bg-light: var(--pgn-color-light-500);
   --pgn-color-card-divider-bg: var(--pgn-color-light-400);
-  --pgn-color-card-bg: var(--pgn-color-bg-base);
+  --pgn-color-card-bg-muted: var(--pgn-color-light-200);
+  --pgn-color-card-bg-dark: var(--pgn-color-primary-500);
+  --pgn-color-card-bg-base: var(--pgn-color-bg-base);
   --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
   --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
   --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base);
@@ -1133,6 +1142,7 @@
   --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
   --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger);
   --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand);
   --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
   --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary);
   --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light);
@@ -1391,6 +1401,7 @@
   --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500);
   --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled);
   --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary);
   --pgn-color-btn-disabled-link: var(--pgn-color-disabled);
   --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
   --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success);

diff --git a/src/Button/Button.scss b/src/Button/Button.scss
@@ -28,26 +28,23 @@
       border-color: var(--pgn-btn-focus-border-color, transparent);
       color: var(--pgn-btn-focus-color, #{$body-color});
 
-      $distance: calc(#{$btn-focus-width} + #{$btn-focus-gap});
-      $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width});
-
       &::before {
         content: "";
         position: absolute;
-        top: calc(#{$distance-include-btn-border} * -1);
-        right: calc(#{$distance-include-btn-border} * -1);
-        bottom: calc(#{$distance-include-btn-border} * -1);
-        left: calc(#{$distance-include-btn-border} * -1);
+        top: calc(#{$btn-focus-distance-to-border} * -1);
+        right: calc(#{$btn-focus-distance-to-border} * -1);
+        bottom: calc(#{$btn-focus-distance-to-border} * -1);
+        left: calc(#{$btn-focus-distance-to-border} * -1);
         border: solid $btn-focus-width var(--pgn-btn-focus-outline-color, #{$body-color});
-        border-radius: calc(#{$btn-border-radius} + #{$distance});
+        border-radius: $btn-focus-border-radius;
       }
 
       &.btn-lg::before {
-        border-radius: calc(#{$btn-border-radius-lg} + #{$distance});
+        border-radius: $btn-focus-border-radius;
       }
 
       &.btn-sm::before {
-        border-radius: calc(#{$btn-border-radius-sm} + #{$distance});
+        border-radius: $btn-focus-border-radius;
       }
 
       &:active,

diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss
@@ -700,7 +700,7 @@ $btn-inverse-tertiary-disabled-color: var(--pgn-color-btn-disabled-text-inverse-
 $btn-inverse-tertiary-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-tertiary) !default;
 $btn-inverse-tertiary-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-tertiary) !default;
 
-$btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
-$btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
+$btn-focus-border-gap: var(--pgn-spacing-btn-focus-border-gap) !default;
+$btn-focus-distance-to-border: var(--pgn-spacing-btn-focus-distance-to-border) !default;
 
-$btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
+$btn-focus-border-radius: var(--pgn-size-btn-focus-border-radius) !default;
diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss
@@ -5,25 +5,25 @@ $card-spacer-x: var(--pgn-spacing-card-spacer-x) !default;
 $card-border-width: var(--pgn-size-card-border-width) !default;
 $card-border-radius: var(--pgn-size-card-border-radius-base) !default;
 $card-border-color: var(--pgn-color-card-border-base) !default;
-$card-border-focus-color: var(--pgn-color-card-border-focus) !default;
-$card-border-focus-color-dark:       theme-color("primary", "focus") !default;
+$card-border-focus-color: var(--pgn-color-card-border-focus-base) !default;
+$card-border-focus-color-dark: var(--pgn-color-card-border-focus-dark) !default;
 $card-cap-bg: var(--pgn-card-cap-bg) !default;
 $card-cap-color: var(--pgn-card-cap-color) !default;
 $card-height: var(--pgn-card-height-base) !default;
-$card-bg-dark:                       $primary-500 !default;
-$card-bg-muted:                      $light-200 !default;
+$card-bg-dark: var(--pgn-color-card-bg-dark) !default;
+$card-bg-muted: var(--pgn-color-card-bg-muted) !default;
 
 // TODO: Need to deleted this variable after refactoring Card component
 // stylelint-disable-next-line max-line-length
 $card-inner-border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) !default;
 $card-color: var(--pgn-color-card-base) !default;
-$card-bg: var(--pgn-color-card-bg) !default;
+$card-bg: var(--pgn-color-card-bg-base) !default;
 
 $card-group-margin: var(--pgn-spacing-card-margin-group) !default;
 $card-deck-margin: var(--pgn-spacing-card-margin-deck) !default;
 $card-grid-margin: var(--pgn-spacing-card-margin-grid) !default;
-$card-deck-margin-bottom:            map_get($spacers, 3) !default;
-$card-grid-margin-bottom:            map_get($spacers, 3) !default;
+$card-deck-margin-bottom: var(--pgn-spacing-card-margin-deck-bottom) !default;
+$card-grid-margin-bottom: var(--pgn-spacing-card-margin-grid-bottom) !default;
 
 $card-columns-count: var(--pgn-spacing-card-columns-count) !default;
 $card-columns-gap: var(--pgn-spacing-card-columns-gap) !default;
@@ -51,6 +51,6 @@ $card-image-horizontal-min-width: var(--pgn-size-card-image-horizontal-width-min
 $card-image-vertical-max-height: var(--pgn-size-card-image-vertical-max-height) !default;
 $loading-skeleton-spacer: var(--pgn-spacing-card-loading-skeleton-spacer) !default;
 
-$card-focus-border-offset:           5px !default;
-$card-focus-border-width:            2px !default;
-$card-focus-border-radius:           5px !default;
+$card-focus-border-offset: var(--pgn-spacing-card-focus-border-offset) !default;
+$card-focus-border-width: var(--pgn-size-card-focus-border-width) !default;
+$card-focus-border-radius: var(--pgn-size-card-focus-border-radius) !default;
diff --git a/tokens/src/components/Button/brand.json b/tokens/src/components/Button/brand.json
@@ -229,7 +229,7 @@
         "bg": {
           "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-disabled-bg" },
           "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-disabled-bg" },
-          "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-disabled-bg" },
+          "inverse-brand": { "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-disabled-bg" },
           "inverse-outline-brand": {
             "value": "{color.btn.bg.inverse-outline-brand}",
             "type": "color",

diff --git a/tokens/src/components/Button/core.json b/tokens/src/components/Button/core.json
@@ -31,7 +31,19 @@
       "block": {
         "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
       },
-      "focus-gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" }
+      "focus": {
+        "gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" },
+        "border-gap": {
+          "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
+          "type": "dimension",
+          "source": "$btn-focus-border-gap"
+        },
+        "distance-to-border": {
+          "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
+          "type": "dimension",
+          "source": "$btn-focus-distance-to-border"
+        }
+      }
     }
   },
   "typography": {
@@ -95,7 +107,14 @@
           "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$btn-border-radius-sm" }
         }
       },
-      "focus-width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" }
+      "focus": {
+        "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
+        "border-radius": {
+          "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+          "type": "dimension",
+          "source": "$btn-focus-border-radius"
+        }
+      }
     }
   },
   "transition": {

diff --git a/tokens/src/components/Button/primary.json b/tokens/src/components/Button/primary.json
@@ -226,7 +226,7 @@
         },
         "bg": {
           "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-disabled-bg" },
-          "inverse-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-disabled-bg" },
+          "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-disabled-bg" },
           "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-disabled-bg" },
           "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-disabled-bg" }
         },

diff --git a/tokens/src/components/Card.json b/tokens/src/components/Card.json
@@ -2,19 +2,30 @@
   "color": {
     "card": {
       "base": { "value": "inherit", "type": "color", "source": "$card-color" },
-      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" },
+      "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": { 
-          "value": "{color.black}",
-          "type": "color",
-          "source": "$card-border-focus-color",
-          "modify": [{ "type": "alpha", "amount": 0.5 }]
+        "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" }
@@ -29,7 +40,9 @@
       "margin": {
         "group": { "value": "12px", "type": "dimension", "source": "$card-group-margin" },
         "deck": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-deck-margin" },
-        "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" }
+        "deck-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-deck-margin-bottom" },
+        "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" },
+        "grid-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-grid-margin-bottom" }
       },
       "columns": {
         "margin": { "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$card-columns-margin" },
@@ -51,6 +64,9 @@
           "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" },
           "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" }
         }
+      },
+      "focus": {
+        "border-offset": { "value": "5px", "type": "dimension", "source": "$card-focus-border-offset" }
       }
     }
   },
@@ -64,6 +80,12 @@
           "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" }
         }
       },
+      "focus": {
+        "border": {
+          "width": { "value": "2px", "type": "dimension", "source": "$card-focus-border-width" },
+          "radius": { "value": "5px", "type": "dimension", "source": "$card-focus-border-radius" }
+        }
+      },
       "image": {
         "horizontal": {
           "width": {