/* =========================================================================== * dP elektronik — Design Tokens * ERZEUGTE DATEI. Nicht von Hand bearbeiten. * Quelle: packages/tokens/src/*.ts · Neu erzeugen: npm run build -w @dp/tokens * =========================================================================== * * Aufbau * 1. Primitive Tokens Rohwerte, gelten immer * 2. Farbschemata hell / dunkel / Kontrastmodus * 3. Presets austauschbare Primaerfarbe der Oberflaeche * * Umschalten * erzwingt das dunkle Schema * erzwingt das helle Schema * folgt der Systemeinstellung * Kontrastmodus (Barrierefreiheit) * andere Primaerfarbe der Oberflaeche * * Die Klasse .dark-mode wird zusaetzlich unterstuetzt, damit bestehende * Anwendungen ohne Umbau umsteigen koennen. */ :root { /* Die vier Hauptfarben des Styleguides */ --dp-brand-green: #0A5537; --dp-brand-green-light: #84AA9B; --dp-brand-ink: #1E1E1E; --dp-brand-paper: #F0F0F0; /* Farbreihen — Abstufungen fuer Zustaende der Oberflaeche */ --dp-brand-50: #F3F7F5; --dp-brand-100: #DDE7E3; --dp-brand-200: #BACFC7; --dp-brand-300: #91B3A5; --dp-brand-400: #548873; --dp-brand-500: #0A5537; --dp-brand-600: #094B30; --dp-brand-700: #08412A; --dp-brand-800: #063522; --dp-brand-900: #052619; --dp-brand-950: #031A11; --dp-brand-secondary-50: #F9FBFA; --dp-brand-secondary-100: #EEF3F1; --dp-brand-secondary-200: #DDE7E3; --dp-brand-secondary-300: #C8D9D2; --dp-brand-secondary-400: #A9C4B9; --dp-brand-secondary-500: #84AA9B; --dp-brand-secondary-600: #749688; --dp-brand-secondary-700: #648176; --dp-brand-secondary-800: #526960; --dp-brand-secondary-900: #3B4D46; --dp-brand-secondary-950: #28332F; --dp-neutral-0: #FFFFFF; --dp-neutral-50: #FAFAFA; --dp-neutral-100: #F0F0F0; --dp-neutral-200: #E0E0E0; --dp-neutral-300: #C7C7C7; --dp-neutral-400: #A3A3A3; --dp-neutral-450: #858585; --dp-neutral-500: #737373; --dp-neutral-600: #5C5C5C; --dp-neutral-700: #454545; --dp-neutral-800: #2E2E2E; --dp-neutral-900: #1E1E1E; --dp-neutral-950: #121212; --dp-success-50: #F0FDF4; --dp-success-100: #DCFCE7; --dp-success-200: #BBF7D0; --dp-success-300: #86EFAC; --dp-success-400: #4ADE80; --dp-success-500: #22C55E; --dp-success-600: #16A34A; --dp-success-700: #15803D; --dp-success-800: #166534; --dp-success-900: #14532D; --dp-success-950: #052E16; --dp-info-50: #F0F9FF; --dp-info-100: #E0F2FE; --dp-info-200: #BAE6FD; --dp-info-300: #7DD3FC; --dp-info-400: #38BDF8; --dp-info-500: #0EA5E9; --dp-info-600: #0284C7; --dp-info-700: #0369A1; --dp-info-800: #075985; --dp-info-900: #0C4A6E; --dp-info-950: #082F49; --dp-warning-50: #FFF7ED; --dp-warning-100: #FFEDD5; --dp-warning-200: #FED7AA; --dp-warning-300: #FDBA74; --dp-warning-400: #FB923C; --dp-warning-500: #F97316; --dp-warning-600: #EA580C; --dp-warning-700: #C2410C; --dp-warning-800: #9A3412; --dp-warning-900: #7C2D12; --dp-warning-950: #431407; --dp-danger-50: #FEF2F2; --dp-danger-100: #FEE2E2; --dp-danger-200: #FECACA; --dp-danger-300: #FCA5A5; --dp-danger-400: #F87171; --dp-danger-500: #EF4444; --dp-danger-600: #DC2626; --dp-danger-700: #B91C1C; --dp-danger-800: #991B1B; --dp-danger-900: #7F1D1D; --dp-danger-950: #450A0A; /* Typografie */ --dp-font-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --dp-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; --dp-font-size-xs: 0.75rem; --dp-font-size-sm: 0.875rem; --dp-font-size-base: 1rem; --dp-font-size-lg: 1.125rem; --dp-font-size-xl: 1.25rem; --dp-font-size-2xl: 1.5rem; --dp-font-size-3xl: 1.875rem; --dp-font-size-4xl: 2.25rem; --dp-font-size-5xl: 3rem; --dp-font-weight-light: 300; --dp-font-weight-regular: 400; --dp-font-weight-medium: 500; --dp-font-weight-semibold: 600; --dp-font-weight-bold: 700; /* Schriftrollen — welcher Schnitt wofuer (Styleguide) */ --dp-font-weight-heading: 700; --dp-font-weight-subline: 300; --dp-font-weight-body: 400; --dp-font-weight-control: 500; --dp-tracking-subline: 0.05em; --dp-line-height-none: 1; --dp-line-height-tight: 1.3; --dp-line-height-snug: 1.4; --dp-line-height-normal: 1.5; --dp-line-height-relaxed: 1.7; --dp-tracking-tight: -0.01em; --dp-tracking-normal: 0; --dp-tracking-wide: 0.05em; /* Abstaende */ --dp-space-0: 0; --dp-space-1: 0.25rem; --dp-space-2: 0.5rem; --dp-space-3: 0.75rem; --dp-space-4: 1rem; --dp-space-5: 1.25rem; --dp-space-6: 1.5rem; --dp-space-7: 1.75rem; --dp-space-8: 2rem; --dp-space-10: 2.5rem; --dp-space-12: 3rem; --dp-space-14: 3.5rem; --dp-space-16: 4rem; --dp-space-20: 5rem; --dp-space-24: 6rem; --dp-space-px: 1px; /* Radien, Rahmen, Schatten */ --dp-radius-none: 0; --dp-radius-xs: 0.25rem; --dp-radius-sm: 0.375rem; --dp-radius-md: 0.625rem; --dp-radius-lg: 0.875rem; --dp-radius-xl: 1.25rem; --dp-radius-full: 9999px; --dp-border-width-none: 0; --dp-border-width-thin: 1px; --dp-border-width-thick: 2px; --dp-border-width-focus: 3px; --dp-shadow-none: none; --dp-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04); --dp-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10); --dp-shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.08); --dp-shadow-lg: 0 4px 12px 0 rgb(0 0 0 / 0.12); --dp-shadow-xl: 0 12px 32px -4px rgb(0 0 0 / 0.18); --dp-shadow-overlay: 0 20px 48px -8px rgb(0 0 0 / 0.24); /* Ebenen und Bewegung */ --dp-z-base: 0; --dp-z-raised: 10; --dp-z-sticky: 100; --dp-z-drawer-backdrop: 900; --dp-z-drawer: 1000; --dp-z-dialog-backdrop: 1100; --dp-z-dialog: 1200; --dp-z-dropdown: 1300; --dp-z-popover: 1400; --dp-z-tooltip: 1500; --dp-z-toast: 1600; --dp-duration-instant: 0ms; --dp-duration-fast: 150ms; --dp-duration-base: 200ms; --dp-duration-slow: 300ms; --dp-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --dp-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --dp-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Raster und Groessen */ --dp-breakpoint-xs: 480px; --dp-breakpoint-sm: 640px; --dp-breakpoint-md: 768px; --dp-breakpoint-lg: 1024px; --dp-breakpoint-xl: 1280px; --dp-breakpoint-2xl: 1536px; --dp-icon-size-xs: 0.875rem; --dp-icon-size-sm: 1rem; --dp-icon-size-md: 1.25rem; --dp-icon-size-lg: 1.5rem; --dp-icon-size-xl: 2rem; --dp-control-height-xs: 1.75rem; --dp-control-height-sm: 2rem; --dp-control-height-md: 2.5rem; --dp-control-height-lg: 3rem; --dp-control-height-xl: 3.5rem; --dp-container-sm: 40rem; --dp-container-md: 48rem; --dp-container-lg: 64rem; --dp-container-xl: 80rem; --dp-container-2xl: 90rem; --dp-container-prose: 72ch; --dp-layout-sidebar-width: 16.25rem; --dp-layout-sidebar-collapsed-width: 3.75rem; --dp-layout-header-height: 4rem; --dp-layout-touch-target-min: 2.75rem; /* Bildlaufleisten */ --dp-scrollbar-width: thin; --dp-scrollbar-width-large: auto; --dp-scrollbar-size: 0.5rem; --dp-scrollbar-size-large: 1rem; } /* ── Helles Schema — Voreinstellung ─────────────────────────────────────── */ :root, [data-dp-theme='light'] { --dp-color-canvas: #FAFAFA; --dp-color-surface: #FFFFFF; --dp-color-surface-raised: #FFFFFF; --dp-color-surface-sunken: #F0F0F0; --dp-color-surface-hover: #F0F0F0; --dp-color-surface-overlay: #FFFFFF; --dp-color-backdrop: rgb(18 18 18 / 0.45); --dp-color-text: #1E1E1E; --dp-color-text-muted: #5C5C5C; --dp-color-text-subtle: #737373; --dp-color-text-disabled: #A3A3A3; --dp-color-text-inverse: #FFFFFF; --dp-color-border: #E0E0E0; --dp-color-border-strong: #C7C7C7; --dp-color-border-subtle: #F0F0F0; --dp-color-border-disabled: #E0E0E0; --dp-color-border-control: #737373; --dp-color-border-control-hover: #5C5C5C; --dp-color-primary: #0A5537; --dp-color-primary-hover: #094B30; --dp-color-primary-active: #08412A; --dp-color-primary-solid: #0A5537; --dp-color-primary-solid-hover: #094B30; --dp-color-primary-solid-active: #08412A; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F3F7F5; --dp-color-primary-subtle-hover: #DDE7E3; --dp-color-primary-border: #BACFC7; --dp-color-focus-ring: #0A5537; --dp-color-highlight-surface: #F3F7F5; --dp-color-highlight-text: #08412A; --dp-color-scrollbar-thumb: #737373; --dp-color-scrollbar-thumb-hover: #5C5C5C; --dp-color-scrollbar-track: transparent; --dp-color-success-text: #15803D; --dp-color-success-surface: #F0FDF4; --dp-color-success-border: #BBF7D0; --dp-color-success-solid: #15803D; --dp-color-success-on-solid: #FFFFFF; --dp-color-info-text: #0369A1; --dp-color-info-surface: #F0F9FF; --dp-color-info-border: #BAE6FD; --dp-color-info-solid: #0369A1; --dp-color-info-on-solid: #FFFFFF; --dp-color-warning-text: #9A3412; --dp-color-warning-surface: #FFF7ED; --dp-color-warning-border: #FED7AA; --dp-color-warning-solid: #C2410C; --dp-color-warning-on-solid: #FFFFFF; --dp-color-danger-text: #B91C1C; --dp-color-danger-surface: #FEF2F2; --dp-color-danger-border: #FECACA; --dp-color-danger-solid: #DC2626; --dp-color-danger-on-solid: #FFFFFF; --dp-color-neutral-text: #5C5C5C; --dp-color-neutral-surface: #F0F0F0; --dp-color-neutral-border: #C7C7C7; --dp-color-neutral-solid: #5C5C5C; --dp-color-neutral-on-solid: #FFFFFF; } /* ── Dunkles Schema ─────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-dp-theme='light']) { --dp-color-canvas: #121212; --dp-color-surface: #1E1E1E; --dp-color-surface-raised: #2E2E2E; --dp-color-surface-sunken: #151515; --dp-color-surface-hover: #2E2E2E; --dp-color-surface-overlay: #1E1E1E; --dp-color-backdrop: rgb(18 18 18 / 0.65); --dp-color-text: #F0F0F0; --dp-color-text-muted: #A3A3A3; --dp-color-text-subtle: #858585; --dp-color-text-disabled: #5C5C5C; --dp-color-text-inverse: #1E1E1E; --dp-color-border: #2E2E2E; --dp-color-border-strong: #454545; --dp-color-border-subtle: #2A2A2A; --dp-color-border-disabled: #2E2E2E; --dp-color-border-control: #737373; --dp-color-border-control-hover: #A3A3A3; --dp-color-primary: #84AA9B; --dp-color-primary-hover: #A9C4B9; --dp-color-primary-active: #C8D9D2; --dp-color-primary-solid: #0A5537; --dp-color-primary-solid-hover: #548873; --dp-color-primary-solid-active: #91B3A5; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #031A11; --dp-color-primary-subtle-hover: #052619; --dp-color-primary-border: #063522; --dp-color-focus-ring: #84AA9B; --dp-color-highlight-surface: #052619; --dp-color-highlight-text: #DDE7E3; --dp-color-scrollbar-thumb: #737373; --dp-color-scrollbar-thumb-hover: #A3A3A3; --dp-color-scrollbar-track: transparent; --dp-color-success-text: #4ADE80; --dp-color-success-surface: #0B2417; --dp-color-success-border: #166534; --dp-color-success-solid: #15803D; --dp-color-success-on-solid: #FFFFFF; --dp-color-info-text: #38BDF8; --dp-color-info-surface: #08243A; --dp-color-info-border: #075985; --dp-color-info-solid: #0369A1; --dp-color-info-on-solid: #FFFFFF; --dp-color-warning-text: #FB923C; --dp-color-warning-surface: #2E1A0A; --dp-color-warning-border: #9A3412; --dp-color-warning-solid: #C2410C; --dp-color-warning-on-solid: #FFFFFF; --dp-color-danger-text: #F87171; --dp-color-danger-surface: #2C1010; --dp-color-danger-border: #991B1B; --dp-color-danger-solid: #DC2626; --dp-color-danger-on-solid: #FFFFFF; --dp-color-neutral-text: #A3A3A3; --dp-color-neutral-surface: #2E2E2E; --dp-color-neutral-border: #454545; --dp-color-neutral-solid: #5C5C5C; --dp-color-neutral-on-solid: #FFFFFF; } } [data-dp-theme='dark'], .dark-mode { --dp-color-canvas: #121212; --dp-color-surface: #1E1E1E; --dp-color-surface-raised: #2E2E2E; --dp-color-surface-sunken: #151515; --dp-color-surface-hover: #2E2E2E; --dp-color-surface-overlay: #1E1E1E; --dp-color-backdrop: rgb(18 18 18 / 0.65); --dp-color-text: #F0F0F0; --dp-color-text-muted: #A3A3A3; --dp-color-text-subtle: #858585; --dp-color-text-disabled: #5C5C5C; --dp-color-text-inverse: #1E1E1E; --dp-color-border: #2E2E2E; --dp-color-border-strong: #454545; --dp-color-border-subtle: #2A2A2A; --dp-color-border-disabled: #2E2E2E; --dp-color-border-control: #737373; --dp-color-border-control-hover: #A3A3A3; --dp-color-primary: #84AA9B; --dp-color-primary-hover: #A9C4B9; --dp-color-primary-active: #C8D9D2; --dp-color-primary-solid: #0A5537; --dp-color-primary-solid-hover: #548873; --dp-color-primary-solid-active: #91B3A5; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #031A11; --dp-color-primary-subtle-hover: #052619; --dp-color-primary-border: #063522; --dp-color-focus-ring: #84AA9B; --dp-color-highlight-surface: #052619; --dp-color-highlight-text: #DDE7E3; --dp-color-scrollbar-thumb: #737373; --dp-color-scrollbar-thumb-hover: #A3A3A3; --dp-color-scrollbar-track: transparent; --dp-color-success-text: #4ADE80; --dp-color-success-surface: #0B2417; --dp-color-success-border: #166534; --dp-color-success-solid: #15803D; --dp-color-success-on-solid: #FFFFFF; --dp-color-info-text: #38BDF8; --dp-color-info-surface: #08243A; --dp-color-info-border: #075985; --dp-color-info-solid: #0369A1; --dp-color-info-on-solid: #FFFFFF; --dp-color-warning-text: #FB923C; --dp-color-warning-surface: #2E1A0A; --dp-color-warning-border: #9A3412; --dp-color-warning-solid: #C2410C; --dp-color-warning-on-solid: #FFFFFF; --dp-color-danger-text: #F87171; --dp-color-danger-surface: #2C1010; --dp-color-danger-border: #991B1B; --dp-color-danger-solid: #DC2626; --dp-color-danger-on-solid: #FFFFFF; --dp-color-neutral-text: #A3A3A3; --dp-color-neutral-surface: #2E2E2E; --dp-color-neutral-border: #454545; --dp-color-neutral-solid: #5C5C5C; --dp-color-neutral-on-solid: #FFFFFF; } /* ── Kontrastmodus ──────────────────────────────────────────────────────── */ [data-dp-contrast='high'] { --dp-color-canvas: #FFFFFF; --dp-color-surface: #FFFFFF; --dp-color-surface-raised: #FFFFFF; --dp-color-surface-sunken: #FFFFFF; --dp-color-surface-hover: #CCCCCC; --dp-color-surface-overlay: #FFFFFF; --dp-color-backdrop: rgb(0 0 0 / 0.6); --dp-color-text: #000000; --dp-color-text-muted: #000000; --dp-color-text-subtle: #555555; --dp-color-text-disabled: #555555; --dp-color-text-inverse: #FFFFFF; --dp-color-border: #000000; --dp-color-border-strong: #000000; --dp-color-border-subtle: #000000; --dp-color-border-disabled: #555555; --dp-color-border-control: #000000; --dp-color-border-control-hover: #000000; --dp-color-primary: #000000; --dp-color-primary-hover: #333333; --dp-color-primary-active: #555555; --dp-color-primary-solid: #000000; --dp-color-primary-solid-hover: #333333; --dp-color-primary-solid-active: #555555; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #E8E8E8; --dp-color-primary-subtle-hover: #CCCCCC; --dp-color-primary-border: #000000; --dp-color-focus-ring: #000000; --dp-color-highlight-surface: #FFFF00; --dp-color-highlight-text: #000000; --dp-color-scrollbar-thumb: #000000; --dp-color-scrollbar-thumb-hover: #333333; --dp-color-scrollbar-track: #CCCCCC; --dp-color-success-text: #006600; --dp-color-success-surface: #D4EDDA; --dp-color-success-border: #006600; --dp-color-success-solid: #006600; --dp-color-success-on-solid: #FFFFFF; --dp-color-info-text: #003366; --dp-color-info-surface: #CCE5FF; --dp-color-info-border: #003366; --dp-color-info-solid: #003366; --dp-color-info-on-solid: #FFFFFF; --dp-color-warning-text: #994C00; --dp-color-warning-surface: #FFE4B5; --dp-color-warning-border: #994C00; --dp-color-warning-solid: #994C00; --dp-color-warning-on-solid: #FFFFFF; --dp-color-danger-text: #990000; --dp-color-danger-surface: #F8D7DA; --dp-color-danger-border: #990000; --dp-color-danger-solid: #990000; --dp-color-danger-on-solid: #FFFFFF; --dp-color-neutral-text: #333333; --dp-color-neutral-surface: #E8E8E8; --dp-color-neutral-border: #333333; --dp-color-neutral-solid: #333333; --dp-color-neutral-on-solid: #FFFFFF; } [data-dp-contrast='high'][data-dp-theme='dark'], [data-dp-contrast='high'].dark-mode { --dp-color-canvas: #000000; --dp-color-surface: #000000; --dp-color-surface-raised: #000000; --dp-color-surface-sunken: #000000; --dp-color-surface-hover: #333333; --dp-color-surface-overlay: #000000; --dp-color-backdrop: rgb(0 0 0 / 0.75); --dp-color-text: #FFFFFF; --dp-color-text-muted: #FFFFFF; --dp-color-text-subtle: #AAAAAA; --dp-color-text-disabled: #AAAAAA; --dp-color-text-inverse: #000000; --dp-color-border: #FFFFFF; --dp-color-border-strong: #FFFFFF; --dp-color-border-subtle: #FFFFFF; --dp-color-border-disabled: #AAAAAA; --dp-color-border-control: #FFFFFF; --dp-color-border-control-hover: #FFFFFF; --dp-color-primary: #FFFFFF; --dp-color-primary-hover: #CCCCCC; --dp-color-primary-active: #AAAAAA; --dp-color-primary-solid: #FFFFFF; --dp-color-primary-solid-hover: #CCCCCC; --dp-color-primary-solid-active: #AAAAAA; --dp-color-primary-on-solid: #000000; --dp-color-primary-subtle: #1A1A1A; --dp-color-primary-subtle-hover: #333333; --dp-color-primary-border: #FFFFFF; --dp-color-focus-ring: #FFFFFF; --dp-color-highlight-surface: #FFFF00; --dp-color-highlight-text: #000000; --dp-color-scrollbar-thumb: #FFFFFF; --dp-color-scrollbar-thumb-hover: #CCCCCC; --dp-color-scrollbar-track: #333333; --dp-color-success-text: #66FF66; --dp-color-success-surface: #003300; --dp-color-success-border: #66FF66; --dp-color-success-solid: #006600; --dp-color-success-on-solid: #FFFFFF; --dp-color-info-text: #66CCFF; --dp-color-info-surface: #002244; --dp-color-info-border: #66CCFF; --dp-color-info-solid: #003366; --dp-color-info-on-solid: #FFFFFF; --dp-color-warning-text: #FFCC66; --dp-color-warning-surface: #4D3300; --dp-color-warning-border: #FFCC66; --dp-color-warning-solid: #994C00; --dp-color-warning-on-solid: #FFFFFF; --dp-color-danger-text: #FF6666; --dp-color-danger-surface: #330000; --dp-color-danger-border: #FF6666; --dp-color-danger-solid: #990000; --dp-color-danger-on-solid: #FFFFFF; --dp-color-neutral-text: #CCCCCC; --dp-color-neutral-surface: #1A1A1A; --dp-color-neutral-border: #CCCCCC; --dp-color-neutral-solid: #555555; --dp-color-neutral-on-solid: #FFFFFF; } @media (prefers-color-scheme: dark) { [data-dp-contrast='high']:not([data-dp-theme='light']) { --dp-color-canvas: #000000; --dp-color-surface: #000000; --dp-color-surface-raised: #000000; --dp-color-surface-sunken: #000000; --dp-color-surface-hover: #333333; --dp-color-surface-overlay: #000000; --dp-color-backdrop: rgb(0 0 0 / 0.75); --dp-color-text: #FFFFFF; --dp-color-text-muted: #FFFFFF; --dp-color-text-subtle: #AAAAAA; --dp-color-text-disabled: #AAAAAA; --dp-color-text-inverse: #000000; --dp-color-border: #FFFFFF; --dp-color-border-strong: #FFFFFF; --dp-color-border-subtle: #FFFFFF; --dp-color-border-disabled: #AAAAAA; --dp-color-border-control: #FFFFFF; --dp-color-border-control-hover: #FFFFFF; --dp-color-primary: #FFFFFF; --dp-color-primary-hover: #CCCCCC; --dp-color-primary-active: #AAAAAA; --dp-color-primary-solid: #FFFFFF; --dp-color-primary-solid-hover: #CCCCCC; --dp-color-primary-solid-active: #AAAAAA; --dp-color-primary-on-solid: #000000; --dp-color-primary-subtle: #1A1A1A; --dp-color-primary-subtle-hover: #333333; --dp-color-primary-border: #FFFFFF; --dp-color-focus-ring: #FFFFFF; --dp-color-highlight-surface: #FFFF00; --dp-color-highlight-text: #000000; --dp-color-scrollbar-thumb: #FFFFFF; --dp-color-scrollbar-thumb-hover: #CCCCCC; --dp-color-scrollbar-track: #333333; --dp-color-success-text: #66FF66; --dp-color-success-surface: #003300; --dp-color-success-border: #66FF66; --dp-color-success-solid: #006600; --dp-color-success-on-solid: #FFFFFF; --dp-color-info-text: #66CCFF; --dp-color-info-surface: #002244; --dp-color-info-border: #66CCFF; --dp-color-info-solid: #003366; --dp-color-info-on-solid: #FFFFFF; --dp-color-warning-text: #FFCC66; --dp-color-warning-surface: #4D3300; --dp-color-warning-border: #FFCC66; --dp-color-warning-solid: #994C00; --dp-color-warning-on-solid: #FFFFFF; --dp-color-danger-text: #FF6666; --dp-color-danger-surface: #330000; --dp-color-danger-border: #FF6666; --dp-color-danger-solid: #990000; --dp-color-danger-on-solid: #FFFFFF; --dp-color-neutral-text: #CCCCCC; --dp-color-neutral-surface: #1A1A1A; --dp-color-neutral-border: #CCCCCC; --dp-color-neutral-solid: #555555; --dp-color-neutral-on-solid: #FFFFFF; } } /* ── Bildlaufleiste im Kontrastmodus ───────────────────────────────────────── * Systembreit statt schmal. Eine schmale Leiste ist ein kleines Ziel fuer die * Maus; im Barrierefreiheitsmodus wiegt die Zielflaeche schwerer als die * Zurueckhaltung. Gilt fuer beide Kontrastschemata, hell wie dunkel. */ [data-dp-contrast='high'] { --dp-scrollbar-width: var(--dp-scrollbar-width-large); --dp-scrollbar-size: var(--dp-scrollbar-size-large); } /* ── Presets ──────────────────────────────────────────────────────────────── * Gelten nur fuer die Bedienoberflaeche. Dokumente und PDFs verwenden immer * das Markengruen, unabhaengig davon, was hier eingestellt ist. */ [data-dp-preset="dp-green"] { --dp-color-primary: #0A5537; --dp-color-primary-hover: #094B30; --dp-color-primary-active: #08412A; --dp-color-primary-solid: #0A5537; --dp-color-primary-solid-hover: #094B30; --dp-color-primary-solid-active: #08412A; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F3F7F5; --dp-color-primary-subtle-hover: #DDE7E3; --dp-color-primary-border: #BACFC7; --dp-color-focus-ring: #0A5537; --dp-color-highlight-surface: #F3F7F5; --dp-color-highlight-text: #08412A; } [data-dp-theme="dark"][data-dp-preset="dp-green"], .dark-mode[data-dp-preset="dp-green"] { --dp-color-primary: #84AA9B; --dp-color-primary-hover: #A9C4B9; --dp-color-primary-active: #C8D9D2; --dp-color-primary-solid: #0A5537; --dp-color-primary-solid-hover: #548873; --dp-color-primary-solid-active: #91B3A5; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #031A11; --dp-color-primary-subtle-hover: #052619; --dp-color-primary-border: #063522; --dp-color-focus-ring: #84AA9B; --dp-color-highlight-surface: #052619; --dp-color-highlight-text: #DDE7E3; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="dp-green"] { --dp-color-primary: #84AA9B; --dp-color-primary-hover: #A9C4B9; --dp-color-primary-active: #C8D9D2; --dp-color-primary-solid: #0A5537; --dp-color-primary-solid-hover: #548873; --dp-color-primary-solid-active: #91B3A5; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #031A11; --dp-color-primary-subtle-hover: #052619; --dp-color-primary-border: #063522; --dp-color-focus-ring: #84AA9B; --dp-color-highlight-surface: #052619; --dp-color-highlight-text: #DDE7E3; } } [data-dp-preset="emerald"] { --dp-color-primary: #047857; --dp-color-primary-hover: #065F46; --dp-color-primary-active: #064E3B; --dp-color-primary-solid: #047857; --dp-color-primary-solid-hover: #065F46; --dp-color-primary-solid-active: #064E3B; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #ECFDF5; --dp-color-primary-subtle-hover: #D1FAE5; --dp-color-primary-border: #A7F3D0; --dp-color-focus-ring: #047857; --dp-color-highlight-surface: #ECFDF5; --dp-color-highlight-text: #065F46; } [data-dp-theme="dark"][data-dp-preset="emerald"], .dark-mode[data-dp-preset="emerald"] { --dp-color-primary: #6EE7B7; --dp-color-primary-hover: #A7F3D0; --dp-color-primary-active: #D1FAE5; --dp-color-primary-solid: #047857; --dp-color-primary-solid-hover: #059669; --dp-color-primary-solid-active: #10B981; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #022C22; --dp-color-primary-subtle-hover: #064E3B; --dp-color-primary-border: #065F46; --dp-color-focus-ring: #6EE7B7; --dp-color-highlight-surface: #064E3B; --dp-color-highlight-text: #D1FAE5; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="emerald"] { --dp-color-primary: #6EE7B7; --dp-color-primary-hover: #A7F3D0; --dp-color-primary-active: #D1FAE5; --dp-color-primary-solid: #047857; --dp-color-primary-solid-hover: #059669; --dp-color-primary-solid-active: #10B981; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #022C22; --dp-color-primary-subtle-hover: #064E3B; --dp-color-primary-border: #065F46; --dp-color-focus-ring: #6EE7B7; --dp-color-highlight-surface: #064E3B; --dp-color-highlight-text: #D1FAE5; } } [data-dp-preset="green"] { --dp-color-primary: #15803D; --dp-color-primary-hover: #166534; --dp-color-primary-active: #14532D; --dp-color-primary-solid: #15803D; --dp-color-primary-solid-hover: #166534; --dp-color-primary-solid-active: #14532D; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F0FDF4; --dp-color-primary-subtle-hover: #DCFCE7; --dp-color-primary-border: #BBF7D0; --dp-color-focus-ring: #15803D; --dp-color-highlight-surface: #F0FDF4; --dp-color-highlight-text: #166534; } [data-dp-theme="dark"][data-dp-preset="green"], .dark-mode[data-dp-preset="green"] { --dp-color-primary: #86EFAC; --dp-color-primary-hover: #BBF7D0; --dp-color-primary-active: #DCFCE7; --dp-color-primary-solid: #15803D; --dp-color-primary-solid-hover: #16A34A; --dp-color-primary-solid-active: #22C55E; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #052E16; --dp-color-primary-subtle-hover: #14532D; --dp-color-primary-border: #166534; --dp-color-focus-ring: #86EFAC; --dp-color-highlight-surface: #14532D; --dp-color-highlight-text: #DCFCE7; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="green"] { --dp-color-primary: #86EFAC; --dp-color-primary-hover: #BBF7D0; --dp-color-primary-active: #DCFCE7; --dp-color-primary-solid: #15803D; --dp-color-primary-solid-hover: #16A34A; --dp-color-primary-solid-active: #22C55E; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #052E16; --dp-color-primary-subtle-hover: #14532D; --dp-color-primary-border: #166534; --dp-color-focus-ring: #86EFAC; --dp-color-highlight-surface: #14532D; --dp-color-highlight-text: #DCFCE7; } } [data-dp-preset="lime"] { --dp-color-primary: #4D7C0F; --dp-color-primary-hover: #3F6212; --dp-color-primary-active: #365314; --dp-color-primary-solid: #4D7C0F; --dp-color-primary-solid-hover: #3F6212; --dp-color-primary-solid-active: #365314; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F7FEE7; --dp-color-primary-subtle-hover: #ECFCCB; --dp-color-primary-border: #D9F99D; --dp-color-focus-ring: #4D7C0F; --dp-color-highlight-surface: #F7FEE7; --dp-color-highlight-text: #3F6212; } [data-dp-theme="dark"][data-dp-preset="lime"], .dark-mode[data-dp-preset="lime"] { --dp-color-primary: #BEF264; --dp-color-primary-hover: #D9F99D; --dp-color-primary-active: #ECFCCB; --dp-color-primary-solid: #4D7C0F; --dp-color-primary-solid-hover: #65A30D; --dp-color-primary-solid-active: #84CC16; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #1A2E05; --dp-color-primary-subtle-hover: #365314; --dp-color-primary-border: #3F6212; --dp-color-focus-ring: #BEF264; --dp-color-highlight-surface: #365314; --dp-color-highlight-text: #ECFCCB; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="lime"] { --dp-color-primary: #BEF264; --dp-color-primary-hover: #D9F99D; --dp-color-primary-active: #ECFCCB; --dp-color-primary-solid: #4D7C0F; --dp-color-primary-solid-hover: #65A30D; --dp-color-primary-solid-active: #84CC16; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #1A2E05; --dp-color-primary-subtle-hover: #365314; --dp-color-primary-border: #3F6212; --dp-color-focus-ring: #BEF264; --dp-color-highlight-surface: #365314; --dp-color-highlight-text: #ECFCCB; } } [data-dp-preset="red"] { --dp-color-primary: #B91C1C; --dp-color-primary-hover: #991B1B; --dp-color-primary-active: #7F1D1D; --dp-color-primary-solid: #B91C1C; --dp-color-primary-solid-hover: #991B1B; --dp-color-primary-solid-active: #7F1D1D; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FEF2F2; --dp-color-primary-subtle-hover: #FEE2E2; --dp-color-primary-border: #FECACA; --dp-color-focus-ring: #B91C1C; --dp-color-highlight-surface: #FEF2F2; --dp-color-highlight-text: #991B1B; } [data-dp-theme="dark"][data-dp-preset="red"], .dark-mode[data-dp-preset="red"] { --dp-color-primary: #FCA5A5; --dp-color-primary-hover: #FECACA; --dp-color-primary-active: #FEE2E2; --dp-color-primary-solid: #B91C1C; --dp-color-primary-solid-hover: #DC2626; --dp-color-primary-solid-active: #EF4444; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #450A0A; --dp-color-primary-subtle-hover: #7F1D1D; --dp-color-primary-border: #991B1B; --dp-color-focus-ring: #FCA5A5; --dp-color-highlight-surface: #7F1D1D; --dp-color-highlight-text: #FEE2E2; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="red"] { --dp-color-primary: #FCA5A5; --dp-color-primary-hover: #FECACA; --dp-color-primary-active: #FEE2E2; --dp-color-primary-solid: #B91C1C; --dp-color-primary-solid-hover: #DC2626; --dp-color-primary-solid-active: #EF4444; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #450A0A; --dp-color-primary-subtle-hover: #7F1D1D; --dp-color-primary-border: #991B1B; --dp-color-focus-ring: #FCA5A5; --dp-color-highlight-surface: #7F1D1D; --dp-color-highlight-text: #FEE2E2; } } [data-dp-preset="orange"] { --dp-color-primary: #C2410C; --dp-color-primary-hover: #9A3412; --dp-color-primary-active: #7C2D12; --dp-color-primary-solid: #C2410C; --dp-color-primary-solid-hover: #9A3412; --dp-color-primary-solid-active: #7C2D12; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FFF7ED; --dp-color-primary-subtle-hover: #FFEDD5; --dp-color-primary-border: #FED7AA; --dp-color-focus-ring: #C2410C; --dp-color-highlight-surface: #FFF7ED; --dp-color-highlight-text: #9A3412; } [data-dp-theme="dark"][data-dp-preset="orange"], .dark-mode[data-dp-preset="orange"] { --dp-color-primary: #FDBA74; --dp-color-primary-hover: #FED7AA; --dp-color-primary-active: #FFEDD5; --dp-color-primary-solid: #C2410C; --dp-color-primary-solid-hover: #EA580C; --dp-color-primary-solid-active: #F97316; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #431407; --dp-color-primary-subtle-hover: #7C2D12; --dp-color-primary-border: #9A3412; --dp-color-focus-ring: #FDBA74; --dp-color-highlight-surface: #7C2D12; --dp-color-highlight-text: #FFEDD5; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="orange"] { --dp-color-primary: #FDBA74; --dp-color-primary-hover: #FED7AA; --dp-color-primary-active: #FFEDD5; --dp-color-primary-solid: #C2410C; --dp-color-primary-solid-hover: #EA580C; --dp-color-primary-solid-active: #F97316; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #431407; --dp-color-primary-subtle-hover: #7C2D12; --dp-color-primary-border: #9A3412; --dp-color-focus-ring: #FDBA74; --dp-color-highlight-surface: #7C2D12; --dp-color-highlight-text: #FFEDD5; } } [data-dp-preset="amber"] { --dp-color-primary: #B45309; --dp-color-primary-hover: #92400E; --dp-color-primary-active: #78350F; --dp-color-primary-solid: #B45309; --dp-color-primary-solid-hover: #92400E; --dp-color-primary-solid-active: #78350F; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FFFBEB; --dp-color-primary-subtle-hover: #FEF3C7; --dp-color-primary-border: #FDE68A; --dp-color-focus-ring: #B45309; --dp-color-highlight-surface: #FFFBEB; --dp-color-highlight-text: #92400E; } [data-dp-theme="dark"][data-dp-preset="amber"], .dark-mode[data-dp-preset="amber"] { --dp-color-primary: #FCD34D; --dp-color-primary-hover: #FDE68A; --dp-color-primary-active: #FEF3C7; --dp-color-primary-solid: #B45309; --dp-color-primary-solid-hover: #D97706; --dp-color-primary-solid-active: #F59E0B; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #451A03; --dp-color-primary-subtle-hover: #78350F; --dp-color-primary-border: #92400E; --dp-color-focus-ring: #FCD34D; --dp-color-highlight-surface: #78350F; --dp-color-highlight-text: #FEF3C7; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="amber"] { --dp-color-primary: #FCD34D; --dp-color-primary-hover: #FDE68A; --dp-color-primary-active: #FEF3C7; --dp-color-primary-solid: #B45309; --dp-color-primary-solid-hover: #D97706; --dp-color-primary-solid-active: #F59E0B; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #451A03; --dp-color-primary-subtle-hover: #78350F; --dp-color-primary-border: #92400E; --dp-color-focus-ring: #FCD34D; --dp-color-highlight-surface: #78350F; --dp-color-highlight-text: #FEF3C7; } } [data-dp-preset="yellow"] { --dp-color-primary: #A16207; --dp-color-primary-hover: #854D0E; --dp-color-primary-active: #713F12; --dp-color-primary-solid: #A16207; --dp-color-primary-solid-hover: #854D0E; --dp-color-primary-solid-active: #713F12; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FEFCE8; --dp-color-primary-subtle-hover: #FEF9C3; --dp-color-primary-border: #FEF08A; --dp-color-focus-ring: #A16207; --dp-color-highlight-surface: #FEFCE8; --dp-color-highlight-text: #854D0E; } [data-dp-theme="dark"][data-dp-preset="yellow"], .dark-mode[data-dp-preset="yellow"] { --dp-color-primary: #FDE047; --dp-color-primary-hover: #FEF08A; --dp-color-primary-active: #FEF9C3; --dp-color-primary-solid: #A16207; --dp-color-primary-solid-hover: #CA8A04; --dp-color-primary-solid-active: #EAB308; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #422006; --dp-color-primary-subtle-hover: #713F12; --dp-color-primary-border: #854D0E; --dp-color-focus-ring: #FDE047; --dp-color-highlight-surface: #713F12; --dp-color-highlight-text: #FEF9C3; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="yellow"] { --dp-color-primary: #FDE047; --dp-color-primary-hover: #FEF08A; --dp-color-primary-active: #FEF9C3; --dp-color-primary-solid: #A16207; --dp-color-primary-solid-hover: #CA8A04; --dp-color-primary-solid-active: #EAB308; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #422006; --dp-color-primary-subtle-hover: #713F12; --dp-color-primary-border: #854D0E; --dp-color-focus-ring: #FDE047; --dp-color-highlight-surface: #713F12; --dp-color-highlight-text: #FEF9C3; } } [data-dp-preset="teal"] { --dp-color-primary: #0F766E; --dp-color-primary-hover: #115E59; --dp-color-primary-active: #134E4A; --dp-color-primary-solid: #0F766E; --dp-color-primary-solid-hover: #115E59; --dp-color-primary-solid-active: #134E4A; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F0FDFA; --dp-color-primary-subtle-hover: #CCFBF1; --dp-color-primary-border: #99F6E4; --dp-color-focus-ring: #0F766E; --dp-color-highlight-surface: #F0FDFA; --dp-color-highlight-text: #115E59; } [data-dp-theme="dark"][data-dp-preset="teal"], .dark-mode[data-dp-preset="teal"] { --dp-color-primary: #5EEAD4; --dp-color-primary-hover: #99F6E4; --dp-color-primary-active: #CCFBF1; --dp-color-primary-solid: #0F766E; --dp-color-primary-solid-hover: #0D9488; --dp-color-primary-solid-active: #14B8A6; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #042F2E; --dp-color-primary-subtle-hover: #134E4A; --dp-color-primary-border: #115E59; --dp-color-focus-ring: #5EEAD4; --dp-color-highlight-surface: #134E4A; --dp-color-highlight-text: #CCFBF1; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="teal"] { --dp-color-primary: #5EEAD4; --dp-color-primary-hover: #99F6E4; --dp-color-primary-active: #CCFBF1; --dp-color-primary-solid: #0F766E; --dp-color-primary-solid-hover: #0D9488; --dp-color-primary-solid-active: #14B8A6; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #042F2E; --dp-color-primary-subtle-hover: #134E4A; --dp-color-primary-border: #115E59; --dp-color-focus-ring: #5EEAD4; --dp-color-highlight-surface: #134E4A; --dp-color-highlight-text: #CCFBF1; } } [data-dp-preset="cyan"] { --dp-color-primary: #0E7490; --dp-color-primary-hover: #155E75; --dp-color-primary-active: #164E63; --dp-color-primary-solid: #0E7490; --dp-color-primary-solid-hover: #155E75; --dp-color-primary-solid-active: #164E63; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #ECFEFF; --dp-color-primary-subtle-hover: #CFFAFE; --dp-color-primary-border: #A5F3FC; --dp-color-focus-ring: #0E7490; --dp-color-highlight-surface: #ECFEFF; --dp-color-highlight-text: #155E75; } [data-dp-theme="dark"][data-dp-preset="cyan"], .dark-mode[data-dp-preset="cyan"] { --dp-color-primary: #67E8F9; --dp-color-primary-hover: #A5F3FC; --dp-color-primary-active: #CFFAFE; --dp-color-primary-solid: #0E7490; --dp-color-primary-solid-hover: #0891B2; --dp-color-primary-solid-active: #06B6D4; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #083344; --dp-color-primary-subtle-hover: #164E63; --dp-color-primary-border: #155E75; --dp-color-focus-ring: #67E8F9; --dp-color-highlight-surface: #164E63; --dp-color-highlight-text: #CFFAFE; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="cyan"] { --dp-color-primary: #67E8F9; --dp-color-primary-hover: #A5F3FC; --dp-color-primary-active: #CFFAFE; --dp-color-primary-solid: #0E7490; --dp-color-primary-solid-hover: #0891B2; --dp-color-primary-solid-active: #06B6D4; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #083344; --dp-color-primary-subtle-hover: #164E63; --dp-color-primary-border: #155E75; --dp-color-focus-ring: #67E8F9; --dp-color-highlight-surface: #164E63; --dp-color-highlight-text: #CFFAFE; } } [data-dp-preset="sky"] { --dp-color-primary: #0369A1; --dp-color-primary-hover: #075985; --dp-color-primary-active: #0C4A6E; --dp-color-primary-solid: #0369A1; --dp-color-primary-solid-hover: #075985; --dp-color-primary-solid-active: #0C4A6E; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F0F9FF; --dp-color-primary-subtle-hover: #E0F2FE; --dp-color-primary-border: #BAE6FD; --dp-color-focus-ring: #0369A1; --dp-color-highlight-surface: #F0F9FF; --dp-color-highlight-text: #075985; } [data-dp-theme="dark"][data-dp-preset="sky"], .dark-mode[data-dp-preset="sky"] { --dp-color-primary: #7DD3FC; --dp-color-primary-hover: #BAE6FD; --dp-color-primary-active: #E0F2FE; --dp-color-primary-solid: #0369A1; --dp-color-primary-solid-hover: #0284C7; --dp-color-primary-solid-active: #0EA5E9; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #082F49; --dp-color-primary-subtle-hover: #0C4A6E; --dp-color-primary-border: #075985; --dp-color-focus-ring: #7DD3FC; --dp-color-highlight-surface: #0C4A6E; --dp-color-highlight-text: #E0F2FE; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="sky"] { --dp-color-primary: #7DD3FC; --dp-color-primary-hover: #BAE6FD; --dp-color-primary-active: #E0F2FE; --dp-color-primary-solid: #0369A1; --dp-color-primary-solid-hover: #0284C7; --dp-color-primary-solid-active: #0EA5E9; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #082F49; --dp-color-primary-subtle-hover: #0C4A6E; --dp-color-primary-border: #075985; --dp-color-focus-ring: #7DD3FC; --dp-color-highlight-surface: #0C4A6E; --dp-color-highlight-text: #E0F2FE; } } [data-dp-preset="blue"] { --dp-color-primary: #1D4ED8; --dp-color-primary-hover: #1E40AF; --dp-color-primary-active: #1E3A8A; --dp-color-primary-solid: #1D4ED8; --dp-color-primary-solid-hover: #1E40AF; --dp-color-primary-solid-active: #1E3A8A; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #EFF6FF; --dp-color-primary-subtle-hover: #DBEAFE; --dp-color-primary-border: #BFDBFE; --dp-color-focus-ring: #1D4ED8; --dp-color-highlight-surface: #EFF6FF; --dp-color-highlight-text: #1E40AF; } [data-dp-theme="dark"][data-dp-preset="blue"], .dark-mode[data-dp-preset="blue"] { --dp-color-primary: #93C5FD; --dp-color-primary-hover: #BFDBFE; --dp-color-primary-active: #DBEAFE; --dp-color-primary-solid: #1D4ED8; --dp-color-primary-solid-hover: #2563EB; --dp-color-primary-solid-active: #3B82F6; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #172554; --dp-color-primary-subtle-hover: #1E3A8A; --dp-color-primary-border: #1E40AF; --dp-color-focus-ring: #93C5FD; --dp-color-highlight-surface: #1E3A8A; --dp-color-highlight-text: #DBEAFE; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="blue"] { --dp-color-primary: #93C5FD; --dp-color-primary-hover: #BFDBFE; --dp-color-primary-active: #DBEAFE; --dp-color-primary-solid: #1D4ED8; --dp-color-primary-solid-hover: #2563EB; --dp-color-primary-solid-active: #3B82F6; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #172554; --dp-color-primary-subtle-hover: #1E3A8A; --dp-color-primary-border: #1E40AF; --dp-color-focus-ring: #93C5FD; --dp-color-highlight-surface: #1E3A8A; --dp-color-highlight-text: #DBEAFE; } } [data-dp-preset="indigo"] { --dp-color-primary: #4338CA; --dp-color-primary-hover: #3730A3; --dp-color-primary-active: #312E81; --dp-color-primary-solid: #4338CA; --dp-color-primary-solid-hover: #3730A3; --dp-color-primary-solid-active: #312E81; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #EEF2FF; --dp-color-primary-subtle-hover: #E0E7FF; --dp-color-primary-border: #C7D2FE; --dp-color-focus-ring: #4338CA; --dp-color-highlight-surface: #EEF2FF; --dp-color-highlight-text: #3730A3; } [data-dp-theme="dark"][data-dp-preset="indigo"], .dark-mode[data-dp-preset="indigo"] { --dp-color-primary: #A5B4FC; --dp-color-primary-hover: #C7D2FE; --dp-color-primary-active: #E0E7FF; --dp-color-primary-solid: #4338CA; --dp-color-primary-solid-hover: #4F46E5; --dp-color-primary-solid-active: #6366F1; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #1E1B4B; --dp-color-primary-subtle-hover: #312E81; --dp-color-primary-border: #3730A3; --dp-color-focus-ring: #A5B4FC; --dp-color-highlight-surface: #312E81; --dp-color-highlight-text: #E0E7FF; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="indigo"] { --dp-color-primary: #A5B4FC; --dp-color-primary-hover: #C7D2FE; --dp-color-primary-active: #E0E7FF; --dp-color-primary-solid: #4338CA; --dp-color-primary-solid-hover: #4F46E5; --dp-color-primary-solid-active: #6366F1; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #1E1B4B; --dp-color-primary-subtle-hover: #312E81; --dp-color-primary-border: #3730A3; --dp-color-focus-ring: #A5B4FC; --dp-color-highlight-surface: #312E81; --dp-color-highlight-text: #E0E7FF; } } [data-dp-preset="violet"] { --dp-color-primary: #6D28D9; --dp-color-primary-hover: #5B21B6; --dp-color-primary-active: #4C1D95; --dp-color-primary-solid: #6D28D9; --dp-color-primary-solid-hover: #5B21B6; --dp-color-primary-solid-active: #4C1D95; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F5F3FF; --dp-color-primary-subtle-hover: #EDE9FE; --dp-color-primary-border: #DDD6FE; --dp-color-focus-ring: #6D28D9; --dp-color-highlight-surface: #F5F3FF; --dp-color-highlight-text: #5B21B6; } [data-dp-theme="dark"][data-dp-preset="violet"], .dark-mode[data-dp-preset="violet"] { --dp-color-primary: #C4B5FD; --dp-color-primary-hover: #DDD6FE; --dp-color-primary-active: #EDE9FE; --dp-color-primary-solid: #6D28D9; --dp-color-primary-solid-hover: #7C3AED; --dp-color-primary-solid-active: #8B5CF6; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #2E1065; --dp-color-primary-subtle-hover: #4C1D95; --dp-color-primary-border: #5B21B6; --dp-color-focus-ring: #C4B5FD; --dp-color-highlight-surface: #4C1D95; --dp-color-highlight-text: #EDE9FE; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="violet"] { --dp-color-primary: #C4B5FD; --dp-color-primary-hover: #DDD6FE; --dp-color-primary-active: #EDE9FE; --dp-color-primary-solid: #6D28D9; --dp-color-primary-solid-hover: #7C3AED; --dp-color-primary-solid-active: #8B5CF6; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #2E1065; --dp-color-primary-subtle-hover: #4C1D95; --dp-color-primary-border: #5B21B6; --dp-color-focus-ring: #C4B5FD; --dp-color-highlight-surface: #4C1D95; --dp-color-highlight-text: #EDE9FE; } } [data-dp-preset="purple"] { --dp-color-primary: #7E22CE; --dp-color-primary-hover: #6B21A8; --dp-color-primary-active: #581C87; --dp-color-primary-solid: #7E22CE; --dp-color-primary-solid-hover: #6B21A8; --dp-color-primary-solid-active: #581C87; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FAF5FF; --dp-color-primary-subtle-hover: #F3E8FF; --dp-color-primary-border: #E9D5FF; --dp-color-focus-ring: #7E22CE; --dp-color-highlight-surface: #FAF5FF; --dp-color-highlight-text: #6B21A8; } [data-dp-theme="dark"][data-dp-preset="purple"], .dark-mode[data-dp-preset="purple"] { --dp-color-primary: #D8B4FE; --dp-color-primary-hover: #E9D5FF; --dp-color-primary-active: #F3E8FF; --dp-color-primary-solid: #7E22CE; --dp-color-primary-solid-hover: #9333EA; --dp-color-primary-solid-active: #A855F7; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #3B0764; --dp-color-primary-subtle-hover: #581C87; --dp-color-primary-border: #6B21A8; --dp-color-focus-ring: #D8B4FE; --dp-color-highlight-surface: #581C87; --dp-color-highlight-text: #F3E8FF; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="purple"] { --dp-color-primary: #D8B4FE; --dp-color-primary-hover: #E9D5FF; --dp-color-primary-active: #F3E8FF; --dp-color-primary-solid: #7E22CE; --dp-color-primary-solid-hover: #9333EA; --dp-color-primary-solid-active: #A855F7; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #3B0764; --dp-color-primary-subtle-hover: #581C87; --dp-color-primary-border: #6B21A8; --dp-color-focus-ring: #D8B4FE; --dp-color-highlight-surface: #581C87; --dp-color-highlight-text: #F3E8FF; } } [data-dp-preset="fuchsia"] { --dp-color-primary: #A21CAF; --dp-color-primary-hover: #86198F; --dp-color-primary-active: #701A75; --dp-color-primary-solid: #A21CAF; --dp-color-primary-solid-hover: #86198F; --dp-color-primary-solid-active: #701A75; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FDF4FF; --dp-color-primary-subtle-hover: #FAE8FF; --dp-color-primary-border: #F5D0FE; --dp-color-focus-ring: #A21CAF; --dp-color-highlight-surface: #FDF4FF; --dp-color-highlight-text: #86198F; } [data-dp-theme="dark"][data-dp-preset="fuchsia"], .dark-mode[data-dp-preset="fuchsia"] { --dp-color-primary: #F0ABFC; --dp-color-primary-hover: #F5D0FE; --dp-color-primary-active: #FAE8FF; --dp-color-primary-solid: #A21CAF; --dp-color-primary-solid-hover: #C026D3; --dp-color-primary-solid-active: #D946EF; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #4A044E; --dp-color-primary-subtle-hover: #701A75; --dp-color-primary-border: #86198F; --dp-color-focus-ring: #F0ABFC; --dp-color-highlight-surface: #701A75; --dp-color-highlight-text: #FAE8FF; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="fuchsia"] { --dp-color-primary: #F0ABFC; --dp-color-primary-hover: #F5D0FE; --dp-color-primary-active: #FAE8FF; --dp-color-primary-solid: #A21CAF; --dp-color-primary-solid-hover: #C026D3; --dp-color-primary-solid-active: #D946EF; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #4A044E; --dp-color-primary-subtle-hover: #701A75; --dp-color-primary-border: #86198F; --dp-color-focus-ring: #F0ABFC; --dp-color-highlight-surface: #701A75; --dp-color-highlight-text: #FAE8FF; } } [data-dp-preset="pink"] { --dp-color-primary: #BE185D; --dp-color-primary-hover: #9D174D; --dp-color-primary-active: #831843; --dp-color-primary-solid: #BE185D; --dp-color-primary-solid-hover: #9D174D; --dp-color-primary-solid-active: #831843; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FDF2F8; --dp-color-primary-subtle-hover: #FCE7F3; --dp-color-primary-border: #FBCFE8; --dp-color-focus-ring: #BE185D; --dp-color-highlight-surface: #FDF2F8; --dp-color-highlight-text: #9D174D; } [data-dp-theme="dark"][data-dp-preset="pink"], .dark-mode[data-dp-preset="pink"] { --dp-color-primary: #F9A8D4; --dp-color-primary-hover: #FBCFE8; --dp-color-primary-active: #FCE7F3; --dp-color-primary-solid: #BE185D; --dp-color-primary-solid-hover: #DB2777; --dp-color-primary-solid-active: #EC4899; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #500724; --dp-color-primary-subtle-hover: #831843; --dp-color-primary-border: #9D174D; --dp-color-focus-ring: #F9A8D4; --dp-color-highlight-surface: #831843; --dp-color-highlight-text: #FCE7F3; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="pink"] { --dp-color-primary: #F9A8D4; --dp-color-primary-hover: #FBCFE8; --dp-color-primary-active: #FCE7F3; --dp-color-primary-solid: #BE185D; --dp-color-primary-solid-hover: #DB2777; --dp-color-primary-solid-active: #EC4899; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #500724; --dp-color-primary-subtle-hover: #831843; --dp-color-primary-border: #9D174D; --dp-color-focus-ring: #F9A8D4; --dp-color-highlight-surface: #831843; --dp-color-highlight-text: #FCE7F3; } } [data-dp-preset="rose"] { --dp-color-primary: #BE123C; --dp-color-primary-hover: #9F1239; --dp-color-primary-active: #881337; --dp-color-primary-solid: #BE123C; --dp-color-primary-solid-hover: #9F1239; --dp-color-primary-solid-active: #881337; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FFF1F2; --dp-color-primary-subtle-hover: #FFE4E6; --dp-color-primary-border: #FECDD3; --dp-color-focus-ring: #BE123C; --dp-color-highlight-surface: #FFF1F2; --dp-color-highlight-text: #9F1239; } [data-dp-theme="dark"][data-dp-preset="rose"], .dark-mode[data-dp-preset="rose"] { --dp-color-primary: #FDA4AF; --dp-color-primary-hover: #FECDD3; --dp-color-primary-active: #FFE4E6; --dp-color-primary-solid: #BE123C; --dp-color-primary-solid-hover: #E11D48; --dp-color-primary-solid-active: #F43F5E; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #4C0519; --dp-color-primary-subtle-hover: #881337; --dp-color-primary-border: #9F1239; --dp-color-focus-ring: #FDA4AF; --dp-color-highlight-surface: #881337; --dp-color-highlight-text: #FFE4E6; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="rose"] { --dp-color-primary: #FDA4AF; --dp-color-primary-hover: #FECDD3; --dp-color-primary-active: #FFE4E6; --dp-color-primary-solid: #BE123C; --dp-color-primary-solid-hover: #E11D48; --dp-color-primary-solid-active: #F43F5E; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #4C0519; --dp-color-primary-subtle-hover: #881337; --dp-color-primary-border: #9F1239; --dp-color-focus-ring: #FDA4AF; --dp-color-highlight-surface: #881337; --dp-color-highlight-text: #FFE4E6; } } [data-dp-preset="slate"] { --dp-color-primary: #334155; --dp-color-primary-hover: #1E293B; --dp-color-primary-active: #0F172A; --dp-color-primary-solid: #334155; --dp-color-primary-solid-hover: #1E293B; --dp-color-primary-solid-active: #0F172A; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F8FAFC; --dp-color-primary-subtle-hover: #F1F5F9; --dp-color-primary-border: #E2E8F0; --dp-color-focus-ring: #334155; --dp-color-highlight-surface: #F8FAFC; --dp-color-highlight-text: #1E293B; } [data-dp-theme="dark"][data-dp-preset="slate"], .dark-mode[data-dp-preset="slate"] { --dp-color-primary: #CBD5E1; --dp-color-primary-hover: #E2E8F0; --dp-color-primary-active: #F1F5F9; --dp-color-primary-solid: #334155; --dp-color-primary-solid-hover: #475569; --dp-color-primary-solid-active: #64748B; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #020617; --dp-color-primary-subtle-hover: #0F172A; --dp-color-primary-border: #1E293B; --dp-color-focus-ring: #CBD5E1; --dp-color-highlight-surface: #0F172A; --dp-color-highlight-text: #F1F5F9; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="slate"] { --dp-color-primary: #CBD5E1; --dp-color-primary-hover: #E2E8F0; --dp-color-primary-active: #F1F5F9; --dp-color-primary-solid: #334155; --dp-color-primary-solid-hover: #475569; --dp-color-primary-solid-active: #64748B; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #020617; --dp-color-primary-subtle-hover: #0F172A; --dp-color-primary-border: #1E293B; --dp-color-focus-ring: #CBD5E1; --dp-color-highlight-surface: #0F172A; --dp-color-highlight-text: #F1F5F9; } } [data-dp-preset="gray"] { --dp-color-primary: #374151; --dp-color-primary-hover: #1F2937; --dp-color-primary-active: #111827; --dp-color-primary-solid: #374151; --dp-color-primary-solid-hover: #1F2937; --dp-color-primary-solid-active: #111827; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #F9FAFB; --dp-color-primary-subtle-hover: #F3F4F6; --dp-color-primary-border: #E5E7EB; --dp-color-focus-ring: #374151; --dp-color-highlight-surface: #F9FAFB; --dp-color-highlight-text: #1F2937; } [data-dp-theme="dark"][data-dp-preset="gray"], .dark-mode[data-dp-preset="gray"] { --dp-color-primary: #D1D5DB; --dp-color-primary-hover: #E5E7EB; --dp-color-primary-active: #F3F4F6; --dp-color-primary-solid: #374151; --dp-color-primary-solid-hover: #4B5563; --dp-color-primary-solid-active: #6B7280; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #030712; --dp-color-primary-subtle-hover: #111827; --dp-color-primary-border: #1F2937; --dp-color-focus-ring: #D1D5DB; --dp-color-highlight-surface: #111827; --dp-color-highlight-text: #F3F4F6; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="gray"] { --dp-color-primary: #D1D5DB; --dp-color-primary-hover: #E5E7EB; --dp-color-primary-active: #F3F4F6; --dp-color-primary-solid: #374151; --dp-color-primary-solid-hover: #4B5563; --dp-color-primary-solid-active: #6B7280; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #030712; --dp-color-primary-subtle-hover: #111827; --dp-color-primary-border: #1F2937; --dp-color-focus-ring: #D1D5DB; --dp-color-highlight-surface: #111827; --dp-color-highlight-text: #F3F4F6; } } [data-dp-preset="zinc"] { --dp-color-primary: #3F3F46; --dp-color-primary-hover: #27272A; --dp-color-primary-active: #18181B; --dp-color-primary-solid: #3F3F46; --dp-color-primary-solid-hover: #27272A; --dp-color-primary-solid-active: #18181B; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FAFAFA; --dp-color-primary-subtle-hover: #F4F4F5; --dp-color-primary-border: #E4E4E7; --dp-color-focus-ring: #3F3F46; --dp-color-highlight-surface: #FAFAFA; --dp-color-highlight-text: #27272A; } [data-dp-theme="dark"][data-dp-preset="zinc"], .dark-mode[data-dp-preset="zinc"] { --dp-color-primary: #D4D4D8; --dp-color-primary-hover: #E4E4E7; --dp-color-primary-active: #F4F4F5; --dp-color-primary-solid: #3F3F46; --dp-color-primary-solid-hover: #52525B; --dp-color-primary-solid-active: #71717A; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #09090B; --dp-color-primary-subtle-hover: #18181B; --dp-color-primary-border: #27272A; --dp-color-focus-ring: #D4D4D8; --dp-color-highlight-surface: #18181B; --dp-color-highlight-text: #F4F4F5; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="zinc"] { --dp-color-primary: #D4D4D8; --dp-color-primary-hover: #E4E4E7; --dp-color-primary-active: #F4F4F5; --dp-color-primary-solid: #3F3F46; --dp-color-primary-solid-hover: #52525B; --dp-color-primary-solid-active: #71717A; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #09090B; --dp-color-primary-subtle-hover: #18181B; --dp-color-primary-border: #27272A; --dp-color-focus-ring: #D4D4D8; --dp-color-highlight-surface: #18181B; --dp-color-highlight-text: #F4F4F5; } } [data-dp-preset="neutral"] { --dp-color-primary: #404040; --dp-color-primary-hover: #262626; --dp-color-primary-active: #171717; --dp-color-primary-solid: #404040; --dp-color-primary-solid-hover: #262626; --dp-color-primary-solid-active: #171717; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FAFAFA; --dp-color-primary-subtle-hover: #F5F5F5; --dp-color-primary-border: #E5E5E5; --dp-color-focus-ring: #404040; --dp-color-highlight-surface: #FAFAFA; --dp-color-highlight-text: #262626; } [data-dp-theme="dark"][data-dp-preset="neutral"], .dark-mode[data-dp-preset="neutral"] { --dp-color-primary: #D4D4D4; --dp-color-primary-hover: #E5E5E5; --dp-color-primary-active: #F5F5F5; --dp-color-primary-solid: #404040; --dp-color-primary-solid-hover: #525252; --dp-color-primary-solid-active: #737373; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #0A0A0A; --dp-color-primary-subtle-hover: #171717; --dp-color-primary-border: #262626; --dp-color-focus-ring: #D4D4D4; --dp-color-highlight-surface: #171717; --dp-color-highlight-text: #F5F5F5; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="neutral"] { --dp-color-primary: #D4D4D4; --dp-color-primary-hover: #E5E5E5; --dp-color-primary-active: #F5F5F5; --dp-color-primary-solid: #404040; --dp-color-primary-solid-hover: #525252; --dp-color-primary-solid-active: #737373; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #0A0A0A; --dp-color-primary-subtle-hover: #171717; --dp-color-primary-border: #262626; --dp-color-focus-ring: #D4D4D4; --dp-color-highlight-surface: #171717; --dp-color-highlight-text: #F5F5F5; } } [data-dp-preset="stone"] { --dp-color-primary: #44403C; --dp-color-primary-hover: #292524; --dp-color-primary-active: #1C1917; --dp-color-primary-solid: #44403C; --dp-color-primary-solid-hover: #292524; --dp-color-primary-solid-active: #1C1917; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #FAFAF9; --dp-color-primary-subtle-hover: #F5F5F4; --dp-color-primary-border: #E7E5E4; --dp-color-focus-ring: #44403C; --dp-color-highlight-surface: #FAFAF9; --dp-color-highlight-text: #292524; } [data-dp-theme="dark"][data-dp-preset="stone"], .dark-mode[data-dp-preset="stone"] { --dp-color-primary: #D6D3D1; --dp-color-primary-hover: #E7E5E4; --dp-color-primary-active: #F5F5F4; --dp-color-primary-solid: #44403C; --dp-color-primary-solid-hover: #57534E; --dp-color-primary-solid-active: #78716C; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #0C0A09; --dp-color-primary-subtle-hover: #1C1917; --dp-color-primary-border: #292524; --dp-color-focus-ring: #D6D3D1; --dp-color-highlight-surface: #1C1917; --dp-color-highlight-text: #F5F5F4; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="stone"] { --dp-color-primary: #D6D3D1; --dp-color-primary-hover: #E7E5E4; --dp-color-primary-active: #F5F5F4; --dp-color-primary-solid: #44403C; --dp-color-primary-solid-hover: #57534E; --dp-color-primary-solid-active: #78716C; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #0C0A09; --dp-color-primary-subtle-hover: #1C1917; --dp-color-primary-border: #292524; --dp-color-focus-ring: #D6D3D1; --dp-color-highlight-surface: #1C1917; --dp-color-highlight-text: #F5F5F4; } } [data-dp-preset="aura-default"] { --dp-color-primary: #047857; --dp-color-primary-hover: #065F46; --dp-color-primary-active: #064E3B; --dp-color-primary-solid: #047857; --dp-color-primary-solid-hover: #065F46; --dp-color-primary-solid-active: #064E3B; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #ECFDF5; --dp-color-primary-subtle-hover: #D1FAE5; --dp-color-primary-border: #A7F3D0; --dp-color-focus-ring: #047857; --dp-color-highlight-surface: #ECFDF5; --dp-color-highlight-text: #065F46; } [data-dp-theme="dark"][data-dp-preset="aura-default"], .dark-mode[data-dp-preset="aura-default"] { --dp-color-primary: #6EE7B7; --dp-color-primary-hover: #A7F3D0; --dp-color-primary-active: #D1FAE5; --dp-color-primary-solid: #047857; --dp-color-primary-solid-hover: #059669; --dp-color-primary-solid-active: #636611; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #022C22; --dp-color-primary-subtle-hover: #064E3B; --dp-color-primary-border: #065F46; --dp-color-focus-ring: #6EE7B7; --dp-color-highlight-surface: #064E3B; --dp-color-highlight-text: #D1FAE5; } @media (prefers-color-scheme: dark) { :root:not([data-dp-theme="light"])[data-dp-preset="aura-default"] { --dp-color-primary: #6EE7B7; --dp-color-primary-hover: #A7F3D0; --dp-color-primary-active: #D1FAE5; --dp-color-primary-solid: #047857; --dp-color-primary-solid-hover: #059669; --dp-color-primary-solid-active: #636611; --dp-color-primary-on-solid: #FFFFFF; --dp-color-primary-subtle: #022C22; --dp-color-primary-subtle-hover: #064E3B; --dp-color-primary-border: #065F46; --dp-color-focus-ring: #6EE7B7; --dp-color-highlight-surface: #064E3B; --dp-color-highlight-text: #D1FAE5; } }