@l3mpire/ui 2.5.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 (10) hide show
  1. package/README.md +211 -0
  2. package/USAGE.md +1025 -0
  3. package/dist/index.d.mts +584 -0
  4. package/dist/index.d.ts +584 -0
  5. package/dist/index.js +4339 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +4256 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +80 -0
  10. package/src/styles/globals.css +524 -0
package/package.json ADDED
@@ -0,0 +1,80 @@
1
+ {
2
+ "name": "@l3mpire/ui",
3
+ "version": "2.5.1",
4
+ "publishConfig": {
5
+ "registry": "https://registry.npmjs.org",
6
+ "access": "public"
7
+ },
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/l3mpire/lemds-product-design.git",
11
+ "directory": "packages/ui"
12
+ },
13
+ "sideEffects": [
14
+ "**/*.css"
15
+ ],
16
+ "exports": {
17
+ ".": {
18
+ "import": {
19
+ "types": "./dist/index.d.mts",
20
+ "default": "./dist/index.mjs"
21
+ },
22
+ "require": {
23
+ "types": "./dist/index.d.ts",
24
+ "default": "./dist/index.js"
25
+ }
26
+ },
27
+ "./globals.css": "./src/styles/globals.css"
28
+ },
29
+ "main": "./dist/index.js",
30
+ "module": "./dist/index.mjs",
31
+ "types": "./dist/index.d.ts",
32
+ "files": [
33
+ "dist",
34
+ "src/styles",
35
+ "USAGE.md"
36
+ ],
37
+ "peerDependencies": {
38
+ "react": ">=18",
39
+ "react-dom": ">=18",
40
+ "@l3mpire/icons": "0.3.5"
41
+ },
42
+ "dependencies": {
43
+ "@dnd-kit/core": "^6.3.1",
44
+ "@dnd-kit/sortable": "^10.0.0",
45
+ "@dnd-kit/utilities": "^3.2.2",
46
+ "@radix-ui/react-avatar": "^1.1.11",
47
+ "@radix-ui/react-checkbox": "^1.3.3",
48
+ "@radix-ui/react-dialog": "^1.1.15",
49
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
50
+ "@radix-ui/react-label": "^2.1.8",
51
+ "@radix-ui/react-popover": "^1.1.15",
52
+ "@radix-ui/react-slot": "^1",
53
+ "@radix-ui/react-switch": "^1.2.6",
54
+ "@radix-ui/react-tabs": "^1.1.13",
55
+ "@radix-ui/react-toast": "^1.2.15",
56
+ "@radix-ui/react-tooltip": "^1.2.8",
57
+ "@tanstack/react-table": "^8.21.3",
58
+ "class-variance-authority": "^0.7",
59
+ "clsx": "^2",
60
+ "tailwind-merge": "^3",
61
+ "@l3mpire/icons": "0.3.5",
62
+ "@l3mpire/tokens": "0.5.3"
63
+ },
64
+ "devDependencies": {
65
+ "@types/react": "^19",
66
+ "@types/react-dom": "^19",
67
+ "react": "^19",
68
+ "react-dom": "^19",
69
+ "tailwindcss": "^4",
70
+ "tsup": "^8",
71
+ "typescript": "^5",
72
+ "@l3mpire/icons": "0.3.5"
73
+ },
74
+ "scripts": {
75
+ "build": "cp ../../USAGE.md ./USAGE.md && tsup",
76
+ "dev": "tsup --watch",
77
+ "lint": "echo 'TODO: lint'",
78
+ "clean": "rm -rf dist .turbo"
79
+ }
80
+ }
package/src/styles/globals.css ADDED
@@ -0,0 +1,524 @@
1
+ @import "tailwindcss";
2
+ @import "@l3mpire/tokens/css";
3
+ @import "@l3mpire/tokens/css/tokens-dark";
4
+
5
+ @source "../**/*.{ts,tsx}";
6
+
7
+ @custom-variant dark (&:is([data-theme="dark"] *));
8
+
9
+ @theme inline {
10
+ /* ── Spacing ───────────────────────────────────────────────────────────── */
11
+ --spacing-none: 0;
12
+ --spacing-2xs: var(--spacing-2xs);
13
+ --spacing-xs: var(--spacing-xs);
14
+ --spacing-sm: var(--spacing-sm);
15
+ --spacing-base: var(--spacing-base);
16
+ --spacing-md: var(--spacing-md);
17
+ --spacing-lg: var(--spacing-lg);
18
+ --spacing-xl: var(--spacing-xl);
19
+ --spacing-2xl: var(--spacing-2xl);
20
+ --spacing-3xl: var(--spacing-3xl);
21
+ --spacing-4xl: var(--spacing-4xl);
22
+ --spacing-5xl: var(--spacing-5xl);
23
+
24
+ /* ── Border Radius ─────────────────────────────────────────────────────── */
25
+ --radius-none: 0;
26
+ --radius-2xs: var(--radius-2xs);
27
+ --radius-xs: var(--radius-xs);
28
+ --radius-sm: var(--radius-sm);
29
+ --radius-base: var(--radius-base);
30
+ --radius-md: var(--radius-md);
31
+ --radius-lg: var(--radius-lg);
32
+ --radius-xl: var(--radius-xl);
33
+ --radius-full: var(--radius-full);
34
+
35
+ /* ── Font Size ─────────────────────────────────────────────────────────── */
36
+ --font-size-xxs: var(--font-size-size-xxs);
37
+ --font-size-xs: var(--font-size-size-xs);
38
+ --font-size-sm: var(--font-size-size-sm);
39
+ --font-size-base: var(--font-size-base);
40
+ --font-size-md: var(--font-size-size-md);
41
+ --font-size-lg: var(--font-size-size-lg);
42
+ --font-size-xl: var(--font-size-size-xl);
43
+ --text-xxs: var(--font-size-size-xxs);
44
+ --text-xs: var(--font-size-size-xs);
45
+ --text-sm: var(--font-size-size-sm);
46
+ --text-base: var(--font-size-base);
47
+ --text-md: var(--font-size-size-md);
48
+ --text-lg: var(--font-size-size-lg);
49
+ --text-xl: var(--font-size-size-xl);
50
+
51
+ /* ── Line Height ───────────────────────────────────────────────────────── */
52
+ --leading-2xs: var(--font-line-height-line-height-2xs);
53
+ --leading-xs: var(--font-line-height-line-height-xs);
54
+ --leading-sm: var(--font-line-height-line-height-sm);
55
+ --leading-base: var(--font-line-height-base);
56
+ --leading-md: var(--font-line-height-line-height-md);
57
+ --leading-lg: var(--font-line-height-line-height-lg);
58
+
59
+ /* ── Font Weight ───────────────────────────────────────────────────────── */
60
+ --font-weight-regular: var(--font-weight-regular);
61
+ --font-weight-medium: var(--font-weight-medium);
62
+ --font-weight-bold: var(--font-weight-bold);
63
+
64
+ /* ── Shadows ───────────────────────────────────────────────────────────── */
65
+ --shadow-sm: 0 1px 3px 0 var(--shadow-4);
66
+ --shadow-md: 0 0 4px 0 var(--shadow-4), 0 4px 8px 0 var(--shadow-6);
67
+ --shadow-lg: 0 0 4px 0 var(--shadow-4), 0 8px 16px 0 var(--shadow-8);
68
+ --shadow-focus-ring: 0 0 0 3px rgba(49, 107, 255, 0.15);
69
+
70
+ /* ── Colors: Semantic (shadcn compatible) ───────────────────────────────── */
71
+ --color-background: var(--core-bg-main-primary);
72
+ --color-foreground: var(--core-text-main-primary);
73
+ --color-card: var(--core-bg-main-primary);
74
+ --color-card-foreground: var(--core-text-main-primary);
75
+ --color-popover: var(--core-bg-main-primary);
76
+ --color-popover-foreground: var(--core-text-main-primary);
77
+ --color-primary: var(--interactive-bg-primary-dark-default);
78
+ --color-primary-foreground: var(--core-text-main-invert-primary);
79
+ --color-secondary: var(--core-bg-main-secondary);
80
+ --color-secondary-foreground: var(--core-text-main-primary);
81
+ --color-muted: var(--core-bg-main-tertiary);
82
+ --color-muted-foreground: var(--core-text-main-tertiary);
83
+ --color-accent: var(--core-bg-main-secondary);
84
+ --color-accent-foreground: var(--core-text-main-primary);
85
+ --color-destructive: var(--interactive-bg-critical-dark-default);
86
+ --color-destructive-foreground: var(--core-text-main-invert-primary);
87
+ --color-success: var(--interactive-bg-success-dark-default);
88
+ --color-success-foreground: var(--core-text-main-invert-primary);
89
+ --color-warning: var(--interactive-bg-warning-dark-default);
90
+ --color-warning-foreground: var(--core-text-main-primary);
91
+ --color-border: var(--core-border-main-primary);
92
+ --color-input: var(--core-border-main-secondary);
93
+ --color-ring: var(--interactive-border-primary-dark-default);
94
+
95
+ /* ── Colors: Avatar ────────────────────────────────────────────────────── */
96
+ --color-avatar-fallback-bg: var(--comp-avatar-fallback-bg);
97
+ --color-avatar-fallback-text: var(--comp-avatar-fallback-text);
98
+
99
+ /* ── Colors: BrowserTab ────────────────────────────────────────────────── */
100
+ --color-browser-tab-border: var(--comp-browser-tab-border);
101
+ --color-browser-tab-item-bg: var(--comp-browser-tab-item-bg);
102
+ --color-browser-tab-item-border: var(--comp-browser-tab-item-border);
103
+ --color-browser-tab-item-active-text: var(--comp-browser-tab-item-active-text);
104
+ --color-browser-tab-item-active-icon: var(--comp-browser-tab-item-active-icon);
105
+ --color-browser-tab-item-inactive-text: var(--comp-browser-tab-item-inactive-text);
106
+ --color-browser-tab-item-inactive-icon: var(--comp-browser-tab-item-inactive-icon);
107
+ --color-browser-tab-item-hover-icon: var(--comp-browser-tab-item-hover-icon);
108
+
109
+ /* ── Colors: Badge ─────────────────────────────────────────────────────── */
110
+ --color-badge-solid-primary-bg: var(--comp-badge-solid-primary-bg);
111
+ --color-badge-solid-primary-text: var(--comp-badge-solid-primary-text);
112
+ --color-badge-solid-success-bg: var(--comp-badge-solid-success-bg);
113
+ --color-badge-solid-success-text: var(--comp-badge-solid-success-text);
114
+ --color-badge-solid-critical-bg: var(--comp-badge-solid-critical-bg);
115
+ --color-badge-solid-critical-text: var(--comp-badge-solid-critical-text);
116
+ --color-badge-solid-warning-bg: var(--comp-badge-solid-warning-bg);
117
+ --color-badge-solid-warning-text: var(--comp-badge-solid-warning-text);
118
+ --color-badge-solid-neutral-bg: var(--comp-badge-solid-neutral-bg);
119
+ --color-badge-solid-neutral-text: var(--comp-badge-solid-neutral-text);
120
+ --color-badge-light-primary-bg: var(--comp-badge-light-primary-bg);
121
+ --color-badge-light-primary-text: var(--comp-badge-light-primary-text);
122
+ --color-badge-light-success-bg: var(--comp-badge-light-success-bg);
123
+ --color-badge-light-success-text: var(--comp-badge-light-success-text);
124
+ --color-badge-light-critical-bg: var(--comp-badge-light-critical-bg);
125
+ --color-badge-light-critical-text: var(--comp-badge-light-critical-text);
126
+ --color-badge-light-warning-bg: var(--comp-badge-light-warning-bg);
127
+ --color-badge-light-warning-text: var(--comp-badge-light-warning-text);
128
+ --color-badge-light-neutral-bg: var(--comp-badge-light-neutral-bg);
129
+ --color-badge-light-neutral-text: var(--comp-badge-light-neutral-text);
130
+ --color-badge-outlined-primary-border: var(--comp-badge-outlined-primary-border);
131
+ --color-badge-outlined-primary-text: var(--comp-badge-outlined-primary-text);
132
+ --color-badge-outlined-success-border: var(--comp-badge-outlined-success-border);
133
+ --color-badge-outlined-success-text: var(--comp-badge-outlined-success-text);
134
+ --color-badge-outlined-critical-border: var(--comp-badge-outlined-critical-border);
135
+ --color-badge-outlined-critical-text: var(--comp-badge-outlined-critical-text);
136
+ --color-badge-outlined-warning-border: var(--comp-badge-outlined-warning-border);
137
+ --color-badge-outlined-warning-text: var(--comp-badge-outlined-warning-text);
138
+ --color-badge-outlined-neutral-border: var(--comp-badge-outlined-neutral-border);
139
+ --color-badge-outlined-neutral-text: var(--comp-badge-outlined-neutral-text);
140
+
141
+ /* ── Colors: Button ────────────────────────────────────────────────────── */
142
+ --color-btn-solid-brand-bg-default: var(--comp-btn-solid-brand-bg-default);
143
+ --color-btn-solid-brand-bg-hover: var(--comp-btn-solid-brand-bg-hover);
144
+ --color-btn-solid-brand-bg-pressed: var(--comp-btn-solid-brand-bg-pressed);
145
+ --color-btn-solid-brand-bg-gradient-to-default: var(--comp-btn-solid-brand-bg-gradient-to-default);
146
+ --color-btn-solid-brand-bg-gradient-to-hover: var(--comp-btn-solid-brand-bg-gradient-to-hover);
147
+ --color-btn-solid-brand-bg-gradient-to-pressed: var(--comp-btn-solid-brand-bg-gradient-to-pressed);
148
+ --color-btn-solid-brand-text-default: var(--comp-btn-solid-brand-text-default);
149
+ --color-btn-solid-brand-text-hover: var(--comp-btn-solid-brand-text-hover);
150
+ --color-btn-solid-brand-text-pressed: var(--comp-btn-solid-brand-text-pressed);
151
+ --color-btn-solid-brand-border-default: var(--comp-btn-solid-brand-border-default);
152
+ --color-btn-solid-brand-border-hover: var(--comp-btn-solid-brand-border-hover);
153
+ --color-btn-solid-brand-border-pressed: var(--comp-btn-solid-brand-border-pressed);
154
+ --color-btn-solid-brand-inner-border-default: var(--comp-btn-solid-brand-inner-border-default);
155
+ --color-btn-solid-brand-inner-border-hover: var(--comp-btn-solid-brand-inner-border-hover);
156
+ --color-btn-solid-brand-inner-border-pressed: var(--comp-btn-solid-brand-inner-border-pressed);
157
+ --color-btn-solid-alert-bg-default: var(--comp-btn-solid-alert-bg-default);
158
+ --color-btn-solid-alert-bg-hover: var(--comp-btn-solid-alert-bg-hover);
159
+ --color-btn-solid-alert-bg-pressed: var(--comp-btn-solid-alert-bg-pressed);
160
+ --color-btn-solid-alert-bg-gradient-to-default: var(--comp-btn-solid-alert-bg-gradient-to-default);
161
+ --color-btn-solid-alert-bg-gradient-to-hover: var(--comp-btn-solid-alert-bg-gradient-to-hover);
162
+ --color-btn-solid-alert-bg-gradient-to-pressed: var(--comp-btn-solid-alert-bg-gradient-to-pressed);
163
+ --color-btn-solid-alert-text-default: var(--comp-btn-solid-alert-text-default);
164
+ --color-btn-solid-alert-text-hover: var(--comp-btn-solid-alert-text-hover);
165
+ --color-btn-solid-alert-text-pressed: var(--comp-btn-solid-alert-text-pressed);
166
+ --color-btn-solid-alert-border-default: var(--comp-btn-solid-alert-border-default);
167
+ --color-btn-solid-alert-border-hover: var(--comp-btn-solid-alert-border-hover);
168
+ --color-btn-solid-alert-border-pressed: var(--comp-btn-solid-alert-border-pressed);
169
+ --color-btn-solid-alert-inner-border-default: var(--comp-btn-solid-alert-inner-border-default);
170
+ --color-btn-solid-alert-inner-border-hover: var(--comp-btn-solid-alert-inner-border-hover);
171
+ --color-btn-solid-alert-inner-border-pressed: var(--comp-btn-solid-alert-inner-border-pressed);
172
+ --color-btn-outlined-neutral-bg-default: var(--comp-btn-outlined-neutral-bg-default);
173
+ --color-btn-outlined-neutral-bg-hover: var(--comp-btn-outlined-neutral-bg-hover);
174
+ --color-btn-outlined-neutral-bg-pressed: var(--comp-btn-outlined-neutral-bg-pressed);
175
+ --color-btn-outlined-neutral-bg-gradient-to-default: var(--comp-btn-outlined-neutral-bg-gradient-to-default);
176
+ --color-btn-outlined-neutral-bg-gradient-to-hover: var(--comp-btn-outlined-neutral-bg-gradient-to-hover);
177
+ --color-btn-outlined-neutral-bg-gradient-to-pressed: var(--comp-btn-outlined-neutral-bg-gradient-to-pressed);
178
+ --color-btn-outlined-neutral-text-default: var(--comp-btn-outlined-neutral-text-default);
179
+ --color-btn-outlined-neutral-text-hover: var(--comp-btn-outlined-neutral-text-hover);
180
+ --color-btn-outlined-neutral-text-pressed: var(--comp-btn-outlined-neutral-text-pressed);
181
+ --color-btn-outlined-neutral-border-default: var(--comp-btn-outlined-neutral-border-default);
182
+ --color-btn-outlined-neutral-border-hover: var(--comp-btn-outlined-neutral-border-hover);
183
+ --color-btn-outlined-neutral-border-pressed: var(--comp-btn-outlined-neutral-border-pressed);
184
+ --color-btn-outlined-alert-bg-default: var(--comp-btn-outlined-alert-bg-default);
185
+ --color-btn-outlined-alert-bg-hover: var(--comp-btn-outlined-alert-bg-hover);
186
+ --color-btn-outlined-alert-bg-pressed: var(--comp-btn-outlined-alert-bg-pressed);
187
+ --color-btn-outlined-alert-text-default: var(--comp-btn-outlined-alert-text-default);
188
+ --color-btn-outlined-alert-text-hover: var(--comp-btn-outlined-alert-text-hover);
189
+ --color-btn-outlined-alert-text-pressed: var(--comp-btn-outlined-alert-text-pressed);
190
+ --color-btn-outlined-alert-border-default: var(--comp-btn-outlined-alert-border-default);
191
+ --color-btn-outlined-alert-border-hover: var(--comp-btn-outlined-alert-border-hover);
192
+ --color-btn-outlined-alert-border-pressed: var(--comp-btn-outlined-alert-border-pressed);
193
+ --color-btn-ghost-brand-bg-default: var(--comp-btn-ghost-brand-bg-default);
194
+ --color-btn-ghost-brand-bg-hover: var(--comp-btn-ghost-brand-bg-hover);
195
+ --color-btn-ghost-brand-bg-pressed: var(--comp-btn-ghost-brand-bg-pressed);
196
+ --color-btn-ghost-brand-text-default: var(--comp-btn-ghost-brand-text-default);
197
+ --color-btn-ghost-brand-text-hover: var(--comp-btn-ghost-brand-text-hover);
198
+ --color-btn-ghost-brand-text-pressed: var(--comp-btn-ghost-brand-text-pressed);
199
+ --color-btn-ghost-brand-border-default: var(--comp-btn-ghost-brand-border-default);
200
+ --color-btn-ghost-brand-border-hover: var(--comp-btn-ghost-brand-border-hover);
201
+ --color-btn-ghost-brand-border-pressed: var(--comp-btn-ghost-brand-border-pressed);
202
+ --color-btn-ghost-neutral-bg-default: var(--comp-btn-ghost-neutral-bg-default);
203
+ --color-btn-ghost-neutral-bg-hover: var(--comp-btn-ghost-neutral-bg-hover);
204
+ --color-btn-ghost-neutral-bg-pressed: var(--comp-btn-ghost-neutral-bg-pressed);
205
+ --color-btn-ghost-neutral-text-default: var(--comp-btn-ghost-neutral-text-default);
206
+ --color-btn-ghost-neutral-text-hover: var(--comp-btn-ghost-neutral-text-hover);
207
+ --color-btn-ghost-neutral-text-pressed: var(--comp-btn-ghost-neutral-text-pressed);
208
+ --color-btn-ghost-neutral-border-default: var(--comp-btn-ghost-neutral-border-default);
209
+ --color-btn-ghost-neutral-border-hover: var(--comp-btn-ghost-neutral-border-hover);
210
+ --color-btn-ghost-neutral-border-pressed: var(--comp-btn-ghost-neutral-border-pressed);
211
+ --color-btn-ghost-alert-bg-default: var(--comp-btn-ghost-alert-bg-default);
212
+ --color-btn-ghost-alert-bg-hover: var(--comp-btn-ghost-alert-bg-hover);
213
+ --color-btn-ghost-alert-bg-pressed: var(--comp-btn-ghost-alert-bg-pressed);
214
+ --color-btn-ghost-alert-text-default: var(--comp-btn-ghost-alert-text-default);
215
+ --color-btn-ghost-alert-text-hover: var(--comp-btn-ghost-alert-text-hover);
216
+ --color-btn-ghost-alert-text-pressed: var(--comp-btn-ghost-alert-text-pressed);
217
+ --color-btn-ghost-alert-border-default: var(--comp-btn-ghost-alert-border-default);
218
+ --color-btn-ghost-alert-border-hover: var(--comp-btn-ghost-alert-border-hover);
219
+ --color-btn-ghost-alert-border-pressed: var(--comp-btn-ghost-alert-border-pressed);
220
+ --color-btn-disabled-solid-bg: var(--comp-btn-disabled-solid-bg);
221
+ --color-btn-disabled-solid-text: var(--comp-btn-disabled-solid-text);
222
+ --color-btn-disabled-solid-border: var(--comp-btn-disabled-solid-border);
223
+ --color-btn-disabled-outlined-bg: var(--comp-btn-disabled-outlined-bg);
224
+ --color-btn-disabled-outlined-text: var(--comp-btn-disabled-outlined-text);
225
+ --color-btn-disabled-outlined-border: var(--comp-btn-disabled-outlined-border);
226
+ --color-btn-disabled-ghost-bg: var(--comp-btn-disabled-ghost-bg);
227
+ --color-btn-disabled-ghost-text: var(--comp-btn-disabled-ghost-text);
228
+ --color-btn-disabled-ghost-border: var(--comp-btn-disabled-ghost-border);
229
+
230
+ /* ── Colors: Checkbox ──────────────────────────────────────────────────── */
231
+ --color-checkbox-unchecked-bg: var(--comp-checkbox-unchecked-bg);
232
+ --color-checkbox-unchecked-border-default: var(--comp-checkbox-unchecked-border-default);
233
+ --color-checkbox-unchecked-border-hover: var(--comp-checkbox-unchecked-border-hover);
234
+ --color-checkbox-unchecked-border-pressed: var(--comp-checkbox-unchecked-border-pressed);
235
+ --color-checkbox-checked-bg-default: var(--comp-checkbox-checked-bg-default);
236
+ --color-checkbox-checked-bg-hover: var(--comp-checkbox-checked-bg-hover);
237
+ --color-checkbox-checked-bg-pressed: var(--comp-checkbox-checked-bg-pressed);
238
+ --color-checkbox-checked-icon: var(--comp-checkbox-checked-icon);
239
+ --color-checkbox-disabled-bg: var(--comp-checkbox-disabled-bg);
240
+ --color-checkbox-disabled-border: var(--comp-checkbox-disabled-border);
241
+ --color-checkbox-disabled-icon: var(--comp-checkbox-disabled-icon);
242
+ --color-checkbox-label-default: var(--comp-checkbox-label-default);
243
+ --color-checkbox-label-disabled: var(--comp-checkbox-label-disabled);
244
+
245
+ /* ── Colors: Dropdown ──────────────────────────────────────────────────── */
246
+ --color-dropdown-bg: var(--comp-dropdown-bg);
247
+ --color-dropdown-border: var(--comp-dropdown-border);
248
+ --color-dropdown-item-text: var(--comp-dropdown-item-text);
249
+ --color-dropdown-item-secondary: var(--comp-dropdown-item-secondary);
250
+ --color-dropdown-item-hover: var(--comp-dropdown-item-hover);
251
+ --color-dropdown-item-icon: var(--comp-dropdown-item-icon);
252
+ --color-dropdown-heading-text: var(--comp-dropdown-heading-text);
253
+ --color-dropdown-clear-text: var(--comp-dropdown-clear-text);
254
+
255
+ /* ── Colors: InfoMessage ───────────────────────────────────────────────── */
256
+ --color-info-message-info-bg: var(--comp-info-message-info-bg);
257
+ --color-info-message-info-icon: var(--comp-info-message-info-icon);
258
+ --color-info-message-success-bg: var(--comp-info-message-success-bg);
259
+ --color-info-message-success-icon: var(--comp-info-message-success-icon);
260
+ --color-info-message-alert-bg: var(--comp-info-message-alert-bg);
261
+ --color-info-message-alert-icon: var(--comp-info-message-alert-icon);
262
+ --color-info-message-warning-bg: var(--comp-info-message-warning-bg);
263
+ --color-info-message-warning-icon: var(--comp-info-message-warning-icon);
264
+ --color-info-message-empty-bg: var(--comp-info-message-empty-bg);
265
+ --color-info-message-empty-icon: var(--comp-info-message-empty-icon);
266
+ --color-info-message-title: var(--comp-info-message-title);
267
+ --color-info-message-description: var(--comp-info-message-description);
268
+ --color-info-message-close: var(--comp-info-message-close);
269
+
270
+ /* ── Colors: InputLabel ────────────────────────────────────────────────── */
271
+ --color-input-label-text: var(--comp-input-label-text);
272
+ --color-input-label-optional: var(--comp-input-label-optional);
273
+ --color-input-label-mandatory: var(--comp-input-label-mandatory);
274
+ --color-input-label-icon: var(--comp-input-label-icon);
275
+ --color-input-label-disabled: var(--comp-input-label-disabled);
276
+
277
+ /* ── Colors: Modal ─────────────────────────────────────────────────────── */
278
+ --color-modal-bg: var(--comp-modal-bg);
279
+ --color-modal-border: var(--comp-modal-border);
280
+ --color-modal-overlay: var(--comp-modal-overlay);
281
+ --color-modal-header-title: var(--comp-modal-header-title);
282
+ --color-modal-header-description: var(--comp-modal-header-description);
283
+ --color-modal-header-border: var(--comp-modal-header-border);
284
+ --color-modal-header-close: var(--comp-modal-header-close);
285
+ --color-modal-footer-border: var(--comp-modal-footer-border);
286
+ --color-modal-footer-text: var(--comp-modal-footer-text);
287
+ --color-modal-footer-icon: var(--comp-modal-footer-icon);
288
+
289
+ /* ── Colors: Link ──────────────────────────────────────────────────────── */
290
+ --color-link-neutral-text-default: var(--comp-link-neutral-text-default);
291
+ --color-link-neutral-text-hover: var(--comp-link-neutral-text-hover);
292
+ --color-link-neutral-text-pressed: var(--comp-link-neutral-text-pressed);
293
+ --color-link-brand-text-default: var(--comp-link-brand-text-default);
294
+ --color-link-brand-text-hover: var(--comp-link-brand-text-hover);
295
+ --color-link-brand-text-pressed: var(--comp-link-brand-text-pressed);
296
+ --color-link-alert-text-default: var(--comp-link-alert-text-default);
297
+ --color-link-alert-text-hover: var(--comp-link-alert-text-hover);
298
+ --color-link-alert-text-pressed: var(--comp-link-alert-text-pressed);
299
+ --color-link-success-text-default: var(--comp-link-success-text-default);
300
+ --color-link-success-text-hover: var(--comp-link-success-text-hover);
301
+ --color-link-success-text-pressed: var(--comp-link-success-text-pressed);
302
+ --color-link-warning-text-default: var(--comp-link-warning-text-default);
303
+ --color-link-warning-text-hover: var(--comp-link-warning-text-hover);
304
+ --color-link-warning-text-pressed: var(--comp-link-warning-text-pressed);
305
+ --color-link-disabled-text: var(--comp-link-disabled-text);
306
+
307
+ /* ── Colors: SearchBar ─────────────────────────────────────────────────── */
308
+ --color-search-bar-white-bg: var(--comp-search-bar-white-bg);
309
+ --color-search-bar-grey-bg: var(--comp-search-bar-grey-bg);
310
+ --color-search-bar-border-default: var(--comp-search-bar-border-default);
311
+ --color-search-bar-border-hover: var(--comp-search-bar-border-hover);
312
+ --color-search-bar-border-active: var(--comp-search-bar-border-active);
313
+ --color-search-bar-icon: var(--comp-search-bar-icon);
314
+ --color-search-bar-placeholder: var(--comp-search-bar-placeholder);
315
+ --color-search-bar-text: var(--comp-search-bar-text);
316
+ --color-search-bar-clear: var(--comp-search-bar-clear);
317
+
318
+ /* ── Colors: Select ────────────────────────────────────────────────────── */
319
+ --color-select-bg-default: var(--comp-select-bg-default);
320
+ --color-select-bg-hover: var(--comp-select-bg-hover);
321
+ --color-select-bg-disabled: var(--comp-select-bg-disabled);
322
+ --color-select-bg-error: var(--comp-select-bg-error);
323
+ --color-select-bg-gradient-to: var(--comp-select-bg-gradient-to);
324
+ --color-select-border-default: var(--comp-select-border-default);
325
+ --color-select-border-hover: var(--comp-select-border-hover);
326
+ --color-select-border-error: var(--comp-select-border-error);
327
+ --color-select-border-disabled: var(--comp-select-border-disabled);
328
+ --color-select-text-default: var(--comp-select-text-default);
329
+ --color-select-text-placeholder: var(--comp-select-text-placeholder);
330
+ --color-select-text-disabled: var(--comp-select-text-disabled);
331
+ --color-select-text-multi: var(--comp-select-text-multi);
332
+ --color-select-icon: var(--comp-select-icon);
333
+ --color-select-error-text: var(--comp-select-error-text);
334
+ --color-select-error-icon: var(--comp-select-error-icon);
335
+
336
+ /* ── Colors: Sidebar ────────────────────────────────────────────────────── */
337
+ --color-sidebar-bg: var(--comp-sidebar-bg);
338
+ --color-sidebar-border: var(--comp-sidebar-border);
339
+ --color-sidebar-footer-bg: var(--comp-sidebar-footer-bg);
340
+ --color-sidebar-item-default-icon: var(--comp-sidebar-item-default-icon);
341
+ --color-sidebar-item-default-text: var(--comp-sidebar-item-default-text);
342
+ --color-sidebar-item-hover-bg: var(--comp-sidebar-item-hover-bg);
343
+ --color-sidebar-item-hover-icon: var(--comp-sidebar-item-hover-icon);
344
+ --color-sidebar-item-hover-text: var(--comp-sidebar-item-hover-text);
345
+ --color-sidebar-item-active-bg: var(--comp-sidebar-item-active-bg);
346
+ --color-sidebar-item-active-icon: var(--comp-sidebar-item-active-icon);
347
+ --color-sidebar-item-active-text: var(--comp-sidebar-item-active-text);
348
+ --color-sidebar-item-chevron: var(--comp-sidebar-item-chevron);
349
+ --color-sidebar-heading-text: var(--comp-sidebar-heading-text);
350
+
351
+ /* ── Colors: Switch ────────────────────────────────────────────────────── */
352
+ --color-switch-off-track-default: var(--comp-switch-off-track-default);
353
+ --color-switch-off-track-hover: var(--comp-switch-off-track-hover);
354
+ --color-switch-off-track-disabled: var(--comp-switch-off-track-disabled);
355
+ --color-switch-on-track-default: var(--comp-switch-on-track-default);
356
+ --color-switch-on-track-hover: var(--comp-switch-on-track-hover);
357
+ --color-switch-on-track-disabled: var(--comp-switch-on-track-disabled);
358
+ --color-switch-thumb-bg: var(--comp-switch-thumb-bg);
359
+ --color-switch-thumb-disabled: var(--comp-switch-thumb-disabled);
360
+ --color-switch-label-text: var(--comp-switch-label-text);
361
+ --color-switch-label-disabled: var(--comp-switch-label-disabled);
362
+
363
+ /* ── Colors: Tab ────────────────────────────────────────────────────────── */
364
+ --color-tab-border: var(--comp-tab-border);
365
+ --color-tab-item-default-text: var(--comp-tab-item-default-text);
366
+ --color-tab-item-hover-bg: var(--comp-tab-item-hover-bg);
367
+ --color-tab-item-active-text: var(--comp-tab-item-active-text);
368
+ --color-tab-item-active-bg: var(--comp-tab-item-active-bg);
369
+ --color-tab-item-active-border: var(--comp-tab-item-active-border);
370
+
371
+ /* ── Colors: Tag ───────────────────────────────────────────────────────── */
372
+ --color-tag-brand-bg: var(--comp-tag-brand-bg);
373
+ --color-tag-brand-text: var(--comp-tag-brand-text);
374
+ --color-tag-neutral-bg: var(--comp-tag-neutral-bg);
375
+ --color-tag-neutral-text: var(--comp-tag-neutral-text);
376
+
377
+ /* ── Colors: TextInput ─────────────────────────────────────────────────── */
378
+ --color-text-input-bg-default: var(--comp-text-input-bg-default);
379
+ --color-text-input-bg-disabled: var(--comp-text-input-bg-disabled);
380
+ --color-text-input-border-default: var(--comp-text-input-border-default);
381
+ --color-text-input-border-hover: var(--comp-text-input-border-hover);
382
+ --color-text-input-border-success: var(--comp-text-input-border-success);
383
+ --color-text-input-border-error: var(--comp-text-input-border-error);
384
+ --color-text-input-border-disabled: var(--comp-text-input-border-disabled);
385
+ --color-text-input-text-default: var(--comp-text-input-text-default);
386
+ --color-text-input-text-placeholder: var(--comp-text-input-text-placeholder);
387
+ --color-text-input-text-disabled: var(--comp-text-input-text-disabled);
388
+ --color-text-input-icon: var(--comp-text-input-icon);
389
+ --color-text-input-button-bg: var(--comp-text-input-button-bg);
390
+ --color-text-input-button-bg-hover: var(--comp-text-input-button-bg-hover);
391
+ --color-text-input-button-gradient-to: var(--comp-text-input-button-gradient-to);
392
+ --color-text-input-button-border: var(--comp-text-input-button-border);
393
+ --color-text-input-error-text: var(--comp-text-input-error-text);
394
+ --color-text-input-error-icon: var(--comp-text-input-error-icon);
395
+
396
+ /* ── Colors: TextArea ──────────────────────────────────────────────────── */
397
+ --color-textarea-bg-default: var(--comp-textarea-bg-default);
398
+ --color-textarea-bg-disabled: var(--comp-textarea-bg-disabled);
399
+ --color-textarea-border-default: var(--comp-textarea-border-default);
400
+ --color-textarea-border-hover: var(--comp-textarea-border-hover);
401
+ --color-textarea-border-success: var(--comp-textarea-border-success);
402
+ --color-textarea-border-error: var(--comp-textarea-border-error);
403
+ --color-textarea-border-disabled: var(--comp-textarea-border-disabled);
404
+ --color-textarea-text-default: var(--comp-textarea-text-default);
405
+ --color-textarea-text-placeholder: var(--comp-textarea-text-placeholder);
406
+ --color-textarea-text-disabled: var(--comp-textarea-text-disabled);
407
+ --color-textarea-char-limit: var(--comp-textarea-char-limit);
408
+ --color-textarea-handle-default: var(--comp-textarea-handle-default);
409
+ --color-textarea-handle-disabled: var(--comp-textarea-handle-disabled);
410
+ --color-textarea-error-text: var(--comp-textarea-error-text);
411
+ --color-textarea-error-icon: var(--comp-textarea-error-icon);
412
+
413
+ /* ── Colors: Table ──────────────────────────────────────────────────────── */
414
+ --color-table-bg: var(--comp-table-bg);
415
+ --color-table-border: var(--comp-table-border);
416
+ --color-table-head-bg-default: var(--comp-table-head-bg-default);
417
+ --color-table-head-bg-hover: var(--comp-table-head-bg-hover);
418
+ --color-table-head-text: var(--comp-table-head-text);
419
+ --color-table-head-icon: var(--comp-table-head-icon);
420
+ --color-table-row-bg-default: var(--comp-table-row-bg-default);
421
+ --color-table-row-bg-hover: var(--comp-table-row-bg-hover);
422
+ --color-table-row-bg-selected: var(--comp-table-row-bg-selected);
423
+ --color-table-cell-text-primary: var(--comp-table-cell-text-primary);
424
+ --color-table-cell-text-secondary: var(--comp-table-cell-text-secondary);
425
+
426
+ /* ── Colors: Toast ─────────────────────────────────────────────────────── */
427
+ --color-toast-info-bg: var(--comp-toast-info-bg);
428
+ --color-toast-info-icon: var(--comp-toast-info-icon);
429
+ --color-toast-success-bg: var(--comp-toast-success-bg);
430
+ --color-toast-success-icon: var(--comp-toast-success-icon);
431
+ --color-toast-alert-bg: var(--comp-toast-alert-bg);
432
+ --color-toast-alert-icon: var(--comp-toast-alert-icon);
433
+ --color-toast-warning-bg: var(--comp-toast-warning-bg);
434
+ --color-toast-warning-icon: var(--comp-toast-warning-icon);
435
+ --color-toast-border: var(--comp-toast-border);
436
+ --color-toast-title: var(--comp-toast-title);
437
+ --color-toast-subtitle: var(--comp-toast-subtitle);
438
+ --color-toast-close: var(--comp-toast-close);
439
+
440
+ /* ── Colors: Tooltip ───────────────────────────────────────────────────── */
441
+ --color-tooltip-default-bg: var(--comp-tooltip-default-bg);
442
+ --color-tooltip-default-text: var(--comp-tooltip-default-text);
443
+ --color-tooltip-default-icon: var(--comp-tooltip-default-icon);
444
+ --color-tooltip-invert-bg: var(--comp-tooltip-invert-bg);
445
+ --color-tooltip-invert-text: var(--comp-tooltip-invert-text);
446
+ --color-tooltip-invert-icon: var(--comp-tooltip-invert-icon);
447
+ --color-tooltip-invert-border: var(--comp-tooltip-invert-border);
448
+
449
+ /* ── Colors: UserMenu ─────────────────────────────────────────────────── */
450
+ --color-user-menu-bg: var(--comp-user-menu-bg);
451
+ --color-user-menu-border: var(--comp-user-menu-border);
452
+ --color-user-menu-name: var(--comp-user-menu-name);
453
+ --color-user-menu-subtitle: var(--comp-user-menu-subtitle);
454
+
455
+ /* ── Animations ────────────────────────────────────────────────────────── */
456
+ --animate-tooltip-in: tooltip-in 150ms ease-out;
457
+ --animate-tooltip-out: tooltip-out 100ms ease-in;
458
+ --animate-modal-overlay-in: modal-overlay-in 200ms ease-out;
459
+ --animate-modal-overlay-out: modal-overlay-out 150ms ease-in;
460
+ --animate-modal-in: modal-in 200ms ease-out;
461
+ --animate-modal-out: modal-out 150ms ease-in;
462
+ --animate-sidepanel-in: sidepanel-in 250ms ease-out;
463
+ --animate-sidepanel-out: sidepanel-out 200ms ease-in;
464
+ }
465
+
466
+ @keyframes tooltip-in {
467
+ from {
468
+ opacity: 0;
469
+ transform: scale(0.95);
470
+ }
471
+ to {
472
+ opacity: 1;
473
+ transform: scale(1);
474
+ }
475
+ }
476
+
477
+ @keyframes tooltip-out {
478
+ from {
479
+ opacity: 1;
480
+ transform: scale(1);
481
+ }
482
+ to {
483
+ opacity: 0;
484
+ transform: scale(0.95);
485
+ }
486
+ }
487
+
488
+ @keyframes modal-overlay-in {
489
+ from { opacity: 0; }
490
+ to { opacity: 1; }
491
+ }
492
+ @keyframes modal-overlay-out {
493
+ from { opacity: 1; }
494
+ to { opacity: 0; }
495
+ }
496
+ @keyframes modal-in {
497
+ from {
498
+ opacity: 0;
499
+ transform: translate(-50%, -50%) scale(0.95);
500
+ }
501
+ to {
502
+ opacity: 1;
503
+ transform: translate(-50%, -50%) scale(1);
504
+ }
505
+ }
506
+ @keyframes modal-out {
507
+ from {
508
+ opacity: 1;
509
+ transform: translate(-50%, -50%) scale(1);
510
+ }
511
+ to {
512
+ opacity: 0;
513
+ transform: translate(-50%, -50%) scale(0.95);
514
+ }
515
+ }
516
+
517
+ @keyframes sidepanel-in {
518
+ from { transform: translateX(100%); }
519
+ to { transform: translateX(0); }
520
+ }
521
+ @keyframes sidepanel-out {
522
+ from { transform: translateX(0); }
523
+ to { transform: translateX(100%); }
524
+ }