/* name: @otkit/colors version: 1.15.1 */ [data-otkit-brand="diner"] { --otkit-color-brand-light: var(--otkit-color-red); --otkit-color-brand-light-link: var(--otkit-color-red); --otkit-color-brand-light-hover: var(--otkit-color-red-light); --otkit-color-brand-light-pressed: var(--otkit-color-red-dark); --otkit-color-brand-light-highlight: var(--otkit-color-red-lightest); --otkit-color-brand-dark: var(--otkit-color-red); --otkit-color-brand-dark-link: var(--otkit-color-red); --otkit-color-brand-dark-hover: var(--otkit-color-red-light); --otkit-color-brand-dark-pressed: var(--otkit-color-red-dark); --otkit-color-brand-dark-highlight: var(--otkit-color-red-darker); --otkit-color-on-brand-light: var(--otkit-color-white); --otkit-color-on-brand-dark: var(--otkit-color-white); --otkit-color-brand-neutral-200: var(--otkit-color-ash-lightest); --otkit-color-brand-neutral-800: var(--otkit-color-ash-dark); } [data-otkit-brand="restaurant"] { --otkit-color-brand-light: var(--otkit-color-teal); --otkit-color-brand-light-link: var(--otkit-color-teal); --otkit-color-brand-light-hover: var(--otkit-color-teal-light); --otkit-color-brand-light-pressed: var(--otkit-color-teal-dark); --otkit-color-brand-light-highlight: var(--otkit-color-teal-lightest); --otkit-color-brand-dark: var(--otkit-color-teal); --otkit-color-brand-dark-link: var(--otkit-color-teal); --otkit-color-brand-dark-hover: var(--otkit-color-teal-light); --otkit-color-brand-dark-pressed: var(--otkit-color-teal-dark); --otkit-color-brand-dark-highlight: var(--otkit-color-teal-darker); --otkit-color-on-brand-light: var(--otkit-color-white); --otkit-color-on-brand-dark: var(--otkit-color-white); --otkit-color-brand-neutral-200: var(--otkit-color-ash-lightest); --otkit-color-brand-neutral-800: var(--otkit-color-ash-dark); } [data-otkit-brand="icons"] { --otkit-color-brand-light: var(--otkit-color-ash-dark); --otkit-color-brand-light-link: var(--otkit-color-red); --otkit-color-brand-light-hover: var(--otkit-color-ash); --otkit-color-brand-light-pressed: var(--otkit-color-ash-darker); --otkit-color-brand-light-highlight: var(--otkit-color-sand-200); --otkit-color-brand-dark: var(--otkit-color-white); --otkit-color-brand-dark-link: var(--otkit-color-red); --otkit-color-brand-dark-hover: var(--otkit-color-ash-lightest-l50); --otkit-color-brand-dark-pressed: var(--otkit-color-ash-lightest-d05); --otkit-color-brand-dark-highlight: var(--otkit-color-sand-800); --otkit-color-on-brand-light: var(--otkit-color-white); --otkit-color-on-brand-dark: var(--otkit-color-ash-dark); --otkit-color-brand-neutral-200: var(--otkit-color-sand-200); --otkit-color-brand-neutral-800: var(--otkit-color-ash-dark); } [data-otkit-brand="visa"] { --otkit-color-brand-light: var(--otkit-color-visa-blue-500); --otkit-color-brand-light-link: var(--otkit-color-visa-blue-500); --otkit-color-brand-light-hover: var(--otkit-color-visa-blue-800); --otkit-color-brand-light-pressed: var(--otkit-color-visa-blue-800); --otkit-color-brand-light-highlight: var(--otkit-color-visa-blue-200); --otkit-color-brand-dark: var(--otkit-color-visa-blue-500); --otkit-color-brand-dark-link: var(--otkit-color-visa-blue-200); --otkit-color-brand-dark-hover: var(--otkit-color-visa-blue-800); --otkit-color-brand-dark-pressed: var(--otkit-color-visa-blue-800); --otkit-color-brand-dark-highlight: var(--otkit-color-visa-blue-200); --otkit-color-on-brand-light: var(--otkit-color-white); --otkit-color-on-brand-dark: var(--otkit-color-white); --otkit-color-brand-neutral-200: var(--otkit-color-visa-blue-100); --otkit-color-brand-neutral-800: var(--otkit-color-visa-blue-800); } [data-otkit-brand="restaurant-ai"] { --otkit-color-brand-light: var(--otkit-color-violet); --otkit-color-brand-light-link: var(--otkit-color-violet); --otkit-color-brand-light-hover: var(--otkit-color-violet-l25); --otkit-color-brand-light-pressed: var(--otkit-color-violet-d25); --otkit-color-brand-light-highlight: var(--otkit-color-violet-lightest); --otkit-color-brand-dark: var(--otkit-color-violet-light); --otkit-color-brand-dark-link: var(--otkit-color-violet-light); --otkit-color-brand-dark-hover: var(--otkit-color-violet-l35); --otkit-color-brand-dark-pressed: var(--otkit-color-violet-d25); --otkit-color-brand-dark-highlight: var(--otkit-color-violet-darker); --otkit-color-on-brand-light: var(--otkit-color-white); --otkit-color-on-brand-dark: var(--otkit-color-white); --otkit-color-brand-neutral-200: var(--otkit-color-violet-lightest); --otkit-color-brand-neutral-800: var(--otkit-color-ash-dark); } [data-otkit-theme="light"] { color-scheme: light; --otkit-color-foreground-default: var(--otkit-color-ash-dark); --otkit-color-foreground-alt: var(--otkit-color-ash); --otkit-color-foreground-disabled: var(--otkit-color-ash-dark-l50); --otkit-color-foreground-disabled-alt: var(--otkit-color-ash-dark-l70); --otkit-color-foreground-action: var(--otkit-color-brand-light); --otkit-color-foreground-link: var(--otkit-color-brand-light-link); --otkit-color-foreground-on-action: var(--otkit-color-on-brand-light); --otkit-color-foreground-on-neutral: var(--otkit-color-white); --otkit-color-foreground-info: var(--otkit-color-teal); --otkit-color-foreground-on-info: var(--otkit-color-white); --otkit-color-foreground-success: var(--otkit-color-green); --otkit-color-foreground-on-success: var(--otkit-color-white); --otkit-color-foreground-warning: var(--otkit-color-yellow-light); --otkit-color-foreground-on-warning: var(--otkit-color-ash-darker); --otkit-color-foreground-danger: var(--otkit-color-red-dark); --otkit-color-foreground-on-danger: var(--otkit-color-white); --otkit-color-foreground-accent-orange: var(--otkit-color-orange); --otkit-color-foreground-accent-orange-secondary: var(--otkit-color-orange-lighter); --otkit-color-foreground-on-accent-orange: var(--otkit-color-white); --otkit-color-foreground-on-accent-orange-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-yellow: var(--otkit-color-yellow-light); --otkit-color-foreground-on-accent-yellow: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-yellow-secondary: var(--otkit-color-yellow-lighter); --otkit-color-foreground-on-accent-yellow-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-lemon: var(--otkit-color-lemon-light); --otkit-color-foreground-on-accent-lemon: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-lime: var(--otkit-color-lime); --otkit-color-foreground-accent-lime-secondary: var(--otkit-color-lime-lighter); --otkit-color-foreground-on-accent-lime: var(--otkit-color-white); --otkit-color-foreground-on-accent-lime-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-green: var(--otkit-color-green); --otkit-color-foreground-accent-green-secondary: var(--otkit-color-green-lighter); --otkit-color-foreground-on-accent-green: var(--otkit-color-white); --otkit-color-foreground-on-accent-green-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-aqua: var(--otkit-color-aqua-light); --otkit-color-foreground-accent-aqua-secondary: var(--otkit-color-aqua-lighter); --otkit-color-foreground-on-accent-aqua: var(--otkit-color-white); --otkit-color-foreground-on-accent-aqua-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-teal: var(--otkit-color-teal-light); --otkit-color-foreground-accent-teal-secondary: var(--otkit-color-teal-lighter); --otkit-color-foreground-on-accent-teal: var(--otkit-color-white); --otkit-color-foreground-on-accent-teal-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-blue: var(--otkit-color-blue); --otkit-color-foreground-accent-blue-secondary: var(--otkit-color-blue-lighter); --otkit-color-foreground-on-accent-blue: var(--otkit-color-white); --otkit-color-foreground-on-accent-blue-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-violet: var(--otkit-color-violet); --otkit-color-foreground-accent-violet-secondary: var(--otkit-color-violet-lighter); --otkit-color-foreground-on-accent-violet: var(--otkit-color-white); --otkit-color-foreground-on-accent-violet-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-purple: var(--otkit-color-purple); --otkit-color-foreground-accent-purple-secondary: var(--otkit-color-purple-lighter); --otkit-color-foreground-on-accent-purple: var(--otkit-color-white); --otkit-color-foreground-on-accent-purple-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-fuchsia: var(--otkit-color-fuchsia); --otkit-color-foreground-accent-fuchsia-secondary: var(--otkit-color-fuchsia-lighter); --otkit-color-foreground-on-accent-fuchsia: var(--otkit-color-white); --otkit-color-foreground-on-accent-fuchsia-secondary: var(--otkit-color-ash-darker); --otkit-color-background-default: var(--otkit-color-white); --otkit-color-background-alt: var(--otkit-color-brand-neutral-200); --otkit-color-background-elevation: var(--otkit-color-white); --otkit-color-background-inset: var(--otkit-color-ash-lightest); --otkit-color-background-hover: var(--otkit-color-black-o04); --otkit-color-background-pressed: var(--otkit-color-black-o10); --otkit-color-background-disabled: var(--otkit-color-ash-lighter); --otkit-color-background-disabled-alt: var(--otkit-color-ash-lightest-d05); --otkit-color-background-overlay: var(--otkit-color-ash-darker-o80); --otkit-color-background-action: var(--otkit-color-brand-light); --otkit-color-background-action-hover: var(--otkit-color-brand-light-hover); --otkit-color-background-action-pressed: var(--otkit-color-brand-light-pressed); --otkit-color-background-action-alt: var(--otkit-color-brand-light-highlight); --otkit-color-background-action-highlight: var(--otkit-color-brand-light-highlight); --otkit-color-background-inactive: var(--otkit-color-ash-lighter); --otkit-color-background-neutral: var(--otkit-color-ash-light); --otkit-color-background-info: var(--otkit-color-teal-dark); --otkit-color-background-info-alt: var(--otkit-color-teal-lightest); --otkit-color-background-info-highlight: var(--otkit-color-teal-lightest); --otkit-color-background-success: var(--otkit-color-green); --otkit-color-background-success-alt: var(--otkit-color-green-lightest); --otkit-color-background-success-highlight: var(--otkit-color-green-lightest); --otkit-color-background-warning: var(--otkit-color-yellow-light); --otkit-color-background-warning-hover: var(--otkit-color-yellow-lighter); --otkit-color-background-warning-pressed: var(--otkit-color-yellow); --otkit-color-background-warning-alt: var(--otkit-color-yellow-lightest); --otkit-color-background-warning-highlight: var(--otkit-color-yellow-lightest); --otkit-color-background-danger: var(--otkit-color-red-light); --otkit-color-background-danger-hover: var(--otkit-color-red-lighter); --otkit-color-background-danger-pressed: var(--otkit-color-red-dark); --otkit-color-background-danger-alt: var(--otkit-color-red-lightest); --otkit-color-background-danger-highlight: var(--otkit-color-red-lightest); --otkit-color-background-accent-orange: var(--otkit-color-orange); --otkit-color-background-accent-orange-hover: var(--otkit-color-orange-l25); --otkit-color-background-accent-orange-pressed: var(--otkit-color-orange-d25); --otkit-color-background-accent-orange-secondary: var(--otkit-color-orange-lighter); --otkit-color-background-accent-orange-secondary-hover: var(--otkit-color-orange-lighter-l40); --otkit-color-background-accent-orange-secondary-pressed: var(--otkit-color-orange-lighter-d20); --otkit-color-background-accent-orange-alt: var(--otkit-color-orange-lightest); --otkit-color-background-accent-orange-highlight: var(--otkit-color-orange-lightest); --otkit-color-background-accent-yellow: var(--otkit-color-yellow-light); --otkit-color-background-accent-yellow-hover: var(--otkit-color-yellow-light-l40); --otkit-color-background-accent-yellow-pressed: var(--otkit-color-yellow-light-d20); --otkit-color-background-accent-yellow-secondary: var(--otkit-color-yellow-lighter); --otkit-color-background-accent-yellow-secondary-hover: var(--otkit-color-yellow-lighter-l40); --otkit-color-background-accent-yellow-secondary-pressed: var(--otkit-color-yellow-lighter-d20); --otkit-color-background-accent-yellow-alt: var(--otkit-color-yellow-lightest); --otkit-color-background-accent-yellow-highlight: var(--otkit-color-yellow-lightest); --otkit-color-background-accent-lemon: var(--otkit-color-lemon-light); --otkit-color-background-accent-lemon-hover: var(--otkit-color-lemon-light-l40); --otkit-color-background-accent-lemon-pressed: var(--otkit-color-lemon-light-d20); --otkit-color-background-accent-lemon-alt: var(--otkit-color-lemon-lightest); --otkit-color-background-accent-lemon-highlight: var(--otkit-color-lemon-lightest); --otkit-color-background-accent-lime: var(--otkit-color-lime); --otkit-color-background-accent-lime-hover: var(--otkit-color-lime-l25); --otkit-color-background-accent-lime-pressed: var(--otkit-color-lime-d25); --otkit-color-background-accent-lime-secondary: var(--otkit-color-lime-lighter); --otkit-color-background-accent-lime-secondary-hover: var(--otkit-color-lime-lighter-l40); --otkit-color-background-accent-lime-secondary-pressed: var(--otkit-color-lime-lighter-d20); --otkit-color-background-accent-lime-alt: var(--otkit-color-lime-lightest); --otkit-color-background-accent-lime-highlight: var(--otkit-color-lime-lightest); --otkit-color-background-accent-green: var(--otkit-color-green); --otkit-color-background-accent-green-hover: var(--otkit-color-green-l25); --otkit-color-background-accent-green-pressed: var(--otkit-color-green-d25); --otkit-color-background-accent-green-secondary: var(--otkit-color-green-lighter); --otkit-color-background-accent-green-secondary-hover: var(--otkit-color-green-lighter-l40); --otkit-color-background-accent-green-secondary-pressed: var(--otkit-color-green-lighter-d20); --otkit-color-background-accent-green-alt: var(--otkit-color-green-lightest); --otkit-color-background-accent-green-highlight: var(--otkit-color-green-lightest); --otkit-color-background-accent-aqua: var(--otkit-color-aqua-light); --otkit-color-background-accent-aqua-hover: var(--otkit-color-aqua-light-l25); --otkit-color-background-accent-aqua-pressed: var(--otkit-color-aqua-light-d25); --otkit-color-background-accent-aqua-secondary: var(--otkit-color-aqua-lighter); --otkit-color-background-accent-aqua-secondary-hover: var(--otkit-color-aqua-lighter-l40); --otkit-color-background-accent-aqua-secondary-pressed: var(--otkit-color-aqua-lighter-d20); --otkit-color-background-accent-aqua-alt: var(--otkit-color-aqua-lightest); --otkit-color-background-accent-aqua-highlight: var(--otkit-color-aqua-lightest); --otkit-color-background-accent-teal: var(--otkit-color-teal-light); --otkit-color-background-accent-teal-hover: var(--otkit-color-teal-light-l25); --otkit-color-background-accent-teal-pressed: var(--otkit-color-teal-light-d25); --otkit-color-background-accent-teal-secondary: var(--otkit-color-teal-lighter); --otkit-color-background-accent-teal-secondary-hover: var(--otkit-color-teal-lighter-l40); --otkit-color-background-accent-teal-secondary-pressed: var(--otkit-color-teal-lighter-d20); --otkit-color-background-accent-teal-alt: var(--otkit-color-teal-lightest); --otkit-color-background-accent-teal-highlight: var(--otkit-color-teal-lightest); --otkit-color-background-accent-blue: var(--otkit-color-blue); --otkit-color-background-accent-blue-hover: var(--otkit-color-blue-l25); --otkit-color-background-accent-blue-pressed: var(--otkit-color-blue-d25); --otkit-color-background-accent-blue-secondary: var(--otkit-color-blue-lighter); --otkit-color-background-accent-blue-secondary-hover: var(--otkit-color-blue-lighter-l40); --otkit-color-background-accent-blue-secondary-pressed: var(--otkit-color-blue-lighter-d20); --otkit-color-background-accent-blue-alt: var(--otkit-color-blue-lightest); --otkit-color-background-accent-blue-highlight: var(--otkit-color-blue-lightest); --otkit-color-background-accent-violet: var(--otkit-color-violet); --otkit-color-background-accent-violet-hover: var(--otkit-color-violet-l25); --otkit-color-background-accent-violet-pressed: var(--otkit-color-violet-d25); --otkit-color-background-accent-violet-secondary: var(--otkit-color-violet-lighter); --otkit-color-background-accent-violet-secondary-hover: var(--otkit-color-violet-lighter-l40); --otkit-color-background-accent-violet-secondary-pressed: var(--otkit-color-violet-lighter-d20); --otkit-color-background-accent-violet-alt: var(--otkit-color-violet-lightest); --otkit-color-background-accent-violet-highlight: var(--otkit-color-violet-lightest); --otkit-color-background-accent-purple: var(--otkit-color-purple); --otkit-color-background-accent-purple-hover: var(--otkit-color-purple-l25); --otkit-color-background-accent-purple-pressed: var(--otkit-color-purple-d25); --otkit-color-background-accent-purple-secondary: var(--otkit-color-purple-lighter); --otkit-color-background-accent-purple-secondary-hover: var(--otkit-color-purple-lighter-l40); --otkit-color-background-accent-purple-secondary-pressed: var(--otkit-color-purple-lighter-d20); --otkit-color-background-accent-purple-alt: var(--otkit-color-purple-lightest); --otkit-color-background-accent-purple-highlight: var(--otkit-color-purple-lightest); --otkit-color-background-accent-fuchsia: var(--otkit-color-fuchsia); --otkit-color-background-accent-fuchsia-hover: var(--otkit-color-fuchsia-l25); --otkit-color-background-accent-fuchsia-pressed: var(--otkit-color-fuchsia-d25); --otkit-color-background-accent-fuchsia-secondary: var(--otkit-color-fuchsia-lighter); --otkit-color-background-accent-fuchsia-secondary-hover: var(--otkit-color-fuchsia-lighter-l40); --otkit-color-background-accent-fuchsia-secondary-pressed: var(--otkit-color-fuchsia-lighter-d20); --otkit-color-background-accent-fuchsia-alt: var(--otkit-color-fuchsia-lightest); --otkit-color-background-accent-fuchsia-highlight: var(--otkit-color-fuchsia-lightest); --otkit-color-border-default: var(--otkit-color-ash-lighter); --otkit-color-border-alt: var(--otkit-color-ash-light); --otkit-color-border-inset: var(--otkit-color-ash-lightest); --otkit-color-border-disabled: var(--otkit-color-ash-lightest-d05); --otkit-color-border-divider: var(--otkit-color-ash-lighter); --otkit-color-border-action: var(--otkit-color-brand-light); --otkit-color-border-info: var(--otkit-color-teal); --otkit-color-border-success: var(--otkit-color-green); --otkit-color-border-warning: var(--otkit-color-yellow); --otkit-color-border-danger: var(--otkit-color-red-dark); --otkit-color-border-accent-orange: var(--otkit-color-orange); --otkit-color-border-accent-orange-secondary: var(--otkit-color-orange-lighter); --otkit-color-border-accent-yellow: var(--otkit-color-yellow-light); --otkit-color-border-accent-yellow-secondary: var(--otkit-color-yellow-lighter); --otkit-color-border-accent-lemon: var(--otkit-color-lemon-light); --otkit-color-border-accent-lime: var(--otkit-color-lime); --otkit-color-border-accent-lime-secondary: var(--otkit-color-lime-lighter); --otkit-color-border-accent-green: var(--otkit-color-green); --otkit-color-border-accent-green-secondary: var(--otkit-color-green-lighter); --otkit-color-border-accent-aqua: var(--otkit-color-aqua-light); --otkit-color-border-accent-aqua-secondary: var(--otkit-color-aqua-lighter); --otkit-color-border-accent-teal: var(--otkit-color-teal-light); --otkit-color-border-accent-teal-secondary: var(--otkit-color-teal-lighter); --otkit-color-border-accent-blue: var(--otkit-color-blue); --otkit-color-border-accent-blue-secondary: var(--otkit-color-blue-lighter); --otkit-color-border-accent-violet: var(--otkit-color-violet); --otkit-color-border-accent-violet-secondary: var(--otkit-color-violet-lighter); --otkit-color-border-accent-purple: var(--otkit-color-purple); --otkit-color-border-accent-purple-secondary: var(--otkit-color-purple-lighter); --otkit-color-border-accent-fuchsia: var(--otkit-color-fuchsia); --otkit-color-border-accent-fuchsia-secondary: var(--otkit-color-fuchsia-lighter); --otkit-color-elevation-resting-key: var(--otkit-color-black-o15); --otkit-color-elevation-resting-ambient: var(--otkit-color-black-o03); --otkit-color-elevation-shallow-key: var(--otkit-color-black-o15); --otkit-color-elevation-shallow-ambient: var(--otkit-color-black-o03); --otkit-color-elevation-deep-key: var(--otkit-color-black-o15); --otkit-color-elevation-deep-ambient: var(--otkit-color-black-o03); } [data-otkit-theme="light"] [data-otkit-brand]:not([data-otkit-theme]), [data-otkit-theme] [data-otkit-theme="light"] [data-otkit-brand]:not([data-otkit-theme]), [data-otkit-theme] [data-otkit-theme] [data-otkit-theme="light"] [data-otkit-brand]:not([data-otkit-theme]) { color-scheme: light; --otkit-color-foreground-action: var(--otkit-color-brand-light); --otkit-color-foreground-link: var(--otkit-color-brand-light-link); --otkit-color-foreground-on-action: var(--otkit-color-on-brand-light); --otkit-color-background-alt: var(--otkit-color-brand-neutral-200); --otkit-color-background-action: var(--otkit-color-brand-light); --otkit-color-background-action-hover: var(--otkit-color-brand-light-hover); --otkit-color-background-action-pressed: var(--otkit-color-brand-light-pressed); --otkit-color-background-action-alt: var(--otkit-color-brand-light-highlight); --otkit-color-background-action-highlight: var(--otkit-color-brand-light-highlight); --otkit-color-border-action: var(--otkit-color-brand-light); } [data-otkit-theme="dark"] { color-scheme: dark; --otkit-color-foreground-default: var(--otkit-color-white); --otkit-color-foreground-alt: var(--otkit-color-ash-lighter); --otkit-color-foreground-disabled: var(--otkit-color-ash-lightest-d35); --otkit-color-foreground-disabled-alt: var(--otkit-color-ash-lightest-d50); --otkit-color-foreground-action: var(--otkit-color-brand-dark); --otkit-color-foreground-link: var(--otkit-color-brand-dark-link); --otkit-color-foreground-on-action: var(--otkit-color-on-brand-dark); --otkit-color-foreground-on-neutral: var(--otkit-color-white); --otkit-color-foreground-info: var(--otkit-color-teal-light); --otkit-color-foreground-on-info: var(--otkit-color-white); --otkit-color-foreground-success: var(--otkit-color-green-light); --otkit-color-foreground-on-success: var(--otkit-color-white); --otkit-color-foreground-warning: var(--otkit-color-yellow-light); --otkit-color-foreground-on-warning: var(--otkit-color-ash-darker); --otkit-color-foreground-danger: var(--otkit-color-red-light); --otkit-color-foreground-on-danger: var(--otkit-color-white); --otkit-color-foreground-accent-orange: var(--otkit-color-orange-light); --otkit-color-foreground-accent-orange-secondary: var(--otkit-color-orange-lighter); --otkit-color-foreground-on-accent-orange: var(--otkit-color-white); --otkit-color-foreground-on-accent-orange-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-yellow: var(--otkit-color-yellow-light); --otkit-color-foreground-on-accent-yellow: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-yellow-secondary: var(--otkit-color-yellow-lighter); --otkit-color-foreground-on-accent-yellow-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-lemon: var(--otkit-color-lemon-light); --otkit-color-foreground-on-accent-lemon: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-lime: var(--otkit-color-lime-light); --otkit-color-foreground-accent-lime-secondary: var(--otkit-color-lime-lighter); --otkit-color-foreground-on-accent-lime: var(--otkit-color-white); --otkit-color-foreground-on-accent-lime-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-green: var(--otkit-color-green-light); --otkit-color-foreground-accent-green-secondary: var(--otkit-color-green-lighter); --otkit-color-foreground-on-accent-green: var(--otkit-color-white); --otkit-color-foreground-on-accent-green-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-aqua: var(--otkit-color-aqua-light); --otkit-color-foreground-accent-aqua-secondary: var(--otkit-color-aqua-lighter); --otkit-color-foreground-on-accent-aqua: var(--otkit-color-white); --otkit-color-foreground-on-accent-aqua-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-teal: var(--otkit-color-teal-light); --otkit-color-foreground-accent-teal-secondary: var(--otkit-color-teal-lighter); --otkit-color-foreground-on-accent-teal: var(--otkit-color-white); --otkit-color-foreground-on-accent-teal-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-blue: var(--otkit-color-blue-light); --otkit-color-foreground-accent-blue-secondary: var(--otkit-color-blue-lighter); --otkit-color-foreground-on-accent-blue: var(--otkit-color-white); --otkit-color-foreground-on-accent-blue-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-violet: var(--otkit-color-violet-light); --otkit-color-foreground-accent-violet-secondary: var(--otkit-color-violet-lighter); --otkit-color-foreground-on-accent-violet: var(--otkit-color-white); --otkit-color-foreground-on-accent-violet-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-purple: var(--otkit-color-purple-light); --otkit-color-foreground-accent-purple-secondary: var(--otkit-color-purple-lighter); --otkit-color-foreground-on-accent-purple: var(--otkit-color-white); --otkit-color-foreground-on-accent-purple-secondary: var(--otkit-color-ash-darker); --otkit-color-foreground-accent-fuchsia: var(--otkit-color-fuchsia); --otkit-color-foreground-accent-fuchsia-secondary: var(--otkit-color-fuchsia-lighter); --otkit-color-foreground-on-accent-fuchsia: var(--otkit-color-white); --otkit-color-foreground-on-accent-fuchsia-secondary: var(--otkit-color-ash-darker); --otkit-color-background-default: var(--otkit-color-ash-darker); --otkit-color-background-alt: var(--otkit-color-brand-neutral-800); --otkit-color-background-elevation: var(--otkit-color-ash-dark); --otkit-color-background-inset: var(--otkit-color-ash-darker); --otkit-color-background-hover: var(--otkit-color-white-o10); --otkit-color-background-pressed: var(--otkit-color-white-o20); --otkit-color-background-disabled: var(--otkit-color-ash-dark-l25); --otkit-color-background-disabled-alt: var(--otkit-color-ash-dark-l05); --otkit-color-background-overlay: var(--otkit-color-ash-darker-o80); --otkit-color-background-action: var(--otkit-color-brand-dark); --otkit-color-background-action-hover: var(--otkit-color-brand-dark-hover); --otkit-color-background-action-pressed: var(--otkit-color-brand-dark-pressed); --otkit-color-background-action-alt: var(--otkit-color-brand-dark-highlight); --otkit-color-background-action-highlight: var(--otkit-color-brand-dark-highlight); --otkit-color-background-inactive: var(--otkit-color-ash); --otkit-color-background-neutral: var(--otkit-color-ash-light); --otkit-color-background-info: var(--otkit-color-teal-dark); --otkit-color-background-info-alt: var(--otkit-color-teal-darker); --otkit-color-background-info-highlight: var(--otkit-color-teal-darker-d25); --otkit-color-background-success: var(--otkit-color-green); --otkit-color-background-success-alt: var(--otkit-color-green-darker); --otkit-color-background-success-highlight: var(--otkit-color-green-darker-d30); --otkit-color-background-warning: var(--otkit-color-yellow-light); --otkit-color-background-warning-hover: var(--otkit-color-yellow-lighter); --otkit-color-background-warning-pressed: var(--otkit-color-yellow); --otkit-color-background-warning-alt: var(--otkit-color-yellow-darker); --otkit-color-background-warning-highlight: var(--otkit-color-yellow-darker-d30); --otkit-color-background-danger: var(--otkit-color-red-light); --otkit-color-background-danger-hover: var(--otkit-color-red-lighter); --otkit-color-background-danger-pressed: var(--otkit-color-red-dark); --otkit-color-background-danger-alt: var(--otkit-color-red-darker); --otkit-color-background-danger-highlight: var(--otkit-color-red-darker-d30); --otkit-color-background-accent-orange: var(--otkit-color-orange-light); --otkit-color-background-accent-orange-hover: var(--otkit-color-orange-light-l25); --otkit-color-background-accent-orange-pressed: var(--otkit-color-orange-light-d25); --otkit-color-background-accent-orange-secondary: var(--otkit-color-orange-lighter); --otkit-color-background-accent-orange-secondary-hover: var(--otkit-color-orange-lighter-l40); --otkit-color-background-accent-orange-secondary-pressed: var(--otkit-color-orange-lighter-d20); --otkit-color-background-accent-orange-alt: var(--otkit-color-orange-darker); --otkit-color-background-accent-orange-highlight: var(--otkit-color-orange-darker); --otkit-color-background-accent-yellow: var(--otkit-color-yellow-light); --otkit-color-background-accent-yellow-hover: var(--otkit-color-yellow-light-l40); --otkit-color-background-accent-yellow-pressed: var(--otkit-color-yellow-light-d20); --otkit-color-background-accent-yellow-secondary: var(--otkit-color-yellow-lighter); --otkit-color-background-accent-yellow-secondary-hover: var(--otkit-color-yellow-lighter-l40); --otkit-color-background-accent-yellow-secondary-pressed: var(--otkit-color-yellow-lighter-d20); --otkit-color-background-accent-yellow-alt: var(--otkit-color-yellow-darker); --otkit-color-background-accent-yellow-highlight: var(--otkit-color-yellow-darker); --otkit-color-background-accent-lemon: var(--otkit-color-lemon-light); --otkit-color-background-accent-lemon-hover: var(--otkit-color-lemon-light-l40); --otkit-color-background-accent-lemon-pressed: var(--otkit-color-lemon-light-d20); --otkit-color-background-accent-lemon-alt: var(--otkit-color-lemon-darker); --otkit-color-background-accent-lemon-highlight: var(--otkit-color-lemon-darker); --otkit-color-background-accent-lime: var(--otkit-color-lime); --otkit-color-background-accent-lime-hover: var(--otkit-color-lime-l25); --otkit-color-background-accent-lime-pressed: var(--otkit-color-lime-d25); --otkit-color-background-accent-lime-secondary: var(--otkit-color-lime-lighter); --otkit-color-background-accent-lime-secondary-hover: var(--otkit-color-lime-lighter-l40); --otkit-color-background-accent-lime-secondary-pressed: var(--otkit-color-lime-lighter-d20); --otkit-color-background-accent-lime-alt: var(--otkit-color-lime-darker); --otkit-color-background-accent-lime-highlight: var(--otkit-color-lime-darker); --otkit-color-background-accent-green: var(--otkit-color-green); --otkit-color-background-accent-green-hover: var(--otkit-color-green-l25); --otkit-color-background-accent-green-pressed: var(--otkit-color-green-d25); --otkit-color-background-accent-green-secondary: var(--otkit-color-green-lighter); --otkit-color-background-accent-green-secondary-hover: var(--otkit-color-green-lighter-l40); --otkit-color-background-accent-green-secondary-pressed: var(--otkit-color-green-lighter-d20); --otkit-color-background-accent-green-alt: var(--otkit-color-green-darker); --otkit-color-background-accent-green-highlight: var(--otkit-color-green-darker); --otkit-color-background-accent-aqua: var(--otkit-color-aqua-light); --otkit-color-background-accent-aqua-hover: var(--otkit-color-aqua-light-l25); --otkit-color-background-accent-aqua-pressed: var(--otkit-color-aqua-light-d25); --otkit-color-background-accent-aqua-secondary: var(--otkit-color-aqua-lighter); --otkit-color-background-accent-aqua-secondary-hover: var(--otkit-color-aqua-lighter-l40); --otkit-color-background-accent-aqua-secondary-pressed: var(--otkit-color-aqua-lighter-d20); --otkit-color-background-accent-aqua-alt: var(--otkit-color-aqua-darker); --otkit-color-background-accent-aqua-highlight: var(--otkit-color-aqua-darker); --otkit-color-background-accent-teal: var(--otkit-color-teal-light); --otkit-color-background-accent-teal-hover: var(--otkit-color-teal-light-l25); --otkit-color-background-accent-teal-pressed: var(--otkit-color-teal-light-d25); --otkit-color-background-accent-teal-secondary: var(--otkit-color-teal-lighter); --otkit-color-background-accent-teal-secondary-hover: var(--otkit-color-teal-lighter-l40); --otkit-color-background-accent-teal-secondary-pressed: var(--otkit-color-teal-lighter-d20); --otkit-color-background-accent-teal-alt: var(--otkit-color-teal-darker); --otkit-color-background-accent-teal-highlight: var(--otkit-color-teal-darker); --otkit-color-background-accent-blue: var(--otkit-color-blue); --otkit-color-background-accent-blue-hover: var(--otkit-color-blue-l25); --otkit-color-background-accent-blue-pressed: var(--otkit-color-blue-d25); --otkit-color-background-accent-blue-secondary: var(--otkit-color-blue-lighter); --otkit-color-background-accent-blue-secondary-hover: var(--otkit-color-blue-lighter-l40); --otkit-color-background-accent-blue-secondary-pressed: var(--otkit-color-blue-lighter-d20); --otkit-color-background-accent-blue-alt: var(--otkit-color-blue-darker); --otkit-color-background-accent-blue-highlight: var(--otkit-color-blue-darker); --otkit-color-background-accent-violet: var(--otkit-color-violet); --otkit-color-background-accent-violet-hover: var(--otkit-color-violet-l25); --otkit-color-background-accent-violet-pressed: var(--otkit-color-violet-d25); --otkit-color-background-accent-violet-secondary: var(--otkit-color-violet-lighter); --otkit-color-background-accent-violet-secondary-hover: var(--otkit-color-violet-lighter-l40); --otkit-color-background-accent-violet-secondary-pressed: var(--otkit-color-violet-lighter-d20); --otkit-color-background-accent-violet-alt: var(--otkit-color-violet-darker); --otkit-color-background-accent-violet-highlight: var(--otkit-color-violet-darker); --otkit-color-background-accent-purple: var(--otkit-color-purple-light); --otkit-color-background-accent-purple-hover: var(--otkit-color-purple-light-l25); --otkit-color-background-accent-purple-pressed: var(--otkit-color-purple-light-d25); --otkit-color-background-accent-purple-secondary: var(--otkit-color-purple-lighter); --otkit-color-background-accent-purple-secondary-hover: var(--otkit-color-purple-lighter-l40); --otkit-color-background-accent-purple-secondary-pressed: var(--otkit-color-purple-lighter-d20); --otkit-color-background-accent-purple-alt: var(--otkit-color-purple-darker); --otkit-color-background-accent-purple-highlight: var(--otkit-color-purple-darker); --otkit-color-background-accent-fuchsia: var(--otkit-color-fuchsia); --otkit-color-background-accent-fuchsia-hover: var(--otkit-color-fuchsia-l25); --otkit-color-background-accent-fuchsia-pressed: var(--otkit-color-fuchsia-d25); --otkit-color-background-accent-fuchsia-secondary: var(--otkit-color-fuchsia-lighter); --otkit-color-background-accent-fuchsia-secondary-hover: var(--otkit-color-fuchsia-lighter-l40); --otkit-color-background-accent-fuchsia-secondary-pressed: var(--otkit-color-fuchsia-lighter-d20); --otkit-color-background-accent-fuchsia-alt: var(--otkit-color-fuchsia-darker); --otkit-color-background-accent-fuchsia-highlight: var(--otkit-color-fuchsia-darker); --otkit-color-border-default: var(--otkit-color-ash); --otkit-color-border-alt: var(--otkit-color-ash-light); --otkit-color-border-inset: var(--otkit-color-ash-darker); --otkit-color-border-disabled: var(--otkit-color-ash-dark-l05); --otkit-color-border-divider: var(--otkit-color-ash); --otkit-color-border-action: var(--otkit-color-brand-dark); --otkit-color-border-info: var(--otkit-color-teal-light); --otkit-color-border-success: var(--otkit-color-green-light); --otkit-color-border-warning: var(--otkit-color-yellow-light); --otkit-color-border-danger: var(--otkit-color-red-light); --otkit-color-border-accent-orange: var(--otkit-color-orange-light); --otkit-color-border-accent-orange-secondary: var(--otkit-color-orange-lighter); --otkit-color-border-accent-yellow: var(--otkit-color-yellow-light); --otkit-color-border-accent-yellow-secondary: var(--otkit-color-yellow-lighter); --otkit-color-border-accent-lemon: var(--otkit-color-lemon-light); --otkit-color-border-accent-lime: var(--otkit-color-lime-light); --otkit-color-border-accent-lime-secondary: var(--otkit-color-lime-lighter); --otkit-color-border-accent-green: var(--otkit-color-green-light); --otkit-color-border-accent-green-secondary: var(--otkit-color-green-lighter); --otkit-color-border-accent-aqua: var(--otkit-color-aqua-light); --otkit-color-border-accent-aqua-secondary: var(--otkit-color-aqua-lighter); --otkit-color-border-accent-teal: var(--otkit-color-teal-light); --otkit-color-border-accent-teal-secondary: var(--otkit-color-teal-lighter); --otkit-color-border-accent-blue: var(--otkit-color-blue-light); --otkit-color-border-accent-blue-secondary: var(--otkit-color-blue-lighter); --otkit-color-border-accent-violet: var(--otkit-color-violet-light); --otkit-color-border-accent-violet-secondary: var(--otkit-color-violet-lighter); --otkit-color-border-accent-purple: var(--otkit-color-purple-light); --otkit-color-border-accent-purple-secondary: var(--otkit-color-purple-lighter); --otkit-color-border-accent-fuchsia: var(--otkit-color-fuchsia); --otkit-color-border-accent-fuchsia-secondary: var(--otkit-color-fuchsia-lighter); --otkit-color-elevation-resting-key: var(--otkit-color-black-o45); --otkit-color-elevation-resting-ambient: var(--otkit-color-black-o09); --otkit-color-elevation-shallow-key: var(--otkit-color-black-o45); --otkit-color-elevation-shallow-ambient: var(--otkit-color-black-o09); --otkit-color-elevation-deep-key: var(--otkit-color-black-o45); --otkit-color-elevation-deep-ambient: var(--otkit-color-black-o09); } [data-otkit-theme="dark"] [data-otkit-brand]:not([data-otkit-theme]), [data-otkit-theme] [data-otkit-theme="dark"] [data-otkit-brand]:not([data-otkit-theme]), [data-otkit-theme] [data-otkit-theme] [data-otkit-theme="dark"] [data-otkit-brand]:not([data-otkit-theme]) { color-scheme: dark; --otkit-color-foreground-action: var(--otkit-color-brand-dark); --otkit-color-foreground-link: var(--otkit-color-brand-dark-link); --otkit-color-foreground-on-action: var(--otkit-color-on-brand-dark); --otkit-color-background-alt: var(--otkit-color-brand-neutral-800); --otkit-color-background-action: var(--otkit-color-brand-dark); --otkit-color-background-action-hover: var(--otkit-color-brand-dark-hover); --otkit-color-background-action-pressed: var(--otkit-color-brand-dark-pressed); --otkit-color-background-action-alt: var(--otkit-color-brand-dark-highlight); --otkit-color-background-action-highlight: var(--otkit-color-brand-dark-highlight); --otkit-color-border-action: var(--otkit-color-brand-dark); }