@mieweb/ui 0.10.0-dev.37 → 0.10.0-dev.38
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/styles/init.css +19 -3
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/styles/init.css
CHANGED
|
@@ -368,9 +368,25 @@ kbd {
|
|
|
368
368
|
font-family: var(--mieweb-font-mono);
|
|
369
369
|
}
|
|
370
370
|
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
371
|
+
/* Focus visible styles for accessibility.
|
|
372
|
+
Mirrors base.css: layered so component utilities (e.g.
|
|
373
|
+
focus-visible:outline-none on elements that render their own focus
|
|
374
|
+
ring) can override it — unlayered rules would beat Tailwind's
|
|
375
|
+
utilities layer. */
|
|
376
|
+
@layer base {
|
|
377
|
+
:focus-visible {
|
|
378
|
+
outline: 2px solid var(--mieweb-ring);
|
|
379
|
+
outline-offset: 2px;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* Theme the focus ring offset. Tailwind's --tw-ring-offset-color is
|
|
383
|
+
registered with inherits:false and defaults to #fff, which renders
|
|
384
|
+
as a glaring white box around focused elements in dark mode
|
|
385
|
+
(mieweb/ui#512). Set it per-element to the background token so
|
|
386
|
+
ring-offset-* utilities blend with the current theme. */
|
|
387
|
+
* {
|
|
388
|
+
--tw-ring-offset-color: var(--mieweb-background, #ffffff);
|
|
389
|
+
}
|
|
374
390
|
}
|
|
375
391
|
|
|
376
392
|
/* ── Reduced Motion ──────────────────────────────────────────────────── */
|