@skaile/brand 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skaile/brand",
-  "version": "0.4.1",
+  "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,7 +22,9 @@
 :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 */
   /* Light lifts its panels off the page; dark sets them into it. The two
@@ -59,7 +61,7 @@
   --ring: hsl(267 100% 50%);
   /* Below the page, so an active tab rises out of the strip and meets the
      panel it belongs to. */
-  --tab-bar: hsl(0 0% 89%);
+  --tab-bar: hsl(0 0% 91%);
   /* The surface a panel's own content sinks into — the file viewer beside the
      tree. One step below the panel, which here leaves it between the panel and
      the page rather than below both, as in dark.
@@ -85,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 on. */
-  --sidebar: hsl(0 0% 94%);
+  /* 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;
@@ -124,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
@@ -150,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;
@@ -175,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

@@ -35,7 +35,9 @@
     },
     "platform-light": {
       "background": "hsl(0 0% 94%)",
-      "tab-bar": "hsl(0 0% 89%)",
+      "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% 100%)",
@@ -49,11 +51,28 @@
       "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"
     }
   }
 }