@helixui/library 3.1.0 → 3.2.0-next.74

package/dist/css/helix-data.css

@@ -15,8 +15,8 @@
     display: inline;
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
-    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0d1825));
     padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
       var(--hx-code-snippet-inline-padding-x, 0.375em);
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -26,7 +26,7 @@
 
   .code-snippet {
     position: relative;
-    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0d1825));
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
@@ -66,7 +66,7 @@
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-relaxed, 1.75);
-    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-color, var(--hx-color-text-inverse, #ffffff));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
 
@@ -80,10 +80,11 @@
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #8e9c98);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-200, #e2e8f0);
+    /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */
+    background-color: var(--hx-color-surface-inverse, #0d1825);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -98,13 +99,14 @@
   }
 
   .code-snippet__copy-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    border-color: var(--hx-color-neutral-500, #64748b);
+    /* Hover on inverse terminal surface — keep semantic inverse family; border lifts via border-default in inverse context. */
+    background-color: var(--hx-color-surface-inverse, #0d1825);
+    border-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .code-snippet__copy-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -123,25 +125,29 @@
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     border: none;
-    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-300, #cbd5e1);
+    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #8e9c98);
+    /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */
+    background-color: var(--hx-color-surface-inverse, #0d1825);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
     text-align: center;
     cursor: pointer;
-    transition: background-color var(--hx-transition-fast, 150ms ease);
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      filter var(--hx-transition-fast, 150ms ease);
   }
 
   .code-snippet__expand-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    /* Hover on inverse terminal surface — lift the top border to border-default and brighten the background; matches the copy-button hover affordance pattern. */
+    border-top-color: var(--hx-color-border-default, #e2e8f0);
+    filter: brightness(var(--hx-filter-brightness-hover, 1.15));
   }
 
   .code-snippet__expand-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -151,7 +157,7 @@
     display: inline-block;
     min-width: var(--hx-space-8, 2rem);
     padding-inline-end: var(--hx-space-3, 0.75rem);
-    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #4a5362));
     user-select: none;
     text-align: end;
   }
@@ -228,14 +234,14 @@
   /* ─── Head ─── */
 
   thead {
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   :host([sticky-header]) thead th {
     position: sticky;
     top: 0;
     z-index: 1;
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* ─── Cells ─── */
@@ -245,18 +251,18 @@
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     text-align: start;
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-data-table-border-color, var(--hx-color-border-default, #d6dbd5));
     vertical-align: middle;
   }
 
   th {
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #202b39));
     white-space: nowrap;
   }
 
   td {
-    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0d1825));
   }
 
   /* ─── Checkbox Column ─── */
@@ -295,7 +301,10 @@
 
   .sort-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(
+        --hx-data-table-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -316,7 +325,7 @@
 
   .sort-icon--active {
     opacity: var(--hx-opacity-100, 1);
-    color: var(--hx-color-primary-500, #2563eb);
+    color: var(--hx-data-table-sort-icon-active-color, var(--hx-color-primary-500, #429797));
   }
 
   .sort-icon--desc {
@@ -330,11 +339,11 @@
   }
 
   tbody tr:hover {
-    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   tbody tr[aria-selected='true'] {
-    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #ebf8f8));
   }
 
   /* ─── Checkbox Input ─── */
@@ -343,7 +352,7 @@
     width: var(--hx-size-4, 1rem);
     height: var(--hx-size-4, 1rem);
     cursor: pointer;
-    accent-color: var(--hx-color-primary-500, #2563eb);
+    accent-color: var(--hx-data-table-checkbox-accent-color, var(--hx-color-primary-500, #429797));
   }
 
   /* ─── Loading Skeleton ─── */
@@ -352,11 +361,12 @@
     display: block;
     height: 1em;
     border-radius: var(--hx-border-radius-sm, 2px);
+    /* Skeleton shimmer: intentionally primitive so the animation reads the same across all modes. */
     background: linear-gradient(
       90deg,
-      var(--hx-color-neutral-200, #e2e8f0) 25%,
-      var(--hx-color-neutral-100, #f1f5f9) 50%,
-      var(--hx-color-neutral-200, #e2e8f0) 75%
+      var(--hx-color-neutral-200, #d6dbd5) 25%,
+      var(--hx-color-neutral-100, #ebeee9) 50%,
+      var(--hx-color-neutral-200, #d6dbd5) 75%
     );
     background-size: 200% 100%;
     animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
@@ -396,7 +406,10 @@
   [part~='td']:focus-visible,
   [part~='th']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(
+        --hx-data-table-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, -2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -405,7 +418,7 @@
 
   .empty-cell {
     text-align: center;
-    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #313e4b));
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 
@@ -477,7 +490,7 @@
 
   :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-list-divider-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -492,9 +505,9 @@
 /* ── hx-structured-list ── */
 :host {
     display: block;
-    --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #d6dbd5));
     --_border-width: var(--hx-structured-list-border-width, var(--hx-border-width-thin, 1px));
-    --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f5f8f3));
     --_padding-block: var(--hx-structured-list-padding-block, var(--hx-space-4, 1rem));
     --_padding-inline: var(--hx-structured-list-padding-inline, var(--hx-space-4, 1rem));
   }
@@ -549,17 +562,17 @@ export const helixStructuredListRowStyles = css`
 
   :host(:not(:last-of-type)) .row {
     border-bottom: var(--_border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--_border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--_border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   .row__label {
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #313e4b));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .row__value {
-    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0d1825));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -613,7 +626,7 @@ export const helixStructuredListRowStyles = css`
     text-align: start;
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-table-header-color, var(--hx-color-text-strong, #202b39));
     font-size: var(--hx-font-size-md, 1rem);
   }
 
@@ -629,12 +642,12 @@ export const helixStructuredListRowStyles = css`
 
   /* Header background via CSS vars that cascade through display:contents */
   ::slotted(hx-thead) {
-    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
   :host([variant='striped']) ::slotted(hx-tbody) {
-    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Hover variant: set hover bg variable on direct slotted section elements */
@@ -644,7 +657,7 @@ export const helixStructuredListRowStyles = css`
   :host([variant='striped']) ::slotted(hx-thead),
   :host([variant='default']) ::slotted(hx-tbody),
   :host([variant='default']) ::slotted(hx-thead) {
-    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Compact variant: reduced padding signal set on section elements that cascade to cells */
@@ -660,14 +673,14 @@ export const helixStructuredListRowStyles = css`
     --_hx-table-th-position: sticky;
     --_hx-table-th-top: 0;
     --_hx-table-th-z-index: 1;
-    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* ─── Focus ─── */
 
   ::slotted(:focus-visible) {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
     outline-offset: var(--hx-focus-ring-offset, -2px);
   }