From f5cf33afebe0d841091cc6572fcdd517a4c56a01 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Fri, 17 Mar 2023 17:49:31 +0200 Subject: [PATCH] refactor: some refactoring --- scss/core/css/custom-media-breakpoints.css | 2 +- scss/core/css/utility-classes.css | 2 +- scss/core/css/variables.css | 12 ++- src/Badge/Badge.scss | 54 +++++++------- src/Button/Button.scss | 2 +- src/Form/_bootstrap-forms.scss | 29 +++++--- src/Form/_variables.scss | 27 +------ src/PageBanner/PageBanner.scss | 32 ++++---- src/Popover/Popover.scss | 43 +++++------ src/ProgressBar/ProgressBar.scss | 73 ++----------------- src/ProgressBar/_mixins.scss | 20 +++++ src/Tooltip/Tooltip.scss | 4 +- .../themes/light/components/PageBanner.json | 24 ++++++ 13 files changed, 149 insertions(+), 175 deletions(-) create mode 100644 src/ProgressBar/_mixins.scss create mode 100644 tokens/src/themes/light/components/PageBanner.json diff --git a/scss/core/css/custom-media-breakpoints.css b/scss/core/css/custom-media-breakpoints.css index ae8f48ab9d2..453a20fe053 100644 --- a/scss/core/css/custom-media-breakpoints.css +++ b/scss/core/css/custom-media-breakpoints.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 17 Mar 2023 13:58:00 GMT + * Generated on Fri, 17 Mar 2023 15:19:16 GMT */ @custom-media --pgn-size-breakpoint-xs (min-width: 0); diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css index e44d632725b..e4443690bb3 100644 --- a/scss/core/css/utility-classes.css +++ b/scss/core/css/utility-classes.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 17 Mar 2023 13:58:00 GMT + * Generated on Fri, 17 Mar 2023 15:19:16 GMT */ .bg-dark { diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css index d48a516d633..c868854d649 100644 --- a/scss/core/css/variables.css +++ b/scss/core/css/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 17 Mar 2023 13:58:00 GMT + * Generated on Fri, 17 Mar 2023 15:19:16 GMT */ :root { @@ -693,6 +693,13 @@ --pgn-color-pagination-bg-disabled: var(--pgn-color-white); --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100); --pgn-color-pagination-text-inverse: var(--pgn-color-white); + --pgn-color-page-banner-text-warning: var(--pgn-color-black); + --pgn-color-page-banner-text-accent-b: var(--pgn-color-black); + --pgn-color-page-banner-text-accent-a: var(--pgn-color-black); + --pgn-color-page-banner-text-light: var(--pgn-color-black); + --pgn-color-page-banner-text-dark: var(--pgn-color-white); + --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b); + --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a); --pgn-color-navbar-light-toggler-border: #0000001A; --pgn-color-navbar-light-disabled: #0000004D; --pgn-color-navbar-light-active: #000000E6; @@ -1132,6 +1139,8 @@ --pgn-color-pagination-focus-base: var(--pgn-color-primary-500); --pgn-color-pagination-bg-base: var(--pgn-color-bg-base); --pgn-color-pagination-text-active: var(--pgn-color-active); + --pgn-color-page-banner-bg-light: var(--pgn-color-light-400); + --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500); --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-dark-active: var(--pgn-color-active); @@ -1561,6 +1570,7 @@ --pgn-color-popover-arrow-base: var(--pgn-color-popover-bg); --pgn-color-pagination-bg-active: var(--pgn-color-bg-active); --pgn-color-pagination-text-disabled: var(--pgn-color-disabled); + --pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100); --pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active); --pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active); --pgn-color-nav-pills-link-active-bg: var(--pgn-color-bg-active); diff --git a/src/Badge/Badge.scss b/src/Badge/Badge.scss index 1a610429b0d..13a9df9bcbb 100644 --- a/src/Badge/Badge.scss +++ b/src/Badge/Badge.scss @@ -2,7 +2,7 @@ display: inline-block; padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base); color: var(--pgn-badge-color, inherit); - background-color: var(--pgn-badge-bg-color, transparent); + background-color: var(--pgn-badge-bg, transparent); @include font-size(var(--pgn-typography-badge-font-size)); @@ -20,13 +20,13 @@ &:focus { text-decoration: none; color: var(--pgn-badge-focus-color, inherit); - background-color: var(--pgn-badge-focus-bg-color, transparent); + background-color: var(--pgn-badge-focus-bg, transparent); } &:focus, &.focus { outline: 0; - box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow-color, rgba(0, 0, 0, .15)); + box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, .15)); } } @@ -49,64 +49,64 @@ .badge-primary { --pgn-badge-color: var(--pgn-color-badge-text-primary); - --pgn-badge-bg-color: var(--pgn-color-badge-bg-primary); + --pgn-badge-bg: var(--pgn-color-badge-bg-primary); --pgn-badge-focus-color: var(--pgn-color-badge-focus-primary); - --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-primary); - --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-primary); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary); } .badge-secondary { --pgn-badge-color: var(--pgn-color-badge-text-secondary); - --pgn-badge-bg-color: var(--pgn-color-badge-bg-secondary); + --pgn-badge-bg: var(--pgn-color-badge-bg-secondary); --pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary); - --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-secondary); - --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-secondary); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary); } .badge-success { --pgn-badge-color: var(--pgn-color-badge-text-success); - --pgn-badge-bg-color: var(--pgn-color-badge-bg-success); + --pgn-badge-bg: var(--pgn-color-badge-bg-success); --pgn-badge-focus-color: var(--pgn-color-badge-focus-success); - --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-success); - --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-success); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success); } .badge-danger { --pgn-badge-color: var(--pgn-color-badge-text-danger); - --pgn-badge-bg-color: var(--pgn-color-badge-bg-danger); + --pgn-badge-bg: var(--pgn-color-badge-bg-danger); --pgn-badge-focus-color: var(--pgn-color-badge-focus-danger); - --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-danger); - --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-danger); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger); } .badge-warning { --pgn-badge-color: var(--pgn-color-badge-text-warning); - --pgn-badge-bg-color: var(--pgn-color-badge-bg-warning); + --pgn-badge-bg: var(--pgn-color-badge-bg-warning); --pgn-badge-focus-color: var(--pgn-color-badge-focus-warning); - --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-warning); - --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-warning); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning); } .badge-info { --pgn-badge-color: var(--pgn-color-badge-text-info); - --pgn-badge-bg-color: var(--pgn-color-badge-bg-info); + --pgn-badge-bg: var(--pgn-color-badge-bg-info); --pgn-badge-focus-color: var(--pgn-color-badge-focus-info); - --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-info); - --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-info); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info); } .badge-light { --pgn-badge-color: var(--pgn-color-badge-text-light); - --pgn-badge-bg-color: var(--pgn-color-badge-bg-light); + --pgn-badge-bg: var(--pgn-color-badge-bg-light); --pgn-badge-focus-color: var(--pgn-color-badge-focus-light); - --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-light); - --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-light); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light); } .badge-dark { --pgn-badge-color: var(--pgn-color-badge-text-dark); - --pgn-badge-bg-color: var(--pgn-color-badge-bg-dark); + --pgn-badge-bg: var(--pgn-color-badge-bg-dark); --pgn-badge-focus-color: var(--pgn-color-badge-focus-dark); - --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-dark); - --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-dark); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark); } diff --git a/src/Button/Button.scss b/src/Button/Button.scss index 6ae8af859b5..f7ca9fdac14 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -187,7 +187,7 @@ fieldset:disabled a.btn { } .btn-inline { - line-height: calc(#{$line-height-base}em - 2 * #{var(--pgn-size-btn-border-width)}); + line-height: calc(#{$line-height-base}em - 2 * var(--pgn-size-btn-border-width)); font-size: inherit; vertical-align: bottom; padding: 0 .25em; diff --git a/src/Form/_bootstrap-forms.scss b/src/Form/_bootstrap-forms.scss index 2090c34f932..a4b165cad4b 100644 --- a/src/Form/_bootstrap-forms.scss +++ b/src/Form/_bootstrap-forms.scss @@ -275,17 +275,24 @@ textarea.form-control { // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for // server side validation. -@each $state, $data in $form-validation-states { - @include form-validation-state( - $state, - map-get($data, color), - map-get($data, icon), - map-get($data, tooltip-color), - map-get($data, tooltip-bg), - map-get($data, focus-box-shadow-color), - map-get($data, checked-color) - ); -} +@include form-validation-state( + "valid", + var(--pgn-color-form-feedback-valid), + var(--pgn-other-content-form-feedback-icon-valid), + var(--pgn-color-form-feedback-tooltip-valid), + var(--pgn-color-form-feedback-tooltip-bg-valid), + var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid), + var(--pgn-color-form-feedback-checked-valid), +); +@include form-validation-state( + "invalid", + var(--pgn-color-form-feedback-invalid), + var(--pgn-other-content-form-feedback-icon-invalid), + var(--pgn-color-form-feedback-tooltip-bg-invalid), + transparent, + var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid), + var(--pgn-color-form-feedback-checked-invalid), +); // Inline forms // diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index aa44d3e6f63..b49ecfb3de4 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -1,27 +1,4 @@ -// This variable has connected with the brand variable. +// This variable has connected with the Brand variable. $input-focus-width: var(--pgn-size-form-input-width-focus) !default; -// This variable has connected with the brand variable. +// This variable has connected with the Brand variable. $custom-select-indicator: var(--pgn-other-content-form-control-select-indicator-icon) !default; - -$form-validation-states: () !default; -// stylelint-disable-next-line scss/dollar-variable-default -$form-validation-states: map-merge( - ( - "valid": ( - "color": var(--pgn-color-form-feedback-valid), - "icon": var(--pgn-other-content-form-feedback-icon-valid), - "tooltip-color": var(--pgn-color-form-feedback-tooltip-valid), - "tooltip-bg": var(--pgn-color-form-feedback-tooltip-bg-valid), - "focus-box-shadow-color": var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid), - "checked-color": var(--pgn-color-form-feedback-checked-valid) - ), - "invalid": ( - "color": var(--pgn-color-form-feedback-invalid), - "icon": var(--pgn-other-content-form-feedback-icon-invalid), - "tooltip-bg": var(--pgn-color-form-feedback-tooltip-bg-invalid), - "focus-box-shadow-color": var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid), - "checked-color": var(--pgn-color-form-feedback-checked-invalid) - ), - ), - $form-validation-states -); diff --git a/src/PageBanner/PageBanner.scss b/src/PageBanner/PageBanner.scss index 8abfddbd7fb..eb8cd83c9ff 100644 --- a/src/PageBanner/PageBanner.scss +++ b/src/PageBanner/PageBanner.scss @@ -1,46 +1,43 @@ -// stylelint-disable-next-line selector-class-pattern +// stylelint-disable selector-class-pattern .pgn__pageBanner-component { width: 100%; min-height: 36px; display: flex; flex-wrap: nowrap; font-size: $x-small-font-size; + background-color: var(--pgn-page-baner-bg, inherit); + color: var(--pgn-page-baner-color, inherit); @include media-breakpoint-up(md) { font-size: $small-font-size; } } -// stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__dark { - background-color: $dark-500; - color: $white; + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-dark); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-dark); } -// stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__light { - background-color: $light-400; - color: $black; + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-light); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-light); } -// stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__accentA { - background-color: $accent-a; - color: $black; + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-a); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-a); } -// stylelint-disable-next-line selector-class-pattern + .pgn__pageBanner__accentB { - background-color: $accent-b; - color: $black; + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-b); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-b); } -// stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__warning { - background-color: $warning-100; - color: $black; + --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-warning); + --pgn-page-baner-color: var(--pgn-color-page-banner-text-warning); } -// stylelint-disable-next-line selector-class-pattern .pgn__pageBanner-content { display: flex; flex-grow: 1; @@ -50,7 +47,6 @@ text-align: center; } -// stylelint-disable-next-line selector-class-pattern .pgn__pageBanner-dismissButtonContainer { min-width: 32px; min-height: 32px; diff --git a/src/Popover/Popover.scss b/src/Popover/Popover.scss index f5d7e7b950f..8296e22bf2e 100644 --- a/src/Popover/Popover.scss +++ b/src/Popover/Popover.scss @@ -1,5 +1,15 @@ @import "popover-bootstrap"; +@mixin popover-header-and-icon($header-bg, $icon-color) { + .popover-header { + background: $header-bg; + } + + .pgn__icon { + color: $icon-color; + } +} + .popover { filter: var(--pgn-elevation-popover-box-shadow); @@ -19,35 +29,26 @@ .popover-success { background: var(--pgn-color-popover-success-bg); - .popover-header { - background: var(--pgn-color-popover-success-bg); - } - - .pgn__icon { - color: var(--pgn-color-popover-success-icon); - } + @include popover-header-and-icon( + var(--pgn-color-popover-success-bg), + var(--pgn-color-popover-success-icon) + ); } .popover-warning { background: var(--pgn-color-popover-warning-bg); - .popover-header { - background: var(--pgn-color-popover-warning-bg); - } - - .pgn__icon { - color: var(--pgn-color-popover-warning-icon); - } + @include popover-header-and-icon( + var(--pgn-color-popover-warning-bg), + var(--pgn-color-popover-warning-icon) + ); } .popover-danger { background: var(--pgn-color-popover-danger-bg); - .popover-header { - background: var(--pgn-color-popover-danger-bg); - } - - .pgn__icon { - color: var(--pgn-color-popover-danger-icon); - } + @include popover-header-and-icon( + var(--pgn-color-popover-danger-bg), + var(--pgn-color-popover-danger-icon) + ); } diff --git a/src/ProgressBar/ProgressBar.scss b/src/ProgressBar/ProgressBar.scss index 7eb2aad7afe..2d1951aaa67 100644 --- a/src/ProgressBar/ProgressBar.scss +++ b/src/ProgressBar/ProgressBar.scss @@ -1,4 +1,5 @@ @import "bootstrap-progress"; +@import "mixins"; .progress { border: var(--pgn-size-progress-bar-border-width) solid var(--pgn-color-progress-bar-border); @@ -43,83 +44,19 @@ } .pgn__progress-bar--dark { - background-color: var(--pgn-color-primary-500); - - &::after { - content: ""; - display: block; - background: var(--pgn-color-primary-500); - position: absolute; - top: - calc( - var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2 - ); - right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); - width: var(--pgn-size-progress-bar-threshold-circle); - height: var(--pgn-size-progress-bar-threshold-circle); - border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); - z-index: 1; - } + @include progress-bar-variant(var(--pgn-color-primary-500)); } .pgn__progress-bar--success { - background-color: var(--pgn-color-success-500); - - &::after { - content: ""; - display: block; - background: var(--pgn-color-success-500); - position: absolute; - top: - calc( - var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2 - ); - right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); - width: var(--pgn-size-progress-bar-threshold-circle); - height: var(--pgn-size-progress-bar-threshold-circle); - border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); - z-index: 1; - } + @include progress-bar-variant(var(--pgn-color-success-500)); } .pgn__progress-bar--error { - background-color: var(--pgn-color-danger-500); - - &::after { - content: ""; - display: block; - background: var(--pgn-color-danger-500); - position: absolute; - top: - calc( - var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2 - ); - right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); - width: var(--pgn-size-progress-bar-threshold-circle); - height: var(--pgn-size-progress-bar-threshold-circle); - border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); - z-index: 1; - } + @include progress-bar-variant(var(--pgn-color-danger-500)); } .pgn__progress-bar--warning { - background-color: var(--pgn-color-accent-b); - - &::after { - content: ""; - display: block; - background: var(--pgn-color-accent-b); - position: absolute; - top: - calc( - var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2 - ); - right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); - width: var(--pgn-size-progress-bar-threshold-circle); - height: var(--pgn-size-progress-bar-threshold-circle); - border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); - z-index: 1; - } + @include progress-bar-variant(var(--pgn-color-accent-b)); } } diff --git a/src/ProgressBar/_mixins.scss b/src/ProgressBar/_mixins.scss new file mode 100644 index 00000000000..1be47e33b45 --- /dev/null +++ b/src/ProgressBar/_mixins.scss @@ -0,0 +1,20 @@ +@mixin progress-bar-variant($bg) { + background-color: $bg; + + &::after { + content: ""; + display: block; + background: $bg; + position: absolute; + top: + calc( + // stylelint-disable-next-line max-line-length + var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2 + ); + right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2); + width: var(--pgn-size-progress-bar-threshold-circle); + height: var(--pgn-size-progress-bar-threshold-circle); + border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2); + z-index: 1; + } +} diff --git a/src/Tooltip/Tooltip.scss b/src/Tooltip/Tooltip.scss index 1242dec218f..6f7ca708334 100644 --- a/src/Tooltip/Tooltip.scss +++ b/src/Tooltip/Tooltip.scss @@ -13,7 +13,9 @@ opacity: 0; filter: var(--pgn-elevation-tooltip-box-shadow); - &.show { opacity: var(--pgn-other-tooltip-opacity); } + &.show { + opacity: var(--pgn-other-tooltip-opacity); + } .arrow { position: absolute; diff --git a/tokens/src/themes/light/components/PageBanner.json b/tokens/src/themes/light/components/PageBanner.json new file mode 100644 index 00000000000..6d520cbee96 --- /dev/null +++ b/tokens/src/themes/light/components/PageBanner.json @@ -0,0 +1,24 @@ +{ + "color": { + "page-banner": { + "bg": { + "dark": { "value": "{color.dark.500}", "type": "color" }, + "light": { "value": "{color.light.400}", "type": "color" }, + "accent": { + "a": { "value": "{color.accent.a}", "type": "color" }, + "b": { "value": "{color.accent.b}", "type": "color" } + }, + "warning": { "value": "{color.warning.100}", "type": "color" } + }, + "text": { + "dark": { "value": "{color.white}", "type": "color" }, + "light": { "value": "{color.black}", "type": "color" }, + "accent": { + "a": { "value": "{color.black}", "type": "color" }, + "b": { "value": "{color.black}", "type": "color" } + }, + "warning": { "value": "{color.black}", "type": "color" } + } + } + } +}