@semanticus/semanticus-css 0.5.1 → 0.8.0

package/src/variables/_elements.css

@@ -0,0 +1,199 @@
+/* ==========================================================================
+   Element-Scoped Variables
+   ==========================================================================
+
+   These selectors override global :root variables on a per-element basis
+   so each component can have its own defaults (font-size, weight,
+   line-height, border-radius, etc.) without class-name bloat.
+
+   This enables semantic HTML elements to have appropriate styling
+   out of the box.
+   ========================================================================== */
+
+/* Links */
+a {
+  --text-decoration: underline;
+}
+
+a.secondary,
+a.contrast {
+  --text-decoration: underline;
+}
+
+/* Small text */
+small {
+  --font-size: 0.875em;
+}
+
+/* ==========================================================================
+   Heading Typography
+   ========================================================================== */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  --font-weight: 700;
+}
+
+h1 {
+  --font-size: var(--fs-1);
+  --line-height: 1.125;
+  --typography-headings-top: 3rem;
+}
+
+h2 {
+  --font-size: var(--fs-2);
+  --line-height: 1.15;
+  --typography-headings-top: 2.625rem;
+}
+
+h3 {
+  --font-size: var(--fs-3);
+  --line-height: 1.175;
+  --typography-headings-top: 2.25rem;
+}
+
+h4 {
+  --font-size: var(--fs-4);
+  --line-height: 1.2;
+  --typography-headings-top: 1.874rem;
+}
+
+h5 {
+  --font-size: var(--fs-5);
+  --line-height: 1.225;
+  --typography-headings-top: 1.6875rem;
+}
+
+h6 {
+  --font-size: var(--fs-6);
+  --line-height: 1.25;
+  --typography-headings-top: 1.5rem;
+}
+
+/* ==========================================================================
+   Table Elements
+   ========================================================================== */
+
+thead th,
+thead td,
+tfoot th,
+tfoot td {
+  --font-weight: 600;
+  --border-width: 0.1875rem;
+}
+
+/* ==========================================================================
+   Code Elements
+   ========================================================================== */
+
+pre,
+code,
+kbd,
+samp {
+  --font-family: var(--font-family-monospace);
+}
+
+kbd {
+  --font-weight: bolder;
+}
+
+/* ==========================================================================
+   Form Elements
+   ========================================================================== */
+
+/* Text-style form inputs use a thinner outline */
+input:not(
+    [type="submit"],
+    [type="button"],
+    [type="reset"],
+    [type="checkbox"],
+    [type="radio"],
+    [type="file"]
+  ),
+:where(select, textarea) {
+  --outline-width: 0.0625rem;
+}
+
+/* Search inputs are pill-shaped */
+[type="search"] {
+  --border-radius: 5rem;
+}
+
+/* Checkboxes & radios use a slightly thicker border */
+[type="checkbox"],
+[type="radio"] {
+  --border-width: 0.125rem;
+}
+
+/* Toggle switches get an even thicker border */
+[type="checkbox"][role="switch"] {
+  --border-width: 0.1875rem;
+}
+
+/* Search role wrappers are pill-shaped */
+[role="search"] {
+  --border-radius: 5rem;
+}
+
+/* ==========================================================================
+   Button Group Focus Ring Overrides
+   ========================================================================== */
+
+/* Secondary button focus in groups */
+[role="search"]:has(
+    button.secondary:focus,
+    [type="submit"].secondary:focus,
+    [type="button"].secondary:focus,
+    [role="button"].secondary:focus
+  ),
+[role="group"]:has(
+    button.secondary:focus,
+    [type="submit"].secondary:focus,
+    [type="button"].secondary:focus,
+    [role="button"].secondary:focus
+  ) {
+  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-secondary-focus);
+}
+
+/* Contrast button focus in groups */
+[role="search"]:has(
+    button.contrast:focus,
+    [type="submit"].contrast:focus,
+    [type="button"].contrast:focus,
+    [role="button"].contrast:focus
+  ),
+[role="group"]:has(
+    button.contrast:focus,
+    [type="submit"].contrast:focus,
+    [type="button"].contrast:focus,
+    [role="button"].contrast:focus
+  ) {
+  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-contrast-focus);
+}
+
+/* Buttons inside search/group combos get wider horizontal padding */
+[role="search"] button,
+[role="search"] [type="submit"],
+[role="search"] [type="button"],
+[role="search"] [role="button"],
+[role="group"] button,
+[role="group"] [type="submit"],
+[role="group"] [type="button"],
+[role="group"] [role="button"] {
+  --form-element-spacing-horizontal: 1rem;
+}
+
+/* ==========================================================================
+   Form Element Accent Color
+   ========================================================================== */
+
+/* Native browser accent-color for checkboxes, radios, and range sliders */
+[type="checkbox"],
+[type="radio"],
+[type="range"] {
+  accent-color: rgb(var(--color-primary-rgb));
+}

package/src/variables/_icons.css

@@ -0,0 +1,43 @@
+/* ==========================================================================
+   Theme-Aware Icon Variables
+   ==========================================================================
+
+   Validation icons that change color based on the current theme.
+   These are defined separately from base icons because they use
+   theme-specific colors (success/danger) for stroke values.
+
+   Base icons (checkbox, chevron, date, time, search, close, loading)
+   are defined in _layout.css as they use consistent colors across themes.
+   ========================================================================== */
+
+/* ==========================================================================
+   Light Theme Validation Icons
+   ========================================================================== */
+
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-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(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");
+  --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");
+}
+
+/* ==========================================================================
+   Dark Theme Validation Icons (System Preference)
+   ========================================================================== */
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --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");
+  }
+}
+
+/* ==========================================================================
+   Dark Theme Validation Icons (Explicit)
+   ========================================================================== */
+
+[data-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");
+}

package/src/variables/{_shared.css → _layout.css}

@@ -1,20 +1,15 @@
-:root {
-  --transparent: transparent;
-}
-
 /* ==========================================================================
-   Responsive Breakpoints (custom media queries)
-   Used consistently across semantics, variants, and utilities.
-   ========================================================================== */
+   Layout & Typography Variables
+   ==========================================================================
 
-@custom-media --breakpoint-sm (min-width: 576px);
-@custom-media --breakpoint-md (min-width: 768px);
-@custom-media --breakpoint-lg (min-width: 1024px);
-@custom-media --breakpoint-xl (min-width: 1280px);
-@custom-media --breakpoint-xxl (min-width: 1536px);
+   Global sizing, spacing, and typography variables. These define the
+   foundational rhythm of the design system.
 
-/* ==========================================================================
-   2. Typography & Layout Variables (from Pico Theme)
+   Includes:
+   - Font families and typography scale
+   - Spacing units and component padding
+   - Border radius and border widths
+   - Responsive typography adjustments
    ========================================================================== */
 
 :root,
@@ -25,60 +20,72 @@
   --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 inherited by all elements */
+  /* Typography - base defaults */
   --line-height: 1.5;
   --font-weight: 400;
-  --font-size: 100%; /* Root font-size; overridden per breakpoint below and per element in §6 */
+  --font-size: 97%;
   --text-underline-offset: 0.1rem;
 
-  /* Borders & Effects – global defaults for border-radius, border-width, outline, and transition */
+  /* Font Size Scale - semantic heading sizes (h1-h6) */
+  --fs-1: 2rem;
+  --fs-2: 1.75rem;
+  --fs-3: 1.5rem;
+  --fs-4: 1.25rem;
+  --fs-5: 1.125rem;
+  --fs-6: 1rem;
+
+  /* Borders & Effects */
   --border-radius: 0.25rem;
-  --border-width: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
-  --outline-width: 0.125rem; /* 2px – focus-ring width */
-  --transition: 0.2s ease-in-out; /* Default transition timing for interactive state changes */
-
-  /* Spacing – shared base unit used for padding, margins, and gaps throughout the layout */
-  --spacing: 1rem;
-  --responsive-multiplier: 1; /* Multiplier applied to spacing for responsive adjustments at wider breakpoints */
-  --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --block-spacing-vertical: var(--spacing); /* Vertical padding inside block-level components (cards, modals, etc.) */
-  --block-spacing-horizontal: var(--spacing); /* Horizontal padding inside block-level components */
-  --grid-column-gap: var(--spacing); /* Column gap in CSS Grid layouts */
-  --grid-row-gap: var(--spacing); /* Row gap in CSS Grid layouts */
-  --form-element-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
-  --form-element-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
-
-  /* Shadows – used by [role="group"] and [role="search"] button/input combos */
-  --group-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Default (no shadow) */
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus); /* Focus ring when a button inside the group is focused */
-  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color); /* Focus ring when an input inside the group is focused */
-
-  /* Modal – backdrop overlay settings */
-  --modal-overlay-backdrop-filter: blur(0.375rem); /* Applies a blur behind the modal overlay */
-
-  /* Navigation – spacing and breadcrumb configuration */
-  --nav-link-spacing-vertical: 0.5rem; /* Vertical padding inside nav links */
-  --nav-link-spacing-horizontal: 0.5rem; /* Horizontal padding inside nav links */
-  --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
-
-  /* Icons – inline SVG data-URIs used by form elements and UI components */
-  --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"); /* Checkmark for checked checkboxes */
-  --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"); /* Minus icon for indeterminate checkboxes */
-  --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"); /* Dropdown arrow for <select> elements */
-  --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"); /* Calendar icon for date inputs */
-  --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"); /* Clock icon for time inputs */
-  --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"); /* Magnifying glass for search inputs */
-  --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"); /* X icon for close/dismiss actions (e.g. modal close button) */
-  --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"); /* Animated spinner for [aria-busy="true"] elements */
-
-  --sidebar-width: 25%; /* Sidebar width */
+  --border-width: 0.0625rem;
+  --outline-width: 0.125rem;
+  --transition: 0.2s ease-in-out;
+
+  /* Spacing - shared base unit */
+  --spacing: 0.75rem;
+  --responsive-multiplier: 1;
+  --typography-spacing-vertical: 1rem;
+  --block-spacing-vertical: 1.2rem;
+  --block-spacing-horizontal: 1.2rem;
+  --grid-column-gap: var(--spacing);
+  --grid-row-gap: var(--spacing);
+  --form-element-spacing-vertical: 0.5rem;
+  --form-element-spacing-horizontal: 0.7rem;
+
+  /* Group Shadows */
+  --group-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus);
+  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color);
+
+  /* Modal */
+  --modal-overlay-backdrop-filter: blur(0.375rem);
+
+  /* Navigation */
+  --nav-link-spacing-vertical: 0.5rem;
+  --nav-link-spacing-horizontal: 0.5rem;
+  --nav-breadcrumb-divider: ">";
+
+  /* Sidebar */
+  --sidebar-width: 25%;
+
+  /* Icons - inline SVG data-URIs used by form elements and UI components */
+  --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-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-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-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-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-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-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-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");
 }
 
-/* Responsive Font Sizes – progressively increase root font-size at wider viewports */
+/* ==========================================================================
+   Responsive Typography & Layout Adjustments
+   ========================================================================== */
+
 @media (--breakpoint-sm) {
   :root,
   :host {
-    --font-size: 106.25%;
+    --font-size: 98%;
     --sidebar-width: max(25%, 150px);
     --responsive-multiplier: 1.25;
   }
@@ -87,7 +94,7 @@
 @media (--breakpoint-md) {
   :root,
   :host {
-    --font-size: 112.5%;
+    --font-size: 99%;
     --sidebar-width: max(22%, 180px);
     --responsive-multiplier: 1.5;
   }
@@ -96,7 +103,7 @@
 @media (--breakpoint-lg) {
   :root,
   :host {
-    --font-size: 118.75%;
+    --font-size: 100%;
     --sidebar-width: max(20%, 200px);
     --responsive-multiplier: 1.75;
   }
@@ -105,17 +112,17 @@
 @media (--breakpoint-xl) {
   :root,
   :host {
-    --font-size: 125%;
+    --font-size: 101%;
     --sidebar-width: max(18%, 220px);
-    --responsive-multiplier: 2;
+    --responsive-multiplier: 1.85;
   }
 }
 
 @media (--breakpoint-xxl) {
   :root,
   :host {
-    --font-size: 131.25%;
+    --font-size: 102%;
     --sidebar-width: clamp(240px, 16%, 300px);
-    --responsive-multiplier: 2.25;
+    --responsive-multiplier: 2;
   }
 }

package/src/variants/_contrast.css

@@ -7,7 +7,7 @@
 :where(a:not([role="button"])),
 [role="link"] {
   &.contrast {
-    --color-text: var(--color-contrast);
+    --color-text: rgb(var(--color-contrast-rgb));
     --underline: var(--color-contrast-underline);
 
     &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {

package/src/variants/_ghost.css

@@ -12,8 +12,8 @@
 
 :is(button, [type="submit"], [type="button"], [role="button"]).ghost {
   --color-background: transparent;
-  --color-text: var(--color-primary);
-  --border-color: var(--color-primary);
+  --color-text: rgb(var(--color-primary-rgb));
+  --border-color: rgb(var(--color-primary-rgb));
 }
 
 :is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
@@ -23,8 +23,8 @@
 }
 
 :is(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.secondary {
-  --color-text: var(--color-secondary);
-  --border-color: var(--color-secondary);
+  --color-text: rgb(var(--color-secondary-rgb));
+  --border-color: rgb(var(--color-secondary-rgb));
 }
 
 :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
@@ -33,8 +33,8 @@
 }
 
 :is(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.contrast {
-  --color-text: var(--color-contrast);
-  --border-color: var(--color-contrast);
+  --color-text: rgb(var(--color-contrast-rgb));
+  --border-color: rgb(var(--color-contrast-rgb));
 }
 
 :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
@@ -45,8 +45,8 @@
 /* Reset buttons */
 [type="reset"].ghost {
   --color-background: transparent;
-  --color-text: var(--color-secondary);
-  --border-color: var(--color-secondary);
+  --color-text: rgb(var(--color-secondary-rgb));
+  --border-color: rgb(var(--color-secondary-rgb));
 
   &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
     --color-text: var(--color-secondary-hover);

package/src/variants/_secondary.css

@@ -7,7 +7,7 @@
 :where(a:not([role="button"])),
 [role="link"] {
   &.secondary {
-    --color-text: var(--color-secondary);
+    --color-text: rgb(var(--color-secondary-rgb));
     --underline: var(--color-secondary-underline);
 
     &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {

package/src/variants/modules.css

@@ -8,7 +8,6 @@
 @import "./_contained.css";
 @import "./_container.css";
 @import "./_contrast.css";
-@import "./_frame.css";
 @import "./_panel.css";
 @import "./_secondary.css";
 @import "./_sidebar.css";