use-wc 1.0.0-pre.94 → 1.0.0-pre.95

package/custom-elements.json

@@ -4533,7 +4533,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.outlined`, `.flush`) are plain classes rather than properties, the same as any\nother themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex\narrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.\n\n```html\n<use-pattern class=\"card\">\n  <header>\n    <hgroup><h3>Title</h3><p>Subtitle</p></hgroup>\n  </header>\n  <main><p>Body</p></main>\n  <footer><button type=\"button\">Done</button></footer>\n</use-pattern>\n```",
+          "description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.elevated`, `.flush`) are plain classes rather than properties, the same as any\nother themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex\narrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.\n\n```html\n<use-pattern class=\"card\">\n  <header>\n    <hgroup><h3>Title</h3><p>Subtitle</p></hgroup>\n  </header>\n  <main><p>Body</p></main>\n  <footer><button type=\"button\">Done</button></footer>\n</use-pattern>\n```",
           "name": "UsePattern",
           "slots": [
             {

package/dist/design-system.css

@@ -3971,8 +3971,8 @@
 
   /* Card chrome — the one bit of floating surface treatment that isn't layout, and the only
      thing separating `.card` from the other three variants: they arrange regions, this also
-     paints a raised panel. `.outlined` keeps the border but drops the shadow, for a flatter
-     card.
+     paints a panel. It's flat by default; `.elevated` lifts it with a shadow, for a card that
+     floats above the content around it.
 
      A card nested directly in a `dialog` or `[popover]` skips the chrome: the overlay already
      paints a surface, and stacking a second border and shadow inside it reads as a panel within
@@ -3984,12 +3984,11 @@
     background: var(--usewc-color-surface-background);
     border: var(--usewc-layout-surface-border) solid var(--usewc-color-surface-border);
     border-radius: var(--usewc-effect-surface-border-radius);
-    box-shadow: var(--usewc-effect-surface-shadow);
     color: var(--usewc-color-document-text);
   }
 
-  use-pattern.card.outlined:not(:is(dialog, [popover]) > *) {
-    box-shadow: none;
+  use-pattern.card.elevated:not(:is(dialog, [popover]) > *) {
+    box-shadow: var(--usewc-effect-surface-shadow);
   }
 }
 

package/dist/docs/use-pattern.md

@@ -6,7 +6,7 @@ message, a media object — styled entirely by the design system's theme layer
 exactly as given.
 
 Its variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,
-`.compact`, `.outlined`, `.flush`) are plain classes rather than properties, the same as any
+`.compact`, `.elevated`, `.flush`) are plain classes rather than properties, the same as any
 other themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex
 arrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.
 

package/dist/tokens.css

@@ -83,6 +83,7 @@
   --usewc-color-graphite-900: oklch(0.25 0.005 264);
   --usewc-color-graphite-850: oklch(0.285 0.005 264);
   --usewc-color-graphite-800: oklch(0.31 0.005 264);
+  --usewc-color-graphite-750: oklch(0.35 0.005 264);
   --usewc-color-graphite-700: oklch(0.39 0.005 264);
   --usewc-color-graphite-600: oklch(0.465 0.005 264);
   --usewc-color-graphite-550: oklch(0.505 0.005 264);
@@ -90,6 +91,7 @@
   --usewc-color-graphite-400: oklch(0.725 0.004 264);
   --usewc-color-graphite-200: oklch(0.885 0.003 264);
   --usewc-color-graphite-100: oklch(0.95 0.002 264);
+  --usewc-color-graphite-50: oklch(0.985 0.002 264);
   --usewc-color-blue-900: oklch(0.3 0.115 258);
   --usewc-color-blue-800: oklch(0.395 0.15 258);
   --usewc-color-blue-700: oklch(0.478 0.18 258);
@@ -359,7 +361,7 @@
   /* Button */
   /* - Color */
   /* -- Base color: fills, everything else derives from the fill below */
-  --usewc-color-button-base-background-static: var(--usewc-color-white);
+  --usewc-color-button-base-background-static: var(--usewc-color-graphite-50);
   --usewc-color-button-base-background-static-auxiliary: transparent;
   --usewc-color-button-primary-background-static: var(--usewc-color-brand-primary);
   --usewc-color-button-primary-background-static-auxiliary: transparent;
@@ -648,7 +650,7 @@
 
   /* Grid — `.table` is the default treatment a bare `use-grid` gets; `.chips` and `.list`
      (the latter still being defined) opt into their own layouts instead. */
-  --usewc-color-grid-border: var(--usewc-color-button-base-border-static);
+  --usewc-color-grid-border: var(--usewc-color-surface-border);
   /* The table itself and its header paint no fill — only the hover and selected row bands do. */
   --usewc-color-grid-background: transparent;
   --usewc-color-grid-header-background: transparent;
@@ -748,7 +750,7 @@
   --usewc-layout-popover-menu-border: var(--usewc-space-1-relative);
   --usewc-effect-popover-menu-border-style: var(--usewc-effect-border-solid);
   --usewc-color-popover-menu-background: var(--usewc-color-canvas-background);
-  --usewc-color-popover-menu-border: var(--usewc-color-button-base-border-static);
+  --usewc-color-popover-menu-border: var(--usewc-color-surface-border);
   --usewc-effect-popover-menu-border-radius: var(--usewc-effect-border-radius-8);
   --usewc-effect-popover-menu-shadow: var(--usewc-effect-surface-shadow);
   --usewc-font-popover-menu-header-size: var(--usewc-font-size-14);
@@ -907,7 +909,7 @@
      `dialog`/`[popover]` keeps from the viewport edge when sizing itself, not region padding —
      the regions inside one come from whichever `use-pattern` variant is nested there. */
   --usewc-color-surface-background: var(--usewc-color-canvas-background);
-  --usewc-color-surface-border: var(--usewc-color-button-base-border-static);
+  --usewc-color-surface-border: var(--usewc-color-gray-200);
   --usewc-color-surface-backdrop: oklch(0% 0 0 / 0.4);
   --usewc-layout-surface-anchor-offset: var(--usewc-space-4);
   --usewc-layout-surface-border: var(--usewc-space-1);
@@ -937,8 +939,11 @@
     --usewc-color-form-helper-text-invalid: var(--usewc-color-red-400);
     /* A dark control is lighter than what surrounds it, so interaction has to
        move lightness the opposite way, and its border has to run lighter
-       than its own face rather than darker. */
-    --usewc-color-button-base-background-static: var(--usewc-color-graphite-800);
+       than its own face rather than darker. It also sits a full step above
+       the card surface, since dark shadows barely read and the fill alone has
+       to separate the two. */
+    --usewc-color-button-base-background-static: var(--usewc-color-graphite-750);
+    --usewc-color-surface-border: var(--usewc-color-graphite-700);
     --usewc-effect-button-base-shift: 1;
     --usewc-effect-button-base-border-direction: 1;
     --usewc-effect-button-base-border-step: 0.085;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.94",
+  "version": "1.0.0-pre.95",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",

package/vscode.html-custom-data.json

@@ -479,7 +479,7 @@
     },
     {
       "name": "use-pattern",
-      "description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.outlined`, `.flush`) are plain classes rather than properties, the same as any\nother themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex\narrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.\n\n```html\n<use-pattern class=\"card\">\n  <header>\n    <hgroup><h3>Title</h3><p>Subtitle</p></hgroup>\n  </header>\n  <main><p>Body</p></main>\n  <footer><button type=\"button\">Done</button></footer>\n</use-pattern>\n```\n---\n\n\n### **Slots:**\n - _default_ - The pattern's regions — `figure`, `header`, `main`, `footer`, or any other element.",
+      "description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.elevated`, `.flush`) are plain classes rather than properties, the same as any\nother themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex\narrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.\n\n```html\n<use-pattern class=\"card\">\n  <header>\n    <hgroup><h3>Title</h3><p>Subtitle</p></hgroup>\n  </header>\n  <main><p>Body</p></main>\n  <footer><button type=\"button\">Done</button></footer>\n</use-pattern>\n```\n---\n\n\n### **Slots:**\n - _default_ - The pattern's regions — `figure`, `header`, `main`, `footer`, or any other element.",
       "attributes": [],
       "references": []
     },