refactor: revision of ChipCarousel-Pagination design tokens (#3052)

openedx · May 15, 2024 · a2b552c · a2b552c
1 parent deebb2e
commit a2b552c
Show file tree

Hide file tree

Showing 14 changed files with 27 additions and 42 deletions.
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 13 May 2024 08:42:31 GMT
+ * Generated on Wed, 15 May 2024 08:37:24 GMT
  */
 
 :root {
@@ -148,7 +148,6 @@
   --pgn-spacing-popover-icon-margin-right: .5rem;
   --pgn-spacing-popover-header-padding-x: 1rem;
   --pgn-spacing-popover-header-padding-y: .5rem;
-  --pgn-spacing-pagination-margin-x: .5rem;
   --pgn-spacing-pagination-padding-x-lg: 1.5rem;
   --pgn-spacing-pagination-padding-x-sm: .6rem;
   --pgn-spacing-pagination-padding-x-base: 1rem;
@@ -306,7 +305,6 @@
   --pgn-size-popover-icon-height: 1rem;
   --pgn-size-popover-max-width: 480px;
   --pgn-size-pagination-focus-outline: 0;
-  --pgn-size-pagination-focus-border-width: .125rem;
   --pgn-size-pagination-toggle-border-sm: .25rem;
   --pgn-size-pagination-toggle-border-base: .3125rem;
   --pgn-size-pagination-reduced-dropdown-min-width: 6rem;
@@ -363,9 +361,9 @@
   --pgn-size-data-table-layout-sidebar-width: 12rem;
   --pgn-size-data-table-dropdown-pagination-min-width: 6rem;
   --pgn-size-data-table-dropdown-pagination-max-height: 60vh;
-  --pgn-size-data-table-border: 1px;
+  --pgn-size-data-table-border: 2px;
   --pgn-size-container-max-width-xl: 1440px;
-  --pgn-size-container-max-width-lg: 1196px;
+  --pgn-size-container-max-width-lg: 1192px;
   --pgn-size-container-max-width-md: 952px;
   --pgn-size-container-max-width-sm: 708px;
   --pgn-size-container-max-width-xs: 464px;
@@ -482,7 +480,6 @@
   --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
   --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
   --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-nav-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
   --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
   --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
   --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
@@ -537,7 +534,6 @@
   --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
   --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-control-select-border-width-focus: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
   --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
   --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 13 May 2024 08:42:31 GMT
+ * Generated on Wed, 15 May 2024 07:58:56 GMT
  */
 
 :root {
@@ -253,7 +253,6 @@
   --pgn-elevation-form-control-indicator-active: none;
   --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
   --pgn-elevation-form-control-indicator-checked-base: none;
-  --pgn-elevation-form-input-focus: none;
   --pgn-elevation-form-input-base: none;
   --pgn-elevation-code-kbd-box-shadow: none;
   --pgn-elevation-btn-box-shadow-active: none;
@@ -474,7 +473,6 @@
   --pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
   --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100);
   --pgn-color-dropdown-border: #00000026;
-  --pgn-color-data-table-border: var(--pgn-color-gray-200);
   --pgn-color-data-table-bg-is-loading: #FFFFFFB3;
   --pgn-color-code-pre: var(--pgn-color-gray-900);
   --pgn-color-code-kbd-bg: var(--pgn-color-gray-700);
@@ -613,7 +611,6 @@
   --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
   --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
   --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
-  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
   --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
@@ -934,6 +931,7 @@
   --pgn-color-dropdown-bg: var(--pgn-color-bg-base);
   --pgn-color-dropdown-header: var(--pgn-color-gray-500);
   --pgn-color-dropdown-text: var(--pgn-color-body-base);
+  --pgn-color-data-table-border: var(--pgn-color-light-300);
   --pgn-color-data-table-bg-base: var(--pgn-color-bg-base);
   --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark);
   --pgn-color-chip-label-base: var(--pgn-color-primary-700);
@@ -1140,6 +1138,7 @@
   --pgn-color-bg-active: var(--pgn-color-primary-500);
   --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
+  --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500);
   --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
   --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
@@ -1477,6 +1476,7 @@
   --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
+  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
   --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
   --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300);
   --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);

diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json
@@ -1,8 +1,8 @@
 {
   "size": {
     "color-picker": {
-      "sm": { "value": "2rem", "source": "$picker-size-sm", "type": "dimension"},
-      "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "source": "$picker-size-md", "type": "dimension"}
+      "sm": { "value": "2rem", "type": "dimension", "source": "$picker-size-sm" },
+      "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "type": "dimension", "source": "$picker-size-md" }
     }
   }
 }
diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json
@@ -5,7 +5,7 @@
         "xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" },
         "sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" },
         "md": { "value": "952px", "type": "dimension", "source": "$max-width-md" },
-        "lg": { "value": "1196px", "type": "dimension", "source": "$max-width-lg" },
+        "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" },
         "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" }
       }
     }

diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
@@ -1,7 +1,7 @@
 {
   "size": {
     "data-table": {
-      "border": { "value": "1px", "type": "dimension", "source": "$data-table-border" },
+      "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" },
       "dropdown": {
         "pagination": {
           "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },

diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json
@@ -57,7 +57,7 @@
         }
       },
       "control": {
-        "indicator": { 
+        "indicator": {
           "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" },
           "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" },
           "border": {
@@ -101,19 +101,15 @@
             "icon": {
               "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
               "type": "dimension",
-              "source": "$custom-select-feedback-icon-size" }
+              "source": "$custom-select-feedback-icon-size"
+            }
           },
           "border": {
             "width": {
               "base": {
                 "value": "{size.form.input.width.border}",
                 "type": "dimension",
                 "source": "$custom-select-border-width"
-              },
-              "focus": {
-                "value": "{size.form.input.width.focus}",
-                "type": "dimension",
-                "source": "$custom-select-focus-width"
               }
             },
             "radius": {

diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
@@ -46,9 +46,6 @@
           "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
         },
         "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
-      },
-      "divider": {
-        "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" }
       }
     }
   }

diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json
@@ -20,9 +20,6 @@
           "sm": { "value": ".6rem", "type": "dimension", "source": "$pagination-padding-x-sm" },
           "lg": { "value": "1.5rem", "type": "dimension", "source": "$pagination-padding-x-lg" }
         }
-      },
-      "margin": {
-        "x": { "value": ".5rem", "type": "dimension", "source": "$pagination-margin-x" }
       }
     }
   },
@@ -62,7 +59,6 @@
         }
       },
       "focus": {
-        "border-width": { "value": ".125rem", "type": "dimension", "source": "$pagination-focus-border-width" },
         "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" }
       }
     }

diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
@@ -8,11 +8,11 @@
       "2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" },
       "2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" },
       "3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" },
-      "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5"},
+      "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5" },
       "4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" },
       "4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" },
       "5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" },
-      "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5"},
+      "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5" },
       "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" }
     },
     "label": {

diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json
@@ -15,7 +15,7 @@
           ]
         }
       },
-      "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
+      "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" }
     }
   },
   "elevation": {

diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
@@ -30,7 +30,7 @@
           "border": {
             "value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color"
           },
-          "bg": { 
+          "bg": {
             "base": {
               "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg"
             },
@@ -68,7 +68,7 @@
               }
             }
           },
-          "active": { 
+          "active": {
             "base": {
               "value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color"
             },
@@ -88,7 +88,7 @@
             "value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color"
           },
           "floating": {
-            "text": { 
+            "text": {
               "value": "{color.form.input.bg.base}",
               "type": "color",
               "source": "$form-control-floating-label-text-bg",
@@ -217,7 +217,7 @@
             "value": "{color.form.feedback.valid}",
             "type": "color",
             "source": "$form-feedback-tooltip-valid-color",
-            "modify": [{"type": "color-yiq"}]
+            "modify": [{ "type": "color-yiq" }]
           },
           "bg": {
             "valid": {

diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
@@ -4,7 +4,7 @@
       "input": {
         "base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" },
         "focus": {
-          "value": "none",
+          "value": "0 0 0 1px {color.primary.500}",
           "type": "shadow",
           "source": "$input-focus-box-shadow"
         }

diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
@@ -52,21 +52,21 @@
                   "type": "file",
                   "source": "$custom-radio-indicator-icon-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
                 },
                 "valid": {
                   "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")",
                   "type": "file",
                   "source": "$custom-radio-indicator-icon-valid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
                 },
                 "invalid": {
                   "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")",
                   "type": "file",
                   "source": "$custom-radio-indicator-icon-invalid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
                 }
               }
             }

diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json
@@ -153,7 +153,7 @@
         "value": "{color.primary.base}",
         "type": "color",
         "source": "$primary-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50"}],
+        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
         "description": "Primary color of level 300.",
         "actions": {
           "default": "{color.action.default.primary.300}"
@@ -602,7 +602,7 @@
         "value": "{color.info.base}",
         "type": "color",
         "source": "$info-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25"}],
+        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
         "description": "Info color of level 800.",
         "actions": {
           "default": "{color.action.default.info.800}"
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ @@
               ]
             }
           },
-          "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
+          "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" }
         }
       },
       "elevation": {
@@ Expand Down @@