@skaile/brand 0.3.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 +79 -61
  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.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,44 +25,51 @@
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%);
33
- --card: hsl(0 0% 100%);
34
- --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. */
35
40
  --popover: hsl(0 0% 100%);
36
- --popover-foreground: hsl(222 47% 11%);
41
+ --popover-foreground: hsl(0 0% 11%);
37
42
  --primary: hsl(267 100% 50%);
38
43
  --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%);
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%);
45
50
  --destructive: hsl(0 72.2% 50.6%);
46
51
  --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%);
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%);
51
57
  --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%);
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%);
55
64
 
56
65
  /* Skaile-specific */
57
66
  --color-success: hsl(161.4 93.5% 30.4%);
58
67
  --color-success-foreground: hsl(0 0% 100%);
59
68
  --color-warning: hsl(32.1 94.6% 43.7%);
60
- --color-warning-foreground: hsl(222 47% 11%);
69
+ --color-warning-foreground: hsl(0 0% 11%);
61
70
  --color-ai-accent: hsl(37.7 92.1% 50.2%);
62
71
  --color-primary-bright: hsl(267 100% 63%);
63
- --color-surface: hsl(0 0% 100%);
72
+ --color-surface: hsl(0 0% 96%);
64
73
 
65
74
  /* Chart palette */
66
75
  --chart-1: hsl(267 100% 50%);
@@ -70,15 +79,15 @@
70
79
  --chart-5: hsl(161.4 93.5% 30.4%);
71
80
 
72
81
  /* 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%);
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. */
84
+ --sidebar: hsl(0 0% 100%);
85
+ --sidebar-foreground: hsl(0 0% 11%);
77
86
  --sidebar-primary: hsl(267 100% 50%);
78
87
  --sidebar-primary-foreground: hsl(0 0% 100%);
79
88
  --sidebar-accent: hsl(267 100% 97%);
80
89
  --sidebar-accent-foreground: hsl(267 100% 50%);
81
- --sidebar-border: hsl(214 28% 86%);
90
+ --sidebar-border: hsl(0 0% 86%);
82
91
  --sidebar-ring: hsl(267 100% 50%);
83
92
 
84
93
  /* Typography */
@@ -93,14 +102,14 @@
93
102
  --spacing: 0.25rem;
94
103
 
95
104
  /* 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);
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);
104
113
  }
105
114
 
106
115
  /* ---------------------------------------------------------------------------
@@ -111,37 +120,46 @@
111
120
  .dark {
112
121
  --color-scheme: dark;
113
122
 
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;
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;
121
133
  --primary: #7300ff;
122
134
  --primary-foreground: #ffffff;
123
- --secondary: #23262d;
124
- --secondary-foreground: #f4f4f5;
125
- --muted: #1a1c22;
126
- --muted-foreground: #a1a1aa;
127
- --accent: #2a2d36;
128
- --accent-foreground: #f4f4f5;
135
+ --secondary: #2f2f2f;
136
+ --secondary-foreground: #f5f5f5;
137
+ --muted: #2f2f2f;
138
+ --muted-foreground: #a1a1a1;
139
+ --accent: #323131;
140
+ --accent-foreground: #f5f5f5;
129
141
  --destructive: hsl(0 84.2% 60.2%);
130
142
  --destructive-foreground: #ffffff;
131
- --border: #2e303a;
132
- --input: #2e303a;
143
+ --border: #323131;
144
+ --input: #323131;
133
145
  --ring: #7300ff;
134
- /* See the light block: the strip behind the page that the tab bar sits on. */
135
- --tab-bar: #0e1015;
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;
136
154
 
137
155
  /* Skaile-specific */
138
156
  --color-success: hsl(160.1 84.1% 39.4%);
139
157
  --color-success-foreground: #ffffff;
140
158
  --color-warning: hsl(37.7 92.1% 50.2%);
141
- --color-warning-foreground: #13151a;
159
+ --color-warning-foreground: #242424;
142
160
  --color-ai-accent: hsl(43.3 96.4% 56.3%);
143
161
  --color-primary-bright: #9b40ff;
144
- --color-surface: #23262d;
162
+ --color-surface: #2f2f2f;
145
163
 
146
164
  /* Chart palette */
147
165
  --chart-1: #7300ff;
@@ -151,13 +169,13 @@
151
169
  --chart-5: #10b981;
152
170
 
153
171
  /* Sidebar */
154
- --sidebar: #13151a;
155
- --sidebar-foreground: #f4f4f5;
172
+ --sidebar: #242424;
173
+ --sidebar-foreground: #f5f5f5;
156
174
  --sidebar-primary: #7300ff;
157
175
  --sidebar-primary-foreground: #ffffff;
158
176
  --sidebar-accent: #1b1a3f;
159
177
  --sidebar-accent-foreground: #9b40ff;
160
- --sidebar-border: #2e303a;
178
+ --sidebar-border: #323131;
161
179
  --sidebar-ring: #7300ff;
162
180
 
163
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,18 +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
- "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",