studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(react) homegenize form inputs states

Browse Source 
Currently between all components some states were not aligned (error, success,
hover, focus,...)
This commit is contained in:
jbpenrath
2025-12-08 14:29:52 +01:00
committed by Jean-Baptiste PENRATH
parent 992061fc8e
commit 67ba361370
21 changed files with 540 additions and 770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/react/src/components/Button/_index.scss
View File

@@ -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;

3
packages/react/src/components/Button/index.tsx
View File

@@ -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");
}

3
packages/react/src/components/Button/tokens.ts
View File

@@ -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,
};
};

67
packages/react/src/components/Forms/Checkbox/_index.scss
View File

@@ -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);
}
}

17
packages/react/src/components/Forms/Checkbox/tokens.ts
View File

@@ -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,
});

70
packages/react/src/components/Forms/DatePicker/_index.scss
View File

@@ -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(

8
packages/react/src/components/Forms/DatePicker/tokens.ts
View File

@@ -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,
});

3
packages/react/src/components/Forms/Field/_index.scss
View File

@@ -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);
}
}

37
packages/react/src/components/Forms/Input/_index.scss
View File

@@ -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);
}
}

10
packages/react/src/components/Forms/Input/index.stories.tsx
View File

@@ -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<typeof Input>;
export const Default = {
@@ -40,6 +49,7 @@ export const Error = {
state: "error",
icon: <span className="material-icons">person</span>,
text: "This is an optional error message",
disabled: false,
},
};

31
packages/react/src/components/Forms/Radio/_index.scss
View File

@@ -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);
}
}
}

13
packages/react/src/components/Forms/Radio/tokens.ts
View File

@@ -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 = () => ({});

6
packages/react/src/components/Forms/Select/_index.scss
View File

@@ -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;

11
packages/react/src/components/Forms/Select/tokens.ts
View File

@@ -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",

37
packages/react/src/components/Forms/TextArea/index.scss
View File

@@ -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);
}
}
}
}
}
}

7
packages/react/src/components/Forms/TextArea/tokens.ts
View File

@@ -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":

408
packages/react/src/cunningham-tokens.css
View File

@@ -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);
}

2
packages/react/src/cunningham-tokens.js
View File

File diff suppressed because one or more lines are too long

558
packages/react/src/cunningham-tokens.scss
View File

@@ -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;

2
packages/react/src/cunningham-tokens.ts
View File

File diff suppressed because one or more lines are too long