From 8d35d5e649c434fb910513f58466ce5ad162281c Mon Sep 17 00:00:00 2001 From: Ashley E Date: Tue, 3 Dec 2024 10:27:31 -0600 Subject: [PATCH] style: updates some components with semantic tokens (#325) * style: updates some components with semantic tokens * style(chip): update chip to use component semantic tokens * style(input): create new component specific semantic tokens created input.json for tokenstudio updated both the themes and metadata.json files --------- Co-authored-by: Julian Skinner --- .../_internal/pds-label/pds-label.scss | 8 ++- .../pds-accordion/pds-accordion.scss | 2 +- .../src/components/pds-avatar/pds-avatar.scss | 3 +- .../src/components/pds-button/pds-button.scss | 11 +++- .../components/pds-checkbox/pds-checkbox.scss | 2 +- .../src/components/pds-chip/pds-chip.scss | 52 ++++++------------- .../components/pds-chip/pds-chip.tokens.scss | 24 +++++++++ .../core/src/components/pds-chip/pds-chip.tsx | 2 +- .../src/components/pds-image/pds-image.scss | 4 +- libs/core/src/components/pds-image/readme.md | 7 +-- .../src/components/pds-input/pds-input.scss | 8 ++- .../pds-input/pds-input.tokens.scss | 7 +++ .../src/components/pds-input/pds-input.tsx | 2 +- .../src/components/pds-loader/pds-loader.scss | 8 +-- .../src/components/pds-radio/pds-radio.scss | 2 +- .../pds-sortable-item/pds-sortable-item.scss | 39 +++++--------- .../src/components/pds-switch/pds-switch.scss | 2 +- .../components/pds-textarea/pds-textarea.scss | 2 +- .../src/global/styles/tokens/$metadata.json | 3 +- .../src/global/styles/tokens/$themes.json | 5 +- .../global/styles/tokens/base/semantic.json | 12 ++++- .../kajabi_products/styles/semantic.scss | 2 + .../global/styles/tokens/components/chip.json | 50 +++++++++++++++++- .../styles/tokens/components/input.json | 14 +++++ 24 files changed, 176 insertions(+), 95 deletions(-) create mode 100644 libs/core/src/components/pds-chip/pds-chip.tokens.scss create mode 100644 libs/core/src/components/pds-input/pds-input.tokens.scss create mode 100644 libs/core/src/global/styles/tokens/components/input.json diff --git a/libs/core/src/components/_internal/pds-label/pds-label.scss b/libs/core/src/components/_internal/pds-label/pds-label.scss index d0cf67e91..96e0b3f0b 100644 --- a/libs/core/src/components/_internal/pds-label/pds-label.scss +++ b/libs/core/src/components/_internal/pds-label/pds-label.scss @@ -3,12 +3,10 @@ } label, pds-label { - --color-text-default: var(--pine-color-grey-950); - --color-text-disabled: var(--pine-color-grey-600); - - color: var(--color-text-default); + color: var(--pine-color-text-label); + font-weight: var(--pine-font-weight-medium); [disabled] &, *:disabled & { - color: var(--color-text-disabled); + color: var(--pine-color-text-label-disabled); } } diff --git a/libs/core/src/components/pds-accordion/pds-accordion.scss b/libs/core/src/components/pds-accordion/pds-accordion.scss index 674f05f1f..d8f6b074e 100644 --- a/libs/core/src/components/pds-accordion/pds-accordion.scss +++ b/libs/core/src/components/pds-accordion/pds-accordion.scss @@ -6,7 +6,7 @@ details { // TODO: Needs discussion --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring); - --color-text-hover: var(--pine-color-grey-800); + --color-text-hover: var(--pine-color-text-secondary); --number-animation-transform-timing: 200ms; diff --git a/libs/core/src/components/pds-avatar/pds-avatar.scss b/libs/core/src/components/pds-avatar/pds-avatar.scss index 3193162e0..b14542dc9 100644 --- a/libs/core/src/components/pds-avatar/pds-avatar.scss +++ b/libs/core/src/components/pds-avatar/pds-avatar.scss @@ -5,7 +5,6 @@ div { // These custom props are not reachable --color-background-container: var(--pine-color-mercury-050); - --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300); align-items: center; background-color: var(--color-background-container); @@ -52,7 +51,7 @@ div { .pds-avatar__badge { background-color: var(--pine-color-background-container); - border: var(--border-default); + border: var(--pine-border); border-color: var(--pine-color-secondary); border-radius: var(--pine-border-radius-round); bottom: var(--pine-dimension-none); diff --git a/libs/core/src/components/pds-button/pds-button.scss b/libs/core/src/components/pds-button/pds-button.scss index e998d19bc..c709072a1 100644 --- a/libs/core/src/components/pds-button/pds-button.scss +++ b/libs/core/src/components/pds-button/pds-button.scss @@ -12,6 +12,7 @@ align-items: center; background-color: var(--color-background-default); border: var(--pine-border); + border-color: var(--color-border-default); border-radius: var(--pine-border-radius-round); color: var(--color-text-default); // Set in the variant classes below display: flex; @@ -52,6 +53,8 @@ --color-background-default: var(--pine-color-primary); --color-background-hover: var(--pine-color-primary-hover); --color-background-disabled: var(--pine-color-primary-disabled); + --color-border-default: var(--pine-color-primary); + --color-border-hover: var(--pine-color-primary-hover); --color-text-default: var(--pine-color-text-primary); --color-text-disabled: var(--pine-color-text-primary-disabled); --color-outline: var(--pine-color-focus-ring); @@ -61,7 +64,9 @@ --color-background-default: var(--pine-color-accent); --color-background-hover: var(--pine-color-accent-hover); --color-background-disabled: var(--pine-color-accent-disabled); - --color-text-default: var(--pine-color-text-accent); + --color-border-default: var(--pine-color-accent); + --color-border-hover: var(--pine-color-accent-hover); + --color-text-default: var(--pine-color-text-primary); --color-text-disabled: var(--pine-color-text-accent-disabled); --color-outline: var(--pine-color-focus-ring); } @@ -70,7 +75,9 @@ --color-background-default: var(--pine-color-danger); --color-background-hover: var(--pine-color-danger-hover); --color-background-disabled: var(--pine-color-danger-disabled); - --color-text-default: var(--pine-color-text-danger); + --color-border-default: var(--pine-color-danger); + --color-border-hover: var(--pine-color-danger-hover); + --color-text-default: var(--pine-color-text-primary); --color-text-disabled: var(--pine-color-text-danger-disabled); --color-outline: var(--pine-color-focus-ring-danger); diff --git a/libs/core/src/components/pds-checkbox/pds-checkbox.scss b/libs/core/src/components/pds-checkbox/pds-checkbox.scss index 17aa222e7..c871c14f1 100644 --- a/libs/core/src/components/pds-checkbox/pds-checkbox.scss +++ b/libs/core/src/components/pds-checkbox/pds-checkbox.scss @@ -29,7 +29,7 @@ label, .pds-checkbox__message--error { - color: var( --pine-color-danger); + color: var(--pine-color-text-message-danger); } } diff --git a/libs/core/src/components/pds-chip/pds-chip.scss b/libs/core/src/components/pds-chip/pds-chip.scss index 021b34a49..cb6876b97 100644 --- a/libs/core/src/components/pds-chip/pds-chip.scss +++ b/libs/core/src/components/pds-chip/pds-chip.scss @@ -1,24 +1,6 @@ :host { --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); - --color-background-accent-dot: var(--pine-color-purple-600); - --color-background-accent-hover: var(--pine-color-purple-200); - - --color-background-danger-dot: var(--pine-color-red-600); - --color-background-danger-hover: var(--pine-color-red-200); - - --color-background-info-dot: var(--pine-color-blue-600); - --color-background-info-hover: var(--pine-color-blue-200); - - --color-background-neutral-dot: var(--pine-color-grey-600); - --color-background-neutral-hover: var(--pine-color-grey-400); - - --color-background-success-dot: var(--pine-color-green-600); - --color-background-success-hover: var(--pine-color-green-200); - - --color-background-warning-dot: var(--pine-color-yellow-600); - --color-background-warning-hover: var(--pine-color-yellow-200); - --spacing-sm: calc(var(--pine-dimension-150) / 2); --spacing-lg: calc(var(--pine-dimension-250) / 2); --spacing-xl: var(--pine-dimension-150); @@ -34,12 +16,12 @@ } $pds-chip-sentiment: ( - accent: var(--pine-color-accent), - danger: var(--pine-color-danger), - info: var(--pine-color-info), - neutral: var(--pine-color-neutral), - success: var(--pine-color-success), - warning: var(--pine-color-warning), + accent: var(--pine-chip-color-accent), + danger: var(--pine-chip-color-danger), + info: var(--pine-chip-color-info), + neutral: var(--pine-chip-color-neutral), + success: var(--pine-chip-color-success), + warning: var(--pine-chip-color-warning), ); $pds-chip-sentiment-text: ( @@ -52,21 +34,21 @@ $pds-chip-sentiment-text: ( ); $pds-chip-sentiment-dots: ( - accent: var(--color-background-accent-dot), - danger: var(--color-background-danger-dot), - info: var(--color-background-info-dot), - neutral: var(--color-background-neutral-dot), - success: var(--color-background-success-dot), - warning: var(--color-background-warning-dot), + accent: var(--pine-chip-color-accent-dot), + danger: var(--pine-chip-color-danger-dot), + info: var(--pine-chip-color-info-dot), + neutral: var(--pine-chip-color-neutral-dot), + success: var(--pine-chip-color-success-dot), + warning: var(--pine-chip-color-warning-dot), ); $pds-chip-sentiment-hover: ( accent: var(--pine-color-accent-hover), - danger: var(--color-background-danger-hover), - info: var(--color-background-info-hover), - neutral: var(--color-background-neutral-hover), - success: var(--color-background-success-hover), - warning: var(--color-background-warning-hover), + danger: var(--pine-chip-color-danger-hover), + info: var(--pine-chip-color-info-hover), + neutral: var(--pine-chip-color-neutral-hover), + success: var(--pine-chip-color-success-hover), + warning: var(--pine-chip-color-warning-hover), ); @each $sentiment, $value in $pds-chip-sentiment { diff --git a/libs/core/src/components/pds-chip/pds-chip.tokens.scss b/libs/core/src/components/pds-chip/pds-chip.tokens.scss new file mode 100644 index 000000000..562c4a6a7 --- /dev/null +++ b/libs/core/src/components/pds-chip/pds-chip.tokens.scss @@ -0,0 +1,24 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:host { + --pine-chip-color-warning-dot: var(--pine-color-yellow-600); + --pine-chip-color-warning-hover: var(--pine-color-yellow-300); + --pine-chip-color-warning: var(--pine-color-yellow-100); + --pine-chip-color-success-dot: var(--pine-color-green-600); + --pine-chip-color-success-hover: var(--pine-color-green-300); + --pine-chip-color-success: var(--pine-color-green-100); + --pine-chip-color-neutral-dot: var(--pine-color-grey-600); + --pine-chip-color-neutral-hover: var(--pine-color-grey-300); + --pine-chip-color-neutral: var(--pine-color-grey-100); + --pine-chip-color-info-dot: var(--pine-color-blue-600); + --pine-chip-color-info-hover: var(--pine-color-blue-300); + --pine-chip-color-info: var(--pine-color-blue-100); + --pine-chip-color-danger-dot: var(--pine-color-red-600); + --pine-chip-color-danger-hover: var(--pine-color-red-300); + --pine-chip-color-danger: var(--pine-color-red-100); + --pine-chip-color-accent-dot: var(--pine-color-purple-600); + --pine-chip-color-accent-hover: var(--pine-color-purple-300); + --pine-chip-color-accent: var(--pine-color-purple-100); +} diff --git a/libs/core/src/components/pds-chip/pds-chip.tsx b/libs/core/src/components/pds-chip/pds-chip.tsx index fb189afa7..83996775a 100644 --- a/libs/core/src/components/pds-chip/pds-chip.tsx +++ b/libs/core/src/components/pds-chip/pds-chip.tsx @@ -3,7 +3,7 @@ import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core'; @Component({ tag: 'pds-chip', - styleUrls: ['pds-chip.scss'], + styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'], shadow: true, }) export class PdsChip { diff --git a/libs/core/src/components/pds-image/pds-image.scss b/libs/core/src/components/pds-image/pds-image.scss index ddba6bab2..c1c82ba22 100644 --- a/libs/core/src/components/pds-image/pds-image.scss +++ b/libs/core/src/components/pds-image/pds-image.scss @@ -1,6 +1,6 @@ :host { /** - * @prop --image-aspect-ratio: The image's aspect ratio. + * @prop --dimension-aspect-ratio: The image's aspect ratio. */ --dimension-aspect-ratio: auto; @@ -9,4 +9,4 @@ img { aspect-ratio: var(--dimension-aspect-ratio); -} \ No newline at end of file +} diff --git a/libs/core/src/components/pds-image/readme.md b/libs/core/src/components/pds-image/readme.md index 19c2a1b53..f3b62d86c 100644 --- a/libs/core/src/components/pds-image/readme.md +++ b/libs/core/src/components/pds-image/readme.md @@ -21,9 +21,10 @@ ## CSS Custom Properties -| Name | Description | -| ---------------------- | ------------------------- | -| `--image-aspect-ratio` | The image's aspect ratio. | +| Name | Description | +| -------------------------- | ------------------------- | +| `--dimension-aspect-ratio` | The image's aspect ratio. | +| `--image-aspect-ratio` | The image's aspect ratio. | ---------------------------------------------- diff --git a/libs/core/src/components/pds-input/pds-input.scss b/libs/core/src/components/pds-input/pds-input.scss index 46e06f224..5e6966049 100644 --- a/libs/core/src/components/pds-input/pds-input.scss +++ b/libs/core/src/components/pds-input/pds-input.scss @@ -78,8 +78,7 @@ input { &:has(~.pds-input__error-message) { - - background-color: var(--pine-color-danger); + background-color: var(--pine-input-color-background-danger); border-color: var(--pine-color-border-danger); &:focus-visible { @@ -93,12 +92,11 @@ input { .pds-input__error-message, .pds-input__helper-message { font-size: var(--pine-font-size); - font-weight: var(--pine-color-text-placeholder); - line-height: var(--pine-line-height-text-message); + font-weight: var(--pine-font-weight-medium); margin-block-end: 0; margin-block-start: var(--pine-dimension-xs); } .pds-input__error-message { - color: var(--pine-color-text-danger); + color: var(--pine-color-text-message-danger); } diff --git a/libs/core/src/components/pds-input/pds-input.tokens.scss b/libs/core/src/components/pds-input/pds-input.tokens.scss new file mode 100644 index 000000000..121888751 --- /dev/null +++ b/libs/core/src/components/pds-input/pds-input.tokens.scss @@ -0,0 +1,7 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:host { + --pine-input-color-background-danger: var(--pine-color-red-050); +} diff --git a/libs/core/src/components/pds-input/pds-input.tsx b/libs/core/src/components/pds-input/pds-input.tsx index defe8da7c..9b5c92fd9 100644 --- a/libs/core/src/components/pds-input/pds-input.tsx +++ b/libs/core/src/components/pds-input/pds-input.tsx @@ -4,7 +4,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label'; @Component({ tag: 'pds-input', - styleUrls: ['pds-input.scss'], + styleUrls: ['pds-input.tokens.scss', 'pds-input.scss'], shadow: true, }) export class PdsInput { diff --git a/libs/core/src/components/pds-loader/pds-loader.scss b/libs/core/src/components/pds-loader/pds-loader.scss index d257eddd7..c99864dd6 100644 --- a/libs/core/src/components/pds-loader/pds-loader.scss +++ b/libs/core/src/components/pds-loader/pds-loader.scss @@ -58,10 +58,10 @@ position: relative; span { - background-color: var(--pine-color-border); - block-size: 12px; + background-color: var(--pine-color-border-hover); + block-size: 6px; border-radius: var(--pine-border-radius-circle); - inline-size: 12px; + inline-size: 6px; opacity: var(--opacity-typing-dot-default); @for $i from 1 through 3 { @@ -75,7 +75,7 @@ @keyframes typing { 50% { opacity: var(--opacity-typing-dot-active); - transform: scale(1.2); + transform: scale(1.25); } } diff --git a/libs/core/src/components/pds-radio/pds-radio.scss b/libs/core/src/components/pds-radio/pds-radio.scss index f26c1dcf9..2a9b3a013 100644 --- a/libs/core/src/components/pds-radio/pds-radio.scss +++ b/libs/core/src/components/pds-radio/pds-radio.scss @@ -35,7 +35,7 @@ label, .pds-radio__message--error { - color: var(--pine-color-text-danger); + color: var(--pine-color-text-message-danger); } } diff --git a/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss b/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss index cb029bc6f..334557bf4 100644 --- a/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss +++ b/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss @@ -1,50 +1,37 @@ :host(.pds-sortable-item) { - --border-radius: var(--pine-border-radius-125); - - --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300); - --box-shadow: var(--pine-box-shadow-400); - --color-background-default: var(--pine-color-white); - --color-background-interactive: var(--pine-color-grey-200); - --color-interactive-handle: var(--pine-color-blue-300); - - --spacing-margin-inline-end: var(--pine-spacing-300); - --spacing-padding-block-xs: var(--pine-spacing-100); - --spacing-padding-inline: var(--pine-spacing-300); - --spacing-padding-inline-start: var(--pine-spacing-300); - align-items: center; display: flex; - padding-block: var(--spacing-padding-block-xs); - padding-inline: var(--spacing-padding-inline); + padding-block: var(--pine-dimension-xs); + padding-inline: var(--pine-dimension-md); .pds-sortable-item__actions { margin-inline-start: auto; - padding-inline-start: var(--spacing-padding-inline-start); + padding-inline-start: var(--pine-dimension-md); } .pds-sortable-item__handle { line-height: 1; - margin-inline-end: var(--spacing-margin-inline-end); + margin-inline-end: var(--pine-dimension-md); } // styles when sortable is bordered .pds-sortable--bordered & { &:first-child { - border-start-end-radius: var(--border-radius); - border-start-start-radius: var(--border-radius); + border-start-end-radius: calc(var(--pine-dimension-xs) * 1.25); + border-start-start-radius: calc(var(--pine-dimension-xs) * 1.25); } &:last-child { - border-end-end-radius: var(--border-radius); - border-end-start-radius: var(--border-radius); + border-end-end-radius: calc(var(--pine-dimension-xs) * 1.25); + border-end-start-radius: calc(var(--pine-dimension-xs) * 1.25); } } // styles when sortable is divided .pds-sortable--divided & { - border-block-end: var(--border-default); + border-block-end: var(--pine-border); &:last-child { border-block-end: 0; @@ -64,21 +51,21 @@ } :host(.pds-sortable-item):hover { - background-color: var(--color-background-interactive); + background-color: var(--pine-color-background-container-hover); pds-icon { - color: var(--color-interactive-handle) + color: var(--pine-color-info) } } :host(.pds-sortable-item--drag) { - background-color: var(--color-background-default); + background-color: var(--pine-color-background-container); border-radius: 0; box-shadow: var(--box-shadow); opacity: 1; } :host(.pds-sortable-item--ghost) { - background-color: var(--color-background-interactive); + background-color: var(--pine-color-background-container-hover); border-radius: 0; } diff --git a/libs/core/src/components/pds-switch/pds-switch.scss b/libs/core/src/components/pds-switch/pds-switch.scss index d9577702c..852f552e9 100644 --- a/libs/core/src/components/pds-switch/pds-switch.scss +++ b/libs/core/src/components/pds-switch/pds-switch.scss @@ -22,7 +22,7 @@ } :host(.pds-switch--error) { - color: var(--pine-color-text-danger); + color: var(--pine-color-text-message-danger); input, input:checked, diff --git a/libs/core/src/components/pds-textarea/pds-textarea.scss b/libs/core/src/components/pds-textarea/pds-textarea.scss index 62a185d4f..99dd45cd3 100644 --- a/libs/core/src/components/pds-textarea/pds-textarea.scss +++ b/libs/core/src/components/pds-textarea/pds-textarea.scss @@ -63,5 +63,5 @@ label { } .pds-textarea__error-message { - color: var(--pine-color-text-danger); + color: var(--pine-color-text-message-danger); } diff --git a/libs/core/src/global/styles/tokens/$metadata.json b/libs/core/src/global/styles/tokens/$metadata.json index 810718aca..0ec30349f 100644 --- a/libs/core/src/global/styles/tokens/$metadata.json +++ b/libs/core/src/global/styles/tokens/$metadata.json @@ -3,8 +3,9 @@ "base/core", "base/semantic", "components/chip", + "components/input", "brand/kajabi_products", "brand/kajabi_products/light", "brand/kajabi_products/dark" ] -} \ No newline at end of file +} diff --git a/libs/core/src/global/styles/tokens/$themes.json b/libs/core/src/global/styles/tokens/$themes.json index 6d48b3200..f2175c8ad 100644 --- a/libs/core/src/global/styles/tokens/$themes.json +++ b/libs/core/src/global/styles/tokens/$themes.json @@ -22,6 +22,7 @@ "base/core": "enabled", "base/semantic": "enabled", "components/chip": "enabled", + "components/input": "enabled", "brand/kajabi_products": "enabled" }, "$figmaCollectionId": "VariableCollectionId:175:2717", @@ -324,6 +325,7 @@ "base/core": "enabled", "base/semantic": "enabled", "components/chip": "enabled", + "components/input": "enabled", "brand/kajabi_products": "enabled", "brand/kajabi_products/light": "enabled" }, @@ -698,6 +700,7 @@ "base/core": "enabled", "base/semantic": "enabled", "components/chip": "enabled", + "components/input": "enabled", "brand/kajabi_products": "enabled", "brand/kajabi_products/dark": "enabled" }, @@ -983,4 +986,4 @@ }, "group": "kajabi_products" } -] \ No newline at end of file +] diff --git a/libs/core/src/global/styles/tokens/base/semantic.json b/libs/core/src/global/styles/tokens/base/semantic.json index aafaaded9..f7170cd5a 100644 --- a/libs/core/src/global/styles/tokens/base/semantic.json +++ b/libs/core/src/global/styles/tokens/base/semantic.json @@ -260,6 +260,16 @@ "type": "color" } }, + "label" : { + "@": { + "value": "{color.grey.950}", + "type": "color" + }, + "disabled": { + "value": "{color.grey.600}", + "type": "color" + } + }, "message": { "@": { "value": "{color.grey.800}", @@ -630,4 +640,4 @@ "type": "fontFamilies" } } -} \ No newline at end of file +} diff --git a/libs/core/src/global/styles/tokens/brand/kajabi_products/styles/semantic.scss b/libs/core/src/global/styles/tokens/brand/kajabi_products/styles/semantic.scss index 483a20e30..ae29c0722 100644 --- a/libs/core/src/global/styles/tokens/brand/kajabi_products/styles/semantic.scss +++ b/libs/core/src/global/styles/tokens/brand/kajabi_products/styles/semantic.scss @@ -52,6 +52,8 @@ --pine-color-text-info: #1e3a8a; --pine-color-text-info-disabled: #93c5fd; --pine-color-text-info-hover: #172554; + --pine-color-text-label: #1a1a19; + --pine-color-text-label-disabled: #828180; --pine-color-text-message: #4d4d4c; --pine-color-text-message-danger: #dc2626; --pine-color-text-message-disabled: #828180; diff --git a/libs/core/src/global/styles/tokens/components/chip.json b/libs/core/src/global/styles/tokens/components/chip.json index 278e04b9a..4059b276a 100644 --- a/libs/core/src/global/styles/tokens/components/chip.json +++ b/libs/core/src/global/styles/tokens/components/chip.json @@ -5,38 +5,86 @@ "@": { "value": "{color.purple.100}", "type": "color" + }, + "hover": { + "value": "{color.purple.300}", + "type": "color" + }, + "dot":{ + "value": "{color.purple.600}", + "type": "color" } }, "danger": { "@": { "value": "{color.red.100}", "type": "color" + }, + "hover": { + "value": "{color.red.300}", + "type": "color" + }, + "dot":{ + "value": "{color.red.600}", + "type": "color" } }, "info": { "@": { "value": "{color.blue.100}", "type": "color" + }, + "hover": { + "value": "{color.blue.300}", + "type": "color" + }, + "dot":{ + "value": "{color.blue.600}", + "type": "color" } }, "neutral": { "@": { "value": "{color.grey.100}", "type": "color" + }, + "hover": { + "value": "{color.grey.300}", + "type": "color" + }, + "dot":{ + "value": "{color.grey.600}", + "type": "color" } }, "success": { "@": { "value": "{color.green.100}", "type": "color" + }, + "hover": { + "value": "{color.green.300}", + "type": "color" + }, + "dot":{ + "value": "{color.green.600}", + "type": "color" } }, "warning": { "@": { "value": "{color.yellow.100}", "type": "color" + }, + "hover": { + "value": "{color.yellow.300}", + "type": "color" + }, + "dot":{ + "value": "{color.yellow.600}", + "type": "color" } } } } -} \ No newline at end of file +} diff --git a/libs/core/src/global/styles/tokens/components/input.json b/libs/core/src/global/styles/tokens/components/input.json new file mode 100644 index 000000000..05ed0e9bc --- /dev/null +++ b/libs/core/src/global/styles/tokens/components/input.json @@ -0,0 +1,14 @@ +{ + "input": { + "color": { + "background": { + "danger": { + "@": { + "value": "{color.red.050}", + "type": "color" + } + } + } + } + } +}