:global(.uui-theme-violet) {
    $cerulean-50: #E8EAF6;
    $cerulean-100: #C4CBE8;
    $cerulean-200: #9DAAD9;
    $cerulean-300: #7688C9;
    $cerulean-400: #586EBE;
    $cerulean-500: #3855B3; // default
    $cerulean-600: #324DA9;
    $cerulean-700: #28439D;
    $cerulean-800: #203991;
    $cerulean-900: #10277C;

    $gray-50: #F8F8FA;
    $gray-100: #F0F1F2;
    $gray-200: #E6E7E9;
    $gray-300: #D6D6D8;
    $gray-400: #B1B2B4;
    $gray-500: #919294;
    $gray-600: #696A6B;
    $gray-700: #565758;
    $gray-800: #38383A;
    $gray-900: #181819;

    $white: #FFFFFF;

    $red600: #DC2626;

    --font-regular: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-semibold: 'Sans Semibold', Arial, sans-serif;
    --font-italic: 'Sans Italic', Arial, sans-serif;
    --font-primary: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-promo: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'Roboto Mono', Arial, sans-serif;
    --font-redacted: 'Redacted';

    //--accent-color: #{$green};
    //--accent-light-color: #89C219;
    //--accent-lightest-color: #A6D151;
    //--accent-dark-color: #3E4A39;
    //--accent-darkest-color: #38403B;
    --primary-color: #{$cerulean-500};
    --primary-light-color: #3855B31F;
    --primary-lightest-color: #3855B30A;
    --primary-dark-color: #344EA5;
    --primary-darkest-color: #2B4188;
    --secondary-color: #565758;
    --secondary-light-color: #5657581F;
    --secondary-lightest-color: #5657580A;
    --secondary-dark-color: #4F5051;
    --secondary-darkest-color: #414243;
    --negative-color: #{$red600};
    --negative-light-color: #E6674E;
    --negative-lightest-color: #F78C77;
    --negative-dark-color: #694548;
    --negative-darkest-color: #473943;

    --button-bg-halftone-color: transparent;
    --button-caption-disabled-color: #{$white};

    --contrast-color: #{$white};
    --warning-color: #FF8F00;
    --disabled-color: #{$gray-500};
    --surface-color: #{$white};
    --surface-hover-color: #{$gray-200};
    --surface-dark-color: #{$gray-900};
    --surface-light-color: #{$white};
    --divider-color: #{$gray-400};
    --icon-color: #{$gray-600};

    --input-bg-color: #{$white};
    --input-switch-bg-color: #{$gray-500};
    --input-bg-checked-color: var(--primary-color);
    --input-bg-checked-hover-color: var(--primary-color);
    --input-bg-checked-disabled-color: var(--primary-dark-color);
    --input-bg-hover-color: #38383A6B;
    --input-bg-disabled-color: #F0F1F2;
    --input-bg-readonly-color: #F0F1F2;
    --input-border-color: #{$gray-500};
    --input-border-checked-color: var(--primary-color);
    --input-border-checked-hover-color: var(--primary-light-color);
    --input-border-checked-disabled-color: var(--primary-dark-color);
    --input-border-hover-color: var(--primary-color);
    --input-switch-border-hover-color: #{#{$gray-500}};
    --input-textinput-border-hover-color: #38383A6B;
    --input-border-disabled-color: var(--disabled-color);
    --input-border-readonly-color: var(--disabled-color);
    --input-rest-color: var(--primary-color);
    --input-hover-color: var(--primary-light-color);
    --input-active-color: var(--primary-lightest-color);

    --input-label-color: #181819E6;
    --input-label-disabled-color: #18181973;

    --input-placeholder-color: #38383A6B;
    --input-placeholder-disabled-color: #38383A57;
    --input-text-color: #38383AE6;
    //--input-text-disabled-color: #{$gray30};

    //--input-icon-color: #{$gray50};
    //--input-icon-disabled-color: #{$gray50};
    //--input-icon-clickable-color: #{$gray60};
    //--input-icon-clickable-hover-color: #{$gray70};
    --input-checkbox-icon-color: #{$white};
    //--input-checkbox-icon-hover-color: #{$gray70};
    //--input-checkbox-icon-disabled-color: #{$gray70};

    // ---------------------------

    --border-radius: 0.25rem;
}
