@terpjs/contract 0.8.0 → 0.10.0

package/token-pairs.json

@@ -1,5 +1,5 @@
 {
-  "$comment": "Token pairings the framework renders, as data, in two sections held to two different bars. `textPairs` are foreground/background pairs painted as TEXT and held to WCAG 2.1 AA for normal text; `nonTextPairs` are the visual boundaries and state indicators SC 1.4.11 asks 3:1 of — a focus indicator, the border that says which control is active, the outline of a control against its surface. Two consumers read both: tokens.contrast.test.js measures each pairing at its own bar, and the generated token manifest publishes them so a theme editor or an agent can tell which tokens must stay legible against which. A pair of token names appears in one section only: the text bar is the stricter of the two, so restating a text pairing under a non-text name would add a case that cannot fail unless the stricter one already has, and would overstate how much the ratchets cover. Purely decorative marks stay absent from both sections — WCAG sets no ratio for a divider or for an aria-hidden ornament, and asserting one would teach the next reader to ignore this file. Names are CSS custom properties because that is the vocabulary a theme author writes and a manifest consumer reads.",
+  "$comment": "The sidebar's edge (--color-sidebar-border against the canvas) is deliberately NOT declared: WCAG 1.4.11 covers UI components and graphical objects needed to understand content, and a decorative separator beside a sidebar that already differs in background is neither. Declaring it would fail at ~1.2:1 in four themes and the only ways out would be darkening a decorative line everywhere or booking an allowance the ratchet may not grow. Token pairings the framework renders, as data, in two sections held to two different bars. `textPairs` are foreground/background pairs painted as TEXT and held to WCAG 2.1 AA for normal text; `nonTextPairs` are the visual boundaries and state indicators SC 1.4.11 asks 3:1 of — a focus indicator, the border that says which control is active, the outline of a control against its surface. Two consumers read both: tokens.contrast.test.js measures each pairing at its own bar, and the generated token manifest publishes them so a theme editor or an agent can tell which tokens must stay legible against which. A pair of token names appears in one section only: the text bar is the stricter of the two, so restating a text pairing under a non-text name would add a case that cannot fail unless the stricter one already has, and would overstate how much the ratchets cover. Purely decorative marks stay absent from both sections — WCAG sets no ratio for a divider or for an aria-hidden ornament, and asserting one would teach the next reader to ignore this file. Names are CSS custom properties because that is the vocabulary a theme author writes and a manifest consumer reads. A pairing earns its place here even when no specimen paints it, and two of them are exactly that: axe measures the pixels a lane renders, so a surface that only appears on a state no specimen can reach - a failed sign-in, a failed create - has no lane coverage at all, and the declared pairing is the only gate it will ever have.",
   "textPairs": [
     {
       "id": "body-on-card",
@@ -29,6 +29,20 @@
       "bg": "--color-neutral-50",
       "layer": "primitive"
     },
+    {
+      "id": "danger-on-card",
+      "label": "danger text on a card",
+      "fg": "--color-status-danger",
+      "bg": "--color-neutral-0",
+      "layer": "primitive"
+    },
+    {
+      "id": "danger-on-canvas",
+      "label": "danger text on the canvas",
+      "fg": "--color-status-danger",
+      "bg": "--color-neutral-50",
+      "layer": "primitive"
+    },
     {
       "id": "primary-button-label",
       "label": "primary button label",
@@ -175,6 +189,13 @@
       "fg": "--color-fg-muted",
       "bg": "--color-status-danger-soft",
       "layer": "semantic"
+    },
+    {
+      "id": "sidebar-nav-link-hover",
+      "label": "a hovered sidebar navigation link",
+      "fg": "--color-sidebar-fg",
+      "bg": "--color-sidebar-accent",
+      "layer": "semantic"
     }
   ],
   "nonTextPairs": [

package/tokens.json

@@ -103,6 +103,15 @@
         "padY": { "value": "0.5rem" },
         "padX": { "value": "0.5rem" }
       }
+    },
+    "comfortable": {
+      "control": {
+        "minHeight": { "value": "2.25rem" }
+      },
+      "cell": {
+        "padY": { "value": "0.75rem" },
+        "padX": { "value": "0.75rem" }
+      }
     }
   },
   "radius": {
@@ -121,11 +130,21 @@
     "base": { "value": "0" },
     "sticky": { "value": "30" },
     "backdrop": { "value": "40" },
+    "skipLink": { "value": "45" },
     "drawer": { "value": "50" },
     "popover": { "value": "60" },
     "tooltip": { "value": "70" },
     "toast": { "value": "100" }
   },
+  "shell": {
+    "sidebarWidth": {
+      "expanded": { "value": "15rem" },
+      "collapsed": { "value": "4rem" }
+    },
+    "headerHeight": { "value": "3rem" },
+    "contentMaxWidth": { "value": "80rem" },
+    "brandSize": { "value": "1.75rem" }
+  },
   "breakpoint": {
     "sm": { "value": "480px" },
     "md": { "value": "768px" },