@skaile/brand 0.3.0 → 0.4.1

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 +83 -59
  3. package/src/tokens.json +42 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skaile/brand",
3
- "version": "0.3.0",
3
+ "version": "0.4.1",
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,41 +25,54 @@
23
25
  --color-scheme: light;
24
26
 
25
27
  /* Core palette */
26
- /* The page sits below the panel, not level with it: the redesign sets each
27
- panel as a block on this ground (platform ui-redesign.md 5.2), and a card
28
- two points of lightness from its background is not a block. Dark separates
29
- the two by ~34% relative lightness; this is the same step, not the same
30
- absolute distance. */
31
- --background: hsl(214 32% 94%);
32
- --foreground: hsl(222 47% 11%);
28
+ /* Light lifts its panels off the page; dark sets them into it. The two
29
+ directions are deliberate and were chosen against renders of both: on a
30
+ dark ground a panel reads as a recess, on a light one it reads as a card,
31
+ and forcing one rule onto both gave light a set of grey wells. What the
32
+ themes do share is temperature — every grey here has zero saturation, as
33
+ the platform's dark design does. */
34
+ --background: hsl(0 0% 94%);
35
+ --foreground: hsl(0 0% 11%);
33
36
  --card: hsl(0 0% 100%);
34
- --card-foreground: hsl(222 47% 11%);
37
+ --card-foreground: hsl(0 0% 11%);
38
+ /* Level with the panel, not with the page: a popover floats above the page,
39
+ so it takes the panel's surface. Card and popover being the same white is
40
+ deliberate and is what stock shadcn light does — not one of them left
41
+ un-bumped. */
35
42
  --popover: hsl(0 0% 100%);
36
- --popover-foreground: hsl(222 47% 11%);
43
+ --popover-foreground: hsl(0 0% 11%);
37
44
  --primary: hsl(267 100% 50%);
38
45
  --primary-foreground: hsl(0 0% 100%);
39
- --secondary: hsl(210 40% 96%);
40
- --secondary-foreground: hsl(215 16% 47%);
41
- --muted: hsl(210 40% 96%);
42
- --muted-foreground: hsl(215 16% 47%);
43
- --accent: hsl(210 40% 96%);
44
- --accent-foreground: hsl(222 47% 11%);
46
+ --secondary: hsl(0 0% 96%);
47
+ --secondary-foreground: hsl(0 0% 40%);
48
+ --muted: hsl(0 0% 96%);
49
+ --muted-foreground: hsl(0 0% 40%);
50
+ --accent: hsl(0 0% 96%);
51
+ --accent-foreground: hsl(0 0% 11%);
45
52
  --destructive: hsl(0 72.2% 50.6%);
46
53
  --destructive-foreground: hsl(0 0% 100%);
47
- /* Darker than it was, and forced rather than chosen: at 91% these were
48
- brighter than the page above, so every border dissolved into the ground. */
49
- --border: hsl(214 28% 86%);
50
- --input: hsl(214 28% 86%);
54
+ /* The design draws no borders at all — it separates surfaces by step and by
55
+ gap. These stay for the components that still ask for one, dark enough to
56
+ read against a white page. */
57
+ --border: hsl(0 0% 86%);
58
+ --input: hsl(0 0% 86%);
51
59
  --ring: hsl(267 100% 50%);
52
- /* The strip the tab bar sits on, behind the page, so an active tab rises out
53
- of it and meets the panel below. */
54
- --tab-bar: hsl(214 32% 89%);
60
+ /* Below the page, so an active tab rises out of the strip and meets the
61
+ panel it belongs to. */
62
+ --tab-bar: hsl(0 0% 89%);
63
+ /* The surface a panel's own content sinks into — the file viewer beside the
64
+ tree. One step below the panel, which here leaves it between the panel and
65
+ the page rather than below both, as in dark.
66
+ It happens to share 96% with --secondary/--muted/--accent above. That is a
67
+ coincidence of this ramp, not a coupling: those three style UI elements,
68
+ this one is a depth. Moving it need not move them. */
69
+ --surface-sunken: hsl(0 0% 96%);
55
70
 
56
71
  /* Skaile-specific */
57
72
  --color-success: hsl(161.4 93.5% 30.4%);
58
73
  --color-success-foreground: hsl(0 0% 100%);
59
74
  --color-warning: hsl(32.1 94.6% 43.7%);
60
- --color-warning-foreground: hsl(222 47% 11%);
75
+ --color-warning-foreground: hsl(0 0% 11%);
61
76
  --color-ai-accent: hsl(37.7 92.1% 50.2%);
62
77
  --color-primary-bright: hsl(267 100% 63%);
63
78
  --color-surface: hsl(0 0% 100%);
@@ -70,15 +85,15 @@
70
85
  --chart-5: hsl(161.4 93.5% 30.4%);
71
86
 
72
87
  /* Sidebar */
73
- /* Tied to the page, as dark already ties it. Left at white it reads as one
74
- more panel, which is the one thing the sidebar is not. */
75
- --sidebar: hsl(214 32% 94%);
76
- --sidebar-foreground: hsl(222 47% 11%);
88
+ /* Tied to the page, as dark ties it. The sidebar is chrome, not a panel, so
89
+ it takes the ground the panels sit on. */
90
+ --sidebar: hsl(0 0% 94%);
91
+ --sidebar-foreground: hsl(0 0% 11%);
77
92
  --sidebar-primary: hsl(267 100% 50%);
78
93
  --sidebar-primary-foreground: hsl(0 0% 100%);
79
94
  --sidebar-accent: hsl(267 100% 97%);
80
95
  --sidebar-accent-foreground: hsl(267 100% 50%);
81
- --sidebar-border: hsl(214 28% 86%);
96
+ --sidebar-border: hsl(0 0% 86%);
82
97
  --sidebar-ring: hsl(267 100% 50%);
83
98
 
84
99
  /* Typography */
@@ -93,14 +108,14 @@
93
108
  --spacing: 0.25rem;
94
109
 
95
110
  /* Shadows */
96
- --shadow-2xs: 0 1px 2px 0px hsl(222 47% 11% / 0.03);
97
- --shadow-xs: 0 1px 2px 0px hsl(222 47% 11% / 0.05);
98
- --shadow-sm: 0 1px 2px 0px hsl(222 47% 11% / 0.05);
99
- --shadow: 0 4px 6px 0px hsl(222 47% 11% / 0.07);
100
- --shadow-md: 0 4px 6px 0px hsl(222 47% 11% / 0.07);
101
- --shadow-lg: 0 10px 15px 0px hsl(222 47% 11% / 0.1);
102
- --shadow-xl: 0 20px 25px -5px hsl(222 47% 11% / 0.1);
103
- --shadow-2xl: 0 25px 50px -12px hsl(222 47% 11% / 0.25);
111
+ --shadow-2xs: 0 1px 2px 0px hsl(0 0% 11% / 0.03);
112
+ --shadow-xs: 0 1px 2px 0px hsl(0 0% 11% / 0.05);
113
+ --shadow-sm: 0 1px 2px 0px hsl(0 0% 11% / 0.05);
114
+ --shadow: 0 4px 6px 0px hsl(0 0% 11% / 0.07);
115
+ --shadow-md: 0 4px 6px 0px hsl(0 0% 11% / 0.07);
116
+ --shadow-lg: 0 10px 15px 0px hsl(0 0% 11% / 0.1);
117
+ --shadow-xl: 0 20px 25px -5px hsl(0 0% 11% / 0.1);
118
+ --shadow-2xl: 0 25px 50px -12px hsl(0 0% 11% / 0.25);
104
119
  }
105
120
 
106
121
  /* ---------------------------------------------------------------------------
@@ -111,37 +126,46 @@
111
126
  .dark {
112
127
  --color-scheme: dark;
113
128
 
114
- /* Core palette — adopted from the website (dev/marketing) canonical dark */
115
- --background: #13151a;
116
- --foreground: #f4f4f5;
117
- --card: #1a1c22;
118
- --card-foreground: #f4f4f5;
119
- --popover: #1a1c22;
120
- --popover-foreground: #f4f4f5;
129
+ /* Core palette — taken from the platform shell design, and no longer the
130
+ website's canonical dark: that palette is blue-shifted and lifts a card
131
+ above its page, where this one is neutral and sets a panel into it.
132
+ `marketing-dark` in tokens.json still carries the website values. */
133
+ --background: #242424;
134
+ --foreground: #f5f5f5;
135
+ --card: #1a1919;
136
+ --card-foreground: #f5f5f5;
137
+ --popover: #2f2f2f;
138
+ --popover-foreground: #f5f5f5;
121
139
  --primary: #7300ff;
122
140
  --primary-foreground: #ffffff;
123
- --secondary: #23262d;
124
- --secondary-foreground: #f4f4f5;
125
- --muted: #1a1c22;
126
- --muted-foreground: #a1a1aa;
127
- --accent: #2a2d36;
128
- --accent-foreground: #f4f4f5;
141
+ --secondary: #2f2f2f;
142
+ --secondary-foreground: #f5f5f5;
143
+ --muted: #2f2f2f;
144
+ --muted-foreground: #a1a1a1;
145
+ --accent: #323131;
146
+ --accent-foreground: #f5f5f5;
129
147
  --destructive: hsl(0 84.2% 60.2%);
130
148
  --destructive-foreground: #ffffff;
131
- --border: #2e303a;
132
- --input: #2e303a;
149
+ --border: #323131;
150
+ --input: #323131;
133
151
  --ring: #7300ff;
134
- /* See the light block: the strip behind the page that the tab bar sits on. */
135
- --tab-bar: #0e1015;
152
+ /* See the light block: the strip behind the page that the tab bar sits on.
153
+ It shares a value with --surface-sunken below, which is not a copy-paste:
154
+ both sit at the deepest step of the ramp, one behind the page and one
155
+ inside a panel. They are free to move apart. */
156
+ --tab-bar: #161515;
157
+ /* The surface a panel's own content sinks into — the file viewer beside the
158
+ tree. Third step of the ramp, below the panel. */
159
+ --surface-sunken: #161515;
136
160
 
137
161
  /* Skaile-specific */
138
162
  --color-success: hsl(160.1 84.1% 39.4%);
139
163
  --color-success-foreground: #ffffff;
140
164
  --color-warning: hsl(37.7 92.1% 50.2%);
141
- --color-warning-foreground: #13151a;
165
+ --color-warning-foreground: #242424;
142
166
  --color-ai-accent: hsl(43.3 96.4% 56.3%);
143
167
  --color-primary-bright: #9b40ff;
144
- --color-surface: #23262d;
168
+ --color-surface: #2f2f2f;
145
169
 
146
170
  /* Chart palette */
147
171
  --chart-1: #7300ff;
@@ -151,13 +175,13 @@
151
175
  --chart-5: #10b981;
152
176
 
153
177
  /* Sidebar */
154
- --sidebar: #13151a;
155
- --sidebar-foreground: #f4f4f5;
178
+ --sidebar: #242424;
179
+ --sidebar-foreground: #f5f5f5;
156
180
  --sidebar-primary: #7300ff;
157
181
  --sidebar-primary-foreground: #ffffff;
158
182
  --sidebar-accent: #1b1a3f;
159
183
  --sidebar-accent-foreground: #9b40ff;
160
- --sidebar-border: #2e303a;
184
+ --sidebar-border: #323131;
161
185
  --sidebar-ring: #7300ff;
162
186
 
163
187
  /* 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,18 +33,37 @@
23
33
  "text-muted": "#a1a1aa",
24
34
  "text-dim": "#777777"
25
35
  },
36
+ "platform-light": {
37
+ "background": "hsl(0 0% 94%)",
38
+ "tab-bar": "hsl(0 0% 89%)",
39
+ "card": "hsl(0 0% 100%)",
40
+ "popover": "hsl(0 0% 100%)",
41
+ "surface": "hsl(0 0% 100%)",
42
+ "secondary": "hsl(0 0% 96%)",
43
+ "muted": "hsl(0 0% 96%)",
44
+ "accent": "hsl(0 0% 96%)",
45
+ "surface-sunken": "hsl(0 0% 96%)",
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
- "tab-bar": "#0e1015",
29
- "card": "#1a1c22",
30
- "popover": "#1a1c22",
31
- "surface": "#23262d",
32
- "secondary": "#23262d",
33
- "muted": "#1a1c22",
34
- "accent": "#2a2d36",
35
- "foreground": "#f4f4f5",
36
- "muted-foreground": "#a1a1aa",
37
- "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",
38
67
  "primary": "#7300ff",
39
68
  "primary-bright": "#9b40ff",
40
69
  "ring": "#7300ff",