@dynamicnorway/tokens 1.0.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/README.md +31 -0
- package/package.json +23 -0
- package/src/index.css +1 -0
- package/src/theme.css +574 -0
package/README.md
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# @dynamicnorway/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens and global styles for Dynamic applications.
|
|
4
|
+
|
|
5
|
+
Built for [Tailwind CSS](https://tailwindcss.com/) v4.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @dynamicnorway/tokens tailwindcss
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
In your global CSS:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "@dynamicnorway/tokens";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
This imports the full token set and base styles. To import only the theme variables:
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
@import "@dynamicnorway/tokens/theme";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Toggle dark mode by adding the `dark` class to `<html>`.
|
|
28
|
+
|
|
29
|
+
## Preview
|
|
30
|
+
|
|
31
|
+
Token swatches and typography are shown in Storybook under **Tokens / Theme**. From the monorepo root, run `pnpm dev` and open [http://localhost:6006](http://localhost:6006).
|
package/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@dynamicnorway/tokens",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Design tokens and global styles for Dynamic",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"*.css"
|
|
8
|
+
],
|
|
9
|
+
"files": [
|
|
10
|
+
"src"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": "./src/index.css",
|
|
14
|
+
"./theme": "./src/theme.css"
|
|
15
|
+
},
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"tailwindcss": "^4.2.2",
|
|
18
|
+
"tailwindcss-animate": "^1.0.7"
|
|
19
|
+
},
|
|
20
|
+
"publishConfig": {
|
|
21
|
+
"access": "public"
|
|
22
|
+
}
|
|
23
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "./theme.css";
|
package/src/theme.css
ADDED
|
@@ -0,0 +1,574 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
|
2
|
+
@import "tailwindcss";
|
|
3
|
+
|
|
4
|
+
@plugin "tailwindcss-animate";
|
|
5
|
+
|
|
6
|
+
@custom-variant dark (&:is(.dark *));
|
|
7
|
+
|
|
8
|
+
/* =================================================================
|
|
9
|
+
Theme Configuration
|
|
10
|
+
Using Tailwind v4's @theme directive for CSS custom properties
|
|
11
|
+
================================================================= */
|
|
12
|
+
|
|
13
|
+
@theme {
|
|
14
|
+
/* Primary Colors (GREEN) - Brand Colors from Logo */
|
|
15
|
+
--color-primary-50: #f7ffec; /* Lightest green tint - derived from logo light green */
|
|
16
|
+
--color-primary-100: #eeffda; /* Very light green - derived from logo light green */
|
|
17
|
+
--color-primary-200: #c7ff82; /* Light green from logo (C=22 M=0 Y=49 K=0) */
|
|
18
|
+
--color-primary-300: #aaf25d; /* Light-medium green - interpolated between light and main */
|
|
19
|
+
--color-primary-400: #8ce537; /* Medium-light green - interpolated between light and main */
|
|
20
|
+
--color-primary-500: #65d405; /* Main brand green from logo (C=60 M=16 Y=98 K=1) */
|
|
21
|
+
--color-primary-600: #56b404; /* Medium-dark green - darkened from main */
|
|
22
|
+
--color-primary-700: #428a03; /* Dark green - further darkened for contrast */
|
|
23
|
+
--color-primary-800: #2d5f02; /* Very dark green - for deep contrast */
|
|
24
|
+
--color-primary-900: #193501; /* Darkest green - near black with green tint */
|
|
25
|
+
--color-primary-950: #0a1500; /* Almost black green - maximum darkness */
|
|
26
|
+
|
|
27
|
+
/* Accent Colors (BLUE) - Secondary Actions */
|
|
28
|
+
--color-accent-50: #ecfeff;
|
|
29
|
+
--color-accent-100: #cffafe;
|
|
30
|
+
--color-accent-200: #a5f3fc;
|
|
31
|
+
--color-accent-300: #67e8f9;
|
|
32
|
+
--color-accent-400: #4ff5fc; /* Main accent blue from brand manual (C=69 M=4 Y=1 K=0) */
|
|
33
|
+
--color-accent-500: #06b6d4;
|
|
34
|
+
--color-accent-600: #0891b2;
|
|
35
|
+
--color-accent-700: #0e7490;
|
|
36
|
+
--color-accent-800: #0a5561; /* Dark blue-teal for dark mode backgrounds */
|
|
37
|
+
--color-accent-900: #083d47; /* Darker blue-teal for dark mode backgrounds */
|
|
38
|
+
|
|
39
|
+
/* Alternative Colors (YELLOW) - Warnings & Highlights */
|
|
40
|
+
--color-alternative-50: #fffbeb;
|
|
41
|
+
--color-alternative-100: #fef3c7;
|
|
42
|
+
--color-alternative-200: #fde68a;
|
|
43
|
+
--color-alternative-300: #fcd34d;
|
|
44
|
+
--color-alternative-400: #ffcf33; /* Main alternative yellow from brand manual (C=0 M=19 Y=80 K=0) */
|
|
45
|
+
--color-alternative-500: #f59e0b;
|
|
46
|
+
--color-alternative-600: #d97706;
|
|
47
|
+
--color-alternative-700: #b45309;
|
|
48
|
+
|
|
49
|
+
/* Error/Danger Colors (RED) */
|
|
50
|
+
--color-error-50: #fef2f2;
|
|
51
|
+
--color-error-100: #fee2e2;
|
|
52
|
+
--color-error-200: #fecaca;
|
|
53
|
+
--color-error-300: #fca5a5;
|
|
54
|
+
--color-error-400: #f87171;
|
|
55
|
+
--color-error-500: #ef4444;
|
|
56
|
+
--color-error-600: #e80c00; /* Main error red from brand manual (C=7 M=95 Y=100 K=2) */
|
|
57
|
+
--color-error-700: #b91c1c;
|
|
58
|
+
|
|
59
|
+
/* Success Colors - Uses Primary Green from Logo */
|
|
60
|
+
--color-success-50: #f7ffec; /* Same as primary-50 */
|
|
61
|
+
--color-success-100: #eeffda; /* Same as primary-100 */
|
|
62
|
+
--color-success-500: #65d405; /* Same as primary-500 - main brand green */
|
|
63
|
+
--color-success-600: #56b404; /* Same as primary-600 */
|
|
64
|
+
--color-success-700: #428a03; /* Same as primary-700 */
|
|
65
|
+
|
|
66
|
+
/* Warning Colors - Uses Alternative Yellow */
|
|
67
|
+
--color-warning-50: #fffbeb;
|
|
68
|
+
--color-warning-100: #fef3c7;
|
|
69
|
+
--color-warning-500: #ffcf33; /* Same as alternative-400 */
|
|
70
|
+
--color-warning-600: #d97706; /* Same as alternative-600 */
|
|
71
|
+
|
|
72
|
+
/* Semantic Background Colors - Light mode defaults (will be overridden in :root and .dark) */
|
|
73
|
+
--color-background-primary: #f3f4f6; /* Gray-100 - page background (darkest) */
|
|
74
|
+
--color-background-secondary: #f9fafb; /* Gray-50 - cards/content (medium) */
|
|
75
|
+
--color-background-tertiary: #ffffff; /* White - sidebar/elevated (lightest) */
|
|
76
|
+
|
|
77
|
+
/* Semantic Text Colors - Light mode defaults */
|
|
78
|
+
--color-text-primary: #111827;
|
|
79
|
+
--color-text-secondary: #4b5563;
|
|
80
|
+
--color-text-tertiary: #6b7280;
|
|
81
|
+
|
|
82
|
+
/* Semantic Border Colors - Light mode defaults */
|
|
83
|
+
--color-border-primary: #e5e7eb;
|
|
84
|
+
--color-border-secondary: #d1d5db;
|
|
85
|
+
|
|
86
|
+
/* Selection/Highlight Colors - for selected/hovered elements */
|
|
87
|
+
--color-selection: #111827; /* Gray-900 - dark/black for selection borders */
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* =================================================================
|
|
91
|
+
Base Styles - Light Mode (Default)
|
|
92
|
+
================================================================= */
|
|
93
|
+
|
|
94
|
+
:root {
|
|
95
|
+
/* Light mode colors - override @theme defaults */
|
|
96
|
+
/* For visual hierarchy: page=gray-100 (darkest), cards=gray-50 (medium), elevated=white (lightest) */
|
|
97
|
+
--color-background-primary: #f3f4f6; /* Gray-100 - page background (darkest shade for depth) */
|
|
98
|
+
--color-background-secondary: #f9fafb; /* Gray-50 - cards/content (medium) */
|
|
99
|
+
--color-background-tertiary: #ffffff; /* White - sidebar/elevated (lightest, most elevated) */
|
|
100
|
+
|
|
101
|
+
--color-text-primary: #111827;
|
|
102
|
+
--color-text-secondary: #4b5563;
|
|
103
|
+
--color-text-tertiary: #6b7280;
|
|
104
|
+
|
|
105
|
+
--color-border-primary: #e5e7eb;
|
|
106
|
+
--color-border-secondary: #d1d5db;
|
|
107
|
+
|
|
108
|
+
--color-selection: #111827; /* Gray-900 - dark/black for selection borders in light mode */
|
|
109
|
+
|
|
110
|
+
/* Legacy variable names for backwards compatibility */
|
|
111
|
+
--color-bg-primary: var(--color-background-primary);
|
|
112
|
+
--color-bg-secondary: var(--color-background-secondary);
|
|
113
|
+
--color-bg-tertiary: var(--color-background-tertiary);
|
|
114
|
+
--radius: 0.625rem;
|
|
115
|
+
--background: oklch(1 0 0);
|
|
116
|
+
--foreground: oklch(0.145 0 0);
|
|
117
|
+
--card: oklch(1 0 0);
|
|
118
|
+
--card-foreground: oklch(0.145 0 0);
|
|
119
|
+
--popover: oklch(1 0 0);
|
|
120
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
121
|
+
--primary: oklch(0.205 0 0);
|
|
122
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
123
|
+
--secondary: oklch(0.97 0 0);
|
|
124
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
125
|
+
--muted: oklch(0.97 0 0);
|
|
126
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
127
|
+
--accent: oklch(0.97 0 0);
|
|
128
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
129
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
130
|
+
--border: oklch(0.922 0 0);
|
|
131
|
+
--input: oklch(0.922 0 0);
|
|
132
|
+
--ring: oklch(0.708 0 0);
|
|
133
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
134
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
135
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
136
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
137
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
138
|
+
--sidebar: oklch(0.985 0 0);
|
|
139
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
140
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
141
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
142
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
143
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
144
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
145
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* =================================================================
|
|
149
|
+
Dark Mode Styles
|
|
150
|
+
================================================================= */
|
|
151
|
+
|
|
152
|
+
.dark {
|
|
153
|
+
/* Dark mode colors - override @theme defaults */
|
|
154
|
+
/* For visual hierarchy: page=gray-950 (darkest), cards=gray-900 (medium), elevated=gray-800 (lightest) */
|
|
155
|
+
--color-background-primary: #0f172a; /* Gray-950 - page background (darkest at back) */
|
|
156
|
+
--color-background-secondary: #1e293b; /* Gray-900 - cards/content (medium, elevated) */
|
|
157
|
+
--color-background-tertiary: #334155; /* Gray-800 - sidebar/elevated (lightest, most elevated) */
|
|
158
|
+
|
|
159
|
+
--color-text-primary: #f9fafb;
|
|
160
|
+
--color-text-secondary: #d1d5db;
|
|
161
|
+
--color-text-tertiary: #9ca3af;
|
|
162
|
+
|
|
163
|
+
--color-border-primary: #374151;
|
|
164
|
+
--color-border-secondary: #4b5563;
|
|
165
|
+
|
|
166
|
+
--color-selection: #f9fafb; /* Gray-50 - light/white for selection borders in dark mode */
|
|
167
|
+
|
|
168
|
+
/* Legacy variable names for backwards compatibility */
|
|
169
|
+
--color-bg-primary: var(--color-background-primary);
|
|
170
|
+
--color-bg-secondary: var(--color-background-secondary);
|
|
171
|
+
--color-bg-tertiary: var(--color-background-tertiary);
|
|
172
|
+
--background: oklch(0.145 0 0);
|
|
173
|
+
--foreground: oklch(0.985 0 0);
|
|
174
|
+
--card: oklch(0.205 0 0);
|
|
175
|
+
--card-foreground: oklch(0.985 0 0);
|
|
176
|
+
--popover: oklch(0.205 0 0);
|
|
177
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
178
|
+
--primary: oklch(0.922 0 0);
|
|
179
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
180
|
+
--secondary: oklch(0.269 0 0);
|
|
181
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
182
|
+
--muted: oklch(0.269 0 0);
|
|
183
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
184
|
+
--accent: oklch(0.269 0 0);
|
|
185
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
186
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
187
|
+
--border: oklch(1 0 0 / 10%);
|
|
188
|
+
--input: oklch(1 0 0 / 15%);
|
|
189
|
+
--ring: oklch(0.556 0 0);
|
|
190
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
191
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
192
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
193
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
194
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
195
|
+
--sidebar: oklch(0.205 0 0);
|
|
196
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
197
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
198
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
199
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
200
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
201
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
202
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* =================================================================
|
|
206
|
+
Base Element Styles
|
|
207
|
+
================================================================= */
|
|
208
|
+
|
|
209
|
+
html {
|
|
210
|
+
/* Smooth theme transitions */
|
|
211
|
+
color-scheme: light;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
html.dark {
|
|
215
|
+
color-scheme: dark;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
body {
|
|
219
|
+
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
220
|
+
background-color: var(--color-background-primary);
|
|
221
|
+
color: var(--color-text-primary);
|
|
222
|
+
transition: background-color 0.2s ease, color 0.2s ease;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* =================================================================
|
|
226
|
+
Focus Styles
|
|
227
|
+
================================================================= */
|
|
228
|
+
|
|
229
|
+
*:focus-visible {
|
|
230
|
+
outline: 2px solid var(--color-primary-500);
|
|
231
|
+
outline-offset: 2px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* =================================================================
|
|
235
|
+
Button/Link Hover - pointer cursor like URLs (no underline)
|
|
236
|
+
================================================================= */
|
|
237
|
+
|
|
238
|
+
button:not(:disabled),
|
|
239
|
+
[role="button"]:not([aria-disabled="true"]),
|
|
240
|
+
a[class*="button"],
|
|
241
|
+
a[href] {
|
|
242
|
+
cursor: pointer;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
button:disabled,
|
|
246
|
+
[role="button"][aria-disabled="true"] {
|
|
247
|
+
cursor: not-allowed;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* =================================================================
|
|
251
|
+
Scrollbar Styles (Optional - for consistency)
|
|
252
|
+
================================================================= */
|
|
253
|
+
|
|
254
|
+
::-webkit-scrollbar {
|
|
255
|
+
width: 8px;
|
|
256
|
+
height: 8px;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
::-webkit-scrollbar-track {
|
|
260
|
+
background: var(--color-background-secondary);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
::-webkit-scrollbar-thumb {
|
|
264
|
+
background: var(--color-border-secondary);
|
|
265
|
+
border-radius: 4px;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
::-webkit-scrollbar-thumb:hover {
|
|
269
|
+
background: var(--color-text-tertiary);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* Dark mode scrollbar */
|
|
273
|
+
.dark ::-webkit-scrollbar-track {
|
|
274
|
+
background: var(--color-background-tertiary);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.dark ::-webkit-scrollbar-thumb {
|
|
278
|
+
background: var(--color-border-primary);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/* =================================================================
|
|
282
|
+
Animation Utilities
|
|
283
|
+
================================================================= */
|
|
284
|
+
|
|
285
|
+
@keyframes fadeIn {
|
|
286
|
+
from { opacity: 0; }
|
|
287
|
+
to { opacity: 1; }
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
@keyframes slideUp {
|
|
291
|
+
from {
|
|
292
|
+
opacity: 0;
|
|
293
|
+
transform: translateY(8px);
|
|
294
|
+
}
|
|
295
|
+
to {
|
|
296
|
+
opacity: 1;
|
|
297
|
+
transform: translateY(0);
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
@keyframes slideDown {
|
|
302
|
+
from {
|
|
303
|
+
opacity: 0;
|
|
304
|
+
transform: translateY(-8px);
|
|
305
|
+
}
|
|
306
|
+
to {
|
|
307
|
+
opacity: 1;
|
|
308
|
+
transform: translateY(0);
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
@keyframes jiggle {
|
|
313
|
+
0%, 100% {
|
|
314
|
+
transform: rotate(0deg);
|
|
315
|
+
}
|
|
316
|
+
10%, 30%, 50%, 70%, 90% {
|
|
317
|
+
transform: rotate(-5deg);
|
|
318
|
+
}
|
|
319
|
+
20%, 40%, 60%, 80% {
|
|
320
|
+
transform: rotate(5deg);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.animate-fade-in {
|
|
325
|
+
animation: fadeIn 0.2s ease-out;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.animate-slide-up {
|
|
329
|
+
animation: slideUp 0.3s ease-out;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.animate-slide-down {
|
|
333
|
+
animation: slideDown 0.3s ease-out;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.animate-jiggle {
|
|
337
|
+
animation: jiggle 1s ease-in-out;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.animate-jiggle {
|
|
341
|
+
animation: jiggle 1s ease-in-out;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
/* =================================================================
|
|
345
|
+
Login Page Animated Background - Slow Lava-like Movement
|
|
346
|
+
================================================================= */
|
|
347
|
+
|
|
348
|
+
@keyframes lavaFlow1 {
|
|
349
|
+
0% {
|
|
350
|
+
background-position: 20% 30%, 80% 70%, 50% 50%;
|
|
351
|
+
transform: translate(0%, 0%) scale(1) rotate(0deg);
|
|
352
|
+
}
|
|
353
|
+
25% {
|
|
354
|
+
background-position: 25% 32%, 75% 68%, 55% 48%;
|
|
355
|
+
transform: translate(5%, 4%) scale(1.05) rotate(1deg);
|
|
356
|
+
}
|
|
357
|
+
50% {
|
|
358
|
+
background-position: 18% 34%, 82% 66%, 45% 52%;
|
|
359
|
+
transform: translate(-3%, 6%) scale(0.95) rotate(-1deg);
|
|
360
|
+
}
|
|
361
|
+
75% {
|
|
362
|
+
background-position: 23% 29%, 77% 71%, 51% 49%;
|
|
363
|
+
transform: translate(4%, -2%) scale(1.03) rotate(0.5deg);
|
|
364
|
+
}
|
|
365
|
+
100% {
|
|
366
|
+
background-position: 20% 30%, 80% 70%, 50% 50%;
|
|
367
|
+
transform: translate(0%, 0%) scale(1) rotate(0deg);
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
@keyframes lavaFlow2 {
|
|
372
|
+
0% {
|
|
373
|
+
background-position: 70% 20%, 30% 80%, 60% 40%;
|
|
374
|
+
transform: translate(0%, 0%) scale(1) rotate(0deg);
|
|
375
|
+
}
|
|
376
|
+
25% {
|
|
377
|
+
background-position: 67% 21%, 33% 79%, 58% 38%;
|
|
378
|
+
transform: translate(-5%, 3%) scale(1.04) rotate(-1deg);
|
|
379
|
+
}
|
|
380
|
+
50% {
|
|
381
|
+
background-position: 72% 18%, 28% 82%, 62% 42%;
|
|
382
|
+
transform: translate(3%, 5%) scale(0.96) rotate(1deg);
|
|
383
|
+
}
|
|
384
|
+
75% {
|
|
385
|
+
background-position: 69% 19%, 31% 81%, 59% 41%;
|
|
386
|
+
transform: translate(-4%, -3%) scale(1.05) rotate(-0.5deg);
|
|
387
|
+
}
|
|
388
|
+
100% {
|
|
389
|
+
background-position: 70% 20%, 30% 80%, 60% 40%;
|
|
390
|
+
transform: translate(0%, 0%) scale(1) rotate(0deg);
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
@keyframes lavaFlow3 {
|
|
395
|
+
0% {
|
|
396
|
+
background-position: 40% 60%, 60% 40%, 25% 75%;
|
|
397
|
+
transform: translate(0%, 0%) scale(1) rotate(0deg);
|
|
398
|
+
}
|
|
399
|
+
25% {
|
|
400
|
+
background-position: 42% 61%, 58% 39%, 27% 73%;
|
|
401
|
+
transform: translate(3%, 2%) scale(1.03) rotate(0.8deg);
|
|
402
|
+
}
|
|
403
|
+
50% {
|
|
404
|
+
background-position: 38% 62%, 62% 38%, 23% 77%;
|
|
405
|
+
transform: translate(-2%, 4%) scale(0.97) rotate(-0.8deg);
|
|
406
|
+
}
|
|
407
|
+
75% {
|
|
408
|
+
background-position: 41% 60%, 59% 40%, 26% 74%;
|
|
409
|
+
transform: translate(3.5%, -1%) scale(1.02) rotate(0.5deg);
|
|
410
|
+
}
|
|
411
|
+
100% {
|
|
412
|
+
background-position: 40% 60%, 60% 40%, 25% 75%;
|
|
413
|
+
transform: translate(0%, 0%) scale(1) rotate(0deg);
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.login-page-container {
|
|
418
|
+
background: #0f172a; /* Dark slate background */
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.login-background {
|
|
422
|
+
position: fixed;
|
|
423
|
+
top: 0;
|
|
424
|
+
left: 0;
|
|
425
|
+
width: 100%;
|
|
426
|
+
height: 100%;
|
|
427
|
+
z-index: 0;
|
|
428
|
+
overflow: hidden;
|
|
429
|
+
pointer-events: none;
|
|
430
|
+
background: #0f172a; /* Dark slate base */
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.login-background-layer {
|
|
434
|
+
position: absolute;
|
|
435
|
+
top: -100%;
|
|
436
|
+
left: -100%;
|
|
437
|
+
width: 300%;
|
|
438
|
+
height: 300%;
|
|
439
|
+
pointer-events: none;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
/* Dark background with animated gradients - visible and cheerful */
|
|
443
|
+
.login-background-layer-1 {
|
|
444
|
+
background:
|
|
445
|
+
radial-gradient(circle 1400px at 20% 30%, rgba(101, 212, 5, 0.25) 0%, rgba(101, 212, 5, 0.1) 20%, rgba(101, 212, 5, 0.05) 35%, transparent 60%),
|
|
446
|
+
radial-gradient(circle 1600px at 80% 70%, rgba(199, 255, 130, 0.2) 0%, rgba(199, 255, 130, 0.08) 20%, rgba(199, 255, 130, 0.04) 35%, transparent 60%),
|
|
447
|
+
radial-gradient(circle 1800px at 50% 50%, rgba(86, 180, 4, 0.18) 0%, rgba(86, 180, 4, 0.07) 20%, rgba(86, 180, 4, 0.03) 35%, transparent 65%);
|
|
448
|
+
background-size: 200% 200%, 220% 220%, 240% 240%;
|
|
449
|
+
background-position: 20% 30%, 80% 70%, 50% 50%;
|
|
450
|
+
background-repeat: no-repeat;
|
|
451
|
+
animation: lavaFlow1 120s ease-in-out infinite;
|
|
452
|
+
opacity: 1;
|
|
453
|
+
will-change: transform, background-position;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.login-background-layer-2 {
|
|
457
|
+
background:
|
|
458
|
+
radial-gradient(circle 1500px at 70% 20%, rgba(79, 245, 252, 0.22) 0%, rgba(79, 245, 252, 0.09) 20%, rgba(79, 245, 252, 0.04) 35%, transparent 60%),
|
|
459
|
+
radial-gradient(circle 1700px at 30% 80%, rgba(8, 145, 178, 0.2) 0%, rgba(8, 145, 178, 0.08) 20%, rgba(8, 145, 178, 0.04) 35%, transparent 60%),
|
|
460
|
+
radial-gradient(circle 1900px at 60% 40%, rgba(6, 182, 212, 0.16) 0%, rgba(6, 182, 212, 0.06) 20%, rgba(6, 182, 212, 0.03) 35%, transparent 65%);
|
|
461
|
+
background-size: 210% 210%, 230% 230%, 250% 250%;
|
|
462
|
+
background-position: 70% 20%, 30% 80%, 60% 40%;
|
|
463
|
+
background-repeat: no-repeat;
|
|
464
|
+
animation: lavaFlow2 100s ease-in-out infinite;
|
|
465
|
+
opacity: 1;
|
|
466
|
+
will-change: transform, background-position;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.login-background-layer-3 {
|
|
470
|
+
background:
|
|
471
|
+
radial-gradient(circle 1300px at 40% 60%, rgba(255, 207, 51, 0.18) 0%, rgba(255, 207, 51, 0.07) 20%, rgba(255, 207, 51, 0.04) 35%, transparent 60%),
|
|
472
|
+
radial-gradient(circle 1400px at 60% 40%, rgba(101, 212, 5, 0.2) 0%, rgba(101, 212, 5, 0.08) 20%, rgba(101, 212, 5, 0.04) 35%, transparent 60%),
|
|
473
|
+
radial-gradient(circle 1600px at 25% 75%, rgba(199, 255, 130, 0.15) 0%, rgba(199, 255, 130, 0.06) 20%, rgba(199, 255, 130, 0.03) 35%, transparent 65%);
|
|
474
|
+
background-size: 220% 220%, 200% 200%, 230% 230%;
|
|
475
|
+
background-position: 40% 60%, 60% 40%, 25% 75%;
|
|
476
|
+
background-repeat: no-repeat;
|
|
477
|
+
animation: lavaFlow3 140s ease-in-out infinite;
|
|
478
|
+
opacity: 1;
|
|
479
|
+
will-change: transform, background-position;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.login-content {
|
|
483
|
+
position: relative;
|
|
484
|
+
z-index: 1;
|
|
485
|
+
display: flex;
|
|
486
|
+
justify-content: center;
|
|
487
|
+
align-items: center;
|
|
488
|
+
width: 100%;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
@theme inline {
|
|
492
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
493
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
494
|
+
--radius-lg: var(--radius);
|
|
495
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
496
|
+
--color-background: var(--background);
|
|
497
|
+
--color-foreground: var(--foreground);
|
|
498
|
+
--color-card: var(--card);
|
|
499
|
+
--color-card-foreground: var(--card-foreground);
|
|
500
|
+
--color-popover: var(--popover);
|
|
501
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
502
|
+
--color-primary: var(--primary);
|
|
503
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
504
|
+
--color-secondary: var(--secondary);
|
|
505
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
506
|
+
--color-muted: var(--muted);
|
|
507
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
508
|
+
--color-accent: var(--accent);
|
|
509
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
510
|
+
--color-destructive: var(--destructive);
|
|
511
|
+
--color-border: var(--border);
|
|
512
|
+
--color-input: var(--input);
|
|
513
|
+
--color-ring: var(--ring);
|
|
514
|
+
--color-chart-1: var(--chart-1);
|
|
515
|
+
--color-chart-2: var(--chart-2);
|
|
516
|
+
--color-chart-3: var(--chart-3);
|
|
517
|
+
--color-chart-4: var(--chart-4);
|
|
518
|
+
--color-chart-5: var(--chart-5);
|
|
519
|
+
--color-sidebar: var(--sidebar);
|
|
520
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
521
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
522
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
523
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
524
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
525
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
526
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
@layer base {
|
|
530
|
+
* {
|
|
531
|
+
@apply border-border outline-ring/50;
|
|
532
|
+
}
|
|
533
|
+
body {
|
|
534
|
+
@apply bg-background text-foreground;
|
|
535
|
+
}
|
|
536
|
+
/* Checkbox accent color - matches multi-edit button color */
|
|
537
|
+
input[type="checkbox"] {
|
|
538
|
+
accent-color: var(--color-accent-600);
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
/* =================================================================
|
|
543
|
+
Inline edit affordance (click-to-edit text in lists)
|
|
544
|
+
================================================================= */
|
|
545
|
+
.inline-edit-trigger {
|
|
546
|
+
cursor: text; /* "caret mode" / I-beam */
|
|
547
|
+
user-select: text;
|
|
548
|
+
border-radius: calc(var(--radius) - 2px);
|
|
549
|
+
outline: none;
|
|
550
|
+
/* Defaults tuned for "grey" edit affordance in lighter list rows */
|
|
551
|
+
--inline-edit-hover-border: rgb(209 213 219); /* gray-300 */
|
|
552
|
+
--inline-edit-hover-bg: rgb(243 244 246); /* gray-100 */
|
|
553
|
+
--inline-edit-active-border: rgb(156 163 175); /* gray-400 */
|
|
554
|
+
transition:
|
|
555
|
+
box-shadow 120ms ease,
|
|
556
|
+
background-image 120ms ease;
|
|
557
|
+
|
|
558
|
+
/* Use inset border so it respects border-radius */
|
|
559
|
+
box-shadow: inset 0 0 0 1px transparent;
|
|
560
|
+
background-image: none;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.inline-edit-trigger:hover {
|
|
564
|
+
box-shadow: inset 0 0 0 1px var(--inline-edit-hover-border);
|
|
565
|
+
background-image: linear-gradient(
|
|
566
|
+
0deg,
|
|
567
|
+
color-mix(in srgb, var(--inline-edit-hover-bg) 88%, transparent),
|
|
568
|
+
color-mix(in srgb, var(--inline-edit-hover-bg) 88%, transparent)
|
|
569
|
+
);
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
.inline-edit-trigger:active {
|
|
573
|
+
box-shadow: inset 0 0 0 1px var(--inline-edit-active-border);
|
|
574
|
+
}
|