@under-io/tailwind/src/index.css

Under engineering Tailwind configuration

@import 'tailwindcss';
@import 'tw-animate-css';

@import './config/radix.css';
@import './config/colors.css';
@import './config/radius.css';
@import './config/utilities.css';
@import './config/typography.css';
@import './config/box-shadow.css';

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  :root {
    /** Gray **/
    --gray-25: rgb(252, 252, 253);
    --gray-50: rgb(249, 250, 251);
    --gray-100: rgb(242, 244, 247);
    --gray-200: rgb(228, 231, 236);
    --gray-300: rgb(208, 213, 221);
    --gray-400: rgb(152, 162, 179);
    --gray-500: rgb(102, 112, 133);
    --gray-600: rgb(71, 84, 103);
    --gray-700: rgb(52, 64, 84);
    --gray-800: rgb(24, 34, 48);
    --gray-900: rgb(16, 24, 40);
    --gray-950: rgb(12, 17, 29);

    /** Utility - Gray **/
    --utility-gray-50: var(--color-gray-50);
    --utility-gray-100: var(--color-gray-100);
    --utility-gray-200: var(--color-gray-200);
    --utility-gray-300: var(--color-gray-300);
    --utility-gray-400: var(--color-gray-400);
    --utility-gray-500: var(--color-gray-500);
    --utility-gray-600: var(--color-gray-600);
    --utility-gray-700: var(--color-gray-700);
    --utility-gray-800: var(--color-gray-800);
    --utility-gray-900: var(--color-gray-900);

    /** Utility - Brand **/
    --utility-brand-50: var(--color-brand-50);
    --utility-brand-50_alt: var(--color-brand-50);
    --utility-brand-100: var(--color-brand-100);
    --utility-brand-100_alt: var(--color-brand-100);
    --utility-brand-200: var(--color-brand-200);
    --utility-brand-200_alt: var(--color-brand-200);
    --utility-brand-300: var(--color-brand-300);
    --utility-brand-300_alt: var(--color-brand-300);
    --utility-brand-400: var(--color-brand-400);
    --utility-brand-400_alt: var(--color-brand-400);
    --utility-brand-500: var(--color-brand-500);
    --utility-brand-500_alt: var(--color-brand-500);
    --utility-brand-600: var(--color-brand-600);
    --utility-brand-600_alt: var(--color-brand-600);
    --utility-brand-700: var(--color-brand-700);
    --utility-brand-700_alt: var(--color-brand-700);
    --utility-brand-800: var(--color-brand-800);
    --utility-brand-800_alt: var(--color-brand-800);
    --utility-brand-900: var(--color-brand-900);
    --utility-brand-900_alt: var(--color-brand-900);

    /** Utility - Error **/
    --utility-error-50: var(--color-error-50);
    --utility-error-100: var(--color-error-100);
    --utility-error-200: var(--color-error-200);
    --utility-error-300: var(--color-error-300);
    --utility-error-400: var(--color-error-400);
    --utility-error-500: var(--color-error-500);
    --utility-error-600: var(--color-error-600);
    --utility-error-700: var(--color-error-700);

    /** Utility - Warning **/
    --utility-warning-50: var(--color-warning-50);
    --utility-warning-100: var(--color-warning-100);
    --utility-warning-200: var(--color-warning-200);
    --utility-warning-300: var(--color-warning-300);
    --utility-warning-400: var(--color-warning-400);
    --utility-warning-500: var(--color-warning-500);
    --utility-warning-600: var(--color-warning-600);
    --utility-warning-700: var(--color-warning-700);

    /** Utility - Success **/
    --utility-success-50: var(--color-success-50);
    --utility-success-100: var(--color-success-100);
    --utility-success-200: var(--color-success-200);
    --utility-success-300: var(--color-success-300);
    --utility-success-400: var(--color-success-400);
    --utility-success-500: var(--color-success-500);
    --utility-success-600: var(--color-success-600);
    --utility-success-700: var(--color-success-700);

    /** Utility - Blue Light **/
    --utility-blue-light-50: var(--color-blue-light-50);
    --utility-blue-light-100: var(--color-blue-light-100);
    --utility-blue-light-200: var(--color-blue-light-200);
    --utility-blue-light-300: var(--color-blue-light-300);
    --utility-blue-light-400: var(--color-blue-light-400);
    --utility-blue-light-500: var(--color-blue-light-500);
    --utility-blue-light-600: var(--color-blue-light-600);
    --utility-blue-light-700: var(--color-blue-light-700);

    /** Utility - Blue **/
    --utility-blue-50: var(--color-blue-50);
    --utility-blue-100: var(--color-blue-100);
    --utility-blue-200: var(--color-blue-200);
    --utility-blue-300: var(--color-blue-300);
    --utility-blue-400: var(--color-blue-400);
    --utility-blue-500: var(--color-blue-500);
    --utility-blue-600: var(--color-blue-600);
    --utility-blue-700: var(--color-blue-700);

    /** Utility - Blue Dark **/
    --utility-blue-dark-50: var(--color-blue-dark-50);
    --utility-blue-dark-100: var(--color-blue-dark-100);
    --utility-blue-dark-200: var(--color-blue-dark-200);
    --utility-blue-dark-300: var(--color-blue-dark-300);
    --utility-blue-dark-400: var(--color-blue-dark-400);
    --utility-blue-dark-500: var(--color-blue-dark-500);
    --utility-blue-dark-600: var(--color-blue-dark-600);
    --utility-blue-dark-700: var(--color-blue-dark-700);

    /** Utility - Indigo **/
    --utility-indigo-50: var(--color-indigo-50);
    --utility-indigo-100: var(--color-indigo-100);
    --utility-indigo-200: var(--color-indigo-200);
    --utility-indigo-300: var(--color-indigo-300);
    --utility-indigo-400: var(--color-indigo-400);
    --utility-indigo-500: var(--color-indigo-500);
    --utility-indigo-600: var(--color-indigo-600);
    --utility-indigo-700: var(--color-indigo-700);

    /** Utility - Purple **/
    --utility-purple-50: var(--color-purple-50);
    --utility-purple-100: var(--color-purple-100);
    --utility-purple-200: var(--color-purple-200);
    --utility-purple-300: var(--color-purple-300);
    --utility-purple-400: var(--color-purple-400);
    --utility-purple-500: var(--color-purple-500);
    --utility-purple-600: var(--color-purple-600);
    --utility-purple-700: var(--color-purple-700);

    /** Utility - Fuchsia **/
    --utility-fuchsia-50: var(--color-fuchsia-50);
    --utility-fuchsia-100: var(--color-fuchsia-100);
    --utility-fuchsia-200: var(--color-fuchsia-200);
    --utility-fuchsia-300: var(--color-fuchsia-300);
    --utility-fuchsia-400: var(--color-fuchsia-400);
    --utility-fuchsia-500: var(--color-fuchsia-500);
    --utility-fuchsia-600: var(--color-fuchsia-600);
    --utility-fuchsia-700: var(--color-fuchsia-700);

    /** Utility - Pink **/
    --utility-pink-50: var(--color-pink-50);
    --utility-pink-100: var(--color-pink-100);
    --utility-pink-200: var(--color-pink-200);
    --utility-pink-300: var(--color-pink-300);
    --utility-pink-400: var(--color-pink-400);
    --utility-pink-500: var(--color-pink-500);
    --utility-pink-600: var(--color-pink-600);
    --utility-pink-700: var(--color-pink-700);

    /** Utility - Orange Dark **/
    --utility-orange-dark-50: var(--color-orange-dark-50);
    --utility-orange-dark-100: var(--color-orange-dark-100);
    --utility-orange-dark-200: var(--color-orange-dark-200);
    --utility-orange-dark-300: var(--color-orange-dark-300);
    --utility-orange-dark-400: var(--color-orange-dark-400);
    --utility-orange-dark-500: var(--color-orange-dark-500);
    --utility-orange-dark-600: var(--color-orange-dark-600);
    --utility-orange-dark-700: var(--color-orange-dark-700);

    /** Utility - Orange **/
    --utility-orange-50: var(--color-orange-50);
    --utility-orange-100: var(--color-orange-100);
    --utility-orange-200: var(--color-orange-200);
    --utility-orange-300: var(--color-orange-300);
    --utility-orange-400: var(--color-orange-400);
    --utility-orange-500: var(--color-orange-500);
    --utility-orange-600: var(--color-orange-600);
    --utility-orange-700: var(--color-orange-700);

    /** Text Colors **/
    --text-primary: var(--color-gray-900);
    --text-primary_on-brand: rgb(255, 255, 255);
    --text-secondary: var(--color-gray-700);
    --text-secondary_hover: var(--color-gray-800);
    --text-secondary_on-brand: var(--color-brand-200);
    --text-tertiary: var(--color-gray-600);
    --text-tertiary_hover: var(--color-gray-700);
    --text-tertiary_on-brand: var(--color-brand-200);
    --text-quaternary: var(--color-gray-500);
    --text-quaternary_on-brand: var(--color-brand-300);
    --text-disabled: var(--color-gray-500);
    --text-placeholder: var(--color-gray-500);
    --text-placeholder_subtle: var(--color-gray-300);
    --text-brand-primary: var(--color-brand-900);
    --text-brand-secondary: var(--color-brand-700);
    --text-brand-tertiary: var(--color-brand-600);
    --text-brand-tertiary_alt: var(--color-brand-600);
    --text-error: var(--color-error-600);
    --text-warning: var(--color-warning-600);
    --text-success: var(--color-success-600);

    /** Border Colors **/
    --border-primary: var(--color-gray-300);
    --border-secondary: var(--color-gray-200);
    --border-tertiary: var(--color-gray-100);
    --border-disabled: var(--color-gray-300);
    --border-disabled_subtle: var(--color-gray-200);
    --border-brand: var(--color-brand-500);
    --border-brand_alt: var(--color-gray-600);
    --border-error: var(--color-error-500);
    --border-error_subtle: var(--color-error-300);

    /** Foreground Colors **/
    --fg-primary: var(--color-gray-900);
    --fg-secondary: var(--color-gray-700);
    --fg-secondary_hover: var(--color-gray-800);
    --fg-tertiary: var(--color-gray-600);
    --fg-tertiary_hover: var(--color-gray-700);
    --fg-quaternary: var(--color-gray-500);
    --fg-quaternary_hover: var(--color-gray-600);
    --fg-quinary: var(--color-gray-400);
    --fg-quinary_hover: var(--color-gray-500);
    --fg-senary: var(--color-gray-300);
    --fg-disabled: var(--color-gray-400);
    --fg-disabled_subtle: var(--color-gray-300);
    --fg-brand-primary: var(--color-brand-600);
    --fg-brand-primary_alt: var(--color-gray-600);
    --fg-brand-secondary: var(--color-brand-500);
    --fg-error-primary: var(--color-error-600);
    --fg-error-secondary: var(--color-error-500);
    --fg-warning-primary: var(--color-warning-600);
    --fg-warning-secondary: var(--color-warning-500);
    --fg-success-primary: var(--color-success-600);
    --fg-success-secondary: var(--color-success-500);

    /** Background Colors **/
    --bg-primary: rgb(255, 255, 255);
    --bg-primary_alt: rgb(255, 255, 255);
    --bg-primary_hover: var(--color-gray-50);
    --bg-primary_solid: var(--color-gray-950);
    --bg-secondary: var(--color-gray-50);
    --bg-secondary_alt: var(--color-gray-50);
    --bg-secondary_hover: var(--color-gray-100);
    --bg-secondary_subtle: var(--color-gray-50);
    --bg-secondary_solid: var(--color-gray-600);
    --bg-tertiary: var(--color-gray-100);
    --bg-quaternary: var(--color-gray-200);
    --bg-active: var(--color-gray-50);
    --bg-disabled: var(--color-gray-100);
    --bg-disabled_subtle: var(--color-gray-50);
    --bg-overlay: var(--color-gray-950);
    --bg-brand-primary: var(--color-brand-50);
    --bg-brand-primary_alt: var(--color-gray-50);
    --bg-brand-secondary: var(--color-brand-100);
    --bg-brand-solid: var(--color-brand-600);
    --bg-brand-solid_hover: var(--color-brand-700);
    --bg-brand-section: var(--color-gray-800);
    --bg-brand-section_subtle: var(--color-gray-700);
    --bg-error-primary: var(--color-error-50);
    --bg-error-secondary: var(--color-error-100);
    --bg-error-solid: var(--color-error-600);
    --bg-warning-primary: var(--color-warning-50);
    --bg-warning-secondary: var(--color-warning-100);
    --bg-warning-solid: var(--color-warning-600);
    --bg-success-primary: var(--color-success-50);
    --bg-success-secondary: var(--color-success-100);
    --bg-success-solid: var(--color-success-600);
  }

  .dark {
    /** Gray **/
    --gray-25: rgb(252, 252, 252);
    --gray-50: rgb(250, 250, 250);
    --gray-100: rgb(244, 244, 245);
    --gray-200: rgb(228, 228, 231);
    --gray-300: rgb(209, 209, 214);
    --gray-400: rgb(160, 160, 171);
    --gray-500: rgb(112, 112, 123);
    --gray-600: rgb(81, 82, 92);
    --gray-700: rgb(63, 63, 70);
    --gray-800: rgb(38, 39, 43);
    --gray-900: rgb(26, 26, 30);
    --gray-950: rgb(19, 19, 22);

    /** Utility - Gray **/
    --utility-gray-50: var(--color-gray-900);
    --utility-gray-100: var(--color-gray-800);
    --utility-gray-200: var(--color-gray-700);
    --utility-gray-300: var(--color-gray-700);
    --utility-gray-400: var(--color-gray-600);
    --utility-gray-500: var(--color-gray-500);
    --utility-gray-600: var(--color-gray-400);
    --utility-gray-700: var(--color-gray-300);
    --utility-gray-800: var(--color-gray-200);
    --utility-gray-900: var(--color-gray-100);

    /** Utility - Brand **/
    --utility-brand-50: var(--color-brand-950);
    --utility-brand-50_alt: var(--color-gray-900);
    --utility-brand-100: var(--color-brand-900);
    --utility-brand-100_alt: var(--color-gray-800);
    --utility-brand-200: var(--color-brand-800);
    --utility-brand-200_alt: var(--color-gray-700);
    --utility-brand-300: var(--color-brand-700);
    --utility-brand-300_alt: var(--color-gray-700);
    --utility-brand-400: var(--color-brand-600);
    --utility-brand-400_alt: var(--color-gray-600);
    --utility-brand-500: var(--color-brand-500);
    --utility-brand-500_alt: var(--color-gray-500);
    --utility-brand-600: var(--color-brand-400);
    --utility-brand-600_alt: var(--color-gray-400);
    --utility-brand-700: var(--color-brand-300);
    --utility-brand-700_alt: var(--color-gray-300);
    --utility-brand-800: var(--color-brand-200);
    --utility-brand-800_alt: var(--color-gray-200);
    --utility-brand-900: var(--color-brand-100);
    --utility-brand-900_alt: var(--color-gray-100);

    /** Utility - Error **/
    --utility-error-50: var(--color-error-950);
    --utility-error-100: var(--color-error-900);
    --utility-error-200: var(--color-error-800);
    --utility-error-300: var(--color-error-700);
    --utility-error-400: var(--color-error-600);
    --utility-error-500: var(--color-error-500);
    --utility-error-600: var(--color-error-400);
    --utility-error-700: var(--color-error-300);

    /** Utility - Warning **/
    --utility-warning-50: var(--color-warning-950);
    --utility-warning-100: var(--color-warning-900);
    --utility-warning-200: var(--color-warning-800);
    --utility-warning-300: var(--color-warning-700);
    --utility-warning-400: var(--color-warning-600);
    --utility-warning-500: var(--color-warning-500);
    --utility-warning-600: var(--color-warning-400);
    --utility-warning-700: var(--color-warning-300);

    /** Utility - Success **/
    --utility-success-50: var(--color-success-950);
    --utility-success-100: var(--color-success-900);
    --utility-success-200: var(--color-success-800);
    --utility-success-300: var(--color-success-700);
    --utility-success-400: var(--color-success-600);
    --utility-success-500: var(--color-success-500);
    --utility-success-600: var(--color-success-400);
    --utility-success-700: var(--color-success-300);

    /** Utility - Blue Light **/
    --utility-blue-light-50: var(--color-blue-light-950);
    --utility-blue-light-100: var(--color-blue-light-900);
    --utility-blue-light-200: var(--color-blue-light-800);
    --utility-blue-light-300: var(--color-blue-light-700);
    --utility-blue-light-400: var(--color-blue-light-600);
    --utility-blue-light-500: var(--color-blue-light-500);
    --utility-blue-light-600: var(--color-blue-light-400);
    --utility-blue-light-700: var(--color-blue-light-300);

    /** Utility - Blue **/
    --utility-blue-50: var(--color-blue-950);
    --utility-blue-100: var(--color-blue-900);
    --utility-blue-200: var(--color-blue-800);
    --utility-blue-300: var(--color-blue-700);
    --utility-blue-400: var(--color-blue-600);
    --utility-blue-500: var(--color-blue-500);
    --utility-blue-600: var(--color-blue-400);
    --utility-blue-700: var(--color-blue-300);

    /** Utility - Blue Dark **/
    --utility-blue-dark-50: var(--color-blue-dark-950);
    --utility-blue-dark-100: var(--color-blue-dark-900);
    --utility-blue-dark-200: var(--color-blue-dark-800);
    --utility-blue-dark-300: var(--color-blue-dark-700);
    --utility-blue-dark-400: var(--color-blue-dark-600);
    --utility-blue-dark-500: var(--color-blue-dark-500);
    --utility-blue-dark-600: var(--color-blue-dark-400);
    --utility-blue-dark-700: var(--color-blue-dark-300);

    /** Utility - Indigo **/
    --utility-indigo-50: var(--color-indigo-950);
    --utility-indigo-100: var(--color-indigo-900);
    --utility-indigo-200: var(--color-indigo-800);
    --utility-indigo-300: var(--color-indigo-700);
    --utility-indigo-400: var(--color-indigo-600);
    --utility-indigo-500: var(--color-indigo-500);
    --utility-indigo-600: var(--color-indigo-400);
    --utility-indigo-700: var(--color-indigo-300);

    /** Utility - Purple **/
    --utility-purple-50: var(--color-purple-950);
    --utility-purple-100: var(--color-purple-900);
    --utility-purple-200: var(--color-purple-800);
    --utility-purple-300: var(--color-purple-700);
    --utility-purple-400: var(--color-purple-600);
    --utility-purple-500: var(--color-purple-500);
    --utility-purple-600: var(--color-purple-400);
    --utility-purple-700: var(--color-purple-300);

    /** Utility - Fuchsia **/
    --utility-fuchsia-50: var(--color-fuchsia-950);
    --utility-fuchsia-100: var(--color-fuchsia-900);
    --utility-fuchsia-200: var(--color-fuchsia-800);
    --utility-fuchsia-300: var(--color-fuchsia-700);
    --utility-fuchsia-400: var(--color-fuchsia-600);
    --utility-fuchsia-500: var(--color-fuchsia-500);
    --utility-fuchsia-600: var(--color-fuchsia-400);
    --utility-fuchsia-700: var(--color-fuchsia-300);

    /** Utility - Pink **/
    --utility-pink-50: var(--color-pink-950);
    --utility-pink-100: var(--color-pink-900);
    --utility-pink-200: var(--color-pink-800);
    --utility-pink-300: var(--color-pink-700);
    --utility-pink-400: var(--color-pink-600);
    --utility-pink-500: var(--color-pink-500);
    --utility-pink-600: var(--color-pink-400);
    --utility-pink-700: var(--color-pink-300);

    /** Utility - Orange Dark **/
    --utility-orange-dark-50: var(--color-orange-dark-950);
    --utility-orange-dark-100: var(--color-orange-dark-900);
    --utility-orange-dark-200: var(--color-orange-dark-800);
    --utility-orange-dark-300: var(--color-orange-dark-700);
    --utility-orange-dark-400: var(--color-orange-dark-600);
    --utility-orange-dark-500: var(--color-orange-dark-500);
    --utility-orange-dark-600: var(--color-orange-dark-400);
    --utility-orange-dark-700: var(--color-orange-dark-300);

    /** Utility - Orange **/
    --utility-orange-50: var(--color-orange-950);
    --utility-orange-100: var(--color-orange-900);
    --utility-orange-200: var(--color-orange-800);
    --utility-orange-300: var(--color-orange-700);
    --utility-orange-400: var(--color-orange-600);
    --utility-orange-500: var(--color-orange-500);
    --utility-orange-600: var(--color-orange-400);
    --utility-orange-700: var(--color-orange-300);

    /** Text Colors **/
    --text-primary: var(--color-gray-50);
    --text-primary_on-brand: var(--color-gray-50);
    --text-secondary: var(--color-gray-300);
    --text-secondary_hover: var(--color-gray-200);
    --text-secondary_on-brand: var(--color-gray-300);
    --text-tertiary: var(--color-gray-400);
    --text-tertiary_hover: var(--color-gray-300);
    --text-tertiary_on-brand: var(--color-gray-400);
    --text-quaternary: var(--color-gray-400);
    --text-quaternary_on-brand: var(--color-gray-400);
    --text-disabled: var(--color-gray-500);
    --text-placeholder: var(--color-gray-400);
    --text-placeholder_subtle: var(--color-gray-700);
    --text-brand-primary: var(--color-gray-50);
    --text-brand-secondary: var(--color-gray-300);
    --text-brand-tertiary: var(--color-gray-400);
    --text-brand-tertiary_alt: var(--color-brand-50);
    --text-error: var(--color-error-400);
    --text-warning: var(--color-warning-400);
    --text-success: var(--color-success-400);

    /** Border Colors **/
    --border-primary: var(--color-gray-700);
    --border-secondary: var(--color-gray-800);
    --border-tertiary: var(--color-gray-800);
    --border-disabled: var(--color-gray-700);
    --border-disabled_subtle: var(--color-gray-800);
    --border-brand: var(--color-brand-400);
    --border-brand_alt: var(--color-gray-700);
    --border-error: var(--color-error-400);
    --border-error_subtle: var(--color-error-400);

    /** Foreground Colors **/
    --fg-primary: rgb(255, 255, 255);
    --fg-secondary: var(--color-gray-300);
    --fg-secondary_hover: var(--color-gray-200);
    --fg-tertiary: var(--color-gray-400);
    --fg-tertiary_hover: var(--color-gray-300);
    --fg-quaternary: var(--color-gray-400);
    --fg-quaternary_hover: var(--color-gray-300);
    --fg-quinary: var(--color-gray-500);
    --fg-quinary_hover: var(--color-gray-400);
    --fg-senary: var(--color-gray-600);
    --fg-disabled: var(--color-gray-500);
    --fg-disabled_subtle: var(--color-gray-600);
    --fg-brand-primary: var(--color-brand-500);
    --fg-brand-primary_alt: var(--color-gray-300);
    --fg-brand-secondary: var(--color-brand-500);
    --fg-error-primary: var(--color-error-500);
    --fg-error-secondary: var(--color-error-400);
    --fg-warning-primary: var(--color-warning-500);
    --fg-warning-secondary: var(--color-warning-400);
    --fg-success-primary: var(--color-success-500);
    --fg-success-secondary: var(--color-success-400);

    /** Background Colors **/
    --bg-primary: var(--color-gray-950);
    --bg-primary_alt: var(--color-gray-900);
    --bg-primary_hover: var(--color-gray-800);
    --bg-primary_solid: var(--color-gray-900);
    --bg-secondary: var(--color-gray-900);
    --bg-secondary_alt: var(--color-gray-950);
    --bg-secondary_hover: var(--color-gray-800);
    --bg-secondary_subtle: var(--color-gray-900);
    --bg-secondary_solid: var(--color-gray-600);
    --bg-tertiary: var(--color-gray-800);
    --bg-quaternary: var(--color-gray-700);
    --bg-active: var(--color-gray-800);
    --bg-disabled: var(--color-gray-800);
    --bg-disabled_subtle: var(--color-gray-900);
    --bg-overlay: var(--color-gray-800);
    --bg-brand-primary: var(--color-brand-500);
    --bg-brand-primary_alt: var(--color-gray-800);
    --bg-brand-secondary: var(--color-brand-600);
    --bg-brand-solid: var(--color-brand-600);
    --bg-brand-solid_hover: var(--color-brand-500);
    --bg-brand-section: var(--color-gray-800);
    --bg-brand-section_subtle: var(--color-gray-950);
    --bg-error-primary: var(--color-error-500);
    --bg-error-secondary: var(--color-error-600);
    --bg-error-solid: var(--color-error-600);
    --bg-warning-primary: var(--color-warning-500);
    --bg-warning-secondary: var(--color-warning-600);
    --bg-warning-solid: var(--color-warning-600);
    --bg-success-primary: var(--color-success-500);
    --bg-success-secondary: var(--color-success-600);
    --bg-success-solid: var(--color-success-600);
  }
}