@semanticus/semanticus-css 0.7.0 → 0.9.0

package/src/variables/_elements.css

@@ -0,0 +1,194 @@
+/* ==========================================================================
+   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;
+}
+
+/* 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,55 @@
+/* ==========================================================================
+   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.
+   ========================================================================== */
+
+:root,
+:host {
+  --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");
+}
+
+/* ==========================================================================
+   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/_layout.css

@@ -0,0 +1,123 @@
+/* ==========================================================================
+   Layout & Typography Variables
+   ==========================================================================
+
+   Global sizing, spacing, and typography variables. These define the
+   foundational rhythm of the design system.
+
+   Includes:
+   - Font families and typography scale
+   - Spacing units and component padding
+   - Border radius and border widths
+   - Responsive typography adjustments
+   ========================================================================== */
+
+:root,
+:host {
+  /* 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;
+
+  /* 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;
+  --outline-width: 0.125rem;
+  --transition: 0.2s ease-in-out;
+
+  /* Spacing - shared base unit */
+  --base-spacing: 0.75rem;
+  --responsive-multiplier: 1;
+  --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+  --typography-spacing-vertical: 1rem;
+  --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);
+
+  /* Navigation */
+  --nav-link-spacing: calc(var(--spacing) * 0.5);
+  --nav-breadcrumb-divider: ">";
+
+  /* Sidebar */
+  --sidebar-width: 25%;
+}
+
+/* ==========================================================================
+   Responsive Typography & Layout Adjustments
+   ========================================================================== */
+
+@media (--breakpoint-sm) {
+  :root,
+  :host {
+    --font-size: 98%;
+    --sidebar-width: max(25%, 150px);
+    --responsive-multiplier: 1.1;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
+  }
+}
+
+@media (--breakpoint-md) {
+  :root,
+  :host {
+    --font-size: 99%;
+    --sidebar-width: max(22%, 180px);
+    --responsive-multiplier: 1.2;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
+  }
+}
+
+@media (--breakpoint-lg) {
+  :root,
+  :host {
+    --font-size: 100%;
+    --sidebar-width: max(20%, 200px);
+    --responsive-multiplier: 1.3;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
+  }
+}
+
+@media (--breakpoint-xl) {
+  :root,
+  :host {
+    --font-size: 101%;
+    --sidebar-width: max(18%, 220px);
+    --responsive-multiplier: 1.4;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
+  }
+}
+
+@media (--breakpoint-xxl) {
+  :root,
+  :host {
+    --font-size: 102%;
+    --sidebar-width: clamp(240px, 16%, 300px);
+    --responsive-multiplier: 1.5;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
+  }
+}

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) {
@@ -17,21 +17,23 @@
   }
 }
 
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).contrast {
-  --color-background: var(--color-contrast-bg);
-  --border-color: var(--color-contrast-border);
-  --color-text: var(--color-contrast-inverse);
-}
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.contrast {
+    --color-background: var(--color-contrast-bg);
+    --border-color: var(--color-contrast-border);
+    --color-text: var(--color-contrast-inverse);
 
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: var(--color-contrast-hover-bg);
-  --border-color: var(--color-contrast-hover-border);
-  --color-text: var(--color-contrast-inverse);
-}
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: var(--color-contrast-hover-bg);
+      --border-color: var(--color-contrast-hover-border);
+      --color-text: var(--color-contrast-inverse);
+    }
 
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus,
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"])):focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-contrast-focus);
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-contrast-focus);
+    }
+  }
 }
 
 /* Accordion chevron dark mode override */
@@ -45,3 +47,15 @@
 [data-theme="dark"] details summary[role="button"].contrast::after {
   filter: brightness(0);
 }
+
+:is(.card, .pane, .panel).contrast {
+  --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+  --pane-bg: var(--color-contrast-bg-subtle);
+  --pane-section-bg: rgba(var(--color-contrast-rgb), 0.6);
+  --pane-section-border: var(--color-contrast-border-subtle);
+}
+
+:is(.panel).contrast {
+  --pane-border: var(--color-contrast-border);
+}

package/src/variants/_ghost.css

@@ -10,47 +10,54 @@
   background-color: var(--color-background) !important;
 }
 
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost {
-  --color-background: transparent;
-  --color-text: var(--color-primary);
-  --border-color: var(--color-primary);
-}
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.ghost {
+    --color-background: transparent;
+    --border-color: rgb(var(--color-primary-rgb));
+    --color-text: rgb(var(--color-primary-rgb));
 
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: transparent;
-  --color-text: var(--color-primary-hover);
-  --border-color: var(--color-primary-hover);
-}
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: var(--color-primary-hover-bg);
+      --border-color: var(--color-primary-hover-border);
+      --color-text: var(--color-primary-inverse);
+    }
 
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.secondary {
-  --color-text: var(--color-secondary);
-  --border-color: var(--color-secondary);
-}
+    &.secondary {
+      --color-background: transparent;
+      --border-color: rgb(var(--color-secondary-rgb));
+      --color-text: 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) {
-  --color-text: var(--color-secondary-hover);
-  --border-color: var(--color-secondary-hover);
-}
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: var(--color-secondary-hover-bg);
+        --border-color: var(--color-secondary-hover-border);
+        --color-text: var(--color-secondary-inverse);
+      }
+    }
 
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.contrast {
-  --color-text: var(--color-contrast);
-  --border-color: var(--color-contrast);
-}
+    &.contrast {
+      --color-background: transparent;
+      --border-color: rgb(var(--color-contrast-rgb));
+      --color-text: 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) {
-  --color-text: var(--color-contrast-hover);
-  --border-color: var(--color-contrast-hover);
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: var(--color-contrast-hover-bg);
+        --border-color: var(--color-contrast-hover-border);
+        --color-text: var(--color-contrast-inverse);
+      }
+    }
+  }
 }
 
 /* Reset buttons */
 [type="reset"].ghost {
   --color-background: transparent;
-  --color-text: var(--color-secondary);
-  --border-color: var(--color-secondary);
+  --border-color: rgb(var(--color-secondary-rgb));
+  --color-text: rgb(var(--color-secondary-rgb));
 
   &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-    --color-text: var(--color-secondary-hover);
-    --border-color: var(--color-secondary-hover);
+    --color-background: var(--color-secondary-hover-bg);
+    --border-color: var(--color-secondary-hover-border);
+    --color-text: var(--color-secondary-inverse);
   }
 }
 

package/src/variants/_pane-panel-card.css

@@ -0,0 +1,54 @@
+/**
+ * Pane, Panel and Card
+ * A container component for grouped content with visual pane, panel and card styling
+ * Can be applied to any element (article, div, section, etc.)
+ */
+.pane,
+.panel,
+.card {
+  padding-block: var(--spacing);
+  padding-inline: var(--spacing);
+  margin-bottom: var(--spacing);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--pane-border);
+  background: var(--pane-bg);
+  box-shadow: var(--pane-shadow);
+
+  & > header,
+  & > footer {
+    width: auto;
+    margin-inline: calc(var(--spacing) * -1);
+    padding-inline: var(--spacing);
+    background-color: var(--pane-section-bg);
+  }
+
+  & > header {
+    margin-top: calc(var(--spacing) * -1);
+    border-bottom: var(--border-width) solid var(--pane-section-border);
+    border-top-right-radius: var(--border-radius);
+    border-top-left-radius: var(--border-radius);
+  }
+
+  & > footer {
+    margin-bottom: calc(var(--spacing) * -1);
+    border-top: var(--border-width) solid var(--pane-section-border);
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    display: flex;
+    justify-content: end;
+    gap: calc(var(--nav-link-spacing) * 1.5);
+  }
+}
+
+.pane,
+.panel {
+  --pane-shadow: none;
+}
+
+.panel {
+  --pane-border: var(--pane-section-border);
+}
+
+.card {
+  --pane-shadow: var(--shadow-lg);
+}

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) {
@@ -17,19 +17,32 @@
   }
 }
 
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).secondary {
-  --color-background: var(--color-secondary-bg);
-  --border-color: var(--color-secondary-border);
-  --color-text: var(--color-secondary-inverse);
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.secondary {
+    --color-background: var(--color-secondary-bg);
+    --border-color: var(--color-secondary-border);
+    --color-text: var(--color-secondary-inverse);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: var(--color-secondary-hover-bg);
+      --border-color: var(--color-secondary-hover-border);
+      --color-text: var(--color-secondary-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-secondary-focus);
+    }
+  }
 }
 
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: var(--color-secondary-hover-bg);
-  --border-color: var(--color-secondary-hover-border);
-  --color-text: var(--color-secondary-inverse);
+:is(.card, .pane, .panel).secondary {
+  --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+  --pane-bg: var(--color-secondary-bg-subtle);
 }
 
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus,
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"])):focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-secondary-focus);
+:is(.panel).secondary {
+  --pane-section-border: var(--color-secondary-border-subtle);
+  --pane-border: var(--color-secondary-border-subtle);
 }