colors data

--black: #000000;
--white: #FFFFFF;
--color-grey-grey-50: #F7F7F8;
--color-grey-grey-100: #E8E8ED;
--color-grey-grey-200: #D1D1DB;
--color-grey-grey-300: #A9A9BC;
--color-grey-grey-400: #8A8AA3;
--color-grey-grey-500: #6C6C89;
--color-grey-grey-600: #55556D;
--color-grey-grey-700: #3F3F50;
--color-grey-grey-800: #282833;
--color-grey-900: #121217;
--color-blue-blue-50: #F0F7FF;
--color-blue-blue-100: #DBECFF;
--color-blue-blue-200: #ADD4FF;
--color-blue-blue-300: #70B5FF;
--color-blue-blue-400: #3898FF;
--color-blue-blue-500: #007BFF;
--color-blue-blue-600: #0067D6;
--color-blue-blue-700: #0053AD;
--color-blue-blue-800: #004085;
--color-blue-900: #002C5C;
--color-purple-purple-50: #EDEBF4;
--color-purple-purple-100: #D7CDF4;
--color-purple-purple-200: #C8BAF4;
--color-purple-purple-300: #B29CF4;
--color-purple-purple-400: #9C7FF4;
--color-purple-purple-500: #7F58F4;
--color-purple-purple-600: #5D39CC;
--color-purple-purple-700: #4120A3;
--color-purple-purple-800: #2B0D84;
--color-purple-900: #1B055B;
--color-red-red-50: #FEF0F4;
--color-red-red-100: #FDD4DE;
--color-red-red-200: #FBB4C6;
--color-red-red-300: #F98BA6;
--color-red-red-400: #F76489;
--color-red-red-500: #F53D6B;
--color-red-red-600: #CC204C;
--color-red-red-700: #A31035;
--color-red-red-800: #840625;
--color-red-900: #5B0016;
--color-yellow-yellow-50: #FFFBEB;
--color-yellow-yellow-100: #FFF8D6;
--color-yellow-yellow-200: #FFF1AD;
--color-yellow-yellow-300: #FFEA85;
--color-yellow-yellow-400: #FFE35C;
--color-yellow-yellow-500: #F4D430;
--color-yellow-yellow-600: #D3B221;
--color-yellow-yellow-700: #A38A10;
--color-yellow-yellow-800: #846F06;
--color-yellow-900: #5B4C00;
--color-green-green-50: #EAFFED;
--color-green-green-100: #D6FFDD;
--color-green-green-200: #A8F7B5;
--color-green-green-300: #80F794;
--color-green-green-400: #70F486;
--color-green-green-500: #44F461;
--color-green-green-600: #28CC43;
--color-green-green-700: #10A328;
--color-green-green-800: #06841B;
--color-green-900: #005B0F;
--color-orange-orange-50: #FFF1EA;
--color-orange-orange-100: #FFE3D6;
--color-orange-orange-200: #FFCFB7;
--color-orange-orange-300: #FFBB99;
--color-orange-orange-400: #FF9C6B;
--color-orange-orange-500: #F47F44;
--color-orange-orange-600: #CC5F28;
--color-orange-orange-700: #A34110;
--color-orange-orange-800: #843006;
--color-orange-900: #5B1E00;
--color-pink-pink-50: #FEE9FA;
--color-pink-pink-100: #FFD6F8;
--color-pink-pink-200: #FFB7F3;
--color-pink-pink-300: #FA9BEA;
--color-pink-pink-400: #F872E2;
--color-pink-pink-500: #F444F4;
--color-pink-pink-600: #CC28CC;
--color-pink-pink-700: #A310A3;
--color-pink-pink-800: #840684;
--color-pink-900: #5B005B;
--color-neutral-neutral-25: #F7F7F7;
--color-neutral-neutral-50: #F2F2F2;
--color-neutral-neutral-75: #EDEDED;
--color-neutral-neutral-100: #E6E6E6;
--color-neutral-neutral-150: #D8D8D8;
--color-neutral-neutral-200: #CCCCCC;
--color-neutral-neutral-250: #BFBFBF;
--color-neutral-neutral-300: #B2B2B2;
--color-neutral-neutral-400: #999999;
--color-neutral-neutral-500: #7F7F7F;
--color-neutral-neutral-600: #666666;
--color-neutral-neutral-700: #4C4C4C;
--color-neutral-neutral-800: #333333;
--color-neutral-neutral-820: #2D2D2D;
--color-neutral-neutral-850: #262626;
--color-neutral-neutral-880: #1F1F1F;
--color-neutral-neutral-900: #191919;
--color-neutral-neutral-920: #141414;
--color-neutral-neutral-950: #0C0C0C;
--color-neutral-neutral-980: #050505;
--color-neutral-neutral-1000: #000000;

Component ( Colors )
--button-primary-surface-button-primary-surface-default: var(--colors-surface-color-surface-primary-inverse);
--button-primary-surface-button-primary-surface-hovered: var(--colors-surface-color-surface-hovered);
--button-primary-surface-button-primary-surface-focused: var(--colors-surface-color-surface-primary-inverse);
--button-primary-surface-button-primary-surface-disabled: var(--colors-surface-color-surface-muted);
--button-primary-text-button-primary-text-default: var(--colors-foreground-color-fg-inverse);
--button-primary-text-button-primary-text-hovered: var(--colors-foreground-color-fg-primary);
--button-primary-text-button-primary-text-focused: var(--colors-foreground-color-fg-inverse);
--button-primary-text-button-primary-text-disabled: var(--colors-foreground-color-fg-muted);
--button-secondary-surface-button-secondary-surface-default: var(--colors-surface-color-surface-hovered);
--button-secondary-surface-button-secondary-surface-hovered: var(--colors-background-color-bg-overlay);
--button-secondary-surface-button-secondary-surface-focused: var(--colors-surface-color-surface-hovered);
--button-secondary-surface-button-secondary-surface-disabled: var(--colors-background-color-bg-overlay);
--button-tertiary-surface-button-tertiary-surface-default: #00000000;
--button-tertiary-surface-button-tertiary-surface-hovered: var(--colors-surface-color-surface-tertiary);
--button-tertiary-surface-button-tertiary-surface-focused: #00000002;
--button-tertiary-surface-button-tertiary-surface-disabled: #00000000;
--button-secondary-text-button-secondary-text-default: var(--colors-foreground-color-fg-primary);
--button-secondary-text-button-secondary-text-hovered: var(--colors-foreground-color-fg-primary);
--button-secondary-text-button-secondary-text-focused: var(--colors-foreground-color-fg-primary);
--button-secondary-text-button-secondary-text-disabled: var(--colors-foreground-color-fg-muted);
--button-outline-text-button-outline-text-default: var(--colors-foreground-color-fg-primary);
--button-outline-text-button-outline-text-hovered: var(--colors-foreground-color-fg-secondary);
--button-outline-text-button-outline-text-focused: var(--colors-foreground-color-fg-primary);
--button-outline-text-button-outline-text-disabled: var(--colors-foreground-color-fg-muted);
--button-tertiary-text-button-tertiary-text-default: var(--colors-foreground-color-fg-primary);
--button-tertiary-text-button-tertiary-text-hovered: var(--colors-foreground-color-fg-primary);
--button-tertiary-text-button-tertiary-text-focused: var(--colors-foreground-color-fg-primary);
--button-tertiary-text-button-tertiary-text-disabled: var(--colors-foreground-color-fg-muted);
--button-primary-border-button-primary-border-focused: var(--color-blue-blue-500);
--button-secondary-border-button-secondary-border-focused: var(--color-blue-blue-500);
--button-outline-border-button-outline-border-default: var(--colors-border-color-border-primary);
--button-secondary-surface-button-secondary-outline-default: #FFFFFF00;
--button-secondary-surface-button-outline-surface-hovered: #FFFFFF00;
--button-outline-border-button-outline-border-hovered: var(--colors-foreground-color-fg-primary);
--button-secondary-surface-button-outline-surface-focused: #FFFFFF02;
--button-secondary-surface-button-outline-surface-disabled: #FFFFFF00;
--button-outline-border-button-outline-border-focused: var(--colors-background-color-bg-info);
--button-outline-border-button-outline-border-disabled: var(--colors-border-color-border-primary);
--button-tertiary-border-button-tertiary-border-focused: var(--color-blue-blue-500);
--button-link-text-button-link-text-default: var(--colors-foreground-color-fg-primary);
--button-link-text-button-link-text-hovered: var(--colors-foreground-color-fg-tertiary);
--alert-info-alert-info-surface: var(--colors-surface-color-surface-info);
--button-link-text-button-link-text-disabled: var(--colors-foreground-color-fg-muted);
--alert-alert-cancel: var(--color-neutral-neutral-700);
--alert-info-alert-info-title: var(--colors-foreground-color-fg-info);
--alert-warning-alert-warning-surface: var(--colors-surface-color-surface-alert);
--alert-warning-alert-warning-title: var(--colors-foreground-color-fg-alert);
--alert-info-alert-info-text: var(--colors-surface-color-surface-info-tertiary);
--alert-warning-alert-warning-text: var(--colors-surface-color-surface-alert-tertiary);
--alert-info-alert-info-icon-fill: var(--alert-info-alert-info-title);
--alert-warning-alert-warning-icon-fill: var(--alert-warning-alert-warning-title);
--alert-info-alert-info-border: var(--alert-info-alert-info-title);
--alert-info-alert-info-icon-stroke: var(--alert-info-alert-info-surface);
--alert-warning-alert-warning-icon-stroke: var(--alert-warning-alert-warning-surface);
--alert-warning-alert-warning-border: var(--alert-warning-alert-warning-title);
--alert-error-alert-error-surface: var(--colors-surface-color-surface-error);
--alert-error-alert-error-title: var(--colors-background-color-bg-error);
--alert-error-alert-error-text: var(--colors-surface-color-surface-error-tertiary);
--alert-error-alert-error-icon-fill: var(--alert-error-alert-error-title);
--alert-error-alert-error-icon-stroke: var(--alert-error-alert-error-surface);
--alert-success-alert-success-surface: var(--colors-surface-colors-surface-success);
--alert-error-alert-info-border: var(--alert-error-alert-error-title);
--alert-success-alert-success-title: var(--colors-foreground-color-fg-success);
--alert-success-alert-success-text: var(--colors-surface-colors-surface-success-tertiary);
--alert-success-alert-success-icon-fill: var(--alert-success-alert-success-title);
--alert-success-alert-success-icon-stroke: var(--alert-success-alert-success-surface);
--alert-success-alert-success-border: var(--alert-success-alert-success-title);
--alert-loading-alert-loading-surface: var(--colors-surface-color-surface-purple);
--alert-loading-alert-loading-title: var(--colors-background-color-bg-purple);
--alert-loading-alert-loading-text: var(--colors-surface-color-surface-purple-tertiary);
--alert-loading-alert-loading-icon-fill: var(--colors-background-color-bg-purple);
--alert-loading-alert-loading-icon-stroke: var(--alert-loading-alert-loading-surface);
--alert-loading-alert-loading-border: var(--alert-loading-alert-loading-title);
--tag-solid-surface-tag-solid-surface-default: var(--colors-surface-color-surface-primary);
--tag-solid-surface-tag-solid-surface-green: var(--colors-background-color-bg-success);
--tag-solid-surface-tag-solid-surface-yellow: var(--colors-background-color-bg-alert);
--tag-solid-surface-tag-solid-surface-orange: var(--colors-background-color-bg-warning);
--tag-solid-surface-tag-solid-surface-red: var(--colors-background-color-bg-error);
--tag-solid-surface-tag-solid-surface-blue: var(--colors-background-color-bg-info);
--tag-solid-surface-tag-solid-surface-purple: var(--colors-background-color-bg-purple);
--tag-subtle-surface-tag-subtle-surface-default: var(--colors-background-color-bg-secondary);
--tag-subtle-surface-tag-subtle-surface-green: var(--colors-surface-colors-surface-success-secondary);
--tag-subtle-surface-tag-subtle-surface-yellow: var(--colors-surface-color-surface-alert-secondary);
--tag-subtle-surface-tag-subtle-surface-orange: var(--colors-surface-color-surface-warn-secondary);
--tag-subtle-surface-tag-subtle-surface-red: var(--colors-surface-color-surface-error-secondary);
--tag-subtle-surface-tag-subtle-surface-blue: var(--colors-surface-color-surface-info-secondary);
--tag-subtle-surface-tag-subtle-surface-purple: var(--colors-surface-color-surface-purple-secondary);
--tag-alert-cancel: var(--color-neutral-neutral-700);
--navbar-navbar-surface: var(--colors-surface-color-surface-primary);
--navbar-navbar-fg-active: var(--colors-foreground-color-fg-primary);
--navbar-navbar-fg-inactive: var(--colors-foreground-color-fg-tertiary);
--typography-text-primary: var(--colors-foreground-color-fg-primary);
--typography-text-secondary: var(--colors-foreground-color-fg-secondary);
--typography-text-tertiary: var(--colors-foreground-color-fg-tertiary);
--form-inputfield-surface-form-input-surface-default: var(--colors-surface-color-surface-secondary);
--form-color: #FFFFFF;
--form-inputfield-surface-form-input-surface-hovered: var(--colors-surface-color-surface-secondary);
--form-inputfield-surface-form-input-surface-focused: var(--colors-surface-color-surface-secondary);
--form-inputfield-surface-form-input-surface-error: var(--colors-surface-color-surface-secondary);
--form-inputfield-surface-form-input-surface-disabled: var(--colors-surface-color-surface-muted);
--form-inputfield-foreground-form-input-fg-default: var(--colors-foreground-color-fg-primary);
--form-inputfield-foreground-form-input-fg-hovered: var(--colors-foreground-color-fg-primary);
--form-inputfield-foreground-form-input-fg-focused: var(--colors-foreground-color-fg-primary);
--form-inputfield-foreground-form-input-fg-error: var(--colors-foreground-color-fg-primary);
--form-inputfield-foreground-form-input-fg-disabled: var(--colors-foreground-color-fg-muted);
--form-helpertext-form-helper-default: var(--colors-foreground-color-fg-tertiary);
--form-helpertext-form-helper-success: var(--colors-foreground-color-fg-success);
--form-helpertext-form-helper-error: var(--colors-foreground-color-fg-error);
--form-helpertext-form-helper-warning: var(--colors-foreground-color-fg-warning);
--form-helpertext-form-helper-info: var(--colors-background-color-bg-info);
--form-label-form-: #FFFFFF;
--form-inputfield-placeholder-form-input-placholder-default: var(--colors-placeholder-color-placeholder-primary);
--form-inputfield-placeholder-form-input-placeholder-hovered: var(--colors-placeholder-color-placeholder-primary);
--form-inputfield-placeholder-form-input-placeholder-focused: var(--colors-placeholder-color-placeholder-primary);
--form-inputfield-placeholder-form-input-placeholder-error: var(--colors-placeholder-color-placeholder-primary);
--form-inputfield-placeholder-form-input-placeholder-disabled: var(--colors-foreground-color-fg-muted);
--form-inputfield-border-form-input-border-default: var(--colors-border-color-border-primary);
--form-inputfield-border-form-input-border-hovered: var(--colors-border-color-border-hovered);
--form-inputfield-border-form-input-border-focused: var(--colors-border-color-border-focus);
--form-inputfield-border-form-input-border-error: var(--colors-border-color-border-error);
--form-checkbox-surface-form-checkbox-surface-default: var(--form-inputfield-surface-form-input-surface-default);
--form-inputfield-border-form-input-border-disabled: var(--colors-border-color-border-primary);
--form-checkbox-surface-form-checkbox-surface-default-checked: var(--colors-interactions-color-interaction-primary);
--form-checkbox-surface-form-checkbox-surface-hovered: var(--colors-border-color-border-secondary);
--form-checkbox-surface-form-checkbox-surface-hovered-checked: var(--colors-interactions-color-interaction-primary);
--form-checkbox-surface-form-checkbox-surface-focused: #FFFFFF02;
--form-checkbox-surface-form-checkbox-surface-focused-checked: var(--colors-interactions-color-interaction-primary);
--form-checkbox-surface-form-checkbox-surface-disabled: var(--colors-interactions-color-interaction-muted);
--form-checkbox-surface-form-checkbox-surface-disabled-checked: var(--colors-interactions-color-interaction-muted);
--form-checkbox-icon-form-checkbox-icon-default: var(--colors-background-color-bg-primary);
--form-checkbox-icon-form-checkbox-icon-hovered: var(--colors-background-color-bg-primary);
--form-checkbox-icon-form-checkbox-icon-focused: var(--colors-background-color-bg-primary);
--form-checkbox-icon-form-checkbox-icon-disabled: var(--colors-background-color-bg-inverse);
--form-checkbox-border-form-checkbox-border-default: var(--form-inputfield-border-form-input-border-default);
--form-checkbox-border-form-checkbox-border-hovered: var(--colors-border-color-border-secondary);
--form-checkbox-border-form-checkbox-border-focused: var(--colors-border-color-border-primary);
--form-checkbox-border-form-checkbox-border-disabled: var(--colors-interactions-color-interaction-muted);
--form-mediaupload-surface-form-uploader-surface-default: #FFFFFF02;
--form-mediaupload-surface-form-uploader-surface-dropping: var(--colors-surface-color-surface-tertiary);
--form-mediaupload-surface-form-uploader-surface-uploading: var(--colors-surface-color-surface-tertiary);
--form-mediaupload-surface-form-checkbox-surface-success: #FFFFFF02;
--form-mediaupload-surface-form-checkbox-surface-warning: #FFFFFF02;
--form-mediaupload-surface-form-checkbox-surface-error: #FFFFFF02;
--form-mediaupload-border-form-uploader-border-default: var(--colors-border-color-border-secondary);
--form-mediaupload-border-form-uploader-border-dropping: var(--colors-border-color-border-secondary);
--form-mediaupload-border-form-uploader-border-uploading: var(--colors-border-color-border-secondary);
--form-mediaupload-border-form-uploader-border-success: var(--colors-border-color-border-secondary);
--form-mediaupload-border-form-uploader-border-danger: var(--colors-border-color-border-secondary);
--form-mediaupload-border-form-uploader-border-error: var(--colors-border-color-border-secondary);
--form-mediaupload-icon-form-uploader-icon-default: var(--colors-foreground-color-fg-info);
--form-mediaupload-icon-form-uploader-icon-uploading: var(--colors-foreground-color-fg-success);
--form-mediaupload-icon-form-uploader-icon-dropping: var(--colors-foreground-color-fg-success);
--form-mediaupload-icon-form-uploader-icon-success: var(--colors-foreground-color-fg-success);
--form-mediaupload-icon-form-uploader-icon-warning: var(--colors-foreground-color-fg-warning);
--form-mediaupload-icon-form-uploader-icon-error: var(--colors-foreground-color-fg-error);
--form-mediaupload-image-form-uploader-img-default: var(--colors-surface-color-surface-tertiary);
--form-mediaupload-image-form-uploader-img-dropping: var(--colors-surface-color-surface-hovered);
--form-mediaupload-image-form-uploader-img-uploading: var(--colors-surface-color-surface-hovered);
--form-mediaupload-image-form-uploader-img-success: var(--colors-surface-colors-surface-success);
--form-mediaupload-image-form-uploader-img-warning: var(--colors-surface-color-surface-warn);
--form-mediaupload-image-form-uploader-img-error: var(--colors-surface-color-surface-warn);
--form-mediaupload-link-form-uploader-link-default: var(--colors-interactions-color-interaction-primary);
--form-mediaupload-link-form-uploader-link-dropping: var(--colors-interactions-color-interaction-primary);
--form-mediaupload-link-form-uploader-link-uploading: var(--colors-interactions-color-interaction-primary);
--form-mediaupload-link-form-uploader-link-success: var(--colors-interactions-color-interaction-primary);
--form-mediaupload-link-form-uploader-link-warning: var(--colors-interactions-color-interaction-primary);
--form-mediaupload-link-form-uploader-link-error: var(--colors-interactions-color-interaction-primary);
--form-mediaupload-text-form-uploader-text-default: var(--colors-foreground-color-fg-primary);
--form-mediaupload-text-form-uploader-text-dropping: var(--colors-foreground-color-fg-primary);
--form-mediaupload-text-form-uploader-text-uploading: var(--colors-foreground-color-fg-primary);
--form-mediaupload-text-form-uploader-text-success: var(--colors-foreground-color-fg-success);
--form-mediaupload-text-form-uploader-text-warning: var(--colors-foreground-color-fg-warning);
--form-mediaupload-text-form-uploader-text-error: var(--colors-foreground-color-fg-error);
--form-toggleswitch-surface-form-switch-surface-default-on: var(--colors-interactions-color-interaction-primary);
--form-toggleswitch-surface-form-switch-surface-default-off: var(--colors-border-color-border-secondary);
--form-toggleswitch-surface-form-switch-surface-focused-on: var(--colors-interactions-color-interaction-primary);
--form-toggleswitch-surface-form-switch-surface-focused-off: var(--colors-surface-color-surface-tertiary);
--form-toggleswitch-surface-form-switch-surface-disabled-on: var(--colors-interactions-color-interaction-primary);
--form-toggleswitch-surface-form-switch-surface-disabled-off: var(--colors-surface-color-surface-tertiary);
--form-toggleswitch-button-form-switch-button-default-on: var(--white);
--form-toggleswitch-button-form-switch-button-default-off: var(--white);
--form-toggleswitch-button-form-switch-button-focused-on: var(--white);
--form-toggleswitch-button-form-switch-button-focused-off: var(--white);
--form-toggleswitch-button-form-switch-button-disabled-on: var(--white);
--form-toggleswitch-button-form-switch-button-disabled-off: var(--white);
--form-toggleswitch-border-form-switch-border-default-on: var(--colors-background-color-bg-info);
--form-toggleswitch-border-form-switch-border-default-off: var(--colors-border-color-border-secondary);
--form-toggleswitch-border-form-switch-border-hovered-on: var(--colors-background-color-bg-info);
--form-toggleswitch-border-form-switch-border-hovered-off: var(--colors-surface-color-surface-tertiary);
--form-toggleswitch-border-form-switch-border-focused-on: var(--colors-background-color-bg-info);
--form-toggleswitch-border-form-switch-border-focused-off: var(--colors-surface-color-surface-tertiary);
--form-toggleswitch-border-form-switch-border-disabled-on: var(--colors-background-color-bg-info);
--form-toggleswitch-border-form-switch-border-disabled-off: var(--colors-surface-color-surface-tertiary);
--tag-solid-text-tag-solid-text-default: var(--subheads-subhead-fg-primary);
--tag-solid-text-tag-solid-text-green: var(--black);
--tag-solid-text-tag-solid-text-yellow: var(--black);
--tag-solid-text-tag-solid-text-orange: var(--color-orange-orange-50);
--tag-solid-text-tag-solid-text-red: var(--color-red-red-50);
--tag-solid-text-tag-solid-text-blue: var(--color-blue-blue-50);
--tag-solid-icon-tag-solid-icon-default: var(--color-neutral-neutral-900);
--tag-solid-text-tag-solid-text-purple: var(--white);
--tag-solid-icon-tag-solid-icon-green: var(--color-neutral-neutral-900);
--tag-solid-icon-tag-solid-icon-yellow: var(--color-neutral-neutral-900);
--tag-solid-icon-tag-solid-icon-orange: var(--color-neutral-neutral-900);
--tag-solid-icon-tag-solid-icon-red: var(--color-neutral-neutral-900);
--tag-solid-icon-tag-solid-icon-blue: var(--color-neutral-neutral-900);
--tag-solid-border-tag-solid-border-default: var(--color-neutral-neutral-900);
--tag-solid-icon-tag-solid-icon-purple: var(--color-neutral-neutral-900);
--tag-solid-border-tag-solid-border-green: var(--color-neutral-neutral-900);
--tag-solid-border-tag-solid-border-yellow: var(--color-neutral-neutral-900);
--tag-solid-border-tag-solid-border-orange: var(--color-neutral-neutral-900);
--tag-solid-border-alert-solid-border-red: var(--color-neutral-neutral-900);
--tag-solid-border-tag-solid-border-blue: var(--color-neutral-neutral-900);
--tag-solid-border-alert-subtle-surface-purple: var(--color-neutral-neutral-900);
--tag-subtle-text-tag-subtle-text-default: var(--colors-background-color-bg-inverse);
--tag-subtle-text-tag-subtle-text-green: var(--colors-foreground-color-fg-success-secondary);
--tag-subtle-text-tag-subtle-text-yellow: var(--colors-foreground-color-fg-alert-secondary);
--tag-subtle-text-tag-subtle-text-orange: var(--colors-foreground-color-fg-warning-secondary);
--tag-subtle-text-tag-subtle-text-red: var(--colors-foreground-color-fg-error-secondary);
--tag-subtle-text-tag-subtle-text-blue: var(--colors-foreground-color-fg-info-secondary);
--tag-subtle-icon-tag-subtle-icon-default: var(--color-neutral-neutral-900);
--tag-subtle-text-tag-subtle-text-purple: var(--colors-foreground-color-fg-purple-secondary);
--tag-subtle-icon-tag-subtle-icon-green: var(--color-neutral-neutral-900);
--tag-subtle-icon-tag-subtle-icon-yellow: var(--color-neutral-neutral-900);
--tag-subtle-icon-tag-subtle-icon-orange: var(--color-neutral-neutral-900);
--tag-subtle-icon-tag-subtle-icon-red: var(--color-neutral-neutral-900);
--tag-subtle-icon-tag-subtle-icon-blue: var(--color-neutral-neutral-900);
--tag-subtle-icon-tag-subtle-icon-purple: var(--color-neutral-neutral-900);
--tag-subtle-border-tag-subtle-border-default: var(--color-neutral-neutral-900);
--tag-subtle-border-tag-subtle-border-green: var(--color-neutral-neutral-900);
--tag-subtle-border-tag-subtle-border-yellow: var(--color-neutral-neutral-900);
--tag-subtle-border-tag-subtle-border-orange: var(--color-neutral-neutral-900);
--tag-subtle-border-tag-subtle-border-red: var(--color-neutral-neutral-900);
--tag-subtle-border-tag-subtle-border-blue: var(--color-neutral-neutral-900);
--tag-subtle-border-tag-solid-border-purple: var(--color-neutral-neutral-900);
--subheads-subhead-fg-primary: var(--colors-foreground-color-fg-primary);
--subheads-subhead-fg-secondary: var(--colors-foreground-color-fg-secondary);
--subheads-subhead-fg-tertiary: var(--colors-foreground-color-fg-tertiary);
--tab-tab-fg-active: var(--colors-foreground-color-fg-primary);
--tab-tab-fg-inactive: var(--colors-foreground-color-fg-tertiary);
--tab-tab-surface-active: var(--colors-surface-color-surface-secondary);
--tab-tab-surface-inactive: var(--colors-surface-color-surface-overlay);
--tab-tab-border-active: var(--tab-tab-fg-active);
--tab-tab-border-inactive: #FFFFFF00;
--button-danger-surface-button-danger-surface-default: var(--colors-background-color-bg-error);
--button-danger-surface-button-danger-surface-hovered: var(--colors-background-color-bg-error);
--button-danger-surface-button-danger-surface-focused: var(--colors-background-color-bg-error);
--button-danger-surface-button-danger-surface-disabled: var(--colors-foreground-color-fg-error-secondary);
--button-danger-text-button-danger-text-default: var(--white);
--button-danger-text-button-danger-text-hovered: var(--white);
--button-danger-text-button-danger-text-focused: var(--white);
--button-danger-text-button-danger-text-disabled: var(--color-neutral-neutral-500);
--button-danger-border-button-danger-border-focused: var(--color-red-red-500);
--button-danger-surface-button-danger-outline-default: #FFFFFF00;
--button-danger-surface-button-outline-surface-hovered: #FFFFFF00;
--button-danger-surface-button-outline-surface-focused: #FFFFFF02;
--button-danger-surface-button-outline-surface-disabled: #FFFFFF00;
--button-success-surface-button-success-surface-default: var(--colors-background-color-bg-success);
--button-success-surface-button-success-surface-hovered: var(--colors-background-color-bg-success);
--button-success-surface-button-success-surface-focused: var(--colors-background-color-bg-success);
--button-success-surface-button-success-surface-disabled: var(--colors-foreground-color-fg-success-secondary);
--button-success-text-button-success-text-default: var(--black);
--button-success-text-button-success-text-hovered: var(--black);
--button-success-text-button-success-text-focused: var(--black);
--button-success-text-button-success-text-disabled: var(--color-neutral-neutral-400);
--button-success-border-button-success-border-focused: var(--color-green-green-500);
--button-success-surface-button-success-outline-default: #FFFFFF00;
--button-success-surface-button-outline-surface-hovered: #FFFFFF00;
--button-success-surface-button-outline-surface-focused: #FFFFFF02;
--button-success-surface-button-outline-surface-disabled: #FFFFFF00;
--avatar-avatar-surface: var(--colors-surface-color-surface-tertiary);
--avatar-avatar-status: var(--colors-background-color-bg-primary);
--avatar-avatar-status-icon: var(--colors-foreground-color-fg-info);
--avatar-avatar-group-surface-primary: var(--colors-surface-color-surface-tertiary);
--avatar-avatar-group-surface-secondary: var(--colors-surface-color-surface-overlay);
--avatar-avatar-group-surface-tertiary: var(--colors-surface-color-surface-muted);
--avatar-avatar-group-text: var(--colors-foreground-color-fg-primary);
--avatar-avatar-label-title: var(--colors-foreground-color-fg-primary);
--avatar-avatar-label-subtitle: var(--colors-foreground-color-fg-tertiary);
--avatar-avatar-label-description: var(--colors-foreground-color-fg-secondary);
--avatar-subhead-fg-tertiary: var(--colors-foreground-color-fg-tertiary);


Semantic ( Colors ) - Dark Mode
--colors-background-color-bg-primary: var(--color-neutral-neutral-980);
--colors-background-color-bg-secondary: var(--color-neutral-neutral-920);
--colors-background-color-bg-tertiary: var(--color-neutral-neutral-900);
--colors-surface-color-surface-primary: var(--color-neutral-neutral-880);
--colors-background-color-bg-error: var(--color-red-red-500);
--colors-surface-color-surface-secondary: var(--color-neutral-neutral-850);
--colors-surface-color-surface-tertiary: var(--color-neutral-neutral-800);
--colors-background-color-bg-success: var(--color-green-green-500);
--colors-background-color-bg-alert: var(--color-yellow-yellow-500);
--colors-background-color-bg-warning: var(--color-orange-orange-500);
--colors-surface-color-surface-muted: var(--color-neutral-neutral-900);
--colors-background-color-bg-info: var(--color-blue-blue-500);
--colors-surface-color-surface-error: var(--color-neutral-neutral-800);
--colors-surface-color-surface-error-secondary: var(--color-red-900);
--colors-surface-color-surface-error-tertiary: var(--color-neutral-neutral-500);
--colors-background-color-bg-purple: var(--color-purple-purple-400);
--colors-background-color-bg-inverse: var(--color-neutral-neutral-50);
--colors-surface-color-surface-danger: var(--color-neutral-neutral-800);
--colors-surface-color-surface-danger-secondary: var(--color-red-900);
--colors-surface-color-surface-danger-tertiary: var(--color-neutral-neutral-500);
--colors-surface-colors-surface-success: var(--color-neutral-neutral-800);
--colors-background-color-bg-overlay: var(--color-neutral-neutral-700);
--colors-foreground-color-fg-primary: var(--white);
--colors-surface-colors-surface-success-secondary: var(--color-green-900);
--colors-surface-colors-surface-success-tertiary: var(--color-neutral-neutral-500);
--colors-foreground-color-fg-secondary: var(--color-neutral-neutral-300);
--colors-surface-color-surface-warn: var(--color-neutral-neutral-800);
--colors-surface-color-surface-warn-secondary: var(--color-orange-900);
--colors-surface-color-surface-warn-tertiary: var(--color-neutral-neutral-500);
--colors-surface-color-surface-alert: var(--color-neutral-neutral-800);
--colors-surface-color-surface-alert-secondary: var(--color-yellow-900);
--colors-surface-color-surface-alert-tertiary: var(--color-neutral-neutral-500);
--colors-surface-color-surface-info: var(--color-neutral-neutral-800);
--colors-foreground-color-fg-tertiary: var(--color-neutral-neutral-500);
--colors-surface-color-surface-info-secondary: var(--color-blue-900);
--colors-surface-color-surface-info-tertiary: var(--color-neutral-neutral-500);
--colors-surface-color-surface-info-muted: var(--color-blue-blue-700);
--colors-surface-color-surface-purple: var(--color-neutral-neutral-800);
--colors-surface-color-surface-purple-secondary: var(--color-purple-900);
--colors-surface-color-surface-purple-tertiary: var(--color-neutral-neutral-500);
--colors-surface-color-surface-hovered: var(--color-neutral-neutral-800);
--colors-surface-color-surface-overlay: var(--color-neutral-neutral-900);
--colors-foreground-color-fg-error: var(--color-red-red-500);
--colors-foreground-color-fg-error-secondary: var(--color-red-red-400);
--colors-foreground-color-fg-success: var(--color-green-green-600);
--colors-foreground-color-fg-success-secondary: var(--color-green-green-400);
--colors-foreground-color-fg-warning: var(--color-orange-orange-500);
--colors-foreground-color-fg-warning-secondary: var(--color-orange-orange-400);
--colors-foreground-color-fg-alert: var(--color-yellow-yellow-500);
--colors-foreground-color-fg-alert-secondary: var(--color-yellow-yellow-400);
--colors-foreground-color-fg-info: var(--color-blue-blue-500);
--colors-foreground-color-fg-info-secondary: var(--color-blue-blue-400);
--colors-foreground-color-fg-purple: var(--color-purple-purple-500);
--colors-foreground-color-fg-purple-secondary: var(--color-purple-purple-400);
--colors-foreground-color-fg-muted: var(--color-neutral-neutral-800);
--colors-foreground-color-fg-inverse: var(--color-neutral-neutral-950);
--colors-foreground-colo-fg-overlay: #FFFFFF;
--colors-foreground-colo-fg-green: var(--color-green-green-50);
--colors-foreground-colo-fg-blue: #FFFFFF;
--colors-foreground-colo-fg-red: #FFFFFF;
--colors-foreground-colo-fg-orange: #FFFFFF;
--colors-foreground-colo-fg-purple: #FFFFFF;
--colors-foreground-colo-fg-yellow: #FFFFFF;
--colors-border-color-border-primary: var(--color-neutral-neutral-800);
--colors-border-color-border-secondary: var(--color-neutral-neutral-700);
--colors-border-color-border-inverse: var(--color-neutral-neutral-250);
--colors-border-color-border-tertiary: #FFFFFF;
--colors-border-color-border-focus: var(--color-neutral-neutral-100);
--colors-border-color-border-hovered: var(--color-neutral-neutral-500);
--colors-border-color-border-success: var(--color-green-900);
--colors-border-color-border-error: var(--color-red-red-500);
--colors-border-color-border-alert: var(--color-yellow-900);
--colors-border-color-border-warn: var(--color-green-900);
--colors-border-color-border-purple: var(--color-purple-purple-700);
--colors-border-color-border-divider: var(--color-neutral-neutral-800);
--colors-placeholder-color-placeholder-primary: var(--color-neutral-neutral-700);
--colors-placeholder-color-placeholder-muted: var(--color-neutral-neutral-800);
--colors-interactions-color-interaction-primary: var(--color-blue-blue-500);
--colors-interactions-color-interaction-secondary: var(--color-purple-purple-500);
--colors-interactions-color-interaction-tertiary: var(--color-yellow-yellow-500);
--colors-interactions-color-interaction-muted: var(--color-neutral-neutral-800);
--colors-surface-color-surface-primary-inverse: var(--white);
--colors-indicators-color-feedback-success-light: #FFFFFF;
--colors-indicators-feedback-success-color-feedback-success-base: #FFFFFF;
--colors-indicators-feedback-success-color-feedback-success-tint: #FFFFFF;
--colors-indicators-feedback-success-color-feedback-success-shade: #FFFFFF;
--colors-indicators-status-activity-color-status-online: #FFFFFF;
--colors-indicators-status-activity-color-status-ofline: #FFFFFF;
--colors-indicators-status-activity-color-status-busy: #FFFFFF;
--colors-indicators-status-activity-color-status-live: #FFFFFF;
--colors-indicators-status-progress-color-status-upcoming: #FFFFFF;
--colors-indicators-status-approval-color-status-approved: #FFFFFF;
--colors-indicators-status-approval-color-status-rejected: #FFFFFF;
--colors-indicators-status-approval-color-status-pending: #FFFFFF;
--colors-indicators-status-progress-color-status-in_progress: #FFFFFF;
--colors-indicators-status-progress-color-status-completed: #FFFFFF;
--colors-indicators-status-progress-color-status-paused: #FFFFFF;
--colors-indicators-status-progress-color-status-stopped: #FFFFFF;
--colors-indicators-status-availability-color-status-available: #FFFFFF;
--colors-indicators-status-availability-color-status-uinavailable: #FFFFFF;
--colors-indicators-status-availability-color-status-limited: #FFFFFF;
--colors-indicators-status-health-color-status-healthy: #FFFFFF;
--colors-indicators-status-health-color-status-degraded: #FFFFFF;
--colors-indicators-status-health-color-status-down: #FFFFFF;
--colors-indicators-feedback-danger-color-feedback-danger-base: #FFFFFF;
--colors-indicators-feedback-danger-color-feedback-danger-tint: #FFFFFF;
--colors-indicators-feedback-danger-color-feedback-danger-shade: #FFFFFF;
--colors-indicators-feedback-warning-color-feedback-warning-base: #FFFFFF;
--colors-indicators-feedback-warning-color-feedback-warning-tint: #FFFFFF;
--colors-indicators-feedback-warning-color-feedback-warning-shade: #FFFFFF;
--colors-surface-color: #FFFFFF;

Semantic ( colors ) - Light Mode 
--colors-background-color-bg-primary: var(--white);
--colors-background-color-bg-secondary: var(--color-neutral-neutral-25);
--colors-background-color-bg-tertiary: var(--color-neutral-neutral-50);
--colors-surface-color-surface-primary: var(--white);
--colors-background-color-bg-error: var(--color-red-red-500);
--colors-surface-color-surface-secondary: var(--white);
--colors-surface-color-surface-tertiary: var(--color-neutral-neutral-75);
--colors-background-color-bg-success: var(--color-green-green-500);
--colors-background-color-bg-alert: var(--color-yellow-yellow-500);
--colors-background-color-bg-warning: var(--color-orange-orange-500);
--colors-surface-color-surface-muted: var(--color-neutral-neutral-100);
--colors-background-color-bg-info: var(--color-blue-blue-500);
--colors-surface-color-surface-error: var(--color-red-red-50);
--colors-surface-color-surface-error-secondary: var(--color-red-red-50);
--colors-surface-color-surface-error-tertiary: var(--color-red-red-500);
--colors-background-color-bg-purple: var(--color-purple-purple-400);
--colors-background-color-bg-inverse: var(--color-neutral-neutral-920);
--colors-surface-color-surface-danger: var(--color-red-red-50);
--colors-surface-color-surface-danger-secondary: var(--color-red-red-50);
--colors-surface-color-surface-danger-tertiary: var(--color-red-red-500);
--colors-surface-colors-surface-success: var(--color-green-green-50);
--colors-background-color-bg-overlay: var(--color-neutral-neutral-150);
--colors-foreground-color-fg-primary: var(--color-neutral-neutral-950);
--colors-surface-colors-surface-success-secondary: var(--color-green-green-50);
--colors-surface-colors-surface-success-tertiary: var(--color-green-green-500);
--colors-foreground-color-fg-secondary: var(--color-neutral-neutral-700);
--colors-surface-color-surface-warn: var(--color-orange-orange-50);
--colors-surface-color-surface-warn-secondary: var(--color-orange-orange-50);
--colors-surface-color-surface-warn-tertiary: var(--color-orange-orange-500);
--colors-surface-color-surface-alert: var(--color-yellow-yellow-50);
--colors-surface-color-surface-alert-secondary: var(--color-yellow-yellow-50);
--colors-surface-color-surface-alert-tertiary: var(--color-yellow-yellow-600);
--colors-surface-color-surface-info: var(--color-blue-blue-50);
--colors-foreground-color-fg-tertiary: var(--color-neutral-neutral-400);
--colors-surface-color-surface-info-secondary: var(--color-blue-blue-50);
--colors-surface-color-surface-info-tertiary: var(--color-blue-blue-500);
--colors-surface-color-surface-info-muted: var(--color-blue-blue-700);
--colors-surface-color-surface-purple: var(--color-purple-purple-50);
--colors-surface-color-surface-purple-secondary: var(--color-purple-purple-50);
--colors-surface-color-surface-purple-tertiary: var(--color-purple-purple-500);
--colors-surface-color-surface-hovered: var(--color-neutral-neutral-150);
--colors-surface-color-surface-overlay: var(--color-neutral-neutral-100);
--colors-foreground-color-fg-error: var(--color-red-red-500);
--colors-foreground-color-fg-error-secondary: var(--color-red-900);
--colors-foreground-color-fg-success: var(--color-green-green-600);
--colors-foreground-color-fg-success-secondary: var(--color-green-900);
--colors-foreground-color-fg-warning: var(--color-orange-orange-500);
--colors-foreground-color-fg-warning-secondary: var(--color-orange-900);
--colors-foreground-color-fg-alert: var(--color-yellow-yellow-600);
--colors-foreground-color-fg-alert-secondary: var(--color-yellow-900);
--colors-foreground-color-fg-info: var(--color-blue-blue-500);
--colors-foreground-color-fg-info-secondary: var(--color-blue-900);
--colors-foreground-color-fg-purple: var(--color-purple-purple-500);
--colors-foreground-color-fg-purple-secondary: var(--color-purple-900);
--colors-foreground-color-fg-muted: var(--color-neutral-neutral-250);
--colors-foreground-color-fg-inverse: var(--white);
--colors-foreground-colo-fg-overlay: #FFFFFF;
--colors-foreground-colo-fg-green: var(--color-green-green-50);
--colors-foreground-colo-fg-blue: var(--color-blue-blue-50);
--colors-foreground-colo-fg-red: var(--color-red-red-50);
--colors-foreground-colo-fg-orange: var(--color-orange-orange-50);
--colors-foreground-colo-fg-purple: var(--color-purple-purple-50);
--colors-foreground-colo-fg-yellow: var(--color-yellow-yellow-50);
--colors-border-color-border-primary: var(--color-neutral-neutral-100);
--colors-border-color-border-secondary: var(--color-neutral-neutral-150);
--colors-border-color-border-inverse: var(--color-neutral-neutral-500);
--colors-border-color-border-tertiary: #FFFFFF;
--colors-border-color-border-focus: var(--color-blue-blue-500);
--colors-border-color-border-hovered: var(--color-blue-blue-500);
--colors-border-color-border-success: var(--color-green-green-100);
--colors-border-color-border-error: var(--color-red-red-500);
--colors-border-color-border-alert: var(--color-yellow-yellow-800);
--colors-border-color-border-warn: var(--color-orange-orange-800);
--colors-border-color-border-purple: var(--color-purple-purple-800);
--colors-border-color-border-divider: var(--color-neutral-neutral-100);
--colors-placeholder-color-placeholder-primary: var(--color-neutral-neutral-150);
--colors-placeholder-color-placeholder-muted: var(--color-neutral-neutral-100);
--colors-interactions-color-interaction-primary: var(--color-blue-blue-500);
--colors-interactions-color-interaction-secondary: var(--color-purple-purple-500);
--colors-interactions-color-interaction-tertiary: var(--color-yellow-yellow-600);
--colors-interactions-color-interaction-muted: var(--color-neutral-neutral-75);
--colors-surface-color-surface-primary-inverse: var(--black);
--colors-indicators-color-feedback-success-light: #FFFFFF;
--colors-indicators-feedback-success-color-feedback-success-base: #FFFFFF;
--colors-indicators-feedback-success-color-feedback-success-tint: #FFFFFF;
--colors-indicators-feedback-success-color-feedback-success-shade: #FFFFFF;
--colors-indicators-status-activity-color-status-online: #FFFFFF;
--colors-indicators-status-activity-color-status-ofline: #FFFFFF;
--colors-indicators-status-activity-color-status-busy: #FFFFFF;
--colors-indicators-status-activity-color-status-live: #FFFFFF;
--colors-indicators-status-progress-color-status-upcoming: #FFFFFF;
--colors-indicators-status-approval-color-status-approved: #FFFFFF;
--colors-indicators-status-approval-color-status-rejected: #FFFFFF;
--colors-indicators-status-approval-color-status-pending: #FFFFFF;
--colors-indicators-status-progress-color-status-in_progress: #FFFFFF;
--colors-indicators-status-progress-color-status-completed: #FFFFFF;
--colors-indicators-status-progress-color-status-paused: #FFFFFF;
--colors-indicators-status-progress-color-status-stopped: #FFFFFF;
--colors-indicators-status-availability-color-status-available: #FFFFFF;
--colors-indicators-status-availability-color-status-uinavailable: #FFFFFF;
--colors-indicators-status-availability-color-status-limited: #FFFFFF;
--colors-indicators-status-health-color-status-healthy: #FFFFFF;
--colors-indicators-status-health-color-status-degraded: #FFFFFF;
--colors-indicators-status-health-color-status-down: #FFFFFF;
--colors-indicators-feedback-danger-color-feedback-danger-base: #FFFFFF;
--colors-indicators-feedback-danger-color-feedback-danger-tint: #FFFFFF;
--colors-indicators-feedback-danger-color-feedback-danger-shade: #FFFFFF;
--colors-indicators-feedback-warning-color-feedback-warning-base: #FFFFFF;
--colors-indicators-feedback-warning-color-feedback-warning-tint: #FFFFFF;
--colors-indicators-feedback-warning-color-feedback-warning-shade: #FFFFFF;
--colors-surface-color: #FFFFFF;