From 67ba361370d544f054795cb4d7f8826eede6533b Mon Sep 17 00:00:00 2001 From: jbpenrath Date: Mon, 8 Dec 2025 14:29:52 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20homegenize=20form=20input?= =?UTF-8?q?s=20states?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently between all components some states were not aligned (error, success, hover, focus,...) --- .changeset/evil-showers-crash.md | 5 + .../react/src/components/Button/_index.scss | 12 +- .../react/src/components/Button/index.tsx | 3 - .../react/src/components/Button/tokens.ts | 3 +- .../src/components/Forms/Checkbox/_index.scss | 67 ++- .../src/components/Forms/Checkbox/tokens.ts | 17 +- .../components/Forms/DatePicker/_index.scss | 70 +-- .../src/components/Forms/DatePicker/tokens.ts | 8 +- .../src/components/Forms/Field/_index.scss | 3 +- .../src/components/Forms/Input/_index.scss | 37 +- .../components/Forms/Input/index.stories.tsx | 10 + .../src/components/Forms/Radio/_index.scss | 31 +- .../src/components/Forms/Radio/tokens.ts | 13 +- .../src/components/Forms/Select/_index.scss | 6 + .../src/components/Forms/Select/tokens.ts | 11 +- .../src/components/Forms/TextArea/index.scss | 37 +- .../src/components/Forms/TextArea/tokens.ts | 7 +- packages/react/src/cunningham-tokens.css | 408 +++++-------- packages/react/src/cunningham-tokens.js | 2 +- packages/react/src/cunningham-tokens.scss | 558 +++++++----------- packages/react/src/cunningham-tokens.ts | 2 +- 21 files changed, 540 insertions(+), 770 deletions(-) create mode 100644 .changeset/evil-showers-crash.md diff --git a/.changeset/evil-showers-crash.md b/.changeset/evil-showers-crash.md new file mode 100644 index 0000000..5c161b1 --- /dev/null +++ b/.changeset/evil-showers-crash.md @@ -0,0 +1,5 @@ +--- +"@gouvfr-lasuite/cunningham-react": minor +--- + +Fix a11y issues and improve input states consistency diff --git a/packages/react/src/components/Button/_index.scss b/packages/react/src/components/Button/_index.scss index 65e46e7..83b4bc8 100644 --- a/packages/react/src/components/Button/_index.scss +++ b/packages/react/src/components/Button/_index.scss @@ -1,7 +1,7 @@ @mixin button-variant($context) { white-space: nowrap; &:hover, - &:focus-visible { + &:focus-visible { border-radius: var(--c--components--button--border-radius--focus); } @@ -19,9 +19,9 @@ background-color: var( --c--contextuals--background--semantic--#{$context}--primary-hover ); - + } - + &:disabled { background-color: var(--c--contextuals--background--semantic--disabled--primary); color: var(--c--contextuals--content--semantic--disabled--primary); @@ -43,7 +43,7 @@ --c--contextuals--background--semantic--#{$context}--secondary-hover ); } - + &:disabled { background-color: var(--c--contextuals--background--semantic--disabled--secondary); color: var(--c--contextuals--content--semantic--disabled--primary); @@ -113,10 +113,6 @@ align-items: center; } - &--text { - font-weight: var(--c--components--button--text-font-weight); - } - &--full-width { width: 100%; justify-content: center; diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx index 04c9fb4..6272caf 100644 --- a/packages/react/src/components/Button/index.tsx +++ b/packages/react/src/components/Button/index.tsx @@ -60,9 +60,6 @@ export const Button = ({ if (fullWidth) { classes.push("c__button--full-width"); } - if (["primary-text", "tertiary-text"].includes(variant)) { - classes.push("c__button--text"); - } if (props.href && props.disabled) { classes.push("c__button--disabled"); } diff --git a/packages/react/src/components/Button/tokens.ts b/packages/react/src/components/Button/tokens.ts index 802fa88..2db7161 100644 --- a/packages/react/src/components/Button/tokens.ts +++ b/packages/react/src/components/Button/tokens.ts @@ -15,8 +15,7 @@ export const tokens = (defaults: DefaultTokens) => { "small-icon-font-size": defaults.globals.font.sizes.md, "nano-font-size": defaults.globals.font.sizes.xs, "nano-icon-font-size": defaults.globals.font.sizes.md, - "font-weight": defaults.globals.font.weights.regular, + "font-weight": defaults.globals.font.weights.medium, "font-family": defaults.globals.font.families.base, - "text-font-weight": defaults.globals.font.weights.medium, }; }; diff --git a/packages/react/src/components/Forms/Checkbox/_index.scss b/packages/react/src/components/Forms/Checkbox/_index.scss index 49facfc..83c3678 100644 --- a/packages/react/src/components/Forms/Checkbox/_index.scss +++ b/packages/react/src/components/Forms/Checkbox/_index.scss @@ -23,11 +23,14 @@ margin-left: -1 * $padding; cursor: pointer; - - &:focus-within { outline: 0; border-color: var(--c--contextuals--border--semantic--brand--primary); + box-shadow: 0 0 0 1px var(--c--contextuals--border--semantic--brand--primary); + } + + &--disabled { + pointer-events: none; } &__container { @@ -53,13 +56,25 @@ background-color: var(--c--components--forms-checkbox--background-color); width: var(--c--components--forms-checkbox--size); height: var(--c--components--forms-checkbox--size); - border: 1.5px solid var(--c--components--forms-checkbox--border-color); + border: var(--c--components--forms-checkbox--border-width) solid var(--c--components--forms-checkbox--border-color); border-radius: var(--c--components--forms-checkbox--border-radius); display: block; cursor: pointer; + transition: + border var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out), + box-shadow var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out); + + &:hover { + border-color: var(--c--components--forms-checkbox--border-color--hover); + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--border-color--hover); + } &:focus { outline: none; + border-color: var(--c--components--forms-checkbox--border-color--focus); + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--border-color--focus); } &:not(:checked) { @@ -73,10 +88,10 @@ &:checked { background-color: var( - --c--components--forms-checkbox--background-color--checked + --c--components--forms-checkbox--accent-color ); border-color: var( - --c--components--forms-checkbox--background-color--checked + --c--components--forms-checkbox--accent-color ); ~ .checkmark { clip-path: $clipPathShow; @@ -84,14 +99,24 @@ ~ .indeterminate { clip-path: $clipPathHide; } + + &:hover { + border-color: var(--c--components--forms-checkbox--accent-color); + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--accent-color); + } + + &:focus { + border-color: var(--c--components--forms-checkbox--accent-color); + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--accent-color); + } } &:indeterminate { background-color: var( - --c--components--forms-checkbox--background-color--indeterminate + --c--components--forms-checkbox--accent-color ); border-color: var( - --c--components--forms-checkbox--background-color--indeterminate + --c--components--forms-checkbox--accent-color ); ~ .indeterminate { clip-path: $clipPathShow; @@ -99,28 +124,32 @@ ~ .checkmark { clip-path: $clipPathHide; } + + &:hover { + border-color: var(--c--components--forms-checkbox--accent-color); + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--accent-color); + } + + &:focus { + border-color: var(--c--components--forms-checkbox--accent-color); + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--accent-color); + } } &:disabled { cursor: not-allowed !important; + svg { - color: var(--c--components--forms-checkbox--accent-color); + color: var(--c--components--forms-checkbox--checkmark-color); } &:not(:checked):not(:indeterminate) { - background-color: white; - border-color: var( - --c--components--forms-checkbox--border-color--disabled - ); + background-color: var(--c--components--forms-checkbox--background-color); } &:checked, &:indeterminate { - background-color: var( - --c--components--forms-checkbox--background-color--disabled - ); - border-color: var( - --c--components--forms-checkbox--border-color--disabled - ); + background-color: var(--c--components--forms-checkbox--accent-color--disabled); + border-color: var(--c--components--forms-checkbox--accent-color--disabled); } } } @@ -132,7 +161,7 @@ position: absolute; top: 0; left: 0; - color: var(--c--components--forms-checkbox--accent-color); + color: var(--c--components--forms-checkbox--checkmark-color); } } diff --git a/packages/react/src/components/Forms/Checkbox/tokens.ts b/packages/react/src/components/Forms/Checkbox/tokens.ts index 71c9439..24eb06e 100644 --- a/packages/react/src/components/Forms/Checkbox/tokens.ts +++ b/packages/react/src/components/Forms/Checkbox/tokens.ts @@ -8,16 +8,15 @@ export const tokens = (defaults: DefaultTokens) => ({ "font-weight": defaults.globals.font.weights.medium, color: defaults.contextuals.content.semantic.neutral.primary, "border-color": defaults.contextuals.content.semantic.neutral.tertiary, + "border-color--hover": defaults.contextuals.content.semantic.neutral.tertiary, + "border-color--focus": defaults.contextuals.content.semantic.brand.primary, "border-radius": "2px", - "accent-color": defaults.contextuals.content.semantic.contextual.primary, + "border-width": "1.5px", + "border-width--hover": "1px", + "accent-color": defaults.contextuals.content.semantic.brand.tertiary, + "accent-color--disabled": + defaults.contextuals.content.semantic.disabled.primary, + "checkmark-color": defaults.contextuals.content.semantic.contextual.primary, size: "1.5rem", - "background-color--checked": - defaults.contextuals.content.semantic.brand.tertiary, - "background-color--indeterminate": - defaults.contextuals.content.semantic.brand.tertiary, - "background-color--disabled": - defaults.contextuals.content.semantic.disabled.primary, - "border-color--disabled": - defaults.contextuals.content.semantic.disabled.primary, }); diff --git a/packages/react/src/components/Forms/DatePicker/_index.scss b/packages/react/src/components/Forms/DatePicker/_index.scss index 1ceca83..09003d9 100644 --- a/packages/react/src/components/Forms/DatePicker/_index.scss +++ b/packages/react/src/components/Forms/DatePicker/_index.scss @@ -14,6 +14,8 @@ border var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out), border-radius var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out), + box-shadow var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out); padding: 0 0.75rem; gap: 1rem; @@ -98,6 +100,7 @@ /** Modifiers */ &--disabled { + pointer-events: none; .c__date-picker__wrapper { color: var(--c--contextuals--content--semantic--disabled--primary); border-color: var( @@ -129,73 +132,34 @@ &--invalid { .c__date-picker__wrapper { border-color: var(--c--contextuals--border--semantic--error--primary); - border-radius: var(--c--components--forms-datepicker--border-radius); &__toggle { - color: var(--c--contextuals--content--semantic--error--primary); - } - - label { - color: var(--c--contextuals--content--semantic--error--primary); - } - } - - &:not(.c__date-picker--disabled) { - &:hover { - .c__date-picker__wrapper { - border-color: var(--c--contextuals--border--semantic--error--secondary); - &__toggle { - color: var(--c--contextuals--content--semantic--error--secondary); - } - - label { - color: var(--c--contextuals--content--semantic--error--secondary); - } - } + color: var(--c--contextuals--content--semantic--error--secondary); } } } &--success { .c__date-picker__wrapper { - border-color: var(--c--contextuals--border--semantic--success--secondary); - border-radius: var(--c--components--forms-datepicker--border-radius); + border-color: var(--c--contextuals--border--semantic--success--primary); &__toggle { color: var(--c--contextuals--content--semantic--success--secondary); } - - label { - color: var(--c--contextuals--content--semantic--success--secondary); - } - } - - &:not(.c__date-picker--disabled) { - &:hover { - .c__date-picker__wrapper { - border-color: var(--c--contextuals--border--semantic--success--primary); - &__toggle { - color: var(--c--contextuals--content--semantic--success--primary); - } - - label { - color: var(--c--contextuals--content--semantic--success--primary); - } - } - } } } - &:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) { - &:hover { - .c__date-picker__wrapper { - border-radius: var( - --c--components--forms-datepicker--border-radius--hover - ); - border-color: var( - --c--components--forms-datepicker--border-color--hover - ); - } + + &:hover { + .c__date-picker__wrapper { + border-radius: var( + --c--components--forms-datepicker--border-radius--hover + ); + border-color: var( + --c--components--forms-datepicker--border-color--hover + ); + box-shadow: 0 0 0 var(--c--components--forms-datepicker--border-width--hover) + var(--c--components--forms-datepicker--border-color--hover); } } @@ -210,6 +174,8 @@ border-color: var( --c--components--forms-datepicker--border-color--focus ) !important; + box-shadow: 0 0 0 var(--c--components--forms-datepicker--border-width--focus) + var(--c--components--forms-datepicker--border-color--focus) !important; .c__date-picker__wrapper__toggle { color: var( diff --git a/packages/react/src/components/Forms/DatePicker/tokens.ts b/packages/react/src/components/Forms/DatePicker/tokens.ts index 43df4b4..2d90caa 100644 --- a/packages/react/src/components/Forms/DatePicker/tokens.ts +++ b/packages/react/src/components/Forms/DatePicker/tokens.ts @@ -3,14 +3,16 @@ import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens"; export const tokens = (defaults: DefaultTokens) => ({ "border-color": defaults.contextuals.border.semantic.neutral.tertiary, "border-color--disabled": - defaults.contextuals.border.semantic.disabled.primary, + defaults.contextuals.border.semantic.neutral.tertiary, "border-color--focus": defaults.contextuals.border.semantic.brand.primary, - "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary, + "border-color--hover": defaults.contextuals.border.semantic.neutral.tertiary, "border-radius": "8px", "border-radius--focus": "2px", "border-radius--hover": "2px", "border-style": "solid", "border-width": "1px", + "border-width--focus": "1px", + "border-width--hover": "1px", "value-color": defaults.contextuals.content.semantic.neutral.tertiary, "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary, @@ -32,5 +34,5 @@ export const tokens = (defaults: DefaultTokens) => ({ defaults.contextuals.border.semantic.brand.primary, "grid-cell--color--today": defaults.contextuals.content.semantic.brand.primary, - "label-color--focus": defaults.contextuals.border.semantic.brand.secondary, + "label-color--focus": defaults.contextuals.content.semantic.brand.primary, }); diff --git a/packages/react/src/components/Forms/Field/_index.scss b/packages/react/src/components/Forms/Field/_index.scss index 0f9c3f4..7b257fb 100644 --- a/packages/react/src/components/Forms/Field/_index.scss +++ b/packages/react/src/components/Forms/Field/_index.scss @@ -46,7 +46,8 @@ &--success { color: var(--c--components--forms-field--color--success); - .c__field__text { + label, + .labelled-box label { color: var(--c--components--forms-field--color--success); } } diff --git a/packages/react/src/components/Forms/Input/_index.scss b/packages/react/src/components/Forms/Input/_index.scss index 0d60064..afb19cd 100644 --- a/packages/react/src/components/Forms/Input/_index.scss +++ b/packages/react/src/components/Forms/Input/_index.scss @@ -9,6 +9,8 @@ border var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out), border-radius var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out), + box-shadow var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out); padding: 0 1rem; gap: 1rem; @@ -77,8 +79,7 @@ &:not(.c__input__wrapper--disabled) { border-radius: var(--c--components--forms-input--border-radius--hover); border-color: var(--c--components--forms-input--border-color--hover); - - box-shadow: 0 0 0 1px + box-shadow: 0 0 0 var(--c--components--forms-input--border-width--hover) var(--c--components--forms-input--border-color--hover); } } @@ -90,7 +91,7 @@ } &:focus-within { - box-shadow: 0 0 0 1px var(--c--components--forms-input--border-color--focus) !important; + box-shadow: 0 0 0 var(--c--components--forms-input--border-width--focus) var(--c--components--forms-input--border-color--focus) !important; border-radius: var(--c--components--forms-input--border-radius--focus); border-color: var( --c--components--forms-input--border-color--focus @@ -103,6 +104,7 @@ &--disabled { cursor: default; + pointer-events: none; border-color: var(--c--contextuals--border--semantic--neutral--tertiary); .c__input { @@ -116,37 +118,10 @@ &--success { border-color: var(--c--contextuals--border--semantic--success--primary); - - .labelled-box label { - color: var(--c--contextuals--border--semantic--success--primary); - } - - &:not(.c__input__wrapper--disabled) { - &:hover { - border-color: var(--c--contextuals--border--semantic--success--primary); - color: var(--c--contextuals--content--semantic--success--primary); - - .labelled-box label { - color: var(--c--contextuals--content--semantic--success--primary); - } - } - } } &--error { - border-color: var(--c--contextuals--border--semantic--error--secondary); - - &:not(.c__input__wrapper--disabled) { - &:hover { - // border-color: var(--c--contextuals--border--semantic--error--primary); - // color: var(--c--contextuals--content--semantic--error--primary); - // box-shadow: 0 0 0 1px var(--c--contextuals--border--semantic--error--primary); - - label { - // color: var(--c--contextuals--content--semantic--error--primary); - } - } - } + border-color: var(--c--contextuals--border--semantic--error--primary); } } diff --git a/packages/react/src/components/Forms/Input/index.stories.tsx b/packages/react/src/components/Forms/Input/index.stories.tsx index 4b05542..a22d75f 100644 --- a/packages/react/src/components/Forms/Input/index.stories.tsx +++ b/packages/react/src/components/Forms/Input/index.stories.tsx @@ -14,6 +14,15 @@ import { Button } from ":/components/Button"; export default { title: "Components/Forms/Input", component: Input, + argTypes: { + disabled: { + control: "boolean", + }, + state: { + control: "select", + options: ["default", "success", "error"], + }, + }, } as Meta; export const Default = { @@ -40,6 +49,7 @@ export const Error = { state: "error", icon: person, text: "This is an optional error message", + disabled: false, }, }; diff --git a/packages/react/src/components/Forms/Radio/_index.scss b/packages/react/src/components/Forms/Radio/_index.scss index 74a4cd7..3a1a303 100644 --- a/packages/react/src/components/Forms/Radio/_index.scss +++ b/packages/react/src/components/Forms/Radio/_index.scss @@ -4,20 +4,38 @@ margin: 0; width: var(--c--components--forms-checkbox--size); height: var(--c--components--forms-checkbox--size); - border: 1.5px solid var(--c--components--forms-radio--border-color); - background-color: var(--c--components--forms-radio--background-color); + border: var(--c--components--forms-checkbox--border-width) solid var(--c--components--forms-checkbox--border-color); + background-color: var(--c--components--forms-checkbox--background-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; + transition: + border var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out), + box-shadow var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out); + + &:hover { + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--border-color); + } &:focus { outline: none; + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--border-color); } &:checked { - border-color: var(--c--components--forms-radio--accent-color); + border-color: var(--c--components--forms-checkbox--accent-color); + + &:hover { + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--accent-color); + } + + &:focus { + box-shadow: 0 0 0 var(--c--components--forms-checkbox--border-width--hover) var(--c--components--forms-checkbox--accent-color); + } } &::before { @@ -28,7 +46,7 @@ transform: scale(0); transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out); - box-shadow: inset 1em 1em var(--c--components--forms-radio--accent-color); + box-shadow: inset 1em 1em var(--c--components--forms-checkbox--accent-color); } &:checked::before { @@ -37,11 +55,12 @@ } &.c__checkbox--disabled { + pointer-events: none; input { - border-color: var(--c--components--forms-radio--border-color--disabled); + border-color: var(--c--components--forms-checkbox--accent-color--disabled); &::before { box-shadow: inset 1em 1em - var(--c--components--forms-radio--border-color--disabled); + var(--c--components--forms-checkbox--accent-color--disabled); } } } diff --git a/packages/react/src/components/Forms/Radio/tokens.ts b/packages/react/src/components/Forms/Radio/tokens.ts index 6850d98..664cd4b 100644 --- a/packages/react/src/components/Forms/Radio/tokens.ts +++ b/packages/react/src/components/Forms/Radio/tokens.ts @@ -1,9 +1,6 @@ -import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens"; +// TODO : Homegenize tokens between all inputs -export const tokens = (defaults: DefaultTokens) => ({ - "border-color": defaults.contextuals.border.semantic.neutral.tertiary, - "border-color--disabled": - defaults.contextuals.border.semantic.neutral.tertiary, - "accent-color": defaults.contextuals.content.semantic.brand.tertiary, - "background-color": defaults.contextuals.background.surface.primary, -}); +// For now, radio tokens are the same as checkbox tokens +// Take a look at the checkbox tokens + +export const tokens = () => ({}); diff --git a/packages/react/src/components/Forms/Select/_index.scss b/packages/react/src/components/Forms/Select/_index.scss index 8ad9de0..b9dfd97 100644 --- a/packages/react/src/components/Forms/Select/_index.scss +++ b/packages/react/src/components/Forms/Select/_index.scss @@ -13,6 +13,8 @@ border var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out), border-radius var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out), + box-shadow var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out); padding: 0 0.75rem; gap: 1rem; @@ -32,12 +34,14 @@ &:hover { border-radius: var(--c--components--forms-select--border-radius--hover); border-color: var(--c--components--forms-select--border-color--hover); + box-shadow: 0 0 0 var(--c--components--forms-select--border-width--hover) var(--c--components--forms-select--border-color--hover); } &:focus-within, &--focus { border-radius: var(--c--components--forms-select--border-radius--focus); border-color: var(--c--components--forms-select--border-color--focus); + box-shadow: 0 0 0 var(--c--components--forms-select--border-width--focus) var(--c--components--forms-select--border-color--focus); label { color: var(--c--components--forms-select--label-color--focus); @@ -160,6 +164,7 @@ &--disabled { color: var(--c--components--forms-select--item-color--disabled); cursor: default; + pointer-events: none; } } @@ -189,6 +194,7 @@ /** Modifiers */ &--disabled { + pointer-events: none; .c__select__wrapper { border-color: var(--c--contextuals--border--semantic--neutral--tertiary); cursor: default; diff --git a/packages/react/src/components/Forms/Select/tokens.ts b/packages/react/src/components/Forms/Select/tokens.ts index 247ab2c..36e189b 100644 --- a/packages/react/src/components/Forms/Select/tokens.ts +++ b/packages/react/src/components/Forms/Select/tokens.ts @@ -3,19 +3,21 @@ import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens"; export const tokens = (defaults: DefaultTokens) => ({ "border-color": defaults.contextuals.border.semantic.neutral.tertiary, "border-color--focus": defaults.contextuals.border.semantic.brand.primary, - "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary, + "border-color--hover": defaults.contextuals.border.semantic.neutral.tertiary, "border-radius": "8px", "border-radius--focus": "2px", "border-radius--hover": "2px", "border-style": "solid", "border-width": "1px", + "border-width--focus": "1px", + "border-width--hover": "1px", "value-color": defaults.contextuals.content.semantic.neutral.primary, "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary, "font-size": defaults.globals.font.sizes.md, height: "3.5rem", "item-background-color--hover": - defaults.contextuals.background.semantic.neutral["tertiary-hover"], + defaults.contextuals.background.semantic.overlay.primary, "item-background-color--selected": defaults.contextuals.background.semantic.brand.secondary, "item-color": defaults.contextuals.content.semantic.neutral.primary, @@ -23,8 +25,9 @@ export const tokens = (defaults: DefaultTokens) => ({ defaults.contextuals.content.semantic.disabled.secondary, "item-font-size": defaults.globals.font.sizes.md, "background-color": defaults.contextuals.background.surface.primary, - "menu-background-color": defaults.contextuals.background.surface.primary, - "label-color--focus": defaults.contextuals.border.semantic.brand.primary, + "menu-background-color": defaults.contextuals.background.surface.secondary, + "label-color": defaults.contextuals.content.semantic.neutral.tertiary, + "label-color--focus": defaults.contextuals.content.semantic.brand.primary, "multi-pill-background-color": defaults.contextuals.background.semantic.neutral.tertiary, "multi-pill-border-radius": "2px", diff --git a/packages/react/src/components/Forms/TextArea/index.scss b/packages/react/src/components/Forms/TextArea/index.scss index 2a2093a..86e75a4 100644 --- a/packages/react/src/components/Forms/TextArea/index.scss +++ b/packages/react/src/components/Forms/TextArea/index.scss @@ -17,6 +17,8 @@ border var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out), border-radius var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out), + box-shadow var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out); overflow: hidden; @@ -42,14 +44,14 @@ &:hover { border-radius: var(--c--components--forms-textarea--border-radius--hover); - border-color: var(--c--components--forms-textarea--border-color--hover); + border-color: var(--c--components--forms-textarea--border-color--hover) !important; + box-shadow: 0 0 0 var(--c--components--forms-textarea--border-width--hover) var(--c--components--forms-textarea--border-color--hover) !important; } &:focus-within { border-radius: var(--c--components--forms-textarea--border-radius--focus); - border-color: var( - --c--components--forms-textarea--border-color--focus - ) !important; + border-color: var(--c--components--forms-textarea--border-color--focus) !important; + box-shadow: 0 0 0 var(--c--components--forms-textarea--border-width--focus) var(--c--components--forms-textarea--border-color--focus) !important; label { color: var(--c--components--forms-textarea--label-color--focus); @@ -58,6 +60,7 @@ &--disabled { cursor: default; + pointer-events: none; border-color: var(--c--components--forms-textarea--border-color--disabled); .c__textarea { @@ -78,38 +81,12 @@ &--success { .c__textarea__wrapper { border-color: var(--c--contextuals--content--semantic--success--tertiary); - - .labelled-box label { - color: var(--c--contextuals--content--semantic--success--tertiary); - } - - &:not(.c__input__wrapper--disabled) { - &:hover { - border-color: var(--c--contextuals--content--semantic--success--secondary); - color: var(--c--contextuals--content--semantic--success--secondary); - - .labelled-box label { - color: var(--c--contextuals--content--semantic--success--secondary); - } - } - } } } &--error { .c__textarea__wrapper { border-color: var(--c--contextuals--content--semantic--error--tertiary); - - &:not(.c__input__wrapper--disabled) { - &:hover { - border-color: var(--c--contextuals--content--semantic--error--secondary); - color: var(--c--contextuals--content--semantic--error--secondary); - - label { - color: var(--c--contextuals--content--semantic--error--secondary); - } - } - } } } } diff --git a/packages/react/src/components/Forms/TextArea/tokens.ts b/packages/react/src/components/Forms/TextArea/tokens.ts index 393309c..d393e1a 100644 --- a/packages/react/src/components/Forms/TextArea/tokens.ts +++ b/packages/react/src/components/Forms/TextArea/tokens.ts @@ -7,13 +7,16 @@ export const tokens = (defaults: DefaultTokens) => ({ "border-radius--hover": "2px", "border-radius--focus": "2px", "border-width": "1px", + "border-width--hover": "1px", + "border-width--focus": "1px", "border-color": defaults.contextuals.border.semantic.neutral.tertiary, - "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary, + "border-color--hover": defaults.contextuals.border.semantic.neutral.tertiary, "border-color--focus": defaults.contextuals.border.semantic.brand.primary, "border-color--disabled": defaults.contextuals.border.semantic.disabled.primary, "border-style": "solid", - "label-color--focus": defaults.contextuals.border.semantic.brand.primary, + "label-color": defaults.contextuals.content.semantic.neutral.tertiary, + "label-color--focus": defaults.contextuals.content.semantic.brand.primary, "background-color": defaults.contextuals.background.surface.primary, "value-color": defaults.contextuals.content.semantic.neutral.primary, "value-color--disabled": diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css index 9721c47..4dcad59 100644 --- a/packages/react/src/cunningham-tokens.css +++ b/packages/react/src/cunningham-tokens.css @@ -1,8 +1,8 @@ :root { - --c--globals--colors--logo-1: #377FDB; - --c--globals--colors--logo-2: #377FDB; - --c--globals--colors--logo-1-dark: #95ABFF; - --c--globals--colors--logo-2-dark: #95ABFF; + --c--globals--colors--logo-1-light: #377FDB; + --c--globals--colors--logo-2-light: #377FDB; + --c--globals--colors--logo-1-dark: #C1D6F2; + --c--globals--colors--logo-2-dark: #C1D6F2; --c--globals--colors--brand-050: #EAF1FB; --c--globals--colors--brand-100: #D5E4F7; --c--globals--colors--brand-150: #C0D6F4; @@ -291,46 +291,47 @@ --c--globals--colors--pink-850: #332028; --c--globals--colors--pink-900: #24181D; --c--globals--colors--pink-950: #160F12; - --c--globals--colors--black-000: #00000000; - --c--globals--colors--black-050: #0000000D; - --c--globals--colors--black-100: #0000001A; - --c--globals--colors--black-150: #00000026; - --c--globals--colors--black-200: #00000033; - --c--globals--colors--black-250: #00000040; - --c--globals--colors--black-300: #0000004D; - --c--globals--colors--black-350: #00000059; - --c--globals--colors--black-400: #00000066; - --c--globals--colors--black-450: #00000073; - --c--globals--colors--black-500: #00000080; - --c--globals--colors--black-550: #0000008C; - --c--globals--colors--black-600: #00000099; - --c--globals--colors--black-650: #000000A6; - --c--globals--colors--black-700: #000000B3; - --c--globals--colors--black-750: #000000BF; - --c--globals--colors--black-800: #000000CC; - --c--globals--colors--black-850: #000000D9; - --c--globals--colors--black-900: #000000E6; - --c--globals--colors--black-950: #000000F2; - --c--globals--colors--white-000: #FFFFFF; - --c--globals--colors--white-050: #FFFFFF0D; - --c--globals--colors--white-100: #FFFFFF1A; - --c--globals--colors--white-150: #FFFFFF26; - --c--globals--colors--white-200: #FFFFFF33; - --c--globals--colors--white-250: #FFFFFF40; - --c--globals--colors--white-300: #FFFFFF4D; - --c--globals--colors--white-350: #FFFFFF59; - --c--globals--colors--white-400: #FFFFFF66; - --c--globals--colors--white-450: #FFFFFF73; - --c--globals--colors--white-500: #FFFFFF80; - --c--globals--colors--white-550: #FFFFFF8C; - --c--globals--colors--white-600: #FFFFFF99; - --c--globals--colors--white-650: #FFFFFFA6; - --c--globals--colors--white-700: #FFFFFFB3; - --c--globals--colors--white-750: #FFFFFFBF; - --c--globals--colors--white-800: #FFFFFFCC; - --c--globals--colors--white-850: #FFFFFFD9; - --c--globals--colors--white-900: #FFFFFFE6; - --c--globals--colors--white-950: #FFFFFFF2; + --c--globals--colors--black-000: #1B1C1D00; + --c--globals--colors--black-050: #1B1C1D0D; + --c--globals--colors--black-100: #1B1C1D1A; + --c--globals--colors--black-150: #1B1C1D26; + --c--globals--colors--black-200: #1B1C1D33; + --c--globals--colors--black-250: #1B1C1D40; + --c--globals--colors--black-300: #1B1C1D4D; + --c--globals--colors--black-350: #1B1C1D59; + --c--globals--colors--black-400: #1B1C1D66; + --c--globals--colors--black-450: #1B1C1D73; + --c--globals--colors--black-500: #1B1C1D80; + --c--globals--colors--black-550: #1B1C1D8C; + --c--globals--colors--black-600: #1B1C1D99; + --c--globals--colors--black-650: #1B1C1DA6; + --c--globals--colors--black-700: #1B1C1DB2; + --c--globals--colors--black-750: #1B1C1DBF; + --c--globals--colors--black-800: #1B1C1DCC; + --c--globals--colors--black-850: #1B1C1DD9; + --c--globals--colors--black-900: #1B1C1DE5; + --c--globals--colors--black-950: #101112F2; + --c--globals--colors--white-000: #F7F8F800; + --c--globals--colors--white-050: #F7F8F80D; + --c--globals--colors--white-100: #F7F8F81A; + --c--globals--colors--white-150: #F7F8F826; + --c--globals--colors--white-200: #F7F8F833; + --c--globals--colors--white-250: #F7F8F840; + --c--globals--colors--white-300: #F7F8F84D; + --c--globals--colors--white-350: #F7F8F859; + --c--globals--colors--white-400: #F7F8F866; + --c--globals--colors--white-450: #F7F8F873; + --c--globals--colors--white-500: #F7F8F880; + --c--globals--colors--white-550: #F7F8F88C; + --c--globals--colors--white-600: #F7F8F899; + --c--globals--colors--white-650: #F7F8F8A6; + --c--globals--colors--white-700: #F7F8F8B2; + --c--globals--colors--white-750: #F7F8F8BF; + --c--globals--colors--white-800: #F7F8F8CC; + --c--globals--colors--white-850: #F7F8F8D9; + --c--globals--colors--white-900: #F7F8F8E5; + --c--globals--colors--white-950: #F7F8F8F2; + --c--globals--colors--white-975: #F7F8F8F9; --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); @@ -370,6 +371,8 @@ --c--globals--spacings--t: 0.5rem; --c--globals--spacings--st: 0.25rem; --c--globals--spacings--4xs: 0.125rem; + --c--globals--spacings--3xs: 0.25rem; + --c--globals--spacings--2xs: 0.375rem; --c--globals--spacings--xxxs: 0.25rem; --c--globals--spacings--xxs: 0.375rem; --c--globals--spacings--xs: 0.5rem; @@ -380,11 +383,13 @@ --c--globals--spacings--xl: 2.5rem; --c--globals--spacings--xxl: 3rem; --c--globals--spacings--xxxl: 3.5rem; + --c--globals--spacings--2xl: 3rem; + --c--globals--spacings--3xl: 3.5rem; --c--globals--spacings--4xl: 4rem; --c--globals--spacings--5xl: 4.5rem; --c--globals--spacings--6xl: 6rem; --c--globals--spacings--7xl: 7.5rem; - --c--globals--breakpoints--xs: 0; + --c--globals--breakpoints--xs: 0px; --c--globals--breakpoints--sm: 576px; --c--globals--breakpoints--md: 768px; --c--globals--breakpoints--lg: 992px; @@ -393,6 +398,10 @@ --c--contextuals--background--surface--primary: var(--c--globals--colors--gray-000); --c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-000); --c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-025); + --c--contextuals--background--semantic--overlay--primary: var(--c--globals--colors--black-050); + --c--contextuals--background--semantic--overlay--primary-hover: var(--c--globals--colors--black-100); + --c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--black-050); + --c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--black-100); --c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550); --c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650); --c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-100); @@ -405,8 +414,6 @@ --c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-150); --c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-050); --c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-100); - --c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--black-050); - --c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--black-100); --c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550); --c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650); --c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-100); @@ -466,74 +473,53 @@ --c--contextuals--background--palette--gray--primary: var(--c--globals--colors--gray-500); --c--contextuals--background--palette--gray--secondary: var(--c--globals--colors--gray-350); --c--contextuals--background--palette--gray--tertiary: var(--c--globals--colors--gray-150); - --c--contextuals--background--text--primary: var(--c--globals--colors--black-050); - --c--contextuals--content--logo1: var(--c--globals--colors--logo-1); - --c--contextuals--content--logo2: var(--c--globals--colors--logo-2); + --c--contextuals--content--logo1: var(--c--globals--colors--logo-1-light); + --c--contextuals--content--logo2: var(--c--globals--colors--logo-2-light); + --c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--white-950); + --c--contextuals--content--semantic--overlay--primary: var(--c--globals--colors--white-950); --c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-700); --c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-600); - --c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-500); + --c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-550); --c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--brand-050); --c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-850); --c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-600); - --c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-500); + --c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-550); --c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050); - --c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--white-950); --c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-700); --c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-600); - --c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-500); + --c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-550); --c--contextuals--content--semantic--info--on-info: var(--c--globals--colors--info-050); --c--contextuals--content--semantic--success--primary: var(--c--globals--colors--success-700); --c--contextuals--content--semantic--success--secondary: var(--c--globals--colors--success-600); - --c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-500); + --c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-550); --c--contextuals--content--semantic--success--on-success: var(--c--globals--colors--success-050); --c--contextuals--content--semantic--warning--primary: var(--c--globals--colors--warning-700); --c--contextuals--content--semantic--warning--secondary: var(--c--globals--colors--warning-600); - --c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-500); + --c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-550); --c--contextuals--content--semantic--warning--on-warning: var(--c--globals--colors--warning-050); --c--contextuals--content--semantic--error--primary: var(--c--globals--colors--error-700); --c--contextuals--content--semantic--error--secondary: var(--c--globals--colors--error-600); - --c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-500); + --c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-550); --c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050); --c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-300); --c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--white-500); --c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-500); - --c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-350); - --c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-150); --c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-500); - --c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-350); - --c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-150); --c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-500); - --c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-350); - --c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-150); --c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-500); - --c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-350); - --c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-150); --c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-500); - --c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-350); - --c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-150); --c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-500); - --c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-350); - --c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-150); --c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-500); - --c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350); - --c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150); --c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-500); - --c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350); - --c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150); --c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-500); - --c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-350); - --c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-150); --c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-500); - --c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-350); - --c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-150); --c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-500); - --c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-350); - --c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-150); --c--contextuals--border--surface--primary: var(--c--globals--colors--gray-100); + --c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--white-200); + --c--contextuals--border--semantic--overlay--primary: var(--c--globals--colors--white-200); --c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-550); --c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-300); --c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-150); - --c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--white-200); --c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-550); --c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-300); --c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-150); @@ -550,39 +536,6 @@ --c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-300); --c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-150); --c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-100); - --c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-500); - --c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-350); - --c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-150); - --c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-500); - --c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-350); - --c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-150); - --c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-500); - --c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-350); - --c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-150); - --c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-500); - --c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-350); - --c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-150); - --c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-500); - --c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-350); - --c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-150); - --c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-500); - --c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-350); - --c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-150); - --c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-500); - --c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350); - --c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150); - --c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-500); - --c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350); - --c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150); - --c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-500); - --c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-350); - --c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-150); - --c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-500); - --c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-350); - --c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-150); - --c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-500); - --c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-350); - --c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-150); --c--components--tooltip--border-radius: 0.5rem; --c--components--tooltip--background-color: var(--c--contextuals--background--semantic--neutral--tertiary); --c--components--tooltip--border-color: var(--c--contextuals--border--semantic--neutral--tertiary); @@ -617,12 +570,15 @@ --c--components--forms-textarea--border-radius--hover: 2px; --c--components--forms-textarea--border-radius--focus: 2px; --c--components--forms-textarea--border-width: 1px; + --c--components--forms-textarea--border-width--hover: 1px; + --c--components--forms-textarea--border-width--focus: 1px; --c--components--forms-textarea--border-color: var(--c--contextuals--border--semantic--neutral--tertiary); - --c--components--forms-textarea--border-color--hover: var(--c--contextuals--border--semantic--neutral--secondary); + --c--components--forms-textarea--border-color--hover: var(--c--contextuals--border--semantic--neutral--tertiary); --c--components--forms-textarea--border-color--focus: var(--c--contextuals--border--semantic--brand--primary); --c--components--forms-textarea--border-color--disabled: var(--c--contextuals--border--semantic--disabled--primary); --c--components--forms-textarea--border-style: solid; - --c--components--forms-textarea--label-color--focus: var(--c--contextuals--border--semantic--brand--primary); + --c--components--forms-textarea--label-color: var(--c--contextuals--content--semantic--neutral--tertiary); + --c--components--forms-textarea--label-color--focus: var(--c--contextuals--content--semantic--brand--primary); --c--components--forms-textarea--background-color: var(--c--contextuals--background--surface--primary); --c--components--forms-textarea--value-color: var(--c--contextuals--content--semantic--neutral--primary); --c--components--forms-textarea--value-color--disabled: var(--c--contextuals--content--semantic--neutral--secondary); @@ -635,32 +591,31 @@ --c--components--forms-switch--handle-border-radius: 50%; --c--components--forms-select--border-color: var(--c--contextuals--border--semantic--neutral--tertiary); --c--components--forms-select--border-color--focus: var(--c--contextuals--border--semantic--brand--primary); - --c--components--forms-select--border-color--hover: var(--c--contextuals--border--semantic--neutral--secondary); + --c--components--forms-select--border-color--hover: var(--c--contextuals--border--semantic--neutral--tertiary); --c--components--forms-select--border-radius: 8px; --c--components--forms-select--border-radius--focus: 2px; --c--components--forms-select--border-radius--hover: 2px; --c--components--forms-select--border-style: solid; --c--components--forms-select--border-width: 1px; + --c--components--forms-select--border-width--focus: 1px; + --c--components--forms-select--border-width--hover: 1px; --c--components--forms-select--value-color: var(--c--contextuals--content--semantic--neutral--primary); --c--components--forms-select--value-color--disabled: var(--c--contextuals--content--semantic--disabled--primary); --c--components--forms-select--font-size: var(--c--globals--font--sizes--md); --c--components--forms-select--height: 3.5rem; - --c--components--forms-select--item-background-color--hover: var(--c--contextuals--background--semantic--neutral--tertiary-hover); + --c--components--forms-select--item-background-color--hover: var(--c--contextuals--background--semantic--overlay--primary); --c--components--forms-select--item-background-color--selected: var(--c--contextuals--background--semantic--brand--secondary); --c--components--forms-select--item-color: var(--c--contextuals--content--semantic--neutral--primary); --c--components--forms-select--item-color--disabled: var(--c--contextuals--content--semantic--disabled--secondary); --c--components--forms-select--item-font-size: var(--c--globals--font--sizes--md); --c--components--forms-select--background-color: var(--c--contextuals--background--surface--primary); - --c--components--forms-select--menu-background-color: var(--c--contextuals--background--surface--primary); - --c--components--forms-select--label-color--focus: var(--c--contextuals--border--semantic--brand--primary); + --c--components--forms-select--menu-background-color: var(--c--contextuals--background--surface--secondary); + --c--components--forms-select--label-color: var(--c--contextuals--content--semantic--neutral--tertiary); + --c--components--forms-select--label-color--focus: var(--c--contextuals--content--semantic--brand--primary); --c--components--forms-select--multi-pill-background-color: var(--c--contextuals--background--semantic--neutral--tertiary); --c--components--forms-select--multi-pill-border-radius: 2px; --c--components--forms-select--multi-pill-max-width: 68%; --c--components--forms-select--multi-pill-font-size: var(--c--globals--font--sizes--md); - --c--components--forms-radio--border-color: var(--c--contextuals--border--semantic--neutral--tertiary); - --c--components--forms-radio--border-color--disabled: var(--c--contextuals--border--semantic--neutral--tertiary); - --c--components--forms-radio--accent-color: var(--c--contextuals--content--semantic--brand--tertiary); - --c--components--forms-radio--background-color: var(--c--contextuals--background--surface--primary); --c--components--forms-labelledbox--label-color--small: var(--c--contextuals--content--semantic--neutral--tertiary); --c--components--forms-labelledbox--label-color--big: var(--c--contextuals--content--semantic--neutral--primary); --c--components--forms-labelledbox--label-color--small--disabled: var(--c--contextuals--content--semantic--neutral--secondary); @@ -712,14 +667,16 @@ --c--components--forms-field--color--success: var(--c--contextuals--content--semantic--success--secondary); --c--components--forms-field--color--disabled: var(--c--contextuals--content--semantic--disabled--primary); --c--components--forms-datepicker--border-color: var(--c--contextuals--border--semantic--neutral--tertiary); - --c--components--forms-datepicker--border-color--disabled: var(--c--contextuals--border--semantic--disabled--primary); + --c--components--forms-datepicker--border-color--disabled: var(--c--contextuals--border--semantic--neutral--tertiary); --c--components--forms-datepicker--border-color--focus: var(--c--contextuals--border--semantic--brand--primary); - --c--components--forms-datepicker--border-color--hover: var(--c--contextuals--border--semantic--neutral--secondary); + --c--components--forms-datepicker--border-color--hover: var(--c--contextuals--border--semantic--neutral--tertiary); --c--components--forms-datepicker--border-radius: 8px; --c--components--forms-datepicker--border-radius--focus: 2px; --c--components--forms-datepicker--border-radius--hover: 2px; --c--components--forms-datepicker--border-style: solid; --c--components--forms-datepicker--border-width: 1px; + --c--components--forms-datepicker--border-width--focus: 1px; + --c--components--forms-datepicker--border-width--hover: 1px; --c--components--forms-datepicker--value-color: var(--c--contextuals--content--semantic--neutral--tertiary); --c--components--forms-datepicker--value-color--disabled: var(--c--contextuals--content--semantic--disabled--primary); --c--components--forms-datepicker--font-size: var(--c--globals--font--sizes--lg); @@ -734,20 +691,22 @@ --c--components--forms-datepicker--range-selection-background-color--disabled: var(--c--contextuals--background--semantic--neutral--tertiary); --c--components--forms-datepicker--grid-cell--border-color--today: var(--c--contextuals--border--semantic--brand--primary); --c--components--forms-datepicker--grid-cell--color--today: var(--c--contextuals--content--semantic--brand--primary); - --c--components--forms-datepicker--label-color--focus: var(--c--contextuals--border--semantic--brand--secondary); + --c--components--forms-datepicker--label-color--focus: var(--c--contextuals--content--semantic--brand--primary); --c--components--forms-checkbox--background-color--hover: var(--c--contextuals--background--semantic--neutral--tertiary-hover); --c--components--forms-checkbox--background-color: var(--c--contextuals--background--surface--primary); --c--components--forms-checkbox--font-size: var(--c--globals--font--sizes--s); --c--components--forms-checkbox--font-weight: var(--c--globals--font--weights--medium); --c--components--forms-checkbox--color: var(--c--contextuals--content--semantic--neutral--primary); --c--components--forms-checkbox--border-color: var(--c--contextuals--content--semantic--neutral--tertiary); + --c--components--forms-checkbox--border-color--hover: var(--c--contextuals--content--semantic--neutral--tertiary); + --c--components--forms-checkbox--border-color--focus: var(--c--contextuals--content--semantic--brand--primary); --c--components--forms-checkbox--border-radius: 2px; - --c--components--forms-checkbox--accent-color: var(--c--contextuals--content--semantic--contextual--primary); + --c--components--forms-checkbox--border-width: 1.5px; + --c--components--forms-checkbox--border-width--hover: 1px; + --c--components--forms-checkbox--accent-color: var(--c--contextuals--content--semantic--brand--tertiary); + --c--components--forms-checkbox--accent-color--disabled: var(--c--contextuals--content--semantic--disabled--primary); + --c--components--forms-checkbox--checkmark-color: var(--c--contextuals--content--semantic--contextual--primary); --c--components--forms-checkbox--size: 1.5rem; - --c--components--forms-checkbox--background-color--checked: var(--c--contextuals--content--semantic--brand--tertiary); - --c--components--forms-checkbox--background-color--indeterminate: var(--c--contextuals--content--semantic--brand--tertiary); - --c--components--forms-checkbox--background-color--disabled: var(--c--contextuals--content--semantic--disabled--primary); - --c--components--forms-checkbox--border-color--disabled: var(--c--contextuals--content--semantic--disabled--primary); --c--components--button--border-radius: 8px; --c--components--button--border-radius--active: 2px; --c--components--button--border-radius--focus: 4px; @@ -761,9 +720,8 @@ --c--components--button--small-icon-font-size: var(--c--globals--font--sizes--md); --c--components--button--nano-font-size: var(--c--globals--font--sizes--xs); --c--components--button--nano-icon-font-size: var(--c--globals--font--sizes--md); - --c--components--button--font-weight: var(--c--globals--font--weights--regular); + --c--components--button--font-weight: var(--c--globals--font--weights--medium); --c--components--button--font-family: var(--c--globals--font--families--base); - --c--components--button--text-font-weight: var(--c--globals--font--weights--medium); --c--components--alert--background-color: var(--c--contextuals--background--semantic--neutral--tertiary); --c--components--alert--border-radius: 4px; --c--components--alert--border-color: var(--c--contextuals--border--semantic--neutral--primary); @@ -775,10 +733,10 @@ --c--components--alert--additional-color: var(--c--contextuals--content--semantic--neutral--primary); } .cunningham-theme--dark{ - --c--globals--colors--logo-1: #377FDB; - --c--globals--colors--logo-2: #377FDB; - --c--globals--colors--logo-1-dark: #95ABFF; - --c--globals--colors--logo-2-dark: #95ABFF; + --c--globals--colors--logo-1-light: #377FDB; + --c--globals--colors--logo-2-light: #377FDB; + --c--globals--colors--logo-1-dark: #C1D6F2; + --c--globals--colors--logo-2-dark: #C1D6F2; --c--globals--colors--brand-050: #EAF1FB; --c--globals--colors--brand-100: #D5E4F7; --c--globals--colors--brand-150: #C0D6F4; @@ -1067,46 +1025,47 @@ --c--globals--colors--pink-850: #332028; --c--globals--colors--pink-900: #24181D; --c--globals--colors--pink-950: #160F12; - --c--globals--colors--black-000: #00000000; - --c--globals--colors--black-050: #0000000D; - --c--globals--colors--black-100: #0000001A; - --c--globals--colors--black-150: #00000026; - --c--globals--colors--black-200: #00000033; - --c--globals--colors--black-250: #00000040; - --c--globals--colors--black-300: #0000004D; - --c--globals--colors--black-350: #00000059; - --c--globals--colors--black-400: #00000066; - --c--globals--colors--black-450: #00000073; - --c--globals--colors--black-500: #00000080; - --c--globals--colors--black-550: #0000008C; - --c--globals--colors--black-600: #00000099; - --c--globals--colors--black-650: #000000A6; - --c--globals--colors--black-700: #000000B3; - --c--globals--colors--black-750: #000000BF; - --c--globals--colors--black-800: #000000CC; - --c--globals--colors--black-850: #000000D9; - --c--globals--colors--black-900: #000000E6; - --c--globals--colors--black-950: #000000F2; - --c--globals--colors--white-000: #FFFFFF; - --c--globals--colors--white-050: #FFFFFF0D; - --c--globals--colors--white-100: #FFFFFF1A; - --c--globals--colors--white-150: #FFFFFF26; - --c--globals--colors--white-200: #FFFFFF33; - --c--globals--colors--white-250: #FFFFFF40; - --c--globals--colors--white-300: #FFFFFF4D; - --c--globals--colors--white-350: #FFFFFF59; - --c--globals--colors--white-400: #FFFFFF66; - --c--globals--colors--white-450: #FFFFFF73; - --c--globals--colors--white-500: #FFFFFF80; - --c--globals--colors--white-550: #FFFFFF8C; - --c--globals--colors--white-600: #FFFFFF99; - --c--globals--colors--white-650: #FFFFFFA6; - --c--globals--colors--white-700: #FFFFFFB3; - --c--globals--colors--white-750: #FFFFFFBF; - --c--globals--colors--white-800: #FFFFFFCC; - --c--globals--colors--white-850: #FFFFFFD9; - --c--globals--colors--white-900: #FFFFFFE6; - --c--globals--colors--white-950: #FFFFFFF2; + --c--globals--colors--black-000: #1B1C1D00; + --c--globals--colors--black-050: #1B1C1D0D; + --c--globals--colors--black-100: #1B1C1D1A; + --c--globals--colors--black-150: #1B1C1D26; + --c--globals--colors--black-200: #1B1C1D33; + --c--globals--colors--black-250: #1B1C1D40; + --c--globals--colors--black-300: #1B1C1D4D; + --c--globals--colors--black-350: #1B1C1D59; + --c--globals--colors--black-400: #1B1C1D66; + --c--globals--colors--black-450: #1B1C1D73; + --c--globals--colors--black-500: #1B1C1D80; + --c--globals--colors--black-550: #1B1C1D8C; + --c--globals--colors--black-600: #1B1C1D99; + --c--globals--colors--black-650: #1B1C1DA6; + --c--globals--colors--black-700: #1B1C1DB2; + --c--globals--colors--black-750: #1B1C1DBF; + --c--globals--colors--black-800: #1B1C1DCC; + --c--globals--colors--black-850: #1B1C1DD9; + --c--globals--colors--black-900: #1B1C1DE5; + --c--globals--colors--black-950: #101112F2; + --c--globals--colors--white-000: #F7F8F800; + --c--globals--colors--white-050: #F7F8F80D; + --c--globals--colors--white-100: #F7F8F81A; + --c--globals--colors--white-150: #F7F8F826; + --c--globals--colors--white-200: #F7F8F833; + --c--globals--colors--white-250: #F7F8F840; + --c--globals--colors--white-300: #F7F8F84D; + --c--globals--colors--white-350: #F7F8F859; + --c--globals--colors--white-400: #F7F8F866; + --c--globals--colors--white-450: #F7F8F873; + --c--globals--colors--white-500: #F7F8F880; + --c--globals--colors--white-550: #F7F8F88C; + --c--globals--colors--white-600: #F7F8F899; + --c--globals--colors--white-650: #F7F8F8A6; + --c--globals--colors--white-700: #F7F8F8B2; + --c--globals--colors--white-750: #F7F8F8BF; + --c--globals--colors--white-800: #F7F8F8CC; + --c--globals--colors--white-850: #F7F8F8D9; + --c--globals--colors--white-900: #F7F8F8E5; + --c--globals--colors--white-950: #F7F8F8F2; + --c--globals--colors--white-975: #F7F8F8F9; --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); @@ -1146,6 +1105,8 @@ --c--globals--spacings--t: 0.5rem; --c--globals--spacings--st: 0.25rem; --c--globals--spacings--4xs: 0.125rem; + --c--globals--spacings--3xs: 0.25rem; + --c--globals--spacings--2xs: 0.375rem; --c--globals--spacings--xxxs: 0.25rem; --c--globals--spacings--xxs: 0.375rem; --c--globals--spacings--xs: 0.5rem; @@ -1156,11 +1117,13 @@ --c--globals--spacings--xl: 2.5rem; --c--globals--spacings--xxl: 3rem; --c--globals--spacings--xxxl: 3.5rem; + --c--globals--spacings--2xl: 3rem; + --c--globals--spacings--3xl: 3.5rem; --c--globals--spacings--4xl: 4rem; --c--globals--spacings--5xl: 4.5rem; --c--globals--spacings--6xl: 6rem; --c--globals--spacings--7xl: 7.5rem; - --c--globals--breakpoints--xs: 0; + --c--globals--breakpoints--xs: 0px; --c--globals--breakpoints--sm: 576px; --c--globals--breakpoints--md: 768px; --c--globals--breakpoints--lg: 992px; @@ -1169,6 +1132,10 @@ --c--contextuals--background--surface--primary: var(--c--globals--colors--gray-800); --c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-850); --c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-900); + --c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050); + --c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100); + --c--contextuals--background--semantic--overlay--primary: var(--c--globals--colors--white-050); + --c--contextuals--background--semantic--overlay--primary-hover: var(--c--globals--colors--white-100); --c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550); --c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650); --c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-700); @@ -1181,8 +1148,6 @@ --c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-750); --c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-750); --c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-800); - --c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050); - --c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100); --c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550); --c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650); --c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-700); @@ -1244,6 +1209,8 @@ --c--contextuals--background--palette--gray--tertiary: var(--c--globals--colors--gray-550); --c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark); --c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark); + --c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850); + --c--contextuals--content--semantic--overlay--primary: var(--c--globals--colors--black-850); --c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-050); --c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-100); --c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-250); @@ -1252,7 +1219,6 @@ --c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-100); --c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-250); --c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050); - --c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850); --c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-050); --c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-100); --c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-250); @@ -1271,44 +1237,23 @@ --c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050); --c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-600); --c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--black-300); - --c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-350); - --c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-450); - --c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-550); - --c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-350); - --c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-450); - --c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-550); - --c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-350); - --c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-450); - --c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-550); - --c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-350); - --c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-450); - --c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-550); - --c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-350); - --c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-450); - --c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); - --c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-350); - --c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-450); - --c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-550); - --c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); - --c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); - --c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); - --c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); - --c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); - --c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); - --c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-350); - --c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-450); - --c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-550); - --c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-350); - --c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-450); - --c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-550); - --c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-350); - --c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-450); - --c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-550); + --c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-500); + --c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-500); + --c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-500); + --c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-500); + --c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-500); + --c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-500); + --c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-500); + --c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-500); + --c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-500); + --c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-500); + --c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-500); --c--contextuals--border--surface--primary: var(--c--globals--colors--gray-750); + --c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200); + --c--contextuals--border--semantic--overlay--primary: var(--c--globals--colors--black-200); --c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-450); --c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-600); --c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-700); - --c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200); --c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-450); --c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-600); --c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-700); @@ -1325,37 +1270,4 @@ --c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-600); --c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-700); --c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-800); - --c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-350); - --c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-450); - --c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-550); - --c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-350); - --c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-450); - --c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-550); - --c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-350); - --c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-450); - --c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-550); - --c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-350); - --c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-450); - --c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-550); - --c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-350); - --c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-450); - --c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); - --c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-350); - --c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-450); - --c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-550); - --c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); - --c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); - --c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); - --c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); - --c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); - --c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); - --c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-350); - --c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-450); - --c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-550); - --c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-350); - --c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-450); - --c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-550); - --c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-350); - --c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-450); - --c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-550); } diff --git a/packages/react/src/cunningham-tokens.js b/packages/react/src/cunningham-tokens.js index 74ea065..95ebd7b 100644 --- a/packages/react/src/cunningham-tokens.js +++ b/packages/react/src/cunningham-tokens.js @@ -1 +1 @@ -export const tokens = {"themes":{"default":{"globals":{"colors":{"logo-1":"#377FDB","logo-2":"#377FDB","logo-1-dark":"#95ABFF","logo-2-dark":"#95ABFF","brand-050":"#EAF1FB","brand-100":"#D5E4F7","brand-150":"#C0D6F4","brand-200":"#ABC9F0","brand-250":"#96BCEC","brand-300":"#80AEE8","brand-350":"#6CA0E4","brand-400":"#5693E0","brand-450":"#4085DC","brand-500":"#2976D8","brand-550":"#1167D4","brand-600":"#0659C5","brand-650":"#1A509F","brand-700":"#20467F","brand-750":"#203C63","brand-800":"#1D314C","brand-850":"#1A2638","brand-900":"#141C28","brand-950":"#0C1117","gray-000":"#FFFFFF","gray-025":"#F7F8F8","gray-050":"#F0F1F2","gray-100":"#E1E2E5","gray-150":"#D2D4D8","gray-200":"#C4C7CB","gray-250":"#B5B9BE","gray-300":"#A7ACB2","gray-350":"#999EA5","gray-400":"#8D9197","gray-450":"#80848A","gray-500":"#74777C","gray-550":"#686B6F","gray-600":"#5C5F63","gray-650":"#505356","gray-700":"#45474A","gray-750":"#3A3B3E","gray-800":"#2F3033","gray-850":"#252627","gray-900":"#1B1C1D","gray-950":"#101112","gray-1000":"#000000","info-050":"#EAF1FB","info-100":"#D5E4F7","info-150":"#C0D6F4","info-200":"#ABC9F0","info-250":"#96BCEC","info-300":"#80AEE8","info-350":"#6CA0E4","info-400":"#5693E0","info-450":"#4085DC","info-500":"#2976D8","info-550":"#1167D4","info-600":"#0659C5","info-650":"#1A509F","info-700":"#20467F","info-750":"#203C63","info-800":"#1D314C","info-850":"#1A2638","info-900":"#141C28","info-950":"#0C1117","success-050":"#E4F7D4","success-100":"#C8EEA8","success-150":"#AAE579","success-200":"#89DC45","success-250":"#72CF27","success-300":"#6AC024","success-350":"#61B121","success-400":"#59A21E","success-450":"#51941C","success-500":"#4B851A","success-550":"#427816","success-600":"#3A6A14","success-650":"#385C1F","success-700":"#344D24","success-750":"#2E4022","success-800":"#27341F","success-850":"#20281A","success-900":"#181D15","success-950":"#10120E","warning-050":"#FFF1BD","warning-100":"#FFE176","warning-150":"#FFCF25","warning-200":"#F4BF06","warning-250":"#E3B205","warning-300":"#D3A504","warning-350":"#C29805","warning-400":"#B28C03","warning-450":"#A27F03","warning-500":"#937303","warning-550":"#836703","warning-600":"#745B03","warning-650":"#625019","warning-700":"#524620","warning-750":"#443B20","warning-800":"#36301D","warning-850":"#2A2619","warning-900":"#1E1C13","warning-950":"#12110C","error-050":"#FCEDED","error-100":"#FADBDB","error-150":"#F7C9C9","error-200":"#F5B7B7","error-250":"#F2A4A4","error-300":"#EF9191","error-350":"#EC7D7D","error-400":"#E96868","error-450":"#E55050","error-500":"#E13131","error-550":"#D80000","error-600":"#C00101","error-650":"#9E2219","error-700":"#802820","error-750":"#662820","error-800":"#4F231E","error-850":"#3B1D19","error-900":"#2A1614","error-950":"#1A0E0C","red-050":"#FDEDED","red-100":"#FADBDB","red-150":"#F8C9C9","red-200":"#F5B7B6","red-250":"#F3A4A3","red-300":"#F09190","red-350":"#EE7C7B","red-400":"#EB6665","red-450":"#E74E4D","red-500":"#D83F3D","red-550":"#C23837","red-600":"#AC3231","red-650":"#8D3531","red-700":"#73332F","red-750":"#5B2F2B","red-800":"#472826","red-850":"#35211F","red-900":"#251817","red-950":"#160F0E","orange-050":"#FDEEE2","orange-100":"#FCDDC5","orange-150":"#FACBA8","orange-200":"#F8B98B","orange-250":"#F6A76A","orange-300":"#F4934B","orange-350":"#F27E27","orange-400":"#E76E12","orange-450":"#D26411","orange-500":"#BE5B0F","orange-550":"#AA510E","orange-600":"#97480C","orange-650":"#7E431D","orange-700":"#673C22","orange-750":"#533422","orange-800":"#412C1F","orange-850":"#31231B","orange-900":"#221A14","orange-950":"#15100C","brown-050":"#F3F0EF","brown-100":"#E7E1DF","brown-150":"#DCD2CF","brown-200":"#D0C4BF","brown-250":"#C5B6B0","brown-300":"#BAA7A1","brown-350":"#AF9992","brown-400":"#A48B83","brown-450":"#997E74","brown-500":"#8F7065","brown-550":"#846357","brown-600":"#7A5649","brown-650":"#684C42","brown-700":"#57423C","brown-750":"#463833","brown-800":"#382E2A","brown-850":"#2B2422","brown-900":"#1F1B19","brown-950":"#121010","yellow-050":"#FAF0D3","yellow-100":"#F5E2A4","yellow-150":"#F0D275","yellow-200":"#EBC242","yellow-250":"#E4B213","yellow-300":"#D4A511","yellow-350":"#C39810","yellow-400":"#B38B0F","yellow-450":"#A37F0D","yellow-500":"#93730C","yellow-550":"#84670B","yellow-600":"#755B0A","yellow-650":"#63501C","yellow-700":"#534521","yellow-750":"#443A21","yellow-800":"#36301F","yellow-850":"#29261A","yellow-900":"#1D1C14","yellow-950":"#12110C","green-050":"#E2F6E5","green-100":"#C5ECCA","green-150":"#A7E3AF","green-200":"#89D894","green-250":"#67CE75","green-300":"#4DC25D","green-350":"#48B257","green-400":"#41A44F","green-450":"#3B9548","green-500":"#368741","green-550":"#30793A","green-600":"#2B6B33","green-650":"#2F5C34","green-700":"#2E4E31","green-750":"#2A412C","green-800":"#253426","green-850":"#1E281F","green-900":"#171D17","green-950":"#0F120F","blue-1-050":"#EBF1FF","blue-1-100":"#D6E3FE","blue-1-150":"#C2D5FE","blue-1-200":"#ADC7FE","blue-1-250":"#99B8FD","blue-1-300":"#84AAFD","blue-1-350":"#6F9BFD","blue-1-400":"#5A8DFB","blue-1-450":"#437DFC","blue-1-500":"#3D71E4","blue-1-550":"#3665CC","blue-1-600":"#305AB5","blue-1-650":"#315093","blue-1-700":"#2E4675","blue-1-750":"#293B5E","blue-1-800":"#243048","blue-1-850":"#1E2635","blue-1-900":"#171C25","blue-1-950":"#0E1116","blue-2-050":"#E2F4F9","blue-2-100":"#C5E9F3","blue-2-150":"#A7DDED","blue-2-200":"#88D1E6","blue-2-250":"#68C5E0","blue-2-300":"#48B8D9","blue-2-350":"#3BAACA","blue-2-400":"#359CB9","blue-2-450":"#318EA9","blue-2-500":"#2C8199","blue-2-550":"#277389","blue-2-600":"#236679","blue-2-650":"#2A5866","blue-2-700":"#2A4B55","blue-2-750":"#283F47","blue-2-800":"#233337","blue-2-850":"#1D272A","blue-2-900":"#161C1E","blue-2-950":"#0E1112","purple-050":"#F6EEFF","purple-100":"#ECDCFF","purple-150":"#E3CBFE","purple-200":"#DAB9FE","purple-250":"#D0A7FE","purple-300":"#C795FE","purple-350":"#BD83FD","purple-400":"#B36FFD","purple-450":"#A85BFD","purple-500":"#9B4BF3","purple-550":"#8B43DA","purple-600":"#7B3CC1","purple-650":"#673C9B","purple-700":"#56387D","purple-750":"#463162","purple-800":"#382A4A","purple-850":"#2A2237","purple-900":"#1E1926","purple-950":"#121017","pink-050":"#FCEDF5","pink-100":"#F9DAEA","pink-150":"#F7C7E0","pink-200":"#F4B4D5","pink-250":"#F1A1CA","pink-300":"#EE8CBF","pink-350":"#EA77B3","pink-400":"#E760A6","pink-450":"#E24797","pink-500":"#CD4089","pink-550":"#B8397B","pink-600":"#A3336D","pink-650":"#86355E","pink-700":"#6E334F","pink-750":"#582E42","pink-800":"#442834","pink-850":"#332028","pink-900":"#24181D","pink-950":"#160F12","black-000":"#00000000","black-050":"#0000000D","black-100":"#0000001A","black-150":"#00000026","black-200":"#00000033","black-250":"#00000040","black-300":"#0000004D","black-350":"#00000059","black-400":"#00000066","black-450":"#00000073","black-500":"#00000080","black-550":"#0000008C","black-600":"#00000099","black-650":"#000000A6","black-700":"#000000B3","black-750":"#000000BF","black-800":"#000000CC","black-850":"#000000D9","black-900":"#000000E6","black-950":"#000000F2","white-000":"#FFFFFF","white-050":"#FFFFFF0D","white-100":"#FFFFFF1A","white-150":"#FFFFFF26","white-200":"#FFFFFF33","white-250":"#FFFFFF40","white-300":"#FFFFFF4D","white-350":"#FFFFFF59","white-400":"#FFFFFF66","white-450":"#FFFFFF73","white-500":"#FFFFFF80","white-550":"#FFFFFF8C","white-600":"#FFFFFF99","white-650":"#FFFFFFA6","white-700":"#FFFFFFB3","white-750":"#FFFFFFBF","white-800":"#FFFFFFCC","white-850":"#FFFFFFD9","white-900":"#FFFFFFE6","white-950":"#FFFFFFF2"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"font":{"sizes":{"xs":"0.75rem","sm":"0.875rem","md":"1rem","lg":"1.125rem","ml":"0.938rem","xl":"1.25rem","t":"0.6875rem","s":"0.75rem","h1":"2rem","h2":"1.75rem","h3":"1.5rem","h4":"1.375rem","h5":"1.25rem","h6":"1.125rem","xl-alt":"5rem","lg-alt":"4.5rem","md-alt":"4rem","sm-alt":"3.5rem","xs-alt":"3rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","st":"0.25rem","4xs":"0.125rem","xxxs":"0.25rem","xxs":"0.375rem","xs":"0.5rem","sm":"0.75rem","base":"1rem","md":"1.5rem","lg":"2rem","xl":"2.5rem","xxl":"3rem","xxxl":"3.5rem","4xl":"4rem","5xl":"4.5rem","6xl":"6rem","7xl":"7.5rem"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#FFFFFF","secondary":"#FFFFFF","tertiary":"#F7F8F8"},"semantic":{"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#E1E2E5","secondary-hover":"#D2D4D8","tertiary":"#F0F1F2","tertiary-hover":"#E1E2E5"},"contextual":{"primary":"#0000000D","primary-hover":"#0000001A"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#C8EEA8","secondary-hover":"#AAE579","tertiary":"#E4F7D4","tertiary-hover":"#C8EEA8"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#FFE176","secondary-hover":"#FFCF25","tertiary":"#FFF1BD","tertiary-hover":"#FFE176"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#FADBDB","secondary-hover":"#F7C9C9","tertiary":"#FCEDED","tertiary-hover":"#FADBDB"},"disabled":{"primary":"#E1E2E5","secondary":"#F0F1F2"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}},"text":{"primary":"#0000000D"}},"content":{"logo1":"#377FDB","logo2":"#377FDB","semantic":{"brand":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#2976D8","on-brand":"#EAF1FB"},"neutral":{"primary":"#252627","secondary":"#5C5F63","tertiary":"#74777C","on-neutral":"#F0F1F2"},"contextual":{"primary":"#FFFFFFF2"},"info":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#2976D8","on-info":"#EAF1FB"},"success":{"primary":"#344D24","secondary":"#3A6A14","tertiary":"#4B851A","on-success":"#E4F7D4"},"warning":{"primary":"#524620","secondary":"#745B03","tertiary":"#937303","on-warning":"#FFF1BD"},"error":{"primary":"#802820","secondary":"#C00101","tertiary":"#E13131","on-error":"#FCEDED"},"disabled":{"primary":"#A7ACB2","secondary":"#FFFFFF80"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}}},"border":{"surface":{"primary":"#E1E2E5"},"semantic":{"brand":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"contextual":{"primary":"#FFFFFF33"},"neutral":{"primary":"#686B6F","secondary":"#A7ACB2","tertiary":"#D2D4D8"},"info":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"success":{"primary":"#427816","secondary":"#6AC024","tertiary":"#AAE579"},"warning":{"primary":"#836703","secondary":"#D3A504","tertiary":"#FFCF25"},"error":{"primary":"#D80000","secondary":"#EF9191","tertiary":"#F7C9C9"},"disabled":{"primary":"#E1E2E5"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}}}},"components":{"tooltip":{"border-radius":"0.5rem","background-color":"#F0F1F2","border-color":"#D2D4D8","color":"#74777C","font-size":"0.75rem","padding":"1rem","max-width":"150px"},"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#F0F1F2","color":"#252627","font-weight":400,"icon-size":"19px","progress-bar-height":"3px"},"modal":{"background-color":"#FFFFFF","backdrop-color":"#00000099","border-radius":"4px","border-color":"#E1E2E5","box-shadow":"0px 1px 2px 0px #0C1A2B4D","color":"#252627","title-font-weight":600,"content-font-size":"0.875rem","content-font-weight":400,"content-color":"#252627","width-small":"300px","width-medium":"600px","width-large":"800px","width-extra-large":"75%"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#D2D4D8","border-color--hover":"#A7ACB2","border-color--focus":"#1167D4","border-color--disabled":"#E1E2E5","border-style":"solid","label-color--focus":"#1167D4","background-color":"#FFFFFF","value-color":"#252627","value-color--disabled":"#5C5F63"},"forms-switch":{"accent-color":"#2976D8","rail-background-color":"#74777C","rail-background-color--disabled":"#A7ACB2","rail-border-radius":"50vw","handle-background-color":"#FFFFFFF2","handle-background-color--disabled":"#FFFFFF80","handle-border-radius":"50%"},"forms-select":{"border-color":"#D2D4D8","border-color--focus":"#1167D4","border-color--hover":"#A7ACB2","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#252627","value-color--disabled":"#A7ACB2","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#E1E2E5","item-background-color--selected":"#D5E4F7","item-color":"#252627","item-color--disabled":"#FFFFFF80","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#1167D4","multi-pill-background-color":"#F0F1F2","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"1rem"},"forms-radio":{"border-color":"#D2D4D8","border-color--disabled":"#D2D4D8","accent-color":"#2976D8","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#74777C","label-color--big":"#252627","label-color--small--disabled":"#5C5F63","label-color--big--disabled":"#5C5F63"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"4px","border-radius--focus":"4px","border-width":"1px","border-width--hover":"1px","border-width--focus":"1px","border-color":"#D2D4D8","border-color--hover":"#D2D4D8","border-color--focus":"#1167D4","border-style":"solid","placeholder-color":"#74777C","label-color":"#74777C","label-color--focus":"#20467F","background-color":"#FFFFFF","value-color":"#252627","value-color--disabled":"#A7ACB2"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#D2D4D8","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EAF1FB","color":"#252627","color--success":"#4B851A","color--error":"#E13131","padding":"1rem","accent-color":"#1167D4","text-color":"#74777C","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#252627","file-text-weight":300,"file-border-color":"#D2D4D8","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#74777C"},"forms-field":{"width":"292px","font-size":"0.75rem","color":"#5C5F63","color--error":"#C00101","color--success":"#3A6A14","color--disabled":"#A7ACB2"},"forms-datepicker":{"border-color":"#D2D4D8","border-color--disabled":"#E1E2E5","border-color--focus":"#1167D4","border-color--hover":"#A7ACB2","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#74777C","value-color--disabled":"#A7ACB2","font-size":"1.125rem","height":"3.5rem","item-background-color--hover":"#E1E2E5","item-background-color--selected":"#EAF1FB","item-color":"#252627","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EAF1FB","range-selection-background-color--disabled":"#F0F1F2","grid-cell--border-color--today":"#1167D4","grid-cell--color--today":"#20467F","label-color--focus":"#80AEE8"},"forms-checkbox":{"background-color--hover":"#E1E2E5","background-color":"#FFFFFF","font-size":"0.75rem","font-weight":500,"color":"#252627","border-color":"#74777C","border-radius":"2px","accent-color":"#FFFFFFF2","size":"1.5rem","background-color--checked":"#2976D8","background-color--indeterminate":"#2976D8","background-color--disabled":"#A7ACB2","border-color--disabled":"#A7ACB2"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"4px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.875rem","small-icon-font-size":"1rem","nano-font-size":"0.75rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#F0F1F2","border-radius":"4px","border-color":"#686B6F","border-left-color":"#686B6F","font-weight":500,"color":"#252627","icon-size":"19px","additional-font-weight":400,"additional-color":"#252627"}}},"dark":{"globals":{"colors":{"logo-1":"#377FDB","logo-2":"#377FDB","logo-1-dark":"#95ABFF","logo-2-dark":"#95ABFF","brand-050":"#EAF1FB","brand-100":"#D5E4F7","brand-150":"#C0D6F4","brand-200":"#ABC9F0","brand-250":"#96BCEC","brand-300":"#80AEE8","brand-350":"#6CA0E4","brand-400":"#5693E0","brand-450":"#4085DC","brand-500":"#2976D8","brand-550":"#1167D4","brand-600":"#0659C5","brand-650":"#1A509F","brand-700":"#20467F","brand-750":"#203C63","brand-800":"#1D314C","brand-850":"#1A2638","brand-900":"#141C28","brand-950":"#0C1117","gray-000":"#FFFFFF","gray-025":"#F7F8F8","gray-050":"#F0F1F2","gray-100":"#E1E2E5","gray-150":"#D2D4D8","gray-200":"#C4C7CB","gray-250":"#B5B9BE","gray-300":"#A7ACB2","gray-350":"#999EA5","gray-400":"#8D9197","gray-450":"#80848A","gray-500":"#74777C","gray-550":"#686B6F","gray-600":"#5C5F63","gray-650":"#505356","gray-700":"#45474A","gray-750":"#3A3B3E","gray-800":"#2F3033","gray-850":"#252627","gray-900":"#1B1C1D","gray-950":"#101112","gray-1000":"#000000","info-050":"#EAF1FB","info-100":"#D5E4F7","info-150":"#C0D6F4","info-200":"#ABC9F0","info-250":"#96BCEC","info-300":"#80AEE8","info-350":"#6CA0E4","info-400":"#5693E0","info-450":"#4085DC","info-500":"#2976D8","info-550":"#1167D4","info-600":"#0659C5","info-650":"#1A509F","info-700":"#20467F","info-750":"#203C63","info-800":"#1D314C","info-850":"#1A2638","info-900":"#141C28","info-950":"#0C1117","success-050":"#E4F7D4","success-100":"#C8EEA8","success-150":"#AAE579","success-200":"#89DC45","success-250":"#72CF27","success-300":"#6AC024","success-350":"#61B121","success-400":"#59A21E","success-450":"#51941C","success-500":"#4B851A","success-550":"#427816","success-600":"#3A6A14","success-650":"#385C1F","success-700":"#344D24","success-750":"#2E4022","success-800":"#27341F","success-850":"#20281A","success-900":"#181D15","success-950":"#10120E","warning-050":"#FFF1BD","warning-100":"#FFE176","warning-150":"#FFCF25","warning-200":"#F4BF06","warning-250":"#E3B205","warning-300":"#D3A504","warning-350":"#C29805","warning-400":"#B28C03","warning-450":"#A27F03","warning-500":"#937303","warning-550":"#836703","warning-600":"#745B03","warning-650":"#625019","warning-700":"#524620","warning-750":"#443B20","warning-800":"#36301D","warning-850":"#2A2619","warning-900":"#1E1C13","warning-950":"#12110C","error-050":"#FCEDED","error-100":"#FADBDB","error-150":"#F7C9C9","error-200":"#F5B7B7","error-250":"#F2A4A4","error-300":"#EF9191","error-350":"#EC7D7D","error-400":"#E96868","error-450":"#E55050","error-500":"#E13131","error-550":"#D80000","error-600":"#C00101","error-650":"#9E2219","error-700":"#802820","error-750":"#662820","error-800":"#4F231E","error-850":"#3B1D19","error-900":"#2A1614","error-950":"#1A0E0C","red-050":"#FDEDED","red-100":"#FADBDB","red-150":"#F8C9C9","red-200":"#F5B7B6","red-250":"#F3A4A3","red-300":"#F09190","red-350":"#EE7C7B","red-400":"#EB6665","red-450":"#E74E4D","red-500":"#D83F3D","red-550":"#C23837","red-600":"#AC3231","red-650":"#8D3531","red-700":"#73332F","red-750":"#5B2F2B","red-800":"#472826","red-850":"#35211F","red-900":"#251817","red-950":"#160F0E","orange-050":"#FDEEE2","orange-100":"#FCDDC5","orange-150":"#FACBA8","orange-200":"#F8B98B","orange-250":"#F6A76A","orange-300":"#F4934B","orange-350":"#F27E27","orange-400":"#E76E12","orange-450":"#D26411","orange-500":"#BE5B0F","orange-550":"#AA510E","orange-600":"#97480C","orange-650":"#7E431D","orange-700":"#673C22","orange-750":"#533422","orange-800":"#412C1F","orange-850":"#31231B","orange-900":"#221A14","orange-950":"#15100C","brown-050":"#F3F0EF","brown-100":"#E7E1DF","brown-150":"#DCD2CF","brown-200":"#D0C4BF","brown-250":"#C5B6B0","brown-300":"#BAA7A1","brown-350":"#AF9992","brown-400":"#A48B83","brown-450":"#997E74","brown-500":"#8F7065","brown-550":"#846357","brown-600":"#7A5649","brown-650":"#684C42","brown-700":"#57423C","brown-750":"#463833","brown-800":"#382E2A","brown-850":"#2B2422","brown-900":"#1F1B19","brown-950":"#121010","yellow-050":"#FAF0D3","yellow-100":"#F5E2A4","yellow-150":"#F0D275","yellow-200":"#EBC242","yellow-250":"#E4B213","yellow-300":"#D4A511","yellow-350":"#C39810","yellow-400":"#B38B0F","yellow-450":"#A37F0D","yellow-500":"#93730C","yellow-550":"#84670B","yellow-600":"#755B0A","yellow-650":"#63501C","yellow-700":"#534521","yellow-750":"#443A21","yellow-800":"#36301F","yellow-850":"#29261A","yellow-900":"#1D1C14","yellow-950":"#12110C","green-050":"#E2F6E5","green-100":"#C5ECCA","green-150":"#A7E3AF","green-200":"#89D894","green-250":"#67CE75","green-300":"#4DC25D","green-350":"#48B257","green-400":"#41A44F","green-450":"#3B9548","green-500":"#368741","green-550":"#30793A","green-600":"#2B6B33","green-650":"#2F5C34","green-700":"#2E4E31","green-750":"#2A412C","green-800":"#253426","green-850":"#1E281F","green-900":"#171D17","green-950":"#0F120F","blue-1-050":"#EBF1FF","blue-1-100":"#D6E3FE","blue-1-150":"#C2D5FE","blue-1-200":"#ADC7FE","blue-1-250":"#99B8FD","blue-1-300":"#84AAFD","blue-1-350":"#6F9BFD","blue-1-400":"#5A8DFB","blue-1-450":"#437DFC","blue-1-500":"#3D71E4","blue-1-550":"#3665CC","blue-1-600":"#305AB5","blue-1-650":"#315093","blue-1-700":"#2E4675","blue-1-750":"#293B5E","blue-1-800":"#243048","blue-1-850":"#1E2635","blue-1-900":"#171C25","blue-1-950":"#0E1116","blue-2-050":"#E2F4F9","blue-2-100":"#C5E9F3","blue-2-150":"#A7DDED","blue-2-200":"#88D1E6","blue-2-250":"#68C5E0","blue-2-300":"#48B8D9","blue-2-350":"#3BAACA","blue-2-400":"#359CB9","blue-2-450":"#318EA9","blue-2-500":"#2C8199","blue-2-550":"#277389","blue-2-600":"#236679","blue-2-650":"#2A5866","blue-2-700":"#2A4B55","blue-2-750":"#283F47","blue-2-800":"#233337","blue-2-850":"#1D272A","blue-2-900":"#161C1E","blue-2-950":"#0E1112","purple-050":"#F6EEFF","purple-100":"#ECDCFF","purple-150":"#E3CBFE","purple-200":"#DAB9FE","purple-250":"#D0A7FE","purple-300":"#C795FE","purple-350":"#BD83FD","purple-400":"#B36FFD","purple-450":"#A85BFD","purple-500":"#9B4BF3","purple-550":"#8B43DA","purple-600":"#7B3CC1","purple-650":"#673C9B","purple-700":"#56387D","purple-750":"#463162","purple-800":"#382A4A","purple-850":"#2A2237","purple-900":"#1E1926","purple-950":"#121017","pink-050":"#FCEDF5","pink-100":"#F9DAEA","pink-150":"#F7C7E0","pink-200":"#F4B4D5","pink-250":"#F1A1CA","pink-300":"#EE8CBF","pink-350":"#EA77B3","pink-400":"#E760A6","pink-450":"#E24797","pink-500":"#CD4089","pink-550":"#B8397B","pink-600":"#A3336D","pink-650":"#86355E","pink-700":"#6E334F","pink-750":"#582E42","pink-800":"#442834","pink-850":"#332028","pink-900":"#24181D","pink-950":"#160F12","black-000":"#00000000","black-050":"#0000000D","black-100":"#0000001A","black-150":"#00000026","black-200":"#00000033","black-250":"#00000040","black-300":"#0000004D","black-350":"#00000059","black-400":"#00000066","black-450":"#00000073","black-500":"#00000080","black-550":"#0000008C","black-600":"#00000099","black-650":"#000000A6","black-700":"#000000B3","black-750":"#000000BF","black-800":"#000000CC","black-850":"#000000D9","black-900":"#000000E6","black-950":"#000000F2","white-000":"#FFFFFF","white-050":"#FFFFFF0D","white-100":"#FFFFFF1A","white-150":"#FFFFFF26","white-200":"#FFFFFF33","white-250":"#FFFFFF40","white-300":"#FFFFFF4D","white-350":"#FFFFFF59","white-400":"#FFFFFF66","white-450":"#FFFFFF73","white-500":"#FFFFFF80","white-550":"#FFFFFF8C","white-600":"#FFFFFF99","white-650":"#FFFFFFA6","white-700":"#FFFFFFB3","white-750":"#FFFFFFBF","white-800":"#FFFFFFCC","white-850":"#FFFFFFD9","white-900":"#FFFFFFE6","white-950":"#FFFFFFF2"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"font":{"sizes":{"xs":"0.75rem","sm":"0.875rem","md":"1rem","lg":"1.125rem","ml":"0.938rem","xl":"1.25rem","t":"0.6875rem","s":"0.75rem","h1":"2rem","h2":"1.75rem","h3":"1.5rem","h4":"1.375rem","h5":"1.25rem","h6":"1.125rem","xl-alt":"5rem","lg-alt":"4.5rem","md-alt":"4rem","sm-alt":"3.5rem","xs-alt":"3rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","st":"0.25rem","4xs":"0.125rem","xxxs":"0.25rem","xxs":"0.375rem","xs":"0.5rem","sm":"0.75rem","base":"1rem","md":"1.5rem","lg":"2rem","xl":"2.5rem","xxl":"3rem","xxxl":"3.5rem","4xl":"4rem","5xl":"4.5rem","6xl":"6rem","7xl":"7.5rem"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#2F3033","secondary":"#252627","tertiary":"#1B1C1D"},"semantic":{"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#45474A","secondary-hover":"#3A3B3E","tertiary":"#3A3B3E","tertiary-hover":"#2F3033"},"contextual":{"primary":"#FFFFFF0D","primary-hover":"#FFFFFF1A"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#344D24","secondary-hover":"#2E4022","tertiary":"#2E4022","tertiary-hover":"#27341F"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#524620","secondary-hover":"#443B20","tertiary":"#443B20","tertiary-hover":"#36301D"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#802820","secondary-hover":"#662820","tertiary":"#662820","tertiary-hover":"#4F231E"},"disabled":{"primary":"#3A3B3E","secondary":"#2F3033"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}},"content":{"logo1":"#95ABFF","logo2":"#95ABFF","semantic":{"brand":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-brand":"#EAF1FB"},"neutral":{"primary":"#F0F1F2","secondary":"#E1E2E5","tertiary":"#B5B9BE","on-neutral":"#F0F1F2"},"contextual":{"primary":"#000000D9"},"info":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-info":"#EAF1FB"},"success":{"primary":"#E4F7D4","secondary":"#C8EEA8","tertiary":"#72CF27","on-success":"#E4F7D4"},"warning":{"primary":"#FFF1BD","secondary":"#FFE176","tertiary":"#E3B205","on-warning":"#FFF1BD"},"error":{"primary":"#FCEDED","secondary":"#FADBDB","tertiary":"#F2A4A4","on-error":"#FCEDED"},"disabled":{"primary":"#5C5F63","secondary":"#0000004D"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}},"border":{"surface":{"primary":"#3A3B3E"},"semantic":{"brand":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"contextual":{"primary":"#00000033"},"neutral":{"primary":"#80848A","secondary":"#5C5F63","tertiary":"#45474A"},"info":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"success":{"primary":"#51941C","secondary":"#3A6A14","tertiary":"#344D24"},"warning":{"primary":"#A27F03","secondary":"#745B03","tertiary":"#524620"},"error":{"primary":"#E55050","secondary":"#C00101","tertiary":"#802820"},"disabled":{"primary":"#2F3033"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}}}}}}; +export const tokens = {"themes":{"default":{"globals":{"colors":{"logo-1-light":"#377FDB","logo-2-light":"#377FDB","logo-1-dark":"#C1D6F2","logo-2-dark":"#C1D6F2","brand-050":"#EAF1FB","brand-100":"#D5E4F7","brand-150":"#C0D6F4","brand-200":"#ABC9F0","brand-250":"#96BCEC","brand-300":"#80AEE8","brand-350":"#6CA0E4","brand-400":"#5693E0","brand-450":"#4085DC","brand-500":"#2976D8","brand-550":"#1167D4","brand-600":"#0659C5","brand-650":"#1A509F","brand-700":"#20467F","brand-750":"#203C63","brand-800":"#1D314C","brand-850":"#1A2638","brand-900":"#141C28","brand-950":"#0C1117","gray-000":"#FFFFFF","gray-025":"#F7F8F8","gray-050":"#F0F1F2","gray-100":"#E1E2E5","gray-150":"#D2D4D8","gray-200":"#C4C7CB","gray-250":"#B5B9BE","gray-300":"#A7ACB2","gray-350":"#999EA5","gray-400":"#8D9197","gray-450":"#80848A","gray-500":"#74777C","gray-550":"#686B6F","gray-600":"#5C5F63","gray-650":"#505356","gray-700":"#45474A","gray-750":"#3A3B3E","gray-800":"#2F3033","gray-850":"#252627","gray-900":"#1B1C1D","gray-950":"#101112","gray-1000":"#000000","info-050":"#EAF1FB","info-100":"#D5E4F7","info-150":"#C0D6F4","info-200":"#ABC9F0","info-250":"#96BCEC","info-300":"#80AEE8","info-350":"#6CA0E4","info-400":"#5693E0","info-450":"#4085DC","info-500":"#2976D8","info-550":"#1167D4","info-600":"#0659C5","info-650":"#1A509F","info-700":"#20467F","info-750":"#203C63","info-800":"#1D314C","info-850":"#1A2638","info-900":"#141C28","info-950":"#0C1117","success-050":"#E4F7D4","success-100":"#C8EEA8","success-150":"#AAE579","success-200":"#89DC45","success-250":"#72CF27","success-300":"#6AC024","success-350":"#61B121","success-400":"#59A21E","success-450":"#51941C","success-500":"#4B851A","success-550":"#427816","success-600":"#3A6A14","success-650":"#385C1F","success-700":"#344D24","success-750":"#2E4022","success-800":"#27341F","success-850":"#20281A","success-900":"#181D15","success-950":"#10120E","warning-050":"#FFF1BD","warning-100":"#FFE176","warning-150":"#FFCF25","warning-200":"#F4BF06","warning-250":"#E3B205","warning-300":"#D3A504","warning-350":"#C29805","warning-400":"#B28C03","warning-450":"#A27F03","warning-500":"#937303","warning-550":"#836703","warning-600":"#745B03","warning-650":"#625019","warning-700":"#524620","warning-750":"#443B20","warning-800":"#36301D","warning-850":"#2A2619","warning-900":"#1E1C13","warning-950":"#12110C","error-050":"#FCEDED","error-100":"#FADBDB","error-150":"#F7C9C9","error-200":"#F5B7B7","error-250":"#F2A4A4","error-300":"#EF9191","error-350":"#EC7D7D","error-400":"#E96868","error-450":"#E55050","error-500":"#E13131","error-550":"#D80000","error-600":"#C00101","error-650":"#9E2219","error-700":"#802820","error-750":"#662820","error-800":"#4F231E","error-850":"#3B1D19","error-900":"#2A1614","error-950":"#1A0E0C","red-050":"#FDEDED","red-100":"#FADBDB","red-150":"#F8C9C9","red-200":"#F5B7B6","red-250":"#F3A4A3","red-300":"#F09190","red-350":"#EE7C7B","red-400":"#EB6665","red-450":"#E74E4D","red-500":"#D83F3D","red-550":"#C23837","red-600":"#AC3231","red-650":"#8D3531","red-700":"#73332F","red-750":"#5B2F2B","red-800":"#472826","red-850":"#35211F","red-900":"#251817","red-950":"#160F0E","orange-050":"#FDEEE2","orange-100":"#FCDDC5","orange-150":"#FACBA8","orange-200":"#F8B98B","orange-250":"#F6A76A","orange-300":"#F4934B","orange-350":"#F27E27","orange-400":"#E76E12","orange-450":"#D26411","orange-500":"#BE5B0F","orange-550":"#AA510E","orange-600":"#97480C","orange-650":"#7E431D","orange-700":"#673C22","orange-750":"#533422","orange-800":"#412C1F","orange-850":"#31231B","orange-900":"#221A14","orange-950":"#15100C","brown-050":"#F3F0EF","brown-100":"#E7E1DF","brown-150":"#DCD2CF","brown-200":"#D0C4BF","brown-250":"#C5B6B0","brown-300":"#BAA7A1","brown-350":"#AF9992","brown-400":"#A48B83","brown-450":"#997E74","brown-500":"#8F7065","brown-550":"#846357","brown-600":"#7A5649","brown-650":"#684C42","brown-700":"#57423C","brown-750":"#463833","brown-800":"#382E2A","brown-850":"#2B2422","brown-900":"#1F1B19","brown-950":"#121010","yellow-050":"#FAF0D3","yellow-100":"#F5E2A4","yellow-150":"#F0D275","yellow-200":"#EBC242","yellow-250":"#E4B213","yellow-300":"#D4A511","yellow-350":"#C39810","yellow-400":"#B38B0F","yellow-450":"#A37F0D","yellow-500":"#93730C","yellow-550":"#84670B","yellow-600":"#755B0A","yellow-650":"#63501C","yellow-700":"#534521","yellow-750":"#443A21","yellow-800":"#36301F","yellow-850":"#29261A","yellow-900":"#1D1C14","yellow-950":"#12110C","green-050":"#E2F6E5","green-100":"#C5ECCA","green-150":"#A7E3AF","green-200":"#89D894","green-250":"#67CE75","green-300":"#4DC25D","green-350":"#48B257","green-400":"#41A44F","green-450":"#3B9548","green-500":"#368741","green-550":"#30793A","green-600":"#2B6B33","green-650":"#2F5C34","green-700":"#2E4E31","green-750":"#2A412C","green-800":"#253426","green-850":"#1E281F","green-900":"#171D17","green-950":"#0F120F","blue-1-050":"#EBF1FF","blue-1-100":"#D6E3FE","blue-1-150":"#C2D5FE","blue-1-200":"#ADC7FE","blue-1-250":"#99B8FD","blue-1-300":"#84AAFD","blue-1-350":"#6F9BFD","blue-1-400":"#5A8DFB","blue-1-450":"#437DFC","blue-1-500":"#3D71E4","blue-1-550":"#3665CC","blue-1-600":"#305AB5","blue-1-650":"#315093","blue-1-700":"#2E4675","blue-1-750":"#293B5E","blue-1-800":"#243048","blue-1-850":"#1E2635","blue-1-900":"#171C25","blue-1-950":"#0E1116","blue-2-050":"#E2F4F9","blue-2-100":"#C5E9F3","blue-2-150":"#A7DDED","blue-2-200":"#88D1E6","blue-2-250":"#68C5E0","blue-2-300":"#48B8D9","blue-2-350":"#3BAACA","blue-2-400":"#359CB9","blue-2-450":"#318EA9","blue-2-500":"#2C8199","blue-2-550":"#277389","blue-2-600":"#236679","blue-2-650":"#2A5866","blue-2-700":"#2A4B55","blue-2-750":"#283F47","blue-2-800":"#233337","blue-2-850":"#1D272A","blue-2-900":"#161C1E","blue-2-950":"#0E1112","purple-050":"#F6EEFF","purple-100":"#ECDCFF","purple-150":"#E3CBFE","purple-200":"#DAB9FE","purple-250":"#D0A7FE","purple-300":"#C795FE","purple-350":"#BD83FD","purple-400":"#B36FFD","purple-450":"#A85BFD","purple-500":"#9B4BF3","purple-550":"#8B43DA","purple-600":"#7B3CC1","purple-650":"#673C9B","purple-700":"#56387D","purple-750":"#463162","purple-800":"#382A4A","purple-850":"#2A2237","purple-900":"#1E1926","purple-950":"#121017","pink-050":"#FCEDF5","pink-100":"#F9DAEA","pink-150":"#F7C7E0","pink-200":"#F4B4D5","pink-250":"#F1A1CA","pink-300":"#EE8CBF","pink-350":"#EA77B3","pink-400":"#E760A6","pink-450":"#E24797","pink-500":"#CD4089","pink-550":"#B8397B","pink-600":"#A3336D","pink-650":"#86355E","pink-700":"#6E334F","pink-750":"#582E42","pink-800":"#442834","pink-850":"#332028","pink-900":"#24181D","pink-950":"#160F12","black-000":"#1B1C1D00","black-050":"#1B1C1D0D","black-100":"#1B1C1D1A","black-150":"#1B1C1D26","black-200":"#1B1C1D33","black-250":"#1B1C1D40","black-300":"#1B1C1D4D","black-350":"#1B1C1D59","black-400":"#1B1C1D66","black-450":"#1B1C1D73","black-500":"#1B1C1D80","black-550":"#1B1C1D8C","black-600":"#1B1C1D99","black-650":"#1B1C1DA6","black-700":"#1B1C1DB2","black-750":"#1B1C1DBF","black-800":"#1B1C1DCC","black-850":"#1B1C1DD9","black-900":"#1B1C1DE5","black-950":"#101112F2","white-000":"#F7F8F800","white-050":"#F7F8F80D","white-100":"#F7F8F81A","white-150":"#F7F8F826","white-200":"#F7F8F833","white-250":"#F7F8F840","white-300":"#F7F8F84D","white-350":"#F7F8F859","white-400":"#F7F8F866","white-450":"#F7F8F873","white-500":"#F7F8F880","white-550":"#F7F8F88C","white-600":"#F7F8F899","white-650":"#F7F8F8A6","white-700":"#F7F8F8B2","white-750":"#F7F8F8BF","white-800":"#F7F8F8CC","white-850":"#F7F8F8D9","white-900":"#F7F8F8E5","white-950":"#F7F8F8F2","white-975":"#F7F8F8F9"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"font":{"sizes":{"xs":"0.75rem","sm":"0.875rem","md":"1rem","lg":"1.125rem","ml":"0.938rem","xl":"1.25rem","t":"0.6875rem","s":"0.75rem","h1":"2rem","h2":"1.75rem","h3":"1.5rem","h4":"1.375rem","h5":"1.25rem","h6":"1.125rem","xl-alt":"5rem","lg-alt":"4.5rem","md-alt":"4rem","sm-alt":"3.5rem","xs-alt":"3rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","st":"0.25rem","4xs":"0.125rem","3xs":"0.25rem","2xs":"0.375rem","xxxs":"0.25rem","xxs":"0.375rem","xs":"0.5rem","sm":"0.75rem","base":"1rem","md":"1.5rem","lg":"2rem","xl":"2.5rem","xxl":"3rem","xxxl":"3.5rem","2xl":"3rem","3xl":"3.5rem","4xl":"4rem","5xl":"4.5rem","6xl":"6rem","7xl":"7.5rem"},"breakpoints":{"xs":"0px","sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#FFFFFF","secondary":"#FFFFFF","tertiary":"#F7F8F8"},"semantic":{"overlay":{"primary":"#1B1C1D0D","primary-hover":"#1B1C1D1A"},"contextual":{"primary":"#1B1C1D0D","primary-hover":"#1B1C1D1A"},"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#E1E2E5","secondary-hover":"#D2D4D8","tertiary":"#F0F1F2","tertiary-hover":"#E1E2E5"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#C8EEA8","secondary-hover":"#AAE579","tertiary":"#E4F7D4","tertiary-hover":"#C8EEA8"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#FFE176","secondary-hover":"#FFCF25","tertiary":"#FFF1BD","tertiary-hover":"#FFE176"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#FADBDB","secondary-hover":"#F7C9C9","tertiary":"#FCEDED","tertiary-hover":"#FADBDB"},"disabled":{"primary":"#E1E2E5","secondary":"#F0F1F2"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}}},"content":{"logo1":"#377FDB","logo2":"#377FDB","semantic":{"contextual":{"primary":"#F7F8F8F2"},"overlay":{"primary":"#F7F8F8F2"},"brand":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#1167D4","on-brand":"#EAF1FB"},"neutral":{"primary":"#252627","secondary":"#5C5F63","tertiary":"#686B6F","on-neutral":"#F0F1F2"},"info":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#1167D4","on-info":"#EAF1FB"},"success":{"primary":"#344D24","secondary":"#3A6A14","tertiary":"#427816","on-success":"#E4F7D4"},"warning":{"primary":"#524620","secondary":"#745B03","tertiary":"#836703","on-warning":"#FFF1BD"},"error":{"primary":"#802820","secondary":"#C00101","tertiary":"#D80000","on-error":"#FCEDED"},"disabled":{"primary":"#A7ACB2","secondary":"#F7F8F880"}},"palette":{"brand":{"primary":"#2976D8"},"red":{"primary":"#D83F3D"},"orange":{"primary":"#BE5B0F"},"brown":{"primary":"#8F7065"},"yellow":{"primary":"#93730C"},"green":{"primary":"#368741"},"blue-1":{"primary":"#3D71E4"},"blue-2":{"primary":"#2C8199"},"purple":{"primary":"#9B4BF3"},"pink":{"primary":"#CD4089"},"gray":{"primary":"#74777C"}}},"border":{"surface":{"primary":"#E1E2E5"},"semantic":{"contextual":{"primary":"#F7F8F833"},"overlay":{"primary":"#F7F8F833"},"brand":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"neutral":{"primary":"#686B6F","secondary":"#A7ACB2","tertiary":"#D2D4D8"},"info":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"success":{"primary":"#427816","secondary":"#6AC024","tertiary":"#AAE579"},"warning":{"primary":"#836703","secondary":"#D3A504","tertiary":"#FFCF25"},"error":{"primary":"#D80000","secondary":"#EF9191","tertiary":"#F7C9C9"},"disabled":{"primary":"#E1E2E5"}}}},"components":{"tooltip":{"border-radius":"0.5rem","background-color":"#F0F1F2","border-color":"#D2D4D8","color":"#686B6F","font-size":"0.75rem","padding":"1rem","max-width":"150px"},"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#F0F1F2","color":"#252627","font-weight":400,"icon-size":"19px","progress-bar-height":"3px"},"modal":{"background-color":"#FFFFFF","backdrop-color":"#00000099","border-radius":"4px","border-color":"#E1E2E5","box-shadow":"0px 1px 2px 0px #0C1A2B4D","color":"#252627","title-font-weight":600,"content-font-size":"0.875rem","content-font-weight":400,"content-color":"#252627","width-small":"300px","width-medium":"600px","width-large":"800px","width-extra-large":"75%"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-width--hover":"1px","border-width--focus":"1px","border-color":"#D2D4D8","border-color--hover":"#D2D4D8","border-color--focus":"#1167D4","border-color--disabled":"#E1E2E5","border-style":"solid","label-color":"#686B6F","label-color--focus":"#20467F","background-color":"#FFFFFF","value-color":"#252627","value-color--disabled":"#5C5F63"},"forms-switch":{"accent-color":"#1167D4","rail-background-color":"#686B6F","rail-background-color--disabled":"#A7ACB2","rail-border-radius":"50vw","handle-background-color":"#F7F8F8F2","handle-background-color--disabled":"#F7F8F880","handle-border-radius":"50%"},"forms-select":{"border-color":"#D2D4D8","border-color--focus":"#1167D4","border-color--hover":"#D2D4D8","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","border-width--focus":"1px","border-width--hover":"1px","value-color":"#252627","value-color--disabled":"#A7ACB2","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#1B1C1D0D","item-background-color--selected":"#D5E4F7","item-color":"#252627","item-color--disabled":"#F7F8F880","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color":"#686B6F","label-color--focus":"#20467F","multi-pill-background-color":"#F0F1F2","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"1rem"},"forms-radio":{},"forms-labelledbox":{"label-color--small":"#686B6F","label-color--big":"#252627","label-color--small--disabled":"#5C5F63","label-color--big--disabled":"#5C5F63"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"4px","border-radius--focus":"4px","border-width":"1px","border-width--hover":"1px","border-width--focus":"1px","border-color":"#D2D4D8","border-color--hover":"#D2D4D8","border-color--focus":"#1167D4","border-style":"solid","placeholder-color":"#686B6F","label-color":"#686B6F","label-color--focus":"#20467F","background-color":"#FFFFFF","value-color":"#252627","value-color--disabled":"#A7ACB2"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#D2D4D8","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EAF1FB","color":"#252627","color--success":"#427816","color--error":"#D80000","padding":"1rem","accent-color":"#1167D4","text-color":"#686B6F","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#252627","file-text-weight":300,"file-border-color":"#D2D4D8","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#686B6F"},"forms-field":{"width":"292px","font-size":"0.75rem","color":"#5C5F63","color--error":"#C00101","color--success":"#3A6A14","color--disabled":"#A7ACB2"},"forms-datepicker":{"border-color":"#D2D4D8","border-color--disabled":"#D2D4D8","border-color--focus":"#1167D4","border-color--hover":"#D2D4D8","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","border-width--focus":"1px","border-width--hover":"1px","value-color":"#686B6F","value-color--disabled":"#A7ACB2","font-size":"1.125rem","height":"3.5rem","item-background-color--hover":"#E1E2E5","item-background-color--selected":"#EAF1FB","item-color":"#252627","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EAF1FB","range-selection-background-color--disabled":"#F0F1F2","grid-cell--border-color--today":"#1167D4","grid-cell--color--today":"#20467F","label-color--focus":"#20467F"},"forms-checkbox":{"background-color--hover":"#E1E2E5","background-color":"#FFFFFF","font-size":"0.75rem","font-weight":500,"color":"#252627","border-color":"#686B6F","border-color--hover":"#686B6F","border-color--focus":"#20467F","border-radius":"2px","border-width":"1.5px","border-width--hover":"1px","accent-color":"#1167D4","accent-color--disabled":"#A7ACB2","checkmark-color":"#F7F8F8F2","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"4px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.875rem","small-icon-font-size":"1rem","nano-font-size":"0.75rem","nano-icon-font-size":"1rem","font-weight":500,"font-family":"\"Roboto Flex Variable\", sans-serif"},"alert":{"background-color":"#F0F1F2","border-radius":"4px","border-color":"#686B6F","border-left-color":"#686B6F","font-weight":500,"color":"#252627","icon-size":"19px","additional-font-weight":400,"additional-color":"#252627"}}},"dark":{"globals":{"colors":{"logo-1-light":"#377FDB","logo-2-light":"#377FDB","logo-1-dark":"#C1D6F2","logo-2-dark":"#C1D6F2","brand-050":"#EAF1FB","brand-100":"#D5E4F7","brand-150":"#C0D6F4","brand-200":"#ABC9F0","brand-250":"#96BCEC","brand-300":"#80AEE8","brand-350":"#6CA0E4","brand-400":"#5693E0","brand-450":"#4085DC","brand-500":"#2976D8","brand-550":"#1167D4","brand-600":"#0659C5","brand-650":"#1A509F","brand-700":"#20467F","brand-750":"#203C63","brand-800":"#1D314C","brand-850":"#1A2638","brand-900":"#141C28","brand-950":"#0C1117","gray-000":"#FFFFFF","gray-025":"#F7F8F8","gray-050":"#F0F1F2","gray-100":"#E1E2E5","gray-150":"#D2D4D8","gray-200":"#C4C7CB","gray-250":"#B5B9BE","gray-300":"#A7ACB2","gray-350":"#999EA5","gray-400":"#8D9197","gray-450":"#80848A","gray-500":"#74777C","gray-550":"#686B6F","gray-600":"#5C5F63","gray-650":"#505356","gray-700":"#45474A","gray-750":"#3A3B3E","gray-800":"#2F3033","gray-850":"#252627","gray-900":"#1B1C1D","gray-950":"#101112","gray-1000":"#000000","info-050":"#EAF1FB","info-100":"#D5E4F7","info-150":"#C0D6F4","info-200":"#ABC9F0","info-250":"#96BCEC","info-300":"#80AEE8","info-350":"#6CA0E4","info-400":"#5693E0","info-450":"#4085DC","info-500":"#2976D8","info-550":"#1167D4","info-600":"#0659C5","info-650":"#1A509F","info-700":"#20467F","info-750":"#203C63","info-800":"#1D314C","info-850":"#1A2638","info-900":"#141C28","info-950":"#0C1117","success-050":"#E4F7D4","success-100":"#C8EEA8","success-150":"#AAE579","success-200":"#89DC45","success-250":"#72CF27","success-300":"#6AC024","success-350":"#61B121","success-400":"#59A21E","success-450":"#51941C","success-500":"#4B851A","success-550":"#427816","success-600":"#3A6A14","success-650":"#385C1F","success-700":"#344D24","success-750":"#2E4022","success-800":"#27341F","success-850":"#20281A","success-900":"#181D15","success-950":"#10120E","warning-050":"#FFF1BD","warning-100":"#FFE176","warning-150":"#FFCF25","warning-200":"#F4BF06","warning-250":"#E3B205","warning-300":"#D3A504","warning-350":"#C29805","warning-400":"#B28C03","warning-450":"#A27F03","warning-500":"#937303","warning-550":"#836703","warning-600":"#745B03","warning-650":"#625019","warning-700":"#524620","warning-750":"#443B20","warning-800":"#36301D","warning-850":"#2A2619","warning-900":"#1E1C13","warning-950":"#12110C","error-050":"#FCEDED","error-100":"#FADBDB","error-150":"#F7C9C9","error-200":"#F5B7B7","error-250":"#F2A4A4","error-300":"#EF9191","error-350":"#EC7D7D","error-400":"#E96868","error-450":"#E55050","error-500":"#E13131","error-550":"#D80000","error-600":"#C00101","error-650":"#9E2219","error-700":"#802820","error-750":"#662820","error-800":"#4F231E","error-850":"#3B1D19","error-900":"#2A1614","error-950":"#1A0E0C","red-050":"#FDEDED","red-100":"#FADBDB","red-150":"#F8C9C9","red-200":"#F5B7B6","red-250":"#F3A4A3","red-300":"#F09190","red-350":"#EE7C7B","red-400":"#EB6665","red-450":"#E74E4D","red-500":"#D83F3D","red-550":"#C23837","red-600":"#AC3231","red-650":"#8D3531","red-700":"#73332F","red-750":"#5B2F2B","red-800":"#472826","red-850":"#35211F","red-900":"#251817","red-950":"#160F0E","orange-050":"#FDEEE2","orange-100":"#FCDDC5","orange-150":"#FACBA8","orange-200":"#F8B98B","orange-250":"#F6A76A","orange-300":"#F4934B","orange-350":"#F27E27","orange-400":"#E76E12","orange-450":"#D26411","orange-500":"#BE5B0F","orange-550":"#AA510E","orange-600":"#97480C","orange-650":"#7E431D","orange-700":"#673C22","orange-750":"#533422","orange-800":"#412C1F","orange-850":"#31231B","orange-900":"#221A14","orange-950":"#15100C","brown-050":"#F3F0EF","brown-100":"#E7E1DF","brown-150":"#DCD2CF","brown-200":"#D0C4BF","brown-250":"#C5B6B0","brown-300":"#BAA7A1","brown-350":"#AF9992","brown-400":"#A48B83","brown-450":"#997E74","brown-500":"#8F7065","brown-550":"#846357","brown-600":"#7A5649","brown-650":"#684C42","brown-700":"#57423C","brown-750":"#463833","brown-800":"#382E2A","brown-850":"#2B2422","brown-900":"#1F1B19","brown-950":"#121010","yellow-050":"#FAF0D3","yellow-100":"#F5E2A4","yellow-150":"#F0D275","yellow-200":"#EBC242","yellow-250":"#E4B213","yellow-300":"#D4A511","yellow-350":"#C39810","yellow-400":"#B38B0F","yellow-450":"#A37F0D","yellow-500":"#93730C","yellow-550":"#84670B","yellow-600":"#755B0A","yellow-650":"#63501C","yellow-700":"#534521","yellow-750":"#443A21","yellow-800":"#36301F","yellow-850":"#29261A","yellow-900":"#1D1C14","yellow-950":"#12110C","green-050":"#E2F6E5","green-100":"#C5ECCA","green-150":"#A7E3AF","green-200":"#89D894","green-250":"#67CE75","green-300":"#4DC25D","green-350":"#48B257","green-400":"#41A44F","green-450":"#3B9548","green-500":"#368741","green-550":"#30793A","green-600":"#2B6B33","green-650":"#2F5C34","green-700":"#2E4E31","green-750":"#2A412C","green-800":"#253426","green-850":"#1E281F","green-900":"#171D17","green-950":"#0F120F","blue-1-050":"#EBF1FF","blue-1-100":"#D6E3FE","blue-1-150":"#C2D5FE","blue-1-200":"#ADC7FE","blue-1-250":"#99B8FD","blue-1-300":"#84AAFD","blue-1-350":"#6F9BFD","blue-1-400":"#5A8DFB","blue-1-450":"#437DFC","blue-1-500":"#3D71E4","blue-1-550":"#3665CC","blue-1-600":"#305AB5","blue-1-650":"#315093","blue-1-700":"#2E4675","blue-1-750":"#293B5E","blue-1-800":"#243048","blue-1-850":"#1E2635","blue-1-900":"#171C25","blue-1-950":"#0E1116","blue-2-050":"#E2F4F9","blue-2-100":"#C5E9F3","blue-2-150":"#A7DDED","blue-2-200":"#88D1E6","blue-2-250":"#68C5E0","blue-2-300":"#48B8D9","blue-2-350":"#3BAACA","blue-2-400":"#359CB9","blue-2-450":"#318EA9","blue-2-500":"#2C8199","blue-2-550":"#277389","blue-2-600":"#236679","blue-2-650":"#2A5866","blue-2-700":"#2A4B55","blue-2-750":"#283F47","blue-2-800":"#233337","blue-2-850":"#1D272A","blue-2-900":"#161C1E","blue-2-950":"#0E1112","purple-050":"#F6EEFF","purple-100":"#ECDCFF","purple-150":"#E3CBFE","purple-200":"#DAB9FE","purple-250":"#D0A7FE","purple-300":"#C795FE","purple-350":"#BD83FD","purple-400":"#B36FFD","purple-450":"#A85BFD","purple-500":"#9B4BF3","purple-550":"#8B43DA","purple-600":"#7B3CC1","purple-650":"#673C9B","purple-700":"#56387D","purple-750":"#463162","purple-800":"#382A4A","purple-850":"#2A2237","purple-900":"#1E1926","purple-950":"#121017","pink-050":"#FCEDF5","pink-100":"#F9DAEA","pink-150":"#F7C7E0","pink-200":"#F4B4D5","pink-250":"#F1A1CA","pink-300":"#EE8CBF","pink-350":"#EA77B3","pink-400":"#E760A6","pink-450":"#E24797","pink-500":"#CD4089","pink-550":"#B8397B","pink-600":"#A3336D","pink-650":"#86355E","pink-700":"#6E334F","pink-750":"#582E42","pink-800":"#442834","pink-850":"#332028","pink-900":"#24181D","pink-950":"#160F12","black-000":"#1B1C1D00","black-050":"#1B1C1D0D","black-100":"#1B1C1D1A","black-150":"#1B1C1D26","black-200":"#1B1C1D33","black-250":"#1B1C1D40","black-300":"#1B1C1D4D","black-350":"#1B1C1D59","black-400":"#1B1C1D66","black-450":"#1B1C1D73","black-500":"#1B1C1D80","black-550":"#1B1C1D8C","black-600":"#1B1C1D99","black-650":"#1B1C1DA6","black-700":"#1B1C1DB2","black-750":"#1B1C1DBF","black-800":"#1B1C1DCC","black-850":"#1B1C1DD9","black-900":"#1B1C1DE5","black-950":"#101112F2","white-000":"#F7F8F800","white-050":"#F7F8F80D","white-100":"#F7F8F81A","white-150":"#F7F8F826","white-200":"#F7F8F833","white-250":"#F7F8F840","white-300":"#F7F8F84D","white-350":"#F7F8F859","white-400":"#F7F8F866","white-450":"#F7F8F873","white-500":"#F7F8F880","white-550":"#F7F8F88C","white-600":"#F7F8F899","white-650":"#F7F8F8A6","white-700":"#F7F8F8B2","white-750":"#F7F8F8BF","white-800":"#F7F8F8CC","white-850":"#F7F8F8D9","white-900":"#F7F8F8E5","white-950":"#F7F8F8F2","white-975":"#F7F8F8F9"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"font":{"sizes":{"xs":"0.75rem","sm":"0.875rem","md":"1rem","lg":"1.125rem","ml":"0.938rem","xl":"1.25rem","t":"0.6875rem","s":"0.75rem","h1":"2rem","h2":"1.75rem","h3":"1.5rem","h4":"1.375rem","h5":"1.25rem","h6":"1.125rem","xl-alt":"5rem","lg-alt":"4.5rem","md-alt":"4rem","sm-alt":"3.5rem","xs-alt":"3rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","st":"0.25rem","4xs":"0.125rem","3xs":"0.25rem","2xs":"0.375rem","xxxs":"0.25rem","xxs":"0.375rem","xs":"0.5rem","sm":"0.75rem","base":"1rem","md":"1.5rem","lg":"2rem","xl":"2.5rem","xxl":"3rem","xxxl":"3.5rem","2xl":"3rem","3xl":"3.5rem","4xl":"4rem","5xl":"4.5rem","6xl":"6rem","7xl":"7.5rem"},"breakpoints":{"xs":"0px","sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#2F3033","secondary":"#252627","tertiary":"#1B1C1D"},"semantic":{"contextual":{"primary":"#F7F8F80D","primary-hover":"#F7F8F81A"},"overlay":{"primary":"#F7F8F80D","primary-hover":"#F7F8F81A"},"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#45474A","secondary-hover":"#3A3B3E","tertiary":"#3A3B3E","tertiary-hover":"#2F3033"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#344D24","secondary-hover":"#2E4022","tertiary":"#2E4022","tertiary-hover":"#27341F"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#524620","secondary-hover":"#443B20","tertiary":"#443B20","tertiary-hover":"#36301D"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#802820","secondary-hover":"#662820","tertiary":"#662820","tertiary-hover":"#4F231E"},"disabled":{"primary":"#3A3B3E","secondary":"#2F3033"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}},"content":{"logo1":"#C1D6F2","logo2":"#C1D6F2","semantic":{"contextual":{"primary":"#1B1C1DD9"},"overlay":{"primary":"#1B1C1DD9"},"brand":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-brand":"#EAF1FB"},"neutral":{"primary":"#F0F1F2","secondary":"#E1E2E5","tertiary":"#B5B9BE","on-neutral":"#F0F1F2"},"info":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-info":"#EAF1FB"},"success":{"primary":"#E4F7D4","secondary":"#C8EEA8","tertiary":"#72CF27","on-success":"#E4F7D4"},"warning":{"primary":"#FFF1BD","secondary":"#FFE176","tertiary":"#E3B205","on-warning":"#FFF1BD"},"error":{"primary":"#FCEDED","secondary":"#FADBDB","tertiary":"#F2A4A4","on-error":"#FCEDED"},"disabled":{"primary":"#5C5F63","secondary":"#1B1C1D4D"}},"palette":{"brand":{"primary":"#2976D8"},"red":{"primary":"#D83F3D"},"orange":{"primary":"#BE5B0F"},"brown":{"primary":"#8F7065"},"yellow":{"primary":"#93730C"},"green":{"primary":"#368741"},"blue-1":{"primary":"#3D71E4"},"blue-2":{"primary":"#2C8199"},"purple":{"primary":"#9B4BF3"},"pink":{"primary":"#CD4089"},"gray":{"primary":"#74777C"}}},"border":{"surface":{"primary":"#3A3B3E"},"semantic":{"contextual":{"primary":"#1B1C1D33"},"overlay":{"primary":"#1B1C1D33"},"brand":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"neutral":{"primary":"#80848A","secondary":"#5C5F63","tertiary":"#45474A"},"info":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"success":{"primary":"#51941C","secondary":"#3A6A14","tertiary":"#344D24"},"warning":{"primary":"#A27F03","secondary":"#745B03","tertiary":"#524620"},"error":{"primary":"#E55050","secondary":"#C00101","tertiary":"#802820"},"disabled":{"primary":"#2F3033"}}}},"components":{}}}}; diff --git a/packages/react/src/cunningham-tokens.scss b/packages/react/src/cunningham-tokens.scss index 7ab8c0d..3e0edf8 100644 --- a/packages/react/src/cunningham-tokens.scss +++ b/packages/react/src/cunningham-tokens.scss @@ -2,10 +2,10 @@ $themes: ( 'default': ( 'globals': ( 'colors': ( - 'logo-1': #377FDB, - 'logo-2': #377FDB, - 'logo-1-dark': #95ABFF, - 'logo-2-dark': #95ABFF, + 'logo-1-light': #377FDB, + 'logo-2-light': #377FDB, + 'logo-1-dark': #C1D6F2, + 'logo-2-dark': #C1D6F2, 'brand-050': #EAF1FB, 'brand-100': #D5E4F7, 'brand-150': #C0D6F4, @@ -294,46 +294,47 @@ $themes: ( 'pink-850': #332028, 'pink-900': #24181D, 'pink-950': #160F12, - 'black-000': #00000000, - 'black-050': #0000000D, - 'black-100': #0000001A, - 'black-150': #00000026, - 'black-200': #00000033, - 'black-250': #00000040, - 'black-300': #0000004D, - 'black-350': #00000059, - 'black-400': #00000066, - 'black-450': #00000073, - 'black-500': #00000080, - 'black-550': #0000008C, - 'black-600': #00000099, - 'black-650': #000000A6, - 'black-700': #000000B3, - 'black-750': #000000BF, - 'black-800': #000000CC, - 'black-850': #000000D9, - 'black-900': #000000E6, - 'black-950': #000000F2, - 'white-000': #FFFFFF, - 'white-050': #FFFFFF0D, - 'white-100': #FFFFFF1A, - 'white-150': #FFFFFF26, - 'white-200': #FFFFFF33, - 'white-250': #FFFFFF40, - 'white-300': #FFFFFF4D, - 'white-350': #FFFFFF59, - 'white-400': #FFFFFF66, - 'white-450': #FFFFFF73, - 'white-500': #FFFFFF80, - 'white-550': #FFFFFF8C, - 'white-600': #FFFFFF99, - 'white-650': #FFFFFFA6, - 'white-700': #FFFFFFB3, - 'white-750': #FFFFFFBF, - 'white-800': #FFFFFFCC, - 'white-850': #FFFFFFD9, - 'white-900': #FFFFFFE6, - 'white-950': #FFFFFFF2 + 'black-000': #1B1C1D00, + 'black-050': #1B1C1D0D, + 'black-100': #1B1C1D1A, + 'black-150': #1B1C1D26, + 'black-200': #1B1C1D33, + 'black-250': #1B1C1D40, + 'black-300': #1B1C1D4D, + 'black-350': #1B1C1D59, + 'black-400': #1B1C1D66, + 'black-450': #1B1C1D73, + 'black-500': #1B1C1D80, + 'black-550': #1B1C1D8C, + 'black-600': #1B1C1D99, + 'black-650': #1B1C1DA6, + 'black-700': #1B1C1DB2, + 'black-750': #1B1C1DBF, + 'black-800': #1B1C1DCC, + 'black-850': #1B1C1DD9, + 'black-900': #1B1C1DE5, + 'black-950': #101112F2, + 'white-000': #F7F8F800, + 'white-050': #F7F8F80D, + 'white-100': #F7F8F81A, + 'white-150': #F7F8F826, + 'white-200': #F7F8F833, + 'white-250': #F7F8F840, + 'white-300': #F7F8F84D, + 'white-350': #F7F8F859, + 'white-400': #F7F8F866, + 'white-450': #F7F8F873, + 'white-500': #F7F8F880, + 'white-550': #F7F8F88C, + 'white-600': #F7F8F899, + 'white-650': #F7F8F8A6, + 'white-700': #F7F8F8B2, + 'white-750': #F7F8F8BF, + 'white-800': #F7F8F8CC, + 'white-850': #F7F8F8D9, + 'white-900': #F7F8F8E5, + 'white-950': #F7F8F8F2, + 'white-975': #F7F8F8F9 ), 'transitions': ( 'ease-in': #{cubic-bezier(0.32, 0, 0.67, 0)}, @@ -385,6 +386,8 @@ $themes: ( 't': 0.5rem, 'st': 0.25rem, '4xs': 0.125rem, + '3xs': 0.25rem, + '2xs': 0.375rem, 'xxxs': 0.25rem, 'xxs': 0.375rem, 'xs': 0.5rem, @@ -395,13 +398,15 @@ $themes: ( 'xl': 2.5rem, 'xxl': 3rem, 'xxxl': 3.5rem, + '2xl': 3rem, + '3xl': 3.5rem, '4xl': 4rem, '5xl': 4.5rem, '6xl': 6rem, '7xl': 7.5rem ), 'breakpoints': ( - 'xs': 0, + 'xs': 0px, 'sm': 576px, 'md': 768px, 'lg': 992px, @@ -417,6 +422,14 @@ $themes: ( 'tertiary': #F7F8F8 ), 'semantic': ( + 'overlay': ( + 'primary': #1B1C1D0D, + 'primary-hover': #1B1C1D1A + ), + 'contextual': ( + 'primary': #1B1C1D0D, + 'primary-hover': #1B1C1D1A + ), 'brand': ( 'primary': #1167D4, 'primary-hover': #1A509F, @@ -433,10 +446,6 @@ $themes: ( 'tertiary': #F0F1F2, 'tertiary-hover': #E1E2E5 ), - 'contextual': ( - 'primary': #0000000D, - 'primary-hover': #0000001A - ), 'info': ( 'primary': #1167D4, 'primary-hover': #1A509F, @@ -530,114 +539,92 @@ $themes: ( 'secondary': #999EA5, 'tertiary': #D2D4D8 ) - ), - 'text': ( - 'primary': #0000000D ) ), 'content': ( 'logo1': #377FDB, 'logo2': #377FDB, 'semantic': ( + 'contextual': ( + 'primary': #F7F8F8F2 + ), + 'overlay': ( + 'primary': #F7F8F8F2 + ), 'brand': ( 'primary': #20467F, 'secondary': #0659C5, - 'tertiary': #2976D8, + 'tertiary': #1167D4, 'on-brand': #EAF1FB ), 'neutral': ( 'primary': #252627, 'secondary': #5C5F63, - 'tertiary': #74777C, + 'tertiary': #686B6F, 'on-neutral': #F0F1F2 ), - 'contextual': ( - 'primary': #FFFFFFF2 - ), 'info': ( 'primary': #20467F, 'secondary': #0659C5, - 'tertiary': #2976D8, + 'tertiary': #1167D4, 'on-info': #EAF1FB ), 'success': ( 'primary': #344D24, 'secondary': #3A6A14, - 'tertiary': #4B851A, + 'tertiary': #427816, 'on-success': #E4F7D4 ), 'warning': ( 'primary': #524620, 'secondary': #745B03, - 'tertiary': #937303, + 'tertiary': #836703, 'on-warning': #FFF1BD ), 'error': ( 'primary': #802820, 'secondary': #C00101, - 'tertiary': #E13131, + 'tertiary': #D80000, 'on-error': #FCEDED ), 'disabled': ( 'primary': #A7ACB2, - 'secondary': #FFFFFF80 + 'secondary': #F7F8F880 ) ), 'palette': ( 'brand': ( - 'primary': #2976D8, - 'secondary': #6CA0E4, - 'tertiary': #C0D6F4 + 'primary': #2976D8 ), 'red': ( - 'primary': #D83F3D, - 'secondary': #EE7C7B, - 'tertiary': #F8C9C9 + 'primary': #D83F3D ), 'orange': ( - 'primary': #BE5B0F, - 'secondary': #F27E27, - 'tertiary': #FACBA8 + 'primary': #BE5B0F ), 'brown': ( - 'primary': #8F7065, - 'secondary': #AF9992, - 'tertiary': #DCD2CF + 'primary': #8F7065 ), 'yellow': ( - 'primary': #93730C, - 'secondary': #C39810, - 'tertiary': #F0D275 + 'primary': #93730C ), 'green': ( - 'primary': #368741, - 'secondary': #48B257, - 'tertiary': #A7E3AF + 'primary': #368741 ), 'blue-1': ( - 'primary': #3D71E4, - 'secondary': #6F9BFD, - 'tertiary': #C2D5FE + 'primary': #3D71E4 ), 'blue-2': ( - 'primary': #2C8199, - 'secondary': #3BAACA, - 'tertiary': #A7DDED + 'primary': #2C8199 ), 'purple': ( - 'primary': #9B4BF3, - 'secondary': #BD83FD, - 'tertiary': #E3CBFE + 'primary': #9B4BF3 ), 'pink': ( - 'primary': #CD4089, - 'secondary': #EA77B3, - 'tertiary': #F7C7E0 + 'primary': #CD4089 ), 'gray': ( - 'primary': #74777C, - 'secondary': #999EA5, - 'tertiary': #D2D4D8 + 'primary': #74777C ) ) ), @@ -646,14 +633,17 @@ $themes: ( 'primary': #E1E2E5 ), 'semantic': ( + 'contextual': ( + 'primary': #F7F8F833 + ), + 'overlay': ( + 'primary': #F7F8F833 + ), 'brand': ( 'primary': #1167D4, 'secondary': #80AEE8, 'tertiary': #C0D6F4 ), - 'contextual': ( - 'primary': #FFFFFF33 - ), 'neutral': ( 'primary': #686B6F, 'secondary': #A7ACB2, @@ -682,63 +672,6 @@ $themes: ( 'disabled': ( 'primary': #E1E2E5 ) - ), - 'palette': ( - 'brand': ( - 'primary': #2976D8, - 'secondary': #6CA0E4, - 'tertiary': #C0D6F4 - ), - 'red': ( - 'primary': #D83F3D, - 'secondary': #EE7C7B, - 'tertiary': #F8C9C9 - ), - 'orange': ( - 'primary': #BE5B0F, - 'secondary': #F27E27, - 'tertiary': #FACBA8 - ), - 'brown': ( - 'primary': #8F7065, - 'secondary': #AF9992, - 'tertiary': #DCD2CF - ), - 'yellow': ( - 'primary': #93730C, - 'secondary': #C39810, - 'tertiary': #F0D275 - ), - 'green': ( - 'primary': #368741, - 'secondary': #48B257, - 'tertiary': #A7E3AF - ), - 'blue-1': ( - 'primary': #3D71E4, - 'secondary': #6F9BFD, - 'tertiary': #C2D5FE - ), - 'blue-2': ( - 'primary': #2C8199, - 'secondary': #3BAACA, - 'tertiary': #A7DDED - ), - 'purple': ( - 'primary': #9B4BF3, - 'secondary': #BD83FD, - 'tertiary': #E3CBFE - ), - 'pink': ( - 'primary': #CD4089, - 'secondary': #EA77B3, - 'tertiary': #F7C7E0 - ), - 'gray': ( - 'primary': #74777C, - 'secondary': #999EA5, - 'tertiary': #D2D4D8 - ) ) ) ), @@ -747,7 +680,7 @@ $themes: ( 'border-radius': 0.5rem, 'background-color': #F0F1F2, 'border-color': #D2D4D8, - 'color': #74777C, + 'color': #686B6F, 'font-size': 0.75rem, 'padding': 1rem, 'max-width': 150px @@ -784,59 +717,60 @@ $themes: ( 'border-radius--hover': 2px, 'border-radius--focus': 2px, 'border-width': 1px, + 'border-width--hover': 1px, + 'border-width--focus': 1px, 'border-color': #D2D4D8, - 'border-color--hover': #A7ACB2, + 'border-color--hover': #D2D4D8, 'border-color--focus': #1167D4, 'border-color--disabled': #E1E2E5, 'border-style': solid, - 'label-color--focus': #1167D4, + 'label-color': #686B6F, + 'label-color--focus': #20467F, 'background-color': #FFFFFF, 'value-color': #252627, 'value-color--disabled': #5C5F63 ), 'forms-switch': ( - 'accent-color': #2976D8, - 'rail-background-color': #74777C, + 'accent-color': #1167D4, + 'rail-background-color': #686B6F, 'rail-background-color--disabled': #A7ACB2, 'rail-border-radius': 50vw, - 'handle-background-color': #FFFFFFF2, - 'handle-background-color--disabled': #FFFFFF80, + 'handle-background-color': #F7F8F8F2, + 'handle-background-color--disabled': #F7F8F880, 'handle-border-radius': 50% ), 'forms-select': ( 'border-color': #D2D4D8, 'border-color--focus': #1167D4, - 'border-color--hover': #A7ACB2, + 'border-color--hover': #D2D4D8, 'border-radius': 8px, 'border-radius--focus': 2px, 'border-radius--hover': 2px, 'border-style': solid, 'border-width': 1px, + 'border-width--focus': 1px, + 'border-width--hover': 1px, 'value-color': #252627, 'value-color--disabled': #A7ACB2, 'font-size': 1rem, 'height': 3.5rem, - 'item-background-color--hover': #E1E2E5, + 'item-background-color--hover': #1B1C1D0D, 'item-background-color--selected': #D5E4F7, 'item-color': #252627, - 'item-color--disabled': #FFFFFF80, + 'item-color--disabled': #F7F8F880, 'item-font-size': 1rem, 'background-color': #FFFFFF, 'menu-background-color': #FFFFFF, - 'label-color--focus': #1167D4, + 'label-color': #686B6F, + 'label-color--focus': #20467F, 'multi-pill-background-color': #F0F1F2, 'multi-pill-border-radius': 2px, 'multi-pill-max-width': 68%, 'multi-pill-font-size': 1rem ), - 'forms-radio': ( - 'border-color': #D2D4D8, - 'border-color--disabled': #D2D4D8, - 'accent-color': #2976D8, - 'background-color': #FFFFFF - ), + 'forms-radio': (), 'forms-labelledbox': ( - 'label-color--small': #74777C, + 'label-color--small': #686B6F, 'label-color--big': #252627, 'label-color--small--disabled': #5C5F63, 'label-color--big--disabled': #5C5F63 @@ -854,8 +788,8 @@ $themes: ( 'border-color--hover': #D2D4D8, 'border-color--focus': #1167D4, 'border-style': solid, - 'placeholder-color': #74777C, - 'label-color': #74777C, + 'placeholder-color': #686B6F, + 'label-color': #686B6F, 'label-color--focus': #20467F, 'background-color': #FFFFFF, 'value-color': #252627, @@ -869,11 +803,11 @@ $themes: ( 'border-style': dotted, 'background-color--active': #EAF1FB, 'color': #252627, - 'color--success': #4B851A, - 'color--error': #E13131, + 'color--success': #427816, + 'color--error': #D80000, 'padding': 1rem, 'accent-color': #1167D4, - 'text-color': #74777C, + 'text-color': #686B6F, 'text-size': 0.6875rem, 'file-text-size': 0.8125rem, 'file-text-color': #252627, @@ -883,7 +817,7 @@ $themes: ( 'file-border-radius': 0.5rem, 'file-background-color': #FFFFFF, 'file-specs-size': 0.6875rem, - 'file-specs-color': #74777C + 'file-specs-color': #686B6F ), 'forms-field': ( 'width': 292px, @@ -895,15 +829,17 @@ $themes: ( ), 'forms-datepicker': ( 'border-color': #D2D4D8, - 'border-color--disabled': #E1E2E5, + 'border-color--disabled': #D2D4D8, 'border-color--focus': #1167D4, - 'border-color--hover': #A7ACB2, + 'border-color--hover': #D2D4D8, 'border-radius': 8px, 'border-radius--focus': 2px, 'border-radius--hover': 2px, 'border-style': solid, 'border-width': 1px, - 'value-color': #74777C, + 'border-width--focus': 1px, + 'border-width--hover': 1px, + 'value-color': #686B6F, 'value-color--disabled': #A7ACB2, 'font-size': 1.125rem, 'height': 3.5rem, @@ -917,7 +853,7 @@ $themes: ( 'range-selection-background-color--disabled': #F0F1F2, 'grid-cell--border-color--today': #1167D4, 'grid-cell--color--today': #20467F, - 'label-color--focus': #80AEE8 + 'label-color--focus': #20467F ), 'forms-checkbox': ( 'background-color--hover': #E1E2E5, @@ -925,14 +861,16 @@ $themes: ( 'font-size': 0.75rem, 'font-weight': 500, 'color': #252627, - 'border-color': #74777C, + 'border-color': #686B6F, + 'border-color--hover': #686B6F, + 'border-color--focus': #20467F, 'border-radius': 2px, - 'accent-color': #FFFFFFF2, - 'size': 1.5rem, - 'background-color--checked': #2976D8, - 'background-color--indeterminate': #2976D8, - 'background-color--disabled': #A7ACB2, - 'border-color--disabled': #A7ACB2 + 'border-width': 1.5px, + 'border-width--hover': 1px, + 'accent-color': #1167D4, + 'accent-color--disabled': #A7ACB2, + 'checkmark-color': #F7F8F8F2, + 'size': 1.5rem ), 'button': ( 'border-radius': 8px, @@ -948,9 +886,8 @@ $themes: ( 'small-icon-font-size': 1rem, 'nano-font-size': 0.75rem, 'nano-icon-font-size': 1rem, - 'font-weight': 400, - 'font-family': #{\Roboto Flex Variable\, sans-serif}, - 'text-font-weight': 500 + 'font-weight': 500, + 'font-family': #{\Roboto Flex Variable\, sans-serif} ), 'alert': ( 'background-color': #F0F1F2, @@ -968,10 +905,10 @@ $themes: ( 'dark': ( 'globals': ( 'colors': ( - 'logo-1': #377FDB, - 'logo-2': #377FDB, - 'logo-1-dark': #95ABFF, - 'logo-2-dark': #95ABFF, + 'logo-1-light': #377FDB, + 'logo-2-light': #377FDB, + 'logo-1-dark': #C1D6F2, + 'logo-2-dark': #C1D6F2, 'brand-050': #EAF1FB, 'brand-100': #D5E4F7, 'brand-150': #C0D6F4, @@ -1260,46 +1197,47 @@ $themes: ( 'pink-850': #332028, 'pink-900': #24181D, 'pink-950': #160F12, - 'black-000': #00000000, - 'black-050': #0000000D, - 'black-100': #0000001A, - 'black-150': #00000026, - 'black-200': #00000033, - 'black-250': #00000040, - 'black-300': #0000004D, - 'black-350': #00000059, - 'black-400': #00000066, - 'black-450': #00000073, - 'black-500': #00000080, - 'black-550': #0000008C, - 'black-600': #00000099, - 'black-650': #000000A6, - 'black-700': #000000B3, - 'black-750': #000000BF, - 'black-800': #000000CC, - 'black-850': #000000D9, - 'black-900': #000000E6, - 'black-950': #000000F2, - 'white-000': #FFFFFF, - 'white-050': #FFFFFF0D, - 'white-100': #FFFFFF1A, - 'white-150': #FFFFFF26, - 'white-200': #FFFFFF33, - 'white-250': #FFFFFF40, - 'white-300': #FFFFFF4D, - 'white-350': #FFFFFF59, - 'white-400': #FFFFFF66, - 'white-450': #FFFFFF73, - 'white-500': #FFFFFF80, - 'white-550': #FFFFFF8C, - 'white-600': #FFFFFF99, - 'white-650': #FFFFFFA6, - 'white-700': #FFFFFFB3, - 'white-750': #FFFFFFBF, - 'white-800': #FFFFFFCC, - 'white-850': #FFFFFFD9, - 'white-900': #FFFFFFE6, - 'white-950': #FFFFFFF2 + 'black-000': #1B1C1D00, + 'black-050': #1B1C1D0D, + 'black-100': #1B1C1D1A, + 'black-150': #1B1C1D26, + 'black-200': #1B1C1D33, + 'black-250': #1B1C1D40, + 'black-300': #1B1C1D4D, + 'black-350': #1B1C1D59, + 'black-400': #1B1C1D66, + 'black-450': #1B1C1D73, + 'black-500': #1B1C1D80, + 'black-550': #1B1C1D8C, + 'black-600': #1B1C1D99, + 'black-650': #1B1C1DA6, + 'black-700': #1B1C1DB2, + 'black-750': #1B1C1DBF, + 'black-800': #1B1C1DCC, + 'black-850': #1B1C1DD9, + 'black-900': #1B1C1DE5, + 'black-950': #101112F2, + 'white-000': #F7F8F800, + 'white-050': #F7F8F80D, + 'white-100': #F7F8F81A, + 'white-150': #F7F8F826, + 'white-200': #F7F8F833, + 'white-250': #F7F8F840, + 'white-300': #F7F8F84D, + 'white-350': #F7F8F859, + 'white-400': #F7F8F866, + 'white-450': #F7F8F873, + 'white-500': #F7F8F880, + 'white-550': #F7F8F88C, + 'white-600': #F7F8F899, + 'white-650': #F7F8F8A6, + 'white-700': #F7F8F8B2, + 'white-750': #F7F8F8BF, + 'white-800': #F7F8F8CC, + 'white-850': #F7F8F8D9, + 'white-900': #F7F8F8E5, + 'white-950': #F7F8F8F2, + 'white-975': #F7F8F8F9 ), 'transitions': ( 'ease-in': #{cubic-bezier(0.32, 0, 0.67, 0)}, @@ -1351,6 +1289,8 @@ $themes: ( 't': 0.5rem, 'st': 0.25rem, '4xs': 0.125rem, + '3xs': 0.25rem, + '2xs': 0.375rem, 'xxxs': 0.25rem, 'xxs': 0.375rem, 'xs': 0.5rem, @@ -1361,13 +1301,15 @@ $themes: ( 'xl': 2.5rem, 'xxl': 3rem, 'xxxl': 3.5rem, + '2xl': 3rem, + '3xl': 3.5rem, '4xl': 4rem, '5xl': 4.5rem, '6xl': 6rem, '7xl': 7.5rem ), 'breakpoints': ( - 'xs': 0, + 'xs': 0px, 'sm': 576px, 'md': 768px, 'lg': 992px, @@ -1383,6 +1325,14 @@ $themes: ( 'tertiary': #1B1C1D ), 'semantic': ( + 'contextual': ( + 'primary': #F7F8F80D, + 'primary-hover': #F7F8F81A + ), + 'overlay': ( + 'primary': #F7F8F80D, + 'primary-hover': #F7F8F81A + ), 'brand': ( 'primary': #1167D4, 'primary-hover': #1A509F, @@ -1399,10 +1349,6 @@ $themes: ( 'tertiary': #3A3B3E, 'tertiary-hover': #2F3033 ), - 'contextual': ( - 'primary': #FFFFFF0D, - 'primary-hover': #FFFFFF1A - ), 'info': ( 'primary': #1167D4, 'primary-hover': #1A509F, @@ -1499,9 +1445,15 @@ $themes: ( ) ), 'content': ( - 'logo1': #95ABFF, - 'logo2': #95ABFF, + 'logo1': #C1D6F2, + 'logo2': #C1D6F2, 'semantic': ( + 'contextual': ( + 'primary': #1B1C1DD9 + ), + 'overlay': ( + 'primary': #1B1C1DD9 + ), 'brand': ( 'primary': #EAF1FB, 'secondary': #D5E4F7, @@ -1514,9 +1466,6 @@ $themes: ( 'tertiary': #B5B9BE, 'on-neutral': #F0F1F2 ), - 'contextual': ( - 'primary': #000000D9 - ), 'info': ( 'primary': #EAF1FB, 'secondary': #D5E4F7, @@ -1543,64 +1492,42 @@ $themes: ( ), 'disabled': ( 'primary': #5C5F63, - 'secondary': #0000004D + 'secondary': #1B1C1D4D ) ), 'palette': ( 'brand': ( - 'primary': #6CA0E4, - 'secondary': #4085DC, - 'tertiary': #1167D4 + 'primary': #2976D8 ), 'red': ( - 'primary': #EE7C7B, - 'secondary': #E74E4D, - 'tertiary': #C23837 + 'primary': #D83F3D ), 'orange': ( - 'primary': #F27E27, - 'secondary': #D26411, - 'tertiary': #AA510E + 'primary': #BE5B0F ), 'brown': ( - 'primary': #AF9992, - 'secondary': #997E74, - 'tertiary': #846357 + 'primary': #8F7065 ), 'yellow': ( - 'primary': #C39810, - 'secondary': #A37F0D, - 'tertiary': #84670B + 'primary': #93730C ), 'green': ( - 'primary': #48B257, - 'secondary': #3B9548, - 'tertiary': #30793A + 'primary': #368741 ), 'blue-1': ( - 'primary': #6F9BFD, - 'secondary': #437DFC, - 'tertiary': #3665CC + 'primary': #3D71E4 ), 'blue-2': ( - 'primary': #3BAACA, - 'secondary': #318EA9, - 'tertiary': #277389 + 'primary': #2C8199 ), 'purple': ( - 'primary': #BD83FD, - 'secondary': #A85BFD, - 'tertiary': #8B43DA + 'primary': #9B4BF3 ), 'pink': ( - 'primary': #EA77B3, - 'secondary': #E24797, - 'tertiary': #B8397B + 'primary': #CD4089 ), 'gray': ( - 'primary': #999EA5, - 'secondary': #80848A, - 'tertiary': #686B6F + 'primary': #74777C ) ) ), @@ -1609,14 +1536,17 @@ $themes: ( 'primary': #3A3B3E ), 'semantic': ( + 'contextual': ( + 'primary': #1B1C1D33 + ), + 'overlay': ( + 'primary': #1B1C1D33 + ), 'brand': ( 'primary': #4085DC, 'secondary': #0659C5, 'tertiary': #20467F ), - 'contextual': ( - 'primary': #00000033 - ), 'neutral': ( 'primary': #80848A, 'secondary': #5C5F63, @@ -1645,65 +1575,9 @@ $themes: ( 'disabled': ( 'primary': #2F3033 ) - ), - 'palette': ( - 'brand': ( - 'primary': #6CA0E4, - 'secondary': #4085DC, - 'tertiary': #1167D4 - ), - 'red': ( - 'primary': #EE7C7B, - 'secondary': #E74E4D, - 'tertiary': #C23837 - ), - 'orange': ( - 'primary': #F27E27, - 'secondary': #D26411, - 'tertiary': #AA510E - ), - 'brown': ( - 'primary': #AF9992, - 'secondary': #997E74, - 'tertiary': #846357 - ), - 'yellow': ( - 'primary': #C39810, - 'secondary': #A37F0D, - 'tertiary': #84670B - ), - 'green': ( - 'primary': #48B257, - 'secondary': #3B9548, - 'tertiary': #30793A - ), - 'blue-1': ( - 'primary': #6F9BFD, - 'secondary': #437DFC, - 'tertiary': #3665CC - ), - 'blue-2': ( - 'primary': #3BAACA, - 'secondary': #318EA9, - 'tertiary': #277389 - ), - 'purple': ( - 'primary': #BD83FD, - 'secondary': #A85BFD, - 'tertiary': #8B43DA - ), - 'pink': ( - 'primary': #EA77B3, - 'secondary': #E24797, - 'tertiary': #B8397B - ), - 'gray': ( - 'primary': #999EA5, - 'secondary': #80848A, - 'tertiary': #686B6F - ) ) ) - ) + ), + 'components': () ) ) !default; diff --git a/packages/react/src/cunningham-tokens.ts b/packages/react/src/cunningham-tokens.ts index 74ea065..95ebd7b 100644 --- a/packages/react/src/cunningham-tokens.ts +++ b/packages/react/src/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"themes":{"default":{"globals":{"colors":{"logo-1":"#377FDB","logo-2":"#377FDB","logo-1-dark":"#95ABFF","logo-2-dark":"#95ABFF","brand-050":"#EAF1FB","brand-100":"#D5E4F7","brand-150":"#C0D6F4","brand-200":"#ABC9F0","brand-250":"#96BCEC","brand-300":"#80AEE8","brand-350":"#6CA0E4","brand-400":"#5693E0","brand-450":"#4085DC","brand-500":"#2976D8","brand-550":"#1167D4","brand-600":"#0659C5","brand-650":"#1A509F","brand-700":"#20467F","brand-750":"#203C63","brand-800":"#1D314C","brand-850":"#1A2638","brand-900":"#141C28","brand-950":"#0C1117","gray-000":"#FFFFFF","gray-025":"#F7F8F8","gray-050":"#F0F1F2","gray-100":"#E1E2E5","gray-150":"#D2D4D8","gray-200":"#C4C7CB","gray-250":"#B5B9BE","gray-300":"#A7ACB2","gray-350":"#999EA5","gray-400":"#8D9197","gray-450":"#80848A","gray-500":"#74777C","gray-550":"#686B6F","gray-600":"#5C5F63","gray-650":"#505356","gray-700":"#45474A","gray-750":"#3A3B3E","gray-800":"#2F3033","gray-850":"#252627","gray-900":"#1B1C1D","gray-950":"#101112","gray-1000":"#000000","info-050":"#EAF1FB","info-100":"#D5E4F7","info-150":"#C0D6F4","info-200":"#ABC9F0","info-250":"#96BCEC","info-300":"#80AEE8","info-350":"#6CA0E4","info-400":"#5693E0","info-450":"#4085DC","info-500":"#2976D8","info-550":"#1167D4","info-600":"#0659C5","info-650":"#1A509F","info-700":"#20467F","info-750":"#203C63","info-800":"#1D314C","info-850":"#1A2638","info-900":"#141C28","info-950":"#0C1117","success-050":"#E4F7D4","success-100":"#C8EEA8","success-150":"#AAE579","success-200":"#89DC45","success-250":"#72CF27","success-300":"#6AC024","success-350":"#61B121","success-400":"#59A21E","success-450":"#51941C","success-500":"#4B851A","success-550":"#427816","success-600":"#3A6A14","success-650":"#385C1F","success-700":"#344D24","success-750":"#2E4022","success-800":"#27341F","success-850":"#20281A","success-900":"#181D15","success-950":"#10120E","warning-050":"#FFF1BD","warning-100":"#FFE176","warning-150":"#FFCF25","warning-200":"#F4BF06","warning-250":"#E3B205","warning-300":"#D3A504","warning-350":"#C29805","warning-400":"#B28C03","warning-450":"#A27F03","warning-500":"#937303","warning-550":"#836703","warning-600":"#745B03","warning-650":"#625019","warning-700":"#524620","warning-750":"#443B20","warning-800":"#36301D","warning-850":"#2A2619","warning-900":"#1E1C13","warning-950":"#12110C","error-050":"#FCEDED","error-100":"#FADBDB","error-150":"#F7C9C9","error-200":"#F5B7B7","error-250":"#F2A4A4","error-300":"#EF9191","error-350":"#EC7D7D","error-400":"#E96868","error-450":"#E55050","error-500":"#E13131","error-550":"#D80000","error-600":"#C00101","error-650":"#9E2219","error-700":"#802820","error-750":"#662820","error-800":"#4F231E","error-850":"#3B1D19","error-900":"#2A1614","error-950":"#1A0E0C","red-050":"#FDEDED","red-100":"#FADBDB","red-150":"#F8C9C9","red-200":"#F5B7B6","red-250":"#F3A4A3","red-300":"#F09190","red-350":"#EE7C7B","red-400":"#EB6665","red-450":"#E74E4D","red-500":"#D83F3D","red-550":"#C23837","red-600":"#AC3231","red-650":"#8D3531","red-700":"#73332F","red-750":"#5B2F2B","red-800":"#472826","red-850":"#35211F","red-900":"#251817","red-950":"#160F0E","orange-050":"#FDEEE2","orange-100":"#FCDDC5","orange-150":"#FACBA8","orange-200":"#F8B98B","orange-250":"#F6A76A","orange-300":"#F4934B","orange-350":"#F27E27","orange-400":"#E76E12","orange-450":"#D26411","orange-500":"#BE5B0F","orange-550":"#AA510E","orange-600":"#97480C","orange-650":"#7E431D","orange-700":"#673C22","orange-750":"#533422","orange-800":"#412C1F","orange-850":"#31231B","orange-900":"#221A14","orange-950":"#15100C","brown-050":"#F3F0EF","brown-100":"#E7E1DF","brown-150":"#DCD2CF","brown-200":"#D0C4BF","brown-250":"#C5B6B0","brown-300":"#BAA7A1","brown-350":"#AF9992","brown-400":"#A48B83","brown-450":"#997E74","brown-500":"#8F7065","brown-550":"#846357","brown-600":"#7A5649","brown-650":"#684C42","brown-700":"#57423C","brown-750":"#463833","brown-800":"#382E2A","brown-850":"#2B2422","brown-900":"#1F1B19","brown-950":"#121010","yellow-050":"#FAF0D3","yellow-100":"#F5E2A4","yellow-150":"#F0D275","yellow-200":"#EBC242","yellow-250":"#E4B213","yellow-300":"#D4A511","yellow-350":"#C39810","yellow-400":"#B38B0F","yellow-450":"#A37F0D","yellow-500":"#93730C","yellow-550":"#84670B","yellow-600":"#755B0A","yellow-650":"#63501C","yellow-700":"#534521","yellow-750":"#443A21","yellow-800":"#36301F","yellow-850":"#29261A","yellow-900":"#1D1C14","yellow-950":"#12110C","green-050":"#E2F6E5","green-100":"#C5ECCA","green-150":"#A7E3AF","green-200":"#89D894","green-250":"#67CE75","green-300":"#4DC25D","green-350":"#48B257","green-400":"#41A44F","green-450":"#3B9548","green-500":"#368741","green-550":"#30793A","green-600":"#2B6B33","green-650":"#2F5C34","green-700":"#2E4E31","green-750":"#2A412C","green-800":"#253426","green-850":"#1E281F","green-900":"#171D17","green-950":"#0F120F","blue-1-050":"#EBF1FF","blue-1-100":"#D6E3FE","blue-1-150":"#C2D5FE","blue-1-200":"#ADC7FE","blue-1-250":"#99B8FD","blue-1-300":"#84AAFD","blue-1-350":"#6F9BFD","blue-1-400":"#5A8DFB","blue-1-450":"#437DFC","blue-1-500":"#3D71E4","blue-1-550":"#3665CC","blue-1-600":"#305AB5","blue-1-650":"#315093","blue-1-700":"#2E4675","blue-1-750":"#293B5E","blue-1-800":"#243048","blue-1-850":"#1E2635","blue-1-900":"#171C25","blue-1-950":"#0E1116","blue-2-050":"#E2F4F9","blue-2-100":"#C5E9F3","blue-2-150":"#A7DDED","blue-2-200":"#88D1E6","blue-2-250":"#68C5E0","blue-2-300":"#48B8D9","blue-2-350":"#3BAACA","blue-2-400":"#359CB9","blue-2-450":"#318EA9","blue-2-500":"#2C8199","blue-2-550":"#277389","blue-2-600":"#236679","blue-2-650":"#2A5866","blue-2-700":"#2A4B55","blue-2-750":"#283F47","blue-2-800":"#233337","blue-2-850":"#1D272A","blue-2-900":"#161C1E","blue-2-950":"#0E1112","purple-050":"#F6EEFF","purple-100":"#ECDCFF","purple-150":"#E3CBFE","purple-200":"#DAB9FE","purple-250":"#D0A7FE","purple-300":"#C795FE","purple-350":"#BD83FD","purple-400":"#B36FFD","purple-450":"#A85BFD","purple-500":"#9B4BF3","purple-550":"#8B43DA","purple-600":"#7B3CC1","purple-650":"#673C9B","purple-700":"#56387D","purple-750":"#463162","purple-800":"#382A4A","purple-850":"#2A2237","purple-900":"#1E1926","purple-950":"#121017","pink-050":"#FCEDF5","pink-100":"#F9DAEA","pink-150":"#F7C7E0","pink-200":"#F4B4D5","pink-250":"#F1A1CA","pink-300":"#EE8CBF","pink-350":"#EA77B3","pink-400":"#E760A6","pink-450":"#E24797","pink-500":"#CD4089","pink-550":"#B8397B","pink-600":"#A3336D","pink-650":"#86355E","pink-700":"#6E334F","pink-750":"#582E42","pink-800":"#442834","pink-850":"#332028","pink-900":"#24181D","pink-950":"#160F12","black-000":"#00000000","black-050":"#0000000D","black-100":"#0000001A","black-150":"#00000026","black-200":"#00000033","black-250":"#00000040","black-300":"#0000004D","black-350":"#00000059","black-400":"#00000066","black-450":"#00000073","black-500":"#00000080","black-550":"#0000008C","black-600":"#00000099","black-650":"#000000A6","black-700":"#000000B3","black-750":"#000000BF","black-800":"#000000CC","black-850":"#000000D9","black-900":"#000000E6","black-950":"#000000F2","white-000":"#FFFFFF","white-050":"#FFFFFF0D","white-100":"#FFFFFF1A","white-150":"#FFFFFF26","white-200":"#FFFFFF33","white-250":"#FFFFFF40","white-300":"#FFFFFF4D","white-350":"#FFFFFF59","white-400":"#FFFFFF66","white-450":"#FFFFFF73","white-500":"#FFFFFF80","white-550":"#FFFFFF8C","white-600":"#FFFFFF99","white-650":"#FFFFFFA6","white-700":"#FFFFFFB3","white-750":"#FFFFFFBF","white-800":"#FFFFFFCC","white-850":"#FFFFFFD9","white-900":"#FFFFFFE6","white-950":"#FFFFFFF2"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"font":{"sizes":{"xs":"0.75rem","sm":"0.875rem","md":"1rem","lg":"1.125rem","ml":"0.938rem","xl":"1.25rem","t":"0.6875rem","s":"0.75rem","h1":"2rem","h2":"1.75rem","h3":"1.5rem","h4":"1.375rem","h5":"1.25rem","h6":"1.125rem","xl-alt":"5rem","lg-alt":"4.5rem","md-alt":"4rem","sm-alt":"3.5rem","xs-alt":"3rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","st":"0.25rem","4xs":"0.125rem","xxxs":"0.25rem","xxs":"0.375rem","xs":"0.5rem","sm":"0.75rem","base":"1rem","md":"1.5rem","lg":"2rem","xl":"2.5rem","xxl":"3rem","xxxl":"3.5rem","4xl":"4rem","5xl":"4.5rem","6xl":"6rem","7xl":"7.5rem"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#FFFFFF","secondary":"#FFFFFF","tertiary":"#F7F8F8"},"semantic":{"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#E1E2E5","secondary-hover":"#D2D4D8","tertiary":"#F0F1F2","tertiary-hover":"#E1E2E5"},"contextual":{"primary":"#0000000D","primary-hover":"#0000001A"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#C8EEA8","secondary-hover":"#AAE579","tertiary":"#E4F7D4","tertiary-hover":"#C8EEA8"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#FFE176","secondary-hover":"#FFCF25","tertiary":"#FFF1BD","tertiary-hover":"#FFE176"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#FADBDB","secondary-hover":"#F7C9C9","tertiary":"#FCEDED","tertiary-hover":"#FADBDB"},"disabled":{"primary":"#E1E2E5","secondary":"#F0F1F2"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}},"text":{"primary":"#0000000D"}},"content":{"logo1":"#377FDB","logo2":"#377FDB","semantic":{"brand":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#2976D8","on-brand":"#EAF1FB"},"neutral":{"primary":"#252627","secondary":"#5C5F63","tertiary":"#74777C","on-neutral":"#F0F1F2"},"contextual":{"primary":"#FFFFFFF2"},"info":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#2976D8","on-info":"#EAF1FB"},"success":{"primary":"#344D24","secondary":"#3A6A14","tertiary":"#4B851A","on-success":"#E4F7D4"},"warning":{"primary":"#524620","secondary":"#745B03","tertiary":"#937303","on-warning":"#FFF1BD"},"error":{"primary":"#802820","secondary":"#C00101","tertiary":"#E13131","on-error":"#FCEDED"},"disabled":{"primary":"#A7ACB2","secondary":"#FFFFFF80"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}}},"border":{"surface":{"primary":"#E1E2E5"},"semantic":{"brand":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"contextual":{"primary":"#FFFFFF33"},"neutral":{"primary":"#686B6F","secondary":"#A7ACB2","tertiary":"#D2D4D8"},"info":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"success":{"primary":"#427816","secondary":"#6AC024","tertiary":"#AAE579"},"warning":{"primary":"#836703","secondary":"#D3A504","tertiary":"#FFCF25"},"error":{"primary":"#D80000","secondary":"#EF9191","tertiary":"#F7C9C9"},"disabled":{"primary":"#E1E2E5"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}}}},"components":{"tooltip":{"border-radius":"0.5rem","background-color":"#F0F1F2","border-color":"#D2D4D8","color":"#74777C","font-size":"0.75rem","padding":"1rem","max-width":"150px"},"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#F0F1F2","color":"#252627","font-weight":400,"icon-size":"19px","progress-bar-height":"3px"},"modal":{"background-color":"#FFFFFF","backdrop-color":"#00000099","border-radius":"4px","border-color":"#E1E2E5","box-shadow":"0px 1px 2px 0px #0C1A2B4D","color":"#252627","title-font-weight":600,"content-font-size":"0.875rem","content-font-weight":400,"content-color":"#252627","width-small":"300px","width-medium":"600px","width-large":"800px","width-extra-large":"75%"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#D2D4D8","border-color--hover":"#A7ACB2","border-color--focus":"#1167D4","border-color--disabled":"#E1E2E5","border-style":"solid","label-color--focus":"#1167D4","background-color":"#FFFFFF","value-color":"#252627","value-color--disabled":"#5C5F63"},"forms-switch":{"accent-color":"#2976D8","rail-background-color":"#74777C","rail-background-color--disabled":"#A7ACB2","rail-border-radius":"50vw","handle-background-color":"#FFFFFFF2","handle-background-color--disabled":"#FFFFFF80","handle-border-radius":"50%"},"forms-select":{"border-color":"#D2D4D8","border-color--focus":"#1167D4","border-color--hover":"#A7ACB2","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#252627","value-color--disabled":"#A7ACB2","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#E1E2E5","item-background-color--selected":"#D5E4F7","item-color":"#252627","item-color--disabled":"#FFFFFF80","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#1167D4","multi-pill-background-color":"#F0F1F2","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"1rem"},"forms-radio":{"border-color":"#D2D4D8","border-color--disabled":"#D2D4D8","accent-color":"#2976D8","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#74777C","label-color--big":"#252627","label-color--small--disabled":"#5C5F63","label-color--big--disabled":"#5C5F63"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"4px","border-radius--focus":"4px","border-width":"1px","border-width--hover":"1px","border-width--focus":"1px","border-color":"#D2D4D8","border-color--hover":"#D2D4D8","border-color--focus":"#1167D4","border-style":"solid","placeholder-color":"#74777C","label-color":"#74777C","label-color--focus":"#20467F","background-color":"#FFFFFF","value-color":"#252627","value-color--disabled":"#A7ACB2"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#D2D4D8","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EAF1FB","color":"#252627","color--success":"#4B851A","color--error":"#E13131","padding":"1rem","accent-color":"#1167D4","text-color":"#74777C","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#252627","file-text-weight":300,"file-border-color":"#D2D4D8","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#74777C"},"forms-field":{"width":"292px","font-size":"0.75rem","color":"#5C5F63","color--error":"#C00101","color--success":"#3A6A14","color--disabled":"#A7ACB2"},"forms-datepicker":{"border-color":"#D2D4D8","border-color--disabled":"#E1E2E5","border-color--focus":"#1167D4","border-color--hover":"#A7ACB2","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#74777C","value-color--disabled":"#A7ACB2","font-size":"1.125rem","height":"3.5rem","item-background-color--hover":"#E1E2E5","item-background-color--selected":"#EAF1FB","item-color":"#252627","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EAF1FB","range-selection-background-color--disabled":"#F0F1F2","grid-cell--border-color--today":"#1167D4","grid-cell--color--today":"#20467F","label-color--focus":"#80AEE8"},"forms-checkbox":{"background-color--hover":"#E1E2E5","background-color":"#FFFFFF","font-size":"0.75rem","font-weight":500,"color":"#252627","border-color":"#74777C","border-radius":"2px","accent-color":"#FFFFFFF2","size":"1.5rem","background-color--checked":"#2976D8","background-color--indeterminate":"#2976D8","background-color--disabled":"#A7ACB2","border-color--disabled":"#A7ACB2"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"4px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.875rem","small-icon-font-size":"1rem","nano-font-size":"0.75rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#F0F1F2","border-radius":"4px","border-color":"#686B6F","border-left-color":"#686B6F","font-weight":500,"color":"#252627","icon-size":"19px","additional-font-weight":400,"additional-color":"#252627"}}},"dark":{"globals":{"colors":{"logo-1":"#377FDB","logo-2":"#377FDB","logo-1-dark":"#95ABFF","logo-2-dark":"#95ABFF","brand-050":"#EAF1FB","brand-100":"#D5E4F7","brand-150":"#C0D6F4","brand-200":"#ABC9F0","brand-250":"#96BCEC","brand-300":"#80AEE8","brand-350":"#6CA0E4","brand-400":"#5693E0","brand-450":"#4085DC","brand-500":"#2976D8","brand-550":"#1167D4","brand-600":"#0659C5","brand-650":"#1A509F","brand-700":"#20467F","brand-750":"#203C63","brand-800":"#1D314C","brand-850":"#1A2638","brand-900":"#141C28","brand-950":"#0C1117","gray-000":"#FFFFFF","gray-025":"#F7F8F8","gray-050":"#F0F1F2","gray-100":"#E1E2E5","gray-150":"#D2D4D8","gray-200":"#C4C7CB","gray-250":"#B5B9BE","gray-300":"#A7ACB2","gray-350":"#999EA5","gray-400":"#8D9197","gray-450":"#80848A","gray-500":"#74777C","gray-550":"#686B6F","gray-600":"#5C5F63","gray-650":"#505356","gray-700":"#45474A","gray-750":"#3A3B3E","gray-800":"#2F3033","gray-850":"#252627","gray-900":"#1B1C1D","gray-950":"#101112","gray-1000":"#000000","info-050":"#EAF1FB","info-100":"#D5E4F7","info-150":"#C0D6F4","info-200":"#ABC9F0","info-250":"#96BCEC","info-300":"#80AEE8","info-350":"#6CA0E4","info-400":"#5693E0","info-450":"#4085DC","info-500":"#2976D8","info-550":"#1167D4","info-600":"#0659C5","info-650":"#1A509F","info-700":"#20467F","info-750":"#203C63","info-800":"#1D314C","info-850":"#1A2638","info-900":"#141C28","info-950":"#0C1117","success-050":"#E4F7D4","success-100":"#C8EEA8","success-150":"#AAE579","success-200":"#89DC45","success-250":"#72CF27","success-300":"#6AC024","success-350":"#61B121","success-400":"#59A21E","success-450":"#51941C","success-500":"#4B851A","success-550":"#427816","success-600":"#3A6A14","success-650":"#385C1F","success-700":"#344D24","success-750":"#2E4022","success-800":"#27341F","success-850":"#20281A","success-900":"#181D15","success-950":"#10120E","warning-050":"#FFF1BD","warning-100":"#FFE176","warning-150":"#FFCF25","warning-200":"#F4BF06","warning-250":"#E3B205","warning-300":"#D3A504","warning-350":"#C29805","warning-400":"#B28C03","warning-450":"#A27F03","warning-500":"#937303","warning-550":"#836703","warning-600":"#745B03","warning-650":"#625019","warning-700":"#524620","warning-750":"#443B20","warning-800":"#36301D","warning-850":"#2A2619","warning-900":"#1E1C13","warning-950":"#12110C","error-050":"#FCEDED","error-100":"#FADBDB","error-150":"#F7C9C9","error-200":"#F5B7B7","error-250":"#F2A4A4","error-300":"#EF9191","error-350":"#EC7D7D","error-400":"#E96868","error-450":"#E55050","error-500":"#E13131","error-550":"#D80000","error-600":"#C00101","error-650":"#9E2219","error-700":"#802820","error-750":"#662820","error-800":"#4F231E","error-850":"#3B1D19","error-900":"#2A1614","error-950":"#1A0E0C","red-050":"#FDEDED","red-100":"#FADBDB","red-150":"#F8C9C9","red-200":"#F5B7B6","red-250":"#F3A4A3","red-300":"#F09190","red-350":"#EE7C7B","red-400":"#EB6665","red-450":"#E74E4D","red-500":"#D83F3D","red-550":"#C23837","red-600":"#AC3231","red-650":"#8D3531","red-700":"#73332F","red-750":"#5B2F2B","red-800":"#472826","red-850":"#35211F","red-900":"#251817","red-950":"#160F0E","orange-050":"#FDEEE2","orange-100":"#FCDDC5","orange-150":"#FACBA8","orange-200":"#F8B98B","orange-250":"#F6A76A","orange-300":"#F4934B","orange-350":"#F27E27","orange-400":"#E76E12","orange-450":"#D26411","orange-500":"#BE5B0F","orange-550":"#AA510E","orange-600":"#97480C","orange-650":"#7E431D","orange-700":"#673C22","orange-750":"#533422","orange-800":"#412C1F","orange-850":"#31231B","orange-900":"#221A14","orange-950":"#15100C","brown-050":"#F3F0EF","brown-100":"#E7E1DF","brown-150":"#DCD2CF","brown-200":"#D0C4BF","brown-250":"#C5B6B0","brown-300":"#BAA7A1","brown-350":"#AF9992","brown-400":"#A48B83","brown-450":"#997E74","brown-500":"#8F7065","brown-550":"#846357","brown-600":"#7A5649","brown-650":"#684C42","brown-700":"#57423C","brown-750":"#463833","brown-800":"#382E2A","brown-850":"#2B2422","brown-900":"#1F1B19","brown-950":"#121010","yellow-050":"#FAF0D3","yellow-100":"#F5E2A4","yellow-150":"#F0D275","yellow-200":"#EBC242","yellow-250":"#E4B213","yellow-300":"#D4A511","yellow-350":"#C39810","yellow-400":"#B38B0F","yellow-450":"#A37F0D","yellow-500":"#93730C","yellow-550":"#84670B","yellow-600":"#755B0A","yellow-650":"#63501C","yellow-700":"#534521","yellow-750":"#443A21","yellow-800":"#36301F","yellow-850":"#29261A","yellow-900":"#1D1C14","yellow-950":"#12110C","green-050":"#E2F6E5","green-100":"#C5ECCA","green-150":"#A7E3AF","green-200":"#89D894","green-250":"#67CE75","green-300":"#4DC25D","green-350":"#48B257","green-400":"#41A44F","green-450":"#3B9548","green-500":"#368741","green-550":"#30793A","green-600":"#2B6B33","green-650":"#2F5C34","green-700":"#2E4E31","green-750":"#2A412C","green-800":"#253426","green-850":"#1E281F","green-900":"#171D17","green-950":"#0F120F","blue-1-050":"#EBF1FF","blue-1-100":"#D6E3FE","blue-1-150":"#C2D5FE","blue-1-200":"#ADC7FE","blue-1-250":"#99B8FD","blue-1-300":"#84AAFD","blue-1-350":"#6F9BFD","blue-1-400":"#5A8DFB","blue-1-450":"#437DFC","blue-1-500":"#3D71E4","blue-1-550":"#3665CC","blue-1-600":"#305AB5","blue-1-650":"#315093","blue-1-700":"#2E4675","blue-1-750":"#293B5E","blue-1-800":"#243048","blue-1-850":"#1E2635","blue-1-900":"#171C25","blue-1-950":"#0E1116","blue-2-050":"#E2F4F9","blue-2-100":"#C5E9F3","blue-2-150":"#A7DDED","blue-2-200":"#88D1E6","blue-2-250":"#68C5E0","blue-2-300":"#48B8D9","blue-2-350":"#3BAACA","blue-2-400":"#359CB9","blue-2-450":"#318EA9","blue-2-500":"#2C8199","blue-2-550":"#277389","blue-2-600":"#236679","blue-2-650":"#2A5866","blue-2-700":"#2A4B55","blue-2-750":"#283F47","blue-2-800":"#233337","blue-2-850":"#1D272A","blue-2-900":"#161C1E","blue-2-950":"#0E1112","purple-050":"#F6EEFF","purple-100":"#ECDCFF","purple-150":"#E3CBFE","purple-200":"#DAB9FE","purple-250":"#D0A7FE","purple-300":"#C795FE","purple-350":"#BD83FD","purple-400":"#B36FFD","purple-450":"#A85BFD","purple-500":"#9B4BF3","purple-550":"#8B43DA","purple-600":"#7B3CC1","purple-650":"#673C9B","purple-700":"#56387D","purple-750":"#463162","purple-800":"#382A4A","purple-850":"#2A2237","purple-900":"#1E1926","purple-950":"#121017","pink-050":"#FCEDF5","pink-100":"#F9DAEA","pink-150":"#F7C7E0","pink-200":"#F4B4D5","pink-250":"#F1A1CA","pink-300":"#EE8CBF","pink-350":"#EA77B3","pink-400":"#E760A6","pink-450":"#E24797","pink-500":"#CD4089","pink-550":"#B8397B","pink-600":"#A3336D","pink-650":"#86355E","pink-700":"#6E334F","pink-750":"#582E42","pink-800":"#442834","pink-850":"#332028","pink-900":"#24181D","pink-950":"#160F12","black-000":"#00000000","black-050":"#0000000D","black-100":"#0000001A","black-150":"#00000026","black-200":"#00000033","black-250":"#00000040","black-300":"#0000004D","black-350":"#00000059","black-400":"#00000066","black-450":"#00000073","black-500":"#00000080","black-550":"#0000008C","black-600":"#00000099","black-650":"#000000A6","black-700":"#000000B3","black-750":"#000000BF","black-800":"#000000CC","black-850":"#000000D9","black-900":"#000000E6","black-950":"#000000F2","white-000":"#FFFFFF","white-050":"#FFFFFF0D","white-100":"#FFFFFF1A","white-150":"#FFFFFF26","white-200":"#FFFFFF33","white-250":"#FFFFFF40","white-300":"#FFFFFF4D","white-350":"#FFFFFF59","white-400":"#FFFFFF66","white-450":"#FFFFFF73","white-500":"#FFFFFF80","white-550":"#FFFFFF8C","white-600":"#FFFFFF99","white-650":"#FFFFFFA6","white-700":"#FFFFFFB3","white-750":"#FFFFFFBF","white-800":"#FFFFFFCC","white-850":"#FFFFFFD9","white-900":"#FFFFFFE6","white-950":"#FFFFFFF2"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"font":{"sizes":{"xs":"0.75rem","sm":"0.875rem","md":"1rem","lg":"1.125rem","ml":"0.938rem","xl":"1.25rem","t":"0.6875rem","s":"0.75rem","h1":"2rem","h2":"1.75rem","h3":"1.5rem","h4":"1.375rem","h5":"1.25rem","h6":"1.125rem","xl-alt":"5rem","lg-alt":"4.5rem","md-alt":"4rem","sm-alt":"3.5rem","xs-alt":"3rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","st":"0.25rem","4xs":"0.125rem","xxxs":"0.25rem","xxs":"0.375rem","xs":"0.5rem","sm":"0.75rem","base":"1rem","md":"1.5rem","lg":"2rem","xl":"2.5rem","xxl":"3rem","xxxl":"3.5rem","4xl":"4rem","5xl":"4.5rem","6xl":"6rem","7xl":"7.5rem"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#2F3033","secondary":"#252627","tertiary":"#1B1C1D"},"semantic":{"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#45474A","secondary-hover":"#3A3B3E","tertiary":"#3A3B3E","tertiary-hover":"#2F3033"},"contextual":{"primary":"#FFFFFF0D","primary-hover":"#FFFFFF1A"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#344D24","secondary-hover":"#2E4022","tertiary":"#2E4022","tertiary-hover":"#27341F"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#524620","secondary-hover":"#443B20","tertiary":"#443B20","tertiary-hover":"#36301D"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#802820","secondary-hover":"#662820","tertiary":"#662820","tertiary-hover":"#4F231E"},"disabled":{"primary":"#3A3B3E","secondary":"#2F3033"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}},"content":{"logo1":"#95ABFF","logo2":"#95ABFF","semantic":{"brand":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-brand":"#EAF1FB"},"neutral":{"primary":"#F0F1F2","secondary":"#E1E2E5","tertiary":"#B5B9BE","on-neutral":"#F0F1F2"},"contextual":{"primary":"#000000D9"},"info":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-info":"#EAF1FB"},"success":{"primary":"#E4F7D4","secondary":"#C8EEA8","tertiary":"#72CF27","on-success":"#E4F7D4"},"warning":{"primary":"#FFF1BD","secondary":"#FFE176","tertiary":"#E3B205","on-warning":"#FFF1BD"},"error":{"primary":"#FCEDED","secondary":"#FADBDB","tertiary":"#F2A4A4","on-error":"#FCEDED"},"disabled":{"primary":"#5C5F63","secondary":"#0000004D"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}},"border":{"surface":{"primary":"#3A3B3E"},"semantic":{"brand":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"contextual":{"primary":"#00000033"},"neutral":{"primary":"#80848A","secondary":"#5C5F63","tertiary":"#45474A"},"info":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"success":{"primary":"#51941C","secondary":"#3A6A14","tertiary":"#344D24"},"warning":{"primary":"#A27F03","secondary":"#745B03","tertiary":"#524620"},"error":{"primary":"#E55050","secondary":"#C00101","tertiary":"#802820"},"disabled":{"primary":"#2F3033"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}}}}}}; +export const tokens = {"themes":{"default":{"globals":{"colors":{"logo-1-light":"#377FDB","logo-2-light":"#377FDB","logo-1-dark":"#C1D6F2","logo-2-dark":"#C1D6F2","brand-050":"#EAF1FB","brand-100":"#D5E4F7","brand-150":"#C0D6F4","brand-200":"#ABC9F0","brand-250":"#96BCEC","brand-300":"#80AEE8","brand-350":"#6CA0E4","brand-400":"#5693E0","brand-450":"#4085DC","brand-500":"#2976D8","brand-550":"#1167D4","brand-600":"#0659C5","brand-650":"#1A509F","brand-700":"#20467F","brand-750":"#203C63","brand-800":"#1D314C","brand-850":"#1A2638","brand-900":"#141C28","brand-950":"#0C1117","gray-000":"#FFFFFF","gray-025":"#F7F8F8","gray-050":"#F0F1F2","gray-100":"#E1E2E5","gray-150":"#D2D4D8","gray-200":"#C4C7CB","gray-250":"#B5B9BE","gray-300":"#A7ACB2","gray-350":"#999EA5","gray-400":"#8D9197","gray-450":"#80848A","gray-500":"#74777C","gray-550":"#686B6F","gray-600":"#5C5F63","gray-650":"#505356","gray-700":"#45474A","gray-750":"#3A3B3E","gray-800":"#2F3033","gray-850":"#252627","gray-900":"#1B1C1D","gray-950":"#101112","gray-1000":"#000000","info-050":"#EAF1FB","info-100":"#D5E4F7","info-150":"#C0D6F4","info-200":"#ABC9F0","info-250":"#96BCEC","info-300":"#80AEE8","info-350":"#6CA0E4","info-400":"#5693E0","info-450":"#4085DC","info-500":"#2976D8","info-550":"#1167D4","info-600":"#0659C5","info-650":"#1A509F","info-700":"#20467F","info-750":"#203C63","info-800":"#1D314C","info-850":"#1A2638","info-900":"#141C28","info-950":"#0C1117","success-050":"#E4F7D4","success-100":"#C8EEA8","success-150":"#AAE579","success-200":"#89DC45","success-250":"#72CF27","success-300":"#6AC024","success-350":"#61B121","success-400":"#59A21E","success-450":"#51941C","success-500":"#4B851A","success-550":"#427816","success-600":"#3A6A14","success-650":"#385C1F","success-700":"#344D24","success-750":"#2E4022","success-800":"#27341F","success-850":"#20281A","success-900":"#181D15","success-950":"#10120E","warning-050":"#FFF1BD","warning-100":"#FFE176","warning-150":"#FFCF25","warning-200":"#F4BF06","warning-250":"#E3B205","warning-300":"#D3A504","warning-350":"#C29805","warning-400":"#B28C03","warning-450":"#A27F03","warning-500":"#937303","warning-550":"#836703","warning-600":"#745B03","warning-650":"#625019","warning-700":"#524620","warning-750":"#443B20","warning-800":"#36301D","warning-850":"#2A2619","warning-900":"#1E1C13","warning-950":"#12110C","error-050":"#FCEDED","error-100":"#FADBDB","error-150":"#F7C9C9","error-200":"#F5B7B7","error-250":"#F2A4A4","error-300":"#EF9191","error-350":"#EC7D7D","error-400":"#E96868","error-450":"#E55050","error-500":"#E13131","error-550":"#D80000","error-600":"#C00101","error-650":"#9E2219","error-700":"#802820","error-750":"#662820","error-800":"#4F231E","error-850":"#3B1D19","error-900":"#2A1614","error-950":"#1A0E0C","red-050":"#FDEDED","red-100":"#FADBDB","red-150":"#F8C9C9","red-200":"#F5B7B6","red-250":"#F3A4A3","red-300":"#F09190","red-350":"#EE7C7B","red-400":"#EB6665","red-450":"#E74E4D","red-500":"#D83F3D","red-550":"#C23837","red-600":"#AC3231","red-650":"#8D3531","red-700":"#73332F","red-750":"#5B2F2B","red-800":"#472826","red-850":"#35211F","red-900":"#251817","red-950":"#160F0E","orange-050":"#FDEEE2","orange-100":"#FCDDC5","orange-150":"#FACBA8","orange-200":"#F8B98B","orange-250":"#F6A76A","orange-300":"#F4934B","orange-350":"#F27E27","orange-400":"#E76E12","orange-450":"#D26411","orange-500":"#BE5B0F","orange-550":"#AA510E","orange-600":"#97480C","orange-650":"#7E431D","orange-700":"#673C22","orange-750":"#533422","orange-800":"#412C1F","orange-850":"#31231B","orange-900":"#221A14","orange-950":"#15100C","brown-050":"#F3F0EF","brown-100":"#E7E1DF","brown-150":"#DCD2CF","brown-200":"#D0C4BF","brown-250":"#C5B6B0","brown-300":"#BAA7A1","brown-350":"#AF9992","brown-400":"#A48B83","brown-450":"#997E74","brown-500":"#8F7065","brown-550":"#846357","brown-600":"#7A5649","brown-650":"#684C42","brown-700":"#57423C","brown-750":"#463833","brown-800":"#382E2A","brown-850":"#2B2422","brown-900":"#1F1B19","brown-950":"#121010","yellow-050":"#FAF0D3","yellow-100":"#F5E2A4","yellow-150":"#F0D275","yellow-200":"#EBC242","yellow-250":"#E4B213","yellow-300":"#D4A511","yellow-350":"#C39810","yellow-400":"#B38B0F","yellow-450":"#A37F0D","yellow-500":"#93730C","yellow-550":"#84670B","yellow-600":"#755B0A","yellow-650":"#63501C","yellow-700":"#534521","yellow-750":"#443A21","yellow-800":"#36301F","yellow-850":"#29261A","yellow-900":"#1D1C14","yellow-950":"#12110C","green-050":"#E2F6E5","green-100":"#C5ECCA","green-150":"#A7E3AF","green-200":"#89D894","green-250":"#67CE75","green-300":"#4DC25D","green-350":"#48B257","green-400":"#41A44F","green-450":"#3B9548","green-500":"#368741","green-550":"#30793A","green-600":"#2B6B33","green-650":"#2F5C34","green-700":"#2E4E31","green-750":"#2A412C","green-800":"#253426","green-850":"#1E281F","green-900":"#171D17","green-950":"#0F120F","blue-1-050":"#EBF1FF","blue-1-100":"#D6E3FE","blue-1-150":"#C2D5FE","blue-1-200":"#ADC7FE","blue-1-250":"#99B8FD","blue-1-300":"#84AAFD","blue-1-350":"#6F9BFD","blue-1-400":"#5A8DFB","blue-1-450":"#437DFC","blue-1-500":"#3D71E4","blue-1-550":"#3665CC","blue-1-600":"#305AB5","blue-1-650":"#315093","blue-1-700":"#2E4675","blue-1-750":"#293B5E","blue-1-800":"#243048","blue-1-850":"#1E2635","blue-1-900":"#171C25","blue-1-950":"#0E1116","blue-2-050":"#E2F4F9","blue-2-100":"#C5E9F3","blue-2-150":"#A7DDED","blue-2-200":"#88D1E6","blue-2-250":"#68C5E0","blue-2-300":"#48B8D9","blue-2-350":"#3BAACA","blue-2-400":"#359CB9","blue-2-450":"#318EA9","blue-2-500":"#2C8199","blue-2-550":"#277389","blue-2-600":"#236679","blue-2-650":"#2A5866","blue-2-700":"#2A4B55","blue-2-750":"#283F47","blue-2-800":"#233337","blue-2-850":"#1D272A","blue-2-900":"#161C1E","blue-2-950":"#0E1112","purple-050":"#F6EEFF","purple-100":"#ECDCFF","purple-150":"#E3CBFE","purple-200":"#DAB9FE","purple-250":"#D0A7FE","purple-300":"#C795FE","purple-350":"#BD83FD","purple-400":"#B36FFD","purple-450":"#A85BFD","purple-500":"#9B4BF3","purple-550":"#8B43DA","purple-600":"#7B3CC1","purple-650":"#673C9B","purple-700":"#56387D","purple-750":"#463162","purple-800":"#382A4A","purple-850":"#2A2237","purple-900":"#1E1926","purple-950":"#121017","pink-050":"#FCEDF5","pink-100":"#F9DAEA","pink-150":"#F7C7E0","pink-200":"#F4B4D5","pink-250":"#F1A1CA","pink-300":"#EE8CBF","pink-350":"#EA77B3","pink-400":"#E760A6","pink-450":"#E24797","pink-500":"#CD4089","pink-550":"#B8397B","pink-600":"#A3336D","pink-650":"#86355E","pink-700":"#6E334F","pink-750":"#582E42","pink-800":"#442834","pink-850":"#332028","pink-900":"#24181D","pink-950":"#160F12","black-000":"#1B1C1D00","black-050":"#1B1C1D0D","black-100":"#1B1C1D1A","black-150":"#1B1C1D26","black-200":"#1B1C1D33","black-250":"#1B1C1D40","black-300":"#1B1C1D4D","black-350":"#1B1C1D59","black-400":"#1B1C1D66","black-450":"#1B1C1D73","black-500":"#1B1C1D80","black-550":"#1B1C1D8C","black-600":"#1B1C1D99","black-650":"#1B1C1DA6","black-700":"#1B1C1DB2","black-750":"#1B1C1DBF","black-800":"#1B1C1DCC","black-850":"#1B1C1DD9","black-900":"#1B1C1DE5","black-950":"#101112F2","white-000":"#F7F8F800","white-050":"#F7F8F80D","white-100":"#F7F8F81A","white-150":"#F7F8F826","white-200":"#F7F8F833","white-250":"#F7F8F840","white-300":"#F7F8F84D","white-350":"#F7F8F859","white-400":"#F7F8F866","white-450":"#F7F8F873","white-500":"#F7F8F880","white-550":"#F7F8F88C","white-600":"#F7F8F899","white-650":"#F7F8F8A6","white-700":"#F7F8F8B2","white-750":"#F7F8F8BF","white-800":"#F7F8F8CC","white-850":"#F7F8F8D9","white-900":"#F7F8F8E5","white-950":"#F7F8F8F2","white-975":"#F7F8F8F9"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"font":{"sizes":{"xs":"0.75rem","sm":"0.875rem","md":"1rem","lg":"1.125rem","ml":"0.938rem","xl":"1.25rem","t":"0.6875rem","s":"0.75rem","h1":"2rem","h2":"1.75rem","h3":"1.5rem","h4":"1.375rem","h5":"1.25rem","h6":"1.125rem","xl-alt":"5rem","lg-alt":"4.5rem","md-alt":"4rem","sm-alt":"3.5rem","xs-alt":"3rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","st":"0.25rem","4xs":"0.125rem","3xs":"0.25rem","2xs":"0.375rem","xxxs":"0.25rem","xxs":"0.375rem","xs":"0.5rem","sm":"0.75rem","base":"1rem","md":"1.5rem","lg":"2rem","xl":"2.5rem","xxl":"3rem","xxxl":"3.5rem","2xl":"3rem","3xl":"3.5rem","4xl":"4rem","5xl":"4.5rem","6xl":"6rem","7xl":"7.5rem"},"breakpoints":{"xs":"0px","sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#FFFFFF","secondary":"#FFFFFF","tertiary":"#F7F8F8"},"semantic":{"overlay":{"primary":"#1B1C1D0D","primary-hover":"#1B1C1D1A"},"contextual":{"primary":"#1B1C1D0D","primary-hover":"#1B1C1D1A"},"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#E1E2E5","secondary-hover":"#D2D4D8","tertiary":"#F0F1F2","tertiary-hover":"#E1E2E5"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#C8EEA8","secondary-hover":"#AAE579","tertiary":"#E4F7D4","tertiary-hover":"#C8EEA8"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#FFE176","secondary-hover":"#FFCF25","tertiary":"#FFF1BD","tertiary-hover":"#FFE176"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#FADBDB","secondary-hover":"#F7C9C9","tertiary":"#FCEDED","tertiary-hover":"#FADBDB"},"disabled":{"primary":"#E1E2E5","secondary":"#F0F1F2"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}}},"content":{"logo1":"#377FDB","logo2":"#377FDB","semantic":{"contextual":{"primary":"#F7F8F8F2"},"overlay":{"primary":"#F7F8F8F2"},"brand":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#1167D4","on-brand":"#EAF1FB"},"neutral":{"primary":"#252627","secondary":"#5C5F63","tertiary":"#686B6F","on-neutral":"#F0F1F2"},"info":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#1167D4","on-info":"#EAF1FB"},"success":{"primary":"#344D24","secondary":"#3A6A14","tertiary":"#427816","on-success":"#E4F7D4"},"warning":{"primary":"#524620","secondary":"#745B03","tertiary":"#836703","on-warning":"#FFF1BD"},"error":{"primary":"#802820","secondary":"#C00101","tertiary":"#D80000","on-error":"#FCEDED"},"disabled":{"primary":"#A7ACB2","secondary":"#F7F8F880"}},"palette":{"brand":{"primary":"#2976D8"},"red":{"primary":"#D83F3D"},"orange":{"primary":"#BE5B0F"},"brown":{"primary":"#8F7065"},"yellow":{"primary":"#93730C"},"green":{"primary":"#368741"},"blue-1":{"primary":"#3D71E4"},"blue-2":{"primary":"#2C8199"},"purple":{"primary":"#9B4BF3"},"pink":{"primary":"#CD4089"},"gray":{"primary":"#74777C"}}},"border":{"surface":{"primary":"#E1E2E5"},"semantic":{"contextual":{"primary":"#F7F8F833"},"overlay":{"primary":"#F7F8F833"},"brand":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"neutral":{"primary":"#686B6F","secondary":"#A7ACB2","tertiary":"#D2D4D8"},"info":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"success":{"primary":"#427816","secondary":"#6AC024","tertiary":"#AAE579"},"warning":{"primary":"#836703","secondary":"#D3A504","tertiary":"#FFCF25"},"error":{"primary":"#D80000","secondary":"#EF9191","tertiary":"#F7C9C9"},"disabled":{"primary":"#E1E2E5"}}}},"components":{"tooltip":{"border-radius":"0.5rem","background-color":"#F0F1F2","border-color":"#D2D4D8","color":"#686B6F","font-size":"0.75rem","padding":"1rem","max-width":"150px"},"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#F0F1F2","color":"#252627","font-weight":400,"icon-size":"19px","progress-bar-height":"3px"},"modal":{"background-color":"#FFFFFF","backdrop-color":"#00000099","border-radius":"4px","border-color":"#E1E2E5","box-shadow":"0px 1px 2px 0px #0C1A2B4D","color":"#252627","title-font-weight":600,"content-font-size":"0.875rem","content-font-weight":400,"content-color":"#252627","width-small":"300px","width-medium":"600px","width-large":"800px","width-extra-large":"75%"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-width--hover":"1px","border-width--focus":"1px","border-color":"#D2D4D8","border-color--hover":"#D2D4D8","border-color--focus":"#1167D4","border-color--disabled":"#E1E2E5","border-style":"solid","label-color":"#686B6F","label-color--focus":"#20467F","background-color":"#FFFFFF","value-color":"#252627","value-color--disabled":"#5C5F63"},"forms-switch":{"accent-color":"#1167D4","rail-background-color":"#686B6F","rail-background-color--disabled":"#A7ACB2","rail-border-radius":"50vw","handle-background-color":"#F7F8F8F2","handle-background-color--disabled":"#F7F8F880","handle-border-radius":"50%"},"forms-select":{"border-color":"#D2D4D8","border-color--focus":"#1167D4","border-color--hover":"#D2D4D8","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","border-width--focus":"1px","border-width--hover":"1px","value-color":"#252627","value-color--disabled":"#A7ACB2","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#1B1C1D0D","item-background-color--selected":"#D5E4F7","item-color":"#252627","item-color--disabled":"#F7F8F880","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color":"#686B6F","label-color--focus":"#20467F","multi-pill-background-color":"#F0F1F2","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"1rem"},"forms-radio":{},"forms-labelledbox":{"label-color--small":"#686B6F","label-color--big":"#252627","label-color--small--disabled":"#5C5F63","label-color--big--disabled":"#5C5F63"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"4px","border-radius--focus":"4px","border-width":"1px","border-width--hover":"1px","border-width--focus":"1px","border-color":"#D2D4D8","border-color--hover":"#D2D4D8","border-color--focus":"#1167D4","border-style":"solid","placeholder-color":"#686B6F","label-color":"#686B6F","label-color--focus":"#20467F","background-color":"#FFFFFF","value-color":"#252627","value-color--disabled":"#A7ACB2"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#D2D4D8","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EAF1FB","color":"#252627","color--success":"#427816","color--error":"#D80000","padding":"1rem","accent-color":"#1167D4","text-color":"#686B6F","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#252627","file-text-weight":300,"file-border-color":"#D2D4D8","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#686B6F"},"forms-field":{"width":"292px","font-size":"0.75rem","color":"#5C5F63","color--error":"#C00101","color--success":"#3A6A14","color--disabled":"#A7ACB2"},"forms-datepicker":{"border-color":"#D2D4D8","border-color--disabled":"#D2D4D8","border-color--focus":"#1167D4","border-color--hover":"#D2D4D8","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","border-width--focus":"1px","border-width--hover":"1px","value-color":"#686B6F","value-color--disabled":"#A7ACB2","font-size":"1.125rem","height":"3.5rem","item-background-color--hover":"#E1E2E5","item-background-color--selected":"#EAF1FB","item-color":"#252627","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EAF1FB","range-selection-background-color--disabled":"#F0F1F2","grid-cell--border-color--today":"#1167D4","grid-cell--color--today":"#20467F","label-color--focus":"#20467F"},"forms-checkbox":{"background-color--hover":"#E1E2E5","background-color":"#FFFFFF","font-size":"0.75rem","font-weight":500,"color":"#252627","border-color":"#686B6F","border-color--hover":"#686B6F","border-color--focus":"#20467F","border-radius":"2px","border-width":"1.5px","border-width--hover":"1px","accent-color":"#1167D4","accent-color--disabled":"#A7ACB2","checkmark-color":"#F7F8F8F2","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"4px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.875rem","small-icon-font-size":"1rem","nano-font-size":"0.75rem","nano-icon-font-size":"1rem","font-weight":500,"font-family":"\"Roboto Flex Variable\", sans-serif"},"alert":{"background-color":"#F0F1F2","border-radius":"4px","border-color":"#686B6F","border-left-color":"#686B6F","font-weight":500,"color":"#252627","icon-size":"19px","additional-font-weight":400,"additional-color":"#252627"}}},"dark":{"globals":{"colors":{"logo-1-light":"#377FDB","logo-2-light":"#377FDB","logo-1-dark":"#C1D6F2","logo-2-dark":"#C1D6F2","brand-050":"#EAF1FB","brand-100":"#D5E4F7","brand-150":"#C0D6F4","brand-200":"#ABC9F0","brand-250":"#96BCEC","brand-300":"#80AEE8","brand-350":"#6CA0E4","brand-400":"#5693E0","brand-450":"#4085DC","brand-500":"#2976D8","brand-550":"#1167D4","brand-600":"#0659C5","brand-650":"#1A509F","brand-700":"#20467F","brand-750":"#203C63","brand-800":"#1D314C","brand-850":"#1A2638","brand-900":"#141C28","brand-950":"#0C1117","gray-000":"#FFFFFF","gray-025":"#F7F8F8","gray-050":"#F0F1F2","gray-100":"#E1E2E5","gray-150":"#D2D4D8","gray-200":"#C4C7CB","gray-250":"#B5B9BE","gray-300":"#A7ACB2","gray-350":"#999EA5","gray-400":"#8D9197","gray-450":"#80848A","gray-500":"#74777C","gray-550":"#686B6F","gray-600":"#5C5F63","gray-650":"#505356","gray-700":"#45474A","gray-750":"#3A3B3E","gray-800":"#2F3033","gray-850":"#252627","gray-900":"#1B1C1D","gray-950":"#101112","gray-1000":"#000000","info-050":"#EAF1FB","info-100":"#D5E4F7","info-150":"#C0D6F4","info-200":"#ABC9F0","info-250":"#96BCEC","info-300":"#80AEE8","info-350":"#6CA0E4","info-400":"#5693E0","info-450":"#4085DC","info-500":"#2976D8","info-550":"#1167D4","info-600":"#0659C5","info-650":"#1A509F","info-700":"#20467F","info-750":"#203C63","info-800":"#1D314C","info-850":"#1A2638","info-900":"#141C28","info-950":"#0C1117","success-050":"#E4F7D4","success-100":"#C8EEA8","success-150":"#AAE579","success-200":"#89DC45","success-250":"#72CF27","success-300":"#6AC024","success-350":"#61B121","success-400":"#59A21E","success-450":"#51941C","success-500":"#4B851A","success-550":"#427816","success-600":"#3A6A14","success-650":"#385C1F","success-700":"#344D24","success-750":"#2E4022","success-800":"#27341F","success-850":"#20281A","success-900":"#181D15","success-950":"#10120E","warning-050":"#FFF1BD","warning-100":"#FFE176","warning-150":"#FFCF25","warning-200":"#F4BF06","warning-250":"#E3B205","warning-300":"#D3A504","warning-350":"#C29805","warning-400":"#B28C03","warning-450":"#A27F03","warning-500":"#937303","warning-550":"#836703","warning-600":"#745B03","warning-650":"#625019","warning-700":"#524620","warning-750":"#443B20","warning-800":"#36301D","warning-850":"#2A2619","warning-900":"#1E1C13","warning-950":"#12110C","error-050":"#FCEDED","error-100":"#FADBDB","error-150":"#F7C9C9","error-200":"#F5B7B7","error-250":"#F2A4A4","error-300":"#EF9191","error-350":"#EC7D7D","error-400":"#E96868","error-450":"#E55050","error-500":"#E13131","error-550":"#D80000","error-600":"#C00101","error-650":"#9E2219","error-700":"#802820","error-750":"#662820","error-800":"#4F231E","error-850":"#3B1D19","error-900":"#2A1614","error-950":"#1A0E0C","red-050":"#FDEDED","red-100":"#FADBDB","red-150":"#F8C9C9","red-200":"#F5B7B6","red-250":"#F3A4A3","red-300":"#F09190","red-350":"#EE7C7B","red-400":"#EB6665","red-450":"#E74E4D","red-500":"#D83F3D","red-550":"#C23837","red-600":"#AC3231","red-650":"#8D3531","red-700":"#73332F","red-750":"#5B2F2B","red-800":"#472826","red-850":"#35211F","red-900":"#251817","red-950":"#160F0E","orange-050":"#FDEEE2","orange-100":"#FCDDC5","orange-150":"#FACBA8","orange-200":"#F8B98B","orange-250":"#F6A76A","orange-300":"#F4934B","orange-350":"#F27E27","orange-400":"#E76E12","orange-450":"#D26411","orange-500":"#BE5B0F","orange-550":"#AA510E","orange-600":"#97480C","orange-650":"#7E431D","orange-700":"#673C22","orange-750":"#533422","orange-800":"#412C1F","orange-850":"#31231B","orange-900":"#221A14","orange-950":"#15100C","brown-050":"#F3F0EF","brown-100":"#E7E1DF","brown-150":"#DCD2CF","brown-200":"#D0C4BF","brown-250":"#C5B6B0","brown-300":"#BAA7A1","brown-350":"#AF9992","brown-400":"#A48B83","brown-450":"#997E74","brown-500":"#8F7065","brown-550":"#846357","brown-600":"#7A5649","brown-650":"#684C42","brown-700":"#57423C","brown-750":"#463833","brown-800":"#382E2A","brown-850":"#2B2422","brown-900":"#1F1B19","brown-950":"#121010","yellow-050":"#FAF0D3","yellow-100":"#F5E2A4","yellow-150":"#F0D275","yellow-200":"#EBC242","yellow-250":"#E4B213","yellow-300":"#D4A511","yellow-350":"#C39810","yellow-400":"#B38B0F","yellow-450":"#A37F0D","yellow-500":"#93730C","yellow-550":"#84670B","yellow-600":"#755B0A","yellow-650":"#63501C","yellow-700":"#534521","yellow-750":"#443A21","yellow-800":"#36301F","yellow-850":"#29261A","yellow-900":"#1D1C14","yellow-950":"#12110C","green-050":"#E2F6E5","green-100":"#C5ECCA","green-150":"#A7E3AF","green-200":"#89D894","green-250":"#67CE75","green-300":"#4DC25D","green-350":"#48B257","green-400":"#41A44F","green-450":"#3B9548","green-500":"#368741","green-550":"#30793A","green-600":"#2B6B33","green-650":"#2F5C34","green-700":"#2E4E31","green-750":"#2A412C","green-800":"#253426","green-850":"#1E281F","green-900":"#171D17","green-950":"#0F120F","blue-1-050":"#EBF1FF","blue-1-100":"#D6E3FE","blue-1-150":"#C2D5FE","blue-1-200":"#ADC7FE","blue-1-250":"#99B8FD","blue-1-300":"#84AAFD","blue-1-350":"#6F9BFD","blue-1-400":"#5A8DFB","blue-1-450":"#437DFC","blue-1-500":"#3D71E4","blue-1-550":"#3665CC","blue-1-600":"#305AB5","blue-1-650":"#315093","blue-1-700":"#2E4675","blue-1-750":"#293B5E","blue-1-800":"#243048","blue-1-850":"#1E2635","blue-1-900":"#171C25","blue-1-950":"#0E1116","blue-2-050":"#E2F4F9","blue-2-100":"#C5E9F3","blue-2-150":"#A7DDED","blue-2-200":"#88D1E6","blue-2-250":"#68C5E0","blue-2-300":"#48B8D9","blue-2-350":"#3BAACA","blue-2-400":"#359CB9","blue-2-450":"#318EA9","blue-2-500":"#2C8199","blue-2-550":"#277389","blue-2-600":"#236679","blue-2-650":"#2A5866","blue-2-700":"#2A4B55","blue-2-750":"#283F47","blue-2-800":"#233337","blue-2-850":"#1D272A","blue-2-900":"#161C1E","blue-2-950":"#0E1112","purple-050":"#F6EEFF","purple-100":"#ECDCFF","purple-150":"#E3CBFE","purple-200":"#DAB9FE","purple-250":"#D0A7FE","purple-300":"#C795FE","purple-350":"#BD83FD","purple-400":"#B36FFD","purple-450":"#A85BFD","purple-500":"#9B4BF3","purple-550":"#8B43DA","purple-600":"#7B3CC1","purple-650":"#673C9B","purple-700":"#56387D","purple-750":"#463162","purple-800":"#382A4A","purple-850":"#2A2237","purple-900":"#1E1926","purple-950":"#121017","pink-050":"#FCEDF5","pink-100":"#F9DAEA","pink-150":"#F7C7E0","pink-200":"#F4B4D5","pink-250":"#F1A1CA","pink-300":"#EE8CBF","pink-350":"#EA77B3","pink-400":"#E760A6","pink-450":"#E24797","pink-500":"#CD4089","pink-550":"#B8397B","pink-600":"#A3336D","pink-650":"#86355E","pink-700":"#6E334F","pink-750":"#582E42","pink-800":"#442834","pink-850":"#332028","pink-900":"#24181D","pink-950":"#160F12","black-000":"#1B1C1D00","black-050":"#1B1C1D0D","black-100":"#1B1C1D1A","black-150":"#1B1C1D26","black-200":"#1B1C1D33","black-250":"#1B1C1D40","black-300":"#1B1C1D4D","black-350":"#1B1C1D59","black-400":"#1B1C1D66","black-450":"#1B1C1D73","black-500":"#1B1C1D80","black-550":"#1B1C1D8C","black-600":"#1B1C1D99","black-650":"#1B1C1DA6","black-700":"#1B1C1DB2","black-750":"#1B1C1DBF","black-800":"#1B1C1DCC","black-850":"#1B1C1DD9","black-900":"#1B1C1DE5","black-950":"#101112F2","white-000":"#F7F8F800","white-050":"#F7F8F80D","white-100":"#F7F8F81A","white-150":"#F7F8F826","white-200":"#F7F8F833","white-250":"#F7F8F840","white-300":"#F7F8F84D","white-350":"#F7F8F859","white-400":"#F7F8F866","white-450":"#F7F8F873","white-500":"#F7F8F880","white-550":"#F7F8F88C","white-600":"#F7F8F899","white-650":"#F7F8F8A6","white-700":"#F7F8F8B2","white-750":"#F7F8F8BF","white-800":"#F7F8F8CC","white-850":"#F7F8F8D9","white-900":"#F7F8F8E5","white-950":"#F7F8F8F2","white-975":"#F7F8F8F9"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"font":{"sizes":{"xs":"0.75rem","sm":"0.875rem","md":"1rem","lg":"1.125rem","ml":"0.938rem","xl":"1.25rem","t":"0.6875rem","s":"0.75rem","h1":"2rem","h2":"1.75rem","h3":"1.5rem","h4":"1.375rem","h5":"1.25rem","h6":"1.125rem","xl-alt":"5rem","lg-alt":"4.5rem","md-alt":"4rem","sm-alt":"3.5rem","xs-alt":"3rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","st":"0.25rem","4xs":"0.125rem","3xs":"0.25rem","2xs":"0.375rem","xxxs":"0.25rem","xxs":"0.375rem","xs":"0.5rem","sm":"0.75rem","base":"1rem","md":"1.5rem","lg":"2rem","xl":"2.5rem","xxl":"3rem","xxxl":"3.5rem","2xl":"3rem","3xl":"3.5rem","4xl":"4rem","5xl":"4.5rem","6xl":"6rem","7xl":"7.5rem"},"breakpoints":{"xs":"0px","sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#2F3033","secondary":"#252627","tertiary":"#1B1C1D"},"semantic":{"contextual":{"primary":"#F7F8F80D","primary-hover":"#F7F8F81A"},"overlay":{"primary":"#F7F8F80D","primary-hover":"#F7F8F81A"},"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#45474A","secondary-hover":"#3A3B3E","tertiary":"#3A3B3E","tertiary-hover":"#2F3033"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#344D24","secondary-hover":"#2E4022","tertiary":"#2E4022","tertiary-hover":"#27341F"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#524620","secondary-hover":"#443B20","tertiary":"#443B20","tertiary-hover":"#36301D"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#802820","secondary-hover":"#662820","tertiary":"#662820","tertiary-hover":"#4F231E"},"disabled":{"primary":"#3A3B3E","secondary":"#2F3033"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}},"content":{"logo1":"#C1D6F2","logo2":"#C1D6F2","semantic":{"contextual":{"primary":"#1B1C1DD9"},"overlay":{"primary":"#1B1C1DD9"},"brand":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-brand":"#EAF1FB"},"neutral":{"primary":"#F0F1F2","secondary":"#E1E2E5","tertiary":"#B5B9BE","on-neutral":"#F0F1F2"},"info":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-info":"#EAF1FB"},"success":{"primary":"#E4F7D4","secondary":"#C8EEA8","tertiary":"#72CF27","on-success":"#E4F7D4"},"warning":{"primary":"#FFF1BD","secondary":"#FFE176","tertiary":"#E3B205","on-warning":"#FFF1BD"},"error":{"primary":"#FCEDED","secondary":"#FADBDB","tertiary":"#F2A4A4","on-error":"#FCEDED"},"disabled":{"primary":"#5C5F63","secondary":"#1B1C1D4D"}},"palette":{"brand":{"primary":"#2976D8"},"red":{"primary":"#D83F3D"},"orange":{"primary":"#BE5B0F"},"brown":{"primary":"#8F7065"},"yellow":{"primary":"#93730C"},"green":{"primary":"#368741"},"blue-1":{"primary":"#3D71E4"},"blue-2":{"primary":"#2C8199"},"purple":{"primary":"#9B4BF3"},"pink":{"primary":"#CD4089"},"gray":{"primary":"#74777C"}}},"border":{"surface":{"primary":"#3A3B3E"},"semantic":{"contextual":{"primary":"#1B1C1D33"},"overlay":{"primary":"#1B1C1D33"},"brand":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"neutral":{"primary":"#80848A","secondary":"#5C5F63","tertiary":"#45474A"},"info":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"success":{"primary":"#51941C","secondary":"#3A6A14","tertiary":"#344D24"},"warning":{"primary":"#A27F03","secondary":"#745B03","tertiary":"#524620"},"error":{"primary":"#E55050","secondary":"#C00101","tertiary":"#802820"},"disabled":{"primary":"#2F3033"}}}},"components":{}}}};