diff --git a/package.json b/package.json index 36a0f56a7f..a43aaf2160 100644 --- a/package.json +++ b/package.json @@ -199,10 +199,10 @@ ] }, "lint-staged": { - "*.{js,jsx,ts,tsx}": [ + "*.{mjs}": [ "npx eslint" ], - "*.scss": [ + "*.sass": [ "npx stylelint" ] }, diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index c62b3261e1..00db050fdb 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -1,4 +1,4 @@ -[object Promise]@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem); +@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem); @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px); @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px); @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index ac7307dc4e..e314d7e39e 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,4 +1,4 @@ -[object Promise]:root { +:root { --pgn-theme-interval: 8%; --pgn-other-form-control-custom-file-content: Browse; --pgn-other-form-control-custom-file-lang: en; @@ -36,6 +36,7 @@ --pgn-transition-carousel-control: opacity .15s ease; --pgn-transition-carousel-indicator: opacity .6s ease; --pgn-transition-carousel-duration: .6s; + --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; --pgn-transition-btn: none; --pgn-transition-badge: none; --pgn-typography-line-height-micro: .938rem; @@ -44,6 +45,7 @@ --pgn-typography-line-height-base: 1.5556rem; --pgn-typography-font-weight-table-th: normal; --pgn-typography-font-weight-lead: inherit; + --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); --pgn-typography-font-weight-bolder: bolder; --pgn-typography-font-weight-bold: 700; --pgn-typography-font-weight-semi-bold: 500; @@ -51,6 +53,12 @@ --pgn-typography-font-weight-light: 300; --pgn-typography-font-weight-lighter: lighter; --pgn-typography-font-size-micro: .688rem; + --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-size-mobile-h1: 2.25rem; --pgn-typography-font-size-h6: .75rem; --pgn-typography-font-size-h5: .875rem; @@ -67,7 +75,12 @@ --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; --pgn-typography-font-family-serif: serif; --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); --pgn-typography-print-page-size: a3; + --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-display-mobile: 3.25rem; --pgn-typography-display-line-height-mobile: 3.5rem; --pgn-typography-display-line-height-base: 1rem; @@ -75,6 +88,9 @@ --pgn-typography-display-3: 5.625rem; --pgn-typography-display-2: 4.875rem; --pgn-typography-display-1: 3.75rem; + --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-link-decoration-brand-inline-hover: underline; --pgn-typography-link-decoration-brand-inline-base: underline; --pgn-typography-link-decoration-brand-hover: underline; @@ -87,6 +103,7 @@ --pgn-typography-link-decoration-inline-base: underline; --pgn-typography-link-decoration-hover: underline; --pgn-typography-link-decoration-base: none; + --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); --pgn-typography-input-btn-line-height-sm: 1.4286rem; --pgn-typography-input-btn-line-height-base: 1.3333rem; --pgn-typography-input-btn-font-size-lg: 1.325rem; @@ -94,26 +111,84 @@ --pgn-typography-input-btn-font-size-base: 1.125rem; --pgn-typography-input-btn-font-family: inherit; --pgn-typography-headings-line-height: 1.25rem; + --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-headings-font-family: inherit; + --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); --pgn-typography-toast-font-size: .875rem; + --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs); --pgn-typography-spacer-line-height: 1px; + --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-pagination-line-height: 1.5rem; --pgn-typography-pagination-font-size-sm: .875rem; + --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-nav-link-text-decoration: none; --pgn-typography-nav-link-font-weight: 500; --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem; --pgn-typography-menu-select-btn-link-text-decoration-line: underline; --pgn-typography-image-figure-caption-font-size: 90%; + --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-control-file-font-weight: var(--pgn-typography-form-input-font-weight); + --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-weight: var(--pgn-typography-form-input-font-weight); + --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-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-weight: var(--pgn-typography-font-weight-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-item-text-decoration: none; + --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-code-font-size: 87.5%; + --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-lg: var(--pgn-typography-input-btn-line-height-lg); + --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-badge-font-size: 75%; + --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-line-height: 1.5rem; --pgn-typography-alert-font-size: .875rem; + --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); --pgn-spacing-grid-gutter-width: 24px; --pgn-spacing-table-cell-padding-sm: .3rem; --pgn-spacing-table-cell-padding-base: .75rem; --pgn-spacing-label-margin-bottom: .5rem; + --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); + --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); + --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); + --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); + --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); --pgn-spacing-spacer-base: 1rem; + --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); + --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); + --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); + --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); + --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); + --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); --pgn-spacing-spacer-0: 0rem; --pgn-spacing-mark-padding: .2em; --pgn-spacing-paragraph-margin-bottom: 1rem; @@ -137,14 +212,18 @@ --pgn-spacing-toast-padding-y: .25rem; --pgn-spacing-toast-padding-x: .75rem; --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem; + --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; + --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; --pgn-spacing-sticky-offset: 0rem; --pgn-spacing-stepper-header-step-list-margin: 0rem; --pgn-spacing-stepper-header-step-list-padding-x: 0rem; --pgn-spacing-stepper-header-step-list-padding-y: .25rem; --pgn-spacing-stepper-header-step-padding: .25rem; + --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); --pgn-spacing-stepper-header-padding-y: .75rem; --pgn-spacing-vertical-align: .125em; --pgn-spacing-selectable-box-box-space: .75rem; @@ -153,6 +232,8 @@ --pgn-spacing-search-field-margin-button: .5rem; --pgn-spacing-progress-bar-hint-annotation-gap: .5rem; --pgn-spacing-popover-icon-margin-right: .5rem; + --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-popover-header-padding-x: 1rem; --pgn-spacing-popover-header-padding-y: .5rem; --pgn-spacing-pagination-padding-x-lg: 1.5rem; @@ -163,21 +244,40 @@ --pgn-spacing-pagination-padding-y-base: .625rem; --pgn-spacing-navbar-toggler-padding-x: .75rem; --pgn-spacing-navbar-toggler-padding-y: .25rem; + --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); --pgn-spacing-navbar-padding-x-nav-link: .5rem; + --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-link-distance-to-border: 4px; --pgn-spacing-nav-link-padding-x: 1rem; --pgn-spacing-nav-link-padding-y: .5rem; --pgn-spacing-modal-dialog-margin: 1.5rem; --pgn-spacing-modal-header-padding-y: 1rem; + --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; --pgn-spacing-modal-footer-padding-y: 1rem; + --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; --pgn-spacing-modal-inner-padding-bottom: .7rem; --pgn-spacing-modal-inner-padding-base: 1.5rem; + --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); --pgn-spacing-menu-item-icon-margin-left: .25em; + --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base); + --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base); --pgn-spacing-image-thumbnail-padding: .25rem; + --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-icon-padding: .5625rem; --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; + --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); + --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-spacing-form-control-select-indicator-padding: 1rem; + --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-form-control-spacer-x: 1rem; --pgn-spacing-form-control-gutter: .5rem; --pgn-spacing-form-group-margin-bottom: 1rem; @@ -188,9 +288,17 @@ --pgn-spacing-form-input-check-margin-x-inline: .3125rem; --pgn-spacing-form-input-check-margin-x-base: .25rem; --pgn-spacing-form-input-check-gutter: 1.25rem; + --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-dropzone-border-base: 1px; --pgn-spacing-dropzone-padding: 1.5rem; --pgn-spacing-dropdown-close-container-top: .625rem; + --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-dropdown-padding-y-item: .25rem; --pgn-spacing-dropdown-padding-y-base: .5rem; --pgn-spacing-dropdown-padding-x-item: 1rem; @@ -206,7 +314,9 @@ --pgn-spacing-collapsible-card-spacer-basic-y: .5rem; --pgn-spacing-collapsible-card-spacer-icon: 2.5rem; --pgn-spacing-collapsible-card-spacer-left-body: .75rem; + --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); --pgn-spacing-collapsible-card-spacer-x-base: .5rem; + --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); --pgn-spacing-collapsible-card-spacer-y-base: .5rem; --pgn-spacing-code-kbd-padding-x: .4rem; --pgn-spacing-code-kbd-padding-y: .2rem; @@ -232,12 +342,26 @@ --pgn-spacing-card-footer-action-gap: .5rem; --pgn-spacing-card-columns-gap: 1.25rem; --pgn-spacing-card-columns-count: 3rem; + --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); + --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3); + --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); + --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3); + --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); --pgn-spacing-card-margin-group: 12px; --pgn-spacing-card-spacer-y: .75rem; --pgn-spacing-card-spacer-x: 1.25rem; + --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)); + --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)); + --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width); --pgn-spacing-btn-block-spacing-y: .5rem; + --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-spacing-bubble-expandable-padding-x: .25rem; - --pgn-spacing-bubble-expandable-padding-y: 0; + --pgn-spacing-bubble-expandable-padding-y: 0rem; --pgn-spacing-breadcrumb-margin-left: .5rem; --pgn-spacing-badge-padding-y: .125rem; --pgn-spacing-badge-padding-x-pill: .6em; @@ -248,6 +372,7 @@ --pgn-spacing-annotation-arrow-side-margin: .25rem; --pgn-spacing-annotation-padding: .5rem; --pgn-spacing-alert-icon-space: .8rem; + --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); --pgn-spacing-alert-margin-bottom: 1rem; --pgn-spacing-alert-padding-x: 1.5rem; --pgn-spacing-alert-padding-y: 1.5rem; @@ -259,8 +384,14 @@ --pgn-size-breakpoint-md: 768px; --pgn-size-breakpoint-sm: 576px; --pgn-size-breakpoint-xs: 0rem; + --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-focus-width: 1px; + --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-caret-width: .3em; + --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); --pgn-size-tooltip-arrow-width: .8rem; --pgn-size-tooltip-arrow-height: .4rem; --pgn-size-tooltip-max-width: 200px; @@ -274,9 +405,12 @@ --pgn-size-stepper-header-height-min: 5.13rem; --pgn-size-stack-gap: 0rem; --pgn-size-spinner-sm-border-width: .2em; + --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); --pgn-size-spinner-sm-width: 1rem; --pgn-size-spinner-base-border-width: .25em; + --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); --pgn-size-spinner-base-width: 2rem; + --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-search-field-border-radius: 0rem; --pgn-size-search-field-border-width-focus: .3125rem; --pgn-size-search-field-border-width-base: .0625rem; @@ -285,6 +419,8 @@ --pgn-size-progress-bar-border-width: 1px; --pgn-size-progress-bar-height-annotated: .3125rem; --pgn-size-progress-bar-height-base: 1rem; + --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-width-max: 480px; --pgn-size-product-tour-checkpoint-width-arrow: 15px; --pgn-size-product-tour-checkpoint-width-border: 8px; @@ -292,31 +428,46 @@ --pgn-size-popover-arrow-width: 1rem; --pgn-size-popover-icon-width: 1rem; --pgn-size-popover-icon-height: 1rem; + --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm); + --pgn-size-popover-border-width: var(--pgn-size-border-width); --pgn-size-popover-max-width: 480px; --pgn-size-pagination-focus-outline: 0rem; --pgn-size-pagination-toggle-border-sm: .25rem; --pgn-size-pagination-toggle-border-base: .3125rem; --pgn-size-pagination-reduced-dropdown-min-width: 6rem; --pgn-size-pagination-reduced-dropdown-max-height: 60vh; + --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-pagination-secondary-height-sm: 2.25rem; --pgn-size-pagination-secondary-height-base: 2.75rem; --pgn-size-pagination-icon-height: 2.25rem; --pgn-size-pagination-icon-width: 2.25rem; + --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-navbar-nav-scroll-max-height: 75vh; --pgn-size-nav-tabs-border-radius: 0rem; --pgn-size-nav-tabs-border-width: 2px; + --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width); --pgn-size-nav-tabs-link-border-bottom-width: .188rem; + --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width); --pgn-size-nav-pills-link-border-width: 1px; + --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-modal-content-border-width: 0px; --pgn-size-modal-sm: 400px; --pgn-size-modal-md: 500px; --pgn-size-modal-lg: 800px; --pgn-size-modal-xl: 1140px; + --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width); --pgn-size-menu-item-width-xs: 13.438rem; --pgn-size-menu-item-width-base: 19rem; --pgn-size-menu-item-height: 3rem; --pgn-size-menu-base-max-height: 16.813rem; --pgn-size-menu-base-border-radius: .25em; + --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 + .1em); --pgn-size-icon-button-diameter-sm: 2.25rem; --pgn-size-icon-button-diameter-md: 2.75rem; --pgn-size-icon-lg: 1.75rem; @@ -324,26 +475,58 @@ --pgn-size-icon-sm: 1.25rem; --pgn-size-icon-xs: 1rem; --pgn-size-icon-inline: .8em; + --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); --pgn-size-form-border-radius-width: .125rem; --pgn-size-form-border-radius-check-focus: .0625rem; --pgn-size-form-autosuggest-border-width: .125rem; + --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width); --pgn-size-form-autosuggest-spinner-width: 1.25rem; + --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width); --pgn-size-form-autosuggest-icon-width: 2.4rem; --pgn-size-form-grid-gutter-width: 0.625rem; --pgn-size-form-control-border-radio-indicator-radius: 50%; --pgn-size-form-control-border-checkbox-indicator-radius: 0rem; --pgn-size-form-control-icon-width: 2rem; + --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); + --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-range-thumb-focus-width: var(--pgn-size-form-input-width-focus); --pgn-size-form-control-range-thumb-border-radius: 1rem; --pgn-size-form-control-range-thumb-border-base: 0rem; + --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width); --pgn-size-form-control-range-thumb-width: 1rem; --pgn-size-form-control-range-track-border-radius: 1rem; --pgn-size-form-control-range-track-height: .5rem; --pgn-size-form-control-range-track-width: 100%; + --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base); + --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-lg: var(--pgn-size-form-input-height-lg); + --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base); + --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-control-indicator-border-width: 0.125rem; --pgn-size-form-control-indicator-bg: 100%; --pgn-size-form-control-indicator-base: 1.25rem; + --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-form-input-width-border: var(--pgn-size-input-btn-border-width); --pgn-size-form-input-width-focus: 0.063rem; --pgn-size-form-input-width-hover: 0.063rem; + --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); + --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-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-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-dropdown-border-radius-base: var(--pgn-size-border-radius-base); + --pgn-size-dropdown-border-width: var(--pgn-size-border-width); --pgn-size-dropdown-min-width: 18rem; --pgn-size-data-table-layout-sidebar-width: 12rem; --pgn-size-data-table-dropdown-pagination-min-width: 6rem; @@ -367,15 +550,29 @@ --pgn-size-carousel-control-width-base: 15%; --pgn-size-card-logo-height: 4.125rem; --pgn-size-card-logo-width: 7.25rem; + --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base); --pgn-size-card-image-vertical-max-height: 140px; + --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); --pgn-size-card-image-horizontal-width-max: 240px; + --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base)); --pgn-size-card-focus-border-width: 2px; + --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); --pgn-size-card-border-radius-logo: .25rem; + --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-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base); + --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base); + --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); --pgn-size-btn-focus-width: 2px; + --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-btn-border-width: var(--pgn-size-input-btn-border-width); --pgn-size-breadcrumb-border-width-focus: .0625rem; --pgn-size-breadcrumb-border-axis-y-focus: .5rem; --pgn-size-breadcrumb-border-axis-x-focus: .25rem; --pgn-size-breadcrumb-border-radius-focus: .125rem; + --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); --pgn-size-badge-border-radius-pill: 10rem; --pgn-size-badge-border-radius-base: .25rem; --pgn-size-avatar-border-radius: 100%; @@ -391,207 +588,10 @@ --pgn-size-annotation-max-width: 18.75rem; --pgn-size-annotation-arrow-border-width: .5rem; --pgn-size-alert-border-width: 0rem; + --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); --pgn-size-rounded-pill: 50rem; --pgn-size-border-radius-sm: .25rem; --pgn-size-border-radius-lg: .425rem; --pgn-size-border-radius-base: .375rem; --pgn-size-border-width: 1px; - --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; - --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); - --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-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-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-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-control-file-font-weight: var(--pgn-typography-form-input-font-weight); - --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-weight: var(--pgn-typography-form-input-font-weight); - --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-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-weight: var(--pgn-typography-font-weight-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-lg: var(--pgn-typography-input-btn-line-height-lg); - --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) * 4); - --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); - --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); - --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); - --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); - --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); - --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); - --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); - --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); - --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); - --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); - --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-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); - --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-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; - --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; - --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); - --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base); - --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base); - --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-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); - --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-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-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-bottom: var(--pgn-spacing-spacer-3); - --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); - --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3); - --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); - --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)); - --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)); - --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width); - --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-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); - --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-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-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-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-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-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-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width); - --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-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-menu-item-border-width: var(--pgn-size-btn-border-width); - --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 + .1em); - --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-file-border-radius: var(--pgn-size-form-input-radius-border-base); - --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-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-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-lg: var(--pgn-size-form-input-height-lg); - --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base); - --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-form-input-width-border: var(--pgn-size-input-btn-border-width); - --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); - --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-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-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-dropdown-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-dropdown-border-width: var(--pgn-size-border-width); - --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base); - --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); - --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base)); - --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); - --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-card-border-width: var(--pgn-size-border-width); - --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base); - --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base); - --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); - --pgn-size-btn-border-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-btn-border-width: var(--pgn-size-input-btn-border-width); - --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); - --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); } diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index 7bfd508eee..522bd45cf5 100644 --- a/styles/css/themes/light/utility-classes.css +++ b/styles/css/themes/light/utility-classes.css @@ -1,4 +1,4 @@ -/*, * IMPORTANT: This file is the result of assembling design tokens., * Do not edit directly., */,.bg-dark { +.bg-dark { background-color: var(--pgn-color-dark-base) !important; } @@ -22,2427 +22,2427 @@ a.text-dark:focus { border-color: var(--pgn-color-dark-base) !important; } -.bg-light { - background-color: var(--pgn-color-light-base) !important; +.bg-dark-900 { + background-color: var(--pgn-color-dark-900) !important; } -a.bg-light:hover, -a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: var(--pgn-color-action-default-light-base) !important; +a.bg-dark-900:hover, +a.bg-dark-900:focus, +button.bg-dark-900:hover, +button.bg-dark-900:focus { + background-color: var(--pgn-color-action-default-dark-900) !important; } -.text-light { - color: var(--pgn-color-light-base) !important; +.text-dark-900 { + color: var(--pgn-color-dark-900) !important; } -a.text-light:hover, -a.text-light:focus { - color: var(--pgn-color-action-default-light-base) !important; +a.text-dark-900:hover, +a.text-dark-900:focus { + color: var(--pgn-color-action-default-dark-900) !important; } -.border-light { - border-color: var(--pgn-color-light-base) !important; +.border-dark-900 { + border-color: var(--pgn-color-dark-900) !important; } -.bg-brand { - background-color: var(--pgn-color-brand-base) !important; +.bg-dark-800 { + background-color: var(--pgn-color-dark-800) !important; } -a.bg-brand:hover, -a.bg-brand:focus, -button.bg-brand:hover, -button.bg-brand:focus { - background-color: var(--pgn-color-action-default-brand-base) !important; +a.bg-dark-800:hover, +a.bg-dark-800:focus, +button.bg-dark-800:hover, +button.bg-dark-800:focus { + background-color: var(--pgn-color-action-default-dark-800) !important; } -.text-brand { - color: var(--pgn-color-brand-base) !important; +.text-dark-800 { + color: var(--pgn-color-dark-800) !important; } -a.text-brand:hover, -a.text-brand:focus { - color: var(--pgn-color-action-default-brand-base) !important; +a.text-dark-800:hover, +a.text-dark-800:focus { + color: var(--pgn-color-action-default-dark-800) !important; } -.border-brand { - border-color: var(--pgn-color-brand-base) !important; +.border-dark-800 { + border-color: var(--pgn-color-dark-800) !important; } -.bg-primary { - background-color: var(--pgn-color-primary-base) !important; +.bg-dark-700 { + background-color: var(--pgn-color-dark-700) !important; } -a.bg-primary:hover, -a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: var(--pgn-color-action-default-primary-base) !important; +a.bg-dark-700:hover, +a.bg-dark-700:focus, +button.bg-dark-700:hover, +button.bg-dark-700:focus { + background-color: var(--pgn-color-action-default-dark-700) !important; } -.text-primary { - color: var(--pgn-color-primary-base) !important; +.text-dark-700 { + color: var(--pgn-color-dark-700) !important; } -a.text-primary:hover, -a.text-primary:focus { - color: var(--pgn-color-action-default-primary-base) !important; +a.text-dark-700:hover, +a.text-dark-700:focus { + color: var(--pgn-color-action-default-dark-700) !important; } -.border-primary { - border-color: var(--pgn-color-primary-base) !important; +.border-dark-700 { + border-color: var(--pgn-color-dark-700) !important; } -.bg-gray { - background-color: var(--pgn-color-gray-base) !important; +.bg-dark-600 { + background-color: var(--pgn-color-dark-600) !important; } -a.bg-gray:hover, -a.bg-gray:focus, -button.bg-gray:hover, -button.bg-gray:focus { - background-color: var(--pgn-color-action-default-gray-base) !important; +a.bg-dark-600:hover, +a.bg-dark-600:focus, +button.bg-dark-600:hover, +button.bg-dark-600:focus { + background-color: var(--pgn-color-action-default-dark-600) !important; } -.text-gray { - color: var(--pgn-color-gray-base) !important; +.text-dark-600 { + color: var(--pgn-color-dark-600) !important; } -a.text-gray:hover, -a.text-gray:focus { - color: var(--pgn-color-action-default-gray-base) !important; +a.text-dark-600:hover, +a.text-dark-600:focus { + color: var(--pgn-color-action-default-dark-600) !important; } -.border-gray { - border-color: var(--pgn-color-gray-base) !important; +.border-dark-600 { + border-color: var(--pgn-color-dark-600) !important; } -.bg-gray-900 { - background-color: var(--pgn-color-gray-900) !important; +.bg-dark-500 { + background-color: var(--pgn-color-dark-500) !important; } -a.bg-gray-900:hover, -a.bg-gray-900:focus, -button.bg-gray-900:hover, -button.bg-gray-900:focus { - background-color: var(--pgn-color-action-default-gray-900) !important; +a.bg-dark-500:hover, +a.bg-dark-500:focus, +button.bg-dark-500:hover, +button.bg-dark-500:focus { + background-color: var(--pgn-color-action-default-dark-500) !important; } -.text-gray-900 { - color: var(--pgn-color-gray-900) !important; +.text-dark-500 { + color: var(--pgn-color-dark-500) !important; } -a.text-gray-900:hover, -a.text-gray-900:focus { - color: var(--pgn-color-action-default-gray-900) !important; +a.text-dark-500:hover, +a.text-dark-500:focus { + color: var(--pgn-color-action-default-dark-500) !important; } -.border-gray-900 { - border-color: var(--pgn-color-gray-900) !important; +.border-dark-500 { + border-color: var(--pgn-color-dark-500) !important; } -.bg-gray-800 { - background-color: var(--pgn-color-gray-800) !important; +.bg-dark-400 { + background-color: var(--pgn-color-dark-400) !important; } -a.bg-gray-800:hover, -a.bg-gray-800:focus, -button.bg-gray-800:hover, -button.bg-gray-800:focus { - background-color: var(--pgn-color-action-default-gray-800) !important; +a.bg-dark-400:hover, +a.bg-dark-400:focus, +button.bg-dark-400:hover, +button.bg-dark-400:focus { + background-color: var(--pgn-color-action-default-dark-400) !important; } -.text-gray-800 { - color: var(--pgn-color-gray-800) !important; +.text-dark-400 { + color: var(--pgn-color-dark-400) !important; } -a.text-gray-800:hover, -a.text-gray-800:focus { - color: var(--pgn-color-action-default-gray-800) !important; +a.text-dark-400:hover, +a.text-dark-400:focus { + color: var(--pgn-color-action-default-dark-400) !important; } -.border-gray-800 { - border-color: var(--pgn-color-gray-800) !important; +.border-dark-400 { + border-color: var(--pgn-color-dark-400) !important; } -.bg-gray-700 { - background-color: var(--pgn-color-gray-700) !important; +.bg-dark-300 { + background-color: var(--pgn-color-dark-300) !important; } -a.bg-gray-700:hover, -a.bg-gray-700:focus, -button.bg-gray-700:hover, -button.bg-gray-700:focus { - background-color: var(--pgn-color-action-default-gray-700) !important; +a.bg-dark-300:hover, +a.bg-dark-300:focus, +button.bg-dark-300:hover, +button.bg-dark-300:focus { + background-color: var(--pgn-color-action-default-dark-300) !important; } -.text-gray-700 { - color: var(--pgn-color-gray-700) !important; +.text-dark-300 { + color: var(--pgn-color-dark-300) !important; } -a.text-gray-700:hover, -a.text-gray-700:focus { - color: var(--pgn-color-action-default-gray-700) !important; +a.text-dark-300:hover, +a.text-dark-300:focus { + color: var(--pgn-color-action-default-dark-300) !important; } -.border-gray-700 { - border-color: var(--pgn-color-gray-700) !important; +.border-dark-300 { + border-color: var(--pgn-color-dark-300) !important; } -.bg-gray-600 { - background-color: var(--pgn-color-gray-600) !important; +.bg-dark-200 { + background-color: var(--pgn-color-dark-200) !important; } -a.bg-gray-600:hover, -a.bg-gray-600:focus, -button.bg-gray-600:hover, -button.bg-gray-600:focus { - background-color: var(--pgn-color-action-default-gray-600) !important; +a.bg-dark-200:hover, +a.bg-dark-200:focus, +button.bg-dark-200:hover, +button.bg-dark-200:focus { + background-color: var(--pgn-color-action-default-dark-200) !important; } -.text-gray-600 { - color: var(--pgn-color-gray-600) !important; +.text-dark-200 { + color: var(--pgn-color-dark-200) !important; } -a.text-gray-600:hover, -a.text-gray-600:focus { - color: var(--pgn-color-action-default-gray-600) !important; +a.text-dark-200:hover, +a.text-dark-200:focus { + color: var(--pgn-color-action-default-dark-200) !important; } -.border-gray-600 { - border-color: var(--pgn-color-gray-600) !important; +.border-dark-200 { + border-color: var(--pgn-color-dark-200) !important; } -.bg-gray-400 { - background-color: var(--pgn-color-gray-400) !important; +.bg-dark-100 { + background-color: var(--pgn-color-dark-100) !important; } -a.bg-gray-400:hover, -a.bg-gray-400:focus, -button.bg-gray-400:hover, -button.bg-gray-400:focus { - background-color: var(--pgn-color-action-default-gray-400) !important; +a.bg-dark-100:hover, +a.bg-dark-100:focus, +button.bg-dark-100:hover, +button.bg-dark-100:focus { + background-color: var(--pgn-color-action-default-dark-100) !important; } -.text-gray-400 { - color: var(--pgn-color-gray-400) !important; +.text-dark-100 { + color: var(--pgn-color-dark-100) !important; } -a.text-gray-400:hover, -a.text-gray-400:focus { - color: var(--pgn-color-action-default-gray-400) !important; +a.text-dark-100:hover, +a.text-dark-100:focus { + color: var(--pgn-color-action-default-dark-100) !important; } -.border-gray-400 { - border-color: var(--pgn-color-gray-400) !important; +.border-dark-100 { + border-color: var(--pgn-color-dark-100) !important; } -.bg-gray-300 { - background-color: var(--pgn-color-gray-300) !important; +.bg-light { + background-color: var(--pgn-color-light-base) !important; } -a.bg-gray-300:hover, -a.bg-gray-300:focus, -button.bg-gray-300:hover, -button.bg-gray-300:focus { - background-color: var(--pgn-color-action-default-gray-300) !important; -} - -.text-gray-300 { - color: var(--pgn-color-gray-300) !important; -} - -a.text-gray-300:hover, -a.text-gray-300:focus { - color: var(--pgn-color-action-default-gray-300) !important; -} - -.border-gray-300 { - border-color: var(--pgn-color-gray-300) !important; -} - -.bg-gray-200 { - background-color: var(--pgn-color-gray-200) !important; +a.bg-light:hover, +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: var(--pgn-color-action-default-light-base) !important; } -a.bg-gray-200:hover, -a.bg-gray-200:focus, -button.bg-gray-200:hover, -button.bg-gray-200:focus { - background-color: var(--pgn-color-action-default-gray-200) !important; +.text-light { + color: var(--pgn-color-light-base) !important; } -.text-gray-200 { - color: var(--pgn-color-gray-200) !important; +a.text-light:hover, +a.text-light:focus { + color: var(--pgn-color-action-default-light-base) !important; } -a.text-gray-200:hover, -a.text-gray-200:focus { - color: var(--pgn-color-action-default-gray-200) !important; +.border-light { + border-color: var(--pgn-color-light-base) !important; } -.border-gray-200 { - border-color: var(--pgn-color-gray-200) !important; +.bg-light-900 { + background-color: var(--pgn-color-light-900) !important; } -.bg-gray-100 { - background-color: var(--pgn-color-gray-100) !important; +a.bg-light-900:hover, +a.bg-light-900:focus, +button.bg-light-900:hover, +button.bg-light-900:focus { + background-color: var(--pgn-color-action-default-light-900) !important; } -a.bg-gray-100:hover, -a.bg-gray-100:focus, -button.bg-gray-100:hover, -button.bg-gray-100:focus { - background-color: var(--pgn-color-action-default-gray-100) !important; +.text-light-900 { + color: var(--pgn-color-light-900) !important; } -.text-gray-100 { - color: var(--pgn-color-gray-100) !important; +a.text-light-900:hover, +a.text-light-900:focus { + color: var(--pgn-color-action-default-light-900) !important; } -a.text-gray-100:hover, -a.text-gray-100:focus { - color: var(--pgn-color-action-default-gray-100) !important; +.border-light-900 { + border-color: var(--pgn-color-light-900) !important; } -.border-gray-100 { - border-color: var(--pgn-color-gray-100) !important; +.bg-light-800 { + background-color: var(--pgn-color-light-800) !important; } -.bg-accent-b { - background-color: var(--pgn-color-accent-b) !important; +a.bg-light-800:hover, +a.bg-light-800:focus, +button.bg-light-800:hover, +button.bg-light-800:focus { + background-color: var(--pgn-color-action-default-light-800) !important; } -a.bg-accent-b:hover, -a.bg-accent-b:focus, -button.bg-accent-b:hover, -button.bg-accent-b:focus { - background-color: var(--pgn-color-action-default-accent-b) !important; +.text-light-800 { + color: var(--pgn-color-light-800) !important; } -.text-accent-b { - color: var(--pgn-color-accent-b) !important; +a.text-light-800:hover, +a.text-light-800:focus { + color: var(--pgn-color-action-default-light-800) !important; } -a.text-accent-b:hover, -a.text-accent-b:focus { - color: var(--pgn-color-action-default-accent-b) !important; +.border-light-800 { + border-color: var(--pgn-color-light-800) !important; } -.border-accent-b { - border-color: var(--pgn-color-accent-b) !important; +.bg-light-700 { + background-color: var(--pgn-color-light-700) !important; } -.bg-accent-a { - background-color: var(--pgn-color-accent-a) !important; +a.bg-light-700:hover, +a.bg-light-700:focus, +button.bg-light-700:hover, +button.bg-light-700:focus { + background-color: var(--pgn-color-action-default-light-700) !important; } -a.bg-accent-a:hover, -a.bg-accent-a:focus, -button.bg-accent-a:hover, -button.bg-accent-a:focus { - background-color: var(--pgn-color-action-default-accent-a) !important; +.text-light-700 { + color: var(--pgn-color-light-700) !important; } -.text-accent-a { - color: var(--pgn-color-accent-a) !important; +a.text-light-700:hover, +a.text-light-700:focus { + color: var(--pgn-color-action-default-light-700) !important; } -a.text-accent-a:hover, -a.text-accent-a:focus { - color: var(--pgn-color-action-default-accent-a) !important; +.border-light-700 { + border-color: var(--pgn-color-light-700) !important; } -.border-accent-a { - border-color: var(--pgn-color-accent-a) !important; +.bg-light-600 { + background-color: var(--pgn-color-light-600) !important; } -.bg-dark-900 { - background-color: var(--pgn-color-dark-900) !important; +a.bg-light-600:hover, +a.bg-light-600:focus, +button.bg-light-600:hover, +button.bg-light-600:focus { + background-color: var(--pgn-color-action-default-light-600) !important; } -a.bg-dark-900:hover, -a.bg-dark-900:focus, -button.bg-dark-900:hover, -button.bg-dark-900:focus { - background-color: var(--pgn-color-action-default-dark-900) !important; +.text-light-600 { + color: var(--pgn-color-light-600) !important; } -.text-dark-900 { - color: var(--pgn-color-dark-900) !important; +a.text-light-600:hover, +a.text-light-600:focus { + color: var(--pgn-color-action-default-light-600) !important; } -a.text-dark-900:hover, -a.text-dark-900:focus { - color: var(--pgn-color-action-default-dark-900) !important; +.border-light-600 { + border-color: var(--pgn-color-light-600) !important; } -.border-dark-900 { - border-color: var(--pgn-color-dark-900) !important; +.bg-light-500 { + background-color: var(--pgn-color-light-500) !important; } -.bg-dark-800 { - background-color: var(--pgn-color-dark-800) !important; +a.bg-light-500:hover, +a.bg-light-500:focus, +button.bg-light-500:hover, +button.bg-light-500:focus { + background-color: var(--pgn-color-action-default-light-500) !important; } -a.bg-dark-800:hover, -a.bg-dark-800:focus, -button.bg-dark-800:hover, -button.bg-dark-800:focus { - background-color: var(--pgn-color-action-default-dark-800) !important; +.text-light-500 { + color: var(--pgn-color-light-500) !important; } -.text-dark-800 { - color: var(--pgn-color-dark-800) !important; +a.text-light-500:hover, +a.text-light-500:focus { + color: var(--pgn-color-action-default-light-500) !important; } -a.text-dark-800:hover, -a.text-dark-800:focus { - color: var(--pgn-color-action-default-dark-800) !important; +.border-light-500 { + border-color: var(--pgn-color-light-500) !important; } -.border-dark-800 { - border-color: var(--pgn-color-dark-800) !important; +.bg-light-400 { + background-color: var(--pgn-color-light-400) !important; } -.bg-dark-700 { - background-color: var(--pgn-color-dark-700) !important; +a.bg-light-400:hover, +a.bg-light-400:focus, +button.bg-light-400:hover, +button.bg-light-400:focus { + background-color: var(--pgn-color-action-default-light-400) !important; } -a.bg-dark-700:hover, -a.bg-dark-700:focus, -button.bg-dark-700:hover, -button.bg-dark-700:focus { - background-color: var(--pgn-color-action-default-dark-700) !important; +.text-light-400 { + color: var(--pgn-color-light-400) !important; } -.text-dark-700 { - color: var(--pgn-color-dark-700) !important; +a.text-light-400:hover, +a.text-light-400:focus { + color: var(--pgn-color-action-default-light-400) !important; } -a.text-dark-700:hover, -a.text-dark-700:focus { - color: var(--pgn-color-action-default-dark-700) !important; +.border-light-400 { + border-color: var(--pgn-color-light-400) !important; } -.border-dark-700 { - border-color: var(--pgn-color-dark-700) !important; +.bg-light-300 { + background-color: var(--pgn-color-light-300) !important; } -.bg-dark-600 { - background-color: var(--pgn-color-dark-600) !important; +a.bg-light-300:hover, +a.bg-light-300:focus, +button.bg-light-300:hover, +button.bg-light-300:focus { + background-color: var(--pgn-color-action-default-light-300) !important; } -a.bg-dark-600:hover, -a.bg-dark-600:focus, -button.bg-dark-600:hover, -button.bg-dark-600:focus { - background-color: var(--pgn-color-action-default-dark-600) !important; +.text-light-300 { + color: var(--pgn-color-light-300) !important; } -.text-dark-600 { - color: var(--pgn-color-dark-600) !important; +a.text-light-300:hover, +a.text-light-300:focus { + color: var(--pgn-color-action-default-light-300) !important; } -a.text-dark-600:hover, -a.text-dark-600:focus { - color: var(--pgn-color-action-default-dark-600) !important; +.border-light-300 { + border-color: var(--pgn-color-light-300) !important; } -.border-dark-600 { - border-color: var(--pgn-color-dark-600) !important; +.bg-light-200 { + background-color: var(--pgn-color-light-200) !important; } -.bg-dark-500 { - background-color: var(--pgn-color-dark-500) !important; +a.bg-light-200:hover, +a.bg-light-200:focus, +button.bg-light-200:hover, +button.bg-light-200:focus { + background-color: var(--pgn-color-action-default-light-200) !important; } -a.bg-dark-500:hover, -a.bg-dark-500:focus, -button.bg-dark-500:hover, -button.bg-dark-500:focus { - background-color: var(--pgn-color-action-default-dark-500) !important; +.text-light-200 { + color: var(--pgn-color-light-200) !important; } -.text-dark-500 { - color: var(--pgn-color-dark-500) !important; +a.text-light-200:hover, +a.text-light-200:focus { + color: var(--pgn-color-action-default-light-200) !important; } -a.text-dark-500:hover, -a.text-dark-500:focus { - color: var(--pgn-color-action-default-dark-500) !important; +.border-light-200 { + border-color: var(--pgn-color-light-200) !important; } -.border-dark-500 { - border-color: var(--pgn-color-dark-500) !important; +.bg-light-100 { + background-color: var(--pgn-color-light-100) !important; } -.bg-dark-400 { - background-color: var(--pgn-color-dark-400) !important; +a.bg-light-100:hover, +a.bg-light-100:focus, +button.bg-light-100:hover, +button.bg-light-100:focus { + background-color: var(--pgn-color-action-default-light-100) !important; } -a.bg-dark-400:hover, -a.bg-dark-400:focus, -button.bg-dark-400:hover, -button.bg-dark-400:focus { - background-color: var(--pgn-color-action-default-dark-400) !important; +.text-light-100 { + color: var(--pgn-color-light-100) !important; } -.text-dark-400 { - color: var(--pgn-color-dark-400) !important; +a.text-light-100:hover, +a.text-light-100:focus { + color: var(--pgn-color-action-default-light-100) !important; } -a.text-dark-400:hover, -a.text-dark-400:focus { - color: var(--pgn-color-action-default-dark-400) !important; +.border-light-100 { + border-color: var(--pgn-color-light-100) !important; } -.border-dark-400 { - border-color: var(--pgn-color-dark-400) !important; +.bg-danger { + background-color: var(--pgn-color-danger-base) !important; } -.bg-dark-300 { - background-color: var(--pgn-color-dark-300) !important; +a.bg-danger:hover, +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: var(--pgn-color-action-default-danger-base) !important; } -a.bg-dark-300:hover, -a.bg-dark-300:focus, -button.bg-dark-300:hover, -button.bg-dark-300:focus { - background-color: var(--pgn-color-action-default-dark-300) !important; +.text-danger { + color: var(--pgn-color-danger-base) !important; } -.text-dark-300 { - color: var(--pgn-color-dark-300) !important; +a.text-danger:hover, +a.text-danger:focus { + color: var(--pgn-color-action-default-danger-base) !important; } -a.text-dark-300:hover, -a.text-dark-300:focus { - color: var(--pgn-color-action-default-dark-300) !important; +.border-danger { + border-color: var(--pgn-color-danger-base) !important; } -.border-dark-300 { - border-color: var(--pgn-color-dark-300) !important; +.bg-danger-900 { + background-color: var(--pgn-color-danger-900) !important; } -.bg-dark-200 { - background-color: var(--pgn-color-dark-200) !important; +a.bg-danger-900:hover, +a.bg-danger-900:focus, +button.bg-danger-900:hover, +button.bg-danger-900:focus { + background-color: var(--pgn-color-action-default-danger-900) !important; } -a.bg-dark-200:hover, -a.bg-dark-200:focus, -button.bg-dark-200:hover, -button.bg-dark-200:focus { - background-color: var(--pgn-color-action-default-dark-200) !important; +.text-danger-900 { + color: var(--pgn-color-danger-900) !important; } -.text-dark-200 { - color: var(--pgn-color-dark-200) !important; +a.text-danger-900:hover, +a.text-danger-900:focus { + color: var(--pgn-color-action-default-danger-900) !important; } -a.text-dark-200:hover, -a.text-dark-200:focus { - color: var(--pgn-color-action-default-dark-200) !important; +.border-danger-900 { + border-color: var(--pgn-color-danger-900) !important; } -.border-dark-200 { - border-color: var(--pgn-color-dark-200) !important; +.bg-danger-800 { + background-color: var(--pgn-color-danger-800) !important; } -.bg-dark-100 { - background-color: var(--pgn-color-dark-100) !important; +a.bg-danger-800:hover, +a.bg-danger-800:focus, +button.bg-danger-800:hover, +button.bg-danger-800:focus { + background-color: var(--pgn-color-action-default-danger-800) !important; } -a.bg-dark-100:hover, -a.bg-dark-100:focus, -button.bg-dark-100:hover, -button.bg-dark-100:focus { - background-color: var(--pgn-color-action-default-dark-100) !important; +.text-danger-800 { + color: var(--pgn-color-danger-800) !important; } -.text-dark-100 { - color: var(--pgn-color-dark-100) !important; +a.text-danger-800:hover, +a.text-danger-800:focus { + color: var(--pgn-color-action-default-danger-800) !important; } -a.text-dark-100:hover, -a.text-dark-100:focus { - color: var(--pgn-color-action-default-dark-100) !important; +.border-danger-800 { + border-color: var(--pgn-color-danger-800) !important; } -.border-dark-100 { - border-color: var(--pgn-color-dark-100) !important; +.bg-danger-700 { + background-color: var(--pgn-color-danger-700) !important; } -.bg-light-900 { - background-color: var(--pgn-color-light-900) !important; +a.bg-danger-700:hover, +a.bg-danger-700:focus, +button.bg-danger-700:hover, +button.bg-danger-700:focus { + background-color: var(--pgn-color-action-default-danger-700) !important; } -a.bg-light-900:hover, -a.bg-light-900:focus, -button.bg-light-900:hover, -button.bg-light-900:focus { - background-color: var(--pgn-color-action-default-light-900) !important; +.text-danger-700 { + color: var(--pgn-color-danger-700) !important; } -.text-light-900 { - color: var(--pgn-color-light-900) !important; +a.text-danger-700:hover, +a.text-danger-700:focus { + color: var(--pgn-color-action-default-danger-700) !important; } -a.text-light-900:hover, -a.text-light-900:focus { - color: var(--pgn-color-action-default-light-900) !important; +.border-danger-700 { + border-color: var(--pgn-color-danger-700) !important; } -.border-light-900 { - border-color: var(--pgn-color-light-900) !important; +.bg-danger-600 { + background-color: var(--pgn-color-danger-600) !important; } -.bg-light-800 { - background-color: var(--pgn-color-light-800) !important; +a.bg-danger-600:hover, +a.bg-danger-600:focus, +button.bg-danger-600:hover, +button.bg-danger-600:focus { + background-color: var(--pgn-color-action-default-danger-600) !important; } -a.bg-light-800:hover, -a.bg-light-800:focus, -button.bg-light-800:hover, -button.bg-light-800:focus { - background-color: var(--pgn-color-action-default-light-800) !important; +.text-danger-600 { + color: var(--pgn-color-danger-600) !important; } -.text-light-800 { - color: var(--pgn-color-light-800) !important; +a.text-danger-600:hover, +a.text-danger-600:focus { + color: var(--pgn-color-action-default-danger-600) !important; } -a.text-light-800:hover, -a.text-light-800:focus { - color: var(--pgn-color-action-default-light-800) !important; +.border-danger-600 { + border-color: var(--pgn-color-danger-600) !important; } -.border-light-800 { - border-color: var(--pgn-color-light-800) !important; +.bg-danger-500 { + background-color: var(--pgn-color-danger-500) !important; } -.bg-light-700 { - background-color: var(--pgn-color-light-700) !important; +a.bg-danger-500:hover, +a.bg-danger-500:focus, +button.bg-danger-500:hover, +button.bg-danger-500:focus { + background-color: var(--pgn-color-action-default-danger-500) !important; } -a.bg-light-700:hover, -a.bg-light-700:focus, -button.bg-light-700:hover, -button.bg-light-700:focus { - background-color: var(--pgn-color-action-default-light-700) !important; +.text-danger-500 { + color: var(--pgn-color-danger-500) !important; } -.text-light-700 { - color: var(--pgn-color-light-700) !important; +a.text-danger-500:hover, +a.text-danger-500:focus { + color: var(--pgn-color-action-default-danger-500) !important; } -a.text-light-700:hover, -a.text-light-700:focus { - color: var(--pgn-color-action-default-light-700) !important; +.border-danger-500 { + border-color: var(--pgn-color-danger-500) !important; } -.border-light-700 { - border-color: var(--pgn-color-light-700) !important; +.bg-danger-400 { + background-color: var(--pgn-color-danger-400) !important; } -.bg-light-600 { - background-color: var(--pgn-color-light-600) !important; +a.bg-danger-400:hover, +a.bg-danger-400:focus, +button.bg-danger-400:hover, +button.bg-danger-400:focus { + background-color: var(--pgn-color-action-default-danger-400) !important; } -a.bg-light-600:hover, -a.bg-light-600:focus, -button.bg-light-600:hover, -button.bg-light-600:focus { - background-color: var(--pgn-color-action-default-light-600) !important; +.text-danger-400 { + color: var(--pgn-color-danger-400) !important; } -.text-light-600 { - color: var(--pgn-color-light-600) !important; +a.text-danger-400:hover, +a.text-danger-400:focus { + color: var(--pgn-color-action-default-danger-400) !important; } -a.text-light-600:hover, -a.text-light-600:focus { - color: var(--pgn-color-action-default-light-600) !important; +.border-danger-400 { + border-color: var(--pgn-color-danger-400) !important; } -.border-light-600 { - border-color: var(--pgn-color-light-600) !important; +.bg-danger-300 { + background-color: var(--pgn-color-danger-300) !important; } -.bg-light-500 { - background-color: var(--pgn-color-light-500) !important; +a.bg-danger-300:hover, +a.bg-danger-300:focus, +button.bg-danger-300:hover, +button.bg-danger-300:focus { + background-color: var(--pgn-color-action-default-danger-300) !important; } -a.bg-light-500:hover, -a.bg-light-500:focus, -button.bg-light-500:hover, -button.bg-light-500:focus { - background-color: var(--pgn-color-action-default-light-500) !important; +.text-danger-300 { + color: var(--pgn-color-danger-300) !important; } -.text-light-500 { - color: var(--pgn-color-light-500) !important; +a.text-danger-300:hover, +a.text-danger-300:focus { + color: var(--pgn-color-action-default-danger-300) !important; } -a.text-light-500:hover, -a.text-light-500:focus { - color: var(--pgn-color-action-default-light-500) !important; +.border-danger-300 { + border-color: var(--pgn-color-danger-300) !important; } -.border-light-500 { - border-color: var(--pgn-color-light-500) !important; +.bg-danger-200 { + background-color: var(--pgn-color-danger-200) !important; } -.bg-light-400 { - background-color: var(--pgn-color-light-400) !important; +a.bg-danger-200:hover, +a.bg-danger-200:focus, +button.bg-danger-200:hover, +button.bg-danger-200:focus { + background-color: var(--pgn-color-action-default-danger-200) !important; } -a.bg-light-400:hover, -a.bg-light-400:focus, -button.bg-light-400:hover, -button.bg-light-400:focus { - background-color: var(--pgn-color-action-default-light-400) !important; +.text-danger-200 { + color: var(--pgn-color-danger-200) !important; +} + +a.text-danger-200:hover, +a.text-danger-200:focus { + color: var(--pgn-color-action-default-danger-200) !important; } -.text-light-400 { - color: var(--pgn-color-light-400) !important; +.border-danger-200 { + border-color: var(--pgn-color-danger-200) !important; } -a.text-light-400:hover, -a.text-light-400:focus { - color: var(--pgn-color-action-default-light-400) !important; +.bg-danger-100 { + background-color: var(--pgn-color-danger-100) !important; } -.border-light-400 { - border-color: var(--pgn-color-light-400) !important; +a.bg-danger-100:hover, +a.bg-danger-100:focus, +button.bg-danger-100:hover, +button.bg-danger-100:focus { + background-color: var(--pgn-color-action-default-danger-100) !important; } -.bg-light-300 { - background-color: var(--pgn-color-light-300) !important; +.text-danger-100 { + color: var(--pgn-color-danger-100) !important; } -a.bg-light-300:hover, -a.bg-light-300:focus, -button.bg-light-300:hover, -button.bg-light-300:focus { - background-color: var(--pgn-color-action-default-light-300) !important; +a.text-danger-100:hover, +a.text-danger-100:focus { + color: var(--pgn-color-action-default-danger-100) !important; } -.text-light-300 { - color: var(--pgn-color-light-300) !important; +.border-danger-100 { + border-color: var(--pgn-color-danger-100) !important; } -a.text-light-300:hover, -a.text-light-300:focus { - color: var(--pgn-color-action-default-light-300) !important; +.bg-warning { + background-color: var(--pgn-color-warning-base) !important; } -.border-light-300 { - border-color: var(--pgn-color-light-300) !important; +a.bg-warning:hover, +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: var(--pgn-color-action-default-warning-base) !important; } -.bg-light-200 { - background-color: var(--pgn-color-light-200) !important; +.text-warning { + color: var(--pgn-color-warning-base) !important; } -a.bg-light-200:hover, -a.bg-light-200:focus, -button.bg-light-200:hover, -button.bg-light-200:focus { - background-color: var(--pgn-color-action-default-light-200) !important; +a.text-warning:hover, +a.text-warning:focus { + color: var(--pgn-color-action-default-warning-base) !important; } -.text-light-200 { - color: var(--pgn-color-light-200) !important; +.border-warning { + border-color: var(--pgn-color-warning-base) !important; } -a.text-light-200:hover, -a.text-light-200:focus { - color: var(--pgn-color-action-default-light-200) !important; +.bg-warning-900 { + background-color: var(--pgn-color-warning-900) !important; } -.border-light-200 { - border-color: var(--pgn-color-light-200) !important; +a.bg-warning-900:hover, +a.bg-warning-900:focus, +button.bg-warning-900:hover, +button.bg-warning-900:focus { + background-color: var(--pgn-color-action-default-warning-900) !important; } -.bg-light-100 { - background-color: var(--pgn-color-light-100) !important; +.text-warning-900 { + color: var(--pgn-color-warning-900) !important; } -a.bg-light-100:hover, -a.bg-light-100:focus, -button.bg-light-100:hover, -button.bg-light-100:focus { - background-color: var(--pgn-color-action-default-light-100) !important; +a.text-warning-900:hover, +a.text-warning-900:focus { + color: var(--pgn-color-action-default-warning-900) !important; } -.text-light-100 { - color: var(--pgn-color-light-100) !important; +.border-warning-900 { + border-color: var(--pgn-color-warning-900) !important; } -a.text-light-100:hover, -a.text-light-100:focus { - color: var(--pgn-color-action-default-light-100) !important; +.bg-warning-800 { + background-color: var(--pgn-color-warning-800) !important; } -.border-light-100 { - border-color: var(--pgn-color-light-100) !important; +a.bg-warning-800:hover, +a.bg-warning-800:focus, +button.bg-warning-800:hover, +button.bg-warning-800:focus { + background-color: var(--pgn-color-action-default-warning-800) !important; } -.bg-danger { - background-color: var(--pgn-color-danger-base) !important; +.text-warning-800 { + color: var(--pgn-color-warning-800) !important; } -a.bg-danger:hover, -a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: var(--pgn-color-action-default-danger-base) !important; +a.text-warning-800:hover, +a.text-warning-800:focus { + color: var(--pgn-color-action-default-warning-800) !important; } -.text-danger { - color: var(--pgn-color-danger-base) !important; +.border-warning-800 { + border-color: var(--pgn-color-warning-800) !important; } -a.text-danger:hover, -a.text-danger:focus { - color: var(--pgn-color-action-default-danger-base) !important; +.bg-warning-700 { + background-color: var(--pgn-color-warning-700) !important; } -.border-danger { - border-color: var(--pgn-color-danger-base) !important; +a.bg-warning-700:hover, +a.bg-warning-700:focus, +button.bg-warning-700:hover, +button.bg-warning-700:focus { + background-color: var(--pgn-color-action-default-warning-700) !important; } -.bg-danger-900 { - background-color: var(--pgn-color-danger-900) !important; +.text-warning-700 { + color: var(--pgn-color-warning-700) !important; } -a.bg-danger-900:hover, -a.bg-danger-900:focus, -button.bg-danger-900:hover, -button.bg-danger-900:focus { - background-color: var(--pgn-color-action-default-danger-900) !important; +a.text-warning-700:hover, +a.text-warning-700:focus { + color: var(--pgn-color-action-default-warning-700) !important; } -.text-danger-900 { - color: var(--pgn-color-danger-900) !important; +.border-warning-700 { + border-color: var(--pgn-color-warning-700) !important; } -a.text-danger-900:hover, -a.text-danger-900:focus { - color: var(--pgn-color-action-default-danger-900) !important; +.bg-warning-600 { + background-color: var(--pgn-color-warning-600) !important; } -.border-danger-900 { - border-color: var(--pgn-color-danger-900) !important; +a.bg-warning-600:hover, +a.bg-warning-600:focus, +button.bg-warning-600:hover, +button.bg-warning-600:focus { + background-color: var(--pgn-color-action-default-warning-600) !important; } -.bg-danger-800 { - background-color: var(--pgn-color-danger-800) !important; +.text-warning-600 { + color: var(--pgn-color-warning-600) !important; } -a.bg-danger-800:hover, -a.bg-danger-800:focus, -button.bg-danger-800:hover, -button.bg-danger-800:focus { - background-color: var(--pgn-color-action-default-danger-800) !important; +a.text-warning-600:hover, +a.text-warning-600:focus { + color: var(--pgn-color-action-default-warning-600) !important; } -.text-danger-800 { - color: var(--pgn-color-danger-800) !important; +.border-warning-600 { + border-color: var(--pgn-color-warning-600) !important; } -a.text-danger-800:hover, -a.text-danger-800:focus { - color: var(--pgn-color-action-default-danger-800) !important; +.bg-warning-500 { + background-color: var(--pgn-color-warning-500) !important; } -.border-danger-800 { - border-color: var(--pgn-color-danger-800) !important; +a.bg-warning-500:hover, +a.bg-warning-500:focus, +button.bg-warning-500:hover, +button.bg-warning-500:focus { + background-color: var(--pgn-color-action-default-warning-500) !important; } -.bg-danger-700 { - background-color: var(--pgn-color-danger-700) !important; +.text-warning-500 { + color: var(--pgn-color-warning-500) !important; } -a.bg-danger-700:hover, -a.bg-danger-700:focus, -button.bg-danger-700:hover, -button.bg-danger-700:focus { - background-color: var(--pgn-color-action-default-danger-700) !important; +a.text-warning-500:hover, +a.text-warning-500:focus { + color: var(--pgn-color-action-default-warning-500) !important; } -.text-danger-700 { - color: var(--pgn-color-danger-700) !important; +.border-warning-500 { + border-color: var(--pgn-color-warning-500) !important; } -a.text-danger-700:hover, -a.text-danger-700:focus { - color: var(--pgn-color-action-default-danger-700) !important; +.bg-warning-400 { + background-color: var(--pgn-color-warning-400) !important; } -.border-danger-700 { - border-color: var(--pgn-color-danger-700) !important; +a.bg-warning-400:hover, +a.bg-warning-400:focus, +button.bg-warning-400:hover, +button.bg-warning-400:focus { + background-color: var(--pgn-color-action-default-warning-400) !important; } -.bg-danger-600 { - background-color: var(--pgn-color-danger-600) !important; +.text-warning-400 { + color: var(--pgn-color-warning-400) !important; } -a.bg-danger-600:hover, -a.bg-danger-600:focus, -button.bg-danger-600:hover, -button.bg-danger-600:focus { - background-color: var(--pgn-color-action-default-danger-600) !important; +a.text-warning-400:hover, +a.text-warning-400:focus { + color: var(--pgn-color-action-default-warning-400) !important; } -.text-danger-600 { - color: var(--pgn-color-danger-600) !important; +.border-warning-400 { + border-color: var(--pgn-color-warning-400) !important; } -a.text-danger-600:hover, -a.text-danger-600:focus { - color: var(--pgn-color-action-default-danger-600) !important; +.bg-warning-300 { + background-color: var(--pgn-color-warning-300) !important; } -.border-danger-600 { - border-color: var(--pgn-color-danger-600) !important; +a.bg-warning-300:hover, +a.bg-warning-300:focus, +button.bg-warning-300:hover, +button.bg-warning-300:focus { + background-color: var(--pgn-color-action-default-warning-300) !important; } -.bg-danger-500 { - background-color: var(--pgn-color-danger-500) !important; +.text-warning-300 { + color: var(--pgn-color-warning-300) !important; } -a.bg-danger-500:hover, -a.bg-danger-500:focus, -button.bg-danger-500:hover, -button.bg-danger-500:focus { - background-color: var(--pgn-color-action-default-danger-500) !important; +a.text-warning-300:hover, +a.text-warning-300:focus { + color: var(--pgn-color-action-default-warning-300) !important; +} + +.border-warning-300 { + border-color: var(--pgn-color-warning-300) !important; } -.text-danger-500 { - color: var(--pgn-color-danger-500) !important; +.bg-warning-200 { + background-color: var(--pgn-color-warning-200) !important; } -a.text-danger-500:hover, -a.text-danger-500:focus { - color: var(--pgn-color-action-default-danger-500) !important; +a.bg-warning-200:hover, +a.bg-warning-200:focus, +button.bg-warning-200:hover, +button.bg-warning-200:focus { + background-color: var(--pgn-color-action-default-warning-200) !important; } -.border-danger-500 { - border-color: var(--pgn-color-danger-500) !important; +.text-warning-200 { + color: var(--pgn-color-warning-200) !important; } -.bg-danger-400 { - background-color: var(--pgn-color-danger-400) !important; +a.text-warning-200:hover, +a.text-warning-200:focus { + color: var(--pgn-color-action-default-warning-200) !important; } -a.bg-danger-400:hover, -a.bg-danger-400:focus, -button.bg-danger-400:hover, -button.bg-danger-400:focus { - background-color: var(--pgn-color-action-default-danger-400) !important; +.border-warning-200 { + border-color: var(--pgn-color-warning-200) !important; } -.text-danger-400 { - color: var(--pgn-color-danger-400) !important; +.bg-warning-100 { + background-color: var(--pgn-color-warning-100) !important; } -a.text-danger-400:hover, -a.text-danger-400:focus { - color: var(--pgn-color-action-default-danger-400) !important; +a.bg-warning-100:hover, +a.bg-warning-100:focus, +button.bg-warning-100:hover, +button.bg-warning-100:focus { + background-color: var(--pgn-color-action-default-warning-100) !important; } -.border-danger-400 { - border-color: var(--pgn-color-danger-400) !important; +.text-warning-100 { + color: var(--pgn-color-warning-100) !important; } -.bg-danger-300 { - background-color: var(--pgn-color-danger-300) !important; +a.text-warning-100:hover, +a.text-warning-100:focus { + color: var(--pgn-color-action-default-warning-100) !important; } -a.bg-danger-300:hover, -a.bg-danger-300:focus, -button.bg-danger-300:hover, -button.bg-danger-300:focus { - background-color: var(--pgn-color-action-default-danger-300) !important; +.border-warning-100 { + border-color: var(--pgn-color-warning-100) !important; } -.text-danger-300 { - color: var(--pgn-color-danger-300) !important; +.bg-info { + background-color: var(--pgn-color-info-base) !important; } -a.text-danger-300:hover, -a.text-danger-300:focus { - color: var(--pgn-color-action-default-danger-300) !important; +a.bg-info:hover, +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: var(--pgn-color-action-default-info-base) !important; } -.border-danger-300 { - border-color: var(--pgn-color-danger-300) !important; +.text-info { + color: var(--pgn-color-info-base) !important; } -.bg-danger-200 { - background-color: var(--pgn-color-danger-200) !important; +a.text-info:hover, +a.text-info:focus { + color: var(--pgn-color-action-default-info-base) !important; } -a.bg-danger-200:hover, -a.bg-danger-200:focus, -button.bg-danger-200:hover, -button.bg-danger-200:focus { - background-color: var(--pgn-color-action-default-danger-200) !important; +.border-info { + border-color: var(--pgn-color-info-base) !important; } -.text-danger-200 { - color: var(--pgn-color-danger-200) !important; +.bg-info-900 { + background-color: var(--pgn-color-info-900) !important; } -a.text-danger-200:hover, -a.text-danger-200:focus { - color: var(--pgn-color-action-default-danger-200) !important; +a.bg-info-900:hover, +a.bg-info-900:focus, +button.bg-info-900:hover, +button.bg-info-900:focus { + background-color: var(--pgn-color-action-default-info-900) !important; } -.border-danger-200 { - border-color: var(--pgn-color-danger-200) !important; +.text-info-900 { + color: var(--pgn-color-info-900) !important; } -.bg-danger-100 { - background-color: var(--pgn-color-danger-100) !important; +a.text-info-900:hover, +a.text-info-900:focus { + color: var(--pgn-color-action-default-info-900) !important; } -a.bg-danger-100:hover, -a.bg-danger-100:focus, -button.bg-danger-100:hover, -button.bg-danger-100:focus { - background-color: var(--pgn-color-action-default-danger-100) !important; +.border-info-900 { + border-color: var(--pgn-color-info-900) !important; } -.text-danger-100 { - color: var(--pgn-color-danger-100) !important; +.bg-info-800 { + background-color: var(--pgn-color-info-800) !important; } -a.text-danger-100:hover, -a.text-danger-100:focus { - color: var(--pgn-color-action-default-danger-100) !important; +a.bg-info-800:hover, +a.bg-info-800:focus, +button.bg-info-800:hover, +button.bg-info-800:focus { + background-color: var(--pgn-color-action-default-info-800) !important; } -.border-danger-100 { - border-color: var(--pgn-color-danger-100) !important; +.text-info-800 { + color: var(--pgn-color-info-800) !important; } -.bg-warning { - background-color: var(--pgn-color-warning-base) !important; +a.text-info-800:hover, +a.text-info-800:focus { + color: var(--pgn-color-action-default-info-800) !important; } -a.bg-warning:hover, -a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: var(--pgn-color-action-default-warning-base) !important; +.border-info-800 { + border-color: var(--pgn-color-info-800) !important; } -.text-warning { - color: var(--pgn-color-warning-base) !important; +.bg-info-700 { + background-color: var(--pgn-color-info-700) !important; } -a.text-warning:hover, -a.text-warning:focus { - color: var(--pgn-color-action-default-warning-base) !important; +a.bg-info-700:hover, +a.bg-info-700:focus, +button.bg-info-700:hover, +button.bg-info-700:focus { + background-color: var(--pgn-color-action-default-info-700) !important; } -.border-warning { - border-color: var(--pgn-color-warning-base) !important; +.text-info-700 { + color: var(--pgn-color-info-700) !important; } -.bg-warning-900 { - background-color: var(--pgn-color-warning-900) !important; +a.text-info-700:hover, +a.text-info-700:focus { + color: var(--pgn-color-action-default-info-700) !important; } -a.bg-warning-900:hover, -a.bg-warning-900:focus, -button.bg-warning-900:hover, -button.bg-warning-900:focus { - background-color: var(--pgn-color-action-default-warning-900) !important; +.border-info-700 { + border-color: var(--pgn-color-info-700) !important; } -.text-warning-900 { - color: var(--pgn-color-warning-900) !important; +.bg-info-600 { + background-color: var(--pgn-color-info-600) !important; } -a.text-warning-900:hover, -a.text-warning-900:focus { - color: var(--pgn-color-action-default-warning-900) !important; +a.bg-info-600:hover, +a.bg-info-600:focus, +button.bg-info-600:hover, +button.bg-info-600:focus { + background-color: var(--pgn-color-action-default-info-600) !important; } -.border-warning-900 { - border-color: var(--pgn-color-warning-900) !important; +.text-info-600 { + color: var(--pgn-color-info-600) !important; } -.bg-warning-800 { - background-color: var(--pgn-color-warning-800) !important; +a.text-info-600:hover, +a.text-info-600:focus { + color: var(--pgn-color-action-default-info-600) !important; } -a.bg-warning-800:hover, -a.bg-warning-800:focus, -button.bg-warning-800:hover, -button.bg-warning-800:focus { - background-color: var(--pgn-color-action-default-warning-800) !important; +.border-info-600 { + border-color: var(--pgn-color-info-600) !important; } -.text-warning-800 { - color: var(--pgn-color-warning-800) !important; +.bg-info-500 { + background-color: var(--pgn-color-info-500) !important; } -a.text-warning-800:hover, -a.text-warning-800:focus { - color: var(--pgn-color-action-default-warning-800) !important; +a.bg-info-500:hover, +a.bg-info-500:focus, +button.bg-info-500:hover, +button.bg-info-500:focus { + background-color: var(--pgn-color-action-default-info-500) !important; } -.border-warning-800 { - border-color: var(--pgn-color-warning-800) !important; +.text-info-500 { + color: var(--pgn-color-info-500) !important; } -.bg-warning-700 { - background-color: var(--pgn-color-warning-700) !important; +a.text-info-500:hover, +a.text-info-500:focus { + color: var(--pgn-color-action-default-info-500) !important; } -a.bg-warning-700:hover, -a.bg-warning-700:focus, -button.bg-warning-700:hover, -button.bg-warning-700:focus { - background-color: var(--pgn-color-action-default-warning-700) !important; +.border-info-500 { + border-color: var(--pgn-color-info-500) !important; } -.text-warning-700 { - color: var(--pgn-color-warning-700) !important; +.bg-info-400 { + background-color: var(--pgn-color-info-400) !important; } -a.text-warning-700:hover, -a.text-warning-700:focus { - color: var(--pgn-color-action-default-warning-700) !important; +a.bg-info-400:hover, +a.bg-info-400:focus, +button.bg-info-400:hover, +button.bg-info-400:focus { + background-color: var(--pgn-color-action-default-info-400) !important; } -.border-warning-700 { - border-color: var(--pgn-color-warning-700) !important; +.text-info-400 { + color: var(--pgn-color-info-400) !important; } -.bg-warning-600 { - background-color: var(--pgn-color-warning-600) !important; +a.text-info-400:hover, +a.text-info-400:focus { + color: var(--pgn-color-action-default-info-400) !important; } -a.bg-warning-600:hover, -a.bg-warning-600:focus, -button.bg-warning-600:hover, -button.bg-warning-600:focus { - background-color: var(--pgn-color-action-default-warning-600) !important; +.border-info-400 { + border-color: var(--pgn-color-info-400) !important; +} + +.bg-info-300 { + background-color: var(--pgn-color-info-300) !important; } -.text-warning-600 { - color: var(--pgn-color-warning-600) !important; +a.bg-info-300:hover, +a.bg-info-300:focus, +button.bg-info-300:hover, +button.bg-info-300:focus { + background-color: var(--pgn-color-action-default-info-300) !important; } -a.text-warning-600:hover, -a.text-warning-600:focus { - color: var(--pgn-color-action-default-warning-600) !important; +.text-info-300 { + color: var(--pgn-color-info-300) !important; } -.border-warning-600 { - border-color: var(--pgn-color-warning-600) !important; +a.text-info-300:hover, +a.text-info-300:focus { + color: var(--pgn-color-action-default-info-300) !important; } -.bg-warning-500 { - background-color: var(--pgn-color-warning-500) !important; +.border-info-300 { + border-color: var(--pgn-color-info-300) !important; } -a.bg-warning-500:hover, -a.bg-warning-500:focus, -button.bg-warning-500:hover, -button.bg-warning-500:focus { - background-color: var(--pgn-color-action-default-warning-500) !important; +.bg-info-200 { + background-color: var(--pgn-color-info-200) !important; } -.text-warning-500 { - color: var(--pgn-color-warning-500) !important; +a.bg-info-200:hover, +a.bg-info-200:focus, +button.bg-info-200:hover, +button.bg-info-200:focus { + background-color: var(--pgn-color-action-default-info-200) !important; } -a.text-warning-500:hover, -a.text-warning-500:focus { - color: var(--pgn-color-action-default-warning-500) !important; +.text-info-200 { + color: var(--pgn-color-info-200) !important; } -.border-warning-500 { - border-color: var(--pgn-color-warning-500) !important; +a.text-info-200:hover, +a.text-info-200:focus { + color: var(--pgn-color-action-default-info-200) !important; } -.bg-warning-400 { - background-color: var(--pgn-color-warning-400) !important; +.border-info-200 { + border-color: var(--pgn-color-info-200) !important; } -a.bg-warning-400:hover, -a.bg-warning-400:focus, -button.bg-warning-400:hover, -button.bg-warning-400:focus { - background-color: var(--pgn-color-action-default-warning-400) !important; +.bg-info-100 { + background-color: var(--pgn-color-info-100) !important; } -.text-warning-400 { - color: var(--pgn-color-warning-400) !important; +a.bg-info-100:hover, +a.bg-info-100:focus, +button.bg-info-100:hover, +button.bg-info-100:focus { + background-color: var(--pgn-color-action-default-info-100) !important; } -a.text-warning-400:hover, -a.text-warning-400:focus { - color: var(--pgn-color-action-default-warning-400) !important; +.text-info-100 { + color: var(--pgn-color-info-100) !important; } -.border-warning-400 { - border-color: var(--pgn-color-warning-400) !important; +a.text-info-100:hover, +a.text-info-100:focus { + color: var(--pgn-color-action-default-info-100) !important; } -.bg-warning-300 { - background-color: var(--pgn-color-warning-300) !important; +.border-info-100 { + border-color: var(--pgn-color-info-100) !important; } -a.bg-warning-300:hover, -a.bg-warning-300:focus, -button.bg-warning-300:hover, -button.bg-warning-300:focus { - background-color: var(--pgn-color-action-default-warning-300) !important; +.bg-success { + background-color: var(--pgn-color-success-base) !important; } -.text-warning-300 { - color: var(--pgn-color-warning-300) !important; +a.bg-success:hover, +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: var(--pgn-color-action-default-success-base) !important; } -a.text-warning-300:hover, -a.text-warning-300:focus { - color: var(--pgn-color-action-default-warning-300) !important; +.text-success { + color: var(--pgn-color-success-base) !important; } -.border-warning-300 { - border-color: var(--pgn-color-warning-300) !important; +a.text-success:hover, +a.text-success:focus { + color: var(--pgn-color-action-default-success-base) !important; } -.bg-warning-200 { - background-color: var(--pgn-color-warning-200) !important; +.border-success { + border-color: var(--pgn-color-success-base) !important; } -a.bg-warning-200:hover, -a.bg-warning-200:focus, -button.bg-warning-200:hover, -button.bg-warning-200:focus { - background-color: var(--pgn-color-action-default-warning-200) !important; +.bg-success-900 { + background-color: var(--pgn-color-success-900) !important; } -.text-warning-200 { - color: var(--pgn-color-warning-200) !important; +a.bg-success-900:hover, +a.bg-success-900:focus, +button.bg-success-900:hover, +button.bg-success-900:focus { + background-color: var(--pgn-color-action-default-success-900) !important; } -a.text-warning-200:hover, -a.text-warning-200:focus { - color: var(--pgn-color-action-default-warning-200) !important; +.text-success-900 { + color: var(--pgn-color-success-900) !important; } -.border-warning-200 { - border-color: var(--pgn-color-warning-200) !important; +a.text-success-900:hover, +a.text-success-900:focus { + color: var(--pgn-color-action-default-success-900) !important; } -.bg-warning-100 { - background-color: var(--pgn-color-warning-100) !important; +.border-success-900 { + border-color: var(--pgn-color-success-900) !important; } -a.bg-warning-100:hover, -a.bg-warning-100:focus, -button.bg-warning-100:hover, -button.bg-warning-100:focus { - background-color: var(--pgn-color-action-default-warning-100) !important; +.bg-success-800 { + background-color: var(--pgn-color-success-800) !important; } -.text-warning-100 { - color: var(--pgn-color-warning-100) !important; +a.bg-success-800:hover, +a.bg-success-800:focus, +button.bg-success-800:hover, +button.bg-success-800:focus { + background-color: var(--pgn-color-action-default-success-800) !important; } -a.text-warning-100:hover, -a.text-warning-100:focus { - color: var(--pgn-color-action-default-warning-100) !important; +.text-success-800 { + color: var(--pgn-color-success-800) !important; } -.border-warning-100 { - border-color: var(--pgn-color-warning-100) !important; +a.text-success-800:hover, +a.text-success-800:focus { + color: var(--pgn-color-action-default-success-800) !important; } -.bg-info { - background-color: var(--pgn-color-info-base) !important; +.border-success-800 { + border-color: var(--pgn-color-success-800) !important; } -a.bg-info:hover, -a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: var(--pgn-color-action-default-info-base) !important; +.bg-success-700 { + background-color: var(--pgn-color-success-700) !important; } -.text-info { - color: var(--pgn-color-info-base) !important; +a.bg-success-700:hover, +a.bg-success-700:focus, +button.bg-success-700:hover, +button.bg-success-700:focus { + background-color: var(--pgn-color-action-default-success-700) !important; } -a.text-info:hover, -a.text-info:focus { - color: var(--pgn-color-action-default-info-base) !important; +.text-success-700 { + color: var(--pgn-color-success-700) !important; } -.border-info { - border-color: var(--pgn-color-info-base) !important; +a.text-success-700:hover, +a.text-success-700:focus { + color: var(--pgn-color-action-default-success-700) !important; } -.bg-info-900 { - background-color: var(--pgn-color-info-900) !important; +.border-success-700 { + border-color: var(--pgn-color-success-700) !important; } -a.bg-info-900:hover, -a.bg-info-900:focus, -button.bg-info-900:hover, -button.bg-info-900:focus { - background-color: var(--pgn-color-action-default-info-900) !important; +.bg-success-600 { + background-color: var(--pgn-color-success-600) !important; } -.text-info-900 { - color: var(--pgn-color-info-900) !important; +a.bg-success-600:hover, +a.bg-success-600:focus, +button.bg-success-600:hover, +button.bg-success-600:focus { + background-color: var(--pgn-color-action-default-success-600) !important; } -a.text-info-900:hover, -a.text-info-900:focus { - color: var(--pgn-color-action-default-info-900) !important; +.text-success-600 { + color: var(--pgn-color-success-600) !important; } -.border-info-900 { - border-color: var(--pgn-color-info-900) !important; +a.text-success-600:hover, +a.text-success-600:focus { + color: var(--pgn-color-action-default-success-600) !important; } -.bg-info-800 { - background-color: var(--pgn-color-info-800) !important; +.border-success-600 { + border-color: var(--pgn-color-success-600) !important; } -a.bg-info-800:hover, -a.bg-info-800:focus, -button.bg-info-800:hover, -button.bg-info-800:focus { - background-color: var(--pgn-color-action-default-info-800) !important; +.bg-success-500 { + background-color: var(--pgn-color-success-500) !important; } -.text-info-800 { - color: var(--pgn-color-info-800) !important; +a.bg-success-500:hover, +a.bg-success-500:focus, +button.bg-success-500:hover, +button.bg-success-500:focus { + background-color: var(--pgn-color-action-default-success-500) !important; } -a.text-info-800:hover, -a.text-info-800:focus { - color: var(--pgn-color-action-default-info-800) !important; +.text-success-500 { + color: var(--pgn-color-success-500) !important; } -.border-info-800 { - border-color: var(--pgn-color-info-800) !important; +a.text-success-500:hover, +a.text-success-500:focus { + color: var(--pgn-color-action-default-success-500) !important; } -.bg-info-700 { - background-color: var(--pgn-color-info-700) !important; +.border-success-500 { + border-color: var(--pgn-color-success-500) !important; } -a.bg-info-700:hover, -a.bg-info-700:focus, -button.bg-info-700:hover, -button.bg-info-700:focus { - background-color: var(--pgn-color-action-default-info-700) !important; +.bg-success-400 { + background-color: var(--pgn-color-success-400) !important; +} + +a.bg-success-400:hover, +a.bg-success-400:focus, +button.bg-success-400:hover, +button.bg-success-400:focus { + background-color: var(--pgn-color-action-default-success-400) !important; } -.text-info-700 { - color: var(--pgn-color-info-700) !important; +.text-success-400 { + color: var(--pgn-color-success-400) !important; } -a.text-info-700:hover, -a.text-info-700:focus { - color: var(--pgn-color-action-default-info-700) !important; +a.text-success-400:hover, +a.text-success-400:focus { + color: var(--pgn-color-action-default-success-400) !important; } -.border-info-700 { - border-color: var(--pgn-color-info-700) !important; +.border-success-400 { + border-color: var(--pgn-color-success-400) !important; } -.bg-info-600 { - background-color: var(--pgn-color-info-600) !important; +.bg-success-300 { + background-color: var(--pgn-color-success-300) !important; } -a.bg-info-600:hover, -a.bg-info-600:focus, -button.bg-info-600:hover, -button.bg-info-600:focus { - background-color: var(--pgn-color-action-default-info-600) !important; +a.bg-success-300:hover, +a.bg-success-300:focus, +button.bg-success-300:hover, +button.bg-success-300:focus { + background-color: var(--pgn-color-action-default-success-300) !important; } -.text-info-600 { - color: var(--pgn-color-info-600) !important; +.text-success-300 { + color: var(--pgn-color-success-300) !important; } -a.text-info-600:hover, -a.text-info-600:focus { - color: var(--pgn-color-action-default-info-600) !important; +a.text-success-300:hover, +a.text-success-300:focus { + color: var(--pgn-color-action-default-success-300) !important; } -.border-info-600 { - border-color: var(--pgn-color-info-600) !important; +.border-success-300 { + border-color: var(--pgn-color-success-300) !important; } -.bg-info-500 { - background-color: var(--pgn-color-info-500) !important; +.bg-success-200 { + background-color: var(--pgn-color-success-200) !important; } -a.bg-info-500:hover, -a.bg-info-500:focus, -button.bg-info-500:hover, -button.bg-info-500:focus { - background-color: var(--pgn-color-action-default-info-500) !important; +a.bg-success-200:hover, +a.bg-success-200:focus, +button.bg-success-200:hover, +button.bg-success-200:focus { + background-color: var(--pgn-color-action-default-success-200) !important; } -.text-info-500 { - color: var(--pgn-color-info-500) !important; +.text-success-200 { + color: var(--pgn-color-success-200) !important; } -a.text-info-500:hover, -a.text-info-500:focus { - color: var(--pgn-color-action-default-info-500) !important; +a.text-success-200:hover, +a.text-success-200:focus { + color: var(--pgn-color-action-default-success-200) !important; } -.border-info-500 { - border-color: var(--pgn-color-info-500) !important; +.border-success-200 { + border-color: var(--pgn-color-success-200) !important; } -.bg-info-400 { - background-color: var(--pgn-color-info-400) !important; +.bg-success-100 { + background-color: var(--pgn-color-success-100) !important; } -a.bg-info-400:hover, -a.bg-info-400:focus, -button.bg-info-400:hover, -button.bg-info-400:focus { - background-color: var(--pgn-color-action-default-info-400) !important; +a.bg-success-100:hover, +a.bg-success-100:focus, +button.bg-success-100:hover, +button.bg-success-100:focus { + background-color: var(--pgn-color-action-default-success-100) !important; } -.text-info-400 { - color: var(--pgn-color-info-400) !important; +.text-success-100 { + color: var(--pgn-color-success-100) !important; } -a.text-info-400:hover, -a.text-info-400:focus { - color: var(--pgn-color-action-default-info-400) !important; +a.text-success-100:hover, +a.text-success-100:focus { + color: var(--pgn-color-action-default-success-100) !important; } -.border-info-400 { - border-color: var(--pgn-color-info-400) !important; +.border-success-100 { + border-color: var(--pgn-color-success-100) !important; } -.bg-info-300 { - background-color: var(--pgn-color-info-300) !important; +.bg-brand { + background-color: var(--pgn-color-brand-base) !important; } -a.bg-info-300:hover, -a.bg-info-300:focus, -button.bg-info-300:hover, -button.bg-info-300:focus { - background-color: var(--pgn-color-action-default-info-300) !important; +a.bg-brand:hover, +a.bg-brand:focus, +button.bg-brand:hover, +button.bg-brand:focus { + background-color: var(--pgn-color-action-default-brand-base) !important; } -.text-info-300 { - color: var(--pgn-color-info-300) !important; +.text-brand { + color: var(--pgn-color-brand-base) !important; } -a.text-info-300:hover, -a.text-info-300:focus { - color: var(--pgn-color-action-default-info-300) !important; +a.text-brand:hover, +a.text-brand:focus { + color: var(--pgn-color-action-default-brand-base) !important; } -.border-info-300 { - border-color: var(--pgn-color-info-300) !important; +.border-brand { + border-color: var(--pgn-color-brand-base) !important; } -.bg-info-200 { - background-color: var(--pgn-color-info-200) !important; +.bg-brand-900 { + background-color: var(--pgn-color-brand-900) !important; } -a.bg-info-200:hover, -a.bg-info-200:focus, -button.bg-info-200:hover, -button.bg-info-200:focus { - background-color: var(--pgn-color-action-default-info-200) !important; +a.bg-brand-900:hover, +a.bg-brand-900:focus, +button.bg-brand-900:hover, +button.bg-brand-900:focus { + background-color: var(--pgn-color-action-default-brand-900) !important; } -.text-info-200 { - color: var(--pgn-color-info-200) !important; +.text-brand-900 { + color: var(--pgn-color-brand-900) !important; } -a.text-info-200:hover, -a.text-info-200:focus { - color: var(--pgn-color-action-default-info-200) !important; +a.text-brand-900:hover, +a.text-brand-900:focus { + color: var(--pgn-color-action-default-brand-900) !important; } -.border-info-200 { - border-color: var(--pgn-color-info-200) !important; +.border-brand-900 { + border-color: var(--pgn-color-brand-900) !important; } -.bg-info-100 { - background-color: var(--pgn-color-info-100) !important; +.bg-brand-800 { + background-color: var(--pgn-color-brand-800) !important; } -a.bg-info-100:hover, -a.bg-info-100:focus, -button.bg-info-100:hover, -button.bg-info-100:focus { - background-color: var(--pgn-color-action-default-info-100) !important; +a.bg-brand-800:hover, +a.bg-brand-800:focus, +button.bg-brand-800:hover, +button.bg-brand-800:focus { + background-color: var(--pgn-color-action-default-brand-800) !important; } -.text-info-100 { - color: var(--pgn-color-info-100) !important; +.text-brand-800 { + color: var(--pgn-color-brand-800) !important; } -a.text-info-100:hover, -a.text-info-100:focus { - color: var(--pgn-color-action-default-info-100) !important; +a.text-brand-800:hover, +a.text-brand-800:focus { + color: var(--pgn-color-action-default-brand-800) !important; } -.border-info-100 { - border-color: var(--pgn-color-info-100) !important; +.border-brand-800 { + border-color: var(--pgn-color-brand-800) !important; } -.bg-success { - background-color: var(--pgn-color-success-base) !important; +.bg-brand-700 { + background-color: var(--pgn-color-brand-700) !important; } -a.bg-success:hover, -a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: var(--pgn-color-action-default-success-base) !important; +a.bg-brand-700:hover, +a.bg-brand-700:focus, +button.bg-brand-700:hover, +button.bg-brand-700:focus { + background-color: var(--pgn-color-action-default-brand-700) !important; } -.text-success { - color: var(--pgn-color-success-base) !important; +.text-brand-700 { + color: var(--pgn-color-brand-700) !important; } -a.text-success:hover, -a.text-success:focus { - color: var(--pgn-color-action-default-success-base) !important; +a.text-brand-700:hover, +a.text-brand-700:focus { + color: var(--pgn-color-action-default-brand-700) !important; } -.border-success { - border-color: var(--pgn-color-success-base) !important; +.border-brand-700 { + border-color: var(--pgn-color-brand-700) !important; } -.bg-success-900 { - background-color: var(--pgn-color-success-900) !important; +.bg-brand-600 { + background-color: var(--pgn-color-brand-600) !important; } -a.bg-success-900:hover, -a.bg-success-900:focus, -button.bg-success-900:hover, -button.bg-success-900:focus { - background-color: var(--pgn-color-action-default-success-900) !important; +a.bg-brand-600:hover, +a.bg-brand-600:focus, +button.bg-brand-600:hover, +button.bg-brand-600:focus { + background-color: var(--pgn-color-action-default-brand-600) !important; } -.text-success-900 { - color: var(--pgn-color-success-900) !important; +.text-brand-600 { + color: var(--pgn-color-brand-600) !important; } -a.text-success-900:hover, -a.text-success-900:focus { - color: var(--pgn-color-action-default-success-900) !important; +a.text-brand-600:hover, +a.text-brand-600:focus { + color: var(--pgn-color-action-default-brand-600) !important; } -.border-success-900 { - border-color: var(--pgn-color-success-900) !important; +.border-brand-600 { + border-color: var(--pgn-color-brand-600) !important; } -.bg-success-800 { - background-color: var(--pgn-color-success-800) !important; +.bg-brand-500 { + background-color: var(--pgn-color-brand-500) !important; } -a.bg-success-800:hover, -a.bg-success-800:focus, -button.bg-success-800:hover, -button.bg-success-800:focus { - background-color: var(--pgn-color-action-default-success-800) !important; +a.bg-brand-500:hover, +a.bg-brand-500:focus, +button.bg-brand-500:hover, +button.bg-brand-500:focus { + background-color: var(--pgn-color-action-default-brand-500) !important; } -.text-success-800 { - color: var(--pgn-color-success-800) !important; +.text-brand-500 { + color: var(--pgn-color-brand-500) !important; } -a.text-success-800:hover, -a.text-success-800:focus { - color: var(--pgn-color-action-default-success-800) !important; +a.text-brand-500:hover, +a.text-brand-500:focus { + color: var(--pgn-color-action-default-brand-500) !important; } -.border-success-800 { - border-color: var(--pgn-color-success-800) !important; +.border-brand-500 { + border-color: var(--pgn-color-brand-500) !important; } -.bg-success-700 { - background-color: var(--pgn-color-success-700) !important; +.bg-brand-400 { + background-color: var(--pgn-color-brand-400) !important; } -a.bg-success-700:hover, -a.bg-success-700:focus, -button.bg-success-700:hover, -button.bg-success-700:focus { - background-color: var(--pgn-color-action-default-success-700) !important; +a.bg-brand-400:hover, +a.bg-brand-400:focus, +button.bg-brand-400:hover, +button.bg-brand-400:focus { + background-color: var(--pgn-color-action-default-brand-400) !important; } -.text-success-700 { - color: var(--pgn-color-success-700) !important; +.text-brand-400 { + color: var(--pgn-color-brand-400) !important; } -a.text-success-700:hover, -a.text-success-700:focus { - color: var(--pgn-color-action-default-success-700) !important; +a.text-brand-400:hover, +a.text-brand-400:focus { + color: var(--pgn-color-action-default-brand-400) !important; } -.border-success-700 { - border-color: var(--pgn-color-success-700) !important; +.border-brand-400 { + border-color: var(--pgn-color-brand-400) !important; } -.bg-success-600 { - background-color: var(--pgn-color-success-600) !important; +.bg-brand-300 { + background-color: var(--pgn-color-brand-300) !important; } -a.bg-success-600:hover, -a.bg-success-600:focus, -button.bg-success-600:hover, -button.bg-success-600:focus { - background-color: var(--pgn-color-action-default-success-600) !important; +a.bg-brand-300:hover, +a.bg-brand-300:focus, +button.bg-brand-300:hover, +button.bg-brand-300:focus { + background-color: var(--pgn-color-action-default-brand-300) !important; } -.text-success-600 { - color: var(--pgn-color-success-600) !important; +.text-brand-300 { + color: var(--pgn-color-brand-300) !important; } -a.text-success-600:hover, -a.text-success-600:focus { - color: var(--pgn-color-action-default-success-600) !important; +a.text-brand-300:hover, +a.text-brand-300:focus { + color: var(--pgn-color-action-default-brand-300) !important; } -.border-success-600 { - border-color: var(--pgn-color-success-600) !important; +.border-brand-300 { + border-color: var(--pgn-color-brand-300) !important; } -.bg-success-500 { - background-color: var(--pgn-color-success-500) !important; +.bg-brand-200 { + background-color: var(--pgn-color-brand-200) !important; } -a.bg-success-500:hover, -a.bg-success-500:focus, -button.bg-success-500:hover, -button.bg-success-500:focus { - background-color: var(--pgn-color-action-default-success-500) !important; +a.bg-brand-200:hover, +a.bg-brand-200:focus, +button.bg-brand-200:hover, +button.bg-brand-200:focus { + background-color: var(--pgn-color-action-default-brand-200) !important; } -.text-success-500 { - color: var(--pgn-color-success-500) !important; +.text-brand-200 { + color: var(--pgn-color-brand-200) !important; } -a.text-success-500:hover, -a.text-success-500:focus { - color: var(--pgn-color-action-default-success-500) !important; +a.text-brand-200:hover, +a.text-brand-200:focus { + color: var(--pgn-color-action-default-brand-200) !important; } -.border-success-500 { - border-color: var(--pgn-color-success-500) !important; +.border-brand-200 { + border-color: var(--pgn-color-brand-200) !important; } -.bg-success-400 { - background-color: var(--pgn-color-success-400) !important; +.bg-brand-100 { + background-color: var(--pgn-color-brand-100) !important; } -a.bg-success-400:hover, -a.bg-success-400:focus, -button.bg-success-400:hover, -button.bg-success-400:focus { - background-color: var(--pgn-color-action-default-success-400) !important; +a.bg-brand-100:hover, +a.bg-brand-100:focus, +button.bg-brand-100:hover, +button.bg-brand-100:focus { + background-color: var(--pgn-color-action-default-brand-100) !important; } -.text-success-400 { - color: var(--pgn-color-success-400) !important; +.text-brand-100 { + color: var(--pgn-color-brand-100) !important; } -a.text-success-400:hover, -a.text-success-400:focus { - color: var(--pgn-color-action-default-success-400) !important; +a.text-brand-100:hover, +a.text-brand-100:focus { + color: var(--pgn-color-action-default-brand-100) !important; } -.border-success-400 { - border-color: var(--pgn-color-success-400) !important; +.border-brand-100 { + border-color: var(--pgn-color-brand-100) !important; } -.bg-success-300 { - background-color: var(--pgn-color-success-300) !important; +.bg-secondary { + background-color: var(--pgn-color-secondary-base) !important; } -a.bg-success-300:hover, -a.bg-success-300:focus, -button.bg-success-300:hover, -button.bg-success-300:focus { - background-color: var(--pgn-color-action-default-success-300) !important; +a.bg-secondary:hover, +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: var(--pgn-color-action-default-secondary-base) !important; } -.text-success-300 { - color: var(--pgn-color-success-300) !important; +.text-secondary { + color: var(--pgn-color-secondary-base) !important; } -a.text-success-300:hover, -a.text-success-300:focus { - color: var(--pgn-color-action-default-success-300) !important; +a.text-secondary:hover, +a.text-secondary:focus { + color: var(--pgn-color-action-default-secondary-base) !important; } -.border-success-300 { - border-color: var(--pgn-color-success-300) !important; +.border-secondary { + border-color: var(--pgn-color-secondary-base) !important; } -.bg-success-200 { - background-color: var(--pgn-color-success-200) !important; +.bg-secondary-900 { + background-color: var(--pgn-color-secondary-900) !important; } -a.bg-success-200:hover, -a.bg-success-200:focus, -button.bg-success-200:hover, -button.bg-success-200:focus { - background-color: var(--pgn-color-action-default-success-200) !important; +a.bg-secondary-900:hover, +a.bg-secondary-900:focus, +button.bg-secondary-900:hover, +button.bg-secondary-900:focus { + background-color: var(--pgn-color-action-default-secondary-900) !important; } -.text-success-200 { - color: var(--pgn-color-success-200) !important; +.text-secondary-900 { + color: var(--pgn-color-secondary-900) !important; } -a.text-success-200:hover, -a.text-success-200:focus { - color: var(--pgn-color-action-default-success-200) !important; +a.text-secondary-900:hover, +a.text-secondary-900:focus { + color: var(--pgn-color-action-default-secondary-900) !important; } -.border-success-200 { - border-color: var(--pgn-color-success-200) !important; +.border-secondary-900 { + border-color: var(--pgn-color-secondary-900) !important; } -.bg-success-100 { - background-color: var(--pgn-color-success-100) !important; +.bg-secondary-800 { + background-color: var(--pgn-color-secondary-800) !important; } -a.bg-success-100:hover, -a.bg-success-100:focus, -button.bg-success-100:hover, -button.bg-success-100:focus { - background-color: var(--pgn-color-action-default-success-100) !important; +a.bg-secondary-800:hover, +a.bg-secondary-800:focus, +button.bg-secondary-800:hover, +button.bg-secondary-800:focus { + background-color: var(--pgn-color-action-default-secondary-800) !important; } -.text-success-100 { - color: var(--pgn-color-success-100) !important; +.text-secondary-800 { + color: var(--pgn-color-secondary-800) !important; } -a.text-success-100:hover, -a.text-success-100:focus { - color: var(--pgn-color-action-default-success-100) !important; +a.text-secondary-800:hover, +a.text-secondary-800:focus { + color: var(--pgn-color-action-default-secondary-800) !important; } -.border-success-100 { - border-color: var(--pgn-color-success-100) !important; +.border-secondary-800 { + border-color: var(--pgn-color-secondary-800) !important; } -.bg-brand-900 { - background-color: var(--pgn-color-brand-900) !important; +.bg-secondary-700 { + background-color: var(--pgn-color-secondary-700) !important; } -a.bg-brand-900:hover, -a.bg-brand-900:focus, -button.bg-brand-900:hover, -button.bg-brand-900:focus { - background-color: var(--pgn-color-action-default-brand-900) !important; +a.bg-secondary-700:hover, +a.bg-secondary-700:focus, +button.bg-secondary-700:hover, +button.bg-secondary-700:focus { + background-color: var(--pgn-color-action-default-secondary-700) !important; } -.text-brand-900 { - color: var(--pgn-color-brand-900) !important; +.text-secondary-700 { + color: var(--pgn-color-secondary-700) !important; } -a.text-brand-900:hover, -a.text-brand-900:focus { - color: var(--pgn-color-action-default-brand-900) !important; +a.text-secondary-700:hover, +a.text-secondary-700:focus { + color: var(--pgn-color-action-default-secondary-700) !important; } -.border-brand-900 { - border-color: var(--pgn-color-brand-900) !important; +.border-secondary-700 { + border-color: var(--pgn-color-secondary-700) !important; } -.bg-brand-800 { - background-color: var(--pgn-color-brand-800) !important; +.bg-secondary-600 { + background-color: var(--pgn-color-secondary-600) !important; } -a.bg-brand-800:hover, -a.bg-brand-800:focus, -button.bg-brand-800:hover, -button.bg-brand-800:focus { - background-color: var(--pgn-color-action-default-brand-800) !important; +a.bg-secondary-600:hover, +a.bg-secondary-600:focus, +button.bg-secondary-600:hover, +button.bg-secondary-600:focus { + background-color: var(--pgn-color-action-default-secondary-600) !important; } -.text-brand-800 { - color: var(--pgn-color-brand-800) !important; +.text-secondary-600 { + color: var(--pgn-color-secondary-600) !important; } -a.text-brand-800:hover, -a.text-brand-800:focus { - color: var(--pgn-color-action-default-brand-800) !important; +a.text-secondary-600:hover, +a.text-secondary-600:focus { + color: var(--pgn-color-action-default-secondary-600) !important; } -.border-brand-800 { - border-color: var(--pgn-color-brand-800) !important; +.border-secondary-600 { + border-color: var(--pgn-color-secondary-600) !important; } -.bg-brand-700 { - background-color: var(--pgn-color-brand-700) !important; +.bg-secondary-500 { + background-color: var(--pgn-color-secondary-500) !important; } -a.bg-brand-700:hover, -a.bg-brand-700:focus, -button.bg-brand-700:hover, -button.bg-brand-700:focus { - background-color: var(--pgn-color-action-default-brand-700) !important; +a.bg-secondary-500:hover, +a.bg-secondary-500:focus, +button.bg-secondary-500:hover, +button.bg-secondary-500:focus { + background-color: var(--pgn-color-action-default-secondary-500) !important; } -.text-brand-700 { - color: var(--pgn-color-brand-700) !important; +.text-secondary-500 { + color: var(--pgn-color-secondary-500) !important; } -a.text-brand-700:hover, -a.text-brand-700:focus { - color: var(--pgn-color-action-default-brand-700) !important; +a.text-secondary-500:hover, +a.text-secondary-500:focus { + color: var(--pgn-color-action-default-secondary-500) !important; } -.border-brand-700 { - border-color: var(--pgn-color-brand-700) !important; +.border-secondary-500 { + border-color: var(--pgn-color-secondary-500) !important; } -.bg-brand-600 { - background-color: var(--pgn-color-brand-600) !important; +.bg-secondary-400 { + background-color: var(--pgn-color-secondary-400) !important; } -a.bg-brand-600:hover, -a.bg-brand-600:focus, -button.bg-brand-600:hover, -button.bg-brand-600:focus { - background-color: var(--pgn-color-action-default-brand-600) !important; +a.bg-secondary-400:hover, +a.bg-secondary-400:focus, +button.bg-secondary-400:hover, +button.bg-secondary-400:focus { + background-color: var(--pgn-color-action-default-secondary-400) !important; } -.text-brand-600 { - color: var(--pgn-color-brand-600) !important; +.text-secondary-400 { + color: var(--pgn-color-secondary-400) !important; } -a.text-brand-600:hover, -a.text-brand-600:focus { - color: var(--pgn-color-action-default-brand-600) !important; +a.text-secondary-400:hover, +a.text-secondary-400:focus { + color: var(--pgn-color-action-default-secondary-400) !important; } -.border-brand-600 { - border-color: var(--pgn-color-brand-600) !important; +.border-secondary-400 { + border-color: var(--pgn-color-secondary-400) !important; } -.bg-brand-500 { - background-color: var(--pgn-color-brand-500) !important; +.bg-secondary-300 { + background-color: var(--pgn-color-secondary-300) !important; } -a.bg-brand-500:hover, -a.bg-brand-500:focus, -button.bg-brand-500:hover, -button.bg-brand-500:focus { - background-color: var(--pgn-color-action-default-brand-500) !important; +a.bg-secondary-300:hover, +a.bg-secondary-300:focus, +button.bg-secondary-300:hover, +button.bg-secondary-300:focus { + background-color: var(--pgn-color-action-default-secondary-300) !important; } -.text-brand-500 { - color: var(--pgn-color-brand-500) !important; +.text-secondary-300 { + color: var(--pgn-color-secondary-300) !important; } -a.text-brand-500:hover, -a.text-brand-500:focus { - color: var(--pgn-color-action-default-brand-500) !important; +a.text-secondary-300:hover, +a.text-secondary-300:focus { + color: var(--pgn-color-action-default-secondary-300) !important; } -.border-brand-500 { - border-color: var(--pgn-color-brand-500) !important; +.border-secondary-300 { + border-color: var(--pgn-color-secondary-300) !important; } -.bg-brand-400 { - background-color: var(--pgn-color-brand-400) !important; +.bg-secondary-200 { + background-color: var(--pgn-color-secondary-200) !important; } -a.bg-brand-400:hover, -a.bg-brand-400:focus, -button.bg-brand-400:hover, -button.bg-brand-400:focus { - background-color: var(--pgn-color-action-default-brand-400) !important; +a.bg-secondary-200:hover, +a.bg-secondary-200:focus, +button.bg-secondary-200:hover, +button.bg-secondary-200:focus { + background-color: var(--pgn-color-action-default-secondary-200) !important; } -.text-brand-400 { - color: var(--pgn-color-brand-400) !important; +.text-secondary-200 { + color: var(--pgn-color-secondary-200) !important; } -a.text-brand-400:hover, -a.text-brand-400:focus { - color: var(--pgn-color-action-default-brand-400) !important; +a.text-secondary-200:hover, +a.text-secondary-200:focus { + color: var(--pgn-color-action-default-secondary-200) !important; } -.border-brand-400 { - border-color: var(--pgn-color-brand-400) !important; +.border-secondary-200 { + border-color: var(--pgn-color-secondary-200) !important; } -.bg-brand-300 { - background-color: var(--pgn-color-brand-300) !important; +.bg-secondary-100 { + background-color: var(--pgn-color-secondary-100) !important; } -a.bg-brand-300:hover, -a.bg-brand-300:focus, -button.bg-brand-300:hover, -button.bg-brand-300:focus { - background-color: var(--pgn-color-action-default-brand-300) !important; +a.bg-secondary-100:hover, +a.bg-secondary-100:focus, +button.bg-secondary-100:hover, +button.bg-secondary-100:focus { + background-color: var(--pgn-color-action-default-secondary-100) !important; } -.text-brand-300 { - color: var(--pgn-color-brand-300) !important; +.text-secondary-100 { + color: var(--pgn-color-secondary-100) !important; } -a.text-brand-300:hover, -a.text-brand-300:focus { - color: var(--pgn-color-action-default-brand-300) !important; +a.text-secondary-100:hover, +a.text-secondary-100:focus { + color: var(--pgn-color-action-default-secondary-100) !important; } -.border-brand-300 { - border-color: var(--pgn-color-brand-300) !important; +.border-secondary-100 { + border-color: var(--pgn-color-secondary-100) !important; } -.bg-brand-200 { - background-color: var(--pgn-color-brand-200) !important; +.bg-primary { + background-color: var(--pgn-color-primary-base) !important; } -a.bg-brand-200:hover, -a.bg-brand-200:focus, -button.bg-brand-200:hover, -button.bg-brand-200:focus { - background-color: var(--pgn-color-action-default-brand-200) !important; +a.bg-primary:hover, +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: var(--pgn-color-action-default-primary-base) !important; } -.text-brand-200 { - color: var(--pgn-color-brand-200) !important; +.text-primary { + color: var(--pgn-color-primary-base) !important; } -a.text-brand-200:hover, -a.text-brand-200:focus { - color: var(--pgn-color-action-default-brand-200) !important; +a.text-primary:hover, +a.text-primary:focus { + color: var(--pgn-color-action-default-primary-base) !important; } -.border-brand-200 { - border-color: var(--pgn-color-brand-200) !important; +.border-primary { + border-color: var(--pgn-color-primary-base) !important; } -.bg-brand-100 { - background-color: var(--pgn-color-brand-100) !important; +.bg-primary-900 { + background-color: var(--pgn-color-primary-900) !important; } -a.bg-brand-100:hover, -a.bg-brand-100:focus, -button.bg-brand-100:hover, -button.bg-brand-100:focus { - background-color: var(--pgn-color-action-default-brand-100) !important; +a.bg-primary-900:hover, +a.bg-primary-900:focus, +button.bg-primary-900:hover, +button.bg-primary-900:focus { + background-color: var(--pgn-color-action-default-primary-900) !important; } -.text-brand-100 { - color: var(--pgn-color-brand-100) !important; +.text-primary-900 { + color: var(--pgn-color-primary-900) !important; } -a.text-brand-100:hover, -a.text-brand-100:focus { - color: var(--pgn-color-action-default-brand-100) !important; +a.text-primary-900:hover, +a.text-primary-900:focus { + color: var(--pgn-color-action-default-primary-900) !important; } -.border-brand-100 { - border-color: var(--pgn-color-brand-100) !important; +.border-primary-900 { + border-color: var(--pgn-color-primary-900) !important; } -.bg-secondary { - background-color: var(--pgn-color-secondary-base) !important; +.bg-primary-800 { + background-color: var(--pgn-color-primary-800) !important; } -a.bg-secondary:hover, -a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: var(--pgn-color-action-default-secondary-base) !important; +a.bg-primary-800:hover, +a.bg-primary-800:focus, +button.bg-primary-800:hover, +button.bg-primary-800:focus { + background-color: var(--pgn-color-action-default-primary-800) !important; } -.text-secondary { - color: var(--pgn-color-secondary-base) !important; +.text-primary-800 { + color: var(--pgn-color-primary-800) !important; } -a.text-secondary:hover, -a.text-secondary:focus { - color: var(--pgn-color-action-default-secondary-base) !important; +a.text-primary-800:hover, +a.text-primary-800:focus { + color: var(--pgn-color-action-default-primary-800) !important; } -.border-secondary { - border-color: var(--pgn-color-secondary-base) !important; +.border-primary-800 { + border-color: var(--pgn-color-primary-800) !important; } -.bg-secondary-900 { - background-color: var(--pgn-color-secondary-900) !important; +.bg-primary-700 { + background-color: var(--pgn-color-primary-700) !important; } -a.bg-secondary-900:hover, -a.bg-secondary-900:focus, -button.bg-secondary-900:hover, -button.bg-secondary-900:focus { - background-color: var(--pgn-color-action-default-secondary-900) !important; +a.bg-primary-700:hover, +a.bg-primary-700:focus, +button.bg-primary-700:hover, +button.bg-primary-700:focus { + background-color: var(--pgn-color-action-default-primary-700) !important; } -.text-secondary-900 { - color: var(--pgn-color-secondary-900) !important; +.text-primary-700 { + color: var(--pgn-color-primary-700) !important; } - -a.text-secondary-900:hover, -a.text-secondary-900:focus { - color: var(--pgn-color-action-default-secondary-900) !important; + +a.text-primary-700:hover, +a.text-primary-700:focus { + color: var(--pgn-color-action-default-primary-700) !important; } -.border-secondary-900 { - border-color: var(--pgn-color-secondary-900) !important; +.border-primary-700 { + border-color: var(--pgn-color-primary-700) !important; } -.bg-secondary-800 { - background-color: var(--pgn-color-secondary-800) !important; +.bg-primary-600 { + background-color: var(--pgn-color-primary-600) !important; } -a.bg-secondary-800:hover, -a.bg-secondary-800:focus, -button.bg-secondary-800:hover, -button.bg-secondary-800:focus { - background-color: var(--pgn-color-action-default-secondary-800) !important; +a.bg-primary-600:hover, +a.bg-primary-600:focus, +button.bg-primary-600:hover, +button.bg-primary-600:focus { + background-color: var(--pgn-color-action-default-primary-600) !important; } -.text-secondary-800 { - color: var(--pgn-color-secondary-800) !important; +.text-primary-600 { + color: var(--pgn-color-primary-600) !important; } -a.text-secondary-800:hover, -a.text-secondary-800:focus { - color: var(--pgn-color-action-default-secondary-800) !important; +a.text-primary-600:hover, +a.text-primary-600:focus { + color: var(--pgn-color-action-default-primary-600) !important; } -.border-secondary-800 { - border-color: var(--pgn-color-secondary-800) !important; +.border-primary-600 { + border-color: var(--pgn-color-primary-600) !important; } -.bg-secondary-700 { - background-color: var(--pgn-color-secondary-700) !important; +.bg-primary-500 { + background-color: var(--pgn-color-primary-500) !important; } -a.bg-secondary-700:hover, -a.bg-secondary-700:focus, -button.bg-secondary-700:hover, -button.bg-secondary-700:focus { - background-color: var(--pgn-color-action-default-secondary-700) !important; +a.bg-primary-500:hover, +a.bg-primary-500:focus, +button.bg-primary-500:hover, +button.bg-primary-500:focus { + background-color: var(--pgn-color-action-default-primary-500) !important; } -.text-secondary-700 { - color: var(--pgn-color-secondary-700) !important; +.text-primary-500 { + color: var(--pgn-color-primary-500) !important; } -a.text-secondary-700:hover, -a.text-secondary-700:focus { - color: var(--pgn-color-action-default-secondary-700) !important; +a.text-primary-500:hover, +a.text-primary-500:focus { + color: var(--pgn-color-action-default-primary-500) !important; } -.border-secondary-700 { - border-color: var(--pgn-color-secondary-700) !important; +.border-primary-500 { + border-color: var(--pgn-color-primary-500) !important; } -.bg-secondary-600 { - background-color: var(--pgn-color-secondary-600) !important; +.bg-primary-400 { + background-color: var(--pgn-color-primary-400) !important; } -a.bg-secondary-600:hover, -a.bg-secondary-600:focus, -button.bg-secondary-600:hover, -button.bg-secondary-600:focus { - background-color: var(--pgn-color-action-default-secondary-600) !important; +a.bg-primary-400:hover, +a.bg-primary-400:focus, +button.bg-primary-400:hover, +button.bg-primary-400:focus { + background-color: var(--pgn-color-action-default-primary-400) !important; } -.text-secondary-600 { - color: var(--pgn-color-secondary-600) !important; +.text-primary-400 { + color: var(--pgn-color-primary-400) !important; } -a.text-secondary-600:hover, -a.text-secondary-600:focus { - color: var(--pgn-color-action-default-secondary-600) !important; +a.text-primary-400:hover, +a.text-primary-400:focus { + color: var(--pgn-color-action-default-primary-400) !important; } -.border-secondary-600 { - border-color: var(--pgn-color-secondary-600) !important; +.border-primary-400 { + border-color: var(--pgn-color-primary-400) !important; } -.bg-secondary-500 { - background-color: var(--pgn-color-secondary-500) !important; +.bg-primary-300 { + background-color: var(--pgn-color-primary-300) !important; } -a.bg-secondary-500:hover, -a.bg-secondary-500:focus, -button.bg-secondary-500:hover, -button.bg-secondary-500:focus { - background-color: var(--pgn-color-action-default-secondary-500) !important; +a.bg-primary-300:hover, +a.bg-primary-300:focus, +button.bg-primary-300:hover, +button.bg-primary-300:focus { + background-color: var(--pgn-color-action-default-primary-300) !important; } -.text-secondary-500 { - color: var(--pgn-color-secondary-500) !important; +.text-primary-300 { + color: var(--pgn-color-primary-300) !important; } -a.text-secondary-500:hover, -a.text-secondary-500:focus { - color: var(--pgn-color-action-default-secondary-500) !important; +a.text-primary-300:hover, +a.text-primary-300:focus { + color: var(--pgn-color-action-default-primary-300) !important; } -.border-secondary-500 { - border-color: var(--pgn-color-secondary-500) !important; +.border-primary-300 { + border-color: var(--pgn-color-primary-300) !important; } -.bg-secondary-400 { - background-color: var(--pgn-color-secondary-400) !important; +.bg-primary-200 { + background-color: var(--pgn-color-primary-200) !important; } -a.bg-secondary-400:hover, -a.bg-secondary-400:focus, -button.bg-secondary-400:hover, -button.bg-secondary-400:focus { - background-color: var(--pgn-color-action-default-secondary-400) !important; +a.bg-primary-200:hover, +a.bg-primary-200:focus, +button.bg-primary-200:hover, +button.bg-primary-200:focus { + background-color: var(--pgn-color-action-default-primary-200) !important; } -.text-secondary-400 { - color: var(--pgn-color-secondary-400) !important; +.text-primary-200 { + color: var(--pgn-color-primary-200) !important; } -a.text-secondary-400:hover, -a.text-secondary-400:focus { - color: var(--pgn-color-action-default-secondary-400) !important; +a.text-primary-200:hover, +a.text-primary-200:focus { + color: var(--pgn-color-action-default-primary-200) !important; } -.border-secondary-400 { - border-color: var(--pgn-color-secondary-400) !important; +.border-primary-200 { + border-color: var(--pgn-color-primary-200) !important; } -.bg-secondary-300 { - background-color: var(--pgn-color-secondary-300) !important; +.bg-primary-100 { + background-color: var(--pgn-color-primary-100) !important; } -a.bg-secondary-300:hover, -a.bg-secondary-300:focus, -button.bg-secondary-300:hover, -button.bg-secondary-300:focus { - background-color: var(--pgn-color-action-default-secondary-300) !important; +a.bg-primary-100:hover, +a.bg-primary-100:focus, +button.bg-primary-100:hover, +button.bg-primary-100:focus { + background-color: var(--pgn-color-action-default-primary-100) !important; } -.text-secondary-300 { - color: var(--pgn-color-secondary-300) !important; +.text-primary-100 { + color: var(--pgn-color-primary-100) !important; } -a.text-secondary-300:hover, -a.text-secondary-300:focus { - color: var(--pgn-color-action-default-secondary-300) !important; +a.text-primary-100:hover, +a.text-primary-100:focus { + color: var(--pgn-color-action-default-primary-100) !important; } -.border-secondary-300 { - border-color: var(--pgn-color-secondary-300) !important; +.border-primary-100 { + border-color: var(--pgn-color-primary-100) !important; } -.bg-secondary-200 { - background-color: var(--pgn-color-secondary-200) !important; +.bg-gray { + background-color: var(--pgn-color-gray-base) !important; } -a.bg-secondary-200:hover, -a.bg-secondary-200:focus, -button.bg-secondary-200:hover, -button.bg-secondary-200:focus { - background-color: var(--pgn-color-action-default-secondary-200) !important; +a.bg-gray:hover, +a.bg-gray:focus, +button.bg-gray:hover, +button.bg-gray:focus { + background-color: var(--pgn-color-action-default-gray-base) !important; } -.text-secondary-200 { - color: var(--pgn-color-secondary-200) !important; +.text-gray { + color: var(--pgn-color-gray-base) !important; } -a.text-secondary-200:hover, -a.text-secondary-200:focus { - color: var(--pgn-color-action-default-secondary-200) !important; +a.text-gray:hover, +a.text-gray:focus { + color: var(--pgn-color-action-default-gray-base) !important; } -.border-secondary-200 { - border-color: var(--pgn-color-secondary-200) !important; +.border-gray { + border-color: var(--pgn-color-gray-base) !important; } -.bg-secondary-100 { - background-color: var(--pgn-color-secondary-100) !important; +.bg-gray-900 { + background-color: var(--pgn-color-gray-900) !important; } -a.bg-secondary-100:hover, -a.bg-secondary-100:focus, -button.bg-secondary-100:hover, -button.bg-secondary-100:focus { - background-color: var(--pgn-color-action-default-secondary-100) !important; +a.bg-gray-900:hover, +a.bg-gray-900:focus, +button.bg-gray-900:hover, +button.bg-gray-900:focus { + background-color: var(--pgn-color-action-default-gray-900) !important; } -.text-secondary-100 { - color: var(--pgn-color-secondary-100) !important; +.text-gray-900 { + color: var(--pgn-color-gray-900) !important; } -a.text-secondary-100:hover, -a.text-secondary-100:focus { - color: var(--pgn-color-action-default-secondary-100) !important; +a.text-gray-900:hover, +a.text-gray-900:focus { + color: var(--pgn-color-action-default-gray-900) !important; } -.border-secondary-100 { - border-color: var(--pgn-color-secondary-100) !important; +.border-gray-900 { + border-color: var(--pgn-color-gray-900) !important; } -.bg-primary-900 { - background-color: var(--pgn-color-primary-900) !important; +.bg-gray-800 { + background-color: var(--pgn-color-gray-800) !important; } -a.bg-primary-900:hover, -a.bg-primary-900:focus, -button.bg-primary-900:hover, -button.bg-primary-900:focus { - background-color: var(--pgn-color-action-default-primary-900) !important; +a.bg-gray-800:hover, +a.bg-gray-800:focus, +button.bg-gray-800:hover, +button.bg-gray-800:focus { + background-color: var(--pgn-color-action-default-gray-800) !important; } -.text-primary-900 { - color: var(--pgn-color-primary-900) !important; +.text-gray-800 { + color: var(--pgn-color-gray-800) !important; } -a.text-primary-900:hover, -a.text-primary-900:focus { - color: var(--pgn-color-action-default-primary-900) !important; +a.text-gray-800:hover, +a.text-gray-800:focus { + color: var(--pgn-color-action-default-gray-800) !important; } -.border-primary-900 { - border-color: var(--pgn-color-primary-900) !important; +.border-gray-800 { + border-color: var(--pgn-color-gray-800) !important; } -.bg-primary-800 { - background-color: var(--pgn-color-primary-800) !important; +.bg-gray-700 { + background-color: var(--pgn-color-gray-700) !important; } -a.bg-primary-800:hover, -a.bg-primary-800:focus, -button.bg-primary-800:hover, -button.bg-primary-800:focus { - background-color: var(--pgn-color-action-default-primary-800) !important; +a.bg-gray-700:hover, +a.bg-gray-700:focus, +button.bg-gray-700:hover, +button.bg-gray-700:focus { + background-color: var(--pgn-color-action-default-gray-700) !important; } -.text-primary-800 { - color: var(--pgn-color-primary-800) !important; +.text-gray-700 { + color: var(--pgn-color-gray-700) !important; } -a.text-primary-800:hover, -a.text-primary-800:focus { - color: var(--pgn-color-action-default-primary-800) !important; +a.text-gray-700:hover, +a.text-gray-700:focus { + color: var(--pgn-color-action-default-gray-700) !important; } -.border-primary-800 { - border-color: var(--pgn-color-primary-800) !important; +.border-gray-700 { + border-color: var(--pgn-color-gray-700) !important; } -.bg-primary-700 { - background-color: var(--pgn-color-primary-700) !important; +.bg-gray-600 { + background-color: var(--pgn-color-gray-600) !important; } -a.bg-primary-700:hover, -a.bg-primary-700:focus, -button.bg-primary-700:hover, -button.bg-primary-700:focus { - background-color: var(--pgn-color-action-default-primary-700) !important; +a.bg-gray-600:hover, +a.bg-gray-600:focus, +button.bg-gray-600:hover, +button.bg-gray-600:focus { + background-color: var(--pgn-color-action-default-gray-600) !important; } -.text-primary-700 { - color: var(--pgn-color-primary-700) !important; +.text-gray-600 { + color: var(--pgn-color-gray-600) !important; } -a.text-primary-700:hover, -a.text-primary-700:focus { - color: var(--pgn-color-action-default-primary-700) !important; +a.text-gray-600:hover, +a.text-gray-600:focus { + color: var(--pgn-color-action-default-gray-600) !important; } -.border-primary-700 { - border-color: var(--pgn-color-primary-700) !important; +.border-gray-600 { + border-color: var(--pgn-color-gray-600) !important; } -.bg-primary-600 { - background-color: var(--pgn-color-primary-600) !important; +.bg-gray-500 { + background-color: var(--pgn-color-gray-500) !important; } -a.bg-primary-600:hover, -a.bg-primary-600:focus, -button.bg-primary-600:hover, -button.bg-primary-600:focus { - background-color: var(--pgn-color-action-default-primary-600) !important; +a.bg-gray-500:hover, +a.bg-gray-500:focus, +button.bg-gray-500:hover, +button.bg-gray-500:focus { + background-color: var(--pgn-color-action-default-gray-500) !important; } -.text-primary-600 { - color: var(--pgn-color-primary-600) !important; +.text-gray-500 { + color: var(--pgn-color-gray-500) !important; } -a.text-primary-600:hover, -a.text-primary-600:focus { - color: var(--pgn-color-action-default-primary-600) !important; +a.text-gray-500:hover, +a.text-gray-500:focus { + color: var(--pgn-color-action-default-gray-500) !important; } -.border-primary-600 { - border-color: var(--pgn-color-primary-600) !important; +.border-gray-500 { + border-color: var(--pgn-color-gray-500) !important; } -.bg-primary-500 { - background-color: var(--pgn-color-primary-500) !important; +.bg-gray-400 { + background-color: var(--pgn-color-gray-400) !important; } -a.bg-primary-500:hover, -a.bg-primary-500:focus, -button.bg-primary-500:hover, -button.bg-primary-500:focus { - background-color: var(--pgn-color-action-default-primary-500) !important; +a.bg-gray-400:hover, +a.bg-gray-400:focus, +button.bg-gray-400:hover, +button.bg-gray-400:focus { + background-color: var(--pgn-color-action-default-gray-400) !important; } -.text-primary-500 { - color: var(--pgn-color-primary-500) !important; +.text-gray-400 { + color: var(--pgn-color-gray-400) !important; } -a.text-primary-500:hover, -a.text-primary-500:focus { - color: var(--pgn-color-action-default-primary-500) !important; +a.text-gray-400:hover, +a.text-gray-400:focus { + color: var(--pgn-color-action-default-gray-400) !important; } -.border-primary-500 { - border-color: var(--pgn-color-primary-500) !important; +.border-gray-400 { + border-color: var(--pgn-color-gray-400) !important; } -.bg-primary-400 { - background-color: var(--pgn-color-primary-400) !important; +.bg-gray-300 { + background-color: var(--pgn-color-gray-300) !important; } -a.bg-primary-400:hover, -a.bg-primary-400:focus, -button.bg-primary-400:hover, -button.bg-primary-400:focus { - background-color: var(--pgn-color-action-default-primary-400) !important; +a.bg-gray-300:hover, +a.bg-gray-300:focus, +button.bg-gray-300:hover, +button.bg-gray-300:focus { + background-color: var(--pgn-color-action-default-gray-300) !important; } -.text-primary-400 { - color: var(--pgn-color-primary-400) !important; +.text-gray-300 { + color: var(--pgn-color-gray-300) !important; } -a.text-primary-400:hover, -a.text-primary-400:focus { - color: var(--pgn-color-action-default-primary-400) !important; +a.text-gray-300:hover, +a.text-gray-300:focus { + color: var(--pgn-color-action-default-gray-300) !important; } -.border-primary-400 { - border-color: var(--pgn-color-primary-400) !important; +.border-gray-300 { + border-color: var(--pgn-color-gray-300) !important; } -.bg-primary-300 { - background-color: var(--pgn-color-primary-300) !important; +.bg-gray-200 { + background-color: var(--pgn-color-gray-200) !important; } -a.bg-primary-300:hover, -a.bg-primary-300:focus, -button.bg-primary-300:hover, -button.bg-primary-300:focus { - background-color: var(--pgn-color-action-default-primary-300) !important; +a.bg-gray-200:hover, +a.bg-gray-200:focus, +button.bg-gray-200:hover, +button.bg-gray-200:focus { + background-color: var(--pgn-color-action-default-gray-200) !important; } -.text-primary-300 { - color: var(--pgn-color-primary-300) !important; +.text-gray-200 { + color: var(--pgn-color-gray-200) !important; } -a.text-primary-300:hover, -a.text-primary-300:focus { - color: var(--pgn-color-action-default-primary-300) !important; +a.text-gray-200:hover, +a.text-gray-200:focus { + color: var(--pgn-color-action-default-gray-200) !important; } -.border-primary-300 { - border-color: var(--pgn-color-primary-300) !important; +.border-gray-200 { + border-color: var(--pgn-color-gray-200) !important; } -.bg-primary-200 { - background-color: var(--pgn-color-primary-200) !important; +.bg-gray-100 { + background-color: var(--pgn-color-gray-100) !important; } -a.bg-primary-200:hover, -a.bg-primary-200:focus, -button.bg-primary-200:hover, -button.bg-primary-200:focus { - background-color: var(--pgn-color-action-default-primary-200) !important; +a.bg-gray-100:hover, +a.bg-gray-100:focus, +button.bg-gray-100:hover, +button.bg-gray-100:focus { + background-color: var(--pgn-color-action-default-gray-100) !important; } -.text-primary-200 { - color: var(--pgn-color-primary-200) !important; +.text-gray-100 { + color: var(--pgn-color-gray-100) !important; } -a.text-primary-200:hover, -a.text-primary-200:focus { - color: var(--pgn-color-action-default-primary-200) !important; +a.text-gray-100:hover, +a.text-gray-100:focus { + color: var(--pgn-color-action-default-gray-100) !important; } -.border-primary-200 { - border-color: var(--pgn-color-primary-200) !important; +.border-gray-100 { + border-color: var(--pgn-color-gray-100) !important; } -.bg-primary-100 { - background-color: var(--pgn-color-primary-100) !important; +.bg-accent-b { + background-color: var(--pgn-color-accent-b) !important; } -a.bg-primary-100:hover, -a.bg-primary-100:focus, -button.bg-primary-100:hover, -button.bg-primary-100:focus { - background-color: var(--pgn-color-action-default-primary-100) !important; +a.bg-accent-b:hover, +a.bg-accent-b:focus, +button.bg-accent-b:hover, +button.bg-accent-b:focus { + background-color: var(--pgn-color-action-default-accent-b) !important; } -.text-primary-100 { - color: var(--pgn-color-primary-100) !important; +.text-accent-b { + color: var(--pgn-color-accent-b) !important; } -a.text-primary-100:hover, -a.text-primary-100:focus { - color: var(--pgn-color-action-default-primary-100) !important; +a.text-accent-b:hover, +a.text-accent-b:focus { + color: var(--pgn-color-action-default-accent-b) !important; } -.border-primary-100 { - border-color: var(--pgn-color-primary-100) !important; +.border-accent-b { + border-color: var(--pgn-color-accent-b) !important; } -.bg-gray-500 { - background-color: var(--pgn-color-gray-500) !important; +.bg-accent-a { + background-color: var(--pgn-color-accent-a) !important; } -a.bg-gray-500:hover, -a.bg-gray-500:focus, -button.bg-gray-500:hover, -button.bg-gray-500:focus { - background-color: var(--pgn-color-action-default-gray-500) !important; +a.bg-accent-a:hover, +a.bg-accent-a:focus, +button.bg-accent-a:hover, +button.bg-accent-a:focus { + background-color: var(--pgn-color-action-default-accent-a) !important; } -.text-gray-500 { - color: var(--pgn-color-gray-500) !important; +.text-accent-a { + color: var(--pgn-color-accent-a) !important; } -a.text-gray-500:hover, -a.text-gray-500:focus { - color: var(--pgn-color-action-default-gray-500) !important; +a.text-accent-a:hover, +a.text-accent-a:focus { + color: var(--pgn-color-action-default-accent-a) !important; } -.border-gray-500 { - border-color: var(--pgn-color-gray-500) !important; +.border-accent-a { + border-color: var(--pgn-color-accent-a) !important; } diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 4d0e84f314..97329a27fd 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,656 +1,4 @@ -[object Promise]: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-mark-bg: #FFF243FF; - --pgn-color-list-group-base: inherit; - --pgn-color-toast-base: inherit; - --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000; - --pgn-color-stepper-header-step-border: none; - --pgn-color-stepper-header-bg-base: #00000000; - --pgn-color-progress-bar-bg: #00000000; - --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; - --pgn-color-popover-border: #00000033; - --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066; - --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000; - --pgn-color-nav-tabs-base-link-active-bg: #00000000; - --pgn-color-nav-tabs-base-bg-hover: #00000000; - --pgn-color-nav-link-border: #00000000; - --pgn-color-menu-item-bg: #00000000; - --pgn-color-icon-button-bg-base: #00000000; - --pgn-color-form-control-label-base: inherit; - --pgn-color-code-base: #E83E8CFF; - --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-link-emphasized-hover-darken-percentage: 15%; - --pgn-other-tooltip-opacity: 1; - --pgn-other-search-field-disabled-opacity: .3; - --pgn-other-modal-opacity: .5; - --pgn-other-chip-opacity-disabled: .3; - --pgn-other-carousel-control-opacity-hover: .9; - --pgn-other-carousel-control-opacity-base: .5; - --pgn-other-btn-disabled-opacity: .65; - --pgn-other-form-feedback-tooltip-opacity: .9; - --pgn-other-form-control-custom-file-content: Browse; - --pgn-other-form-control-custom-file-lang: en; - --pgn-other-form-control-range-track-cursor: pointer; - --pgn-other-form-control-cursor: auto; - --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); - --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); - --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); - --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); - --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); - --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-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-progress-bar-box-shadow: none; - --pgn-elevation-image-thumbnail-box-shadow: none; - --pgn-elevation-icon-button-box-shadow-black-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-black-active: none; - --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-dark-active: none; - --pgn-elevation-icon-button-box-shadow-light-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-light-active: none; - --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-danger-active: none; - --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-warning-active: none; - --pgn-elevation-icon-button-box-shadow-success-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-success-active: none; - --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-brand-active: none; - --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-secondary-active: none; - --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-primary-active: none; - --pgn-elevation-form-control-select-border-base: none; - --pgn-elevation-form-control-range-thumb-base: none; - --pgn-elevation-form-control-range-track: none; - --pgn-elevation-form-control-checkbox-indicator-indeterminate: none; - --pgn-elevation-form-control-indicator-active: none; - --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1); - --pgn-elevation-form-control-indicator-checked-base: none; - --pgn-elevation-form-input-base: none; - --pgn-elevation-code-kbd-box-shadow: none; - --pgn-elevation-btn-box-shadow-active: none; - --pgn-elevation-btn-box-shadow-base: none; - --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-elevation-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-product-tour-checkpoint-zindex: 1060; - --pgn-elevation-popover-box-shadow: none; - --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: none; - --pgn-elevation-dropdown-zindex: 1000; - --pgn-transition-collapse-width: width .35s ease; - --pgn-transition-collapse-height: 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-micro: .938rem; - --pgn-typography-line-height-sm: 1.5rem; - --pgn-typography-line-height-lg: 1.5rem; - --pgn-typography-line-height-base: 1.5556rem; - --pgn-typography-font-weight-table-th: normal; - --pgn-typography-font-weight-lead: inherit; - --pgn-typography-font-weight-bolder: bolder; - --pgn-typography-font-weight-bold: 700; - --pgn-typography-font-weight-semi-bold: 500; - --pgn-typography-font-weight-normal: 400; - --pgn-typography-font-weight-light: 300; - --pgn-typography-font-weight-lighter: lighter; - --pgn-typography-font-size-micro: .688rem; - --pgn-typography-font-size-mobile-h1: 2.25rem; - --pgn-typography-font-size-h6: .75rem; - --pgn-typography-font-size-h5: .875rem; - --pgn-typography-font-size-h4: 1.125rem; - --pgn-typography-font-size-h3: 1.375rem; - --pgn-typography-font-size-h2: 2rem; - --pgn-typography-font-size-h1: 2.5rem; - --pgn-typography-font-size-small-x: 75%; - --pgn-typography-font-size-small-base: 87.5%; - --pgn-typography-font-size-xs: .75rem; - --pgn-typography-font-size-sm: .875rem; - --pgn-typography-font-size-lg: 1.4063rem; - --pgn-typography-font-size-base: 1.125rem; - --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; - --pgn-typography-font-family-serif: serif; - --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; - --pgn-typography-print-page-size: a3; - --pgn-typography-display-mobile: 3.25rem; - --pgn-typography-display-line-height-mobile: 3.5rem; - --pgn-typography-display-line-height-base: 1rem; - --pgn-typography-display-4: 7.5rem; - --pgn-typography-display-3: 5.625rem; - --pgn-typography-display-2: 4.875rem; - --pgn-typography-display-1: 3.75rem; - --pgn-typography-link-decoration-brand-inline-hover: underline; - --pgn-typography-link-decoration-brand-inline-base: underline; - --pgn-typography-link-decoration-brand-hover: underline; - --pgn-typography-link-decoration-brand-base: none; - --pgn-typography-link-decoration-muted-inline-hover: underline; - --pgn-typography-link-decoration-muted-inline-base: underline; - --pgn-typography-link-decoration-muted-hover: underline; - --pgn-typography-link-decoration-muted-base: none; - --pgn-typography-link-decoration-inline-hover: underline; - --pgn-typography-link-decoration-inline-base: underline; - --pgn-typography-link-decoration-hover: underline; - --pgn-typography-link-decoration-base: none; - --pgn-typography-input-btn-line-height-sm: 1.4286rem; - --pgn-typography-input-btn-line-height-base: 1.3333rem; - --pgn-typography-input-btn-font-size-lg: 1.325rem; - --pgn-typography-input-btn-font-size-sm: .875rem; - --pgn-typography-input-btn-font-size-base: 1.125rem; - --pgn-typography-input-btn-font-family: inherit; - --pgn-typography-headings-line-height: 1.25rem; - --pgn-typography-headings-font-family: inherit; - --pgn-typography-toast-font-size: .875rem; - --pgn-typography-spacer-line-height: 1px; - --pgn-typography-pagination-line-height: 1.5rem; - --pgn-typography-pagination-font-size-sm: .875rem; - --pgn-typography-nav-link-text-decoration: none; - --pgn-typography-nav-link-font-weight: 500; - --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem; - --pgn-typography-menu-select-btn-link-text-decoration-line: underline; - --pgn-typography-image-figure-caption-font-size: 90%; - --pgn-typography-dropdown-item-text-decoration: none; - --pgn-typography-code-font-size: 87.5%; - --pgn-typography-badge-font-size: 75%; - --pgn-typography-alert-line-height: 1.5rem; - --pgn-typography-alert-font-size: .875rem; - --pgn-spacing-grid-gutter-width: 24px; - --pgn-spacing-table-cell-padding-sm: .3rem; - --pgn-spacing-table-cell-padding-base: .75rem; - --pgn-spacing-label-margin-bottom: .5rem; - --pgn-spacing-spacer-base: 1rem; - --pgn-spacing-spacer-0: 0rem; - --pgn-spacing-mark-padding: .2em; - --pgn-spacing-paragraph-margin-bottom: 1rem; - --pgn-spacing-list-group-item-padding-x: 1.25rem; - --pgn-spacing-list-group-item-padding-y: .75rem; - --pgn-spacing-list-inline-padding: .5rem; - --pgn-spacing-input-btn-padding-lg-x: 1.25rem; - --pgn-spacing-input-btn-padding-lg-y: .6875rem; - --pgn-spacing-input-btn-padding-sm-x: .75rem; - --pgn-spacing-input-btn-padding-sm-y: .4375rem; - --pgn-spacing-input-btn-padding-x: 1rem; - --pgn-spacing-input-btn-padding-y: .5625rem; - --pgn-spacing-headings-margin-bottom: .5rem; - --pgn-spacing-caret-vertical-align: .255em; - --pgn-spacing-caret-base: .255em; - --pgn-spacing-tooltip-margin: 0rem; - --pgn-spacing-tooltip-padding-x: .5rem; - --pgn-spacing-tooltip-padding-y: .5rem; - --pgn-spacing-toast-container-gutter-sm: .625rem; - --pgn-spacing-toast-container-gutter-lg: 1.25rem; - --pgn-spacing-toast-padding-y: .25rem; - --pgn-spacing-toast-padding-x: .75rem; - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem; - --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; - --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; - --pgn-spacing-sticky-offset: 0rem; - --pgn-spacing-stepper-header-step-list-margin: 0rem; - --pgn-spacing-stepper-header-step-list-padding-x: 0rem; - --pgn-spacing-stepper-header-step-list-padding-y: .25rem; - --pgn-spacing-stepper-header-step-padding: .25rem; - --pgn-spacing-stepper-header-padding-y: .75rem; - --pgn-spacing-vertical-align: .125em; - --pgn-spacing-selectable-box-box-space: .75rem; - --pgn-spacing-selectable-box-border-radius: .25rem; - --pgn-spacing-selectable-box-padding: 1rem; - --pgn-spacing-search-field-margin-button: .5rem; - --pgn-spacing-progress-bar-hint-annotation-gap: .5rem; - --pgn-spacing-popover-icon-margin-right: .5rem; - --pgn-spacing-popover-header-padding-x: 1rem; - --pgn-spacing-popover-header-padding-y: .5rem; - --pgn-spacing-pagination-padding-x-lg: 1.5rem; - --pgn-spacing-pagination-padding-x-sm: .6rem; - --pgn-spacing-pagination-padding-x-base: 1rem; - --pgn-spacing-pagination-padding-y-lg: .75rem; - --pgn-spacing-pagination-padding-y-sm: .8rem; - --pgn-spacing-pagination-padding-y-base: .625rem; - --pgn-spacing-navbar-toggler-padding-x: .75rem; - --pgn-spacing-navbar-toggler-padding-y: .25rem; - --pgn-spacing-navbar-padding-x-nav-link: .5rem; - --pgn-spacing-nav-link-distance-to-border: 4px; - --pgn-spacing-nav-link-padding-x: 1rem; - --pgn-spacing-nav-link-padding-y: .5rem; - --pgn-spacing-modal-dialog-margin: 1.5rem; - --pgn-spacing-modal-header-padding-y: 1rem; - --pgn-spacing-modal-footer-padding-y: 1rem; - --pgn-spacing-modal-inner-padding-bottom: .7rem; - --pgn-spacing-modal-inner-padding-base: 1.5rem; - --pgn-spacing-menu-item-icon-margin-left: .25em; - --pgn-spacing-image-thumbnail-padding: .25rem; - --pgn-spacing-form-control-select-icon-padding: .5625rem; - --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; - --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; - --pgn-spacing-form-control-select-indicator-padding: 1rem; - --pgn-spacing-form-control-spacer-x: 1rem; - --pgn-spacing-form-control-gutter: .5rem; - --pgn-spacing-form-group-margin-bottom: 1rem; - --pgn-spacing-form-check-position-axis: .375rem; - --pgn-spacing-form-check-inline-margin-x: .75rem; - --pgn-spacing-form-text-margin-top: .25rem; - --pgn-spacing-form-input-check-margin-y: .3rem; - --pgn-spacing-form-input-check-margin-x-inline: .3125rem; - --pgn-spacing-form-input-check-margin-x-base: .25rem; - --pgn-spacing-form-input-check-gutter: 1.25rem; - --pgn-spacing-dropzone-border-base: 1px; - --pgn-spacing-dropzone-padding: 1.5rem; - --pgn-spacing-dropdown-close-container-top: .625rem; - --pgn-spacing-dropdown-padding-y-item: .25rem; - --pgn-spacing-dropdown-padding-y-base: .5rem; - --pgn-spacing-dropdown-padding-x-item: 1rem; - --pgn-spacing-dropdown-padding-x-base: 0rem; - --pgn-spacing-dropdown-spacer: .125rem; - --pgn-spacing-data-table-footer-position: center; - --pgn-spacing-data-table-padding-cell: .5rem .75rem; - --pgn-spacing-data-table-padding-small: .5rem; - --pgn-spacing-data-table-padding-y: .75rem; - --pgn-spacing-data-table-padding-x: .75rem; - --pgn-spacing-collapsible-card-spacer-basic-icon: .625rem; - --pgn-spacing-collapsible-card-spacer-basic-x: .5rem; - --pgn-spacing-collapsible-card-spacer-basic-y: .5rem; - --pgn-spacing-collapsible-card-spacer-icon: 2.5rem; - --pgn-spacing-collapsible-card-spacer-left-body: .75rem; - --pgn-spacing-collapsible-card-spacer-x-base: .5rem; - --pgn-spacing-collapsible-card-spacer-y-base: .5rem; - --pgn-spacing-code-kbd-padding-x: .4rem; - --pgn-spacing-code-kbd-padding-y: .2rem; - --pgn-spacing-chip-carousel-container-padding-y: .313rem; - --pgn-spacing-chip-carousel-container-padding-x: .625rem; - --pgn-spacing-chip-carousel-controls-top-offset: .375rem; - --pgn-spacing-chip-outline-width: 3px; - --pgn-spacing-chip-outline-focus-distance-dark: .313rem; - --pgn-spacing-chip-outline-focus-distance-light: .313rem; - --pgn-spacing-chip-outline-selected-distance-dark: 3px; - --pgn-spacing-chip-outline-selected-distance-light: 3px; - --pgn-spacing-chip-padding-x: .5rem; - --pgn-spacing-chip-padding-y: 1px; - --pgn-spacing-chip-margin-icon: .25rem; - --pgn-spacing-chip-margin-base: .125rem; - --pgn-spacing-carousel-indicator-spacer: 3px; - --pgn-spacing-card-focus-border-offset: 5px; - --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem; - --pgn-spacing-card-logo-bottom-offset-base: 1rem; - --pgn-spacing-card-logo-left-offset-horizontal: .4375rem; - --pgn-spacing-card-logo-left-offset-base: 1.5rem; - --pgn-spacing-card-loading-skeleton-spacer: .313rem; - --pgn-spacing-card-footer-action-gap: .5rem; - --pgn-spacing-card-columns-gap: 1.25rem; - --pgn-spacing-card-columns-count: 3rem; - --pgn-spacing-card-margin-group: 12px; - --pgn-spacing-card-spacer-y: .75rem; - --pgn-spacing-card-spacer-x: 1.25rem; - --pgn-spacing-btn-block-spacing-y: .5rem; - --pgn-spacing-bubble-expandable-padding-x: .25rem; - --pgn-spacing-bubble-expandable-padding-y: 0; - --pgn-spacing-breadcrumb-margin-left: .5rem; - --pgn-spacing-badge-padding-y: .125rem; - --pgn-spacing-badge-padding-x-pill: .6em; - --pgn-spacing-badge-padding-x-base: .5rem; - --pgn-spacing-avatar-button-padding-left-lg: .25em; - --pgn-spacing-avatar-button-padding-left-sm: .25em; - --pgn-spacing-avatar-button-padding-left-base: .25em; - --pgn-spacing-annotation-arrow-side-margin: .25rem; - --pgn-spacing-annotation-padding: .5rem; - --pgn-spacing-alert-icon-space: .8rem; - --pgn-spacing-alert-margin-bottom: 1rem; - --pgn-spacing-alert-padding-x: 1.5rem; - --pgn-spacing-alert-padding-y: 1.5rem; - --pgn-spacing-action-row-gap-y: .5rem; - --pgn-spacing-action-row-gap-x: .5rem; - --pgn-size-breakpoint-xxl: 1400px; - --pgn-size-breakpoint-xl: 1200px; - --pgn-size-breakpoint-lg: 992px; - --pgn-size-breakpoint-md: 768px; - --pgn-size-breakpoint-sm: 576px; - --pgn-size-breakpoint-xs: 0rem; - --pgn-size-input-btn-focus-width: 1px; - --pgn-size-caret-width: .3em; - --pgn-size-tooltip-arrow-width: .8rem; - --pgn-size-tooltip-arrow-height: .4rem; - --pgn-size-tooltip-max-width: 200px; - --pgn-size-toast-border-radius: .25rem; - --pgn-size-toast-border-width: 1px; - --pgn-size-toast-max-width: 400px; - --pgn-size-tabs-notification-width: 1rem; - --pgn-size-tabs-notification-height: 1rem; - --pgn-size-stepper-step-bubble-error-shadow-width: 3px; - --pgn-size-stepper-step-width-min: 0rem; - --pgn-size-stepper-header-height-min: 5.13rem; - --pgn-size-stack-gap: 0rem; - --pgn-size-spinner-sm-border-width: .2em; - --pgn-size-spinner-sm-width: 1rem; - --pgn-size-spinner-base-border-width: .25em; - --pgn-size-spinner-base-width: 2rem; - --pgn-size-search-field-border-radius: 0rem; - --pgn-size-search-field-border-width-focus: .3125rem; - --pgn-size-search-field-border-width-base: .0625rem; - --pgn-size-progress-bar-threshold-circle: .5625rem; - --pgn-size-progress-bar-border-radius: 0rem; - --pgn-size-progress-bar-border-width: 1px; - --pgn-size-progress-bar-height-annotated: .3125rem; - --pgn-size-progress-bar-height-base: 1rem; - --pgn-size-product-tour-checkpoint-width-max: 480px; - --pgn-size-product-tour-checkpoint-width-arrow: 15px; - --pgn-size-product-tour-checkpoint-width-border: 8px; - --pgn-size-popover-arrow-height: .5rem; - --pgn-size-popover-arrow-width: 1rem; - --pgn-size-popover-icon-width: 1rem; - --pgn-size-popover-icon-height: 1rem; - --pgn-size-popover-max-width: 480px; - --pgn-size-pagination-focus-outline: 0rem; - --pgn-size-pagination-toggle-border-sm: .25rem; - --pgn-size-pagination-toggle-border-base: .3125rem; - --pgn-size-pagination-reduced-dropdown-min-width: 6rem; - --pgn-size-pagination-reduced-dropdown-max-height: 60vh; - --pgn-size-pagination-secondary-height-sm: 2.25rem; - --pgn-size-pagination-secondary-height-base: 2.75rem; - --pgn-size-pagination-icon-height: 2.25rem; - --pgn-size-pagination-icon-width: 2.25rem; - --pgn-size-navbar-nav-scroll-max-height: 75vh; - --pgn-size-nav-tabs-border-radius: 0rem; - --pgn-size-nav-tabs-border-width: 2px; - --pgn-size-nav-tabs-link-border-bottom-width: .188rem; - --pgn-size-nav-pills-link-border-width: 1px; - --pgn-size-modal-content-border-width: 0px; - --pgn-size-modal-sm: 400px; - --pgn-size-modal-md: 500px; - --pgn-size-modal-lg: 800px; - --pgn-size-modal-xl: 1140px; - --pgn-size-menu-item-width-xs: 13.438rem; - --pgn-size-menu-item-width-base: 19rem; - --pgn-size-menu-item-height: 3rem; - --pgn-size-menu-base-max-height: 16.813rem; - --pgn-size-menu-base-border-radius: .25em; - --pgn-size-icon-button-diameter-sm: 2.25rem; - --pgn-size-icon-button-diameter-md: 2.75rem; - --pgn-size-icon-lg: 1.75rem; - --pgn-size-icon-md: 1.5rem; - --pgn-size-icon-sm: 1.25rem; - --pgn-size-icon-xs: 1rem; - --pgn-size-icon-inline: .8em; - --pgn-size-form-border-radius-width: .125rem; - --pgn-size-form-border-radius-check-focus: .0625rem; - --pgn-size-form-autosuggest-border-width: .125rem; - --pgn-size-form-autosuggest-spinner-width: 1.25rem; - --pgn-size-form-autosuggest-icon-width: 2.4rem; - --pgn-size-form-grid-gutter-width: 0.625rem; - --pgn-size-form-control-border-radio-indicator-radius: 50%; - --pgn-size-form-control-border-checkbox-indicator-radius: 0rem; - --pgn-size-form-control-icon-width: 2rem; - --pgn-size-form-control-range-thumb-border-radius: 1rem; - --pgn-size-form-control-range-thumb-border-base: 0rem; - --pgn-size-form-control-range-thumb-width: 1rem; - --pgn-size-form-control-range-track-border-radius: 1rem; - --pgn-size-form-control-range-track-height: .5rem; - --pgn-size-form-control-range-track-width: 100%; - --pgn-size-form-control-indicator-border-width: 0.125rem; - --pgn-size-form-control-indicator-bg: 100%; - --pgn-size-form-control-indicator-base: 1.25rem; - --pgn-size-form-input-width-focus: 0.063rem; - --pgn-size-form-input-width-hover: 0.063rem; - --pgn-size-dropdown-min-width: 18rem; - --pgn-size-data-table-layout-sidebar-width: 12rem; - --pgn-size-data-table-dropdown-pagination-min-width: 6rem; - --pgn-size-data-table-dropdown-pagination-max-height: 60vh; - --pgn-size-data-table-border: 2px; - --pgn-size-container-max-width-xl: 1440px; - --pgn-size-container-max-width-lg: 1192px; - --pgn-size-container-max-width-md: 952px; - --pgn-size-container-max-width-sm: 708px; - --pgn-size-container-max-width-xs: 464px; - --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px); - --pgn-size-color-picker-sm: 2rem; - --pgn-size-code-pre-scrollable-max-height: 340px; - --pgn-size-chip-icon: 1.5rem; - --pgn-size-chip-border-radius: .375rem; - --pgn-size-carousel-caption-width: 70%; - --pgn-size-carousel-indicator-height-area-hit: 10px; - --pgn-size-carousel-indicator-height-base: 3px; - --pgn-size-carousel-indicator-width: 30px; - --pgn-size-carousel-control-width-icon: 20px; - --pgn-size-carousel-control-width-base: 15%; - --pgn-size-card-logo-height: 4.125rem; - --pgn-size-card-logo-width: 7.25rem; - --pgn-size-card-image-vertical-max-height: 140px; - --pgn-size-card-image-horizontal-width-max: 240px; - --pgn-size-card-focus-border-width: 2px; - --pgn-size-card-border-radius-logo: .25rem; - --pgn-size-btn-focus-width: 2px; - --pgn-size-breadcrumb-border-width-focus: .0625rem; - --pgn-size-breadcrumb-border-axis-y-focus: .5rem; - --pgn-size-breadcrumb-border-axis-x-focus: .25rem; - --pgn-size-breadcrumb-border-radius-focus: .125rem; - --pgn-size-badge-border-radius-pill: 10rem; - --pgn-size-badge-border-radius-base: .25rem; - --pgn-size-avatar-border-radius: 100%; - --pgn-size-avatar-border-base: 1px; - --pgn-size-avatar-huge: 18.75rem; - --pgn-size-avatar-xxl: 11.5rem; - --pgn-size-avatar-xl: 6rem; - --pgn-size-avatar-lg: 4rem; - --pgn-size-avatar-sm: 2.25rem; - --pgn-size-avatar-xs: 1.5rem; - --pgn-size-avatar-base: 3rem; - --pgn-size-annotation-border-radius: .25rem; - --pgn-size-annotation-max-width: 18.75rem; - --pgn-size-annotation-arrow-border-width: .5rem; - --pgn-size-alert-border-width: 0rem; - --pgn-size-rounded-pill: 50rem; - --pgn-size-border-radius-sm: .25rem; - --pgn-size-border-radius-lg: .425rem; - --pgn-size-border-radius-base: .375rem; - --pgn-size-border-width: 1px; +:root { --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text); --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base); --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500); @@ -760,6 +108,7 @@ --pgn-color-action-default-gray-300: #949494FF; --pgn-color-action-default-gray-200: #B3B3B3FF; --pgn-color-action-default-gray-100: #D2D2D2FF; + --pgn-color-dark-base: #273F2FFF; --pgn-color-dark-900: #1B2C21FF; --pgn-color-dark-800: #1D2F23FF; --pgn-color-dark-700: #1F3226FF; @@ -769,6 +118,7 @@ --pgn-color-dark-300: #939F97FF; --pgn-color-dark-200: #C9CFCBFF; --pgn-color-dark-100: #F2F3F3FF; + --pgn-color-light-base: #E1DDDBFF; --pgn-color-light-900: #9E9B99FF; --pgn-color-light-800: #A9A6A4FF; --pgn-color-light-700: #B4B1AFFF; @@ -818,6 +168,7 @@ --pgn-color-success-300: #8BC1A9FF; --pgn-color-success-200: #C5E0D4FF; --pgn-color-success-100: #F1F8F5FF; + --pgn-color-brand-base: #9D0054FF; --pgn-color-brand-900: #6E003BFF; --pgn-color-brand-800: #76003FFF; --pgn-color-brand-700: #7E0043FF; @@ -837,6 +188,7 @@ --pgn-color-secondary-300: #A2A2A2FF; --pgn-color-secondary-200: #D1D1D1FF; --pgn-color-secondary-100: #F4F4F4FF; + --pgn-color-primary-base: #0A3055FF; --pgn-color-primary-900: #07223CFF; --pgn-color-primary-800: #082440FF; --pgn-color-primary-700: #082644FF; @@ -846,9 +198,28 @@ --pgn-color-primary-300: #8598AAFF; --pgn-color-primary-200: #C2CBD5FF; --pgn-color-primary-100: #F0F3F5FF; + --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-500: var(--pgn-color-gray-base); + --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-yiq-light: var(--pgn-color-white); --pgn-color-blockquote-small: var(--pgn-color-gray-500); + --pgn-color-mark-bg: #FFF243FF; --pgn-color-text-muted: var(--pgn-color-gray-500); --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200); --pgn-color-list-group-action-active-base: var(--pgn-color-body-base); @@ -862,6 +233,7 @@ --pgn-color-list-group-border: #00000020; --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100); --pgn-color-list-group-bg-base: var(--pgn-color-white); + --pgn-color-list-group-base: inherit; --pgn-color-link-brand-inline-hover-decoration: var(--pgn-color-link-brand-inline-hover-base); --pgn-color-link-brand-inline-hover-base: #51002BFF; --pgn-color-link-brand-inline-decoration: #9D00544D; @@ -895,8 +267,10 @@ --pgn-color-toast-header-text: var(--pgn-color-white); --pgn-color-toast-border: #0000001A; --pgn-color-toast-bg: var(--pgn-color-gray-700); + --pgn-color-toast-base: inherit; --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300); + --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000; --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus: var(--pgn-color-white); --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus); @@ -910,10 +284,12 @@ --pgn-color-tab-more-link-dropdown-toggle-btn-text-focus: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus); --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error); --pgn-color-stepper-header-step-bubble-error: var(--pgn-color-danger-base); + --pgn-color-stepper-header-step-border: none; --pgn-color-stepper-header-step-bg-active: var(--pgn-color-gray-500); --pgn-color-stepper-header-step-bg-base: var(--pgn-color-stepper-header-bg-base); --pgn-color-stepper-header-step-base: var(--pgn-color-primary-base); --pgn-color-stepper-header-bg-line: var(--pgn-color-light-base); + --pgn-color-stepper-header-bg-base: #00000000; --pgn-color-sheet-skrim-component-box-shadow: #00000026; --pgn-color-sheet-skrim-bg: #ADADAD80; --pgn-color-search-field-form-bg: var(--pgn-color-white); @@ -926,6 +302,8 @@ --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a); --pgn-color-progress-bar-bar-base: var(--pgn-color-white); --pgn-color-progress-bar-border: var(--pgn-color-gray-500); + --pgn-color-progress-bar-bg: #00000000; + --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg); --pgn-color-product-tour-checkpoint-box-shadow: #0000004D; --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base); @@ -945,6 +323,7 @@ --pgn-color-popover-header-bg-dark: #808080FF; --pgn-color-popover-header-bg: var(--pgn-color-white); --pgn-color-popover-header-text: var(--pgn-color-headings-base); + --pgn-color-popover-border: #00000033; --pgn-color-popover-bg: var(--pgn-color-bg-base); --pgn-color-pagination-dropdown-text-inverse: var(--pgn-color-white); --pgn-color-pagination-focus-text: var(--pgn-color-black); @@ -972,6 +351,7 @@ --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a); --pgn-color-page-banner-bg-light: var(--pgn-color-light-400); --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500); + --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066; --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active); --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active); --pgn-color-navbar-light-toggler-border: #0000001A; @@ -1011,6 +391,7 @@ --pgn-color-nav-pills-base-link-active-text: var(--pgn-color-active); --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover); --pgn-color-nav-tabs-inverse-link-tab-content-color: var(--pgn-color-nav-tabs-inverse-link-text-base); + --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000; --pgn-color-nav-tabs-inverse-link-bg-focus: var(--pgn-color-nav-tabs-inverse-link-text-base); --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover); --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom); @@ -1018,11 +399,14 @@ --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300); --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white); --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border); + --pgn-color-nav-tabs-base-link-active-bg: #00000000; --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500); --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400); --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover); --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400); + --pgn-color-nav-tabs-base-bg-hover: #00000000; --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover); + --pgn-color-nav-link-border: #00000000; --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300); --pgn-color-nav-link-text-base: var(--pgn-color-gray-700); --pgn-color-modal-backdrop-bg: var(--pgn-color-black); @@ -1034,6 +418,7 @@ --pgn-color-menu-item-hover-bg: var(--pgn-color-btn-hover-bg-tertiary); --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary); --pgn-color-menu-item-border: var(--pgn-color-menu-item-bg); + --pgn-color-menu-item-bg: #00000000; --pgn-color-menu-item-color: var(--pgn-color-body-base); --pgn-color-menu-bg: var(--pgn-color-white); --pgn-color-image-thumbnail-border: var(--pgn-color-gray-200); @@ -1257,6 +642,7 @@ --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base); --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-bg-base); --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-base: #00000000; --pgn-color-form-feedback-checked-invalid: #D64D59FF; --pgn-color-form-feedback-checked-valid: #1FAD6FFF; --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #C32D3A40; @@ -1293,6 +679,7 @@ --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base); --pgn-color-form-control-label-floating-text: #FFFFFF1A; --pgn-color-form-control-label-disabled: var(--pgn-color-disabled); + --pgn-color-form-control-label-base: inherit; --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg); --pgn-color-form-control-indicator-active-bg: var(--pgn-color-bg-active); --pgn-color-form-control-indicator-active-base: var(--pgn-color-active); @@ -1338,6 +725,7 @@ --pgn-color-code-pre: var(--pgn-color-gray-900); --pgn-color-code-kbd-bg: var(--pgn-color-gray-700); --pgn-color-code-kbd-base: var(--pgn-color-white); + --pgn-color-code-base: #E83E8CFF; --pgn-color-close-button: var(--pgn-color-black); --pgn-color-chip-outline-light: var(--pgn-color-chip-label-base); --pgn-color-chip-outline-dark: var(--pgn-color-white); @@ -1360,47 +748,83 @@ --pgn-color-card-bg-muted: var(--pgn-color-light-200); --pgn-color-card-bg-dark: var(--pgn-color-primary-500); --pgn-color-card-bg-base: var(--pgn-color-bg-base); + --pgn-color-card-base: inherit; --pgn-color-btn-disabled-link: var(--pgn-color-disabled); --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning); + --pgn-color-btn-disabled-border-inverse-warning: #00000000; --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning); --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning); --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary); --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary); + --pgn-color-btn-disabled-border-inverse-outline-success: inherit; + --pgn-color-btn-disabled-border-inverse-success: #00000000; --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success); --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success); --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary); --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary); --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base); + --pgn-color-btn-disabled-border-secondary: inherit; --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); + --pgn-color-btn-disabled-border-inverse-primary: #00000000; --pgn-color-btn-disabled-border-primary: var(--pgn-color-btn-border-primary); --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light); + --pgn-color-btn-disabled-border-inverse-light: #00000000; --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light); --pgn-color-btn-disabled-border-light: var(--pgn-color-btn-border-light); --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info); + --pgn-color-btn-disabled-border-inverse-info: #00000000; --pgn-color-btn-disabled-border-outline-info: var(--pgn-color-btn-border-outline-info); --pgn-color-btn-disabled-border-info: var(--pgn-color-btn-bg-info); --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark); + --pgn-color-btn-disabled-border-inverse-dark: #00000000; --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark); --pgn-color-btn-disabled-border-dark: var(--pgn-color-btn-border-dark); --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger); + --pgn-color-btn-disabled-border-inverse-danger: #00000000; --pgn-color-btn-disabled-border-outline-danger: var(--pgn-color-btn-border-outline-danger); --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger); --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand); --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand); --pgn-color-btn-disabled-border-brand: var(--pgn-color-btn-border-brand); + --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-warning: var(--pgn-color-btn-bg-warning); + --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-success: var(--pgn-color-btn-bg-success); + --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-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit; + --pgn-color-btn-disabled-bg-outline-primary: inherit; --pgn-color-btn-disabled-bg-inverse-primary: var(--pgn-color-white); --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary); + --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-light: var(--pgn-color-btn-bg-light); + --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-info: var(--pgn-color-btn-bg-info); + --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-dark: var(--pgn-color-btn-bg-dark); + --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-danger: var(--pgn-color-btn-bg-danger); --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand); --pgn-color-btn-disabled-bg-inverse-brand: var(--pgn-color-white); + --pgn-color-btn-disabled-bg-outline-brand: inherit; --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand); --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning); --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base); @@ -1413,6 +837,8 @@ --pgn-color-btn-disabled-text-outline-success: var(--pgn-color-btn-text-outline-success); --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success); --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary); + --pgn-color-btn-disabled-text-inverse-secondary: inherit; + --pgn-color-btn-disabled-text-outline-secondary: inherit; --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary); --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); @@ -1428,6 +854,7 @@ --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info); --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark); --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark); + --pgn-color-btn-disabled-text-outline-dark: inherit; --pgn-color-btn-disabled-text-dark: var(--pgn-color-btn-text-dark); --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger); --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base); @@ -1437,6 +864,7 @@ --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand); --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500); --pgn-color-btn-disabled-text-brand: var(--pgn-color-btn-text-brand); + --pgn-color-btn-focus-outline-inverse-outline-warning: inherit; --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white); --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning); --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning); @@ -1474,28 +902,49 @@ --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand); --pgn-color-btn-focus-outline-outline-brand: var(--pgn-color-theme-focus-brand); --pgn-color-btn-focus-outline-brand: var(--pgn-color-theme-focus-brand); + --pgn-color-btn-focus-bg-inverse-outline-warning: inherit; --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning); + --pgn-color-btn-focus-bg-outline-warning: inherit; --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning); + --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-inverse-success: var(--pgn-color-btn-bg-inverse-success); + --pgn-color-btn-focus-bg-outline-success: inherit; --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success); + --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit; --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary); + --pgn-color-btn-focus-bg-outline-secondary: #00000000; --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-focus-bg-inverse-outline-primary: inherit; --pgn-color-btn-focus-bg-inverse-primary: var(--pgn-color-btn-bg-inverse-primary); + --pgn-color-btn-focus-bg-outline-primary: inherit; --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary); + --pgn-color-btn-focus-bg-inverse-outline-light: inherit; --pgn-color-btn-focus-bg-inverse-light: var(--pgn-color-btn-bg-inverse-light); + --pgn-color-btn-focus-bg-outline-light: #00000000; --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light); + --pgn-color-btn-focus-bg-inverse-outline-info: inherit; --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info); + --pgn-color-btn-focus-bg-outline-info: inherit; --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-focus-bg-inverse-outline-dark: inherit; --pgn-color-btn-focus-bg-inverse-dark: var(--pgn-color-btn-bg-inverse-dark); + --pgn-color-btn-focus-bg-outline-dark: inherit; --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark); + --pgn-color-btn-focus-bg-inverse-outline-danger: inherit; --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger); + --pgn-color-btn-focus-bg-outline-danger: inherit; --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger); + --pgn-color-btn-focus-bg-inverse-outline-brand: inherit; + --pgn-color-btn-focus-bg-outline-brand: inherit; --pgn-color-btn-focus-bg-inverse-brand: var(--pgn-color-btn-bg-inverse-brand); --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand); --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning); --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning); --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-btn-border-outline-warning); --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning); + --pgn-color-btn-focus-border-inverse-tertiary: #00000000; --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary); --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success); --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white); @@ -1541,6 +990,7 @@ --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success); --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary); --pgn-color-btn-focus-text-outline-secondary: var(--pgn-color-btn-text-outline-secondary); + --pgn-color-btn-focus-text-inverse-secondary: inherit; --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary); --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary); @@ -1555,6 +1005,7 @@ --pgn-color-btn-focus-text-outline-info: var(--pgn-color-btn-text-outline-info); --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info); --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark); + --pgn-color-btn-focus-text-outline-dark: inherit; --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark); --pgn-color-btn-focus-text-dark: var(--pgn-color-btn-text-dark); --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger); @@ -1565,22 +1016,42 @@ --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand); --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand); --pgn-color-btn-focus-text-brand: var(--pgn-color-btn-text-brand); + --pgn-color-btn-active-border-inverse-outline-warning: #00000000; --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning); + --pgn-color-btn-active-border-inverse-warning: inherit; --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning); + --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-outline-success: var(--pgn-color-theme-active-success); --pgn-color-btn-active-border-success: var(--pgn-color-theme-active-success); + --pgn-color-btn-active-border-inverse-secondary: #00000000; + --pgn-color-btn-active-border-inverse-outline-secondary: #00000000; --pgn-color-btn-active-border-outline-secondary: var(--pgn-color-theme-active-secondary); --pgn-color-btn-active-border-secondary: var(--pgn-color-theme-active-secondary); + --pgn-color-btn-active-border-inverse-primary: #00000000; + --pgn-color-btn-active-border-inverse-outline-primary: #00000000; --pgn-color-btn-active-border-outline-primary: var(--pgn-color-theme-active-primary); --pgn-color-btn-active-border-primary: var(--pgn-color-theme-active-primary); + --pgn-color-btn-active-border-inverse-outline-light: #00000000; + --pgn-color-btn-active-border-inverse-light: inherit; --pgn-color-btn-active-border-outline-light: var(--pgn-color-theme-active-light); --pgn-color-btn-active-border-light: var(--pgn-color-theme-active-light); + --pgn-color-btn-active-border-inverse-outline-info: #00000000; + --pgn-color-btn-active-border-inverse-info: #00000000; --pgn-color-btn-active-border-outline-info: var(--pgn-color-theme-active-info); --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info); + --pgn-color-btn-active-border-inverse-outline-dark: #00000000; + --pgn-color-btn-active-border-inverse-dark: #00000000; --pgn-color-btn-active-border-outline-dark: var(--pgn-color-theme-active-dark); --pgn-color-btn-active-border-dark: var(--pgn-color-theme-active-dark); + --pgn-color-btn-active-border-inverse-outline-danger: #00000000; + --pgn-color-btn-active-border-inverse-danger: #00000000; --pgn-color-btn-active-border-outline-danger: var(--pgn-color-theme-active-danger); --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger); + --pgn-color-btn-active-border-inverse-outline-brand: #00000000; + --pgn-color-btn-active-border-inverse-brand: #00000000; --pgn-color-btn-active-border-outline-brand: var(--pgn-color-theme-active-brand); --pgn-color-btn-active-border-brand: var(--pgn-color-theme-active-brand); --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-bg-warning); @@ -1659,22 +1130,42 @@ --pgn-color-btn-active-text-inverse-brand: #6A0039FF; --pgn-color-btn-active-text-outline-brand: #454545FF; --pgn-color-btn-active-text-brand: #FFFFFFFF; + --pgn-color-btn-hover-border-inverse-outline-warning: #00000000; + --pgn-color-btn-hover-border-inverse-warning: #00000000; --pgn-color-btn-hover-border-outline-warning: var(--pgn-color-warning-900); --pgn-color-btn-hover-border-warning: var(--pgn-color-theme-hover-warning); + --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-outline-success: var(--pgn-color-success-900); --pgn-color-btn-hover-border-success: var(--pgn-color-theme-hover-success); + --pgn-color-btn-hover-border-inverse-secondary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000; --pgn-color-btn-hover-border-outline-secondary: var(--pgn-color-secondary-900); --pgn-color-btn-hover-border-secondary: var(--pgn-color-theme-hover-secondary); + --pgn-color-btn-hover-border-inverse-primary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-primary: #00000000; --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-primary-900); --pgn-color-btn-hover-border-primary: var(--pgn-color-theme-hover-primary); + --pgn-color-btn-hover-border-inverse-outline-light: #00000000; + --pgn-color-btn-hover-border-inverse-light: #00000000; --pgn-color-btn-hover-border-outline-light: var(--pgn-color-light-900); --pgn-color-btn-hover-border-light: var(--pgn-color-theme-hover-light); + --pgn-color-btn-hover-border-inverse-outline-info: #00000000; + --pgn-color-btn-hover-border-inverse-info: #00000000; --pgn-color-btn-hover-border-outline-info: var(--pgn-color-info-900); --pgn-color-btn-hover-border-info: var(--pgn-color-theme-hover-info); + --pgn-color-btn-hover-border-inverse-outline-dark: #00000000; + --pgn-color-btn-hover-border-inverse-dark: #00000000; --pgn-color-btn-hover-border-outline-dark: var(--pgn-color-dark-900); --pgn-color-btn-hover-border-dark: var(--pgn-color-theme-hover-dark); + --pgn-color-btn-hover-border-inverse-outline-danger: #00000000; + --pgn-color-btn-hover-border-inverse-danger: #00000000; --pgn-color-btn-hover-border-outline-danger: var(--pgn-color-danger-900); --pgn-color-btn-hover-border-danger: var(--pgn-color-theme-hover-danger); + --pgn-color-btn-hover-border-inverse-brand: #00000000; + --pgn-color-btn-hover-border-inverse-outline-brand: #00000000; --pgn-color-btn-hover-border-outline-brand: var(--pgn-color-brand-900); --pgn-color-btn-hover-border-brand: var(--pgn-color-theme-hover-brand); --pgn-color-btn-hover-bg-inverse-outline-warning: var(--pgn-color-warning-100); @@ -1754,49 +1245,80 @@ --pgn-color-btn-hover-text-outline-brand: var(--pgn-color-theme-hover-brand); --pgn-color-btn-hover-text-brand: #FFFFFFFF; --pgn-color-btn-border-inverse-outline-warning: var(--pgn-color-white); + --pgn-color-btn-border-inverse-warning: #00000000; --pgn-color-btn-border-outline-warning: var(--pgn-color-warning-base); --pgn-color-btn-border-warning: var(--pgn-color-btn-bg-warning); + --pgn-color-btn-border-inverse-tertiary: #00000000; + --pgn-color-btn-border-tertiary: #00000000; --pgn-color-btn-border-inverse-outline-success: var(--pgn-color-white); + --pgn-color-btn-border-inverse-success: #00000000; --pgn-color-btn-border-outline-success: var(--pgn-color-success-base); --pgn-color-btn-border-success: var(--pgn-color-btn-bg-success); + --pgn-color-btn-border-inverse-secondary: #00000000; --pgn-color-btn-border-inverse-outline-secondary: var(--pgn-color-white); --pgn-color-btn-border-outline-secondary: var(--pgn-color-secondary-base); --pgn-color-btn-border-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-border-inverse-primary: #00000000; --pgn-color-btn-border-inverse-outline-primary: var(--pgn-color-white); --pgn-color-btn-border-outline-primary: var(--pgn-color-primary-base); --pgn-color-btn-border-primary: var(--pgn-color-btn-bg-primary); --pgn-color-btn-border-inverse-outline-light: var(--pgn-color-white); + --pgn-color-btn-border-inverse-light: #00000000; --pgn-color-btn-border-outline-light: var(--pgn-color-light-base); --pgn-color-btn-border-light: var(--pgn-color-btn-bg-light); --pgn-color-btn-border-inverse-outline-info: var(--pgn-color-white); + --pgn-color-btn-border-inverse-info: #00000000; --pgn-color-btn-border-outline-info: var(--pgn-color-info-base); --pgn-color-btn-border-info: var(--pgn-color-btn-bg-info); --pgn-color-btn-border-inverse-outline-dark: var(--pgn-color-white); + --pgn-color-btn-border-inverse-dark: #00000000; --pgn-color-btn-border-outline-dark: var(--pgn-color-dark-base); --pgn-color-btn-border-dark: var(--pgn-color-btn-bg-dark); --pgn-color-btn-border-inverse-outline-danger: var(--pgn-color-white); + --pgn-color-btn-border-inverse-danger: #00000000; --pgn-color-btn-border-outline-danger: var(--pgn-color-danger-base); --pgn-color-btn-border-danger: var(--pgn-color-btn-bg-danger); + --pgn-color-btn-border-inverse-brand: #00000000; --pgn-color-btn-border-inverse-outline-brand: var(--pgn-color-white); --pgn-color-btn-border-outline-brand: var(--pgn-color-brand-base); --pgn-color-btn-border-brand: var(--pgn-color-btn-bg-brand); + --pgn-color-btn-bg-inverse-outline-warning: inherit; --pgn-color-btn-bg-inverse-warning: #454545FF; + --pgn-color-btn-bg-outline-warning: inherit; --pgn-color-btn-bg-warning: var(--pgn-color-warning-base); + --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-inverse-success: #FFFFFFFF; + --pgn-color-btn-bg-outline-success: inherit; --pgn-color-btn-bg-success: var(--pgn-color-success-base); --pgn-color-btn-bg-inverse-secondary: #FFFFFFFF; + --pgn-color-btn-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-bg-outline-secondary: inherit; --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-base); --pgn-color-btn-bg-inverse-primary: #FFFFFFFF; + --pgn-color-btn-bg-inverse-outline-primary: #00000000; + --pgn-color-btn-bg-outline-primary: #00000000; --pgn-color-btn-bg-primary: var(--pgn-color-primary-base); + --pgn-color-btn-bg-inverse-outline-light: inherit; + --pgn-color-btn-bg-outline-light: inherit; --pgn-color-btn-bg-inverse-light: #454545FF; --pgn-color-btn-bg-light: var(--pgn-color-light-base); + --pgn-color-btn-bg-inverse-outline-info: inherit; --pgn-color-btn-bg-inverse-info: #FFFFFFFF; + --pgn-color-btn-bg-outline-info: inherit; --pgn-color-btn-bg-info: var(--pgn-color-info-base); + --pgn-color-btn-bg-inverse-outline-dark: #00000000; --pgn-color-btn-bg-inverse-dark: #FFFFFFFF; + --pgn-color-btn-bg-outline-dark: inherit; --pgn-color-btn-bg-dark: var(--pgn-color-dark-base); + --pgn-color-btn-bg-inverse-outline-danger: #00000000; --pgn-color-btn-bg-inverse-danger: #FFFFFFFF; + --pgn-color-btn-bg-outline-danger: inherit; --pgn-color-btn-bg-danger: var(--pgn-color-danger-base); + --pgn-color-btn-bg-inverse-outline-brand: #00000000; --pgn-color-btn-bg-inverse-brand: #FFFFFFFF; + --pgn-color-btn-bg-outline-brand: inherit; --pgn-color-btn-bg-brand: var(--pgn-color-brand-base); --pgn-color-btn-text-inverse-outline-warning: var(--pgn-color-white); --pgn-color-btn-text-inverse-warning: var(--pgn-color-warning-base); @@ -1985,6 +1507,11 @@ --pgn-color-text-50-black: #00000080; --pgn-color-bg-active: var(--pgn-color-primary-500); --pgn-color-bg-base: var(--pgn-color-white); + --pgn-theme-interval: 8%; + --pgn-other-link-emphasized-hover-darken-percentage: 15%; + --pgn-other-tooltip-opacity: 1; + --pgn-other-search-field-disabled-opacity: .3; + --pgn-other-modal-opacity: .5; --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); @@ -1998,65 +1525,246 @@ --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,"); --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,"); --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,"); + --pgn-other-chip-opacity-disabled: .3; + --pgn-other-carousel-control-opacity-hover: .9; + --pgn-other-carousel-control-opacity-base: .5; + --pgn-other-btn-disabled-opacity: .65; + --pgn-other-form-feedback-tooltip-opacity: .9; + --pgn-other-form-control-custom-file-content: Browse; + --pgn-other-form-control-custom-file-lang: en; + --pgn-other-form-control-range-track-cursor: pointer; + --pgn-other-form-control-cursor: auto; + --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); + --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); + --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); + --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); + --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); + --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-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); + --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-scrollable-body-box-shadow: #0000008C; + --pgn-elevation-progress-bar-box-shadow: none; --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow); --pgn-elevation-menu-box-shadow: var(--pgn-elevation-box-shadow-base); + --pgn-elevation-image-thumbnail-box-shadow: none; + --pgn-elevation-icon-button-box-shadow-black-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-black-active: none; --pgn-elevation-icon-button-box-shadow-black-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-black-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-black-base); + --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-dark-active: none; --pgn-elevation-icon-button-box-shadow-dark-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-dark-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-dark-base); + --pgn-elevation-icon-button-box-shadow-light-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-light-active: none; --pgn-elevation-icon-button-box-shadow-light-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-light-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-light-base); + --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-danger-active: none; --pgn-elevation-icon-button-box-shadow-danger-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-danger-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-danger-base); + --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-warning-active: none; --pgn-elevation-icon-button-box-shadow-warning-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-warning-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-warning-base); + --pgn-elevation-icon-button-box-shadow-success-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-success-active: none; --pgn-elevation-icon-button-box-shadow-success-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-success-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-success-base); + --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-brand-active: none; --pgn-elevation-icon-button-box-shadow-brand-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-brand-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-brand-base); + --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-secondary-active: none; --pgn-elevation-icon-button-box-shadow-secondary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-secondary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-secondary-base); + --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-primary-active: none; --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-bg-base); --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); + --pgn-elevation-form-control-select-border-base: none; --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus); --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus); + --pgn-elevation-form-control-range-thumb-base: none; + --pgn-elevation-form-control-range-track: none; + --pgn-elevation-form-control-checkbox-indicator-indeterminate: none; + --pgn-elevation-form-control-indicator-active: none; + --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1); + --pgn-elevation-form-control-indicator-checked-base: none; --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base); --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500); + --pgn-elevation-form-input-base: none; --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300); --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500); --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300); --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300); --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm); + --pgn-elevation-code-kbd-box-shadow: none; --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); + --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-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-product-tour-checkpoint-zindex: 1060; + --pgn-elevation-popover-box-shadow: none; + --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: none; + --pgn-elevation-dropdown-zindex: 1000; + --pgn-transition-collapse-width: width .35s ease; + --pgn-transition-collapse-height: 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-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; + --pgn-transition-btn: none; + --pgn-transition-badge: none; + --pgn-typography-line-height-micro: .938rem; + --pgn-typography-line-height-sm: 1.5rem; + --pgn-typography-line-height-lg: 1.5rem; + --pgn-typography-line-height-base: 1.5556rem; + --pgn-typography-font-weight-table-th: normal; + --pgn-typography-font-weight-lead: inherit; --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); + --pgn-typography-font-weight-bolder: bolder; + --pgn-typography-font-weight-bold: 700; + --pgn-typography-font-weight-semi-bold: 500; + --pgn-typography-font-weight-normal: 400; + --pgn-typography-font-weight-light: 300; + --pgn-typography-font-weight-lighter: lighter; + --pgn-typography-font-size-micro: .688rem; --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-size-mobile-h1: 2.25rem; + --pgn-typography-font-size-h6: .75rem; + --pgn-typography-font-size-h5: .875rem; + --pgn-typography-font-size-h4: 1.125rem; + --pgn-typography-font-size-h3: 1.375rem; + --pgn-typography-font-size-h2: 2rem; + --pgn-typography-font-size-h1: 2.5rem; + --pgn-typography-font-size-small-x: 75%; + --pgn-typography-font-size-small-base: 87.5%; + --pgn-typography-font-size-xs: .75rem; + --pgn-typography-font-size-sm: .875rem; + --pgn-typography-font-size-lg: 1.4063rem; + --pgn-typography-font-size-base: 1.125rem; + --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; + --pgn-typography-font-family-serif: serif; + --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); + --pgn-typography-print-page-size: a3; --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-display-mobile: 3.25rem; + --pgn-typography-display-line-height-mobile: 3.5rem; + --pgn-typography-display-line-height-base: 1rem; + --pgn-typography-display-4: 7.5rem; + --pgn-typography-display-3: 5.625rem; + --pgn-typography-display-2: 4.875rem; + --pgn-typography-display-1: 3.75rem; --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-link-decoration-brand-inline-hover: underline; + --pgn-typography-link-decoration-brand-inline-base: underline; + --pgn-typography-link-decoration-brand-hover: underline; + --pgn-typography-link-decoration-brand-base: none; + --pgn-typography-link-decoration-muted-inline-hover: underline; + --pgn-typography-link-decoration-muted-inline-base: underline; + --pgn-typography-link-decoration-muted-hover: underline; + --pgn-typography-link-decoration-muted-base: none; + --pgn-typography-link-decoration-inline-hover: underline; + --pgn-typography-link-decoration-inline-base: underline; + --pgn-typography-link-decoration-hover: underline; + --pgn-typography-link-decoration-base: none; --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); + --pgn-typography-input-btn-line-height-sm: 1.4286rem; + --pgn-typography-input-btn-line-height-base: 1.3333rem; + --pgn-typography-input-btn-font-size-lg: 1.325rem; + --pgn-typography-input-btn-font-size-sm: .875rem; + --pgn-typography-input-btn-font-size-base: 1.125rem; + --pgn-typography-input-btn-font-family: inherit; + --pgn-typography-headings-line-height: 1.25rem; --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-headings-font-family: inherit; --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-toast-font-size: .875rem; --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs); + --pgn-typography-spacer-line-height: 1px; --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-pagination-line-height: 1.5rem; + --pgn-typography-pagination-font-size-sm: .875rem; --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-nav-link-text-decoration: none; + --pgn-typography-nav-link-font-weight: 500; + --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem; + --pgn-typography-menu-select-btn-link-text-decoration-line: underline; + --pgn-typography-image-figure-caption-font-size: 90%; --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); @@ -2078,9 +1786,11 @@ --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-item-text-decoration: none; --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-code-font-size: 87.5%; --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); @@ -2093,105 +1803,338 @@ --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-badge-font-size: 75%; --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-line-height: 1.5rem; + --pgn-typography-alert-font-size: .875rem; --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); + --pgn-spacing-grid-gutter-width: 24px; + --pgn-spacing-table-cell-padding-sm: .3rem; + --pgn-spacing-table-cell-padding-base: .75rem; + --pgn-spacing-label-margin-bottom: .5rem; --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); + --pgn-spacing-spacer-base: 1rem; --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); + --pgn-spacing-spacer-0: 0rem; + --pgn-spacing-mark-padding: .2em; + --pgn-spacing-paragraph-margin-bottom: 1rem; + --pgn-spacing-list-group-item-padding-x: 1.25rem; + --pgn-spacing-list-group-item-padding-y: .75rem; + --pgn-spacing-list-inline-padding: .5rem; + --pgn-spacing-input-btn-padding-lg-x: 1.25rem; + --pgn-spacing-input-btn-padding-lg-y: .6875rem; + --pgn-spacing-input-btn-padding-sm-x: .75rem; + --pgn-spacing-input-btn-padding-sm-y: .4375rem; + --pgn-spacing-input-btn-padding-x: 1rem; + --pgn-spacing-input-btn-padding-y: .5625rem; + --pgn-spacing-headings-margin-bottom: .5rem; + --pgn-spacing-caret-vertical-align: .255em; + --pgn-spacing-caret-base: .255em; + --pgn-spacing-tooltip-margin: 0rem; + --pgn-spacing-tooltip-padding-x: .5rem; + --pgn-spacing-tooltip-padding-y: .5rem; + --pgn-spacing-toast-container-gutter-sm: .625rem; + --pgn-spacing-toast-container-gutter-lg: 1.25rem; + --pgn-spacing-toast-padding-y: .25rem; + --pgn-spacing-toast-padding-x: .75rem; + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem; --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); + --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); + --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; + --pgn-spacing-sticky-offset: 0rem; + --pgn-spacing-stepper-header-step-list-margin: 0rem; + --pgn-spacing-stepper-header-step-list-padding-x: 0rem; + --pgn-spacing-stepper-header-step-list-padding-y: .25rem; + --pgn-spacing-stepper-header-step-padding: .25rem; --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); + --pgn-spacing-stepper-header-padding-y: .75rem; + --pgn-spacing-vertical-align: .125em; + --pgn-spacing-selectable-box-box-space: .75rem; + --pgn-spacing-selectable-box-border-radius: .25rem; + --pgn-spacing-selectable-box-padding: 1rem; + --pgn-spacing-search-field-margin-button: .5rem; + --pgn-spacing-progress-bar-hint-annotation-gap: .5rem; + --pgn-spacing-popover-icon-margin-right: .5rem; --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-popover-header-padding-x: 1rem; + --pgn-spacing-popover-header-padding-y: .5rem; + --pgn-spacing-pagination-padding-x-lg: 1.5rem; + --pgn-spacing-pagination-padding-x-sm: .6rem; + --pgn-spacing-pagination-padding-x-base: 1rem; + --pgn-spacing-pagination-padding-y-lg: .75rem; + --pgn-spacing-pagination-padding-y-sm: .8rem; + --pgn-spacing-pagination-padding-y-base: .625rem; + --pgn-spacing-navbar-toggler-padding-x: .75rem; + --pgn-spacing-navbar-toggler-padding-y: .25rem; --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); + --pgn-spacing-navbar-padding-x-nav-link: .5rem; --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-link-distance-to-border: 4px; + --pgn-spacing-nav-link-padding-x: 1rem; + --pgn-spacing-nav-link-padding-y: .5rem; + --pgn-spacing-modal-dialog-margin: 1.5rem; + --pgn-spacing-modal-header-padding-y: 1rem; --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; + --pgn-spacing-modal-footer-padding-y: 1rem; --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; + --pgn-spacing-modal-inner-padding-bottom: .7rem; + --pgn-spacing-modal-inner-padding-base: 1.5rem; --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); + --pgn-spacing-menu-item-icon-margin-left: .25em; --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base); --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base); + --pgn-spacing-image-thumbnail-padding: .25rem; --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-icon-padding: .5625rem; + --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; + --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); --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-spacing-form-control-select-indicator-padding: 1rem; --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-form-control-spacer-x: 1rem; + --pgn-spacing-form-control-gutter: .5rem; + --pgn-spacing-form-group-margin-bottom: 1rem; + --pgn-spacing-form-check-position-axis: .375rem; + --pgn-spacing-form-check-inline-margin-x: .75rem; + --pgn-spacing-form-text-margin-top: .25rem; + --pgn-spacing-form-input-check-margin-y: .3rem; + --pgn-spacing-form-input-check-margin-x-inline: .3125rem; + --pgn-spacing-form-input-check-margin-x-base: .25rem; + --pgn-spacing-form-input-check-gutter: 1.25rem; --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-dropzone-border-base: 1px; + --pgn-spacing-dropzone-padding: 1.5rem; + --pgn-spacing-dropdown-close-container-top: .625rem; --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-dropdown-padding-y-item: .25rem; + --pgn-spacing-dropdown-padding-y-base: .5rem; + --pgn-spacing-dropdown-padding-x-item: 1rem; + --pgn-spacing-dropdown-padding-x-base: 0rem; + --pgn-spacing-dropdown-spacer: .125rem; + --pgn-spacing-data-table-footer-position: center; + --pgn-spacing-data-table-padding-cell: .5rem .75rem; + --pgn-spacing-data-table-padding-small: .5rem; + --pgn-spacing-data-table-padding-y: .75rem; + --pgn-spacing-data-table-padding-x: .75rem; + --pgn-spacing-collapsible-card-spacer-basic-icon: .625rem; + --pgn-spacing-collapsible-card-spacer-basic-x: .5rem; + --pgn-spacing-collapsible-card-spacer-basic-y: .5rem; + --pgn-spacing-collapsible-card-spacer-icon: 2.5rem; + --pgn-spacing-collapsible-card-spacer-left-body: .75rem; --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); + --pgn-spacing-collapsible-card-spacer-x-base: .5rem; --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); + --pgn-spacing-collapsible-card-spacer-y-base: .5rem; + --pgn-spacing-code-kbd-padding-x: .4rem; + --pgn-spacing-code-kbd-padding-y: .2rem; + --pgn-spacing-chip-carousel-container-padding-y: .313rem; + --pgn-spacing-chip-carousel-container-padding-x: .625rem; + --pgn-spacing-chip-carousel-controls-top-offset: .375rem; + --pgn-spacing-chip-outline-width: 3px; + --pgn-spacing-chip-outline-focus-distance-dark: .313rem; + --pgn-spacing-chip-outline-focus-distance-light: .313rem; + --pgn-spacing-chip-outline-selected-distance-dark: 3px; + --pgn-spacing-chip-outline-selected-distance-light: 3px; + --pgn-spacing-chip-padding-x: .5rem; + --pgn-spacing-chip-padding-y: 1px; + --pgn-spacing-chip-margin-icon: .25rem; + --pgn-spacing-chip-margin-base: .125rem; + --pgn-spacing-carousel-indicator-spacer: 3px; + --pgn-spacing-card-focus-border-offset: 5px; + --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem; + --pgn-spacing-card-logo-bottom-offset-base: 1rem; + --pgn-spacing-card-logo-left-offset-horizontal: .4375rem; + --pgn-spacing-card-logo-left-offset-base: 1.5rem; + --pgn-spacing-card-loading-skeleton-spacer: .313rem; + --pgn-spacing-card-footer-action-gap: .5rem; + --pgn-spacing-card-columns-gap: 1.25rem; + --pgn-spacing-card-columns-count: 3rem; --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3); --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3); --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); + --pgn-spacing-card-margin-group: 12px; + --pgn-spacing-card-spacer-y: .75rem; + --pgn-spacing-card-spacer-x: 1.25rem; --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)); --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)); --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width); + --pgn-spacing-btn-block-spacing-y: .5rem; --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-spacing-bubble-expandable-padding-x: .25rem; + --pgn-spacing-bubble-expandable-padding-y: 0rem; + --pgn-spacing-breadcrumb-margin-left: .5rem; + --pgn-spacing-badge-padding-y: .125rem; + --pgn-spacing-badge-padding-x-pill: .6em; + --pgn-spacing-badge-padding-x-base: .5rem; + --pgn-spacing-avatar-button-padding-left-lg: .25em; + --pgn-spacing-avatar-button-padding-left-sm: .25em; + --pgn-spacing-avatar-button-padding-left-base: .25em; + --pgn-spacing-annotation-arrow-side-margin: .25rem; + --pgn-spacing-annotation-padding: .5rem; + --pgn-spacing-alert-icon-space: .8rem; --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); + --pgn-spacing-alert-margin-bottom: 1rem; + --pgn-spacing-alert-padding-x: 1.5rem; + --pgn-spacing-alert-padding-y: 1.5rem; + --pgn-spacing-action-row-gap-y: .5rem; + --pgn-spacing-action-row-gap-x: .5rem; + --pgn-size-breakpoint-xxl: 1400px; + --pgn-size-breakpoint-xl: 1200px; + --pgn-size-breakpoint-lg: 992px; + --pgn-size-breakpoint-md: 768px; + --pgn-size-breakpoint-sm: 576px; + --pgn-size-breakpoint-xs: 0rem; --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-focus-width: 1px; --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-caret-width: .3em; --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-tooltip-arrow-width: .8rem; + --pgn-size-tooltip-arrow-height: .4rem; + --pgn-size-tooltip-max-width: 200px; + --pgn-size-toast-border-radius: .25rem; + --pgn-size-toast-border-width: 1px; + --pgn-size-toast-max-width: 400px; + --pgn-size-tabs-notification-width: 1rem; + --pgn-size-tabs-notification-height: 1rem; + --pgn-size-stepper-step-bubble-error-shadow-width: 3px; + --pgn-size-stepper-step-width-min: 0rem; + --pgn-size-stepper-header-height-min: 5.13rem; + --pgn-size-stack-gap: 0rem; + --pgn-size-spinner-sm-border-width: .2em; --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); + --pgn-size-spinner-sm-width: 1rem; + --pgn-size-spinner-base-border-width: .25em; --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); + --pgn-size-spinner-base-width: 2rem; --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-search-field-border-radius: 0rem; + --pgn-size-search-field-border-width-focus: .3125rem; + --pgn-size-search-field-border-width-base: .0625rem; + --pgn-size-progress-bar-threshold-circle: .5625rem; + --pgn-size-progress-bar-border-radius: 0rem; + --pgn-size-progress-bar-border-width: 1px; + --pgn-size-progress-bar-height-annotated: .3125rem; + --pgn-size-progress-bar-height-base: 1rem; --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-width-max: 480px; + --pgn-size-product-tour-checkpoint-width-arrow: 15px; + --pgn-size-product-tour-checkpoint-width-border: 8px; + --pgn-size-popover-arrow-height: .5rem; + --pgn-size-popover-arrow-width: 1rem; + --pgn-size-popover-icon-width: 1rem; + --pgn-size-popover-icon-height: 1rem; --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm); --pgn-size-popover-border-width: var(--pgn-size-border-width); + --pgn-size-popover-max-width: 480px; + --pgn-size-pagination-focus-outline: 0rem; + --pgn-size-pagination-toggle-border-sm: .25rem; + --pgn-size-pagination-toggle-border-base: .3125rem; + --pgn-size-pagination-reduced-dropdown-min-width: 6rem; + --pgn-size-pagination-reduced-dropdown-max-height: 60vh; --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-pagination-secondary-height-sm: 2.25rem; + --pgn-size-pagination-secondary-height-base: 2.75rem; + --pgn-size-pagination-icon-height: 2.25rem; + --pgn-size-pagination-icon-width: 2.25rem; --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-navbar-nav-scroll-max-height: 75vh; + --pgn-size-nav-tabs-border-radius: 0rem; + --pgn-size-nav-tabs-border-width: 2px; --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width); + --pgn-size-nav-tabs-link-border-bottom-width: .188rem; --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width); + --pgn-size-nav-pills-link-border-width: 1px; --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-modal-content-border-width: 0px; + --pgn-size-modal-sm: 400px; + --pgn-size-modal-md: 500px; + --pgn-size-modal-lg: 800px; + --pgn-size-modal-xl: 1140px; --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width); + --pgn-size-menu-item-width-xs: 13.438rem; + --pgn-size-menu-item-width-base: 19rem; + --pgn-size-menu-item-height: 3rem; + --pgn-size-menu-base-max-height: 16.813rem; + --pgn-size-menu-base-border-radius: .25em; --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 + .1em); + --pgn-size-icon-button-diameter-sm: 2.25rem; + --pgn-size-icon-button-diameter-md: 2.75rem; + --pgn-size-icon-lg: 1.75rem; + --pgn-size-icon-md: 1.5rem; + --pgn-size-icon-sm: 1.25rem; + --pgn-size-icon-xs: 1rem; + --pgn-size-icon-inline: .8em; --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-form-border-radius-width: .125rem; + --pgn-size-form-border-radius-check-focus: .0625rem; + --pgn-size-form-autosuggest-border-width: .125rem; --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width); + --pgn-size-form-autosuggest-spinner-width: 1.25rem; --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width); + --pgn-size-form-autosuggest-icon-width: 2.4rem; + --pgn-size-form-grid-gutter-width: 0.625rem; + --pgn-size-form-control-border-radio-indicator-radius: 50%; + --pgn-size-form-control-border-checkbox-indicator-radius: 0rem; + --pgn-size-form-control-icon-width: 2rem; --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); --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-range-thumb-focus-width: var(--pgn-size-form-input-width-focus); + --pgn-size-form-control-range-thumb-border-radius: 1rem; + --pgn-size-form-control-range-thumb-border-base: 0rem; --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width); + --pgn-size-form-control-range-thumb-width: 1rem; + --pgn-size-form-control-range-track-border-radius: 1rem; + --pgn-size-form-control-range-track-height: .5rem; + --pgn-size-form-control-range-track-width: 100%; --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base); --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); @@ -2201,10 +2144,15 @@ --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-control-indicator-border-width: 0.125rem; + --pgn-size-form-control-indicator-bg: 100%; + --pgn-size-form-control-indicator-base: 1.25rem; --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-form-input-width-border: var(--pgn-size-input-btn-border-width); + --pgn-size-form-input-width-focus: 0.063rem; + --pgn-size-form-input-width-hover: 0.063rem; --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); --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)); @@ -2215,19 +2163,71 @@ --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)); --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base); --pgn-size-dropdown-border-width: var(--pgn-size-border-width); + --pgn-size-dropdown-min-width: 18rem; + --pgn-size-data-table-layout-sidebar-width: 12rem; + --pgn-size-data-table-dropdown-pagination-min-width: 6rem; + --pgn-size-data-table-dropdown-pagination-max-height: 60vh; + --pgn-size-data-table-border: 2px; + --pgn-size-container-max-width-xl: 1440px; + --pgn-size-container-max-width-lg: 1192px; + --pgn-size-container-max-width-md: 952px; + --pgn-size-container-max-width-sm: 708px; + --pgn-size-container-max-width-xs: 464px; + --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px); + --pgn-size-color-picker-sm: 2rem; + --pgn-size-code-pre-scrollable-max-height: 340px; + --pgn-size-chip-icon: 1.5rem; + --pgn-size-chip-border-radius: .375rem; + --pgn-size-carousel-caption-width: 70%; + --pgn-size-carousel-indicator-height-area-hit: 10px; + --pgn-size-carousel-indicator-height-base: 3px; + --pgn-size-carousel-indicator-width: 30px; + --pgn-size-carousel-control-width-icon: 20px; + --pgn-size-carousel-control-width-base: 15%; + --pgn-size-card-logo-height: 4.125rem; + --pgn-size-card-logo-width: 7.25rem; --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base); + --pgn-size-card-image-vertical-max-height: 140px; --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); + --pgn-size-card-image-horizontal-width-max: 240px; --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base)); + --pgn-size-card-focus-border-width: 2px; --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + --pgn-size-card-border-radius-logo: .25rem; --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-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base); --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base); --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); + --pgn-size-btn-focus-width: 2px; --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-btn-border-width: var(--pgn-size-input-btn-border-width); + --pgn-size-breadcrumb-border-width-focus: .0625rem; + --pgn-size-breadcrumb-border-axis-y-focus: .5rem; + --pgn-size-breadcrumb-border-axis-x-focus: .25rem; + --pgn-size-breadcrumb-border-radius-focus: .125rem; --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); + --pgn-size-badge-border-radius-pill: 10rem; + --pgn-size-badge-border-radius-base: .25rem; + --pgn-size-avatar-border-radius: 100%; + --pgn-size-avatar-border-base: 1px; + --pgn-size-avatar-huge: 18.75rem; + --pgn-size-avatar-xxl: 11.5rem; + --pgn-size-avatar-xl: 6rem; + --pgn-size-avatar-lg: 4rem; + --pgn-size-avatar-sm: 2.25rem; + --pgn-size-avatar-xs: 1.5rem; + --pgn-size-avatar-base: 3rem; + --pgn-size-annotation-border-radius: .25rem; + --pgn-size-annotation-max-width: 18.75rem; + --pgn-size-annotation-arrow-border-width: .5rem; + --pgn-size-alert-border-width: 0rem; --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-rounded-pill: 50rem; + --pgn-size-border-radius-sm: .25rem; + --pgn-size-border-radius-lg: .425rem; + --pgn-size-border-radius-base: .375rem; + --pgn-size-border-width: 1px; } diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json index c4ad933cec..1803af9df7 100644 --- a/tokens/src/core/alias/size.json +++ b/tokens/src/core/alias/size.json @@ -1,15 +1,36 @@ { + "$type": "dimension", "size": { "border": { - "width": { "value": "1px", "type": "dimension", "source": "$border-width", "description": "Default border width." }, + "width": { + "source": "$border-width", + "$value": "1px", + "$description": "Default border width." + }, "radius": { - "base": { "value": ".375rem", "type": "dimension", "source": "$border-radius", "description": "Default border radius." }, - "lg": { "value": ".425rem", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." }, - "sm": { "value": ".25rem", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." } + "base": { + "source": "$border-radius", + "$value": ".375rem", + "$description": "Default border radius." + }, + "lg": { + "source": "$border-radius-lg", + "$value": ".425rem", + "$description": "Large border radius." + }, + "sm": { + "source": "$border-radius-sm", + "$value": ".25rem", + "$description": "Small border radius." + } } }, "rounded": { - "pill": { "value": "50rem", "type": "dimension", "source": "$rounded-pill", "description": "Pill border radius." } + "pill": { + "source": "$rounded-pill", + "$value": "50rem", + "$description": "Pill border radius." + } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json index 9d5f437371..32d311ece9 100644 --- a/tokens/src/core/components/ActionRow.json +++ b/tokens/src/core/components/ActionRow.json @@ -1,9 +1,16 @@ { + "$type": "dimension", "spacing": { "action-row": { "gap": { - "x": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-x" }, - "y": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-y" } + "x": { + "source": "$action-row-gap-x", + "$value": ".5rem" + }, + "y": { + "source": "$action-row-gap-y", + "$value": ".5rem" + } } } } diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json index f5913d592f..6ca4f1aa04 100644 --- a/tokens/src/core/components/Alert.json +++ b/tokens/src/core/components/Alert.json @@ -1,29 +1,64 @@ { "spacing": { + "$type": "dimension", "alert": { "padding": { - "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" }, - "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" } + "y": { + "source": "$alert-padding-y", + "$value": "1.5rem" + }, + "x": { + "source": "$alert-padding-x", + "$value": "1.5rem" + } }, - "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" } + "margin-bottom": { + "source": "$alert-margin-bottom", + "$value": "1rem" + }, + "actions-gap": { + "source": "$alert-actions-gap", + "$value": "{spacing.spacer.3}" + }, + "icon-space": { + "source": "$alert-icon-space", + "$value": ".8rem" + } } }, "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" } + "weight-link": { + "source": "$alert-link-font-weight", + "$value": "{typography.font.weight.normal}", + "$type": "fontWeight" + }, + "size": { + "source": "$alert-font-size", + "$value": ".875rem", + "$type": "dimension" + } }, - "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" } + "line-height": { + "source": "$alert-line-height", + "$value": "1.5rem", + "$type": "dimension" + } } }, "size": { + "$type": "dimension", "alert": { "border": { - "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" }, - "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" } + "radius": { + "source": "$alert-border-radius", + "$value": "{size.border.radius.base}" + }, + "width": { + "source": "$alert-border-width", + "$value": "0" + } } } } diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json index 8f3f67ff37..fe3272f836 100644 --- a/tokens/src/core/components/Annotation.json +++ b/tokens/src/core/components/Annotation.json @@ -1,25 +1,47 @@ { + "$type": "dimension", "spacing": { "annotation": { - "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" }, + "padding": { + "source": "$annotation-padding", + "$value": ".5rem" + }, "arrow-side": { - "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" } + "margin": { + "source": "$annotation-arrow-side-margin", + "$value": ".25rem" + } } } }, "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" } + "font-size": { + "source": "$annotation-font-size", + "$value": "{typography.font.size.sm}" + }, + "line-height": { + "source": "$annotation-line-height", + "$value": "{typography.line-height.sm}" + } } }, "size": { "annotation": { "arrow-border": { - "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" } + "width": { + "source": "$annotation-arrow-border-width", + "$value": ".5rem" + } }, - "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" }, - "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" } + "max-width": { + "source": "$annotation-max-width", + "$value": "18.75rem" + }, + "border-radius": { + "source": "$annotation-border-radius", + "$value": ".25rem" + } } } } diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json index c8cdb66d11..1fe8ed60af 100644 --- a/tokens/src/core/components/Avatar.json +++ b/tokens/src/core/components/Avatar.json @@ -1,16 +1,52 @@ { "size": { "avatar": { - "base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" }, - "xs": { "value": "1.5rem", "type": "dimension", "source": "$avatar-size-xs" }, - "sm": { "value": "2.25rem", "type": "dimension", "source": "$avatar-size-sm" }, - "lg": { "value": "4rem", "type": "dimension", "source": "$avatar-size-lg" }, - "xl": { "value": "6rem", "type": "dimension", "source": "$avatar-size-xl" }, - "xxl": { "value": "11.5rem", "type": "dimension", "source": "$avatar-size-xxl" }, - "huge": { "value": "18.75rem", "type": "dimension", "source": "$avatar-size-huge" }, + "base": { + "source": "$avatar-size", + "$value": "3rem", + "$type": "dimension" + }, + "xs": { + "source": "$avatar-size-xs", + "$value": "1.5rem", + "$type": "dimension" + }, + "sm": { + "source": "$avatar-size-sm", + "$value": "2.25rem", + "$type": "dimension" + }, + "lg": { + "source": "$avatar-size-lg", + "$value": "4rem", + "$type": "dimension" + }, + "xl": { + "source": "$avatar-size-xl", + "$value": "6rem", + "$type": "dimension" + }, + "xxl": { + "source": "$avatar-size-xxl", + "$value": "11.5rem", + "$type": "dimension" + }, + "huge": { + "source": "$avatar-size-huge", + "$value": "18.75rem", + "$type": "dimension" + }, "border": { - "base": { "value": "1px", "type": "dimension", "source": "$avatar-border" }, - "radius": { "value": "100%", "type": "percentage", "source": "$avatar-border-radius" } + "base": { + "source": "$avatar-border", + "$value": "1px", + "$type": "dimension" + }, + "radius": { + "source": "$avatar-border-radius", + "$value": "100%", + "$type": "percentage" + } } } } diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json index ac2e311a28..069c82c668 100644 --- a/tokens/src/core/components/AvatarButton.json +++ b/tokens/src/core/components/AvatarButton.json @@ -1,10 +1,20 @@ { + "$type": "dimension", "spacing": { "avatar-button": { "padding-left": { - "base": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left" }, - "sm": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-sm" }, - "lg": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-lg" } + "base": { + "source": "$avatar-button-padding-left", + "$value": ".25em" + }, + "sm": { + "source": "$avatar-button-padding-left-sm", + "$value": ".25em" + }, + "lg": { + "source": "$avatar-button-padding-left-lg", + "$value": ".25em" + } } } } diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json index 921b1f09e0..ecb9ee5376 100644 --- a/tokens/src/core/components/Badge.json +++ b/tokens/src/core/components/Badge.json @@ -1,33 +1,65 @@ { "spacing": { + "$type": "dimension", "badge": { "padding": { "x": { - "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" }, - "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" } + "base": { + "source": "$badge-padding-x", + "$value": ".5rem" + }, + "pill": { + "source": "$badge-pill-padding-x", + "$value": ".6em" + } }, - "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" } + "y": { + "source": "$badge-padding-y", + "$value": ".125rem" + } } } }, "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": { + "source": "$badge-font-size", + "$value": "75%", + "$type": "percentage" + }, + "weight": { + "source": "$badge-font-weight", + "$value": "{typography.font.weight.bold}", + "$type": "fontWeight" + } } } }, "size": { + "$type": "dimension", "badge": { "border-radius": { - "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" }, - "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" } + "base": { + "source": "$badge-border-radius", + "$value": ".25rem" + }, + "pill": { + "source": "$badge-pill-border-radius", + "$value": "10rem" + } }, - "focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" } + "focus-width": { + "source": "$badge-focus-width", + "$value": "{size.input.btn.focus-width}" + } } }, "transition": { - "badge": { "value": "none", "type": "transition", "source": "$badge-transition" } + "$type": "transition", + "badge": { + "source": "$badge-transition", + "$value": "none" + } } } diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json index 89b11c9c22..84f041c281 100644 --- a/tokens/src/core/components/Breadcrumb.json +++ b/tokens/src/core/components/Breadcrumb.json @@ -1,8 +1,12 @@ { + "$type": "dimension", "spacing": { "breadcrumb": { "margin": { - "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" } + "left": { + "source": "$breadcrumb-margin-left", + "$value": ".5rem" + } } } }, @@ -10,13 +14,25 @@ "breadcrumb": { "border": { "radius": { - "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" } + "focus": { + "source": "$breadcrumb-focus-border-radius", + "$value": ".125rem" + } }, "axis": { - "x-focus": { "value": ".25rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-x" }, - "y-focus": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-y" } + "x-focus": { + "source": "$breadcrumb-border-focus-axis-x", + "$value": ".25rem" + }, + "y-focus": { + "source": "$breadcrumb-border-focus-axis-y", + "$value": ".5rem" + } }, - "width-focus": { "value": ".0625rem", "type": "dimension", "source": "$breadcrumb-border-focus-width" } + "width-focus": { + "source": "$breadcrumb-border-focus-width", + "$value": ".0625rem" + } } } } diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json index 262200e665..ba57fc309e 100644 --- a/tokens/src/core/components/Bubble.json +++ b/tokens/src/core/components/Bubble.json @@ -1,10 +1,17 @@ { + "$type": "transition", "spacing": { "bubble": { "expandable-padding": { - "y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" }, - "x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" } + "y": { + "source": "$bubble-expandable-padding-y", + "$value": "0" + }, + "x": { + "source": "$bubble-expandable-padding-x", + "$value": ".25rem" + } } - } + } } } diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json index 96fdbadb33..0ce7ff8c7b 100644 --- a/tokens/src/core/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -1,42 +1,55 @@ { "spacing": { + "$type": "dimension", "btn": { "padding": { "y": { "base": { - "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$btn-padding-y" + "source": "$btn-padding-y", + "$value": "{spacing.input.btn.padding.y}" }, "lg": { - "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$btn-padding-y-lg" + "source": "$btn-padding-y-lg", + "$value": "{spacing.input.btn.padding.lg.y}" }, "sm": { - "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$btn-padding-y-sm" + "source": "$btn-padding-y-sm", + "$value": "{spacing.input.btn.padding.sm.y}" } }, "x": { - "base": { "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$btn-padding-x" }, + "base": { + "source": "$btn-padding-x", + "$value": "{spacing.input.btn.padding.x}" + }, "lg": { - "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$btn-padding-x-lg" + "source": "$btn-padding-x-lg", + "$value": "{spacing.input.btn.padding.lg.x}" }, "sm": { - "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$btn-padding-x-sm" + "source": "$btn-padding-x-sm", + "$value": "{spacing.input.btn.padding.sm.x}" } } }, "block": { - "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" } + "spacing-y": { + "source": "$btn-block-spacing-y", + "$value": ".5rem" + } }, "focus": { - "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" }, + "gap": { + "source": "$btn-focus-gap", + "$value": "{size.btn.focus.width}" + }, "border-gap": { - "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})", - "type": "dimension", - "source": "$btn-focus-border-gap" + "source": "$btn-focus-border-gap", + "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})" }, "distance-to-border": { - "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})", - "type": "dimension", - "source": "$btn-focus-distance-to-border" + "source": "$btn-focus-distance-to-border", + "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})" } } } @@ -45,61 +58,98 @@ "btn": { "font": { "family": { - "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$btn-font-family" + "source": "$btn-font-family", + "$value": "{typography.input.btn.font.family}", + "$type": "fontFamily" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$btn-font-size" + "source": "$btn-font-size", + "$value": "{typography.input.btn.font.size.base}" }, "sm": { - "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$btn-font-size-sm" + "source": "$btn-font-size-sm", + "$value": "{typography.input.btn.font.size.sm}" }, "lg": { - "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$btn-font-size-lg" + "source": "$btn-font-size-lg", + "$value": "{typography.input.btn.font.size.lg}" } }, "weight": { - "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$btn-font-weight" + "source": "$btn-font-weight", + "$value": "{typography.font.weight.normal}", + "$type": "fontWeight" } }, "line-height": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.line-height.base}", "type": "dimension", "source": "$btn-line-height" + "source": "$btn-line-height", + "$value": "{typography.input.btn.line-height.base}" }, "sm": { - "value": "{typography.input.btn.line-height.sm}", "type": "dimension", "source": "$btn-line-height-sm" + "source": "$btn-line-height-sm", + "$value": "{typography.input.btn.line-height.sm}" }, "lg": { - "value": "{typography.input.btn.line-height.lg}", "type": "dimension", "source": "$btn-line-height-lg" + "source": "$btn-line-height-lg", + "$value": "{typography.input.btn.line-height.lg}" } } } }, "size": { + "$type": "dimension", "btn": { "border": { - "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" }, + "width": { + "source": "$btn-border-width", + "$value": "{size.input.btn.border-width}" + }, "radius": { - "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$btn-border-radius" }, - "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$btn-border-radius-lg" }, - "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$btn-border-radius-sm" } + "base": { + "source": "$btn-border-radius", + "$value": "{size.border.radius.base}" + }, + "lg": { + "source": "$btn-border-radius-lg", + "$value": "{size.border.radius.lg}" + }, + "sm": { + "source": "$btn-border-radius-sm", + "$value": "{size.border.radius.sm}" + } } }, "focus": { - "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" }, + "width": { + "source": "$btn-focus-width", + "$value": "2px" + }, "border-radius": { "base": { - "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})", - "type": "dimension", - "source": "$btn-focus-border-radius" + "source": "$btn-focus-border-radius", + "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})" + }, + "lg": { + "source": "$btn-focus-border-radius-lg", + "$value": "{size.btn.focus.border-radius.base}" }, - "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" }, - "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" } + "sm": { + "source": "$btn-focus-border-radius-sm", + "$value": "{size.btn.border.radius.base}" + } } } } }, "transition": { - "btn": { "value": "none", "type": "transition", "source": "$btn-transition" } + "$type": "transition", + "btn": { + "source": "$btn-transition", + "$value": "none" + } } } diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index 7419bfb6a5..4eff49026c 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -1,86 +1,162 @@ { + "$type": "dimension", "spacing": { "card": { "spacer": { - "x": { "value": "1.25rem", "type": "dimension", "source": "$card-spacer-x" }, - "y": { "value": ".75rem", "type": "dimension", "source": "$card-spacer-y" } + "x": { + "source": "$card-spacer-x", + "$value": "1.25rem" + }, + "y": { + "source": "$card-spacer-y", + "$value": ".75rem" + } }, "margin": { - "group": { "value": "12px", "type": "dimension", "source": "$card-group-margin" }, - "deck": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-deck-margin" }, - "deck-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-deck-margin-bottom" }, - "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" }, - "grid-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-grid-margin-bottom" } + "group": { + "source": "$card-group-margin", + "$value": "12px" + }, + "deck": { + "source": "$card-deck-margin", + "$value": "{spacing.card.margin.group}" + }, + "deck-bottom": { + "source": "$card-deck-margin-bottom", + "$value": "{spacing.spacer.3}" + }, + "grid": { + "source": "$card-grid-margin", + "$value": "{spacing.card.margin.group}" + }, + "grid-bottom": { + "source": "$card-grid-margin-bottom", + "$value": "{spacing.spacer.3}" + } }, "columns": { - "margin": { "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$card-columns-margin" }, - "count": { "value": "3", "type": "dimension", "source": "$card-columns-count" }, - "gap": { "value": "1.25rem", "type": "dimension", "source": "$card-columns-gap" } + "margin": { + "source": "$card-columns-margin", + "$value": "{spacing.card.spacer.y}" + }, + "count": { + "source": "$card-columns-count", + "$value": "3" + }, + "gap": { + "source": "$card-columns-gap", + "$value": "1.25rem" + } }, "footer": { - "action-gap": { "value": ".5rem", "type": "dimension", "source": "$card-footer-actions-gap" } + "action-gap": { + "source": "$card-footer-actions-gap", + "$value": ".5rem" + } }, "loading-skeleton": { - "spacer": { "value": ".313rem", "type": "dimension", "source": "$loading-skeleton-spacer" } + "spacer": { + "source": "$loading-skeleton-spacer", + "$value": ".313rem" + } }, "logo": { "left-offset": { - "base": { "value": "1.5rem", "type": "dimension", "source": "$card-logo-left-offset" }, - "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-left-offset-horizontal" } + "base": { + "source": "$card-logo-left-offset", + "$value": "1.5rem" + }, + "horizontal": { + "source": "$card-logo-left-offset-horizontal", + "$value": ".4375rem" + } }, "bottom-offset": { - "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" }, - "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" } + "base": { + "source": "$card-logo-bottom-offset", + "$value": "1rem" + }, + "horizontal": { + "source": "$card-logo-bottom-offset-horizontal", + "$value": ".4375rem" + } } }, "focus": { - "border-offset": { "value": "5px", "type": "dimension", "source": "$card-focus-border-offset" } + "border-offset": { + "source": "$card-focus-border-offset", + "$value": "5px" + } } } }, "size": { "card": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" }, + "width": { + "source": "$card-border-width", + "$value": "{size.border.width}" + }, "radius": { - "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" }, - "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" }, + "base": { + "source": "$card-border-radius", + "$value": "{size.border.radius.base}" + }, + "logo": { + "source": "$card-logo-border-radius", + "$value": ".25rem" + }, "inner": { - "value": "calc({size.card.border.radius.base} - {size.card.border.width})", - "type": "dimension", - "source": "$card-inner-border-radius" + "source": "$card-inner-border-radius", + "$value": "calc({size.card.border.radius.base} - {size.card.border.width})" } } }, "focus": { "border": { - "width": { "value": "2px", "type": "dimension", "source": "$card-focus-border-width" }, + "width": { + "source": "$card-focus-border-width", + "$value": "2px" + }, "radius": { - "value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})", - "type": "dimension", - "source": "$card-focus-border-radius" + "source": "$card-focus-border-radius", + "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})" } } }, "image": { "horizontal": { "width": { - "max": { "value": "240px", "type": "dimension", "source": "$card-image-horizontal-max-width" }, + "max": { + "source": "$card-image-horizontal-max-width", + "$value": "240px" + }, "min": { - "value": "{size.card.image.horizontal.width.max}", - "type": "dimension", - "source": "$card-image-horizontal-min-width" + "source": "$card-image-horizontal-min-width", + "$value": "{size.card.image.horizontal.width.max}" } } }, "vertical": { - "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" } + "max-height": { + "source": "$card-image-vertical-max-height", + "$value": "140px" + } }, - "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" } + "border-radius": { + "source": "$card-image-border-radius", + "$value": "{size.card.border.radius.base}" + } }, "logo": { - "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" }, - "height": { "value": "4.125rem", "type": "dimension", "source": "$card-logo-height" } + "width": { + "source": "$card-logo-width", + "$value": "7.25rem" + }, + "height": { + "source": "$card-logo-height", + "$value": "4.125rem" + } } } }, @@ -88,7 +164,8 @@ "footer": { "text": { "font-size": { - "value": "{typography.font.size.small.x}", "type": "dimension", "source": "$card-footer-text-font-size" + "source": "$card-footer-text-font-size", + "$value": "{typography.font.size.small.x}" } } } diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json index 26343bc957..871d50d7c5 100644 --- a/tokens/src/core/components/Carousel.json +++ b/tokens/src/core/components/Carousel.json @@ -3,35 +3,73 @@ "carousel": { "control": { "width": { - "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" }, - "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" } + "base": { + "source": "$carousel-control-width", + "$value": "15%", + "$type": "percentage" + }, + "icon": { + "source": "$carousel-control-icon-width", + "$value": "20px", + "$type": "dimension" + } } }, "indicator": { - "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" }, + "$type": "dimension", + "width": { + "source": "$carousel-indicator-width", + "$value": "30px" + }, "height": { - "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" }, - "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" } + "base": { + "source": "$carousel-indicator-height", + "$value": "3px" + }, + "area-hit": { + "source": "$carousel-indicator-hit-area-height", + "$value": "10px" + } } }, - "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" } + "caption-width": { + "source": "$carousel-caption-width", + "$value": "70%", + "$type": "percentage" + } } }, "spacing": { + "$type": "dimension", "carousel": { - "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" } + "indicator-spacer": { + "source": "$carousel-indicator-spacer", + "$value": "3px" + } } }, "transition": { "carousel": { "base": { - "value": "transform {transition.carousel.duration} ease-in-out", - "type": "transition", - "source": "$carousel-transition" + "source": "$carousel-transition", + "$value": "transform {transition.carousel.duration} ease-in-out", + "$type": "transition" + }, + "duration": { + "source": "$carousel-transition-duration", + "$value": ".6s", + "$type": "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" } + "indicator": { + "source": "$carousel-indicator-transition", + "$value": "opacity .6s ease", + "$type": "transition" + }, + "control": { + "source": "$carousel-control-transition", + "$value": "opacity .15s ease", + "$type": "transition" + } } } } diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json index d22606c1dd..26e63cc2f2 100644 --- a/tokens/src/core/components/Chip.json +++ b/tokens/src/core/components/Chip.json @@ -1,41 +1,65 @@ { + "$type": "dimension", "spacing": { "chip": { "margin": { "base": { - "value": ".125rem", "type": "dimension", "source": "$chip-margin" + "source": "$chip-margin", + "$value": ".125rem" }, - "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" } + "icon": { + "source": "$chip-icon-margin", + "$value": ".25rem" + } }, "padding": { - "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" } + "y": { + "source": "$chip-padding-y", + "$value": "1px" + }, + "x": { + "source": "$chip-padding-x", + "$value": ".5rem" + } }, "outline": { "selected-distance": { "light": { - "value": "3px", "type": "dimension", "source": "$chip-light-selected-outline-distance" + "source": "$chip-light-selected-outline-distance", + "$value": "3px" }, "dark": { - "value": "3px", "type": "dimension", "source": "$chip-dark-selected-outline-distance" + "source": "$chip-dark-selected-outline-distance", + "$value": "3px" } }, "focus-distance": { "light": { - "value": ".313rem", "type": "dimension", "source": "$chip-light-focus-outline-distance" + "source": "$chip-light-focus-outline-distance", + "$value": ".313rem" }, "dark": { - "value": ".313rem", "type": "dimension", "source": "$chip-dark-focus-outline-distance" + "source": "$chip-dark-focus-outline-distance", + "$value": ".313rem" } }, - "width": { "value": "3px", "type": "dimension", "source": "$chip-outline-width" } + "width": { + "source": "$chip-outline-width", + "$value": "3px" + } } } }, "size": { "chip": { - "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" }, - "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" } + "border-radius": { + "source": "$chip-border-radius", + "$value": ".375rem" + }, + "icon": { + "source": "$chip-icon-size", + "$value": "1.5rem" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json index 597fd925d0..227f846d51 100644 --- a/tokens/src/core/components/ChipCarousel.json +++ b/tokens/src/core/components/ChipCarousel.json @@ -1,13 +1,21 @@ { + "$type": "dimension", "spacing": { "chip-carousel": { "controls-top-offset": { - "value": ".375rem", "type": "dimension", "source": "$chip-carousel-controls-top-offset" + "source": "$chip-carousel-controls-top-offset", + "$value": ".375rem" }, "container": { "padding": { - "x": { "value": ".625rem", "type": "dimension", "source": "$chip-carousel-container-padding-x" }, - "y": { "value": ".313rem", "type": "dimension", "source": "$chip-carousel-container-padding-y" } + "x": { + "source": "$chip-carousel-container-padding-x", + "$value": ".625rem" + }, + "y": { + "source": "$chip-carousel-container-padding-y", + "$value": ".313rem" + } } } } diff --git a/tokens/src/core/components/CloseButton.json b/tokens/src/core/components/CloseButton.json index 4e7eb8f879..17a8b99f60 100644 --- a/tokens/src/core/components/CloseButton.json +++ b/tokens/src/core/components/CloseButton.json @@ -3,10 +3,14 @@ "close-button": { "font": { "size": { - "value": "calc({typography.font.size.base} * 1.5)", "type": "dimension", "source": "$close-font-size" + "source": "$close-font-size", + "$value": "calc({typography.font.size.base} * 1.5)", + "$type": "dimension" }, "weight": { - "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$close-font-weight" + "source": "$close-font-weight", + "$value": "{typography.font.weight.bold}", + "$type": "fontWeight" } } } diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json index b8ae8bac6c..d6ba56fb2e 100644 --- a/tokens/src/core/components/Code.json +++ b/tokens/src/core/components/Code.json @@ -1,32 +1,53 @@ { "typography": { "code": { - "font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" }, + "font-size": { + "source": "$code-font-size", + "$value": "87.5%", + "$type": "percentage" + }, "kbd": { - "font-size": { "value": "{typography.code.font-size}", "type": "dimension", "source": "$kbd-font-size" }, + "font-size": { + "source": "$kbd-font-size", + "$value": "{typography.code.font-size}", + "$type": "dimension" + }, "nested": { + "$type": "fontWeight", "font-weight": { - "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$nested-kbd-font-weight" + "source": "$nested-kbd-font-weight", + "$value": "{typography.font.weight.bold}" } } } } }, "spacing": { + "$type": "dimension", "code": { "kbd": { "padding": { - "y": { "value": ".2rem", "type": "dimension", "source": "$kbd-padding-y" }, - "x": { "value": ".4rem", "type": "dimension", "source": "$kbd-padding-x" } + "y": { + "source": "$kbd-padding-y", + "$value": ".2rem" + }, + "x": { + "source": "$kbd-padding-x", + "$value": ".4rem" + } } } } }, "size": { + "$type": "dimension", "code": { "pre": { "scrollable": { - "max-height": { "value": "340px", "type": "dimension", "source": "$pre-scrollable-max-height" } + "max-height": { + "source": "$pre-scrollable-max-height", + "$value": "340px" + } } } } diff --git a/tokens/src/core/components/Collapsible.json b/tokens/src/core/components/Collapsible.json index 924347154c..9cd2431ad3 100644 --- a/tokens/src/core/components/Collapsible.json +++ b/tokens/src/core/components/Collapsible.json @@ -1,26 +1,50 @@ { + "$type": "dimension", "spacing": { "collapsible": { "card": { "spacer": { "y": { - "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-y" }, + "base": { + "source": "$collapsible-card-spacer-y", + "$value": ".5rem" + }, "lg": { - "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$collapsible-card-spacer-y-lg" + "source": "$collapsible-card-spacer-y-lg", + "$value": "{spacing.card.spacer.y}" } }, "x": { - "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-x" }, + "base": { + "source": "$collapsible-card-spacer-x", + "$value": ".5rem" + }, "lg": { - "value": "{spacing.card.spacer.x}", "type": "dimension", "source": "$collapsible-card-spacer-x-lg" + "source": "$collapsible-card-spacer-x-lg", + "$value": "{spacing.card.spacer.x}" } }, - "left-body": { "value": ".75rem", "type": "dimension", "source": "$collapsible-card-body-spacer-left" }, - "icon": { "value": "2.5rem", "type": "dimension", "source": "$collapsible-card-spacer-icon" }, + "left-body": { + "source": "$collapsible-card-body-spacer-left", + "$value": ".75rem" + }, + "icon": { + "source": "$collapsible-card-spacer-icon", + "$value": "2.5rem" + }, "basic": { - "y": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-x" }, - "icon": { "value": ".625rem", "type": "dimension", "source": "$collapsible-basic-spacer-icon" } + "y": { + "source": "$collapsible-basic-spacer-y", + "$value": ".5rem" + }, + "x": { + "source": "$collapsible-basic-spacer-x", + "$value": ".5rem" + }, + "icon": { + "source": "$collapsible-basic-spacer-icon", + "$value": ".625rem" + } } } } diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json index 2dd4803426..48e9430916 100644 --- a/tokens/src/core/components/ColorPicker.json +++ b/tokens/src/core/components/ColorPicker.json @@ -1,8 +1,15 @@ { + "$type": "dimension", "size": { "color-picker": { - "sm": { "value": "2rem", "type": "dimension", "source": "$picker-size-sm" }, - "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "type": "dimension", "source": "$picker-size-md" } + "sm": { + "source": "$picker-size-sm", + "$value": "2rem" + }, + "md": { + "source": "$picker-size-md", + "$value": "calc(1.3333em + 1.125rem + 2px)" + } } } } diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json index 4f9b676d6a..f7548879ed 100644 --- a/tokens/src/core/components/Container.json +++ b/tokens/src/core/components/Container.json @@ -1,12 +1,28 @@ { + "$type": "dimension", "size": { "container": { "max-width": { - "xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" }, - "sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" }, - "md": { "value": "952px", "type": "dimension", "source": "$max-width-md" }, - "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" }, - "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" } + "xs": { + "source": "$max-width-xs", + "$value": "464px" + }, + "sm": { + "source": "$max-width-sm", + "$value": "708px" + }, + "md": { + "source": "$max-width-md", + "$value": "952px" + }, + "lg": { + "source": "$max-width-lg", + "$value": "1192px" + }, + "xl": { + "source": "$max-width-xl", + "$value": "1440px" + } } } } diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json index 9c6ba9cea6..75959fbe87 100644 --- a/tokens/src/core/components/DataTable.json +++ b/tokens/src/core/components/DataTable.json @@ -1,27 +1,57 @@ { "size": { + "$type": "dimension", "data-table": { - "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" }, + "border": { + "source": "$data-table-border", + "$value": "2px" + }, "dropdown": { "pagination": { - "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" }, - "min-width": { "value": "6rem", "type": "dimension", "source": "$data-table-pagination-dropdown-min-width" } + "max-height": { + "source": "$data-table-pagination-dropdown-max-height", + "$value": "60vh" + }, + "min-width": { + "source": "$data-table-pagination-dropdown-min-width", + "$value": "6rem" + } } }, "layout": { - "sidebar-width": { "value": "12rem", "type": "dimension", "source": "$data-table-layout-sidebar-width" } + "sidebar-width": { + "source": "$data-table-layout-sidebar-width", + "$value": "12rem" + } } } }, "spacing": { "data-table": { "padding": { - "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" }, - "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" }, - "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" }, - "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" } + "$type": "dimension", + "x": { + "source": "$data-table-padding-x", + "$value": ".75rem" + }, + "y": { + "source": "$data-table-padding-y", + "$value": ".75rem" + }, + "small": { + "source": "$data-table-padding-small", + "$value": ".5rem" + }, + "cell": { + "source": "$data-table-cell-padding", + "$value": ".5rem .75rem" + } }, - "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" } + "footer-position": { + "source": "$data-table-footer-position", + "$value": "center", + "$type": "position" + } } } } diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json index 02e15914c2..dd18c8069d 100644 --- a/tokens/src/core/components/Dropdown.json +++ b/tokens/src/core/components/Dropdown.json @@ -2,66 +2,97 @@ "typography": { "dropdown": { "font-size": { - "value": "{typography.font.size.base}", "type": "dimension", "source": "$dropdown-font-size" + "source": "$dropdown-font-size", + "$value": "{typography.font.size.base}", + "$type": "dimension" }, "item": { + "$type": "textDecoration", "text-decoration": { - "value": "none", "type": "textDecoration" + "$value": "none" } } } }, "size": { + "$type": "dimension", "dropdown": { - "min-width": { "value": "18rem", "type": "dimension", "source": "$dropdown-min-width" }, + "min-width": { + "source": "$dropdown-min-width", + "$value": "18rem" + }, "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$dropdown-border-width" }, + "width": { + "source": "$dropdown-border-width", + "$value": "{size.border.width}" + }, "radius": { "base": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$dropdown-border-radius" + "source": "$dropdown-border-radius", + "$value": "{size.border.radius.base}" }, "inner": { - "value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})", - "type": "dimension", - "source": "$dropdown-inner-border-radius" + "source": "$dropdown-inner-border-radius", + "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})" } } } } }, "spacing": { + "$type": "dimension", "dropdown": { - "spacer": { "value": ".125rem", "type": "dimension", "source": "$dropdown-spacer" }, + "spacer": { + "source": "$dropdown-spacer", + "$value": ".125rem" + }, "padding": { "x": { - "base": { "value": "0", "type": "dimension", "source": "$dropdown-padding-x" }, - "item": { "value": "1rem", "type": "dimension", "source": "$dropdown-item-padding-x" } + "base": { + "source": "$dropdown-padding-x", + "$value": "0" + }, + "item": { + "source": "$dropdown-item-padding-x", + "$value": "1rem" + } }, "y": { - "base": { "value": ".5rem", "type": "dimension", "source": "$dropdown-padding-y" }, - "item": { "value": ".25rem", "type": "dimension", "source": "$dropdown-item-padding-y" } + "base": { + "source": "$dropdown-padding-y", + "$value": ".5rem" + }, + "item": { + "source": "$dropdown-item-padding-y", + "$value": ".25rem" + } }, "header": { - "value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}", - "type": "dimension", - "source": "$dropdown-header-padding" + "source": "$dropdown-header-padding", + "$value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}" } }, "divider": { "margin-y": { - "value": "calc({spacing.spacer.base} / 2)", - "type": "dimension", - "source": "$dropdown-divider-margin-y" + "source": "$dropdown-divider-margin-y", + "$value": "calc({spacing.spacer.base} / 2)" } }, "close-container": { - "top": { "value": ".625rem", "type": "dimension", "source": "$modal-close-container-top" } + "top": { + "source": "$modal-close-container-top", + "$value": ".625rem" + } } } }, "elevation": { + "$type": "ratio", "dropdown": { - "zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" } + "zindex": { + "source": "$zindex-dropdown", + "$value": "1000" + } } } } diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json index 6217177202..a97a008879 100644 --- a/tokens/src/core/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -1,20 +1,26 @@ { + "$type": "dimension", "typography": { "dropzone": { "restriction-msg": { "font-size": { - "value": "{typography.font.size.small.x}", - "type": "dimension", - "source": "$dropzone-restriction-msg-font-size" + "source": "$dropzone-restriction-msg-font-size", + "$value": "{typography.font.size.small.x}" } } } }, "spacing": { "dropzone": { - "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" }, + "padding": { + "source": "$dropzone-padding", + "$value": "1.5rem" + }, "border": { - "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" } + "base": { + "source": "$dropzone-border-default", + "$value": "1px" + } } } } diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json index fbae55b536..415a9ffe4f 100644 --- a/tokens/src/core/components/Form/other.json +++ b/tokens/src/core/components/Form/other.json @@ -2,11 +2,24 @@ "other": { "form": { "control": { - "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" }, - "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" }, + "cursor": { + "source": "$custom-control-cursor", + "$value": "auto", + "$type": "cursorStyle" + }, + "range-track-cursor": { + "source": "$custom-range-track-cursor", + "$value": "pointer", + "$type": "cursorStyle" + }, "custom-file": { - "lang": { "value": "en", "type": "text" }, - "content": { "value": "Browse", "type": "text" } + "$type": "text", + "lang": { + "$value": "en" + }, + "content": { + "$value": "Browse" + } } } } diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json index 695bfd149a..f0994467f1 100644 --- a/tokens/src/core/components/Form/size.json +++ b/tokens/src/core/components/Form/size.json @@ -2,224 +2,301 @@ "size": { "form": { "input": { + "$type": "dimension", "height": { "base": { - "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})", - "type": "dimension", - "source": "$input-height" + "source": "$input-height", + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})" }, "sm": { - "value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})", - "type": "dimension", - "source": "$input-height-sm" + "source": "$input-height-sm", + "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})" }, "lg": { - "value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})", - "type": "dimension", - "source": "$input-height-lg" + "source": "$input-height-lg", + "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})" }, "inner": { "base": { - "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", - "type": "dimension", - "source": "$input-height-inner" + "source": "$input-height-inner", + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" }, "half": { - "value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})", - "type": "dimension", - "source": "$input-height-inner-half" + "source": "$input-height-inner-half", + "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})" }, "quarter": { - "value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))", - "type": "dimension", - "source": "$input-height-inner-quarter" + "source": "$input-height-inner-quarter", + "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))" } }, "border": { - "value": "calc({size.form.input.width.border} * 2)", - "type": "dimension", - "source": "$input-height-border" + "source": "$input-height-border", + "$value": "calc({size.form.input.width.border} * 2)" } }, "width": { - "hover": { "value": "0.063rem", "type": "dimension", "source": "$input-hover-width" }, - "focus": { "value": "0.063rem", "type": "dimension", "source": "$input-focus-width" }, + "hover": { + "source": "$input-hover-width", + "$value": "0.063rem" + }, + "focus": { + "source": "$input-focus-width", + "$value": "0.063rem" + }, "border": { - "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$input-border-width" + "source": "$input-border-width", + "$value": "{size.input.btn.border-width}" } }, "radius": { "border": { - "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$input-border-radius" }, - "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$input-border-radius-lg" }, - "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$input-border-radius-sm" } + "base": { + "source": "$input-border-radius", + "$value": "{size.border.radius.base}" + }, + "lg": { + "source": "$input-border-radius-lg", + "$value": "{size.border.radius.lg}" + }, + "sm": { + "source": "$input-border-radius-sm", + "$value": "{size.border.radius.sm}" + } } } }, "control": { "indicator": { - "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" }, - "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" }, + "base": { + "source": "$custom-control-indicator-size", + "$value": "1.25rem", + "$type": "dimension" + }, + "bg": { + "source": "$custom-control-indicator-bg-size", + "$value": "100%", + "$type": "percentage" + }, "border": { - "width": { "value": "0.125rem", "type": "dimension", "source": "$custom-control-indicator-border-width" } + "$type": "dimension", + "width": { + "source": "$custom-control-indicator-border-width", + "$value": "0.125rem" + } } }, "switch": { + "$type": "dimension", "width": { - "value": "calc({size.form.control.indicator.base} * 1.75)", - "type": "dimension", - "source": "$custom-switch-width" + "source": "$custom-switch-width", + "$value": "calc({size.form.control.indicator.base} * 1.75)" }, "indicator": { "base": { - "value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)", - "type": "dimension", - "source": "$custom-switch-indicator-size" + "source": "$custom-switch-indicator-size", + "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)" }, "border": { "radius": { - "value": "calc({size.form.control.indicator.base} / 2)", - "type": "dimension", - "source": "$custom-switch-indicator-border-radius" + "source": "$custom-switch-indicator-border-radius", + "$value": "calc({size.form.control.indicator.base} / 2)" } } } }, "select": { + "$type": "dimension", "height": { "base": { - "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-select-height" + "source": "$custom-select-height", + "$value": "{size.form.input.height.base}" }, "lg": { - "value": "{size.form.input.height.lg}", "type": "dimension", "source": "$custom-select-height-lg" + "source": "$custom-select-height-lg", + "$value": "{size.form.input.height.lg}" }, "sm": { - "value": "{size.form.input.height.sm}", "type": "dimension", "source": "$custom-select-height-sm" + "source": "$custom-select-height-sm", + "$value": "{size.form.input.height.sm}" } }, "feedback": { "icon": { - "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}", - "type": "dimension", - "source": "$custom-select-feedback-icon-size" + "source": "$custom-select-feedback-icon-size", + "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}" } }, "border": { "width": { "base": { - "value": "{size.form.input.width.border}", - "type": "dimension", - "source": "$custom-select-border-width" + "source": "$custom-select-border-width", + "$value": "{size.form.input.width.border}" } }, "radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$custom-select-border-radius" + "source": "$custom-select-border-radius", + "$value": "{size.border.radius.base}" } } }, "range": { "track": { - "width": { "value": "100%", "type": "percentage", "source": "$custom-range-track-width" }, - "height": { "value": ".5rem", "type": "dimension", "source": "$custom-range-track-height" }, + "width": { + "source": "$custom-range-track-width", + "$value": "100%", + "$type": "percentage" + }, + "height": { + "source": "$custom-range-track-height", + "$value": ".5rem", + "$type": "dimension" + }, "border": { - "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-track-border-radius" } + "$type": "dimension", + "radius": { + "source": "$custom-range-track-border-radius", + "$value": "1rem" + } } }, "thumb": { - "width": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-width" }, + "$type": "dimension", + "width": { + "source": "$custom-range-thumb-width", + "$value": "1rem" + }, "height": { - "value": "{size.form.control.range.thumb.width}", - "type": "dimension", - "source": "$custom-range-thumb-height" + "source": "$custom-range-thumb-height", + "$value": "{size.form.control.range.thumb.width}" }, "border": { - "base": { "value": "0", "type": "dimension", "source": "$custom-range-thumb-border" }, - "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-border-radius" } + "base": { + "source": "$custom-range-thumb-border", + "$value": "0" + }, + "radius": { + "source": "$custom-range-thumb-border-radius", + "$value": "1rem" + } }, "focus": { "width": { - "value": "{size.form.input.width.focus}", - "type": "dimension", - "source": "$custom-range-thumb-focus-box-shadow-width" + "source": "$custom-range-thumb-focus-box-shadow-width", + "$value": "{size.form.input.width.focus}" } } } }, "file": { + "$type": "dimension", "width": { - "value": "{size.form.input.width.border}", "type": "dimension", "source": "$custom-file-border-width" + "source": "$custom-file-border-width", + "$value": "{size.form.input.width.border}" }, "height": { "base": { - "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-file-height" + "source": "$custom-file-height", + "$value": "{size.form.input.height.base}" }, "inner": { - "value": "{size.form.input.height.inner.base}", - "type": "dimension", - "source": "$custom-file-height-inner" + "source": "$custom-file-height-inner", + "$value": "{size.form.input.height.inner.base}" } }, "border": { "radius": { - "value": "{size.form.input.radius.border.base}", - "type": "dimension", - "source": "$custom-file-border-radius" + "source": "$custom-file-border-radius", + "$value": "{size.form.input.radius.border.base}" } } }, "icon": { - "width": { "value": "2rem", "type": "dimension", "source": "$form-control-icon-width" } + "$type": "dimension", + "width": { + "source": "$form-control-icon-width", + "$value": "2rem" + } }, "border": { "checkbox": { + "$type": "dimension", "indicator": { - "radius": { "value": "0", "type": "dimension", "source": "$custom-checkbox-indicator-border-radius" } + "radius": { + "source": "$custom-checkbox-indicator-border-radius", + "$value": "0" + } } }, "radio": { + "$type": "percentage", "indicator": { - "radius": { "value": "50%", "type": "percentage", "source": "$custom-radio-indicator-border-radius" } + "radius": { + "source": "$custom-radio-indicator-border-radius", + "$value": "50%" + } } } } }, "grid": { - "gutter-width": { "value": "0.625rem", "type": "dimension", "source": "$form-grid-gutter-width" } + "$type": "dimension", + "gutter-width": { + "source": "$form-grid-gutter-width", + "$value": "0.625rem" + } }, "autosuggest": { + "$type": "dimension", "icon": { - "width": { "value": "2.4rem", "type": "dimension", "source": "$form-autosuggest-icon-width" }, + "width": { + "source": "$form-autosuggest-icon-width", + "$value": "2.4rem" + }, "height": { - "value": "{size.form.autosuggest.icon.width}", "type": "dimension", "source": "$form-autosuggest-icon-height" + "source": "$form-autosuggest-icon-height", + "$value": "{size.form.autosuggest.icon.width}" } }, "spinner": { - "width": { "value": "1.25rem", "type": "dimension", "source": "$form-autosuggest-spinner-width" }, + "width": { + "source": "$form-autosuggest-spinner-width", + "$value": "1.25rem" + }, "height": { - "value": "{size.form.autosuggest.spinner.width}", - "type": "dimension", - "source": "$form-autosuggest-spinner-height" + "source": "$form-autosuggest-spinner-height", + "$value": "{size.form.autosuggest.spinner.width}" } }, "border": { - "width": { "value": ".125rem", "type": "dimension", "source": "$form-autosuggest-border-width" } + "width": { + "source": "$form-autosuggest-border-width", + "$value": ".125rem" + } } }, "border": { + "$type": "dimension", "radius": { "check": { - "focus": { "value": ".0625rem", "type": "dimension", "source": "$form-check-focus-border-radius" } + "focus": { + "source": "$form-check-focus-border-radius", + "$value": ".0625rem" + } }, - "width": { "value": ".125rem", "type": "dimension", "source": "$form-check-border-width" } + "width": { + "source": "$form-check-border-width", + "$value": ".125rem" + } } }, "feedback": { + "$type": "dimension", "tooltip": { "border": { "radius": { - "value": "{size.border.radius.base}", - "type": "dimension", - "source": "$form-feedback-tooltip-border-radius" + "source": "$form-feedback-tooltip-border-radius", + "$value": "{size.border.radius.base}" } } } diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json index 207ceab897..087b9b9216 100644 --- a/tokens/src/core/components/Form/spacing.json +++ b/tokens/src/core/components/Form/spacing.json @@ -1,151 +1,189 @@ { + "$type": "dimension", "spacing": { "form": { "input": { "padding": { "y": { "base": { - "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$input-padding-y" + "source": "$input-padding-y", + "$value": "{spacing.input.btn.padding.y}" }, "sm": { - "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$input-padding-y-sm" + "source": "$input-padding-y-sm", + "$value": "{spacing.input.btn.padding.sm.y}" }, "lg": { - "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$input-padding-y-lg" + "source": "$input-padding-y-lg", + "$value": "{spacing.input.btn.padding.lg.y}" } }, "x": { "base": { - "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$input-padding-x" + "source": "$input-padding-x", + "$value": "{spacing.input.btn.padding.x}" }, "sm": { - "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$input-padding-x-sm" + "source": "$input-padding-x-sm", + "$value": "{spacing.input.btn.padding.sm.x}" }, "lg": { - "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$input-padding-x-lg" + "source": "$input-padding-x-lg", + "$value": "{spacing.input.btn.padding.lg.x}" } } }, "check": { - "gutter" : { "value": "1.25rem", "type": "dimension", "source": "$form-check-input-gutter" }, + "gutter": { + "source": "$form-check-input-gutter", + "$value": "1.25rem" + }, "margin": { "x": { - "base": { "value": ".25rem", "type": "dimension", "source": "$form-check-input-margin-x" }, - "inline": { "value": ".3125rem", "type": "dimension", "source": "$form-check-inline-input-margin-x" } + "base": { + "source": "$form-check-input-margin-x", + "$value": ".25rem" + }, + "inline": { + "source": "$form-check-inline-input-margin-x", + "$value": ".3125rem" + } }, - "y": { "value": ".3rem", "type": "dimension", "source": "$form-check-input-margin-y" } + "y": { + "source": "$form-check-input-margin-y", + "$value": ".3rem" + } } } }, "text": { "margin": { - "top": { "value": ".25rem", "type": "dimension", "source": "$form-text-margin-top" } + "top": { + "source": "$form-text-margin-top", + "$value": ".25rem" + } } }, "check": { "inline": { "margin": { - "x": { "value": ".75rem", "type": "dimension", "source": "$form-check-inline-margin-x" } + "x": { + "source": "$form-check-inline-margin-x", + "$value": ".75rem" + } } }, "position": { - "axis": { "value": ".375rem", "type": "dimension", "source": "$form-check-position-axis" } + "axis": { + "source": "$form-check-position-axis", + "$value": ".375rem" + } } }, "group": { "margin": { - "bottom": { "value": "1rem", "type": "dimension", "source": "$form-group-margin-bottom" } + "bottom": { + "source": "$form-group-margin-bottom", + "$value": "1rem" + } } }, "control": { - "gutter": { "value": ".5rem", "type": "dimension", "source": "$custom-control-gutter" }, + "gutter": { + "source": "$custom-control-gutter", + "$value": ".5rem" + }, "spacer": { - "x": { "value": "1rem", "type": "dimension", "source": "$custom-control-spacer-x" } + "x": { + "source": "$custom-control-spacer-x", + "$value": "1rem" + } }, "select": { "padding": { "y": { "base": { - "value": "{spacing.form.input.padding.y.base}", - "type": "dimension", - "source": "$custom-select-padding-y" + "source": "$custom-select-padding-y", + "$value": "{spacing.form.input.padding.y.base}" }, "sm": { - "value": "{spacing.form.input.padding.y.sm}", - "type": "dimension", - "source": "$custom-select-padding-y-sm" + "source": "$custom-select-padding-y-sm", + "$value": "{spacing.form.input.padding.y.sm}" }, "lg": { - "value": "{spacing.form.input.padding.y.lg}", - "type": "dimension", - "source": "$custom-select-padding-y-lg" + "source": "$custom-select-padding-y-lg", + "$value": "{spacing.form.input.padding.y.lg}" } }, "x": { "base": { - "value": "{spacing.form.input.padding.x.base}", - "type": "dimension", - "source": "$custom-select-padding-x" + "source": "$custom-select-padding-x", + "$value": "{spacing.form.input.padding.x.base}" }, "sm": { - "value": "{spacing.form.input.padding.x.sm}", - "type": "dimension", - "source": "$custom-select-padding-x-sm" + "source": "$custom-select-padding-x-sm", + "$value": "{spacing.form.input.padding.x.sm}" }, "lg": { - "value": "{spacing.form.input.padding.x.lg}", - "type": "dimension", - "source": "$custom-select-padding-x-lg" + "source": "$custom-select-padding-x-lg", + "$value": "{spacing.form.input.padding.x.lg}" } } }, "indicator": { - "padding": { "value": "1rem", "type": "dimension", "source": "$custom-select-indicator-padding" } + "padding": { + "source": "$custom-select-indicator-padding", + "$value": "1rem" + } }, "feedback": { "icon": { "padding": { "right": { - "value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", - "type": "dimension", - "source": "$custom-select-feedback-icon-padding-right" + "source": "$custom-select-feedback-icon-padding-right", + "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})" } }, "position": { - "value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", - "type": "dimension", - "source": "$custom-select-feedback-icon-position" + "source": "$custom-select-feedback-icon-position", + "$value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})" } }, "margin": { "top": { - "value": "{spacing.form.text.margin.top}", - "type": "dimension", - "source": "$form-feedback-margin-top" + "source": "$form-feedback-margin-top", + "$value": "{spacing.form.text.margin.top}" } }, "tooltip": { "padding": { - "y": { "value": ".25rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-x" } + "y": { + "source": "$form-feedback-tooltip-padding-y", + "$value": ".25rem" + }, + "x": { + "source": "$form-feedback-tooltip-padding-x", + "$value": ".5rem" + } } } }, "icon": { - "padding": { "value": ".5625rem", "type": "dimension", "source": "$select-icon-padding" } + "padding": { + "source": "$select-icon-padding", + "$value": ".5625rem" + } } }, "file": { "padding": { "y": { - "value": "{spacing.form.input.padding.y.base}", - "type": "dimension", - "source": "$custom-file-padding-y" + "source": "$custom-file-padding-y", + "$value": "{spacing.form.input.padding.y.base}" }, "x": { - "value": "{spacing.form.input.padding.x.base}", - "type": "dimension", - "source": "$custom-file-padding-x" + "source": "$custom-file-padding-x", + "$value": "{spacing.form.input.padding.x.base}" } } } diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json index 0cd752e9f9..735f9e5f5f 100644 --- a/tokens/src/core/components/Form/transition.json +++ b/tokens/src/core/components/Form/transition.json @@ -1,15 +1,14 @@ { + "$type": "transition", "transition": { "form": { "input": { - "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out", - "type": "transition", - "source": "$input-transition" + "source": "$input-transition", + "$value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out" }, - "control": { - "value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out", - "type": "transition", - "source": "$custom-forms-transition" + "control": { + "source": "$custom-forms-transition", + "$value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out" } } } diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json index 5974f22657..e61e2723ee 100644 --- a/tokens/src/core/components/Form/typography.json +++ b/tokens/src/core/components/Form/typography.json @@ -4,38 +4,44 @@ "input": { "font": { "family": { - "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$input-font-family" + "source": "$input-font-family", + "$value": "{typography.input.btn.font.family}", + "$type": "fontFamily" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$input-font-size" + "source": "$input-font-size", + "$value": "{typography.input.btn.font.size.base}" }, "sm": { - "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$input-font-size-sm" + "source": "$input-font-size-sm", + "$value": "{typography.input.btn.font.size.sm}" }, "lg": { - "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$input-font-size-lg" + "source": "$input-font-size-lg", + "$value": "{typography.input.btn.font.size.lg}" } }, "weight": { - "value": "{typography.font.weight.base}", "type": "fontWeight", "source": "$input-font-weight" + "source": "$input-font-weight", + "$value": "{typography.font.weight.base}", + "$type": "fontWeight" } }, "line-height": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.line-height.base}", - "type": "dimension", - "source": "$input-line-height" + "source": "$input-line-height", + "$value": "{typography.input.btn.line-height.base}" }, "sm": { - "value": "{typography.input.btn.line-height.sm}", - "type": "dimension", - "source": "$input-line-height-sm" + "source": "$input-line-height-sm", + "$value": "{typography.input.btn.line-height.sm}" }, "lg": { - "value": "{typography.input.btn.line-height.lg}", - "type": "dimension", - "source": "$input-line-height-lg" + "source": "$input-line-height-lg", + "$value": "{typography.input.btn.line-height.lg}" } } }, @@ -43,77 +49,75 @@ "select": { "font": { "family": { - "value": "{typography.form.input.font.family}", - "type": "fontFamily", - "source": "$custom-select-font-family" + "source": "$custom-select-font-family", + "$value": "{typography.form.input.font.family}", + "$type": "fontFamily" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.form.input.font.size.base}", - "type": "dimension", - "source": "$custom-select-font-size" + "source": "$custom-select-font-size", + "$value": "{typography.form.input.font.size.base}" }, "sm": { - "value": "{typography.form.input.font.size.sm}", - "type": "dimension", - "source": "$custom-select-font-size-sm" + "source": "$custom-select-font-size-sm", + "$value": "{typography.form.input.font.size.sm}" }, "lg": { - "value": "{typography.form.input.font.size.lg}", - "type": "dimension", - "source": "$custom-select-font-size-lg" + "source": "$custom-select-font-size-lg", + "$value": "{typography.form.input.font.size.lg}" } }, "weight": { - "value": "{typography.form.input.font.weight}", - "type": "fontWeight", - "source": "$custom-select-font-weight" + "source": "$custom-select-font-weight", + "$value": "{typography.form.input.font.weight}", + "$type": "fontWeight" } }, "line-height": { - "value": "{typography.form.input.line-height.base}", - "type": "dimension", - "source": "$custom-select-line-height" + "source": "$custom-select-line-height", + "$value": "{typography.form.input.line-height.base}", + "$type": "dimension" } }, "file": { "line-height": { - "value": "{typography.form.input.line-height.base}", - "type": "dimension", - "source": "$custom-file-line-height" + "source": "$custom-file-line-height", + "$value": "{typography.form.input.line-height.base}", + "$type": "dimension" }, "font": { - "family": { "value": "{typography.form.input.font.family}", - "type": "fontFamily", - "source": "$custom-file-font-family" }, + "family": { + "source": "$custom-file-font-family", + "$value": "{typography.form.input.font.family}", + "$type": "fontFamily" + }, "weight": { - "value": "{typography.form.input.font.weight}", - "type": "fontWeight", - "source": "$custom-file-font-weight" + "source": "$custom-file-font-weight", + "$value": "{typography.form.input.font.weight}", + "$type": "fontWeight" } } } }, "feedback": { + "$type": "dimension", "font": { "size": { - "value": "{typography.font.size.small.base}", - "type": "dimension", - "source": "$form-feedback-font-size" + "source": "$form-feedback-font-size", + "$value": "{typography.font.size.small.base}" } }, "tooltip": { "font": { "size": { - "value": "{typography.font.size.sm}", - "type": "dimension", - "source": "$form-feedback-tooltip-font-size" + "source": "$form-feedback-tooltip-font-size", + "$value": "{typography.font.size.sm}" } }, "line-height": { - "value": "{typography.line-height.base}", - "type": "dimension", - "source": "$form-feedback-tooltip-line-height" + "source": "$form-feedback-tooltip-line-height", + "$value": "{typography.line-height.base}" } } } diff --git a/tokens/src/core/components/Icon.json b/tokens/src/core/components/Icon.json index bb018fdffc..388673c966 100644 --- a/tokens/src/core/components/Icon.json +++ b/tokens/src/core/components/Icon.json @@ -1,11 +1,27 @@ { + "$type": "dimension", "size": { "icon": { - "inline": { "value": ".8em", "type": "dimension", "source": "$icon-inline" }, - "xs": { "value": "1rem", "type": "dimension", "source": "$icon-xs" }, - "sm": { "value": "1.25rem", "type": "dimension", "source": "$icon-sm" }, - "md": { "value": "1.5rem", "type": "dimension", "source": "$icon-md" }, - "lg": { "value": "1.75rem", "type": "dimension", "source": "$icon-lg" } + "inline": { + "source": "$icon-inline", + "$value": ".8em" + }, + "xs": { + "source": "$icon-xs", + "$value": "1rem" + }, + "sm": { + "source": "$icon-sm", + "$value": "1.25rem" + }, + "md": { + "source": "$icon-md", + "$value": "1.5rem" + }, + "lg": { + "source": "$icon-lg", + "$value": "1.75rem" + } } } } diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json index be573f9fc7..6d723d9c55 100644 --- a/tokens/src/core/components/IconButton.json +++ b/tokens/src/core/components/IconButton.json @@ -1,13 +1,19 @@ { + "$type": "dimension", "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" }, + "md": { + "source": "$btn-icon-diameter-md", + "$value": "2.75rem" + }, + "sm": { + "source": "$btn-icon-diameter-sm", + "$value": "2.25rem" + }, "inline": { - "value": "calc({typography.line-height.base} * 1em + .1em)", - "type": "dimension", - "source": "$btn-icon-diameter-inline" + "source": "$btn-icon-diameter-inline", + "$value": "calc({typography.line-height.base} * 1em + .1em)" } } } diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json index 5e388523de..aa2a189e00 100644 --- a/tokens/src/core/components/Image.json +++ b/tokens/src/core/components/Image.json @@ -1,27 +1,40 @@ { "typography": { + "$type": "percentage", "image": { "figure-caption": { - "font-size": { "value": "90%", "type": "percentage", "source": "$figure-caption-font-size" } + "font-size": { + "source": "$figure-caption-font-size", + "$value": "90%" + } } } }, "size": { + "$type": "dimension", "image": { "thumbnail": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$thumbnail-border-width" }, + "width": { + "source": "$thumbnail-border-width", + "$value": "{size.border.width}" + }, "radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$thumbnail-border-radius" + "source": "$thumbnail-border-radius", + "$value": "{size.border.radius.base}" } } } } }, "spacing": { + "$type": "dimension", "image": { "thumbnail": { - "padding": { "value": ".25rem", "type": "dimension", "source": "$thumbnail-padding" } + "padding": { + "source": "$thumbnail-padding", + "$value": ".25rem" + } } } } diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json index 8451663fd9..49cf09727c 100644 --- a/tokens/src/core/components/Menu.json +++ b/tokens/src/core/components/Menu.json @@ -1,15 +1,28 @@ { "spacing": { + "$type": "dimension", "menu": { "item": { "padding": { - "x": { "value": "{spacing.btn.padding.x.base}", "type": "dimension", "source": "$menu-item-padding-x" }, - "y": { "value": "{spacing.btn.padding.y.base}", "type": "dimension", "source": "$menu-item-padding-y" } + "x": { + "source": "$menu-item-padding-x", + "$value": "{spacing.btn.padding.x.base}" + }, + "y": { + "source": "$menu-item-padding-y", + "$value": "{spacing.btn.padding.y.base}" + } }, "icon": { "margin": { - "left": { "value": ".25em", "type": "dimension", "source": "$menu-item-icon-margin-left" }, - "right": { "value": "{spacing.menu.item.icon.margin.left}", "type": "dimension", "source": "$menu-item-icon-margin-right" } + "left": { + "source": "$menu-item-icon-margin-left", + "$value": ".25em" + }, + "right": { + "source": "$menu-item-icon-margin-right", + "$value": "{spacing.menu.item.icon.margin.left}" + } } } } @@ -20,27 +33,54 @@ "select": { "btn-link": { "text-decoration": { - "line": { "value": "underline", "type": "textDecoration", "source": "$menu-select-btn-link-text-decoration-line" }, - "thickness": { "value": ".125rem", "type": "dimension", "source": "$menu-select-btn-link-text-decoration-thickness" } + "line": { + "source": "$menu-select-btn-link-text-decoration-line", + "$value": "underline", + "$type": "textDecoration" + }, + "thickness": { + "source": "$menu-select-btn-link-text-decoration-thickness", + "$value": ".125rem", + "$type": "dimension" + } } } } } }, "size": { + "$type": "dimension", "menu": { "base": { - "border-radius": { "value": ".25em", "type": "dimension", "source": "$menu-border-radius" }, - "max-height": { "value": "16.813rem", "type": "dimension", "source": "$menu-max-height" } + "border-radius": { + "source": "$menu-border-radius", + "$value": ".25em" + }, + "max-height": { + "source": "$menu-max-height", + "$value": "16.813rem" + } }, "item": { - "height": { "value": "3rem", "type": "dimension", "source": "$menu-item-height" }, + "height": { + "source": "$menu-item-height", + "$value": "3rem" + }, "width": { - "base": { "value": "19rem", "type": "dimension", "source": "$menu-item-width" }, - "xs": { "value": "13.438rem", "type": "dimension", "source": "$menu-item-width-xs" } + "base": { + "source": "$menu-item-width", + "$value": "19rem" + }, + "xs": { + "source": "$menu-item-width-xs", + "$value": "13.438rem" + } }, "border": { - "width": { "value": "{size.btn.border.width}", "type": "dimension", "source": "$menu-item-border-width" } + "width": { + "source": "$menu-item-border-width", + "$value": "{size.btn.border.width}" + } } } } diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json index a8322e6484..fda53a1221 100644 --- a/tokens/src/core/components/Modal.json +++ b/tokens/src/core/components/Modal.json @@ -1,47 +1,85 @@ { "elevation": { + "$type": "ratio", "modal": { - "backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" }, - "zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" } + "backdrop-zindex": { + "source": "$zindex-modal-backdrop", + "$value": "1040" + }, + "zindex": { + "source": "$zindex-modal", + "$value": "1050" + } } }, "size": { + "$type": "dimension", "modal": { - "xl": { "value": "1140px", "type": "dimension", "source": "$modal-xl" }, - "lg": { "value": "800px", "type": "dimension", "source": "$modal-lg" }, - "md": { "value": "500px", "type": "dimension", "source": "$modal-md" }, - "sm": { "value": "400px", "type": "dimension", "source": "$modal-sm" }, + "xl": { + "source": "$modal-xl", + "$value": "1140px" + }, + "lg": { + "source": "$modal-lg", + "$value": "800px" + }, + "md": { + "source": "$modal-md", + "$value": "500px" + }, + "sm": { + "source": "$modal-sm", + "$value": "400px" + }, "content-border": { - "width": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" }, + "width": { + "source": "$modal-content-border-width", + "$value": "0px" + }, "radius": { - "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius" + "source": "$modal-content-border-radius", + "$value": "{size.border.radius.lg}" } } } }, "spacing": { + "$type": "dimension", "modal": { "inner-padding": { - "base": { "value": "1.5rem", "type": "dimension", "source": "$modal-inner-padding" }, - "bottom": { "value": ".7rem", "type": "dimension", "source": "$modal-inner-padding-bottom" } + "base": { + "source": "$modal-inner-padding", + "$value": "1.5rem" + }, + "bottom": { + "source": "$modal-inner-padding-bottom", + "$value": ".7rem" + } }, "footer-padding": { "base": { - "value": "{spacing.modal.footer-padding.y} 1.5rem", - "type": "dimension", - "source": "$modal-footer-padding" + "source": "$modal-footer-padding", + "$value": "{spacing.modal.footer-padding.y} 1.5rem" }, - "y": { "value": "1rem", "type": "dimension", "source": "$modal-footer-padding-y" } + "y": { + "source": "$modal-footer-padding-y", + "$value": "1rem" + } }, "header-padding": { "base": { - "value": "{spacing.modal.header-padding.y} 1.5rem", - "type": "dimension", - "source": "$modal-header-padding" + "source": "$modal-header-padding", + "$value": "{spacing.modal.header-padding.y} 1.5rem" }, - "y": { "value": "1rem", "type": "dimension", "source": "$modal-header-padding-y" } + "y": { + "source": "$modal-header-padding-y", + "$value": "1rem" + } }, - "dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" } + "dialog-margin": { + "source": "$modal-dialog-margin", + "$value": "1.5rem" + } } } } diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json index 4f4de47f4c..72b95837e2 100644 --- a/tokens/src/core/components/Nav.json +++ b/tokens/src/core/components/Nav.json @@ -2,50 +2,85 @@ "typography": { "nav": { "link": { - "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" }, - "text-decoration": { "value": "none", "type": "textDecoration" } + "font-weight": { + "source": "$nav-link-font-weight", + "$value": "500", + "$type": "fontWeight" + }, + "text-decoration": { + "$value": "none", + "$type": "textDecoration" + } } } }, "size": { + "$type": "dimension", "nav": { "pills": { - "border-radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" }, + "border-radius": { + "source": "$nav-pills-border-radius", + "$value": "{size.border.radius.base}" + }, "link": { - "border-width": { "value": "1px", "type": "dimension", "source": "$nav-pills-link-border-width" } + "border-width": { + "source": "$nav-pills-link-border-width", + "$value": "1px" + } }, "inverse-link": { - "border-width": { "value": "{size.nav.pills.link.border-width}", "type": "dimension", "source": "$nav-inverse-pills-link-border-width" } + "border-width": { + "source": "$nav-inverse-pills-link-border-width", + "$value": "{size.nav.pills.link.border-width}" + } } }, "tabs": { "link": { "border-bottom": { - "width": { "value": ".188rem", "type": "dimension", "source": "$nav-tabs-link-border-bottom-width" } + "width": { + "source": "$nav-tabs-link-border-bottom-width", + "$value": ".188rem" + } } }, "inverse-link": { "active-border-bottom-width": { - "value": "{size.nav.tabs.link.border-bottom.width}", - "type": "dimension", - "source": "$nav-inverse-tabs-link-active-border-bottom-width" + "source": "$nav-inverse-tabs-link-active-border-bottom-width", + "$value": "{size.nav.tabs.link.border-bottom.width}" } }, "border": { - "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" }, - "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" } + "width": { + "source": "$nav-tabs-border-width", + "$value": "2px" + }, + "radius": { + "source": "$nav-tabs-border-radius", + "$value": "0" + } } } } }, "spacing": { + "$type": "dimension", "nav": { "link": { "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" } + "y": { + "source": "$nav-link-padding-y", + "$value": ".5rem" + }, + "x": { + "source": "$nav-link-padding-x", + "$value": "1rem" + } }, - "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" } + "distance-to-border": { + "source": "$nav-tabs-link-distance-to-border", + "$value": "4px" + } } } } diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json index 4dd3062b49..f865691dc5 100644 --- a/tokens/src/core/components/Navbar.json +++ b/tokens/src/core/components/Navbar.json @@ -1,26 +1,41 @@ { + "$type": "dimension", "spacing": { "navbar": { "padding": { - "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" }, + "y": { + "source": "$navbar-padding-y", + "$value": "calc({spacing.spacer.base} / 2)" + }, "x": { - "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" }, - "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" } + "base": { + "source": "$navbar-padding-x", + "$value": "{spacing.spacer.base}" + }, + "nav-link": { + "source": "$navbar-nav-link-padding-x", + "$value": ".5rem" + } } }, "brand": { "padding": { "y": { - "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)", - "type": "dimension", - "source": "$navbar-brand-padding-y" + "source": "$navbar-brand-padding-y", + "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" } } }, "toggler": { "padding": { - "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" }, - "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" } + "y": { + "source": "$navbar-toggler-padding-y", + "$value": ".25rem" + }, + "x": { + "source": "$navbar-toggler-padding-x", + "$value": ".75rem" + } } } } @@ -29,19 +44,20 @@ "navbar": { "brand": { "font-size": { - "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size" + "source": "$navbar-brand-font-size", + "$value": "{typography.font.size.lg}" } }, "nav-link": { "height": { - "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)", - "type": "dimension", - "source": "$nav-link-height" + "source": "$nav-link-height", + "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" } }, "toggler": { "font-size": { - "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size" + "source": "$navbar-toggler-font-size", + "$value": "{typography.font.size.lg}" } } } @@ -50,19 +66,22 @@ "navbar": { "nav": { "scroll": { - "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" } + "max-height": { + "source": "$navbar-nav-scroll-max-height", + "$value": "75vh" + } } }, "brand": { "height": { - "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})", - "type": "dimension", - "source": "$navbar-brand-height" + "source": "$navbar-brand-height", + "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" } }, "toggler": { "border-radius": { - "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius" + "source": "$navbar-toggler-border-radius", + "$value": "{size.btn.border.radius.base}" } } } diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json index 691f063515..0f5402f498 100644 --- a/tokens/src/core/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -1,24 +1,49 @@ { + "$type": "dimension", "typography": { "pagination": { "font-size": { - "sm": { "value": ".875rem", "type": "dimension", "source": "$pagination-font-size-sm" } + "sm": { + "source": "$pagination-font-size-sm", + "$value": ".875rem" + } }, - "line-height": { "value": "1.5rem", "type": "dimension", "source": "$pagination-line-height" } + "line-height": { + "source": "$pagination-line-height", + "$value": "1.5rem" + } } }, "spacing": { "pagination": { "padding": { "y": { - "base": { "value": ".625rem", "type": "dimension", "source": "$pagination-padding-y" }, - "sm": { "value": ".8rem", "type": "dimension", "source": "$pagination-padding-y-sm" }, - "lg": { "value": ".75rem", "type": "dimension", "source": "$pagination-padding-y-lg" } + "base": { + "source": "$pagination-padding-y", + "$value": ".625rem" + }, + "sm": { + "source": "$pagination-padding-y-sm", + "$value": ".8rem" + }, + "lg": { + "source": "$pagination-padding-y-lg", + "$value": ".75rem" + } }, "x": { - "base": { "value": "1rem", "type": "dimension", "source": "$pagination-padding-x" }, - "sm": { "value": ".6rem", "type": "dimension", "source": "$pagination-padding-x-sm" }, - "lg": { "value": "1.5rem", "type": "dimension", "source": "$pagination-padding-x-lg" } + "base": { + "source": "$pagination-padding-x", + "$value": "1rem" + }, + "sm": { + "source": "$pagination-padding-x-sm", + "$value": ".6rem" + }, + "lg": { + "source": "$pagination-padding-x-lg", + "$value": "1.5rem" + } } } } @@ -26,40 +51,72 @@ "size": { "pagination": { "icon": { - "width": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-width" }, - "height": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-height" } + "width": { + "source": "$pagination-icon-width", + "$value": "2.25rem" + }, + "height": { + "source": "$pagination-icon-height", + "$value": "2.25rem" + } }, "secondary": { "height": { - "base": { "value": "2.75rem", "type": "dimension", "source": "$pagination-secondary-height" }, - "sm": { "value": "2.25rem", "type": "dimension", "source": "$pagination-secondary-height-sm" } + "base": { + "source": "$pagination-secondary-height", + "$value": "2.75rem" + }, + "sm": { + "source": "$pagination-secondary-height-sm", + "$value": "2.25rem" + } } }, "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$pagination-border-width" }, + "width": { + "source": "$pagination-border-width", + "$value": "{size.border.width}" + }, "radius": { "sm": { - "value": "{size.border.radius.sm}", "type": "dimension", "source": "$pagination-border-radius-sm" + "source": "$pagination-border-radius-sm", + "$value": "{size.border.radius.sm}" }, "lg": { - "value": "{size.border.radius.lg}", "type": "dimension", "source": "$pagination-border-radius-lg" + "source": "$pagination-border-radius-lg", + "$value": "{size.border.radius.lg}" } } }, "reduced": { "dropdown": { - "max-height": { "value": "60vh", "type": "dimension", "source": "$pagination-reduced-dropdown-max-height" }, - "min-width": { "value": "6rem", "type": "dimension", "source": "$pagination-reduced-dropdown-min-width" } + "max-height": { + "source": "$pagination-reduced-dropdown-max-height", + "$value": "60vh" + }, + "min-width": { + "source": "$pagination-reduced-dropdown-min-width", + "$value": "6rem" + } } }, "toggle": { "border": { - "base": { "value": ".3125rem", "type": "dimension", "source": "$pagination-toggle-border" }, - "sm": { "value": ".25rem", "type": "dimension", "source": "$pagination-toggle-border-sm" } + "base": { + "source": "$pagination-toggle-border", + "$value": ".3125rem" + }, + "sm": { + "source": "$pagination-toggle-border-sm", + "$value": ".25rem" + } } }, "focus": { - "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" } + "outline": { + "source": "$pagination-focus-outline", + "$value": "0" + } } } } diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json index b2f2c7e929..54aba2468a 100644 --- a/tokens/src/core/components/Popover.json +++ b/tokens/src/core/components/Popover.json @@ -1,47 +1,93 @@ { "typography": { + "$type": "dimension", "popover": { - "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" } + "font-size": { + "source": "$popover-font-size", + "$value": "{typography.font.size.sm}" + } } }, "size": { + "$type": "dimension", "popover": { - "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" }, + "max-width": { + "source": "$popover-max-width", + "$value": "480px" + }, "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$popover-border-width" }, - "radius": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$popover-border-radius" } + "width": { + "source": "$popover-border-width", + "$value": "{size.border.width}" + }, + "radius": { + "source": "$popover-border-radius", + "$value": "{size.border.radius.sm}" + } }, "icon": { - "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" }, - "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" } + "height": { + "source": "$popover-icon-height", + "$value": "1rem" + }, + "width": { + "source": "$popover-icon-width", + "$value": "1rem" + } }, "arrow": { - "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" }, - "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" } + "width": { + "source": "$popover-arrow-width", + "$value": "1rem" + }, + "height": { + "source": "$popover-arrow-height", + "$value": ".5rem" + } } } }, "elevation": { + "$type": "ratio", "popover": { - "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" } + "zindex": { + "source": "$zindex-popover", + "$value": "1060" + } } }, "spacing": { + "$type": "dimension", "popover": { "header": { "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" } + "y": { + "source": "$popover-header-padding-y", + "$value": ".5rem" + }, + "x": { + "source": "$popover-header-padding-x", + "$value": "1rem" + } } }, "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" } + "y": { + "source": "$popover-body-padding-y", + "$value": "{spacing.popover.header.padding.y}" + }, + "x": { + "source": "$popover-body-padding-x", + "$value": "{spacing.popover.header.padding.x}" + } } }, "icon": { - "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" } + "margin-right": { + "source": "$popover-icon-margin-right", + "$value": ".5rem" + } } } } diff --git a/tokens/src/core/components/ProductTour.json b/tokens/src/core/components/ProductTour.json index 772e194f69..3ae503b471 100644 --- a/tokens/src/core/components/ProductTour.json +++ b/tokens/src/core/components/ProductTour.json @@ -1,31 +1,43 @@ { "size": { + "$type": "dimension", "product-tour": { "checkpoint": { "width": { - "border": { "value": "8px", "type": "dimension", "source": "$checkpoint-border-width" }, - "arrow": { "value": "15px", "type": "dimension", "source": "$checkpoint-arrow-width" }, - "max": { "value": "480px", "type": "dimension", "source": "$checkpoint-max-width" } + "border": { + "source": "$checkpoint-border-width", + "$value": "8px" + }, + "arrow": { + "source": "$checkpoint-arrow-width", + "$value": "15px" + }, + "max": { + "source": "$checkpoint-max-width", + "$value": "480px" + } }, "arrow": { "top": { - "value": "{size.product-tour.checkpoint.width.arrow}", - "type": "dimension", - "source": "$checkpoint-arrow-border-top" + "source": "$checkpoint-arrow-border-top", + "$value": "{size.product-tour.checkpoint.width.arrow}" }, "transparent": { - "value": "{size.product-tour.checkpoint.width.arrow}", - "type": "dimension", - "source": "$checkpoint-arrow-border-transparent" + "source": "$checkpoint-arrow-border-transparent", + "$value": "{size.product-tour.checkpoint.width.arrow}" } } } } }, "elevation": { + "$type": "ratio", "product-tour": { "checkpoint": { - "zindex": { "value": "1060", "type": "ratio", "source": "$checkpoint-z-index" } + "zindex": { + "source": "$checkpoint-z-index", + "$value": "1060" + } } } } diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json index 82a0626871..307e0a3167 100644 --- a/tokens/src/core/components/ProgressBar.json +++ b/tokens/src/core/components/ProgressBar.json @@ -1,38 +1,65 @@ { "typography": { + "$type": "dimension", "progress-bar": { "font-size": { - "value": "calc({typography.font.size.base} * .75)", "type": "dimension", "source": "$progress-font-size" + "source": "$progress-font-size", + "$value": "calc({typography.font.size.base} * .75)" } } }, "size": { + "$type": "dimension", "progress-bar": { "height": { - "base": { "value": "1rem", "type": "dimension", "source": "$progress-height" }, - "annotated": { "value": ".3125rem", "type": "dimension", "source": "$annotated-progress-height" } + "base": { + "source": "$progress-height", + "$value": "1rem" + }, + "annotated": { + "source": "$annotated-progress-height", + "$value": ".3125rem" + } }, "border": { - "width": { "value": "1px", "type": "dimension", "source": "$progress-bar-border-width" }, - "radius": { "value": "0", "type": "dimension", "source": "$progress-border-radius" } + "width": { + "source": "$progress-bar-border-width", + "$value": "1px" + }, + "radius": { + "source": "$progress-border-radius", + "$value": "0" + } }, - "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" } + "threshold-circle": { + "source": "$progress-threshold-circle", + "$value": ".5625rem" + } } }, "spacing": { + "$type": "dimension", "progress-bar": { "hint": { - "annotation-gap": { "value": ".5rem", "type": "dimension", "source": "$progress-hint-annotation-gap" } + "annotation-gap": { + "source": "$progress-hint-annotation-gap", + "$value": ".5rem" + } } } }, "transition": { + "$type": "transition", "progress-bar": { "bar": { "animation-timing": { - "value": "1s linear infinite", "type": "transition", "source": "$progress-bar-animation-timing" + "source": "$progress-bar-animation-timing", + "$value": "1s linear infinite" }, - "transition": { "value": "width .6s ease", "type": "transition", "source": "$progress-bar-transition" } + "transition": { + "source": "$progress-bar-transition", + "$value": "width .6s ease" + } } } } diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json index 75eb4ec290..0e1170d3fc 100644 --- a/tokens/src/core/components/SearchField.json +++ b/tokens/src/core/components/SearchField.json @@ -1,23 +1,35 @@ { + "$type": "dimension", "size": { "search-field": { "border": { "width": { - "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" }, - "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" } + "base": { + "source": "$search-border-width", + "$value": ".0625rem" + }, + "focus": { + "source": "$search-border-focus-width", + "$value": ".3125rem" + } }, - "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" } + "radius": { + "source": "$search-border-radius", + "$value": "0" + } }, "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" + "source": "$input-height-search", + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" } } }, "spacing": { "search-field": { - "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" } + "margin-button": { + "source": "$search-button-margin", + "$value": ".5rem" + } } } } diff --git a/tokens/src/core/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json index aa4c0a71ab..bf54815ed9 100644 --- a/tokens/src/core/components/SelectableBox.json +++ b/tokens/src/core/components/SelectableBox.json @@ -1,9 +1,19 @@ { + "$type": "dimension", "spacing": { "selectable-box": { - "padding": { "value": "1rem", "type": "dimension", "source": "$selectable-box-padding" }, - "border-radius": { "value": ".25rem", "type": "dimension", "source": "$selectable-box-border-radius" }, - "box-space": { "value": ".75rem", "type": "dimension", "source": "$selectable-box-space" } + "padding": { + "source": "$selectable-box-padding", + "$value": "1rem" + }, + "border-radius": { + "source": "$selectable-box-border-radius", + "$value": ".25rem" + }, + "box-space": { + "source": "$selectable-box-space", + "$value": ".75rem" + } } } } diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json index 86b7358b82..40c116dba5 100644 --- a/tokens/src/core/components/Sheet.json +++ b/tokens/src/core/components/Sheet.json @@ -1,9 +1,16 @@ { + "$type": "ratio", "elevation": { "sheet": { "zindex": { - "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" }, - "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" } + "backdrop": { + "source": "$zindex-sheet-backdrop", + "$value": "1031" + }, + "main": { + "source": "$zindex-sheet", + "$value": "1032" + } } } } diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json index 2c642554bf..b7e780d290 100644 --- a/tokens/src/core/components/Spinner.json +++ b/tokens/src/core/components/Spinner.json @@ -1,19 +1,41 @@ { + "$type": "dimension", "size": { "spinner": { "base": { - "width": { "value": "2rem", "type": "dimension", "source": "$spinner-width" }, - "height": { "value": "{size.spinner.base.width}", "type": "dimension", "source": "$spinner-height" }, - "border-width": { "value": ".25em", "type": "dimension", "source": "$spinner-border-width" } + "width": { + "source": "$spinner-width", + "$value": "2rem" + }, + "height": { + "source": "$spinner-height", + "$value": "{size.spinner.base.width}" + }, + "border-width": { + "source": "$spinner-border-width", + "$value": ".25em" + } }, "sm": { - "width": { "value": "1rem", "type": "dimension", "source": "$spinner-width-sm" }, - "height": { "value": "{size.spinner.sm.width}", "type": "dimension", "source": "$spinner-height-sm" }, - "border-width": { "value": ".2em", "type": "dimension", "source": "$spinner-border-width-sm" } + "width": { + "source": "$spinner-width-sm", + "$value": "1rem" + }, + "height": { + "source": "$spinner-height-sm", + "$value": "{size.spinner.sm.width}" + }, + "border-width": { + "source": "$spinner-border-width-sm", + "$value": ".2em" + } } } }, "spacing": { - "vertical-align": { "value": ".125em", "type": "dimension", "source": "$spinner-vertical-align" } + "vertical-align": { + "source": "$spinner-vertical-align", + "$value": ".125em" + } } } diff --git a/tokens/src/core/components/Stack.json b/tokens/src/core/components/Stack.json index 8faa1f01ff..13a392432a 100644 --- a/tokens/src/core/components/Stack.json +++ b/tokens/src/core/components/Stack.json @@ -1,7 +1,11 @@ { + "$type": "dimension", "size": { "stack": { - "gap": { "value": "0", "type": "dimension", "source": "$stack-gap" } + "gap": { + "source": "$stack-gap", + "$value": "0" + } } } } diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json index 27b3e77b5c..327c650204 100644 --- a/tokens/src/core/components/Stepper.json +++ b/tokens/src/core/components/Stepper.json @@ -1,21 +1,38 @@ { + "$type": "dimension", "spacing": { "stepper": { "header": { "padding": { - "y": { "value": ".75rem", "type": "dimension", "source": "$stepper-header-padding-y" }, - "x": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$stepper-header-padding-x" } + "y": { + "source": "$stepper-header-padding-y", + "$value": ".75rem" + }, + "x": { + "source": "$stepper-header-padding-x", + "$value": "{spacing.spacer.base}" + } }, "step": { "padding": { - "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-padding" + "source": "$stepper-header-step-padding", + "$value": ".25rem" }, "list": { "padding": { - "y": { "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-list-padding-y" }, - "x": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-padding-x" } + "y": { + "source": "$stepper-header-step-list-padding-y", + "$value": ".25rem" + }, + "x": { + "source": "$stepper-header-step-list-padding-x", + "$value": "0" + } }, - "margin": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-margin" } + "margin": { + "source": "$stepper-header-step-list-margin", + "$value": "0" + } } } } @@ -24,19 +41,29 @@ "size": { "stepper": { "header": { - "height-min": { "value": "5.13rem", "type": "dimension", "source": "$stepper-header-min-height" } + "height-min": { + "source": "$stepper-header-min-height", + "$value": "5.13rem" + } }, "step": { - "width-min": { "value": "0", "type": "dimension", "source": "$stepper-header-step-min-width" }, + "width-min": { + "source": "$stepper-header-step-min-width", + "$value": "0" + }, "bubble-error-shadow-width": { - "value": "3px", "type": "dimension", "source": "$stepper-header-step-error-bubble-shadow-width" + "source": "$stepper-header-step-error-bubble-shadow-width", + "$value": "3px" } } } }, "typography": { "spacer": { - "line-height": { "value": "1px", "type": "dimension", "source": "$stepper-header-line-height" } + "line-height": { + "source": "$stepper-header-line-height", + "$value": "1px" + } } } } diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json index 9246a1e8d4..ad8f333ea3 100644 --- a/tokens/src/core/components/Sticky.json +++ b/tokens/src/core/components/Sticky.json @@ -1,7 +1,11 @@ { + "$type": "dimension", "spacing": { "sticky": { - "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" } + "offset": { + "source": "$sticky-offset", + "$value": "0" + } } } } diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json index 4413acf5da..d919d5461a 100644 --- a/tokens/src/core/components/Tab.json +++ b/tokens/src/core/components/Tab.json @@ -1,19 +1,41 @@ { + "$type": "dimension", "spacing": { "tab": { "more-link-dropdown-toggle": { - "padding-x": { "value": ".7rem", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-x" }, - "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-y" } + "padding-x": { + "source": "$tab-more-link-dropdown-toggle-padding-x", + "$value": ".7rem" + }, + "padding-y": { + "source": "$tab-more-link-dropdown-toggle-padding-y", + "$value": "{spacing.spacer.base}" + } }, "inverse-pills-link-dropdown-toggle": { - "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x" }, - "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y" } + "padding-x": { + "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x", + "$value": ".625rem" + }, + "padding-y": { + "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y", + "$value": "{spacing.spacer.base}" + } }, "inverse-tabs-link-dropdown-toggle": { - "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" }, - "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" }, - "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" } + "padding-x": { + "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x", + "$value": ".625rem" + }, + "padding-y": { + "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y", + "$value": "{spacing.spacer.base}" + }, + "distance": { + "source": "$tab-inverse-pills-link-dropdown-distance", + "$value": "5px" + } } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json index 47a480abb6..457d387178 100644 --- a/tokens/src/core/components/Tabs.json +++ b/tokens/src/core/components/Tabs.json @@ -1,9 +1,16 @@ { + "$type": "dimension", "size": { "tabs": { "notification": { - "height": { "value": "1rem", "type": "dimension", "source": "$tab-notification-height" }, - "width": { "value": "1rem", "type": "dimension", "source": "$tab-notification-width" } + "height": { + "source": "$tab-notification-height", + "$value": "1rem" + }, + "width": { + "source": "$tab-notification-width", + "$value": "1rem" + } } } }, @@ -11,9 +18,10 @@ "tabs": { "notification": { "font-size": { - "value": "{typography.font.size.xs}", "type": "dimension", "source": "$tab-notification-font-size" + "source": "$tab-notification-font-size", + "$value": "{typography.font.size.xs}" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json index c375011455..ef7511a4a0 100644 --- a/tokens/src/core/components/Toast.json +++ b/tokens/src/core/components/Toast.json @@ -1,28 +1,53 @@ { + "$type": "dimension", "typography": { "toast": { - "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" } + "font-size": { + "source": "$toast-font-size", + "$value": ".875rem" + } } }, "size": { "toast": { - "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" }, + "max-width": { + "source": "$toast-max-width", + "$value": "400px" + }, "border": { - "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" }, - "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" } + "width": { + "source": "$toast-border-width", + "$value": "1px" + }, + "radius": { + "source": "$toast-border-radius", + "$value": ".25rem" + } } } }, "spacing": { "toast": { "padding": { - "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" }, - "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" } + "x": { + "source": "$toast-padding-x", + "$value": ".75rem" + }, + "y": { + "source": "$toast-padding-y", + "$value": ".25rem" + } }, "container": { "gutter": { - "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" }, - "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" } + "lg": { + "source": "$toast-container-gutter-lg", + "$value": "1.25rem" + }, + "sm": { + "source": "$toast-container-gutter-sm", + "$value": ".625rem" + } } } } diff --git a/tokens/src/core/components/Tooltip.json b/tokens/src/core/components/Tooltip.json index 664263b894..9cbc9c09bf 100644 --- a/tokens/src/core/components/Tooltip.json +++ b/tokens/src/core/components/Tooltip.json @@ -1,32 +1,61 @@ { "typography": { + "$type": "dimension", "tooltip": { - "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$tooltip-font-size" } + "font-size": { + "source": "$tooltip-font-size", + "$value": "{typography.font.size.sm}" + } } }, "spacing": { + "$type": "dimension", "tooltip": { "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-x" } + "y": { + "source": "$tooltip-padding-y", + "$value": ".5rem" + }, + "x": { + "source": "$tooltip-padding-x", + "$value": ".5rem" + } }, - "margin": { "value": "0", "type": "dimension", "source": "$tooltip-margin" } + "margin": { + "source": "$tooltip-margin", + "$value": "0" + } } }, "elevation": { + "$type": "ratio", "tooltip": { - "zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" } + "zindex": { + "source": "$zindex-tooltip", + "$value": "1070" + } } }, "size": { + "$type": "dimension", "tooltip": { - "max-width": { "value": "200px", "type": "dimension", "source": "$tooltip-max-width" }, + "max-width": { + "source": "$tooltip-max-width", + "$value": "200px" + }, "arrow": { - "height": { "value": ".4rem", "type": "dimension", "source": "$tooltip-arrow-height" }, - "width": { "value": ".8rem", "type": "dimension", "source": "$tooltip-arrow-width" } + "height": { + "source": "$tooltip-arrow-height", + "$value": ".4rem" + }, + "width": { + "source": "$tooltip-arrow-width", + "$value": ".8rem" + } }, "border-radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-border-radius" + "source": "$tooltip-border-radius", + "$value": "{size.border.radius.base}" } } } diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json index b9e9fdac9c..7770844e1e 100644 --- a/tokens/src/core/components/general/caret.json +++ b/tokens/src/core/components/general/caret.json @@ -1,13 +1,23 @@ { + "$type": "dimension", "size": { "caret": { - "width": { "value": ".3em", "type": "dimension", "source": "$caret-width" } + "width": { + "source": "$caret-width", + "$value": ".3em" + } } }, "spacing": { "caret": { - "base": { "value": ".255em", "type": "dimension", "source": "$caret-spacing" }, - "vertical-align": { "value": ".255em", "type": "dimension", "source": "$caret-vertical-align" } + "base": { + "source": "$caret-spacing", + "$value": ".255em" + }, + "vertical-align": { + "source": "$caret-vertical-align", + "$value": ".255em" + } } } } diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json index 045e188af2..558fd39063 100644 --- a/tokens/src/core/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -2,15 +2,31 @@ "typography": { "headings": { "font": { - "family": { "value": "inherit", "type": "fontFamily", "source": "$headings-font-family" }, - "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$headings-font-weight" } + "family": { + "source": "$headings-font-family", + "$value": "inherit", + "$type": "fontFamily" + }, + "weight": { + "source": "$headings-font-weight", + "$value": "{typography.font.weight.bold}", + "$type": "fontWeight" + } }, - "line-height": { "value": "1.25", "type": "dimension", "source": "$headings-line-height" } + "line-height": { + "source": "$headings-line-height", + "$value": "1.25", + "$type": "dimension" + } } }, "spacing": { + "$type": "dimension", "headings": { - "margin-bottom": { "value": ".5rem", "type": "dimension", "source": "$headings-margin-bottom" } + "margin-bottom": { + "source": "$headings-margin-bottom", + "$value": ".5rem" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/general/hr.json b/tokens/src/core/components/general/hr.json index 2bb05ca012..84fc96109a 100644 --- a/tokens/src/core/components/general/hr.json +++ b/tokens/src/core/components/general/hr.json @@ -1,9 +1,16 @@ { + "$type": "dimension", "size": { "hr": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$hr-border-width" }, - "margin-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$hr-margin-y" } + "width": { + "source": "$hr-border-width", + "$value": "{size.border.width}" + }, + "margin-y": { + "source": "$hr-margin-y", + "$value": "{spacing.spacer.base}" + } } } } diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json index 821dc85692..36042d0f11 100644 --- a/tokens/src/core/components/general/input.json +++ b/tokens/src/core/components/general/input.json @@ -3,48 +3,94 @@ "input": { "btn": { "font": { - "family": { "value": "inherit", "type": "fontFamily", "source": "$input-btn-font-family" }, + "family": { + "source": "$input-btn-font-family", + "$value": "inherit", + "$type": "fontFamily" + }, "size": { - "base": { "value": "1.125rem", "type": "dimension", "source": "$input-btn-font-size" }, - "sm": { "value": ".875rem", "type": "dimension", "source": "$input-btn-font-size-sm" }, - "lg": { "value": "1.325rem", "type": "dimension", "source": "$input-btn-font-size-lg" } + "$type": "dimension", + "base": { + "source": "$input-btn-font-size", + "$value": "1.125rem" + }, + "sm": { + "source": "$input-btn-font-size-sm", + "$value": ".875rem" + }, + "lg": { + "source": "$input-btn-font-size-lg", + "$value": "1.325rem" + } } }, "line-height": { - "base": { "value": "1.3333", "type": "dimension", "source": "$input-btn-line-height" }, - "sm": { "value": "1.4286", "type": "dimension", "source": "$input-btn-line-height-sm" }, + "$type": "dimension", + "base": { + "source": "$input-btn-line-height", + "$value": "1.3333" + }, + "sm": { + "source": "$input-btn-line-height-sm", + "$value": "1.4286" + }, "lg": { - "value": "{typography.line-height.lg}", "type": "dimension", "source": "$input-btn-line-height-lg" + "source": "$input-btn-line-height-lg", + "$value": "{typography.line-height.lg}" } } } } }, "spacing": { + "$type": "dimension", "input": { "btn": { "padding": { - "y": { "value": ".5625rem", "type": "dimension", "source": "$input-btn-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$input-btn-padding-x" }, + "y": { + "source": "$input-btn-padding-y", + "$value": ".5625rem" + }, + "x": { + "source": "$input-btn-padding-x", + "$value": "1rem" + }, "sm": { - "y": { "value": ".4375rem", "type": "dimension", "source": "$input-btn-padding-y-sm" }, - "x": { "value": ".75rem", "type": "dimension", "source": "$input-btn-padding-x-sm" } + "y": { + "source": "$input-btn-padding-y-sm", + "$value": ".4375rem" + }, + "x": { + "source": "$input-btn-padding-x-sm", + "$value": ".75rem" + } }, "lg": { - "y": { "value": ".6875rem", "type": "dimension", "source": "$input-btn-padding-y-lg" }, - "x": { "value": "1.25rem", "type": "dimension", "source": "$input-btn-padding-x-lg" } + "y": { + "source": "$input-btn-padding-y-lg", + "$value": ".6875rem" + }, + "x": { + "source": "$input-btn-padding-x-lg", + "$value": "1.25rem" + } } } } } }, "size": { + "$type": "dimension", "input": { "btn": { "border-width": { - "value": "{size.border.width}", "type": "dimension", "source": "$input-btn-border-width" + "source": "$input-btn-border-width", + "$value": "{size.border.width}" }, - "focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-width" } + "focus-width": { + "source": "$input-btn-focus-width", + "$value": "1px" + } } } } diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json index bb48968eb1..f6ce3e2cf0 100644 --- a/tokens/src/core/components/general/link.json +++ b/tokens/src/core/components/general/link.json @@ -1,27 +1,64 @@ { + "$type": "textDecoration", "typography": { "link": { "decoration": { - "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" }, + "base": { + "source": "$link-decoration", + "$value": "none" + }, + "hover": { + "source": "$link-hover-decoration", + "$value": "underline" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" } + "base": { + "source": "$inline-link-decoration", + "$value": "underline" + }, + "hover": { + "source": "$inline-link-hover-decoration", + "$value": "underline" + } }, "muted": { - "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" }, + "base": { + "source": "$muted-link-decoration", + "$value": "none" + }, + "hover": { + "source": "$muted-link-hover-decoration", + "$value": "underline" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" } + "base": { + "source": "$muted-inline-link-decoration", + "$value": "underline" + }, + "hover": { + "source": "$muted-inline-link-hover-decoration", + "$value": "underline" + } } }, "brand": { - "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" }, + "base": { + "source": "$brand-link-decoration", + "$value": "none" + }, + "hover": { + "source": "$brand-link-hover-decoration", + "$value": "underline" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" } + "base": { + "source": "$brand-inline-link-decoration", + "$value": "underline" + }, + "hover": { + "source": "$brand-inline-link-hover-decoration", + "$value": "underline" + } } } } diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json index 1b946b49d5..0a04eacbb3 100644 --- a/tokens/src/core/components/general/list.json +++ b/tokens/src/core/components/general/list.json @@ -1,25 +1,46 @@ { "typography": { + "$type": "fontWeight", "dt": { - "font-weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight" } + "font-weight": { + "source": "$dt-font-weight", + "$value": "{typography.font.weight.bold}" + } } }, "spacing": { + "$type": "dimension", "list": { - "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" }, + "inline-padding": { + "source": "$list-inline-padding", + "$value": ".5rem" + }, "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" } + "y": { + "source": "$list-group-item-padding-y", + "$value": ".75rem" + }, + "x": { + "source": "$list-group-item-padding-x", + "$value": "1.25rem" + } } } } }, "size": { + "$type": "dimension", "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" } + "width": { + "source": "$list-group-border-width", + "$value": "{size.border.width}" + }, + "radius": { + "source": "$list-group-border-radius", + "$value": "{size.border.radius.base}" + } } } } diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json index c1104eb1bf..797fb5e3e4 100644 --- a/tokens/src/core/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -1,23 +1,28 @@ { + "$type": "dimension", "spacing": { "paragraph": { - "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$paragraph-margin-bottom" } + "margin-bottom": { + "source": "$paragraph-margin-bottom", + "$value": "1rem" + } }, - "mark-padding": { "value": ".2em", "type": "dimension", "source": "$mark-padding" } + "mark-padding": { + "source": "$mark-padding", + "$value": ".2em" + } }, "typography": { "blockquote": { "small": { "font-size": { - "value": "{typography.font.size.small.base}", - "type": "dimension", - "source": "$blockquote-small-font-size" + "source": "$blockquote-small-font-size", + "$value": "{typography.font.size.small.base}" } }, "font-size": { - "value": "calc({typography.font.size.base} * 1.25)", - "type": "dimension", - "source": "$blockquote-font-size" + "source": "$blockquote-font-size", + "$value": "calc({typography.font.size.base} * 1.25)" } } } diff --git a/tokens/src/core/global/breakpoints.json b/tokens/src/core/global/breakpoints.json index f4d4ee65bf..28b2e5a319 100644 --- a/tokens/src/core/global/breakpoints.json +++ b/tokens/src/core/global/breakpoints.json @@ -1,12 +1,31 @@ { + "$type": "dimension", "size": { "breakpoint": { - "xs": { "value": "0", "type": "dimension", "description": "Starting breakpoint for portrait phones." }, - "sm": { "value": "576px", "type": "dimension", "description": "Starting breakpoint for landscape phones." }, - "md": { "value": "768px", "type": "dimension", "description": "Starting breakpoint for tablets." }, - "lg": { "value": "992px", "type": "dimension", "description": "Starting breakpoint for desktops." }, - "xl": { "value": "1200px", "type": "dimension", "description": "Starting breakpoint for large desktops." }, - "xxl": { "value": "1400px", "type": "dimension", "description": "Starting breakpoint for large desktops, more than 1400px." } + "xs": { + "$value": "0", + "$description": "Starting breakpoint for portrait phones." + }, + "sm": { + "$value": "576px", + "$description": "Starting breakpoint for landscape phones." + }, + "md": { + "$value": "768px", + "$description": "Starting breakpoint for tablets." + }, + "lg": { + "$value": "992px", + "$description": "Starting breakpoint for desktops." + }, + "xl": { + "$value": "1200px", + "$description": "Starting breakpoint for large desktops." + }, + "xxl": { + "$value": "1400px", + "$description": "Starting breakpoint for large desktops, more than 1400px." + } } } } diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json index 3f892d460b..17eb942016 100644 --- a/tokens/src/core/global/display.json +++ b/tokens/src/core/global/display.json @@ -1,22 +1,77 @@ { "typography": { "display": { + "1": { + "source": "$display1-size", + "$value": "3.75rem", + "$type": "dimension", + "$description": "Font size for heading of level 1." + }, + "2": { + "source": "$display2-size", + "$value": "4.875rem", + "$type": "dimension", + "$description": "Font size for heading of level 2." + }, + "3": { + "source": "$display3-size", + "$value": "5.625rem", + "$type": "dimension", + "$description": "Font size for heading of level 3." + }, + "4": { + "source": "$display4-size", + "$value": "7.5rem", + "$type": "dimension", + "$description": "Font size for heading of level 4." + }, "line-height": { - "base": { "value": "1", "type": "dimension", "source": "$display-line-height", "description": "Standard line height." }, - "mobile": { "value": "3.5rem", "type": "dimension", "source": "$display-mobile-line-height", "description": "Mobile line height." } + "$type": "dimension", + "base": { + "source": "$display-line-height", + "$value": "1", + "$description": "Standard line height." + }, + "mobile": { + "source": "$display-mobile-line-height", + "$value": "3.5rem", + "$description": "Mobile line height." + } + }, + "mobile": { + "source": "$display-mobile-size", + "$value": "3.25rem", + "$type": "dimension", + "$description": "Font size for mobile devices." }, - "1": { "value": "3.75rem", "type": "dimension", "source": "$display1-size", "description": "Font size for heading of level 1." }, - "2": { "value": "4.875rem", "type": "dimension", "source": "$display2-size", "description": "Font size for heading of level 2." }, - "3": { "value": "5.625rem", "type": "dimension", "source": "$display3-size", "description": "Font size for heading of level 3." }, - "4": { "value": "7.5rem", "type": "dimension", "source": "$display4-size", "description": "Font size for heading of level 4." }, - "mobile": { "value": "3.25rem", "type": "dimension", "source": "$display-mobile-size", "description": "Font size for mobile devices." }, "weight": { - "1": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display1-weight", "description": "Font weight of level 1." }, - "2": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display2-weight", "description": "Font weight of level 2." }, - "3": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display3-weight", "description": "Font weight of level 3." }, - "4": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display4-weight", "description": "Font weight of level 4." } + "1": { + "source": "$display1-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of level 1." + }, + "2": { + "source": "$display2-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of level 2." + }, + "3": { + "source": "$display3-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of level 3." + }, + "4": { + "source": "$display4-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of level 4." + }, + "$type": "fontWeight" } }, - "print-page-size": { "value": "a3", "type": "dimension", "source": "$print-page-size" } + "print-page-size": { + "source": "$print-page-size", + "$value": "a3", + "$type": "dimension" + } } } diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json index a4b88e4240..3c4db0e022 100644 --- a/tokens/src/core/global/elevation.json +++ b/tokens/src/core/global/elevation.json @@ -1,19 +1,61 @@ { + "$type": "ratio", "elevation": { "zindex": { - "0": { "value": 0, "type": "ratio", "description": "z-index of level 0." }, - "200": { "value": 200, "type": "ratio", "description": "z-index of level 200." }, - "400": { "value": 400, "type": "ratio", "description": "z-index of level 400." }, - "600": { "value": 600, "type": "ratio", "description": "z-index of level 600." }, - "800": { "value": 800, "type": "ratio", "description": "z-index of level 800." }, - "1000": { "value": 1000, "type": "ratio", "description": "z-index of level 1000." }, - "1200": { "value": 1200, "type": "ratio", "description": "z-index of level 1200." }, - "1400": { "value": 1400, "type": "ratio", "description": "z-index of level 1400." }, - "1600": { "value": 1600, "type": "ratio", "description": "z-index of level 1600." }, - "1800": { "value": 1800, "type": "ratio", "description": "z-index of level 1800." }, - "2000": { "value": 2000, "type": "ratio", "description": "z-index of level 2000." }, - "sticky": { "value": 1020, "source": "$zindex-sticky", "type": "ratio", "description": "z-index for sticky element." }, - "fixed": { "value": 1030, "source": "$zindex-fixed", "type": "ratio", "description": "z-index of for fixed element." } + "0": { + "$value": 0, + "$description": "z-index of level 0." + }, + "200": { + "$value": 200, + "$description": "z-index of level 200." + }, + "400": { + "$value": 400, + "$description": "z-index of level 400." + }, + "600": { + "$value": 600, + "$description": "z-index of level 600." + }, + "800": { + "$value": 800, + "$description": "z-index of level 800." + }, + "1000": { + "$value": 1000, + "$description": "z-index of level 1000." + }, + "1200": { + "$value": 1200, + "$description": "z-index of level 1200." + }, + "1400": { + "$value": 1400, + "$description": "z-index of level 1400." + }, + "1600": { + "$value": 1600, + "$description": "z-index of level 1600." + }, + "1800": { + "$value": 1800, + "$description": "z-index of level 1800." + }, + "2000": { + "$value": 2000, + "$description": "z-index of level 2000." + }, + "sticky": { + "source": "$zindex-sticky", + "$value": 1020, + "$description": "z-index for sticky element." + }, + "fixed": { + "source": "$zindex-fixed", + "$value": 1030, + "$description": "z-index of for fixed element." + } } } } diff --git a/tokens/src/core/global/other.json b/tokens/src/core/global/other.json index aa57039186..bf1c05f216 100644 --- a/tokens/src/core/global/other.json +++ b/tokens/src/core/global/other.json @@ -1,4 +1,8 @@ { + "$type": "percentage", "yiq-contrasted-threshold": 128, - "theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" } + "theme-interval": { + "source": "$theme-color-interval", + "$value": "8%" + } } diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json index 4c4f3f2344..2439f04631 100644 --- a/tokens/src/core/global/spacing.json +++ b/tokens/src/core/global/spacing.json @@ -1,36 +1,89 @@ { + "$type": "dimension", "spacing": { "spacer": { - "base": { "value": "1rem", "type": "dimension", "source": "$spacer", "description": "Basic space value" }, - "0": { "value": "0", "type": "dimension", "description": "Space value of level 0" }, - "1": { "value": "calc({spacing.spacer.base} * .25)", "type": "dimension", "description": "Space value of level 1" }, - "1,5": { "value": "calc({spacing.spacer.base} * .375)", "type": "dimension", "description": "Space value of level 1.5" }, - "2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" }, - "2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" }, - "3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" }, - "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5" }, - "4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" }, - "4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" }, - "5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" }, - "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5" }, - "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" } + "0": { + "$value": "0", + "$description": "Space value of level 0" + }, + "1": { + "$value": "calc({spacing.spacer.base} * .25)", + "$description": "Space value of level 1" + }, + "2": { + "$value": "calc({spacing.spacer.base} * .5)", + "$description": "Space value of level 2" + }, + "3": { + "$value": "{spacing.spacer.base}", + "$description": "Space value of level 3" + }, + "4": { + "$value": "calc({spacing.spacer.base} * 1.5)", + "$description": "Space value of level 4" + }, + "5": { + "$value": "calc({spacing.spacer.base} * 3)", + "$description": "Space value of level 5" + }, + "6": { + "$value": "calc({spacing.spacer.base} * 5)", + "$description": "Space value of level 6" + }, + "base": { + "source": "$spacer", + "$value": "1rem", + "$description": "Basic space value" + }, + "1,5": { + "$value": "calc({spacing.spacer.base} * .375)", + "$description": "Space value of level 1.5" + }, + "2,5": { + "$value": "calc({spacing.spacer.base} * .75)", + "$description": "Space value of level 2.5" + }, + "3,5": { + "$value": "calc({spacing.spacer.base} * 1.25)", + "$description": "Space value of level 3.5" + }, + "4,5": { + "$value": "calc({spacing.spacer.base} * 2)", + "$description": "Space value of level 4.5" + }, + "5,5": { + "$value": "calc({spacing.spacer.base} * 4)", + "$description": "Space value of level 5.5" + } }, "label": { "margin-bottom": { - "value": ".5rem", "type": "dimension", "source": "$label-margin-bottom", "description": "Margin bottom for label." + "source": "$label-margin-bottom", + "$value": ".5rem", + "$description": "Margin bottom for label." } }, "table": { "cell": { "padding": { - "base": { "value": ".75rem", "type": "dimension", "source": "$table-cell-padding", "description": "Padding for tables." }, - "sm": { "value": ".3rem", "type": "dimension", "source": "$table-cell-padding-sm", "description": "Padding sm for tables." } + "base": { + "source": "$table-cell-padding", + "$value": ".75rem", + "$description": "Padding for tables." + }, + "sm": { + "source": "$table-cell-padding-sm", + "$value": ".3rem", + "$description": "Padding sm for tables." + } } } }, "grid": { "gutter-width": { - "value": "24px", "type": "dimension", "source": "$grid-gutter-width", "description": "Grid gutter width value." + "source": "$grid-gutter-width", + "$value": "24px", + "$description": "Grid gutter width value." } } } diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json index 7cd6c13d3b..43a8fba7fb 100644 --- a/tokens/src/core/global/transition.json +++ b/tokens/src/core/global/transition.json @@ -1,13 +1,26 @@ { + "$type": "transition", "transition": { - "base": { "value": "all .2s ease-in-out", "type": "transition", "source": "$transition-base", "description": "Generic transition for any property change" }, - "fade": { "value": "opacity .15s linear", "type": "transition", "source": "$transition-fade", "description": "Opacity transition that takes 150ms" }, + "base": { + "source": "$transition-base", + "$value": "all .2s ease-in-out", + "$description": "Generic transition for any property change" + }, + "fade": { + "source": "$transition-fade", + "$value": "opacity .15s linear", + "$description": "Opacity transition that takes 150ms" + }, "collapse": { "height": { - "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition for height that takes 350ms" + "source": "$transition-collapse", + "$value": "height .35s ease", + "$description": "Collapse transition for height that takes 350ms" }, "width": { - "value": "width .35s ease", "type": "transition", "source": "$transition-collapse-width", "description": "Collapse transition for width that takes 350ms" + "source": "$transition-collapse-width", + "$value": "width .35s ease", + "$description": "Collapse transition for width that takes 350ms" } } } diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index 935fa96e9b..20646617ed 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -2,89 +2,222 @@ "typography": { "font": { "family": { + "$type": "fontFamily", "base": { - "value": "{typography.font.family.sans.serif}", - "type": "fontFamily", "source": "$font-family-base", - "description": "Basic font family." + "$value": "{typography.font.family.sans.serif}", + "$description": "Basic font family." }, "sans": { "serif": { - "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", - "type": "fontFamily", "source": "$font-family-sans-serif", - "description": "Sans-serif font family." + "$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", + "$description": "Sans-serif font family." } }, - "serif": { "value": "serif", "source": "$font-family-serif", "description": "Serif font family." }, + "serif": { + "source": "$font-family-serif", + "$value": "serif", + "$description": "Serif font family." + }, "monospace": { - "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", - "type": "fontFamily", "source": "$font-family-monospace", - "description": "Monospace font family." + "$value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", + "$description": "Monospace font family." } }, "size": { - "base": { "value": "1.125rem", "type": "dimension", "source": "$font-size-base", "description": "Base font size." }, - "lg": { "value": "1.4063rem", "type": "dimension", "source": "$font-size-lg", "description": "Large font size." }, - "sm": { "value": ".875rem", "type": "dimension", "source": "$font-size-sm", "description": "Small font size." }, - "xs": { "value": ".75rem", "type": "dimension", "source": "$font-size-xs", "description": "Extra-small font size." }, + "base": { + "source": "$font-size-base", + "$value": "1.125rem", + "$type": "dimension", + "$description": "Base font size." + }, + "lg": { + "source": "$font-size-lg", + "$value": "1.4063rem", + "$type": "dimension", + "$description": "Large font size." + }, + "sm": { + "source": "$font-size-sm", + "$value": ".875rem", + "$type": "dimension", + "$description": "Small font size." + }, + "xs": { + "source": "$font-size-xs", + "$value": ".75rem", + "$type": "dimension", + "$description": "Extra-small font size." + }, "small": { - "base": { "value": "87.5%", "type": "percentage", "source": "$small-font-size", "description": "Small font size." }, - "x": { "value": "75%", "type": "percentage", "source": "$x-small-font-size", "description": "X-small font size." } - }, - "h1": { "value": "2.5rem", "type": "dimension", "source": "$h1-font-size", "description": "Font size of heading level 1." }, - "h2": { "value": "2rem", "type": "dimension", "source": "$h2-font-size", "description": "Font size of heading level 2." }, - "h3": { "value": "1.375rem", "type": "dimension", "source": "$h3-font-size", "description": "Font size of heading level 3." }, - "h4": { "value": "1.125rem", "type": "dimension", "source": "$h4-font-size", "description": "Font size of heading level 4." }, - "h5": { "value": ".875rem", "type": "dimension", "source": "$h5-font-size", "description": "Font size of heading level 5." }, - "h6": { "value": ".75rem", "type": "dimension", "source": "$h6-font-size", "description": "Font size of heading level 6." }, + "$type": "percentage", + "base": { + "source": "$small-font-size", + "$value": "87.5%", + "$description": "Small font size." + }, + "x": { + "source": "$x-small-font-size", + "$value": "75%", + "$description": "X-small font size." + } + }, + "h1": { + "source": "$h1-font-size", + "$value": "2.5rem", + "$type": "dimension", + "$description": "Font size of heading level 1." + }, + "h2": { + "source": "$h2-font-size", + "$value": "2rem", + "$type": "dimension", + "$description": "Font size of heading level 2." + }, + "h3": { + "source": "$h3-font-size", + "$value": "1.375rem", + "$type": "dimension", + "$description": "Font size of heading level 3." + }, + "h4": { + "source": "$h4-font-size", + "$value": "1.125rem", + "$type": "dimension", + "$description": "Font size of heading level 4." + }, + "h5": { + "source": "$h5-font-size", + "$value": ".875rem", + "$type": "dimension", + "$description": "Font size of heading level 5." + }, + "h6": { + "source": "$h6-font-size", + "$value": ".75rem", + "$type": "dimension", + "$description": "Font size of heading level 6." + }, "mobile": { - "h1": { "value": "2.25rem", "type": "dimension", "source": "$h1-mobile-font-size", "description": "Mobile font size of heading level 1." }, - "h2": { "value": "{typography.font.size.h2}", "type": "dimension", "source": "$h2-mobile-font-size", "description": "Mobile font size of heading level 2." }, - "h3": { "value": "{typography.font.size.h3}", "type": "dimension", "source": "$h3-mobile-font-size", "description": "Mobile font size of heading level 3." }, - "h4": { "value": "{typography.font.size.h4}", "type": "dimension", "source": "$h4-mobile-font-size", "description": "Mobile font size of heading level 4." }, - "h5": { "value": "{typography.font.size.h5}", "type": "dimension", "source": "$h5-mobile-font-size", "description": "Mobile font size of heading level 5." }, - "h6": { "value": "{typography.font.size.h6}", "type": "dimension", "source": "$h6-mobile-font-size", "description": "Mobile font size of heading level 6." } + "$type": "dimension", + "h1": { + "source": "$h1-mobile-font-size", + "$value": "2.25rem", + "$description": "Mobile font size of heading level 1." + }, + "h2": { + "source": "$h2-mobile-font-size", + "$value": "{typography.font.size.h2}", + "$description": "Mobile font size of heading level 2." + }, + "h3": { + "source": "$h3-mobile-font-size", + "$value": "{typography.font.size.h3}", + "$description": "Mobile font size of heading level 3." + }, + "h4": { + "source": "$h4-mobile-font-size", + "$value": "{typography.font.size.h4}", + "$description": "Mobile font size of heading level 4." + }, + "h5": { + "source": "$h5-mobile-font-size", + "$value": "{typography.font.size.h5}", + "$description": "Mobile font size of heading level 5." + }, + "h6": { + "source": "$h6-mobile-font-size", + "$value": "{typography.font.size.h6}", + "$description": "Mobile font size of heading level 6." + } }, "lead": { - "value": "calc({typography.font.size.base} * 1.25)", - "type": "dimension", "source": "$lead-font-size", - "description": "Lead text font size." + "$value": "calc({typography.font.size.base} * 1.25)", + "$type": "dimension", + "$description": "Lead text font size." }, "micro": { - "value": ".688rem", - "type": "dimension", "source": "$micro-font-size", - "description": "Micro utils text font size." + "$value": ".688rem", + "$type": "dimension", + "$description": "Micro utils text font size." } }, "weight": { - "lighter": { "value": "lighter", "type": "fontWeight", "source": "$font-weight-lighter", "description": "Lighter font weight." }, - "light": { "value": "300", "type": "fontWeight", "source": "$font-weight-light", "description": "Light font weight." }, - "normal": { "value": "400", "type": "fontWeight", "source": "$font-weight-normal", "description": "Normal font weight." }, + "$type": "fontWeight", + "lighter": { + "source": "$font-weight-lighter", + "$value": "lighter", + "$description": "Lighter font weight." + }, + "light": { + "source": "$font-weight-light", + "$value": "300", + "$description": "Light font weight." + }, + "normal": { + "source": "$font-weight-normal", + "$value": "400", + "$description": "Normal font weight." + }, "semi": { - "bold": { "value": "500", "type": "fontWeight", "source": "$font-weight-semi-bold", "description": "Semi-bold font weight." } + "bold": { + "source": "$font-weight-semi-bold", + "$value": "500", + "$description": "Semi-bold font weight." + } + }, + "bold": { + "source": "$font-weight-bold", + "$value": "700", + "$description": "Bold font weight." + }, + "bolder": { + "source": "$font-weight-bolder", + "$value": "bolder", + "$description": "Bolder font weight." }, - "bold": { "value": "700", "type": "fontWeight", "source": "$font-weight-bold", "description": "Bold font weight." }, - "bolder": { "value": "bolder", "type": "fontWeight", "source": "$font-weight-bolder", "description": "Bolder font weight." }, "base": { - "value": "{typography.font.weight.normal}", - "type": "fontWeight", "source": "$font-weight-base", - "description": "Basic font weight." + "$value": "{typography.font.weight.normal}", + "$description": "Basic font weight." }, - "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight", "description": "Lead text font weight." }, - "table-th": { "value": "normal", "type": "fontWeight", "source": "$table-th-font-weight", "description": "Table th font weight." } + "lead": { + "source": "$lead-font-weight", + "$value": "inherit", + "$description": "Lead text font weight." + }, + "table-th": { + "source": "$table-th-font-weight", + "$value": "normal", + "$description": "Table th font weight." + } } }, "line-height": { - "base": { "value": "1.5556", "type": "dimension", "source": "$line-height-base", "description": "Basic line height." }, - "lg": { "value": "1.5", "type": "dimension", "source": "$line-height-lg", "description": "Large line height." }, - "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm", "description": "Small line height." }, + "$type": "dimension", + "base": { + "source": "$line-height-base", + "$value": "1.5556", + "$description": "Basic line height." + }, + "lg": { + "source": "$line-height-lg", + "$value": "1.5", + "$description": "Large line height." + }, + "sm": { + "source": "$line-height-sm", + "$value": "1.5", + "$description": "Small line height." + }, "micro": { - "value": ".938rem", "type": "dimension", "source": "$micro-line-height", "description": "Micro utils line height." + "source": "$micro-line-height", + "$value": ".938rem", + "$description": "Micro utils line height." } } } diff --git a/tokens/src/core/utilities/color.json b/tokens/src/core/utilities/color.json index c07768a755..92149da6d2 100644 --- a/tokens/src/core/utilities/color.json +++ b/tokens/src/core/utilities/color.json @@ -2,11 +2,42 @@ "utilities": [ { "filters": { - "category": ["color"], - "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"], - "item": ["base","100", "200", "300", "400", "500", "600", "700", "800", "900", "a", "b"] + "category": [ + "color" + ], + "type": [ + "gray", + "primary", + "secondary", + "brand", + "success", + "info", + "warning", + "danger", + "light", + "dark", + "accent" + ], + "item": [ + "base", + "100", + "200", + "300", + "400", + "500", + "600", + "700", + "800", + "900", + "a", + "b" + ] }, - "utilityFunctionsToApply": ["bgVariant", "textEmphasisVariant", "borderColor"] + "utilityFunctionsToApply": [ + "bgVariant", + "textEmphasisVariant", + "borderColor" + ] } ] } diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json index 58e1b3753e..2ca2230790 100644 --- a/tokens/src/themes/light/alias/color.json +++ b/tokens/src/themes/light/alias/color.json @@ -1,113 +1,327 @@ { + "$type": "color", "color": { "bg": { - "base": { "value": "{color.white}", "type": "color", "description": "Basic background color." }, - "active": { "value": "{color.primary.500}", "type": "color", "source": "$component-active-bg", "description": "Active background color." } + "base": { + "$value": "{color.white}", + "$description": "Basic background color." + }, + "active": { + "source": "$component-active-bg", + "$value": "{color.primary.500}", + "$description": "Active background color." + } }, "text": { - "50":{ + "50": { "black": { - "value": "{color.black}", - "type": "color", "source": "$text-black-50", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "description": "Black text color with transparency of 50%." + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.black}", + "$description": "Black text color with transparency of 50%." }, "white": { - "value": "{color.white}", - "type": "color", "source": "$text-white-50", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "description": "White text color with transparency of 50%." + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.white}", + "$description": "White text color with transparency of 50%." } } }, - "active": { "value": "{color.white}", "type": "color", "source": "$component-active-color", "description": "Color for active element." }, - "disabled": { "value": "{color.gray.500}", "type": "color", "description": "Color for disabled element." }, + "active": { + "source": "$component-active-color", + "$value": "{color.white}", + "$description": "Color for active element." + }, + "disabled": { + "$value": "{color.gray.500}", + "$description": "Color for disabled element." + }, "input": { - "focus": { "value": "{color.primary.500}", "type": "color", "description": "Focused input value color." } + "focus": { + "$value": "{color.primary.500}", + "$description": "Focused input value color." + } }, "table": { "caption": { - "value": "{color.text-muted}", "type": "color", "source": "$table-caption-color", "description": "Table caption color." + "source": "$table-caption-color", + "$value": "{color.text-muted}", + "$description": "Table caption color." }, "border": { - "value": "{color.border}", "type": "color", "source": "$table-border-color", "description": "Table border color." + "source": "$table-border-color", + "$value": "{color.border}", + "$description": "Table border color." } }, - "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." }, + "border": { + "source": "$border-color", + "$value": "{color.gray.200}", + "$description": "Border color." + }, "theme": { "bg": { - "primary": { "value": "{color.primary.100}", "type": "color", "description": "Theme-specific primary background color." }, - "secondary": { "value": "{color.secondary.100}", "type": "color", "description": "Theme-specific secondary background color." }, - "brand": { "value": "{color.brand.100}", "type": "color", "description": "Theme-specific brand background color." }, - "success": { "value": "{color.success.100}", "type": "color", "description": "Theme-specific success background color." }, - "info": { "value": "{color.info.100}", "type": "color", "description": "Theme-specific info background color." }, - "warning": { "value": "{color.warning.100}", "type": "color", "description": "Theme-specific warning background color." }, - "danger": { "value": "{color.danger.100}", "type": "color", "description": "Theme-specific danger background color." }, - "light": { "value": "{color.light.100}", "type": "color", "description": "Theme-specific light background color." }, - "dark": { "value": "{color.dark.100}", "type": "color", "description": "Theme-specific dark background color." }, - "gray": { "value": "{color.gray.100}", "type": "color", "description": "Theme-specific gray background color." } + "primary": { + "$value": "{color.primary.100}", + "$description": "Theme-specific primary background color." + }, + "secondary": { + "$value": "{color.secondary.100}", + "$description": "Theme-specific secondary background color." + }, + "brand": { + "$value": "{color.brand.100}", + "$description": "Theme-specific brand background color." + }, + "success": { + "$value": "{color.success.100}", + "$description": "Theme-specific success background color." + }, + "info": { + "$value": "{color.info.100}", + "$description": "Theme-specific info background color." + }, + "warning": { + "$value": "{color.warning.100}", + "$description": "Theme-specific warning background color." + }, + "danger": { + "$value": "{color.danger.100}", + "$description": "Theme-specific danger background color." + }, + "light": { + "$value": "{color.light.100}", + "$description": "Theme-specific light background color." + }, + "dark": { + "$value": "{color.dark.100}", + "$description": "Theme-specific dark background color." + }, + "gray": { + "$value": "{color.gray.100}", + "$description": "Theme-specific gray background color." + } }, "border": { - "primary": { "value": "{color.primary.200}", "type": "color", "description": "Theme-specific primary border color." }, - "secondary": { "value": "{color.secondary.200}", "type": "color", "description": "Theme-specific secondary border color." }, - "brand": { "value": "{color.brand.200}", "type": "color", "description": "Theme-specific brand border color." }, - "success": { "value": "{color.success.200}", "type": "color", "description": "Theme-specific success border color." }, - "info": { "value": "{color.info.200}", "type": "color", "description": "Theme-specific info border color." }, - "warning": { "value": "{color.warning.200}", "type": "color", "description": "Theme-specific warning border color." }, - "danger": { "value": "{color.danger.200}", "type": "color", "description": "Theme-specific danger border color." }, - "light": { "value": "{color.light.200}", "type": "color", "description": "Theme-specific light border color." }, - "dark": { "value": "{color.dark.200}", "type": "color", "description": "Theme-specific dark border color." }, - "gray": { "value": "{color.gray.200}", "type": "color", "description": "Theme-specific gray border color." } + "primary": { + "$value": "{color.primary.200}", + "$description": "Theme-specific primary border color." + }, + "secondary": { + "$value": "{color.secondary.200}", + "$description": "Theme-specific secondary border color." + }, + "brand": { + "$value": "{color.brand.200}", + "$description": "Theme-specific brand border color." + }, + "success": { + "$value": "{color.success.200}", + "$description": "Theme-specific success border color." + }, + "info": { + "$value": "{color.info.200}", + "$description": "Theme-specific info border color." + }, + "warning": { + "$value": "{color.warning.200}", + "$description": "Theme-specific warning border color." + }, + "danger": { + "$value": "{color.danger.200}", + "$description": "Theme-specific danger border color." + }, + "light": { + "$value": "{color.light.200}", + "$description": "Theme-specific light border color." + }, + "dark": { + "$value": "{color.dark.200}", + "$description": "Theme-specific dark border color." + }, + "gray": { + "$value": "{color.gray.200}", + "$description": "Theme-specific gray border color." + } }, "focus": { - "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary focus color." }, - "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary focus color." }, - "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand focus color." }, - "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success focus color." }, - "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info focus color." }, - "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning focus color." }, - "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger focus color." }, - "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light focus color." }, - "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark focus color." }, - "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray focus color." } + "primary": { + "$value": "{color.primary.500}", + "$description": "Theme-specific primary focus color." + }, + "secondary": { + "$value": "{color.secondary.500}", + "$description": "Theme-specific secondary focus color." + }, + "brand": { + "$value": "{color.brand.500}", + "$description": "Theme-specific brand focus color." + }, + "success": { + "$value": "{color.success.500}", + "$description": "Theme-specific success focus color." + }, + "info": { + "$value": "{color.info.500}", + "$description": "Theme-specific info focus color." + }, + "warning": { + "$value": "{color.warning.500}", + "$description": "Theme-specific warning focus color." + }, + "danger": { + "$value": "{color.danger.500}", + "$description": "Theme-specific danger focus color." + }, + "light": { + "$value": "{color.light.500}", + "$description": "Theme-specific light focus color." + }, + "dark": { + "$value": "{color.dark.500}", + "$description": "Theme-specific dark focus color." + }, + "gray": { + "$value": "{color.gray.500}", + "$description": "Theme-specific gray focus color." + } }, "default": { - "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary default color." }, - "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary default color." }, - "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand default color." }, - "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success default color." }, - "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info default color." }, - "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning default color." }, - "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger default color." }, - "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light default color." }, - "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark default color." }, - "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray default color." } + "primary": { + "$value": "{color.primary.500}", + "$description": "Theme-specific primary default color." + }, + "secondary": { + "$value": "{color.secondary.500}", + "$description": "Theme-specific secondary default color." + }, + "brand": { + "$value": "{color.brand.500}", + "$description": "Theme-specific brand default color." + }, + "success": { + "$value": "{color.success.500}", + "$description": "Theme-specific success default color." + }, + "info": { + "$value": "{color.info.500}", + "$description": "Theme-specific info default color." + }, + "warning": { + "$value": "{color.warning.500}", + "$description": "Theme-specific warning default color." + }, + "danger": { + "$value": "{color.danger.500}", + "$description": "Theme-specific danger default color." + }, + "light": { + "$value": "{color.light.500}", + "$description": "Theme-specific light default color." + }, + "dark": { + "$value": "{color.dark.500}", + "$description": "Theme-specific dark default color." + }, + "gray": { + "$value": "{color.gray.500}", + "$description": "Theme-specific gray default color." + } }, "hover": { - "primary": { "value": "{color.primary.700}", "type": "color", "description": "Theme-specific primary hover color." }, - "secondary": { "value": "{color.secondary.700}", "type": "color", "description": "Theme-specific secondary hover color." }, - "brand": { "value": "{color.brand.700}", "type": "color", "description": "Theme-specific brand hover color." }, - "success": { "value": "{color.success.700}", "type": "color", "description": "Theme-specific success hover color." }, - "info": { "value": "{color.info.700}", "type": "color", "description": "Theme-specific info hover color." }, - "warning": { "value": "{color.warning.700}", "type": "color", "description": "Theme-specific warning hover color." }, - "danger": { "value": "{color.danger.700}", "type": "color", "description": "Theme-specific danger hover color." }, - "light": { "value": "{color.light.700}", "type": "color", "description": "Theme-specific light hover color." }, - "dark": { "value": "{color.dark.700}", "type": "color", "description": "Theme-specific dark hover color." }, - "gray": { "value": "{color.gray.700}", "type": "color", "description": "Theme-specific gray hover color." } + "primary": { + "$value": "{color.primary.700}", + "$description": "Theme-specific primary hover color." + }, + "secondary": { + "$value": "{color.secondary.700}", + "$description": "Theme-specific secondary hover color." + }, + "brand": { + "$value": "{color.brand.700}", + "$description": "Theme-specific brand hover color." + }, + "success": { + "$value": "{color.success.700}", + "$description": "Theme-specific success hover color." + }, + "info": { + "$value": "{color.info.700}", + "$description": "Theme-specific info hover color." + }, + "warning": { + "$value": "{color.warning.700}", + "$description": "Theme-specific warning hover color." + }, + "danger": { + "$value": "{color.danger.700}", + "$description": "Theme-specific danger hover color." + }, + "light": { + "$value": "{color.light.700}", + "$description": "Theme-specific light hover color." + }, + "dark": { + "$value": "{color.dark.700}", + "$description": "Theme-specific dark hover color." + }, + "gray": { + "$value": "{color.gray.700}", + "$description": "Theme-specific gray hover color." + } }, "active": { - "primary": { "value": "{color.primary.900}", "type": "color", "description": "Theme-specific primary active color." }, - "secondary": { "value": "{color.secondary.900}", "type": "color", "description": "Theme-specific secondary active color." }, - "brand": { "value": "{color.brand.900}", "type": "color", "description": "Theme-specific brand active color." }, - "success": { "value": "{color.success.900}", "type": "color", "description": "Theme-specific success active color." }, - "info": { "value": "{color.info.900}", "type": "color", "description": "Theme-specific info active color." }, - "warning": { "value": "{color.warning.900}", "type": "color", "description": "Theme-specific warning active color." }, - "danger": { "value": "{color.danger.900}", "type": "color", "description": "Theme-specific danger active color." }, - "light": { "value": "{color.light.900}", "type": "color", "description": "Theme-specific light active color." }, - "dark": { "value": "{color.dark.900}", "type": "color", "description": "Theme-specific dark active color." }, - "gray": { "value": "{color.gray.900}", "type": "color", "description": "Theme-specific gray active color." } + "primary": { + "$value": "{color.primary.900}", + "$description": "Theme-specific primary active color." + }, + "secondary": { + "$value": "{color.secondary.900}", + "$description": "Theme-specific secondary active color." + }, + "brand": { + "$value": "{color.brand.900}", + "$description": "Theme-specific brand active color." + }, + "success": { + "$value": "{color.success.900}", + "$description": "Theme-specific success active color." + }, + "info": { + "$value": "{color.info.900}", + "$description": "Theme-specific info active color." + }, + "warning": { + "$value": "{color.warning.900}", + "$description": "Theme-specific warning active color." + }, + "danger": { + "$value": "{color.danger.900}", + "$description": "Theme-specific danger active color." + }, + "light": { + "$value": "{color.light.900}", + "$description": "Theme-specific light active color." + }, + "dark": { + "$value": "{color.dark.900}", + "$description": "Theme-specific dark active color." + }, + "gray": { + "$value": "{color.gray.900}", + "$description": "Theme-specific gray active color." + } } } } diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json index 723ab050b5..e3f2f734fd 100644 --- a/tokens/src/themes/light/components/Alert.json +++ b/tokens/src/themes/light/components/Alert.json @@ -1,36 +1,67 @@ { + "$type": "color", "color": { "alert": { - "title": { "value": "{color.black}", "type": "color", "source": "$alert-title-color" }, - "content": { "value": "{color.gray.700}", "type": "color", "source": "$alert-content-color" }, + "title": { + "source": "$alert-title-color", + "$value": "{color.black}" + }, + "content": { + "source": "$alert-content-color", + "$value": "{color.gray.700}" + }, "icon": { "success": { - "value": "{color.theme.default.success}", "type": "color", "source": "$alert-success-icon-color" + "source": "$alert-success-icon-color", + "$value": "{color.theme.default.success}" + }, + "info": { + "source": "$alert-info-icon-color", + "$value": "{color.theme.default.info}" }, - "info": { "value": "{color.theme.default.info}", "type": "color", "source": "$alert-info-icon-color" }, "danger": { - "value": "{color.theme.default.danger}", "type": "color", "source": "$alert-danger-icon-color" + "source": "$alert-danger-icon-color", + "$value": "{color.theme.default.danger}" }, "warning": { - "value": "{color.theme.default.warning}", "type": "color", "source": "$alert-warning-icon-color" + "source": "$alert-warning-icon-color", + "$value": "{color.theme.default.warning}" } }, "bg": { - "success": { "value": "{color.theme.bg.success}", "type": "color", "source": "$alert-success-bg" }, - "info": { "value": "{color.theme.bg.info}", "type": "color", "source": "$alert-info-bg" }, - "danger": { "value": "{color.theme.bg.danger}", "type": "color", "source": "$alert-danger-bg" }, - "warning": { "value": "{color.theme.bg.warning}", "type": "color", "source": "$alert-warning-bg" } + "success": { + "source": "$alert-success-bg", + "$value": "{color.theme.bg.success}" + }, + "info": { + "source": "$alert-info-bg", + "$value": "{color.theme.bg.info}" + }, + "danger": { + "source": "$alert-danger-bg", + "$value": "{color.theme.bg.danger}" + }, + "warning": { + "source": "$alert-warning-bg", + "$value": "{color.theme.bg.warning}" + } }, "border": { "success": { - "value": "{color.theme.border.success}", "type": "color", "source": "$alert-success-border-color" + "source": "$alert-success-border-color", + "$value": "{color.theme.border.success}" + }, + "info": { + "source": "$alert-info-border-color", + "$value": "{color.theme.border.info}" }, - "info": { "value": "{color.theme.border.info}", "type": "color", "source": "$alert-info-border-color" }, "danger": { - "value": "{color.theme.border.danger}", "type": "color", "source": "$alert-danger-border-color" + "source": "$alert-danger-border-color", + "$value": "{color.theme.border.danger}" }, "warning": { - "value": "{color.theme.border.warning}", "type": "color", "source": "$alert-warning-border-color" + "source": "$alert-warning-border-color", + "$value": "{color.theme.border.warning}" } } } diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json index 868e08e3d4..d9abb08471 100644 --- a/tokens/src/themes/light/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -1,29 +1,60 @@ { "elevation": { + "$type": "shadow", "annotation": { "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": "$annotation-box-shadow" + "source": "$annotation-box-shadow", + "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))" } } }, "color": { + "$type": "color", "annotation": { "text": { - "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color" }, - "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color" }, - "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color" }, - "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color" }, - "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color" } + "success": { + "source": "$annotation-success-color", + "$value": "{color.white}" + }, + "warning": { + "source": "$annotation-warning-color", + "$value": "{color.black}" + }, + "error": { + "source": "$annotation-error-color", + "$value": "{color.white}" + }, + "light": { + "source": "$annotation-light-color", + "$value": "{color.primary.500}" + }, + "dark": { + "source": "$annotation-dark-color", + "$value": "{color.white}" + } }, "bg": { - "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg" }, - "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg" }, - "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg" }, - "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg" }, - "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg" } + "success": { + "source": "$annotation-success-bg", + "$value": "{color.success.base}" + }, + "warning": { + "source": "$annotation-warning-bg", + "$value": "{color.accent.b}" + }, + "error": { + "source": "$annotation-error-bg", + "$value": "{color.danger.base}" + }, + "light": { + "source": "$annotation-light-bg", + "$value": "{color.white}" + }, + "dark": { + "source": "$annotation-dark-bg", + "$value": "{color.dark.base}" + } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json index 614960f5f8..76ea7b7f38 100644 --- a/tokens/src/themes/light/components/Avatar.json +++ b/tokens/src/themes/light/components/Avatar.json @@ -1,7 +1,10 @@ { + "$type": "color", "color": { "avatar": { - "border": { "value": "{color.light.300}", "type": "color" } + "border": { + "$value": "{color.light.300}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json index 6ff6e21587..63895d42ba 100644 --- a/tokens/src/themes/light/components/Badge.json +++ b/tokens/src/themes/light/components/Badge.json @@ -1,186 +1,313 @@ { + "$type": "color", "color": { "badge": { "text": { "primary": { - "value": "{color.primary.base}", - "type": "color", "source": "$badge-primary-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.primary.base}" }, "secondary": { - "value": "{color.secondary.base}", - "type": "color", "source": "$badge-secondary-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.secondary.base}" }, "success": { - "value": "{color.success.base}", - "type": "color", "source": "$badge-success-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.success.base}" }, "danger": { - "value": "{color.danger.base}", - "type": "color", "source": "$badge-danger-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.danger.base}" }, "warning": { - "value": "{color.warning.base}", - "type": "color", "source": "$badge-warning-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.warning.base}" }, "info": { - "value": "{color.info.base}", - "type": "color", "source": "$badge-info-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.info.base}" }, "light": { - "value": "{color.light.base}", - "type": "color", "source": "$badge-light-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.light.base}" }, "dark": { - "value": "{color.dark.base}", - "type": "color", "source": "$badge-dark-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.dark.base}" } }, "bg": { - "primary": { "value": "{color.primary.base}", "type": "color", "source": "$badge-primary-bg" }, - "secondary": { "value": "{color.secondary.base}", "type": "color", "source": "$badge-secondary-bg" }, - "success": { "value": "{color.success.base}", "type": "color", "source": "$badge-success-bg" }, - "warning": { "value": "{color.warning.base}", "type": "color", "source": "$badge-warning-bg" }, - "danger": { "value": "{color.danger.base}", "type": "color", "source": "$badge-danger-bg" }, - "info": { "value": "{color.info.base}", "type": "color", "source": "$badge-info-bg" }, - "light": { "value": "{color.light.base}", "type": "color", "source": "$badge-light-bg" }, - "dark": { "value": "{color.dark.base}", "type": "color", "source": "$badge-dark-bg" } + "primary": { + "source": "$badge-primary-bg", + "$value": "{color.primary.base}" + }, + "secondary": { + "source": "$badge-secondary-bg", + "$value": "{color.secondary.base}" + }, + "success": { + "source": "$badge-success-bg", + "$value": "{color.success.base}" + }, + "warning": { + "source": "$badge-warning-bg", + "$value": "{color.warning.base}" + }, + "danger": { + "source": "$badge-danger-bg", + "$value": "{color.danger.base}" + }, + "info": { + "source": "$badge-info-bg", + "$value": "{color.info.base}" + }, + "light": { + "source": "$badge-light-bg", + "$value": "{color.light.base}" + }, + "dark": { + "source": "$badge-dark-bg", + "$value": "{color.dark.base}" + } }, "focus": { "primary": { - "value": "{color.badge.text.primary}", "type": "color", "source": "$badge-primary-focus-color" + "source": "$badge-primary-focus-color", + "$value": "{color.badge.text.primary}" }, "secondary": { - "value": "{color.badge.text.secondary}", "type": "color", "source": "$badge-secondary-focus-color" + "source": "$badge-secondary-focus-color", + "$value": "{color.badge.text.secondary}" }, "success": { - "value": "{color.badge.text.success}", "type": "color", "source": "$badge-success-focus-color" + "source": "$badge-success-focus-color", + "$value": "{color.badge.text.success}" }, "warning": { - "value": "{color.badge.text.warning}", "type": "color", "source": "$badge-warning-focus-color" + "source": "$badge-warning-focus-color", + "$value": "{color.badge.text.warning}" }, "danger": { - "value": "{color.badge.text.danger}", "type": "color", "source": "$badge-danger-focus-color" + "source": "$badge-danger-focus-color", + "$value": "{color.badge.text.danger}" + }, + "info": { + "source": "$badge-info-focus-color", + "$value": "{color.badge.text.info}" + }, + "light": { + "source": "$badge-light-focus-color", + "$value": "{color.badge.text.light}" + }, + "dark": { + "source": "$badge-dark-focus-color", + "$value": "{color.badge.text.dark}" }, - "info": { "value": "{color.badge.text.info}", "type": "color", "source": "$badge-info-focus-color" }, - "light": { "value": "{color.badge.text.light}", "type": "color", "source": "$badge-light-focus-color" }, - "dark": { "value": "{color.badge.text.dark}", "type": "color", "source": "$badge-dark-focus-color" }, "bg": { "primary": { - "value": "{color.badge.bg.primary}", - "type": "color", "source": "$badge-primary-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.primary}" }, "secondary": { - "value": "{color.badge.bg.secondary}", - "type": "color", "source": "$badge-secondary-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.secondary}" }, "success": { - "value": "{color.badge.bg.success}", - "type": "color", "source": "$badge-success-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.success}" }, "danger": { - "value": "{color.badge.bg.danger}", - "type": "color", "source": "$badge-danger-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.danger}" }, "warning": { - "value": "{color.badge.bg.warning}", - "type": "color", "source": "$badge-warning-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.warning}" }, "info": { - "value": "{color.badge.bg.info}", - "type": "color", "source": "$badge-info-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.info}" }, "light": { - "value": "{color.badge.bg.light}", - "type": "color", "source": "$badge-light-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.light}" }, "dark": { - "value": "{color.badge.bg.dark}", - "type": "color", "source": "$badge-dark-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.dark}" } }, "box-shadow": { "primary": { - "value": "{color.badge.bg.primary}", - "type": "color", "source": "$badge-primary-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.primary}" }, "secondary": { - "value": "{color.badge.bg.secondary}", - "type": "color", "source": "$badge-secondary-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.secondary}" }, "success": { - "value": "{color.badge.bg.success}", - "type": "color", "source": "$badge-success-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.success}" }, "danger": { - "value": "{color.badge.bg.danger}", - "type": "color", "source": "$badge-danger-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.danger}" }, "warning": { - "value": "{color.badge.bg.warning}", - "type": "color", "source": "$badge-warning-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.warning}" }, "info": { - "value": "{color.badge.bg.info}", - "type": "color", "source": "$badge-info-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.info}" }, "light": { - "value": "{color.badge.bg.light}", - "type": "color", "source": "$badge-light-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.light}" }, "dark": { - "value": "{color.badge.bg.dark}", - "type": "color", "source": "$badge-dark-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.dark}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json index 25ec20acef..df8ddf2d34 100644 --- a/tokens/src/themes/light/components/Breadcrumb.json +++ b/tokens/src/themes/light/components/Breadcrumb.json @@ -1,12 +1,28 @@ { + "$type": "color", "color": { "breadcrumb": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" }, - "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" }, + "base": { + "source": "$breadcrumb-color", + "$value": "{color.primary.500}" + }, + "active": { + "source": "$breadcrumb-active-color", + "$value": "{color.gray.500}" + }, "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" } + "base": { + "source": "$breadcrumb-inverse-color", + "$value": "{color.white}" + }, + "active": { + "source": "$breadcrumb-inverse-active", + "$value": "{color.light.500}" + }, + "spacer": { + "source": "$breadcrumb-inverse-spacer", + "$value": "{color.light.700}" + } } } } diff --git a/tokens/src/themes/light/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json index b69eaec093..ebb63c4092 100644 --- a/tokens/src/themes/light/components/Bubble.json +++ b/tokens/src/themes/light/components/Bubble.json @@ -1,17 +1,42 @@ { + "$type": "color", "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": { + "source": "$bubble-success-color", + "$value": "{color.white}" + }, + "warning": { + "source": "$bubble-warning-color", + "$value": "{color.white}" + }, + "error": { + "source": "$bubble-error-color", + "$value": "{color.white}" + }, + "primary": { + "source": "$bubble-primary-color", + "$value": "{color.white}" + } }, "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": { + "source": "$bubble-success-bg", + "$value": "{color.success.base}" + }, + "warning": { + "source": "$bubble-warning-bg", + "$value": "{color.warning.base}" + }, + "error": { + "source": "$bubble-error-bg", + "$value": "{color.danger.base}" + }, + "primary": { + "source": "$bubble-primary-bg", + "$value": "{color.primary.base}" + } } } } diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json index 7b16f40169..0e9dfef451 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -1,260 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "brand": { - "value": "{color.btn.bg.brand}", - "type": "color", "source": "$btn-brand-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.brand}" + }, + "outline-brand": { + "source": "$btn-brand-outline-color", + "$value": "{color.brand.base}" + }, + "inverse-brand": { + "source": "$btn-brand-inverse-color", + "$value": "{color.brand.base}" }, - "outline-brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-color" }, - "inverse-brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-inverse-color" }, "inverse-outline-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-color" + "source": "$btn-brand-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-bg" }, - "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-bg" }, + "brand": { + "source": "$btn-brand-bg", + "$value": "{color.brand.base}" + }, + "outline-brand": { + "source": "$btn-brand-outline-bg", + "$value": "inherit" + }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", "source": "$btn-brand-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { - "value": "transparent", - "type": "color", - "source": "$btn-brand-inverse-outline-bg" + "source": "$btn-brand-inverse-outline-bg", + "$value": "transparent" } }, "border": { - "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-border-color" }, + "brand": { + "source": "$btn-brand-border-color", + "$value": "{color.btn.bg.brand}" + }, "outline-brand": { - "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-border-color" + "source": "$btn-brand-outline-border-color", + "$value": "{color.brand.base}" }, "inverse-outline-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-border-color" + "source": "$btn-brand-inverse-outline-border-color", + "$value": "{color.white}" }, - "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-border-color" } + "inverse-brand": { + "source": "$btn-brand-inverse-border-color", + "$value": "transparent" + } }, "hover": { "text": { "brand": { - "value": "{color.btn.hover.bg.brand}", - "type": "color", "source": "$btn-brand-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.brand}" }, "outline-brand": { - "value": "{color.theme.hover.brand}", - "type": "color", - "source": "$btn-brand-outline-hover-color" + "source": "$btn-brand-outline-hover-color", + "$value": "{color.theme.hover.brand}" }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", "source": "$btn-brand-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.theme.hover.brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-hover-color" + "source": "$btn-brand-inverse-outline-hover-color", + "$value": "{color.theme.hover.brand}" } }, "bg": { - "brand": { "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-bg" }, - "outline-brand": { "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-outline-hover-bg" }, + "brand": { + "source": "$btn-brand-hover-bg", + "$value": "{color.theme.hover.brand}" + }, + "outline-brand": { + "source": "$btn-brand-outline-hover-bg", + "$value": "{color.brand.100}" + }, "inverse-brand": { - "value": "{color.btn.bg.inverse-brand}", - "type": "color", "source": "$btn-brand-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-inverse-outline-hover-bg" + "source": "$btn-brand-inverse-outline-hover-bg", + "$value": "{color.brand.100}" } }, "border": { "brand": { - "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-border-color" + "source": "$btn-brand-hover-border-color", + "$value": "{color.theme.hover.brand}" }, "outline-brand": { - "value": "{color.brand.900}", "type": "color", "source": "$btn-brand-outline-hover-border-color" + "source": "$btn-brand-outline-hover-border-color", + "$value": "{color.brand.900}" }, "inverse-outline-brand": { - "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-hover-border-color" + "source": "$btn-brand-inverse-outline-hover-border-color", + "$value": "transparent" }, - "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-hover-border-color" } + "inverse-brand": { + "source": "$btn-brand-inverse-hover-border-color", + "$value": "transparent" + } } }, "active": { "text": { "brand": { - "value": "{color.btn.active.bg.brand}", - "type": "color", "source": "$btn-brand-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.brand}" }, "outline-brand": { - "value": "{color.btn.active.bg.outline-brand}", - "type": "color", "source": "$btn-brand-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-brand}" }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", "source": "$btn-brand-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.active.bg.inverse-outline-brand}", - "type": "color", "source": "$btn-brand-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-brand}" + } }, "bg": { "brand": { - "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-bg" + "source": "$btn-brand-active-bg", + "$value": "{color.theme.active.brand}" }, "outline-brand": { - "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-outline-active-bg" + "source": "$btn-brand-outline-active-bg", + "$value": "{color.theme.bg.brand}" }, "inverse-outline-brand": { - "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-inverse-outline-active-bg" + "source": "$btn-brand-inverse-outline-active-bg", + "$value": "{color.theme.bg.brand}" }, - "inverse-brand": { "value": "{color.gray.100}", "type": "color", "source": "$btn-brand-inverse-active-bg" } + "inverse-brand": { + "source": "$btn-brand-inverse-active-bg", + "$value": "{color.gray.100}" + } }, "border": { "brand": { - "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-border-color" + "source": "$btn-brand-active-border-color", + "$value": "{color.theme.active.brand}" }, "outline-brand": { - "value": "{color.theme.active.brand}", - "type": "color", - "source": "$btn-brand-outline-active-border-color" + "source": "$btn-brand-outline-active-border-color", + "$value": "{color.theme.active.brand}" }, "inverse-brand": { - "value": "transparent", - "type": "color", - "source": "$btn-brand-inverse-active-border-color" + "source": "$btn-brand-inverse-active-border-color", + "$value": "transparent" }, "inverse-outline-brand": { - "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-active-border-color" + "source": "$btn-brand-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-focus-color" }, + "brand": { + "source": "$btn-brand-focus-color", + "$value": "{color.btn.text.brand}" + }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-focus-color" + "source": "$btn-brand-inverse-focus-color", + "$value": "{color.btn.text.inverse-brand}" }, "outline-brand": { - "value": "{color.btn.text.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-focus-color" + "source": "$btn-brand-outline-focus-color", + "$value": "{color.btn.text.outline-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-focus-color" + "source": "$btn-brand-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-brand}" } }, "border": { "brand": { - "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-focus-border-color" + "source": "$btn-brand-focus-border-color", + "$value": "{color.btn.border.brand}" }, "outline-brand": { - "value": "{color.btn.border.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-focus-border-color" + "source": "$btn-brand-outline-focus-border-color", + "$value": "{color.btn.border.outline-brand}" }, "inverse-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-focus-border-color" + "source": "$btn-brand-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-brand": { - "value": "{color.btn.border.inverse-outline-brand}", "type": "color", "source": "$btn-brand-inverse-outline-focus-border-color" + "source": "$btn-brand-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-brand}" } }, "bg": { - "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-focus-bg" }, + "brand": { + "source": "$btn-brand-focus-bg", + "$value": "{color.btn.bg.brand}" + }, "inverse-brand": { - "value": "{color.btn.bg.inverse-brand}", "source": "$btn-brand-inverse-focus-bg", - "type": "color" + "$value": "{color.btn.bg.inverse-brand}" }, - "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-focus-bg" }, - "inverse-outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-inverse-outline-focus-bg" } + "outline-brand": { + "source": "$btn-brand-outline-focus-bg", + "$value": "inherit" + }, + "inverse-outline-brand": { + "source": "$btn-brand-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "brand": { "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-outline-color" }, + "brand": { + "source": "$btn-brand-focus-outline-color", + "$value": "{color.theme.focus.brand}" + }, "outline-brand": { - "value": "{color.theme.focus.brand}", - "type": "color", - "source": "$btn-brand-outline-focus-outline-color" + "source": "$btn-brand-outline-focus-outline-color", + "$value": "{color.theme.focus.brand}" }, "inverse-brand": { - "value": "{color.btn.focus.border.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-focus-outline-color" + "source": "$btn-brand-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.focus.border.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-focus-outline-color" + "source": "$btn-brand-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-outline-brand}" } } }, "disabled": { "text": { - "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-disabled-color" }, - "inverse-brand": { "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-inverse-disabled-color" }, + "brand": { + "source": "$btn-brand-disabled-color", + "$value": "{color.btn.text.brand}" + }, + "inverse-brand": { + "source": "$btn-brand-inverse-disabled-color", + "$value": "{color.brand.500}" + }, "outline-brand": { - "value": "{color.btn.hover.text.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-disabled-color" + "source": "$btn-brand-outline-disabled-color", + "$value": "{color.btn.hover.text.outline-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-disabled-color" + "source": "$btn-brand-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-brand}" } }, "bg": { - "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-disabled-bg" }, - "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-disabled-bg" }, - "inverse-brand": { "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-disabled-bg" }, + "brand": { + "source": "$btn-brand-disabled-bg", + "$value": "{color.btn.bg.brand}" + }, + "outline-brand": { + "source": "$btn-brand-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-brand": { + "source": "$btn-brand-inverse-disabled-bg", + "$value": "{color.white}" + }, "inverse-outline-brand": { - "value": "{color.btn.bg.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-disabled-bg" + "source": "$btn-brand-inverse-outline-disabled-bg", + "$value": "{color.btn.bg.inverse-outline-brand}" } }, "border": { - "brand": { "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-disabled-border-color" }, + "brand": { + "source": "$btn-brand-disabled-border-color", + "$value": "{color.btn.border.brand}" + }, "outline-brand": { - "value": "{color.btn.border.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-disabled-border-color" + "source": "$btn-brand-outline-disabled-border-color", + "$value": "{color.btn.border.outline-brand}" }, "inverse-brand": { - "value": "{color.btn.disabled.bg.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-disabled-border-color" + "source": "$btn-brand-inverse-disabled-border-color", + "$value": "{color.btn.disabled.bg.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-disabled-border-color" + "source": "$btn-brand-inverse-outline-disabled-border-color", + "$value": "{color.btn.text.inverse-outline-brand}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json index 8eabdf63ae..3db2ad51ec 100644 --- a/tokens/src/themes/light/components/Button/core.json +++ b/tokens/src/themes/light/components/Button/core.json @@ -1,24 +1,35 @@ { "color": { + "$type": "color", "btn": { - "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" } + "disabled-link": { + "source": "$btn-link-disabled-color", + "$value": "{color.disabled}" + } } }, - "elevation": { + "elevation": { + "$type": "shadow", "btn": { "box-shadow": { "base": { - "value": "none", - "type": "shadow", - "source": "$btn-box-shadow" + "source": "$btn-box-shadow", + "$value": "none" }, - "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" } + "active": { + "source": "$btn-active-box-shadow", + "$value": "none" + } } } }, "other": { + "$type": "ratio", "btn": { - "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" } + "disabled-opacity": { + "source": "$btn-disabled-opacity", + "$value": ".65" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json index 9272c9473c..8068ac2927 100644 --- a/tokens/src/themes/light/components/Button/danger.json +++ b/tokens/src/themes/light/components/Button/danger.json @@ -1,247 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "danger": { - "value": "{color.btn.bg.danger}", - "type": "color", "source": "$btn-danger-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.danger}" }, "outline-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-color" + "source": "$btn-danger-outline-color", + "$value": "{color.danger.base}" }, "inverse-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-color" + "source": "$btn-danger-inverse-color", + "$value": "{color.danger.base}" }, "inverse-outline-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-color" + "source": "$btn-danger-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-bg" }, - "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-bg" }, + "danger": { + "source": "$btn-danger-bg", + "$value": "{color.danger.base}" + }, + "outline-danger": { + "source": "$btn-danger-outline-bg", + "$value": "inherit" + }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", "source": "$btn-danger-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-danger}" }, - "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-bg" } + "inverse-outline-danger": { + "source": "$btn-danger-inverse-outline-bg", + "$value": "transparent" + } }, "border": { - "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-border-color" }, + "danger": { + "source": "$btn-danger-border-color", + "$value": "{color.btn.bg.danger}" + }, "outline-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-border-color" + "source": "$btn-danger-outline-border-color", + "$value": "{color.danger.base}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-border-color", + "$value": "transparent" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-border-color" }, "inverse-outline-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-border-color" + "source": "$btn-danger-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "danger": { - "value": "{color.btn.hover.bg.danger}", - "type": "color", "source": "$btn-danger-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.danger}" }, "outline-danger": { - "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-outline-hover-color" + "source": "$btn-danger-outline-hover-color", + "$value": "{color.theme.hover.danger}" }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", "source": "$btn-danger-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-danger}" }, "inverse-outline-danger": { - "value": "{color.theme.hover.danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-hover-color" + "source": "$btn-danger-inverse-outline-hover-color", + "$value": "{color.theme.hover.danger}" } }, "bg": { - "danger": { "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-bg" }, + "danger": { + "source": "$btn-danger-hover-bg", + "$value": "{color.theme.hover.danger}" + }, "outline-danger": { - "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-outline-hover-bg" + "source": "$btn-danger-outline-hover-bg", + "$value": "{color.danger.100}" }, "inverse-danger": { - "value": "{color.btn.bg.inverse-danger}", - "type": "color", "source": "$btn-danger-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-danger}" }, "inverse-outline-danger": { - "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-inverse-outline-hover-bg" + "source": "$btn-danger-inverse-outline-hover-bg", + "$value": "{color.danger.100}" } }, "border": { "danger": { - "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-border-color" + "source": "$btn-danger-hover-border-color", + "$value": "{color.theme.hover.danger}" }, "outline-danger": { - "value": "{color.danger.900}", "type": "color", "source": "$btn-danger-outline-hover-border-color" + "source": "$btn-danger-outline-hover-border-color", + "$value": "{color.danger.900}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-hover-border-color", + "$value": "transparent" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-hover-border-color" }, "inverse-outline-danger": { - "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-hover-border-color" + "source": "$btn-danger-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "danger": { - "value": "{color.btn.active.bg.danger}", - "type": "color", "source": "$btn-danger-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.danger}" }, "outline-danger": { - "value": "{color.btn.active.bg.outline-danger}", - "type": "color", "source": "$btn-danger-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-danger}" }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", "source": "$btn-danger-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-danger}" }, "inverse-outline-danger": { - "value": "{color.btn.active.bg.inverse-outline-danger}", - "type": "color", "source": "$btn-danger-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-danger}" + } }, "bg": { "danger": { - "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-bg" + "source": "$btn-danger-active-bg", + "$value": "{color.theme.active.danger}" }, "outline-danger": { - "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-outline-active-bg" + "source": "$btn-danger-outline-active-bg", + "$value": "{color.theme.bg.danger}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-active-bg", + "$value": "{color.gray.100}" }, - "inverse-danger": { "value": "{color.gray.100}", "type": "color", "source": "$btn-danger-inverse-active-bg" }, "inverse-outline-danger": { - "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-inverse-outline-active-bg" + "source": "$btn-danger-inverse-outline-active-bg", + "$value": "{color.theme.bg.danger}" } }, "border": { "danger": { - "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-border-color" + "source": "$btn-danger-active-border-color", + "$value": "{color.theme.active.danger}" }, "outline-danger": { - "value": "{color.theme.active.danger}", - "type": "color", - "source": "$btn-danger-outline-active-border-color" + "source": "$btn-danger-outline-active-border-color", + "$value": "{color.theme.active.danger}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-active-border-color", + "$value": "transparent" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-active-border-color" }, "inverse-outline-danger": { - "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-active-border-color" } + "source": "$btn-danger-inverse-outline-active-border-color", + "$value": "transparent" + } } }, "focus": { "text": { - "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-focus-color" }, + "danger": { + "source": "$btn-danger-focus-color", + "$value": "{color.btn.text.danger}" + }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-focus-color" + "source": "$btn-danger-inverse-focus-color", + "$value": "{color.btn.text.inverse-danger}" }, "outline-danger": { - "value": "{color.btn.text.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-focus-color" + "source": "$btn-danger-outline-focus-color", + "$value": "{color.btn.text.outline-danger}" }, "inverse-outline-danger": { - "value": "{color.btn.text.inverse-outline-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-focus-color" + "source": "$btn-danger-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-danger}" } }, "border": { "danger": { - "value": "{color.btn.focus.bg.danger}", "type": "color", "source": "$btn-danger-focus-border-color" + "source": "$btn-danger-focus-border-color", + "$value": "{color.btn.focus.bg.danger}" }, "outline-danger": { - "value": "{color.btn.border.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-focus-border-color" + "source": "$btn-danger-outline-focus-border-color", + "$value": "{color.btn.border.outline-danger}" }, "inverse-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-focus-border-color" + "source": "$btn-danger-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-focus-border-color" + "source": "$btn-danger-inverse-outline-focus-border-color", + "$value": "{color.white}" } }, "bg": { - "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-focus-bg" }, - "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-focus-bg" }, - "inverse-danger": { "value": "{color.btn.bg.inverse-danger}", "type": "color", "source": "$btn-danger-inverse-focus-bg" }, - "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-focus-bg" } + "danger": { + "source": "$btn-danger-focus-bg", + "$value": "{color.btn.bg.danger}" + }, + "outline-danger": { + "source": "$btn-danger-outline-focus-bg", + "$value": "inherit" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-danger}" + }, + "inverse-outline-danger": { + "source": "$btn-danger-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "danger": { "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-outline-color" }, + "danger": { + "source": "$btn-danger-focus-outline-color", + "$value": "{color.theme.focus.danger}" + }, "outline-danger": { - "value": "{color.theme.focus.danger}", - "type": "color", - "source": "$btn-danger-outline-focus-outline-color" + "source": "$btn-danger-outline-focus-outline-color", + "$value": "{color.theme.focus.danger}" }, "inverse-danger": { - "value": "{color.btn.focus.border.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-focus-outline-color" + "source": "$btn-danger-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-danger}" }, "inverse-outline-danger": { - "value": "{color.btn.focus.border.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-focus-outline-color" + "source": "$btn-danger-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-danger}" } } }, "disabled": { "text": { - "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-disabled-color" }, + "danger": { + "source": "$btn-danger-disabled-color", + "$value": "{color.btn.text.danger}" + }, "outline-danger": { - "value": "{color.btn.hover.text.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-disabled-color" + "source": "$btn-danger-outline-disabled-color", + "$value": "{color.btn.hover.text.outline-danger}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-disabled-color", + "$value": "{color.danger.base}" }, - "inverse-danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-disabled-color" }, "inverse-outline-danger": { - "value": "{color.btn.text.inverse-outline-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-disabled-color" + "source": "$btn-danger-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-danger}" } }, "bg": { - "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-disabled-bg" }, - "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-disabled-bg" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-disabled-bg" }, - "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-disabled-bg" } + "danger": { + "source": "$btn-danger-disabled-bg", + "$value": "{color.btn.bg.danger}" + }, + "outline-danger": { + "source": "$btn-danger-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-disabled-bg", + "$value": "transparent" + }, + "inverse-outline-danger": { + "source": "$btn-danger-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "danger": { "value": "{color.btn.border.danger}", "type": "color", "source": "$btn-danger-disabled-border-color" }, + "danger": { + "source": "$btn-danger-disabled-border-color", + "$value": "{color.btn.border.danger}" + }, "outline-danger": { - "value": "{color.btn.border.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-disabled-border-color" + "source": "$btn-danger-outline-disabled-border-color", + "$value": "{color.btn.border.outline-danger}" }, "inverse-danger": { - "value": "transparent", - "type": "color", - "source": "$btn-danger-inverse-disabled-border-color" + "source": "$btn-danger-inverse-disabled-border-color", + "$value": "transparent" }, "inverse-outline-danger": { - "value": "{color.btn.border.inverse-outline-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-disabled-border-color" + "source": "$btn-danger-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-danger}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json index dcb73c0d64..9eae6816b2 100644 --- a/tokens/src/themes/light/components/Button/dark.json +++ b/tokens/src/themes/light/components/Button/dark.json @@ -1,230 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "dark": { - "value": "{color.btn.bg.dark}", - "type": "color", "source": "$btn-dark-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-color", + "$value": "{color.dark.base}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-color", + "$value": "{color.dark.base}" }, - "outline-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-color" }, - "inverse-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-inverse-color" }, "inverse-outline-dark": { - "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-color" + "source": "$btn-dark-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-bg" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-bg" }, + "dark": { + "source": "$btn-dark-bg", + "$value": "{color.dark.base}" + }, + "outline-dark": { + "source": "$btn-dark-outline-bg", + "$value": "inherit" + }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", "source": "$btn-dark-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-dark}" }, - "inverse-outline-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-bg" } + "inverse-outline-dark": { + "source": "$btn-dark-inverse-outline-bg", + "$value": "transparent" + } }, "border": { - "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-border-color" }, + "dark": { + "source": "$btn-dark-border-color", + "$value": "{color.btn.bg.dark}" + }, "outline-dark": { - "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-border-color" + "source": "$btn-dark-outline-border-color", + "$value": "{color.dark.base}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-border-color", + "$value": "transparent" }, - "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-border-color" }, "inverse-outline-dark": { - "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-border-color" + "source": "$btn-dark-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "dark": { - "value": "{color.btn.hover.bg.dark}", - "type": "color", "source": "$btn-dark-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.dark}" }, "outline-dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-outline-hover-color" + "source": "$btn-dark-outline-hover-color", + "$value": "{color.theme.hover.dark}" }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", "source": "$btn-dark-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-inverse-outline-hover-color" + "source": "$btn-dark-inverse-outline-hover-color", + "$value": "{color.theme.hover.dark}" } }, "bg": { - "dark": { "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-hover-bg" }, - "outline-dark": { "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-outline-hover-bg" }, + "dark": { + "source": "$btn-dark-hover-bg", + "$value": "{color.theme.hover.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-hover-bg", + "$value": "{color.dark.100}" + }, "inverse-dark": { - "value": "{color.btn.bg.inverse-dark}", - "type": "color", "source": "$btn-dark-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-inverse-outline-hover-bg" + "source": "$btn-dark-inverse-outline-hover-bg", + "$value": "{color.dark.100}" } }, "border": { "dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-hover-border-color" + "source": "$btn-dark-hover-border-color", + "$value": "{color.theme.hover.dark}" }, "outline-dark": { - "value": "{color.dark.900}", "type": "color", "source": "$btn-dark-outline-hover-border-color" + "source": "$btn-dark-outline-hover-border-color", + "$value": "{color.dark.900}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-hover-border-color", + "$value": "transparent" }, - "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-hover-border-color" }, "inverse-outline-dark": { - "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-hover-border-color" + "source": "$btn-dark-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "dark": { - "value": "{color.btn.active.bg.dark}", - "type": "color", "source": "$btn-dark-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.dark}" }, "outline-dark": { - "value": "{color.btn.active.bg.outline-dark}", - "type": "color", "source": "$btn-dark-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-dark}" }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", "source": "$btn-dark-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.btn.active.bg.inverse-outline-dark}", - "type": "color", "source": "$btn-dark-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-dark}" + } }, "bg": { - "dark": { "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-bg" }, + "dark": { + "source": "$btn-dark-active-bg", + "$value": "{color.theme.active.dark}" + }, "outline-dark": { - "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-outline-active-bg" + "source": "$btn-dark-outline-active-bg", + "$value": "{color.theme.bg.dark}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-active-bg", + "$value": "{color.gray.100}" }, - "inverse-dark": { "value": "{color.gray.100}", "type": "color", "source": "$btn-dark-inverse-active-bg" }, "inverse-outline-dark": { - "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-inverse-outline-active-bg" + "source": "$btn-dark-inverse-outline-active-bg", + "$value": "{color.theme.bg.dark}" } }, "border": { "dark": { - "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-border-color" + "source": "$btn-dark-active-border-color", + "$value": "{color.theme.active.dark}" }, "outline-dark": { - "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-outline-active-border-color" + "source": "$btn-dark-outline-active-border-color", + "$value": "{color.theme.active.dark}" }, "inverse-dark": { - "value": "transparent", - "type": "color", - "source": "$btn-dark-inverse-active-border-color" + "source": "$btn-dark-inverse-active-border-color", + "$value": "transparent" }, "inverse-outline-dark": { - "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-active-border-color" + "source": "$btn-dark-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-focus-color" }, - "inverse-dark": { "value": "{color.btn.text.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-color" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-color" }, + "dark": { + "source": "$btn-dark-focus-color", + "$value": "{color.btn.text.dark}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-focus-color", + "$value": "{color.btn.text.inverse-dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-focus-color", + "$value": "inherit" + }, "inverse-outline-dark": { - "value": "{color.btn.text.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-focus-color" + "source": "$btn-dark-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-dark}" } }, "border": { - "dark": { "value": "{color.btn.focus.bg.dark}", "type": "color", "source": "$btn-dark-focus-border-color" }, + "dark": { + "source": "$btn-dark-focus-border-color", + "$value": "{color.btn.focus.bg.dark}" + }, "outline-dark": { - "value": "{color.btn.border.outline-dark}", - "type": "color", - "source": "$btn-dark-outline-focus-border-color" + "source": "$btn-dark-outline-focus-border-color", + "$value": "{color.btn.border.outline-dark}" }, "inverse-dark": { - "value": "{color.white}", - "type": "color", - "source": "$btn-dark-inverse-focus-border-color" + "source": "$btn-dark-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-dark": { - "value": "{color.white}", - "type": "color", - "source": "$btn-dark-inverse-outline-focus-border-color" + "source": "$btn-dark-inverse-outline-focus-border-color", + "$value": "{color.white}" } }, "bg": { - "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-focus-bg" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-bg" }, - "inverse-dark": { "value": "{color.btn.bg.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-bg" }, - "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-focus-bg" } + "dark": { + "source": "$btn-dark-focus-bg", + "$value": "{color.btn.bg.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-focus-bg", + "$value": "inherit" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-dark}" + }, + "inverse-outline-dark": { + "source": "$btn-dark-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-focus-outline-color" }, - "outline-dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-outline-focus-outline-color" }, + "dark": { + "source": "$btn-dark-focus-outline-color", + "$value": "{color.theme.focus.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-focus-outline-color", + "$value": "{color.theme.focus.dark}" + }, "inverse-dark": { - "value": "{color.btn.focus.border.inverse-dark}", - "type": "color", - "source": "$btn-dark-inverse-focus-outline-color" + "source": "$btn-dark-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.btn.focus.border.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-focus-border-color" + "source": "$btn-dark-inverse-outline-focus-border-color", + "$value": "{color.btn.focus.border.inverse-outline-dark}" } } }, "disabled": { "text": { - "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-disabled-color" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-color" }, + "dark": { + "source": "$btn-dark-disabled-color", + "$value": "{color.btn.text.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-disabled-color", + "$value": "inherit" + }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", - "source": "$btn-dark-inverse-disabled-color" + "source": "$btn-dark-inverse-disabled-color", + "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.btn.text.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-disabled-color" + "source": "$btn-dark-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-dark}" } }, "bg": { - "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-disabled-bg" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-bg" }, - "inverse-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-disabled-bg" }, - "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-disabled-bg" } + "dark": { + "source": "$btn-dark-disabled-bg", + "$value": "{color.btn.bg.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-dark": { + "source": "$btn-dark-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { "dark": { - "value": "{color.btn.border.dark}", - "type": "color", - "source": "$btn-dark-disabled-border-color" + "source": "$btn-dark-disabled-border-color", + "$value": "{color.btn.border.dark}" }, "outline-dark": { - "value": "{color.btn.hover.text.outline-dark}", - "type": "color", - "source": "$btn-dark-outline-disabled-border-color" + "source": "$btn-dark-outline-disabled-border-color", + "$value": "{color.btn.hover.text.outline-dark}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-disabled-border-color" }, "inverse-outline-dark": { - "value": "{color.btn.focus.border.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-disabled-border-color" + "source": "$btn-dark-inverse-outline-disabled-border-color", + "$value": "{color.btn.focus.border.inverse-outline-dark}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json index 5f777e9524..7e29af3414 100644 --- a/tokens/src/themes/light/components/Button/info.json +++ b/tokens/src/themes/light/components/Button/info.json @@ -1,238 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "info": { - "value": "{color.btn.bg.info}", - "type": "color", "source": "$btn-info-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.info}" + }, + "outline-info": { + "source": "$btn-info-outline-color", + "$value": "{color.info.base}" + }, + "inverse-info": { + "source": "$btn-info-inverse-color", + "$value": "{color.info.base}" }, - "outline-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-color" }, - "inverse-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-inverse-color" }, "inverse-outline-info": { - "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-color" + "source": "$btn-info-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-bg" }, - "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-bg" }, + "info": { + "source": "$btn-info-bg", + "$value": "{color.info.base}" + }, + "outline-info": { + "source": "$btn-info-outline-bg", + "$value": "inherit" + }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", "source": "$btn-info-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-info}" }, - "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-bg" } + "inverse-outline-info": { + "source": "$btn-info-inverse-outline-bg", + "$value": "inherit" + } }, "border": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-border-color" }, + "info": { + "source": "$btn-info-border-color", + "$value": "{color.btn.bg.info}" + }, "outline-info": { - "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-border-color" + "source": "$btn-info-outline-border-color", + "$value": "{color.info.base}" + }, + "inverse-info": { + "source": "$btn-info-inverse-border-color", + "$value": "transparent" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-border-color" }, "inverse-outline-info": { - "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-border-color" + "source": "$btn-info-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "info": { - "value": "{color.btn.hover.bg.info}", - "type": "color", "source": "$btn-info-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.info}" }, "outline-info": { - "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-outline-hover-color" + "source": "$btn-info-outline-hover-color", + "$value": "{color.theme.hover.info}" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", "source": "$btn-info-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { - "value": "{color.theme.hover.info}", - "type": "color", - "source": "$btn-info-inverse-outline-hover-color" + "source": "$btn-info-inverse-outline-hover-color", + "$value": "{color.theme.hover.info}" } }, "bg": { - "info": { "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-bg" }, - "outline-info": { "value": "{color.info.100}", "type": "color", "source": "$btn-info-outline-hover-bg" }, + "info": { + "source": "$btn-info-hover-bg", + "$value": "{color.theme.hover.info}" + }, + "outline-info": { + "source": "$btn-info-outline-hover-bg", + "$value": "{color.info.100}" + }, "inverse-info": { - "value": "{color.btn.bg.inverse-info}", - "type": "color", "source": "$btn-info-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-info}" }, "inverse-outline-info": { - "value": "{color.info.100}", "type": "color", "source": "$btn-info-inverse-outline-hover-bg" + "source": "$btn-info-inverse-outline-hover-bg", + "$value": "{color.info.100}" } }, "border": { "info": { - "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-border-color" + "source": "$btn-info-hover-border-color", + "$value": "{color.theme.hover.info}" }, "outline-info": { - "value": "{color.info.900}", "type": "color", "source": "$btn-info-outline-hover-border-color" + "source": "$btn-info-outline-hover-border-color", + "$value": "{color.info.900}" + }, + "inverse-info": { + "source": "$btn-info-inverse-hover-border-color", + "$value": "transparent" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-hover-border-color" }, "inverse-outline-info": { - "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-hover-border-color" + "source": "$btn-info-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "info": { - "value": "{color.btn.active.bg.info}", - "type": "color", "source": "$btn-info-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.info}" }, "outline-info": { - "value": "{color.btn.active.bg.outline-info}", - "type": "color", "source": "$btn-info-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-info}" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", "source": "$btn-info-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { - "value": "{color.btn.active.bg.inverse-outline-info}", - "type": "color", "source": "$btn-info-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-info}" + } }, "bg": { - "info": { "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-bg" }, + "info": { + "source": "$btn-info-active-bg", + "$value": "{color.theme.active.info}" + }, "outline-info": { - "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-outline-active-bg" + "source": "$btn-info-outline-active-bg", + "$value": "{color.theme.bg.info}" + }, + "inverse-info": { + "source": "$btn-info-inverse-active-bg", + "$value": "{color.gray.100}" }, - "inverse-info": { "value": "{color.gray.100}", "type": "color", "source": "$btn-info-inverse-active-bg" }, "inverse-outline-info": { - "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-inverse-outline-active-bg" + "source": "$btn-info-inverse-outline-active-bg", + "$value": "{color.theme.bg.info}" } }, "border": { "info": { - "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-border-color" + "source": "$btn-info-active-border-color", + "$value": "{color.theme.active.info}" }, "outline-info": { - "value": "{color.theme.active.info}", - "type": "color", - "source": "$btn-info-outline-active-border-color" + "source": "$btn-info-outline-active-border-color", + "$value": "{color.theme.active.info}" + }, + "inverse-info": { + "source": "$btn-info-inverse-active-border-color", + "$value": "transparent" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-active-border-color" }, "inverse-outline-info": { - "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-active-border-color" + "source": "$btn-info-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-focus-color" }, + "info": { + "source": "$btn-info-focus-color", + "$value": "{color.btn.text.info}" + }, "outline-info": { - "value": "{color.btn.text.outline-info}", - "type": "color", - "source": "$btn-info-outline-focus-color" + "source": "$btn-info-outline-focus-color", + "$value": "{color.btn.text.outline-info}" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", - "source": "$btn-info-inverse-focus-color" + "source": "$btn-info-inverse-focus-color", + "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { - "value": "{color.btn.text.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-focus-color" + "source": "$btn-info-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-info}" } }, "border": { - "info": { "value": "{color.btn.border.info}", "type": "color", "source": "$btn-info-focus-border-color" }, + "info": { + "source": "$btn-info-focus-border-color", + "$value": "{color.btn.border.info}" + }, "outline-info": { - "value": "{color.btn.border.outline-info}", - "type": "color", - "source": "$btn-info-outline-focus-border-color" + "source": "$btn-info-outline-focus-border-color", + "$value": "{color.btn.border.outline-info}" + }, + "inverse-info": { + "source": "$btn-info-inverse-focus-border-color", + "$value": "{color.white}" }, - "inverse-info": { "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color" }, "inverse-outline-info": { - "value": "{color.btn.border.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-focus-border-color" + "source": "$btn-info-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-info}" } }, "bg": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-focus-bg" }, - "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-focus-bg" }, - "inverse-info": { "value": "{color.btn.bg.inverse-info}", "type": "color", "source": "$btn-info-inverse-focus-bg" }, - "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-focus-bg" } + "info": { + "source": "$btn-info-focus-bg", + "$value": "{color.btn.bg.info}" + }, + "outline-info": { + "source": "$btn-info-outline-focus-bg", + "$value": "inherit" + }, + "inverse-info": { + "source": "$btn-info-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-info}" + }, + "inverse-outline-info": { + "source": "$btn-info-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "info": { "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-outline-color" }, + "info": { + "source": "$btn-info-focus-outline-color", + "$value": "{color.theme.focus.info}" + }, "outline-info": { - "value": "{color.theme.focus.info}", - "type": "color", - "source": "$btn-info-outline-focus-outline-color" + "source": "$btn-info-outline-focus-outline-color", + "$value": "{color.theme.focus.info}" }, "inverse-info": { - "value": "{color.btn.focus.border.inverse-info}", - "type": "color", - "source": "$btn-info-inverse-focus-outline-color" + "source": "$btn-info-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-info}" }, "inverse-outline-info": { - "value": "{color.btn.focus.border.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-focus-outline-color" + "source": "$btn-info-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-outline-info}" } } }, "disabled": { "text": { - "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-disabled-color" }, + "info": { + "source": "$btn-info-disabled-color", + "$value": "{color.btn.text.info}" + }, "outline-info": { - "value": "{color.btn.text.outline-info}", - "type": "color", - "source": "$btn-info-outline-disabled-color" + "source": "$btn-info-outline-disabled-color", + "$value": "{color.btn.text.outline-info}" }, "inverse-info": { - "value": "{color.info.base}", - "type": "color", - "source": "$btn-info-inverse-disabled-color" + "source": "$btn-info-inverse-disabled-color", + "$value": "{color.info.base}" }, "inverse-outline-info": { - "value": "{color.btn.text.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-disabled-color" + "source": "$btn-info-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-info}" } }, "bg": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-bg" }, - "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-disabled-bg" }, - "inverse-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-disabled-bg" }, - "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-disabled-bg" } + "info": { + "source": "$btn-info-disabled-bg", + "$value": "{color.btn.bg.info}" + }, + "outline-info": { + "source": "$btn-info-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-info": { + "source": "$btn-info-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-info": { + "source": "$btn-info-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-border-color" }, + "info": { + "source": "$btn-info-disabled-border-color", + "$value": "{color.btn.bg.info}" + }, "outline-info": { - "value": "{color.btn.border.outline-info}", - "type": "color", - "source": "$btn-info-outline-disabled-border-color" + "source": "$btn-info-outline-disabled-border-color", + "$value": "{color.btn.border.outline-info}" + }, + "inverse-info": { + "source": "$btn-info-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-disabled-border-color" }, "inverse-outline-info": { - "value": "{color.btn.border.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-disabled-border-color" + "source": "$btn-info-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-info}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json index 83c4abc465..c085bb0bc2 100644 --- a/tokens/src/themes/light/components/Button/light.json +++ b/tokens/src/themes/light/components/Button/light.json @@ -1,236 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "light": { - "value": "{color.btn.bg.light}", - "type": "color", "source": "$btn-light-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.light}" + }, + "outline-light": { + "source": "$btn-light-outline-color", + "$value": "{color.light.base}" + }, + "inverse-light": { + "source": "$btn-light-inverse-color", + "$value": "{color.light.base}" }, - "outline-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-color" }, - "inverse-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-inverse-color" }, "inverse-outline-light": { - "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-color" + "source": "$btn-light-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-bg" }, + "light": { + "source": "$btn-light-bg", + "$value": "{color.light.base}" + }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", "source": "$btn-light-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-light}" + }, + "outline-light": { + "source": "$btn-light-outline-bg", + "$value": "inherit" }, - "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-bg" }, - "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-bg" } + "inverse-outline-light": { + "source": "$btn-light-inverse-outline-bg", + "$value": "inherit" + } }, "border": { - "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-border-color" }, + "light": { + "source": "$btn-light-border-color", + "$value": "{color.btn.bg.light}" + }, "outline-light": { - "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-border-color" + "source": "$btn-light-outline-border-color", + "$value": "{color.light.base}" + }, + "inverse-light": { + "source": "$btn-light-inverse-border-color", + "$value": "transparent" }, - "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-border-color" }, "inverse-outline-light": { - "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-border-color" + "source": "$btn-light-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "light": { - "value": "{color.btn.hover.bg.light}", - "type": "color", "source": "$btn-light-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.light}" }, "outline-light": { - "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-outline-hover-color" + "source": "$btn-light-outline-hover-color", + "$value": "{color.theme.hover.light}" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", "source": "$btn-light-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { - "value": "{color.theme.hover.light}", - "type": "color", - "source": "$btn-light-inverse-outline-hover-color" + "source": "$btn-light-inverse-outline-hover-color", + "$value": "{color.theme.hover.light}" } }, "bg": { - "light": { "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-bg" }, + "light": { + "source": "$btn-light-hover-bg", + "$value": "{color.theme.hover.light}" + }, "outline-light": { - "value": "{color.light.100}", "type": "color", "source": "$btn-light-outline-hover-bg" + "source": "$btn-light-outline-hover-bg", + "$value": "{color.light.100}" }, "inverse-light": { - "value": "{color.btn.bg.inverse-light}", - "type": "color", "source": "$btn-light-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-light}" }, "inverse-outline-light": { - "value": "{color.light.100}", "type": "color", "source": "$btn-light-inverse-outline-hover-bg" + "source": "$btn-light-inverse-outline-hover-bg", + "$value": "{color.light.100}" } }, "border": { "light": { - "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-border-color" + "source": "$btn-light-hover-border-color", + "$value": "{color.theme.hover.light}" }, "outline-light": { - "value": "{color.light.900}", "type": "color", "source": "$btn-light-outline-hover-border-color" + "source": "$btn-light-outline-hover-border-color", + "$value": "{color.light.900}" + }, + "inverse-light": { + "source": "$btn-light-inverse-hover-border-color", + "$value": "transparent" }, - "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-hover-border-color" }, "inverse-outline-light": { - "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-hover-border-color" + "source": "$btn-light-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "light": { - "value": "{color.btn.active.bg.light}", - "type": "color", "source": "$btn-light-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.light}" }, "outline-light": { - "value": "{color.btn.active.bg.outline-light}", - "type": "color", "source": "$btn-light-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-light}" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", "source": "$btn-light-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { - "value": "{color.btn.active.bg.inverse-outline-light}", - "type": "color", "source": "$btn-light-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-light}" + } }, "bg": { - "light": { "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-bg" }, + "light": { + "source": "$btn-light-active-bg", + "$value": "{color.theme.active.light}" + }, "outline-light": { - "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-outline-active-bg" + "source": "$btn-light-outline-active-bg", + "$value": "{color.theme.bg.light}" + }, + "inverse-light": { + "source": "$btn-light-inverse-active-bg", + "$value": "{color.gray.100}" }, - "inverse-light": { "value": "{color.gray.100}", "type": "color", "source": "$btn-light-inverse-active-bg" }, "inverse-outline-light": { - "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-inverse-outline-active-bg" + "source": "$btn-light-inverse-outline-active-bg", + "$value": "{color.theme.bg.light}" } }, "border": { "light": { - "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-border-color" + "source": "$btn-light-active-border-color", + "$value": "{color.theme.active.light}" }, "outline-light": { - "value": "{color.theme.active.light}", - "type": "color", - "source": "$btn-light-outline-active-border-color" + "source": "$btn-light-outline-active-border-color", + "$value": "{color.theme.active.light}" + }, + "inverse-light": { + "source": "$btn-light-inverse-active-border-color", + "$value": "inherit" }, - "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-active-border-color" }, "inverse-outline-light": { - "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-active-border-color" + "source": "$btn-light-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-focus-color" }, + "light": { + "source": "$btn-light-focus-color", + "$value": "{color.btn.text.light}" + }, "outline-light": { - "value": "{color.btn.text.outline-light}", - "type": "color", - "source": "$btn-light-outline-focus-color" + "source": "$btn-light-outline-focus-color", + "$value": "{color.btn.text.outline-light}" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-focus-color" + "source": "$btn-light-inverse-focus-color", + "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { - "value": "{color.btn.text.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-focus-color" + "source": "$btn-light-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-light}" } }, "border": { - "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-focus-border-color" }, + "light": { + "source": "$btn-light-focus-border-color", + "$value": "{color.btn.border.light}" + }, "outline-light": { - "value": "{color.btn.border.outline-light}", - "type": "color", - "source": "$btn-light-outline-focus-border-color" + "source": "$btn-light-outline-focus-border-color", + "$value": "{color.btn.border.outline-light}" }, "inverse-light": { - "value": "{color.btn.border.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-focus-border-color" + "source": "$btn-light-inverse-focus-border-color", + "$value": "{color.btn.border.inverse-light}" }, "inverse-outline-light": { - "value": "{color.btn.border.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-focus-border-color" + "source": "$btn-light-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-light}" } }, "bg": { - "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-focus-bg" }, - "outline-light": { "value": "transparent", "type": "color", "source": "$btn-light-outline-focus-bg" }, - "inverse-light": { "value": "{color.btn.bg.inverse-light}", "type": "color", "source": "$btn-light-inverse-focus-bg" }, - "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-focus-bg" } + "light": { + "source": "$btn-light-focus-bg", + "$value": "{color.btn.bg.light}" + }, + "outline-light": { + "source": "$btn-light-outline-focus-bg", + "$value": "transparent" + }, + "inverse-light": { + "source": "$btn-light-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-light}" + }, + "inverse-outline-light": { + "source": "$btn-light-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "light": { "value": "{color.primary.300}", "type": "color", "source": "$btn-light-focus-outline-color" }, - "outline-light": { "value": "{color.theme.focus.light}", "type": "color", "source": "$btn-light-outline-focus-outline-color" }, - "inverse-light": { "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-focus-outline-color" }, + "light": { + "source": "$btn-light-focus-outline-color", + "$value": "{color.primary.300}" + }, + "outline-light": { + "source": "$btn-light-outline-focus-outline-color", + "$value": "{color.theme.focus.light}" + }, + "inverse-light": { + "source": "$btn-light-inverse-focus-outline-color", + "$value": "{color.white}" + }, "inverse-outline-light": { - "value": "{color.btn.focus.border.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-focus-outline-color" + "source": "$btn-light-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-outline-light}" } } }, "disabled": { "text": { - "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-disabled-color" }, + "light": { + "source": "$btn-light-disabled-color", + "$value": "{color.btn.text.light}" + }, "outline-light": { - "value": "{color.btn.hover.text.outline-light}", - "type": "color", - "source": "$btn-light-outline-disabled-color" + "source": "$btn-light-outline-disabled-color", + "$value": "{color.btn.hover.text.outline-light}" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-disabled-color" + "source": "$btn-light-inverse-disabled-color", + "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { - "value": "{color.btn.text.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-disabled-color" + "source": "$btn-light-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-light}" } }, "bg": { - "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-disabled-bg" }, - "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-disabled-bg" }, - "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-disabled-bg" }, - "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-disabled-bg" } + "light": { + "source": "$btn-light-disabled-bg", + "$value": "{color.btn.bg.light}" + }, + "outline-light": { + "source": "$btn-light-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-light": { + "source": "$btn-light-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-light": { + "source": "$btn-light-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-disabled-border-color" }, + "light": { + "source": "$btn-light-disabled-border-color", + "$value": "{color.btn.border.light}" + }, "outline-light": { - "value": "{color.btn.hover.text.outline-light}", - "type": "color", - "source": "$btn-light-outline-disabled-border-color" + "source": "$btn-light-outline-disabled-border-color", + "$value": "{color.btn.hover.text.outline-light}" + }, + "inverse-light": { + "source": "$btn-light-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-disabled-border-color" }, "inverse-outline-light": { - "value": "{color.btn.border.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-disabled-border-color" + "source": "$btn-light-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-light}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index edf5c1f037..2fd9356059 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -1,250 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "primary": { - "value": "{color.btn.bg.primary}", - "type": "color", "source": "$btn-primary-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.primary}" }, "outline-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-color" + "source": "$btn-primary-outline-color", + "$value": "{color.primary.base}" }, "inverse-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-inverse-color" + "source": "$btn-primary-inverse-color", + "$value": "{color.primary.base}" }, "inverse-outline-primary": { - "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-color" + "source": "$btn-primary-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "primary": { "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-bg" }, - "outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-outline-bg" }, - "inverse-outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-bg" }, + "primary": { + "source": "$btn-primary-bg", + "$value": "{color.primary.base}" + }, + "outline-primary": { + "source": "$btn-primary-outline-bg", + "$value": "transparent" + }, + "inverse-outline-primary": { + "source": "$btn-primary-inverse-outline-bg", + "$value": "transparent" + }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", "source": "$btn-primary-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-primary}" } }, "border": { - "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-border-color" }, + "primary": { + "source": "$btn-primary-border-color", + "$value": "{color.btn.bg.primary}" + }, "outline-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-border-color" + "source": "$btn-primary-outline-border-color", + "$value": "{color.primary.base}" }, "inverse-outline-primary": { - "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-border-color" + "source": "$btn-primary-inverse-outline-border-color", + "$value": "{color.white}" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-border-color" } + "inverse-primary": { + "source": "$btn-primary-inverse-border-color", + "$value": "transparent" + } }, "hover": { "text": { "primary": { - "value": "{color.btn.hover.bg.primary}", - "type": "color", "source": "$btn-primary-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.primary}" }, "outline-primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-outline-hover-color" + "source": "$btn-primary-outline-hover-color", + "$value": "{color.theme.hover.primary}" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", "source": "$btn-primary-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.theme.hover.primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-hover-color" + "source": "$btn-primary-inverse-outline-hover-color", + "$value": "{color.theme.hover.primary}" } }, "bg": { "primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-bg" + "source": "$btn-primary-hover-bg", + "$value": "{color.theme.hover.primary}" }, "outline-primary": { - "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-outline-hover-bg" + "source": "$btn-primary-outline-hover-bg", + "$value": "{color.primary.100}" }, "inverse-primary": { - "value": "{color.btn.bg.inverse-primary}", - "type": "color", "source": "$btn-primary-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-inverse-outline-hover-bg" + "source": "$btn-primary-inverse-outline-hover-bg", + "$value": "{color.primary.100}" } }, "border": { "primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-border-color" + "source": "$btn-primary-hover-border-color", + "$value": "{color.theme.hover.primary}" }, "outline-primary": { - "value": "{color.primary.900}", "type": "color", "source": "$btn-primary-outline-hover-border-color" + "source": "$btn-primary-outline-hover-border-color", + "$value": "{color.primary.900}" }, "inverse-outline-primary": { - "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-hover-border-color" + "source": "$btn-primary-inverse-outline-hover-border-color", + "$value": "transparent" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-hover-border-color" } + "inverse-primary": { + "source": "$btn-primary-inverse-hover-border-color", + "$value": "transparent" + } } }, "active": { "text": { "primary": { - "value": "{color.btn.active.bg.primary}", - "type": "color", "source": "$btn-primary-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.primary}" }, "outline-primary": { - "value": "{color.btn.active.bg.outline-primary}", - "type": "color", "source": "$btn-primary-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-primary}" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", "source": "$btn-primary-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.active.bg.inverse-outline-primary}", - "type": "color", "source": "$btn-primary-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-primary}" + } }, "bg": { "primary": { - "value": "{color.theme.active.primary}", "type": "color", "source": "$btn-primary-active-bg" + "source": "$btn-primary-active-bg", + "$value": "{color.theme.active.primary}" }, "outline-primary": { - "value": "{color.theme.bg.primary}", "type": "color", "source": "$btn-primary-outline-active-bg" + "source": "$btn-primary-outline-active-bg", + "$value": "{color.theme.bg.primary}" }, "inverse-outline-primary": { - "value": "{color.theme.bg.primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-active-bg" + "source": "$btn-primary-inverse-outline-active-bg", + "$value": "{color.theme.bg.primary}" }, - "inverse-primary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-primary-inverse-active-bg" } + "inverse-primary": { + "source": "$btn-primary-inverse-active-bg", + "$value": "{color.gray.100}" + } }, "border": { "primary": { - "value": "{color.theme.active.primary}", - "type": "color", - "source": "$btn-primary-active-border-color" + "source": "$btn-primary-active-border-color", + "$value": "{color.theme.active.primary}" }, "outline-primary": { - "value": "{color.theme.active.primary}", - "type": "color", - "source": "$btn-primary-outline-active-border-color" + "source": "$btn-primary-outline-active-border-color", + "$value": "{color.theme.active.primary}" }, "inverse-outline-primary": { - "value": "transparent", - "type": "color", - "source": "$btn-primary-inverse-outline-active-border-color" + "source": "$btn-primary-inverse-outline-active-border-color", + "$value": "transparent" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-active-border-color" } + "inverse-primary": { + "source": "$btn-primary-inverse-active-border-color", + "$value": "transparent" + } } }, "focus": { "text": { - "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-focus-color" }, + "primary": { + "source": "$btn-primary-focus-color", + "$value": "{color.btn.text.primary}" + }, "outline-primary": { - "value": "{color.btn.text.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-focus-color" + "source": "$btn-primary-outline-focus-color", + "$value": "{color.btn.text.outline-primary}" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", - "source": "$btn-primary-inverse-focus-color" + "source": "$btn-primary-inverse-focus-color", + "$value": "{color.btn.text.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-focus-color" + "source": "$btn-primary-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-primary}" } }, "border": { - "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-focus-border-color" }, + "primary": { + "source": "$btn-primary-focus-border-color", + "$value": "{color.btn.border.primary}" + }, "outline-primary": { - "value": "{color.btn.border.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-focus-border-color" + "source": "$btn-primary-outline-focus-border-color", + "$value": "{color.btn.border.outline-primary}" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-focus-border-color", + "$value": "{color.white}" }, - "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color" }, "inverse-outline-primary": { - "value": "{color.btn.border.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-focus-border-color" + "source": "$btn-primary-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-primary}" } }, "outline": { - "primary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-focus-outline-color" }, + "primary": { + "source": "$btn-primary-focus-focus-outline-color", + "$value": "{color.theme.focus.primary}" + }, "outline-primary": { - "value": "{color.theme.focus.primary}", - "type": "color", - "source": "$btn-primary-outline-focus-outline-color" + "source": "$btn-primary-outline-focus-outline-color", + "$value": "{color.theme.focus.primary}" }, "inverse-primary": { - "value": "{color.btn.focus.border.inverse-primary}", - "type": "color", - "source": "$btn-primary-inverse-focus-outline-color" + "source": "$btn-primary-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.border.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-focus-outline-color" + "source": "$btn-primary-inverse-outline-focus-outline-color", + "$value": "{color.btn.border.inverse-outline-primary}" } }, "bg": { - "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-focus-bg" }, - "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-focus-bg" }, - "inverse-primary": { "value": "{color.btn.bg.inverse-primary}", "type": "color", "source": "$btn-primary-inverse-focus-bg" }, - "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-focus-bg" } + "primary": { + "source": "$btn-primary-focus-bg", + "$value": "{color.btn.bg.primary}" + }, + "outline-primary": { + "source": "$btn-primary-outline-focus-bg", + "$value": "inherit" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-primary}" + }, + "inverse-outline-primary": { + "source": "$btn-primary-inverse-outline-focus-bg", + "$value": "inherit" + } } }, "disabled": { "text": { - "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-disabled-color" }, - "inverse-primary": { "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-inverse-disabled-color" }, + "primary": { + "source": "$btn-primary-disabled-color", + "$value": "{color.btn.text.primary}" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-disabled-color", + "$value": "{color.primary.500}" + }, "outline-primary": { - "value": "{color.btn.hover.text.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-disabled-color" + "source": "$btn-primary-outline-disabled-color", + "$value": "{color.btn.hover.text.outline-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-disabled-color" + "source": "$btn-primary-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-primary}" } }, "bg": { - "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-disabled-bg" }, - "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-disabled-bg" }, - "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-disabled-bg" }, - "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-disabled-bg" } + "primary": { + "source": "$btn-primary-disabled-bg", + "$value": "{color.btn.bg.primary}" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-disabled-bg", + "$value": "{color.white}" + }, + "outline-primary": { + "source": "$btn-primary-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-primary": { + "source": "$btn-primary-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-disabled-border-color" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-disabled-border-color" }, + "primary": { + "source": "$btn-primary-disabled-border-color", + "$value": "{color.btn.border.primary}" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-disabled-border-color", + "$value": "transparent" + }, "outline-primary": { - "value": "{color.btn.hover.text.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-disabled-border-color" + "source": "$btn-primary-outline-disabled-border-color", + "$value": "{color.btn.hover.text.outline-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-disabled-border-color" + "source": "$btn-primary-inverse-outline-disabled-border-color", + "$value": "{color.btn.text.inverse-outline-primary}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json index c2b6c680d3..abd813854c 100644 --- a/tokens/src/themes/light/components/Button/secondary.json +++ b/tokens/src/themes/light/components/Button/secondary.json @@ -1,278 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "secondary": { - "value": "{color.btn.bg.secondary}", - "type": "color", "source": "$btn-secondary-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.secondary}" }, "outline-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-color" + "source": "$btn-secondary-outline-color", + "$value": "{color.secondary.base}" }, "inverse-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-inverse-color" + "source": "$btn-secondary-inverse-color", + "$value": "{color.secondary.base}" }, "inverse-outline-secondary": { - "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-color" + "source": "$btn-secondary-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { "secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-bg" + "source": "$btn-secondary-bg", + "$value": "{color.secondary.base}" + }, + "outline-secondary": { + "source": "$btn-secondary-outline-bg", + "$value": "inherit" + }, + "inverse-outline-secondary": { + "source": "$btn-secondary-inverse-outline-bg", + "$value": "inherit" }, - "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-bg" }, - "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-bg" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary}", - "type": "color", "source": "$btn-secondary-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-secondary}" } }, "border": { "secondary": { - "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-border-color" + "source": "$btn-secondary-border-color", + "$value": "{color.btn.bg.secondary}" }, "outline-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-border-color" + "source": "$btn-secondary-outline-border-color", + "$value": "{color.secondary.base}" }, "inverse-outline-secondary": { - "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-border-color" + "source": "$btn-secondary-inverse-outline-border-color", + "$value": "{color.white}" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-border-color" } + "inverse-secondary": { + "source": "$btn-secondary-inverse-border-color", + "$value": "transparent" + } }, "hover": { "text": { "secondary": { - "value": "{color.btn.hover.bg.secondary}", - "type": "color", "source": "$btn-secondary-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.secondary}" }, "outline-secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", - "source": "$btn-secondary-outline-hover-color" + "source": "$btn-secondary-outline-hover-color", + "$value": "{color.theme.hover.secondary}" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary}", - "type": "color", "source": "$btn-secondary-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-secondary}" }, "inverse-outline-secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-hover-color" + "source": "$btn-secondary-inverse-outline-hover-color", + "$value": "{color.theme.hover.secondary}" } }, "bg": { "secondary": { - "value": "{color.theme.hover.secondary}", "type": "color", "source": "$btn-secondary-hover-bg" + "source": "$btn-secondary-hover-bg", + "$value": "{color.theme.hover.secondary}" }, "outline-secondary": { - "value": "{color.secondary.100}", "type": "color", "source": "$btn-secondary-outline-hover-bg" + "source": "$btn-secondary-outline-hover-bg", + "$value": "{color.secondary.100}" }, "inverse-secondary": { - "value": "{color.btn.bg.inverse-secondary}", - "type": "color", "source": "$btn-secondary-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-secondary}" }, "inverse-outline-secondary": { - "value": "{color.secondary.100}", - "type": "color", - "source": "$btn-secondary-inverse-outline-hover-bg" + "source": "$btn-secondary-inverse-outline-hover-bg", + "$value": "{color.secondary.100}" } }, "border": { "secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", - "source": "$btn-secondary-hover-border-color" + "source": "$btn-secondary-hover-border-color", + "$value": "{color.theme.hover.secondary}" }, "outline-secondary": { - "value": "{color.secondary.900}", - "type": "color", - "source": "$btn-secondary-outline-hover-border-color" + "source": "$btn-secondary-outline-hover-border-color", + "$value": "{color.secondary.900}" }, "inverse-outline-secondary": { - "value": "transparent", - "type": "color", - "source": "$btn-secondary-inverse-outline-hover-border-color" + "source": "$btn-secondary-inverse-outline-hover-border-color", + "$value": "transparent" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-hover-border-color" } + "inverse-secondary": { + "source": "$btn-secondary-inverse-hover-border-color", + "$value": "transparent" + } } }, "active": { "text": { "secondary": { - "value": "{color.btn.active.bg.secondary}", - "type": "color", "source": "$btn-secondary-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.secondary}" }, "outline-secondary": { - "value": "{color.btn.active.bg.outline-secondary}", - "type": "color", "source": "$btn-secondary-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-secondary}" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary}", - "type": "color", "source": "$btn-secondary-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-secondary}" }, "inverse-outline-secondary": { - "value": "{color.btn.active.bg.inverse-outline-secondary}", - "type": "color", "source": "$btn-secondary-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-secondary}" + } }, "bg": { "secondary": { - "value": "{color.theme.active.secondary}", "type": "color", "source": "$btn-secondary-active-bg" + "source": "$btn-secondary-active-bg", + "$value": "{color.theme.active.secondary}" }, "outline-secondary": { - "value": "{color.theme.bg.secondary}", "type": "color", "source": "$btn-secondary-outline-active-bg" + "source": "$btn-secondary-outline-active-bg", + "$value": "{color.theme.bg.secondary}" }, "inverse-outline-secondary": { - "value": "{color.theme.bg.secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-active-bg" + "source": "$btn-secondary-inverse-outline-active-bg", + "$value": "{color.theme.bg.secondary}" }, - "inverse-secondary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-secondary-inverse-active-bg" } + "inverse-secondary": { + "source": "$btn-secondary-inverse-active-bg", + "$value": "{color.gray.100}" + } }, "border": { "secondary": { - "value": "{color.theme.active.secondary}", - "type": "color", - "source": "$btn-secondary-active-border-color" + "source": "$btn-secondary-active-border-color", + "$value": "{color.theme.active.secondary}" }, "outline-secondary": { - "value": "{color.theme.active.secondary}", - "type": "color", - "source": "$btn-secondary-outline-active-border-color" + "source": "$btn-secondary-outline-active-border-color", + "$value": "{color.theme.active.secondary}" }, "inverse-outline-secondary": { - "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-outline-active-border-color" + "source": "$btn-secondary-inverse-outline-active-border-color", + "$value": "transparent" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-active-border-color" } + "inverse-secondary": { + "source": "$btn-secondary-inverse-active-border-color", + "$value": "transparent" + } } }, "focus": { "text": { - "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-focus-color" }, - "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-focus-color" }, + "secondary": { + "source": "$btn-secondary-focus-color", + "$value": "{color.btn.text.secondary}" + }, + "inverse-secondary": { + "source": "$btn-secondary-inverse-focus-color", + "$value": "inherit" + }, "outline-secondary": { - "value": "{color.btn.text.outline-secondary}", - "type": "color", - "source": "$btn-secondary-outline-focus-color" + "source": "$btn-secondary-outline-focus-color", + "$value": "{color.btn.text.outline-secondary}" }, "inverse-outline-secondary": { - "value": "{color.btn.text.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-focus-color" + "source": "$btn-secondary-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-secondary}" } }, "border": { "secondary": { - "value": "{color.btn.bg.secondary}", - "type": "color", - "source": "$btn-secondary-focus-border-color" + "source": "$btn-secondary-focus-border-color", + "$value": "{color.btn.bg.secondary}" }, "outline-secondary": { - "value": "{color.btn.border.outline-secondary}", - "type": "color", - "source": "$btn-secondary-outline-focus-border-color" + "source": "$btn-secondary-outline-focus-border-color", + "$value": "{color.btn.border.outline-secondary}" }, "inverse-secondary": { - "value": "{color.white}", - "type": "color", - "source": "$btn-secondary-inverse-focus-border-color" + "source": "$btn-secondary-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-secondary": { - "value": "{color.white}", - "type": "color", - "source": "$btn-secondary-inverse-outline-focus-border-color" + "source": "$btn-secondary-inverse-outline-focus-border-color", + "$value": "{color.white}" } }, "outline": { "secondary": { - "value": "{color.theme.focus.secondary}", - "type": "color", - "source": "$btn-secondary-focus-outline-color" + "source": "$btn-secondary-focus-outline-color", + "$value": "{color.theme.focus.secondary}" }, "outline-secondary": { - "value": "{color.theme.focus.secondary}", - "type": "color", - "source": "$btn-secondary-outline-focus-outline-color" + "source": "$btn-secondary-outline-focus-outline-color", + "$value": "{color.theme.focus.secondary}" }, "inverse-secondary": { - "value": "{color.white}", - "type": "color", - "source": "$btn-secondary-inverse-focus-outline-color" + "source": "$btn-secondary-inverse-focus-outline-color", + "$value": "{color.white}" }, "inverse-outline-secondary": { - "value": "{color.btn.border.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-focus-outline-color" + "source": "$btn-secondary-inverse-outline-focus-outline-color", + "$value": "{color.btn.border.inverse-outline-secondary}" } }, "bg": { - "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-focus-bg" }, - "outline-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-outline-focus-bg" }, + "secondary": { + "source": "$btn-secondary-focus-bg", + "$value": "{color.btn.bg.secondary}" + }, + "outline-secondary": { + "source": "$btn-secondary-outline-focus-bg", + "$value": "transparent" + }, "inverse-secondary": { - "value": "{color.btn.bg.inverse-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-focus-bg" + "source": "$btn-secondary-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-secondary}" }, - "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-focus-bg" } + "inverse-outline-secondary": { + "source": "$btn-secondary-inverse-outline-focus-bg", + "$value": "inherit" + } } }, "disabled": { "text": { - "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-disabled-color" }, + "secondary": { + "source": "$btn-secondary-disabled-color", + "$value": "{color.btn.text.secondary}" + }, "outline-secondary": { - "value": "inherit", - "type": "color", - "source": "$btn-secondary-outline-disabled-color" + "source": "$btn-secondary-outline-disabled-color", + "$value": "inherit" + }, + "inverse-secondary": { + "source": "$btn-secondary-inverse-disabled-color", + "$value": "inherit" }, - "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-color" }, "inverse-outline-secondary": { - "value": "{color.btn.text.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-disabled-color" + "source": "$btn-secondary-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-secondary}" } }, "bg": { - "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-disabled-bg" }, - "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-disabled-bg" }, - "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-bg" }, - "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-disabled-bg" } + "secondary": { + "source": "$btn-secondary-disabled-bg", + "$value": "{color.btn.bg.secondary}" + }, + "outline-secondary": { + "source": "$btn-secondary-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-secondary": { + "source": "$btn-secondary-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-secondary": { + "source": "$btn-secondary-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-disabled-border-color" }, + "secondary": { + "source": "$btn-secondary-disabled-border-color", + "$value": "inherit" + }, "outline-secondary": { - "value": "{color.secondary.base}", - "type": "color", - "source": "$btn-secondary-outline-disabled-border-color" + "source": "$btn-secondary-outline-disabled-border-color", + "$value": "{color.secondary.base}" }, "inverse-secondary": { - "value": "{color.btn.border.inverse-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-disabled-border-color" + "source": "$btn-secondary-inverse-disabled-border-color", + "$value": "{color.btn.border.inverse-secondary}" }, "inverse-outline-secondary": { - "value": "{color.btn.border.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-disabled-border-color" + "source": "$btn-secondary-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-secondary}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json index 4b68d59462..34bb30e6d0 100644 --- a/tokens/src/themes/light/components/Button/success.json +++ b/tokens/src/themes/light/components/Button/success.json @@ -1,253 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "success": { - "value": "{color.btn.bg.success}", - "type": "color", "source": "$btn-success-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.success}" }, "outline-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-color" + "source": "$btn-success-outline-color", + "$value": "{color.success.base}" }, "inverse-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-color" + "source": "$btn-success-inverse-color", + "$value": "{color.success.base}" }, "inverse-outline-success": { - "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-color" + "source": "$btn-success-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-bg" }, - "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-bg" }, + "success": { + "source": "$btn-success-bg", + "$value": "{color.success.base}" + }, + "outline-success": { + "source": "$btn-success-outline-bg", + "$value": "inherit" + }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", "source": "$btn-success-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-success}" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-bg" } + "inverse-outline-success": { + "source": "$btn-success-inverse-outline-bg", + "$value": "inherit" + } }, "border": { - "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-border-color" }, + "success": { + "source": "$btn-success-border-color", + "$value": "{color.btn.bg.success}" + }, "outline-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-border-color" + "source": "$btn-success-outline-border-color", + "$value": "{color.success.base}" + }, + "inverse-success": { + "source": "$btn-success-inverse-border-color", + "$value": "transparent" }, - "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-border-color" }, "inverse-outline-success": { - "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-border-color" + "source": "$btn-success-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "success": { - "value": "{color.btn.hover.bg.success}", - "type": "color", "source": "$btn-success-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.success}" }, "outline-success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-outline-hover-color" + "source": "$btn-success-outline-hover-color", + "$value": "{color.theme.hover.success}" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", "source": "$btn-success-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { - "value": "{color.theme.hover.success}", - "type": "color", - "source": "$btn-success-inverse-outline-hover-color" + "source": "$btn-success-inverse-outline-hover-color", + "$value": "{color.theme.hover.success}" } }, "bg": { "success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-bg" + "source": "$btn-success-hover-bg", + "$value": "{color.theme.hover.success}" }, "outline-success": { - "value": "{color.success.100}", "type": "color", "source": "$btn-success-outline-hover-bg" + "source": "$btn-success-outline-hover-bg", + "$value": "{color.success.100}" }, "inverse-success": { - "value": "{color.btn.bg.inverse-success}", - "type": "color", "source": "$btn-success-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-success}" }, "inverse-outline-success": { - "value": "{color.success.100}", "type": "color", "source": "$btn-success-inverse-outline-hover-bg" + "source": "$btn-success-inverse-outline-hover-bg", + "$value": "{color.success.100}" } }, "border": { "success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-border-color" + "source": "$btn-success-hover-border-color", + "$value": "{color.theme.hover.success}" }, "outline-success": { - "value": "{color.success.900}", "type": "color", "source": "$btn-success-outline-hover-border-color" + "source": "$btn-success-outline-hover-border-color", + "$value": "{color.success.900}" + }, + "inverse-success": { + "source": "$btn-success-inverse-hover-border-color", + "$value": "transparent" }, - "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-hover-border-color" }, "inverse-outline-success": { - "value": "transparent", "type": "color", "source": "$btn-success-inverse-outline-hover-border-color" + "source": "$btn-success-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "success": { - "value": "{color.btn.active.bg.success}", - "type": "color", "source": "$btn-success-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.success}" }, "outline-success": { - "value": "{color.btn.active.bg.outline-success}", - "type": "color", "source": "$btn-success-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-success}" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", "source": "$btn-success-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { - "value": "{color.btn.active.bg.inverse-outline-success}", - "type": "color", "source": "$btn-success-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-success}" + } }, "bg": { "success": { - "value": "{color.theme.active.success}", "type": "color", "source": "$btn-success-active-bg" + "source": "$btn-success-active-bg", + "$value": "{color.theme.active.success}" }, "outline-success": { - "value": "{color.theme.bg.success}", "type": "color", "source": "$btn-success-outline-active-bg" + "source": "$btn-success-outline-active-bg", + "$value": "{color.theme.bg.success}" + }, + "inverse-success": { + "source": "$btn-success-inverse-active-bg", + "$value": "{color.gray.100}" }, - "inverse-success": { "value": "{color.gray.100}", "type": "color", "source": "$btn-success-inverse-active-bg" }, "inverse-outline-success": { - "value": "{color.theme.bg.success}", - "type": "color", - "source": "$btn-success-inverse-outline-active-bg" + "source": "$btn-success-inverse-outline-active-bg", + "$value": "{color.theme.bg.success}" } }, "border": { "success": { - "value": "{color.theme.active.success}", - "type": "color", - "source": "$btn-success-active-border-color" + "source": "$btn-success-active-border-color", + "$value": "{color.theme.active.success}" }, "outline-success": { - "value": "{color.theme.active.success}", - "type": "color", - "source": "$btn-success-outline-active-border-color" + "source": "$btn-success-outline-active-border-color", + "$value": "{color.theme.active.success}" }, "inverse-success": { - "value": "inherit", - "source": "$btn-success-inverse-active-border-color" + "source": "$btn-success-inverse-active-border-color", + "$value": "inherit" }, "inverse-outline-success": { - "value": "transparent", - "type": "color", - "source": "$btn-success-inverse-outline-active-border-color" + "source": "$btn-success-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-focus-color" }, + "success": { + "source": "$btn-success-focus-color", + "$value": "{color.btn.text.success}" + }, "outline-success": { - "value": "{color.btn.text.outline-success}", - "type": "color", - "source": "$btn-success-outline-focus-color" + "source": "$btn-success-outline-focus-color", + "$value": "{color.btn.text.outline-success}" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", - "source": "$btn-success-inverse-focus-color" + "source": "$btn-success-inverse-focus-color", + "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { - "value": "{color.btn.text.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-focus-color" + "source": "$btn-success-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-success}" } }, "border": { - "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-focus-border-color" }, + "success": { + "source": "$btn-success-focus-border-color", + "$value": "{color.btn.border.success}" + }, "outline-success": { - "value": "{color.btn.border.outline-success}", - "type": "color", - "source": "$btn-success-outline-focus-border-color" + "source": "$btn-success-outline-focus-border-color", + "$value": "{color.btn.border.outline-success}" }, "inverse-success": { - "value": "{color.white}", - "type": "color", - "source": "$btn-success-inverse-focus-border-color" + "source": "$btn-success-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-success": { - "value": "{color.btn.border.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-focus-border-color" + "source": "$btn-success-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-success}" } }, "bg": { - "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-focus-bg" }, - "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-focus-bg" }, - "inverse-success": { "value": "{color.btn.bg.inverse-success}", "type": "color", "source": "$btn-success-inverse-focus-bg" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-focus-bg" } + "success": { + "source": "$btn-success-focus-bg", + "$value": "{color.btn.bg.success}" + }, + "outline-success": { + "source": "$btn-success-outline-focus-bg", + "$value": "inherit" + }, + "inverse-success": { + "source": "$btn-success-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-success}" + }, + "inverse-outline-success": { + "source": "$btn-success-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "success": { "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-outline-color" }, + "success": { + "source": "$btn-success-focus-outline-color", + "$value": "{color.theme.focus.success}" + }, "outline-success": { - "value": "{color.theme.focus.success}", - "type": "color", - "source": "$btn-success-outline-focus-outline-color" + "source": "$btn-success-outline-focus-outline-color", + "$value": "{color.theme.focus.success}" }, "inverse-success": { - "value": "{color.btn.focus.border.inverse-success}", - "type": "color", - "source": "$btn-success-inverse-focus-outline-color" + "source": "$btn-success-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-success}" }, "inverse-outline-success": { - "value": "{color.btn.focus.border.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-focus-outline-color" + "source": "$btn-success-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-outline-success}" } } }, "disabled": { "text": { - "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-disabled-color" }, + "success": { + "source": "$btn-success-disabled-color", + "$value": "{color.btn.text.success}" + }, "outline-success": { - "value": "{color.btn.text.outline-success}", - "type": "color", - "source": "$btn-success-outline-disabled-color" + "source": "$btn-success-outline-disabled-color", + "$value": "{color.btn.text.outline-success}" + }, + "inverse-success": { + "source": "$btn-success-inverse-disabled-color", + "$value": "{color.success.base}" }, - "inverse-success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-disabled-color" }, "inverse-outline-success": { - "value": "{color.btn.text.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-disabled-color" + "source": "$btn-success-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-success}" } }, "bg": { - "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-disabled-bg" }, - "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-disabled-bg" }, - "inverse-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-disabled-bg" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-bg" } + "success": { + "source": "$btn-success-disabled-bg", + "$value": "{color.btn.bg.success}" + }, + "outline-success": { + "source": "$btn-success-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-success": { + "source": "$btn-success-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-success": { + "source": "$btn-success-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-disabled-border-color" }, + "success": { + "source": "$btn-success-disabled-border-color", + "$value": "{color.btn.border.success}" + }, "outline-success": { - "value": "{color.btn.border.outline-success}", - "type": "color", - "source": "$btn-success-outline-disabled-border-color" + "source": "$btn-success-outline-disabled-border-color", + "$value": "{color.btn.border.outline-success}" + }, + "inverse-success": { + "source": "$btn-success-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-disabled-border-color" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-border-color" } + "inverse-outline-success": { + "source": "$btn-success-inverse-outline-disabled-border-color", + "$value": "inherit" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json index a743b5f0de..678c3c52f3 100644 --- a/tokens/src/themes/light/components/Button/tertiary.json +++ b/tokens/src/themes/light/components/Button/tertiary.json @@ -1,109 +1,181 @@ { + "$type": "color", "color": { "btn": { "text": { - "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-color" }, + "tertiary": { + "source": "$btn-tertiary-color", + "$value": "{color.gray.700}" + }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-color" + "source": "$btn-inverse-tertiary-color", + "$value": "{color.white}" } }, "bg": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-bg" }, - "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-bg" } + "tertiary": { + "source": "$btn-tertiary-bg", + "$value": "transparent" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-bg", + "$value": "transparent" + } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-border-color" }, - "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-border-color" } + "tertiary": { + "source": "$btn-tertiary-border-color", + "$value": "transparent" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-border-color", + "$value": "transparent" + } }, "hover": { "text": { - "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-hover-color" }, + "tertiary": { + "source": "$btn-tertiary-hover-color", + "$value": "{color.gray.700}" + }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-hover-color" + "source": "$btn-inverse-tertiary-hover-color", + "$value": "{color.white}" } }, "bg": { - "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-hover-bg" }, + "tertiary": { + "source": "$btn-tertiary-hover-bg", + "$value": "{color.light.500}" + }, "inverse-tertiary": { - "value": "{color.white}", - "type": "color", "source": "$btn-inverse-tertiary-hover-bg", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.white}" } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-hover-border-color" }, + "tertiary": { + "source": "$btn-tertiary-hover-border-color", + "$value": "transparent" + }, "inverse-tertiary": { - "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-hover-border-color" + "source": "$btn-inverse-tertiary-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "tertiary": { - "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-active-color" + "source": "$btn-tertiary-active-color", + "$value": "{color.gray.700}" }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-active-color" + "source": "$btn-inverse-tertiary-active-color", + "$value": "{color.white}" } }, "bg": { - "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-active-bg" }, - "inverse-tertiary": { - "value": "{color.btn.hover.bg.inverse-tertiary}", - "type": "color", - "source": "$btn-inverse-tertiary-active-bg" + "tertiary": { + "source": "$btn-tertiary-active-bg", + "$value": "{color.light.500}" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-active-bg", + "$value": "{color.btn.hover.bg.inverse-tertiary}" } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-active-border-color" }, + "tertiary": { + "source": "$btn-tertiary-active-border-color", + "$value": "transparent" + }, "inverse-tertiary": { - "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-active-border-color" + "source": "$btn-inverse-tertiary-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-focus-color" }, + "tertiary": { + "source": "$btn-tertiary-focus-color", + "$value": "{color.btn.text.tertiary}" + }, "inverse-tertiary": { - "value": "{color.btn.text.inverse-tertiary}", - "type": "color", - "source": "$btn-inverse-tertiary-focus-color" + "source": "$btn-inverse-tertiary-focus-color", + "$value": "{color.btn.text.inverse-tertiary}" } }, "border": { - "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-focus-border-color" }, - "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color" } + "tertiary": { + "source": "$btn-tertiary-focus-border-color", + "$value": "{color.btn.border.tertiary}" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-focus-border-color", + "$value": "transparent" + } }, "bg": { - "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-focus-bg" }, - "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-focus-bg" } + "tertiary": { + "source": "$btn-tertiary-focus-bg", + "$value": "inherit" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-focus-bg", + "$value": "inherit" + } }, "outline": { - "tertiary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-outline-color" }, - "inverse-tertiary": { "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-outline-color" } + "tertiary": { + "source": "$btn-tertiary-focus-outline-color", + "$value": "{color.theme.focus.primary}" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-focus-outline-color", + "$value": "{color.white}" + } } }, "disabled": { "text": { - "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-color" }, + "tertiary": { + "source": "$btn-tertiary-disabled-color", + "$value": "{color.btn.text.tertiary}" + }, "inverse-tertiary": { - "value": "{color.btn.text.inverse-tertiary}", - "type": "color", - "source": "$btn-inverse-tertiary-disabled-color" + "source": "$btn-inverse-tertiary-disabled-color", + "$value": "{color.btn.text.inverse-tertiary}" } }, "bg": { - "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-disabled-bg" }, - "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-disabled-bg" } + "tertiary": { + "source": "$btn-tertiary-disabled-bg", + "$value": "inherit" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-disabled-bg", + "$value": "inherit" + } }, "border": { - "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-border-color" }, + "tertiary": { + "source": "$btn-tertiary-disabled-border-color", + "$value": "{color.btn.border.tertiary}" + }, "inverse-tertiary": { - "value": "{color.btn.border.inverse-tertiary}", "type": "color", "source": "$btn-inverse-tertiary-disabled-border-color" + "source": "$btn-inverse-tertiary-disabled-border-color", + "$value": "{color.btn.border.inverse-tertiary}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json index 0d47ce0e22..da8670382d 100644 --- a/tokens/src/themes/light/components/Button/warning.json +++ b/tokens/src/themes/light/components/Button/warning.json @@ -1,276 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "warning": { - "value": "{color.btn.bg.warning}", - "type": "color", "source": "$btn-warning-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.warning}" }, "outline-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-color" + "source": "$btn-warning-outline-color", + "$value": "{color.warning.base}" }, "inverse-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-inverse-color" + "source": "$btn-warning-inverse-color", + "$value": "{color.warning.base}" }, "inverse-outline-warning": { - "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-color" + "source": "$btn-warning-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" }, - "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-bg" }, + "warning": { + "source": "$btn-warning-bg", + "$value": "{color.warning.base}" + }, + "outline-warning": { + "source": "$btn-warning-outline-bg", + "$value": "inherit" + }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", "source": "$btn-warning-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-warning}" }, - "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-bg" } + "inverse-outline-warning": { + "source": "$btn-warning-inverse-outline-bg", + "$value": "inherit" + } }, "border": { - "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" }, + "warning": { + "source": "$btn-warning-border-color", + "$value": "{color.btn.bg.warning}" + }, "outline-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color" + "source": "$btn-warning-outline-border-color", + "$value": "{color.warning.base}" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-border-color", + "$value": "transparent" }, - "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-border-color" }, "inverse-outline-warning": { - "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-border-color" + "source": "$btn-warning-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "warning": { - "value": "{color.btn.hover.bg.warning}", - "type": "color", "source": "$btn-warning-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.warning}" }, "outline-warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-outline-hover-color" + "source": "$btn-warning-outline-hover-color", + "$value": "{color.theme.hover.warning}" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", "source": "$btn-warning-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.theme.hover.warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-hover-color" + "source": "$btn-warning-inverse-outline-hover-color", + "$value": "{color.theme.hover.warning}" } }, "bg": { "warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-bg" + "source": "$btn-warning-hover-bg", + "$value": "{color.theme.hover.warning}" }, "outline-warning": { - "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-outline-hover-bg" + "source": "$btn-warning-outline-hover-bg", + "$value": "{color.warning.100}" }, "inverse-warning": { - "value": "{color.btn.bg.inverse-warning}", - "type": "color", "source": "$btn-warning-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-inverse-outline-hover-bg" + "source": "$btn-warning-inverse-outline-hover-bg", + "$value": "{color.warning.100}" } }, "border": { "warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-border-color" + "source": "$btn-warning-hover-border-color", + "$value": "{color.theme.hover.warning}" }, "outline-warning": { - "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color" + "source": "$btn-warning-outline-hover-border-color", + "$value": "{color.warning.900}" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-hover-border-color", + "$value": "transparent" }, - "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-hover-border-color" }, "inverse-outline-warning": { - "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-hover-border-color" + "source": "$btn-warning-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "warning": { - "value": "{color.btn.active.bg.warning}", - "type": "color", "source": "$btn-warning-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.warning}" }, "outline-warning": { - "value": "{color.btn.active.bg.outline-warning}", - "type": "color", "source": "$btn-warning-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-warning}" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", "source": "$btn-warning-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.btn.active.bg.inverse-outline-warning}", - "type": "color", "source": "$btn-warning-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-warning}" + } }, "bg": { "warning": { - "value": "{color.theme.active.warning}", "type": "color", "source": "$btn-warning-active-bg" + "source": "$btn-warning-active-bg", + "$value": "{color.theme.active.warning}" }, "outline-warning": { - "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg" + "source": "$btn-warning-outline-active-bg", + "$value": "{color.theme.bg.warning}" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-active-bg", + "$value": "{color.gray.100}" }, - "inverse-warning": { "value": "{color.gray.100}", "type": "color", "source": "$btn-warning-inverse-active-bg" }, "inverse-outline-warning": { - "value": "{color.theme.bg.warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-active-bg" + "source": "$btn-warning-inverse-outline-active-bg", + "$value": "{color.theme.bg.warning}" } }, "border": { "warning": { - "value": "{color.theme.active.warning}", - "type": "color", - "source": "$btn-warning-active-border-color" + "source": "$btn-warning-active-border-color", + "$value": "{color.theme.active.warning}" }, "inverse-warning": { - "value": "inherit", - "type": "color", - "source": "$btn-warning-inverse-active-border-color" + "source": "$btn-warning-inverse-active-border-color", + "$value": "inherit" }, "outline-warning": { - "value": "{color.theme.active.warning}", - "type": "color", - "source": "$btn-warning-outline-active-border-color" + "source": "$btn-warning-outline-active-border-color", + "$value": "{color.theme.active.warning}" }, "inverse-outline-warning": { - "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-active-border-color" + "source": "$btn-warning-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-focus-color" }, + "warning": { + "source": "$btn-warning-focus-color", + "$value": "{color.btn.text.warning}" + }, "outline-warning": { - "value": "{color.btn.text.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-focus-color" + "source": "$btn-warning-outline-focus-color", + "$value": "{color.btn.text.outline-warning}" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-focus-color" + "source": "$btn-warning-inverse-focus-color", + "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.btn.text.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-focus-color" + "source": "$btn-warning-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-warning}" } }, "border": { "warning": { - "value": "{color.btn.border.warning}", - "type": "color", - "source": "$btn-warning-focus-border-color" + "source": "$btn-warning-focus-border-color", + "$value": "{color.btn.border.warning}" }, "outline-warning": { - "value": "{color.btn.border.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-focus-border-color" + "source": "$btn-warning-outline-focus-border-color", + "$value": "{color.btn.border.outline-warning}" }, "inverse-warning": { - "value": "{color.btn.border.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-focus-border-color" + "source": "$btn-warning-inverse-focus-border-color", + "$value": "{color.btn.border.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.btn.border.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-focus-border-color" + "source": "$btn-warning-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-warning}" } }, "bg": { - "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-focus-bg" }, - "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-focus-bg" }, + "warning": { + "source": "$btn-warning-focus-bg", + "$value": "{color.btn.bg.warning}" + }, + "outline-warning": { + "source": "$btn-warning-outline-focus-bg", + "$value": "inherit" + }, "inverse-warning": { - "value": "{color.btn.bg.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-focus-bg" + "source": "$btn-warning-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-warning}" }, "inverse-outline-warning": { - "value": "inherit", - "type": "color", - "source": "$btn-warning-inverse-outline-focus-bg" + "source": "$btn-warning-inverse-outline-focus-bg", + "$value": "inherit" } }, "outline": { "warning": { - "value": "{color.theme.focus.warning}", - "type": "color", - "source": "$btn-warning-focus-outline-color" + "source": "$btn-warning-focus-outline-color", + "$value": "{color.theme.focus.warning}" }, "outline-warning": { - "value": "{color.theme.focus.warning}", - "type": "color", - "source": "$btn-warning-outline-focus-outline-color" + "source": "$btn-warning-outline-focus-outline-color", + "$value": "{color.theme.focus.warning}" }, "inverse-warning": { - "value": "{color.white}", - "type": "color", - "source": "$btn-warning-inverse-focus-outline-color" + "source": "$btn-warning-inverse-focus-outline-color", + "$value": "{color.white}" }, "inverse-outline-warning": { - "value": "inherit", - "type": "color", - "source": "$btn-warning-inverse-outline-focus-bg" + "source": "$btn-warning-inverse-outline-focus-bg", + "$value": "inherit" } } }, "disabled": { "text": { - "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-disabled-color" }, + "warning": { + "source": "$btn-warning-disabled-color", + "$value": "{color.btn.text.warning}" + }, "outline-warning": { - "value": "{color.btn.text.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-disabled-color" + "source": "$btn-warning-outline-disabled-color", + "$value": "{color.btn.text.outline-warning}" }, "inverse-warning": { - "value": "{color.warning.base}", - "type": "color", - "source": "$btn-warning-inverse-disabled-color" + "source": "$btn-warning-inverse-disabled-color", + "$value": "{color.warning.base}" }, "inverse-outline-warning": { - "value": "{color.btn.text.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-disabled-color" + "source": "$btn-warning-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-warning}" } }, "bg": { - "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-disabled-bg" }, - "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-disabled-bg" }, - "inverse-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-disabled-bg" }, - "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-disabled-bg" } + "warning": { + "source": "$btn-warning-disabled-bg", + "$value": "{color.btn.bg.warning}" + }, + "outline-warning": { + "source": "$btn-warning-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-warning": { + "source": "$btn-warning-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "warning": { "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-disabled-border-color" }, + "warning": { + "source": "$btn-warning-disabled-border-color", + "$value": "{color.btn.border.warning}" + }, "outline-warning": { - "value": "{color.btn.border.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-disabled-border-color" + "source": "$btn-warning-outline-disabled-border-color", + "$value": "{color.btn.border.outline-warning}" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-disabled-border-color" }, "inverse-outline-warning": { - "value": "{color.btn.border.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-disabled-border-color" + "source": "$btn-warning-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-warning}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json index c7deddea25..70e3f39778 100644 --- a/tokens/src/themes/light/components/Card.json +++ b/tokens/src/themes/light/components/Card.json @@ -1,36 +1,51 @@ { + "$type": "color", "color": { "card": { - "base": { "value": "inherit", "type": "color", "source": "$card-color" }, + "base": { + "source": "$card-color", + "$value": "inherit" + }, "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" } + "base": { + "source": "$card-bg", + "$value": "{color.bg.base}" + }, + "dark": { + "source": "$card-bg-dark", + "$value": "{color.primary.500}" + }, + "muted": { + "source": "$card-bg-muted", + "$value": "{color.light.200}" + } }, "border": { "base": { - "value": "{color.black}", - "type": "color", "source": "$card-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.125 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.125 + } + ], + "$value": "{color.black}" }, "focus": { "base": { - "value": "{color.primary.500}", - "type": "color", - "source": "$card-border-focus-color" + "source": "$card-border-focus-color", + "$value": "{color.primary.500}" }, "dark": { - "value": "{color.theme.focus.primary}", - "type": "color", - "source": "$card-border-focus-color-dark" + "source": "$card-border-focus-color-dark", + "$value": "{color.theme.focus.primary}" } } }, - "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" } + "divider-bg": { + "source": "$card-divider-bg", + "$value": "{color.light.400}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json index 834fcf832b..361b460f23 100644 --- a/tokens/src/themes/light/components/Carousel.json +++ b/tokens/src/themes/light/components/Carousel.json @@ -1,45 +1,73 @@ { "color": { + "$type": "color", "carousel": { "control": { - "base": { "value": "{color.white}", "type": "color", "source": "$carousel-control-color" } + "base": { + "source": "$carousel-control-color", + "$value": "{color.white}" + } }, "indicator": { - "active-bg": { "value": "{color.white}", "type": "color", "source": "$carousel-indicator-active-bg" } + "active-bg": { + "source": "$carousel-indicator-active-bg", + "$value": "{color.white}" + } }, - "caption": { "value": "{color.white}", "type": "color", "source": "$carousel-caption-color" } + "caption": { + "source": "$carousel-caption-color", + "$value": "{color.white}" + } } }, "content": { + "$type": "file", "carousel": { "control": { "bg": { "prev-icon": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' 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\")", - "type": "file", "source": "$carousel-control-prev-icon-bg", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' 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\")" }, "next-icon": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' 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\")", - "type": "file", "source": "$carousel-control-next-icon-bg", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' 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\")" } } } } }, "other": { + "$type": "ratio", "carousel": { "control": { "opacity": { - "base": { "value": ".5", "type": "ratio", "source": "$carousel-control-opacity" }, - "hover": { "value": ".9", "type": "ratio", "source": "$carousel-control-hover-opacity" } + "base": { + "source": "$carousel-control-opacity", + "$value": ".5" + }, + "hover": { + "source": "$carousel-control-hover-opacity", + "$value": ".9" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json index d67be11327..9569e7a826 100644 --- a/tokens/src/themes/light/components/Chip.json +++ b/tokens/src/themes/light/components/Chip.json @@ -1,50 +1,74 @@ { "color": { + "$type": "color", "chip": { "text": { - "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" }, - "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" } + "light": { + "source": "$chip-light-color", + "$value": "{color.black}" + }, + "dark": { + "source": "$chip-dark-color", + "$value": "{color.white}" + } }, "bg": { - "light": { "value": "{color.white}", "type": "color", "source": "$chip-light-bg-color" }, - "dark": { "value": "{color.primary.300}", "type": "color", "source": "$chip-dark-bg" } + "light": { + "source": "$chip-light-bg-color", + "$value": "{color.white}" + }, + "dark": { + "source": "$chip-dark-bg", + "$value": "{color.primary.300}" + } }, "border": { "base": { - "value": "{color.light.800}", "type": "color", "source": "$chip-border-color" + "source": "$chip-border-color", + "$value": "{color.light.800}" }, "focus": { "selected": { "dark": { - "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-selected-focus-border-color" + "source": "$chip-dark-selected-focus-border-color", + "$value": "{color.chip.outline.dark}" }, "light": { - "value": "{color.dark.500}", "type": "color", "source": "$chip-light-selected-focus-border-color" + "source": "$chip-light-selected-focus-border-color", + "$value": "{color.dark.500}" } } } }, "label": { "base": { - "value": "{color.primary.700}", "type": "color", "source": "$chip-label-color" + "source": "$chip-label-color", + "$value": "{color.primary.700}" }, "dark": { - "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-label-color" + "source": "$chip-dark-label-color", + "$value": "{color.chip.outline.dark}" } }, "outline": { "dark": { - "value": "{color.white}", "type": "color", "source": "$chip-dark-outline-color" + "source": "$chip-dark-outline-color", + "$value": "{color.white}" }, "light": { - "value": "{color.chip.label.base}", "type": "color", "source": "$chip-light-outline-color" + "source": "$chip-light-outline-color", + "$value": "{color.chip.label.base}" } } } }, "other": { + "$type": "ratio", "chip": { - "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" } + "opacity-disabled": { + "source": "$chip-disable-opacity", + "$value": ".3" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json index 8d00637ca3..658dafcb9e 100644 --- a/tokens/src/themes/light/components/CloseButton.json +++ b/tokens/src/themes/light/components/CloseButton.json @@ -1,10 +1,18 @@ { "color": { - "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" } + "$type": "color", + "close-button": { + "source": "$close-color", + "$value": "{color.black}" + } }, "elevation": { + "$type": "shadow", "close-button": { - "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" } + "text-shadow": { + "source": "$close-text-shadow", + "$value": "0 1px 0 {color.white}" + } } } } diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json index bfdf221bde..951562d2d7 100644 --- a/tokens/src/themes/light/components/Code.json +++ b/tokens/src/themes/light/components/Code.json @@ -1,23 +1,36 @@ { "color": { + "$type": "color", "code": { - "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" }, + "base": { + "source": "$code-color", + "$value": "#E83E8C" + }, "kbd": { - "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" } + "base": { + "source": "$kbd-color", + "$value": "{color.white}" + }, + "bg": { + "source": "$kbd-bg", + "$value": "{color.gray.700}" + } }, - "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" } + "pre": { + "source": "$pre-color", + "$value": "{color.gray.900}" + } } }, "elevation": { + "$type": "shadow", "code": { "kbd": { "box-shadow": { - "value": "none", - "type": "shadow", - "source": "$kbd-box-shadow" + "source": "$kbd-box-shadow", + "$value": "none" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json index bf26918ac5..4189d5b536 100644 --- a/tokens/src/themes/light/components/DataTable.json +++ b/tokens/src/themes/light/components/DataTable.json @@ -1,26 +1,36 @@ { "color": { + "$type": "color", "data-table": { "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" }, + "base": { + "source": "$data-table-background-color", + "$value": "{color.bg.base}" + }, "is-loading": { - "value": "{color.white}", - "type": "color", "source": "$data-table-is-loading-bg", "modify": [ { "type": "alpha", "amount": 0.7 } - ] + ], + "$value": "{color.white}" } }, - "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" } + "border": { + "source": "$data-table-border-color", + "$value": "{color.light.300}" + } } }, "elevation": { + "$type": "shadow", "data-table": { - "box-shadow": { "value": "{elevation.box-shadow.sm}", "type": "shadow", "source": "$data-table-box-shadow" } + "box-shadow": { + "source": "$data-table-box-shadow", + "$value": "{elevation.box-shadow.sm}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json index bf2f03a253..25f0759be7 100644 --- a/tokens/src/themes/light/components/Dropdown.json +++ b/tokens/src/themes/light/components/Dropdown.json @@ -1,41 +1,78 @@ { "color": { + "$type": "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" }, + "text": { + "source": "$dropdown-color", + "$value": "{color.body.base}" + }, + "header": { + "source": "$dropdown-header-color", + "$value": "{color.gray.500}" + }, + "bg": { + "source": "$dropdown-bg", + "$value": "{color.bg.base}" + }, "border": { - "value": "{color.black}", - "type": "color", "source": "$dropdown-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.15 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.15 + } + ], + "$value": "{color.black}" + }, + "divider-bg": { + "source": "$dropdown-divider-bg", + "$value": "{color.gray.100}" }, - "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" }, "link": { - "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" }, + "base": { + "source": "$dropdown-link-color", + "$value": "{color.gray.900}" + }, "hover": { - "base": { - "value": "{color.gray.900}", - "type": "color", + "base": { "source": "$dropdown-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.5 }] + "modify": [ + { + "type": "darken", + "amount": 0.5 + } + ], + "$value": "{color.gray.900}" }, - "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" } + "bg": { + "source": "$dropdown-link-hover-bg", + "$value": "{color.light.300}" + } }, "active": { - "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" } + "base": { + "source": "$dropdown-link-active-color", + "$value": "{color.active}" + }, + "bg": { + "source": "$dropdown-link-active-bg", + "$value": "{color.bg.active}" + } }, - "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" } + "disabled": { + "source": "$dropdown-link-disabled-color", + "$value": "{color.disabled}" + } } } }, "elevation": { + "$type": "shadow", "dropdown": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$dropdown-box-shadow" } + "box-shadow": { + "source": "$dropdown-box-shadow", + "$value": "none" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json index ef252e9d6f..3cb957fbab 100644 --- a/tokens/src/themes/light/components/Dropzone.json +++ b/tokens/src/themes/light/components/Dropzone.json @@ -1,23 +1,42 @@ { "color": { + "$type": "color", "dropzone": { "error-wrapper": { - "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color" + "source": "$dropzone-error-wrapper-color", + "$value": "{color.danger.500}" }, "restriction-msg": { - "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color" + "source": "$dropzone-restriction-msg-color", + "$value": "{color.gray.500}" }, "border": { - "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" } + "base": { + "source": "$dropzone-border-color-default", + "$value": "{color.gray.500}" + } } } }, "elevation": { + "$type": "shadow", "dropzone": { - "hover": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-hover" }, - "focus": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-focus" }, - "active": { "value": "inset 0 0 0 2px {color.primary.500}", "type": "shadow", "source": "$dropzone-box-shadow-active" }, - "error": { "value": "inset 0 0 0 2px {color.danger.300}", "type": "shadow", "source": "$dropzone-box-shadow-error" } + "hover": { + "source": "$dropzone-box-shadow-hover", + "$value": "inset 0 0 0 2px {color.info.300}" + }, + "focus": { + "source": "$dropzone-box-shadow-focus", + "$value": "inset 0 0 0 2px {color.info.300}" + }, + "active": { + "source": "$dropzone-box-shadow-active", + "$value": "inset 0 0 0 2px {color.primary.500}" + }, + "error": { + "source": "$dropzone-box-shadow-error", + "$value": "inset 0 0 0 2px {color.danger.300}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json index 93f507feec..8f240d3af0 100644 --- a/tokens/src/themes/light/components/Form/color.json +++ b/tokens/src/themes/light/components/Form/color.json @@ -2,269 +2,405 @@ "color": { "form": { "input": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$input-color" }, - "placeholder": { "value": "{color.gray.500}", "type": "color", "source": "$input-placeholder-color" }, - "plaintext": { "value": "{color.body.base}", "type": "color", "source": "$input-plaintext-color" }, - "border": { "value": "{color.gray.500}", "type": "color", "source": "$input-border-color" }, + "$type": "color", + "base": { + "source": "$input-color", + "$value": "{color.gray.700}" + }, + "placeholder": { + "source": "$input-placeholder-color", + "$value": "{color.gray.500}" + }, + "plaintext": { + "source": "$input-plaintext-color", + "$value": "{color.body.base}" + }, + "border": { + "source": "$input-border-color", + "$value": "{color.gray.500}" + }, "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$input-bg" }, - "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$input-disabled-bg" } + "base": { + "source": "$input-bg", + "$value": "{color.bg.base}" + }, + "disabled": { + "source": "$input-disabled-bg", + "$value": "{color.gray.100}" + } }, "group": { "addon": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-group-addon-color" }, + "base": { + "source": "$input-group-addon-color", + "$value": "{color.form.input.base}" + }, "border": { - "value": "{color.form.input.border}", "type": "color", "source": "$input-group-addon-border-color" + "source": "$input-group-addon-border-color", + "$value": "{color.form.input.border}" }, - "bg": { "value": "{color.gray.100}", "type": "color", "source": "$input-group-addon-bg" } + "bg": { + "source": "$input-group-addon-bg", + "$value": "{color.gray.100}" + } } }, "focus": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-focus-color" }, - "border": { "value": "{color.input.focus}", "type": "color", "source": "$input-focus-border-color" }, - "bg": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$input-focus-bg" } + "base": { + "source": "$input-focus-color", + "$value": "{color.form.input.base}" + }, + "border": { + "source": "$input-focus-border-color", + "$value": "{color.input.focus}" + }, + "bg": { + "source": "$input-focus-bg", + "$value": "{color.form.input.bg.base}" + } } }, "control": { "indicator": { + "$type": "color", "border": { - "value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color" + "source": "$custom-control-indicator-border-color", + "$value": "{color.gray.700}" }, "bg": { "base": { - "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg" + "source": "$custom-control-indicator-bg", + "$value": "{color.form.input.bg.base}" }, "disabled": { - "value": "{color.form.input.bg.disabled}", - "type": "color", - "source": "$custom-control-indicator-disabled-bg" + "source": "$custom-control-indicator-disabled-bg", + "$value": "{color.form.input.bg.disabled}" } }, "checked": { - "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-color" }, - "valid": { "value": "{color.success.base}", "type": "color", "source": "$custom-control-indicator-checked-valid-color" }, - "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$custom-control-indicator-checked-invalid-color" }, + "base": { + "source": "$custom-control-indicator-checked-color", + "$value": "{color.bg.active}" + }, + "valid": { + "source": "$custom-control-indicator-checked-valid-color", + "$value": "{color.success.base}" + }, + "invalid": { + "source": "$custom-control-indicator-checked-invalid-color", + "$value": "{color.danger.base}" + }, "bg": { "base": { - "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg" + "source": "$custom-control-indicator-checked-bg", + "$value": "{color.bg.active}" }, "disabled": { - "value": "{color.primary.base}", - "type": "color", "source": "$custom-control-indicator-checked-disabled-bg", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.primary.base}" } }, "border": { "base": { - "value": "{color.form.control.indicator.checked.base}", - "type": "color", - "source": "$custom-control-indicator-checked-border-color" + "source": "$custom-control-indicator-checked-border-color", + "$value": "{color.form.control.indicator.checked.base}" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", - "source": "$custom-control-indicator-focus-border-color" + "source": "$custom-control-indicator-focus-border-color", + "$value": "{color.form.input.focus.border}" } } }, "active": { "base": { - "value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color" + "source": "$custom-control-indicator-active-color", + "$value": "{color.active}" }, "bg": { - "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-active-bg" + "source": "$custom-control-indicator-active-bg", + "$value": "{color.bg.active}" }, "border": { - "value": "{color.form.control.indicator.active.bg}", - "type": "color", - "source": "$custom-control-indicator-active-border-color" + "source": "$custom-control-indicator-active-border-color", + "$value": "{color.form.control.indicator.active.bg}" } } }, "label": { - "base": { "value": "inherit", "type": "color", "source": "$custom-control-label-color" }, + "$type": "color", + "base": { + "source": "$custom-control-label-color", + "$value": "inherit" + }, "disabled": { - "value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color" + "source": "$custom-control-label-disabled-color", + "$value": "{color.disabled}" }, "floating": { "text": { - "value": "{color.form.input.bg.base}", - "type": "color", "source": "$form-control-floating-label-text-bg", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.form.input.bg.base}" } } }, "checkbox": { + "$type": "color", "indicator": { "indeterminate": { "base": { - "value": "{color.form.control.indicator.checked.base}", - "type": "color", - "source": "$custom-checkbox-indicator-indeterminate-color" + "source": "$custom-checkbox-indicator-indeterminate-color", + "$value": "{color.form.control.indicator.checked.base}" }, "bg": { - "value": "{color.bg.active}", - "type": "color", - "source": "$custom-checkbox-indicator-indeterminate-bg" + "source": "$custom-checkbox-indicator-indeterminate-bg", + "$value": "{color.bg.active}" }, "border": { - "value": "{color.form.control.checkbox.indicator.indeterminate.bg}", - "type": "color", - "source": "$custom-checkbox-indicator-indeterminate-border-color" + "source": "$custom-checkbox-indicator-indeterminate-border-color", + "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" } } } }, "switch": { + "$type": "color", "indicator": { "checked": { "bg": { - "value": "{color.success.base}", - "type": "color", - "source": "$custom-switch-indicator-checked-bg" + "source": "$custom-switch-indicator-checked-bg", + "$value": "{color.success.base}" } } } }, "select": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-select-color" }, - "disabled": { "value": "{color.disabled}", "type": "color", "source": "$custom-select-disabled-color" }, + "base": { + "source": "$custom-select-color", + "$value": "{color.form.input.base}", + "$type": "color" + }, + "disabled": { + "source": "$custom-select-disabled-color", + "$value": "{color.disabled}", + "$type": "color" + }, "indicator": { - "base": { "value": "{color.theme.hover.gray}", "type": "color", "source": "$custom-select-indicator-color" } + "$type": "color", + "base": { + "source": "$custom-select-indicator-color", + "$value": "{color.theme.hover.gray}" + } }, "bg": { - "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-select-bg" }, - "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$custom-select-disabled-bg" }, - "size": { "value": "{color.gray.100}", "type": "dimension", "source": "$custom-select-bg-size" } + "base": { + "source": "$custom-select-bg", + "$value": "{color.form.input.bg.base}", + "$type": "color" + }, + "disabled": { + "source": "$custom-select-disabled-bg", + "$value": "{color.gray.100}", + "$type": "color" + }, + "size": { + "source": "$custom-select-bg-size", + "$value": "{color.gray.100}", + "$type": "dimension" + } }, "border": { + "$type": "color", "base": { - "value": "{color.form.input.border}", "type": "color", "source": "$custom-select-border-color" + "source": "$custom-select-border-color", + "$value": "{color.form.input.border}" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", - "source": "$custom-select-focus-border-color" + "source": "$custom-select-focus-border-color", + "$value": "{color.form.input.focus.border}" } } }, "range": { + "$type": "color", "track": { - "bg": { "value": "{color.gray.300}", "type": "color", "source": "$custom-range-track-bg" } + "bg": { + "source": "$custom-range-track-bg", + "$value": "{color.gray.300}" + } }, "thumb": { "bg": { - "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-range-thumb-bg" }, + "base": { + "source": "$custom-range-thumb-bg", + "$value": "{color.bg.active}" + }, "disabled": { - "value": "{color.disabled}", "type": "color", "source": "$custom-range-thumb-disabled-bg" + "source": "$custom-range-thumb-disabled-bg", + "$value": "{color.disabled}" }, "active": { - "value": "{color.bg.active}", - "type": "color", "source": "$custom-range-thumb-active-bg", - "modify": [{ "type": "lighten", "amount": "0.35" }] + "modify": [ + { + "type": "lighten", + "amount": "0.35" + } + ], + "$value": "{color.bg.active}" } } } }, "file": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-file-color" }, + "$type": "color", + "base": { + "source": "$custom-file-color", + "$value": "{color.form.input.base}" + }, "bg": { - "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-file-bg" }, + "base": { + "source": "$custom-file-bg", + "$value": "{color.form.input.bg.base}" + }, "disabled": { - "value": "{color.form.input.bg.disabled}", "type": "color", "source": "$custom-file-disabled-bg" + "source": "$custom-file-disabled-bg", + "$value": "{color.form.input.bg.disabled}" } }, "button": { "base": { - "value": "{color.form.control.file.base}", "type": "color", "source": "$custom-file-button-color" + "source": "$custom-file-button-color", + "$value": "{color.form.control.file.base}" }, "bg": { - "value": "{color.form.input.group.addon.bg}", "type": "color", "source": "$custom-file-button-bg" + "source": "$custom-file-button-bg", + "$value": "{color.form.input.group.addon.bg}" } }, "border": { "base": { - "value": "{color.form.input.border}", "type": "color", "source": "$custom-file-border-color" + "source": "$custom-file-border-color", + "$value": "{color.form.input.border}" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", - "source": "$custom-file-focus-border-color" + "source": "$custom-file-focus-border-color", + "$value": "{color.form.input.focus.border}" } } } }, "feedback": { - "valid": { "value": "{color.success.base}", "type": "color", "source": "$form-feedback-valid-color" }, - "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$form-feedback-invalid-color" }, + "$type": "color", + "valid": { + "source": "$form-feedback-valid-color", + "$value": "{color.success.base}" + }, + "invalid": { + "source": "$form-feedback-invalid-color", + "$value": "{color.danger.base}" + }, "icon": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", - "source": "$form-feedback-icon-valid-color" + "source": "$form-feedback-icon-valid-color", + "$value": "{color.form.feedback.valid}" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", - "source": "$form-feedback-icon-invalid-color" + "source": "$form-feedback-icon-invalid-color", + "$value": "{color.form.feedback.invalid}" } }, "tooltip": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", "source": "$form-feedback-tooltip-valid-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.form.feedback.valid}" }, "bg": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", "source": "$form-feedback-tooltip-valid-bg", - "modify": [{ "type": "alpha", "amount": 0.9 }] + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "$value": "{color.form.feedback.valid}" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", "source": "$form-feedback-tooltip-invalid-bg", - "modify": [{ "type": "alpha", "amount": 0.9 }] + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "$value": "{color.form.feedback.invalid}" } }, "box-shadow": { "focus": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", "source": "$form-feedback-focus-box-shadow-valid-color", - "modify": [{ "type": "alpha", "amount": 0.25 }] + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "$value": "{color.form.feedback.valid}" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", "source": "$form-feedback-focus-box-shadow-invalid-color", - "modify": [{ "type": "alpha", "amount": 0.25 }] + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "$value": "{color.form.feedback.invalid}" } } } }, "checked": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", "source": "$form-feedback-checked-valid-color", - "modify": [{ "type": "lighten", "amount": 0.1 }] + "modify": [ + { + "type": "lighten", + "amount": 0.1 + } + ], + "$value": "{color.form.feedback.valid}" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", "source": "$form-feedback-checked-invalid-color", - "modify": [{ "type": "lighten", "amount": 0.1 }] + "modify": [ + { + "type": "lighten", + "amount": 0.1 + } + ], + "$value": "{color.form.feedback.invalid}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json index 49f3b256c3..c447cef1b1 100644 --- a/tokens/src/themes/light/components/Form/elevation.json +++ b/tokens/src/themes/light/components/Form/elevation.json @@ -1,76 +1,85 @@ { + "$type": "shadow", "elevation": { "form": { "input": { - "base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" }, + "base": { + "source": "$input-box-shadow", + "$value": "none" + }, "focus": { - "value": "0 0 0 1px {color.primary.500}", - "type": "shadow", - "source": "$input-focus-box-shadow" + "source": "$input-focus-box-shadow", + "$value": "0 0 0 1px {color.primary.500}" } }, "control": { "indicator": { "base": { - "value": "{elevation.form.input.base}", - "type": "shadow", - "source": "$custom-control-indicator-box-shadow" + "source": "$custom-control-indicator-box-shadow", + "$value": "{elevation.form.input.base}" }, "checked": { - "base": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-checked-box-shadow" }, + "base": { + "source": "$custom-control-indicator-checked-box-shadow", + "$value": "none" + }, "focus": { - "value": "0 0 0 4px rgba(0, 0, 0, .1)", - "type": "shadow", - "source": "$custom-control-indicator-focus-box-shadow" + "source": "$custom-control-indicator-focus-box-shadow", + "$value": "0 0 0 4px rgba(0, 0, 0, .1)" } }, - "active": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-active-box-shadow" } + "active": { + "source": "$custom-control-indicator-active-box-shadow", + "$value": "none" + } }, "checkbox": { "indicator": { "indeterminate": { - "value": "none", "type": "shadow", "source": "$custom-checkbox-indicator-indeterminate-box-shadow" + "source": "$custom-checkbox-indicator-indeterminate-box-shadow", + "$value": "none" } } }, "range": { "track": { - "value": "none", - "type": "shadow", - "source": "$custom-range-track-box-shadow" + "source": "$custom-range-track-box-shadow", + "$value": "none" }, "thumb": { "base": { - "value": "none", "type": "shadow", "source": "$custom-range-thumb-box-shadow" + "source": "$custom-range-thumb-box-shadow", + "$value": "none" }, "focus": { - "value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}", - "type": "shadow", - "source": "$custom-range-thumb-focus-box-shadow" + "source": "$custom-range-thumb-focus-box-shadow", + "$value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}" } } }, "file": { "base": { - "value": "{elevation.form.input.base}", "type": "shadow", "source": "$custom-file-box-shadow" + "source": "$custom-file-box-shadow", + "$value": "{elevation.form.input.base}" }, "focus": { - "value": "{elevation.form.input.focus}", "type": "shadow", "source": "$custom-file-focus-box-shadow" + "source": "$custom-file-focus-box-shadow", + "$value": "{elevation.form.input.focus}" } }, "select": { "border": { "base": { - "value": "none", "type": "shadow", "source": "$custom-select-box-shadow" + "source": "$custom-select-box-shadow", + "$value": "none" }, "focus": { - "value": "{elevation.input.btn-focus.box-shadow}", - "type": "shadow", - "source": "$custom-select-focus-box-shadow" + "source": "$custom-select-focus-box-shadow", + "$value": "{elevation.input.btn-focus.box-shadow}" } } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json index 3e4876afbe..1d8af1f598 100644 --- a/tokens/src/themes/light/components/Form/other.json +++ b/tokens/src/themes/light/components/Form/other.json @@ -1,131 +1,199 @@ { "other": { "form": { + "$type": "ratio", "feedback": { - "tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" } + "tooltip-opacity": { + "source": "$form-feedback-tooltip-opacity", + "$value": ".9" + } } }, "content": { "form": { "control": { "checkbox": { + "$type": "file", "indicator": { "icon-checked": { "base": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", "source": "$custom-checkbox-indicator-icon-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,\")" }, "valid": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", "source": "$custom-checkbox-indicator-icon-valid-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,\")" }, "invalid": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", "source": "$custom-checkbox-indicator-icon-invalid-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,\")" } }, "indeterminate": { "icon": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", "source": "$custom-checkbox-indicator-icon-indeterminate", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,\")" } } } }, "radio": { + "$type": "file", "indicator": { "icon-checked": { "base": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")", - "type": "file", "source": "$custom-radio-indicator-icon-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")" }, "valid": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")", - "type": "file", "source": "$custom-radio-indicator-icon-valid-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")" }, "invalid": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")", - "type": "file", "source": "$custom-radio-indicator-icon-invalid-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")" } } } }, "switch": { + "$type": "file", "indicator": { "icon-off": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")", - "type": "file", "source": "$custom-switch-indicator-icon-off", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")" }, "icon-on": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")", - "type": "file", "source": "$custom-switch-indicator-icon-on", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")" } } }, "select": { "indicator": { + "$type": "file", "icon": { - "value": "url('data:image/svg+xml,')", - "type": "file", "source": "$custom-select-indicator", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url('data:image/svg+xml,')" } }, "bg": { - "value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}", - "type": "background", - "source": "$custom-select-background" + "source": "$custom-select-background", + "$value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}", + "$type": "background" } } }, "feedback": { + "$type": "file", "icon": { "valid": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' 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\")", - "type": "file", "source": "$form-feedback-icon-valid", "outputReferences": false, "modify": [ - { "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' 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\")" }, "invalid": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' 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\")", - "type": "file", "source": "$form-feedback-icon-invalid", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' 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\")" } } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json index e3c1763374..bd98ca479c 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -1,451 +1,948 @@ { "color": { + "$type": "color", "icon-button": { - "bg": { - "base": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" }, + "bg": { + "base": { + "source": "$btn-icon-bg", + "$value": "transparent" + }, "primary": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "secondary": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.secondary.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.secondary.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.secondary.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" } + "base": { + "$value": "{color.secondary.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.secondary.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.secondary.active.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "brand": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.brand.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.brand.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.brand.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" } + "base": { + "$value": "{color.brand.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.brand.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.brand.active.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "success": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.success.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.success.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.success.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" } + "base": { + "$value": "{color.success.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.success.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.success.active.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "warning": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.warning.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.warning.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.warning.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" } + "base": { + "$value": "{color.warning.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.warning.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.warning.active.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "danger": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.danger.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.danger.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.danger.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" } + "base": { + "$value": "{color.danger.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.danger.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.danger.active.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "light": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.light.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.light.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.light.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" } + "base": { + "$value": "{color.light.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.light.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.light.active.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "dark": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.dark.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.dark.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.dark.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" } + "base": { + "$value": "{color.dark.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.dark.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.dark.active.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "black": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.black}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.black}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "value": "{color.black}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" } + "base": { + "$value": "{color.black}" + }, + "hover": { + "$value": "{color.icon-button.bg.black.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.black.active.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } } }, "text": { "primary": { - "base": { "value": "{color.primary.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.primary.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.bg.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } } }, "secondary": { - "base": { "value": "{color.secondary.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.secondary.base}", "type": "color" }, + "base": { + "$value": "{color.secondary.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.secondary.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.secondary.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.secondary.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.secondary.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" } + "base": { + "$value": "{color.secondary.base}" + }, + "hover": { + "$value": "{color.icon-button.text.secondary.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.secondary.inverse-active.base}" + } } }, "brand": { - "base": { "value": "{color.brand.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.brand.base}", "type": "color" }, + "base": { + "$value": "{color.brand.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.brand.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.brand.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.brand.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.brand.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" } + "base": { + "$value": "{color.brand.base}" + }, + "hover": { + "$value": "{color.icon-button.text.brand.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.brand.inverse-active.base}" + } } }, "success": { - "base": { "value": "{color.success.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.success.base}", "type": "color" }, + "base": { + "$value": "{color.success.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.success.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.success.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.success.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.success.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" } + "base": { + "$value": "{color.success.base}" + }, + "hover": { + "$value": "{color.icon-button.text.success.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.success.inverse-active.base}" + } } }, "warning": { - "base": { "value": "{color.warning.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.warning.base}", "type": "color" }, + "base": { + "$value": "{color.warning.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.warning.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.warning.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.warning.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.warning.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" } + "base": { + "$value": "{color.warning.base}" + }, + "hover": { + "$value": "{color.icon-button.text.warning.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.warning.inverse-active.base}" + } } }, "danger": { - "base": { "value": "{color.danger.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.danger.base}", "type": "color" }, + "base": { + "$value": "{color.danger.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.danger.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.danger.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.danger.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.danger.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" } + "base": { + "$value": "{color.danger.base}" + }, + "hover": { + "$value": "{color.icon-button.text.danger.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.danger.inverse-active.base}" + } } }, "light": { - "base": { "value": "{color.light.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.light.base}", "type": "color" }, + "base": { + "$value": "{color.light.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.light.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.light.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.light.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.light.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" } + "base": { + "$value": "{color.light.base}" + }, + "hover": { + "$value": "{color.icon-button.text.light.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.light.inverse-active.base}" + } } }, "dark": { - "base": { "value": "{color.dark.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.dark.base}", "type": "color" }, + "base": { + "$value": "{color.dark.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.dark.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.dark.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.dark.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.dark.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" } + "base": { + "$value": "{color.dark.base}" + }, + "hover": { + "$value": "{color.icon-button.text.dark.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.dark.inverse-active.base}" + } } }, "black": { - "base": { "value": "{color.black}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.black.base}", "type": "color" }, + "base": { + "$value": "{color.black}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.black.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.black}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.black}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.black}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" } + "base": { + "$value": "{color.black}" + }, + "hover": { + "$value": "{color.icon-button.text.black.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.black.inverse-active.base}" + } } } }, - "accent": { "value": "{color.white}", "type": "color", "source": "$btn-icon-accent-color" }, - "black": { "value": "{color.black}", "type": "color", "source": "$btn-icon-black" } + "accent": { + "source": "$btn-icon-accent-color", + "$value": "{color.white}" + }, + "black": { + "source": "$btn-icon-black", + "$value": "{color.black}" + } } }, "elevation": { + "$type": "shadow", "icon-button": { "box-shadow": { "primary": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "secondary": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" + }, + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "brand": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "success": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" + }, + "active": { + "$value": "none" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse-active": { + "$value": "none" + } }, "warning": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "danger": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" + }, + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "light": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "dark": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" + }, + "active": { + "$value": "none" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse-active": { + "$value": "none" + } }, "black": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json index bd743ec210..ab13b67868 100644 --- a/tokens/src/themes/light/components/Image.json +++ b/tokens/src/themes/light/components/Image.json @@ -1,18 +1,32 @@ { "color": { + "$type": "color", "image": { - "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" }, + "figure-caption": { + "source": "$figure-caption-color", + "$value": "{color.gray.500}" + }, "thumbnail": { - "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" }, - "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" } + "bg": { + "source": "$thumbnail-bg", + "$value": "{color.body.bg}" + }, + "border": { + "source": "$thumbnail-border-color", + "$value": "{color.gray.200}" + } } } }, "elevation": { + "$type": "shadow", "image": { "thumbnail": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$thumbnail-box-shadow" } + "box-shadow": { + "source": "$thumbnail-box-shadow", + "$value": "none" + } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json index cbe7f88ef7..5ac0fb64b1 100644 --- a/tokens/src/themes/light/components/Menu.json +++ b/tokens/src/themes/light/components/Menu.json @@ -1,30 +1,62 @@ { "elevation": { + "$type": "shadow", "menu": { - "box-shadow": { "value": "{elevation.box-shadow.base}", "type": "shadow", "source": "$menu-box-shadow" } + "box-shadow": { + "source": "$menu-box-shadow", + "$value": "{elevation.box-shadow.base}" + } } }, "color": { + "$type": "color", "menu": { - "bg": { "value": "{color.white}", "type": "color", "source": "$menu-bg" }, + "bg": { + "source": "$menu-bg", + "$value": "{color.white}" + }, "item": { - "color": { "value": "{color.body.base}", "type": "color", "source": "$menu-item-color" }, - "bg": { "value": "transparent", "type": "color", "source": "$menu-item-bg" }, - "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-border-color" }, + "color": { + "source": "$menu-item-color", + "$value": "{color.body.base}" + }, + "bg": { + "source": "$menu-item-bg", + "$value": "transparent" + }, + "border": { + "source": "$menu-item-border-color", + "$value": "{color.menu.item.bg}" + }, "hover": { - "color": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$menu-item-hover-color" }, - "bg": { "value": "{color.btn.hover.bg.tertiary}", "type": "color", "source": "$menu-item-hover-bg" }, - "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-hover-border-color" } + "color": { + "source": "$menu-item-hover-color", + "$value": "{color.btn.text.tertiary}" + }, + "bg": { + "source": "$menu-item-hover-bg", + "$value": "{color.btn.hover.bg.tertiary}" + }, + "border": { + "source": "$menu-item-hover-border-color", + "$value": "{color.menu.item.bg}" + } }, "focus": { - "bg": { "value": "{color.btn.active.bg.tertiary}", "type": "color", "source": "$menu-item-focus-bg" } + "bg": { + "source": "$menu-item-focus-bg", + "$value": "{color.btn.active.bg.tertiary}" + } } }, "select": { "btn-link": { - "color": { "value": "{color.primary.500}", "type": "color", "source": "$menu-select-btn-link-color" } + "color": { + "source": "$menu-select-btn-link-color", + "$value": "{color.primary.500}" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json index 8b76a512ac..5ce810930b 100644 --- a/tokens/src/themes/light/components/Modal.json +++ b/tokens/src/themes/light/components/Modal.json @@ -1,29 +1,37 @@ { "color": { + "$type": "color", "modal": { "content": { - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" }, + "bg": { + "source": "$modal-content-bg", + "$value": "{color.bg.base}" + }, "border": { - "value": "{color.black}", - "type": "color", "source": "$modal-content-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.2 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.2 + } + ], + "$value": "{color.black}" } }, - "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" } + "backdrop-bg": { + "source": "$modal-backdrop-bg", + "$value": "{color.black}" + } } }, "elevation": { + "$type": "shadow", "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" + "source": "$modal-content-box-shadow-sm-up", + "$value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)" } } } @@ -31,7 +39,10 @@ }, "other": { "modal": { - "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" } + "opacity": { + "source": "$modal-backdrop-opacity", + "$value": ".5" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json index 074eae400c..1bfc5565d0 100644 --- a/tokens/src/themes/light/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -1,22 +1,20 @@ { + "$type": "color", "border-color": { "nav": { "tabs-link": { "border": { "active": { - "value": "{color.primary.500}", - "type": "color", - "source": "$nav-tabs-link-active-border-color" + "source": "$nav-tabs-link-active-border-color", + "$value": "{color.primary.500}" }, "hover": { - "value": "transparent transparent {color.nav.tabs.base.border.base}", - "type": "color", - "source": "$nav-tabs-link-hover-border-color" + "source": "$nav-tabs-link-hover-border-color", + "$value": "transparent transparent {color.nav.tabs.base.border.base}" }, "focus": { - "value": "{color.nav.tabs.base.link.active.text}", - "type": "color", - "source": "$nav-tabs-link-focus-border-color" + "source": "$nav-tabs-link-focus-border-color", + "$value": "{color.nav.tabs.base.link.active.text}" } } } @@ -26,59 +24,115 @@ "nav": { "link": { "text": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$nav-link-color" }, - "disabled": { "value": "{color.gray.300}", "type": "color", "source": "$nav-link-disabled-color" } + "base": { + "source": "$nav-link-color", + "$value": "{color.gray.700}" + }, + "disabled": { + "source": "$nav-link-disabled-color", + "$value": "{color.gray.300}" + } }, - "border": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-border-color" } + "border": { + "source": "$nav-tabs-link-border-color", + "$value": "transparent" + } }, "tabs": { "base": { "text": { - "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" } + "disabled": { + "source": "$nav-tabs-disabled-bg", + "$value": "{color.nav.tabs.base.bg.hover}" + } }, "bg": { - "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" } + "hover": { + "source": "$nav-tabs-hover-bg", + "$value": "transparent" + } }, "border": { - "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" }, - "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" } + "base": { + "source": "$nav-tabs-border-color", + "$value": "{color.light.400}" + }, + "focus": { + "source": "$nav-tabs-focus-border-color", + "$value": "{color.nav.tabs.base.bg.hover}" + } }, "link": { "hover": { - "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" } + "bg": { + "source": "$nav-tabs-link-hover-bg", + "$value": "{color.light.400}" + } }, "active": { - "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" }, - "bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" } + "text": { + "source": "$nav-tabs-link-active-color", + "$value": "{color.primary.500}" + }, + "bg": { + "source": "$nav-tabs-link-active-bg", + "$value": "transparent" + } }, "disabled": { - "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" } + "border": { + "source": "$nav-tabs-link-disabled-border-color", + "$value": "{color.nav.link.border}" + } } } }, "inverse": { "link": { "text": { - "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-tabs-link-color" } + "base": { + "source": "$nav-inverse-tabs-link-color", + "$value": "{color.white}" + } }, "border": { - "bottom": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-tabs-link-border-bottom-color" }, - "active": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-active-border-color" } + "bottom": { + "source": "$nav-inverse-tabs-link-border-bottom-color", + "$value": "{color.dark.300}" + }, + "active": { + "source": "$nav-inverse-tabs-link-active-border-color", + "$value": "{color.nav.tabs.inverse.link.text.base}" + } }, "bg": { - "hover": { "value": "{color.nav.tabs.inverse.link.border.bottom}", "type": "color", "source": "$nav-inverse-tabs-link-hover-bg" }, - "active": { "value": "{color.nav.tabs.inverse.link.bg.hover}", "type": "color", "source": "$nav-inverse-tabs-link-active-bg" }, - "focus": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-focus-bg" }, + "hover": { + "source": "$nav-inverse-tabs-link-hover-bg", + "$value": "{color.nav.tabs.inverse.link.border.bottom}" + }, + "active": { + "source": "$nav-inverse-tabs-link-active-bg", + "$value": "{color.nav.tabs.inverse.link.bg.hover}" + }, + "focus": { + "source": "$nav-inverse-tabs-link-focus-bg", + "$value": "{color.nav.tabs.inverse.link.text.base}" + }, "active-hover": { - "value": "transparent", - "type": "color", - "source": "$nav-inverse-tabs-link-active-hover-bg" + "source": "$nav-inverse-tabs-link-active-hover-bg", + "$value": "transparent" } }, - "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" } + "tab-content-color": { + "source": "$nav-inverse-tabs-tab-content-color", + "$value": "{color.nav.tabs.inverse.link.text.base}" + } }, "dropdown": { - "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" } + "border": { + "source": "$nav-inverse-tabs-dropdown-border-color", + "$value": "{color.nav.tabs.inverse.link.bg.active-hover}" + } } } }, @@ -86,81 +140,124 @@ "base": { "link": { "active": { - "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" }, - "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" } + "text": { + "source": "$nav-pills-link-active-color", + "$value": "{color.active}" + }, + "bg": { + "source": "$nav-pills-link-active-bg", + "$value": "{color.bg.active}" + }, + "border": { + "source": "$nav-pills-link-active-border-color", + "$value": "{color.white}" + } }, - "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" } + "border": { + "source": "$nav-pills-link-border-color", + "$value": "{color.nav.tabs.base.border.base}" + } } }, "inverse": { "link": { "text": { - "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-pills-link-color" }, - "focus": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-focus-color" }, - "active": { "value": "{color.primary.500}", "type": "color", "source": "$nav-inverse-pills-link-active-color" }, - "hover": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-color" }, + "base": { + "source": "$nav-inverse-pills-link-color", + "$value": "{color.white}" + }, + "focus": { + "source": "$nav-inverse-pills-link-focus-color", + "$value": "{color.nav.pills.inverse.link.text.base}" + }, + "active": { + "source": "$nav-inverse-pills-link-active-color", + "$value": "{color.primary.500}" + }, + "hover": { + "source": "$nav-inverse-pills-link-hover-color", + "$value": "{color.nav.pills.inverse.link.text.base}" + }, "active-focus": { - "value": "{color.nav.pills.inverse.link.text.active}", - "type": "color", - "source": "$nav-inverse-pills-link-active-focus-color" + "source": "$nav-inverse-pills-link-active-focus-color", + "$value": "{color.nav.pills.inverse.link.text.active}" }, "active-hover": { - "value": "{color.nav.pills.inverse.link.text.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-hover-color" + "source": "$nav-inverse-pills-link-active-hover-color", + "$value": "{color.nav.pills.inverse.link.text.base}" } }, "border": { - "base": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-pills-link-border-color" }, - "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-border-color" }, + "base": { + "source": "$nav-inverse-pills-link-border-color", + "$value": "{color.dark.300}" + }, + "active": { + "source": "$nav-inverse-pills-link-active-border-color", + "$value": "{color.nav.pills.inverse.link.text.base}" + }, "active-hover": { - "value": "{color.nav.pills.inverse.link.border.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-hover-border-color" + "source": "$nav-inverse-pills-link-active-hover-border-color", + "$value": "{color.nav.pills.inverse.link.border.base}" }, "active-focus": { - "value": "{color.primary.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-focus-border-color" + "source": "$nav-inverse-pills-link-active-focus-border-color", + "$value": "{color.primary.base}" }, "focus-hover": { - "value": "{color.nav.pills.inverse.link.border.active-focus}", - "type": "color", - "source": "$nav-inverse-pills-link-active-focus-hover-border-color" + "source": "$nav-inverse-pills-link-active-focus-hover-border-color", + "$value": "{color.nav.pills.inverse.link.border.active-focus}" } }, "bg": { - "hover": { "value": "{color.nav.pills.inverse.link.border.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-bg" }, - "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-bg" }, + "hover": { + "source": "$nav-inverse-pills-link-hover-bg", + "$value": "{color.nav.pills.inverse.link.border.base}" + }, + "active": { + "source": "$nav-inverse-pills-link-active-bg", + "$value": "{color.nav.pills.inverse.link.text.base}" + }, "active-hover": { - "value": "{color.nav.pills.inverse.link.border.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-hover-bg" + "source": "$nav-inverse-pills-link-active-hover-bg", + "$value": "{color.nav.pills.inverse.link.border.base}" }, "active-focus-hover": { - "value": "{color.nav.pills.inverse.link.text.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-focus-hover-bg" + "source": "$nav-inverse-pills-link-active-focus-hover-bg", + "$value": "{color.nav.pills.inverse.link.text.base}" } } }, - "tab-content-color": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-tab-content-color" } + "tab-content-color": { + "source": "$nav-inverse-pills-tab-content-color", + "$value": "{color.nav.pills.inverse.link.text.base}" + } } }, - "divider": { "value": "{color.gray.100}", "type": "color", "source": "$nav-divider-color" }, + "divider": { + "source": "$nav-divider-color", + "$value": "{color.gray.100}" + }, "dark": { - "value": "{color.white}", - "type": "color", "source": "$navbar-dark-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.white}" }, "light": { - "value": "{color.black}", - "type": "color", "source": "$navbar-light-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.black}" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json index b855507ab0..2fc9dd090a 100644 --- a/tokens/src/themes/light/components/Navbar.json +++ b/tokens/src/themes/light/components/Navbar.json @@ -1,136 +1,164 @@ { "color": { + "$type": "color", "navbar": { "dark": { "text": { - "value": "{color.white}", - "type": "color", "source": "$navbar-dark-color", - "modify": [{ - "type": "alpha", - "amount": 0.5 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.white}" }, "hover": { - "value": "{color.white}", - "type": "color", "source": "$navbar-dark-hover-color", - "modify": [{ - "type": "alpha", - "amount": 0.75 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.75 + } + ], + "$value": "{color.white}" + }, + "active": { + "source": "$navbar-dark-active-color", + "$value": "{color.active}" }, - "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 + } + ], + "$value": "{color.white}" }, "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 + } + ], + "$value": "{color.white}" } }, "brand": { - "text": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-color" }, - "hover": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-hover-color" } + "text": { + "source": "$navbar-dark-brand-color", + "$value": "{color.navbar.dark.active}" + }, + "hover": { + "source": "$navbar-dark-brand-hover-color", + "$value": "{color.navbar.dark.active}" + } } }, "light": { "text": { - "value": "{color.black}", - "type": "color", "source": "$navbar-light-color", - "modify": [{ - "type": "alpha", - "amount": 0.5 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.black}" }, - "hover": { - "value": "{color.black}", - "type": "color", + "hover": { "source": "$navbar-light-hover-color", - "modify": [{ - "type": "alpha", - "amount": 0.7 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.7 + } + ], + "$value": "{color.black}" }, - "active": { - "value": "{color.black}", - "type": "color", + "active": { "source": "$navbar-light-active-color", - "modify": [{ - "type": "alpha", - "amount": 0.9 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "$value": "{color.black}" }, - "disabled": { - "value": "{color.black}", - "type": "color", + "disabled": { "source": "$navbar-light-disabled-color", - "modify": [{ - "type": "alpha", - "amount": 0.3 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.black}" }, "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 + } + ], + "$value": "{color.black}" } }, "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" } + "text": { + "source": "$navbar-light-brand-color", + "$value": "{color.navbar.light.active}" + }, + "hover": { + "source": "$navbar-light-brand-hover-color", + "$value": "{color.navbar.light.active}" + } } } } }, "content": { + "$type": "file", "navbar": { "toggler": { "dark": { "icon-bg": { - "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", - "type": "file", "source": "$navbar-dark-toggler-icon-bg", "outputReferences": false, - "modify": [{ - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")" } }, "light": { "icon-bg": { - "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", - "type": "file", "source": "$navbar-light-toggler-icon-bg", "outputReferences": false, - "modify": [{ - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/OverflowScroll.json b/tokens/src/themes/light/components/OverflowScroll.json index da6de0c447..c2bed16223 100644 --- a/tokens/src/themes/light/components/OverflowScroll.json +++ b/tokens/src/themes/light/components/OverflowScroll.json @@ -1,9 +1,11 @@ { + "$type": "color", "color": { "overflow-scroll": { "opacity-mask-transparent": { - "value": "rgba(0, 0, 0, .4)", "type": "color", "source": "$overflow-scroll-opacity-mask-transparent" + "source": "$overflow-scroll-opacity-mask-transparent", + "$value": "rgba(0, 0, 0, .4)" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/PageBanner.json b/tokens/src/themes/light/components/PageBanner.json index 6d520cbee9..90c960e069 100644 --- a/tokens/src/themes/light/components/PageBanner.json +++ b/tokens/src/themes/light/components/PageBanner.json @@ -1,24 +1,45 @@ { + "$type": "color", "color": { "page-banner": { "bg": { - "dark": { "value": "{color.dark.500}", "type": "color" }, - "light": { "value": "{color.light.400}", "type": "color" }, + "dark": { + "$value": "{color.dark.500}" + }, + "light": { + "$value": "{color.light.400}" + }, "accent": { - "a": { "value": "{color.accent.a}", "type": "color" }, - "b": { "value": "{color.accent.b}", "type": "color" } + "a": { + "$value": "{color.accent.a}" + }, + "b": { + "$value": "{color.accent.b}" + } }, - "warning": { "value": "{color.warning.100}", "type": "color" } + "warning": { + "$value": "{color.warning.100}" + } }, "text": { - "dark": { "value": "{color.white}", "type": "color" }, - "light": { "value": "{color.black}", "type": "color" }, + "dark": { + "$value": "{color.white}" + }, + "light": { + "$value": "{color.black}" + }, "accent": { - "a": { "value": "{color.black}", "type": "color" }, - "b": { "value": "{color.black}", "type": "color" } + "a": { + "$value": "{color.black}" + }, + "b": { + "$value": "{color.black}" + } }, - "warning": { "value": "{color.black}", "type": "color" } + "warning": { + "$value": "{color.black}" + } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json index 557e914bf0..ce56bf5132 100644 --- a/tokens/src/themes/light/components/Pagination.json +++ b/tokens/src/themes/light/components/Pagination.json @@ -1,45 +1,92 @@ { "color": { + "$type": "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" } + "base": { + "source": "$pagination-color", + "$value": "{color.link.base}" + }, + "inverse": { + "source": "$pagination-color-inverse", + "$value": "{color.white}" + }, + "hover": { + "source": "$pagination-hover-color", + "$value": "{color.link.hover}" + }, + "active": { + "source": "$pagination-active-color", + "$value": "{color.active}" + }, + "disabled": { + "source": "$pagination-disabled-color", + "$value": "{color.disabled}" + } }, "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" } + "base": { + "source": "$pagination-bg", + "$value": "{color.bg.base}" + }, + "hover": { + "source": "$pagination-hover-bg", + "$value": "{color.gray.100}" + }, + "active": { + "source": "$pagination-active-bg", + "$value": "{color.bg.active}" + }, + "disabled": { + "source": "$pagination-disabled-bg", + "$value": "{color.white}" + } }, "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" } + "base": { + "source": "$pagination-border-color", + "$value": "{color.gray.200}" + }, + "hover": { + "source": "$pagination-hover-border-color", + "$value": "{color.gray.200}" + }, + "active": { + "source": "$pagination-active-border-color", + "$value": "{color.pagination.bg.active}" + }, + "disabled": { + "source": "$pagination-disabled-border-color", + "$value": "{color.gray.100}" + } }, "focus": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" }, - "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" } + "base": { + "source": "$pagination-focus-color", + "$value": "{color.primary.500}" + }, + "text": { + "source": "$pagination-focus-color-text", + "$value": "{color.black}" + } }, "dropdown": { "text-inverse": { - "value": "{color.white}", "type": "color", "source": "$pagination-dropdown-color-inverse" + "source": "$pagination-dropdown-color-inverse", + "$value": "{color.white}" } } } }, "elevation": { + "$type": "shadow", "pagination": { "focus": { "box-shadow": { - "value": "{elevation.input.btn-focus.box-shadow}", - "type": "shadow", - "source": "$pagination-focus-box-shadow" + "source": "$pagination-focus-box-shadow", + "$value": "{elevation.input.btn-focus.box-shadow}" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json index 3ba213c768..d0d9ca3987 100644 --- a/tokens/src/themes/light/components/Popover.json +++ b/tokens/src/themes/light/components/Popover.json @@ -1,55 +1,104 @@ { "color": { + "$type": "color", "popover": { - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$popover-bg" }, - "border": { "value": "rgba(0, 0, 0, .2)", "type": "color", "source": "$popover-border-color" }, + "bg": { + "source": "$popover-bg", + "$value": "{color.bg.base}" + }, + "border": { + "source": "$popover-border-color", + "$value": "rgba(0, 0, 0, .2)" + }, "header": { - "text": { "value": "{color.headings.base}", "type": "color", "source": "$popover-header-color" }, - "bg": { "value": "{color.white}", "type": "color", "source": "$popover-header-bg" }, + "text": { + "source": "$popover-header-color", + "$value": "{color.headings.base}" + }, + "bg": { + "source": "$popover-header-bg", + "$value": "{color.white}" + }, "bg-dark": { - "value": "{color.white}", - "type": "color", "source": "$popover-header-bg-dark", - "modify": [{ "type": "darken", "amount": 0.5 }] + "modify": [ + { + "type": "darken", + "amount": 0.5 + } + ], + "$value": "{color.white}" }, "border-bottom-dark": { - "value": "{color.white}", - "type": "color", "source": "$popover-header-border-bottom-darken", - "modify": [{ "type": "darken", "amount": 0.05 }] + "modify": [ + { + "type": "darken", + "amount": 0.05 + } + ], + "$value": "{color.white}" } }, - "body": { "value": "{color.body.base}", "type": "color", "source": "$popover-body-color" }, - "arrow": { - "base": { "value": "{color.popover.bg}", "type": "color", "source": "$popover-arrow-color" }, + "body": { + "source": "$popover-body-color", + "$value": "{color.body.base}" + }, + "arrow": { + "base": { + "source": "$popover-arrow-color", + "$value": "{color.popover.bg}" + }, "outer": { - "value": "{color.popover.border}", - "type": "color", "source": "$popover-arrow-outer-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.popover.border}" } }, "success": { - "bg": { "value": "{color.success.100}", "type": "color", "source": "$popover-success-bg" }, - "icon": { "value": "{color.success.500}", "type": "color", "source": "$popover-success-icon-color" } + "bg": { + "source": "$popover-success-bg", + "$value": "{color.success.100}" + }, + "icon": { + "source": "$popover-success-icon-color", + "$value": "{color.success.500}" + } }, "warning": { - "bg": { "value": "{color.warning.100}", "type": "color", "source": "$popover-warning-bg" }, - "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-warning-icon-color" } + "bg": { + "source": "$popover-warning-bg", + "$value": "{color.warning.100}" + }, + "icon": { + "source": "$popover-warning-icon-color", + "$value": "{color.warning.500}" + } }, "danger": { - "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" }, - "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" } + "bg": { + "source": "$popover-danger-bg", + "$value": "{color.danger.100}" + }, + "icon": { + "source": "$popover-danger-icon-color", + "$value": "{color.danger.500}" + } } } }, "elevation": { + "$type": "shadow", "popover": { "box-shadow": { - "value": "none", - "type": "shadow", - "source": "$popover-box-shadow" + "source": "$popover-box-shadow", + "$value": "none" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json index 4814f474f5..33ac58e927 100644 --- a/tokens/src/themes/light/components/ProductTour.json +++ b/tokens/src/themes/light/components/ProductTour.json @@ -1,35 +1,47 @@ { + "$type": "color", "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.base}", "type": "color", "source": "$checkpoint-border-color" }, - "breadcrumb": { "value": "{color.primary.base}", "type": "color", "source": "$checkpoint-breadcrumb-color" }, + "bg": { + "source": "$checkpoint-background-color", + "$value": "{color.light.300}" + }, + "body": { + "source": "$checkpoint-body-color", + "$value": "{color.gray.700}" + }, + "border": { + "source": "$checkpoint-border-color", + "$value": "{color.brand.base}" + }, + "breadcrumb": { + "source": "$checkpoint-breadcrumb-color", + "$value": "{color.primary.base}" + }, "box-shadow": { - "value": "{color.black}", - "type": "color", "source": "$checkpoint-box-shadow-color", - "modify": [{ - "type": "alpha", - "amount": 0.3 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.black}" }, "arrow": { "border": { "top": { - "value": "{color.product-tour.checkpoint.bg}", - "type": "color", - "source": "$checkpoint-arrow-border-top-color" + "source": "$checkpoint-arrow-border-top-color", + "$value": "{color.product-tour.checkpoint.bg}" }, "transparent": { - "value": "transparent", - "type": "color", - "source": "$checkpoint-arrow-border-color-transparent" + "source": "$checkpoint-arrow-border-color-transparent", + "$value": "transparent" } } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json index 400017cabf..dd455eff70 100644 --- a/tokens/src/themes/light/components/ProgressBar.json +++ b/tokens/src/themes/light/components/ProgressBar.json @@ -1,20 +1,40 @@ { "color": { + "$type": "color", "progress-bar": { - "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" }, - "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" }, + "bg": { + "source": "$progress-bg", + "$value": "transparent" + }, + "border": { + "source": "$progress-bar-border-color", + "$value": "{color.gray.500}" + }, "bar": { - "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" }, + "base": { + "source": "$progress-bar-color", + "$value": "{color.white}" + }, "bg": { - "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" }, - "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" } + "base": { + "source": "$progress-bar-bg", + "$value": "{color.accent.a}" + }, + "annotated": { + "source": "$annotated-progress-bar-bg", + "$value": "{color.dark.500}" + } } } } }, "elevation": { + "$type": "shadow", "progress-bar": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" } + "box-shadow": { + "source": "$progress-box-shadow", + "$value": "none" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json index 12d6f06b55..f6198db474 100644 --- a/tokens/src/themes/light/components/Scrollable.json +++ b/tokens/src/themes/light/components/Scrollable.json @@ -1,14 +1,19 @@ { + "$type": "shadow", "elevation": { "scrollable": { "body": { "box-shadow": { - "value": "{color.black}", - "type": "shadow", "source": "$scrollable-body-box-shadow", - "modify": [{ "type": "alpha", "amount": 0.55 }] + "modify": [ + { + "type": "alpha", + "amount": 0.55 + } + ], + "$value": "{color.black}" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json index 4cd19bbf0e..880575d6a5 100644 --- a/tokens/src/themes/light/components/SearchField.json +++ b/tokens/src/themes/light/components/SearchField.json @@ -1,25 +1,46 @@ { "color": { + "$type": "color", "search-field": { "border": { - "base": { "value": "{color.gray.500}", "type": "color", "source": "$search-border-color" }, - "interaction": { "value": "{color.black}", "type": "color", "source": "$search-border-color-interaction" }, - "focus": { "value": "{color.black}", "type": "color", "source": "$search-border-focus-color" } + "base": { + "source": "$search-border-color", + "$value": "{color.gray.500}" + }, + "interaction": { + "source": "$search-border-color-interaction", + "$value": "{color.black}" + }, + "focus": { + "source": "$search-border-focus-color", + "$value": "{color.black}" + } }, "button": { "bg": { - "primary": { "value": "{color.primary.500}", "type": "color", "source": "$search-btn-primary-bg" }, - "brand": { "value": "{color.brand.500}", "type": "color", "source": "$search-btn-brand-bg" } + "primary": { + "source": "$search-btn-primary-bg", + "$value": "{color.primary.500}" + }, + "brand": { + "source": "$search-btn-brand-bg", + "$value": "{color.brand.500}" + } } }, "form-bg": { - "value": "{color.white}", "type": "color", "source": "$search-form-background-color" + "source": "$search-form-background-color", + "$value": "{color.white}" } } }, "other": { + "$type": "ratio", "search-field": { - "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" } + "disabled-opacity": { + "source": "$search-disabled-opacity", + "$value": ".3" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json index 996e689bfa..4fafae2999 100644 --- a/tokens/src/themes/light/components/Sheet.json +++ b/tokens/src/themes/light/components/Sheet.json @@ -1,22 +1,31 @@ { + "$type": "color", "color": { "sheet": { "skrim": { - "bg": { - "value": "{color.gray.300}", - "type": "color", + "bg": { "source": "$sheet-skrim-bg", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.gray.300}" }, "component": { "box-shadow": { - "value": "{color.black}", - "type": "color", "source": "$sheet-skrim-component-box-shadow", - "modify": [{ "type": "alpha", "amount": 0.15 }] + "modify": [ + { + "type": "alpha", + "amount": 0.15 + } + ], + "$value": "{color.black}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json index a4f2a62ba2..88b99a773b 100644 --- a/tokens/src/themes/light/components/Stepper.json +++ b/tokens/src/themes/light/components/Stepper.json @@ -1,34 +1,47 @@ { + "$type": "color", "color": { "stepper": { "header": { - "bg": { - "base": { "value": "transparent", "type": "color", "source": "$stepper-header-bg" }, - "line": { "value": "{color.light.base}", "type": "color", "source": "$stepper-header-line-bg" } + "bg": { + "base": { + "source": "$stepper-header-bg", + "$value": "transparent" + }, + "line": { + "source": "$stepper-header-line-bg", + "$value": "{color.light.base}" + } }, "step": { "base": { - "value": "{color.primary.base}", "type": "color", "source": "$stepper-header-step-color" + "source": "$stepper-header-step-color", + "$value": "{color.primary.base}" }, "bg": { "base": { - "value": "{color.stepper.header.bg.base}", "type": "color", "source": "$stepper-header-step-bg" + "source": "$stepper-header-step-bg", + "$value": "{color.stepper.header.bg.base}" }, "active": { - "value": "{color.gray.500}", "type": "color", "source": "$stepper-header-active-step-bg" + "source": "$stepper-header-active-step-bg", + "$value": "{color.gray.500}" } }, - "border": { "value": "none", "type": "color", "source": "$stepper-header-step-border" }, + "border": { + "source": "$stepper-header-step-border", + "$value": "none" + }, "bubble-error": { - "value": "{color.danger.base}", "type": "color", "source": "$stepper-header-step-error-bubble-color" + "source": "$stepper-header-step-error-bubble-color", + "$value": "{color.danger.base}" }, "description-error": { - "value": "{color.stepper.header.step.bubble-error}", - "type": "color", - "source": "$stepper-header-step-error-description-color" + "source": "$stepper-header-step-error-description-color", + "$value": "{color.stepper.header.step.bubble-error}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json index 396aa1d04f..8715008662 100644 --- a/tokens/src/themes/light/components/Sticky.json +++ b/tokens/src/themes/light/components/Sticky.json @@ -1,18 +1,17 @@ { + "$type": "shadow", "elevation": { "sticky": { "shadow": { "top": { - "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$sticky-shadow-top" + "source": "$sticky-shadow-top", + "$value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)" }, "bottom": { - "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$sticky-shadow-bottom" + "source": "$sticky-shadow-bottom", + "$value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json index b8647e01c7..33f96028eb 100644 --- a/tokens/src/themes/light/components/Tab.json +++ b/tokens/src/themes/light/components/Tab.json @@ -1,62 +1,85 @@ { + "$type": "color", "color": { "tab": { "more-link-dropdown-toggle": { "btn": { "text": { "focus": { - "value": "{color.tab.more-link-dropdown-toggle.text.focus}", - "type": "color", - "source": "$tab-more-link-dropdown-toggle-btn-focus-color" + "source": "$tab-more-link-dropdown-toggle-btn-focus-color", + "$value": "{color.tab.more-link-dropdown-toggle.text.focus}" } }, "border": { "focus": { - "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", - "type": "color", - "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color" + "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color", + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" } } }, "text": { - "focus": { "value": "{color.white}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-color" }, - "active": { "value": "{color.tab.more-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-active-color" }, - "hover": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-hover-color" } + "focus": { + "source": "$tab-more-link-dropdown-toggle-focus-color", + "$value": "{color.white}" + }, + "active": { + "source": "$tab-more-link-dropdown-toggle-active-color", + "$value": "{color.tab.more-link-dropdown-toggle.text.focus}" + }, + "hover": { + "source": "$tab-more-link-dropdown-toggle-hover-color", + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" + } }, "bg": { - "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-bg" } + "focus": { + "source": "$tab-more-link-dropdown-toggle-focus-bg", + "$value": "{color.primary.500}" + } }, "border": { - "focus": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-border-color" } + "focus": { + "source": "$tab-more-link-dropdown-toggle-focus-border-color", + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" + } } }, "inverse-pills-link-dropdown-toggle": { "text": { - "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color" }, - "active": { "value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-active-color" }, + "focus": { + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color", + "$value": "{color.primary.500}" + }, + "active": { + "source": "$tab-inverse-pills-link-dropdown-toggle-active-color", + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}" + }, "active-hover": { - "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", - "type": "color", - "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color" + "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color", + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}" } }, "bg": { - "focus": { "value": "{color.white}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg" }, - "hover": { "value": "transparent", "type": "color", "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg" }, + "focus": { + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg", + "$value": "{color.white}" + }, + "hover": { + "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg", + "$value": "transparent" + }, "active-hover": { - "value": "{color.primary.300}", - "type": "color", - "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg" + "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg", + "$value": "{color.primary.300}" } }, "border": { "focus": { - "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", - "type": "color", - "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color" + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color", + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json index b40da24624..2cd92a9b3d 100644 --- a/tokens/src/themes/light/components/Toast.json +++ b/tokens/src/themes/light/components/Toast.json @@ -1,33 +1,54 @@ { "color": { + "$type": "color", "toast": { - "base": { "value": "inherit", "type": "color", "source": "$toast-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-background-color" }, + "base": { + "source": "$toast-color", + "$value": "inherit" + }, + "bg": { + "source": "$toast-background-color", + "$value": "{color.gray.700}" + }, "border": { - "value": "{color.black}", - "type": "color", "source": "$toast-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.black}" }, "header": { - "text": { "value": "{color.white}", "type": "color", "source": "$toast-header-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-header-background-color" }, - "border": { - "value": "{color.black}", - "type": "color", + "text": { + "source": "$toast-header-color", + "$value": "{color.white}" + }, + "bg": { + "source": "$toast-header-background-color", + "$value": "{color.gray.700}" + }, + "border": { "source": "$toast-header-border-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.black}" } } } }, "elevation": { + "$type": "shadow", "toast": { "box-shadow": { - "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$toast-box-shadow" + "source": "$toast-box-shadow", + "$value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json index a73762aba6..a0bdc5894b 100644 --- a/tokens/src/themes/light/components/Tooltip.json +++ b/tokens/src/themes/light/components/Tooltip.json @@ -1,30 +1,53 @@ { "color": { + "$type": "color", "tooltip": { - "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" }, - "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" }, + "text": { + "source": "$tooltip-color", + "$value": "{color.white}" + }, + "light": { + "source": "$tooltip-color-light", + "$value": "{color.black}" + }, "bg": { - "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" }, - "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" } + "base": { + "source": "$tooltip-bg", + "$value": "{color.black}" + }, + "light": { + "source": "$tooltip-bg-light", + "$value": "{color.white}" + } }, "arrow": { - "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" }, - "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" } + "base": { + "source": "$tooltip-arrow-color", + "$value": "{color.tooltip.bg.base}" + }, + "light": { + "source": "$tooltip-arrow-color-light", + "$value": "{color.white}" + } } } }, "elevation": { + "$type": "shadow", "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" + "source": "$tooltip-box-shadow", + "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))" } } }, "other": { + "$type": "ratio", "tooltip": { - "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" } + "opacity": { + "source": "$tooltip-opacity", + "$value": "1" + } } } } diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json index 39f2dce270..7b98135948 100644 --- a/tokens/src/themes/light/components/general/body.json +++ b/tokens/src/themes/light/components/general/body.json @@ -1,8 +1,15 @@ { + "$type": "color", "color": { "body": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$body-color" }, - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$body-bg" } + "base": { + "source": "$body-color", + "$value": "{color.gray.700}" + }, + "bg": { + "source": "$body-bg", + "$value": "{color.bg.base}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json index 989214871b..1f79929bcd 100644 --- a/tokens/src/themes/light/components/general/headings.json +++ b/tokens/src/themes/light/components/general/headings.json @@ -1,7 +1,11 @@ { + "$type": "color", "color": { "headings": { - "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" } + "base": { + "source": "$headings-color", + "$value": "{color.black}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json index 3c40c8d618..976757699f 100644 --- a/tokens/src/themes/light/components/general/hr.json +++ b/tokens/src/themes/light/components/general/hr.json @@ -1,15 +1,17 @@ { + "$type": "color", "color": { "hr": { "border": { - "value": "{color.black}", - "type": "color", "source": "$hr-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.1 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.black}" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json index f62b15e999..21ef8a5b7d 100644 --- a/tokens/src/themes/light/components/general/input.json +++ b/tokens/src/themes/light/components/general/input.json @@ -1,18 +1,22 @@ { "color": { + "$type": "color", "input": { - "btn-focus": { "value": "{color.bg.active}", "type": "color", "source": "$input-btn-focus-color" } + "btn-focus": { + "source": "$input-btn-focus-color", + "$value": "{color.bg.active}" + } } }, "elevation": { + "$type": "shadow", "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" + "source": "$input-btn-focus-box-shadow", + "$value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json index 5a990dcb38..9f972448eb 100644 --- a/tokens/src/themes/light/components/general/link.json +++ b/tokens/src/themes/light/components/general/link.json @@ -1,96 +1,163 @@ { "color": { + "$type": "color", "link": { - "base": { "value": "{color.info.500}", "type": "color", "source": "$link-color" }, + "base": { + "source": "$link-color", + "$value": "{color.info.500}" + }, "hover": { - "value": "{color.link.base}", - "type": "color", "source": "$link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.base}" }, "inline": { - "base": { "value": "{color.info.500}", "type": "color", "source": "$inline-link-color" }, + "base": { + "source": "$inline-link-color", + "$value": "{color.info.500}" + }, "decoration": { - "value": "{color.link.inline.base}", - "type": "color", "source": "$inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.link.inline.base}" }, "hover": { "base": { - "value": "{color.link.inline.base}", - "type": "color", "source": "$inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.inline.base}" }, "decoration": { - "value": "{color.link.inline.hover.base}", - "type": "color", "source": "$inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "$value": "{color.link.inline.hover.base}" } } }, "muted": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-link-color" }, + "base": { + "source": "$muted-link-color", + "$value": "{color.primary.500}" + }, "hover": { - "value": "{color.link.muted.base}", - "type": "color", "source": "$muted-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.muted.base}" }, "inline": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" }, + "base": { + "source": "$muted-inline-link-color", + "$value": "{color.primary.500}" + }, "decoration": { - "value": "{color.link.muted.inline.base}", - "type": "color", "source": "$muted-inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.link.muted.inline.base}" }, "hover": { "base": { - "value": "{color.link.muted.inline.base}", - "type": "color", "source": "$muted-inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.muted.inline.base}" }, "decoration": { - "value": "{color.link.muted.inline.hover.base}", - "type": "color", "source": "$muted-inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "$value": "{color.link.muted.inline.hover.base}" } } } }, "brand": { - "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-link-color" }, + "base": { + "source": "$brand-link-color", + "$value": "{color.brand.500}" + }, "hover": { - "value": "{color.link.brand.base}", - "type": "color", "source": "$brand-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.brand.base}" }, "inline": { - "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-inline-link-color" }, + "base": { + "source": "$brand-inline-link-color", + "$value": "{color.brand.500}" + }, "decoration": { - "value": "{color.link.brand.inline.base}", - "type": "color", "source": "$brand-inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.link.brand.inline.base}" }, "hover": { "base": { - "value": "{color.link.brand.inline.base}", - "type": "color", "source": "$brand-inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.brand.inline.base}" }, "decoration": { - "value": "{color.link.brand.inline.hover.base}", - "type": "color", "source": "$brand-inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "$value": "{color.link.brand.inline.hover.base}" } } } @@ -98,12 +165,14 @@ } }, "other": { + "$type": "percentage", "link": { "emphasized-hover": { "darken-percentage": { - "value": "15%", "type": "percentage", "source": "$emphasized-link-hover-darken-percentage" + "source": "$emphasized-link-hover-darken-percentage", + "$value": "15%" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json index 516b93c479..4b84c02765 100644 --- a/tokens/src/themes/light/components/general/list.json +++ b/tokens/src/themes/light/components/general/list.json @@ -1,38 +1,75 @@ { + "$type": "color", "color": { "list-group": { - "base": { "value": "inherit", "type": "color", "source": "$list-group-color" }, + "base": { + "source": "$list-group-color", + "$value": "inherit" + }, "bg": { - "base": { "value": "{color.white}", "type": "color", "source": "$list-group-bg" }, - "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" } + "base": { + "source": "$list-group-bg", + "$value": "{color.white}" + }, + "hover": { + "source": "$list-group-hover-bg", + "$value": "{color.gray.100}" + } }, "border": { - "value": "{color.black}", - "type": "color", "source": "$list-group-border-color", - "modify": [{ "type": "alpha", "amount": 0.125 }] + "modify": [ + { + "type": "alpha", + "amount": 0.125 + } + ], + "$value": "{color.black}" }, "active": { - "base": { "value": "{color.active}", "type": "color", "source": "$list-group-active-color" }, + "base": { + "source": "$list-group-active-color", + "$value": "{color.active}" + }, "border": { - "value": "{color.list-group.active.bg}", "type": "color", "source": "$list-group-active-border-color" + "source": "$list-group-active-border-color", + "$value": "{color.list-group.active.bg}" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$list-group-active-bg" } + "bg": { + "source": "$list-group-active-bg", + "$value": "{color.bg.active}" + } }, "disabled": { - "base": { "value": "{color.gray.600}", "type": "color", "source": "$list-group-disabled-color" }, - "bg": { "value": "{color.list-group.bg.base}", "type": "color", "source": "$list-group-disabled-bg" } + "base": { + "source": "$list-group-disabled-color", + "$value": "{color.gray.600}" + }, + "bg": { + "source": "$list-group-disabled-bg", + "$value": "{color.list-group.bg.base}" + } }, "action": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$list-group-action-color" }, + "base": { + "source": "$list-group-action-color", + "$value": "{color.gray.700}" + }, "hover": { - "value": "{color.list-group.action.base}", "type": "color", "source": "$list-group-action-hover-color" + "source": "$list-group-action-hover-color", + "$value": "{color.list-group.action.base}" }, "active": { - "base": { "value": "{color.body.base}", "type": "color", "source": "$list-group-action-active-color" }, - "bg": { "value": "{color.gray.200}", "type": "color", "source": "$list-group-action-active-bg" } + "base": { + "source": "$list-group-action-active-color", + "$value": "{color.body.base}" + }, + "bg": { + "source": "$list-group-action-active-bg", + "$value": "{color.gray.200}" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json index ab01882469..41f41815d8 100644 --- a/tokens/src/themes/light/components/general/text.json +++ b/tokens/src/themes/light/components/general/text.json @@ -1,12 +1,23 @@ { + "$type": "color", "color": { - "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" }, - "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }, + "text-muted": { + "source": "$text-muted", + "$value": "{color.gray.500}" + }, + "mark-bg": { + "source": "$mark-bg", + "$value": "#FFF243" + }, "blockquote": { "small": { - "value": "{color.gray.500}", "type": "color", "source": "$blockquote-small-color" + "source": "$blockquote-small-color", + "$value": "{color.gray.500}" } }, - "yiq-light": { "value": "{color.white}", "type": "color", "source": "$yiq-text-light" } + "yiq-light": { + "source": "$yiq-text-light", + "$value": "{color.white}" + } } } diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json index 5cb19068bb..d8952dba65 100644 --- a/tokens/src/themes/light/global/color.json +++ b/tokens/src/themes/light/global/color.json @@ -1,1658 +1,2425 @@ { + "$type": "color", "color": { - "white": { "value": "#FFFFFF", "type": "color", "source": "$white", "description": "White color." }, - "black": { "value": "#000000", "type": "color", "source": "$black", "description": "Black color." }, - "blue": { "value": "#23419F", "type": "color", "source": "$blue", "description": "Blue color." }, - "red": { "value": "#C32D3A", "type": "color", "source": "$red", "description": "Red color." }, - "green": { "value": "#178253", "type": "color", "source": "$green", "description": "Green color." }, - "yellow": { "value": "#FFD900", "type": "color", "source": "$yellow", "description": "Yellow color." }, - "teal": { "value": "#006DAA", "type": "color", "source": "$teal", "description": "Teal color." }, + "white": { + "source": "$white", + "$value": "#FFFFFF", + "$description": "White color." + }, + "black": { + "source": "$black", + "$value": "#000000", + "$description": "Black color." + }, + "blue": { + "source": "$blue", + "$value": "#23419F", + "$description": "Blue color." + }, + "red": { + "source": "$red", + "$value": "#C32D3A", + "$description": "Red color." + }, + "green": { + "source": "$green", + "$value": "#178253", + "$description": "Green color." + }, + "yellow": { + "source": "$yellow", + "$value": "#FFD900", + "$description": "Yellow color." + }, + "teal": { + "source": "$teal", + "$value": "#006DAA", + "$description": "Teal color." + }, "accent": { "a": { - "value": "#00BBF9", - "type": "color", "source": "$accent-a", - "description": "Accent-A color.", "actions": { "default": "{color.action.default.accent.a}" - } + }, + "$value": "#00BBF9", + "$description": "Accent-A color." }, "b": { - "value": "#FFEE88", - "type": "color", "source": "$accent-b", - "description": "Accent-B color.", "actions": { "default": "{color.action.default.accent.b}" - } + }, + "$value": "#FFEE88", + "$description": "Accent-B color." } }, "gray": { - "base": { - "value": "#707070", - "type": "color", - "source": "$gray", - "description": "Basic gray color.", - "actions": { - "default": "{color.action.default.gray.base}" - } - }, "100": { - "value": "#EBEBEB", - "type": "color", "source": "$gray-100", - "description": "Gray color of level 100.", "actions": { "default": "{color.action.default.gray.100}" - } + }, + "$value": "#EBEBEB", + "$description": "Gray color of level 100." }, "200": { - "value": "#CCCCCC", - "type": "color", "source": "$gray-200", - "description": "Gray color of level 200.", "actions": { "default": "{color.action.default.gray.200}" - } + }, + "$value": "#CCCCCC", + "$description": "Gray color of level 200." }, "300": { - "value": "#ADADAD", - "type": "color", "source": "$gray-300", - "description": "Gray color of level 300.", "actions": { "default": "{color.action.default.gray.300}" - } + }, + "$value": "#ADADAD", + "$description": "Gray color of level 300." }, "400": { - "value": "#8F8F8F", - "type": "color", "source": "$gray-400", - "description": "Gray color of level 400.", "actions": { "default": "{color.action.default.gray.400}" - } + }, + "$value": "#8F8F8F", + "$description": "Gray color of level 400." }, "500": { - "value": "{color.gray.base}", - "type": "color", "source": "$gray-500", - "description": "Gray color of level 500.", "actions": { "default": "{color.action.default.gray.500}" - } - }, + }, + "$value": "{color.gray.base}", + "$description": "Gray color of level 500." + }, "600": { - "value": "#5C5C5C", - "type": "color", "source": "$gray-600", - "description": "Gray color of level 600.", "actions": { "default": "{color.action.default.gray.600}" - } + }, + "$value": "#5C5C5C", + "$description": "Gray color of level 600." }, "700": { - "value": "#454545", - "type": "color", "source": "$gray-700", - "description": "Gray color of level 700.", "actions": { "default": "{color.action.default.gray.700}" - } + }, + "$value": "#454545", + "$description": "Gray color of level 700." }, "800": { - "value": "#333333", - "type": "color", "source": "$gray-800", - "description": "Gray color of level 800.", "actions": { "default": "{color.action.default.gray.800}" - } + }, + "$value": "#333333", + "$description": "Gray color of level 800." }, "900": { - "value": "#212529", - "type": "color", "source": "$gray-900", - "description": "Gray color of level 900.", "actions": { "default": "{color.action.default.gray.900}" - } + }, + "$value": "#212529", + "$description": "Gray color of level 900." + }, + "base": { + "source": "$gray", + "actions": { + "default": "{color.action.default.gray.base}" + }, + "$value": "#707070", + "$description": "Basic gray color." } }, "primary": { - "base": { - "value": "#0A3055", - "type": "color", - "source": "$primary", - "description": "Basic primary color.", - "actions": { - "default": "{color.action.default.primary.base}" - } - }, "100": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Primary color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.primary.100}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 100." }, "200": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Primary color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.primary.200}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 200." }, "300": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Primary color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.primary.300}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 300." }, "400": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Primary color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.primary.400}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 400." }, "500": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-500", - "description": "Primary color of level 500.", "actions": { "default": "{color.action.default.primary.500}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 500." }, "600": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Primary color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.primary.600}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 600." }, "700": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Primary color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.primary.700}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 700." }, "800": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Primary color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.primary.800}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 800." }, "900": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Primary color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.primary.900}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 900." + }, + "base": { + "source": "$primary", + "actions": { + "default": "{color.action.default.primary.base}" + }, + "$value": "#0A3055", + "$description": "Basic primary color." } }, "secondary": { - "base": { - "value": "{color.gray.700}", - "type": "color", - "source": "$secondary", - "description": "Basic secondary color.", - "actions": { - "default": "{color.action.default.secondary.base}" - } - }, "100": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Secondary color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.secondary.100}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 100." }, "200": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Secondary color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.secondary.200}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 200." }, "300": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Secondary color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.secondary.300}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 300." }, "400": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Secondary color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.secondary.400}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 400." }, "500": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-500", - "description": "Secondary color of level 500.", "actions": { "default": "{color.action.default.secondary.500}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 500." }, "600": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Secondary color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.secondary.600}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 600." }, "700": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Secondary color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.secondary.700}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 700." }, "800": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Secondary color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.secondary.800}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 800." }, "900": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Secondary color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.secondary.900}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 900." + }, + "base": { + "source": "$secondary", + "actions": { + "default": "{color.action.default.secondary.base}" + }, + "$value": "{color.gray.700}", + "$description": "Basic secondary color." } }, "brand": { - "base": { - "value": "#9D0054", - "type": "color", - "source": "$brand", - "description": "Basic brand color.", - "actions": { - "default": "{color.action.default.brand.base}" - } - }, "100": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Brand color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.brand.100}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 100." }, "200": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Brand color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.brand.200}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 200." }, "300": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Brand color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.brand.300}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 300." }, "400": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Brand color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.brand.400}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 400." }, "500": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-500", - "description": "Brand color of level 500.", "actions": { "default": "{color.action.default.brand.500}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 500." }, "600": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Brand color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.brand.600}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 600." }, "700": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Brand color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.brand.700}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 700." }, "800": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Brand color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.brand.800}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 800." }, "900": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Brand color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.brand.900}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 900." + }, + "base": { + "source": "$brand", + "actions": { + "default": "{color.action.default.brand.base}" + }, + "$value": "#9D0054", + "$description": "Basic brand color." } }, "success": { - "base": { - "value": "{color.green}", - "type": "color", - "source": "$success", - "description": "Basic success color.", - "actions": { - "default": "{color.action.default.success.base}" - } - }, "100": { - "value": "{color.success.base}", - "type": "color", "source": "$success-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Success color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.success.100}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 100." }, "200": { - "value": "{color.success.base}", - "type": "color", "source": "$success-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Success color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.success.200}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 200." }, "300": { - "value": "{color.success.base}", - "type": "color", "source": "$success-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Success color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.success.300}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 300." }, "400": { - "value": "{color.success.base}", - "type": "color", "source": "$success-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Success color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.success.400}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 400." }, "500": { - "value": "{color.success.base}", - "type": "color", "source": "$success-500", - "description": "Success color of level 500.", "actions": { "default": "{color.action.default.success.500}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 500." }, "600": { - "value": "{color.success.base}", - "type": "color", "source": "$success-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Success color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.success.600}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 600." }, "700": { - "value": "{color.success.base}", - "type": "color", "source": "$success-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Success color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.success.700}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 700." }, "800": { - "value": "{color.success.base}", - "type": "color", "source": "$success-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Success color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.success.800}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 800." }, "900": { - "value": "{color.success.base}", - "type": "color", "source": "$success-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Success color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.success.900}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 900." + }, + "base": { + "source": "$success", + "actions": { + "default": "{color.action.default.success.base}" + }, + "$value": "{color.green}", + "$description": "Basic success color." } }, "info": { - "base": { - "value": "{color.teal}", - "type": "color", - "source": "$info", - "description": "Basic info color.", - "actions": { - "default": "{color.action.default.info.base}" - } - }, "100": { - "value": "{color.info.base}", - "type": "color", "source": "$info-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Info color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.info.100}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 100." }, "200": { - "value": "{color.info.base}", - "type": "color", "source": "$info-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Info color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.info.200}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 200." }, "300": { - "value": "{color.info.base}", - "type": "color", "source": "$info-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Info color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.info.300}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 300." }, "400": { - "value": "{color.info.base}", - "type": "color", "source": "$info-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Info color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.info.400}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 400." }, "500": { - "value": "{color.info.base}", - "type": "color", "source": "$info-500", - "description": "Info color of level 500.", "actions": { "default": "{color.action.default.info.500}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 500." }, "600": { - "value": "{color.info.base}", - "type": "color", "source": "$info-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Info color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.info.600}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 600." }, "700": { - "value": "{color.info.base}", - "type": "color", "source": "$info-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Info color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.info.700}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 700." }, "800": { - "value": "{color.info.base}", - "type": "color", "source": "$info-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Info color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.info.800}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 800." }, "900": { - "value": "{color.info.base}", - "type": "color", "source": "$info-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Info color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.info.900}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 900." + }, + "base": { + "source": "$info", + "actions": { + "default": "{color.action.default.info.base}" + }, + "$value": "{color.teal}", + "$description": "Basic info color." } }, "warning": { - "base": { - "value": "{color.yellow}", - "type": "color", - "source": "$warning", - "description": "Basic warning color.", - "actions": { - "default": "{color.action.default.warning.base}" - } - }, "100": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Warning color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.warning.100}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 100." }, "200": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Warning color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.warning.200}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 200." }, "300": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Warning color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.warning.300}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 300." }, "400": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Warning color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.warning.400}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 400." }, "500": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-500", - "description": "Warning color of level 500.", "actions": { "default": "{color.action.default.warning.500}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 500." }, "600": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Warning color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.warning.600}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 600." }, "700": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Warning color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.warning.700}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 700." }, "800": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Warning color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.warning.800}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 800." }, "900": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Warning color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.warning.900}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 900." + }, + "base": { + "source": "$warning", + "actions": { + "default": "{color.action.default.warning.base}" + }, + "$value": "{color.yellow}", + "$description": "Basic warning color." } }, "danger": { - "base": { - "value": "{color.red}", - "type": "color", - "source": "$danger", - "description": "Basic danger color.", - "actions": { - "default": "{color.action.default.danger.base}" - } - }, "100": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Danger color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.danger.100}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 100." }, "200": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Danger color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.danger.200}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 200." }, "300": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Danger color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.danger.300}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 300." }, "400": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Danger color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.danger.400}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 400." }, "500": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-500", - "description": "Danger color of level 500.", "actions": { "default": "{color.action.default.danger.500}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 500." }, "600": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Danger color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.danger.600}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 600." }, "700": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Danger color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.danger.700}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 700." }, "800": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Danger color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.danger.800}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 800." }, "900": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Danger color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.danger.900}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 900." + }, + "base": { + "source": "$danger", + "actions": { + "default": "{color.action.default.danger.base}" + }, + "$value": "{color.red}", + "$description": "Basic danger color." } }, "light": { - "base": { - "value": "#E1DDDB", - "type": "color", - "source": "$light", - "description": "Basic light color.", - "actions": { - "default": "{color.action.default.light.base}" - } - }, "100": { - "value": "{color.light.base}", - "type": "color", "source": "$light-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Light color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.light.100}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 100." }, "200": { - "value": "{color.light.base}", - "type": "color", "source": "$light-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Light color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.light.200}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 200." }, "300": { - "value": "{color.light.base}", - "type": "color", "source": "$light-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Light color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.light.300}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 300." }, "400": { - "value": "{color.light.base}", - "type": "color", "source": "$light-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Light color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.light.400}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 400." }, "500": { - "value": "{color.light.base}", - "type": "color", "source": "$light-500", - "description": "Light color of level 500.", "actions": { "default": "{color.action.default.light.500}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 500." }, "600": { - "value": "{color.light.base}", - "type": "color", "source": "$light-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Light color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.light.600}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 600." }, "700": { - "value": "{color.light.base}", - "type": "color", "source": "$light-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Light color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.light.700}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 700." }, "800": { - "value": "{color.light.base}", - "type": "color", "source": "$light-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Light color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.light.800}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 800." }, "900": { - "value": "{color.light.base}", - "type": "color", "source": "$light-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Light color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.light.900}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 900." + }, + "base": { + "source": "$light", + "actions": { + "default": "{color.action.default.light.base}" + }, + "$value": "#E1DDDB", + "$description": "Basic light color." } }, "dark": { - "base": { - "value": "#273F2F", - "type": "color", - "source": "$dark", - "description": "Basic dark color.", - "actions": { - "default": "{color.action.default.dark.base}" - } - }, "100": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Dark color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.dark.100}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 100." }, "200": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Dark color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.dark.200}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 200." }, "300": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Dark color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.dark.300}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 300." }, "400": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Dark color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.dark.400}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 400." }, "500": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-500", - "description": "Dark color of level 500.", "actions": { "default": "{color.action.default.dark.500}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 500." }, "600": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Dark color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.dark.600}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 600." }, "700": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Info color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.dark.700}" - } + }, + "$value": "{color.dark.base}", + "$description": "Info color of level 700." }, "800": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Dark color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.dark.800}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 800." }, "900": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Dark color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.dark.900}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 900." + }, + "base": { + "source": "$dark", + "actions": { + "default": "{color.action.default.dark.base}" + }, + "$value": "#273F2F", + "$description": "Basic dark color." } }, "action": { "default": { "gray": { - "base": { - "value": "{color.gray.base}", - "type": "color", - "source": "$action-default-gray-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.gray.100}", - "type": "color", "source": "$action-default-gray-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.100}" }, "200": { - "value": "{color.gray.200}", - "type": "color", "source": "$action-default-gray-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.200}" }, "300": { - "value": "{color.gray.300}", - "type": "color", "source": "$action-default-gray-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.300}" }, "400": { - "value": "{color.gray.400}", - "type": "color", "source": "$action-default-gray-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.400}" }, "500": { - "value": "{color.gray.500}", - "type": "color", "source": "$action-default-gray-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.500}" }, "600": { - "value": "{color.gray.600}", - "type": "color", "source": "$action-default-gray-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.600}" }, "700": { - "value": "{color.gray.700}", - "type": "color", "source": "$action-default-gray-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.700}" }, "800": { - "value": "{color.gray.800}", - "type": "color", "source": "$action-default-gray-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.800}" }, "900": { - "value": "{color.gray.900}", - "type": "color", "source": "$action-default-gray-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.900}" + }, + "base": { + "source": "$action-default-gray-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.base}" } }, "primary": { - "base": { - "value": "{color.primary.base}", - "type": "color", - "source": "$action-default-primary-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.primary.100}", - "type": "color", "source": "$action-default-primary-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.100}" }, "200": { - "value": "{color.primary.200}", - "type": "color", "source": "$action-default-primary-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.200}" }, "300": { - "value": "{color.primary.300}", - "type": "color", "source": "$action-default-primary-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.300}" }, "400": { - "value": "{color.primary.400}", - "type": "color", "source": "$action-default-primary-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.400}" }, "500": { - "value": "{color.primary.500}", - "type": "color", "source": "$action-default-primary-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.500}" }, "600": { - "value": "{color.primary.600}", - "type": "color", "source": "$action-default-primary-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.600}" }, "700": { - "value": "{color.primary.700}", - "type": "color", "source": "$action-default-primary-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.700}" }, "800": { - "value": "{color.primary.800}", - "type": "color", "source": "$action-default-primary-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.800}" }, "900": { - "value": "{color.primary.900}", - "type": "color", "source": "$action-default-primary-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.900}" + }, + "base": { + "source": "$action-default-primary-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.base}" } }, "secondary": { - "base": { - "value": "{color.secondary.base}", - "type": "color", - "source": "$action-default-secondary-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.secondary.100}", - "type": "color", "source": "$action-default-secondary-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.100}" }, "200": { - "value": "{color.secondary.200}", - "type": "color", "source": "$action-default-secondary-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.200}" }, "300": { - "value": "{color.secondary.300}", - "type": "color", "source": "$action-default-secondary-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.300}" }, "400": { - "value": "{color.secondary.400}", - "type": "color", "source": "$action-default-secondary-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.400}" }, "500": { - "value": "{color.secondary.500}", - "type": "color", "source": "$action-default-secondary-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.500}" }, "600": { - "value": "{color.secondary.600}", - "type": "color", "source": "$action-default-secondary-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.600}" }, "700": { - "value": "{color.secondary.700}", - "type": "color", "source": "$action-default-secondary-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.700}" }, "800": { - "value": "{color.secondary.800}", - "type": "color", "source": "$action-default-secondary-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.800}" }, "900": { - "value": "{color.secondary.900}", - "type": "color", "source": "$action-default-secondary-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.900}" + }, + "base": { + "source": "$action-default-secondary-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.base}" } }, "brand": { - "base": { - "value": "{color.brand.base}", - "type": "color", - "source": "$action-default-brand-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.brand.100}", - "type": "color", "source": "$action-default-brand-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.100}" }, "200": { - "value": "{color.brand.200}", - "type": "color", "source": "$action-default-brand-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.200}" }, "300": { - "value": "{color.brand.300}", - "type": "color", "source": "$action-default-brand-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.300}" }, "400": { - "value": "{color.brand.400}", - "type": "color", "source": "$action-default-brand-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.400}" }, "500": { - "value": "{color.brand.500}", - "type": "color", "source": "$action-default-brand-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.500}" }, "600": { - "value": "{color.brand.600}", - "type": "color", "source": "$action-default-brand-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.600}" }, "700": { - "value": "{color.brand.700}", - "type": "color", "source": "$action-default-brand-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.700}" }, "800": { - "value": "{color.brand.800}", - "type": "color", "source": "$action-default-brand-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.800}" }, "900": { - "value": "{color.brand.900}", - "type": "color", "source": "$action-default-brand-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.900}" + }, + "base": { + "source": "$action-default-brand-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.base}" } }, "success": { - "base": { - "value": "{color.success.base}", - "type": "color", - "source": "$action-default-success-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.success.100}", - "type": "color", "source": "$action-default-success-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.100}" }, "200": { - "value": "{color.success.200}", - "type": "color", "source": "$action-default-success-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.200}" }, "300": { - "value": "{color.success.300}", - "type": "color", "source": "$action-default-success-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.300}" }, "400": { - "value": "{color.success.400}", - "type": "color", "source": "$action-default-success-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.400}" }, "500": { - "value": "{color.success.500}", - "type": "color", "source": "$action-default-success-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.500}" }, "600": { - "value": "{color.success.600}", - "type": "color", "source": "$action-default-success-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.600}" }, "700": { - "value": "{color.success.700}", - "type": "color", "source": "$action-default-success-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.700}" }, "800": { - "value": "{color.success.800}", - "type": "color", "source": "$action-default-success-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.800}" }, "900": { - "value": "{color.success.900}", - "type": "color", "source": "$action-default-success-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.900}" + }, + "base": { + "source": "$action-default-success-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.base}" } }, "info": { - "base": { - "value": "{color.info.base}", - "type": "color", - "source": "$action-default-info-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.info.100}", - "type": "color", "source": "$action-default-info-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.100}" }, "200": { - "value": "{color.info.200}", - "type": "color", "source": "$action-default-info-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.200}" }, "300": { - "value": "{color.info.300}", - "type": "color", "source": "$action-default-info-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.300}" }, "400": { - "value": "{color.info.400}", - "type": "color", "source": "$action-default-info-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.400}" }, "500": { - "value": "{color.info.500}", - "type": "color", "source": "$action-default-info-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.500}" }, "600": { - "value": "{color.info.600}", - "type": "color", "source": "$action-default-info-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.600}" }, "700": { - "value": "{color.info.700}", - "type": "color", "source": "$action-default-info-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.700}" }, "800": { - "value": "{color.info.800}", - "type": "color", "source": "$action-default-info-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.800}" }, "900": { - "value": "{color.info.900}", - "type": "color", "source": "$action-default-info-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.900}" + }, + "base": { + "source": "$action-default-info-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.base}" } }, "warning": { - "base": { - "value": "{color.warning.base}", - "type": "color", - "source": "$action-default-warning-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.warning.100}", - "type": "color", "source": "$action-default-warning-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.100}" }, "200": { - "value": "{color.warning.200}", - "type": "color", "source": "$action-default-warning-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.200}" }, "300": { - "value": "{color.warning.300}", - "type": "color", "source": "$action-default-warning-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.300}" }, "400": { - "value": "{color.warning.400}", - "type": "color", "source": "$action-default-warning-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.400}" }, "500": { - "value": "{color.warning.500}", - "type": "color", "source": "$action-default-warning-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.500}" }, "600": { - "value": "{color.warning.600}", - "type": "color", "source": "$action-default-warning-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.600}" }, "700": { - "value": "{color.warning.700}", - "type": "color", "source": "$action-default-warning-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.700}" }, "800": { - "value": "{color.warning.800}", - "type": "color", "source": "$action-default-warning-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.800}" }, "900": { - "value": "{color.warning.900}", - "type": "color", "source": "$action-default-warning-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.900}" + }, + "base": { + "source": "$action-default-warning-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.base}" } }, "danger": { - "base": { - "value": "{color.danger.base}", - "type": "color", - "source": "$action-default-danger-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.danger.100}", - "type": "color", "source": "$action-default-danger-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.100}" }, "200": { - "value": "{color.danger.200}", - "type": "color", "source": "$action-default-danger-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.200}" }, "300": { - "value": "{color.danger.300}", - "type": "color", "source": "$action-default-danger-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.300}" }, "400": { - "value": "{color.danger.400}", - "type": "color", "source": "$action-default-danger-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.400}" }, "500": { - "value": "{color.danger.500}", - "type": "color", "source": "$action-default-danger-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.500}" }, "600": { - "value": "{color.danger.600}", - "type": "color", "source": "$action-default-danger-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.600}" }, "700": { - "value": "{color.danger.700}", - "type": "color", "source": "$action-default-danger-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.700}" }, "800": { - "value": "{color.danger.800}", - "type": "color", "source": "$action-default-danger-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.800}" }, "900": { - "value": "{color.danger.900}", - "type": "color", "source": "$action-default-danger-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.900}" + }, + "base": { + "source": "$action-default-danger-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.base}" } }, "light": { - "base": { - "value": "{color.light.base}", - "type": "color", - "source": "$action-default-light-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.light.100}", - "type": "color", "source": "$action-default-light-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.100}" }, "200": { - "value": "{color.light.200}", - "type": "color", "source": "$action-default-light-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.200}" }, "300": { - "value": "{color.light.300}", - "type": "color", "source": "$action-default-light-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.300}" }, "400": { - "value": "{color.light.400}", - "type": "color", "source": "$action-default-light-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.400}" }, "500": { - "value": "{color.light.500}", - "type": "color", "source": "$action-default-light-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.500}" }, "600": { - "value": "{color.light.600}", - "type": "color", "source": "$action-default-light-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.600}" }, "700": { - "value": "{color.light.700}", - "type": "color", "source": "$action-default-light-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.700}" }, "800": { - "value": "{color.light.800}", - "type": "color", "source": "$action-default-light-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.800}" }, "900": { - "value": "{color.light.900}", - "type": "color", "source": "$action-default-light-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.900}" + }, + "base": { + "source": "$action-default-light-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.base}" } }, "dark": { - "base": { - "value": "{color.dark.base}", - "type": "color", - "source": "$action-default-dark-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.dark.100}", - "type": "color", "source": "$action-default-dark-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.100}" }, "200": { - "value": "{color.dark.200}", - "type": "color", "source": "$action-default-dark-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.200}" }, "300": { - "value": "{color.dark.300}", - "type": "color", "source": "$action-default-dark-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.300}" }, "400": { - "value": "{color.dark.400}", - "type": "color", "source": "$action-default-dark-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.400}" }, "500": { - "value": "{color.dark.500}", - "type": "color", "source": "$action-default-dark-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.500}" }, "600": { - "value": "{color.dark.600}", - "type": "color", "source": "$action-default-dark-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.600}" }, "700": { - "value": "{color.dark.700}", - "type": "color", "source": "$action-default-dark-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.700}" }, "800": { - "value": "{color.dark.800}", - "type": "color", "source": "$action-default-dark-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.800}" }, "900": { - "value": "{color.dark.900}", - "type": "color", "source": "$action-default-dark-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.900}" + }, + "base": { + "source": "$action-default-dark-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.base}" } }, "accent": { "a": { - "value": "{color.accent.a}", - "type": "color", "source": "$action-default-accent-a", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.accent.a}" }, "b": { - "value": "{color.accent.b}", - "type": "color", "source": "$action-default-accent-b", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.accent.b}" } } } diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json index 56dc9d3b87..7919b92413 100644 --- a/tokens/src/themes/light/global/elevation.json +++ b/tokens/src/themes/light/global/elevation.json @@ -1,199 +1,182 @@ { + "$type": "shadow", "elevation": { "box-shadow": { "level": { "1": { - "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$level-1-box-shadow", - "description": "Basic box shadow of level 1." + "$value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 1." }, "2": { - "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$level-2-box-shadow", - "description": "Basic box shadow of level 2." + "$value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 2." }, "3": { - "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$level-3-box-shadow", - "description": "Basic box shadow of level 3." + "$value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 3." }, "4": { - "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$level-4-box-shadow", - "description": "Basic box shadow of level 4." + "$value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 4." }, "5": { - "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$level-5-box-shadow", - "description": "Basic box shadow of level 5." + "$value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 5." } }, - "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow", "description": "Default box shadow." }, - "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "type": "shadow", "source": "$box-shadow-sm", "description": "Small box shadow." }, - "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow-lg", "description": "Large box shadow." }, + "base": { + "source": "$box-shadow", + "$value": "0 .125rem .25rem rgba(0, 0, 0, .3)", + "$description": "Default box shadow." + }, + "sm": { + "source": "$box-shadow-sm", + "$value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", + "$description": "Small box shadow." + }, + "lg": { + "source": "$box-shadow-lg", + "$value": "0 .25rem .5rem rgba(0, 0, 0, .3)", + "$description": "Large box shadow." + }, "down": { "1": { - "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-down-1", - "description": "Bottom box shadow of level 1." + "$value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 1." }, "2": { - "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-down-2", - "description": "Bottom box shadow of level 2." + "$value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 2." }, "3": { - "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-down-3", - "description": "Bottom box shadow of level 3." + "$value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 3." }, "4": { - "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-down-4", - "description": "Bottom box shadow of level 4." + "$value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 4." }, "5": { - "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-down-5", - "description": "Bottom box shadow of level 5." + "$value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 5." } }, "left": { "1": { - "value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-left-1", - "description": "Left box shadow of level 1." + "$value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 1." }, "2": { - "value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-left-2", - "description": "Left box shadow of level 2." + "$value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 2." }, "3": { - "value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-left-3", - "description": "Left box shadow of level 3." + "$value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 3." }, "4": { - "value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-left-4", - "description": "Left box shadow of level 4." + "$value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 4." }, "5": { - "value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-left-5", - "description": "Left box shadow of level 5." + "$value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 5." } }, "up": { "1": { - "value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-up-1", - "description": "Top box shadow of level 1." + "$value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)", + "$description": "Top box shadow of level 1." }, "2": { - "value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-up-2", - "description": "Top box shadow of level 2." + "$value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)", + "$description": "Top box shadow of level 2." }, "3": { - "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-up-3", - "description": "Top box shadow of level 3." + "$value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", + "$description": "Top box shadow of level 3." }, "4": { - "value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-up-4", - "description": "Top box shadow of level 4." + "$value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)", + "$description": "Top box shadow of level 4." }, "5": { - "value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-up-5", - "description": "Basic box shadow of level 5." + "$value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 5." } }, "right": { "1": { - "value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-right-1", - "description": "Right box shadow of level 1." + "$value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 1." }, "2": { - "value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-right-2", - "description": "Right box shadow of level 2." + "$value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 2." }, "3": { - "value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-right-3", - "description": "Right box shadow of level 3." + "$value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 3." }, "4": { - "value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-right-4", - "description": "Right box shadow of level 4." + "$value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 4." }, "5": { - "value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-right-5", - "description": "Right box shadow of level 5." + "$value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 5." } }, "centered": { "1": { - "value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-centered-1", - "description": "Centered box shadow of level 1." + "$value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 1." }, "2": { - "value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-centered-2", - "description": "Centered box shadow of level 2." + "$value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 2." }, "3": { - "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-centered-3", - "description": "Centered box shadow of level 3." + "$value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 3." }, "4": { - "value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-centered-4", - "description": "Centered box shadow of level 4." + "$value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 4." }, "5": { - "value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)", - "type": "shadow", "source": "$box-shadow-centered-5", - "description": "Centered box shadow of level 5." + "$value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 5." } } } diff --git a/tokens/src/themes/light/global/other.json b/tokens/src/themes/light/global/other.json index 360b2c1485..7cf894ee96 100644 --- a/tokens/src/themes/light/global/other.json +++ b/tokens/src/themes/light/global/other.json @@ -1,4 +1,4 @@ { "yiq-text-dark": "#454545", "yiq-text-light": "#FFFFFF" -} +} \ No newline at end of file diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index aee177d8ae..7bce255ab4 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -14,17 +14,17 @@ import { composeBreakpointName } from './utils.js'; const colorTransform = (token, theme) => { const { name: tokenName, - value, + $value, original, modify = [], } = token; const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor', 'none']; - if (reservedColorValues.includes(original.value)) { - return original.value; + if (reservedColorValues.includes(original.$value)) { + return original.$value; } - let color = chroma(value); + let color = chroma($value); if (modify && modify.length > 0) { modify.forEach((modifier) => { @@ -76,19 +76,22 @@ const createCustomCSSVariables = ({ : dictionary.allTokens; const variables = outputTokens.sort(sortByReference(dictionary)).map(token => { - let { value } = token; + let { $value } = token; + const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences; - if (usesReferences(token.original.value) && outputReferencesForToken) { - const refs = getReferences(token.original.value, dictionary.tokens); + + if (usesReferences(token.original.$value) && outputReferencesForToken) { + const refs = getReferences(token.original.$value, dictionary.tokens); refs.forEach(ref => { - value = value.replace(ref.value, `var(--${ref.name})`); + $value = $value.replace(ref.$value, `var(--${ref.name})`); }); } - return ` --${token.name}: ${value};`; + return ` --${token.name}: ${$value};`; }).join('\n'); - return `${fileHeader({ file })}:root {\n${variables}\n}\n`; + // return `${fileHeader({ file })}:root {\n${variables}\n}\n`; + return `:root {\n${variables}\n}\n`; }; /** @@ -98,7 +101,7 @@ StyleDictionary.registerTransform({ name: 'color/sass-color-functions', transitive: true, type: 'value', - filter: (token) => token.attributes.category === 'color' || token.value?.toString().startsWith('#'), + filter: (token) => token.attributes.category === 'color' || token.$value?.toString().startsWith('#'), transform: (token) => colorTransform(token), }); @@ -111,9 +114,9 @@ StyleDictionary.registerTransform({ type: 'value', filter: (token) => token.modify && token.modify[0].type === 'str-replace', transform: (token) => { - const { value, modify } = token; + const { $value, modify } = token; const { toReplace, replaceWith } = modify[0]; - return value.replaceAll(toReplace, replaceWith); + return $value.replaceAll(toReplace, replaceWith); }, }); @@ -136,7 +139,6 @@ StyleDictionary.registerFormat({ name: 'css/utility-classes', format: async ({ dictionary, file }) => { const { utilities } = dictionary.tokens; - if (!utilities) { return ''; } @@ -162,8 +164,8 @@ StyleDictionary.registerFormat({ } }); - const header = StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); - return header + utilityClasses; + // const header = StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); + return utilityClasses; }, }); @@ -182,20 +184,20 @@ StyleDictionary.registerFormat({ for (let i = 0; i < breakpoints.length; i++) { const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]]; - customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.value});\n`; + customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.$value});\n`; if (nextBreakpoint) { - customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`; + customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`; } } - return fileHeader({ file }) + customMediaVariables; + // return fileHeader({ file }) + customMediaVariables; + return customMediaVariables; }, }); /** * Custom file header for custom and built-in formatters. */ -// Регистрация кастомного fileHeader StyleDictionary.registerFileHeader({ name: 'customFileHeader', fileHeader: (defaultMessages = []) => {