@skaile/brand 0.4.1 → 0.6.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.
- package/package.json +1 -1
- package/src/css/theme.css +100 -17
- package/src/tokens.json +40 -6
package/package.json
CHANGED
package/src/css/theme.css
CHANGED
|
@@ -22,7 +22,9 @@
|
|
|
22
22
|
:root,
|
|
23
23
|
:root[data-theme="light"],
|
|
24
24
|
.light {
|
|
25
|
-
|
|
25
|
+
/* The real property, not a custom one: this is what makes the UA paint
|
|
26
|
+
scrollbars, selects and date pickers to match the theme. */
|
|
27
|
+
color-scheme: light;
|
|
26
28
|
|
|
27
29
|
/* Core palette */
|
|
28
30
|
/* Light lifts its panels off the page; dark sets them into it. The two
|
|
@@ -47,7 +49,10 @@
|
|
|
47
49
|
--secondary-foreground: hsl(0 0% 40%);
|
|
48
50
|
--muted: hsl(0 0% 96%);
|
|
49
51
|
--muted-foreground: hsl(0 0% 40%);
|
|
50
|
-
|
|
52
|
+
/* The hover ground for every menu item in the shell: DropdownMenuItem
|
|
53
|
+
highlights with focus:bg-accent and nothing else. At 96% it sat 1.09:1
|
|
54
|
+
from --popover and was invisible. */
|
|
55
|
+
--accent: hsl(0 0% 88%);
|
|
51
56
|
--accent-foreground: hsl(0 0% 11%);
|
|
52
57
|
--destructive: hsl(0 72.2% 50.6%);
|
|
53
58
|
--destructive-foreground: hsl(0 0% 100%);
|
|
@@ -59,7 +64,7 @@
|
|
|
59
64
|
--ring: hsl(267 100% 50%);
|
|
60
65
|
/* Below the page, so an active tab rises out of the strip and meets the
|
|
61
66
|
panel it belongs to. */
|
|
62
|
-
--tab-bar: hsl(0 0%
|
|
67
|
+
--tab-bar: hsl(0 0% 91%);
|
|
63
68
|
/* The surface a panel's own content sinks into — the file viewer beside the
|
|
64
69
|
tree. One step below the panel, which here leaves it between the panel and
|
|
65
70
|
the page rather than below both, as in dark.
|
|
@@ -85,17 +90,55 @@
|
|
|
85
90
|
--chart-5: hsl(161.4 93.5% 30.4%);
|
|
86
91
|
|
|
87
92
|
/* Sidebar */
|
|
88
|
-
/*
|
|
89
|
-
|
|
90
|
-
|
|
93
|
+
/* Chrome recesses below the page rather than matching it, so the content
|
|
94
|
+
ground reads as the surface in front. Inferred: every screen of the shell
|
|
95
|
+
design is dark-only. */
|
|
96
|
+
--sidebar: hsl(0 0% 89%);
|
|
91
97
|
--sidebar-foreground: hsl(0 0% 11%);
|
|
92
98
|
--sidebar-primary: hsl(267 100% 50%);
|
|
93
99
|
--sidebar-primary-foreground: hsl(0 0% 100%);
|
|
94
|
-
|
|
95
|
-
|
|
100
|
+
/* A plain grey lift off the sidebar ground, not a purple tint — that is what
|
|
101
|
+
the design's selected row is. shadcn's SidebarMenuButton binds hover and
|
|
102
|
+
active to this one token; separating the two is the consumer's job. */
|
|
103
|
+
--sidebar-accent: hsl(0 0% 96%);
|
|
104
|
+
--sidebar-accent-foreground: hsl(0 0% 11%);
|
|
96
105
|
--sidebar-border: hsl(0 0% 86%);
|
|
97
106
|
--sidebar-ring: hsl(267 100% 50%);
|
|
98
107
|
|
|
108
|
+
/* Shell — header, tabs, toolbar chrome */
|
|
109
|
+
/* Two ramps run in opposite directions on the same header: a tab lifts off
|
|
110
|
+
the header ground because it is a piece of the page pulled forward, a
|
|
111
|
+
control sinks into it because it is a well. Hence two families, not one. */
|
|
112
|
+
/* Inferred throughout — the shell design exists only in dark. */
|
|
113
|
+
/* White in both themes: a selection marker rather than a surface. */
|
|
114
|
+
--tab-active: hsl(0 0% 100%);
|
|
115
|
+
--tab-active-foreground: hsl(0 0% 11%);
|
|
116
|
+
/* Steps away from the header ground instead of toward the active tab, since
|
|
117
|
+
white is already spoken for at the top of this ramp: lifting into it left
|
|
118
|
+
inactive chrome at 1.06:1 against the header. */
|
|
119
|
+
/* No companion foreground: an inactive tab keeps --foreground at full
|
|
120
|
+
strength. Only the fill recedes, so the label stays as readable as the
|
|
121
|
+
active one. */
|
|
122
|
+
--tab-inactive: hsl(0 0% 82%);
|
|
123
|
+
--tab-inactive-hover: hsl(0 0% 87%);
|
|
124
|
+
/* Sampled from the design, and the one shell value both themes share. */
|
|
125
|
+
--tab-unread: #005eff;
|
|
126
|
+
/* The well has to read on the deepest ground it is mounted on, not just on
|
|
127
|
+
the header it was drawn against. At 88% it was 1.08:1 from the header and
|
|
128
|
+
1.03:1 from --sidebar, where the mode toggle sits — so the toggle had no
|
|
129
|
+
container at all. 82% sinks from both. */
|
|
130
|
+
--control-surface: hsl(0 0% 82%);
|
|
131
|
+
--control-surface-hover: hsl(0 0% 76%);
|
|
132
|
+
--control-selected: hsl(0 0% 100%);
|
|
133
|
+
/* Deliberately dimmer than --muted-foreground, and held at the 3:1 non-text
|
|
134
|
+
floor against --control-surface — the design samples about 2.3:1, and this
|
|
135
|
+
is the one place we knowingly part from it. It moves with the track or the
|
|
136
|
+
floor breaks — 49% falls to 2.70:1 once --control-surface sinks. */
|
|
137
|
+
--control-icon: hsl(0 0% 45%);
|
|
138
|
+
/* Stronger than --border against the same ground, because it is the only
|
|
139
|
+
line the shell has left. */
|
|
140
|
+
--content-border: hsl(0 0% 82%);
|
|
141
|
+
|
|
99
142
|
/* Typography */
|
|
100
143
|
--font-sans: "Inter", sans-serif;
|
|
101
144
|
--font-serif: "Plus Jakarta Sans", sans-serif;
|
|
@@ -124,7 +167,7 @@
|
|
|
124
167
|
|
|
125
168
|
:root[data-theme="dark"],
|
|
126
169
|
.dark {
|
|
127
|
-
|
|
170
|
+
color-scheme: dark;
|
|
128
171
|
|
|
129
172
|
/* Core palette — taken from the platform shell design, and no longer the
|
|
130
173
|
website's canonical dark: that palette is blue-shifted and lifts a card
|
|
@@ -142,7 +185,10 @@
|
|
|
142
185
|
--secondary-foreground: #f5f5f5;
|
|
143
186
|
--muted: #2f2f2f;
|
|
144
187
|
--muted-foreground: #a1a1a1;
|
|
145
|
-
|
|
188
|
+
/* See the light block. It used to share #323131 with --border/--input,
|
|
189
|
+
which left the menu hover at 1.07:1; the two are unrelated roles that
|
|
190
|
+
collided by accident. This is --tab-inactive-hover, so no new grey. */
|
|
191
|
+
--accent: #4a4a4a;
|
|
146
192
|
--accent-foreground: #f5f5f5;
|
|
147
193
|
--destructive: hsl(0 84.2% 60.2%);
|
|
148
194
|
--destructive-foreground: #ffffff;
|
|
@@ -150,10 +196,9 @@
|
|
|
150
196
|
--input: #323131;
|
|
151
197
|
--ring: #7300ff;
|
|
152
198
|
/* See the light block: the strip behind the page that the tab bar sits on.
|
|
153
|
-
It
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
--tab-bar: #161515;
|
|
199
|
+
It used to share the deepest step with --surface-sunken; --sidebar has
|
|
200
|
+
since taken that step, and the strip now sits one above it. */
|
|
201
|
+
--tab-bar: #1f1e1e;
|
|
157
202
|
/* The surface a panel's own content sinks into — the file viewer beside the
|
|
158
203
|
tree. Third step of the ramp, below the panel. */
|
|
159
204
|
--surface-sunken: #161515;
|
|
@@ -175,15 +220,53 @@
|
|
|
175
220
|
--chart-5: #10b981;
|
|
176
221
|
|
|
177
222
|
/* Sidebar */
|
|
178
|
-
|
|
223
|
+
/* Chrome recesses below the page rather than matching it, so the content
|
|
224
|
+
ground reads as the surface in front. Sampled from the shell design; it
|
|
225
|
+
lands on --surface-sunken's value, one behind the page and one inside a
|
|
226
|
+
panel, and the two are free to move apart. */
|
|
227
|
+
--sidebar: #161515;
|
|
179
228
|
--sidebar-foreground: #f5f5f5;
|
|
180
229
|
--sidebar-primary: #7300ff;
|
|
181
230
|
--sidebar-primary-foreground: #ffffff;
|
|
182
|
-
|
|
183
|
-
|
|
231
|
+
/* A plain grey lift off the sidebar ground, not a purple tint — that is what
|
|
232
|
+
the design's selected row is. shadcn's SidebarMenuButton binds hover and
|
|
233
|
+
active to this one token; separating the two is the consumer's job. */
|
|
234
|
+
--sidebar-accent: #1f1f1f;
|
|
235
|
+
--sidebar-accent-foreground: #f5f5f5;
|
|
184
236
|
--sidebar-border: #323131;
|
|
185
237
|
--sidebar-ring: #7300ff;
|
|
186
238
|
|
|
239
|
+
/* Shell — header, tabs, toolbar chrome */
|
|
240
|
+
/* Two ramps run in opposite directions on the same header: a tab lifts off
|
|
241
|
+
the header ground because it is a piece of the page pulled forward, a
|
|
242
|
+
control sinks into it because it is a well. Hence two families, not one. */
|
|
243
|
+
/* Sampled from the shell design throughout. */
|
|
244
|
+
/* White in both themes: a selection marker rather than a surface. */
|
|
245
|
+
--tab-active: #ffffff;
|
|
246
|
+
--tab-active-foreground: hsl(0 0% 11%);
|
|
247
|
+
--tab-inactive: #3e3e3e;
|
|
248
|
+
--tab-inactive-hover: #4a4a4a;
|
|
249
|
+
/* The one shell value both themes share. */
|
|
250
|
+
--tab-unread: #005eff;
|
|
251
|
+
/* Dark cannot sink. The well is mounted on two grounds: --background (#242424,
|
|
252
|
+
the toolbar) and --sidebar (#161515, the mode toggle). It cannot sit between
|
|
253
|
+
them without vanishing into one, and it cannot go under --sidebar — pure
|
|
254
|
+
black reaches only 1.15:1 there. So in dark the well inverts and lifts clear
|
|
255
|
+
of both. This is the grey --accent just vacated; no new grey enters.
|
|
256
|
+
Keep --popover (#2f2f2f) off this list of grounds: a control mounted inside
|
|
257
|
+
a menu would land 1.04:1 from it. None does today. */
|
|
258
|
+
--control-surface: #323131;
|
|
259
|
+
--control-surface-hover: #3e3e3e;
|
|
260
|
+
--control-selected: #484747;
|
|
261
|
+
/* Deliberately dimmer than --muted-foreground, and held at the 3:1 non-text
|
|
262
|
+
floor against --control-surface — the design samples about 2.3:1, and this
|
|
263
|
+
is the one place we knowingly part from it. It moves with the track or the
|
|
264
|
+
floor breaks — #666666 falls to 1.9:1 once --control-surface lifts. */
|
|
265
|
+
--control-icon: #7a7a7a;
|
|
266
|
+
/* Stronger than --border against the same ground, because it is the only
|
|
267
|
+
line the shell has left. */
|
|
268
|
+
--content-border: #3e3e3e;
|
|
269
|
+
|
|
187
270
|
/* Typography */
|
|
188
271
|
--font-sans: "Inter", sans-serif;
|
|
189
272
|
--font-serif: "Plus Jakarta Sans", sans-serif;
|
package/src/tokens.json
CHANGED
|
@@ -35,13 +35,15 @@
|
|
|
35
35
|
},
|
|
36
36
|
"platform-light": {
|
|
37
37
|
"background": "hsl(0 0% 94%)",
|
|
38
|
-
"tab-bar": "hsl(0 0%
|
|
38
|
+
"tab-bar": "hsl(0 0% 91%)",
|
|
39
|
+
"tab-active": "hsl(0 0% 100%)",
|
|
40
|
+
"tab-active-foreground": "hsl(0 0% 11%)",
|
|
39
41
|
"card": "hsl(0 0% 100%)",
|
|
40
42
|
"popover": "hsl(0 0% 100%)",
|
|
41
43
|
"surface": "hsl(0 0% 100%)",
|
|
42
44
|
"secondary": "hsl(0 0% 96%)",
|
|
43
45
|
"muted": "hsl(0 0% 96%)",
|
|
44
|
-
"accent": "hsl(0 0%
|
|
46
|
+
"accent": "hsl(0 0% 88%)",
|
|
45
47
|
"surface-sunken": "hsl(0 0% 96%)",
|
|
46
48
|
"foreground": "hsl(0 0% 11%)",
|
|
47
49
|
"muted-foreground": "hsl(0 0% 40%)",
|
|
@@ -49,17 +51,34 @@
|
|
|
49
51
|
"primary": "hsl(267 100% 50%)",
|
|
50
52
|
"primary-bright": "hsl(267 100% 63%)",
|
|
51
53
|
"ring": "hsl(267 100% 50%)",
|
|
52
|
-
"sidebar
|
|
54
|
+
"sidebar": "hsl(0 0% 89%)",
|
|
55
|
+
"sidebar-accent": "hsl(0 0% 96%)",
|
|
56
|
+
"tab-inactive": "hsl(0 0% 82%)",
|
|
57
|
+
"tab-inactive-hover": "hsl(0 0% 87%)",
|
|
58
|
+
"tab-unread": "#005eff",
|
|
59
|
+
"control-surface": "hsl(0 0% 82%)",
|
|
60
|
+
"control-surface-hover": "hsl(0 0% 76%)",
|
|
61
|
+
"control-selected": "hsl(0 0% 100%)",
|
|
62
|
+
"control-icon": "hsl(0 0% 45%)",
|
|
63
|
+
"content-border": "hsl(0 0% 82%)",
|
|
64
|
+
"sidebar-foreground": "hsl(0 0% 11%)",
|
|
65
|
+
"sidebar-primary": "hsl(267 100% 50%)",
|
|
66
|
+
"sidebar-primary-foreground": "hsl(0 0% 100%)",
|
|
67
|
+
"sidebar-accent-foreground": "hsl(0 0% 11%)",
|
|
68
|
+
"sidebar-border": "hsl(0 0% 86%)",
|
|
69
|
+
"sidebar-ring": "hsl(267 100% 50%)"
|
|
53
70
|
},
|
|
54
71
|
"platform-dark": {
|
|
55
72
|
"background": "#242424",
|
|
56
|
-
"tab-bar": "#
|
|
73
|
+
"tab-bar": "#1f1e1e",
|
|
74
|
+
"tab-active": "#ffffff",
|
|
75
|
+
"tab-active-foreground": "hsl(0 0% 11%)",
|
|
57
76
|
"card": "#1a1919",
|
|
58
77
|
"popover": "#2f2f2f",
|
|
59
78
|
"surface": "#2f2f2f",
|
|
60
79
|
"secondary": "#2f2f2f",
|
|
61
80
|
"muted": "#2f2f2f",
|
|
62
|
-
"accent": "#
|
|
81
|
+
"accent": "#4a4a4a",
|
|
63
82
|
"surface-sunken": "#161515",
|
|
64
83
|
"foreground": "#f5f5f5",
|
|
65
84
|
"muted-foreground": "#a1a1a1",
|
|
@@ -67,7 +86,22 @@
|
|
|
67
86
|
"primary": "#7300ff",
|
|
68
87
|
"primary-bright": "#9b40ff",
|
|
69
88
|
"ring": "#7300ff",
|
|
70
|
-
"sidebar
|
|
89
|
+
"sidebar": "#161515",
|
|
90
|
+
"sidebar-accent": "#1f1f1f",
|
|
91
|
+
"tab-inactive": "#3e3e3e",
|
|
92
|
+
"tab-inactive-hover": "#4a4a4a",
|
|
93
|
+
"tab-unread": "#005eff",
|
|
94
|
+
"control-surface": "#323131",
|
|
95
|
+
"control-surface-hover": "#3e3e3e",
|
|
96
|
+
"control-selected": "#484747",
|
|
97
|
+
"control-icon": "#7a7a7a",
|
|
98
|
+
"content-border": "#3e3e3e",
|
|
99
|
+
"sidebar-foreground": "#f5f5f5",
|
|
100
|
+
"sidebar-primary": "#7300ff",
|
|
101
|
+
"sidebar-primary-foreground": "#ffffff",
|
|
102
|
+
"sidebar-accent-foreground": "#f5f5f5",
|
|
103
|
+
"sidebar-border": "#323131",
|
|
104
|
+
"sidebar-ring": "#7300ff"
|
|
71
105
|
}
|
|
72
106
|
}
|
|
73
107
|
}
|