@vegastack/design-tokens 0.1.0 → 0.4.0
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 +62 -10
- package/dist/theme.css +288 -47
- package/dist/tokens.cjs +663 -0
- package/dist/tokens.d.cts +638 -0
- package/dist/tokens.d.ts +156 -46
- package/dist/tokens.js +158 -48
- package/dist/tokens.json +158 -48
- package/dist/utilities.css +152 -68
- package/package.json +19 -14
package/dist/base.css
CHANGED
|
@@ -23,28 +23,72 @@
|
|
|
23
23
|
clickables (a clickable table row, a label tied to a control) or non-pointer cursors
|
|
24
24
|
(`cursor-text`, the select scroll-arrows) set a cursor of their own. */
|
|
25
25
|
button,
|
|
26
|
-
[role=
|
|
27
|
-
[role=
|
|
28
|
-
[role=
|
|
29
|
-
[role=
|
|
30
|
-
[role=
|
|
31
|
-
[role=
|
|
32
|
-
[role=
|
|
33
|
-
[role=
|
|
34
|
-
[role=
|
|
26
|
+
[role="button"],
|
|
27
|
+
[role="tab"],
|
|
28
|
+
[role="switch"],
|
|
29
|
+
[role="checkbox"],
|
|
30
|
+
[role="radio"],
|
|
31
|
+
[role="menuitem"],
|
|
32
|
+
[role="menuitemcheckbox"],
|
|
33
|
+
[role="menuitemradio"],
|
|
34
|
+
[role="option"],
|
|
35
35
|
summary {
|
|
36
36
|
cursor: pointer;
|
|
37
|
+
/* Keep touch controls responsive without disabling page pan/pinch zoom.
|
|
38
|
+
Text-entry fields and document links stay untouched. */
|
|
39
|
+
touch-action: manipulation;
|
|
40
|
+
-webkit-tap-highlight-color: transparent;
|
|
37
41
|
}
|
|
38
42
|
/* Disabled controls opt out (those that don't already set `pointer-events-none` /
|
|
39
43
|
`cursor-not-allowed`). Higher specificity than the element/role selectors above, so it wins;
|
|
40
44
|
a component's own `disabled:cursor-not-allowed` lives in the later utilities layer and still wins. */
|
|
41
45
|
:disabled,
|
|
42
|
-
[aria-disabled=
|
|
46
|
+
[aria-disabled="true"],
|
|
43
47
|
[data-disabled] {
|
|
44
48
|
cursor: default;
|
|
45
49
|
}
|
|
46
50
|
}
|
|
47
51
|
|
|
52
|
+
/* Preserve the focus contract when authored colors are replaced by a forced-colors palette. */
|
|
53
|
+
@media (forced-colors: active) {
|
|
54
|
+
:focus-visible {
|
|
55
|
+
outline-color: Highlight;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Text-entry focus (B1-01, 2026-09-07). Every text-entry control signals focus with the
|
|
59
|
+
border TINT (`focus:border-ring/(--alpha-tint-border)`) and strips the outline
|
|
60
|
+
(`outline-none`), because a raw text field cannot tell mouse from keyboard. Forced colours
|
|
61
|
+
replaces `border-color` outright, so the tint vanishes and `outline-style: none` stays in
|
|
62
|
+
force — a Windows High Contrast user had no caret location at all. This block is UNLAYERED
|
|
63
|
+
on purpose: it beats the component's `outline-none` (a layered utility) regardless of
|
|
64
|
+
specificity, so the fallback is written ONCE here, never per component.
|
|
65
|
+
- `input`/`textarea` at `:focus` (not `:focus-visible`, matching the tint's trigger);
|
|
66
|
+
- composite editors (TextEdit's contenteditable) at `:focus`;
|
|
67
|
+
- wrapper-tinted surfaces (`data-slot="text-edit"`, and every `data-field-group`) at
|
|
68
|
+
`:focus-within`. */
|
|
69
|
+
input:focus,
|
|
70
|
+
textarea:focus,
|
|
71
|
+
[contenteditable="true"]:focus,
|
|
72
|
+
[data-slot="text-edit"]:focus-within,
|
|
73
|
+
[data-field-group]:focus-within {
|
|
74
|
+
outline: 2px solid Highlight;
|
|
75
|
+
outline-offset: 1px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* …and only ONE of them paints (Fo1, 2026-09-07). A bordered field GROUP — Input's prefix/suffix
|
|
79
|
+
wrapper, NumberField's stepper group, ChipInput, the Combobox input-group — clips with
|
|
80
|
+
`overflow-hidden` so its addons follow the rounded corner. The inner input's own outline is
|
|
81
|
+
offset outward INTO that clip, so it was drawn and then cut, which is how an addon field ended
|
|
82
|
+
up with no visible focus at all under the forced palette. The group carries the outline (it is
|
|
83
|
+
the element whose border the tint would have moved); the control inside it stands down, so the
|
|
84
|
+
two never paint a double ring. `data-field-group` is set by every consumer of
|
|
85
|
+
`fieldControlGroup` in `@vegastack/design` — the attribute IS the contract. */
|
|
86
|
+
[data-field-group] input:focus,
|
|
87
|
+
[data-field-group] textarea:focus {
|
|
88
|
+
outline: none;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
48
92
|
/* ───────────────────────────────────────────────────────────────────────────────────────────────
|
|
49
93
|
* THE ONE SANCTIONED `!important` EXCEPTION (WCAG 2.1 — reduced-motion accessibility override).
|
|
50
94
|
* Users who set `prefers-reduced-motion: reduce` MUST have animations/transitions neutralized even
|
|
@@ -62,7 +106,15 @@
|
|
|
62
106
|
::after {
|
|
63
107
|
animation-duration: 0.01ms !important;
|
|
64
108
|
animation-iteration-count: 1 !important;
|
|
109
|
+
/* A zeroed DURATION alone is not enough: a staggered entrance schedules its
|
|
110
|
+
* per-item `animation-delay` in real time, so the items would still appear
|
|
111
|
+
* one after another (each instantly) over the full stagger window. Zeroing
|
|
112
|
+
* the delay too is what makes "reduced motion" a static end state — and it
|
|
113
|
+
* is why no component needs its own `motion-reduce:` restatement (audit
|
|
114
|
+
* batch Di1 / B2-06). */
|
|
115
|
+
animation-delay: 0s !important;
|
|
65
116
|
transition-duration: 0.01ms !important;
|
|
117
|
+
transition-delay: 0s !important;
|
|
66
118
|
scroll-behavior: auto !important;
|
|
67
119
|
}
|
|
68
120
|
|