/** * Do not edit directly, this file was auto-generated. */ :root { --cds2-border-badge: 2px solid var(--cds2-color-background-application); --cds2-border-default: 1px solid var(--cds2-color-border-neutral-default); --cds2-border-focus: 2px solid var(--cds2-color-border-focus); /** Border used for focus states on interactive elements. */ --cds2-brand-accent-purple-100: #f2e4ff; --cds2-brand-accent-purple-200: #a5a3ff; --cds2-brand-accent-purple-300: #5959ff; --cds2-brand-accent-purple-400: #2d389a; --cds2-brand-accent-purple-500: #021a35; --cds2-brand-alpha-gray-10: #020e1b1a; --cds2-brand-alpha-gray-2: #020e1b05; --cds2-brand-alpha-gray-20: #020e1b33; --cds2-brand-alpha-gray-30: #020e1b4d; --cds2-brand-alpha-gray-40: #020e1b66; --cds2-brand-alpha-gray-5: #020e1b0d; --cds2-brand-alpha-gray-50: #020e1b80; --cds2-brand-alpha-gray-60: #020e1b99; --cds2-brand-alpha-gray-70: #020e1bb3; --cds2-brand-alpha-gray-80: #020e1bcc; --cds2-brand-alpha-gray-90: #020e1be6; --cds2-brand-alpha-primary-10: #00cccc1a; --cds2-brand-alpha-primary-2: #00cccc05; --cds2-brand-alpha-primary-20: #0cc3; --cds2-brand-alpha-primary-30: #00cccc4d; --cds2-brand-alpha-primary-40: #0cc6; --cds2-brand-alpha-primary-5: #00cccc0d; --cds2-brand-alpha-primary-50: #00cccc80; --cds2-brand-alpha-primary-60: #0cc9; --cds2-brand-alpha-primary-70: #00ccccb3; --cds2-brand-alpha-primary-80: #0ccc; --cds2-brand-alpha-primary-90: #00cccce6; --cds2-brand-alpha-white-10: #ffffff1a; --cds2-brand-alpha-white-2: #ffffff05; --cds2-brand-alpha-white-20: #fff3; --cds2-brand-alpha-white-30: #ffffff4d; --cds2-brand-alpha-white-40: #fff6; --cds2-brand-alpha-white-5: #ffffff0d; --cds2-brand-alpha-white-50: #ffffff80; --cds2-brand-alpha-white-60: #fff9; --cds2-brand-alpha-white-70: #ffffffb3; --cds2-brand-alpha-white-80: #fffc; --cds2-brand-alpha-white-90: #ffffffe6; --cds2-brand-base-black: #000; --cds2-brand-base-white: #fff; --cds2-brand-core-blue-100: #c5ddf8; --cds2-brand-core-blue-200: #b0d1f5; --cds2-brand-core-blue-25: #eff6fd; --cds2-brand-core-blue-300: #62a4ec; --cds2-brand-core-blue-400: #086cd9; --cds2-brand-core-blue-50: #dadafa; --cds2-brand-core-blue-500: #0c55a5; --cds2-brand-core-blue-600: #044369; --cds2-brand-core-blue-700: #032836; --cds2-brand-core-blue-800: #021a35; --cds2-brand-core-gray-100: #d6dade; --cds2-brand-core-gray-200: #c7cdd2; --cds2-brand-core-gray-25: #f5f5f5; --cds2-brand-core-gray-300: #73808f; --cds2-brand-core-gray-400: #3b4e63; --cds2-brand-core-gray-5: #fcfaf8; --cds2-brand-core-gray-50: #e6e7e9; --cds2-brand-core-gray-500: #020e1b; --cds2-brand-core-teal-100: #99edeb; --cds2-brand-core-teal-200: #0ff; --cds2-brand-core-teal-25: #ecfbfb; --cds2-brand-core-teal-300: #0cc; --cds2-brand-core-teal-400: #008080; --cds2-brand-core-teal-50: #cdf5f5; --cds2-brand-core-teal-500: #0a4e5b; --cds2-brand-core-teal-600: #083b44; --cds2-brand-core-teal-700: #002432; --cds2-brand-fail-100: #ffdee1; --cds2-brand-fail-200: #ff8992; --cds2-brand-fail-300: #ff3442; --cds2-brand-fail-400: #a00729; --cds2-brand-fail-500: #400d10; --cds2-brand-pass-100: #9dffbd; --cds2-brand-pass-200: #0f5; --cds2-brand-pass-300: #05a758; --cds2-brand-pass-400: #0a4e5b; --cds2-brand-pass-50: #ebfff1; --cds2-brand-pass-500: #002432; --cds2-brand-warn-100: #ffcf00; --cds2-brand-warn-200: #ffad00; --cds2-brand-warn-25: #fff7d5; --cds2-brand-warn-300: #ff8b00; --cds2-brand-warn-400: #a04c08; --cds2-brand-warn-50: #ffe36b; --cds2-brand-warn-500: #400d10; --cds2-breakpoint-md: 600px; --cds2-color-accent-1: var(--cds2-core-color-blue-1); --cds2-color-accent-10: var(--cds2-core-color-blue-10); --cds2-color-accent-11: var(--cds2-core-color-blue-11); --cds2-color-accent-12: var(--cds2-core-color-blue-12); --cds2-color-accent-2: var(--cds2-core-color-blue-2); --cds2-color-accent-3: var(--cds2-core-color-blue-3); --cds2-color-accent-4: var(--cds2-core-color-blue-4); --cds2-color-accent-5: var(--cds2-core-color-blue-5); --cds2-color-accent-6: var(--cds2-core-color-blue-6); --cds2-color-accent-7: var(--cds2-core-color-blue-7); --cds2-color-accent-8: var(--cds2-core-color-blue-8); --cds2-color-accent-9: var(--cds2-core-color-blue-9); --cds2-color-accent-a1: var(--cds2-core-color-blue-a1); --cds2-color-accent-a10: var(--cds2-core-color-blue-a10); --cds2-color-accent-a11: var(--cds2-core-color-blue-a11); --cds2-color-accent-a12: var(--cds2-core-color-blue-a12); --cds2-color-accent-a2: var(--cds2-core-color-blue-a2); --cds2-color-accent-a3: var(--cds2-core-color-blue-a3); --cds2-color-accent-a4: var(--cds2-core-color-blue-a4); --cds2-color-accent-a5: var(--cds2-core-color-blue-a5); --cds2-color-accent-a6: var(--cds2-core-color-blue-a6); --cds2-color-accent-a7: var(--cds2-core-color-blue-a7); --cds2-color-accent-a8: var(--cds2-core-color-blue-a8); --cds2-color-accent-a9: var(--cds2-core-color-blue-a9); --cds2-color-accent-contrast: var(--cds2-core-color-blue-contrast); --cds2-color-accent-indicator: var(--cds2-core-color-blue-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-accent-surface: var(--cds2-core-color-blue-surface); /** Surface color, used by certain component variants. */ --cds2-color-accent-track: var(--cds2-core-color-blue-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-background-accent-default: var(--cds2-color-accent-3); --cds2-color-background-accent-hover: var(--cds2-color-accent-4); --cds2-color-background-accent-indicator: var(--cds2-color-accent-indicator); --cds2-color-background-accent-selected: var(--cds2-color-accent-5); --cds2-color-background-accent-solid-active: #007de8; /** This value was derived using filter definitions. */ --cds2-color-background-accent-solid-default: var(--cds2-color-accent-9); --cds2-color-background-accent-solid-hover: var(--cds2-color-accent-10); --cds2-color-background-accent-subtle: var(--cds2-color-accent-2); --cds2-color-background-accent-surface: var(--cds2-color-accent-surface); --cds2-color-background-accent-track: var(--cds2-color-accent-track); --cds2-color-background-application: #ffffff; /** Background color for the application; used for the main content area of the application. Used in some cases to create the appearance of transparency. */ --cds2-color-background-brand-default: var(--cds2-color-brand-3); /** Default background color for UI elements. */ --cds2-color-background-brand-hover: var(--cds2-color-brand-4); /** Background color for hover states. */ --cds2-color-background-brand-indicator: var(--cds2-color-neutral-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-brand-selected: var(--cds2-color-neutral-5); /** Background color for active and selected states. */ --cds2-color-background-brand-solid-active: #757882; /** This value was derived using filter definitions. */ --cds2-color-background-brand-solid-default: var(--cds2-color-brand-9); /** Solid background color for UI elements. */ --cds2-color-background-brand-solid-hover: var(--cds2-color-brand-10); /** Solid background color for hover states. */ --cds2-color-background-brand-subtle: var(--cds2-color-brand-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-brand-surface: var(--cds2-color-neutral-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-brand-track: var(--cds2-color-neutral-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-danger-default: var(--cds2-color-danger-3); /** Default background color for UI elements. */ --cds2-color-background-danger-hover: var(--cds2-color-danger-4); /** Background color for hover states. */ --cds2-color-background-danger-indicator: var(--cds2-color-danger-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-danger-selected: var(--cds2-color-danger-5); /** Background color for active and selected states. */ --cds2-color-background-danger-solid-active: #d33236; /** This value was derived using filter definitions. */ --cds2-color-background-danger-solid-default: var(--cds2-color-danger-9); /** Solid background color for UI elements. */ --cds2-color-background-danger-solid-hover: var(--cds2-color-danger-10); /** Solid background color for hover states. */ --cds2-color-background-danger-subtle: var(--cds2-color-danger-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-danger-surface: var(--cds2-color-danger-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-danger-track: var(--cds2-color-danger-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-disabled: var(--cds2-color-neutral-3); /** Background color for disabled elements; used to indicate that an element is temporarily not interactive. */ --cds2-color-background-highlight-default: var(--cds2-color-highlight-3); /** Default background color for UI elements. */ --cds2-color-background-highlight-hover: var(--cds2-color-highlight-4); /** Background color for hover states. */ --cds2-color-background-highlight-indicator: var(--cds2-color-highlight-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-highlight-selected: var(--cds2-color-highlight-5); /** Background color for active and selected states. */ --cds2-color-background-highlight-solid-active: #757882; /** This value was derived using filter definitions. */ --cds2-color-background-highlight-solid-default: var(--cds2-color-highlight-9); /** Solid background color for UI elements. */ --cds2-color-background-highlight-solid-hover: var(--cds2-color-highlight-10); /** Solid background color for hover states. */ --cds2-color-background-highlight-subtle: var(--cds2-color-highlight-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-highlight-surface: var(--cds2-color-highlight-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-highlight-track: var(--cds2-color-highlight-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-info-default: var(--cds2-color-info-3); /** Default background color for UI elements. */ --cds2-color-background-info-hover: var(--cds2-color-info-4); /** Background color for hover states. */ --cds2-color-background-info-indicator: var(--cds2-color-info-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-info-selected: var(--cds2-color-info-5); /** Background color for active and selected states. */ --cds2-color-background-info-solid-active: #007de8; /** This value was derived using filter definitions. */ --cds2-color-background-info-solid-default: var(--cds2-color-info-9); /** Solid background color for UI elements. */ --cds2-color-background-info-solid-hover: var(--cds2-color-info-10); /** Solid background color for hover states. */ --cds2-color-background-info-subtle: var(--cds2-color-info-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-info-surface: var(--cds2-color-info-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-info-track: var(--cds2-color-info-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-neutral-default: var(--cds2-color-neutral-3); /** Default background color for UI elements. */ --cds2-color-background-neutral-hover: var(--cds2-color-neutral-4); /** Background color for hover states. */ --cds2-color-background-neutral-indicator: var(--cds2-color-neutral-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-neutral-selected: var(--cds2-color-neutral-5); /** Background color for active and selected states. */ --cds2-color-background-neutral-solid-active: #757882; /** This value was derived using filter definitions. */ --cds2-color-background-neutral-solid-default: var(--cds2-color-neutral-9); /** Solid background color for UI elements. */ --cds2-color-background-neutral-solid-hover: var(--cds2-color-neutral-10); /** Solid background color for hover states. */ --cds2-color-background-neutral-subtle: var(--cds2-color-neutral-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-neutral-surface: var(--cds2-color-neutral-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-neutral-track: var(--cds2-color-neutral-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-panel-solid: #fff; /** Background color for panels, such as cards and dialogs. */ --cds2-color-background-panel-translucent: #ffffffb3; /** Background color for panels, such as cards and dialogs; creates a semi-transparent overlay on top of the background. */ --cds2-color-background-scrim: var(--cds2-color-neutral-a6); /** Background color for scrims; used to create a semi-transparent overlay on top of the background. */ --cds2-color-background-success-default: var(--cds2-color-success-3); /** Default background color for UI elements. */ --cds2-color-background-success-hover: var(--cds2-color-success-4); /** Background color for hover states. */ --cds2-color-background-success-indicator: var(--cds2-color-success-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-success-selected: var(--cds2-color-success-5); /** Background color for active and selected states. */ --cds2-color-background-success-solid-active: #22935e; /** This value was derived using filter definitions. */ --cds2-color-background-success-solid-default: var(--cds2-color-success-9); /** Solid background color for UI elements. */ --cds2-color-background-success-solid-hover: var(--cds2-color-success-10); /** Solid background color for hover states. */ --cds2-color-background-success-subtle: var(--cds2-color-success-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-success-surface: var(--cds2-color-success-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-success-track: var(--cds2-color-success-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-surface: #ffffffd9; /** Background color used by certain `variant='surface'` components; namely form components. */ --cds2-color-background-warning-default: var(--cds2-color-warning-3); /** Default background color for UI elements. */ --cds2-color-background-warning-hover: var(--cds2-color-warning-4); /** Background color for hover states. */ --cds2-color-background-warning-indicator: var(--cds2-color-warning-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-warning-selected: var(--cds2-color-warning-5); /** Background color for active and selected states. */ --cds2-color-background-warning-solid-active: #f5af0b; /** This value was derived using filter definitions. */ --cds2-color-background-warning-solid-default: var(--cds2-color-warning-9); /** Solid background color for UI elements. */ --cds2-color-background-warning-solid-hover: var(--cds2-color-warning-10); /** Solid background color for hover states. */ --cds2-color-background-warning-subtle: var(--cds2-color-warning-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-warning-surface: var(--cds2-color-warning-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-warning-track: var(--cds2-color-warning-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-border-accent-default: var(--cds2-color-accent-7); /** Default border color for interactive elements. */ --cds2-color-border-accent-hover: var(--cds2-color-accent-8); --cds2-color-border-accent-strong: var(--cds2-color-accent-8); /** Hovered UI element border color. */ --cds2-color-border-accent-subtle: var(--cds2-color-accent-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-brand-default: var(--cds2-color-brand-7); /** Default border color for interactive elements. */ --cds2-color-border-brand-strong: var(--cds2-color-brand-8); /** Hovered UI element border color. */ --cds2-color-border-brand-subtle: var(--cds2-color-brand-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-danger-default: var(--cds2-color-danger-7); /** Default border color for interactive elements. */ --cds2-color-border-danger-hover: var(--cds2-color-danger-8); --cds2-color-border-danger-strong: var(--cds2-color-danger-8); /** Hovered UI element border color. */ --cds2-color-border-danger-subtle: var(--cds2-color-danger-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-disabled: var(--cds2-color-neutral-6); /** Border color for disabled elements; used to indicate that an element is temporarily not interactive. */ --cds2-color-border-focus: var(--cds2-color-accent-8); /** Border color for focus states on interactive elements. */ --cds2-color-border-highlight-default: var(--cds2-color-highlight-7); /** Default border color for interactive elements. */ --cds2-color-border-highlight-strong: var(--cds2-color-highlight-8); /** Hovered UI element border color. */ --cds2-color-border-highlight-subtle: var(--cds2-color-highlight-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-info-default: var(--cds2-color-info-7); /** Default border color for interactive elements. */ --cds2-color-border-info-strong: var(--cds2-color-info-8); /** Hovered UI element border color. */ --cds2-color-border-info-subtle: var(--cds2-color-info-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-neutral-default: var(--cds2-color-neutral-7); /** Default border color for interactive elements. */ --cds2-color-border-neutral-strong: var(--cds2-color-neutral-8); /** Hovered UI element border color. */ --cds2-color-border-neutral-subtle: var(--cds2-color-neutral-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-success-default: var(--cds2-color-success-7); /** Default border color for interactive elements. */ --cds2-color-border-success-strong: var(--cds2-color-success-8); /** Hovered UI element border color. */ --cds2-color-border-success-subtle: var(--cds2-color-success-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-warning-default: var(--cds2-color-warning-7); /** Default border color for interactive elements. */ --cds2-color-border-warning-strong: var(--cds2-color-warning-8); /** Hovered UI element border color. */ --cds2-color-border-warning-subtle: var(--cds2-color-warning-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-brand-1: var(--cds2-core-color-cribl-teal-1); --cds2-color-brand-10: var(--cds2-core-color-cribl-teal-10); --cds2-color-brand-11: var(--cds2-core-color-cribl-teal-11); --cds2-color-brand-12: var(--cds2-core-color-cribl-teal-12); --cds2-color-brand-2: var(--cds2-core-color-cribl-teal-2); --cds2-color-brand-3: var(--cds2-core-color-cribl-teal-3); --cds2-color-brand-4: var(--cds2-core-color-cribl-teal-4); --cds2-color-brand-5: var(--cds2-core-color-cribl-teal-5); --cds2-color-brand-6: var(--cds2-core-color-cribl-teal-6); --cds2-color-brand-7: var(--cds2-core-color-cribl-teal-7); --cds2-color-brand-8: var(--cds2-core-color-cribl-teal-8); --cds2-color-brand-9: var(--cds2-core-color-cribl-teal-9); --cds2-color-brand-a1: var(--cds2-core-color-cribl-teal-a1); --cds2-color-brand-a10: var(--cds2-core-color-cribl-teal-a10); --cds2-color-brand-a11: var(--cds2-core-color-cribl-teal-a11); --cds2-color-brand-a12: var(--cds2-core-color-cribl-teal-a12); --cds2-color-brand-a2: var(--cds2-core-color-cribl-teal-a2); --cds2-color-brand-a3: var(--cds2-core-color-cribl-teal-a3); --cds2-color-brand-a4: var(--cds2-core-color-cribl-teal-a4); --cds2-color-brand-a5: var(--cds2-core-color-cribl-teal-a5); --cds2-color-brand-a6: var(--cds2-core-color-cribl-teal-a6); --cds2-color-brand-a7: var(--cds2-core-color-cribl-teal-a7); --cds2-color-brand-a8: var(--cds2-core-color-cribl-teal-a8); --cds2-color-brand-a9: var(--cds2-core-color-cribl-teal-a9); --cds2-color-brand-contrast: var(--cds2-core-color-cribl-teal-contrast); --cds2-color-brand-indicator: var(--cds2-core-color-cribl-teal-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-brand-surface: var(--cds2-core-color-cribl-teal-surface); /** Surface color, used by certain component variants. */ --cds2-color-brand-track: var(--cds2-core-color-cribl-teal-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-danger-1: var(--cds2-core-color-red-1); --cds2-color-danger-10: var(--cds2-core-color-red-10); --cds2-color-danger-11: var(--cds2-core-color-red-11); --cds2-color-danger-12: var(--cds2-core-color-red-12); --cds2-color-danger-2: var(--cds2-core-color-red-2); --cds2-color-danger-3: var(--cds2-core-color-red-3); --cds2-color-danger-4: var(--cds2-core-color-red-4); --cds2-color-danger-5: var(--cds2-core-color-red-5); --cds2-color-danger-6: var(--cds2-core-color-red-6); --cds2-color-danger-7: var(--cds2-core-color-red-7); --cds2-color-danger-8: var(--cds2-core-color-red-8); --cds2-color-danger-9: var(--cds2-core-color-red-9); --cds2-color-danger-a1: var(--cds2-core-color-red-a1); --cds2-color-danger-a10: var(--cds2-core-color-red-a10); --cds2-color-danger-a11: var(--cds2-core-color-red-a11); --cds2-color-danger-a12: var(--cds2-core-color-red-a12); --cds2-color-danger-a2: var(--cds2-core-color-red-a2); --cds2-color-danger-a3: var(--cds2-core-color-red-a3); --cds2-color-danger-a4: var(--cds2-core-color-red-a4); --cds2-color-danger-a5: var(--cds2-core-color-red-a5); --cds2-color-danger-a6: var(--cds2-core-color-red-a6); --cds2-color-danger-a7: var(--cds2-core-color-red-a7); --cds2-color-danger-a8: var(--cds2-core-color-red-a8); --cds2-color-danger-a9: var(--cds2-core-color-red-a9); --cds2-color-danger-contrast: var(--cds2-core-color-red-contrast); --cds2-color-danger-indicator: var(--cds2-core-color-red-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-danger-surface: var(--cds2-core-color-red-surface); /** Surface color, used by certain component variants. */ --cds2-color-danger-track: var(--cds2-core-color-red-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-foreground-accent-contrast: var(--cds2-color-accent-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-accent-default: var(--cds2-color-accent-11); /** Default foreground color for elements. */ --cds2-color-foreground-accent-strong: var(--cds2-color-accent-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-brand-contrast: var(--cds2-color-brand-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-brand-default: var(--cds2-color-brand-11); /** Default foreground color for elements. */ --cds2-color-foreground-brand-strong: var(--cds2-color-brand-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-danger-contrast: var(--cds2-color-danger-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-danger-default: var(--cds2-color-danger-11); /** Default foreground color for elements. */ --cds2-color-foreground-danger-strong: var(--cds2-color-danger-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-default: var(--cds2-color-neutral-12); /** Primary foreground color for body text. */ --cds2-color-foreground-disabled: var(--cds2-color-neutral-11); /** Foreground color for disabled body text. */ --cds2-color-foreground-highlight-contrast: var(--cds2-color-highlight-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-highlight-default: var(--cds2-color-highlight-11); /** Default foreground color for elements. */ --cds2-color-foreground-highlight-strong: var(--cds2-color-highlight-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-info-contrast: var(--cds2-color-info-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-info-default: var(--cds2-color-info-11); /** Default foreground color for elements. */ --cds2-color-foreground-info-strong: var(--cds2-color-info-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-link: var(--cds2-color-foreground-accent-default); /** Color for hyperlinked text. */ --cds2-color-foreground-neutral-contrast: var(--cds2-color-neutral-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-neutral-default: var(--cds2-color-neutral-11); /** Default foreground color for elements. */ --cds2-color-foreground-neutral-strong: var(--cds2-color-neutral-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-on-disabled: var(--cds2-color-neutral-8); /** Foreground color for text shown when on disabled background. */ --cds2-color-foreground-placeholder: var(--cds2-color-neutral-10); /** Foreground color for form input placeholder text. */ --cds2-color-foreground-subtle: var(--cds2-color-neutral-11); /** Subtle foreground color for body text. */ --cds2-color-foreground-success-contrast: var(--cds2-color-success-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-success-default: var(--cds2-color-success-11); /** Default foreground color for elements. */ --cds2-color-foreground-success-strong: var(--cds2-color-success-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-warning-contrast: var(--cds2-color-warning-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-warning-default: var(--cds2-color-warning-11); /** Default foreground color for elements. */ --cds2-color-foreground-warning-strong: var(--cds2-color-warning-12); /** High contrast foreground color for elements. */ --cds2-color-highlight-1: var(--cds2-core-color-purple-1); --cds2-color-highlight-10: var(--cds2-core-color-purple-10); --cds2-color-highlight-11: var(--cds2-core-color-purple-11); --cds2-color-highlight-12: var(--cds2-core-color-purple-12); --cds2-color-highlight-2: var(--cds2-core-color-purple-2); --cds2-color-highlight-3: var(--cds2-core-color-purple-3); --cds2-color-highlight-4: var(--cds2-core-color-purple-4); --cds2-color-highlight-5: var(--cds2-core-color-purple-5); --cds2-color-highlight-6: var(--cds2-core-color-purple-6); --cds2-color-highlight-7: var(--cds2-core-color-purple-7); --cds2-color-highlight-8: var(--cds2-core-color-purple-8); --cds2-color-highlight-9: var(--cds2-core-color-purple-9); --cds2-color-highlight-a1: var(--cds2-core-color-purple-a1); --cds2-color-highlight-a10: var(--cds2-core-color-purple-a10); --cds2-color-highlight-a11: var(--cds2-core-color-purple-a11); --cds2-color-highlight-a12: var(--cds2-core-color-purple-a12); --cds2-color-highlight-a2: var(--cds2-core-color-purple-a2); --cds2-color-highlight-a3: var(--cds2-core-color-purple-a3); --cds2-color-highlight-a4: var(--cds2-core-color-purple-a4); --cds2-color-highlight-a5: var(--cds2-core-color-purple-a5); --cds2-color-highlight-a6: var(--cds2-core-color-purple-a6); --cds2-color-highlight-a7: var(--cds2-core-color-purple-a7); --cds2-color-highlight-a8: var(--cds2-core-color-purple-a8); --cds2-color-highlight-a9: var(--cds2-core-color-purple-a9); --cds2-color-highlight-contrast: var(--cds2-core-color-purple-contrast); --cds2-color-highlight-indicator: var(--cds2-core-color-purple-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-highlight-surface: var(--cds2-core-color-purple-surface); /** Surface color, used by certain component variants. */ --cds2-color-highlight-track: var(--cds2-core-color-purple-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-info-1: var(--cds2-core-color-blue-1); --cds2-color-info-10: var(--cds2-core-color-blue-10); --cds2-color-info-11: var(--cds2-core-color-blue-11); --cds2-color-info-12: var(--cds2-core-color-blue-12); --cds2-color-info-2: var(--cds2-core-color-blue-2); --cds2-color-info-3: var(--cds2-core-color-blue-3); --cds2-color-info-4: var(--cds2-core-color-blue-4); --cds2-color-info-5: var(--cds2-core-color-blue-5); --cds2-color-info-6: var(--cds2-core-color-blue-6); --cds2-color-info-7: var(--cds2-core-color-blue-7); --cds2-color-info-8: var(--cds2-core-color-blue-8); --cds2-color-info-9: var(--cds2-core-color-blue-9); --cds2-color-info-a1: var(--cds2-core-color-blue-a1); --cds2-color-info-a10: var(--cds2-core-color-blue-a10); --cds2-color-info-a11: var(--cds2-core-color-blue-a11); --cds2-color-info-a12: var(--cds2-core-color-blue-a12); --cds2-color-info-a2: var(--cds2-core-color-blue-a2); --cds2-color-info-a3: var(--cds2-core-color-blue-a3); --cds2-color-info-a4: var(--cds2-core-color-blue-a4); --cds2-color-info-a5: var(--cds2-core-color-blue-a5); --cds2-color-info-a6: var(--cds2-core-color-blue-a6); --cds2-color-info-a7: var(--cds2-core-color-blue-a7); --cds2-color-info-a8: var(--cds2-core-color-blue-a8); --cds2-color-info-a9: var(--cds2-core-color-blue-a9); --cds2-color-info-contrast: var(--cds2-core-color-blue-contrast); --cds2-color-info-indicator: var(--cds2-core-color-blue-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-info-surface: var(--cds2-core-color-blue-surface); /** Surface color, used by certain component variants. */ --cds2-color-info-track: var(--cds2-core-color-blue-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-neutral-1: var(--cds2-core-color-slate-1); --cds2-color-neutral-10: var(--cds2-core-color-slate-10); --cds2-color-neutral-11: var(--cds2-core-color-slate-11); --cds2-color-neutral-12: var(--cds2-core-color-slate-12); --cds2-color-neutral-2: var(--cds2-core-color-slate-2); --cds2-color-neutral-3: var(--cds2-core-color-slate-3); --cds2-color-neutral-4: var(--cds2-core-color-slate-4); --cds2-color-neutral-5: var(--cds2-core-color-slate-5); --cds2-color-neutral-6: var(--cds2-core-color-slate-6); --cds2-color-neutral-7: var(--cds2-core-color-slate-7); --cds2-color-neutral-8: var(--cds2-core-color-slate-8); --cds2-color-neutral-9: var(--cds2-core-color-slate-9); --cds2-color-neutral-a1: var(--cds2-core-color-slate-a1); --cds2-color-neutral-a10: var(--cds2-core-color-slate-a10); --cds2-color-neutral-a11: var(--cds2-core-color-slate-a11); --cds2-color-neutral-a12: var(--cds2-core-color-slate-a12); --cds2-color-neutral-a2: var(--cds2-core-color-slate-a2); --cds2-color-neutral-a3: var(--cds2-core-color-slate-a3); --cds2-color-neutral-a4: var(--cds2-core-color-slate-a4); --cds2-color-neutral-a5: var(--cds2-core-color-slate-a5); --cds2-color-neutral-a6: var(--cds2-core-color-slate-a6); --cds2-color-neutral-a7: var(--cds2-core-color-slate-a7); --cds2-color-neutral-a8: var(--cds2-core-color-slate-a8); --cds2-color-neutral-a9: var(--cds2-core-color-slate-a9); --cds2-color-neutral-contrast: var(--cds2-core-color-slate-contrast); --cds2-color-neutral-indicator: var(--cds2-core-color-slate-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-neutral-surface: var(--cds2-core-color-slate-surface); /** Surface color, used by certain component variants. */ --cds2-color-neutral-track: var(--cds2-core-color-slate-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-success-1: var(--cds2-core-color-green-1); --cds2-color-success-10: var(--cds2-core-color-green-10); --cds2-color-success-11: var(--cds2-core-color-green-11); --cds2-color-success-12: var(--cds2-core-color-green-12); --cds2-color-success-2: var(--cds2-core-color-green-2); --cds2-color-success-3: var(--cds2-core-color-green-3); --cds2-color-success-4: var(--cds2-core-color-green-4); --cds2-color-success-5: var(--cds2-core-color-green-5); --cds2-color-success-6: var(--cds2-core-color-green-6); --cds2-color-success-7: var(--cds2-core-color-green-7); --cds2-color-success-8: var(--cds2-core-color-green-8); --cds2-color-success-9: var(--cds2-core-color-green-9); --cds2-color-success-a1: var(--cds2-core-color-green-a1); --cds2-color-success-a10: var(--cds2-core-color-green-a10); --cds2-color-success-a11: var(--cds2-core-color-green-a11); --cds2-color-success-a12: var(--cds2-core-color-green-a12); --cds2-color-success-a2: var(--cds2-core-color-green-a2); --cds2-color-success-a3: var(--cds2-core-color-green-a3); --cds2-color-success-a4: var(--cds2-core-color-green-a4); --cds2-color-success-a5: var(--cds2-core-color-green-a5); --cds2-color-success-a6: var(--cds2-core-color-green-a6); --cds2-color-success-a7: var(--cds2-core-color-green-a7); --cds2-color-success-a8: var(--cds2-core-color-green-a8); --cds2-color-success-a9: var(--cds2-core-color-green-a9); --cds2-color-success-contrast: var(--cds2-core-color-green-contrast); --cds2-color-success-indicator: var(--cds2-core-color-green-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-success-surface: var(--cds2-core-color-green-surface); /** Surface color, used by certain component variants. */ --cds2-color-success-track: var(--cds2-core-color-green-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-warning-1: var(--cds2-core-color-amber-1); --cds2-color-warning-10: var(--cds2-core-color-amber-10); --cds2-color-warning-11: var(--cds2-core-color-amber-11); --cds2-color-warning-12: var(--cds2-core-color-amber-12); --cds2-color-warning-2: var(--cds2-core-color-amber-2); --cds2-color-warning-3: var(--cds2-core-color-amber-3); --cds2-color-warning-4: var(--cds2-core-color-amber-4); --cds2-color-warning-5: var(--cds2-core-color-amber-5); --cds2-color-warning-6: var(--cds2-core-color-amber-6); --cds2-color-warning-7: var(--cds2-core-color-amber-7); --cds2-color-warning-8: var(--cds2-core-color-amber-8); --cds2-color-warning-9: var(--cds2-core-color-amber-9); --cds2-color-warning-a1: var(--cds2-core-color-amber-a1); --cds2-color-warning-a10: var(--cds2-core-color-amber-a10); --cds2-color-warning-a11: var(--cds2-core-color-amber-a11); --cds2-color-warning-a12: var(--cds2-core-color-amber-a12); --cds2-color-warning-a2: var(--cds2-core-color-amber-a2); --cds2-color-warning-a3: var(--cds2-core-color-amber-a3); --cds2-color-warning-a4: var(--cds2-core-color-amber-a4); --cds2-color-warning-a5: var(--cds2-core-color-amber-a5); --cds2-color-warning-a6: var(--cds2-core-color-amber-a6); --cds2-color-warning-a7: var(--cds2-core-color-amber-a7); --cds2-color-warning-a8: var(--cds2-core-color-amber-a8); --cds2-color-warning-a9: var(--cds2-core-color-amber-a9); --cds2-color-warning-contrast: var(--cds2-core-color-amber-contrast); --cds2-color-warning-indicator: var(--cds2-core-color-amber-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-warning-surface: var(--cds2-core-color-amber-surface); /** Surface color, used by certain component variants. */ --cds2-color-warning-track: var(--cds2-core-color-amber-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-amber-1: #fefdfb; --cds2-core-color-amber-10: #ffba18; --cds2-core-color-amber-11: #ad6200; --cds2-core-color-amber-12: #4f3422; --cds2-core-color-amber-2: #fefbe9; --cds2-core-color-amber-3: #fff7c2; --cds2-core-color-amber-4: #ffee9c; --cds2-core-color-amber-5: #fbe577; --cds2-core-color-amber-6: #f4d673; --cds2-core-color-amber-7: #e9c163; --cds2-core-color-amber-8: #e2a336; --cds2-core-color-amber-9: #ffc100; --cds2-core-color-amber-a1: #cc800004; --cds2-core-color-amber-a10: #fda100b9; --cds2-core-color-amber-a11: #b65f00; --cds2-core-color-amber-a12: #391300dd; --cds2-core-color-amber-a2: #eacc0014; --cds2-core-color-amber-a3: #fada0038; --cds2-core-color-amber-a4: #fdd00059; --cds2-core-color-amber-a5: #f3ca0079; --cds2-core-color-amber-a6: #e7ac007e; --cds2-core-color-amber-a7: #d78f008e; --cds2-core-color-amber-a8: #d57c00b2; --cds2-core-color-amber-a9: #ffac00bd; --cds2-core-color-amber-contrast: #21201c; --cds2-core-color-amber-indicator: var(--cds2-core-color-amber-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-amber-surface: #fefae4cc; /** Surface color, used by certain component variants. */ --cds2-core-color-amber-track: var(--cds2-core-color-amber-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-black-a1: #0000000d; --cds2-core-color-black-a10: #000c; --cds2-core-color-black-a11: #000000e6; --cds2-core-color-black-a12: #000000f2; --cds2-core-color-black-a2: #0000001a; --cds2-core-color-black-a3: #00000026; --cds2-core-color-black-a4: #0003; --cds2-core-color-black-a5: #0000004d; --cds2-core-color-black-a6: #0006; --cds2-core-color-black-a7: #00000080; --cds2-core-color-black-a8: #0009; --cds2-core-color-black-a9: #000000b3; --cds2-core-color-black-contrast: #fff; --cds2-core-color-blue-1: #fbfdff; --cds2-core-color-blue-10: #0687f0; --cds2-core-color-blue-11: #0072de; --cds2-core-color-blue-12: #113264; --cds2-core-color-blue-2: #f4faff; --cds2-core-color-blue-3: #e6f4fe; --cds2-core-color-blue-4: #d5eeff; --cds2-core-color-blue-5: #c2e5ff; --cds2-core-color-blue-6: #acd8fc; --cds2-core-color-blue-7: #8ec8f6; --cds2-core-color-blue-8: #5eb1ef; --cds2-core-color-blue-9: #0190ff; --cds2-core-color-blue-a1: #0087ff04; --cds2-core-color-blue-a10: #0062e9c3; --cds2-core-color-blue-a11: #0070cdf2; --cds2-core-color-blue-a12: #00245dee; --cds2-core-color-blue-a2: #0086e80a; --cds2-core-color-blue-a3: #0084ea16; --cds2-core-color-blue-a4: #008fff25; --cds2-core-color-blue-a5: #0084fc36; --cds2-core-color-blue-a6: #0079ed4a; --cds2-core-color-blue-a7: #0071df64; --cds2-core-color-blue-a8: #0070dc8c; --cds2-core-color-blue-a9: #006cfbc0; --cds2-core-color-blue-contrast: #fff; --cds2-core-color-blue-indicator: var(--cds2-core-color-blue-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-blue-surface: #f1f9ffcc; /** Surface color, used by certain component variants. */ --cds2-core-color-blue-track: var(--cds2-core-color-blue-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-bronze-1: #fdfcfc; --cds2-core-color-bronze-10: #957468; --cds2-core-color-bronze-11: #7d5e54; --cds2-core-color-bronze-12: #43302b; --cds2-core-color-bronze-2: #fdf7f5; --cds2-core-color-bronze-3: #f6edea; --cds2-core-color-bronze-4: #efe4df; --cds2-core-color-bronze-5: #e7d9d3; --cds2-core-color-bronze-6: #dfcdc5; --cds2-core-color-bronze-7: #d3bcb3; --cds2-core-color-bronze-8: #c2a499; --cds2-core-color-bronze-9: #a18072; --cds2-core-color-bronze-a1: #62000003; --cds2-core-color-bronze-a10: #47110095; --cds2-core-color-bronze-a11: #430a00ab; --cds2-core-color-bronze-a12: #200500d4; --cds2-core-color-bronze-a2: #c529000a; --cds2-core-color-bronze-a3: #852d0015; --cds2-core-color-bronze-a4: #761a001f; --cds2-core-color-bronze-a5: #6f1f002b; --cds2-core-color-bronze-a6: #6c190039; --cds2-core-color-bronze-a7: #6615004b; --cds2-core-color-bronze-a8: #5f140064; --cds2-core-color-bronze-a9: #5113008b; --cds2-core-color-bronze-contrast: #fff; --cds2-core-color-bronze-indicator: var(--cds2-core-color-bronze-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-bronze-surface: #fdf5f3cc; /** Surface color, used by certain component variants. */ --cds2-core-color-bronze-track: var(--cds2-core-color-bronze-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-brown-1: #fefdfc; --cds2-core-color-brown-10: #a07553; --cds2-core-color-brown-11: #815e46; --cds2-core-color-brown-12: #3e332e; --cds2-core-color-brown-2: #fcf9f5; --cds2-core-color-brown-3: #f6eee7; --cds2-core-color-brown-4: #f0e4d9; --cds2-core-color-brown-5: #ebdaca; --cds2-core-color-brown-6: #e4cdb8; --cds2-core-color-brown-7: #dcbc9f; --cds2-core-color-brown-8: #cea37e; --cds2-core-color-brown-9: #ad7f58; --cds2-core-color-brown-a1: #b9530003; --cds2-core-color-brown-a10: #6b2c00a7; --cds2-core-color-brown-a11: #591d00b9; --cds2-core-color-brown-a12: #160500d1; --cds2-core-color-brown-a2: #b9530009; --cds2-core-color-brown-a3: #9c4c0017; --cds2-core-color-brown-a4: #95490025; --cds2-core-color-brown-a5: #9a450034; --cds2-core-color-brown-a6: #97460045; --cds2-core-color-brown-a7: #9944005c; --cds2-core-color-brown-a8: #9741007c; --cds2-core-color-brown-a9: #7b3400a1; --cds2-core-color-brown-contrast: #fff; --cds2-core-color-brown-indicator: var(--cds2-core-color-brown-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-brown-surface: #fbf8f4cc; /** Surface color, used by certain component variants. */ --cds2-core-color-brown-track: var(--cds2-core-color-brown-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-cribl-teal-1: #f8fefe; --cds2-core-color-cribl-teal-10: #00c1bf; --cds2-core-color-cribl-teal-11: #008280; --cds2-core-color-cribl-teal-12: #004040; --cds2-core-color-cribl-teal-2: #edfbfb; --cds2-core-color-cribl-teal-3: #d1faf9; --cds2-core-color-cribl-teal-4: #b3f6f4; --cds2-core-color-cribl-teal-5: #94efed; --cds2-core-color-cribl-teal-6: #70e5e2; --cds2-core-color-cribl-teal-7: #27d6d4; --cds2-core-color-cribl-teal-8: #00bfbd; --cds2-core-color-cribl-teal-9: #00ccc9; --cds2-core-color-cribl-teal-a1: #00cdca05; --cds2-core-color-cribl-teal-a10: #009d9ea8; --cds2-core-color-cribl-teal-a11: #005c5cc7; --cds2-core-color-cribl-teal-a12: #002c2be8; --cds2-core-color-cribl-teal-a2: #00b1af0d; --cds2-core-color-cribl-teal-a3: #00c8c620; --cds2-core-color-cribl-teal-a4: #00c5be34; --cds2-core-color-cribl-teal-a5: #00b8b647; --cds2-core-color-cribl-teal-a6: #00aba95e; --cds2-core-color-cribl-teal-a7: #00a19f7c; --cds2-core-color-cribl-teal-a8: #009a9ca9; --cds2-core-color-cribl-teal-a9: #00abaaa3; --cds2-core-color-cribl-teal-contrast: #032727; --cds2-core-color-cribl-teal-indicator: var(--cds2-core-color-cribl-teal-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-cribl-teal-surface: #eefafacc; /** Surface color, used by certain component variants. */ --cds2-core-color-cribl-teal-track: var(--cds2-core-color-cribl-teal-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-crimson-1: #fffcfd; --cds2-core-color-crimson-10: #df3478; --cds2-core-color-crimson-11: #cb1d63; --cds2-core-color-crimson-12: #621639; --cds2-core-color-crimson-2: #fef7f9; --cds2-core-color-crimson-3: #ffe9f0; --cds2-core-color-crimson-4: #fedce7; --cds2-core-color-crimson-5: #facedd; --cds2-core-color-crimson-6: #f3bed1; --cds2-core-color-crimson-7: #eaacc3; --cds2-core-color-crimson-8: #e094b2; --cds2-core-color-crimson-9: #e93d82; --cds2-core-color-crimson-a1: #bb005a03; --cds2-core-color-crimson-a10: #cb0045bb; --cds2-core-color-crimson-a11: #d3004fe2; --cds2-core-color-crimson-a12: #5c0026e9; --cds2-core-color-crimson-a2: #d1004208; --cds2-core-color-crimson-a3: #ec004a15; --cds2-core-color-crimson-a4: #e3004b22; --cds2-core-color-crimson-a5: #cf004530; --cds2-core-color-crimson-a6: #bc003e3e; --cds2-core-color-crimson-a7: #ac003f51; --cds2-core-color-crimson-a8: #a6004068; --cds2-core-color-crimson-a9: #d5004bb3; --cds2-core-color-crimson-contrast: #fff; --cds2-core-color-crimson-indicator: var(--cds2-core-color-crimson-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-crimson-surface: #fef5f8cc; /** Surface color, used by certain component variants. */ --cds2-core-color-crimson-track: var(--cds2-core-color-crimson-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-cyan-1: #fafdfe; --cds2-core-color-cyan-10: #0797b9; --cds2-core-color-cyan-11: #007ca3; --cds2-core-color-cyan-12: #0d3c48; --cds2-core-color-cyan-2: #f2fafb; --cds2-core-color-cyan-3: #def7f9; --cds2-core-color-cyan-4: #caf1f6; --cds2-core-color-cyan-5: #b5e9f0; --cds2-core-color-cyan-6: #9ddee7; --cds2-core-color-cyan-7: #7dcedc; --cds2-core-color-cyan-8: #3db9ce; --cds2-core-color-cyan-9: #01a2c7; --cds2-core-color-cyan-a1: #009dcb05; --cds2-core-color-cyan-a10: #00719bbc; --cds2-core-color-cyan-a11: #007591ef; --cds2-core-color-cyan-a12: #00333ff2; --cds2-core-color-cyan-a2: #008fa40b; --cds2-core-color-cyan-a3: #00b2c81d; --cds2-core-color-cyan-a4: #00aec52e; --cds2-core-color-cyan-a5: #00a0b93f; --cds2-core-color-cyan-a6: #0096b254; --cds2-core-color-cyan-a7: #008ba96f; --cds2-core-color-cyan-a8: #0089a99c; --cds2-core-color-cyan-a9: #007dacb7; --cds2-core-color-cyan-contrast: #fff; --cds2-core-color-cyan-indicator: var(--cds2-core-color-cyan-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-cyan-surface: #eff9facc; /** Surface color, used by certain component variants. */ --cds2-core-color-cyan-track: var(--cds2-core-color-cyan-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-gold-1: #fdfdfc; --cds2-core-color-gold-10: #8c795e; --cds2-core-color-gold-11: #71624b; --cds2-core-color-gold-12: #3b352b; --cds2-core-color-gold-2: #faf9f2; --cds2-core-color-gold-3: #f2f0e7; --cds2-core-color-gold-4: #eae6dc; --cds2-core-color-gold-5: #e1dccf; --cds2-core-color-gold-6: #d7d0bf; --cds2-core-color-gold-7: #cbc0aa; --cds2-core-color-gold-8: #b9a88d; --cds2-core-color-gold-9: #978365; --cds2-core-color-gold-a1: #59590003; --cds2-core-color-gold-a10: #4528009e; --cds2-core-color-gold-a11: #3a2000b4; --cds2-core-color-gold-a12: #140c00d4; --cds2-core-color-gold-a2: #9b82000c; --cds2-core-color-gold-a3: #685b0017; --cds2-core-color-gold-a4: #5e4b0022; --cds2-core-color-gold-a5: #5b47002f; --cds2-core-color-gold-a6: #5b42003e; --cds2-core-color-gold-a7: #5d3a0052; --cds2-core-color-gold-a8: #5d36006f; --cds2-core-color-gold-a9: #4e2c0096; --cds2-core-color-gold-contrast: #fff; --cds2-core-color-gold-indicator: var(--cds2-core-color-gold-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-gold-surface: #f9f8efcc; /** Surface color, used by certain component variants. */ --cds2-core-color-gold-track: var(--cds2-core-color-gold-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-grass-1: #fbfefb; --cds2-core-color-grass-10: #3e9a4f; --cds2-core-color-grass-11: #2a7e3b; --cds2-core-color-grass-12: #203c25; --cds2-core-color-grass-2: #f5fbf5; --cds2-core-color-grass-3: #e9f7e9; --cds2-core-color-grass-4: #daf0db; --cds2-core-color-grass-5: #c9e9ca; --cds2-core-color-grass-6: #b2deb5; --cds2-core-color-grass-7: #94ce9a; --cds2-core-color-grass-8: #65ba74; --cds2-core-color-grass-9: #46a758; --cds2-core-color-grass-a1: #00bf1104; --cds2-core-color-grass-a10: #006300a8; --cds2-core-color-grass-a11: #00650cd5; --cds2-core-color-grass-a12: #002103df; --cds2-core-color-grass-a2: #008f0009; --cds2-core-color-grass-a3: #00920015; --cds2-core-color-grass-a4: #008f0022; --cds2-core-color-grass-a5: #008b0032; --cds2-core-color-grass-a6: #00800046; --cds2-core-color-grass-a7: #007b0060; --cds2-core-color-grass-a8: #00770085; --cds2-core-color-grass-a9: #006f009f; --cds2-core-color-grass-contrast: #fff; --cds2-core-color-grass-indicator: var(--cds2-core-color-grass-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-grass-surface: #f3faf3cc; /** Surface color, used by certain component variants. */ --cds2-core-color-grass-track: var(--cds2-core-color-grass-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-gray-1: #fcfcfc; --cds2-core-color-gray-10: #838383; --cds2-core-color-gray-11: #646464; --cds2-core-color-gray-12: #202020; --cds2-core-color-gray-2: #f9f9f9; --cds2-core-color-gray-3: #efefef; --cds2-core-color-gray-4: #e8e8e8; --cds2-core-color-gray-5: #e0e0e0; --cds2-core-color-gray-6: #d8d8d8; --cds2-core-color-gray-7: #cecece; --cds2-core-color-gray-8: #bbb; --cds2-core-color-gray-9: #8d8d8d; --cds2-core-color-gray-a1: #00000003; --cds2-core-color-gray-a10: #0000007c; --cds2-core-color-gray-a11: #0000009b; --cds2-core-color-gray-a12: #000000df; --cds2-core-color-gray-a2: #00000006; --cds2-core-color-gray-a3: #00000010; --cds2-core-color-gray-a4: #00000017; --cds2-core-color-gray-a5: #0000001f; --cds2-core-color-gray-a6: #00000027; --cds2-core-color-gray-a7: #00000031; --cds2-core-color-gray-a8: #0004; --cds2-core-color-gray-a9: #00000072; --cds2-core-color-gray-contrast: #fff; --cds2-core-color-gray-indicator: var(--cds2-core-color-gray-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-gray-surface: #fffc; /** Surface color, used by certain component variants. */ --cds2-core-color-gray-track: var(--cds2-core-color-gray-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-green-1: #fbfefc; --cds2-core-color-green-10: #2b9a66; --cds2-core-color-green-11: #00824d; --cds2-core-color-green-12: #193b2d; --cds2-core-color-green-2: #f4fbf6; --cds2-core-color-green-3: #e6f6eb; --cds2-core-color-green-4: #d6f1df; --cds2-core-color-green-5: #c4e8d1; --cds2-core-color-green-6: #adddc0; --cds2-core-color-green-7: #8eceaa; --cds2-core-color-green-8: #5bb88b; --cds2-core-color-green-9: #30a46c; --cds2-core-color-green-a1: #00bf4704; --cds2-core-color-green-a10: #006a24b0; --cds2-core-color-green-a11: #00713ede; --cds2-core-color-green-a12: #002715e6; --cds2-core-color-green-a2: #00901d09; --cds2-core-color-green-a3: #00972416; --cds2-core-color-green-a4: #00952424; --cds2-core-color-green-a5: #00892634; --cds2-core-color-green-a6: #00842648; --cds2-core-color-green-a7: #007c2763; --cds2-core-color-green-a8: #007a318c; --cds2-core-color-green-a9: #007427aa; --cds2-core-color-green-contrast: #fff; --cds2-core-color-green-indicator: var(--cds2-core-color-green-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-green-surface: #f1faf4cc; /** Surface color, used by certain component variants. */ --cds2-core-color-green-track: var(--cds2-core-color-green-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-indigo-1: #fdfdfe; --cds2-core-color-indigo-10: #3358d4; --cds2-core-color-indigo-11: #3a5bc7; --cds2-core-color-indigo-12: #1f2d5c; --cds2-core-color-indigo-2: #f7f9ff; --cds2-core-color-indigo-3: #edf2fe; --cds2-core-color-indigo-4: #e0e9ff; --cds2-core-color-indigo-5: #d2deff; --cds2-core-color-indigo-6: #c1d0ff; --cds2-core-color-indigo-7: #abbdf9; --cds2-core-color-indigo-8: #8da4ef; --cds2-core-color-indigo-9: #3e63dd; --cds2-core-color-indigo-a1: #05058802; --cds2-core-color-indigo-a10: #0024c4c3; --cds2-core-color-indigo-a11: #002cbfc5; --cds2-core-color-indigo-a12: #001149e0; --cds2-core-color-indigo-a2: #002ae507; --cds2-core-color-indigo-a3: #003eeb11; --cds2-core-color-indigo-a4: #0040ff1d; --cds2-core-color-indigo-a5: #003dff2b; --cds2-core-color-indigo-a6: #0036ff3b; --cds2-core-color-indigo-a7: #002ee550; --cds2-core-color-indigo-a8: #002bd86e; --cds2-core-color-indigo-a9: #0028cdb9; --cds2-core-color-indigo-contrast: #fff; --cds2-core-color-indigo-indicator: var(--cds2-core-color-indigo-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-indigo-surface: #f5f8ffcc; /** Surface color, used by certain component variants. */ --cds2-core-color-indigo-track: var(--cds2-core-color-indigo-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-iris-1: #fdfdff; --cds2-core-color-iris-10: #5151cd; --cds2-core-color-iris-11: #5753c6; --cds2-core-color-iris-12: #272962; --cds2-core-color-iris-2: #f8f8ff; --cds2-core-color-iris-3: #f0f1fe; --cds2-core-color-iris-4: #e6e7ff; --cds2-core-color-iris-5: #dadcff; --cds2-core-color-iris-6: #cbcdff; --cds2-core-color-iris-7: #b8b9f8; --cds2-core-color-iris-8: #9b9ef0; --cds2-core-color-iris-9: #5b5bd6; --cds2-core-color-iris-a1: #0505ff02; --cds2-core-color-iris-a10: #0000b1ae; --cds2-core-color-iris-a11: #0700b2ac; --cds2-core-color-iris-a12: #000249d8; --cds2-core-color-iris-a2: #0606e507; --cds2-core-color-iris-a3: #0013e70f; --cds2-core-color-iris-a4: #010dff19; --cds2-core-color-iris-a5: #0009ff24; --cds2-core-color-iris-a6: #0005fa33; --cds2-core-color-iris-a7: #0005e147; --cds2-core-color-iris-a8: #0006d163; --cds2-core-color-iris-a9: #0000bca4; --cds2-core-color-iris-contrast: #fff; --cds2-core-color-iris-indicator: var(--cds2-core-color-iris-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-iris-surface: #f6f6ffcc; /** Surface color, used by certain component variants. */ --cds2-core-color-iris-track: var(--cds2-core-color-iris-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-jade-1: #fbfefd; --cds2-core-color-jade-10: #26997b; --cds2-core-color-jade-11: #00825c; --cds2-core-color-jade-12: #1d3b31; --cds2-core-color-jade-2: #f4fbf7; --cds2-core-color-jade-3: #e5f7ed; --cds2-core-color-jade-4: #d6f1e3; --cds2-core-color-jade-5: #c3e9d7; --cds2-core-color-jade-6: #acdec9; --cds2-core-color-jade-7: #8bceb6; --cds2-core-color-jade-8: #55ba9f; --cds2-core-color-jade-9: #29a383; --cds2-core-color-jade-a1: #00c08304; --cds2-core-color-jade-a10: #006c44b3; --cds2-core-color-jade-a11: #007151df; --cds2-core-color-jade-a12: #002316e2; --cds2-core-color-jade-a2: #009b370a; --cds2-core-color-jade-a3: #00973b16; --cds2-core-color-jade-a4: #00954024; --cds2-core-color-jade-a5: #008f3f34; --cds2-core-color-jade-a6: #00864649; --cds2-core-color-jade-a7: #00814965; --cds2-core-color-jade-a8: #0081558f; --cds2-core-color-jade-a9: #00754bae; --cds2-core-color-jade-contrast: #fff; --cds2-core-color-jade-indicator: var(--cds2-core-color-jade-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-jade-surface: #f1faf5cc; /** Surface color, used by certain component variants. */ --cds2-core-color-jade-track: var(--cds2-core-color-jade-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-lime-1: #fcfdfa; --cds2-core-color-lime-10: #b0e64c; --cds2-core-color-lime-11: #5c7c2f; --cds2-core-color-lime-12: #37401c; --cds2-core-color-lime-2: #f8faf3; --cds2-core-color-lime-3: #eef6d6; --cds2-core-color-lime-4: #e2f0bd; --cds2-core-color-lime-5: #d3e7a6; --cds2-core-color-lime-6: #c2da91; --cds2-core-color-lime-7: #abc978; --cds2-core-color-lime-8: #8db554; --cds2-core-color-lime-9: #bdee63; --cds2-core-color-lime-a1: #5a9d0005; --cds2-core-color-lime-a10: #7cd4009a; --cds2-core-color-lime-a11: #286000d0; --cds2-core-color-lime-a12: #1b2900e3; --cds2-core-color-lime-a2: #7e98000c; --cds2-core-color-lime-a3: #89c40026; --cds2-core-color-lime-a4: #82c2003d; --cds2-core-color-lime-a5: #76b30052; --cds2-core-color-lime-a6: #64a10066; --cds2-core-color-lime-a7: #5190007d; --cds2-core-color-lime-a8: #4488009f; --cds2-core-color-lime-a9: #82de0088; --cds2-core-color-lime-contrast: #1d211c; --cds2-core-color-lime-indicator: var(--cds2-core-color-lime-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-lime-surface: #f6f9f0cc; /** Surface color, used by certain component variants. */ --cds2-core-color-lime-track: var(--cds2-core-color-lime-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-mauve-1: #fdfcfd; --cds2-core-color-mauve-10: #83818e; --cds2-core-color-mauve-11: #65636d; --cds2-core-color-mauve-12: #211f26; --cds2-core-color-mauve-2: #faf9fb; --cds2-core-color-mauve-3: #f2eff3; --cds2-core-color-mauve-4: #eae7ec; --cds2-core-color-mauve-5: #e2dfe6; --cds2-core-color-mauve-6: #dbd8e0; --cds2-core-color-mauve-7: #d0cdd7; --cds2-core-color-mauve-8: #bcbac7; --cds2-core-color-mauve-9: #8e8c99; --cds2-core-color-mauve-a1: #62005c03; --cds2-core-color-mauve-a10: #0401187d; --cds2-core-color-mauve-a11: #0500109c; --cds2-core-color-mauve-a12: #020008e0; --cds2-core-color-mauve-a2: #34025d06; --cds2-core-color-mauve-a3: #25004410; --cds2-core-color-mauve-a4: #1b023a18; --cds2-core-color-mauve-a5: #1c013c20; --cds2-core-color-mauve-a6: #10003027; --cds2-core-color-mauve-a7: #14013132; --cds2-core-color-mauve-a8: #06012f45; --cds2-core-color-mauve-a9: #06011d73; --cds2-core-color-mauve-contrast: #fff; --cds2-core-color-mauve-indicator: var(--cds2-core-color-mauve-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-mauve-surface: #fffc; /** Surface color, used by certain component variants. */ --cds2-core-color-mauve-track: var(--cds2-core-color-mauve-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-mint-1: #f9fefd; --cds2-core-color-mint-10: #7de1cb; --cds2-core-color-mint-11: #037864; --cds2-core-color-mint-12: #16433c; --cds2-core-color-mint-2: #f2fbf9; --cds2-core-color-mint-3: #ddf9f2; --cds2-core-color-mint-4: #c8f4e9; --cds2-core-color-mint-5: #b3ecde; --cds2-core-color-mint-6: #9ce0d0; --cds2-core-color-mint-7: #7ecfbd; --cds2-core-color-mint-8: #4cbba5; --cds2-core-color-mint-9: #86ead4; --cds2-core-color-mint-a1: #00cc9b05; --cds2-core-color-mint-a10: #00af826a; --cds2-core-color-mint-a11: #007762fd; --cds2-core-color-mint-a12: #00322ae9; --cds2-core-color-mint-a2: #00a5770b; --cds2-core-color-mint-a3: #00c18d1d; --cds2-core-color-mint-a4: #00bc8b2e; --cds2-core-color-mint-a5: #00ac8241; --cds2-core-color-mint-a6: #009d7555; --cds2-core-color-mint-a7: #008c686e; --cds2-core-color-mint-a8: #00876394; --cds2-core-color-mint-a9: #00c29161; --cds2-core-color-mint-contrast: #1a211e; --cds2-core-color-mint-indicator: var(--cds2-core-color-mint-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-mint-surface: #effaf8cc; /** Surface color, used by certain component variants. */ --cds2-core-color-mint-track: var(--cds2-core-color-mint-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-olive-1: #fcfdfc; --cds2-core-color-olive-10: #7f837d; --cds2-core-color-olive-11: #60655f; --cds2-core-color-olive-12: #1d211c; --cds2-core-color-olive-2: #f8faf8; --cds2-core-color-olive-3: #eff1ef; --cds2-core-color-olive-4: #e7e9e7; --cds2-core-color-olive-5: #dfe2df; --cds2-core-color-olive-6: #d7dad7; --cds2-core-color-olive-7: #cccfcc; --cds2-core-color-olive-8: #b9bcb8; --cds2-core-color-olive-9: #898e87; --cds2-core-color-olive-a1: #005a0003; --cds2-core-color-olive-a10: #050c0082; --cds2-core-color-olive-a11: #020a00a0; --cds2-core-color-olive-a12: #010600e3; --cds2-core-color-olive-a2: #004e0007; --cds2-core-color-olive-a3: #00220010; --cds2-core-color-olive-a4: #00190118; --cds2-core-color-olive-a5: #04190020; --cds2-core-color-olive-a6: #03140028; --cds2-core-color-olive-a7: #030f0033; --cds2-core-color-olive-a8: #030f0047; --cds2-core-color-olive-a9: #030d0077; --cds2-core-color-olive-contrast: #fff; --cds2-core-color-olive-indicator: var(--cds2-core-color-olive-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-olive-surface: #fffc; /** Surface color, used by certain component variants. */ --cds2-core-color-olive-track: var(--cds2-core-color-olive-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-orange-1: #fefcfb; --cds2-core-color-orange-10: #ef5f00; --cds2-core-color-orange-11: #d14e00; --cds2-core-color-orange-12: #582d1d; --cds2-core-color-orange-2: #fff7ed; --cds2-core-color-orange-3: #ffefd6; --cds2-core-color-orange-4: #ffdda9; --cds2-core-color-orange-5: #ffcf8b; --cds2-core-color-orange-6: #ffc182; --cds2-core-color-orange-7: #f5ae73; --cds2-core-color-orange-8: #ec9455; --cds2-core-color-orange-9: #f76a15; --cds2-core-color-orange-a1: #d1370004; --cds2-core-color-orange-a10: #e93a00d5; --cds2-core-color-orange-a11: #dd4200; --cds2-core-color-orange-a12: #490d00e2; --cds2-core-color-orange-a2: #f0830011; --cds2-core-color-orange-a3: #f8910026; --cds2-core-color-orange-a4: #ff970050; --cds2-core-color-orange-a5: #ff8e006a; --cds2-core-color-orange-a6: #ff760074; --cds2-core-color-orange-a7: #e6600083; --cds2-core-color-orange-a8: #dd4f009e; --cds2-core-color-orange-a9: #f34100cc; --cds2-core-color-orange-contrast: #fff; --cds2-core-color-orange-indicator: var(--cds2-core-color-orange-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-orange-surface: #fff5e9cc; /** Surface color, used by certain component variants. */ --cds2-core-color-orange-track: var(--cds2-core-color-orange-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-pink-1: #fffcfe; --cds2-core-color-pink-10: #cf3897; --cds2-core-color-pink-11: #c2298a; --cds2-core-color-pink-12: #651249; --cds2-core-color-pink-2: #fef7fb; --cds2-core-color-pink-3: #fee9f6; --cds2-core-color-pink-4: #fbdcef; --cds2-core-color-pink-5: #f6cee7; --cds2-core-color-pink-6: #efbfdd; --cds2-core-color-pink-7: #e7acd1; --cds2-core-color-pink-8: #dd93c2; --cds2-core-color-pink-9: #d6409f; --cds2-core-color-pink-a1: #bc00b203; --cds2-core-color-pink-a10: #b5006eba; --cds2-core-color-pink-a11: #c50076d6; --cds2-core-color-pink-a12: #62003ded; --cds2-core-color-pink-a2: #d1008508; --cds2-core-color-pink-a3: #d3008a15; --cds2-core-color-pink-a4: #cc008422; --cds2-core-color-pink-a5: #b800752f; --cds2-core-color-pink-a6: #ab006f3e; --cds2-core-color-pink-a7: #a6006c51; --cds2-core-color-pink-a8: #a0006a69; --cds2-core-color-pink-a9: #bd0074b3; --cds2-core-color-pink-contrast: #fff; --cds2-core-color-pink-indicator: var(--cds2-core-color-pink-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-pink-surface: #fef5facc; /** Surface color, used by certain component variants. */ --cds2-core-color-pink-track: var(--cds2-core-color-pink-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-plum-1: #fefcff; --cds2-core-color-plum-10: #a144af; --cds2-core-color-plum-11: #953ea3; --cds2-core-color-plum-12: #53195d; --cds2-core-color-plum-2: #fdf7fd; --cds2-core-color-plum-3: #fbebfb; --cds2-core-color-plum-4: #f7def8; --cds2-core-color-plum-5: #f1d1f3; --cds2-core-color-plum-6: #e9c2ec; --cds2-core-color-plum-7: #deade3; --cds2-core-color-plum-8: #cf91d8; --cds2-core-color-plum-9: #ab4aba; --cds2-core-color-plum-a1: #bc00ff03; --cds2-core-color-plum-a10: #76008cb5; --cds2-core-color-plum-a11: #7e008bc1; --cds2-core-color-plum-a12: #47004ee6; --cds2-core-color-plum-a2: #a2009907; --cds2-core-color-plum-a3: #b700c714; --cds2-core-color-plum-a4: #af00bf20; --cds2-core-color-plum-a5: #a200b72d; --cds2-core-color-plum-a6: #9600ad3c; --cds2-core-color-plum-a7: #8900a350; --cds2-core-color-plum-a8: #84009f6b; --cds2-core-color-plum-a9: #7e0099af; --cds2-core-color-plum-contrast: #fff; --cds2-core-color-plum-indicator: var(--cds2-core-color-plum-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-plum-surface: #fdf5fdcc; /** Surface color, used by certain component variants. */ --cds2-core-color-plum-track: var(--cds2-core-color-plum-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-purple-1: #fefcfe; --cds2-core-color-purple-10: #8347b9; --cds2-core-color-purple-11: #8145b5; --cds2-core-color-purple-12: #402060; --cds2-core-color-purple-2: #fbf7fe; --cds2-core-color-purple-3: #f7edfd; --cds2-core-color-purple-4: #f2e2fc; --cds2-core-color-purple-5: #ead5f9; --cds2-core-color-purple-6: #e0c4f4; --cds2-core-color-purple-7: #d1afec; --cds2-core-color-purple-8: #be93e4; --cds2-core-color-purple-9: #8e4ec6; --cds2-core-color-purple-a1: #bc00b203; --cds2-core-color-purple-a10: #4c009ab5; --cds2-core-color-purple-a11: #5a00a0ba; --cds2-core-color-purple-a12: #2a004cdf; --cds2-core-color-purple-a2: #7c00bf07; --cds2-core-color-purple-a3: #8e00dd12; --cds2-core-color-purple-a4: #7e00dc1d; --cds2-core-color-purple-a5: #7900d12a; --cds2-core-color-purple-a6: #6c00c63a; --cds2-core-color-purple-a7: #6400bc4f; --cds2-core-color-purple-a8: #5b00ba6a; --cds2-core-color-purple-a9: #5400aaae; --cds2-core-color-purple-contrast: #fff; --cds2-core-color-purple-indicator: var(--cds2-core-color-purple-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-purple-surface: #faf5fecc; /** Surface color, used by certain component variants. */ --cds2-core-color-purple-track: var(--cds2-core-color-purple-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-red-1: #fffcfc; --cds2-core-color-red-10: #dd3e42; --cds2-core-color-red-11: #ce2c31; --cds2-core-color-red-12: #641723; --cds2-core-color-red-2: #fff7f7; --cds2-core-color-red-3: #feebec; --cds2-core-color-red-4: #ffdbdc; --cds2-core-color-red-5: #ffcdce; --cds2-core-color-red-6: #fdbdbe; --cds2-core-color-red-7: #f4a9aa; --cds2-core-color-red-8: #eb8e90; --cds2-core-color-red-9: #e5484d; --cds2-core-color-red-a1: #bc000003; --cds2-core-color-red-a10: #c60000b6; --cds2-core-color-red-a11: #d40000d3; --cds2-core-color-red-a12: #5e0009e8; --cds2-core-color-red-a2: #ee000007; --cds2-core-color-red-a3: #da000013; --cds2-core-color-red-a4: #ff0d0d22; --cds2-core-color-red-a5: #fc000030; --cds2-core-color-red-a6: #e5000040; --cds2-core-color-red-a7: #cd000054; --cds2-core-color-red-a8: #c100006d; --cds2-core-color-red-a9: #cf0000ac; --cds2-core-color-red-contrast: #fff; --cds2-core-color-red-indicator: var(--cds2-core-color-red-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-red-surface: #fff5f5cc; /** Surface color, used by certain component variants. */ --cds2-core-color-red-track: var(--cds2-core-color-red-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-ruby-1: #fffcfd; --cds2-core-color-ruby-10: #dc3b5d; --cds2-core-color-ruby-11: #ca244d; --cds2-core-color-ruby-12: #64172b; --cds2-core-color-ruby-2: #fff7f8; --cds2-core-color-ruby-3: #feeaed; --cds2-core-color-ruby-4: #ffdce1; --cds2-core-color-ruby-5: #fecfd6; --cds2-core-color-ruby-6: #f8bfc8; --cds2-core-color-ruby-7: #efacb8; --cds2-core-color-ruby-8: #e592a3; --cds2-core-color-ruby-9: #e54666; --cds2-core-color-ruby-a1: #bb005a03; --cds2-core-color-ruby-a10: #c50018b6; --cds2-core-color-ruby-a11: #d0002cdb; --cds2-core-color-ruby-a12: #5e0014e8; --cds2-core-color-ruby-a2: #ee000007; --cds2-core-color-ruby-a3: #dd000f14; --cds2-core-color-ruby-a4: #f9001221; --cds2-core-color-ruby-a5: #e400182f; --cds2-core-color-ruby-a6: #cd00143e; --cds2-core-color-ruby-a7: #bb001550; --cds2-core-color-ruby-a8: #b1001969; --cds2-core-color-ruby-a9: #cf0019ad; --cds2-core-color-ruby-contrast: #fff; --cds2-core-color-ruby-indicator: var(--cds2-core-color-ruby-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-ruby-surface: #fff5f6cc; /** Surface color, used by certain component variants. */ --cds2-core-color-ruby-track: var(--cds2-core-color-ruby-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sage-1: #fbfdfc; --cds2-core-color-sage-10: #7c8481; --cds2-core-color-sage-11: #5f6563; --cds2-core-color-sage-12: #1a211e; --cds2-core-color-sage-2: #f7f9f8; --cds2-core-color-sage-3: #eef1f0; --cds2-core-color-sage-4: #e6e9e8; --cds2-core-color-sage-5: #dfe2e0; --cds2-core-color-sage-6: #d7dad8; --cds2-core-color-sage-7: #cbcfcd; --cds2-core-color-sage-8: #b8bcbb; --cds2-core-color-sage-9: #868e8b; --cds2-core-color-sage-a1: #00834204; --cds2-core-color-sage-a10: #000c0882; --cds2-core-color-sage-a11: #0008059f; --cds2-core-color-sage-a12: #000703e4; --cds2-core-color-sage-a2: #00452208; --cds2-core-color-sage-a3: #00301f11; --cds2-core-color-sage-a4: #00190c18; --cds2-core-color-sage-a5: #001a0720; --cds2-core-color-sage-a6: #00140628; --cds2-core-color-sage-a7: #00100a33; --cds2-core-color-sage-a8: #000c0846; --cds2-core-color-sage-a9: #00100978; --cds2-core-color-sage-contrast: #fff; --cds2-core-color-sage-indicator: var(--cds2-core-color-sage-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sage-surface: #fffc; /** Surface color, used by certain component variants. */ --cds2-core-color-sage-track: var(--cds2-core-color-sage-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sand-1: #fdfdfc; --cds2-core-color-sand-10: #82827c; --cds2-core-color-sand-11: #63635e; --cds2-core-color-sand-12: #21201c; --cds2-core-color-sand-2: #f9f9f8; --cds2-core-color-sand-3: #f1f0ef; --cds2-core-color-sand-4: #e9e9e6; --cds2-core-color-sand-5: #e2e1de; --cds2-core-color-sand-6: #dad9d6; --cds2-core-color-sand-7: #cfcfca; --cds2-core-color-sand-8: #bcbbb5; --cds2-core-color-sand-9: #8d8d86; --cds2-core-color-sand-a1: #59590003; --cds2-core-color-sand-a10: #0c0c0083; --cds2-core-color-sand-a11: #080800a1; --cds2-core-color-sand-a12: #060500e3; --cds2-core-color-sand-a2: #29290007; --cds2-core-color-sand-a3: #11110010; --cds2-core-color-sand-a4: #21210019; --cds2-core-color-sand-a5: #1a110020; --cds2-core-color-sand-a6: #1b130029; --cds2-core-color-sand-a7: #19190035; --cds2-core-color-sand-a8: #17130049; --cds2-core-color-sand-a9: #0d0d0078; --cds2-core-color-sand-contrast: #fff; --cds2-core-color-sand-indicator: var(--cds2-core-color-sand-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sand-surface: #fffc; /** Surface color, used by certain component variants. */ --cds2-core-color-sand-track: var(--cds2-core-color-sand-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sky-1: #f9feff; --cds2-core-color-sky-10: #74daf8; --cds2-core-color-sky-11: #00749e; --cds2-core-color-sky-12: #1d3e56; --cds2-core-color-sky-2: #f1fafd; --cds2-core-color-sky-3: #e1f6fd; --cds2-core-color-sky-4: #d1f0fb; --cds2-core-color-sky-5: #bee7f5; --cds2-core-color-sky-6: #a9daed; --cds2-core-color-sky-7: #8dcae3; --cds2-core-color-sky-8: #60b3d7; --cds2-core-color-sky-9: #7ce2fe; --cds2-core-color-sky-a1: #00cefb05; --cds2-core-color-sky-a10: #00a7e671; --cds2-core-color-sky-a11: #00769e; --cds2-core-color-sky-a12: #002642e2; --cds2-core-color-sky-a2: #0099bf0c; --cds2-core-color-sky-a3: #00a9df1a; --cds2-core-color-sky-a4: #009cd728; --cds2-core-color-sky-a5: #0092c839; --cds2-core-color-sky-a6: #0082bb4c; --cds2-core-color-sky-a7: #0077b165; --cds2-core-color-sky-a8: #0071af8a; --cds2-core-color-sky-a9: #00b7f26a; --cds2-core-color-sky-contrast: #1c2024; --cds2-core-color-sky-indicator: var(--cds2-core-color-sky-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sky-surface: #eef9fdcc; /** Surface color, used by certain component variants. */ --cds2-core-color-sky-track: var(--cds2-core-color-sky-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-slate-1: #fcfcfd; --cds2-core-color-slate-10: #80838d; --cds2-core-color-slate-11: #60646c; --cds2-core-color-slate-12: #1c2024; --cds2-core-color-slate-2: #f9f9fb; --cds2-core-color-slate-3: #f0f0f3; --cds2-core-color-slate-4: #e7e8ec; --cds2-core-color-slate-5: #e0e1e6; --cds2-core-color-slate-6: #d9d9e0; --cds2-core-color-slate-7: #cdced6; --cds2-core-color-slate-8: #b9bbc6; --cds2-core-color-slate-9: #8b8d98; --cds2-core-color-slate-a1: #06065d03; --cds2-core-color-slate-a10: #00071a7f; --cds2-core-color-slate-a11: #0005119e; --cds2-core-color-slate-a12: #000308e2; --cds2-core-color-slate-a2: #06065d06; --cds2-core-color-slate-a3: #0101370f; --cds2-core-color-slate-a4: #03033117; --cds2-core-color-slate-a5: #000a351f; --cds2-core-color-slate-a6: #02022c26; --cds2-core-color-slate-a7: #01073132; --cds2-core-color-slate-a8: #00082f46; --cds2-core-color-slate-a9: #00051c74; --cds2-core-color-slate-contrast: #fff; --cds2-core-color-slate-indicator: var(--cds2-core-color-slate-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-slate-surface: #fffc; /** Surface color, used by certain component variants. */ --cds2-core-color-slate-track: var(--cds2-core-color-slate-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-teal-1: #fafefd; --cds2-core-color-teal-10: #0d9b8a; --cds2-core-color-teal-11: #00816d; --cds2-core-color-teal-12: #0d3d38; --cds2-core-color-teal-2: #f3fbf9; --cds2-core-color-teal-3: #e0f8f3; --cds2-core-color-teal-4: #ccf3ea; --cds2-core-color-teal-5: #b8ebe0; --cds2-core-color-teal-6: #a1ded2; --cds2-core-color-teal-7: #83cdc1; --cds2-core-color-teal-8: #53b9ab; --cds2-core-color-teal-9: #12a594; --cds2-core-color-teal-a1: #00c08304; --cds2-core-color-teal-a10: #00745db9; --cds2-core-color-teal-a11: #008572; --cds2-core-color-teal-a12: #00342df2; --cds2-core-color-teal-a2: #00a5770b; --cds2-core-color-teal-a3: #00bc8e1b; --cds2-core-color-teal-a4: #00b2882b; --cds2-core-color-teal-a5: #00a47d3d; --cds2-core-color-teal-a6: #00917151; --cds2-core-color-teal-a7: #00846b6b; --cds2-core-color-teal-a8: #00816b91; --cds2-core-color-teal-a9: #007b66b3; --cds2-core-color-teal-contrast: #fff; --cds2-core-color-teal-indicator: var(--cds2-core-color-teal-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-teal-surface: #f0faf8cc; /** Surface color, used by certain component variants. */ --cds2-core-color-teal-track: var(--cds2-core-color-teal-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-tomato-1: #fffcfc; --cds2-core-color-tomato-10: #dd4425; --cds2-core-color-tomato-11: #d13415; --cds2-core-color-tomato-12: #5c271f; --cds2-core-color-tomato-2: #fff8f7; --cds2-core-color-tomato-3: #ffebe7; --cds2-core-color-tomato-4: #ffdcd3; --cds2-core-color-tomato-5: #ffcdc2; --cds2-core-color-tomato-6: #fdbdaf; --cds2-core-color-tomato-7: #f5a898; --cds2-core-color-tomato-8: #ec8e7b; --cds2-core-color-tomato-9: #e54d2e; --cds2-core-color-tomato-a1: #bc000003; --cds2-core-color-tomato-a10: #d30000cc; --cds2-core-color-tomato-a11: #e00000ea; --cds2-core-color-tomato-a12: #4d0100e0; --cds2-core-color-tomato-a2: #d3000008; --cds2-core-color-tomato-a3: #e7060017; --cds2-core-color-tomato-a4: #ff1f002a; --cds2-core-color-tomato-a5: #ff00003b; --cds2-core-color-tomato-a6: #ec00004d; --cds2-core-color-tomato-a7: #db000063; --cds2-core-color-tomato-a8: #d000007f; --cds2-core-color-tomato-a9: #d90000c4; --cds2-core-color-tomato-contrast: #fff; --cds2-core-color-tomato-indicator: var(--cds2-core-color-tomato-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-tomato-surface: #fff6f5cc; /** Surface color, used by certain component variants. */ --cds2-core-color-tomato-track: var(--cds2-core-color-tomato-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-violet-1: #fdfcfe; --cds2-core-color-violet-10: #654dc4; --cds2-core-color-violet-11: #6550b9; --cds2-core-color-violet-12: #2f265f; --cds2-core-color-violet-2: #faf8ff; --cds2-core-color-violet-3: #f4f0fe; --cds2-core-color-violet-4: #ebe5ff; --cds2-core-color-violet-5: #e1d9ff; --cds2-core-color-violet-6: #d4cafe; --cds2-core-color-violet-7: #c2b5f5; --cds2-core-color-violet-8: #aa99ec; --cds2-core-color-violet-9: #6e56cf; --cds2-core-color-violet-a1: #6200b303; --cds2-core-color-violet-a10: #2000a7b1; --cds2-core-color-violet-a11: #2300a0af; --cds2-core-color-violet-a12: #0d0046d9; --cds2-core-color-violet-a2: #2e03e507; --cds2-core-color-violet-a3: #3a00e70f; --cds2-core-color-violet-a4: #3800ff1a; --cds2-core-color-violet-a5: #2f00ff26; --cds2-core-color-violet-a6: #2c00f135; --cds2-core-color-violet-a7: #2800d449; --cds2-core-color-violet-a8: #2600c865; --cds2-core-color-violet-a9: #2100b3a8; --cds2-core-color-violet-contrast: #fff; --cds2-core-color-violet-indicator: var(--cds2-core-color-violet-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-violet-surface: #f9f6ffcc; /** Surface color, used by certain component variants. */ --cds2-core-color-violet-track: var(--cds2-core-color-violet-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-white-a1: #ffffff0d; --cds2-core-color-white-a10: #fffc; --cds2-core-color-white-a11: #ffffffe6; --cds2-core-color-white-a12: #fffffff2; --cds2-core-color-white-a2: #ffffff1a; --cds2-core-color-white-a3: #ffffff26; --cds2-core-color-white-a4: #fff3; --cds2-core-color-white-a5: #ffffff4d; --cds2-core-color-white-a6: #fff6; --cds2-core-color-white-a7: #ffffff80; --cds2-core-color-white-a8: #fff9; --cds2-core-color-white-a9: #ffffffb3; --cds2-core-color-white-contrast: #fff; --cds2-core-color-yellow-1: #fdfdf9; --cds2-core-color-yellow-10: #ffdc00; --cds2-core-color-yellow-11: #a06e00; --cds2-core-color-yellow-12: #473b1f; --cds2-core-color-yellow-2: #fefce9; --cds2-core-color-yellow-3: #fffab8; --cds2-core-color-yellow-4: #fff394; --cds2-core-color-yellow-5: #ffe770; --cds2-core-color-yellow-6: #f3d768; --cds2-core-color-yellow-7: #e4c767; --cds2-core-color-yellow-8: #d5ae39; --cds2-core-color-yellow-9: #ffea00; --cds2-core-color-yellow-a1: #acac0006; --cds2-core-color-yellow-a10: #fdce00b5; --cds2-core-color-yellow-a11: #a76900; --cds2-core-color-yellow-a12: #311f00e0; --cds2-core-color-yellow-a2: #f7d90014; --cds2-core-color-yellow-a3: #feeb0040; --cds2-core-color-yellow-a4: #fede005f; --cds2-core-color-yellow-a5: #fdcf007d; --cds2-core-color-yellow-a6: #e6b30086; --cds2-core-color-yellow-a7: #cb98008a; --cds2-core-color-yellow-a8: #c18a00af; --cds2-core-color-yellow-a9: #ffe400c7; --cds2-core-color-yellow-contrast: #21201c; --cds2-core-color-yellow-indicator: var(--cds2-core-color-yellow-10); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-yellow-surface: #fefbe4cc; /** Surface color, used by certain component variants. */ --cds2-core-color-yellow-track: var(--cds2-core-color-yellow-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-dimension-0: 0px; --cds2-core-dimension-100: 8px; --cds2-core-dimension-1000: 80px; --cds2-core-dimension-150: 12px; --cds2-core-dimension-200: 16px; --cds2-core-dimension-25: 2px; --cds2-core-dimension-250: 20px; --cds2-core-dimension-300: 24px; --cds2-core-dimension-400: 32px; --cds2-core-dimension-50: 4px; --cds2-core-dimension-500: 40px; --cds2-core-dimension-600: 48px; --cds2-core-dimension-75: 6px; --cds2-core-dimension-800: 64px; --cds2-core-font-family-mono: 'Source Code Pro', 'Ubuntu Mono', monospace; --cds2-core-font-family-sans: 'Open Sans', sans-serif; --cds2-core-font-size-2xl: 24px; /** 24px */ --cds2-core-font-size-3xl: 30px; /** 30px */ --cds2-core-font-size-4xl: 36px; /** 36px */ --cds2-core-font-size-5xl: 48px; /** 48px */ --cds2-core-font-size-body: 14px; /** 14px */ --cds2-core-font-size-lg: 18px; /** 18px */ --cds2-core-font-size-md: 16px; /** 16px */ --cds2-core-font-size-xl: 20px; /** 20px */ --cds2-core-font-size-xs: 12px; /** 12px */ --cds2-core-font-size-xxs: 10px; /** 10px */ --cds2-core-font-weight-black: 900; --cds2-core-font-weight-bold: 700; --cds2-core-font-weight-extrabold: 800; --cds2-core-font-weight-extralight: 200; --cds2-core-font-weight-light: 300; --cds2-core-font-weight-medium: 500; --cds2-core-font-weight-normal: 400; --cds2-core-font-weight-semibold: 600; --cds2-core-font-weight-thin: 100; --cds2-core-line-height-150: 12px; /** 12px */ --cds2-core-line-height-200: 16px; /** 16px */ --cds2-core-line-height-250: 20px; /** 20px */ --cds2-core-line-height-300: 24px; /** 24px */ --cds2-core-line-height-350: 28px; /** 28px */ --cds2-core-line-height-400: 32px; /** 32px */ --cds2-core-line-height-500: 40px; /** 40px */ --cds2-core-line-height-575: 46px; /** 46px */ --cds2-core-line-height-700: 56px; /** 56px */ --cds2-dimension-component-lg: var(--cds2-core-dimension-500); --cds2-dimension-component-md: var(--cds2-core-dimension-400); --cds2-dimension-component-sm: var(--cds2-core-dimension-300); --cds2-dimension-component-xl: var(--cds2-core-dimension-600); --cds2-dimension-component-xs: var(--cds2-core-dimension-200); --cds2-dimension-icon-lg: var(--cds2-core-dimension-400); /** Large indentifcation icons, such as in modal headers. */ --cds2-dimension-icon-md: var(--cds2-core-dimension-300); /** Standalone icons. */ --cds2-dimension-icon-sm: var(--cds2-core-dimension-200); /** Icons included as part of components. */ --cds2-dimension-icon-xl: var(--cds2-core-dimension-600); /** Big ass icons used as placeholders, such as in Empty States and Upload drop areas. */ --cds2-dimension-icon-xs: var(--cds2-core-dimension-150); /** Icons used in smaller components, such as Pills, Tags, and compact input fields. */ --cds2-dimension-modal-lg: 1184px; --cds2-dimension-modal-md: 864px; --cds2-dimension-modal-sm: 544px; --cds2-motion-duration-instant: 10ms; --cds2-motion-duration-long-3: 1000ms; --cds2-motion-duration-medium-1: 200ms; /** switch grip stretch and movement animation; button wave animation */ --cds2-motion-duration-medium-2: 300ms; /** breadcrumb color transition, button state change animation */ --cds2-motion-duration-short: 100ms; --cds2-motion-easing-standard: cubic-bezier(0.645, 0.45, 0.355, 1); --cds2-motion-easing-wave: cubic-bezier(0.08, 0.82, 0.17, 1); --cds2-opacity-state-disabled: 0.65; --cds2-radius-full: 9999px; --cds2-radius-lg: 4px; --cds2-radius-md: 2px; --cds2-radius-xl: 8px; --cds2-shadow-button: 0px 2px 0px 0px #00000005; --cds2-shadow-high-down: 0px 6px 16px -8px #00000014, 0px 9px 28px 0px #0000000d, 0px 12px 48px 16px #00000008; --cds2-shadow-high-left: -6px 0px 16px -8px #00000014, -9px 0px 28px 0px #0000000d, -12px 0px 48px 16px #00000008; --cds2-shadow-high-right: 6px 0px 16px -8px #00000014, 9px 0px 28px 0px #0000000d, 12px 0px 48px 16px #00000008; --cds2-shadow-high-up: 0px -6px 16px -8px #00000014, 0px -9px 28px 0px #0000000d, 0px -12px 48px 16px #00000008; --cds2-shadow-low-down: 0px 1px 2px -2px #00000029, 0px 3px 6px 0px #0000001f, 0px 5px 12px 4px #00000017; --cds2-shadow-low-left: -1px 0px 2px -2px #00000029, -3px 0px 6px 0px #0000001f, -5px 0px 12px 4px #00000017; --cds2-shadow-low-right: 1px 0px 2px -2px #00000029, 3px 0px 6px 0px #0000001f, 5px 0px 12px 4px #00000017; --cds2-shadow-low-up: 0px -1px 2px -2px #00000029, 0px -3px 6px 0px #0000001f, 0px -5px 12px 4px #00000017; --cds2-shadow-medium-down: 0px 3px 6px -4px #0000001f, 0px 6px 16px 0px #00000014, 0px 9px 28px 8px #0000000d; --cds2-shadow-medium-left: -3px 0px 6px -4px #0000001f, -6px 0px 16px 0px #00000014, -9px 0px 28px 8px #0000000d; --cds2-shadow-medium-right: 3px 0px 6px -4px #0000001f, 6px 0px 16px 0px #00000014, 9px 0px 28px 8px #0000000d; --cds2-shadow-medium-up: 0px -3px 6px -4px #0000001f, 0px -6px 16px 0px #00000014, 0px -9px 28px 8px #0000000d; --cds2-shadow-wave: 0px 0px 0px 6px var(--cds2-color-border-focus); --cds2-spacing-2xl: var(--cds2-core-dimension-400); /** 32px. Acquaintance; a polite, respectful boundary, recognized but not close. */ --cds2-spacing-lg: var(--cds2-core-dimension-200); /** 16px. Friends; always there for each other, with a comfortable, familiar space. */ --cds2-spacing-md: var(--cds2-core-dimension-100); /** 8px. Best friends; close enough to share everything, with only the smallest gap between. */ --cds2-spacing-none: var(--cds2-core-dimension-0); /** 0px. */ --cds2-spacing-sm: var(--cds2-core-dimension-50); /** 4px. A tight bond representing unwavering loyalty and support. */ --cds2-spacing-xl: var(--cds2-core-dimension-300); /** 24px. Casual friends; a friendly distance, easy conversation, but room for others. */ --cds2-spacing-xs: var(--cds2-core-dimension-25); /** 2px. So close there is barely any space, like inseparable companions. */ --cds2-temporary-input-background-disabled: #fff; --cds2-temporary-input-background-primary: #fbfcfd; --cds2-temporary-input-border-disabled: #ced9e0; --cds2-temporary-input-border-highlight: #299bff; --cds2-temporary-input-border-primary: #ced9e0; --cds2-temporary-input-foreground-disabled: #00000040; --cds2-temporary-input-foreground-placeholder: #bfbfbf; --cds2-temporary-input-foreground-primary: #000000a6; --cds2-typography-body-lg-normal: var(--cds2-core-font-weight-normal) var(--cds2-core-font-size-md)/1.5 var(--cds2-core-font-family-sans); --cds2-typography-body-lg-normal-letter-spacing: 0px; --cds2-typography-body-lg-semibold: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-md)/1.5 var(--cds2-core-font-family-sans); --cds2-typography-body-lg-semibold-letter-spacing: 0px; --cds2-typography-body-md-normal: var(--cds2-core-font-weight-normal) var(--cds2-core-font-size-body)/1.7142857143 var(--cds2-core-font-family-sans); --cds2-typography-body-md-normal-letter-spacing: 0px; --cds2-typography-body-md-semibold: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-body)/1.7142857143 var(--cds2-core-font-family-sans); --cds2-typography-body-md-semibold-letter-spacing: 0px; --cds2-typography-body-sm-normal: var(--cds2-core-font-weight-normal) var(--cds2-core-font-size-xs)/1.3333333333 var(--cds2-core-font-family-sans); --cds2-typography-body-sm-normal-letter-spacing: 0px; --cds2-typography-body-sm-semibold: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-xs)/1.3333333333 var(--cds2-core-font-family-sans); --cds2-typography-body-sm-semibold-letter-spacing: 0px; --cds2-typography-body-xs-normal: var(--cds2-core-font-weight-normal) var(--cds2-core-font-size-xxs)/1.6 var(--cds2-core-font-family-sans); --cds2-typography-body-xs-normal-letter-spacing: 0px; --cds2-typography-body-xs-semibold: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-xxs)/1.6 var(--cds2-core-font-family-sans); --cds2-typography-body-xs-semibold-letter-spacing: 0px; --cds2-typography-code: var(--cds2-core-font-weight-normal) var(--cds2-core-font-size-body)/1.7142857143 var(--cds2-core-font-family-mono); /** The code text style is reserved for representing code. */ --cds2-typography-code-letter-spacing: 0px; /** The code text style is reserved for representing code. */ --cds2-typography-heading-lg: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-2xl)/1.1666666667 var(--cds2-core-font-family-sans); /** Main page titles, use only once per page. */ --cds2-typography-heading-lg-letter-spacing: 0px; /** Main page titles, use only once per page. */ --cds2-typography-heading-md: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-xl)/1.2 var(--cds2-core-font-family-sans); /** Headings that identify key functionality. The most common heading, often used for

headings. */ --cds2-typography-heading-md-letter-spacing: 0px; /** Headings that identify key functionality. The most common heading, often used for

headings. */ --cds2-typography-heading-sm: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-md)/1.5 var(--cds2-core-font-family-sans); /** Sub-section and field group headings. */ --cds2-typography-heading-sm-letter-spacing: 0px; /** Sub-section and field group headings. */ --cds2-typography-heading-xl: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-3xl)/1.2 var(--cds2-core-font-family-sans); /** Empty states and feature introductions. Top level headers. */ --cds2-typography-heading-xl-letter-spacing: 0px; /** Empty states and feature introductions. Top level headers. */ --cds2-typography-heading-xs: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-body)/1.4285714286 var(--cds2-core-font-family-sans); /** Deep headings and for highlighting important pieces of information. */ --cds2-typography-heading-xs-letter-spacing: 0px; /** Deep headings and for highlighting important pieces of information. */ --cds2-typography-metric-lg: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-4xl)/1.7142857143 var(--cds2-core-font-family-sans); /** Use in large charts. */ --cds2-typography-metric-lg-letter-spacing: 0px; /** Use in large charts. */ --cds2-typography-metric-md: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-2xl)/1.7142857143 var(--cds2-core-font-family-sans); /** Use in medium sized charts and where metrics are integrated with other page data. */ --cds2-typography-metric-md-letter-spacing: 0px; /** Use in medium sized charts and where metrics are integrated with other page data. */ --cds2-typography-metric-sm: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-md)/1.25 var(--cds2-core-font-family-sans); /** Use in small charts. */ --cds2-typography-metric-sm-letter-spacing: 0px; /** Use in small charts. */ --cds2-typography-metric-xl: var(--cds2-core-font-weight-semibold) var(--cds2-core-font-size-5xl)/1 var(--cds2-core-font-family-sans); /** Used for numerical metric displays, where focus is on the number itself. */ --cds2-typography-metric-xl-letter-spacing: 0px; /** Used for numerical metric displays, where focus is on the number itself. */ } .dark { --cds2-border-badge: 2px solid var(--cds2-color-background-application); --cds2-border-default: 1px solid var(--cds2-color-border-neutral-default); --cds2-border-focus: 2px solid var(--cds2-color-border-focus); /** Border used for focus states on interactive elements. */ --cds2-color-accent-1: var(--cds2-core-color-blue-1); --cds2-color-accent-10: var(--cds2-core-color-blue-10); --cds2-color-accent-11: var(--cds2-core-color-blue-11); --cds2-color-accent-12: var(--cds2-core-color-blue-12); --cds2-color-accent-2: var(--cds2-core-color-blue-2); --cds2-color-accent-3: var(--cds2-core-color-blue-3); --cds2-color-accent-4: var(--cds2-core-color-blue-4); --cds2-color-accent-5: var(--cds2-core-color-blue-5); --cds2-color-accent-6: var(--cds2-core-color-blue-6); --cds2-color-accent-7: var(--cds2-core-color-blue-7); --cds2-color-accent-8: var(--cds2-core-color-blue-8); --cds2-color-accent-9: var(--cds2-core-color-blue-9); --cds2-color-accent-a1: var(--cds2-core-color-blue-a1); --cds2-color-accent-a10: var(--cds2-core-color-blue-a10); --cds2-color-accent-a11: var(--cds2-core-color-blue-a11); --cds2-color-accent-a12: var(--cds2-core-color-blue-a12); --cds2-color-accent-a2: var(--cds2-core-color-blue-a2); --cds2-color-accent-a3: var(--cds2-core-color-blue-a3); --cds2-color-accent-a4: var(--cds2-core-color-blue-a4); --cds2-color-accent-a5: var(--cds2-core-color-blue-a5); --cds2-color-accent-a6: var(--cds2-core-color-blue-a6); --cds2-color-accent-a7: var(--cds2-core-color-blue-a7); --cds2-color-accent-a8: var(--cds2-core-color-blue-a8); --cds2-color-accent-a9: var(--cds2-core-color-blue-a9); --cds2-color-accent-contrast: var(--cds2-core-color-blue-contrast); --cds2-color-accent-indicator: var(--cds2-core-color-blue-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-accent-surface: var(--cds2-core-color-blue-surface); /** Surface color, used by certain component variants. */ --cds2-color-accent-track: var(--cds2-core-color-blue-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-background-accent-default: var(--cds2-color-accent-3); --cds2-color-background-accent-hover: var(--cds2-color-accent-4); --cds2-color-background-accent-indicator: var(--cds2-color-accent-indicator); --cds2-color-background-accent-selected: var(--cds2-color-accent-5); --cds2-color-background-accent-solid-active: #0692ff; /** This value was derived using filter definitions. */ --cds2-color-background-accent-solid-active: #007de8; /** This value was derived using filter definitions. */ --cds2-color-background-accent-solid-default: var(--cds2-color-accent-9); --cds2-color-background-accent-solid-hover: var(--cds2-color-accent-10); --cds2-color-background-accent-subtle: var(--cds2-color-accent-2); --cds2-color-background-accent-surface: var(--cds2-color-accent-surface); --cds2-color-background-accent-track: var(--cds2-color-accent-track); --cds2-color-background-application: var(--cds2-color-neutral-1); /** Background color for the application; used for the main content area of the application. Used in some cases to create the appearance of transparency. */ --cds2-color-background-brand-default: var(--cds2-color-brand-3); /** Default background color for UI elements. */ --cds2-color-background-brand-hover: var(--cds2-color-brand-4); /** Background color for hover states. */ --cds2-color-background-brand-indicator: var(--cds2-color-neutral-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-brand-selected: var(--cds2-color-neutral-5); /** Background color for active and selected states. */ --cds2-color-background-brand-solid-active: #757882; /** This value was derived using filter definitions. */ --cds2-color-background-brand-solid-default: var(--cds2-color-brand-9); /** Solid background color for UI elements. */ --cds2-color-background-brand-solid-hover: var(--cds2-color-brand-10); /** Solid background color for hover states. */ --cds2-color-background-brand-subtle: var(--cds2-color-brand-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-brand-surface: var(--cds2-color-neutral-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-brand-track: var(--cds2-color-neutral-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-danger-default: var(--cds2-color-danger-3); /** Default background color for UI elements. */ --cds2-color-background-danger-hover: var(--cds2-color-danger-4); /** Background color for hover states. */ --cds2-color-background-danger-indicator: var(--cds2-color-danger-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-danger-selected: var(--cds2-color-danger-5); /** Background color for active and selected states. */ --cds2-color-background-danger-solid-active: #ef4347; /** This value was derived using filter definitions. */ --cds2-color-background-danger-solid-active: #d33236; /** This value was derived using filter definitions. */ --cds2-color-background-danger-solid-default: var(--cds2-color-danger-9); /** Solid background color for UI elements. */ --cds2-color-background-danger-solid-hover: var(--cds2-color-danger-10); /** Solid background color for hover states. */ --cds2-color-background-danger-subtle: var(--cds2-color-danger-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-danger-surface: var(--cds2-color-danger-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-danger-track: var(--cds2-color-danger-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-disabled: var(--cds2-color-neutral-3); /** Background color for disabled elements; used to indicate that an element is temporarily not interactive. */ --cds2-color-background-highlight-default: var(--cds2-color-highlight-3); /** Default background color for UI elements. */ --cds2-color-background-highlight-hover: var(--cds2-color-highlight-4); /** Background color for hover states. */ --cds2-color-background-highlight-indicator: var(--cds2-color-highlight-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-highlight-selected: var(--cds2-color-highlight-5); /** Background color for active and selected states. */ --cds2-color-background-highlight-solid-active: #757882; /** This value was derived using filter definitions. */ --cds2-color-background-highlight-solid-default: var(--cds2-color-highlight-9); /** Solid background color for UI elements. */ --cds2-color-background-highlight-solid-hover: var(--cds2-color-highlight-10); /** Solid background color for hover states. */ --cds2-color-background-highlight-subtle: var(--cds2-color-highlight-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-highlight-surface: var(--cds2-color-highlight-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-highlight-track: var(--cds2-color-highlight-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-info-default: var(--cds2-color-info-3); /** Default background color for UI elements. */ --cds2-color-background-info-hover: var(--cds2-color-info-4); /** Background color for hover states. */ --cds2-color-background-info-indicator: var(--cds2-color-info-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-info-selected: var(--cds2-color-info-5); /** Background color for active and selected states. */ --cds2-color-background-info-solid-active: #0692ff; /** This value was derived using filter definitions. */ --cds2-color-background-info-solid-active: #007de8; /** This value was derived using filter definitions. */ --cds2-color-background-info-solid-default: var(--cds2-color-info-9); /** Solid background color for UI elements. */ --cds2-color-background-info-solid-hover: var(--cds2-color-info-10); /** Solid background color for hover states. */ --cds2-color-background-info-subtle: var(--cds2-color-info-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-info-surface: var(--cds2-color-info-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-info-track: var(--cds2-color-info-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-neutral-default: var(--cds2-color-neutral-3); /** Default background color for UI elements. */ --cds2-color-background-neutral-hover: var(--cds2-color-neutral-4); /** Background color for hover states. */ --cds2-color-background-neutral-indicator: var(--cds2-color-neutral-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-neutral-selected: var(--cds2-color-neutral-5); /** Background color for active and selected states. */ --cds2-color-background-neutral-solid-active: #8a8d98; /** This value was derived using filter definitions. */ --cds2-color-background-neutral-solid-active: #757882; /** This value was derived using filter definitions. */ --cds2-color-background-neutral-solid-default: var(--cds2-color-neutral-9); /** Solid background color for UI elements. */ --cds2-color-background-neutral-solid-hover: var(--cds2-color-neutral-10); /** Solid background color for hover states. */ --cds2-color-background-neutral-subtle: var(--cds2-color-neutral-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-neutral-surface: var(--cds2-color-neutral-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-neutral-track: var(--cds2-color-neutral-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-panel-solid: var(--cds2-color-neutral-2); /** Background color for panels, such as cards and dialogs. */ --cds2-color-background-panel-translucent: var(--cds2-color-neutral-a2); /** Background color for panels, such as cards and dialogs; creates a semi-transparent overlay. */ --cds2-color-background-scrim: var(--cds2-color-neutral-a8); /** Background color for scrims; used to create a semi-transparent overlay on top of the background. */ --cds2-color-background-scrim: var(--cds2-color-neutral-a6); /** Background color for scrims; used to create a semi-transparent overlay on top of the background. */ --cds2-color-background-success-default: var(--cds2-color-success-3); /** Default background color for UI elements. */ --cds2-color-background-success-hover: var(--cds2-color-success-4); /** Background color for hover states. */ --cds2-color-background-success-indicator: var(--cds2-color-success-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-success-selected: var(--cds2-color-success-5); /** Background color for active and selected states. */ --cds2-color-background-success-solid-active: #2ea66e; /** This value was derived using filter definitions. */ --cds2-color-background-success-solid-active: #22935e; /** This value was derived using filter definitions. */ --cds2-color-background-success-solid-default: var(--cds2-color-success-9); /** Solid background color for UI elements. */ --cds2-color-background-success-solid-hover: var(--cds2-color-success-10); /** Solid background color for hover states. */ --cds2-color-background-success-subtle: var(--cds2-color-success-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-success-surface: var(--cds2-color-success-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-success-track: var(--cds2-color-success-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-background-surface: #00000040; /** Background color used by certain `variant='surface'` components; namely form components. */ --cds2-color-background-warning-default: var(--cds2-color-warning-3); /** Default background color for UI elements. */ --cds2-color-background-warning-hover: var(--cds2-color-warning-4); /** Background color for hover states. */ --cds2-color-background-warning-indicator: var(--cds2-color-warning-indicator); /** Indicator color, used by components like Checkbox, Radio, and Tabs */ --cds2-color-background-warning-selected: var(--cds2-color-warning-5); /** Background color for active and selected states. */ --cds2-color-background-warning-solid-active: #ffcc4e; /** This value was derived using filter definitions. */ --cds2-color-background-warning-solid-active: #f5af0b; /** This value was derived using filter definitions. */ --cds2-color-background-warning-solid-default: var(--cds2-color-warning-9); /** Solid background color for UI elements. */ --cds2-color-background-warning-solid-hover: var(--cds2-color-warning-10); /** Solid background color for hover states. */ --cds2-color-background-warning-subtle: var(--cds2-color-warning-2); /** Background color of containers and cards; used to create a subtle separation between elements. */ --cds2-color-background-warning-surface: var(--cds2-color-warning-surface); /** Surface color, used by certain component variants. */ --cds2-color-background-warning-track: var(--cds2-color-warning-track); /** Track color, used by components like Slider and Progress Bar. */ --cds2-color-border-accent-default: var(--cds2-color-accent-7); /** Default border color for interactive elements. */ --cds2-color-border-accent-hover: var(--cds2-color-accent-8); --cds2-color-border-accent-strong: var(--cds2-color-accent-8); /** Hovered UI element border color. */ --cds2-color-border-accent-subtle: var(--cds2-color-accent-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-brand-default: var(--cds2-color-brand-7); /** Default border color for interactive elements. */ --cds2-color-border-brand-strong: var(--cds2-color-brand-8); /** Hovered UI element border color. */ --cds2-color-border-brand-subtle: var(--cds2-color-brand-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-danger-default: var(--cds2-color-danger-7); /** Default border color for interactive elements. */ --cds2-color-border-danger-hover: var(--cds2-color-danger-8); --cds2-color-border-danger-strong: var(--cds2-color-danger-8); /** Hovered UI element border color. */ --cds2-color-border-danger-subtle: var(--cds2-color-danger-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-disabled: var(--cds2-color-neutral-6); /** Border color for disabled elements; used to indicate that an element is temporarily not interactive. */ --cds2-color-border-focus: var(--cds2-color-accent-8); /** Border color for focus states on interactive elements. */ --cds2-color-border-highlight-default: var(--cds2-color-highlight-7); /** Default border color for interactive elements. */ --cds2-color-border-highlight-strong: var(--cds2-color-highlight-8); /** Hovered UI element border color. */ --cds2-color-border-highlight-subtle: var(--cds2-color-highlight-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-info-default: var(--cds2-color-info-7); /** Default border color for interactive elements. */ --cds2-color-border-info-strong: var(--cds2-color-info-8); /** Hovered UI element border color. */ --cds2-color-border-info-subtle: var(--cds2-color-info-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-neutral-default: var(--cds2-color-neutral-7); /** Default border color for interactive elements. */ --cds2-color-border-neutral-strong: var(--cds2-color-neutral-8); /** Hovered UI element border color. */ --cds2-color-border-neutral-subtle: var(--cds2-color-neutral-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-success-default: var(--cds2-color-success-7); /** Default border color for interactive elements. */ --cds2-color-border-success-strong: var(--cds2-color-success-8); /** Hovered UI element border color. */ --cds2-color-border-success-subtle: var(--cds2-color-success-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-border-warning-default: var(--cds2-color-warning-7); /** Default border color for interactive elements. */ --cds2-color-border-warning-strong: var(--cds2-color-warning-8); /** Hovered UI element border color. */ --cds2-color-border-warning-subtle: var(--cds2-color-warning-6); /** Subtle border color for non-interactive elements: alerts, dividers, cards */ --cds2-color-brand-1: var(--cds2-core-color-cribl-teal-1); --cds2-color-brand-10: var(--cds2-core-color-cribl-teal-10); --cds2-color-brand-11: var(--cds2-core-color-cribl-teal-11); --cds2-color-brand-12: var(--cds2-core-color-cribl-teal-12); --cds2-color-brand-2: var(--cds2-core-color-cribl-teal-2); --cds2-color-brand-3: var(--cds2-core-color-cribl-teal-3); --cds2-color-brand-4: var(--cds2-core-color-cribl-teal-4); --cds2-color-brand-5: var(--cds2-core-color-cribl-teal-5); --cds2-color-brand-6: var(--cds2-core-color-cribl-teal-6); --cds2-color-brand-7: var(--cds2-core-color-cribl-teal-7); --cds2-color-brand-8: var(--cds2-core-color-cribl-teal-8); --cds2-color-brand-9: var(--cds2-core-color-cribl-teal-9); --cds2-color-brand-a1: var(--cds2-core-color-cribl-teal-a1); --cds2-color-brand-a10: var(--cds2-core-color-cribl-teal-a10); --cds2-color-brand-a11: var(--cds2-core-color-cribl-teal-a11); --cds2-color-brand-a12: var(--cds2-core-color-cribl-teal-a12); --cds2-color-brand-a2: var(--cds2-core-color-cribl-teal-a2); --cds2-color-brand-a3: var(--cds2-core-color-cribl-teal-a3); --cds2-color-brand-a4: var(--cds2-core-color-cribl-teal-a4); --cds2-color-brand-a5: var(--cds2-core-color-cribl-teal-a5); --cds2-color-brand-a6: var(--cds2-core-color-cribl-teal-a6); --cds2-color-brand-a7: var(--cds2-core-color-cribl-teal-a7); --cds2-color-brand-a8: var(--cds2-core-color-cribl-teal-a8); --cds2-color-brand-a9: var(--cds2-core-color-cribl-teal-a9); --cds2-color-brand-contrast: var(--cds2-core-color-cribl-teal-contrast); --cds2-color-brand-indicator: var(--cds2-core-color-cribl-teal-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-brand-surface: var(--cds2-core-color-cribl-teal-surface); /** Surface color, used by certain component variants. */ --cds2-color-brand-track: var(--cds2-core-color-cribl-teal-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-danger-1: var(--cds2-core-color-red-1); --cds2-color-danger-10: var(--cds2-core-color-red-10); --cds2-color-danger-11: var(--cds2-core-color-red-11); --cds2-color-danger-12: var(--cds2-core-color-red-12); --cds2-color-danger-2: var(--cds2-core-color-red-2); --cds2-color-danger-3: var(--cds2-core-color-red-3); --cds2-color-danger-4: var(--cds2-core-color-red-4); --cds2-color-danger-5: var(--cds2-core-color-red-5); --cds2-color-danger-6: var(--cds2-core-color-red-6); --cds2-color-danger-7: var(--cds2-core-color-red-7); --cds2-color-danger-8: var(--cds2-core-color-red-8); --cds2-color-danger-9: var(--cds2-core-color-red-9); --cds2-color-danger-a1: var(--cds2-core-color-red-a1); --cds2-color-danger-a10: var(--cds2-core-color-red-a10); --cds2-color-danger-a11: var(--cds2-core-color-red-a11); --cds2-color-danger-a12: var(--cds2-core-color-red-a12); --cds2-color-danger-a2: var(--cds2-core-color-red-a2); --cds2-color-danger-a3: var(--cds2-core-color-red-a3); --cds2-color-danger-a4: var(--cds2-core-color-red-a4); --cds2-color-danger-a5: var(--cds2-core-color-red-a5); --cds2-color-danger-a6: var(--cds2-core-color-red-a6); --cds2-color-danger-a7: var(--cds2-core-color-red-a7); --cds2-color-danger-a8: var(--cds2-core-color-red-a8); --cds2-color-danger-a9: var(--cds2-core-color-red-a9); --cds2-color-danger-contrast: var(--cds2-core-color-red-contrast); --cds2-color-danger-indicator: var(--cds2-core-color-red-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-danger-surface: var(--cds2-core-color-red-surface); /** Surface color, used by certain component variants. */ --cds2-color-danger-track: var(--cds2-core-color-red-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-foreground-accent-contrast: var(--cds2-color-accent-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-accent-default: var(--cds2-color-accent-11); /** Default foreground color for elements. */ --cds2-color-foreground-accent-strong: var(--cds2-color-accent-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-brand-contrast: var(--cds2-color-brand-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-brand-default: var(--cds2-color-brand-11); /** Default foreground color for elements. */ --cds2-color-foreground-brand-strong: var(--cds2-color-brand-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-danger-contrast: var(--cds2-color-danger-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-danger-default: var(--cds2-color-danger-11); /** Default foreground color for elements. */ --cds2-color-foreground-danger-strong: var(--cds2-color-danger-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-default: var(--cds2-color-neutral-12); /** Primary foreground color for body text. */ --cds2-color-foreground-disabled: var(--cds2-color-neutral-11); /** Foreground color for disabled body text. */ --cds2-color-foreground-highlight-contrast: var(--cds2-color-highlight-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-highlight-default: var(--cds2-color-highlight-11); /** Default foreground color for elements. */ --cds2-color-foreground-highlight-strong: var(--cds2-color-highlight-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-info-contrast: var(--cds2-color-info-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-info-default: var(--cds2-color-info-11); /** Default foreground color for elements. */ --cds2-color-foreground-info-strong: var(--cds2-color-info-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-link: var(--cds2-color-foreground-accent-default); /** Color for hyperlinked text. */ --cds2-color-foreground-neutral-contrast: var(--cds2-color-neutral-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-neutral-default: var(--cds2-color-neutral-11); /** Default foreground color for elements. */ --cds2-color-foreground-neutral-strong: var(--cds2-color-neutral-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-on-disabled: var(--cds2-color-neutral-8); /** Foreground color for text shown when on disabled background. */ --cds2-color-foreground-placeholder: var(--cds2-color-neutral-10); /** Foreground color for form input placeholder text. */ --cds2-color-foreground-subtle: var(--cds2-color-neutral-11); /** Subtle foreground color for body text. */ --cds2-color-foreground-success-contrast: var(--cds2-color-success-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-success-default: var(--cds2-color-success-11); /** Default foreground color for elements. */ --cds2-color-foreground-success-strong: var(--cds2-color-success-12); /** High contrast foreground color for elements. */ --cds2-color-foreground-warning-contrast: var(--cds2-color-warning-contrast); /** Foreground color when placed on solid background colors. */ --cds2-color-foreground-warning-default: var(--cds2-color-warning-11); /** Default foreground color for elements. */ --cds2-color-foreground-warning-strong: var(--cds2-color-warning-12); /** High contrast foreground color for elements. */ --cds2-color-highlight-1: var(--cds2-core-color-purple-1); --cds2-color-highlight-10: var(--cds2-core-color-purple-10); --cds2-color-highlight-11: var(--cds2-core-color-purple-11); --cds2-color-highlight-12: var(--cds2-core-color-purple-12); --cds2-color-highlight-2: var(--cds2-core-color-purple-2); --cds2-color-highlight-3: var(--cds2-core-color-purple-3); --cds2-color-highlight-4: var(--cds2-core-color-purple-4); --cds2-color-highlight-5: var(--cds2-core-color-purple-5); --cds2-color-highlight-6: var(--cds2-core-color-purple-6); --cds2-color-highlight-7: var(--cds2-core-color-purple-7); --cds2-color-highlight-8: var(--cds2-core-color-purple-8); --cds2-color-highlight-9: var(--cds2-core-color-purple-9); --cds2-color-highlight-a1: var(--cds2-core-color-purple-a1); --cds2-color-highlight-a10: var(--cds2-core-color-purple-a10); --cds2-color-highlight-a11: var(--cds2-core-color-purple-a11); --cds2-color-highlight-a12: var(--cds2-core-color-purple-a12); --cds2-color-highlight-a2: var(--cds2-core-color-purple-a2); --cds2-color-highlight-a3: var(--cds2-core-color-purple-a3); --cds2-color-highlight-a4: var(--cds2-core-color-purple-a4); --cds2-color-highlight-a5: var(--cds2-core-color-purple-a5); --cds2-color-highlight-a6: var(--cds2-core-color-purple-a6); --cds2-color-highlight-a7: var(--cds2-core-color-purple-a7); --cds2-color-highlight-a8: var(--cds2-core-color-purple-a8); --cds2-color-highlight-a9: var(--cds2-core-color-purple-a9); --cds2-color-highlight-contrast: var(--cds2-core-color-purple-contrast); --cds2-color-highlight-indicator: var(--cds2-core-color-purple-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-highlight-surface: var(--cds2-core-color-purple-surface); /** Surface color, used by certain component variants. */ --cds2-color-highlight-track: var(--cds2-core-color-purple-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-info-1: var(--cds2-core-color-blue-1); --cds2-color-info-10: var(--cds2-core-color-blue-10); --cds2-color-info-11: var(--cds2-core-color-blue-11); --cds2-color-info-12: var(--cds2-core-color-blue-12); --cds2-color-info-2: var(--cds2-core-color-blue-2); --cds2-color-info-3: var(--cds2-core-color-blue-3); --cds2-color-info-4: var(--cds2-core-color-blue-4); --cds2-color-info-5: var(--cds2-core-color-blue-5); --cds2-color-info-6: var(--cds2-core-color-blue-6); --cds2-color-info-7: var(--cds2-core-color-blue-7); --cds2-color-info-8: var(--cds2-core-color-blue-8); --cds2-color-info-9: var(--cds2-core-color-blue-9); --cds2-color-info-a1: var(--cds2-core-color-blue-a1); --cds2-color-info-a10: var(--cds2-core-color-blue-a10); --cds2-color-info-a11: var(--cds2-core-color-blue-a11); --cds2-color-info-a12: var(--cds2-core-color-blue-a12); --cds2-color-info-a2: var(--cds2-core-color-blue-a2); --cds2-color-info-a3: var(--cds2-core-color-blue-a3); --cds2-color-info-a4: var(--cds2-core-color-blue-a4); --cds2-color-info-a5: var(--cds2-core-color-blue-a5); --cds2-color-info-a6: var(--cds2-core-color-blue-a6); --cds2-color-info-a7: var(--cds2-core-color-blue-a7); --cds2-color-info-a8: var(--cds2-core-color-blue-a8); --cds2-color-info-a9: var(--cds2-core-color-blue-a9); --cds2-color-info-contrast: var(--cds2-core-color-blue-contrast); --cds2-color-info-indicator: var(--cds2-core-color-blue-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-info-surface: var(--cds2-core-color-blue-surface); /** Surface color, used by certain component variants. */ --cds2-color-info-track: var(--cds2-core-color-blue-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-neutral-1: var(--cds2-core-color-slate-1); --cds2-color-neutral-10: var(--cds2-core-color-slate-10); --cds2-color-neutral-11: var(--cds2-core-color-slate-11); --cds2-color-neutral-12: var(--cds2-core-color-slate-12); --cds2-color-neutral-2: var(--cds2-core-color-slate-2); --cds2-color-neutral-3: var(--cds2-core-color-slate-3); --cds2-color-neutral-4: var(--cds2-core-color-slate-4); --cds2-color-neutral-5: var(--cds2-core-color-slate-5); --cds2-color-neutral-6: var(--cds2-core-color-slate-6); --cds2-color-neutral-7: var(--cds2-core-color-slate-7); --cds2-color-neutral-8: var(--cds2-core-color-slate-8); --cds2-color-neutral-9: var(--cds2-core-color-slate-9); --cds2-color-neutral-a1: var(--cds2-core-color-slate-a1); --cds2-color-neutral-a10: var(--cds2-core-color-slate-a10); --cds2-color-neutral-a11: var(--cds2-core-color-slate-a11); --cds2-color-neutral-a12: var(--cds2-core-color-slate-a12); --cds2-color-neutral-a2: var(--cds2-core-color-slate-a2); --cds2-color-neutral-a3: var(--cds2-core-color-slate-a3); --cds2-color-neutral-a4: var(--cds2-core-color-slate-a4); --cds2-color-neutral-a5: var(--cds2-core-color-slate-a5); --cds2-color-neutral-a6: var(--cds2-core-color-slate-a6); --cds2-color-neutral-a7: var(--cds2-core-color-slate-a7); --cds2-color-neutral-a8: var(--cds2-core-color-slate-a8); --cds2-color-neutral-a9: var(--cds2-core-color-slate-a9); --cds2-color-neutral-contrast: var(--cds2-core-color-slate-contrast); --cds2-color-neutral-indicator: var(--cds2-core-color-slate-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-neutral-surface: var(--cds2-core-color-slate-surface); /** Surface color, used by certain component variants. */ --cds2-color-neutral-track: var(--cds2-core-color-slate-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-success-1: var(--cds2-core-color-green-1); --cds2-color-success-10: var(--cds2-core-color-green-10); --cds2-color-success-11: var(--cds2-core-color-green-11); --cds2-color-success-12: var(--cds2-core-color-green-12); --cds2-color-success-2: var(--cds2-core-color-green-2); --cds2-color-success-3: var(--cds2-core-color-green-3); --cds2-color-success-4: var(--cds2-core-color-green-4); --cds2-color-success-5: var(--cds2-core-color-green-5); --cds2-color-success-6: var(--cds2-core-color-green-6); --cds2-color-success-7: var(--cds2-core-color-green-7); --cds2-color-success-8: var(--cds2-core-color-green-8); --cds2-color-success-9: var(--cds2-core-color-green-9); --cds2-color-success-a1: var(--cds2-core-color-green-a1); --cds2-color-success-a10: var(--cds2-core-color-green-a10); --cds2-color-success-a11: var(--cds2-core-color-green-a11); --cds2-color-success-a12: var(--cds2-core-color-green-a12); --cds2-color-success-a2: var(--cds2-core-color-green-a2); --cds2-color-success-a3: var(--cds2-core-color-green-a3); --cds2-color-success-a4: var(--cds2-core-color-green-a4); --cds2-color-success-a5: var(--cds2-core-color-green-a5); --cds2-color-success-a6: var(--cds2-core-color-green-a6); --cds2-color-success-a7: var(--cds2-core-color-green-a7); --cds2-color-success-a8: var(--cds2-core-color-green-a8); --cds2-color-success-a9: var(--cds2-core-color-green-a9); --cds2-color-success-contrast: var(--cds2-core-color-green-contrast); --cds2-color-success-indicator: var(--cds2-core-color-green-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-success-surface: var(--cds2-core-color-green-surface); /** Surface color, used by certain component variants. */ --cds2-color-success-track: var(--cds2-core-color-green-9); /** Used by components like Slider and Progress Bar. */ --cds2-color-warning-1: var(--cds2-core-color-amber-1); --cds2-color-warning-10: var(--cds2-core-color-amber-10); --cds2-color-warning-11: var(--cds2-core-color-amber-11); --cds2-color-warning-12: var(--cds2-core-color-amber-12); --cds2-color-warning-2: var(--cds2-core-color-amber-2); --cds2-color-warning-3: var(--cds2-core-color-amber-3); --cds2-color-warning-4: var(--cds2-core-color-amber-4); --cds2-color-warning-5: var(--cds2-core-color-amber-5); --cds2-color-warning-6: var(--cds2-core-color-amber-6); --cds2-color-warning-7: var(--cds2-core-color-amber-7); --cds2-color-warning-8: var(--cds2-core-color-amber-8); --cds2-color-warning-9: var(--cds2-core-color-amber-9); --cds2-color-warning-a1: var(--cds2-core-color-amber-a1); --cds2-color-warning-a10: var(--cds2-core-color-amber-a10); --cds2-color-warning-a11: var(--cds2-core-color-amber-a11); --cds2-color-warning-a12: var(--cds2-core-color-amber-a12); --cds2-color-warning-a2: var(--cds2-core-color-amber-a2); --cds2-color-warning-a3: var(--cds2-core-color-amber-a3); --cds2-color-warning-a4: var(--cds2-core-color-amber-a4); --cds2-color-warning-a5: var(--cds2-core-color-amber-a5); --cds2-color-warning-a6: var(--cds2-core-color-amber-a6); --cds2-color-warning-a7: var(--cds2-core-color-amber-a7); --cds2-color-warning-a8: var(--cds2-core-color-amber-a8); --cds2-color-warning-a9: var(--cds2-core-color-amber-a9); --cds2-color-warning-contrast: var(--cds2-core-color-amber-contrast); --cds2-color-warning-indicator: var(--cds2-core-color-amber-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-color-warning-surface: var(--cds2-core-color-amber-surface); /** Surface color, used by certain component variants. */ --cds2-color-warning-track: var(--cds2-core-color-amber-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-amber-1: #16120c; --cds2-core-color-amber-10: #ffdc00; --cds2-core-color-amber-11: #ffc916; --cds2-core-color-amber-12: #ffe7b3; --cds2-core-color-amber-2: #1d180f; --cds2-core-color-amber-3: #302008; --cds2-core-color-amber-4: #412700; --cds2-core-color-amber-5: #4e3000; --cds2-core-color-amber-6: #5c3d05; --cds2-core-color-amber-7: #714f1a; --cds2-core-color-amber-8: #8f6424; --cds2-core-color-amber-9: #ffc100; --cds2-core-color-amber-a1: #ff480004; --cds2-core-color-amber-a10: #ffd500; --cds2-core-color-amber-a11: #ffc800; --cds2-core-color-amber-a12: #ffe6ac; --cds2-core-color-amber-a2: #ffa3000c; --cds2-core-color-amber-a3: #ff96001e; --cds2-core-color-amber-a4: #ff8b002f; --cds2-core-color-amber-a5: #ff94003d; --cds2-core-color-amber-a6: #ffa5004c; --cds2-core-color-amber-a7: #ffb31a62; --cds2-core-color-amber-a8: #ffb62d80; --cds2-core-color-amber-a9: #ffc200; --cds2-core-color-amber-contrast: #21201c; --cds2-core-color-amber-indicator: var(--cds2-core-color-amber-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-amber-indicator: var(--cds2-core-color-amber-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-amber-surface: #271f1380; /** Surface color, used by certain component variants. */ --cds2-core-color-amber-track: var(--cds2-core-color-amber-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-amber-track: var(--cds2-core-color-amber-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-black-a1: #0000000d; --cds2-core-color-black-a10: #000c; --cds2-core-color-black-a11: #000000e6; --cds2-core-color-black-a12: #000000f2; --cds2-core-color-black-a2: #0000001a; --cds2-core-color-black-a3: #00000026; --cds2-core-color-black-a4: #0003; --cds2-core-color-black-a5: #0000004d; --cds2-core-color-black-a6: #0006; --cds2-core-color-black-a7: #00000080; --cds2-core-color-black-a8: #0009; --cds2-core-color-black-a9: #000000b3; --cds2-core-color-black-contrast: #fff; --cds2-core-color-blue-1: #0d1520; --cds2-core-color-blue-10: #3b9eff; --cds2-core-color-blue-11: #6abaff; --cds2-core-color-blue-12: #c2e6ff; --cds2-core-color-blue-2: #111927; --cds2-core-color-blue-3: #0d2847; --cds2-core-color-blue-4: #003362; --cds2-core-color-blue-5: #004074; --cds2-core-color-blue-6: #104d87; --cds2-core-color-blue-7: #205d9e; --cds2-core-color-blue-8: #2870bd; --cds2-core-color-blue-9: #0190ff; --cds2-core-color-blue-a1: #0057ff0f; --cds2-core-color-blue-a10: #3ea3fff8; --cds2-core-color-blue-a11: #55baff; --cds2-core-color-blue-a12: #b9e7ff; --cds2-core-color-blue-a2: #0071ff16; --cds2-core-color-blue-a3: #0078ff38; --cds2-core-color-blue-a4: #007bff53; --cds2-core-color-blue-a5: #0085ff66; --cds2-core-color-blue-a6: #0090ff79; --cds2-core-color-blue-a7: #2597ff92; --cds2-core-color-blue-a8: #2f99ffb3; --cds2-core-color-blue-a9: #0094fff7; --cds2-core-color-blue-contrast: #fff; --cds2-core-color-blue-indicator: var(--cds2-core-color-blue-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-blue-indicator: var(--cds2-core-color-blue-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-blue-surface: #11213d80; /** Surface color, used by certain component variants. */ --cds2-core-color-blue-track: var(--cds2-core-color-blue-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-blue-track: var(--cds2-core-color-blue-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-bronze-1: #141110; --cds2-core-color-bronze-10: #ae8d7e; --cds2-core-color-bronze-11: #d4b3a5; --cds2-core-color-bronze-12: #ede0d9; --cds2-core-color-bronze-2: #1c1918; --cds2-core-color-bronze-3: #262120; --cds2-core-color-bronze-4: #302a27; --cds2-core-color-bronze-5: #3b3330; --cds2-core-color-bronze-6: #493e3a; --cds2-core-color-bronze-7: #5a4d47; --cds2-core-color-bronze-8: #6f5f57; --cds2-core-color-bronze-9: #a18072; --cds2-core-color-bronze-a1: #ff000002; --cds2-core-color-bronze-a10: #ffd4bfa2; --cds2-core-color-bronze-a11: #ffd5c3d1; --cds2-core-color-bronze-a12: #fff0e8ec; --cds2-core-color-bronze-a2: #ffcab00b; --cds2-core-color-bronze-a3: #ffd7bf16; --cds2-core-color-bronze-a4: #ffd4c420; --cds2-core-color-bronze-a5: #ffdac22c; --cds2-core-color-bronze-a6: #ffdac83a; --cds2-core-color-bronze-a7: #ffdcc94b; --cds2-core-color-bronze-a8: #ffd9c663; --cds2-core-color-bronze-a9: #ffcfb795; --cds2-core-color-bronze-contrast: #fff; --cds2-core-color-bronze-indicator: var(--cds2-core-color-bronze-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-bronze-indicator: var(--cds2-core-color-bronze-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-bronze-surface: #27211d80; /** Surface color, used by certain component variants. */ --cds2-core-color-bronze-track: var(--cds2-core-color-bronze-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-bronze-track: var(--cds2-core-color-bronze-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-brown-1: #12110f; --cds2-core-color-brown-10: #b98c67; --cds2-core-color-brown-11: #dbb594; --cds2-core-color-brown-12: #f2e1ca; --cds2-core-color-brown-2: #1c1816; --cds2-core-color-brown-3: #28211d; --cds2-core-color-brown-4: #322922; --cds2-core-color-brown-5: #3e3128; --cds2-core-color-brown-6: #4d3c2f; --cds2-core-color-brown-7: #614a39; --cds2-core-color-brown-8: #7c5f46; --cds2-core-color-brown-9: #ad7f58; --cds2-core-color-brown-a1: #ed000001; --cds2-core-color-brown-a10: #ffc790ad; --cds2-core-color-brown-a11: #ffcfa4d9; --cds2-core-color-brown-a12: #ffebd1f2; --cds2-core-color-brown-a2: #ffb07d0b; --cds2-core-color-brown-a3: #ffbb8b18; --cds2-core-color-brown-a4: #ffc09022; --cds2-core-color-brown-a5: #ffbf8e2e; --cds2-core-color-brown-a6: #ffc28f3d; --cds2-core-color-brown-a7: #ffc38c52; --cds2-core-color-brown-a8: #ffc4896e; --cds2-core-color-brown-a9: #ffc182a0; --cds2-core-color-brown-contrast: #fff; --cds2-core-color-brown-indicator: var(--cds2-core-color-brown-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-brown-indicator: var(--cds2-core-color-brown-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-brown-surface: #271f1b80; /** Surface color, used by certain component variants. */ --cds2-core-color-brown-track: var(--cds2-core-color-brown-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-brown-track: var(--cds2-core-color-brown-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-cribl-teal-indicator: var(--cds2-core-color-cribl-teal-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-cribl-teal-track: var(--cds2-core-color-cribl-teal-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-criblteal-1: #051313; --cds2-core-color-criblteal-10: #00c1bf; --cds2-core-color-criblteal-11: #00d4d2; --cds2-core-color-criblteal-12: #a0f4f2; --cds2-core-color-criblteal-2: #071c1b; --cds2-core-color-criblteal-3: #002e2d; --cds2-core-color-criblteal-4: #003d3d; --cds2-core-color-criblteal-5: #004a49; --cds2-core-color-criblteal-6: #005958; --cds2-core-color-criblteal-7: #006c6b; --cds2-core-color-criblteal-8: #008483; --cds2-core-color-criblteal-9: #00ccc9; --cds2-core-color-criblteal-a1: #00efec02; --cds2-core-color-criblteal-a10: #00ffffbc; --cds2-core-color-criblteal-a11: #14ffffcf; --cds2-core-color-criblteal-a12: #beffffef; --cds2-core-color-criblteal-a2: #00f9f60b; --cds2-core-color-criblteal-a3: #00f5fb1e; --cds2-core-color-criblteal-a4: #00fffd2d; --cds2-core-color-criblteal-a5: #00fffe3b; --cds2-core-color-criblteal-a6: #00ffff4b; --cds2-core-color-criblteal-a7: #00ffff5f; --cds2-core-color-criblteal-a8: #00ffff7a; --cds2-core-color-criblteal-a9: #00ffffc6; --cds2-core-color-criblteal-contrast: #032727; --cds2-core-color-criblteal-indicator: var(--cds2-core-color-cribl-teal-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-criblteal-surface: #06252480; /** Surface color, used by certain component variants. */ --cds2-core-color-criblteal-track: var(--cds2-core-color-cribl-teal-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-crimson-1: #191114; --cds2-core-color-crimson-10: #ee528a; --cds2-core-color-crimson-11: #ff8ca9; --cds2-core-color-crimson-12: #fdd3e8; --cds2-core-color-crimson-2: #201318; --cds2-core-color-crimson-3: #381525; --cds2-core-color-crimson-4: #4d122f; --cds2-core-color-crimson-5: #5c1839; --cds2-core-color-crimson-6: #6d2445; --cds2-core-color-crimson-7: #873357; --cds2-core-color-crimson-8: #b0436e; --cds2-core-color-crimson-9: #e93d82; --cds2-core-color-crimson-a1: #ff007808; --cds2-core-color-crimson-a10: #ff6aa0da; --cds2-core-color-crimson-a11: #ff8fae; --cds2-core-color-crimson-a12: #ffd3ebfd; --cds2-core-color-crimson-a2: #ff47930e; --cds2-core-color-crimson-a3: #ff3a9426; --cds2-core-color-crimson-a4: #ff2d933a; --cds2-core-color-crimson-a5: #ff3e9c49; --cds2-core-color-crimson-a6: #ff57a659; --cds2-core-color-crimson-a7: #ff69ab74; --cds2-core-color-crimson-a8: #ff6ba89d; --cds2-core-color-crimson-a9: #ff589ad4; --cds2-core-color-crimson-contrast: #fff; --cds2-core-color-crimson-indicator: var(--cds2-core-color-crimson-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-crimson-indicator: var(--cds2-core-color-crimson-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-crimson-surface: #2f151f80; /** Surface color, used by certain component variants. */ --cds2-core-color-crimson-track: var(--cds2-core-color-crimson-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-crimson-track: var(--cds2-core-color-crimson-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-cyan-1: #0b1619; --cds2-core-color-cyan-10: #23afd0; --cds2-core-color-cyan-11: #4ccce5; --cds2-core-color-cyan-12: #b6ecf7; --cds2-core-color-cyan-2: #101b20; --cds2-core-color-cyan-3: #082c36; --cds2-core-color-cyan-4: #003848; --cds2-core-color-cyan-5: #004558; --cds2-core-color-cyan-6: #045468; --cds2-core-color-cyan-7: #12677e; --cds2-core-color-cyan-8: #11809c; --cds2-core-color-cyan-9: #01a2c7; --cds2-core-color-cyan-a1: #00a8fa09; --cds2-core-color-cyan-a10: #1cd9ffc8; --cds2-core-color-cyan-a11: #00e5ffe5; --cds2-core-color-cyan-a12: #abf5fff7; --cds2-core-color-cyan-a2: #00bdfe0f; --cds2-core-color-cyan-a3: #00bffd27; --cds2-core-color-cyan-a4: #00bbfc3a; --cds2-core-color-cyan-a5: #00c3fe4a; --cds2-core-color-cyan-a6: #00cdff5b; --cds2-core-color-cyan-a7: #00d1ff72; --cds2-core-color-cyan-a8: #00d3ff92; --cds2-core-color-cyan-a9: #00d4ffbf; --cds2-core-color-cyan-contrast: #fff; --cds2-core-color-cyan-indicator: var(--cds2-core-color-cyan-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-cyan-indicator: var(--cds2-core-color-cyan-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-cyan-surface: #11252d80; /** Surface color, used by certain component variants. */ --cds2-core-color-cyan-track: var(--cds2-core-color-cyan-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-cyan-track: var(--cds2-core-color-cyan-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-gold-1: #121211; --cds2-core-color-gold-10: #a39073; --cds2-core-color-gold-11: #cbb99f; --cds2-core-color-gold-12: #e8e2d9; --cds2-core-color-gold-2: #1b1a17; --cds2-core-color-gold-3: #24231f; --cds2-core-color-gold-4: #2e2b26; --cds2-core-color-gold-5: #38352f; --cds2-core-color-gold-6: #444039; --cds2-core-color-gold-7: #544f46; --cds2-core-color-gold-8: #696256; --cds2-core-color-gold-9: #978365; --cds2-core-color-gold-a1: #dada0001; --cds2-core-color-gold-a10: #ffe3b399; --cds2-core-color-gold-a11: #ffe6c2c8; --cds2-core-color-gold-a12: #fff7ece7; --cds2-core-color-gold-a2: #ffe2930b; --cds2-core-color-gold-a3: #fff1ba14; --cds2-core-color-gold-a4: #ffedc81e; --cds2-core-color-gold-a5: #fff1c929; --cds2-core-color-gold-a6: #ffebc837; --cds2-core-color-gold-a7: #fff0d047; --cds2-core-color-gold-a8: #ffeecd5d; --cds2-core-color-gold-a9: #ffe0a98d; --cds2-core-color-gold-contrast: #fff; --cds2-core-color-gold-indicator: var(--cds2-core-color-gold-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-gold-indicator: var(--cds2-core-color-gold-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-gold-surface: #25231d80; /** Surface color, used by certain component variants. */ --cds2-core-color-gold-track: var(--cds2-core-color-gold-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-gold-track: var(--cds2-core-color-gold-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-grass-1: #0e1511; --cds2-core-color-grass-10: #53b365; --cds2-core-color-grass-11: #71d083; --cds2-core-color-grass-12: #c2f0c2; --cds2-core-color-grass-2: #141a15; --cds2-core-color-grass-3: #1b2a1e; --cds2-core-color-grass-4: #1d3a24; --cds2-core-color-grass-5: #25482d; --cds2-core-color-grass-6: #2d5736; --cds2-core-color-grass-7: #366740; --cds2-core-color-grass-8: #3e7949; --cds2-core-color-grass-9: #46a758; --cds2-core-color-grass-a1: #00f92e04; --cds2-core-color-grass-a10: #72ff8dac; --cds2-core-color-grass-a11: #51ff94cd; --cds2-core-color-grass-a12: #c1ffc9ef; --cds2-core-color-grass-a2: #26ff880a; --cds2-core-color-grass-a3: #59ff8a1b; --cds2-core-color-grass-a4: #40ff802b; --cds2-core-color-grass-a5: #5aff893a; --cds2-core-color-grass-a6: #6aff8f4a; --cds2-core-color-grass-a7: #73ff925b; --cds2-core-color-grass-a8: #75ff936e; --cds2-core-color-grass-a9: #64ff839f; --cds2-core-color-grass-contrast: #fff; --cds2-core-color-grass-indicator: var(--cds2-core-color-grass-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-grass-indicator: var(--cds2-core-color-grass-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-grass-surface: #19231b80; /** Surface color, used by certain component variants. */ --cds2-core-color-grass-track: var(--cds2-core-color-grass-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-grass-track: var(--cds2-core-color-grass-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-gray-1: #111; --cds2-core-color-gray-10: #7b7b7b; --cds2-core-color-gray-11: #b4b4b4; --cds2-core-color-gray-12: #eee; --cds2-core-color-gray-2: #191919; --cds2-core-color-gray-3: #222; --cds2-core-color-gray-4: #2a2a2a; --cds2-core-color-gray-5: #313131; --cds2-core-color-gray-6: #3a3a3a; --cds2-core-color-gray-7: #484848; --cds2-core-color-gray-8: #606060; --cds2-core-color-gray-9: #6e6e6e; --cds2-core-color-gray-a1: #000; --cds2-core-color-gray-a10: #ffffff71; --cds2-core-color-gray-a11: #ffffffaf; --cds2-core-color-gray-a12: #ffffffed; --cds2-core-color-gray-a2: #ffffff09; --cds2-core-color-gray-a3: #ffffff12; --cds2-core-color-gray-a4: #ffffff1b; --cds2-core-color-gray-a5: #fff2; --cds2-core-color-gray-a6: #ffffff2c; --cds2-core-color-gray-a7: #ffffff3b; --cds2-core-color-gray-a8: #fff5; --cds2-core-color-gray-a9: #ffffff64; --cds2-core-color-gray-contrast: #fff; --cds2-core-color-gray-indicator: var(--cds2-core-color-gray-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-gray-indicator: var(--cds2-core-color-gray-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-gray-surface: #21212180; /** Surface color, used by certain component variants. */ --cds2-core-color-gray-track: var(--cds2-core-color-gray-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-gray-track: var(--cds2-core-color-gray-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-green-1: #0e1512; --cds2-core-color-green-10: #33b074; --cds2-core-color-green-11: #3dd68c; --cds2-core-color-green-12: #b1f1cb; --cds2-core-color-green-2: #121b17; --cds2-core-color-green-3: #132d21; --cds2-core-color-green-4: #113b29; --cds2-core-color-green-5: #174933; --cds2-core-color-green-6: #1f573e; --cds2-core-color-green-7: #28684a; --cds2-core-color-green-8: #2f7c57; --cds2-core-color-green-9: #30a46c; --cds2-core-color-green-a1: #00fa5604; --cds2-core-color-green-a10: #3bffa6a8; --cds2-core-color-green-a11: #00ffa2d4; --cds2-core-color-green-a12: #a6ffd4f0; --cds2-core-color-green-a2: #00fd950b; --cds2-core-color-green-a3: #00ff9f1d; --cds2-core-color-green-a4: #00ff9b2c; --cds2-core-color-green-a5: #00ffa53b; --cds2-core-color-green-a6: #19ffad4a; --cds2-core-color-green-a7: #41ffad5c; --cds2-core-color-green-a8: #4cffb171; --cds2-core-color-green-a9: #39ffa69c; --cds2-core-color-green-contrast: #fff; --cds2-core-color-green-indicator: var(--cds2-core-color-green-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-green-indicator: var(--cds2-core-color-green-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-green-surface: #15251d80; /** Surface color, used by certain component variants. */ --cds2-core-color-green-track: var(--cds2-core-color-green-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-green-track: var(--cds2-core-color-green-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-indigo-1: #11131f; --cds2-core-color-indigo-10: #5472e4; --cds2-core-color-indigo-11: #9db1ff; --cds2-core-color-indigo-12: #d6e1ff; --cds2-core-color-indigo-2: #141726; --cds2-core-color-indigo-3: #182449; --cds2-core-color-indigo-4: #1d2e61; --cds2-core-color-indigo-5: #253974; --cds2-core-color-indigo-6: #304384; --cds2-core-color-indigo-7: #3a4f97; --cds2-core-color-indigo-8: #435db2; --cds2-core-color-indigo-9: #3e63dd; --cds2-core-color-indigo-a1: #0037ff0e; --cds2-core-color-indigo-a10: #6082ffdb; --cds2-core-color-indigo-a11: #99b2ff; --cds2-core-color-indigo-a12: #d3e1ff; --cds2-core-color-indigo-a2: #3959ff16; --cds2-core-color-indigo-a3: #2f68ff39; --cds2-core-color-indigo-a4: #356cff53; --cds2-core-color-indigo-a5: #4574ff66; --cds2-core-color-indigo-a6: #527eff77; --cds2-core-color-indigo-a7: #5a83ff8b; --cds2-core-color-indigo-a8: #5f85ffa6; --cds2-core-color-indigo-a9: #4774ffd2; --cds2-core-color-indigo-contrast: #fff; --cds2-core-color-indigo-indicator: var(--cds2-core-color-indigo-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-indigo-indicator: var(--cds2-core-color-indigo-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-indigo-surface: #171d3b80; /** Surface color, used by certain component variants. */ --cds2-core-color-indigo-track: var(--cds2-core-color-indigo-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-indigo-track: var(--cds2-core-color-indigo-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-iris-1: #13131e; --cds2-core-color-iris-10: #6e6ade; --cds2-core-color-iris-11: #b0a9ff; --cds2-core-color-iris-12: #e0dffe; --cds2-core-color-iris-2: #171625; --cds2-core-color-iris-3: #202248; --cds2-core-color-iris-4: #262a65; --cds2-core-color-iris-5: #303374; --cds2-core-color-iris-6: #3d3d82; --cds2-core-color-iris-7: #4a4a95; --cds2-core-color-iris-8: #5a58b1; --cds2-core-color-iris-9: #5b5bd6; --cds2-core-color-iris-a1: #3939ff0d; --cds2-core-color-iris-a10: #817cffd4; --cds2-core-color-iris-a11: #b3a9ff; --cds2-core-color-iris-a12: #e1e0fffe; --cds2-core-color-iris-a2: #5f50ff14; --cds2-core-color-iris-a3: #5a5fff38; --cds2-core-color-iris-a4: #515cff56; --cds2-core-color-iris-a5: #6066ff66; --cds2-core-color-iris-a6: #7272ff74; --cds2-core-color-iris-a7: #7c7cff88; --cds2-core-color-iris-a8: #807effa6; --cds2-core-color-iris-a9: #6e6effcc; --cds2-core-color-iris-contrast: #fff; --cds2-core-color-iris-indicator: var(--cds2-core-color-iris-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-iris-indicator: var(--cds2-core-color-iris-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-iris-surface: #1d1b3980; /** Surface color, used by certain component variants. */ --cds2-core-color-iris-track: var(--cds2-core-color-iris-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-iris-track: var(--cds2-core-color-iris-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-jade-1: #0d1512; --cds2-core-color-jade-10: #27b08b; --cds2-core-color-jade-11: #1ed8a4; --cds2-core-color-jade-12: #adf0d4; --cds2-core-color-jade-2: #121c18; --cds2-core-color-jade-3: #0f2e23; --cds2-core-color-jade-4: #0a3b2c; --cds2-core-color-jade-5: #104837; --cds2-core-color-jade-6: #1b5645; --cds2-core-color-jade-7: #246854; --cds2-core-color-jade-8: #2a7e68; --cds2-core-color-jade-9: #29a383; --cds2-core-color-jade-a1: #00fa5604; --cds2-core-color-jade-a10: #1effcda7; --cds2-core-color-jade-a11: #00fdc0d6; --cds2-core-color-jade-a12: #a2ffdfef; --cds2-core-color-jade-a2: #00fea10c; --cds2-core-color-jade-a3: #00ffa71e; --cds2-core-color-jade-a4: #00ffb02c; --cds2-core-color-jade-a5: #00ffb83a; --cds2-core-color-jade-a6: #00ffc749; --cds2-core-color-jade-a7: #2dffca5c; --cds2-core-color-jade-a8: #3bffd273; --cds2-core-color-jade-a9: #21ffcd9b; --cds2-core-color-jade-contrast: #fff; --cds2-core-color-jade-indicator: var(--cds2-core-color-jade-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-jade-indicator: var(--cds2-core-color-jade-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-jade-surface: #13271f80; /** Surface color, used by certain component variants. */ --cds2-core-color-jade-track: var(--cds2-core-color-jade-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-jade-track: var(--cds2-core-color-jade-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-lime-1: #11130c; --cds2-core-color-lime-10: #d4ff70; --cds2-core-color-lime-11: #bde56b; --cds2-core-color-lime-12: #e3f7ba; --cds2-core-color-lime-2: #151a10; --cds2-core-color-lime-3: #1f2917; --cds2-core-color-lime-4: #29371d; --cds2-core-color-lime-5: #334423; --cds2-core-color-lime-6: #3d522a; --cds2-core-color-lime-7: #496231; --cds2-core-color-lime-8: #577538; --cds2-core-color-lime-9: #bdee63; --cds2-core-color-lime-a1: #00ed1e02; --cds2-core-color-lime-a10: #d6ff71fe; --cds2-core-color-lime-a11: #c5ff5ee4; --cds2-core-color-lime-a12: #e4ffb8f7; --cds2-core-color-lime-a2: #73ff000a; --cds2-core-color-lime-a3: #96ff3b1a; --cds2-core-color-lime-a4: #a5ff5329; --cds2-core-color-lime-a5: #abff6037; --cds2-core-color-lime-a6: #b3ff6446; --cds2-core-color-lime-a7: #b3ff6d57; --cds2-core-color-lime-a8: #b8ff6e6a; --cds2-core-color-lime-a9: #cbff6aec; --cds2-core-color-lime-contrast: #1d211c; --cds2-core-color-lime-indicator: var(--cds2-core-color-lime-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-lime-indicator: var(--cds2-core-color-lime-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-lime-surface: #1b211580; /** Surface color, used by certain component variants. */ --cds2-core-color-lime-track: var(--cds2-core-color-lime-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-lime-track: var(--cds2-core-color-lime-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-mauve-1: #121113; --cds2-core-color-mauve-10: #7d7a85; --cds2-core-color-mauve-11: #b5b2bc; --cds2-core-color-mauve-12: #eeeef0; --cds2-core-color-mauve-2: #1a191b; --cds2-core-color-mauve-3: #232225; --cds2-core-color-mauve-4: #2b292d; --cds2-core-color-mauve-5: #323035; --cds2-core-color-mauve-6: #3c393f; --cds2-core-color-mauve-7: #49474e; --cds2-core-color-mauve-8: #625f69; --cds2-core-color-mauve-9: #6f6d78; --cds2-core-color-mauve-a1: #000; --cds2-core-color-mauve-a10: #f1ecff7a; --cds2-core-color-mauve-a11: #f6f5ffb6; --cds2-core-color-mauve-a12: #fdfdffef; --cds2-core-color-mauve-a2: #fefdff09; --cds2-core-color-mauve-a3: #efeefe14; --cds2-core-color-mauve-a4: #f6eaff1c; --cds2-core-color-mauve-a5: #f1e7ff25; --cds2-core-color-mauve-a6: #f5ecff2f; --cds2-core-color-mauve-a7: #f2edff3f; --cds2-core-color-mauve-a8: #f0eaff5c; --cds2-core-color-mauve-a9: #efeaff6c; --cds2-core-color-mauve-contrast: #fff; --cds2-core-color-mauve-indicator: var(--cds2-core-color-mauve-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-mauve-indicator: var(--cds2-core-color-mauve-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-mauve-surface: #22212380; /** Surface color, used by certain component variants. */ --cds2-core-color-mauve-track: var(--cds2-core-color-mauve-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-mauve-track: var(--cds2-core-color-mauve-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-mint-1: #0d1515; --cds2-core-color-mint-10: #a8f5e5; --cds2-core-color-mint-11: #58d5ba; --cds2-core-color-mint-12: #c4f5e1; --cds2-core-color-mint-2: #0f1b1b; --cds2-core-color-mint-3: #092c2b; --cds2-core-color-mint-4: #003a39; --cds2-core-color-mint-5: #004744; --cds2-core-color-mint-6: #0f5650; --cds2-core-color-mint-7: #1e685f; --cds2-core-color-mint-8: #277f70; --cds2-core-color-mint-9: #86ead4; --cds2-core-color-mint-a1: #00fcf904; --cds2-core-color-mint-a10: #b0fff0f2; --cds2-core-color-mint-a11: #00ffddd2; --cds2-core-color-mint-a12: #bdffe8f5; --cds2-core-color-mint-a2: #00f9f60b; --cds2-core-color-mint-a3: #00fefb1c; --cds2-core-color-mint-a4: #00fdf52b; --cds2-core-color-mint-a5: #00fff139; --cds2-core-color-mint-a6: #00ffee49; --cds2-core-color-mint-a7: #00ffe95c; --cds2-core-color-mint-a8: #2dffe274; --cds2-core-color-mint-a9: #92ffe8e7; --cds2-core-color-mint-contrast: #1a211e; --cds2-core-color-mint-indicator: var(--cds2-core-color-mint-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-mint-indicator: var(--cds2-core-color-mint-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-mint-surface: #15272780; /** Surface color, used by certain component variants. */ --cds2-core-color-mint-track: var(--cds2-core-color-mint-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-mint-track: var(--cds2-core-color-mint-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-olive-1: #111210; --cds2-core-color-olive-10: #767d74; --cds2-core-color-olive-11: #afb5ad; --cds2-core-color-olive-12: #eceeec; --cds2-core-color-olive-2: #181917; --cds2-core-color-olive-3: #212220; --cds2-core-color-olive-4: #282a27; --cds2-core-color-olive-5: #2f312e; --cds2-core-color-olive-6: #383a37; --cds2-core-color-olive-7: #454943; --cds2-core-color-olive-8: #5c625b; --cds2-core-color-olive-9: #687066; --cds2-core-color-olive-a1: #000; --cds2-core-color-olive-a10: #f0ffef73; --cds2-core-color-olive-a11: #f7fff5af; --cds2-core-color-olive-a12: #fcfffded; --cds2-core-color-olive-a2: #fbfcf908; --cds2-core-color-olive-a3: #fdfefc11; --cds2-core-color-olive-a4: #f0fef11a; --cds2-core-color-olive-a5: #f5fff521; --cds2-core-color-olive-a6: #f7fff62b; --cds2-core-color-olive-a7: #f9fff43a; --cds2-core-color-olive-a8: #f3fff355; --cds2-core-color-olive-a9: #efffe965; --cds2-core-color-olive-contrast: #fff; --cds2-core-color-olive-indicator: var(--cds2-core-color-olive-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-olive-indicator: var(--cds2-core-color-olive-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-olive-surface: #1f201e80; /** Surface color, used by certain component variants. */ --cds2-core-color-olive-track: var(--cds2-core-color-olive-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-olive-track: var(--cds2-core-color-olive-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-orange-1: #17120e; --cds2-core-color-orange-10: #ff7b24; --cds2-core-color-orange-11: #ff9d59; --cds2-core-color-orange-12: #ffe0c2; --cds2-core-color-orange-2: #1e160f; --cds2-core-color-orange-3: #331e0b; --cds2-core-color-orange-4: #481f00; --cds2-core-color-orange-5: #562800; --cds2-core-color-orange-6: #66350c; --cds2-core-color-orange-7: #7e451d; --cds2-core-color-orange-8: #a35829; --cds2-core-color-orange-9: #f76a15; --cds2-core-color-orange-a1: #ff2b0006; --cds2-core-color-orange-a10: #ff8235fa; --cds2-core-color-orange-a11: #ff9d4e; --cds2-core-color-orange-a12: #ffdfbe; --cds2-core-color-orange-a2: #ff83000d; --cds2-core-color-orange-a3: #ff790021; --cds2-core-color-orange-a4: #ff5f0036; --cds2-core-color-orange-a5: #ff720044; --cds2-core-color-orange-a6: #ff840a55; --cds2-core-color-orange-a7: #ff8e366d; --cds2-core-color-orange-a8: #ff924592; --cds2-core-color-orange-a9: #ff7c32e4; --cds2-core-color-orange-contrast: #fff; --cds2-core-color-orange-indicator: var(--cds2-core-color-orange-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-orange-indicator: var(--cds2-core-color-orange-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-orange-surface: #271d1380; /** Surface color, used by certain component variants. */ --cds2-core-color-orange-track: var(--cds2-core-color-orange-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-orange-track: var(--cds2-core-color-orange-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-pink-1: #191117; --cds2-core-color-pink-10: #de51a8; --cds2-core-color-pink-11: #ff87c8; --cds2-core-color-pink-12: #fdd1ea; --cds2-core-color-pink-2: #21121d; --cds2-core-color-pink-3: #37172f; --cds2-core-color-pink-4: #4b143d; --cds2-core-color-pink-5: #591c47; --cds2-core-color-pink-6: #692955; --cds2-core-color-pink-7: #833869; --cds2-core-color-pink-8: #a84885; --cds2-core-color-pink-9: #d6409f; --cds2-core-color-pink-a1: #ff0edb08; --cds2-core-color-pink-a10: #ff6fcbcb; --cds2-core-color-pink-a11: #ff8bcd; --cds2-core-color-pink-a12: #ffd1edfd; --cds2-core-color-pink-a2: #ff3bcc0f; --cds2-core-color-pink-a3: #ff51e123; --cds2-core-color-pink-a4: #ff3ad038; --cds2-core-color-pink-a5: #ff4dd246; --cds2-core-color-pink-a6: #ff66d556; --cds2-core-color-pink-a7: #ff75d571; --cds2-core-color-pink-a8: #ff79d495; --cds2-core-color-pink-a9: #ff60c9c2; --cds2-core-color-pink-contrast: #fff; --cds2-core-color-pink-indicator: var(--cds2-core-color-pink-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-pink-indicator: var(--cds2-core-color-pink-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-pink-surface: #31132980; /** Surface color, used by certain component variants. */ --cds2-core-color-pink-track: var(--cds2-core-color-pink-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-pink-track: var(--cds2-core-color-pink-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-plum-1: #181118; --cds2-core-color-plum-10: #b658c4; --cds2-core-color-plum-11: #e796f3; --cds2-core-color-plum-12: #f4d4f4; --cds2-core-color-plum-2: #201320; --cds2-core-color-plum-3: #351935; --cds2-core-color-plum-4: #451d47; --cds2-core-color-plum-5: #502454; --cds2-core-color-plum-6: #5e3062; --cds2-core-color-plum-7: #734079; --cds2-core-color-plum-8: #92549c; --cds2-core-color-plum-9: #ab4aba; --cds2-core-color-plum-a1: #ff00fb07; --cds2-core-color-plum-a10: #f271ffbb; --cds2-core-color-plum-a11: #ff97fff3; --cds2-core-color-plum-a12: #ffdbfff4; --cds2-core-color-plum-a2: #ff2bff0f; --cds2-core-color-plum-a3: #fe45ff26; --cds2-core-color-plum-a4: #fc40ff38; --cds2-core-color-plum-a5: #fc57ff45; --cds2-core-color-plum-a6: #f86eff54; --cds2-core-color-plum-a7: #f681ff6c; --cds2-core-color-plum-a8: #f687ff91; --cds2-core-color-plum-a9: #f064ffb0; --cds2-core-color-plum-contrast: #fff; --cds2-core-color-plum-indicator: var(--cds2-core-color-plum-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-plum-indicator: var(--cds2-core-color-plum-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-plum-surface: #2f152f80; /** Surface color, used by certain component variants. */ --cds2-core-color-plum-track: var(--cds2-core-color-plum-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-plum-track: var(--cds2-core-color-plum-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-purple-1: #18111b; --cds2-core-color-purple-10: #9a5cd0; --cds2-core-color-purple-11: #d59cff; --cds2-core-color-purple-12: #ecd9fa; --cds2-core-color-purple-2: #1e1523; --cds2-core-color-purple-3: #2f1c3b; --cds2-core-color-purple-4: #3d224e; --cds2-core-color-purple-5: #48295c; --cds2-core-color-purple-6: #54346b; --cds2-core-color-purple-7: #664282; --cds2-core-color-purple-8: #8357aa; --cds2-core-color-purple-9: #8e4ec6; --cds2-core-color-purple-a1: #bf00ff0a; --cds2-core-color-purple-a10: #c071ffc6; --cds2-core-color-purple-a11: #db9aff; --cds2-core-color-purple-a12: #f5dcfffa; --cds2-core-color-purple-a2: #c73fff12; --cds2-core-color-purple-a3: #c552ff2b; --cds2-core-color-purple-a4: #c054ff3f; --cds2-core-color-purple-a5: #c462ff4d; --cds2-core-color-purple-a6: #c770ff5d; --cds2-core-color-purple-a7: #cb7dff75; --cds2-core-color-purple-a8: #c982ff9f; --cds2-core-color-purple-a9: #ba64ffbc; --cds2-core-color-purple-contrast: #fff; --cds2-core-color-purple-indicator: var(--cds2-core-color-purple-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-purple-indicator: var(--cds2-core-color-purple-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-purple-surface: #2b173580; /** Surface color, used by certain component variants. */ --cds2-core-color-purple-track: var(--cds2-core-color-purple-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-purple-track: var(--cds2-core-color-purple-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-red-1: #191111; --cds2-core-color-red-10: #ec5e5e; --cds2-core-color-red-11: #ff8f8c; --cds2-core-color-red-12: #ffd1d9; --cds2-core-color-red-2: #201314; --cds2-core-color-red-3: #3b1219; --cds2-core-color-red-4: #500e1c; --cds2-core-color-red-5: #611623; --cds2-core-color-red-6: #73232d; --cds2-core-color-red-7: #8c333a; --cds2-core-color-red-8: #b54548; --cds2-core-color-red-9: #e5484d; --cds2-core-color-red-a1: #ff000508; --cds2-core-color-red-a10: #ff7473da; --cds2-core-color-red-a11: #ff9292; --cds2-core-color-red-a12: #ffcfd9; --cds2-core-color-red-a2: #ff464a0e; --cds2-core-color-red-a3: #ff2d4928; --cds2-core-color-red-a4: #ff22483c; --cds2-core-color-red-a5: #ff37544d; --cds2-core-color-red-a6: #ff50645f; --cds2-core-color-red-a7: #ff656e79; --cds2-core-color-red-a8: #ff6c6fa2; --cds2-core-color-red-a9: #ff6264d1; --cds2-core-color-red-contrast: #fff; --cds2-core-color-red-indicator: var(--cds2-core-color-red-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-red-indicator: var(--cds2-core-color-red-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-red-surface: #2f151780; /** Surface color, used by certain component variants. */ --cds2-core-color-red-track: var(--cds2-core-color-red-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-red-track: var(--cds2-core-color-red-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-ruby-1: #191113; --cds2-core-color-ruby-10: #ec5a72; --cds2-core-color-ruby-11: #ff8f97; --cds2-core-color-ruby-12: #fed2e1; --cds2-core-color-ruby-2: #1e1517; --cds2-core-color-ruby-3: #3a141e; --cds2-core-color-ruby-4: #4e1325; --cds2-core-color-ruby-5: #5e1a2e; --cds2-core-color-ruby-6: #6f2539; --cds2-core-color-ruby-7: #883447; --cds2-core-color-ruby-8: #b3445a; --cds2-core-color-ruby-9: #e54666; --cds2-core-color-ruby-a1: #ff005508; --cds2-core-color-ruby-a10: #ff7087d8; --cds2-core-color-ruby-a11: #ff919d; --cds2-core-color-ruby-a12: #ffd1e3fe; --cds2-core-color-ruby-a2: #ff5c880d; --cds2-core-color-ruby-a3: #ff316a27; --cds2-core-color-ruby-a4: #ff2f6d3a; --cds2-core-color-ruby-a5: #ff43784a; --cds2-core-color-ruby-a6: #ff57835b; --cds2-core-color-ruby-a7: #ff688c75; --cds2-core-color-ruby-a8: #ff6c8ba0; --cds2-core-color-ruby-a9: #ff5f7dd1; --cds2-core-color-ruby-contrast: #fff; --cds2-core-color-ruby-indicator: var(--cds2-core-color-ruby-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-ruby-indicator: var(--cds2-core-color-ruby-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-ruby-surface: #2b191d80; /** Surface color, used by certain component variants. */ --cds2-core-color-ruby-track: var(--cds2-core-color-ruby-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-ruby-track: var(--cds2-core-color-ruby-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sage-1: #101211; --cds2-core-color-sage-10: #717d79; --cds2-core-color-sage-11: #adb5b2; --cds2-core-color-sage-12: #eceeed; --cds2-core-color-sage-2: #171918; --cds2-core-color-sage-3: #202221; --cds2-core-color-sage-4: #272a28; --cds2-core-color-sage-5: #2e3130; --cds2-core-color-sage-6: #373b39; --cds2-core-color-sage-7: #444947; --cds2-core-color-sage-8: #5b625f; --cds2-core-color-sage-9: #63706b; --cds2-core-color-sage-a1: #000; --cds2-core-color-sage-a10: #e9fff873; --cds2-core-color-sage-a11: #f5fffcaf; --cds2-core-color-sage-a12: #fcfffeed; --cds2-core-color-sage-a2: #f8fcfb08; --cds2-core-color-sage-a3: #fff0f012; --cds2-core-color-sage-a4: #fbfefd1a; --cds2-core-color-sage-a5: #fcfffe21; --cds2-core-color-sage-a6: #f7fff82c; --cds2-core-color-sage-a7: #f1fff83b; --cds2-core-color-sage-a8: #f1fffb55; --cds2-core-color-sage-a9: #e0fff365; --cds2-core-color-sage-contrast: #fff; --cds2-core-color-sage-indicator: var(--cds2-core-color-sage-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sage-indicator: var(--cds2-core-color-sage-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sage-surface: #1e201f80; /** Surface color, used by certain component variants. */ --cds2-core-color-sage-track: var(--cds2-core-color-sage-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sage-track: var(--cds2-core-color-sage-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sand-1: #111110; --cds2-core-color-sand-10: #7d7b74; --cds2-core-color-sand-11: #b5b3ad; --cds2-core-color-sand-12: #eeeeec; --cds2-core-color-sand-2: #191918; --cds2-core-color-sand-3: #222221; --cds2-core-color-sand-4: #2a2a28; --cds2-core-color-sand-5: #31312e; --cds2-core-color-sand-6: #3b3a37; --cds2-core-color-sand-7: #494844; --cds2-core-color-sand-8: #62605a; --cds2-core-color-sand-9: #6f6d66; --cds2-core-color-sand-a1: #000; --cds2-core-color-sand-a10: #fffdec73; --cds2-core-color-sand-a11: #fffef4af; --cds2-core-color-sand-a12: #fffffded; --cds2-core-color-sand-a2: #fdfdfc09; --cds2-core-color-sand-a3: #fefefd12; --cds2-core-color-sand-a4: #fdfdf21b; --cds2-core-color-sand-a5: #fffff522; --cds2-core-color-sand-a6: #fff9ec2d; --cds2-core-color-sand-a7: #fffbeb3c; --cds2-core-color-sand-a8: #fff9ea57; --cds2-core-color-sand-a9: #fffaea65; --cds2-core-color-sand-contrast: #fff; --cds2-core-color-sand-indicator: var(--cds2-core-color-sand-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sand-indicator: var(--cds2-core-color-sand-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sand-surface: #21212080; /** Surface color, used by certain component variants. */ --cds2-core-color-sand-track: var(--cds2-core-color-sand-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sand-track: var(--cds2-core-color-sand-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sky-1: #0d141e; --cds2-core-color-sky-10: #a8eeff; --cds2-core-color-sky-11: #75c7f0; --cds2-core-color-sky-12: #c2f3ff; --cds2-core-color-sky-2: #111a27; --cds2-core-color-sky-3: #112840; --cds2-core-color-sky-4: #113655; --cds2-core-color-sky-5: #154467; --cds2-core-color-sky-6: #1b537b; --cds2-core-color-sky-7: #1f6692; --cds2-core-color-sky-8: #197cae; --cds2-core-color-sky-9: #7ce2fe; --cds2-core-color-sky-a1: #0049ff0e; --cds2-core-color-sky-a10: #a9f0fffd; --cds2-core-color-sky-a11: #59d6ffef; --cds2-core-color-sky-a12: #b4f5ff; --cds2-core-color-sky-a2: #0079ff17; --cds2-core-color-sky-a3: #0087ff30; --cds2-core-color-sky-a4: #0097ff46; --cds2-core-color-sky-a5: #00a3ff59; --cds2-core-color-sky-a6: #0daaff6e; --cds2-core-color-sky-a7: #1db2ff86; --cds2-core-color-sky-a8: #05b8ffa4; --cds2-core-color-sky-a9: #7de7fffb; --cds2-core-color-sky-contrast: #1c2024; --cds2-core-color-sky-indicator: var(--cds2-core-color-sky-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sky-indicator: var(--cds2-core-color-sky-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-sky-surface: #13233b80; /** Surface color, used by certain component variants. */ --cds2-core-color-sky-track: var(--cds2-core-color-sky-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-sky-track: var(--cds2-core-color-sky-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-slate-1: #111113; --cds2-core-color-slate-10: #777b84; --cds2-core-color-slate-11: #b0b4ba; --cds2-core-color-slate-12: #edeef0; --cds2-core-color-slate-2: #18191b; --cds2-core-color-slate-3: #212225; --cds2-core-color-slate-4: #272a2d; --cds2-core-color-slate-5: #2e3135; --cds2-core-color-slate-6: #363a3f; --cds2-core-color-slate-7: #43484e; --cds2-core-color-slate-8: #5a6169; --cds2-core-color-slate-9: #696e77; --cds2-core-color-slate-a1: #000; --cds2-core-color-slate-a10: #e9f1ff79; --cds2-core-color-slate-a11: #f1f7ffb5; --cds2-core-color-slate-a12: #fcfdffef; --cds2-core-color-slate-a2: #d8feff09; --cds2-core-color-slate-a3: #deeeff14; --cds2-core-color-slate-a4: #ddf4ff1c; --cds2-core-color-slate-a5: #ddedff25; --cds2-core-color-slate-a6: #ddf3ff2f; --cds2-core-color-slate-a7: #deedff3f; --cds2-core-color-slate-a8: #daf0ff5c; --cds2-core-color-slate-a9: #e3efff6b; --cds2-core-color-slate-contrast: #fff; --cds2-core-color-slate-indicator: var(--cds2-core-color-slate-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-slate-indicator: var(--cds2-core-color-slate-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-slate-surface: #1f212380; /** Surface color, used by certain component variants. */ --cds2-core-color-slate-track: var(--cds2-core-color-slate-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-slate-track: var(--cds2-core-color-slate-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-teal-1: #0d1514; --cds2-core-color-teal-10: #0db39e; --cds2-core-color-teal-11: #0ad8b6; --cds2-core-color-teal-12: #adf0dd; --cds2-core-color-teal-2: #111c1b; --cds2-core-color-teal-3: #0d2d2a; --cds2-core-color-teal-4: #023b37; --cds2-core-color-teal-5: #084843; --cds2-core-color-teal-6: #145750; --cds2-core-color-teal-7: #1c6961; --cds2-core-color-teal-8: #1f7f74; --cds2-core-color-teal-9: #12a594; --cds2-core-color-teal-a1: #00fbc204; --cds2-core-color-teal-a10: #00ffe2ab; --cds2-core-color-teal-a11: #00fcd4d6; --cds2-core-color-teal-a12: #a2ffeaef; --cds2-core-color-teal-a2: #00fde50c; --cds2-core-color-teal-a3: #00ffe41e; --cds2-core-color-teal-a4: #00feeb2c; --cds2-core-color-teal-a5: #00ffed3a; --cds2-core-color-teal-a6: #00ffee49; --cds2-core-color-teal-a7: #00ffec5d; --cds2-core-color-teal-a8: #00ffec74; --cds2-core-color-teal-a9: #00ffe79c; --cds2-core-color-teal-contrast: #fff; --cds2-core-color-teal-indicator: var(--cds2-core-color-teal-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-teal-indicator: var(--cds2-core-color-teal-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-teal-surface: #13272580; /** Surface color, used by certain component variants. */ --cds2-core-color-teal-track: var(--cds2-core-color-teal-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-teal-track: var(--cds2-core-color-teal-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-tomato-1: #181111; --cds2-core-color-tomato-10: #ec6142; --cds2-core-color-tomato-11: #ff9272; --cds2-core-color-tomato-12: #fbd3cb; --cds2-core-color-tomato-2: #1f1513; --cds2-core-color-tomato-3: #391714; --cds2-core-color-tomato-4: #4e1511; --cds2-core-color-tomato-5: #5e1c16; --cds2-core-color-tomato-6: #6e2920; --cds2-core-color-tomato-7: #863a2d; --cds2-core-color-tomato-8: #ac4d39; --cds2-core-color-tomato-9: #e54d2e; --cds2-core-color-tomato-a1: #ff000007; --cds2-core-color-tomato-a10: #ff7856da; --cds2-core-color-tomato-a11: #ff947b; --cds2-core-color-tomato-a12: #ffd4ccfb; --cds2-core-color-tomato-a2: #ff5c360d; --cds2-core-color-tomato-a3: #ff462d26; --cds2-core-color-tomato-a4: #ff35223b; --cds2-core-color-tomato-a5: #ff48334a; --cds2-core-color-tomato-a6: #ff62485a; --cds2-core-color-tomato-a7: #ff735973; --cds2-core-color-tomato-a8: #ff7b5d99; --cds2-core-color-tomato-a9: #ff6644d1; --cds2-core-color-tomato-contrast: #fff; --cds2-core-color-tomato-indicator: var(--cds2-core-color-tomato-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-tomato-indicator: var(--cds2-core-color-tomato-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-tomato-surface: #2d191580; /** Surface color, used by certain component variants. */ --cds2-core-color-tomato-track: var(--cds2-core-color-tomato-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-tomato-track: var(--cds2-core-color-tomato-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-violet-1: #14121f; --cds2-core-color-violet-10: #7d66d9; --cds2-core-color-violet-11: #bba5ff; --cds2-core-color-violet-12: #e2ddfe; --cds2-core-color-violet-2: #1b1525; --cds2-core-color-violet-3: #291f44; --cds2-core-color-violet-4: #33255b; --cds2-core-color-violet-5: #3c2e69; --cds2-core-color-violet-6: #473876; --cds2-core-color-violet-7: #56468b; --cds2-core-color-violet-8: #6858ad; --cds2-core-color-violet-9: #6e56cf; --cds2-core-color-violet-a1: #4e22ff0e; --cds2-core-color-violet-a10: #987affcf; --cds2-core-color-violet-a11: #bea6ff; --cds2-core-color-violet-a12: #e4defffe; --cds2-core-color-violet-a2: #8c3fff14; --cds2-core-color-violet-a3: #8554ff34; --cds2-core-color-violet-a4: #8456ff4c; --cds2-core-color-violet-a5: #8c62ff5a; --cds2-core-color-violet-a6: #9773ff68; --cds2-core-color-violet-a7: #9b7dff7e; --cds2-core-color-violet-a8: #9c81ffa1; --cds2-core-color-violet-a9: #8a6bffc4; --cds2-core-color-violet-contrast: #fff; --cds2-core-color-violet-indicator: var(--cds2-core-color-violet-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-violet-indicator: var(--cds2-core-color-violet-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-violet-surface: #25193980; /** Surface color, used by certain component variants. */ --cds2-core-color-violet-track: var(--cds2-core-color-violet-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-violet-track: var(--cds2-core-color-violet-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-white-a1: #ffffff0d; --cds2-core-color-white-a10: #fffc; --cds2-core-color-white-a11: #ffffffe6; --cds2-core-color-white-a12: #fffffff2; --cds2-core-color-white-a2: #ffffff1a; --cds2-core-color-white-a3: #ffffff26; --cds2-core-color-white-a4: #fff3; --cds2-core-color-white-a5: #ffffff4d; --cds2-core-color-white-a6: #fff6; --cds2-core-color-white-a7: #ffffff80; --cds2-core-color-white-a8: #fff9; --cds2-core-color-white-a9: #ffffffb3; --cds2-core-color-white-contrast: #fff; --cds2-core-color-yellow-1: #14110b; --cds2-core-color-yellow-10: #ffff57; --cds2-core-color-yellow-11: #f5e147; --cds2-core-color-yellow-12: #f6eeb4; --cds2-core-color-yellow-2: #1b180f; --cds2-core-color-yellow-3: #2c2305; --cds2-core-color-yellow-4: #372b00; --cds2-core-color-yellow-5: #433500; --cds2-core-color-yellow-6: #524202; --cds2-core-color-yellow-7: #665417; --cds2-core-color-yellow-8: #836a20; --cds2-core-color-yellow-9: #ffea00; --cds2-core-color-yellow-a1: #ff550003; --cds2-core-color-yellow-a10: #ffff13; --cds2-core-color-yellow-a11: #ffe800f5; --cds2-core-color-yellow-a12: #fff6b2f6; --cds2-core-color-yellow-a2: #ffc8000a; --cds2-core-color-yellow-a3: #ffb3001c; --cds2-core-color-yellow-a4: #ffbb0027; --cds2-core-color-yellow-a5: #ffc10034; --cds2-core-color-yellow-a6: #ffce0043; --cds2-core-color-yellow-a7: #ffd20058; --cds2-core-color-yellow-a8: #ffd22376; --cds2-core-color-yellow-a9: #ffe500; --cds2-core-color-yellow-contrast: #21201c; --cds2-core-color-yellow-indicator: var(--cds2-core-color-yellow-9); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-yellow-indicator: var(--cds2-core-color-yellow-10); /** Used by components like Checkbox, Radio, and Tabs. */ --cds2-core-color-yellow-surface: #231f1380; /** Surface color, used by certain component variants. */ --cds2-core-color-yellow-track: var(--cds2-core-color-yellow-9); /** Used by components like Slider and Progress Bar. */ --cds2-core-color-yellow-track: var(--cds2-core-color-yellow-9); /** Used by components like Slider and Progress Bar. */ --cds2-shadow-wave: 0px 0px 0px 6px var(--cds2-color-border-focus); --cds2-shadow-wave: 0px 0px 0px 6px var(--cds2-color-border-focus); --cds2-temporary-input-background-disabled: #1d252d; --cds2-temporary-input-background-primary: #1f2c3c; --cds2-temporary-input-border-disabled: #111921; --cds2-temporary-input-border-highlight: #77b2c7; --cds2-temporary-input-border-primary: #585858; --cds2-temporary-input-foreground-disabled: #44505d; --cds2-temporary-input-foreground-placeholder: #54687f; --cds2-temporary-input-foreground-primary: #ffffffa6; } /** * This file is maintained temporarily until the new tokens work is complete and * all references to old variables has been removed in Capra. */ :root { --cds-border-badge: 1px solid var(--cds-core-color-white); --cds-border-focus: 2px solid var(--cds-color-border-accent); --cds-border-primary: 1px solid var(--cds-color-border-primary); --cds-brand-accent-purple-100: #F2F1FF; --cds-brand-accent-purple-200: #A5A3FF; --cds-brand-accent-purple-300: #5955FF; --cds-brand-accent-purple-400: #2D389A; --cds-brand-accent-purple-500: #021A35; --cds-brand-alpha-gray-10: #020e1b1a; --cds-brand-alpha-gray-2: #020e1b05; --cds-brand-alpha-gray-20: #020e1b33; --cds-brand-alpha-gray-30: #020e1b4d; --cds-brand-alpha-gray-40: #020e1b66; --cds-brand-alpha-gray-5: #020e1b0d; --cds-brand-alpha-gray-50: #020e1b80; --cds-brand-alpha-gray-60: #020e1b99; --cds-brand-alpha-gray-70: #020e1bb3; --cds-brand-alpha-gray-80: #020e1bcc; --cds-brand-alpha-gray-90: #020e1be6; --cds-brand-alpha-primary-10: #00CCCC1a; --cds-brand-alpha-primary-2: #00CCCC05; --cds-brand-alpha-primary-20: #00CCCC33; --cds-brand-alpha-primary-30: #00CCCC4d; --cds-brand-alpha-primary-40: #00CCCC66; --cds-brand-alpha-primary-5: #00CCCC0d; --cds-brand-alpha-primary-50: #00CCCC80; --cds-brand-alpha-primary-60: #00CCCC99; --cds-brand-alpha-primary-70: #00CCCCb3; --cds-brand-alpha-primary-80: #00CCCCcc; --cds-brand-alpha-primary-90: #00CCCCe6; --cds-brand-alpha-white-10: #FFFFFF1a; --cds-brand-alpha-white-2: #FFFFFF05; --cds-brand-alpha-white-20: #FFFFFF33; --cds-brand-alpha-white-30: #FFFFFF4d; --cds-brand-alpha-white-40: #FFFFFF66; --cds-brand-alpha-white-5: #FFFFFF0d; --cds-brand-alpha-white-50: #FFFFFF80; --cds-brand-alpha-white-60: #FFFFFF99; --cds-brand-alpha-white-70: #FFFFFFb3; --cds-brand-alpha-white-80: #FFFFFFcc; --cds-brand-alpha-white-90: #FFFFFFe6; --cds-brand-base-black: #000000; --cds-brand-base-white: #FFFFFF; --cds-brand-core-blue-100: #C5DDF8; --cds-brand-core-blue-200: #B0D1F5; --cds-brand-core-blue-25: #EFF6FD; --cds-brand-core-blue-300: #62A4EC; --cds-brand-core-blue-400: #0B6CD9; --cds-brand-core-blue-50: #DAEAFA; --cds-brand-core-blue-500: #0C55A5; --cds-brand-core-blue-600: #043469; --cds-brand-core-blue-700: #03274F; --cds-brand-core-blue-800: #021A35; --cds-brand-core-gray-100: #D6DADE; --cds-brand-core-gray-200: #C7CCD2; --cds-brand-core-gray-25: #F5F5F5; --cds-brand-core-gray-300: #73808F; --cds-brand-core-gray-400: #3B4E63; --cds-brand-core-gray-5: #FCFAF8; --cds-brand-core-gray-50: #E6E7E9; --cds-brand-core-gray-500: #020E1B; --cds-brand-core-teal-100: #99EBEB; --cds-brand-core-teal-200: #00FFFF; --cds-brand-core-teal-25: #ECFBFB; --cds-brand-core-teal-300: #00CCCC; --cds-brand-core-teal-400: #008080; --cds-brand-core-teal-50: #CCF5F5; --cds-brand-core-teal-500: #0A4E5B; --cds-brand-core-teal-600: #083B44; --cds-brand-core-teal-700: #002432; --cds-brand-fail-100: #FFDEE1; --cds-brand-fail-200: #FF8992; --cds-brand-fail-300: #FF3342; --cds-brand-fail-400: #A02029; --cds-brand-fail-500: #400D10; --cds-brand-pass-100: #9DFFBD; --cds-brand-pass-200: #00FF55; --cds-brand-pass-300: #05A758; --cds-brand-pass-400: #0A4E5B; --cds-brand-pass-50: #EBFFF1; --cds-brand-pass-500: #002432; --cds-brand-warn-100: #FFCF00; --cds-brand-warn-200: #FFAD00; --cds-brand-warn-25: #FFF7D5; --cds-brand-warn-300: #FF8B00; --cds-brand-warn-400: #A04C08; --cds-brand-warn-50: #FFE36B; --cds-brand-warn-500: #400D10; --cds-breakpoint-md: 600px; --cds-color-ai-purple: #8d10f3; --cds-color-ai-teal: var(--cds-brand-core-teal-300); --cds-color-alert-accent-border: var(--cds-core-color-blue-3); --cds-color-alert-attention-border: var(--cds-core-color-red-3); --cds-color-alert-highlight-border: var(--cds-core-color-purple-3); --cds-color-alert-success-border: var(--cds-core-color-green-3); --cds-color-alert-warning-border: var(--cds-core-color-gold-3); --cds-color-background-accent: var(--cds-core-color-blue-6); --cds-color-background-accent-muted: var(--cds-core-color-blue-1); --cds-color-background-attention: var(--cds-core-color-red-5); --cds-color-background-attention-muted: var(--cds-core-color-red-1); --cds-color-background-cribl-teal: var(--cds-brand-core-teal-400); --cds-color-background-disabled: var(--cds-core-color-gray-2); --cds-color-background-highlight: var(--cds-core-color-purple-6); --cds-color-background-highlight-muted: var(--cds-core-color-purple-1); --cds-color-background-primary: var(--cds-core-color-white); --cds-color-background-secondary: var(--cds-core-color-gray-1); --cds-color-background-success: var(--cds-core-color-green-6); --cds-color-background-success-muted: var(--cds-core-color-green-1); --cds-color-background-tertiary: var(--cds-core-color-gray-1); --cds-color-background-warning: var(--cds-core-color-gold-6); --cds-color-background-warning-muted: var(--cds-core-color-gold-1); --cds-color-border-accent: var(--cds-core-color-blue-6); --cds-color-border-attention: var(--cds-core-color-red-5); --cds-color-border-disabled: var(--cds-core-color-gray-2); --cds-color-border-highlight: var(--cds-core-color-purple-6); --cds-color-border-primary: var(--cds-core-color-gray-4); --cds-color-border-subtle: var(--cds-core-color-gray-2); --cds-color-border-success: var(--cds-core-color-green-6); --cds-color-border-warning: var(--cds-core-color-gold-6); --cds-color-button-primary-background: #00800f; --cds-color-button-primary-border: #00800f; --cds-color-button-primary-foreground: #ffffff; --cds-color-button-secondary-background: #ffffff; --cds-color-button-secondary-border: #ced9e0; --cds-color-button-secondary-foreground: #000000a6; --cds-color-data-grid-header: #00000005; --cds-color-decorative-green: var(--cds-core-color-green-6); --cds-color-decorative-purple: var(--cds-core-color-purple-6); --cds-color-decorative-teal: var(--cds-brand-core-teal-300); /** The teal decorative color aligns with Cribl's branding and is often used to highlight Cribl-centric items, such as new features. */ --cds-color-foreground-accent: var(--cds-core-color-blue-6); --cds-color-foreground-attention: var(--cds-core-color-red-5); --cds-color-foreground-disabled: var(--cds-core-color-gray-5); --cds-color-foreground-highlight: var(--cds-core-color-purple-6); --cds-color-foreground-on-accent: var(--cds-core-color-white); --cds-color-foreground-on-attention: var(--cds-core-color-white); --cds-color-foreground-on-cribl-teal: var(--cds-core-color-white); --cds-color-foreground-on-disabled: var(--cds-core-color-white); --cds-color-foreground-on-highlight: var(--cds-core-color-white); --cds-color-foreground-on-success: var(--cds-core-color-white); --cds-color-foreground-on-warning: var(--cds-core-color-white); --cds-color-foreground-primary: var(--cds-core-color-alpha-black-85); --cds-color-foreground-secondary: var(--cds-core-color-gray-7); --cds-color-foreground-success: var(--cds-core-color-green-6); --cds-color-foreground-tertiary: var(--cds-core-color-gray-5); --cds-color-foreground-warning: var(--cds-core-color-gold-6); --cds-color-git-added: var(--cds-core-color-green-7); --cds-color-git-modified: var(--cds-core-color-yellow-7); --cds-color-git-removed: var(--cds-color-foreground-attention); --cds-color-kusto-comment: var(--cds-core-color-green-8); --cds-color-kusto-error: var(--cds-core-color-red-7); --cds-color-kusto-field: var(--cds-core-color-magenta-9); --cds-color-kusto-function: var(--cds-core-color-cyan-8); --cds-color-kusto-keyword: var(--cds-core-color-yellow-9); --cds-color-kusto-literal: var(--cds-core-color-purple-6); --cds-color-kusto-operator: var(--cds-core-color-geekblue-6); --cds-color-kusto-search: var(--cds-core-color-orange-8); --cds-color-link-active: var(--cds-core-color-blue-7); --cds-color-link-default: #0074e7; --cds-color-link-hover: var(--cds-core-color-blue-5); --cds-color-logo-icon: var(--cds-brand-core-teal-300); --cds-color-logo-icon-accent: #0fb9bb; --cds-color-logo-text: #000000; --cds-color-modal-background: #ebf1f5; --cds-color-navigation-background-hover: #dae2e3; --cds-color-navigation-background: var(--cds-core-color-gray-2); --cds-color-navigation-background-selected: var(--cds-brand-core-teal-50); --cds-color-navigation-foreground-default: #595959; --cds-color-navigation-foreground-selected: #024c4c; --cds-color-ribbon-tail: var(--cds-core-color-alpha-black-20); --cds-color-state-layer-accent-active: var(--cds-core-color-blue-7); --cds-color-state-layer-accent-hover: var(--cds-core-color-blue-5); --cds-color-state-layer-accent-selected: var(--cds-core-color-blue-1); --cds-color-state-layer-attention-active: var(--cds-core-color-red-6); --cds-color-state-layer-attention-hover: var(--cds-core-color-red-4); --cds-color-state-layer-attention-selected: var(--cds-core-color-red-1); --cds-color-state-layer-hover: var(--cds-core-color-alpha-black-10); --cds-color-tag-cyan-background: var(--cds-core-color-cyan-1); --cds-color-tag-cyan-border: var(--cds-core-color-cyan-3); --cds-color-tag-cyan-foreground: var(--cds-core-color-cyan-7); --cds-color-tag-default-background: var(--cds-color-background-secondary); --cds-color-tag-default-border: var(--cds-color-border-primary); --cds-color-tag-default-foreground: var(--cds-color-foreground-primary); --cds-core-color-alpha-black-10: #0000001a; --cds-core-color-alpha-black-20: #00000033; --cds-core-color-alpha-black-85: #000000d9; --cds-core-color-alpha-white-10: #FFFFFF1a; --cds-core-color-alpha-white-45: #FFFFFF73; --cds-core-color-alpha-white-50: #FFFFFF80; --cds-core-color-alpha-white-85: #FFFFFFd9; --cds-core-color-black: #000000; --cds-core-color-blue-1: #e6f4ff; --cds-core-color-blue-10: #001d66; --cds-core-color-blue-2: #bae0ff; --cds-core-color-blue-3: #91caff; --cds-core-color-blue-4: #69b1ff; --cds-core-color-blue-5: #4096ff; --cds-core-color-blue-6: #1677ff; --cds-core-color-blue-7: #0958d9; --cds-core-color-blue-8: #003eb3; --cds-core-color-blue-9: #002c8c; --cds-core-color-cyan-1: #e6fffb; --cds-core-color-cyan-10: #002329; --cds-core-color-cyan-2: #b5f5ec; --cds-core-color-cyan-3: #87e8de; --cds-core-color-cyan-4: #5cdbd3; --cds-core-color-cyan-5: #36cfc9; --cds-core-color-cyan-6: #13c2c2; --cds-core-color-cyan-7: #08979c; --cds-core-color-cyan-8: #006d75; --cds-core-color-cyan-9: #00474f; --cds-core-color-geekblue-1: #f0f5ff; --cds-core-color-geekblue-10: #030852; --cds-core-color-geekblue-2: #d6e4ff; --cds-core-color-geekblue-3: #adc6ff; --cds-core-color-geekblue-4: #85a5ff; --cds-core-color-geekblue-5: #597ef7; --cds-core-color-geekblue-6: #2f54eb; --cds-core-color-geekblue-7: #1d39c4; --cds-core-color-geekblue-8: #10239e; --cds-core-color-geekblue-9: #061178; --cds-core-color-gold-1: #fffbe6; --cds-core-color-gold-10: #613400; --cds-core-color-gold-2: #fff1b8; --cds-core-color-gold-3: #ffe58f; --cds-core-color-gold-4: #ffd666; --cds-core-color-gold-5: #ffc53d; --cds-core-color-gold-6: #faad14; --cds-core-color-gold-7: #d48806; --cds-core-color-gold-8: #ad6800; --cds-core-color-gold-9: #874d00; --cds-core-color-gray-1: #FAFAFA; --cds-core-color-gray-10: #1F1F1F; --cds-core-color-gray-11: #141414; --cds-core-color-gray-2: #F5F5F5; --cds-core-color-gray-3: #F0F0F0; --cds-core-color-gray-4: #D9D9D9; --cds-core-color-gray-5: #BFBFBF; --cds-core-color-gray-6: #8C8C8C; --cds-core-color-gray-7: #595959; --cds-core-color-gray-8: #434343; --cds-core-color-gray-9: #262626; --cds-core-color-green-1: #f6ffed; --cds-core-color-green-10: #092b00; --cds-core-color-green-2: #d9f7be; --cds-core-color-green-3: #b7eb8f; --cds-core-color-green-4: #95de64; --cds-core-color-green-5: #73d13d; --cds-core-color-green-6: #52c41a; --cds-core-color-green-7: #389e0d; --cds-core-color-green-8: #237804; --cds-core-color-green-9: #135200; --cds-core-color-lime-1: #fcffe6; --cds-core-color-lime-10: #254000; --cds-core-color-lime-2: #f4ffb8; --cds-core-color-lime-3: #eaff8f; --cds-core-color-lime-4: #d3f261; --cds-core-color-lime-5: #bae637; --cds-core-color-lime-6: #a0d911; --cds-core-color-lime-7: #7cb305; --cds-core-color-lime-8: #5b8c00; --cds-core-color-lime-9: #3f6600; --cds-core-color-magenta-1: #fff0f6; --cds-core-color-magenta-10: #520339; --cds-core-color-magenta-2: #ffd6e7; --cds-core-color-magenta-3: #ffadd2; --cds-core-color-magenta-4: #ff85c0; --cds-core-color-magenta-5: #f759ab; --cds-core-color-magenta-6: #eb2f96; --cds-core-color-magenta-7: #c41d7f; --cds-core-color-magenta-8: #9e1068; --cds-core-color-magenta-9: #780650; --cds-core-color-orange-1: #fff7e6; --cds-core-color-orange-10: #612500; --cds-core-color-orange-2: #ffe7ba; --cds-core-color-orange-3: #ffd591; --cds-core-color-orange-4: #ffc069; --cds-core-color-orange-5: #ffa940; --cds-core-color-orange-6: #fa8c16; --cds-core-color-orange-7: #d46b08; --cds-core-color-orange-8: #ad4e00; --cds-core-color-orange-9: #873800; --cds-core-color-purple-1: #f9f0ff; --cds-core-color-purple-10: #120338; --cds-core-color-purple-2: #efdbff; --cds-core-color-purple-3: #d3adf7; --cds-core-color-purple-4: #b37feb; --cds-core-color-purple-5: #9254de; --cds-core-color-purple-6: #722ed1; --cds-core-color-purple-7: #531dab; --cds-core-color-purple-8: #391085; --cds-core-color-purple-9: #22075e; --cds-core-color-red-1: #fff1f0; --cds-core-color-red-10: #5c0011; --cds-core-color-red-2: #ffccc7; --cds-core-color-red-3: #ffa39e; --cds-core-color-red-4: #ff7875; --cds-core-color-red-5: #ff4d4f; --cds-core-color-red-6: #f5222d; --cds-core-color-red-7: #cf1322; --cds-core-color-red-8: #a8071a; --cds-core-color-red-9: #820014; --cds-core-color-volcano-1: #fff2e8; --cds-core-color-volcano-10: #610b00; --cds-core-color-volcano-2: #ffd8bf; --cds-core-color-volcano-3: #ffbb96; --cds-core-color-volcano-4: #ff9c6e; --cds-core-color-volcano-5: #ff7a45; --cds-core-color-volcano-6: #fa541c; --cds-core-color-volcano-7: #d4380d; --cds-core-color-volcano-8: #ad2102; --cds-core-color-volcano-9: #871400; --cds-core-color-white: #FFFFFF; --cds-core-color-yellow-1: #feffe6; --cds-core-color-yellow-10: #614700; --cds-core-color-yellow-2: #ffffb8; --cds-core-color-yellow-3: #fffb8f; --cds-core-color-yellow-4: #fff566; --cds-core-color-yellow-5: #ffec3d; --cds-core-color-yellow-6: #fadb14; --cds-core-color-yellow-7: #d4b106; --cds-core-color-yellow-8: #ad8b00; --cds-core-color-yellow-9: #876800; --cds-core-dimension-0: 0px; --cds-core-dimension-100: 8px; --cds-core-dimension-1000: 80px; --cds-core-dimension-150: 12px; --cds-core-dimension-200: 16px; --cds-core-dimension-25: 2px; --cds-core-dimension-250: 20px; --cds-core-dimension-300: 24px; --cds-core-dimension-400: 32px; --cds-core-dimension-50: 4px; --cds-core-dimension-500: 40px; --cds-core-dimension-600: 48px; --cds-core-dimension-75: 6px; --cds-core-dimension-800: 64px; --cds-core-font-family-mono: 'Source Code Pro', 'Ubuntu Mono', monospace; --cds-core-font-family-sans: 'Open Sans', sans-serif; --cds-core-font-size-2xl: 24px; /** 24px */ --cds-core-font-size-3xl: 30px; /** 30px */ --cds-core-font-size-4xl: 36px; /** 36px */ --cds-core-font-size-5xl: 48px; /** 48px */ --cds-core-font-size-body: 14px; /** 14px */ --cds-core-font-size-lg: 18px; /** 18px */ --cds-core-font-size-md: 16px; /** 16px */ --cds-core-font-size-xl: 20px; /** 20px */ --cds-core-font-size-xs: 12px; /** 12px */ --cds-core-font-size-xxs: 10px; /** 10px */ --cds-core-font-weight-black: 900; --cds-core-font-weight-bold: 700; --cds-core-font-weight-extrabold: 800; --cds-core-font-weight-extralight: 200; --cds-core-font-weight: 300; --cds-core-font-weight-medium: 500; --cds-core-font-weight-normal: 400; --cds-core-font-weight-semibold: 600; --cds-core-font-weight-thin: 100; --cds-core-line-height-150: 12px; /** 12px */ --cds-core-line-height-200: 16px; /** 16px */ --cds-core-line-height-250: 20px; /** 20px */ --cds-core-line-height-300: 24px; /** 24px */ --cds-core-line-height-350: 28px; /** 28px */ --cds-core-line-height-400: 32px; /** 32px */ --cds-core-line-height-500: 40px; /** 40px */ --cds-core-line-height-575: 46px; /** 46px */ --cds-core-line-height-700: 56px; /** 56px */ --cds-dimension-component-lg: var(--cds-core-dimension-500); --cds-dimension-component-md: var(--cds-core-dimension-400); --cds-dimension-component-sm: var(--cds-core-dimension-300); --cds-dimension-component-xs: var(--cds-core-dimension-200); --cds-dimension-icon-lg: var(--cds-core-dimension-400); /** Large indentifcation icons, such as in modal headers. */ --cds-dimension-icon-md: var(--cds-core-dimension-300); /** Standalone icons. */ --cds-dimension-icon-sm: var(--cds-core-dimension-200); /** Icons included as part of components. */ --cds-dimension-icon-xl: var(--cds-core-dimension-600); /** Big ass icons used as placeholders, such as in Empty States and Upload drop areas. */ --cds-dimension-icon-xs: var(--cds-core-dimension-150); /** Icons used in smaller components, such as Pills, Tags, and compact input fields. */ --cds-dimension-modal-lg: 1184px; --cds-dimension-modal-md: 864px; --cds-dimension-modal-sm: 544px; --cds-motion-duration-instant: 10ms; --cds-motion-duration-long-3: 1000ms; --cds-motion-duration-medium-1: 200ms; /** switch grip stretch and movement animation; button wave animation */ --cds-motion-duration-medium-2: 300ms; /** breadcrumb color transition, button state change animation */ --cds-motion-duration-short: 100ms; --cds-motion-easing-standard: 0.645,0.45,0.355,1; --cds-motion-easing-wave: 0.08,0.82,0.17,1; --cds-opacity-state-disabled: 0.65; --cds-radius-full: 9999px; --cds-radius-lg: 4px; --cds-radius-md: 2px; --cds-radius-xl: 8px; --cds-shadow-button: 0px 2px 0px 0px rgba(0, 0, 0, 0.02); --cds-shadow-high-down: 0px 6px 16px -8px rgba(0, 0, 0, 0.08), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 12px 48px 16px rgba(0, 0, 0, 0.03); --cds-shadow-high-left: -6px 0px 16px -8px rgba(0, 0, 0, 0.08), -9px 0px 28px 0px rgba(0, 0, 0, 0.05), -12px 0px 48px 16px rgba(0, 0, 0, 0.03); --cds-shadow-high-right: 6px 0px 16px -8px rgba(0, 0, 0, 0.08), 9px 0px 28px 0px rgba(0, 0, 0, 0.05), 12px 0px 48px 16px rgba(0, 0, 0, 0.03); --cds-shadow-high-up: 0px -6px 16px -8px rgba(0, 0, 0, 0.08), 0px -9px 28px 0px rgba(0, 0, 0, 0.05), 0px -12px 48px 16px rgba(0, 0, 0, 0.03); --cds-shadow-low-down: 0px 1px 2px -2px rgba(0, 0, 0, 0.16), 0px 3px 6px 0px rgba(0, 0, 0, 0.12), 0px 5px 12px 4px rgba(0, 0, 0, 0.09); --cds-shadow-low-left: -1px 0px 2px -2px rgba(0, 0, 0, 0.16), -3px 0px 6px 0px rgba(0, 0, 0, 0.12), -5px 0px 12px 4px rgba(0, 0, 0, 0.09); --cds-shadow-low-right: 1px 0px 2px -2px rgba(0, 0, 0, 0.16), 3px 0px 6px 0px rgba(0, 0, 0, 0.12), 5px 0px 12px 4px rgba(0, 0, 0, 0.09); --cds-shadow-low-up: 0px -1px 2px -2px rgba(0, 0, 0, 0.16), 0px -3px 6px 0px rgba(0, 0, 0, 0.12), 0px -5px 12px 4px rgba(0, 0, 0, 0.09); --cds-shadow-medium-down: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05); --cds-shadow-medium-left: -3px 0px 6px -4px rgba(0, 0, 0, 0.12), -6px 0px 16px 0px rgba(0, 0, 0, 0.08), -9px 0px 28px 8px rgba(0, 0, 0, 0.05); --cds-shadow-medium-right: 3px 0px 6px -4px rgba(0, 0, 0, 0.12), 6px 0px 16px 0px rgba(0, 0, 0, 0.08), 9px 0px 28px 8px rgba(0, 0, 0, 0.05); --cds-shadow-medium-up: 0px -3px 6px -4px rgba(0, 0, 0, 0.12), 0px -6px 16px 0px rgba(0, 0, 0, 0.08), 0px -9px 28px 8px rgba(0, 0, 0, 0.05); --cds-shadow-wave: 0px 0px 0px 6px var(--cds-color-border-accent); --cds-spacing-2xl: var(--cds-core-dimension-400); /** 32px. Acquaintance; a polite, respectful boundary, recognized but not close. */ --cds-spacing-lg: var(--cds-core-dimension-200); /** 16px. Friends; always there for each other, with a comfortable, familiar space. */ --cds-spacing-md: var(--cds-core-dimension-100); /** 8px. Best friends; close enough to share everything, with only the smallest gap between. */ --cds-spacing-none: var(--cds-core-dimension-0); /** 0px. */ --cds-spacing-sm: var(--cds-core-dimension-50); /** 4px. A tight bond representing unwavering loyalty and support. */ --cds-spacing-xl: var(--cds-core-dimension-300); /** 24px. Casual friends; a friendly distance, easy conversation, but room for others. */ --cds-spacing-xs: var(--cds-core-dimension-25); /** 2px. So close there is barely any space, like inseparable companions. */ --cds-tag-cyan-background: var(--cds-core-color-cyan-1); --cds-tag-cyan-border: var(--cds-core-color-cyan-3); --cds-tag-cyan-foreground: var(--cds-core-color-cyan-7); --cds-tag-default-background: var(--cds-color-background-secondary); --cds-tag-default-border: var(--cds-color-border-primary); --cds-tag-default-foreground: var(--cds-color-foreground-primary); --cds-typography-body-lg-normal: var(--cds-core-font-weight-normal) var(--cds-core-font-size-md)/1.5 var(--cds-core-font-family-sans); --cds-typography-body-lg-normal-letter-spacing: 0px; --cds-typography-body-lg-semibold: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-md)/1.5 var(--cds-core-font-family-sans); --cds-typography-body-lg-semibold-letter-spacing: 0px; --cds-typography-body-md-normal: var(--cds-core-font-weight-normal) var(--cds-core-font-size-body)/1.7142857143 var(--cds-core-font-family-sans); --cds-typography-body-md-normal-letter-spacing: 0px; --cds-typography-body-md-semibold: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-body)/1.7142857143 var(--cds-core-font-family-sans); --cds-typography-body-md-semibold-letter-spacing: 0px; --cds-typography-body-sm-normal: var(--cds-core-font-weight-normal) var(--cds-core-font-size-xs)/1.3333333333 var(--cds-core-font-family-sans); --cds-typography-body-sm-normal-letter-spacing: 0px; --cds-typography-body-sm-semibold: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-xs)/1.3333333333 var(--cds-core-font-family-sans); --cds-typography-body-sm-semibold-letter-spacing: 0px; --cds-typography-body-xs-normal: var(--cds-core-font-weight-normal) var(--cds-core-font-size-xxs)/1.6 var(--cds-core-font-family-sans); --cds-typography-body-xs-normal-letter-spacing: 0px; --cds-typography-code: var(--cds-core-font-weight-normal) var(--cds-core-font-size-body)/1.7142857143 var(--cds-core-font-family-mono); /** The code text style is reserved for representing code. */ --cds-typography-code-letter-spacing: 0px; /** The code text style is reserved for representing code. */ --cds-typography-heading-lg: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-2xl)/1.1666666667 var(--cds-core-font-family-sans); /** Main page titles, use only once per page. */ --cds-typography-heading-lg-letter-spacing: 0px; /** Main page titles, use only once per page. */ --cds-typography-heading-md: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-xl)/1.2 var(--cds-core-font-family-sans); /** Headings that identify key functionality. The most common heading, often used for

headings. */ --cds-typography-heading-md-letter-spacing: 0px; /** Headings that identify key functionality. The most common heading, often used for

headings. */ --cds-typography-heading-sm: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-md)/1.5 var(--cds-core-font-family-sans); /** Sub-section and field group headings. */ --cds-typography-heading-sm-letter-spacing: 0px; /** Sub-section and field group headings. */ --cds-typography-heading-xl: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-3xl)/1.2 var(--cds-core-font-family-sans); /** Empty states and feature introductions. Top level headers. */ --cds-typography-heading-xl-letter-spacing: 0px; /** Empty states and feature introductions. Top level headers. */ --cds-typography-heading-xs: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-body)/1.4285714286 var(--cds-core-font-family-sans); /** Deep headings and for highlighting important pieces of information. */ --cds-typography-heading-xs-letter-spacing: 0px; /** Deep headings and for highlighting important pieces of information. */ --cds-typography-metric-lg: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-4xl)/1.7142857143 var(--cds-core-font-family-sans); /** Use in large charts. */ --cds-typography-metric-lg-letter-spacing: 0px; /** Use in large charts. */ --cds-typography-metric-md: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-2xl)/1.7142857143 var(--cds-core-font-family-sans); /** Use in medium sized charts and where metrics are integrated with other page data. */ --cds-typography-metric-md-letter-spacing: 0px; /** Use in medium sized charts and where metrics are integrated with other page data. */ --cds-typography-metric-sm: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-md)/1.25 var(--cds-core-font-family-sans); /** Use in small charts. */ --cds-typography-metric-sm-letter-spacing: 0px; /** Use in small charts. */ --cds-typography-metric-xl: var(--cds-core-font-weight-semibold) var(--cds-core-font-size-5xl)/1 var(--cds-core-font-family-sans); /** Used for numerical metric displays, where focus is on the number itself. */ --cds-typography-metric-xl-letter-spacing: 0px; /** Used for numerical metric displays, where focus is on the number itself. */ --cds-vertical-nav-collapsed-width: 48px; /** Minimum width applied when the navigation collapses down to icons. */ --cds-vertical-nav-item-container-height: 32px; /** Height used for each navigation item container. */ --cds-vertical-nav-label-max-width: 124px; /** Maximum width allowed for the text label before truncation. */ --cds-vertical-nav-width: 180px; /** Default expanded width of the navigation panel. */ } .dark { --cds-border-focus: 2px solid var(--cds-color-border-accent); --cds-border-primary: 1px solid var(--cds-color-border-primary); --cds-color-alert-accent-border: var(--cds-core-color-blue-3); --cds-color-alert-attention-border: var(--cds-core-color-red-3); --cds-color-alert-highlight-border: var(--cds-core-color-purple-3); --cds-color-alert-success-border: var(--cds-core-color-green-3); --cds-color-alert-warning-border: var(--cds-core-color-gold-3); --cds-color-background-accent: var(--cds-core-color-blue-6); --cds-color-background-accent-muted: var(--cds-core-color-blue-1); --cds-color-background-attention: var(--cds-core-color-red-5); --cds-color-background-attention-muted: var(--cds-core-color-red-1); --cds-color-background-cribl-teal: var(--cds-brand-core-teal-400); --cds-color-background-disabled: var(--cds-core-color-gray-8); --cds-color-background-highlight: var(--cds-core-color-purple-6); --cds-color-background-highlight-muted: var(--cds-core-color-purple-1); --cds-color-background-primary: #1a2532; --cds-color-background-secondary: #1f2c3c; --cds-color-background-success: var(--cds-core-color-green-6); --cds-color-background-success-muted: var(--cds-core-color-green-1); --cds-color-background-tertiary: var(--cds-core-color-gray-9); --cds-color-background-warning: var(--cds-core-color-gold-6); --cds-color-background-warning-muted: var(--cds-core-color-gold-1); --cds-color-border-accent: var(--cds-core-color-blue-6); --cds-color-border-attention: var(--cds-core-color-red-5); --cds-color-border-disabled: var(--cds-core-color-gray-8); --cds-color-border-highlight: var(--cds-core-color-purple-6); --cds-color-border-primary: var(--cds-core-color-gray-8); --cds-color-border-subtle: var(--cds-core-color-gray-9); --cds-color-border-success: var(--cds-core-color-green-6); --cds-color-border-warning: var(--cds-core-color-gold-6); --cds-color-button-primary-background: #519aba; --cds-color-button-primary-border: #519aba; --cds-color-button-primary-foreground: #ffffff; --cds-color-button-secondary-background: #1a2532; --cds-color-button-secondary-border: #8c8c8c; --cds-color-button-secondary-foreground: #8c8c8c; --cds-color-data-grid-header: #1fcc3c; --cds-color-decorative-green: var(--cds-core-color-green-6); --cds-color-decorative-purple: var(--cds-core-color-purple-6); --cds-color-foreground-accent: var(--cds-core-color-blue-6); --cds-color-foreground-attention: var(--cds-core-color-red-5); --cds-color-foreground-disabled: rgba(255, 255, 255, 0.45); --cds-color-foreground-highlight: var(--cds-core-color-purple-6); --cds-color-foreground-on-accent: var(--cds-core-color-black); --cds-color-foreground-on-attention: var(--cds-core-color-black); --cds-color-foreground-on-cribl-teal: var(--cds-core-color-black); --cds-color-foreground-on-disabled: var(--cds-core-color-black); --cds-color-foreground-on-highlight: var(--cds-core-color-black); --cds-color-foreground-on-success: var(--cds-core-color-black); --cds-color-foreground-on-warning: var(--cds-core-color-black); --cds-color-foreground-primary: var(--cds-core-color-alpha-white-85); --cds-color-foreground-secondary: var(--cds-core-color-alpha-white-45); --cds-color-foreground-success: var(--cds-core-color-green-6); --cds-color-foreground-tertiary: var(--cds-core-color-alpha-white-45); --cds-color-foreground-warning: var(--cds-core-color-gold-6); --cds-color-git-added: var(--cds-core-color-green-7); --cds-color-git-modified: var(--cds-core-color-yellow-7); --cds-color-git-removed: var(--cds-color-foreground-attention); --cds-color-kusto-comment: var(--cds-core-color-green-8); --cds-color-kusto-error: var(--cds-core-color-red-7); --cds-color-kusto-field: var(--cds-core-color-magenta-9); --cds-color-kusto-function: var(--cds-core-color-cyan-8); --cds-color-kusto-keyword: var(--cds-core-color-yellow-9); --cds-color-kusto-literal: var(--cds-core-color-purple-6); --cds-color-kusto-operator: var(--cds-core-color-geekblue-6); --cds-color-kusto-search: var(--cds-core-color-orange-8); --cds-color-modal-background: #1f2c3c; --cds-color-navigation-background: #1f2c3c; --cds-color-navigation-background-hover: #28394d; --cds-color-navigation-background-selected: #324760; --cds-color-navigation-foreground-default: #bfbfbf; --cds-color-navigation-foreground-selected: #ffffff; --cds-color-ribbon-tail: var(--cds-core-color-alpha-white-50); --cds-color-state-layer-accent-active: var(--cds-core-color-blue-7); --cds-color-state-layer-accent-hover: var(--cds-core-color-blue-5); --cds-color-state-layer-accent-selected: var(--cds-core-color-blue-1); --cds-color-state-layer-attention-active: var(--cds-core-color-red-6); --cds-color-state-layer-attention-hover: var(--cds-core-color-red-4); --cds-color-state-layer-attention-selected: var(--cds-core-color-red-1); --cds-color-state-layer-hover: var(--cds-core-color-alpha-white-10); --cds-color-tag-cyan-background: var(--cds-core-color-cyan-1); --cds-color-tag-cyan-border: var(--cds-core-color-cyan-3); --cds-color-tag-cyan-foreground: var(--cds-core-color-cyan-7); --cds-color-tag-default-background: #2b3e54; --cds-color-tag-default-border: #585858; --cds-color-tag-default-foreground: var(--cds-color-button-primary-foreground); --cds-core-color-blue-1: #111d2c; --cds-core-color-blue-10: #b7e3fa; --cds-core-color-blue-2: #112a45; --cds-core-color-blue-3: #15395b; --cds-core-color-blue-4: #164c7e; --cds-core-color-blue-5: #1765ad; --cds-core-color-blue-6: #177ddc; --cds-core-color-blue-7: #3caee8; --cds-core-color-blue-8: #65b7f3; --cds-core-color-blue-9: #8dcff8; --cds-core-color-cyan-1: #112123; --cds-core-color-cyan-10: #b2f1e8; --cds-core-color-cyan-2: #113536; --cds-core-color-cyan-3: #144848; --cds-core-color-cyan-4: #146262; --cds-core-color-cyan-5: #138585; --cds-core-color-cyan-6: #13a8a8; --cds-core-color-cyan-7: #33bcb7; --cds-core-color-cyan-8: #58d1c9; --cds-core-color-cyan-9: #84e2d8; --cds-core-color-geekblue-1: #131629; --cds-core-color-geekblue-10: #d2e0fa; --cds-core-color-geekblue-2: #161d40; --cds-core-color-geekblue-3: #1c2755; --cds-core-color-geekblue-4: #203175; --cds-core-color-geekblue-5: #263ea0; --cds-core-color-geekblue-6: #2b4acb; --cds-core-color-geekblue-7: #5273e0; --cds-core-color-geekblue-8: #7f9ef3; --cds-core-color-geekblue-9: #a8c1f8; --cds-core-color-gold-1: #2b2111; --cds-core-color-gold-10: #faedb5; --cds-core-color-gold-2: #443111; --cds-core-color-gold-3: #594214; --cds-core-color-gold-4: #7c5914; --cds-core-color-gold-5: #aa7714; --cds-core-color-gold-6: #d89614; --cds-core-color-gold-7: #e8b339; --cds-core-color-gold-8: #f3cc62; --cds-core-color-gold-9: #f8df8b; --cds-core-color-green-1: #162312; --cds-core-color-green-10: #d5f2bb; --cds-core-color-green-2: #1d3712; --cds-core-color-green-3: #274916; --cds-core-color-green-4: #306317; --cds-core-color-green-5: #3c8618; --cds-core-color-green-6: #49aa19; --cds-core-color-green-7: #6abe39; --cds-core-color-green-8: #8fd460; --cds-core-color-green-9: #b2e58b; --cds-core-color-lime-1: #1f2611; --cds-core-color-lime-10: #f0fab5; --cds-core-color-lime-2: #2e3c10; --cds-core-color-lime-3: #3e4f13; --cds-core-color-lime-4: #536d13; --cds-core-color-lime-5: #6f9412; --cds-core-color-lime-6: #8bbb11; --cds-core-color-lime-7: #a9d134; --cds-core-color-lime-8: #c9e75d; --cds-core-color-lime-9: #f4f88b; --cds-core-color-magenta-1: #291321; --cds-core-color-magenta-10: #fad2e3; --cds-core-color-magenta-2: #40162f; --cds-core-color-magenta-3: #551c3b; --cds-core-color-magenta-4: #75204f; --cds-core-color-magenta-5: #a02669; --cds-core-color-magenta-6: #cb2b83; --cds-core-color-magenta-7: #e0529c; --cds-core-color-magenta-8: #f37fb7; --cds-core-color-magenta-9: #f8a8cc; --cds-core-color-orange-1: #2b1d11; --cds-core-color-orange-10: #fae3b7; --cds-core-color-orange-2: #442a11; --cds-core-color-orange-3: #593815; --cds-core-color-orange-4: #7c4a15; --cds-core-color-orange-5: #aa6215; --cds-core-color-orange-6: #d87d1a; --cds-core-color-orange-7: #e89a3c; --cds-core-color-orange-8: #f3b765; --cds-core-color-orange-9: #f8cf84; --cds-core-color-purple-1: #1a1325; --cds-core-color-purple-10: #ebd7fa; --cds-core-color-purple-2: #24163a; --cds-core-color-purple-3: #301c4d; --cds-core-color-purple-4: #3e2069; --cds-core-color-purple-5: #51258f; --cds-core-color-purple-6: #642ab5; --cds-core-color-purple-7: #854eca; --cds-core-color-purple-8: #ab7ae0; --cds-core-color-purple-9: #cda8f0; --cds-core-color-red-1: #2a1215; --cds-core-color-red-10: #fac8c3; --cds-core-color-red-2: #431418; --cds-core-color-red-3: #58181c; --cds-core-color-red-4: #791a1f; --cds-core-color-red-5: #a61d24; --cds-core-color-red-6: #d32029; --cds-core-color-red-7: #e84749; --cds-core-color-red-8: #f37370; --cds-core-color-red-9: #f89f9a; --cds-core-color-volcano-1: #2b1611; --cds-core-color-volcano-10: #fad4bc; --cds-core-color-volcano-2: #441d12; --cds-core-color-volcano-3: #592716; --cds-core-color-volcano-4: #7c3118; --cds-core-color-volcano-5: #aa3e19; --cds-core-color-volcano-6: #d84a1b; --cds-core-color-volcano-7: #e87040; --cds-core-color-volcano-8: #f3956a; --cds-core-color-volcano-9: #f8b692; --cds-core-color-yellow-1: #2b2611; --cds-core-color-yellow-10: #fafab5; --cds-core-color-yellow-2: #443b11; --cds-core-color-yellow-3: #595014; --cds-core-color-yellow-4: #7c6e14; --cds-core-color-yellow-5: #aa9514; --cds-core-color-yellow-6: #d8bd14; --cds-core-color-yellow-7: #e8d639; --cds-core-color-yellow-8: #f3ea62; --cds-core-color-yellow-9: #f8f48b; --cds-shadow-wave: 0px 0px 0px 6px var(--cds-color-border-accent); --cds-tag-cyan-background: #00474f; --cds-tag-cyan-border: #08979c; --cds-tag-cyan-foreground: #87e8de; --cds-tag-default-background: #2b3e54; --cds-tag-default-border: #585858; --cds-tag-default-foreground: var(--cds-color-button-primary-foreground); }