refactor: revision of ActionRow-Chip design tokens (#3051)

openedx · May 21, 2024 · 9441b8e · 9441b8e
1 parent 651632f
commit 9441b8e
Show file tree

Hide file tree

Showing 14 changed files with 43 additions and 78 deletions.
diff --git a/src/Button/index.scss b/src/Button/index.scss
@@ -91,8 +91,6 @@
     opacity: var(--pgn-other-btn-disabled-opacity);
   }
 
-  // Button Icon Sizes
-
   .btn-icon-before {
     margin-inline-end: .5rem;
     margin-left: -.25em;

diff --git a/src/Chip/index.scss b/src/Chip/index.scss
@@ -93,11 +93,12 @@
     background-color: var(--pgn-color-chip-bg-dark);
 
     &.selected {
-      @include chip-outline(var(--pgn-color-chip-outline-dark),
-      calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1),
-      calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
-      var(--pgn-spacing-chip-outline-selected-distance-dark)
-    );
+      @include chip-outline(
+        var(--pgn-color-chip-outline-dark),
+        calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1),
+        calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
+        var(--pgn-spacing-chip-outline-selected-distance-dark)
+      );
 
       &:focus {
         border: 1px solid var(--pgn-color-chip-border-focus-selected-dark);

diff --git a/src/Chip/mixins.scss b/src/Chip/mixins.scss
@@ -1,8 +1,8 @@
 @mixin chip-outline(
   $outline-color: var(--pgn-color-white),
   $distance-to-border: 0,
-  $border-radius: 50%,
-  $border-width-value: .125rem
+  $outline-border-radius: 50%,
+  $outline-border-width: .125rem
 ) {
   &::before {
     content: "";
@@ -11,8 +11,8 @@
     right: $distance-to-border;
     bottom: $distance-to-border;
     left: $distance-to-border;
-    border: solid $border-width-value $outline-color;
-    border-radius: var(--pgn-size-border-radius-base);
+    border: solid $outline-border-width $outline-color;
+    border-radius: $outline-border-radius;
   }
 }
 

diff --git a/src/Collapsible/index.scss b/src/Collapsible/index.scss
@@ -6,7 +6,7 @@
 
   .collapsible-trigger {
     padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base);
-    border-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
+    border-radius: var(--pgn-size-card-border-radius-inner);
     border-bottom: var(--pgn-size-card-border-width) solid transparent;
     transition: border-color 100ms ease 150ms;
     cursor: pointer;
@@ -22,8 +22,8 @@
 
     &[aria-expanded="true"] {
       border-radius:
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) 0 0;
+        var(--pgn-size-card-border-radius-inner)
+        var(--pgn-size-card-border-radius-inner) 0 0;
       border-color: var(--pgn-color-card-border-base);
       transition: none;
       text-align: start;

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -112,7 +112,6 @@
   --pgn-typography-headings-font-family: inherit;
   --pgn-typography-dropdown-item-text-decoration: none;
   --pgn-typography-code-font-size: 87.5%;
-  --pgn-typography-breadcrumb-font-size: inherit;
   --pgn-typography-badge-font-size: 75%;
   --pgn-typography-alert-line-height: 1.5rem;
   --pgn-typography-alert-font-size: .875rem;
@@ -225,10 +224,8 @@
   --pgn-spacing-chip-outline-focus-distance-light: .313rem;
   --pgn-spacing-chip-outline-selected-distance-dark: 3px;
   --pgn-spacing-chip-outline-selected-distance-light: 3px;
-  --pgn-spacing-chip-padding-to-icon: 3px;
-  --pgn-spacing-chip-padding-icon: .25rem;
   --pgn-spacing-chip-padding-x: .5rem;
-  --pgn-spacing-chip-padding-y: .125rem;
+  --pgn-spacing-chip-padding-y: 1px;
   --pgn-spacing-chip-margin-icon: .25rem;
   --pgn-spacing-chip-margin-base: .125rem;
   --pgn-spacing-carousel-indicator-spacer: 3px;
@@ -248,10 +245,6 @@
   --pgn-spacing-bubble-expandable-padding-x: .25rem;
   --pgn-spacing-bubble-expandable-padding-y: 0;
   --pgn-spacing-breadcrumb-margin-left: .5rem;
-  --pgn-spacing-breadcrumb-margin-bottom: 1rem;
-  --pgn-spacing-breadcrumb-padding-item: .5rem;
-  --pgn-spacing-breadcrumb-padding-x: 1rem;
-  --pgn-spacing-breadcrumb-padding-y: .75rem;
   --pgn-spacing-badge-padding-y: .125rem;
   --pgn-spacing-badge-padding-x-pill: .6em;
   --pgn-spacing-badge-padding-x-base: .5rem;
@@ -370,8 +363,8 @@
   --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px);
   --pgn-size-color-picker-sm: 2rem;
   --pgn-size-code-pre-scrollable-max-height: 340px;
-  --pgn-size-chip-icon: 1.25rem;
-  --pgn-size-chip-border-radius: .25rem;
+  --pgn-size-chip-icon: 1.5rem;
+  --pgn-size-chip-border-radius: .375rem;
   --pgn-size-carousel-caption-width: 70%;
   --pgn-size-carousel-indicator-height-area-hit: 10px;
   --pgn-size-carousel-indicator-height-base: 3px;
@@ -549,7 +542,6 @@
   --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm);
   --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
   --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-breadcrumb-border-radius-base: var(--pgn-size-border-radius-base);
   --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
   --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
   --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
@@ -589,6 +581,7 @@
   --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-card-image-border-radius: var(--pgn-size-card-border-radius-base);
+  --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
   --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
   --pgn-size-btn-focus-border-radius-base: 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);

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -257,8 +257,7 @@
   --pgn-elevation-code-kbd-box-shadow: none;
   --pgn-elevation-btn-box-shadow-active: none;
   --pgn-elevation-btn-box-shadow-base: none;
-  --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))  drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
-  --pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
+  --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
   --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
   --pgn-elevation-popover-box-shadow: none;
   --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
@@ -565,7 +564,6 @@
   --pgn-color-bubble-text-warning: var(--pgn-color-white);
   --pgn-color-bubble-text-success: var(--pgn-color-white);
   --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
-  --pgn-color-breadcrumb-bg: var(--pgn-color-gray-200);
   --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
   --pgn-color-badge-bg-light: var(--pgn-color-light-base);
   --pgn-color-badge-bg-primary: var(--pgn-color-primary-base);
@@ -940,7 +938,7 @@
   --pgn-color-chip-border-base: var(--pgn-color-light-800);
   --pgn-color-chip-bg-dark: var(--pgn-color-primary-300);
   --pgn-color-card-divider-bg: var(--pgn-color-light-400);
-  --pgn-color-card-border-focus-base: #0A305580;
+  --pgn-color-card-border-focus-base: var(--pgn-color-primary-500);
   --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);

diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json
@@ -1,18 +1,7 @@
 {
-  "typography": {
-    "breadcrumb": {
-      "font-size": { "value": "inherit", "type": "dimension", "source": "$breadcrumb-font-size" }
-    }
-  },
   "spacing": {
     "breadcrumb": {
-      "padding": {
-        "y": { "value": ".75rem", "type": "dimension", "source": "$breadcrumb-padding-y" },
-        "x": { "value": "1rem", "type": "dimension", "source": "$breadcrumb-padding-x" },
-        "item": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-item-padding" }
-      },
       "margin": {
-        "bottom": { "value": "1rem", "type": "dimension", "source": "$breadcrumb-margin-bottom" },
         "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" }
       }
     }
@@ -21,9 +10,6 @@
     "breadcrumb": {
       "border": {
         "radius": {
-          "base": {
-            "value": "{size.border.radius.base}", "type": "dimension", "source": "$breadcrumb-border-radius"
-          },
           "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" }
         },
         "axis": {

diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
@@ -44,7 +44,12 @@
         "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" },
         "radius": {
           "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" },
-          "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" }
+          "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" },
+          "inner": {
+            "value": "calc({size.card.border.radius.base} - {size.card.border.width})",
+            "type": "dimension",
+            "source": "$card-inner-border-radius"
+          }
         }
       },
       "focus": {

diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json
@@ -8,10 +8,8 @@
         "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" }
       },
       "padding": {
-        "y": { "value": ".125rem", "type": "dimension", "source": "$chip-padding-y" },
-        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" },
-        "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-padding" },
-        "to-icon": { "value": "3px", "type": "dimension", "source": "$chip-padding-to-icon" }
+        "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" },
+        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" }
       },
       "outline": {
         "selected-distance": {
@@ -36,8 +34,8 @@
   },
   "size": {
     "chip": {
-      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" },
-      "icon": { "value": "1.25rem", "type": "dimension", "source": "$chip-icon-size" }
+      "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" },
+      "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json
@@ -34,14 +34,5 @@
         }
       }
     }
-  },
-  "elevation": {
-    "alert": {
-      "box-shadow": {
-        "value": "0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15)",
-        "type": "shadow",
-        "source": "$alert-box-shadow"
-      }
-    }
   }
 }
diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
@@ -2,7 +2,7 @@
   "elevation": {
     "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": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
         "type": "shadow",
         "source": "$annotation-box-shadow"
       }
@@ -11,18 +11,18 @@
   "color": {
     "annotation": {
       "text": {
-        "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color"},
-        "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color"},
-        "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color"},
-        "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color"},
-        "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color"}
+        "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color" },
+        "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color" },
+        "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color" },
+        "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color" },
+        "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color" }
       },
       "bg": {
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg"},
-        "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg"},
-        "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg"},
-        "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg"},
-        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg"}
+        "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg" },
+        "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg" },
+        "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg" },
+        "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg" },
+        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg" }
       }
     }
   }

diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json
@@ -1,7 +1,7 @@
 {
   "color": {
     "avatar": {
-      "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" }
+      "border": { "value": "{color.light.300}", "type": "color" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json
@@ -1,7 +1,6 @@
 {
   "color": {
     "breadcrumb": {
-      "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
       "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
       "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
       "inverse": {

diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json
@@ -8,7 +8,7 @@
         "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" }
       },
       "border": {
-        "base": { 
+        "base": {
           "value": "{color.black}",
           "type": "color",
           "source": "$card-border-color",
@@ -21,11 +21,7 @@
           "base": {
             "value": "{color.primary.500}",
             "type": "color",
-            "source": "$card-border-focus-color",
-            "modify": [{
-              "type": "alpha",
-              "amount": 0.5
-            }]
+            "source": "$card-border-focus-color"
           },
           "dark": {
             "value": "{color.theme.focus.primary}",