palace-ui 0.14.0 → 0.15.0

package/SPEC.md

@@ -101,6 +101,24 @@ Sizes for both: `xs` (4px), `sm` (8px), `md` (16px), `lg` (24px), `xl` (32px), `
 
 **Exceptions:** dividers (`.divider`, `.divider-danger`, `.gradient-stripe`) use top and bottom margin because they are separators by nature. `margin: auto` centres containers and dialogs. The `.stat-label` 2px optical nudge and the rules between the navbar menu's groups are part of those components.
 
+### Shadows
+
+Offsets only; combine with a colour: `box-shadow: var(--p-shadow-md) var(--p-accent-2)`. Pick a size by role, never write a raw offset. Inset indicator lines (`inset 3px 0 0`) are not offset shadows and stay as they are.
+
+| Token | Usage |
+|---|---|
+| `--p-shadow-xs` | Keys (`kbd`) |
+| `--p-shadow-sm` | Small chips |
+| `--p-shadow-md` | Controls: hover and focus |
+| `--p-shadow-lg` | Boxes and cards: status boxes, cards, dialogs, the navbar menu panel |
+
+Boxes, by component:
+
+- **`lg`:** `.card-static` (`--p-text`, at rest and on hover; it never lifts), `.status` (`--p-text`), `dialog` and `.navbar-menu-panel` (`--p-accent-2`; the panel floats above the page like a dialog), and `.card` on hover (the lift casts its accent; at rest a `.card` is flat, so a list of cards shows the shadow where the pointer is).
+- **Deliberately none:** tables (rules between rows, no outer box), `pre` and `.code-reveal` (they scroll sideways, which would clip a shadow), `.tag-sticker` and other tags (small chips, flat), and the disabled state of any control.
+
+A shadow reaches 4px right and below its box. Leave that room inside a container that clips (`overflow: hidden`, `auto` or `scroll`); palace's own layouts clip nothing a box sits in.
+
 ### Layout
 
 | Token | Value |
@@ -325,7 +343,7 @@ For explicit accent control (e.g. server-rendered cards), use the `--accent` cus
 
 ### Static Card
 
-For cards used as form containers or static content that should not lift on hover:
+For cards used as form containers or static content that should not lift on hover. It keeps its `--p-shadow-lg` shadow in `--p-text`, at rest and on hover:
 
 ```html
 <div class="card-static space-md">
@@ -741,7 +759,7 @@ A native `<dialog>` styled as a card: border, purple offset shadow, overlay back
 
 ### Kbd
 
-Inline keyboard key: bordered, uppercase mono, with a small pink offset shadow.
+Inline keyboard key: bordered, uppercase mono, with a pink `--p-shadow-xs` shadow.
 
 ```html
 <kbd>Ctrl</kbd> + <kbd>Z</kbd>
@@ -853,7 +871,7 @@ Full container, no navbar. Hero section, then card list, then footer.
 ## Interaction Rules
 
 1. **Hover = lift + shadow.** Elements move `translate(-1px, -1px)` or `translate(-2px, -2px)` and cast a hard shadow in the opposite direction. Shadow color matches the element's accent.
-2. **Focus = border-color + shadow.** Input focus changes border to accent-2 (purple) and adds a `3px 3px 0` shadow. Number inputs focus to accent-1 (pink).
+2. **Focus = border-color + shadow.** Input focus changes border to accent-2 (purple) and adds the `--p-shadow-md` shadow. Number inputs focus to accent-1 (pink).
 3. **Disabled = flat gray.** `#ddd` background, `#999` text, `#ccc` border. No transform, no shadow, `cursor: not-allowed`.
 4. **Transitions are 0.1s.** Never slower. The UI should feel mechanical and responsive.
 5. **Links underline with border-bottom**, not `text-decoration`. Hover swaps from accent-2 (purple) to accent-1 (pink).
@@ -876,7 +894,7 @@ Full container, no navbar. Hero section, then card list, then footer.
 - Use the 3-color card rotation for any list of cards
 - Keep `border-radius: 0` everywhere
 - Use `2px solid` borders on cards, buttons, inputs
-- Use hard shadows (`Npx Npx 0 color`) — never blurred shadows
+- Use hard shadows (a `--p-shadow-*` size and a colour) — never blurred shadows
 - Use `font-weight: 700` for headings and buttons
 - Use `letter-spacing` on all uppercase text (0.5px to 2px)
 - Keep containers at 640px max width

package/catalog.html

@@ -340,11 +340,16 @@
   <div class="space-xs">
     <p class="eyebrow" style="color: var(--p-accent-1);">Tokens</p>
     <h2 id="shadows">Shadows</h2>
-    <p class="subtitle">Hard shadows only. Zero blur, always.</p>
+    <p class="subtitle">Hard shadows only. Zero blur, always. Keys take xs, small chips sm, controls md, boxes and cards lg.</p>
   </div>
 
   <div class="space-sm">
     <div data-source class="gap-lg" style="display: flex; flex-wrap: wrap;">
+      <div class="gap-sm" style="display: grid; justify-items: center;">
+        <div style="width: 100px; height: 100px; background: var(--p-surface); border: 2px solid var(--p-text); box-shadow: var(--p-shadow-xs) var(--p-accent-3);"></div>
+        <div class="stat-label">--p-shadow-xs</div>
+        <code style="font-size: 11px;">1px 1px 0</code>
+      </div>
       <div class="gap-sm" style="display: grid; justify-items: center;">
         <div style="width: 100px; height: 100px; background: var(--p-surface); border: 2px solid var(--p-text); box-shadow: var(--p-shadow-sm) var(--p-accent-1);"></div>
         <div class="stat-label">--p-shadow-sm</div>
@@ -465,11 +470,11 @@
   </div>
 
   <div class="space-sm">
-    <h3>Static Card (no hover)</h3>
+    <h3>Static Card (no lift, keeps its large shadow)</h3>
     <div data-source>
       <div class="card-static">
         <span class="h2">Form Container</span>
-        <p style="color: var(--p-text-secondary); font-size: 14px;">Use <code>.card-static</code> for cards that hold forms or content that shouldn't lift on hover.</p>
+        <p style="color: var(--p-text-secondary); font-size: 14px;">Use <code>.card-static</code> for cards that hold forms or content that shouldn't lift on hover; it keeps the large shadow.</p>
       </div>
     </div>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "palace-ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Retro-technical design system. Hard edges, vibrant gradients, chunky shadows.",
   "license": "MIT",
   "repository": {

package/palace.css

@@ -85,6 +85,7 @@
   --p-radius: 0;
 
   /* ── Shadows (offsets only — combine with color) ── */
+  --p-shadow-xs: 1px 1px 0;
   --p-shadow-sm: 2px 2px 0;
   --p-shadow-md: 3px 3px 0;
   --p-shadow-lg: 4px 4px 0;
@@ -526,16 +527,17 @@ button:disabled, .btn:disabled, .cta:disabled {
   line-height: 1.6;
 }
 
-/* Static card — no hover lift/shadow (for form containers) */
+/* Static card — no hover lift (for form containers); its large shadow stays, at rest and on hover */
 .card-static {
   background: var(--p-surface);
   border: var(--p-border-width) solid var(--p-text);
+  box-shadow: var(--p-shadow-lg) var(--p-text);
   padding: var(--p-space-lg);
 }
 
 .card-static:hover {
   transform: none;
-  box-shadow: none;
+  box-shadow: var(--p-shadow-lg) var(--p-text);
 }
 
 
@@ -911,7 +913,7 @@ summary:focus-visible {
   background: var(--p-surface);
   color: var(--p-text);
   border: var(--p-border-width) solid var(--p-text);
-  box-shadow: var(--p-shadow-md) var(--p-accent-2);
+  box-shadow: var(--p-shadow-lg) var(--p-accent-2);
 }
 /* The margin resets sit in :where() so a space-* utility on the panel beats them. */
 :where(.navbar-menu-panel ul) { margin: 0; }
@@ -1365,7 +1367,7 @@ kbd {
   display: inline-block;
   padding: 1px 5px;
   border: var(--p-border-thin) solid var(--p-text);
-  box-shadow: 1px 1px 0 var(--p-accent-1);
+  box-shadow: var(--p-shadow-xs) var(--p-accent-1);
   background: var(--p-surface-inset);
   /* Its own text colour: on its light background, a key must not take a button's white. */
   color: var(--p-text);