refactor: revision of core design tokens (#3048)

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 Thu, 09 May 2024 13:33:11 GMT
+ * Generated on Mon, 13 May 2024 08:42:31 GMT
  */
 
 :root {
@@ -73,6 +73,7 @@
   --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",  "Courier New", monospace;
   --pgn-typography-font-family-serif: serif;
   --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pgn-typography-print-page-size: a3;
   --pgn-typography-display-mobile: 3.25rem;
   --pgn-typography-display-line-height-mobile: 3.5rem;
   --pgn-typography-display-line-height-base: 1;
@@ -364,7 +365,7 @@
   --pgn-size-data-table-dropdown-pagination-max-height: 60vh;
   --pgn-size-data-table-border: 1px;
   --pgn-size-container-max-width-xl: 1440px;
-  --pgn-size-container-max-width-lg: 1192px;
+  --pgn-size-container-max-width-lg: 1196px;
   --pgn-size-container-max-width-md: 952px;
   --pgn-size-container-max-width-sm: 708px;
   --pgn-size-container-max-width-xs: 464px;
@@ -406,9 +407,9 @@
   --pgn-size-annotation-arrow-border-width: .5rem;
   --pgn-size-alert-border-width: 0;
   --pgn-size-rounded-pill: 50rem;
-  --pgn-size-border-radius-sm: 4px;
-  --pgn-size-border-radius-lg: 7px;
-  --pgn-size-border-radius-base: 6px;
+  --pgn-size-border-radius-sm: .25rem;
+  --pgn-size-border-radius-lg: .425rem;
+  --pgn-size-border-radius-base: .375rem;
   --pgn-size-border-width: 1px;
   --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
   --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);

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 Thu, 09 May 2024 13:33:11 GMT
+ * Generated on Mon, 13 May 2024 08:42:31 GMT
  */
 
 :root {
@@ -453,11 +453,13 @@
   --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-yiq-light: var(--pgn-color-white);
   --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200);
   --pgn-color-list-group-action-base: var(--pgn-color-gray-700);
   --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600);
   --pgn-color-list-group-border: #00000020;
   --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-color-list-group-bg-base: var(--pgn-color-white);
   --pgn-color-hr-border: #0000001A;
   --pgn-color-headings-base: var(--pgn-color-black);
   --pgn-color-body-base: var(--pgn-color-gray-700);
@@ -896,11 +898,12 @@
   --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);
   --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-blockquote-small: var(--pgn-color-gray-500);
   --pgn-color-text-muted: var(--pgn-color-gray-500);
   --pgn-color-list-group-action-active-base: var(--pgn-color-body-base);
   --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base);
+  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
   --pgn-color-list-group-active-base: var(--pgn-color-active);
-  --pgn-color-list-group-bg-base: var(--pgn-color-bg-base);
   --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500);
   --pgn-color-link-brand-base: var(--pgn-color-brand-500);
   --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500);
@@ -1233,7 +1236,6 @@
   --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base);
   --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base);
   --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base);
-  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
   --pgn-color-list-group-active-bg: var(--pgn-color-bg-active);
   --pgn-color-link-brand-inline-hover-base: #51002BFF;
   --pgn-color-link-brand-inline-decoration: #9D00544D;
@@ -1468,7 +1470,7 @@
   --pgn-color-theme-bg-success: var(--pgn-color-success-100);
   --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100);
   --pgn-color-table-caption: var(--pgn-color-text-muted);
-  --pgn-color-input-btn-focus: var(--pgn-color-input-focus);
+  --pgn-color-input-btn-focus: var(--pgn-color-bg-active);
   --pgn-other-content-form-control-select-indicator-icon: 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="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="%23454545FF"/></svg>');
   --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e");

styles/scss/core/_variables.scss

@@ -282,7 +282,7 @@ $element-color-levels: map-merge(
     "border": 200,
     "icon": 300,
     "active-border": 300,
-    "focus": 300,
+    "focus": 500,
     "graphic": 300,
     "default": 500,
     "light-text": 500,
@@ -303,7 +303,7 @@ $yiq-contrasted-threshold:  150 !default;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
 $yiq-text-dark:             theme-color("gray", "text") !default;
-$yiq-text-light:            $white !default;
+$yiq-text-light:            var(--pgn-color-yiq-light) !default;
 
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
@@ -323,7 +323,6 @@ $enable-rounded:                              true !default;
 $enable-gradients:                            false !default;
 $enable-transitions:                          true !default;
 $enable-prefers-reduced-motion-media-query:   true !default;
-$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
 $enable-grid-classes:                         true !default;
 $enable-pointer-cursor-for-buttons:           true !default;
 $enable-print-styles:                         true !default;
@@ -750,7 +749,7 @@ $micro-line-height: var(--pgn-typography-line-height-micro);
 
 $text-muted: var(--pgn-color-text-muted) !default;
 
-$blockquote-small-color: theme-color("gray", "light-text") !default;
+$blockquote-small-color: var(--pgn-color-blockquote-small) !default;
 $blockquote-small-font-size: var(--pgn-typography-blockquote-small-font-size) !default;
 $blockquote-font-size: var(--pgn-typography-blockquote-font-size) !default;
 
@@ -837,7 +836,7 @@ $user-selects: all, auto, none !default;
 
 // Printing
 
-$print-page-size:                   a3 !default;
+$print-page-size:                   var(--pgn-typography-print-page-size) !default;
 $print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
 
 // List group

styles/scss/core/core.scss

@@ -18,4 +18,4 @@
 @import "../../css/core/custom-media-breakpoints";
 
 // Paragon components
-@import "../../../src/index";
+@import "../../../src";

tokens/src/core/alias/size.json

@@ -3,9 +3,9 @@
     "border": {
       "width": { "value": "1px", "type": "dimension", "source": "$border-width", "description": "Default border width." },
       "radius": {
-        "base": { "value": "6px", "type": "dimension", "source": "$border-radius", "description": "Default border radius." },
-        "lg": { "value": "7px", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." },
-        "sm": { "value": "4px", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." }
+        "base": { "value": ".375rem", "type": "dimension", "source": "$border-radius", "description": "Default border radius." },
+        "lg": { "value": ".425rem", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." },
+        "sm": { "value": ".25rem", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." }
       }
     },
     "rounded": {

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": "1192px", "type": "dimension", "source": "$max-width-lg" },
+        "lg": { "value": "1196px", "type": "dimension", "source": "$max-width-lg" },
         "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" }
       }
     }

tokens/src/core/global/display.json

@@ -16,6 +16,7 @@
         "3": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display3-weight", "description": "Font weight of level 3." },
         "4": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display4-weight", "description": "Font weight of level 4." }
       }
-    }
+    },
+    "print-page-size": { "value": "a3", "type": "dimension", "source": "$print-page-size" }
   }
 }

tokens/src/core/global/spacing.json

@@ -16,13 +16,15 @@
       "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" }
     },
     "label": {
-      "margin-bottom": { "value": ".5rem", "type": "dimension", "description": "Margin bottom for label." }
+      "margin-bottom": {
+        "value": ".5rem", "type": "dimension", "source": "$label-margin-bottom", "description": "Margin bottom for label."
+      }
     },
     "table": {
       "cell": {
         "padding": {
-          "base": { "value": "75rem", "type": "dimension", "description": "Padding for tables." },
-          "sm": { "value": ".3rem", "type": "dimension", "description": "Padding sm for tables." }
+          "base": { "value": "75rem", "type": "dimension", "source": "$table-cell-padding", "description": "Padding for tables." },
+          "sm": { "value": ".3rem", "type": "dimension", "source": "$table-cell-padding-sm", "description": "Padding sm for tables." }
         }
       }
     },

tokens/src/themes/light/alias/color.json

@@ -29,10 +29,10 @@
     },
     "table": {
       "caption": {
-        "value": "{color.text-muted}", "type": "color", "description": "Table caption color."
+        "value": "{color.text-muted}", "type": "color", "source": "$table-caption-color", "description": "Table caption color."
       },
       "border": {
-        "value": "{color.border}", "type": "color", "description": "Table border color."
+        "value": "{color.border}", "type": "color", "source": "$table-border-color", "description": "Table border color."
       }
     },
     "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." },

tokens/src/themes/light/components/general/input.json

@@ -1,7 +1,7 @@
 {
   "color": {
     "input": {
-      "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" }
+      "btn-focus": { "value": "{color.bg.active}", "type": "color", "source": "$input-btn-focus-color" }
     }
   },
   "elevation": {

tokens/src/themes/light/components/general/link.json

@@ -37,7 +37,7 @@
           "value": "{color.link.muted.base}",
           "type": "color",
           "source": "$muted-link-hover-color",
-          "modify": [{ "type": "darken", "amount": 0.15}]
+          "modify": [{ "type": "darken", "amount": 0.15 }]
         },
         "inline": {
           "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" },

tokens/src/themes/light/components/general/list.json

@@ -3,7 +3,7 @@
     "list-group": {
       "base": { "value": "inherit", "type": "color", "source": "$list-group-color" },
       "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$list-group-bg" },
+        "base": { "value": "{color.white}", "type": "color", "source": "$list-group-bg" },
         "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" }
       },
       "border": {

tokens/src/themes/light/components/general/text.json

@@ -1,6 +1,12 @@
 {
   "color": {
     "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" },
-    "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }
+    "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" },
+    "blockquote": {
+      "small": {
+        "value": "{color.gray.500}", "type": "color", "source": "$blockquote-small-color"
+      }
+    },
+    "yiq-light": { "value": "{color.white}", "type": "color", "source": "$yiq-text-light" }
   }
 }