@skaile/brand 0.4.0 → 0.5.0

package/package.json

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

package/src/css/theme.css

@@ -22,21 +22,25 @@
 :root,
 :root[data-theme="light"],
 .light {
-  --color-scheme: light;
+  /* The real property, not a custom one: this is what makes the UA paint
+     scrollbars, selects and date pickers to match the theme. */
+  color-scheme: light;
 
   /* Core palette */
-  /* The page is the lightest surface and a panel sits *into* it, not on it.
-     That direction is taken from the platform's dark design, and light follows
-     it so one sentence describes both themes. The 6-point page/panel gap is
-     the one the previous ramp used; only its sign changed. Neutral throughout,
-     as the design is: every grey here has zero saturation. */
-  --background: hsl(0 0% 100%);
+  /* Light lifts its panels off the page; dark sets them into it. The two
+     directions are deliberate and were chosen against renders of both: on a
+     dark ground a panel reads as a recess, on a light one it reads as a card,
+     and forcing one rule onto both gave light a set of grey wells. What the
+     themes do share is temperature — every grey here has zero saturation, as
+     the platform's dark design does. */
+  --background: hsl(0 0% 94%);
   --foreground: hsl(0 0% 11%);
-  --card: hsl(0 0% 94%);
+  --card: hsl(0 0% 100%);
   --card-foreground: hsl(0 0% 11%);
-  /* Level with the page, as stock shadcn light is: a popover is told apart by
-     its border and shadow, which every popover surface in ui-components
-     draws, not by its fill. */
+  /* Level with the panel, not with the page: a popover floats above the page,
+     so it takes the panel's surface. Card and popover being the same white is
+     deliberate and is what stock shadcn light does — not one of them left
+     un-bumped. */
   --popover: hsl(0 0% 100%);
   --popover-foreground: hsl(0 0% 11%);
   --primary: hsl(267 100% 50%);
@@ -55,12 +59,16 @@
   --border: hsl(0 0% 86%);
   --input: hsl(0 0% 86%);
   --ring: hsl(267 100% 50%);
-  /* Below the panel, as in dark: the strip recedes and an active tab rises out
-     of it. */
-  --tab-bar: hsl(0 0% 89%);
+  /* Below the page, so an active tab rises out of the strip and meets the
+     panel it belongs to. */
+  --tab-bar: hsl(0 0% 91%);
   /* The surface a panel's own content sinks into — the file viewer beside the
-     tree. Third step of the ramp, below the panel. */
-  --surface-sunken: hsl(0 0% 91%);
+     tree. One step below the panel, which here leaves it between the panel and
+     the page rather than below both, as in dark.
+     It happens to share 96% with --secondary/--muted/--accent above. That is a
+     coincidence of this ramp, not a coupling: those three style UI elements,
+     this one is a depth. Moving it need not move them. */
+  --surface-sunken: hsl(0 0% 96%);
 
   /* Skaile-specific */
   --color-success: hsl(161.4 93.5% 30.4%);
@@ -69,7 +77,7 @@
   --color-warning-foreground: hsl(0 0% 11%);
   --color-ai-accent: hsl(37.7 92.1% 50.2%);
   --color-primary-bright: hsl(267 100% 63%);
-  --color-surface: hsl(0 0% 96%);
+  --color-surface: hsl(0 0% 100%);
 
   /* Chart palette */
   --chart-1: hsl(267 100% 50%);
@@ -79,17 +87,50 @@
   --chart-5: hsl(161.4 93.5% 30.4%);
 
   /* Sidebar */
-  /* Tied to the page, as dark ties it. The sidebar is chrome, not a panel, so
-     it takes the ground the panels sit in. */
-  --sidebar: hsl(0 0% 100%);
+  /* Chrome recesses below the page rather than matching it, so the content
+     ground reads as the surface in front. Inferred: every screen of the shell
+     design is dark-only. */
+  --sidebar: hsl(0 0% 89%);
   --sidebar-foreground: hsl(0 0% 11%);
   --sidebar-primary: hsl(267 100% 50%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(267 100% 97%);
-  --sidebar-accent-foreground: hsl(267 100% 50%);
+  /* A plain grey lift off the sidebar ground, not a purple tint — that is what
+     the design's selected row is. shadcn's SidebarMenuButton binds hover and
+     active to this one token; separating the two is the consumer's job. */
+  --sidebar-accent: hsl(0 0% 96%);
+  --sidebar-accent-foreground: hsl(0 0% 11%);
   --sidebar-border: hsl(0 0% 86%);
   --sidebar-ring: hsl(267 100% 50%);
 
+  /* Shell — header, tabs, toolbar chrome */
+  /* Two ramps run in opposite directions on the same header: a tab lifts off
+     the header ground because it is a piece of the page pulled forward, a
+     control sinks into it because it is a well. Hence two families, not one. */
+  /* Inferred throughout — the shell design exists only in dark. */
+  /* White in both themes: a selection marker rather than a surface. */
+  --tab-active: hsl(0 0% 100%);
+  --tab-active-foreground: hsl(0 0% 11%);
+  /* Steps away from the header ground instead of toward the active tab, since
+     white is already spoken for at the top of this ramp: lifting into it left
+     inactive chrome at 1.06:1 against the header. */
+  /* No companion foreground: an inactive tab keeps --foreground at full
+     strength. Only the fill recedes, so the label stays as readable as the
+     active one. */
+  --tab-inactive: hsl(0 0% 82%);
+  --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%);
+  --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%);
+  /* Stronger than --border against the same ground, because it is the only
+     line the shell has left. */
+  --content-border: hsl(0 0% 82%);
+
   /* Typography */
   --font-sans: "Inter", sans-serif;
   --font-serif: "Plus Jakarta Sans", sans-serif;
@@ -118,7 +159,7 @@
 
 :root[data-theme="dark"],
 .dark {
-  --color-scheme: dark;
+  color-scheme: dark;
 
   /* Core palette — taken from the platform shell design, and no longer the
      website's canonical dark: that palette is blue-shifted and lifts a card
@@ -144,10 +185,9 @@
   --input: #323131;
   --ring: #7300ff;
   /* See the light block: the strip behind the page that the tab bar sits on.
-     It shares a value with --surface-sunken below, which is not a copy-paste:
-     both sit at the deepest step of the ramp, one behind the page and one
-     inside a panel. They are free to move apart. */
-  --tab-bar: #161515;
+     It used to share the deepest step with --surface-sunken; --sidebar has
+     since taken that step, and the strip now sits one above it. */
+  --tab-bar: #1f1e1e;
   /* The surface a panel's own content sinks into — the file viewer beside the
      tree. Third step of the ramp, below the panel. */
   --surface-sunken: #161515;
@@ -169,15 +209,45 @@
   --chart-5: #10b981;
 
   /* Sidebar */
-  --sidebar: #242424;
+  /* Chrome recesses below the page rather than matching it, so the content
+     ground reads as the surface in front. Sampled from the shell design; it
+     lands on --surface-sunken's value, one behind the page and one inside a
+     panel, and the two are free to move apart. */
+  --sidebar: #161515;
   --sidebar-foreground: #f5f5f5;
   --sidebar-primary: #7300ff;
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #1b1a3f;
-  --sidebar-accent-foreground: #9b40ff;
+  /* A plain grey lift off the sidebar ground, not a purple tint — that is what
+     the design's selected row is. shadcn's SidebarMenuButton binds hover and
+     active to this one token; separating the two is the consumer's job. */
+  --sidebar-accent: #1f1f1f;
+  --sidebar-accent-foreground: #f5f5f5;
   --sidebar-border: #323131;
   --sidebar-ring: #7300ff;
 
+  /* Shell — header, tabs, toolbar chrome */
+  /* Two ramps run in opposite directions on the same header: a tab lifts off
+     the header ground because it is a piece of the page pulled forward, a
+     control sinks into it because it is a well. Hence two families, not one. */
+  /* Sampled from the shell design throughout. */
+  /* White in both themes: a selection marker rather than a surface. */
+  --tab-active: #ffffff;
+  --tab-active-foreground: hsl(0 0% 11%);
+  --tab-inactive: #3e3e3e;
+  --tab-inactive-hover: #4a4a4a;
+  /* The one shell value both themes share. */
+  --tab-unread: #005eff;
+  --control-surface: #1a1919;
+  --control-surface-hover: #2a2929;
+  --control-selected: #343434;
+  /* 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;
+  /* Stronger than --border against the same ground, because it is the only
+     line the shell has left. */
+  --content-border: #3e3e3e;
+
   /* Typography */
   --font-sans: "Inter", sans-serif;
   --font-serif: "Plus Jakarta Sans", sans-serif;

package/src/tokens.json

@@ -34,26 +34,45 @@
       "text-dim": "#777777"
     },
     "platform-light": {
-      "background": "hsl(0 0% 100%)",
-      "tab-bar": "hsl(0 0% 89%)",
-      "card": "hsl(0 0% 94%)",
+      "background": "hsl(0 0% 94%)",
+      "tab-bar": "hsl(0 0% 91%)",
+      "tab-active": "hsl(0 0% 100%)",
+      "tab-active-foreground": "hsl(0 0% 11%)",
+      "card": "hsl(0 0% 100%)",
       "popover": "hsl(0 0% 100%)",
-      "surface": "hsl(0 0% 96%)",
+      "surface": "hsl(0 0% 100%)",
       "secondary": "hsl(0 0% 96%)",
       "muted": "hsl(0 0% 96%)",
       "accent": "hsl(0 0% 96%)",
-      "surface-sunken": "hsl(0 0% 91%)",
+      "surface-sunken": "hsl(0 0% 96%)",
       "foreground": "hsl(0 0% 11%)",
       "muted-foreground": "hsl(0 0% 40%)",
       "border": "hsl(0 0% 86%)",
       "primary": "hsl(267 100% 50%)",
       "primary-bright": "hsl(267 100% 63%)",
       "ring": "hsl(267 100% 50%)",
-      "sidebar-accent": "hsl(267 100% 97%)"
+      "sidebar": "hsl(0 0% 89%)",
+      "sidebar-accent": "hsl(0 0% 96%)",
+      "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-selected": "hsl(0 0% 100%)",
+      "control-icon": "hsl(0 0% 49%)",
+      "content-border": "hsl(0 0% 82%)",
+      "sidebar-foreground": "hsl(0 0% 11%)",
+      "sidebar-primary": "hsl(267 100% 50%)",
+      "sidebar-primary-foreground": "hsl(0 0% 100%)",
+      "sidebar-accent-foreground": "hsl(0 0% 11%)",
+      "sidebar-border": "hsl(0 0% 86%)",
+      "sidebar-ring": "hsl(267 100% 50%)"
     },
     "platform-dark": {
       "background": "#242424",
-      "tab-bar": "#161515",
+      "tab-bar": "#1f1e1e",
+      "tab-active": "#ffffff",
+      "tab-active-foreground": "hsl(0 0% 11%)",
       "card": "#1a1919",
       "popover": "#2f2f2f",
       "surface": "#2f2f2f",
@@ -67,7 +86,22 @@
       "primary": "#7300ff",
       "primary-bright": "#9b40ff",
       "ring": "#7300ff",
-      "sidebar-accent": "#1b1a3f"
+      "sidebar": "#161515",
+      "sidebar-accent": "#1f1f1f",
+      "tab-inactive": "#3e3e3e",
+      "tab-inactive-hover": "#4a4a4a",
+      "tab-unread": "#005eff",
+      "control-surface": "#1a1919",
+      "control-surface-hover": "#2a2929",
+      "control-selected": "#343434",
+      "control-icon": "#666666",
+      "content-border": "#3e3e3e",
+      "sidebar-foreground": "#f5f5f5",
+      "sidebar-primary": "#7300ff",
+      "sidebar-primary-foreground": "#ffffff",
+      "sidebar-accent-foreground": "#f5f5f5",
+      "sidebar-border": "#323131",
+      "sidebar-ring": "#7300ff"
     }
   }
 }