@estiva-app/ui 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/stories/TokensPage.tsx

@@ -88,9 +88,9 @@ const FAMILIES: Family[] = [
   },
   {
     label: 'Accent',
-    blurb: 'The brand colour: the primary button, the checked box, the brand chip. Muted is its wash, outline its thin border.',
+    blurb: 'The brand colour: the primary button, the checked box, the brand chip. Muted is its opaque wash, wash the translucent one a row tints with on hover, outline its thin border.',
     utilities: COLOUR_UTILITIES,
-    tokens: [colour('accent', 'primary', 'fill'), colour('accent', 'hover', 'fill'), colour('accent', 'muted', 'fill'), colour('accent', 'outline', 'outline')],
+    tokens: [colour('accent', 'primary', 'fill'), colour('accent', 'hover', 'fill'), colour('accent', 'muted', 'fill'), colour('accent', 'wash', 'fill'), colour('accent', 'outline', 'outline')],
   },
   {
     label: 'Tones',
@@ -100,6 +100,10 @@ const FAMILIES: Family[] = [
       colour(tone, 'default', 'text'),
       colour(tone, 'muted', 'fill'),
       colour(tone, 'outline', 'outline'),
+      // Only success has a translucent wash so far, because only success needed
+      // one: it is the tint on a resolved thread. The others gain one when a
+      // component asks, not before.
+      ...(tone === 'success' ? [colour(tone, 'wash', 'fill')] : []),
     ]),
   },
   {

package/tailwind-preset.js

@@ -154,6 +154,11 @@ export default {
         'warning-outline': 'var(--warning-outline)',
         'success-outline': 'var(--success-outline)',
         'error-outline':   'var(--error-outline)',
+        // The same hues as the outlines, at a fill's strength rather than an
+        // edge's: `-outline` is 30%, `-wash` is 11%. Peek tinted rows with its
+        // own copies of these before they moved here.
+        'accent-wash':     'var(--accent-wash)',
+        'success-wash':    'var(--success-wash)',
         'scrim':           'var(--scrim)',
       },
       boxShadow: {

package/tokens.css

@@ -72,6 +72,8 @@
   --warning-outline: rgba(245, 158, 11, 0.3);
   --success-outline: rgba(14, 160, 111, 0.3);
   --error-outline:   rgba(239, 68, 68, 0.3);
+  --accent-wash:     rgba(139, 92, 246, 0.11);
+  --success-wash:    rgba(14, 160, 111, 0.11);
   --glow-warning:    0 0 5px rgba(245, 158, 11, 0.4);
   --glow-success:    0 0 5px rgba(14, 160, 111, 0.7);
   --glow-accent:     0 0 5px rgba(139, 92, 246, 0.6);
@@ -133,6 +135,8 @@
   --warning-outline: rgba(251, 191, 36, 0.3);
   --success-outline: rgba(52, 211, 153, 0.3);
   --error-outline:   rgba(248, 113, 113, 0.3);
+  --accent-wash:     rgba(167, 139, 250, 0.11);
+  --success-wash:    rgba(52, 211, 153, 0.11);
   --glow-warning:    0 0 5px rgba(251, 191, 36, 0.4);
   --glow-success:    0 0 5px rgba(52, 211, 153, 0.7);
   --glow-accent:     0 0 5px rgba(167, 139, 250, 0.6);
@@ -198,6 +202,8 @@
   --warning-outline: rgba(255, 176, 32, 0.3);
   --success-outline: rgba(63, 222, 140, 0.3);
   --error-outline:   rgba(255, 107, 107, 0.3);
+  --accent-wash:     rgba(86, 200, 255, 0.11);
+  --success-wash:    rgba(63, 222, 140, 0.11);
   --glow-warning:    0 0 5px rgba(255, 176, 32, 0.4);
   --glow-success:    0 0 5px rgba(63, 222, 140, 0.7);
   --glow-accent:     0 0 5px rgba(86, 200, 255, 0.6);
@@ -269,6 +275,8 @@
   --warning-outline: rgba(224, 176, 74, 0.3);
   --success-outline: rgba(70, 192, 138, 0.3);
   --error-outline:   rgba(229, 105, 122, 0.3);
+  --accent-wash:     rgba(75, 88, 212, 0.11);
+  --success-wash:    rgba(70, 192, 138, 0.11);
   --glow-warning:    0 0 5px rgba(224, 176, 74, 0.4);
   --glow-success:    0 0 5px rgba(70, 192, 138, 0.7);
   --glow-accent:     0 0 5px rgba(75, 88, 212, 0.6);