@skaile/brand 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skaile/brand",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Skaile brand: design tokens, CSS custom properties, Tailwind preset, and brand assets",
   "license": "UNLICENSED",
   "type": "module",

package/src/css/theme.css

@@ -49,7 +49,10 @@
   --secondary-foreground: hsl(0 0% 40%);
   --muted: hsl(0 0% 96%);
   --muted-foreground: hsl(0 0% 40%);
-  --accent: hsl(0 0% 96%);
+  /* The hover ground for every menu item in the shell: DropdownMenuItem
+     highlights with focus:bg-accent and nothing else. At 96% it sat 1.09:1
+     from --popover and was invisible. */
+  --accent: hsl(0 0% 88%);
   --accent-foreground: hsl(0 0% 11%);
   --destructive: hsl(0 72.2% 50.6%);
   --destructive-foreground: hsl(0 0% 100%);
@@ -120,13 +123,18 @@
   --tab-inactive-hover: hsl(0 0% 87%);
   /* Sampled from the design, and the one shell value both themes share. */
   --tab-unread: #005eff;
-  --control-surface: hsl(0 0% 88%);
-  --control-surface-hover: hsl(0 0% 84%);
+  /* The well has to read on the deepest ground it is mounted on, not just on
+     the header it was drawn against. At 88% it was 1.08:1 from the header and
+     1.03:1 from --sidebar, where the mode toggle sits — so the toggle had no
+     container at all. 82% sinks from both. */
+  --control-surface: hsl(0 0% 82%);
+  --control-surface-hover: hsl(0 0% 76%);
   --control-selected: hsl(0 0% 100%);
   /* Deliberately dimmer than --muted-foreground, and held at the 3:1 non-text
      floor against --control-surface — the design samples about 2.3:1, and this
-     is the one place we knowingly part from it. */
-  --control-icon: hsl(0 0% 49%);
+     is the one place we knowingly part from it. It moves with the track or the
+     floor breaks — 49% falls to 2.70:1 once --control-surface sinks. */
+  --control-icon: hsl(0 0% 45%);
   /* Stronger than --border against the same ground, because it is the only
      line the shell has left. */
   --content-border: hsl(0 0% 82%);
@@ -177,7 +185,10 @@
   --secondary-foreground: #f5f5f5;
   --muted: #2f2f2f;
   --muted-foreground: #a1a1a1;
-  --accent: #323131;
+  /* See the light block. It used to share #323131 with --border/--input,
+     which left the menu hover at 1.07:1; the two are unrelated roles that
+     collided by accident. This is --tab-inactive-hover, so no new grey. */
+  --accent: #4a4a4a;
   --accent-foreground: #f5f5f5;
   --destructive: hsl(0 84.2% 60.2%);
   --destructive-foreground: #ffffff;
@@ -237,13 +248,21 @@
   --tab-inactive-hover: #4a4a4a;
   /* The one shell value both themes share. */
   --tab-unread: #005eff;
-  --control-surface: #1a1919;
-  --control-surface-hover: #2a2929;
-  --control-selected: #343434;
+  /* Dark cannot sink. The well is mounted on two grounds: --background (#242424,
+     the toolbar) and --sidebar (#161515, the mode toggle). It cannot sit between
+     them without vanishing into one, and it cannot go under --sidebar — pure
+     black reaches only 1.15:1 there. So in dark the well inverts and lifts clear
+     of both. This is the grey --accent just vacated; no new grey enters.
+     Keep --popover (#2f2f2f) off this list of grounds: a control mounted inside
+     a menu would land 1.04:1 from it. None does today. */
+  --control-surface: #323131;
+  --control-surface-hover: #3e3e3e;
+  --control-selected: #484747;
   /* Deliberately dimmer than --muted-foreground, and held at the 3:1 non-text
      floor against --control-surface — the design samples about 2.3:1, and this
-     is the one place we knowingly part from it. */
-  --control-icon: #666666;
+     is the one place we knowingly part from it. It moves with the track or the
+     floor breaks — #666666 falls to 1.9:1 once --control-surface lifts. */
+  --control-icon: #7a7a7a;
   /* Stronger than --border against the same ground, because it is the only
      line the shell has left. */
   --content-border: #3e3e3e;

package/src/tokens.json

@@ -43,7 +43,7 @@
       "surface": "hsl(0 0% 100%)",
       "secondary": "hsl(0 0% 96%)",
       "muted": "hsl(0 0% 96%)",
-      "accent": "hsl(0 0% 96%)",
+      "accent": "hsl(0 0% 88%)",
       "surface-sunken": "hsl(0 0% 96%)",
       "foreground": "hsl(0 0% 11%)",
       "muted-foreground": "hsl(0 0% 40%)",
@@ -56,10 +56,10 @@
       "tab-inactive": "hsl(0 0% 82%)",
       "tab-inactive-hover": "hsl(0 0% 87%)",
       "tab-unread": "#005eff",
-      "control-surface": "hsl(0 0% 88%)",
-      "control-surface-hover": "hsl(0 0% 84%)",
+      "control-surface": "hsl(0 0% 82%)",
+      "control-surface-hover": "hsl(0 0% 76%)",
       "control-selected": "hsl(0 0% 100%)",
-      "control-icon": "hsl(0 0% 49%)",
+      "control-icon": "hsl(0 0% 45%)",
       "content-border": "hsl(0 0% 82%)",
       "sidebar-foreground": "hsl(0 0% 11%)",
       "sidebar-primary": "hsl(267 100% 50%)",
@@ -78,7 +78,7 @@
       "surface": "#2f2f2f",
       "secondary": "#2f2f2f",
       "muted": "#2f2f2f",
-      "accent": "#323131",
+      "accent": "#4a4a4a",
       "surface-sunken": "#161515",
       "foreground": "#f5f5f5",
       "muted-foreground": "#a1a1a1",
@@ -91,10 +91,10 @@
       "tab-inactive": "#3e3e3e",
       "tab-inactive-hover": "#4a4a4a",
       "tab-unread": "#005eff",
-      "control-surface": "#1a1919",
-      "control-surface-hover": "#2a2929",
-      "control-selected": "#343434",
-      "control-icon": "#666666",
+      "control-surface": "#323131",
+      "control-surface-hover": "#3e3e3e",
+      "control-selected": "#484747",
+      "control-icon": "#7a7a7a",
       "content-border": "#3e3e3e",
       "sidebar-foreground": "#f5f5f5",
       "sidebar-primary": "#7300ff",