feat(mosaic): use 12 and 8 percent border washes and fill outline buttons with the surface

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

Author: prestonwebdev

.changeset/mosaic-color-adoption.md

@@ -2,4 +2,4 @@
 '@clerk/mosaic': patch
 ---
 
-Controls such as inputs, selects, checkboxes, radios and outline buttons keep the stronger `--cl-color-border`, while containers and dividers (cards, sections, tables, menus, the profile nav) use `--cl-color-border-subtle`. Outline buttons fill with the surface color and lay their hover and pressed tint over it, so the tint works on the page, the surface or a faded fill. Banners, badges, toasts and the tag-input error use the `-subtle` and `-border` tokens, and the neutral badge and banner use `--cl-color-neutral-subtle`. The negative color is slightly deeper in light mode for contrast.
+Controls such as inputs, selects, checkboxes, radios and outline buttons keep the stronger `--cl-color-border`, while containers and dividers (cards, sections, tables, menus, the profile nav) use `--cl-color-border-subtle`. The two are now 12 and 8 percent washes in both modes, which makes light-mode controls firmer and leaves containers close to where they were. The profile opened in a dialog draws a border. Outline buttons fill with the surface color, and their hover and pressed states tint that fill. Banners, badges, toasts and the tag-input error use the `-subtle` tokens, and the neutral badge and banner use `--cl-color-neutral-subtle`.

packages/mosaic/ARCHITECTURE.md

@@ -25,7 +25,7 @@ export const colorVars = stylex.defineVars({
 
 Each exported `*Vars` const in that file is one group (`colorVars`, `radiusVars`, …); the file is the list. `space` is also declared with `defineVars`, but its keys are not `--cl-*` names, so its steps compile to hashed custom properties that are internal, not part of the contract.
 
-There is no gray scale. Every achromatic token (`--cl-color-foreground`, `-border`, `-surface-subtle`, …) is `--cl-color-neutral` (black on light, white on dark) mixed into `--cl-color-surface` at a fixed percentage per mode, so overriding neutral to a warm gray retints the whole ramp. The exception is the borders: `--cl-color-border` (controls) and `--cl-color-border-subtle` (containers and dividers) are neutral washes, 7 and 4 percent in light mode and 12 and 8 percent in dark mode, so they keep the same step over the surface and the faded surface alike. The `--cl-<color>-alpha-100|200|300` tokens in `colorVars` are washes (6, 8, and 12 percent of `--cl-color-neutral`, `-negative`, `-positive`, and `-warning` over `transparent`); overriding the solid color retints its washes.
+There is no gray scale. Every achromatic token (`--cl-color-foreground`, `-border`, `-surface-subtle`, …) is `--cl-color-neutral` (black on light, white on dark) mixed into `--cl-color-surface` at a fixed percentage per mode, so overriding neutral to a warm gray retints the whole ramp. The exception is the borders: `--cl-color-border` (controls) and `--cl-color-border-subtle` (containers and dividers) are neutral washes, 12 and 8 percent in both modes, so they keep the same step over the surface and the faded surface alike. The `--cl-<color>-alpha-100|200|300` tokens in `colorVars` are washes (6, 8, and 12 percent of `--cl-color-neutral`, `-negative`, `-positive`, and `-warning` over `transparent`); overriding the solid color retints its washes.
 
 The seeds are `--cl-color-page`, `--cl-color-neutral`, `--cl-color-brand`, `--cl-color-negative`, `--cl-color-positive` and `--cl-color-warning`. Brand and the three statuses share one shape: the seed, `-foreground` (white in light mode; in dark mode the surface color for brand, positive and warning, where the fills are light, and white for negative), `-subtle` (the 8 percent wash, 12 in dark mode) and `-border` (the 12 percent wash), so both work over the page, the surface or a faded fill and `-alpha-100|200|300` washes. Neutral has the same slots under its own names: `--cl-color-surface-subtle`, `--cl-color-neutral-subtle` (the same wash as the accent `-subtle`, for chips such as the neutral badge) and `--cl-color-border`. Only the seeds and the `-foreground` pairs are set by hand, so retinting a seed retints its companions.
 

packages/mosaic/src/components/button/button.styles.ts

@@ -19,14 +19,14 @@ import { iconScope } from '../icon/icon.markers.stylex';
 
 // Opaque fills blend toward their own on-fill at the same 12%/18%. Neutral has no fill
 // to blend from, so it rides the opacity ramp above.
-// Outline variants keep the surface as their fill and lay the hover and pressed wash over it as an
-// inset shadow, so the state tint works on any backdrop and still transitions.
+// Outline variants fill with the surface, so their hover and pressed tint mixes the neutral or
+// negative color into it.
 const primaryHover = `color-mix(in oklab, ${colorVars['--cl-color-brand']}, ${colorVars['--cl-color-brand-foreground']} 12%)`;
 const primaryActive = `color-mix(in oklab, ${colorVars['--cl-color-brand']}, ${colorVars['--cl-color-brand-foreground']} 18%)`;
-const neutralHoverWash = `inset 0 0 0 100vmax ${colorVars['--cl-color-neutral-alpha-100']}`;
-const neutralPressedWash = `inset 0 0 0 100vmax ${colorVars['--cl-color-neutral-alpha-200']}`;
-const negativeHoverWash = `inset 0 0 0 100vmax ${colorVars['--cl-color-negative-alpha-200']}`;
-const negativePressedWash = `inset 0 0 0 100vmax ${colorVars['--cl-color-negative-alpha-300']}`;
+const outlineNeutralHover = `color-mix(in srgb, ${colorVars['--cl-color-neutral']} 6%, ${colorVars['--cl-color-surface']})`;
+const outlineNeutralActive = `color-mix(in srgb, ${colorVars['--cl-color-neutral']} 8%, ${colorVars['--cl-color-surface']})`;
+const outlineNegativeHover = `color-mix(in srgb, ${colorVars['--cl-color-negative']} 8%, ${colorVars['--cl-color-surface']})`;
+const outlineNegativeActive = `color-mix(in srgb, ${colorVars['--cl-color-negative']} 12%, ${colorVars['--cl-color-surface']})`;
 const negativeHover = `color-mix(in oklab, ${colorVars['--cl-color-negative']}, ${colorVars['--cl-color-negative-foreground']} 12%)`;
 const negativeActive = `color-mix(in oklab, ${colorVars['--cl-color-negative']}, ${colorVars['--cl-color-negative-foreground']} 18%)`;
 
@@ -81,7 +81,7 @@ export const styles = stylex.create({
       ':not([data-disabled]):active': durationVars['--cl-duration-instant'],
       ':not([data-disabled]):hover': durationVars['--cl-duration-instant'],
     },
-    transitionProperty: 'background-color, border-color, box-shadow, color, opacity, text-decoration-color',
+    transitionProperty: 'background-color, border-color, color, opacity, text-decoration-color',
     // Linear, not `--cl-ease-default`: nothing here moves. An ease on already non-uniform
     // color interpolation just drags the midpoint, and the house curve's overshoot would
     // extrapolate past the target color.
@@ -187,42 +187,39 @@ export const variants = stylex.create({
   // fill, and leaves it independently themeable.
   'outline-primary': {
     borderColor: colorVars['--cl-color-border'],
-    backgroundColor: colorVars['--cl-color-surface'],
-    boxShadow: {
-      default: null,
-      ':not([data-disabled]):active': neutralPressedWash,
-      ':not([data-disabled])[data-open]': neutralPressedWash,
+    backgroundColor: {
+      default: colorVars['--cl-color-surface'],
+      ':not([data-disabled]):active': outlineNeutralActive,
+      ':not([data-disabled])[data-open]': outlineNeutralActive,
       '@media (hover: hover)': {
         default: null,
-        ':not([data-disabled]):hover:not(:active):not([data-open])': neutralHoverWash,
+        ':not([data-disabled]):hover:not(:active):not([data-open])': outlineNeutralHover,
       },
     },
     color: colorVars['--cl-color-brand'],
   },
   'outline-neutral': {
     borderColor: colorVars['--cl-color-border'],
-    backgroundColor: colorVars['--cl-color-surface'],
-    boxShadow: {
-      default: null,
-      ':not([data-disabled]):active': neutralPressedWash,
-      ':not([data-disabled])[data-open]': neutralPressedWash,
+    backgroundColor: {
+      default: colorVars['--cl-color-surface'],
+      ':not([data-disabled]):active': outlineNeutralActive,
+      ':not([data-disabled])[data-open]': outlineNeutralActive,
       '@media (hover: hover)': {
         default: null,
-        ':not([data-disabled]):hover:not(:active):not([data-open])': neutralHoverWash,
+        ':not([data-disabled]):hover:not(:active):not([data-open])': outlineNeutralHover,
       },
     },
     color: colorVars['--cl-color-foreground'],
   },
   'outline-negative': {
     borderColor: colorVars['--cl-color-border'],
-    backgroundColor: colorVars['--cl-color-surface'],
-    boxShadow: {
-      default: null,
-      ':not([data-disabled]):active': negativePressedWash,
-      ':not([data-disabled])[data-open]': negativePressedWash,
+    backgroundColor: {
+      default: colorVars['--cl-color-surface'],
+      ':not([data-disabled]):active': outlineNegativeActive,
+      ':not([data-disabled])[data-open]': outlineNegativeActive,
       '@media (hover: hover)': {
         default: null,
-        ':not([data-disabled]):hover:not(:active):not([data-open])': negativeHoverWash,
+        ':not([data-disabled]):hover:not(:active):not([data-open])': outlineNegativeHover,
       },
     },
     color: colorVars['--cl-color-negative'],

packages/mosaic/src/components/icon/icon-frame.styles.ts

@@ -2,8 +2,6 @@ import * as stylex from '@stylexjs/stylex';
 
 import { colorVars, radiusVars, space } from '../../tokens.stylex';
 
-const filledWash = `light-dark(color-mix(in oklab, ${colorVars['--cl-color-neutral']} 3.5%, transparent), color-mix(in oklab, ${colorVars['--cl-color-neutral']} 4.5%, transparent))`;
-
 export const styles = stylex.create({
   base: {
     borderColor: 'transparent',
@@ -22,7 +20,7 @@ export const styles = stylex.create({
     borderColor: colorVars['--cl-color-border-subtle'],
   },
   filled: {
-    backgroundColor: filledWash,
+    backgroundColor: colorVars['--cl-color-neutral-alpha-100'],
   },
 });
 

packages/mosaic/src/components/profile/profile.styles.ts

@@ -104,7 +104,6 @@ export const styles = stylex.create({
   },
 
   layoutInDialog: {
-    borderWidth: '0px',
     blockSize: 'auto',
     boxShadow: {
       [compact]: 'none',
@@ -120,6 +119,7 @@ export const styles = stylex.create({
 
   layoutFullscreen: {
     borderRadius: 0,
+    borderWidth: '0px',
     boxShadow: 'none',
   },
 

packages/mosaic/src/tokens.stylex.ts

@@ -47,10 +47,8 @@ const colorDefaults = {
   '--cl-color-foreground-secondary': neutralMix(55, 64.25),
   '--cl-color-foreground-disabled': neutralMix(28.5, 44),
 
-  '--cl-color-border':
-    'light-dark(color-mix(in oklab, var(--cl-color-neutral) 7%, transparent), var(--cl-color-neutral-alpha-300))',
-  '--cl-color-border-subtle':
-    'light-dark(color-mix(in oklab, var(--cl-color-neutral) 4%, transparent), var(--cl-color-neutral-alpha-200))',
+  '--cl-color-border': 'var(--cl-color-neutral-alpha-300)',
+  '--cl-color-border-subtle': 'var(--cl-color-neutral-alpha-200)',
 
   '--cl-color-brand': 'light-dark(oklch(0.2046 0 0), oklch(0.9851 0 0))',
   '--cl-color-brand-foreground': 'light-dark(oklch(1 0 0), var(--cl-color-surface))',