From 633cb0d6a65f18cde3324e8d0b3d4985f396a5d8 Mon Sep 17 00:00:00 2001 From: joannasikora Date: Thu, 27 Feb 2025 09:20:54 +0100 Subject: [PATCH] refactor(DesignTokens): update usage --- .../Accordion/Accordion.module.scss | 4 +- .../src/themes/variables.scss | 678 ++++++++++++++++++ 2 files changed, 681 insertions(+), 1 deletion(-) create mode 100644 packages/react-components/src/themes/variables.scss diff --git a/packages/react-components/src/components/Accordion/Accordion.module.scss b/packages/react-components/src/components/Accordion/Accordion.module.scss index 9f434ad49..59db13541 100644 --- a/packages/react-components/src/components/Accordion/Accordion.module.scss +++ b/packages/react-components/src/components/Accordion/Accordion.module.scss @@ -1,3 +1,5 @@ +@use '../../themes/variables.scss' as theme; + $base-class: 'accordion'; .#{$base-class} { @@ -25,7 +27,7 @@ $base-class: 'accordion'; } &--warning { - background-color: var(--surface-accent-emphasis-min-warning); + background-color: theme.$surface-accent-emphasis-min-warning; &:hover { border-color: var(--border-basic-warning); diff --git a/packages/react-components/src/themes/variables.scss b/packages/react-components/src/themes/variables.scss new file mode 100644 index 000000000..cd87b8498 --- /dev/null +++ b/packages/react-components/src/themes/variables.scss @@ -0,0 +1,678 @@ +// Theme-agnostic variables that will work with both light and dark themes + +// TODO dbl check for the proper variables (file autogenerated) + +$surface-primary-default: var(--surface-primary-default); +$surface-primary-hover: var(--surface-primary-hover); +$surface-accent-emphasis-min-warning: var( + --surface-accent-emphasis-min-warning +); + +// Data visualization - Categorical colors +$categorical-main-1: var(--categorical-main-1); +$categorical-main-2: var(--categorical-main-2); +$categorical-main-3: var(--categorical-main-3); +$categorical-main-4: var(--categorical-main-4); +$categorical-main-5: var(--categorical-main-5); +$categorical-main-6: var(--categorical-main-6); +$categorical-main-7: var(--categorical-main-7); +$categorical-main-8: var(--categorical-main-8); +$categorical-main-9: var(--categorical-main-9); +$categorical-main-10: var(--categorical-main-10); +$categorical-main-11: var(--categorical-main-11); +$categorical-main-12: var(--categorical-main-12); +$categorical-main-13: var(--categorical-main-13); +$categorical-main-14: var(--categorical-main-14); + +// Categorical color combinations +$categorical-5colors-option2-color1: var(--categorical-5colors-option2-color1); +$categorical-5colors-option2-color2: var(--categorical-5colors-option2-color2); +$categorical-5colors-option2-color3: var(--categorical-5colors-option2-color3); +$categorical-5colors-option2-color4: var(--categorical-5colors-option2-color4); +$categorical-5colors-option2-color5: var(--categorical-5colors-option2-color5); + +// UI Foundation +$uifoundation-surface-default: var(--uifoundation-surface-default); +$uifoundation-border-grid: var(--uifoundation-border-grid); +$uifoundation-border-axis: var(--uifoundation-border-axis); + +// Sequential colors +$sequential-blue-25: var(--sequential-blue-25); +$sequential-blue-50: var(--sequential-blue-50); +$sequential-blue-100: var(--sequential-blue-100); +$sequential-blue-200: var(--sequential-blue-200); +$sequential-blue-300: var(--sequential-blue-300); +$sequential-blue-400: var(--sequential-blue-400); +$sequential-blue-500: var(--sequential-blue-500); +$sequential-blue-600: var(--sequential-blue-600); +$sequential-blue-700: var(--sequential-blue-700); +$sequential-blue-800: var(--sequential-blue-800); +$sequential-blue-900: var(--sequential-blue-900); +$sequential-blue-950: var(--sequential-blue-950); + +// Other categorical color combinations +$categorical-1color-color1: var(--categorical-1color-color1); +$categorical-1color-color2: var(--categorical-1color-color2); +$categorical-1color-color3: var(--categorical-1color-color3); +$categorical-1color-color4: var(--categorical-1color-color4); + +$categorical-2colors-option1-color1: var(--categorical-2colors-option1-color1); +$categorical-2colors-option1-color2: var(--categorical-2colors-option1-color2); +$categorical-2colors-option2-color1: var(--categorical-2colors-option2-color1); +$categorical-2colors-option2-color2: var(--categorical-2colors-option2-color2); +$categorical-2colors-option3-color1: var(--categorical-2colors-option3-color1); +$categorical-2colors-option3-color2: var(--categorical-2colors-option3-color2); +$categorical-2colors-option4-color1: var(--categorical-2colors-option4-color1); +$categorical-2colors-option4-color2: var(--categorical-2colors-option4-color2); +$categorical-2colors-option5-color1: var(--categorical-2colors-option5-color1); +$categorical-2colors-option5-color2: var(--categorical-2colors-option5-color2); +$categorical-2colors-option6-color1: var(--categorical-2colors-option6-color1); +$categorical-2colors-option6-color2: var(--categorical-2colors-option6-color2); + +$categorical-3colors-option1-color1: var(--categorical-3colors-option1-color1); +$categorical-3colors-option1-color2: var(--categorical-3colors-option1-color2); +$categorical-3colors-option1-color3: var(--categorical-3colors-option1-color3); +$categorical-3colors-option2-color1: var(--categorical-3colors-option2-color1); +$categorical-3colors-option2-color2: var(--categorical-3colors-option2-color2); +$categorical-3colors-option2-color3: var(--categorical-3colors-option2-color3); +$categorical-3colors-option3-color1: var(--categorical-3colors-option3-color1); +$categorical-3colors-option3-color2: var(--categorical-3colors-option3-color2); +$categorical-3colors-option3-color3: var(--categorical-3colors-option3-color3); +$categorical-3colors-option4-color1: var(--categorical-3colors-option4-color1); +$categorical-3colors-option4-color2: var(--categorical-3colors-option4-color2); +$categorical-3colors-option4-color3: var(--categorical-3colors-option4-color3); +$categorical-3colors-option5-color1: var(--categorical-3colors-option5-color1); +$categorical-3colors-option5-color2: var(--categorical-3colors-option5-color2); +$categorical-3colors-option5-color3: var(--categorical-3colors-option5-color3); +$categorical-3colors-option6-color1: var(--categorical-3colors-option6-color1); +$categorical-3colors-option6-color2: var(--categorical-3colors-option6-color2); +$categorical-3colors-option6-color3: var(--categorical-3colors-option6-color3); + +$categorical-4colors-option1-color1: var(--categorical-4colors-option1-color1); +$categorical-4colors-option1-color2: var(--categorical-4colors-option1-color2); +$categorical-4colors-option1-color3: var(--categorical-4colors-option1-color3); +$categorical-4colors-option1-color4: var(--categorical-4colors-option1-color4); +$categorical-4colors-option2-color1: var(--categorical-4colors-option2-color1); +$categorical-4colors-option2-color2: var(--categorical-4colors-option2-color2); +$categorical-4colors-option2-color3: var(--categorical-4colors-option2-color3); +$categorical-4colors-option2-color4: var(--categorical-4colors-option2-color4); +$categorical-4colors-option3-color1: var(--categorical-4colors-option3-color1); +$categorical-4colors-option3-color2: var(--categorical-4colors-option3-color2); +$categorical-4colors-option3-color3: var(--categorical-4colors-option3-color3); +$categorical-4colors-option3-color4: var(--categorical-4colors-option3-color4); + +$categorical-5colors-option1-color1: var(--categorical-5colors-option1-color1); +$categorical-5colors-option1-color2: var(--categorical-5colors-option1-color2); +$categorical-5colors-option1-color3: var(--categorical-5colors-option1-color3); +$categorical-5colors-option1-color4: var(--categorical-5colors-option1-color4); +$categorical-5colors-option1-color5: var(--categorical-5colors-option1-color5); + +// Surface variables +$surface-accent-emphasis-min-negative: var( + --surface-accent-emphasis-min-negative +); +$surface-accent-emphasis-min-positive: var( + --surface-accent-emphasis-min-positive +); +$surface-accent-emphasis-min-purple: var(--surface-accent-emphasis-min-purple); +$surface-accent-ondark-negative-default: var( + --surface-accent-ondark-negative-default +); +$surface-accent-ondark-negative-hover: var( + --surface-accent-ondark-negative-hover +); +$surface-accent-ondark-warning-default: var( + --surface-accent-ondark-warning-default +); +$surface-accent-ondark-warning-hover: var( + --surface-accent-ondark-warning-hover +); +$surface-accent-ondark-info-default: var(--surface-accent-ondark-info-default); +$surface-accent-ondark-info-hover: var(--surface-accent-ondark-info-hover); +$surface-accent-ondark-positive-default: var( + --surface-accent-ondark-positive-default +); +$surface-accent-ondark-positive-hover: var( + --surface-accent-ondark-positive-hover +); + +// Surface accent emphasis variables +$surface-accent-emphasis-subtle-negative: var( + --surface-accent-emphasis-subtle-negative +); +$surface-accent-emphasis-subtle-warning: var( + --surface-accent-emphasis-subtle-warning +); +$surface-accent-emphasis-subtle-info: var( + --surface-accent-emphasis-subtle-info +); +$surface-accent-emphasis-subtle-positive: var( + --surface-accent-emphasis-subtle-positive +); + +// Surface invert variables +$surface-invert-default: var(--surface-invert-default); +$surface-invert-primary: var(--surface-invert-primary); +$surface-invert-subtle: var(--surface-invert-subtle); +$surface-invert-secondary: var(--surface-invert-secondary); +$surface-invert-disabled: var(--surface-invert-disabled); + +// Surface locked variables +$surface-locked-default: var(--surface-locked-default); +$surface-locked-hover: var(--surface-locked-hover); +$surface-locked-active: var(--surface-locked-active); +$surface-locked-disabled: var(--surface-locked-disabled); +$surface-locked-white: var(--surface-locked-white); +$surface-locked-black: var(--surface-locked-black); + +// Additional sequential colors +$sequential-yellow-25: var(--sequential-yellow-25); +$sequential-yellow-50: var(--sequential-yellow-50); +$sequential-yellow-100: var(--sequential-yellow-100); + +// Action variables +$action-neutral-hover: var(--action-neutral-hover); +$action-neutral-disabled: var(--action-neutral-disabled); +$action-high-contrast-default: var(--action-high-contrast-default); +$action-high-contrast-hover: var(--action-high-contrast-hover); +$action-high-contrast-active: var(--action-high-contrast-active); +$action-high-contrast-disabled: var(--action-high-contrast-disabled); +$action-lock-default: var(--action-lock-default); +$action-lock-hover: var(--action-lock-hover); +$action-lock-active: var(--action-lock-active); +$action-lock-disabled: var(--action-lock-disabled); + +// Bot related variables +$color-bot: var(--color-bot); +$surface-other-bot: var(--surface-other-bot); +$surface-other-bot-hover: var(--surface-other-bot-hover); +$content-basic-bot: var(--content-basic-bot); + +// Basic colors +$color-black: var(--color-black); +$color-white: var(--color-white); + +// Decor blue variables +$decor-blue900: var(--decor-blue900); +$decor-blue800: var(--decor-blue800); +$decor-blue700: var(--decor-blue700); +$decor-blue600: var(--decor-blue600); +$decor-blue500: var(--decor-blue500); +$decor-blue400: var(--decor-blue400); +$decor-blue300: var(--decor-blue300); +$decor-blue200: var(--decor-blue200); +$decor-blue100: var(--decor-blue100); +$decor-blue50: var(--decor-blue50); + +// Decor orange variables +$decor-orange900: var(--decor-orange900); +$decor-orange800: var(--decor-orange800); +$decor-orange700: var(--decor-orange700); +$decor-orange600: var(--decor-orange600); +$decor-orange500: var(--decor-orange500); +$decor-orange400: var(--decor-orange400); +$decor-orange300: var(--decor-orange300); +$decor-orange200: var(--decor-orange200); +$decor-orange100: var(--decor-orange100); +$decor-orange50: var(--decor-orange50); + +// Sequential color scales +$sequential-yellow-200: var(--sequential-yellow-200); +$sequential-yellow-300: var(--sequential-yellow-300); +$sequential-yellow-400: var(--sequential-yellow-400); +$sequential-yellow-500: var(--sequential-yellow-500); +$sequential-yellow-600: var(--sequential-yellow-600); +$sequential-yellow-700: var(--sequential-yellow-700); +$sequential-yellow-800: var(--sequential-yellow-800); +$sequential-yellow-900: var(--sequential-yellow-900); +$sequential-yellow-950: var(--sequential-yellow-950); + +// Decor yellow variables +$decor-yellow900: var(--decor-yellow900); +$decor-yellow800: var(--decor-yellow800); +$decor-yellow700: var(--decor-yellow700); +$decor-yellow600: var(--decor-yellow600); +$decor-yellow500: var(--decor-yellow500); +$decor-yellow400: var(--decor-yellow400); +$decor-yellow300: var(--decor-yellow300); +$decor-yellow200: var(--decor-yellow200); +$decor-yellow100: var(--decor-yellow100); +$decor-yellow50: var(--decor-yellow50); + +// Decor gray variables +$decor-gray950: var(--decor-gray950); +$decor-gray900: var(--decor-gray900); +$decor-gray800: var(--decor-gray800); +$decor-gray700: var(--decor-gray700); +$decor-gray600: var(--decor-gray600); +$decor-gray500: var(--decor-gray500); +$decor-gray400: var(--decor-gray400); +$decor-gray300: var(--decor-gray300); +$decor-gray200: var(--decor-gray200); +$decor-gray150: var(--decor-gray150); +$decor-gray100: var(--decor-gray100); +$decor-gray75: var(--decor-gray75); +$decor-gray50: var(--decor-gray50); +$decor-gray40: var(--decor-gray40); +$decor-gray20: var(--decor-gray20); + +// Decor green variables +$decor-green900: var(--decor-green900); +$decor-green800: var(--decor-green800); +$decor-green700: var(--decor-green700); +$decor-green600: var(--decor-green600); +$decor-green500: var(--decor-green500); +$decor-green400: var(--decor-green400); +$decor-green300: var(--decor-green300); +$decor-green200: var(--decor-green200); +$decor-green100: var(--decor-green100); +$decor-green50: var(--decor-green50); + +// Decor red variables +$decor-red900: var(--decor-red900); +$decor-red800: var(--decor-red800); +$decor-red700: var(--decor-red700); +$decor-red600: var(--decor-red600); +$decor-red500: var(--decor-red500); +$decor-red400: var(--decor-red400); +$decor-red300: var(--decor-red300); +$decor-red200: var(--decor-red200); +$decor-red100: var(--decor-red100); +$decor-red50: var(--decor-red50); + +// Decor purple variables +$decor-purple900: var(--decor-purple900); +$decor-purple800: var(--decor-purple800); +$decor-purple700: var(--decor-purple700); +$decor-purple600: var(--decor-purple600); +$decor-purple500: var(--decor-purple500); +$decor-purple400: var(--decor-purple400); +$decor-purple300: var(--decor-purple300); +$decor-purple200: var(--decor-purple200); +$decor-purple100: var(--decor-purple100); +$decor-purple50: var(--decor-purple50); + +// Decor brown variables +$decor-brown50: var(--decor-brown50); +$decor-brown300: var(--decor-brown300); + +// Product-specific variables +$products-livechat: var(--products-livechat); +$products-helpdesk: var(--products-helpdesk); +$products-chatbot: var(--products-chatbot); +$products-knowledgebase: var(--products-knowledgebase); +$products-hello: var(--products-hello); +$products-platform: var(--products-platform); + +// UI Component variables - Buttons +$btn-basic-background-enabled: var(--btn-basic-background-enabled); +$btn-basic-background-hover: var(--btn-basic-background-hover); +$btn-basic-background-disabled: var(--btn-basic-background-disabled); +$btn-basic-background-active: var(--btn-basic-background-active); +$btn-basic-background-loading: var(--btn-basic-background-loading); +$btn-secondary-background-enabled: var(--btn-secondary-background-enabled); +$btn-secondary-background-hover: var(--btn-secondary-background-hover); +$btn-secondary-background-disabled: var(--btn-secondary-background-disabled); +$btn-secondary-background-active: var(--btn-secondary-background-active); +$btn-secondary-background-loading: var(--btn-secondary-background-loading); +$btn-plain-icon-background-hover: var(--btn-plain-icon-background-hover); +$btn-plain-icon-background-active: var(--btn-plain-icon-background-active); + +// UI Component variables - Pickers and Popovers +$picker-list-background: var(--picker-list-background); +$picker-list-group-background: var(--picker-list-group-background); +$picker-list-option-background-hover: var( + --picker-list-option-background-hover +); +$picker-list-option-background-active-hover: var( + --picker-list-option-background-active-hover +); +$picker-list-option-background-focus: var( + --picker-list-option-background-focus +); +$picker-list-option-background-active: var( + --picker-list-option-background-active +); +$popover-background: var(--popover-background); + +// UI Component variables - Avatar surfaces +$surface-avatar-1: var(--surface-avatar-1); +$surface-avatar-2: var(--surface-avatar-2); +$surface-avatar-3: var(--surface-avatar-3); +$surface-avatar-4: var(--surface-avatar-4); +$surface-avatar-5: var(--surface-avatar-5); +$surface-avatar-6: var(--surface-avatar-6); +$surface-avatar-7: var(--surface-avatar-7); +$surface-avatar-8: var(--surface-avatar-8); +$surface-avatar-9: var(--surface-avatar-9); +$surface-avatar-10: var(--surface-avatar-10); + +// UI Component variables - Navigation and Tooltips +$navbar-background: var(--navbar-background); +$tooltip-background-basic: var(--tooltip-background-basic); +$tooltip-background-invert: var(--tooltip-background-invert); +$tooltip-border: var(--tooltip-border); +$tooltip-border-for-svg: var(--tooltip-border-for-svg); + +// Illustration and Animation variables +$illustrations-primary: var(--illustrations-primary); +$illustrations-secondary: var(--illustrations-secondary); +$illustrations-stroke: var(--illustrations-stroke); +$animated-gradient-value-1: var(--animated-gradient-value-1); +$animated-gradient-value-2: var(--animated-gradient-value-2); +$animated-gradient-value-3: var(--animated-gradient-value-3); + +// Sequential color scales - Green +$sequential-green-25: var(--sequential-green-25); +$sequential-green-50: var(--sequential-green-50); +$sequential-green-100: var(--sequential-green-100); +$sequential-green-200: var(--sequential-green-200); +$sequential-green-300: var(--sequential-green-300); +$sequential-green-400: var(--sequential-green-400); +$sequential-green-500: var(--sequential-green-500); +$sequential-green-600: var(--sequential-green-600); +$sequential-green-700: var(--sequential-green-700); +$sequential-green-800: var(--sequential-green-800); +$sequential-green-900: var(--sequential-green-900); +$sequential-green-950: var(--sequential-green-950); + +// Sequential color scales - Magenta +$sequential-magenta-25: var(--sequential-magenta-25); +$sequential-magenta-50: var(--sequential-magenta-50); +$sequential-magenta-100: var(--sequential-magenta-100); +$sequential-magenta-200: var(--sequential-magenta-200); +$sequential-magenta-300: var(--sequential-magenta-300); +$sequential-magenta-400: var(--sequential-magenta-400); +$sequential-magenta-500: var(--sequential-magenta-500); +$sequential-magenta-600: var(--sequential-magenta-600); +$sequential-magenta-700: var(--sequential-magenta-700); +$sequential-magenta-800: var(--sequential-magenta-800); +$sequential-magenta-900: var(--sequential-magenta-900); +$sequential-magenta-950: var(--sequential-magenta-950); + +// Sequential color scales - Orange, Purple, Red +$sequential-orange-25: var(--sequential-orange-25); +$sequential-orange-50: var(--sequential-orange-50); +$sequential-orange-100: var(--sequential-orange-100); +$sequential-orange-200: var(--sequential-orange-200); +$sequential-orange-300: var(--sequential-orange-300); +$sequential-orange-400: var(--sequential-orange-400); +$sequential-orange-500: var(--sequential-orange-500); +$sequential-orange-600: var(--sequential-orange-600); +$sequential-orange-700: var(--sequential-orange-700); +$sequential-orange-800: var(--sequential-orange-800); +$sequential-orange-900: var(--sequential-orange-900); +$sequential-orange-950: var(--sequential-orange-950); + +$sequential-purple-25: var(--sequential-purple-25); +$sequential-purple-50: var(--sequential-purple-50); +$sequential-purple-100: var(--sequential-purple-100); +$sequential-purple-200: var(--sequential-purple-200); +$sequential-purple-300: var(--sequential-purple-300); +$sequential-purple-400: var(--sequential-purple-400); +$sequential-purple-500: var(--sequential-purple-500); +$sequential-purple-600: var(--sequential-purple-600); +$sequential-purple-700: var(--sequential-purple-700); +$sequential-purple-800: var(--sequential-purple-800); +$sequential-purple-900: var(--sequential-purple-900); +$sequential-purple-950: var(--sequential-purple-950); + +$sequential-red-25: var(--sequential-red-25); +$sequential-red-50: var(--sequential-red-50); +$sequential-red-100: var(--sequential-red-100); +$sequential-red-200: var(--sequential-red-200); +$sequential-red-300: var(--sequential-red-300); +$sequential-red-400: var(--sequential-red-400); +$sequential-red-500: var(--sequential-red-500); +$sequential-red-600: var(--sequential-red-600); +$sequential-red-700: var(--sequential-red-700); +$sequential-red-800: var(--sequential-red-800); +$sequential-red-900: var(--sequential-red-900); +$sequential-red-950: var(--sequential-red-950); + +// AI/Copilot related variables +$surface-ai-copilot-basic-default: var(--surface-ai-copilot-basic-default); +$surface-ai-copilot-basic-hover: var(--surface-ai-copilot-basic-hover); +$surface-ai-copilot-basic-active: var(--surface-ai-copilot-basic-active); +$surface-ai-copilot-invert-01: var(--surface-ai-copilot-invert-01); +$surface-ai-copilot-invert-02: var(--surface-ai-copilot-invert-02); +$surface-ai-other-01-default: var(--surface-ai-other-01-default); +$surface-ai-other-01-hover: var(--surface-ai-other-01-hover); +$surface-ai-other-01-active: var(--surface-ai-other-01-active); +$surface-ai-other-02-default: var(--surface-ai-other-02-default); +$border-ai-copilot-basic-default: var(--border-ai-copilot-basic-default); +$border-ai-copilot-basic-hover: var(--border-ai-copilot-basic-hover); +$border-ai-copilot-basic-active: var(--border-ai-copilot-basic-active); +$border-ai-other-01: var(--border-ai-other-01); +$content-ai-copilot-basic: var(--content-ai-copilot-basic); +$content-ai-copilot-invert: var(--content-ai-copilot-invert); +$content-ai-other-1-default: var(--content-ai-other-1-default); + +// Tag and content-specific variables +$tag-surface-01: var(--tag-surface-01); +$tag-content-01: var(--tag-content-01); +$content-basic-placeholder: var(--content-basic-placeholder); +$content-basic-autofill: var(--content-basic-autofill); +$content-basic-internal-note: var(--content-basic-internal-note); + +// Internal note related variables +$surface-other-internal-note-message-area: var( + --surface-other-internal-note-message-area +); +$surface-other-internal-note-default: var( + --surface-other-internal-note-default +); +$content-basic-internal-note-message-placeholder: var( + --content-basic-internal-note-message-placeholder +); +$content-basic-internal-note-message-active: var( + --content-basic-internal-note-message-active +); + +// One-specific variables +$one-popover-message-background-default: var( + --one-popover-message-background-default +); +$one-popover-border-default: var(--one-popover-border-default); +$one-popover-border-active: var(--one-popover-border-active); +$one-tooltip-background: var(--one-tooltip-background); + +// Check list variables +$surface-check-list-item-open-background: var( + --surface-check-list-item-open-background +); +$surface-check-list-background: var(--surface-check-list-background); + +// Promo input variables +$input-promo-border-default: var(--input-promo-border-default); +$input-promo-border-hover: var(--input-promo-border-hover); + +// Background variables +$background: var(--background); +$background-01: var(--background-01); +$background-02: var(--background-02); +$background-03: var(--background-03); + +// Surface Basic variables +$surface-basic-default: var(--surface-basic-default); +$surface-basic-subtle: var(--surface-basic-subtle); +$surface-basic-hover: var(--surface-basic-hover); +$surface-basic-active: var(--surface-basic-active); +$surface-basic-disabled: var(--surface-basic-disabled); + +// Surface Primary variables +$surface-primary-hover-opacity: var(--surface-primary-hover-opacity); +$surface-primary-active: var(--surface-primary-active); +$surface-primary-active-colored: var(--surface-primary-active-colored); +$surface-primary-disabled: var(--surface-primary-disabled); + +// Surface Secondary variables +$surface-secondary-default: var(--surface-secondary-default); +$surface-secondary-hover: var(--surface-secondary-hover); +$surface-secondary-active: var(--surface-secondary-active); +$surface-secondary-disabled: var(--surface-secondary-disabled); +$surface-secondary-subtle: var(--surface-secondary-subtle); + +// Surface Tertiary variables +$surface-tertiary-default: var(--surface-tertiary-default); +$surface-tertiary-hover: var(--surface-tertiary-hover); +$surface-tertiary-active: var(--surface-tertiary-active); +$surface-tertiary-disabled: var(--surface-tertiary-disabled); + +// Surface Moderate variables +$surface-moderate-default: var(--surface-moderate-default); +$surface-moderate-hover: var(--surface-moderate-hover); +$surface-moderate-active: var(--surface-moderate-active); + +// Surface Feedback variables +$surface-feedback-info: var(--surface-feedback-info); +$surface-feedback-negative: var(--surface-feedback-negative); +$surface-feedback-warning: var(--surface-feedback-warning); +$surface-feedback-positive: var(--surface-feedback-positive); + +// Surface Accent Emphasis variables +$surface-accent-emphasis-low-info: var(--surface-accent-emphasis-low-info); +$surface-accent-emphasis-low-negative: var( + --surface-accent-emphasis-low-negative +); +$surface-accent-emphasis-low-warning: var( + --surface-accent-emphasis-low-warning +); +$surface-accent-emphasis-low-positive: var( + --surface-accent-emphasis-low-positive +); +$surface-accent-emphasis-low-purple: var(--surface-accent-emphasis-low-purple); +$surface-accent-emphasis-min-info: var(--surface-accent-emphasis-min-info); +$surface-accent-emphasis-medium-negative: var( + --surface-accent-emphasis-medium-negative +); +$surface-accent-emphasis-medium-positive: var( + --surface-accent-emphasis-medium-positive +); +$surface-accent-emphasis-high-info: var(--surface-accent-emphasis-high-info); +$surface-accent-emphasis-high-negative: var( + --surface-accent-emphasis-high-negative +); +$surface-accent-emphasis-high-warning: var( + --surface-accent-emphasis-high-warning +); +$surface-accent-emphasis-high-positive: var( + --surface-accent-emphasis-high-positive +); +$surface-accent-emphasis-high-purple: var( + --surface-accent-emphasis-high-purple +); + +// Surface Opacity variables +$surface-opacity-basic-hover: var(--surface-opacity-basic-hover); +$surface-opacity-basic-active: var(--surface-opacity-basic-active); +$surface-opacity-invert-hover: var(--surface-opacity-invert-hover); +$surface-opacity-invert-active: var(--surface-opacity-invert-active); +$surface-overlay: var(--surface-overlay); + +// Surface Gradient variables +$surface-gradient-01: var(--surface-gradient-01); +$surface-gradient-02: var(--surface-gradient-02); +$surface-gradient-03: var(--surface-gradient-03); +$surface-gradient-04: var(--surface-gradient-04); +$surface-gradient-05: var(--surface-gradient-05); +$surface-gradient-06: var(--surface-gradient-06); +$surface-gradient-07: var(--surface-gradient-07); +$surface-gradient-08: var(--surface-gradient-08); +$surface-gradient-09: var(--surface-gradient-09); +$surface-gradient-10: var(--surface-gradient-10); +$surface-gradient-11: var(--surface-gradient-11); +$surface-gradient-12: var(--surface-gradient-12); +$surface-gradient-13: var(--surface-gradient-13); +$surface-gradient-14: var(--surface-gradient-14); + +// Surface Other variables +$surface-other-overlay: var(--surface-other-overlay); +$surface-other-agent: var(--surface-other-agent); +$surface-other-agent-hover: var(--surface-other-agent-hover); +$surface-other-skeleton: var(--surface-other-skeleton); +$surface-other-internal-note-hover: var(--surface-other-internal-note-hover); +$surface-other-visitor: var(--surface-other-visitor); +$surface-other-visitor-hover: var(--surface-other-visitor-hover); + +// Content variables +$content-default: var(--content-default); +$content-basic-primary: var(--content-basic-primary); +$content-subtle: var(--content-subtle); +$content-basic-secondary: var(--content-basic-secondary); +$content-disabled: var(--content-disabled); +$content-basic-disabled: var(--content-basic-disabled); +$content-basic-negative: var(--content-basic-negative); +$content-basic-warning: var(--content-basic-warning); +$content-basic-positive: var(--content-basic-positive); +$content-basic-info: var(--content-basic-info); +$content-basic-purple: var(--content-basic-purple); +$content-basic-gradient-01: var(--content-basic-gradient-01); +$content-white-locked: var(--content-white-locked); +$content-locked-white: var(--content-locked-white); +$content-black-locked: var(--content-black-locked); +$content-locked-black: var(--content-locked-black); +$content-locked-default: var(--content-locked-default); +$content-locked-hover: var(--content-locked-hover); +$content-locked-active: var(--content-locked-active); +$content-locked-disabled: var(--content-locked-disabled); +$content-invert-default: var(--content-invert-default); +$content-invert-primary: var(--content-invert-primary); +$content-invert-subtle: var(--content-invert-subtle); +$content-invert-secondary: var(--content-invert-secondary); +$content-invert-disabled: var(--content-invert-disabled); +$content-invert-gradient-01: var(--content-invert-gradient-01); + +// Border variables +$border-default: var(--border-default); +$border-basic-primary: var(--border-basic-primary); +$border-basic-secondary: var(--border-basic-secondary); +$border-subtle: var(--border-subtle); +$border-basic-tertiary: var(--border-basic-tertiary); +$border-hover: var(--border-hover); +$border-basic-hover: var(--border-basic-hover); +$border-disabled: var(--border-disabled); +$border-basic-disabled: var(--border-basic-disabled); +$border-basic-negative: var(--border-basic-negative); +$border-basic-warning: var(--border-basic-warning); +$border-basic-positive: var(--border-basic-positive); +$border-basic-info: var(--border-basic-info); +$border-basic-purple: var(--border-basic-purple); +$border-basic-contrast: var(--border-basic-contrast); +$border-invert-default: var(--border-invert-default); +$border-invert-primary: var(--border-invert-primary); +$border-invert-subtle: var(--border-invert-subtle); +$border-invert-secondary: var(--border-invert-secondary); +$border-invert-hover: var(--border-invert-hover); +$border-invert-disabled: var(--border-invert-disabled); + +// Action and Color variables +$color-action-active: var(--color-action-active); +$action-primary-active: var(--action-primary-active); +$color-action-hover: var(--color-action-hover); +$action-primary-hover: var(--action-primary-hover); +$color-action-default: var(--color-action-default); +$action-primary-default: var(--action-primary-default); +$color-action-default-rgb: var(--color-action-default-rgb); +$color-action-disabled: var(--color-action-disabled); +$action-primary-disabled: var(--action-primary-disabled); +$color-negative-active: var(--color-negative-active); +$action-negative-active: var(--action-negative-active); +$color-negative-hover: var(--color-negative-hover); +$action-negative-hover: var(--action-negative-hover); +$color-negative-default: var(--color-negative-default); +$action-negative-default: var(--action-negative-default); +$color-negative-disabled: var(--color-negative-disabled); +$action-negative-disabled: var(--action-negative-disabled); +$color-warning-default: var(--color-warning-default); +$action-warning-default: var(--action-warning-default); +$color-warning-hover: var(--color-warning-hover); +$action-warning-hover: var(--action-warning-hover); +$action-warning-disabled: var(--action-warning-disabled); +$color-positive-default: var(--color-positive-default); +$action-positive-default: var(--action-positive-default); +$color-positive-hover: var(--color-positive-hover); +$action-positive-hover: var(--action-positive-hover); +$color-positive-disabled: var(--color-positive-disabled); +$action-positive-disabled: var(--action-positive-disabled); +$action-neutral-default: var(--action-neutral-default);