Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BD-46] refactor: refactoring buttons and box-shadows #82

Open
wants to merge 4 commits into
base: alpha
Choose a base branch
from
Open

[BD-46] refactor: refactoring buttons and box-shadows #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b0e6d6
refactor: refactoring buttons variants
PKulkoRaccoonGang Jul 27, 2023
967a5e2
refactor: refactoring form-feedback messages
PKulkoRaccoonGang Aug 10, 2023
ea56aba
refactor: added box-shadows
PKulkoRaccoonGang Aug 25, 2023
1d9350c
refactor: deleted Image box-shadow token
PKulkoRaccoonGang Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
325 changes: 87 additions & 238 deletions paragon/_overrides.scss
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion paragon/css/core/custom-media-breakpoints.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Sun, 23 Jul 2023 16:09:04 GMT
* Generated on Fri, 25 Aug 2023 10:06:17 GMT
*/

114 changes: 53 additions & 61 deletions paragon/css/themes/light/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Sun, 23 Jul 2023 16:09:04 GMT
* Generated on Wed, 27 Dec 2023 09:23:32 GMT
*/

:root {
Expand Down Expand Up @@ -52,6 +52,7 @@
--pgn-color-btn-disabled-border-inverse-success: #00000000;
--pgn-color-btn-disabled-border-inverse-light: #00000000;
--pgn-color-btn-disabled-border-inverse-dark: #00000000;
--pgn-color-btn-focus-bg-inverse-outline-brand: #00000000;
--pgn-color-btn-border-warning: #00000000;
--pgn-color-btn-border-secondary: #00000000;
--pgn-color-btn-border-info: #00000000;
Expand All @@ -62,12 +63,16 @@
--pgn-elevation-box-shadow-level-3: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15);
--pgn-elevation-box-shadow-level-2: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
--pgn-elevation-box-shadow-level-1: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15);
--pgn-elevation-image-thumbnail-box-shadow: none;
--pgn-elevation-form-input-base: none;
--pgn-elevation-form-control-select-border-base: inset 0 1px 2px rgba(0, 0, 0, .075);
--pgn-elevation-form-control-range-thumb-base: 0 .1rem .25rem rgba(0, 0, 0, .1);
--pgn-elevation-form-control-range-track: inset 0 .25rem .25rem rgba(0, 0, 0, .1);
--pgn-elevation-form-input-base: inset 0 1px 1px rgba(0, 0, 0, .075);
--pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
--pgn-color-info-base: #00688DFF;
--pgn-color-tooltip-bg-base: #00262BFF;
--pgn-color-tooltip-light: #00262BFF;
--pgn-color-pagination-text-base: #00262BFF;
--pgn-color-icon-button-bg-primary-inverse-active-base: #FFFFFFFF;
--pgn-color-link-hover: #004972FF;
--pgn-color-body-bg: #FFFFFFFF;
--pgn-color-form-input-focus-bg: #FFFFFFFF;
Expand All @@ -93,42 +98,30 @@
--pgn-color-btn-disabled-text-inverse-danger: #AB0D02FF;
--pgn-color-btn-disabled-text-outline-danger: #AB0D02FF;
--pgn-color-btn-disabled-text-inverse-outline-brand: #F2F0EFFF;
--pgn-color-btn-disabled-text-outline-brand: #D23228FF;
--pgn-color-btn-disabled-text-inverse-brand: #FFFFFFFF;
--pgn-color-btn-focus-outline-inverse-outline-primary: #FFFFFFFF;
--pgn-color-btn-focus-outline-inverse-primary: #FFFFFFFF;
--pgn-color-btn-focus-outline-inverse-outline-brand: #FFFFFFFF;
--pgn-color-btn-focus-outline-inverse-brand: #FFFFFFFF;
--pgn-color-btn-focus-outline-inverse-brand: #D23228FF;
--pgn-color-btn-focus-outline-outline-brand: #D23228FF;
--pgn-color-btn-focus-outline-brand: #D23228FF;
--pgn-color-btn-focus-bg-outline-warning: #FFFFFFFF;
--pgn-color-btn-focus-bg-inverse-success: #FFFFFFFF;
--pgn-color-btn-focus-bg-inverse-secondary: #FFFFFFFF;
--pgn-color-btn-focus-bg-secondary: #454545FF;
--pgn-color-btn-focus-bg-inverse-primary: #2D494EFF;
--pgn-color-btn-focus-bg-outline-primary: #00262BFF;
--pgn-color-btn-focus-bg-outline-success: #FFFFFFFF;
--pgn-color-btn-focus-bg-inverse-info: #FFFFFFFF;
--pgn-color-btn-focus-bg-outline-info: #FFFFFFFF;
--pgn-color-btn-focus-bg-inverse-dark: #FFFFFFFF;
--pgn-color-btn-focus-bg-dark: #00262BFF;
--pgn-color-btn-focus-bg-inverse-danger: #EBEBEBFF;
--pgn-color-btn-focus-bg-outline-dark: #FFFFFFFF;
--pgn-color-btn-focus-bg-outline-danger: #FFFFFFFF;
--pgn-color-btn-focus-bg-danger: #AB0D02FF;
--pgn-color-btn-focus-bg-inverse-outline-brand: #D23228FF;
--pgn-color-btn-focus-bg-outline-brand: #D23228FF;
--pgn-color-btn-focus-bg-inverse-brand: #921108FF;
--pgn-color-btn-focus-bg-outline-brand: #FFFFFFFF;
--pgn-color-btn-focus-bg-inverse-brand: #D23228FF;
--pgn-color-btn-focus-bg-brand: #D23228FF;
--pgn-color-btn-focus-border-inverse-primary: #2D494EFF;
--pgn-color-btn-focus-border-outline-primary: #00262BFF;
--pgn-color-btn-focus-text-outline-warning: #FFFFFFFF;
--pgn-color-btn-focus-text-outline-success: #FFFFFFFF;
--pgn-color-btn-focus-text-outline-secondary: #FFFFFFFF;
--pgn-color-btn-focus-text-inverse-secondary: #454545FF;
--pgn-color-btn-focus-text-inverse-outline-primary: #00262BFF;
--pgn-color-btn-focus-text-inverse-primary: #FFFFFFFF;
--pgn-color-btn-focus-text-outline-primary: #FFFFFFFF;
--pgn-color-btn-focus-text-outline-light: #FFFFFFFF;
--pgn-color-btn-focus-border-inverse-outline-brand: #FFFFFFFF;
--pgn-color-btn-focus-text-inverse-outline-info: #FFFFFFFF;
--pgn-color-btn-focus-text-outline-info: #FFFFFFFF;
--pgn-color-btn-focus-text-outline-dark: #FFFFFFFF;
--pgn-color-btn-focus-text-inverse-dark: #00262BFF;
--pgn-color-btn-focus-text-outline-danger: #FFFFFFFF;
--pgn-color-btn-focus-text-inverse-danger: #AB0D02FF;
--pgn-color-btn-focus-text-outline-brand: #FFFFFFFF;
--pgn-color-btn-focus-text-outline-brand: #D23228FF;
--pgn-color-btn-focus-text-inverse-brand: #FFFFFFFF;
--pgn-color-btn-active-border-outline-warning: #F0CC00FF;
--pgn-color-btn-active-border-outline-info: #03C7E8FF;
Expand All @@ -143,25 +136,33 @@
--pgn-color-btn-active-bg-inverse-outline-dark: #FFFFFFFF;
--pgn-color-btn-active-bg-outline-danger: #AB0D02FF;
--pgn-color-btn-active-bg-danger: #690E07FF;
--pgn-color-btn-active-bg-inverse-brand: #921108FF;
--pgn-color-btn-active-bg-inverse-brand: #D23228FF;
--pgn-color-btn-active-text-inverse-outline-warning: #000000FF;
--pgn-color-btn-active-text-outline-warning: #FFFFFFFF;
--pgn-color-btn-active-text-warning: #FFFFFFFF;
--pgn-color-btn-active-text-inverse-outline-success: #00262BFF;
--pgn-color-btn-active-text-outline-success: #FFFFFFFF;
--pgn-color-btn-active-text-outline-secondary: #FFFFFFFF;
--pgn-color-btn-active-text-inverse-outline-primary: #00262BFF;
--pgn-color-btn-active-text-inverse-primary: #FFFFFFFF;
--pgn-color-btn-active-text-outline-primary: #FFFFFFFF;
--pgn-color-btn-active-text-inverse-outline-light: #00262BFF;
--pgn-color-btn-active-text-outline-light: #FFFFFFFF;
--pgn-color-btn-active-text-inverse-outline-info: #00262BFF;
--pgn-color-btn-active-text-outline-info: #FFFFFFFF;
--pgn-color-btn-active-text-inverse-outline-dark: #00262BFF;
--pgn-color-btn-active-text-outline-dark: #FFFFFFFF;
--pgn-color-btn-active-text-inverse-outline-danger: #00262BFF;
--pgn-color-btn-active-text-outline-danger: #FFFFFFFF;
--pgn-color-btn-active-text-inverse-outline-brand: #FFFFFFFF;
--pgn-color-btn-active-text-inverse-brand: #FFFFFFFF;
--pgn-color-btn-active-text-outline-brand: #FFFFFFFF;
--pgn-color-btn-hover-border-outline-warning: #F0CC00FF;
--pgn-color-btn-hover-border-outline-primary: #00262BFF;
--pgn-color-btn-hover-border-primary: #2D494EFF;
--pgn-color-btn-hover-border-outline-info: #03C7E8FF;
--pgn-color-btn-hover-border-outline-danger: #AB0D02FF;
--pgn-color-btn-hover-border-outline-brand: #D23228FF;
--pgn-color-btn-hover-border-brand: #921108FF;
--pgn-color-btn-hover-bg-outline-warning: #F0CC00FF;
--pgn-color-btn-hover-bg-inverse-tertiary: #2D494EFF;
--pgn-color-btn-hover-bg-outline-secondary: #454545FF;
Expand All @@ -171,9 +172,9 @@
--pgn-color-btn-hover-bg-outline-info: #03C7E8FF;
--pgn-color-btn-hover-bg-outline-dark: #00262BFF;
--pgn-color-btn-hover-bg-outline-danger: #AB0D02FF;
--pgn-color-btn-hover-bg-inverse-outline-brand: #D23228FF;
--pgn-color-btn-hover-bg-outline-brand: #D23228FF;
--pgn-color-btn-hover-bg-inverse-brand: #921108FF;
--pgn-color-btn-hover-text-outline-warning: #FFFFFFFF;
--pgn-color-btn-hover-text-warning: #FFFFFFFF;
--pgn-color-btn-hover-text-outline-success: #FFFFFFFF;
--pgn-color-btn-hover-text-outline-secondary: #FFFFFFFF;
--pgn-color-btn-hover-text-inverse-primary: #FFFFFFFF;
Expand All @@ -183,10 +184,10 @@
--pgn-color-btn-hover-text-outline-dark: #FFFFFFFF;
--pgn-color-btn-hover-text-outline-danger: #FFFFFFFF;
--pgn-color-btn-hover-text-inverse-outline-brand: #FFFFFFFF;
--pgn-color-btn-hover-text-inverse-brand: #FFFFFFFF;
--pgn-color-btn-hover-text-outline-brand: #FFFFFFFF;
--pgn-color-btn-border-outline-warning: #F2F0EFFF;
--pgn-color-btn-border-outline-success: #F2F0EFFF;
--pgn-color-btn-border-success: #F2F0EFFF;
--pgn-color-btn-border-outline-secondary: #F2F0EFFF;
--pgn-color-btn-border-outline-primary: #F2F0EFFF;
--pgn-color-btn-border-outline-light: #F2F0EFFF;
Expand All @@ -197,13 +198,17 @@
--pgn-color-btn-border-outline-brand: #F2F0EFFF;
--pgn-color-btn-bg-inverse-warning: #000000FF;
--pgn-color-btn-bg-warning: #F0CC00FF;
--pgn-color-btn-bg-outline-success: #FFFFFFFF;
--pgn-color-btn-bg-outline-secondary: #FFFFFFFF;
--pgn-color-btn-bg-inverse-primary: #FFFFFFFF;
--pgn-color-btn-bg-outline-primary: #FFFFFFFF;
--pgn-color-btn-bg-outline-light: #FFFFFFFF;
--pgn-color-btn-bg-inverse-light: #000000FF;
--pgn-color-btn-bg-outline-info: #FFFFFFFF;
--pgn-color-btn-bg-info: #03C7E8FF;
--pgn-color-btn-bg-inverse-brand: #D23228FF;
--pgn-color-btn-bg-outline-dark: #FFFFFFFF;
--pgn-color-btn-bg-outline-danger: #FFFFFFFF;
--pgn-color-btn-bg-outline-brand: #FFFFFFFF;
--pgn-color-btn-text-warning: #000000FF;
--pgn-color-btn-text-light: #000000FF;
--pgn-color-btn-text-inverse-info: #03C7E8FF;
Expand All @@ -229,6 +234,8 @@
--pgn-elevation-box-shadow-sm: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15);
--pgn-elevation-box-shadow-base: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
--pgn-elevation-toast-box-shadow: 0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15);
--pgn-elevation-form-control-select-border-focus: inset 0 1px 2px rgba(0, 0, 0, .075);
--pgn-elevation-form-control-indicator-checked-focus: inset 0 1px 1px rgba(0, 0, 0, .075);
--pgn-elevation-popover-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
--pgn-elevation-modal-content-box-shadow-sm-up: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15);
--pgn-elevation-dropdown-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
Expand All @@ -238,65 +245,50 @@
--pgn-color-form-input-base: #454545FF;
--pgn-color-btn-disabled-border-outline-primary: #F2F0EFFF;
--pgn-color-btn-disabled-border-outline-light: #F2F0EFFF;
--pgn-color-btn-disabled-border-inverse-brand: #D23228FF;
--pgn-color-btn-disabled-bg-light: #E1DDDBFF;
--pgn-color-btn-disabled-bg-inverse-brand: #D23228FF;
--pgn-color-btn-disabled-text-outline-light: #E1DDDBFF;
--pgn-color-btn-disabled-text-inverse-info: #03C7E8FF;
--pgn-color-btn-disabled-text-outline-dark: #00262BFF;
--pgn-color-btn-focus-bg-inverse-warning: #000000FF;
--pgn-color-btn-focus-bg-outline-warning: #F0CC00FF;
--pgn-color-btn-focus-bg-warning: #F0CC00FF;
--pgn-color-btn-focus-bg-outline-secondary: #454545FF;
--pgn-color-btn-focus-bg-inverse-outline-primary: #FFFFFFFF;
--pgn-color-btn-focus-bg-primary: #2D494EFF;
--pgn-color-btn-disabled-text-outline-brand: #D23228FF;
--pgn-color-btn-focus-outline-outline-light: #E1DDDBFF;
--pgn-color-btn-focus-bg-inverse-light: #000000FF;
--pgn-color-btn-focus-bg-outline-light: #E1DDDBFF;
--pgn-color-btn-focus-bg-light: #E1DDDBFF;
--pgn-color-btn-focus-bg-outline-info: #03C7E8FF;
--pgn-color-btn-focus-bg-info: #03C7E8FF;
--pgn-color-btn-focus-bg-outline-dark: #00262BFF;
--pgn-color-btn-focus-bg-outline-danger: #AB0D02FF;
--pgn-color-btn-focus-border-outline-secondary: #454545FF;
--pgn-color-btn-focus-border-inverse-outline-primary: #FFFFFFFF;
--pgn-color-btn-focus-border-primary: #2D494EFF;
--pgn-color-btn-focus-border-inverse-outline-brand: #D23228FF;
--pgn-color-btn-focus-border-inverse-brand: #921108FF;
--pgn-color-btn-focus-border-outline-brand: #D23228FF;
--pgn-color-btn-focus-text-warning: #000000FF;
--pgn-color-btn-focus-border-inverse-brand: #D23228FF;
--pgn-color-btn-focus-border-outline-brand: #F2F0EFFF;
--pgn-color-btn-focus-text-tertiary: #454545FF;
--pgn-color-btn-focus-text-light: #000000FF;
--pgn-color-btn-active-border-outline-success: #0D7D4DFF;
--pgn-color-btn-active-border-outline-secondary: #454545FF;
--pgn-color-btn-active-border-outline-light: #E1DDDBFF;
--pgn-color-btn-active-border-danger: #690E07FF;
--pgn-color-btn-active-border-brand: #93231CFF;
--pgn-color-btn-active-bg-outline-success: #0D7D4DFF;
--pgn-color-btn-active-bg-inverse-outline-light: #FDFDFDFF;
--pgn-color-btn-active-bg-brand: #93231CFF;
--pgn-color-btn-active-text-light: #000000FF;
--pgn-color-btn-hover-border-outline-success: #0D7D4DFF;
--pgn-color-btn-hover-border-outline-light: #E1DDDBFF;
--pgn-color-btn-hover-bg-outline-success: #0D7D4DFF;
--pgn-color-btn-hover-bg-inverse-outline-primary: #FFFFFFFF;
--pgn-color-btn-hover-bg-outline-light: #E1DDDBFF;
--pgn-color-btn-hover-bg-inverse-outline-brand: #D23228FF;
--pgn-color-btn-hover-bg-outline-brand: #D23228FF;
--pgn-color-btn-hover-text-light: #000000FF;
--pgn-color-btn-border-inverse-outline-primary: #707070FF;
--pgn-color-btn-bg-inverse-brand: #D23228FF;
--pgn-color-input-btn-focus: #00262BFF;
--pgn-elevation-form-input-focus: 0 0 0 1px #00262BFF;
--pgn-color-btn-disabled-border-inverse-outline-primary: #707070FF;
--pgn-color-btn-disabled-text-inverse-warning: #D6B600FF;
--pgn-color-btn-disabled-text-outline-warning: #D6B600FF;
--pgn-color-btn-disabled-text-inverse-success: #0D7D4DFF;
--pgn-color-btn-disabled-text-outline-success: #0D7D4DFF;
--pgn-color-btn-focus-outline-outline-light: #E1DDDBFF;
--pgn-color-btn-focus-bg-outline-success: #0D7D4DFF;
--pgn-color-btn-focus-bg-success: #0D7D4DFF;
--pgn-color-btn-focus-border-outline-warning: #F0CC00FF;
--pgn-color-btn-focus-border-outline-light: #E1DDDBFF;
--pgn-color-btn-focus-border-light: #E1DDDBFF;
--pgn-color-btn-focus-border-outline-info: #03C7E8FF;
--pgn-color-btn-focus-border-outline-dark: #00262BFF;
--pgn-color-btn-focus-border-outline-danger: #AB0D02FF;
--pgn-color-btn-focus-text-inverse-warning: #D6B600FF;
--pgn-color-btn-focus-text-inverse-success: #0D7D4DFF;
--pgn-color-theme-focus-secondary: #373737FF;
--pgn-color-btn-focus-border-outline-success: #0D7D4DFF;
--pgn-color-btn-focus-border-success: #0D7D4DFF;
--pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23AB0D02FF' viewBox='2 2 20 20'%3e%3cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M13.25,15.5 L10.75,15.5 C10.6119288,15.5 10.5,15.6119288 10.5,15.75 L10.5,15.75 L10.5,18.25 C10.5,18.3880712 10.6119288,18.5 10.75,18.5 L10.75,18.5 L13.25,18.5 C13.3880712,18.5 13.5,18.3880712 13.5,18.25 L13.5,18.25 L13.5,15.75 C13.5,15.6119288 13.3880712,15.5 13.25,15.5 L13.25,15.5 Z M13.492539,5.5 L10.5001113,5.50010806 C10.3620998,5.50416722 10.2535099,5.61933826 10.2575691,5.75734976 L10.2575691,5.75734976 L10.4928632,13.7573498 C10.4968382,13.8925005 10.607546,14 10.7427552,14 L10.7427552,14 L13.2572448,14 C13.392454,14 13.5031618,13.8925005 13.5071368,13.7573498 L13.5071368,13.7573498 L13.7424309,5.75734976 L13.7424309,5.75734976 C13.742539,5.61192881 13.6306101,5.5 13.492539,5.5 L13.492539,5.5 Z' /%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='2 2 20 20'%3e%3cpath fill='%230D7D4DFF' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M17.5208153,8.03553391 L10.4497475,15.1066017 L6.91421356,11.5710678 L5.5,12.9852814 L10.4497475,17.9350288 L18.9350288,9.44974747 L17.5208153,8.03553391 Z'/%3e%3c/svg%3e");
Expand Down
43 changes: 28 additions & 15 deletions tokens/src/themes/light/components/Button/brand.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"inverse-brand": { "value": "{color.white}" }
},
"bg": {
"inverse-brand": { "value": "{color.brand.base}", "modify": null }
"outline-brand": { "value": "{color.white}" },
"inverse-brand": { "value": "{color.brand.500}", "modify": null }
},
"border": {
"brand": { "value": "transparent" },
Expand All @@ -14,57 +15,69 @@
},
"hover": {
"text": {
"inverse-brand": { "value": "{color.white}", "modify": null },
"outline-brand": { "value": "{color.white}" },
"inverse-outline-brand": { "value": "{color.white}" }
},
"bg": {
"outline-brand": { "value": "{color.brand.base}" },
"inverse-outline-brand": { "value": "{color.brand.base}" }
"inverse-brand": { "value": "{color.brand.700}", "modify": null },
"outline-brand": { "value": "{color.brand.500}" },
"inverse-outline-brand": { "value": "{color.brand.500}" }
},
"border": {
"brand": { "value": "{color.brand.700}" },
"outline-brand": { "value": "{color.brand.base}" }
}
},
"active": {
"text": {
"inverse-brand": { "modify": null }
"outline-brand": { "value": "{color.white}", "modify": null },
"inverse-brand": { "value": "{color.white}", "modify": null },
"inverse-outline-brand": { "value": "{color.white}", "modify": null }
},
"border": {
"brand": { "value": "{color.brand.900}" },
"outline-brand": { "value": "{color.brand.base}" }
},
"bg": {
"inverse-brand": { "value": "{color.brand.700}" }
"brand": { "value": "{color.brand.900}" },
"inverse-brand": { "value": "{color.brand.base}" }
}
},
"focus": {
"text": {
"inverse-brand": { "value": "{color.white}" },
"outline-brand": { "value": "{color.white}" }
"outline-brand": { "value": "{color.brand.base}" }
},
"bg": {
"brand": { "value": "{color.brand.base}" },
"inverse-brand": { "value": "{color.brand.700}" },
"outline-brand": { "value": "{color.brand.base}" },
"inverse-outline-brand": { "value": "{color.brand.base}" }
"inverse-brand": { "value": "{color.brand.base}" },
"outline-brand": { "value": "{color.white}" },
"inverse-outline-brand": { "value": "transparent" }
},
"border": {
"outline-brand": { "value": "{color.btn.focus.bg.outline-brand}" },
"outline-brand": { "value": "{color.btn.border.outline-brand}" },
"inverse-brand": { "value": "{color.btn.focus.bg.inverse-brand}" },
"inverse-outline-brand": { "value": "{color.btn.focus.bg.inverse-outline-brand}" }
"inverse-outline-brand": { "value": "{color.white}" }
},
"outline": {
"inverse-brand": { "value": "{color.white}" },
"brand": { "value": "{color.brand.base}" },
"outline-brand": { "value": "{color.brand.base}" },
"inverse-brand": { "value": "{color.brand.base}" },
"inverse-outline-brand": { "value": "{color.white}" }
}
},
"disabled": {
"text": {
"outline-brand": { "value": "{color.brand.base}" },
"outline-brand": { "value": "{color.brand.500}" },
"inverse-brand": { "value": "{color.white}" },
"inverse-outline-brand": { "value": "{color.light.300}" }
},
"border": {
"outline-brand": { "value": "{color.light.300}" }
"outline-brand": { "value": "{color.light.300}" },
"inverse-brand": { "value": "{color.brand.500}" }
},
"bg": {
"inverse-brand": { "value": "{color.brand.500}" }
}
}
}
Expand Down
Loading
Loading