@vegastack/design-tokens 0.7.33 → 0.7.45
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 +37 -2
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -67,7 +67,14 @@
|
|
|
67
67
|
restating it. Text entry (text inputs, textarea, contenteditable) keeps its border tint
|
|
68
68
|
(FOC-3) and takes no fill. Tab triggers and panels take the same tint as everything else. Components carry no focus ring of their
|
|
69
69
|
own (FOC-6), and `design-lint`'s `no-focus-ring-glow` rule rejects any focus ring or outline
|
|
70
|
-
class, so one cannot creep back through a later upstream pull.
|
|
70
|
+
class, so one cannot creep back through a later upstream pull.
|
|
71
|
+
|
|
72
|
+
Programmatic focus targets (`tabindex="-1"`) take no tint: AppShell's skip-link `<main>`, Base UI
|
|
73
|
+
popups, a step heading focus is moved to. They are not tab stops, and each is a whole region.
|
|
74
|
+
Clicking the empty part of `<main>` focuses it, and the next key press (Shift or ⌘ alone is
|
|
75
|
+
enough) flips it to `:focus-visible` in Chromium. Before this exclusion that painted the entire
|
|
76
|
+
page grey. Combobox chips are the one `tabindex="-1"` control that arrow keys move focus onto,
|
|
77
|
+
so they keep the cue. */
|
|
71
78
|
:focus-visible {
|
|
72
79
|
outline: none;
|
|
73
80
|
}
|
|
@@ -83,7 +90,8 @@
|
|
|
83
90
|
[type="reset"],
|
|
84
91
|
[type="color"],
|
|
85
92
|
[type="file"]
|
|
86
|
-
)
|
|
93
|
+
),
|
|
94
|
+
[tabindex="-1"]:not([data-slot="combobox-chip"])
|
|
87
95
|
) {
|
|
88
96
|
background-image: linear-gradient(
|
|
89
97
|
color-mix(in oklch, var(--accent) 50%, transparent),
|
|
@@ -197,3 +205,30 @@
|
|
|
197
205
|
animation: none !important;
|
|
198
206
|
}
|
|
199
207
|
}
|
|
208
|
+
|
|
209
|
+
/* INT-9 (ours) — NO iOS FOCUS ZOOM (MK 2026-09-26).
|
|
210
|
+
iOS Safari zooms the page into any focused text control whose font-size is under 16px, and the
|
|
211
|
+
system's controls are 14px. On a touch pointer every text-entry control renders at 16px at
|
|
212
|
+
least, so Safari never zooms; desktop keeps the 14px density. Deliberately OUTSIDE `@layer
|
|
213
|
+
base`: unlayered rules outrank the utilities layer, so a control's own `text-sm` cannot undo
|
|
214
|
+
it, and no `!important` is needed. Pair it with the viewport's `maximumScale: 1` (see the
|
|
215
|
+
consume guide), which stops focus zoom while pinch-zoom keeps working on iOS. */
|
|
216
|
+
@media (pointer: coarse) {
|
|
217
|
+
input:not(
|
|
218
|
+
[type="checkbox"],
|
|
219
|
+
[type="radio"],
|
|
220
|
+
[type="range"],
|
|
221
|
+
[type="color"],
|
|
222
|
+
[type="file"],
|
|
223
|
+
[type="button"],
|
|
224
|
+
[type="submit"],
|
|
225
|
+
[type="reset"],
|
|
226
|
+
[type="image"]
|
|
227
|
+
),
|
|
228
|
+
textarea,
|
|
229
|
+
select,
|
|
230
|
+
[contenteditable="true"],
|
|
231
|
+
[contenteditable=""] {
|
|
232
|
+
font-size: max(16px, 1em);
|
|
233
|
+
}
|
|
234
|
+
}
|