@semanticus/semanticus-css 2.2.0 → 3.1.0

package/src/variables/_theme.css

@@ -10,260 +10,398 @@
     color-scheme: dark;
   }
 
-  /* === COLORS === */
-
-  /* Slate shades */
-  --color-slate-950: #0e1118;
-  --color-slate-900: #181c25;
-  --color-slate-850: #202632;
-  --color-slate-800: #2a3140;
-  --color-slate-700: #3d475c;
-  --color-slate-750: #333c4e;
-  --color-slate-650: #48536b;
-  --color-slate-600: #525f7a;
-  --color-slate-550: #5d6b89;
-  --color-slate-350: #909ebe;
-  --color-slate-300: #a0acc7;
-  --color-slate-250: #b0b9d0;
-  --color-slate-200: #bfc7d9;
-  --color-slate-150: #cfd5e2;
-  --color-slate-100: #dfe3eb;
-  --color-slate-50: #eff1f4;
-
-  /* Zinc shades */
-  --color-zinc-950: #0f1114;
-  --color-zinc-900: #191c20;
-  --color-zinc-850: #23262c;
-  --color-zinc-750: #373c44;
-  --color-zinc-700: #424751;
-  --color-zinc-650: #4d535e;
-  --color-zinc-600: #5c6370;
-  --color-zinc-550: #646b79;
-  --color-zinc-500: #6f7887;
-  --color-zinc-450: #7b8495;
-  --color-zinc-400: #8891a4;
-  --color-zinc-350: #969eaf;
-  --color-zinc-300: #a4acba;
-  --color-zinc-250: #b3b9c5;
-  --color-zinc-200: #c2c7d0;
-  --color-zinc-100: #e0e3e7;
-  --color-zinc-50: #f0f1f3;
-
-  /* === GLOBAL SYSTEM TOKENS === */
-
-  --color-background: light-dark(white, color-mix(in srgb, var(--color-slate-950), var(--color-slate-900)));
-  --color-background-opacity: 100%;
-  --color-text: light-dark(var(--color-zinc-750), var(--color-zinc-200));
-  --color-text-opacity: 100%;
-  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-  --color-border: light-dark(var(--color-slate-100), var(--color-slate-800));
-  --color-border-opacity: 100%;
-
-  /* Spacing - shared base unit */
-  --base-spacing: 0.75rem;
-  --spacing: var(--base-spacing);
-
-  /* Font Families */
-  --font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);
-  --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);
-  --font-family: var(--font-family-sans-serif);
+  /* ===== PRIVATE HELPER VARIABLES ===== */
+
+  /* --- Color Slate --- */
+  --_color-slate-950: #0e1118;
+  --_color-slate-900: #181c25;
+  --_color-slate-850: #202632;
+  --_color-slate-800: #2a3140;
+  --_color-slate-700: #3d475c;
+  --_color-slate-750: #333c4e;
+  --_color-slate-650: #48536b;
+  --_color-slate-600: #525f7a;
+  --_color-slate-550: #5d6b89;
+  --_color-slate-350: #909ebe;
+  --_color-slate-300: #a0acc7;
+  --_color-slate-250: #b0b9d0;
+  --_color-slate-200: #bfc7d9;
+  --_color-slate-150: #cfd5e2;
+  --_color-slate-100: #dfe3eb;
+  --_color-slate-50: #eff1f4;
+
+  /* --- Color Zinc --- */
+  --_color-zinc-950: #0f1114;
+  --_color-zinc-900: #191c20;
+  --_color-zinc-850: #23262c;
+  --_color-zinc-750: #373c44;
+  --_color-zinc-700: #424751;
+  --_color-zinc-650: #4d535e;
+  --_color-zinc-600: #5c6370;
+  --_color-zinc-550: #646b79;
+  --_color-zinc-500: #6f7887;
+  --_color-zinc-450: #7b8495;
+  --_color-zinc-400: #8891a4;
+  --_color-zinc-350: #969eaf;
+  --_color-zinc-300: #a4acba;
+  --_color-zinc-250: #b3b9c5;
+  --_color-zinc-200: #c2c7d0;
+  --_color-zinc-100: #e0e3e7;
+  --_color-zinc-50: #f0f1f3;
+
+  /* --- Color Jade --- */
+  --_color-jade-250: #00cc88;
+  --_color-jade-450: #029764;
+
+  /* --- Color Red --- */
+  --_color-red-250: #f5a390;
+  --_color-red-450: #ee402e;
+
+  /* Scale factor that changes according to a given breakpoint, helping make `--spacing` responsive */
+  --_spacing-scale: 1;
+
+  /* ===== TIER 1: SYSTEM TOKENS ===== */
+
+  /* --- Background Color --- */
+  --background-color: light-dark(
+    white,
+    color-mix(in srgb, var(--_color-slate-950), var(--_color-slate-900))
+  );
+
+  /* --- Color --- */
+  --color: light-dark(var(--_color-zinc-750), var(--_color-zinc-200));
 
-  /* Typography - base defaults */
+  /* --- Typography --- */
+  --typography-margin-block: 1rem;
+  --typography-color: var(--color);
+  --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
   --line-height: 1.5;
   --font-weight: 400;
   --font-size: 97%;
   --text-underline-offset: 0.1rem;
-  --typography-spacing-vertical: 1rem;
+  --font-family-emoji:
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-sans-serif:
+    system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
+    "Helvetica Neue", sans-serif, var(--font-family-emoji);
+  --font-family-monospace:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace, var(--font-family-emoji);
+  --font-family: var(--font-family-sans-serif);
+
+  /* --- Border --- */
+  --border-color: light-dark(var(--_color-slate-100), var(--_color-slate-800));
+  --border-radius: 0.25rem;
+  --border-width: 0.0625rem;
+
+  /* --- Outline --- */
+  --outline-width: 1px;
 
-  /* Borders & Effects */
-  --radius: 0.25rem;
-  --border-size: 0.0625rem;
-  --outline-size: 0.125rem;
+  /* --- Opacity --- */
+  --opacity-disabled: 0.5;
+
+  /* --- Transition --- */
   --transition: 0.2s ease-in-out;
 
-  --shadow:
-    0.0145rem 0.029rem 0.174rem light-dark(rgb(129 145 181 / 0.01698), rgb(7 9 12 / 0.01698)),
-    0.0335rem 0.067rem 0.402rem light-dark(rgb(129 145 181 / 0.024), rgb(7 9 12 / 0.024)),
-    0.0625rem 0.125rem 0.75rem light-dark(rgb(129 145 181 / 0.03), rgb(7 9 12 / 0.03)),
-    0.1125rem 0.225rem 1.35rem light-dark(rgb(129 145 181 / 0.036), rgb(7 9 12 / 0.036)),
-    0.2085rem 0.417rem 2.502rem light-dark(rgb(129 145 181 / 0.04302), rgb(7 9 12 / 0.04302)),
+  /* --- Exceptions --- */
+
+  /* Responsive value used for margins and padding throughout the page */
+  --spacing: calc(0.75rem * var(--_spacing-scale));
+
+  /* Internal helper used to derive colors representing the hover state */
+  --color-hover-shade: light-dark(
+    var(--_color-zinc-700),
+    var(--_color-zinc-300)
+  );
+
+  /* ===== TIER 2: VARIANT TOKENS ===== */
+
+  /* --- Primary Intent --- */
+  --primary-background-color-hover: color-mix(
+    in srgb,
+    var(--primary-background-color),
+    var(--color-hover-shade) 30%
+  );
+  --primary-color-hover: color-mix(
+    in srgb,
+    var(--primary-color),
+    var(--color-hover-shade) 30%
+  );
+  --primary-outline-color: color-mix(
+    in srgb,
+    var(--primary-color),
+    light-dark(white, black) 30%
+  );
+
+  /* --- Secondary Intent --- */
+  --secondary-background-color: var(--_color-slate-550);
+  --secondary-background-color-hover: color-mix(
+    in srgb,
+    var(--secondary-background-color),
+    var(--color-hover-shade) 30%
+  );
+  --secondary-color: light-dark(
+    var(--_color-slate-550),
+    var(--_color-zinc-350)
+  );
+  --secondary-color-hover: color-mix(
+    in srgb,
+    var(--secondary-color),
+    var(--color-hover-shade) 30%
+  );
+  --secondary-outline-color: color-mix(
+    in srgb,
+    var(--secondary-color) 70%,
+    light-dark(white, black)
+  );
+
+  /* --- Success Intent --- */
+  --success-background-color: var(--_color-jade-450);
+  --success-background-color-hover: color-mix(
+    in srgb,
+    var(--success-background-color),
+    var(--color-hover-shade) 30%
+  );
+  --success-color: light-dark(var(--_color-jade-450), var(--_color-jade-250));
+  --success-color-hover: color-mix(
+    in srgb,
+    var(--success-color),
+    var(--color-hover-shade) 30%
+  );
+  --success-outline-color: color-mix(
+    in srgb,
+    var(--success-color) 70%,
+    light-dark(white, black)
+  );
+
+  /* --- Danger Intent --- */
+  --danger-background-color: var(--_color-red-450);
+  --danger-background-color-hover: color-mix(
+    in srgb,
+    var(--danger-background-color),
+    var(--color-hover-shade) 30%
+  );
+  --danger-color: light-dark(var(--_color-red-450), var(--_color-red-250));
+  --danger-color-hover: color-mix(
+    in srgb,
+    var(--danger-color),
+    var(--color-hover-shade) 30%
+  );
+  --danger-outline-color: color-mix(
+    in srgb,
+    var(--danger-color) 70%,
+    light-dark(white, black)
+  );
+
+  /* ===== TIER 3: COMPONENT TOKENS ===== */
+
+  /* --- Building Blocks --- */
+  /* All purpose shadow, used by dialog, dropdown and toast components */
+  --menu-box-shadow:
+    0.0145rem 0.029rem 0.174rem
+      light-dark(rgb(129 145 181 / 0.01698), rgb(7 9 12 / 0.01698)),
+    0.0335rem 0.067rem 0.402rem
+      light-dark(rgb(129 145 181 / 0.024), rgb(7 9 12 / 0.024)),
+    0.0625rem 0.125rem 0.75rem
+      light-dark(rgb(129 145 181 / 0.03), rgb(7 9 12 / 0.03)),
+    0.1125rem 0.225rem 1.35rem
+      light-dark(rgb(129 145 181 / 0.036), rgb(7 9 12 / 0.036)),
+    0.2085rem 0.417rem 2.502rem
+      light-dark(rgb(129 145 181 / 0.04302), rgb(7 9 12 / 0.04302)),
     0.5rem 1rem 6rem light-dark(rgb(129 145 181 / 0.06), rgb(7 9 12 / 0.06)),
     0 0 0 0.0625rem light-dark(rgb(129 145 181 / 0.015), rgb(7 9 12 / 0.015));
 
-  /* Intent Colors */
-
-  /* helpers to add/remove shade to hover states */
-  --color-hover-effect: light-dark(var(--color-zinc-700), var(--color-zinc-300));
-  --color-focus-effect: light-dark(var(--color-zinc-300), var(--color-slate-700));
-
-  /* Primary colors - rest of the variables are defined by the palette that gets imported by the _all.css file */
-  --color-primary-text-hover: color-mix(in srgb, var(--color-primary-text) 70%, var(--color-hover-effect));
-  --color-primary-fill-hover: color-mix(in srgb, var(--color-primary-fill) 70%, var(--color-hover-effect));
-  --color-primary-focus-ring: color-mix(in srgb, var(--color-primary-text) 70%, var(--color-focus-effect));
-
-  /* Secondary colors */
-  --color-secondary-text: light-dark(var(--color-slate-550), var(--color-zinc-350));
-  --color-secondary-fill: var(--color-slate-550);
-  --color-secondary-on-fill: white;
-  --color-secondary-text-hover: color-mix(in srgb, var(--color-secondary-text) 70%, var(--color-hover-effect));
-  --color-secondary-fill-hover: color-mix(in srgb, var(--color-secondary-fill) 70%, var(--color-hover-effect));
-  --color-secondary-focus-ring: color-mix(in srgb, var(--color-secondary-text) 70%, var(--color-focus-effect));
-
-  /* Contrast colors */
-  --color-contrast-text: light-dark(var(--color-slate-900), var(--color-slate-100));
-  --color-contrast-fill: light-dark(var(--color-slate-900), var(--color-slate-50));
-  --color-contrast-on-fill: light-dark(white, var(--color-zinc-900));
-  --color-contrast-text-hover: color-mix(in srgb, var(--color-contrast-text) 70%, var(--color-hover-effect));
-  --color-contrast-fill-hover: color-mix(in srgb, var(--color-contrast-fill) 70%, var(--color-hover-effect));
-  --color-contrast-focus-ring: color-mix(in srgb, var(--color-contrast-text) 70%, var(--color-focus-effect));
-
-  /* Success colors */
-  --color-jade-450: #029764;
-  --color-jade-250: #00cc88;
-  --color-success-text: light-dark(var(--color-jade-450), var(--color-jade-250));
-  --color-success-fill: var(--color-jade-450);
-  --color-success-on-fill: white;
-  --color-success-text-hover: color-mix(in srgb, var(--color-success-text) 70%, var(--color-hover-effect));
-  --color-success-fill-hover: color-mix(in srgb, var(--color-success-fill) 70%, var(--color-hover-effect));
-  --color-success-focus-ring: color-mix(in srgb, var(--color-success-text) 70%, var(--color-focus-effect));
-
-  /* Info colors */
-  --color-azure-450: #018cd4;
-  --color-azure-250: #79c0ff;
-  --color-info-text: light-dark(var(--color-azure-450), var(--color-azure-250));
-  --color-info-fill: var(--color-azure-450);
-  --color-info-on-fill: white;
-  --color-info-text-hover: color-mix(in srgb, var(--color-info-text) 70%, var(--color-hover-effect));
-  --color-info-fill-hover: color-mix(in srgb, var(--color-info-fill) 70%, var(--color-hover-effect));
-  --color-info-focus-ring: color-mix(in srgb, var(--color-info-text) 70%, var(--color-focus-effect));
-
-  /* Warning colors */
-  --color-amber-350: #c79400;
-  --color-amber-250: #e8ae01;
-  --color-warning-text: light-dark(var(--color-amber-350), var(--color-amber-250));
-  --color-warning-fill: var(--color-amber-350);
-  --color-warning-on-fill: white;
-  --color-warning-text-hover: color-mix(in srgb, var(--color-warning-text) 70%, var(--color-hover-effect));
-  --color-warning-fill-hover: color-mix(in srgb, var(--color-warning-fill) 70%, var(--color-hover-effect));
-  --color-warning-focus-ring: color-mix(in srgb, var(--color-warning-text) 70%, var(--color-focus-effect));
-
-  /* Danger colors */
-  --color-red-450: #ee402e;
-  --color-red-250: #f5a390;
-  --color-danger-text: light-dark(var(--color-red-450), var(--color-red-250));
-  --color-danger-fill: var(--color-red-450);
-  --color-danger-on-fill: white;
-  --color-danger-text-hover: color-mix(in srgb, var(--color-danger-text) 70%, var(--color-hover-effect));
-  --color-danger-fill-hover: color-mix(in srgb, var(--color-danger-fill) 70%, var(--color-hover-effect));
-  --color-danger-focus-ring: color-mix(in srgb, var(--color-danger-text) 70%, var(--color-focus-effect));
-
-  /* === COMPONENT TOKENS === */
-
-  --a-decoration: underline;
-
-  /* === Typography tokens === */
-  --h1-size: 2rem;
-  --h2-size: 1.75rem;
-  --h3-size: 1.5rem;
-  --h4-size: 1.25rem;
-  --h5-size: 1.125rem;
-  --h6-size: 1rem;
-
-  /* === Button tokens === */
-  --button-shadow: 0 0 0 rgb(0 0 0 / 0);
-  --button-shadow-hover: 0 0 0 rgb(0 0 0 / 0);
-
-  /* === Code tokens === */
-  --code-fill: light-dark(
-    color-mix(in srgb, var(--color-slate-50) 75%, white),
-    color-mix(in srgb, var(--color-slate-900) 75%, var(--color-slate-850))
+  /* All overlay background, used by dialog */
+  --backdrop-background-color: light-dark(
+    oklch(
+      from color-mix(in srgb, var(--_color-zinc-100), var(--_color-zinc-50)) l c
+        h / 0.75
+    ),
+    oklch(from color-mix(in srgb, black, var(--_color-zinc-950)) l c h / 0.75)
   );
-  --code-text: light-dark(var(--color-zinc-550), var(--color-zinc-400));
-  --kbd-fill: var(--color-text);
-  --kbd-text: var(--color-background);
-
-  /* === Input / Form tokens === */
-  --input-spacing-vertical: 0.5rem;
-  --input-spacing-horizontal: 0.7rem;
-  --input-fill: light-dark(
-    color-mix(in srgb, var(--color-slate-50) 25%, white),
-    color-mix(in srgb, var(--color-slate-900), var(--color-slate-850))
+
+  /* Focus ring used across interactive elements, typically used in combination with --outline-width */
+  /* each component decides to which css property they should be applied */
+  --focus-ring-width: 0.125rem;
+
+  /* --- Buttons --- */
+  /* Affects button, input[type="button"], input[type="submit"], input[type="reset"], and elements with role="button" */
+  --buttons-background-color-hover: var(--primary-background-color-hover);
+  --buttons-background-color: var(--primary-background-color);
+  --buttons-color-hover: white;
+  --buttons-color: white;
+  --buttons-padding-block: var(--inputs-padding-block);
+  --buttons-padding-inline: var(--inputs-padding-inline);
+
+  /* --- Code --- */
+  --code-background-color: light-dark(
+    color-mix(in srgb, var(--_color-slate-50) 75%, white),
+    color-mix(in srgb, var(--_color-slate-900) 75%, var(--_color-slate-850))
   );
-  --input-fill-selected: light-dark(var(--color-slate-100), var(--color-slate-800));
-  --input-fill-active: light-dark(
-    white,
-    color-mix(in srgb, var(--color-slate-900) 75%, var(--color-slate-850))
+  --code-color: light-dark(var(--_color-zinc-550), var(--_color-zinc-400));
+  --kbd-background-color: var(--color);
+  --kbd-color: var(--background-color);
+  --kbd-font-weight: bolder;
+
+  /* --- Details --- */
+  /* Affects accordions and dropdowns */
+  --details-summary-background-color: var(--inputs-background-color);
+  --details-summary-color: var(--color);
+  --details-summary-color-open: var(--color-muted);
+
+  /* --- Dropdown styling applied to the summary element --- */
+  --details-dropdown-color: var(--inputs-placeholder-color);
+  --details-dropdown-border-color: var(--inputs-border-color);
+  --details-dropdown-padding-block: var(--inputs-padding-block);
+  --details-dropdown-padding-inline: var(--inputs-padding-inline);
+
+  /* --- Menu styling applied to the ul[role="menu"] element --- */
+  --details-menu-background-color: light-dark(white, var(--_color-slate-900));
+  --details-menu-border-color: light-dark(
+    var(--_color-slate-50),
+    var(--_color-slate-850)
+  );
+  --details-menu-color: var(--color);
+  --details-menu-background-color-hover: light-dark(
+    var(--_color-slate-50),
+    var(--_color-slate-850)
+  );
+
+  /* --- Dialog --- */
+  --dialog-border-color: var(--border-color);
+  --dialog-background-color: var(--background-color);
+
+  /* Shade styling, applied to header & footer elements */
+  --dialog-marginals-background-color: light-dark(
+    color-mix(in srgb, var(--_color-slate-50) 25%, white),
+    color-mix(in srgb, var(--_color-slate-50), transparent 95%)
+  );
+  --dialog-marginals-border-color: color-mix(
+    in srgb,
+    light-dark(var(--_color-slate-900), var(--_color-zinc-350)),
+    transparent 90%
   );
-  --input-border: light-dark(var(--color-slate-150), var(--color-slate-800));
-  --input-text: light-dark(var(--color-zinc-850), var(--color-zinc-100));
-  --input-placeholder-text: var(--color-text-muted);
-  --input-border-focus: var(--color-primary-fill);
-  --input-opacity-disabled: 0.5;
-
-  /* === Switch tokens === */
-  --switch-fill: light-dark(var(--color-slate-200), var(--color-slate-750));
-  --switch-fill-checked: var(--color-primary-fill);
-  --switch-thumb-fill: white;
-
-  /* === Range tokens === */
-  --range-track-border: light-dark(var(--color-slate-100), var(--color-slate-850));
-  --range-track-border-active: light-dark(var(--color-slate-200), var(--color-slate-800));
-  --range-thumb-border: var(--color-background);
-  --range-thumb-fill: var(--color-secondary-fill);
-  --range-thumb-fill-active: var(--color-primary-fill);
-
-  /* === Details / Accordion tokens === */
-  --details-summary-text: var(--color-text);
-  --details-summary-text-hover: var(--color-primary-text-hover);
-  --details-summary-text-open: var(--color-text-muted);
-
-  /* === Dialog / Alert tokens === */
-  --dialog-fill: light-dark(var(--color-background), var(--color-slate-900));
-  --dialog-border: var(--color-border);
-  --dialog-shadow: var(--shadow);
-  --dialog-section-fill: light-dark(
-    color-mix(in srgb, var(--color-slate-50) 25%, white),
-    color-mix(in srgb, var(--color-slate-50), transparent 95%)
+
+  /* --- Group --- */
+  /* Affects elements with role="group" and its children */
+  --group-buttons-padding-inline: 1rem;
+
+  /* --- Headings --- */
+  --heading-font-weight: 700;
+  --h1-font-size: 2rem;
+  --h1-margin-top: 3rem;
+  --h1-line-height: 1.125;
+  --h2-font-size: 1.75rem;
+  --h2-margin-top: 2.625rem;
+  --h2-line-height: 1.15;
+  --h3-font-size: 1.5rem;
+  --h3-margin-top: 2.25rem;
+  --h3-line-height: 1.175;
+  --h4-font-size: 1.25rem;
+  --h4-margin-top: 1.874rem;
+  --h4-line-height: 1.2;
+  --h5-font-size: 1.125rem;
+  --h5-margin-top: 1.6875rem;
+  --h5-line-height: 1.225;
+  --h6-font-size: 1rem;
+  --h6-margin-top: 1.5rem;
+  --h6-line-height: 1.25;
+
+  /* --- Icons --- */
+  --icons-background-position-gap: 0.75rem;
+  --icons-width: 1em;
+
+  /* --- Inputs --- */
+  /* Affects input, select, textarea and details elements */
+  --inputs-accent-color: var(--primary-background-color);
+  --inputs-accent-color-muted: light-dark(
+    var(--_color-slate-200),
+    var(--_color-slate-750)
   );
-  --dialog-section-border: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-zinc-350)), transparent 90%);
-  --dialog-overlay: light-dark(
-    oklch(from color-mix(in srgb, var(--color-zinc-100), var(--color-zinc-50)) l c h / 0.75),
-    oklch(from color-mix(in srgb, black, var(--color-zinc-950)) l c h / 0.75)
+  --inputs-padding-block: 0.5rem;
+  --inputs-padding-inline: 0.7rem;
+  --inputs-background-color: light-dark(
+    color-mix(in srgb, var(--_color-slate-50) 25%, white),
+    color-mix(in srgb, var(--_color-slate-900), var(--_color-slate-850))
   );
+  --inputs-background-color-focus: light-dark(
+    white,
+    color-mix(in srgb, var(--_color-slate-900) 75%, var(--_color-slate-850))
+  );
+  --inputs-border-color: light-dark(
+    var(--_color-slate-150),
+    var(--_color-slate-800)
+  );
+  --inputs-color: light-dark(var(--_color-zinc-850), var(--_color-zinc-100));
+  --inputs-placeholder-color: var(--color-muted);
+
+  /* --- Input Checkbox --- */
+  --input-checkbox-border-width: 0.125rem;
 
-  /* === Menu / Dropdown tokens === */
-  --menu-fill: light-dark(white, var(--color-slate-900));
-  --menu-border: light-dark(var(--color-slate-50), var(--color-slate-850));
-  --menu-shadow: var(--shadow);
-  --menu-text: var(--color-text);
-  --menu-fill-hover: light-dark(var(--color-slate-50), var(--color-slate-850));
+  /* --- Input Radio --- */
+  --input-radio-background-color: white;
 
-  /* === Loading tokens === */
-  --loading-spinner-opacity: 0.5;
+  /* --- Input Range --- */
+  --input-range-thumb-size: 1.25rem;
+  --input-range-thumb-margin-top: -0.4375rem;
+  --input-range-thumb-border-color: var(--background-color);
+  --input-range-thumb-border-width: var(--focus-ring-width);
+  --input-range-track-background-color: var(--inputs-border-color);
+  --input-range-track-height: 0.375rem;
 
-  /* === Progress tokens === */
-  --progress-track-fill: light-dark(var(--color-slate-100), var(--color-slate-850));
-  --progress-fill: var(--color-primary-fill);
+  /* --- Input Search --- */
+  --input-search-border-radius: 5rem;
 
-  /* === Tooltip tokens === */
-  --tooltip-fill: var(--color-contrast-fill);
-  --tooltip-text: var(--color-contrast-on-fill);
+  /* --- Input Switch --- */
+  --input-switch-thumb-background-color: white;
+  --input-switch-border-width: 0.1875rem;
+  --input-switch-border-radius: 1.25em;
 
-  /* Group Shadows */
-  --group-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  --group-shadow-focus-button: 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
-  --group-shadow-focus-input: 0 0 0 0.0625rem var(--input-border);
+  /* --- Links (anchor and role="link") --- */
+  --links-color: var(--primary-color);
+  --links-color-hover: var(--primary-color-hover);
+  --links-text-decoration: underline;
 
-  /* Navigation */
+  /* --- Lists (ul, ol and role="list") --- */
+  --lists-marker-color: var(--primary-color);
+
+  /* --- Mark --- */
+  --mark-background-color: light-dark(#c79400, #e8ae01);
+
+  /* --- Navigation --- */
   --nav-link-gap: calc(var(--spacing) * 0.5);
   --nav-breadcrumb-divider: ">";
 
-  /* Sidebar */
+  /* --- Progress Bar --- */
+  --progress-accent-color: var(--primary-background-color);
+  --progress-track-background-color: light-dark(
+    var(--_color-slate-100),
+    var(--_color-slate-850)
+  );
+
+  /* --- Selection of text --- */
+  --selection-background-color: color-mix(
+    in srgb,
+    var(--primary-color),
+    white 75%
+  );
+
+  /* --- Sidebar --- */
   --sidebar-size: 25%;
+
+  /* --- Small --- */
+  --small-font-size: 80%;
+
+  /* --- Table --- */
+  --table-header-font-weight: 600;
+  --table-header-border-width: 0.1875rem;
+
+  /* --- Tooltip --- */
+  --tooltip-background-color: var(--contrast-background-color);
+  --tooltip-color: light-dark(white, var(--_color-zinc-900));
 }
 
-/* === ICONS === */
+/* ===== ICONS ===== */
 body {
   --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@@ -276,9 +414,23 @@ body {
   --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 122, 76)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 
+  @container style(--theme: light) {
+    [data-theme="contrast"] {
+      --theme: dark;
+
+      color-scheme: dark;
+    }
+  }
+
   @container style(--theme: dark) {
     --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(110, 213, 157)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(243, 143, 121)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+
+    [data-theme="contrast"] {
+      --theme: light;
+
+      color-scheme: light;
+    }
   }
 }
 
@@ -294,43 +446,48 @@ body {
   color-scheme: dark;
 }
 
-/* === RESPONSIVE ADJUSTMENTS === */
+/* ===== RESPONSIVE ADJUSTMENTS ===== */
 @media (--breakpoint-sm) {
-  :root, :host {
+  :root,
+  :host {
     --font-size: 98%;
     --sidebar-size: max(25%, 150px);
-    --spacing: calc(var(--base-spacing) * 1.1);
+    --_spacing-scale: 1.1;
   }
 }
 
 @media (--breakpoint-md) {
-  :root, :host {
+  :root,
+  :host {
     --font-size: 99%;
     --sidebar-size: max(22%, 180px);
-    --spacing: calc(var(--base-spacing) * 1.2);
+    --_spacing-scale: 1.2;
   }
 }
 
 @media (--breakpoint-lg) {
-  :root, :host {
+  :root,
+  :host {
     --font-size: 100%;
     --sidebar-size: max(20%, 200px);
-    --spacing: calc(var(--base-spacing) * 1.3);
+    --_spacing-scale: 1.3;
   }
 }
 
 @media (--breakpoint-xl) {
-  :root, :host {
+  :root,
+  :host {
     --font-size: 101%;
     --sidebar-size: max(18%, 220px);
-    --spacing: calc(var(--base-spacing) * 1.4);
+    --_spacing-scale: 1.4;
   }
 }
 
 @media (--breakpoint-xxl) {
-  :root, :host {
+  :root,
+  :host {
     --font-size: 102%;
     --sidebar-size: clamp(240px, 16%, 300px);
-    --spacing: calc(var(--base-spacing) * 1.5);
+    --_spacing-scale: 1.5;
   }
 }