@semanticus/semanticus-css 0.9.0 → 1.1.0

package/src/utilities/typography/_font-sizes.css

@@ -1,23 +1,23 @@
 .fs-1 {
-  font-size: var(--fs-1) !important;
+  font-size: var(--h1-size) !important;
 }
 
 .fs-2 {
-  font-size: var(--fs-2) !important;
+  font-size: var(--h2-size) !important;
 }
 
 .fs-3 {
-  font-size: var(--fs-3) !important;
+  font-size: var(--h3-size) !important;
 }
 
 .fs-4 {
-  font-size: var(--fs-4) !important;
+  font-size: var(--h4-size) !important;
 }
 
 .fs-5 {
-  font-size: var(--fs-5) !important;
+  font-size: var(--h5-size) !important;
 }
 
 .fs-6 {
-  font-size: var(--fs-6) !important;
+  font-size: var(--h6-size) !important;
 }

package/src/variables/_all.css

@@ -1,22 +1,4 @@
-/* ==========================================================================
-   Semanticus CSS Variables
-   ==========================================================================
-
-   This file imports all CSS custom properties used throughout the framework.
-   The import order matches the original _all.css to ensure proper cascade:
-
-   1. _breakpoints.css  - Responsive breakpoint custom media queries
-   2. _layout.css       - --transparent, typography, spacing, sizing
-   3. _colors.css       - Color palette, light/dark theme colors
-   4. _components.css   - Component-specific variables (buttons, forms, etc.)
-   5. _icons.css        - SVG icon data-URIs
-   6. _elements.css     - Element-scoped variable overrides
-
-   ========================================================================== */
-
+@import '../palettes/azure.css';
 @import './_breakpoints.css';
-@import './_layout.css';
-@import './_colors.css';
-@import './_components.css';
-@import './_icons.css';
+@import './_theme.css';
 @import './_elements.css';

package/src/variables/_elements.css

@@ -10,14 +10,9 @@
    out of the box.
    ========================================================================== */
 
-/* Links */
-a {
-  --text-decoration: underline;
-}
-
 /* Small text */
 small {
-  --font-size: 0.875em;
+  --font-size: 80%; /* modern-normalize */
 }
 
 /* ==========================================================================
@@ -34,39 +29,39 @@ h6 {
 }
 
 h1 {
-  --font-size: var(--fs-1);
+  --font-size: var(--h1-size);
   --line-height: 1.125;
-  --typography-headings-top: 3rem;
+  --heading-gap-top: 3rem;
 }
 
 h2 {
-  --font-size: var(--fs-2);
+  --font-size: var(--h2-size);
   --line-height: 1.15;
-  --typography-headings-top: 2.625rem;
+  --heading-gap-top: 2.625rem;
 }
 
 h3 {
-  --font-size: var(--fs-3);
+  --font-size: var(--h3-size);
   --line-height: 1.175;
-  --typography-headings-top: 2.25rem;
+  --heading-gap-top: 2.25rem;
 }
 
 h4 {
-  --font-size: var(--fs-4);
+  --font-size: var(--h4-size);
   --line-height: 1.2;
-  --typography-headings-top: 1.874rem;
+  --heading-gap-top: 1.874rem;
 }
 
 h5 {
-  --font-size: var(--fs-5);
+  --font-size: var(--h5-size);
   --line-height: 1.225;
-  --typography-headings-top: 1.6875rem;
+  --heading-gap-top: 1.6875rem;
 }
 
 h6 {
-  --font-size: var(--fs-6);
+  --font-size: var(--h6-size);
   --line-height: 1.25;
-  --typography-headings-top: 1.5rem;
+  --heading-gap-top: 1.5rem;
 }
 
 /* ==========================================================================
@@ -78,7 +73,7 @@ thead td,
 tfoot th,
 tfoot td {
   --font-weight: 600;
-  --border-width: 0.1875rem;
+  --border-size: 0.1875rem;
 }
 
 /* ==========================================================================
@@ -110,28 +105,28 @@ input:not(
     [type="file"]
   ),
 :where(select, textarea) {
-  --outline-width: 0.0625rem;
+  --outline-size: 0.0625rem;
 }
 
 /* Search inputs are pill-shaped */
 [type="search"] {
-  --border-radius: 5rem;
+  --radius: 5rem;
 }
 
 /* Checkboxes & radios use a slightly thicker border */
 [type="checkbox"],
 [type="radio"] {
-  --border-width: 0.125rem;
+  --border-size: 0.125rem;
 }
 
 /* Toggle switches get an even thicker border */
 [type="checkbox"][role="switch"] {
-  --border-width: 0.1875rem;
+  --border-size: 0.1875rem;
 }
 
 /* Search role wrappers are pill-shaped */
 [role="search"] {
-  --border-radius: 5rem;
+  --radius: 5rem;
 }
 
 /* ==========================================================================
@@ -151,7 +146,7 @@ input:not(
     [type="button"].secondary:focus,
     [role="button"].secondary:focus
   ) {
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-secondary-focus);
+  --group-shadow-focus-button: 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);
 }
 
 /* Contrast button focus in groups */
@@ -167,7 +162,7 @@ input:not(
     [type="button"].contrast:focus,
     [role="button"].contrast:focus
   ) {
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-contrast-focus);
+  --group-shadow-focus-button: 0 0 0 var(--outline-size) var(--color-contrast-focus-ring);
 }
 
 /* Buttons inside search/group combos get wider horizontal padding */
@@ -179,7 +174,7 @@ input:not(
 [role="group"] [type="submit"],
 [role="group"] [type="button"],
 [role="group"] [role="button"] {
-  --form-element-spacing-horizontal: 1rem;
+  --input-spacing-horizontal: 1rem;
 }
 
 /* ==========================================================================
@@ -190,5 +185,11 @@ input:not(
 [type="checkbox"],
 [type="radio"],
 [type="range"] {
-  accent-color: rgb(var(--color-primary-rgb));
+  accent-color: var(--color-primary-fill);
+}
+
+/* Text selection color */
+
+::selection {
+  background-color: color-mix(in srgb, var(--color-primary-fill), white 75%);
 }

package/src/variables/_theme.css

@@ -0,0 +1,336 @@
+:root,
+:host {
+  --theme: light;
+
+  color-scheme: light;
+
+  @media (prefers-color-scheme: dark) {
+    --theme: dark;
+
+    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);
+
+  /* Typography - base defaults */
+  --line-height: 1.5;
+  --font-weight: 400;
+  --font-size: 97%;
+  --text-underline-offset: 0.1rem;
+  --typography-spacing-vertical: 1rem;
+
+  /* Borders & Effects */
+  --radius: 0.25rem;
+  --border-size: 0.0625rem;
+  --outline-size: 0.125rem;
+  --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)),
+    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))
+  );
+  --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))
+  );
+  --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))
+  );
+  --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: light-dark(var(--color-border), var(--color-slate-900));
+  --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%)
+  );
+  --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)
+  );
+
+  /* === 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));
+
+  /* === Loading tokens === */
+  --loading-spinner-opacity: 0.5;
+
+  /* === Progress tokens === */
+  --progress-track-fill: light-dark(var(--color-slate-100), var(--color-slate-850));
+  --progress-fill: var(--color-primary-fill);
+
+  /* === Tooltip tokens === */
+  --tooltip-fill: var(--color-contrast-fill);
+  --tooltip-text: var(--color-contrast-on-fill);
+
+  /* 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);
+
+  /* Navigation */
+  --nav-link-gap: calc(var(--spacing) * 0.5);
+  --nav-breadcrumb-divider: ">";
+
+  /* Sidebar */
+  --sidebar-size: 25%;
+}
+
+/* === 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");
+  --icon-close: 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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --icon-date: 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%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%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(197, 47, 33)' 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");
+  --icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+  --icon-minus: 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%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --icon-search: 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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  --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: 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="light"] {
+  --theme: light;
+
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  --theme: dark;
+
+  color-scheme: dark;
+}
+
+/* === RESPONSIVE ADJUSTMENTS === */
+@media (--breakpoint-sm) {
+  :root, :host {
+    --font-size: 98%;
+    --sidebar-size: max(25%, 150px);
+    --spacing: calc(var(--base-spacing) * 1.1);
+  }
+}
+
+@media (--breakpoint-md) {
+  :root, :host {
+    --font-size: 99%;
+    --sidebar-size: max(22%, 180px);
+    --spacing: calc(var(--base-spacing) * 1.2);
+  }
+}
+
+@media (--breakpoint-lg) {
+  :root, :host {
+    --font-size: 100%;
+    --sidebar-size: max(20%, 200px);
+    --spacing: calc(var(--base-spacing) * 1.3);
+  }
+}
+
+@media (--breakpoint-xl) {
+  :root, :host {
+    --font-size: 101%;
+    --sidebar-size: max(18%, 220px);
+    --spacing: calc(var(--base-spacing) * 1.4);
+  }
+}
+
+@media (--breakpoint-xxl) {
+  :root, :host {
+    --font-size: 102%;
+    --sidebar-size: clamp(240px, 16%, 300px);
+    --spacing: calc(var(--base-spacing) * 1.5);
+  }
+}

package/src/variants/_variables.css

@@ -0,0 +1,24 @@
+:root, :host {
+  --subtle-shade: light-dark(var(--color-zinc-250), var(--color-slate-750));
+
+  /* Primary subtle colors */
+  --color-primary-subtle-fill: color-mix(in srgb, var(--color-primary-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+
+  /* Secondary subtle colors */
+  --color-secondary-subtle-fill: color-mix(in srgb, var(--color-secondary-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+
+  /* Contrast subtle colors */
+  --color-contrast-subtle-fill: color-mix(in srgb, var(--color-contrast-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+
+  /* Success subtle colors */
+  --color-success-subtle-fill: color-mix(in srgb, var(--color-success-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+
+  /* Info subtle colors */
+  --color-info-subtle-fill: color-mix(in srgb, var(--color-info-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+
+  /* Warning subtle colors */
+  --color-warning-subtle-fill: color-mix(in srgb, var(--color-warning-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+
+  /* Danger subtle colors */
+  --color-danger-subtle-fill: color-mix(in srgb, var(--color-danger-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+}

package/src/variants/intent/_contrast.css

@@ -0,0 +1,47 @@
+:where(a:not([role="button"])),
+[role="link"] {
+  &.contrast {
+    --color-text: oklch(from var(--color-contrast-text) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-text: oklch(from var(--color-contrast-text-hover) l c h / var(--color-text-opacity));
+    }
+  }
+}
+
+.contrast:not([role="link"], a:not([role="button"])) {
+  --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
+  --border-color: oklch(from var(--color-contrast-fill) l c h / var(--color-border-opacity));
+  --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+}
+
+:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
+  &.contrast {
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-border-opacity));
+      --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-contrast-focus-ring);
+    }
+  }
+}
+
+:is(.card, .pane, [role="status"], [role="alert"]).contrast {
+  --dialog-fill: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
+  --dialog-border: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
+  --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-50), var(--color-slate-900)), transparent 90%);
+  --dialog-section-border: color-mix(in srgb, light-dark(var(--color-slate-50), black), transparent 95%);
+}
+
+/* Accordion chevron override */
+details summary[role="button"].contrast::after {
+  @container style(--theme: dark) {
+    filter:  brightness(0);
+  }
+}

package/src/variants/intent/_danger.css

@@ -0,0 +1,39 @@
+:where(a:not([role="button"])),
+[role="link"] {
+  &.danger {
+    --color-text: oklch(from var(--color-danger-text) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-text: oklch(from var(--color-danger-text-hover) l c h / var(--color-text-opacity));
+    }
+  }
+}
+
+.danger:not([role="link"], a:not([role="button"])) {
+  --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
+  --border-color: oklch(from var(--color-danger-fill) l c h / var(--color-border-opacity));
+  --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+}
+
+:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
+  &.danger {
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: oklch(from var(--color-danger-fill-hover) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-danger-fill-hover) l c h / var(--color-border-opacity));
+      --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-danger-focus-ring);
+    }
+  }
+}
+
+:is(.card, .pane, [role="status"], [role="alert"]).danger {
+  --dialog-fill: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
+  --dialog-border: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
+  --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
+}