diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css
index 9caedab3d5..ae226c484b 100644
--- 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 Thu, 16 Feb 2023 10:37:12 GMT
+ * Generated on Fri, 24 Feb 2023 12:30:21 GMT
*/
.bg-dark {
diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
index 67c6fdf9c0..5941b18595 100644
--- a/scss/core/css/variables.css
+++ b/scss/core/css/variables.css
@@ -1,45 +1,191 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
- * Generated on Thu, 16 Feb 2023 10:37:12 GMT
+ * Generated on Fri, 24 Feb 2023 12:30:21 GMT
*/
:root {
+ --pgn-color-dark-base: #273F2FFF;
+ --pgn-color-light-base: #E1DDDBFF;
+ --pgn-color-brand-base: #9D0054FF;
+ --pgn-color-primary-base: #0A3055FF;
+ --pgn-color-gray-base: #707070FF;
+ --pgn-color-gray-900: #212529FF;
+ --pgn-color-gray-800: #333333FF;
+ --pgn-color-gray-700: #454545FF;
+ --pgn-color-gray-600: #5C5C5CFF;
+ --pgn-color-gray-400: #8F8F8FFF;
+ --pgn-color-gray-300: #ADADADFF;
+ --pgn-color-gray-200: #CCCCCCFF;
+ --pgn-color-gray-100: #EBEBEBFF;
+ --pgn-color-accent-b: #FFEE88FF;
+ --pgn-color-accent-a: #00BBF9FF;
+ --pgn-color-teal: #006DAAFF;
+ --pgn-color-yellow: #FFD900FF;
+ --pgn-color-green: #178253FF;
+ --pgn-color-red: #C32D3AFF;
+ --pgn-color-blue: #23419FFF;
+ --pgn-color-black: #000000FF;
+ --pgn-color-white: #FFFFFFFF;
+ --pgn-color-toast-base: inherit;
+ --pgn-color-progress-bar-bg: #00000000;
+ --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
+ --pgn-color-popover-border: #00000033;
+ --pgn-color-menu-border-hover: #00000000;
+ --pgn-color-menu-border-active: #00000000;
+ --pgn-color-menu-border-base: #00000000;
+ --pgn-color-icon-button-bg: #00000000;
+ --pgn-color-mark-bg: #FFF243FF;
+ --pgn-color-list-group-base: inherit;
+ --pgn-color-form-control-select-bg-size: #000000FF;
+ --pgn-color-form-control-label-base: inherit;
+ --pgn-color-code-base: #E83E8CFF;
+ --pgn-color-carousel-control-opacity-hover: #000000FF;
+ --pgn-color-carousel-control-opacity-base: #000000FF;
+ --pgn-color-card-base: inherit;
+ --pgn-color-btn-disabled-border-inverse-warning: #00000000;
+ --pgn-color-btn-disabled-border-inverse-outline-success: inherit;
+ --pgn-color-btn-disabled-border-inverse-success: #00000000;
+ --pgn-color-btn-disabled-border-secondary: inherit;
+ --pgn-color-btn-disabled-border-inverse-primary: #00000000;
+ --pgn-color-btn-disabled-border-inverse-light: #00000000;
+ --pgn-color-btn-disabled-border-inverse-info: #00000000;
+ --pgn-color-btn-disabled-border-inverse-dark: #00000000;
+ --pgn-color-btn-disabled-border-inverse-danger: #00000000;
+ --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit;
+ --pgn-color-btn-disabled-bg-inverse-warning: inherit;
+ --pgn-color-btn-disabled-bg-outline-warning: inherit;
+ --pgn-color-btn-disabled-bg-inverse-tertiary: inherit;
+ --pgn-color-btn-disabled-bg-tertiary: inherit;
+ --pgn-color-btn-disabled-bg-inverse-outline-success: inherit;
+ --pgn-color-btn-disabled-bg-inverse-success: inherit;
+ --pgn-color-btn-disabled-bg-outline-success: inherit;
+ --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit;
+ --pgn-color-btn-disabled-bg-inverse-secondary: inherit;
+ --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-outline-light: inherit;
+ --pgn-color-btn-disabled-bg-inverse-light: inherit;
+ --pgn-color-btn-disabled-bg-outline-light: inherit;
+ --pgn-color-btn-disabled-bg-inverse-outline-info: inherit;
+ --pgn-color-btn-disabled-bg-inverse-info: inherit;
+ --pgn-color-btn-disabled-bg-outline-info: inherit;
+ --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit;
+ --pgn-color-btn-disabled-bg-inverse-dark: inherit;
+ --pgn-color-btn-disabled-bg-outline-dark: inherit;
+ --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-outline-brand: inherit;
+ --pgn-color-btn-disabled-text-inverse-secondary: inherit;
+ --pgn-color-btn-disabled-text-outline-secondary: inherit;
+ --pgn-color-btn-disabled-text-outline-dark: inherit;
+ --pgn-color-btn-focus-outline-inverse-outline-warning: inherit;
+ --pgn-color-btn-focus-bg-inverse-outline-warning: inherit;
+ --pgn-color-btn-focus-bg-outline-warning: inherit;
+ --pgn-color-btn-focus-bg-inverse-tertiary: inherit;
+ --pgn-color-btn-focus-bg-tertiary: inherit;
+ --pgn-color-btn-focus-bg-inverse-outline-success: inherit;
+ --pgn-color-btn-focus-bg-outline-success: inherit;
+ --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit;
+ --pgn-color-btn-focus-bg-outline-secondary: #00000000;
+ --pgn-color-btn-focus-bg-inverse-outline-primary: inherit;
+ --pgn-color-btn-focus-bg-outline-primary: inherit;
+ --pgn-color-btn-focus-bg-inverse-outline-light: inherit;
+ --pgn-color-btn-focus-bg-outline-light: #00000000;
+ --pgn-color-btn-focus-bg-inverse-outline-info: inherit;
+ --pgn-color-btn-focus-bg-outline-info: inherit;
+ --pgn-color-btn-focus-bg-inverse-outline-dark: inherit;
+ --pgn-color-btn-focus-bg-outline-dark: inherit;
+ --pgn-color-btn-focus-bg-inverse-outline-danger: inherit;
+ --pgn-color-btn-focus-bg-outline-danger: inherit;
+ --pgn-color-btn-focus-bg-inverse-outline-brand: inherit;
+ --pgn-color-btn-focus-bg-outline-brand: inherit;
+ --pgn-color-btn-focus-border-inverse-tertiary: #00000000;
+ --pgn-color-btn-focus-text-inverse-secondary: inherit;
+ --pgn-color-btn-focus-text-outline-dark: inherit;
+ --pgn-color-btn-active-border-inverse-outline-warning: #00000000;
+ --pgn-color-btn-active-border-inverse-warning: inherit;
+ --pgn-color-btn-active-border-inverse-tertiary: #00000000;
+ --pgn-color-btn-active-border-tertiary: #00000000;
+ --pgn-color-btn-active-border-inverse-outline-success: #00000000;
+ --pgn-color-btn-active-border-inverse-success: inherit;
+ --pgn-color-btn-active-border-inverse-secondary: #00000000;
+ --pgn-color-btn-active-border-inverse-outline-secondary: #00000000;
+ --pgn-color-btn-active-border-inverse-primary: #00000000;
+ --pgn-color-btn-active-border-inverse-outline-primary: #00000000;
+ --pgn-color-btn-active-border-inverse-outline-light: #00000000;
+ --pgn-color-btn-active-border-inverse-light: inherit;
+ --pgn-color-btn-active-border-inverse-outline-info: #00000000;
+ --pgn-color-btn-active-border-inverse-info: #00000000;
+ --pgn-color-btn-active-border-inverse-outline-dark: #00000000;
+ --pgn-color-btn-active-border-inverse-dark: #00000000;
+ --pgn-color-btn-active-border-inverse-outline-danger: #00000000;
+ --pgn-color-btn-active-border-inverse-danger: #00000000;
+ --pgn-color-btn-active-border-inverse-outline-brand: #00000000;
+ --pgn-color-btn-active-border-inverse-brand: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-warning: #00000000;
+ --pgn-color-btn-hover-border-inverse-warning: #00000000;
+ --pgn-color-btn-hover-border-inverse-tertiary: #00000000;
+ --pgn-color-btn-hover-border-tertiary: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-success: #00000000;
+ --pgn-color-btn-hover-border-inverse-success: #00000000;
+ --pgn-color-btn-hover-border-inverse-secondary: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000;
+ --pgn-color-btn-hover-border-inverse-primary: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-primary: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-light: #00000000;
+ --pgn-color-btn-hover-border-inverse-light: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-info: #00000000;
+ --pgn-color-btn-hover-border-inverse-info: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-dark: #00000000;
+ --pgn-color-btn-hover-border-inverse-dark: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-danger: #00000000;
+ --pgn-color-btn-hover-border-inverse-danger: #00000000;
+ --pgn-color-btn-hover-border-inverse-brand: #00000000;
+ --pgn-color-btn-hover-border-inverse-outline-brand: #00000000;
+ --pgn-color-btn-border-inverse-warning: #00000000;
+ --pgn-color-btn-border-inverse-tertiary: #00000000;
+ --pgn-color-btn-border-tertiary: #00000000;
+ --pgn-color-btn-border-inverse-success: #00000000;
+ --pgn-color-btn-border-inverse-secondary: #00000000;
+ --pgn-color-btn-border-inverse-primary: #00000000;
+ --pgn-color-btn-border-inverse-light: #00000000;
+ --pgn-color-btn-border-inverse-info: #00000000;
+ --pgn-color-btn-border-inverse-dark: #00000000;
+ --pgn-color-btn-border-inverse-danger: #00000000;
+ --pgn-color-btn-border-inverse-brand: #00000000;
+ --pgn-color-btn-bg-inverse-outline-warning: inherit;
+ --pgn-color-btn-bg-outline-warning: inherit;
+ --pgn-color-btn-bg-inverse-tertiary: #00000000;
+ --pgn-color-btn-bg-tertiary: #00000000;
+ --pgn-color-btn-bg-inverse-outline-success: inherit;
+ --pgn-color-btn-bg-outline-success: inherit;
+ --pgn-color-btn-bg-inverse-outline-secondary: inherit;
+ --pgn-color-btn-bg-outline-secondary: inherit;
+ --pgn-color-btn-bg-inverse-outline-primary: #00000000;
+ --pgn-color-btn-bg-outline-primary: #00000000;
+ --pgn-color-btn-bg-inverse-outline-light: inherit;
+ --pgn-color-btn-bg-outline-light: inherit;
+ --pgn-color-btn-bg-inverse-outline-info: inherit;
+ --pgn-color-btn-bg-outline-info: inherit;
+ --pgn-color-btn-bg-inverse-outline-dark: #00000000;
+ --pgn-color-btn-bg-outline-dark: inherit;
+ --pgn-color-btn-bg-inverse-outline-danger: #00000000;
+ --pgn-color-btn-bg-outline-danger: inherit;
+ --pgn-color-btn-bg-inverse-outline-brand: #00000000;
+ --pgn-color-btn-bg-outline-brand: inherit;
--pgn-theme-interval: 8%;
--pgn-other-tooltip-opacity: 1;
--pgn-other-search-field-disabled-opacity: .3;
--pgn-other-modal-opacity: .5;
--pgn-other-link-emphasized-hover-darken-percentage: 15%;
+ --pgn-other-chip-opacity-disabled: .3;
+ --pgn-other-btn-disabled-opacity: .65;
--pgn-other-form-feedback-tooltip-opacity: .9;
--pgn-other-form-control-range-track-cursor: pointer;
--pgn-other-form-control-cursor: auto;
- --pgn-other-chip-opacity-disabled: .3;
- --pgn-other-btn-disabled-opacity: .65;
- --pgn-transition-collapse: height .35s ease;
- --pgn-transition-fade: opacity .15s linear;
- --pgn-transition-base: all .2s ease-in-out;
- --pgn-transition-progress-bar-bar-transition: width .6s ease;
- --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
- --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
- --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
- --pgn-transition-carousel-control: opacity .15s ease;
- --pgn-transition-carousel-indicator: opacity .6s ease;
- --pgn-transition-carousel-duration: .6s;
- --pgn-transition-btn: none;
- --pgn-transition-badge: none;
- --pgn-elevation-zindex-fixed: 1030;
- --pgn-elevation-zindex-sticky: 1020;
- --pgn-elevation-zindex-2000: 2000;
- --pgn-elevation-zindex-1800: 1800;
- --pgn-elevation-zindex-1600: 1600;
- --pgn-elevation-zindex-1400: 1400;
- --pgn-elevation-zindex-1200: 1200;
- --pgn-elevation-zindex-1000: 1000;
- --pgn-elevation-zindex-800: 800;
- --pgn-elevation-zindex-600: 600;
- --pgn-elevation-zindex-400: 400;
- --pgn-elevation-zindex-200: 200;
- --pgn-elevation-zindex-0: 0;
--pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15);
--pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15);
--pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
@@ -73,20 +219,9 @@
--pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
--pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
--pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
- --pgn-elevation-tooltip-zindex: 1070;
- --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-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
--pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
--pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
- --pgn-elevation-sheet-zindex-main: 1032;
- --pgn-elevation-sheet-zindex-backdrop: 1031;
- --pgn-elevation-progress-bar-box-shadow: none;
- --pgn-elevation-product-tour-checkpoint-zindex: 1060;
- --pgn-elevation-popover-zindex: 1060;
- --pgn-elevation-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
- --pgn-elevation-modal-zindex: 1050;
- --pgn-elevation-modal-backdrop-zindex: 1040;
- --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
--pgn-elevation-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
--pgn-elevation-form-control-select-border-base: inset 0 1px 2px rgba(0, 0, 0, .075);
--pgn-elevation-form-control-range-thumb-base: 0 .1rem .25rem rgba(0, 0, 0, .1);
@@ -96,13 +231,49 @@
--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-base: inset 0 1px 1px rgba(0, 0, 0, .075);
- --pgn-elevation-dropdown-zindex: 1000;
- --pgn-elevation-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
--pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
--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-zindex-fixed: 1030;
+ --pgn-elevation-zindex-sticky: 1020;
+ --pgn-elevation-zindex-2000: 2000;
+ --pgn-elevation-zindex-1800: 1800;
+ --pgn-elevation-zindex-1600: 1600;
+ --pgn-elevation-zindex-1400: 1400;
+ --pgn-elevation-zindex-1200: 1200;
+ --pgn-elevation-zindex-1000: 1000;
+ --pgn-elevation-zindex-800: 800;
+ --pgn-elevation-zindex-600: 600;
+ --pgn-elevation-zindex-400: 400;
+ --pgn-elevation-zindex-200: 200;
+ --pgn-elevation-zindex-0: 0;
+ --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-tooltip-zindex: 1070;
+ --pgn-elevation-sheet-zindex-main: 1032;
+ --pgn-elevation-sheet-zindex-backdrop: 1031;
+ --pgn-elevation-progress-bar-box-shadow: none;
+ --pgn-elevation-product-tour-checkpoint-zindex: 1060;
+ --pgn-elevation-popover-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-zindex: 1060;
+ --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
+ --pgn-elevation-modal-zindex: 1050;
+ --pgn-elevation-modal-backdrop-zindex: 1040;
+ --pgn-elevation-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+ --pgn-elevation-dropdown-zindex: 1000;
+ --pgn-transition-collapse: height .35s ease;
+ --pgn-transition-fade: opacity .15s linear;
+ --pgn-transition-base: all .2s ease-in-out;
+ --pgn-transition-progress-bar-bar-transition: width .6s ease;
+ --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
+ --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+ --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+ --pgn-transition-carousel-control: opacity .15s ease;
+ --pgn-transition-carousel-indicator: opacity .6s ease;
+ --pgn-transition-carousel-duration: .6s;
+ --pgn-transition-btn: none;
+ --pgn-transition-badge: none;
--pgn-typography-line-height-sm: 1.5;
--pgn-typography-line-height-lg: 1.5;
--pgn-typography-line-height-base: 1.5556;
@@ -429,319 +600,6 @@
--pgn-size-border-radius-lg: 7px;
--pgn-size-border-radius-base: 6px;
--pgn-size-border-width: 1px;
- --pgn-color-dark-base: #273F2FFF;
- --pgn-color-light-base: #E1DDDBFF;
- --pgn-color-brand-base: #9D0054FF;
- --pgn-color-primary-base: #0A3055FF;
- --pgn-color-gray-base: #707070FF;
- --pgn-color-gray-900: #212529FF;
- --pgn-color-gray-800: #333333FF;
- --pgn-color-gray-700: #454545FF;
- --pgn-color-gray-600: #5C5C5CFF;
- --pgn-color-gray-400: #8F8F8FFF;
- --pgn-color-gray-300: #ADADADFF;
- --pgn-color-gray-200: #CCCCCCFF;
- --pgn-color-gray-100: #EBEBEBFF;
- --pgn-color-accent-b: #FFEE88FF;
- --pgn-color-accent-a: #00BBF9FF;
- --pgn-color-teal: #006DAAFF;
- --pgn-color-yellow: #FFD900FF;
- --pgn-color-green: #178253FF;
- --pgn-color-red: #C32D3AFF;
- --pgn-color-blue: #23419FFF;
- --pgn-color-black: #000000FF;
- --pgn-color-white: #FFFFFFFF;
- --pgn-color-toast-base: inherit;
- --pgn-color-progress-bar-bg: #00000000;
- --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
- --pgn-color-popover-border: #00000033;
- --pgn-color-menu-border-hover: #00000000;
- --pgn-color-menu-border-active: #00000000;
- --pgn-color-menu-border-base: #00000000;
- --pgn-color-icon-button-bg: #00000000;
- --pgn-color-mark-bg: #FFF243FF;
- --pgn-color-list-group-base: inherit;
- --pgn-color-form-control-select-bg-size: #000000FF;
- --pgn-color-form-control-label-base: inherit;
- --pgn-color-code-base: #E83E8CFF;
- --pgn-color-carousel-control-opacity-hover: #000000FF;
- --pgn-color-carousel-control-opacity-base: #000000FF;
- --pgn-color-card-base: inherit;
- --pgn-color-btn-disabled-border-inverse-warning: #00000000;
- --pgn-color-btn-disabled-border-inverse-outline-success: inherit;
- --pgn-color-btn-disabled-border-inverse-success: #00000000;
- --pgn-color-btn-disabled-border-secondary: inherit;
- --pgn-color-btn-disabled-border-inverse-primary: #00000000;
- --pgn-color-btn-disabled-border-inverse-light: #00000000;
- --pgn-color-btn-disabled-border-inverse-info: #00000000;
- --pgn-color-btn-disabled-border-inverse-dark: #00000000;
- --pgn-color-btn-disabled-border-inverse-danger: #00000000;
- --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit;
- --pgn-color-btn-disabled-bg-inverse-warning: inherit;
- --pgn-color-btn-disabled-bg-outline-warning: inherit;
- --pgn-color-btn-disabled-bg-inverse-tertiary: inherit;
- --pgn-color-btn-disabled-bg-tertiary: inherit;
- --pgn-color-btn-disabled-bg-inverse-outline-success: inherit;
- --pgn-color-btn-disabled-bg-inverse-success: inherit;
- --pgn-color-btn-disabled-bg-outline-success: inherit;
- --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit;
- --pgn-color-btn-disabled-bg-inverse-secondary: inherit;
- --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-outline-light: inherit;
- --pgn-color-btn-disabled-bg-inverse-light: inherit;
- --pgn-color-btn-disabled-bg-outline-light: inherit;
- --pgn-color-btn-disabled-bg-inverse-outline-info: inherit;
- --pgn-color-btn-disabled-bg-inverse-info: inherit;
- --pgn-color-btn-disabled-bg-outline-info: inherit;
- --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit;
- --pgn-color-btn-disabled-bg-inverse-dark: inherit;
- --pgn-color-btn-disabled-bg-outline-dark: inherit;
- --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-outline-brand: inherit;
- --pgn-color-btn-disabled-text-inverse-secondary: inherit;
- --pgn-color-btn-disabled-text-outline-secondary: inherit;
- --pgn-color-btn-disabled-text-outline-dark: inherit;
- --pgn-color-btn-focus-outline-inverse-outline-warning: inherit;
- --pgn-color-btn-focus-bg-inverse-outline-warning: inherit;
- --pgn-color-btn-focus-bg-outline-warning: inherit;
- --pgn-color-btn-focus-bg-inverse-tertiary: inherit;
- --pgn-color-btn-focus-bg-tertiary: inherit;
- --pgn-color-btn-focus-bg-inverse-outline-success: inherit;
- --pgn-color-btn-focus-bg-outline-success: inherit;
- --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit;
- --pgn-color-btn-focus-bg-outline-secondary: #00000000;
- --pgn-color-btn-focus-bg-inverse-outline-primary: inherit;
- --pgn-color-btn-focus-bg-outline-primary: inherit;
- --pgn-color-btn-focus-bg-inverse-outline-light: inherit;
- --pgn-color-btn-focus-bg-outline-light: #00000000;
- --pgn-color-btn-focus-bg-inverse-outline-info: inherit;
- --pgn-color-btn-focus-bg-outline-info: inherit;
- --pgn-color-btn-focus-bg-inverse-outline-dark: inherit;
- --pgn-color-btn-focus-bg-outline-dark: inherit;
- --pgn-color-btn-focus-bg-inverse-outline-danger: inherit;
- --pgn-color-btn-focus-bg-outline-danger: inherit;
- --pgn-color-btn-focus-bg-inverse-outline-brand: inherit;
- --pgn-color-btn-focus-bg-outline-brand: inherit;
- --pgn-color-btn-focus-border-inverse-tertiary: #00000000;
- --pgn-color-btn-focus-text-inverse-secondary: inherit;
- --pgn-color-btn-focus-text-outline-dark: inherit;
- --pgn-color-btn-active-border-inverse-outline-warning: #00000000;
- --pgn-color-btn-active-border-inverse-warning: inherit;
- --pgn-color-btn-active-border-inverse-tertiary: #00000000;
- --pgn-color-btn-active-border-tertiary: #00000000;
- --pgn-color-btn-active-border-inverse-outline-success: #00000000;
- --pgn-color-btn-active-border-inverse-success: inherit;
- --pgn-color-btn-active-border-inverse-secondary: #00000000;
- --pgn-color-btn-active-border-inverse-outline-secondary: #00000000;
- --pgn-color-btn-active-border-inverse-primary: #00000000;
- --pgn-color-btn-active-border-inverse-outline-primary: #00000000;
- --pgn-color-btn-active-border-inverse-outline-light: #00000000;
- --pgn-color-btn-active-border-inverse-light: inherit;
- --pgn-color-btn-active-border-inverse-outline-info: #00000000;
- --pgn-color-btn-active-border-inverse-info: #00000000;
- --pgn-color-btn-active-border-inverse-outline-dark: #00000000;
- --pgn-color-btn-active-border-inverse-dark: #00000000;
- --pgn-color-btn-active-border-inverse-outline-danger: #00000000;
- --pgn-color-btn-active-border-inverse-danger: #00000000;
- --pgn-color-btn-active-border-inverse-outline-brand: #00000000;
- --pgn-color-btn-active-border-inverse-brand: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-warning: #00000000;
- --pgn-color-btn-hover-border-inverse-warning: #00000000;
- --pgn-color-btn-hover-border-inverse-tertiary: #00000000;
- --pgn-color-btn-hover-border-tertiary: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-success: #00000000;
- --pgn-color-btn-hover-border-inverse-success: #00000000;
- --pgn-color-btn-hover-border-inverse-secondary: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000;
- --pgn-color-btn-hover-border-inverse-primary: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-primary: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-light: #00000000;
- --pgn-color-btn-hover-border-inverse-light: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-info: #00000000;
- --pgn-color-btn-hover-border-inverse-info: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-dark: #00000000;
- --pgn-color-btn-hover-border-inverse-dark: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-danger: #00000000;
- --pgn-color-btn-hover-border-inverse-danger: #00000000;
- --pgn-color-btn-hover-border-inverse-brand: #00000000;
- --pgn-color-btn-hover-border-inverse-outline-brand: #00000000;
- --pgn-color-btn-border-inverse-warning: #00000000;
- --pgn-color-btn-border-inverse-tertiary: #00000000;
- --pgn-color-btn-border-tertiary: #00000000;
- --pgn-color-btn-border-inverse-success: #00000000;
- --pgn-color-btn-border-inverse-secondary: #00000000;
- --pgn-color-btn-border-inverse-primary: #00000000;
- --pgn-color-btn-border-inverse-light: #00000000;
- --pgn-color-btn-border-inverse-info: #00000000;
- --pgn-color-btn-border-inverse-dark: #00000000;
- --pgn-color-btn-border-inverse-danger: #00000000;
- --pgn-color-btn-border-inverse-brand: #00000000;
- --pgn-color-btn-bg-inverse-outline-warning: inherit;
- --pgn-color-btn-bg-outline-warning: inherit;
- --pgn-color-btn-bg-inverse-tertiary: #00000000;
- --pgn-color-btn-bg-tertiary: #00000000;
- --pgn-color-btn-bg-inverse-outline-success: inherit;
- --pgn-color-btn-bg-outline-success: inherit;
- --pgn-color-btn-bg-inverse-outline-secondary: inherit;
- --pgn-color-btn-bg-outline-secondary: inherit;
- --pgn-color-btn-bg-inverse-outline-primary: #00000000;
- --pgn-color-btn-bg-outline-primary: #00000000;
- --pgn-color-btn-bg-inverse-outline-light: inherit;
- --pgn-color-btn-bg-outline-light: inherit;
- --pgn-color-btn-bg-inverse-outline-info: inherit;
- --pgn-color-btn-bg-outline-info: inherit;
- --pgn-color-btn-bg-inverse-outline-dark: #00000000;
- --pgn-color-btn-bg-outline-dark: inherit;
- --pgn-color-btn-bg-inverse-outline-danger: #00000000;
- --pgn-color-btn-bg-outline-danger: inherit;
- --pgn-color-btn-bg-inverse-outline-brand: #00000000;
- --pgn-color-btn-bg-outline-brand: inherit;
- --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
- --pgn-elevation-scrollable-body-box-shadow: #0000008C;
- --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-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);
- --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
- --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);
- --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25);
- --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6);
- --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5);
- --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4);
- --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3);
- --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2);
- --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif);
- --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold);
- --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold);
- --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold);
- --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold);
- --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
- --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
- --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
- --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm);
- --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
- --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
- --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
- --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
- --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base);
- --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
- --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
- --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
- --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
- --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
- --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base);
- --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
- --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base);
- --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
- --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
- --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
- --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family);
- --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x);
- --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
- --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
- --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
- --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
- --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
- --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x);
- --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
- --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
- --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
- --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
- --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
- --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
- --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
- --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold);
- --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
- --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
- --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
- --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4rem);
- --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2rem);
- --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25rem);
- --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75rem);
- --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375rem);
- --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5rem);
- --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3rem);
- --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5rem);
- --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
- --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5rem);
- --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25rem);
- --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
- --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-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
- --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
- --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
- --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
- --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
- --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
- --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
- --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
- --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item);
- --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
- --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
- --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);
- --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
- --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
- --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
- --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
- --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
- --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
- --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
- --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
- --pgn-size-product-tour-checkpoint-arrow-bottom: var(--pgn-size-product-tour-checkpoint-width-arrow) var(--pgn-size-product-tour-checkpoint-width-border);
- --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
- --pgn-size-popover-border-width: var(--pgn-size-border-width);
- --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
- --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm);
- --pgn-size-pagination-border-width: var(--pgn-size-border-width);
- --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
- --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
- --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
- --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
- --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) + .1em);
- --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
- --pgn-size-list-group-border-width: var(--pgn-size-border-width);
- --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
- --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
- --pgn-size-hr-border-width: var(--pgn-size-border-width);
- --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
- --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
- --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
- --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);
- --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
- --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
- --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
- --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
- --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
- --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
- --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
- --pgn-size-card-border-width: var(--pgn-size-border-width);
- --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-color-dark-900: #1B2C21FF;
--pgn-color-dark-800: #1D2F23FF;
--pgn-color-dark-700: #1F3226FF;
@@ -865,7 +723,7 @@
--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-base: #00000080;
+ --pgn-color-card-border-focus: #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);
@@ -973,50 +831,153 @@
--pgn-color-text-50-white: #FFFFFF80;
--pgn-color-text-50-black: #00000080;
--pgn-color-bg-base: var(--pgn-color-white);
+ --pgn-elevation-scrollable-body-box-shadow: #0000008C;
+ --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-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);
+ --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
+ --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
+ --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);
+ --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25);
+ --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6);
+ --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5);
+ --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4);
+ --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3);
+ --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2);
+ --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif);
+ --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
+ --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
+ --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
+ --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm);
+ --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
+ --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
+ --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
+ --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
+ --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base);
+ --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
+ --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
+ --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
+ --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base);
+ --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
+ --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base);
+ --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
+ --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
+ --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
+ --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family);
+ --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x);
+ --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
+ --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
+ --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
+ --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x);
+ --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
+ --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
+ --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
+ --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
+ --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
+ --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
+ --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
+ --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold);
+ --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
+ --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
+ --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
+ --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4rem);
+ --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2rem);
+ --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25rem);
+ --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75rem);
+ --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375rem);
+ --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5rem);
+ --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3rem);
+ --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5rem);
+ --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
+ --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5rem);
+ --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25rem);
+ --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
+ --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-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
+ --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
+ --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
+ --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
+ --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
+ --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
+ --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+ --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
+ --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item);
+ --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
+ --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
+ --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);
+ --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
+ --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
+ --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+ --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
+ --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
+ --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
+ --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
+ --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
+ --pgn-size-product-tour-checkpoint-arrow-bottom: var(--pgn-size-product-tour-checkpoint-width-arrow) var(--pgn-size-product-tour-checkpoint-width-border);
+ --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
+ --pgn-size-popover-border-width: var(--pgn-size-border-width);
+ --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
+ --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm);
+ --pgn-size-pagination-border-width: var(--pgn-size-border-width);
+ --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
+ --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
+ --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
+ --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
+ --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) + .1em);
+ --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
+ --pgn-size-list-group-border-width: var(--pgn-size-border-width);
+ --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
+ --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
+ --pgn-size-hr-border-width: var(--pgn-size-border-width);
+ --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
+ --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
+ --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
+ --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);
+ --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
+ --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
+ --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
+ --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
+ --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
+ --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
+ --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
+ --pgn-size-card-border-width: var(--pgn-size-border-width);
+ --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-border-color-nav-tabs-link-border-active: transparent transparent var(--pgn-color-primary-500);
--pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
--pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
- --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: var(--pgn-elevation-input-btn-focus-box-shadow);
- --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
- --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
- --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
- --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
- --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
- --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
- --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
- --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
- --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
- --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
- --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
- --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
- --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
- --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
- --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
- --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
- --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);
- --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
- --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
- --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width);
- --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2));
- --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base));
- --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
- --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;
--pgn-color-danger-700: #9C242EFF;
@@ -1323,24 +1284,46 @@
--pgn-color-input-focus: var(--pgn-color-primary-500);
--pgn-color-disabled: var(--pgn-color-gray-500);
--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: var(--pgn-elevation-input-btn-focus-box-shadow);
+ --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
+ --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
+ --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
+ --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
+ --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
+ --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
+ --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
+ --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
+ --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
+ --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
+ --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
+ --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
+ --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
+ --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
+ --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
+ --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
+ --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);
+ --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
+ --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
+ --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width);
+ --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2));
+ --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base));
+ --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
+ --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-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-border);
- --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,');
- --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-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-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
- --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
- --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
- --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
- --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
- --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
- --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
- --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
- --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
- --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
- --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
- --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
- --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
--pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg);
--pgn-color-popover-danger-icon: var(--pgn-color-warning-500);
--pgn-color-popover-danger-bg: var(--pgn-color-danger-100);
@@ -1401,7 +1384,6 @@
--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);
@@ -1594,13 +1576,23 @@
--pgn-color-theme-bg-success: var(--pgn-color-success-100);
--pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100);
--pgn-color-input-btn-focus: var(--pgn-color-input-focus);
- --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
- --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
- --pgn-other-content-form-control-select-bg: var(--pgn-other-content-form-control-select-indicator-icon) no-repeat right var(--pgn-spacing-form-input-padding-y-base) center / var(--pgn-color-form-control-select-bg-base);
- --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
- --pgn-other-content-form-control-radio-indicator-icon-checked: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
- --pgn-other-content-form-control-checkbox-indicator-icon-checked: url("data:image/svg+xml,");
- --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
+ --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,');
+ --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-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-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
+ --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
+ --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
+ --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
+ --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
+ --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
+ --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
+ --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
+ --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
+ --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
+ --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
+ --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
+ --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
--pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
--pgn-color-pagination-text-base: var(--pgn-color-link-base);
--pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg);
@@ -1731,7 +1723,13 @@
--pgn-color-alert-icon-danger: var(--pgn-color-theme-default-danger);
--pgn-color-alert-icon-info: var(--pgn-color-theme-default-info);
--pgn-color-alert-icon-success: var(--pgn-color-theme-default-success);
- --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,");
+ --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+ --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+ --pgn-other-content-form-control-select-bg: var(--pgn-other-content-form-control-select-indicator-icon) no-repeat right var(--pgn-spacing-form-input-padding-y-base) center / var(--pgn-color-form-control-select-bg-base);
+ --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
+ --pgn-other-content-form-control-radio-indicator-icon-checked: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
+ --pgn-other-content-form-control-checkbox-indicator-icon-checked: url("data:image/svg+xml,");
+ --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
--pgn-color-pagination-text-hover: var(--pgn-color-link-hover);
--pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base);
--pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger);
@@ -1755,4 +1753,5 @@
--pgn-color-btn-hover-text-secondary: #FFFFFFFF;
--pgn-color-btn-hover-text-info: #FFFFFFFF;
--pgn-color-btn-hover-text-danger: #FFFFFFFF;
+ --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,");
}
diff --git a/tokens/sass-helpers.js b/tokens/sass-helpers.js
index 13cb85b46a..08c121cdb0 100644
--- a/tokens/sass-helpers.js
+++ b/tokens/sass-helpers.js
@@ -7,21 +7,21 @@ const chroma = require('chroma-js');
* based on contrast value of the input color
*
* @param color - chroma-js color instance
- * @param {String} [light] - light color variant, defaults to 'yiq-text-light' from ./src/global/other.json
- * @param {String} [dark] - dark color variant, defaults to 'yiq-text-dark' from ./src/global/other.json
- * @param {Number} [threshold] - contrast threshold, defaults to 'yiq-contrasted-threshold'
- * from ./src/global/other.json
+ * @param {String} [themeVariant] - theme variant name that will be used to find default contrast colors
+ * @param {String} [light] - light color variant from ./src/themes/{themeVariant}/global/other.json
+ * @param {String} [dark] - dark color variant from ./src/themes/{themeVariant}/global/other.json
+ * @param {Number} [threshold] - contrast threshold from ./src/core/global/other.json
* @return chroma-js color instance (one of dark or light variants)
*/
-function colorYiq(color, light, dark, threshold) {
- const defaultsFile = fs.readFileSync(path.resolve(__dirname, 'src', 'global', 'other.json'), 'utf8');
- const defaults = JSON.parse(defaultsFile);
+function colorYiq(color, light, dark, threshold, themeVariant = 'light') {
+ const defaultThresholdFile = fs.readFileSync(path.resolve(__dirname, 'src/core/global', 'other.json'), 'utf8');
+ const defaultThreshold = JSON.parse(defaultThresholdFile)['yiq-contrasted-threshold'];
+ const defaultColorsFile = fs.readFileSync(path.resolve(__dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8');
const {
'yiq-text-dark': defaultDark,
'yiq-text-light': defaultLight,
- 'yiq-contrasted-threshold': defaultThreshold,
- } = defaults;
+ } = JSON.parse(defaultColorsFile);
const contrastThreshold = threshold || defaultThreshold;
const lightColor = light || defaultLight;
diff --git a/tokens/src/alias/size.json b/tokens/src/core/alias/size.json
similarity index 100%
rename from tokens/src/alias/size.json
rename to tokens/src/core/alias/size.json
diff --git a/tokens/src/components/ActionRow.json b/tokens/src/core/components/ActionRow.json
similarity index 100%
rename from tokens/src/components/ActionRow.json
rename to tokens/src/core/components/ActionRow.json
diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json
new file mode 100644
index 0000000000..f5913d592f
--- /dev/null
+++ b/tokens/src/core/components/Alert.json
@@ -0,0 +1,30 @@
+{
+ "spacing": {
+ "alert": {
+ "padding": {
+ "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" },
+ "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" }
+ },
+ "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" },
+ "actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" },
+ "icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" }
+ }
+ },
+ "typography": {
+ "alert": {
+ "font": {
+ "weight-link": { "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" },
+ "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" }
+ },
+ "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" }
+ }
+ },
+ "size": {
+ "alert": {
+ "border": {
+ "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" },
+ "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json
new file mode 100644
index 0000000000..8f3f67ff37
--- /dev/null
+++ b/tokens/src/core/components/Annotation.json
@@ -0,0 +1,25 @@
+{
+ "spacing": {
+ "annotation": {
+ "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" },
+ "arrow-side": {
+ "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" }
+ }
+ }
+ },
+ "typography": {
+ "annotation": {
+ "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" },
+ "line-height": { "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height" }
+ }
+ },
+ "size": {
+ "annotation": {
+ "arrow-border": {
+ "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" }
+ },
+ "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" },
+ "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" }
+ }
+ }
+}
diff --git a/tokens/src/components/Avatar.json b/tokens/src/core/components/Avatar.json
similarity index 85%
rename from tokens/src/components/Avatar.json
rename to tokens/src/core/components/Avatar.json
index 659d184bd3..c8cdb66d11 100644
--- a/tokens/src/components/Avatar.json
+++ b/tokens/src/core/components/Avatar.json
@@ -1,9 +1,4 @@
{
- "color": {
- "avatar": {
- "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" }
- }
- },
"size": {
"avatar": {
"base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" },
diff --git a/tokens/src/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json
similarity index 100%
rename from tokens/src/components/AvatarButton.json
rename to tokens/src/core/components/AvatarButton.json
diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
new file mode 100644
index 0000000000..921b1f09e0
--- /dev/null
+++ b/tokens/src/core/components/Badge.json
@@ -0,0 +1,33 @@
+{
+ "spacing": {
+ "badge": {
+ "padding": {
+ "x": {
+ "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" },
+ "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" }
+ },
+ "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" }
+ }
+ }
+ },
+ "typography": {
+ "badge": {
+ "font": {
+ "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" },
+ "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight" }
+ }
+ }
+ },
+ "size": {
+ "badge": {
+ "border-radius": {
+ "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" },
+ "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" }
+ },
+ "focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" }
+ }
+ },
+ "transition": {
+ "badge": { "value": "none", "type": "transition", "source": "$badge-transition" }
+ }
+}
diff --git a/tokens/src/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json
similarity index 64%
rename from tokens/src/components/Breadcrumb.json
rename to tokens/src/core/components/Breadcrumb.json
index a37867f9ef..c950f1df9b 100644
--- a/tokens/src/components/Breadcrumb.json
+++ b/tokens/src/core/components/Breadcrumb.json
@@ -1,17 +1,4 @@
{
- "color": {
- "breadcrumb": {
- "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
- "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
- "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" },
- "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
- "inverse": {
- "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
- "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" },
- "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" }
- }
- }
- },
"typography": {
"breadcrumb": {
"font-size": { "value": "inherit", "type": "dimension", "source": "$breadcrumb-font-size" }
diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
new file mode 100644
index 0000000000..262200e665
--- /dev/null
+++ b/tokens/src/core/components/Bubble.json
@@ -0,0 +1,10 @@
+{
+ "spacing": {
+ "bubble": {
+ "expandable-padding": {
+ "y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" },
+ "x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Button/core.json b/tokens/src/core/components/Button/core.json
similarity index 86%
rename from tokens/src/components/Button/core.json
rename to tokens/src/core/components/Button/core.json
index fe3f15e25b..65fe7cacf2 100644
--- a/tokens/src/components/Button/core.json
+++ b/tokens/src/core/components/Button/core.json
@@ -1,9 +1,4 @@
{
- "color": {
- "btn": {
- "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" }
- }
- },
"spacing": {
"btn": {
"padding": {
@@ -80,23 +75,6 @@
}
}
},
- "elevation": {
- "btn": {
- "box-shadow": {
- "base": {
- "value": "none",
- "type": "shadow",
- "source": "$btn-box-shadow"
- },
- "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" }
- }
- }
- },
- "other": {
- "btn": {
- "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" }
- }
- },
"size": {
"btn": {
"border": {
diff --git a/tokens/src/components/Card.json b/tokens/src/core/components/Card.json
similarity index 76%
rename from tokens/src/components/Card.json
rename to tokens/src/core/components/Card.json
index b033feaab8..19ede9bd1b 100644
--- a/tokens/src/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -1,36 +1,4 @@
{
- "color": {
- "card": {
- "base": { "value": "inherit", "type": "color", "source": "$card-color" },
- "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": {
- "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" }
- }
- },
"spacing": {
"card": {
"spacer": {
diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
new file mode 100644
index 0000000000..9e4e528837
--- /dev/null
+++ b/tokens/src/core/components/Carousel.json
@@ -0,0 +1,37 @@
+{
+ "size": {
+ "carousel": {
+ "control": {
+ "width": {
+ "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" },
+ "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" }
+ }
+ },
+ "indicator": {
+ "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
+ "height": {
+ "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
+ "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
+ }
+ },
+ "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
+ }
+ },
+ "spacing": {
+ "carousel": {
+ "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" }
+ }
+ },
+ "transition": {
+ "carousel": {
+ "base": {
+ "value": "transform {transition.carousel.duration} ease-in-out",
+ "type": "transition",
+ "source": "$carousel-transition-duration"
+ },
+ "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
+ "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
+ "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" }
+ }
+ }
+}
diff --git a/tokens/src/components/Chip.json b/tokens/src/core/components/Chip.json
similarity index 55%
rename from tokens/src/components/Chip.json
rename to tokens/src/core/components/Chip.json
index a59a1972b3..b03dd7742d 100644
--- a/tokens/src/components/Chip.json
+++ b/tokens/src/core/components/Chip.json
@@ -1,16 +1,4 @@
{
- "color": {
- "chip": {
- "text": {
- "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" },
- "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" }
- },
- "bg": {
- "light": { "value": "{color.light.500}", "type": "color", "source": "$chip-light-bg" },
- "dark": { "value": "{color.dark.200}", "type": "color", "source": "$chip-dark-bg" }
- }
- }
- },
"spacing": {
"chip": {
"margin": { "value": ".125rem", "type": "dimension", "source": "$chip-margin" },
@@ -22,11 +10,6 @@
}
}
},
- "other": {
- "chip": {
- "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" }
- }
- },
"size": {
"chip": {
"border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" },
diff --git a/tokens/src/components/CloseButton.json b/tokens/src/core/components/CloseButton.json
similarity index 56%
rename from tokens/src/components/CloseButton.json
rename to tokens/src/core/components/CloseButton.json
index a9fbe76040..4e7eb8f879 100644
--- a/tokens/src/components/CloseButton.json
+++ b/tokens/src/core/components/CloseButton.json
@@ -1,7 +1,4 @@
{
- "color": {
- "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" }
- },
"typography": {
"close-button": {
"font": {
@@ -13,10 +10,5 @@
}
}
}
- },
- "elevation": {
- "close-button": {
- "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" }
- }
}
}
diff --git a/tokens/src/components/Code.json b/tokens/src/core/components/Code.json
similarity index 59%
rename from tokens/src/components/Code.json
rename to tokens/src/core/components/Code.json
index df8b3fa31f..b8ae8bac6c 100644
--- a/tokens/src/components/Code.json
+++ b/tokens/src/core/components/Code.json
@@ -1,14 +1,4 @@
{
- "color": {
- "code": {
- "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" },
- "kbd": {
- "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" },
- "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" }
- },
- "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" }
- }
- },
"typography": {
"code": {
"font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" },
@@ -40,16 +30,5 @@
}
}
}
- },
- "elevation": {
- "code": {
- "kbd": {
- "box-shadow": {
- "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)",
- "type": "shadow",
- "source": "$kbd-box-shadow"
- }
- }
- }
}
}
diff --git a/tokens/src/components/Collapsible.json b/tokens/src/core/components/Collapsible.json
similarity index 100%
rename from tokens/src/components/Collapsible.json
rename to tokens/src/core/components/Collapsible.json
diff --git a/tokens/src/components/Container.json b/tokens/src/core/components/Container.json
similarity index 100%
rename from tokens/src/components/Container.json
rename to tokens/src/core/components/Container.json
diff --git a/tokens/src/components/DataTable.json b/tokens/src/core/components/DataTable.json
similarity index 63%
rename from tokens/src/components/DataTable.json
rename to tokens/src/core/components/DataTable.json
index 152f4a5fa9..49aa1125aa 100644
--- a/tokens/src/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -1,23 +1,4 @@
{
- "color": {
- "data-table": {
- "bg": {
- "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" },
- "is-loading": {
- "value": "{color.white}",
- "type": "color",
- "source": "$data-table-is-loading-bg",
- "modify": [{ "type": "alpha", "amount": 0.7 }]
- }
- },
- "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
- }
- },
- "elevation": {
- "data-table": {
- "box-shadow": { "value": "{elevation.box-shadow.sm}", "source": "$data-table-box-shadow", "type": "shadow" }
- }
- },
"size": {
"data-table": {
"border": { "value": "1px", "type": "dimension", "source": "$data-table-border" },
diff --git a/tokens/src/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
similarity index 58%
rename from tokens/src/components/Dropdown.json
rename to tokens/src/core/components/Dropdown.json
index 6eefa5a6de..324cc4574b 100644
--- a/tokens/src/components/Dropdown.json
+++ b/tokens/src/core/components/Dropdown.json
@@ -1,30 +1,4 @@
{
- "color": {
- "dropdown": {
- "text": { "value": "{color.body.base}", "type": "color", "source": "$dropdown-color" },
- "header": { "value": "{color.gray.500}", "type": "color", "source": "$dropdown-header-color" },
- "bg": { "value": "{color.bg.base}", "type": "color", "source": "$dropdown-bg" },
- "border": {
- "value": "{color.black}",
- "type": "color",
- "source": "$dropdown-border-color",
- "modify": [{ "type": "alpha", "amount": 0.15 }]
- },
- "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" },
- "link": {
- "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" },
- "hover": {
- "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" },
- "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" }
- },
- "active": {
- "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" },
- "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" }
- },
- "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" }
- }
- }
- },
"typography": {
"dropdown": {
"font-size": {
@@ -82,7 +56,6 @@
},
"elevation": {
"dropdown": {
- "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "type": "shadow", "source": "$dropdown-box-shadow" },
"zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" }
}
}
diff --git a/tokens/src/components/Dropzone.json b/tokens/src/core/components/Dropzone.json
similarity index 50%
rename from tokens/src/components/Dropzone.json
rename to tokens/src/core/components/Dropzone.json
index a86d0d53ec..9c18a92a5a 100644
--- a/tokens/src/components/Dropzone.json
+++ b/tokens/src/core/components/Dropzone.json
@@ -1,21 +1,4 @@
{
- "color": {
- "dropzone": {
- "error-wrapper": {
- "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color"
- },
- "restriction-msg": {
- "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color"
- },
- "border": {
- "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" },
- "hover": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-hover" },
- "focus": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-focus" },
- "active": { "value": "{color.primary.500}", "type": "color", "source": "$dropzone-border-color-active" },
- "error": { "value": "{color.danger.300}", "type": "color", "source": "$dropzone-border-color-error" }
- }
- }
- },
"typography": {
"dropzone": {
"restriction-msg": {
diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json
new file mode 100644
index 0000000000..ab373d0b03
--- /dev/null
+++ b/tokens/src/core/components/Form/other.json
@@ -0,0 +1,10 @@
+{
+ "other": {
+ "form": {
+ "control": {
+ "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" },
+ "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Form/size.json b/tokens/src/core/components/Form/size.json
similarity index 100%
rename from tokens/src/components/Form/size.json
rename to tokens/src/core/components/Form/size.json
diff --git a/tokens/src/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json
similarity index 100%
rename from tokens/src/components/Form/spacing.json
rename to tokens/src/core/components/Form/spacing.json
diff --git a/tokens/src/components/Form/transition.json b/tokens/src/core/components/Form/transition.json
similarity index 100%
rename from tokens/src/components/Form/transition.json
rename to tokens/src/core/components/Form/transition.json
diff --git a/tokens/src/components/Form/typography.json b/tokens/src/core/components/Form/typography.json
similarity index 100%
rename from tokens/src/components/Form/typography.json
rename to tokens/src/core/components/Form/typography.json
diff --git a/tokens/src/components/Icon.json b/tokens/src/core/components/Icon.json
similarity index 100%
rename from tokens/src/components/Icon.json
rename to tokens/src/core/components/Icon.json
diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json
new file mode 100644
index 0000000000..9e328e5c58
--- /dev/null
+++ b/tokens/src/core/components/IconButton.json
@@ -0,0 +1,15 @@
+{
+ "size": {
+ "icon-button": {
+ "diameter": {
+ "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" },
+ "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" },
+ "inline": {
+ "value": "calc({typography.line-height.base} + .1em)",
+ "type": "dimension",
+ "source": "$btn-icon-diameter-inline"
+ }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Image.json b/tokens/src/core/components/Image.json
similarity index 55%
rename from tokens/src/components/Image.json
rename to tokens/src/core/components/Image.json
index 8cde6871ea..5e388523de 100644
--- a/tokens/src/components/Image.json
+++ b/tokens/src/core/components/Image.json
@@ -1,13 +1,4 @@
{
- "color": {
- "image": {
- "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" },
- "thumbnail": {
- "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" },
- "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" }
- }
- }
- },
"typography": {
"image": {
"figure-caption": {
@@ -15,13 +6,6 @@
}
}
},
- "elevation": {
- "image": {
- "thumbnail": {
- "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$thumbnail-box-shadow" }
- }
- }
- },
"size": {
"image": {
"thumbnail": {
diff --git a/tokens/src/components/Modal.json b/tokens/src/core/components/Modal.json
similarity index 67%
rename from tokens/src/components/Modal.json
rename to tokens/src/core/components/Modal.json
index 425392f2b8..a8322e6484 100644
--- a/tokens/src/components/Modal.json
+++ b/tokens/src/core/components/Modal.json
@@ -1,29 +1,6 @@
{
- "color": {
- "modal": {
- "content": {
- "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" },
- "border": {
- "value": "{color.black}",
- "type": "color",
- "source": "$modal-content-border-color",
- "modify": [{ "type": "alpha", "amount": 0.2 }]
- }
- },
- "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" }
- }
- },
"elevation": {
"modal": {
- "content": {
- "box-shadow": {
- "sm-up": {
- "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)",
- "type": "shadow",
- "source": "$modal-content-box-shadow-sm-up"
- }
- }
- },
"backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" },
"zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" }
}
@@ -66,10 +43,5 @@
},
"dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" }
}
- },
- "other": {
- "modal": {
- "opacity": { "value": ".5", "type": "ratio", "source": "$modal-backdrop-opacity" }
- }
}
}
diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
new file mode 100644
index 0000000000..c9d5d2a0e8
--- /dev/null
+++ b/tokens/src/core/components/Nav.json
@@ -0,0 +1,35 @@
+{
+ "typography": {
+ "nav": {
+ "link": {
+ "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" }
+ }
+ }
+ },
+ "size": {
+ "nav": {
+ "pills": {
+ "border-radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" }
+ },
+ "tabs": {
+ "border": {
+ "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" },
+ "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" }
+ }
+ }
+ }
+ },
+ "spacing": {
+ "nav": {
+ "link": {
+ "padding": {
+ "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
+ "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
+ }
+ },
+ "divider": {
+ "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json
new file mode 100644
index 0000000000..4dd3062b49
--- /dev/null
+++ b/tokens/src/core/components/Navbar.json
@@ -0,0 +1,70 @@
+{
+ "spacing": {
+ "navbar": {
+ "padding": {
+ "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" },
+ "x": {
+ "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" },
+ "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" }
+ }
+ },
+ "brand": {
+ "padding": {
+ "y": {
+ "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)",
+ "type": "dimension",
+ "source": "$navbar-brand-padding-y"
+ }
+ }
+ },
+ "toggler": {
+ "padding": {
+ "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" },
+ "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" }
+ }
+ }
+ }
+ },
+ "typography": {
+ "navbar": {
+ "brand": {
+ "font-size": {
+ "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size"
+ }
+ },
+ "nav-link": {
+ "height": {
+ "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)",
+ "type": "dimension",
+ "source": "$nav-link-height"
+ }
+ },
+ "toggler": {
+ "font-size": {
+ "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size"
+ }
+ }
+ }
+ },
+ "size": {
+ "navbar": {
+ "nav": {
+ "scroll": {
+ "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" }
+ }
+ },
+ "brand": {
+ "height": {
+ "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})",
+ "type": "dimension",
+ "source": "$navbar-brand-height"
+ }
+ },
+ "toggler": {
+ "border-radius": {
+ "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius"
+ }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Pagination.json b/tokens/src/core/components/Pagination.json
similarity index 58%
rename from tokens/src/components/Pagination.json
rename to tokens/src/core/components/Pagination.json
index b3dc52c728..f2df597042 100644
--- a/tokens/src/components/Pagination.json
+++ b/tokens/src/core/components/Pagination.json
@@ -1,35 +1,4 @@
{
- "color": {
- "pagination": {
- "text": {
- "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" },
- "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" },
- "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" },
- "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" },
- "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" }
- },
- "bg": {
- "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" },
- "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" },
- "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" },
- "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" }
- },
- "border": {
- "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" },
- "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" },
- "active": {
- "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color"
- },
- "disabled": {
- "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color"
- }
- },
- "focus": {
- "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" },
- "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" }
- }
- }
- },
"typography": {
"pagination": {
"font-size": {
@@ -97,16 +66,5 @@
"outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" }
}
}
- },
- "elevation": {
- "pagination": {
- "focus": {
- "box-shadow": {
- "value": "{elevation.input.btn-focus.box-shadow}",
- "type": "shadow",
- "source": "$pagination-focus-box-shadow"
- }
- }
- }
}
}
diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json
new file mode 100644
index 0000000000..b2f2c7e929
--- /dev/null
+++ b/tokens/src/core/components/Popover.json
@@ -0,0 +1,48 @@
+{
+ "typography": {
+ "popover": {
+ "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" }
+ }
+ },
+ "size": {
+ "popover": {
+ "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" },
+ "border": {
+ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$popover-border-width" },
+ "radius": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$popover-border-radius" }
+ },
+ "icon": {
+ "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" },
+ "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" }
+ },
+ "arrow": {
+ "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" },
+ "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" }
+ }
+ }
+ },
+ "elevation": {
+ "popover": {
+ "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" }
+ }
+ },
+ "spacing": {
+ "popover": {
+ "header": {
+ "padding": {
+ "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" },
+ "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" }
+ }
+ },
+ "body": {
+ "padding": {
+ "y": { "value": "{spacing.popover.header.padding.y}", "type": "dimension", "source": "$popover-body-padding-y" },
+ "x": { "value": "{spacing.popover.header.padding.x}", "type": "dimension", "source": "$popover-body-padding-x" }
+ }
+ },
+ "icon": {
+ "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/ProductTour.json b/tokens/src/core/components/ProductTour.json
similarity index 51%
rename from tokens/src/components/ProductTour.json
rename to tokens/src/core/components/ProductTour.json
index 50baac986a..49604949c5 100644
--- a/tokens/src/components/ProductTour.json
+++ b/tokens/src/core/components/ProductTour.json
@@ -1,34 +1,4 @@
{
- "color": {
- "product-tour": {
- "checkpoint": {
- "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" },
- "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" },
- "border": { "value": "{color.brand.500}", "type": "color", "source": "$checkpoint-border-color" },
- "breadcrumb": { "value": "{color.primary.500}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
- "box-shadow": {
- "value": "{color.black}",
- "type": "color",
- "source": "$checkpoint-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.3 }]
- },
- "arrow": {
- "border": {
- "top": {
- "value": "{color.product-tour.checkpoint.bg}",
- "type": "color",
- "source": "$checkpoint-arrow-border-top-color"
- },
- "transparent": {
- "value": "transparent",
- "type": "color",
- "source": "$checkpoint-arrow-border-color-transparent"
- }
- }
- }
- }
- }
- },
"size": {
"product-tour": {
"checkpoint": {
diff --git a/tokens/src/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
similarity index 71%
rename from tokens/src/components/ProgressBar.json
rename to tokens/src/core/components/ProgressBar.json
index 5b90879298..299edaae47 100644
--- a/tokens/src/components/ProgressBar.json
+++ b/tokens/src/core/components/ProgressBar.json
@@ -1,17 +1,4 @@
{
- "color": {
- "progress-bar": {
- "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" },
- "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" },
- "bar": {
- "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" },
- "bg": {
- "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" },
- "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" }
- }
- }
- }
- },
"typography": {
"progress-bar": {
"font-size": {
diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json
new file mode 100644
index 0000000000..75eb4ec290
--- /dev/null
+++ b/tokens/src/core/components/SearchField.json
@@ -0,0 +1,23 @@
+{
+ "size": {
+ "search-field": {
+ "border": {
+ "width": {
+ "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" },
+ "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" }
+ },
+ "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" }
+ },
+ "search-input-height": {
+ "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+ "type": "dimension",
+ "source": "$input-height-search"
+ }
+ }
+ },
+ "spacing": {
+ "search-field": {
+ "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" }
+ }
+ }
+}
diff --git a/tokens/src/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json
similarity index 100%
rename from tokens/src/components/SelectableBox.json
rename to tokens/src/core/components/SelectableBox.json
diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json
new file mode 100644
index 0000000000..86b7358b82
--- /dev/null
+++ b/tokens/src/core/components/Sheet.json
@@ -0,0 +1,10 @@
+{
+ "elevation": {
+ "sheet": {
+ "zindex": {
+ "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" },
+ "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Spinner.json b/tokens/src/core/components/Spinner.json
similarity index 100%
rename from tokens/src/components/Spinner.json
rename to tokens/src/core/components/Spinner.json
diff --git a/tokens/src/components/Stack.json b/tokens/src/core/components/Stack.json
similarity index 100%
rename from tokens/src/components/Stack.json
rename to tokens/src/core/components/Stack.json
diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json
new file mode 100644
index 0000000000..9246a1e8d4
--- /dev/null
+++ b/tokens/src/core/components/Sticky.json
@@ -0,0 +1,7 @@
+{
+ "spacing": {
+ "sticky": {
+ "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" }
+ }
+ }
+}
diff --git a/tokens/src/components/Tabs.json b/tokens/src/core/components/Tabs.json
similarity index 100%
rename from tokens/src/components/Tabs.json
rename to tokens/src/core/components/Tabs.json
diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json
new file mode 100644
index 0000000000..c375011455
--- /dev/null
+++ b/tokens/src/core/components/Toast.json
@@ -0,0 +1,30 @@
+{
+ "typography": {
+ "toast": {
+ "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" }
+ }
+ },
+ "size": {
+ "toast": {
+ "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" },
+ "border": {
+ "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" },
+ "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" }
+ }
+ }
+ },
+ "spacing": {
+ "toast": {
+ "padding": {
+ "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" },
+ "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" }
+ },
+ "container": {
+ "gutter": {
+ "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" },
+ "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" }
+ }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Tooltip.json b/tokens/src/core/components/Tooltip.json
similarity index 52%
rename from tokens/src/components/Tooltip.json
rename to tokens/src/core/components/Tooltip.json
index 2207ee23eb..664263b894 100644
--- a/tokens/src/components/Tooltip.json
+++ b/tokens/src/core/components/Tooltip.json
@@ -4,20 +4,6 @@
"font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$tooltip-font-size" }
}
},
- "color": {
- "tooltip": {
- "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" },
- "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" },
- "bg": {
- "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" },
- "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" }
- },
- "arrow": {
- "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" },
- "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" }
- }
- }
- },
"spacing": {
"tooltip": {
"padding": {
@@ -29,11 +15,6 @@
},
"elevation": {
"tooltip": {
- "box-shadow": {
- "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
- "type": "shadow",
- "source": "$tooltip-box-shadow"
- },
"zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" }
}
},
@@ -48,10 +29,5 @@
"value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-border-radius"
}
}
- },
- "other": {
- "tooltip": {
- "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" }
- }
}
}
diff --git a/tokens/src/components/general/caret.json b/tokens/src/core/components/general/caret.json
similarity index 100%
rename from tokens/src/components/general/caret.json
rename to tokens/src/core/components/general/caret.json
diff --git a/tokens/src/components/general/headings.json b/tokens/src/core/components/general/headings.json
similarity index 80%
rename from tokens/src/components/general/headings.json
rename to tokens/src/core/components/general/headings.json
index 4bcc184689..045e188af2 100644
--- a/tokens/src/components/general/headings.json
+++ b/tokens/src/core/components/general/headings.json
@@ -1,9 +1,4 @@
{
- "color": {
- "headings": {
- "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" }
- }
- },
"typography": {
"headings": {
"font": {
diff --git a/tokens/src/components/general/hr.json b/tokens/src/core/components/general/hr.json
similarity index 55%
rename from tokens/src/components/general/hr.json
rename to tokens/src/core/components/general/hr.json
index 38e328347c..2bb05ca012 100644
--- a/tokens/src/components/general/hr.json
+++ b/tokens/src/core/components/general/hr.json
@@ -6,15 +6,5 @@
"margin-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$hr-margin-y" }
}
}
- },
- "color": {
- "hr": {
- "border": {
- "value": "{color.black}",
- "type": "color",
- "source": "$hr-border-color",
- "modify": [{ "type": "alpha", "amount": 0.1 }]
- }
- }
}
}
diff --git a/tokens/src/components/general/input.json b/tokens/src/core/components/general/input.json
similarity index 82%
rename from tokens/src/components/general/input.json
rename to tokens/src/core/components/general/input.json
index 06a11d4a92..821dc85692 100644
--- a/tokens/src/components/general/input.json
+++ b/tokens/src/core/components/general/input.json
@@ -1,9 +1,4 @@
{
- "color": {
- "input": {
- "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" }
- }
- },
"typography": {
"input": {
"btn": {
@@ -52,16 +47,5 @@
"focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-width" }
}
}
- },
- "elevation": {
- "input": {
- "btn-focus": {
- "box-shadow": {
- "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}",
- "type": "shadow",
- "source": "$input-btn-focus-box-shadow"
- }
- }
- }
}
}
diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json
new file mode 100644
index 0000000000..bb48968eb1
--- /dev/null
+++ b/tokens/src/core/components/general/link.json
@@ -0,0 +1,30 @@
+{
+ "typography": {
+ "link": {
+ "decoration": {
+ "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" },
+ "inline": {
+ "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" }
+ },
+ "muted": {
+ "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" },
+ "inline": {
+ "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" }
+ }
+ },
+ "brand": {
+ "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" },
+ "inline": {
+ "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json
new file mode 100644
index 0000000000..1b946b49d5
--- /dev/null
+++ b/tokens/src/core/components/general/list.json
@@ -0,0 +1,26 @@
+{
+ "typography": {
+ "dt": {
+ "font-weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight" }
+ }
+ },
+ "spacing": {
+ "list": {
+ "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" },
+ "group-item": {
+ "padding": {
+ "y": { "value": ".75rem", "type": "dimension", "source": "$list-group-item-padding-y" },
+ "x": { "value": "1.25rem", "type": "dimension", "source": "$list-group-item-padding-x" }
+ }
+ }
+ }
+ },
+ "size": {
+ "list-group": {
+ "border": {
+ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$list-group-border-width" },
+ "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$list-group-border-radius" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/general/text.json b/tokens/src/core/components/general/text.json
similarity index 77%
rename from tokens/src/components/general/text.json
rename to tokens/src/core/components/general/text.json
index 6fb012fb1e..c1104eb1bf 100644
--- a/tokens/src/components/general/text.json
+++ b/tokens/src/core/components/general/text.json
@@ -1,8 +1,4 @@
{
- "color": {
- "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" },
- "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }
- },
"spacing": {
"paragraph": {
"margin-bottom": { "value": "1rem", "type": "dimension", "source": "$paragraph-margin-bottom" }
diff --git a/tokens/src/global/breakpoints.json b/tokens/src/core/global/breakpoints.json
similarity index 100%
rename from tokens/src/global/breakpoints.json
rename to tokens/src/core/global/breakpoints.json
diff --git a/tokens/src/global/display.json b/tokens/src/core/global/display.json
similarity index 100%
rename from tokens/src/global/display.json
rename to tokens/src/core/global/display.json
diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json
new file mode 100644
index 0000000000..68af5d638c
--- /dev/null
+++ b/tokens/src/core/global/elevation.json
@@ -0,0 +1,19 @@
+{
+ "elevation": {
+ "zindex": {
+ "0": { "value": 0, "type": "ratio" },
+ "200": { "value": 200, "type": "ratio" },
+ "400": { "value": 400, "type": "ratio" },
+ "600": { "value": 600, "type": "ratio" },
+ "800": { "value": 800, "type": "ratio" },
+ "1000": { "value": 1000, "type": "ratio" },
+ "1200": { "value": 1200, "type": "ratio" },
+ "1400": { "value": 1400, "type": "ratio" },
+ "1600": { "value": 1600, "type": "ratio" },
+ "1800": { "value": 1800, "type": "ratio" },
+ "2000": { "value": 2000, "type": "ratio" },
+ "sticky": { "value": 1020, "source": "$zindex-sticky", "type": "ratio" },
+ "fixed": { "value": 1030, "source": "$zindex-fixed", "type": "ratio" }
+ }
+ }
+}
diff --git a/tokens/src/global/other.json b/tokens/src/core/global/other.json
similarity index 68%
rename from tokens/src/global/other.json
rename to tokens/src/core/global/other.json
index 4b9aa0d167..34c490f1c5 100644
--- a/tokens/src/global/other.json
+++ b/tokens/src/core/global/other.json
@@ -1,6 +1,4 @@
{
- "yiq-text-dark": "#454545",
- "yiq-text-light": "#FFFFFF",
"yiq-contrasted-threshold": 150,
"theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" }
}
diff --git a/tokens/src/global/spacing.json b/tokens/src/core/global/spacing.json
similarity index 100%
rename from tokens/src/global/spacing.json
rename to tokens/src/core/global/spacing.json
diff --git a/tokens/src/global/transition.json b/tokens/src/core/global/transition.json
similarity index 100%
rename from tokens/src/global/transition.json
rename to tokens/src/core/global/transition.json
diff --git a/tokens/src/global/typography.json b/tokens/src/core/global/typography.json
similarity index 100%
rename from tokens/src/global/typography.json
rename to tokens/src/core/global/typography.json
diff --git a/tokens/src/utilities/color.json b/tokens/src/core/utilities/color.json
similarity index 100%
rename from tokens/src/utilities/color.json
rename to tokens/src/core/utilities/color.json
diff --git a/tokens/src/alias/color.json b/tokens/src/themes/light/alias/color.json
similarity index 100%
rename from tokens/src/alias/color.json
rename to tokens/src/themes/light/alias/color.json
diff --git a/tokens/src/components/Alert.json b/tokens/src/themes/light/components/Alert.json
similarity index 62%
rename from tokens/src/components/Alert.json
rename to tokens/src/themes/light/components/Alert.json
index 6e2b4b4328..1ccd3bbfac 100644
--- a/tokens/src/components/Alert.json
+++ b/tokens/src/themes/light/components/Alert.json
@@ -1,26 +1,4 @@
{
- "spacing": {
- "alert": {
- "padding": {
- "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" },
- "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" }
- },
- "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" },
- "actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" },
- "icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" }
- }
- },
- "typography": {
- "alert": {
- "font": {
- "weight-link": {
- "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight"
- },
- "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" }
- },
- "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" }
- }
- },
"color": {
"alert": {
"title": { "value": "{color.black}", "type": "color", "source": "$alert-title-color" },
@@ -65,13 +43,5 @@
"source": "$alert-box-shadow"
}
}
- },
- "size": {
- "alert": {
- "border": {
- "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" },
- "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" }
- }
- }
}
}
diff --git a/tokens/src/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
similarity index 58%
rename from tokens/src/components/Annotation.json
rename to tokens/src/themes/light/components/Annotation.json
index 2c072afe28..24db7e10c9 100644
--- a/tokens/src/components/Annotation.json
+++ b/tokens/src/themes/light/components/Annotation.json
@@ -1,12 +1,4 @@
{
- "spacing": {
- "annotation": {
- "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" },
- "arrow-side": {
- "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" }
- }
- }
- },
"elevation": {
"annotation": {
"box-shadow": {
@@ -16,14 +8,6 @@
}
}
},
- "typography": {
- "annotation": {
- "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" },
- "line-height": {
- "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height"
- }
- }
- },
"color": {
"annotation": {
"text": {
@@ -41,14 +25,5 @@
"dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg"}
}
}
- },
- "size": {
- "annotation": {
- "arrow-border": {
- "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" }
- },
- "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" },
- "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" }
- }
}
}
diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json
new file mode 100644
index 0000000000..0e48a0a4d5
--- /dev/null
+++ b/tokens/src/themes/light/components/Avatar.json
@@ -0,0 +1,7 @@
+{
+ "color": {
+ "avatar": {
+ "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" }
+ }
+ }
+}
diff --git a/tokens/src/components/Badge.json b/tokens/src/themes/light/components/Badge.json
similarity index 86%
rename from tokens/src/components/Badge.json
rename to tokens/src/themes/light/components/Badge.json
index dab6a7613b..6ff6e21587 100644
--- a/tokens/src/components/Badge.json
+++ b/tokens/src/themes/light/components/Badge.json
@@ -1,25 +1,4 @@
{
- "spacing": {
- "badge": {
- "padding": {
- "x": {
- "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" },
- "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" }
- },
- "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" }
- }
- }
- },
- "typography": {
- "badge": {
- "font": {
- "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" },
- "weight": {
- "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight"
- }
- }
- }
- },
"color": {
"badge": {
"text": {
@@ -203,19 +182,5 @@
}
}
}
- },
- "size": {
- "badge": {
- "border-radius": {
- "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" },
- "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" }
- },
- "focus-width": {
- "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width"
- }
- }
- },
- "transition": {
- "badge": { "value": "none", "type": "transition", "source": "$badge-transition" }
}
}
diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json
new file mode 100644
index 0000000000..eb64650215
--- /dev/null
+++ b/tokens/src/themes/light/components/Breadcrumb.json
@@ -0,0 +1,15 @@
+{
+ "color": {
+ "breadcrumb": {
+ "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
+ "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
+ "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" },
+ "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
+ "inverse": {
+ "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
+ "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" },
+ "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json
similarity index 51%
rename from tokens/src/components/Bubble.json
rename to tokens/src/themes/light/components/Bubble.json
index 617285b4f0..b69eaec093 100644
--- a/tokens/src/components/Bubble.json
+++ b/tokens/src/themes/light/components/Bubble.json
@@ -2,25 +2,17 @@
"color": {
"bubble": {
"text": {
- "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color"},
- "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color"},
- "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color"},
- "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color"}
+ "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color" },
+ "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color" },
+ "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color" },
+ "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color" }
},
"bg": {
- "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg"},
- "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg"},
- "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg"},
- "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg"}
+ "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg" },
+ "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg" },
+ "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg" },
+ "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg" }
}
}
- },
- "spacing": {
- "bubble": {
- "expandable-padding": {
- "y": { "value": "0", "type": "dimension", "source": "$bubble-expandable-padding-y" },
- "x": { "value": ".25rem", "type": "dimension", "source": "$bubble-expandable-padding-x" }
- }
- }
}
}
diff --git a/tokens/src/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
similarity index 100%
rename from tokens/src/components/Button/brand.json
rename to tokens/src/themes/light/components/Button/brand.json
diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json
new file mode 100644
index 0000000000..8eabdf63ae
--- /dev/null
+++ b/tokens/src/themes/light/components/Button/core.json
@@ -0,0 +1,24 @@
+{
+ "color": {
+ "btn": {
+ "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" }
+ }
+ },
+ "elevation": {
+ "btn": {
+ "box-shadow": {
+ "base": {
+ "value": "none",
+ "type": "shadow",
+ "source": "$btn-box-shadow"
+ },
+ "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" }
+ }
+ }
+ },
+ "other": {
+ "btn": {
+ "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" }
+ }
+ }
+}
diff --git a/tokens/src/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json
similarity index 100%
rename from tokens/src/components/Button/danger.json
rename to tokens/src/themes/light/components/Button/danger.json
diff --git a/tokens/src/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json
similarity index 100%
rename from tokens/src/components/Button/dark.json
rename to tokens/src/themes/light/components/Button/dark.json
diff --git a/tokens/src/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json
similarity index 100%
rename from tokens/src/components/Button/info.json
rename to tokens/src/themes/light/components/Button/info.json
diff --git a/tokens/src/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json
similarity index 100%
rename from tokens/src/components/Button/light.json
rename to tokens/src/themes/light/components/Button/light.json
diff --git a/tokens/src/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json
similarity index 100%
rename from tokens/src/components/Button/primary.json
rename to tokens/src/themes/light/components/Button/primary.json
diff --git a/tokens/src/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json
similarity index 100%
rename from tokens/src/components/Button/secondary.json
rename to tokens/src/themes/light/components/Button/secondary.json
diff --git a/tokens/src/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json
similarity index 100%
rename from tokens/src/components/Button/success.json
rename to tokens/src/themes/light/components/Button/success.json
diff --git a/tokens/src/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json
similarity index 100%
rename from tokens/src/components/Button/tertiary.json
rename to tokens/src/themes/light/components/Button/tertiary.json
diff --git a/tokens/src/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json
similarity index 100%
rename from tokens/src/components/Button/warning.json
rename to tokens/src/themes/light/components/Button/warning.json
diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json
new file mode 100644
index 0000000000..e3dc8f23cc
--- /dev/null
+++ b/tokens/src/themes/light/components/Card.json
@@ -0,0 +1,33 @@
+{
+ "color": {
+ "card": {
+ "base": { "value": "inherit", "type": "color", "source": "$card-color" },
+ "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
+ }]
+ }
+ },
+ "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" }
+ }
+ }
+}
diff --git a/tokens/src/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json
similarity index 53%
rename from tokens/src/components/Carousel.json
rename to tokens/src/themes/light/components/Carousel.json
index 086f6ef667..1a06a8974f 100644
--- a/tokens/src/components/Carousel.json
+++ b/tokens/src/themes/light/components/Carousel.json
@@ -14,41 +14,6 @@
"caption": { "value": "{color.white}", "type": "color", "source": "$carousel-caption-color" }
}
},
- "size": {
- "carousel": {
- "control": {
- "width": {
- "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" },
- "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" }
- }
- },
- "indicator": {
- "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
- "height": {
- "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
- "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
- }
- },
- "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
- }
- },
- "spacing": {
- "carousel": {
- "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" }
- }
- },
- "transition": {
- "carousel": {
- "base": {
- "value": "transform {transition.carousel.duration} ease-in-out",
- "type": "transition",
- "source": "$carousel-transition-duration"
- },
- "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
- "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
- "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" }
- }
- },
"content": {
"carousel": {
"control": {
diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json
new file mode 100644
index 0000000000..38e32bb109
--- /dev/null
+++ b/tokens/src/themes/light/components/Chip.json
@@ -0,0 +1,19 @@
+{
+ "color": {
+ "chip": {
+ "text": {
+ "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" },
+ "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" }
+ },
+ "bg": {
+ "light": { "value": "{color.light.500}", "type": "color", "source": "$chip-light-bg" },
+ "dark": { "value": "{color.dark.200}", "type": "color", "source": "$chip-dark-bg" }
+ }
+ }
+ },
+ "other": {
+ "chip": {
+ "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" }
+ }
+ }
+}
diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json
new file mode 100644
index 0000000000..8d00637ca3
--- /dev/null
+++ b/tokens/src/themes/light/components/CloseButton.json
@@ -0,0 +1,10 @@
+{
+ "color": {
+ "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" }
+ },
+ "elevation": {
+ "close-button": {
+ "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" }
+ }
+ }
+}
diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json
new file mode 100644
index 0000000000..a14d475647
--- /dev/null
+++ b/tokens/src/themes/light/components/Code.json
@@ -0,0 +1,23 @@
+{
+ "color": {
+ "code": {
+ "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" },
+ "kbd": {
+ "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" },
+ "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" }
+ },
+ "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" }
+ }
+ },
+ "elevation": {
+ "code": {
+ "kbd": {
+ "box-shadow": {
+ "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)",
+ "type": "shadow",
+ "source": "$kbd-box-shadow"
+ }
+ }
+ }
+ }
+}
diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json
new file mode 100644
index 0000000000..9071d6457f
--- /dev/null
+++ b/tokens/src/themes/light/components/DataTable.json
@@ -0,0 +1,26 @@
+{
+ "color": {
+ "data-table": {
+ "bg": {
+ "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" },
+ "is-loading": {
+ "value": "{color.white}",
+ "type": "color",
+ "source": "$data-table-is-loading-bg",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.7
+ }
+ ]
+ }
+ },
+ "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
+ }
+ },
+ "elevation": {
+ "data-table": {
+ "box-shadow": { "value": "{elevation.box-shadow.sm}", "type": "shadow", "source": "$data-table-box-shadow" }
+ }
+ }
+}
diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
new file mode 100644
index 0000000000..9c9ae91fda
--- /dev/null
+++ b/tokens/src/themes/light/components/Dropdown.json
@@ -0,0 +1,36 @@
+{
+ "color": {
+ "dropdown": {
+ "text": { "value": "{color.body.base}", "type": "color", "source": "$dropdown-color" },
+ "header": { "value": "{color.gray.500}", "type": "color", "source": "$dropdown-header-color" },
+ "bg": { "value": "{color.bg.base}", "type": "color", "source": "$dropdown-bg" },
+ "border": {
+ "value": "{color.black}",
+ "type": "color",
+ "source": "$dropdown-border-color",
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.15
+ }]
+ },
+ "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" },
+ "link": {
+ "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" },
+ "hover": {
+ "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" },
+ "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" }
+ },
+ "active": {
+ "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" },
+ "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" }
+ },
+ "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" }
+ }
+ }
+ },
+ "elevation": {
+ "dropdown": {
+ "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "type": "shadow", "source": "$dropdown-box-shadow" }
+ }
+ }
+}
diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
new file mode 100644
index 0000000000..132b63ed6b
--- /dev/null
+++ b/tokens/src/themes/light/components/Dropzone.json
@@ -0,0 +1,19 @@
+{
+ "color": {
+ "dropzone": {
+ "error-wrapper": {
+ "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color"
+ },
+ "restriction-msg": {
+ "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color"
+ },
+ "border": {
+ "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" },
+ "hover": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-hover" },
+ "focus": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-focus" },
+ "active": { "value": "{color.primary.500}", "type": "color", "source": "$dropzone-border-color-active" },
+ "error": { "value": "{color.danger.300}", "type": "color", "source": "$dropzone-border-color-error" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
similarity index 100%
rename from tokens/src/components/Form/color.json
rename to tokens/src/themes/light/components/Form/color.json
diff --git a/tokens/src/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
similarity index 100%
rename from tokens/src/components/Form/elevation.json
rename to tokens/src/themes/light/components/Form/elevation.json
diff --git a/tokens/src/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
similarity index 95%
rename from tokens/src/components/Form/other.json
rename to tokens/src/themes/light/components/Form/other.json
index df43362782..fed2a4680d 100644
--- a/tokens/src/components/Form/other.json
+++ b/tokens/src/themes/light/components/Form/other.json
@@ -1,10 +1,6 @@
{
"other": {
"form": {
- "control": {
- "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" },
- "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" }
- },
"feedback": {
"tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" }
}
diff --git a/tokens/src/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
similarity index 72%
rename from tokens/src/components/IconButton.json
rename to tokens/src/themes/light/components/IconButton.json
index e5e92b727e..7236763d59 100644
--- a/tokens/src/components/IconButton.json
+++ b/tokens/src/themes/light/components/IconButton.json
@@ -13,18 +13,5 @@
"dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-icon-dark" },
"black": { "value": "{color.black}", "type": "color", "source": "$btn-icon-black" }
}
- },
- "size": {
- "icon-button": {
- "diameter": {
- "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" },
- "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" },
- "inline": {
- "value": "calc({typography.line-height.base} + .1em)",
- "type": "dimension",
- "source": "$btn-icon-diameter-inline"
- }
- }
- }
}
}
diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json
new file mode 100644
index 0000000000..aab2f96f87
--- /dev/null
+++ b/tokens/src/themes/light/components/Image.json
@@ -0,0 +1,18 @@
+{
+ "color": {
+ "image": {
+ "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" },
+ "thumbnail": {
+ "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" },
+ "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" }
+ }
+ }
+ },
+ "elevation": {
+ "image": {
+ "thumbnail": {
+ "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$thumbnail-box-shadow" }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Menu.json b/tokens/src/themes/light/components/Menu.json
similarity index 100%
rename from tokens/src/components/Menu.json
rename to tokens/src/themes/light/components/Menu.json
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
new file mode 100644
index 0000000000..8b76a512ac
--- /dev/null
+++ b/tokens/src/themes/light/components/Modal.json
@@ -0,0 +1,37 @@
+{
+ "color": {
+ "modal": {
+ "content": {
+ "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" },
+ "border": {
+ "value": "{color.black}",
+ "type": "color",
+ "source": "$modal-content-border-color",
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.2
+ }]
+ }
+ },
+ "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" }
+ }
+ },
+ "elevation": {
+ "modal": {
+ "content": {
+ "box-shadow": {
+ "sm-up": {
+ "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)",
+ "type": "shadow",
+ "source": "$modal-content-box-shadow-sm-up"
+ }
+ }
+ }
+ }
+ },
+ "other": {
+ "modal": {
+ "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" }
+ }
+ }
+}
diff --git a/tokens/src/components/Nav.json b/tokens/src/themes/light/components/Nav.json
similarity index 66%
rename from tokens/src/components/Nav.json
rename to tokens/src/themes/light/components/Nav.json
index 3b72b52ec2..a1f429542d 100644
--- a/tokens/src/components/Nav.json
+++ b/tokens/src/themes/light/components/Nav.json
@@ -59,42 +59,5 @@
"modify": [{ "type": "alpha", "amount": 0.5 }]
}
}
- },
- "typography": {
- "nav": {
- "link": {
- "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" }
- }
- }
- },
- "size": {
- "nav": {
- "pills": {
- "border-radius": {
- "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius"
- }
- },
- "tabs": {
- "border": {
- "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" },
- "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" }
- }
- }
- }
- },
- "spacing": {
- "nav": {
- "link": {
- "padding": {
- "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
- "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
- }
- },
- "divider": {
- "margin-y": {
- "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y"
- }
- }
- }
}
}
diff --git a/tokens/src/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json
similarity index 51%
rename from tokens/src/components/Navbar.json
rename to tokens/src/themes/light/components/Navbar.json
index 60ed7c2146..b855507ab0 100644
--- a/tokens/src/components/Navbar.json
+++ b/tokens/src/themes/light/components/Navbar.json
@@ -6,27 +6,39 @@
"value": "{color.white}",
"type": "color",
"source": "$navbar-dark-color",
- "modify": [{ "type": "alpha", "amount": 0.5 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.5
+ }]
},
"hover": {
"value": "{color.white}",
"type": "color",
"source": "$navbar-dark-hover-color",
- "modify": [{ "type": "alpha", "amount": 0.75 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.75
+ }]
},
"active": { "value": "{color.active}", "type": "color", "source": "$navbar-dark-active-color" },
"disabled": {
"value": "{color.white}",
"type": "color",
"source": "$navbar-dark-disabled-color",
- "modify": [{ "type": "alpha", "amount": 0.25 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.25
+ }]
},
"toggler": {
"border": {
"value": "{color.white}",
"type": "color",
"source": "$navbar-dark-toggler-border-color",
- "modify": [{ "type": "alpha", "amount": 0.1 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.1
+ }]
}
},
"brand": {
@@ -39,109 +51,52 @@
"value": "{color.black}",
"type": "color",
"source": "$navbar-light-color",
- "modify": [{ "type": "alpha", "amount": 0.5 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.5
+ }]
},
"hover": {
"value": "{color.black}",
"type": "color",
"source": "$navbar-light-hover-color",
- "modify": [{ "type": "alpha", "amount": 0.7 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.7
+ }]
},
"active": {
"value": "{color.black}",
"type": "color",
"source": "$navbar-light-active-color",
- "modify": [{ "type": "alpha", "amount": 0.9 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.9
+ }]
},
"disabled": {
"value": "{color.black}",
"type": "color",
"source": "$navbar-light-disabled-color",
- "modify": [{ "type": "alpha", "amount": 0.3 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.3
+ }]
},
"toggler": {
"border": {
"value": "{color.black}",
"type": "color",
"source": "$navbar-light-toggler-border-color",
- "modify": [{ "type": "alpha", "amount": 0.1 }]
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.1
+ }]
}
},
"brand": {
- "text": {
- "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color"
- },
- "hover": {
- "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color"
- }
- }
- }
- }
- },
- "spacing": {
- "navbar": {
- "padding": {
- "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" },
- "x": {
- "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" },
- "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" }
- }
- },
- "brand": {
- "padding": {
- "y": {
- "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)",
- "type": "dimension",
- "source": "$navbar-brand-padding-y"
- }
- }
- },
- "toggler": {
- "padding": {
- "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" },
- "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" }
- }
- }
- }
- },
- "typography": {
- "navbar": {
- "brand": {
- "font-size": {
- "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size"
- }
- },
- "nav-link": {
- "height": {
- "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)",
- "type": "dimension",
- "source": "$nav-link-height"
- }
- },
- "toggler": {
- "font-size": {
- "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size"
- }
- }
- }
- },
- "size": {
- "navbar": {
- "nav": {
- "scroll": {
- "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" }
- }
- },
- "brand": {
- "height": {
- "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})",
- "type": "dimension",
- "source": "$navbar-brand-height"
- }
- },
- "toggler": {
- "border-radius": {
- "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius"
+ "text": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color" },
+ "hover": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color" }
}
}
}
diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json
new file mode 100644
index 0000000000..f00bd89777
--- /dev/null
+++ b/tokens/src/themes/light/components/Pagination.json
@@ -0,0 +1,40 @@
+{
+ "color": {
+ "pagination": {
+ "text": {
+ "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" },
+ "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" },
+ "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" },
+ "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" },
+ "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" }
+ },
+ "bg": {
+ "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" },
+ "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" },
+ "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" },
+ "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" }
+ },
+ "border": {
+ "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" },
+ "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" },
+ "active": { "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color" },
+ "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color" }
+ },
+ "focus": {
+ "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" },
+ "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" }
+ }
+ }
+ },
+ "elevation": {
+ "pagination": {
+ "focus": {
+ "box-shadow": {
+ "value": "{elevation.input.btn-focus.box-shadow}",
+ "type": "shadow",
+ "source": "$pagination-focus-box-shadow"
+ }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/Popover.json b/tokens/src/themes/light/components/Popover.json
similarity index 54%
rename from tokens/src/components/Popover.json
rename to tokens/src/themes/light/components/Popover.json
index 3498575711..2b72cf2340 100644
--- a/tokens/src/components/Popover.json
+++ b/tokens/src/themes/light/components/Popover.json
@@ -1,9 +1,4 @@
{
- "typography": {
- "popover": {
- "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" }
- }
- },
"color": {
"popover": {
"bg": { "value": "{color.bg.base}", "type": "color", "source": "$popover-bg" },
@@ -48,57 +43,12 @@
}
}
},
- "size": {
- "popover": {
- "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" },
- "border": {
- "width": { "value": "{size.border.width}", "type": "color", "source": "$popover-border-width" },
- "radius": { "value": "{size.border.radius.sm}", "type": "color", "source": "$popover-border-radius" }
- },
- "icon": {
- "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" },
- "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" }
- },
- "arrow": {
- "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" },
- "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" }
- }
- }
- },
"elevation": {
"popover": {
"box-shadow": {
"value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
"type": "shadow",
"source": "$popover-box-shadow"
- },
- "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" }
- }
- },
- "spacing": {
- "popover": {
- "header": {
- "padding": {
- "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" },
- "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" }
- }
- },
- "body": {
- "padding": {
- "y": {
- "value": "{spacing.popover.header.padding.y}",
- "type": "dimension",
- "source": "$popover-body-padding-y"
- },
- "x": {
- "value": "{spacing.popover.header.padding.x}",
- "type": "dimension",
- "source": "$popover-body-padding-x"
- }
- }
- },
- "icon": {
- "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" }
}
}
}
diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json
new file mode 100644
index 0000000000..0c0181ab60
--- /dev/null
+++ b/tokens/src/themes/light/components/ProductTour.json
@@ -0,0 +1,35 @@
+{
+ "color": {
+ "product-tour": {
+ "checkpoint": {
+ "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" },
+ "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" },
+ "border": { "value": "{color.brand.500}", "type": "color", "source": "$checkpoint-border-color" },
+ "breadcrumb": { "value": "{color.primary.500}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
+ "box-shadow": {
+ "value": "{color.black}",
+ "type": "color",
+ "source": "$checkpoint-box-shadow-color",
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.3
+ }]
+ },
+ "arrow": {
+ "border": {
+ "top": {
+ "value": "{color.product-tour.checkpoint.bg}",
+ "type": "color",
+ "source": "$checkpoint-arrow-border-top-color"
+ },
+ "transparent": {
+ "value": "transparent",
+ "type": "color",
+ "source": "$checkpoint-arrow-border-color-transparent"
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json
new file mode 100644
index 0000000000..400017cabf
--- /dev/null
+++ b/tokens/src/themes/light/components/ProgressBar.json
@@ -0,0 +1,20 @@
+{
+ "color": {
+ "progress-bar": {
+ "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" },
+ "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" },
+ "bar": {
+ "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" },
+ "bg": {
+ "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" },
+ "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" }
+ }
+ }
+ }
+ },
+ "elevation": {
+ "progress-bar": {
+ "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" }
+ }
+ }
+}
diff --git a/tokens/src/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json
similarity index 100%
rename from tokens/src/components/Scrollable.json
rename to tokens/src/themes/light/components/Scrollable.json
diff --git a/tokens/src/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json
similarity index 51%
rename from tokens/src/components/SearchField.json
rename to tokens/src/themes/light/components/SearchField.json
index 985e34551f..23ee467f0a 100644
--- a/tokens/src/components/SearchField.json
+++ b/tokens/src/themes/light/components/SearchField.json
@@ -14,27 +14,6 @@
}
}
},
- "size": {
- "search-field": {
- "border": {
- "width": {
- "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" },
- "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" }
- },
- "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" }
- },
- "search-input-height": {
- "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
- "type": "dimension",
- "source": "$input-height-search"
- }
- }
- },
- "spacing": {
- "search-field": {
- "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" }
- }
- },
"other": {
"search-field": {
"disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" }
diff --git a/tokens/src/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json
similarity index 67%
rename from tokens/src/components/Sheet.json
rename to tokens/src/themes/light/components/Sheet.json
index bd6a3cb1e5..996e689bfa 100644
--- a/tokens/src/components/Sheet.json
+++ b/tokens/src/themes/light/components/Sheet.json
@@ -18,13 +18,5 @@
}
}
}
- },
- "elevation": {
- "sheet": {
- "zindex": {
- "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" },
- "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" }
- }
- }
}
}
diff --git a/tokens/src/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json
similarity index 78%
rename from tokens/src/components/Sticky.json
rename to tokens/src/themes/light/components/Sticky.json
index d8dec48f6f..396aa1d04f 100644
--- a/tokens/src/components/Sticky.json
+++ b/tokens/src/themes/light/components/Sticky.json
@@ -14,10 +14,5 @@
}
}
}
- },
- "spacing": {
- "sticky": {
- "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" }
- }
}
}
diff --git a/tokens/src/components/Toast.json b/tokens/src/themes/light/components/Toast.json
similarity index 51%
rename from tokens/src/components/Toast.json
rename to tokens/src/themes/light/components/Toast.json
index dec1b7447a..b40da24624 100644
--- a/tokens/src/components/Toast.json
+++ b/tokens/src/themes/light/components/Toast.json
@@ -21,11 +21,6 @@
}
}
},
- "typography": {
- "toast": {
- "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" }
- }
- },
"elevation": {
"toast": {
"box-shadow": {
@@ -34,28 +29,5 @@
"source": "$toast-box-shadow"
}
}
- },
- "size": {
- "toast": {
- "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" },
- "border": {
- "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" },
- "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" }
- }
- }
- },
- "spacing": {
- "toast": {
- "padding": {
- "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" },
- "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" }
- },
- "container": {
- "gutter": {
- "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" },
- "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" }
- }
- }
- }
}
}
diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json
new file mode 100644
index 0000000000..a73762aba6
--- /dev/null
+++ b/tokens/src/themes/light/components/Tooltip.json
@@ -0,0 +1,30 @@
+{
+ "color": {
+ "tooltip": {
+ "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" },
+ "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" },
+ "bg": {
+ "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" },
+ "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" }
+ },
+ "arrow": {
+ "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" },
+ "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" }
+ }
+ }
+ },
+ "elevation": {
+ "tooltip": {
+ "box-shadow": {
+ "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
+ "type": "shadow",
+ "source": "$tooltip-box-shadow"
+ }
+ }
+ },
+ "other": {
+ "tooltip": {
+ "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" }
+ }
+ }
+}
diff --git a/tokens/src/components/general/body.json b/tokens/src/themes/light/components/general/body.json
similarity index 100%
rename from tokens/src/components/general/body.json
rename to tokens/src/themes/light/components/general/body.json
diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json
new file mode 100644
index 0000000000..989214871b
--- /dev/null
+++ b/tokens/src/themes/light/components/general/headings.json
@@ -0,0 +1,7 @@
+{
+ "color": {
+ "headings": {
+ "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" }
+ }
+ }
+}
diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json
new file mode 100644
index 0000000000..3c40c8d618
--- /dev/null
+++ b/tokens/src/themes/light/components/general/hr.json
@@ -0,0 +1,15 @@
+{
+ "color": {
+ "hr": {
+ "border": {
+ "value": "{color.black}",
+ "type": "color",
+ "source": "$hr-border-color",
+ "modify": [{
+ "type": "alpha",
+ "amount": 0.1
+ }]
+ }
+ }
+ }
+}
diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json
new file mode 100644
index 0000000000..d661e658f7
--- /dev/null
+++ b/tokens/src/themes/light/components/general/input.json
@@ -0,0 +1,18 @@
+{
+ "color": {
+ "input": {
+ "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" }
+ }
+ },
+ "elevation": {
+ "input": {
+ "btn-focus": {
+ "box-shadow": {
+ "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}",
+ "type": "shadow",
+ "source": "$input-btn-focus-box-shadow"
+ }
+ }
+ }
+ }
+}
diff --git a/tokens/src/components/general/link.json b/tokens/src/themes/light/components/general/link.json
similarity index 71%
rename from tokens/src/components/general/link.json
rename to tokens/src/themes/light/components/general/link.json
index 9dc6a93434..e6bc07eb82 100644
--- a/tokens/src/components/general/link.json
+++ b/tokens/src/themes/light/components/general/link.json
@@ -97,34 +97,6 @@
}
}
},
- "typography": {
- "link": {
- "decoration": {
- "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" },
- "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" },
- "inline": {
- "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" },
- "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" }
- },
- "muted": {
- "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" },
- "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" },
- "inline": {
- "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" },
- "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" }
- }
- },
- "brand": {
- "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" },
- "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" },
- "inline": {
- "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" },
- "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" }
- }
- }
- }
- }
- },
"other": {
"link": {
"emphasized-hover": {
diff --git a/tokens/src/components/general/list.json b/tokens/src/themes/light/components/general/list.json
similarity index 65%
rename from tokens/src/components/general/list.json
rename to tokens/src/themes/light/components/general/list.json
index 4dc246a97b..bfd9e824cd 100644
--- a/tokens/src/components/general/list.json
+++ b/tokens/src/themes/light/components/general/list.json
@@ -1,11 +1,4 @@
{
- "typography": {
- "dt": {
- "font-weight": {
- "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight"
- }
- }
- },
"color": {
"list-group": {
"base": { "value": "inherit", "type": "color", "source": "$list-group-color" },
@@ -41,24 +34,5 @@
}
}
}
- },
- "spacing": {
- "list": {
- "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" },
- "group-item": {
- "padding": {
- "y": { "value": ".75rem", "type": "dimension", "source": "$list-group-item-padding-y" },
- "x": { "value": "1.25rem", "type": "dimension", "source": "$list-group-item-padding-x" }
- }
- }
- }
- },
- "size": {
- "list-group": {
- "border": {
- "width": { "value": "{size.border.width}", "type": "dimension", "source": "$list-group-border-width" },
- "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$list-group-border-radius" }
- }
- }
}
}
diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json
new file mode 100644
index 0000000000..7532d0e261
--- /dev/null
+++ b/tokens/src/themes/light/components/general/text.json
@@ -0,0 +1,6 @@
+{
+ "color": {
+ "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" },
+ "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }
+ }
+}
diff --git a/tokens/src/global/color.json b/tokens/src/themes/light/global/color.json
similarity index 100%
rename from tokens/src/global/color.json
rename to tokens/src/themes/light/global/color.json
diff --git a/tokens/src/global/elevation.json b/tokens/src/themes/light/global/elevation.json
similarity index 89%
rename from tokens/src/global/elevation.json
rename to tokens/src/themes/light/global/elevation.json
index 99b9ff3eca..94a24c71fc 100644
--- a/tokens/src/global/elevation.json
+++ b/tokens/src/themes/light/global/elevation.json
@@ -166,21 +166,6 @@
"source": "$box-shadow-centered-5"
}
}
- },
- "zindex": {
- "0": { "value": 0, "type": "ratio" },
- "200": { "value": 200, "type": "ratio" },
- "400": { "value": 400, "type": "ratio" },
- "600": { "value": 600, "type": "ratio" },
- "800": { "value": 800, "type": "ratio" },
- "1000": { "value": 1000, "type": "ratio" },
- "1200": { "value": 1200, "type": "ratio" },
- "1400": { "value": 1400, "type": "ratio" },
- "1600": { "value": 1600, "type": "ratio" },
- "1800": { "value": 1800, "type": "ratio" },
- "2000": { "value": 2000, "type": "ratio" },
- "sticky": { "value": 1020, "type": "ratio", "source": "$zindex-sticky" },
- "fixed": { "value": 1030, "type": "ratio", "source": "$zindex-fixed" }
}
}
}
diff --git a/tokens/src/themes/light/global/other.json b/tokens/src/themes/light/global/other.json
new file mode 100644
index 0000000000..360b2c1485
--- /dev/null
+++ b/tokens/src/themes/light/global/other.json
@@ -0,0 +1,4 @@
+{
+ "yiq-text-dark": "#454545",
+ "yiq-text-light": "#FFFFFF"
+}
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index dc3443d1a8..0f5708ce33 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -26,8 +26,15 @@ const colorTransform = (token) => {
color = color.mix(otherColor, amount, 'rgb');
break;
case 'color-yiq': {
+ // find whether token belongs to any theme based on its location
+ // split full path by '/', check if 'themes' directory is a part of the path, if it is - the next nested
+ // directory is the theme name, otherwise use 'light' theme
+ const pathParts = token.filePath.split('/');
+ const themePartIndex = pathParts.findIndex(item => item === 'themes');
+ const themeVariant = themePartIndex === -1 ? 'light' : pathParts[themePartIndex + 1];
+
const { light, dark, threshold } = modifier;
- color = colorYiq(color, light, dark, threshold);
+ color = colorYiq(color, light, dark, threshold, themeVariant);
break;
}
case 'darken':