@apliteni/apliteni-ui 0.36.0 → 0.37.1

package/src/tokens/tokens.css

@@ -172,7 +172,7 @@
   --disabled-ink-bare: #a39eb7;
 
   /* Lifted from #9b5dff, which cleared the flat surfaces and failed on its own wash over
-     a card; the value was already in the ramp. --ring is var(--accent) and follows by
+     a card; the value was already in the ramp. --ring-color is var(--accent) and follows by
      reference. Held by stories/accent-contrast.test.js. #157.
      why: docs/specification.md#colour-and-contrast */
   --accent: #b479ff;
@@ -229,12 +229,12 @@
   --shadow-lg: 0 0 #0000;
   --shadow-seg: 0 0 #0000;
   --shadow-card: 0 0 #0000;
-  /* THE ONLY --ring in the kit — light and every data-accent sub-theme declare an
-     --accent and inherit this line. Opaque because a translucent ring is a glow, and the
-     eight rgba() literals it replaced all missed WCAG 1.4.11's 3:1 (#218). Held by
-     stories/guidelines/accessibility-floor.test.js.
-     why: docs/specification.md#the-focus-ring */
-  --ring: 0 0 0 3px var(--accent);
+  /* G2: the band carries contrast; the halo decorates it. why: docs/specification.md#the-focus-ring */
+  --ring-width: 2px;
+  --ring-color: var(--accent);
+  --ring-gap-width: 1px;
+  --ring-gap: var(--bg);
+  --ring: 0 0 0 var(--ring-gap-width) var(--ring-gap), 0 0 0 calc(var(--ring-gap-width) + var(--ring-width)) var(--ring-color), 0 0 12px 2px color-mix(in srgb, var(--ring-color) 45%, transparent);
 
   /* The ink a cast shadow is made of, and the specular white that reads as gloss on a
      raised surface. Effects mix these instead of writing rgba(). */
@@ -405,3 +405,45 @@
   --prose-body: 62ch;
   --prose-dense: 72ch;
 }
+
+/* Recompose only at painted containers; controls inherit the outside gap.
+ * One recipe keeps surface propagation cheap and consistent.
+ * why: docs/specification.md#the-focus-ring */
+.amenu,
+.dtsw,
+.rx-modal,
+.ui-app__rail,
+.ui-auth__card,
+.ui-callout,
+.ui-card,
+.ui-card--accent,
+.ui-card--live,
+.ui-cmdk__panel,
+.ui-code,
+.ui-confirm__panel,
+.ui-drawer__footer,
+.ui-drawer__panel,
+.ui-dropdown__panel,
+.ui-fbcomposer,
+.ui-footer--app,
+.ui-seg,
+.ui-snippet,
+.ui-snippet--reveal,
+.ui-sx,
+.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
+.ui-table--zebra tbody tr:nth-child(even) td,
+.ui-table--zebra tbody tr:hover td,
+.ui-table--zebra.ui-table--hover tbody tr:hover td,
+.ui-toast--outline,
+.ui-toast--solid,
+.vsw__menu {
+  --ring: 0 0 0 var(--ring-gap-width) var(--ring-gap), 0 0 0 calc(var(--ring-gap-width) + var(--ring-width)) var(--ring-color), 0 0 12px 2px color-mix(in srgb, var(--ring-color) 45%, transparent);
+}
+
+/* A container focused itself paints outside its own surface; descendants only
+ * inherit its inside gap again after focus moves to them. */
+.ui-card:focus-visible,
+.ui-cmdk__panel:focus-visible,
+.ui-confirm__panel:focus-visible,
+.ui-drawer__panel:focus-visible,
+.rx-modal:focus-visible { --ring-gap: inherit; }