@skaile/brand 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/css/theme.css +78 -46
  3. package/src/tokens.json +42 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skaile/brand",
3
- "version": "0.2.0",
3
+ "version": "0.4.0",
4
4
  "description": "Skaile brand: design tokens, CSS custom properties, Tailwind preset, and brand assets",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
package/src/css/theme.css CHANGED
@@ -10,7 +10,9 @@
10
10
  * Falls back to light mode on :root.
11
11
  *
12
12
  * Brand color: #7300FF (Skaile purple)
13
- * Dark mode adopts the website (dev/marketing) canonical palette; light mode preserved.
13
+ * The platform palettes (`platform-light`, `platform-dark` in tokens.json) come
14
+ * from the platform shell design. They are no longer the website's canonical
15
+ * dark, which `marketing-dark` still carries.
14
16
  */
15
17
 
16
18
  /* ---------------------------------------------------------------------------
@@ -23,34 +25,51 @@
23
25
  --color-scheme: light;
24
26
 
25
27
  /* Core palette */
26
- --background: hsl(210 40% 98%);
27
- --foreground: hsl(222 47% 11%);
28
- --card: hsl(0 0% 100%);
29
- --card-foreground: hsl(222 47% 11%);
28
+ /* The page is the lightest surface and a panel sits *into* it, not on it.
29
+ That direction is taken from the platform's dark design, and light follows
30
+ it so one sentence describes both themes. The 6-point page/panel gap is
31
+ the one the previous ramp used; only its sign changed. Neutral throughout,
32
+ as the design is: every grey here has zero saturation. */
33
+ --background: hsl(0 0% 100%);
34
+ --foreground: hsl(0 0% 11%);
35
+ --card: hsl(0 0% 94%);
36
+ --card-foreground: hsl(0 0% 11%);
37
+ /* Level with the page, as stock shadcn light is: a popover is told apart by
38
+ its border and shadow, which every popover surface in ui-components
39
+ draws, not by its fill. */
30
40
  --popover: hsl(0 0% 100%);
31
- --popover-foreground: hsl(222 47% 11%);
41
+ --popover-foreground: hsl(0 0% 11%);
32
42
  --primary: hsl(267 100% 50%);
33
43
  --primary-foreground: hsl(0 0% 100%);
34
- --secondary: hsl(210 40% 96%);
35
- --secondary-foreground: hsl(215 16% 47%);
36
- --muted: hsl(210 40% 96%);
37
- --muted-foreground: hsl(215 16% 47%);
38
- --accent: hsl(210 40% 96%);
39
- --accent-foreground: hsl(222 47% 11%);
44
+ --secondary: hsl(0 0% 96%);
45
+ --secondary-foreground: hsl(0 0% 40%);
46
+ --muted: hsl(0 0% 96%);
47
+ --muted-foreground: hsl(0 0% 40%);
48
+ --accent: hsl(0 0% 96%);
49
+ --accent-foreground: hsl(0 0% 11%);
40
50
  --destructive: hsl(0 72.2% 50.6%);
41
51
  --destructive-foreground: hsl(0 0% 100%);
42
- --border: hsl(214 32% 91%);
43
- --input: hsl(214 32% 91%);
52
+ /* The design draws no borders at all — it separates surfaces by step and by
53
+ gap. These stay for the components that still ask for one, dark enough to
54
+ read against a white page. */
55
+ --border: hsl(0 0% 86%);
56
+ --input: hsl(0 0% 86%);
44
57
  --ring: hsl(267 100% 50%);
58
+ /* Below the panel, as in dark: the strip recedes and an active tab rises out
59
+ of it. */
60
+ --tab-bar: hsl(0 0% 89%);
61
+ /* The surface a panel's own content sinks into — the file viewer beside the
62
+ tree. Third step of the ramp, below the panel. */
63
+ --surface-sunken: hsl(0 0% 91%);
45
64
 
46
65
  /* Skaile-specific */
47
66
  --color-success: hsl(161.4 93.5% 30.4%);
48
67
  --color-success-foreground: hsl(0 0% 100%);
49
68
  --color-warning: hsl(32.1 94.6% 43.7%);
50
- --color-warning-foreground: hsl(222 47% 11%);
69
+ --color-warning-foreground: hsl(0 0% 11%);
51
70
  --color-ai-accent: hsl(37.7 92.1% 50.2%);
52
71
  --color-primary-bright: hsl(267 100% 63%);
53
- --color-surface: hsl(0 0% 100%);
72
+ --color-surface: hsl(0 0% 96%);
54
73
 
55
74
  /* Chart palette */
56
75
  --chart-1: hsl(267 100% 50%);
@@ -60,13 +79,15 @@
60
79
  --chart-5: hsl(161.4 93.5% 30.4%);
61
80
 
62
81
  /* Sidebar */
82
+ /* Tied to the page, as dark ties it. The sidebar is chrome, not a panel, so
83
+ it takes the ground the panels sit in. */
63
84
  --sidebar: hsl(0 0% 100%);
64
- --sidebar-foreground: hsl(222 47% 11%);
85
+ --sidebar-foreground: hsl(0 0% 11%);
65
86
  --sidebar-primary: hsl(267 100% 50%);
66
87
  --sidebar-primary-foreground: hsl(0 0% 100%);
67
88
  --sidebar-accent: hsl(267 100% 97%);
68
89
  --sidebar-accent-foreground: hsl(267 100% 50%);
69
- --sidebar-border: hsl(214 32% 91%);
90
+ --sidebar-border: hsl(0 0% 86%);
70
91
  --sidebar-ring: hsl(267 100% 50%);
71
92
 
72
93
  /* Typography */
@@ -81,14 +102,14 @@
81
102
  --spacing: 0.25rem;
82
103
 
83
104
  /* Shadows */
84
- --shadow-2xs: 0 1px 2px 0px hsl(222 47% 11% / 0.03);
85
- --shadow-xs: 0 1px 2px 0px hsl(222 47% 11% / 0.05);
86
- --shadow-sm: 0 1px 2px 0px hsl(222 47% 11% / 0.05);
87
- --shadow: 0 4px 6px 0px hsl(222 47% 11% / 0.07);
88
- --shadow-md: 0 4px 6px 0px hsl(222 47% 11% / 0.07);
89
- --shadow-lg: 0 10px 15px 0px hsl(222 47% 11% / 0.1);
90
- --shadow-xl: 0 20px 25px -5px hsl(222 47% 11% / 0.1);
91
- --shadow-2xl: 0 25px 50px -12px hsl(222 47% 11% / 0.25);
105
+ --shadow-2xs: 0 1px 2px 0px hsl(0 0% 11% / 0.03);
106
+ --shadow-xs: 0 1px 2px 0px hsl(0 0% 11% / 0.05);
107
+ --shadow-sm: 0 1px 2px 0px hsl(0 0% 11% / 0.05);
108
+ --shadow: 0 4px 6px 0px hsl(0 0% 11% / 0.07);
109
+ --shadow-md: 0 4px 6px 0px hsl(0 0% 11% / 0.07);
110
+ --shadow-lg: 0 10px 15px 0px hsl(0 0% 11% / 0.1);
111
+ --shadow-xl: 0 20px 25px -5px hsl(0 0% 11% / 0.1);
112
+ --shadow-2xl: 0 25px 50px -12px hsl(0 0% 11% / 0.25);
92
113
  }
93
114
 
94
115
  /* ---------------------------------------------------------------------------
@@ -99,35 +120,46 @@
99
120
  .dark {
100
121
  --color-scheme: dark;
101
122
 
102
- /* Core palette — adopted from the website (dev/marketing) canonical dark */
103
- --background: #13151a;
104
- --foreground: #f4f4f5;
105
- --card: #1a1c22;
106
- --card-foreground: #f4f4f5;
107
- --popover: #1a1c22;
108
- --popover-foreground: #f4f4f5;
123
+ /* Core palette — taken from the platform shell design, and no longer the
124
+ website's canonical dark: that palette is blue-shifted and lifts a card
125
+ above its page, where this one is neutral and sets a panel into it.
126
+ `marketing-dark` in tokens.json still carries the website values. */
127
+ --background: #242424;
128
+ --foreground: #f5f5f5;
129
+ --card: #1a1919;
130
+ --card-foreground: #f5f5f5;
131
+ --popover: #2f2f2f;
132
+ --popover-foreground: #f5f5f5;
109
133
  --primary: #7300ff;
110
134
  --primary-foreground: #ffffff;
111
- --secondary: #23262d;
112
- --secondary-foreground: #f4f4f5;
113
- --muted: #1a1c22;
114
- --muted-foreground: #a1a1aa;
115
- --accent: #2a2d36;
116
- --accent-foreground: #f4f4f5;
135
+ --secondary: #2f2f2f;
136
+ --secondary-foreground: #f5f5f5;
137
+ --muted: #2f2f2f;
138
+ --muted-foreground: #a1a1a1;
139
+ --accent: #323131;
140
+ --accent-foreground: #f5f5f5;
117
141
  --destructive: hsl(0 84.2% 60.2%);
118
142
  --destructive-foreground: #ffffff;
119
- --border: #2e303a;
120
- --input: #2e303a;
143
+ --border: #323131;
144
+ --input: #323131;
121
145
  --ring: #7300ff;
146
+ /* See the light block: the strip behind the page that the tab bar sits on.
147
+ It shares a value with --surface-sunken below, which is not a copy-paste:
148
+ both sit at the deepest step of the ramp, one behind the page and one
149
+ inside a panel. They are free to move apart. */
150
+ --tab-bar: #161515;
151
+ /* The surface a panel's own content sinks into — the file viewer beside the
152
+ tree. Third step of the ramp, below the panel. */
153
+ --surface-sunken: #161515;
122
154
 
123
155
  /* Skaile-specific */
124
156
  --color-success: hsl(160.1 84.1% 39.4%);
125
157
  --color-success-foreground: #ffffff;
126
158
  --color-warning: hsl(37.7 92.1% 50.2%);
127
- --color-warning-foreground: #13151a;
159
+ --color-warning-foreground: #242424;
128
160
  --color-ai-accent: hsl(43.3 96.4% 56.3%);
129
161
  --color-primary-bright: #9b40ff;
130
- --color-surface: #23262d;
162
+ --color-surface: #2f2f2f;
131
163
 
132
164
  /* Chart palette */
133
165
  --chart-1: #7300ff;
@@ -137,13 +169,13 @@
137
169
  --chart-5: #10b981;
138
170
 
139
171
  /* Sidebar */
140
- --sidebar: #13151a;
141
- --sidebar-foreground: #f4f4f5;
172
+ --sidebar: #242424;
173
+ --sidebar-foreground: #f5f5f5;
142
174
  --sidebar-primary: #7300ff;
143
175
  --sidebar-primary-foreground: #ffffff;
144
176
  --sidebar-accent: #1b1a3f;
145
177
  --sidebar-accent-foreground: #9b40ff;
146
- --sidebar-border: #2e303a;
178
+ --sidebar-border: #323131;
147
179
  --sidebar-ring: #7300ff;
148
180
 
149
181
  /* Typography */
package/src/tokens.json CHANGED
@@ -9,8 +9,18 @@
9
9
  "body": "Inter",
10
10
  "mono": "JetBrains Mono"
11
11
  },
12
- "radius": { "sm": "4px", "DEFAULT": "8px", "lg": "12px", "xl": "20px", "full": "9999px" },
13
- "status": { "success": "#10b981", "warning": "#f59e0b", "error": "#ef4444" },
12
+ "radius": {
13
+ "sm": "4px",
14
+ "DEFAULT": "8px",
15
+ "lg": "12px",
16
+ "xl": "20px",
17
+ "full": "9999px"
18
+ },
19
+ "status": {
20
+ "success": "#10b981",
21
+ "warning": "#f59e0b",
22
+ "error": "#ef4444"
23
+ },
14
24
  "palettes": {
15
25
  "marketing-dark": {
16
26
  "bg": "#13151a",
@@ -23,17 +33,37 @@
23
33
  "text-muted": "#a1a1aa",
24
34
  "text-dim": "#777777"
25
35
  },
36
+ "platform-light": {
37
+ "background": "hsl(0 0% 100%)",
38
+ "tab-bar": "hsl(0 0% 89%)",
39
+ "card": "hsl(0 0% 94%)",
40
+ "popover": "hsl(0 0% 100%)",
41
+ "surface": "hsl(0 0% 96%)",
42
+ "secondary": "hsl(0 0% 96%)",
43
+ "muted": "hsl(0 0% 96%)",
44
+ "accent": "hsl(0 0% 96%)",
45
+ "surface-sunken": "hsl(0 0% 91%)",
46
+ "foreground": "hsl(0 0% 11%)",
47
+ "muted-foreground": "hsl(0 0% 40%)",
48
+ "border": "hsl(0 0% 86%)",
49
+ "primary": "hsl(267 100% 50%)",
50
+ "primary-bright": "hsl(267 100% 63%)",
51
+ "ring": "hsl(267 100% 50%)",
52
+ "sidebar-accent": "hsl(267 100% 97%)"
53
+ },
26
54
  "platform-dark": {
27
- "background": "#13151a",
28
- "card": "#1a1c22",
29
- "popover": "#1a1c22",
30
- "surface": "#23262d",
31
- "secondary": "#23262d",
32
- "muted": "#1a1c22",
33
- "accent": "#2a2d36",
34
- "foreground": "#f4f4f5",
35
- "muted-foreground": "#a1a1aa",
36
- "border": "#2e303a",
55
+ "background": "#242424",
56
+ "tab-bar": "#161515",
57
+ "card": "#1a1919",
58
+ "popover": "#2f2f2f",
59
+ "surface": "#2f2f2f",
60
+ "secondary": "#2f2f2f",
61
+ "muted": "#2f2f2f",
62
+ "accent": "#323131",
63
+ "surface-sunken": "#161515",
64
+ "foreground": "#f5f5f5",
65
+ "muted-foreground": "#a1a1a1",
66
+ "border": "#323131",
37
67
  "primary": "#7300ff",
38
68
  "primary-bright": "#9b40ff",
39
69
  "ring": "#7300ff",