Add states to the spotlight and glass variants.

Author: koculu

frontend/purestack.studio/guides/semantic-tones.mdx

@@ -121,7 +121,7 @@ A tone contains more than one background and text color. These samples all selec
 
 Keep fill, border, and text from the same role when you need a ready-made combination. Each role's colors are designed as a set within the active theme. The direct `tone-fill`, `tone-border`, and `tone-text` classes use the tone color itself; they are useful for accents, but they are not the same as a complete surface or button treatment.
 
-`spotlight` is for large areas such as feature bands, callouts, and showcase panels. It is a calm field with a soft light, without the gloss and edge shading of surfaces and buttons, so it stays calm at any size. It has no interaction states and pairs with the alternate surface border and text classes. Components accept it as `variant="spotlight"`, for example `<Panel tone="accent" variant="spotlight">`.
+`spotlight` is for large areas such as feature bands, callouts, and showcase panels. It is a calm field with a soft light, without the gloss and edge shading of surfaces and buttons, so it stays calm at any size. It pairs with the alternate surface border and text classes. Like every fill it has `-hover`, `-active`, `-disabled`, and `-all` forms: the light reaches further on hover and press, and goes out when disabled. Components accept it as `variant="spotlight"`, for example `<Panel tone="accent" variant="spotlight">`.
 
 Keep spotlights rare: one or two per page, for the pieces a visitor should notice first. Most surfaces should be quiet. `tone-fill-flat`, `tone-fill-flat-alt`, and `tone-fill-flat-solid` paint a role's single color without the gradient chrome, with the same `-hover`, `-active`, `-disabled`, and `-all` forms as the gradient fills. Components accept them as `variant="flat"`, `variant="flatAlt"`, and `variant="flatSolid"`:
 
@@ -138,7 +138,7 @@ The skin sets the field and the light color; the page decides where the light fa
 </Panel>
 ```
 
-Cards placed on a spotlight should not repeat its field. `tone-fill-glass` lets the field show through, lifted by a faint veil and lit by the same light, so a card reads as a lighter pane rather than a second color. The light follows the nearest `spotlight-from-*`, so cards and their spotlight are lit from the same side. Components accept it as `variant="glass"`. A different tone on a glass card tints it without breaking the field:
+Cards placed on a spotlight should not repeat its field. `tone-fill-glass` lets the field show through, lifted by a faint veil and lit by the same light, so a card reads as a lighter pane rather than a second color. The light follows the nearest `spotlight-from-*`, so cards and their spotlight are lit from the same side. Its veil thickens on hover and press, and thins without the light when disabled. Components accept it as `variant="glass"`. A different tone on a glass card tints it without breaking the field:
 
 <div class="tone--accent tone-fill-spotlight tone-border-surface-alt tone-text-surface-alt b-1 rounded-lg p-3 spotlight-from-top-right">
   <Grid columns="1" columnsSm="2" class="gap-3">

packages/ts-components/src/standard/componentVariant.ts

@@ -66,6 +66,10 @@ const STATELESS_COMPONENT_VARIANT_CLASSES: Record<ComponentVariant, string> = {
 }
 
 const STATEFUL_COMPONENT_VARIANT_CLASSES = {
+  spotlight:
+    'tone-fill-spotlight-hover tone-fill-spotlight-active tone-border-surface-alt-hover tone-border-surface-alt-active tone-text-surface-alt-hover tone-text-surface-alt-active',
+  glass:
+    'tone-fill-glass-hover tone-fill-glass-active tone-border-surface-alt-hover tone-border-surface-alt-active tone-text-surface-alt-hover tone-text-surface-alt-active',
   flat: 'tone-fill-flat-hover tone-fill-flat-active tone-border-surface-hover tone-border-surface-active tone-text-surface-hover tone-text-surface-active',
   flatAlt:
     'tone-fill-flat-alt-hover tone-fill-flat-alt-active tone-border-surface-alt-hover tone-border-surface-alt-active tone-text-surface-alt-hover tone-text-surface-alt-active',

packages/ts-style/src/semanticPresets.ts

@@ -52,9 +52,40 @@ function flatFill(role: ThemePaletteCurrent['surface']): States {
   }
 }
 
-function glass(current: ThemePaletteCurrent) {
-  const veil = `color-mix(in srgb, ${current.spotlight.light} 45%, transparent)`
-  return `${spotlightLight(current, '75%')}, linear-gradient(${veil}, ${veil})`
+/**
+ * The spotlight answers a pointer by letting its light reach further, and
+ * goes dark, leaving only the field, when disabled.
+ */
+function spotlightFill(current: ThemePaletteCurrent): States {
+  const lit = (reach: string) =>
+    `${spotlightLight(current, reach)}, ${current.spotlight.field}`
+  return {
+    all: true,
+    rest: { background: lit('46%') },
+    hover: { background: lit('60%') },
+    active: { background: lit('72%') },
+    disabled: { background: current.spotlight.field },
+  }
+}
+
+/**
+ * Glass answers a pointer by thickening its veil, and loses its light and
+ * most of its veil when disabled.
+ */
+function glassFill(current: ThemePaletteCurrent): States {
+  const veil = (strength: string) => {
+    const color = `color-mix(in srgb, ${current.spotlight.light} ${strength}, transparent)`
+    return `linear-gradient(${color}, ${color})`
+  }
+  const lit = (strength: string) =>
+    `${spotlightLight(current, '75%')}, ${veil(strength)}`
+  return {
+    all: true,
+    rest: { background: lit('45%') },
+    hover: { background: lit('58%') },
+    active: { background: lit('70%') },
+    disabled: { background: veil('25%') },
+  }
 }
 
 function createSpotlightOrigins(styleBuilder: StyleBuilder, theme: string) {
@@ -203,17 +234,10 @@ function createFills(
         background: current.canvas,
       },
     },
-    'tone-fill-spotlight': {
-      rest: {
-        background: `${spotlightLight(current, '46%')}, ${current.spotlight.field}`,
-      },
-    },
+    'tone-fill-spotlight': spotlightFill(current),
     // Glass lets the field behind show through, lifted by a veil and lit by
     // the same light, so cards sit on a spotlight without a second color.
-    'tone-fill-glass': {
-      rest: { background: glass(current) },
-      hover: { background: glass(current) },
-    },
+    'tone-fill-glass': glassFill(current),
     // Flat fills paint each role's single color, without the gradient
     // chrome, for the many quiet surfaces around a few spotlights.
     'tone-fill-flat': flatFill(current.surface),