@vegastack/design-tokens 0.7.45 → 0.7.49
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.
- package/dist/base.css +24 -12
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -6,6 +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 (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
|
|
9
12
|
FOC-7 the forced-colours fallback for text entry
|
|
10
13
|
MOT-5 the reduced-motion reset (and the one sanctioned !important)
|
|
11
14
|
INT-1 the hand cursor, on a wider selector list than shadcn's --pointer rule
|
|
@@ -60,14 +63,22 @@
|
|
|
60
63
|
@apply font-sans;
|
|
61
64
|
}
|
|
62
65
|
|
|
63
|
-
/* FOC-1 + FOC-13 — the SINGLE focus affordance in the system, and it is NOT a ring.
|
|
64
|
-
No focus ring anywhere, Tabs included (MK 2026-09-25)
|
|
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
|
|
65
68
|
TINT — `accent` at 50%, laid over whatever fill the control already has as a background IMAGE,
|
|
66
|
-
so a primary button, a chip, a row and a menu item all show it without any component
|
|
67
|
-
restating it.
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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.
|
|
71
82
|
|
|
72
83
|
Programmatic focus targets (`tabindex="-1"`) take no tint: AppShell's skip-link `<main>`, Base UI
|
|
73
84
|
popups, a step heading focus is moved to. They are not tab stops, and each is a whole region.
|
|
@@ -136,9 +147,9 @@
|
|
|
136
147
|
outline-offset: 1px;
|
|
137
148
|
}
|
|
138
149
|
|
|
139
|
-
/* Text-entry focus (FOC-3). Every text-entry control signals focus with a border
|
|
140
|
-
the outline, because a raw text field cannot tell mouse from keyboard. Forced colours
|
|
141
|
-
`border-color` outright, so the
|
|
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
|
|
142
153
|
Windows High Contrast user had no caret location at all. This block is UNLAYERED on purpose:
|
|
143
154
|
it beats the component's `outline-none` (a layered utility) regardless of specificity, so the
|
|
144
155
|
fallback is written ONCE here, never per component.
|
|
@@ -160,8 +171,9 @@
|
|
|
160
171
|
so its addons follow the rounded corner. The inner input's own outline is offset outward INTO
|
|
161
172
|
that clip, so it was drawn and then cut, which is how an addon field ended up with no visible
|
|
162
173
|
focus at all under the forced palette. The group carries the outline (it is the element whose
|
|
163
|
-
border
|
|
164
|
-
|
|
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). */
|
|
165
177
|
[data-field-group] input:focus,
|
|
166
178
|
[data-field-group] textarea:focus {
|
|
167
179
|
outline: none;
|