@vegastack/design-tokens 0.7.46 → 0.7.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/base.css +38 -30
  2. package/dist/theme.css +4 -0
  3. package/dist/tokens.cjs +4 -0
  4. package/dist/tokens.d.cts +4 -0
  5. package/dist/tokens.d.ts +4 -0
  6. package/dist/tokens.js +4 -0
  7. package/dist/tokens.json +4 -0
  8. package/package.json +1 -1
package/dist/base.css CHANGED
@@ -6,8 +6,9 @@
6
6
 
7
7
  FOC-1 one global :focus-visible cue; components restate nothing
8
8
  FOC-13 no focus rings anywhere, Tabs included: the cue is a background tint (MK 2026-09-25)
9
- FOC-14 a border never changes colour on focus or while active; invalid keeps its destructive
10
- border in every state (MK 2026-09-26)
9
+ FOC-14 a border never changes colour on focus or while active (MK 2026-09-26), EXCEPT text
10
+ entry, which darkens its border subtly with an ease (MK 2026-09-27); invalid keeps its
11
+ destructive border in every state
11
12
  FOC-7 the forced-colours fallback for text entry
12
13
  MOT-5 the reduced-motion reset (and the one sanctioned !important)
13
14
  INT-1 the hand cursor, on a wider selector list than shadcn's --pointer rule
@@ -62,20 +63,22 @@
62
63
  @apply font-sans;
63
64
  }
64
65
 
65
- /* FOC-1 + FOC-13 + FOC-14 — the SINGLE focus affordance in the system, and it is NOT a ring and
66
- NOT a border. No focus ring anywhere, Tabs included (MK 2026-09-25), and no border-colour change
67
- on focus or while a control is active (MK 2026-09-26): every border keeps its resting
68
- `border-border`/`border-input` colour in every state, and only the invalid state paints its
69
- destructive border. A keyboard user sees a subtle background TINT — `accent` at 50%, laid over
70
- whatever fill the control already has as a background IMAGE, so a primary button, a chip, a
71
- row, a menu item and a text field all show it without any component restating it.
72
- Text entry takes the same tint (FOC-3). A bare `input`/`textarea` wears it itself; a bordered
73
- field GROUP (`data-field-group`: InputGroup, NumberField, ChipInput, the combobox chips, the
74
- panel search row) wears it on the group, and the control inside it stands down so the two
75
- never stack. The one caret-only surface is a contenteditable document editor (TextEdit,
76
- `data-focus-cue="caret"`): no border, no fill, the caret is the cue. Components carry no focus
77
- ring or focus border of their own (FOC-6); `design-lint`'s `no-focus-ring-glow` and
78
- `no-focus-border` rules reject them, so one cannot creep back through a later upstream pull.
66
+ /* FOC-1 + FOC-13 + FOC-14 — the SINGLE focus affordance in the system, and it is NOT a ring.
67
+ No focus ring anywhere, Tabs included (MK 2026-09-25). A keyboard user sees a subtle background
68
+ TINT — `accent` at 50%, laid over whatever fill the control already has as a background IMAGE,
69
+ so a primary button, a chip, a row, a tab and a menu item all show it without any component
70
+ restating it. A border never changes colour on focus or while a control is active (MK
71
+ 2026-09-26) — with ONE exception, text entry (MK 2026-09-27).
72
+
73
+ Text entry (FOC-3) — text inputs, textarea, and the bordered field GROUPS that frame one
74
+ (InputGroup, NumberField, ChipInput, the combobox chips, the panel search row) — takes NO fill
75
+ at all: it is excluded below, and its focus cue is a subtle darker border (`border-ring/40`)
76
+ that eases in over 150ms, written on the component that draws the border (the group, not the
77
+ control inside it, which has no border and no fill). An invalid field keeps its destructive
78
+ border in every state; focus never replaces it. The one caret-only surface is a contenteditable
79
+ document editor (TextEdit, `data-focus-cue="caret"`): no border, no fill, the caret is the cue.
80
+ Components carry no focus ring of their own (FOC-6); `design-lint`'s `no-focus-ring-glow` and
81
+ `no-focus-border` rules reject a ring anywhere and a focus border outside the text-entry set.
79
82
 
80
83
  Programmatic focus targets (`tabindex="-1"`) take no tint: AppShell's skip-link `<main>`, Base UI
81
84
  popups, a step heading focus is moved to. They are not tab stops, and each is a whole region.
@@ -87,21 +90,25 @@
87
90
  outline: none;
88
91
  }
89
92
  :focus-visible:not(
93
+ textarea,
90
94
  [contenteditable="true"],
95
+ input:not(
96
+ [type="range"],
97
+ [type="radio"],
98
+ [type="checkbox"],
99
+ [type="button"],
100
+ [type="submit"],
101
+ [type="reset"],
102
+ [type="color"],
103
+ [type="file"]
104
+ ),
91
105
  [tabindex="-1"]:not([data-slot="combobox-chip"])
92
- ),
93
- [data-field-group]:has(input:focus, textarea:focus):not(
94
- [data-slot="combobox-content"] *
95
- ) {
106
+ ) {
96
107
  background-image: linear-gradient(
97
108
  color-mix(in oklch, var(--accent) 50%, transparent),
98
109
  color-mix(in oklch, var(--accent) 50%, transparent)
99
110
  );
100
111
  }
101
- [data-field-group] input:focus-visible,
102
- [data-field-group] textarea:focus-visible {
103
- background-image: none;
104
- }
105
112
 
106
113
  /* INT-1 — the hand cursor. shadcn's `--pointer` flag writes
107
114
  `button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer }`; ours is the same
@@ -140,9 +147,9 @@
140
147
  outline-offset: 1px;
141
148
  }
142
149
 
143
- /* Text-entry focus (FOC-3). Every text-entry control signals focus with the background TINT and
144
- strips the outline, because a raw text field cannot tell mouse from keyboard. Forced colours
145
- drops authored backgrounds outright, so the tint vanishes and `outline-style: none` stays in force — a
150
+ /* Text-entry focus (FOC-3). Every text-entry control signals focus with a subtle border change
151
+ and strips the outline, because a raw text field cannot tell mouse from keyboard. Forced colours
152
+ replaces `border-color` outright, so the cue vanishes and `outline-style: none` stays in force — a
146
153
  Windows High Contrast user had no caret location at all. This block is UNLAYERED on purpose:
147
154
  it beats the component's `outline-none` (a layered utility) regardless of specificity, so the
148
155
  fallback is written ONCE here, never per component.
@@ -163,9 +170,10 @@
163
170
  NumberField's stepper group, ChipInput, the Combobox input-group — clips with `overflow-hidden`
164
171
  so its addons follow the rounded corner. The inner input's own outline is offset outward INTO
165
172
  that clip, so it was drawn and then cut, which is how an addon field ended up with no visible
166
- focus at all under the forced palette. The group carries the outline (it is the element that
167
- wears the tint); the control inside it stands down, so the two never paint a
168
- double ring. */
173
+ focus at all under the forced palette. The group carries the outline (it is the element whose
174
+ border darkens on focus); the control inside it stands down, so the two never paint a double
175
+ ring. The stand-down is (0,2,1) and beats both `input:focus` (0,1,1) and the `:focus-visible`
176
+ outline above (0,1,0). */
169
177
  [data-field-group] input:focus,
170
178
  [data-field-group] textarea:focus {
171
179
  outline: none;
package/dist/theme.css CHANGED
@@ -38,6 +38,8 @@
38
38
  --media-scrim: oklch(0.13 0.002 75 / 0.6); /** THEME-INVARIANT media chrome scrim (B4-01): the gradient/backdrop behind controls laid over video or imagery. Always a warm-black alpha, never a theme token, so the chrome reads dark-scrim + light-ink in both themes (`primary` flips with the theme and inverted the chrome in dark). TEXT IS PERMITTED on this scrim: media-foreground clears 5.2:1 on it over a white worst-case backdrop, and tooling/contrast-check.mjs gates the pair at the AA TEXT floor (4.5:1), not the 3:1 non-text floor — so a retune that thins this scrim under AA fails the build rather than silently demoting its labels. */
39
39
  --media-scrim-strong: oklch(0.13 0.002 75 / 0.8); /** Theme-invariant strong scrim for opaque media pills (volume popover, time badge) — 11:1 for media-foreground over a white worst case. Use it for any block of media text that needs headroom beyond the soft scrim's ~5.2:1, and for text over unusually bright or busy frames. */
40
40
  --media-foreground: oklch(0.985 0 0); /** Theme-invariant media chrome ink: the warm off-white used for every icon, label and track drawn over media-scrim or media-scrim-strong. Labels are allowed on EITHER scrim — both are gated at the AA text floor (4.5:1) against this ink over the white worst case. Not overridden in dark on purpose. */
41
+ --scrim: oklch(0 0 0); /** THEME-INVARIANT photo scrim: the dark wash a tile's image wears under a corner control (Attachment tiles, SortableList grid handle/actions, AvatarPicker's edit overlay, all through the tile-overlay recipe). Opaque on purpose and always read through an opacity modifier — `bg-scrim/40` at rest, `bg-scrim/60` on hover or open — the same way the status families take `/10`-`/30`. Identical in both themes, because it lies over a photograph, not over the page. Not AA-gated: it carries icons over arbitrary imagery, not text; text over media reads through `media-scrim`. */
42
+ --scrim-foreground: oklch(1 0 0); /** Theme-invariant ink drawn on `scrim`: the icon (and pencil) colour of every tile-overlay control. Not overridden in dark on purpose. */
41
43
  --chart-1: oklch(0.546 0.245 262.88); /** Categorical chart hue (MK 2026-09-18: our 8-hue palette is kept — shadcn's `neutral` base ships a greyscale chart ramp, which cannot carry multi-series data). Light halves retuned for the pure-white page and the 0.97 `muted` ground; every hue clears the WCAG 1.4.11 3:1 floor on background, card and muted in both themes. */
42
44
  --chart-2: oklch(0.581 0.118 184.7); /** Categorical chart hue (MK 2026-09-18: our 8-hue palette is kept — shadcn's `neutral` base ships a greyscale chart ramp, which cannot carry multi-series data). Light halves retuned for the pure-white page and the 0.97 `muted` ground; every hue clears the WCAG 1.4.11 3:1 floor on background, card and muted in both themes. */
43
45
  --chart-3: oklch(0.398 0.07 227.39); /** Categorical chart hue (MK 2026-09-18: our 8-hue palette is kept — shadcn's `neutral` base ships a greyscale chart ramp, which cannot carry multi-series data). Light halves retuned for the pure-white page and the 0.97 `muted` ground; every hue clears the WCAG 1.4.11 3:1 floor on background, card and muted in both themes. */
@@ -221,6 +223,8 @@
221
223
  --color-media-scrim: var(--media-scrim);
222
224
  --color-media-scrim-strong: var(--media-scrim-strong);
223
225
  --color-media-foreground: var(--media-foreground);
226
+ --color-scrim: var(--scrim);
227
+ --color-scrim-foreground: var(--scrim-foreground);
224
228
  --color-chart-1: var(--chart-1);
225
229
  --color-chart-2: var(--chart-2);
226
230
  --color-chart-3: var(--chart-3);
package/dist/tokens.cjs CHANGED
@@ -57,6 +57,8 @@ var tokens = {
57
57
  "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
58
58
  "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
59
59
  "media-foreground": "oklch(0.985 0 0)",
60
+ "scrim": "oklch(0 0 0)",
61
+ "scrim-foreground": "oklch(1 0 0)",
60
62
  "chart-1": "oklch(0.546 0.245 262.88)",
61
63
  "chart-2": "oklch(0.581 0.118 184.7)",
62
64
  "chart-3": "oklch(0.398 0.07 227.39)",
@@ -153,6 +155,8 @@ var tokens = {
153
155
  "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
154
156
  "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
155
157
  "media-foreground": "oklch(0.985 0 0)",
158
+ "scrim": "oklch(0 0 0)",
159
+ "scrim-foreground": "oklch(1 0 0)",
156
160
  "chart-1": "oklch(0.623 0.214 259.81)",
157
161
  "chart-2": "oklch(0.696 0.17 162.48)",
158
162
  "chart-3": "oklch(0.769 0.188 70.08)",
package/dist/tokens.d.cts CHANGED
@@ -32,6 +32,8 @@ declare const tokens: {
32
32
  readonly "media-scrim": "oklch(0.13 0.002 75 / 0.6)";
33
33
  readonly "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)";
34
34
  readonly "media-foreground": "oklch(0.985 0 0)";
35
+ readonly scrim: "oklch(0 0 0)";
36
+ readonly "scrim-foreground": "oklch(1 0 0)";
35
37
  readonly "chart-1": "oklch(0.546 0.245 262.88)";
36
38
  readonly "chart-2": "oklch(0.581 0.118 184.7)";
37
39
  readonly "chart-3": "oklch(0.398 0.07 227.39)";
@@ -128,6 +130,8 @@ declare const tokens: {
128
130
  readonly "media-scrim": "oklch(0.13 0.002 75 / 0.6)";
129
131
  readonly "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)";
130
132
  readonly "media-foreground": "oklch(0.985 0 0)";
133
+ readonly scrim: "oklch(0 0 0)";
134
+ readonly "scrim-foreground": "oklch(1 0 0)";
131
135
  readonly "chart-1": "oklch(0.623 0.214 259.81)";
132
136
  readonly "chart-2": "oklch(0.696 0.17 162.48)";
133
137
  readonly "chart-3": "oklch(0.769 0.188 70.08)";
package/dist/tokens.d.ts CHANGED
@@ -32,6 +32,8 @@ declare const tokens: {
32
32
  readonly "media-scrim": "oklch(0.13 0.002 75 / 0.6)";
33
33
  readonly "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)";
34
34
  readonly "media-foreground": "oklch(0.985 0 0)";
35
+ readonly scrim: "oklch(0 0 0)";
36
+ readonly "scrim-foreground": "oklch(1 0 0)";
35
37
  readonly "chart-1": "oklch(0.546 0.245 262.88)";
36
38
  readonly "chart-2": "oklch(0.581 0.118 184.7)";
37
39
  readonly "chart-3": "oklch(0.398 0.07 227.39)";
@@ -128,6 +130,8 @@ declare const tokens: {
128
130
  readonly "media-scrim": "oklch(0.13 0.002 75 / 0.6)";
129
131
  readonly "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)";
130
132
  readonly "media-foreground": "oklch(0.985 0 0)";
133
+ readonly scrim: "oklch(0 0 0)";
134
+ readonly "scrim-foreground": "oklch(1 0 0)";
131
135
  readonly "chart-1": "oklch(0.623 0.214 259.81)";
132
136
  readonly "chart-2": "oklch(0.696 0.17 162.48)";
133
137
  readonly "chart-3": "oklch(0.769 0.188 70.08)";
package/dist/tokens.js CHANGED
@@ -33,6 +33,8 @@ var tokens = {
33
33
  "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
34
34
  "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
35
35
  "media-foreground": "oklch(0.985 0 0)",
36
+ "scrim": "oklch(0 0 0)",
37
+ "scrim-foreground": "oklch(1 0 0)",
36
38
  "chart-1": "oklch(0.546 0.245 262.88)",
37
39
  "chart-2": "oklch(0.581 0.118 184.7)",
38
40
  "chart-3": "oklch(0.398 0.07 227.39)",
@@ -129,6 +131,8 @@ var tokens = {
129
131
  "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
130
132
  "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
131
133
  "media-foreground": "oklch(0.985 0 0)",
134
+ "scrim": "oklch(0 0 0)",
135
+ "scrim-foreground": "oklch(1 0 0)",
132
136
  "chart-1": "oklch(0.623 0.214 259.81)",
133
137
  "chart-2": "oklch(0.696 0.17 162.48)",
134
138
  "chart-3": "oklch(0.769 0.188 70.08)",
package/dist/tokens.json CHANGED
@@ -32,6 +32,8 @@
32
32
  "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
33
33
  "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
34
34
  "media-foreground": "oklch(0.985 0 0)",
35
+ "scrim": "oklch(0 0 0)",
36
+ "scrim-foreground": "oklch(1 0 0)",
35
37
  "chart-1": "oklch(0.546 0.245 262.88)",
36
38
  "chart-2": "oklch(0.581 0.118 184.7)",
37
39
  "chart-3": "oklch(0.398 0.07 227.39)",
@@ -128,6 +130,8 @@
128
130
  "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
129
131
  "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
130
132
  "media-foreground": "oklch(0.985 0 0)",
133
+ "scrim": "oklch(0 0 0)",
134
+ "scrim-foreground": "oklch(1 0 0)",
131
135
  "chart-1": "oklch(0.623 0.214 259.81)",
132
136
  "chart-2": "oklch(0.696 0.17 162.48)",
133
137
  "chart-3": "oklch(0.769 0.188 70.08)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vegastack/design-tokens",
3
- "version": "0.7.46",
3
+ "version": "0.7.56",
4
4
  "description": "VegaStack design tokens (DTCG → Tailwind v4 theme + TS)",
5
5
  "license": "MIT",
6
6
  "repository": {