@skaile/brand 0.1.0 → 0.3.0

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@skaile/brand",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Skaile brand: design tokens, CSS custom properties, Tailwind preset, and brand assets",
   "license": "UNLICENSED",
   "type": "module",
-  "publishConfig": { "access": "public" },
+  "publishConfig": {
+    "access": "public"
+  },
   "exports": {
     ".": "./src/index.ts",
     "./tokens": "./src/tokens.json",
@@ -13,12 +15,21 @@
     "./tailwind-preset": "./src/tailwind-preset.ts",
     "./assets/*": "./assets/*"
   },
-  "files": ["src", "assets", "!src/**/*.test.ts"],
+  "files": [
+    "src",
+    "assets",
+    "!src/**/*.test.ts"
+  ],
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "changeset publish"
   },
   "devDependencies": {
+    "@changesets/changelog-github": "^0.7.0",
+    "@changesets/cli": "^2.27.0",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4"
   }

package/src/css/brand.css

@@ -21,9 +21,7 @@
   --color-text-muted: #a1a1aa;
   --color-text-dim: #777777;
 
-  /* brand — signature orange → magenta → purple gradient */
-  --color-brand-orange: #ff5d01;
-  --color-brand-pink: #d8377e;
+  /* brand — mono-violet on dark */
   --color-brand: #7300ff;
   --color-brand-purple: #1b1a3f;
 
@@ -62,18 +60,7 @@
   --color-user-7-border: #ca4ea9;
 
   /* ── gradients ──────────────────────────────────────────────────────── */
-  --gradient-brand: linear-gradient(
-    135deg,
-    var(--color-brand-orange) 0%,
-    var(--color-brand-pink) 50%,
-    var(--color-brand) 100%
-  );
-  --gradient-brand-soft: linear-gradient(
-    135deg,
-    rgba(255, 93, 1, 0.18) 0%,
-    rgba(216, 55, 126, 0.18) 50%,
-    rgba(188, 82, 238, 0.18) 100%
-  );
+  /* ambient page backdrop only — not a brand mark */
   --gradient-fade-bg: radial-gradient(
     71.92% 191.69% at 50% 50%,
     var(--color-brand-purple) 0%,

package/src/css/theme.css

@@ -4,7 +4,7 @@
  * Source of truth: tokens.json (from brand design in Figma)
  *
  * Usage:
- *   @import '@skaile/theme/css';
+ *   @import '@skaile/brand/theme.css';
  *
  * Provides light and dark mode via .light / .dark classes on <html>.
  * Falls back to light mode on :root.
@@ -23,7 +23,12 @@
   --color-scheme: light;
 
   /* Core palette */
-  --background: hsl(210 40% 98%);
+  /* The page sits below the panel, not level with it: the redesign sets each
+     panel as a block on this ground (platform ui-redesign.md 5.2), and a card
+     two points of lightness from its background is not a block. Dark separates
+     the two by ~34% relative lightness; this is the same step, not the same
+     absolute distance. */
+  --background: hsl(214 32% 94%);
   --foreground: hsl(222 47% 11%);
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(222 47% 11%);
@@ -39,9 +44,14 @@
   --accent-foreground: hsl(222 47% 11%);
   --destructive: hsl(0 72.2% 50.6%);
   --destructive-foreground: hsl(0 0% 100%);
-  --border: hsl(214 32% 91%);
-  --input: hsl(214 32% 91%);
+  /* Darker than it was, and forced rather than chosen: at 91% these were
+     brighter than the page above, so every border dissolved into the ground. */
+  --border: hsl(214 28% 86%);
+  --input: hsl(214 28% 86%);
   --ring: hsl(267 100% 50%);
+  /* The strip the tab bar sits on, behind the page, so an active tab rises out
+     of it and meets the panel below. */
+  --tab-bar: hsl(214 32% 89%);
 
   /* Skaile-specific */
   --color-success: hsl(161.4 93.5% 30.4%);
@@ -60,13 +70,15 @@
   --chart-5: hsl(161.4 93.5% 30.4%);
 
   /* Sidebar */
-  --sidebar: hsl(0 0% 100%);
+  /* Tied to the page, as dark already ties it. Left at white it reads as one
+     more panel, which is the one thing the sidebar is not. */
+  --sidebar: hsl(214 32% 94%);
   --sidebar-foreground: hsl(222 47% 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%);
-  --sidebar-border: hsl(214 32% 91%);
+  --sidebar-border: hsl(214 28% 86%);
   --sidebar-ring: hsl(267 100% 50%);
 
   /* Typography */
@@ -119,6 +131,8 @@
   --border: #2e303a;
   --input: #2e303a;
   --ring: #7300ff;
+  /* See the light block: the strip behind the page that the tab bar sits on. */
+  --tab-bar: #0e1015;
 
   /* Skaile-specific */
   --color-success: hsl(160.1 84.1% 39.4%);

package/src/tokens.json

@@ -2,8 +2,7 @@
   "brand": {
     "purple": "#7300ff",
     "purple_bright": "#9b40ff",
-    "purple_soft": "#bc52ee",
-    "gradient": { "from": "#ff5d01", "via": "#d8377e", "to": "#7300ff" }
+    "purple_soft": "#bc52ee"
   },
   "fonts": {
     "heading": "Plus Jakarta Sans",
@@ -26,6 +25,7 @@
     },
     "platform-dark": {
       "background": "#13151a",
+      "tab-bar": "#0e1015",
       "card": "#1a1c22",
       "popover": "#1a1c22",
       "surface": "#23262d",