@cboxdk/cbox-ui 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/BRAND.md +77 -0
- package/LICENSE +21 -0
- package/README.md +156 -0
- package/TRADEMARKS.md +5 -0
- package/assets/favicon.svg +6 -0
- package/assets/monograms/atlas.svg +14 -0
- package/assets/monograms/cortex.svg +14 -0
- package/assets/monograms/id.svg +14 -0
- package/assets/monograms/track.svg +14 -0
- package/assets/og-template.svg +50 -0
- package/assets/wordmark-mono.svg +14 -0
- package/assets/wordmark.svg +18 -0
- package/dist/index.d.ts +1383 -0
- package/dist/index.js +3671 -0
- package/dist/index.js.map +1 -0
- package/package.json +69 -0
- package/tailwind.preset.js +98 -0
- package/tokens/cbox.css +274 -0
package/package.json
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cboxdk/cbox-ui",
|
|
3
|
+
"version": "0.6.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "Cbox shared UI — layout primitives, design tokens, and brand assets used across every Cbox-family app (id, cortex, atlas, track, …).",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/cboxdk/cbox-ui.git"
|
|
9
|
+
},
|
|
10
|
+
"publishConfig": {
|
|
11
|
+
"registry": "https://registry.npmjs.org",
|
|
12
|
+
"access": "public"
|
|
13
|
+
},
|
|
14
|
+
"type": "module",
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"files": [
|
|
17
|
+
"LICENSE",
|
|
18
|
+
"TRADEMARKS.md",
|
|
19
|
+
"dist",
|
|
20
|
+
"tokens",
|
|
21
|
+
"assets",
|
|
22
|
+
"tailwind.preset.js",
|
|
23
|
+
"README.md",
|
|
24
|
+
"BRAND.md"
|
|
25
|
+
],
|
|
26
|
+
"main": "./dist/index.js",
|
|
27
|
+
"module": "./dist/index.js",
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
|
+
"exports": {
|
|
30
|
+
".": {
|
|
31
|
+
"types": "./dist/index.d.ts",
|
|
32
|
+
"import": "./dist/index.js"
|
|
33
|
+
},
|
|
34
|
+
"./tokens": "./tokens/cbox.css",
|
|
35
|
+
"./tailwind": "./tailwind.preset.js",
|
|
36
|
+
"./assets/*": "./assets/*"
|
|
37
|
+
},
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "tsup",
|
|
40
|
+
"dev": "tsup --watch",
|
|
41
|
+
"test": "vitest run",
|
|
42
|
+
"test:watch": "vitest",
|
|
43
|
+
"typecheck": "tsc --noEmit"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"lucide-react": ">=0.400.0",
|
|
47
|
+
"react": "^19.0.0",
|
|
48
|
+
"react-dom": "^19.0.0",
|
|
49
|
+
"tailwindcss": "^4.0.0"
|
|
50
|
+
},
|
|
51
|
+
"peerDependenciesMeta": {
|
|
52
|
+
"lucide-react": {
|
|
53
|
+
"optional": true
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"dependencies": {
|
|
57
|
+
"clsx": "^2.1.1",
|
|
58
|
+
"tailwind-merge": "^3.0.0"
|
|
59
|
+
},
|
|
60
|
+
"devDependencies": {
|
|
61
|
+
"@types/node": "^22.0.0",
|
|
62
|
+
"@types/react": "^19.0.0",
|
|
63
|
+
"@types/react-dom": "^19.0.0",
|
|
64
|
+
"lucide-react": "^0.469.0",
|
|
65
|
+
"tsup": "^8.3.0",
|
|
66
|
+
"typescript": "^5.6.0",
|
|
67
|
+
"vitest": "^4.1.5"
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tailwind v3-compatible preset for consumers still on v3.
|
|
3
|
+
*
|
|
4
|
+
* Tailwind v4 apps should `@import '@cboxdk/cbox-ui/tokens'` directly
|
|
5
|
+
* in their CSS instead of using this preset — v4's @theme directive
|
|
6
|
+
* is the canonical token surface and supersedes this file.
|
|
7
|
+
*/
|
|
8
|
+
module.exports = {
|
|
9
|
+
theme: {
|
|
10
|
+
extend: {
|
|
11
|
+
fontFamily: {
|
|
12
|
+
sans: [
|
|
13
|
+
'Plus Jakarta Sans',
|
|
14
|
+
'Instrument Sans',
|
|
15
|
+
'ui-sans-serif',
|
|
16
|
+
'system-ui',
|
|
17
|
+
'sans-serif',
|
|
18
|
+
],
|
|
19
|
+
display: ['Plus Jakarta Sans', 'ui-sans-serif', 'system-ui'],
|
|
20
|
+
mono: [
|
|
21
|
+
'JetBrains Mono',
|
|
22
|
+
'ui-monospace',
|
|
23
|
+
'SFMono-Regular',
|
|
24
|
+
'Menlo',
|
|
25
|
+
'Monaco',
|
|
26
|
+
'monospace',
|
|
27
|
+
],
|
|
28
|
+
},
|
|
29
|
+
borderRadius: {
|
|
30
|
+
lg: 'var(--radius)',
|
|
31
|
+
md: 'calc(var(--radius) - 2px)',
|
|
32
|
+
sm: 'calc(var(--radius) - 4px)',
|
|
33
|
+
},
|
|
34
|
+
colors: {
|
|
35
|
+
background: 'var(--background)',
|
|
36
|
+
foreground: 'var(--foreground)',
|
|
37
|
+
canvas: 'var(--canvas)',
|
|
38
|
+
card: {
|
|
39
|
+
DEFAULT: 'var(--card)',
|
|
40
|
+
foreground: 'var(--card-foreground)',
|
|
41
|
+
},
|
|
42
|
+
popover: {
|
|
43
|
+
DEFAULT: 'var(--popover)',
|
|
44
|
+
foreground: 'var(--popover-foreground)',
|
|
45
|
+
},
|
|
46
|
+
primary: {
|
|
47
|
+
DEFAULT: 'var(--primary)',
|
|
48
|
+
foreground: 'var(--primary-foreground)',
|
|
49
|
+
},
|
|
50
|
+
secondary: {
|
|
51
|
+
DEFAULT: 'var(--secondary)',
|
|
52
|
+
foreground: 'var(--secondary-foreground)',
|
|
53
|
+
},
|
|
54
|
+
muted: {
|
|
55
|
+
DEFAULT: 'var(--muted)',
|
|
56
|
+
foreground: 'var(--muted-foreground)',
|
|
57
|
+
},
|
|
58
|
+
accent: {
|
|
59
|
+
DEFAULT: 'var(--accent)',
|
|
60
|
+
foreground: 'var(--accent-foreground)',
|
|
61
|
+
soft: 'var(--accent-soft)',
|
|
62
|
+
edge: 'var(--accent-edge)',
|
|
63
|
+
},
|
|
64
|
+
success: {
|
|
65
|
+
DEFAULT: 'var(--success)',
|
|
66
|
+
foreground: 'var(--success-foreground)',
|
|
67
|
+
soft: 'var(--success-soft)',
|
|
68
|
+
},
|
|
69
|
+
warning: {
|
|
70
|
+
DEFAULT: 'var(--warning)',
|
|
71
|
+
foreground: 'var(--warning-foreground)',
|
|
72
|
+
soft: 'var(--warning-soft)',
|
|
73
|
+
},
|
|
74
|
+
info: {
|
|
75
|
+
DEFAULT: 'var(--info)',
|
|
76
|
+
soft: 'var(--info-soft)',
|
|
77
|
+
},
|
|
78
|
+
destructive: {
|
|
79
|
+
DEFAULT: 'var(--destructive)',
|
|
80
|
+
foreground: 'var(--destructive-foreground)',
|
|
81
|
+
soft: 'var(--destructive-soft)',
|
|
82
|
+
},
|
|
83
|
+
border: 'var(--border)',
|
|
84
|
+
input: 'var(--input)',
|
|
85
|
+
ring: 'var(--ring)',
|
|
86
|
+
sidebar: {
|
|
87
|
+
DEFAULT: 'var(--sidebar)',
|
|
88
|
+
foreground: 'var(--sidebar-foreground)',
|
|
89
|
+
muted: 'var(--sidebar-muted)',
|
|
90
|
+
accent: 'var(--sidebar-accent)',
|
|
91
|
+
'accent-foreground': 'var(--sidebar-accent-foreground)',
|
|
92
|
+
border: 'var(--sidebar-border)',
|
|
93
|
+
ring: 'var(--sidebar-ring)',
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
};
|
package/tokens/cbox.css
ADDED
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Cbox design tokens.
|
|
3
|
+
*
|
|
4
|
+
* Drop this file into a Cbox-family app's CSS via:
|
|
5
|
+
*
|
|
6
|
+
* @import '@cboxdk/cbox-ui/tokens';
|
|
7
|
+
*
|
|
8
|
+
* Then reference the tokens via Tailwind utilities (text-foreground,
|
|
9
|
+
* bg-card, border-border, etc.) — the @theme block at the bottom
|
|
10
|
+
* registers them as Tailwind v4 utilities.
|
|
11
|
+
*
|
|
12
|
+
* Cool-neutral palette. Single deep-blue primary. Plus Jakarta Sans
|
|
13
|
+
* + JetBrains Mono. Designed for ops + identity surfaces — refined,
|
|
14
|
+
* legible, sans editorial drama.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
:root {
|
|
18
|
+
--background: oklch(0.992 0.003 247);
|
|
19
|
+
--canvas: oklch(0.975 0.008 250);
|
|
20
|
+
--foreground: oklch(0.18 0.012 250);
|
|
21
|
+
|
|
22
|
+
--card: oklch(1 0 0);
|
|
23
|
+
--card-foreground: oklch(0.18 0.012 250);
|
|
24
|
+
|
|
25
|
+
--popover: oklch(1 0 0);
|
|
26
|
+
--popover-foreground: oklch(0.18 0.012 250);
|
|
27
|
+
|
|
28
|
+
--primary: oklch(0.45 0.16 258);
|
|
29
|
+
--primary-foreground: oklch(0.99 0.003 247);
|
|
30
|
+
|
|
31
|
+
--secondary: oklch(0.96 0.006 250);
|
|
32
|
+
--secondary-foreground: oklch(0.22 0.012 250);
|
|
33
|
+
|
|
34
|
+
--muted: oklch(0.96 0.006 250);
|
|
35
|
+
--muted-foreground: oklch(0.5 0.012 250);
|
|
36
|
+
|
|
37
|
+
--accent: oklch(0.5 0.17 258);
|
|
38
|
+
--accent-foreground: oklch(0.99 0.003 247);
|
|
39
|
+
--accent-soft: oklch(0.5 0.17 258 / 0.08);
|
|
40
|
+
--accent-edge: oklch(0.5 0.17 258 / 0.32);
|
|
41
|
+
|
|
42
|
+
--success: oklch(0.62 0.16 145);
|
|
43
|
+
--success-foreground: oklch(0.99 0.003 247);
|
|
44
|
+
--success-soft: oklch(0.62 0.16 145 / 0.12);
|
|
45
|
+
|
|
46
|
+
--warning: oklch(0.72 0.16 70);
|
|
47
|
+
--warning-foreground: oklch(0.18 0.04 70);
|
|
48
|
+
--warning-soft: oklch(0.72 0.16 70 / 0.14);
|
|
49
|
+
|
|
50
|
+
--info: oklch(0.62 0.16 230);
|
|
51
|
+
--info-soft: oklch(0.62 0.16 230 / 0.12);
|
|
52
|
+
|
|
53
|
+
--destructive: oklch(0.58 0.21 25);
|
|
54
|
+
--destructive-foreground: oklch(0.99 0.003 247);
|
|
55
|
+
--destructive-soft: oklch(0.58 0.21 25 / 0.12);
|
|
56
|
+
|
|
57
|
+
--border: oklch(0.92 0.006 250);
|
|
58
|
+
--border-strong: oklch(0.86 0.008 250);
|
|
59
|
+
--input: oklch(0.94 0.005 250);
|
|
60
|
+
--ring: oklch(0.5 0.17 258);
|
|
61
|
+
|
|
62
|
+
--chart-1: oklch(0.5 0.17 258);
|
|
63
|
+
--chart-2: oklch(0.62 0.16 145);
|
|
64
|
+
--chart-3: oklch(0.72 0.16 70);
|
|
65
|
+
--chart-4: oklch(0.58 0.21 25);
|
|
66
|
+
--chart-5: oklch(0.6 0.16 295);
|
|
67
|
+
|
|
68
|
+
--sidebar: oklch(0.985 0.005 250);
|
|
69
|
+
--sidebar-foreground: oklch(0.22 0.012 250);
|
|
70
|
+
--sidebar-muted: oklch(0.55 0.012 250);
|
|
71
|
+
--sidebar-accent: oklch(0.94 0.008 250);
|
|
72
|
+
--sidebar-accent-foreground: oklch(0.18 0.012 250);
|
|
73
|
+
--sidebar-border: oklch(0.92 0.006 250);
|
|
74
|
+
--sidebar-ring: oklch(0.5 0.17 258);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.dark {
|
|
78
|
+
--background: oklch(0.155 0.01 250);
|
|
79
|
+
--canvas: oklch(0.18 0.01 250);
|
|
80
|
+
--foreground: oklch(0.97 0.005 247);
|
|
81
|
+
|
|
82
|
+
--card: oklch(0.2 0.01 250);
|
|
83
|
+
--card-foreground: oklch(0.97 0.005 247);
|
|
84
|
+
|
|
85
|
+
--popover: oklch(0.21 0.011 250);
|
|
86
|
+
--popover-foreground: oklch(0.97 0.005 247);
|
|
87
|
+
|
|
88
|
+
--primary: oklch(0.65 0.18 258);
|
|
89
|
+
--primary-foreground: oklch(0.16 0.01 250);
|
|
90
|
+
|
|
91
|
+
--secondary: oklch(0.25 0.012 250);
|
|
92
|
+
--secondary-foreground: oklch(0.96 0.005 247);
|
|
93
|
+
|
|
94
|
+
--muted: oklch(0.24 0.012 250);
|
|
95
|
+
--muted-foreground: oklch(0.7 0.012 250);
|
|
96
|
+
|
|
97
|
+
--accent: oklch(0.65 0.18 258);
|
|
98
|
+
--accent-foreground: oklch(0.16 0.01 250);
|
|
99
|
+
--accent-soft: oklch(0.65 0.18 258 / 0.18);
|
|
100
|
+
--accent-edge: oklch(0.65 0.18 258 / 0.42);
|
|
101
|
+
|
|
102
|
+
--success: oklch(0.74 0.16 145);
|
|
103
|
+
--success-foreground: oklch(0.16 0.04 145);
|
|
104
|
+
--success-soft: oklch(0.74 0.16 145 / 0.16);
|
|
105
|
+
|
|
106
|
+
--warning: oklch(0.78 0.16 70);
|
|
107
|
+
--warning-foreground: oklch(0.16 0.04 70);
|
|
108
|
+
--warning-soft: oklch(0.78 0.16 70 / 0.18);
|
|
109
|
+
|
|
110
|
+
--info: oklch(0.7 0.16 230);
|
|
111
|
+
--info-soft: oklch(0.7 0.16 230 / 0.16);
|
|
112
|
+
|
|
113
|
+
--destructive: oklch(0.68 0.21 25);
|
|
114
|
+
--destructive-foreground: oklch(0.16 0.01 250);
|
|
115
|
+
--destructive-soft: oklch(0.68 0.21 25 / 0.16);
|
|
116
|
+
|
|
117
|
+
--border: oklch(0.28 0.012 250);
|
|
118
|
+
--border-strong: oklch(0.36 0.014 250);
|
|
119
|
+
--input: oklch(0.26 0.012 250);
|
|
120
|
+
--ring: oklch(0.65 0.18 258);
|
|
121
|
+
|
|
122
|
+
--chart-1: oklch(0.65 0.18 258);
|
|
123
|
+
--chart-2: oklch(0.74 0.16 145);
|
|
124
|
+
--chart-3: oklch(0.78 0.16 70);
|
|
125
|
+
--chart-4: oklch(0.68 0.21 25);
|
|
126
|
+
--chart-5: oklch(0.72 0.16 295);
|
|
127
|
+
|
|
128
|
+
--sidebar: oklch(0.18 0.01 250);
|
|
129
|
+
--sidebar-foreground: oklch(0.96 0.005 247);
|
|
130
|
+
--sidebar-muted: oklch(0.65 0.012 250);
|
|
131
|
+
--sidebar-accent: oklch(0.24 0.012 250);
|
|
132
|
+
--sidebar-accent-foreground: oklch(0.97 0.005 247);
|
|
133
|
+
--sidebar-border: oklch(0.28 0.012 250);
|
|
134
|
+
--sidebar-ring: oklch(0.65 0.18 258);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/*
|
|
138
|
+
* Tailwind v4 token registration — exposes the CSS vars as utility
|
|
139
|
+
* classes (text-foreground, bg-card, border-border, …).
|
|
140
|
+
*/
|
|
141
|
+
@theme inline {
|
|
142
|
+
--font-sans:
|
|
143
|
+
'Plus Jakarta Sans', 'Instrument Sans', ui-sans-serif, system-ui,
|
|
144
|
+
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
145
|
+
'Noto Color Emoji';
|
|
146
|
+
--font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
|
|
147
|
+
--font-mono:
|
|
148
|
+
'JetBrains Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo,
|
|
149
|
+
Monaco, monospace;
|
|
150
|
+
|
|
151
|
+
--radius: 0.625rem;
|
|
152
|
+
--radius-lg: var(--radius);
|
|
153
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
154
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
155
|
+
|
|
156
|
+
--color-background: var(--background);
|
|
157
|
+
--color-foreground: var(--foreground);
|
|
158
|
+
--color-canvas: var(--canvas);
|
|
159
|
+
|
|
160
|
+
--color-card: var(--card);
|
|
161
|
+
--color-card-foreground: var(--card-foreground);
|
|
162
|
+
|
|
163
|
+
--color-popover: var(--popover);
|
|
164
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
165
|
+
|
|
166
|
+
--color-primary: var(--primary);
|
|
167
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
168
|
+
|
|
169
|
+
--color-secondary: var(--secondary);
|
|
170
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
171
|
+
|
|
172
|
+
--color-muted: var(--muted);
|
|
173
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
174
|
+
|
|
175
|
+
--color-accent: var(--accent);
|
|
176
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
177
|
+
--color-accent-soft: var(--accent-soft);
|
|
178
|
+
--color-accent-edge: var(--accent-edge);
|
|
179
|
+
|
|
180
|
+
--color-success: var(--success);
|
|
181
|
+
--color-success-foreground: var(--success-foreground);
|
|
182
|
+
--color-success-soft: var(--success-soft);
|
|
183
|
+
|
|
184
|
+
--color-warning: var(--warning);
|
|
185
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
186
|
+
--color-warning-soft: var(--warning-soft);
|
|
187
|
+
|
|
188
|
+
--color-info: var(--info);
|
|
189
|
+
--color-info-soft: var(--info-soft);
|
|
190
|
+
|
|
191
|
+
--color-destructive: var(--destructive);
|
|
192
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
193
|
+
--color-destructive-soft: var(--destructive-soft);
|
|
194
|
+
|
|
195
|
+
--color-border: var(--border);
|
|
196
|
+
--color-border-strong: var(--border-strong);
|
|
197
|
+
--color-input: var(--input);
|
|
198
|
+
--color-ring: var(--ring);
|
|
199
|
+
|
|
200
|
+
--color-chart-1: var(--chart-1);
|
|
201
|
+
--color-chart-2: var(--chart-2);
|
|
202
|
+
--color-chart-3: var(--chart-3);
|
|
203
|
+
--color-chart-4: var(--chart-4);
|
|
204
|
+
--color-chart-5: var(--chart-5);
|
|
205
|
+
|
|
206
|
+
--color-sidebar: var(--sidebar);
|
|
207
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
208
|
+
--color-sidebar-muted: var(--sidebar-muted);
|
|
209
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
210
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
211
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
212
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
@layer base {
|
|
216
|
+
* {
|
|
217
|
+
@apply border-border;
|
|
218
|
+
}
|
|
219
|
+
body {
|
|
220
|
+
@apply bg-background text-foreground;
|
|
221
|
+
}
|
|
222
|
+
.tabular {
|
|
223
|
+
font-variant-numeric: tabular-nums;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
@layer utilities {
|
|
228
|
+
.text-eyebrow {
|
|
229
|
+
font-family: var(--font-sans);
|
|
230
|
+
text-transform: uppercase;
|
|
231
|
+
letter-spacing: 0.08em;
|
|
232
|
+
font-size: 0.6875rem;
|
|
233
|
+
font-weight: 600;
|
|
234
|
+
color: var(--sidebar-muted);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.text-mono {
|
|
238
|
+
font-family: var(--font-mono);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Subtle blue-tinted gradient washed across the content canvas.
|
|
242
|
+
* Every Cbox app uses this on its main scroll column so the
|
|
243
|
+
* surface feels consistent across id, webhooks, cortex, etc.
|
|
244
|
+
*/
|
|
245
|
+
.canvas-gradient {
|
|
246
|
+
background:
|
|
247
|
+
radial-gradient(
|
|
248
|
+
ellipse 1200px 600px at 100% 0%,
|
|
249
|
+
oklch(0.5 0.17 258 / 0.04) 0%,
|
|
250
|
+
transparent 60%
|
|
251
|
+
),
|
|
252
|
+
radial-gradient(
|
|
253
|
+
ellipse 800px 400px at 0% 100%,
|
|
254
|
+
oklch(0.6 0.16 295 / 0.04) 0%,
|
|
255
|
+
transparent 60%
|
|
256
|
+
),
|
|
257
|
+
var(--canvas);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.dark .canvas-gradient {
|
|
261
|
+
background:
|
|
262
|
+
radial-gradient(
|
|
263
|
+
ellipse 1200px 600px at 100% 0%,
|
|
264
|
+
oklch(0.65 0.18 258 / 0.06) 0%,
|
|
265
|
+
transparent 60%
|
|
266
|
+
),
|
|
267
|
+
radial-gradient(
|
|
268
|
+
ellipse 800px 400px at 0% 100%,
|
|
269
|
+
oklch(0.7 0.16 295 / 0.05) 0%,
|
|
270
|
+
transparent 60%
|
|
271
|
+
),
|
|
272
|
+
var(--canvas);
|
|
273
|
+
}
|
|
274
|
+
}
|