@scalewing/react 1.59.1 → 1.59.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalewing/react
 
+## 1.59.2
+
+### Patch Changes
+
+- ed35abb: `GlyphTile` letters are readable text: a tile holding letters mixes its categorical fill 25 % toward black, so white letters keep 4.5:1 (WCAG 1.4.3) on every fill in both schemes (neutral 3.26:1 before, 5.35:1 after; orange, the lightest, 5.08:1). A glyph keeps the fill as it is (3:1, WCAG 1.4.11). `Stepper`'s − and + grow to the 44 px touch target both ways on a coarse pointer (32 px wide before). No API change.
+
 ## 1.59.1
 
 ### Patch Changes

package/dist/css/css-glyph-tile.d.ts

@@ -3,5 +3,13 @@ export declare const glyphTileSizes: readonly ["sm", "md", "lg"];
 export type GlyphTileSize = (typeof glyphTileSizes)[number];
 /** The most letters a tile holds, such as a three-letter crest ("NSL"). */
 export declare const glyphTileLetterLimit = 3;
+/**
+ * How far a tile holding letters mixes its fill toward black. Letters are
+ * text (WCAG 1.4.3, 4.5:1), and the categorical fills keep a white glyph at
+ * only 3:1 (neutral 3.26:1, orange 3.06:1): a 25 % mix keeps white letters
+ * at 5:1 or more on every fill in both schemes (orange, the lightest after
+ * the mix, 5.08:1). A glyph keeps the fill as it is.
+ */
+export declare const glyphTileLetterDarken = 0.25;
 export declare function cssGlyphTileClasses(): string;
 export declare function glyphTileClassCatalog(): string[];

package/dist/css/css-glyph-tile.js

@@ -2,6 +2,14 @@ import { categoricalColorKeys } from '@scalewing/tokens';
 export const glyphTileSizes = ['sm', 'md', 'lg'];
 /** The most letters a tile holds, such as a three-letter crest ("NSL"). */
 export const glyphTileLetterLimit = 3;
+/**
+ * How far a tile holding letters mixes its fill toward black. Letters are
+ * text (WCAG 1.4.3, 4.5:1), and the categorical fills keep a white glyph at
+ * only 3:1 (neutral 3.26:1, orange 3.06:1): a 25 % mix keeps white letters
+ * at 5:1 or more on every fill in both schemes (orange, the lightest after
+ * the mix, 5.08:1). A glyph keeps the fill as it is.
+ */
+export const glyphTileLetterDarken = 0.25;
 const tileSide = {
     sm: 'var(--sw-space-5)',
     md: 'var(--sw-control-xs-min-height)',
@@ -20,7 +28,8 @@ function sizeRules() {
 /*
  * A rounded square in a categorical fill with the consumer's glyph centred
  * in white, sized to spacing step 4 whatever the glyph's own size. It is
- * decoration: the words beside it carry the meaning. Forced colors drop the
+ * decoration: the words beside it carry the meaning. Letters still have to
+ * be readable text, so a tile holding them takes a deeper fill. Forced colors drop the
  * fill, so a border keeps the tile's shape and the glyph takes the text
  * color.
  */
@@ -66,6 +75,11 @@ export function cssGlyphTileClasses() {
 
 ${hueRules()}
 
+/* Letters are text: the fill darkens just enough for 4.5:1 (glyphTileLetterDarken). */
+.sw-glyph-tile:has(> .sw-glyph-tile-text) {
+  background: color-mix(in srgb, var(--sw-glyph-tile-fill), black ${glyphTileLetterDarken * 100}%);
+}
+
 ${sizeRules()}
 
 @media (forced-colors: active) {

package/dist/css/css-stepper.d.ts

@@ -3,8 +3,8 @@
  * digits wide by default, the track at its own width even under a wider label
  * or message (`5ch` plus its padding, so its width never follows
  * its value), or fills its container with `sw-stepper-full`. The buttons are
- * spacing step 6 wide on the subtle fill and every part is the `md` control
- * height.
+ * spacing step 6 wide on the subtle fill (the 44 px touch target on a coarse
+ * pointer) and every part is the `md` control height.
  */
 export declare function cssStepperClasses(): string;
 export declare function stepperClassCatalog(): string[];

package/dist/css/css-stepper.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { changedTintLayer } from './css-field-changed.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 import { cssStepperUnitClasses, stepperUnitClassCatalog, } from './css-stepper-unit.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
@@ -47,8 +48,8 @@ function stateRules() {
  * digits wide by default, the track at its own width even under a wider label
  * or message (`5ch` plus its padding, so its width never follows
  * its value), or fills its container with `sw-stepper-full`. The buttons are
- * spacing step 6 wide on the subtle fill and every part is the `md` control
- * height.
+ * spacing step 6 wide on the subtle fill (the 44 px touch target on a coarse
+ * pointer) and every part is the `md` control height.
  */
 export function cssStepperClasses() {
     return `.sw-stepper {
@@ -117,6 +118,17 @@ ${input} {
 
 .sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
 
+/* A coarse pointer gets the full touch target: − and + as wide as they are tall. */
+@media ${coarsePointerQuery} {
+  .sw-stepper-track {
+    grid-template-columns: ${touchTarget} auto ${touchTarget};
+  }
+
+  .sw-stepper-full .sw-stepper-track {
+    grid-template-columns: ${touchTarget} minmax(0, 1fr) ${touchTarget};
+  }
+}
+
 ${stateRules()}
 
 ${cssStepperUnitClasses()}`;

package/dist/styles.css

@@ -8433,6 +8433,11 @@ html:has(.sw-site-header-sticky) {
 .sw-glyph-tile-rose { --sw-glyph-tile-fill: var(--sw-categorical-rose); }
 .sw-glyph-tile-neutral { --sw-glyph-tile-fill: var(--sw-categorical-neutral); }
 
+/* Letters are text: the fill darkens just enough for 4.5:1 (glyphTileLetterDarken). */
+.sw-glyph-tile:has(> .sw-glyph-tile-text) {
+  background: color-mix(in srgb, var(--sw-glyph-tile-fill), black 25%);
+}
+
 .sw-glyph-tile-sm { --sw-glyph-tile-side: var(--sw-space-5); height: var(--sw-space-5); width: var(--sw-space-5); }
 .sw-glyph-tile-md { --sw-glyph-tile-side: var(--sw-control-xs-min-height); height: var(--sw-control-xs-min-height); width: var(--sw-control-xs-min-height); }
 .sw-glyph-tile-lg { --sw-glyph-tile-side: var(--sw-space-6); height: var(--sw-space-6); width: var(--sw-space-6); }
@@ -9996,6 +10001,17 @@ html:has(.sw-site-header-sticky) {
 
 .sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
 
+/* A coarse pointer gets the full touch target: − and + as wide as they are tall. */
+@media (pointer: coarse) {
+  .sw-stepper-track {
+    grid-template-columns: var(--sw-control-md-min-height) auto var(--sw-control-md-min-height);
+  }
+
+  .sw-stepper-full .sw-stepper-track {
+    grid-template-columns: var(--sw-control-md-min-height) minmax(0, 1fr) var(--sw-control-md-min-height);
+  }
+}
+
 [data-theme] .sw-stepper-invalid input.sw-stepper-input {
   border-color: var(--sw-color-danger);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.59.1",
+  "version": "1.59.2",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",