@dbcdk/react-components 0.0.86 → 0.0.88
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/dist/components/popover/Popover.js +3 -3
- package/dist/components/theme-button/ThemeButton.d.ts +7 -0
- package/dist/components/theme-button/ThemeButton.js +19 -0
- package/dist/hooks/useTheme.d.ts +3 -1
- package/dist/hooks/useTheme.js +9 -3
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/styles/themes/dbc/colors.css +242 -0
- package/package.json +1 -1
- package/dist/styles/themes/dbc/dark.css +0 -226
- package/dist/styles/themes/dbc/light.css +0 -220
|
@@ -79,7 +79,7 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
|
|
|
79
79
|
const togglePopover = useCallback((e) => {
|
|
80
80
|
var _a, _b;
|
|
81
81
|
triggerElRef.current =
|
|
82
|
-
(_b = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _a !== void 0 ? _a :
|
|
82
|
+
(_b = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _a !== void 0 ? _a : e.currentTarget) !== null && _b !== void 0 ? _b : containerRef.current;
|
|
83
83
|
if (isOpen)
|
|
84
84
|
closePopover('trigger');
|
|
85
85
|
else
|
|
@@ -238,8 +238,8 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
|
|
|
238
238
|
.join(' '), children: Trigger(togglePopover, icon, isOpen) }), mounted &&
|
|
239
239
|
isOpen &&
|
|
240
240
|
createPortal(_jsx("div", { id: resolvedContentId, ref: node => {
|
|
241
|
-
|
|
242
|
-
|
|
241
|
+
;
|
|
242
|
+
contentRef.current = node;
|
|
243
243
|
setOverlayRef(node);
|
|
244
244
|
}, className: styles.content, style: {
|
|
245
245
|
top: pos.top,
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { JSX } from 'react';
|
|
2
|
+
import type { ButtonSize, ButtonVariant } from '../../components/button/Button';
|
|
3
|
+
export interface ThemeButtonProps {
|
|
4
|
+
size?: ButtonSize;
|
|
5
|
+
variant?: ButtonVariant;
|
|
6
|
+
}
|
|
7
|
+
export declare function ThemeButton({ size, variant }: ThemeButtonProps): JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Monitor, Moon, Palette, Sun } from 'lucide-react';
|
|
4
|
+
import { Button } from '../../components/button/Button';
|
|
5
|
+
import { Menu } from '../../components/menu/Menu';
|
|
6
|
+
import { Popover } from '../../components/popover/Popover';
|
|
7
|
+
import { useTheme } from '../../hooks/useTheme';
|
|
8
|
+
const THEME_OPTIONS = [
|
|
9
|
+
{ value: 'system', label: 'System', icon: _jsx(Monitor, { size: 16 }) },
|
|
10
|
+
{ value: 'light', label: 'Lyst', icon: _jsx(Sun, { size: 16 }) },
|
|
11
|
+
{ value: 'dark', label: 'Mørkt', icon: _jsx(Moon, { size: 16 }) },
|
|
12
|
+
];
|
|
13
|
+
export function ThemeButton({ size, variant = 'outlined' }) {
|
|
14
|
+
const { theme, switchTheme } = useTheme();
|
|
15
|
+
return (_jsx(Popover, { matchTriggerWidth: false, minWidth: "140px", trigger: (handleClick, chevron) => (_jsxs(Button, { variant: variant, size: size, onClick: handleClick, "aria-label": "Skift tema", "aria-haspopup": "menu", children: [_jsx(Palette, {}), chevron] })), children: close => (_jsxs(Menu, { children: [_jsx(Menu.Header, { children: "Udseende" }), THEME_OPTIONS.map(option => (_jsx(Menu.Item, { active: theme === option.value, children: _jsxs("button", { onClick: () => {
|
|
16
|
+
switchTheme(option.value);
|
|
17
|
+
close();
|
|
18
|
+
}, children: [option.icon, option.label] }) }, option.value)))] })) }));
|
|
19
|
+
}
|
package/dist/hooks/useTheme.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
declare const THEME_VARIANTS: readonly ["light", "dark", "system"];
|
|
2
|
+
export type ThemeVariant = (typeof THEME_VARIANTS)[number];
|
|
2
3
|
export declare function useTheme(initialTheme?: ThemeVariant): {
|
|
3
4
|
theme: ThemeVariant | null;
|
|
4
5
|
switchTheme: (id: ThemeVariant) => ThemeVariant;
|
|
5
6
|
};
|
|
7
|
+
export {};
|
package/dist/hooks/useTheme.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { useCallback, useEffect, useState } from 'react';
|
|
3
|
-
const THEME_VARIANTS = ['light', 'dark'];
|
|
3
|
+
const THEME_VARIANTS = ['light', 'dark', 'system'];
|
|
4
4
|
const STORAGE_KEY = 'dbc_theme';
|
|
5
5
|
function isThemeVariant(x) {
|
|
6
6
|
return !!x && THEME_VARIANTS.includes(x);
|
|
@@ -23,13 +23,19 @@ function persistTheme(id) {
|
|
|
23
23
|
console.error('Failed to set theme cookie');
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
+
function getTheme() {
|
|
27
|
+
return document.documentElement.dataset.theme;
|
|
28
|
+
}
|
|
26
29
|
function applyTheme(id) {
|
|
27
30
|
document.documentElement.dataset.theme = id;
|
|
28
31
|
}
|
|
29
|
-
export function useTheme(initialTheme = '
|
|
32
|
+
export function useTheme(initialTheme = 'system') {
|
|
30
33
|
const [theme, setTheme] = useState(null);
|
|
31
34
|
useEffect(() => {
|
|
32
|
-
|
|
35
|
+
const themeFromDataAttributes = getTheme();
|
|
36
|
+
let resolved = isThemeVariant(themeFromDataAttributes)
|
|
37
|
+
? themeFromDataAttributes
|
|
38
|
+
: initialTheme;
|
|
33
39
|
// Prefer cookie (SSR + client consistency)
|
|
34
40
|
const fromCookie = getCookie(STORAGE_KEY);
|
|
35
41
|
if (isThemeVariant(fromCookie)) {
|
package/dist/index.d.ts
CHANGED
|
@@ -70,3 +70,4 @@ export * from './components/state-page/StatePage';
|
|
|
70
70
|
export * from './components/sticky-footer-layout/StickyFooterLayout';
|
|
71
71
|
export * from './components/forms/typeahead/Typeahead';
|
|
72
72
|
export * from './hooks/useDeviceSize';
|
|
73
|
+
export * from './components/theme-button/ThemeButton';
|
package/dist/index.js
CHANGED
|
@@ -70,3 +70,4 @@ export * from './components/state-page/StatePage';
|
|
|
70
70
|
export * from './components/sticky-footer-layout/StickyFooterLayout';
|
|
71
71
|
export * from './components/forms/typeahead/Typeahead';
|
|
72
72
|
export * from './hooks/useDeviceSize';
|
|
73
|
+
export * from './components/theme-button/ThemeButton';
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
html {
|
|
2
|
+
/* ==========================================================================
|
|
3
|
+
* PRIMITIVES (THEME-DEPENDENT)
|
|
4
|
+
* ======================================================================= */
|
|
5
|
+
|
|
6
|
+
color-scheme: light dark;
|
|
7
|
+
|
|
8
|
+
/*@media (prefers-color-scheme: dark) {*/
|
|
9
|
+
/* color-scheme: dark;*/
|
|
10
|
+
/*}*/
|
|
11
|
+
|
|
12
|
+
&[data-theme='dark'] {
|
|
13
|
+
color-scheme: dark;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&[data-theme='light'] {
|
|
17
|
+
color-scheme: light;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Brand blues */
|
|
21
|
+
--dbc-blue-500: light-dark(#0c3ee3, #3b82f6);
|
|
22
|
+
--dbc-blue-600: light-dark(#0932b6, #2563eb);
|
|
23
|
+
--dbc-blue-400: light-dark(#3b6ff5, #60a5fa);
|
|
24
|
+
--dbc-blue-300: light-dark(#7ea5ff, #93c5fd);
|
|
25
|
+
--dbc-blue-100: light-dark(#e8edfd, #0b1f3b);
|
|
26
|
+
--dbc-blue-150: light-dark(#dce5fc, #102a4d);
|
|
27
|
+
|
|
28
|
+
/* Neutrals */
|
|
29
|
+
--dbc-neutral-900: light-dark(#1a1a1a, #f9fafb);
|
|
30
|
+
--dbc-neutral-700: light-dark(#374151, #d1d5db);
|
|
31
|
+
--dbc-neutral-600: light-dark(#5f6368, #9ca3af);
|
|
32
|
+
--dbc-neutral-200: light-dark(#e5e7eb, #374151);
|
|
33
|
+
--dbc-neutral-100: light-dark(#f3f4f6, #1f2937);
|
|
34
|
+
|
|
35
|
+
/* Added fixed surface neutrals */
|
|
36
|
+
--dbc-surface-muted: light-dark(#f8fafc, #1f2937);
|
|
37
|
+
--dbc-surface-strong: light-dark(#f3f4f6, #111827);
|
|
38
|
+
|
|
39
|
+
/* Contextual warm neutrals */
|
|
40
|
+
--dbc-contextual-200: light-dark(#f4f2ee, #1b1712);
|
|
41
|
+
--dbc-contextual-100: light-dark(#faf8f5, #15120e);
|
|
42
|
+
|
|
43
|
+
/* Accents */
|
|
44
|
+
--dbc-pink-500: light-dark(#ec4899, #f472b6);
|
|
45
|
+
--dbc-pink-600: light-dark(#be185d, #db2777);
|
|
46
|
+
|
|
47
|
+
--dbc-gray-500: light-dark(#6b7280, #9ca3af);
|
|
48
|
+
--dbc-gray-600: light-dark(#4b5563, #6b7280);
|
|
49
|
+
|
|
50
|
+
/* Status colors */
|
|
51
|
+
--dbc-green-500: light-dark(#10b981, #22c55e);
|
|
52
|
+
--dbc-green-100: light-dark(#e6f9f3, #052e1f);
|
|
53
|
+
--dbc-green-700: light-dark(#065f46, #86efac);
|
|
54
|
+
--dbc-green-300: light-dark(#34d399, #4ade80);
|
|
55
|
+
|
|
56
|
+
--dbc-amber-700: light-dark(#b45309, #f59e0b);
|
|
57
|
+
--dbc-amber-100: light-dark(#fff7ed, #2b1b00);
|
|
58
|
+
--dbc-amber-800: light-dark(#92400e, #fcd34d);
|
|
59
|
+
--dbc-amber-400: light-dark(#f59e0b, #fbbf24);
|
|
60
|
+
|
|
61
|
+
--dbc-red-600: light-dark(#dc2626, #ef4444);
|
|
62
|
+
--dbc-red-100: light-dark(#fef2f2, #2b0b0b);
|
|
63
|
+
--dbc-red-800: light-dark(#991b1b, #fecaca);
|
|
64
|
+
--dbc-red-300: light-dark(#f87171, #f87171);
|
|
65
|
+
|
|
66
|
+
--dbc-info-500: light-dark(#0ea5e9, #0ea5e9);
|
|
67
|
+
--dbc-info-100: light-dark(#e0f2fe, #042a3a);
|
|
68
|
+
--dbc-info-700: light-dark(#075985, #bae6fd);
|
|
69
|
+
--dbc-info-300: light-dark(#38bdf8, #38bdf8);
|
|
70
|
+
|
|
71
|
+
/* ==========================================================================
|
|
72
|
+
* SEMANTIC COLORS (THEME-DEPENDENT)
|
|
73
|
+
* ======================================================================= */
|
|
74
|
+
|
|
75
|
+
--color-brand: var(--dbc-blue-500);
|
|
76
|
+
--color-brand-hover: var(--dbc-blue-600);
|
|
77
|
+
--color-brand-strong: var(--dbc-blue-600);
|
|
78
|
+
|
|
79
|
+
/* Backgrounds & surfaces */
|
|
80
|
+
--color-bg-page: light-dark(#ffffff, #111827);
|
|
81
|
+
--color-bg-surface: light-dark(#ffffff, #111827);
|
|
82
|
+
--color-bg-surface-subtle: var(--dbc-surface-muted);
|
|
83
|
+
--color-bg-surface-strong: var(--dbc-surface-strong);
|
|
84
|
+
--color-bg-inverse: light-dark(#1f2937, #2b3444);
|
|
85
|
+
|
|
86
|
+
--color-bg-toolbar: light-dark(#f3f4f6, #1f2937);
|
|
87
|
+
--color-bg-toolbar-hover: light-dark(#eef0f3, #263244);
|
|
88
|
+
|
|
89
|
+
/* Contextual surfaces */
|
|
90
|
+
--color-bg-contextual: var(--dbc-contextual-200);
|
|
91
|
+
--color-bg-contextual-subtle: var(--dbc-contextual-100);
|
|
92
|
+
|
|
93
|
+
/* Interaction backgrounds */
|
|
94
|
+
--color-bg-hover-subtle: var(--opac-bg-light);
|
|
95
|
+
--color-bg-pressed-subtle: var(--opac-bg-default);
|
|
96
|
+
|
|
97
|
+
/* Selected */
|
|
98
|
+
--color-bg-selected: var(--dbc-blue-100);
|
|
99
|
+
--color-bg-selected-hover: var(--dbc-blue-150);
|
|
100
|
+
|
|
101
|
+
/* Highlight */
|
|
102
|
+
--color-highlight-bg: var(--color-bg-selected-hover);
|
|
103
|
+
--color-highlight-fg: var(--color-fg-default);
|
|
104
|
+
|
|
105
|
+
--color-neutral: var(--dbc-neutral-200);
|
|
106
|
+
|
|
107
|
+
/* Borders */
|
|
108
|
+
--color-border-subtle: light-dark(#e5e7eb, rgba(255, 255, 255, 0.12));
|
|
109
|
+
--color-border-default: light-dark(#d1d5db, rgba(255, 255, 255, 0.18));
|
|
110
|
+
--color-border-strong: light-dark(#9ca3af, rgba(255, 255, 255, 0.28));
|
|
111
|
+
--color-border-selected: var(--color-brand);
|
|
112
|
+
|
|
113
|
+
/* Text */
|
|
114
|
+
--color-fg-default: var(--dbc-neutral-900);
|
|
115
|
+
--color-fg-muted: var(--dbc-neutral-700);
|
|
116
|
+
--color-fg-subtle: var(--dbc-neutral-600);
|
|
117
|
+
--color-fg-inverse: light-dark(#ffffff, #f9fafb);
|
|
118
|
+
|
|
119
|
+
--color-fg-on-strong: light-dark(#ffffff, #111827);
|
|
120
|
+
--color-fg-on-brand: light-dark(#ffffff, #111827);
|
|
121
|
+
|
|
122
|
+
/* Links */
|
|
123
|
+
--color-link: light-dark(var(--dbc-blue-500), var(--dbc-blue-300));
|
|
124
|
+
--color-link-hover: light-dark(var(--dbc-blue-600), #bfdbfe);
|
|
125
|
+
|
|
126
|
+
/* Status */
|
|
127
|
+
--color-status-success: var(--dbc-green-500);
|
|
128
|
+
--color-status-success-bg: var(--dbc-green-100);
|
|
129
|
+
--color-status-success-border: var(--dbc-green-300);
|
|
130
|
+
--color-status-success-fg: var(--dbc-green-700);
|
|
131
|
+
|
|
132
|
+
--color-status-warning: var(--dbc-amber-700);
|
|
133
|
+
--color-status-warning-bg: var(--dbc-amber-100);
|
|
134
|
+
--color-status-warning-border: var(--dbc-amber-400);
|
|
135
|
+
--color-status-warning-fg: var(--dbc-amber-800);
|
|
136
|
+
|
|
137
|
+
--color-status-error: var(--dbc-red-600);
|
|
138
|
+
--color-status-error-bg: var(--dbc-red-100);
|
|
139
|
+
--color-status-error-border: var(--dbc-red-300);
|
|
140
|
+
--color-status-error-fg: var(--dbc-red-800);
|
|
141
|
+
|
|
142
|
+
--color-status-info: var(--dbc-info-500);
|
|
143
|
+
--color-status-info-bg: var(--dbc-info-100);
|
|
144
|
+
--color-status-info-border: var(--dbc-info-300);
|
|
145
|
+
--color-status-info-fg: var(--dbc-info-700);
|
|
146
|
+
|
|
147
|
+
/* Disabled */
|
|
148
|
+
--color-disabled-bg: var(--dbc-neutral-100);
|
|
149
|
+
--color-disabled-fg: light-dark(#9ca3af, #6b7280);
|
|
150
|
+
--color-disabled-border: var(--dbc-neutral-200);
|
|
151
|
+
|
|
152
|
+
/* Focus */
|
|
153
|
+
--color-focus-ring: var(--dbc-blue-300);
|
|
154
|
+
--focus-ring: 0 0 0 3px light-dark(rgba(12, 62, 227, 0.25), rgba(59, 130, 246, 0.35));
|
|
155
|
+
|
|
156
|
+
/* Syntax (JSON viewer) */
|
|
157
|
+
--color-syntax-accent: var(--dbc-blue-300);
|
|
158
|
+
--color-syntax-string: var(--dbc-green-300);
|
|
159
|
+
--color-syntax-number: var(--dbc-amber-400);
|
|
160
|
+
--color-syntax-boolean: var(--dbc-pink-500);
|
|
161
|
+
|
|
162
|
+
/* ==========================================================================
|
|
163
|
+
* COMPONENT-LEVEL TOKENS (THEME-DEPENDENT COLORS)
|
|
164
|
+
* ======================================================================= */
|
|
165
|
+
|
|
166
|
+
/* Cards */
|
|
167
|
+
--card-bg-default: var(--color-bg-surface);
|
|
168
|
+
--card-bg-subtle: var(--color-bg-surface-subtle);
|
|
169
|
+
--card-bg-strong: var(--color-bg-surface-strong);
|
|
170
|
+
|
|
171
|
+
--card-fg-default: var(--color-fg-default);
|
|
172
|
+
--card-fg-on-strong: var(--color-fg-on-strong);
|
|
173
|
+
|
|
174
|
+
/* Buttons */
|
|
175
|
+
--button-bg-primary: var(--color-brand);
|
|
176
|
+
--button-bg-primary-hover: var(--color-brand-hover);
|
|
177
|
+
--button-fg-primary: var(--color-fg-on-brand);
|
|
178
|
+
|
|
179
|
+
/* Tables */
|
|
180
|
+
--table-header-bg: light-dark(#f5f6f8, #182230);
|
|
181
|
+
--table-row-bg: light-dark(#ffffff, #111827);
|
|
182
|
+
--table-row-bg-alt: light-dark(#f7f9fc, #141d2a);
|
|
183
|
+
--table-row-bg-hover: light-dark(#eef2f7, #172131);
|
|
184
|
+
--table-row-bg-selected: var(--dbc-blue-100);
|
|
185
|
+
--table-row-bg-selected-hover: var(--dbc-blue-150);
|
|
186
|
+
|
|
187
|
+
--table-border-subtle: light-dark(#eef1f4, rgba(255, 255, 255, 0.08));
|
|
188
|
+
--table-border-header: light-dark(#e2e6ea, rgba(255, 255, 255, 0.12));
|
|
189
|
+
--table-divider: light-dark(#e8ebef, rgba(255, 255, 255, 0.08));
|
|
190
|
+
|
|
191
|
+
--table-header-fg: var(--color-fg-muted);
|
|
192
|
+
--table-cell-fg: var(--color-fg-default);
|
|
193
|
+
|
|
194
|
+
/* ==========================================================================
|
|
195
|
+
* THEME-SPECIFIC NON-COLOR TOKENS (VISUAL EFFECTS)
|
|
196
|
+
* ======================================================================= */
|
|
197
|
+
|
|
198
|
+
/* Opacities */
|
|
199
|
+
--opac-bg-light: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.05));
|
|
200
|
+
--opac-bg-default: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
|
|
201
|
+
--opac-bg-dark: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
|
|
202
|
+
--opac-bg-brand: light-dark(rgba(49, 94, 251, 0.05), rgba(59, 130, 246, 0.12));
|
|
203
|
+
--opac-bg-light-invert: light-dark(rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.05));
|
|
204
|
+
--opac-bg-default-invert: light-dark(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
|
|
205
|
+
--opac-bg-dark-invert: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.15));
|
|
206
|
+
|
|
207
|
+
/* Shadows */
|
|
208
|
+
--shadow-xs: 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
|
|
209
|
+
--shadow-sm: 0 1px 3px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.24));
|
|
210
|
+
--shadow-md: 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32));
|
|
211
|
+
--shadow-lg: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
|
|
212
|
+
--shadow-xl: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.48));
|
|
213
|
+
|
|
214
|
+
/* Skeletons */
|
|
215
|
+
--skeleton-base: light-dark(#e5e7eb, #374151);
|
|
216
|
+
--skeleton-pulse: light-dark(#f3f4f6, #4b5563);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Inverse surface (dark background context) */
|
|
220
|
+
[data-surface='inverse'] {
|
|
221
|
+
/* Text */
|
|
222
|
+
--color-fg-default: #ffffff;
|
|
223
|
+
--color-fg-muted: rgba(255, 255, 255, 0.7);
|
|
224
|
+
--color-fg-subtle: rgba(255, 255, 255, 0.5);
|
|
225
|
+
|
|
226
|
+
/* Borders */
|
|
227
|
+
--color-border-subtle: rgba(255, 255, 255, 0.15);
|
|
228
|
+
--color-border-default: rgba(255, 255, 255, 0.3);
|
|
229
|
+
--color-border-strong: rgba(255, 255, 255, 0.6);
|
|
230
|
+
|
|
231
|
+
/* Interaction */
|
|
232
|
+
--color-bg-hover-subtle: var(--opac-bg-light-invert);
|
|
233
|
+
--color-bg-pressed-subtle: var(--opac-bg-default-invert);
|
|
234
|
+
|
|
235
|
+
/* Opacity system override */
|
|
236
|
+
--opac-bg-default: var(--opac-bg-default-invert);
|
|
237
|
+
--opac-bg-dark: var(--opac-bg-dark-invert);
|
|
238
|
+
|
|
239
|
+
/* Focus */
|
|
240
|
+
--color-focus-ring: rgba(255, 255, 255, 0.5);
|
|
241
|
+
--focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);
|
|
242
|
+
}
|
package/package.json
CHANGED
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
html[data-theme='dark'] {
|
|
2
|
-
/* ==========================================================================
|
|
3
|
-
* PRIMITIVES (THEME-DEPENDENT)
|
|
4
|
-
* ======================================================================= */
|
|
5
|
-
|
|
6
|
-
/* Brand blues */
|
|
7
|
-
--dbc-blue-500: #3b82f6;
|
|
8
|
-
--dbc-blue-600: #2563eb;
|
|
9
|
-
--dbc-blue-400: #60a5fa;
|
|
10
|
-
--dbc-blue-300: #93c5fd;
|
|
11
|
-
--dbc-blue-100: #0b1f3b;
|
|
12
|
-
--dbc-blue-150: #102a4d;
|
|
13
|
-
|
|
14
|
-
/* Neutrals */
|
|
15
|
-
--dbc-neutral-900: #f9fafb;
|
|
16
|
-
--dbc-neutral-700: #d1d5db;
|
|
17
|
-
--dbc-neutral-600: #9ca3af;
|
|
18
|
-
--dbc-neutral-200: #374151;
|
|
19
|
-
--dbc-neutral-100: #1f2937;
|
|
20
|
-
|
|
21
|
-
/* Added fixed surface neutrals */
|
|
22
|
-
--dbc-surface-muted: #1f2937;
|
|
23
|
-
--dbc-surface-strong: #111827;
|
|
24
|
-
|
|
25
|
-
/* Contextual warm neutrals */
|
|
26
|
-
--dbc-contextual-200: #1b1712;
|
|
27
|
-
--dbc-contextual-100: #15120e;
|
|
28
|
-
|
|
29
|
-
/* Accents */
|
|
30
|
-
--dbc-pink-500: #f472b6;
|
|
31
|
-
--dbc-pink-600: #db2777;
|
|
32
|
-
|
|
33
|
-
--dbc-gray-500: #9ca3af;
|
|
34
|
-
--dbc-gray-600: #6b7280;
|
|
35
|
-
|
|
36
|
-
/* Status colors */
|
|
37
|
-
--dbc-green-500: #22c55e;
|
|
38
|
-
--dbc-green-100: #052e1f;
|
|
39
|
-
--dbc-green-700: #86efac;
|
|
40
|
-
--dbc-green-300: #4ade80;
|
|
41
|
-
|
|
42
|
-
--dbc-amber-700: #f59e0b;
|
|
43
|
-
--dbc-amber-100: #2b1b00;
|
|
44
|
-
--dbc-amber-800: #fcd34d;
|
|
45
|
-
--dbc-amber-400: #fbbf24;
|
|
46
|
-
|
|
47
|
-
--dbc-red-600: #ef4444;
|
|
48
|
-
--dbc-red-100: #2b0b0b;
|
|
49
|
-
--dbc-red-800: #fecaca;
|
|
50
|
-
--dbc-red-300: #f87171;
|
|
51
|
-
|
|
52
|
-
--dbc-info-500: #0ea5e9;
|
|
53
|
-
--dbc-info-100: #042a3a;
|
|
54
|
-
--dbc-info-700: #bae6fd;
|
|
55
|
-
--dbc-info-300: #38bdf8;
|
|
56
|
-
|
|
57
|
-
/* ==========================================================================
|
|
58
|
-
* SEMANTIC COLORS (THEME-DEPENDENT)
|
|
59
|
-
* ======================================================================= */
|
|
60
|
-
|
|
61
|
-
--color-brand: var(--dbc-blue-500);
|
|
62
|
-
--color-brand-hover: var(--dbc-blue-600);
|
|
63
|
-
--color-brand-strong: var(--dbc-blue-600);
|
|
64
|
-
|
|
65
|
-
/* Backgrounds & surfaces */
|
|
66
|
-
--color-bg-page: #111827;
|
|
67
|
-
--color-bg-surface: #111827;
|
|
68
|
-
--color-bg-surface-subtle: var(--dbc-surface-muted);
|
|
69
|
-
--color-bg-surface-strong: var(--dbc-surface-strong);
|
|
70
|
-
--color-bg-inverse: #2b3444;
|
|
71
|
-
|
|
72
|
-
--color-bg-toolbar: #1f2937;
|
|
73
|
-
--color-bg-toolbar-hover: #263244;
|
|
74
|
-
|
|
75
|
-
/* Contextual surfaces */
|
|
76
|
-
--color-bg-contextual: var(--dbc-contextual-200);
|
|
77
|
-
--color-bg-contextual-subtle: var(--dbc-contextual-100);
|
|
78
|
-
|
|
79
|
-
/* Interaction backgrounds */
|
|
80
|
-
--color-bg-hover-subtle: var(--opac-bg-light);
|
|
81
|
-
--color-bg-pressed-subtle: var(--opac-bg-default);
|
|
82
|
-
|
|
83
|
-
/* Selected */
|
|
84
|
-
--color-bg-selected: var(--dbc-blue-100);
|
|
85
|
-
--color-bg-selected-hover: var(--dbc-blue-150);
|
|
86
|
-
--color-highlight-bg: var(--color-bg-selected-hover);
|
|
87
|
-
--color-highlight-fg: var(--color-fg-default);
|
|
88
|
-
|
|
89
|
-
--color-neutral: var(--dbc-neutral-200);
|
|
90
|
-
|
|
91
|
-
/* Borders */
|
|
92
|
-
--color-border-subtle: rgba(255, 255, 255, 0.12);
|
|
93
|
-
--color-border-default: rgba(255, 255, 255, 0.18);
|
|
94
|
-
--color-border-strong: rgba(255, 255, 255, 0.28);
|
|
95
|
-
--color-border-selected: var(--color-brand);
|
|
96
|
-
|
|
97
|
-
/* Text */
|
|
98
|
-
--color-fg-default: var(--dbc-neutral-900);
|
|
99
|
-
--color-fg-muted: var(--dbc-neutral-700);
|
|
100
|
-
--color-fg-subtle: var(--dbc-neutral-600);
|
|
101
|
-
--color-fg-inverse: #f9fafb;
|
|
102
|
-
|
|
103
|
-
--color-fg-on-strong: #111827;
|
|
104
|
-
--color-fg-on-brand: #111827;
|
|
105
|
-
|
|
106
|
-
/* Links */
|
|
107
|
-
--color-link: var(--dbc-blue-300);
|
|
108
|
-
--color-link-hover: #bfdbfe;
|
|
109
|
-
|
|
110
|
-
/* Status */
|
|
111
|
-
--color-status-success: var(--dbc-green-500);
|
|
112
|
-
--color-status-success-bg: var(--dbc-green-100);
|
|
113
|
-
--color-status-success-border: var(--dbc-green-300);
|
|
114
|
-
--color-status-success-fg: var(--dbc-green-700);
|
|
115
|
-
|
|
116
|
-
--color-status-warning: var(--dbc-amber-700);
|
|
117
|
-
--color-status-warning-bg: var(--dbc-amber-100);
|
|
118
|
-
--color-status-warning-border: var(--dbc-amber-400);
|
|
119
|
-
--color-status-warning-fg: var(--dbc-amber-800);
|
|
120
|
-
|
|
121
|
-
--color-status-error: var(--dbc-red-600);
|
|
122
|
-
--color-status-error-bg: var(--dbc-red-100);
|
|
123
|
-
--color-status-error-border: var(--dbc-red-300);
|
|
124
|
-
--color-status-error-fg: var(--dbc-red-800);
|
|
125
|
-
|
|
126
|
-
--color-status-info: var(--dbc-info-500);
|
|
127
|
-
--color-status-info-bg: var(--dbc-info-100);
|
|
128
|
-
--color-status-info-border: var(--dbc-info-300);
|
|
129
|
-
--color-status-info-fg: var(--dbc-info-700);
|
|
130
|
-
|
|
131
|
-
/* Disabled */
|
|
132
|
-
--color-disabled-bg: var(--dbc-neutral-100);
|
|
133
|
-
--color-disabled-fg: #6b7280;
|
|
134
|
-
--color-disabled-border: var(--dbc-neutral-200);
|
|
135
|
-
|
|
136
|
-
/* Focus */
|
|
137
|
-
--color-focus-ring: var(--dbc-blue-300);
|
|
138
|
-
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
|
|
139
|
-
|
|
140
|
-
/* Syntax (JSON viewer) */
|
|
141
|
-
--color-syntax-accent: var(--dbc-blue-300);
|
|
142
|
-
--color-syntax-string: var(--dbc-green-300);
|
|
143
|
-
--color-syntax-number: var(--dbc-amber-400);
|
|
144
|
-
--color-syntax-boolean: var(--dbc-pink-500);
|
|
145
|
-
|
|
146
|
-
/* ==========================================================================
|
|
147
|
-
* COMPONENT-LEVEL TOKENS (THEME-DEPENDENT COLORS)
|
|
148
|
-
* ======================================================================= */
|
|
149
|
-
|
|
150
|
-
/* Cards */
|
|
151
|
-
--card-bg-default: var(--color-bg-surface);
|
|
152
|
-
--card-bg-subtle: var(--color-bg-surface-subtle);
|
|
153
|
-
--card-bg-strong: var(--color-bg-surface-strong);
|
|
154
|
-
|
|
155
|
-
--card-fg-default: var(--color-fg-default);
|
|
156
|
-
--card-fg-on-strong: var(--color-fg-on-strong);
|
|
157
|
-
|
|
158
|
-
/* Buttons */
|
|
159
|
-
--button-bg-primary: var(--color-brand);
|
|
160
|
-
--button-bg-primary-hover: var(--color-brand-hover);
|
|
161
|
-
--button-fg-primary: var(--color-fg-on-brand);
|
|
162
|
-
|
|
163
|
-
/* Tables */
|
|
164
|
-
--table-header-bg: #182230;
|
|
165
|
-
--table-row-bg: #111827;
|
|
166
|
-
--table-row-bg-alt: #141d2a;
|
|
167
|
-
--table-row-bg-hover: #172131;
|
|
168
|
-
--table-row-bg-selected: var(--dbc-blue-100);
|
|
169
|
-
--table-row-bg-selected-hover: var(--dbc-blue-150);
|
|
170
|
-
|
|
171
|
-
--table-border-subtle: rgba(255, 255, 255, 0.08);
|
|
172
|
-
--table-border-header: rgba(255, 255, 255, 0.12);
|
|
173
|
-
--table-divider: rgba(255, 255, 255, 0.08);
|
|
174
|
-
|
|
175
|
-
--table-header-fg: var(--color-fg-muted);
|
|
176
|
-
--table-cell-fg: var(--color-fg-default);
|
|
177
|
-
|
|
178
|
-
/* ==========================================================================
|
|
179
|
-
* THEME-SPECIFIC NON-COLOR TOKENS (VISUAL EFFECTS)
|
|
180
|
-
* ======================================================================= */
|
|
181
|
-
|
|
182
|
-
/* Opacities */
|
|
183
|
-
--opac-bg-light: rgba(255, 255, 255, 0.05);
|
|
184
|
-
--opac-bg-default: rgba(255, 255, 255, 0.1);
|
|
185
|
-
--opac-bg-dark: rgba(255, 255, 255, 0.15);
|
|
186
|
-
--opac-bg-brand: rgba(59, 130, 246, 0.12);
|
|
187
|
-
--opac-bg-light-invert: rgba(0, 0, 0, 0.05);
|
|
188
|
-
--opac-bg-default-invert: rgba(0, 0, 0, 0.1);
|
|
189
|
-
--opac-bg-dark-invert: rgba(0, 0, 0, 0.15);
|
|
190
|
-
|
|
191
|
-
/* Shadows */
|
|
192
|
-
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
|
|
193
|
-
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24);
|
|
194
|
-
--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32);
|
|
195
|
-
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
196
|
-
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.48);
|
|
197
|
-
|
|
198
|
-
/* Data viz */
|
|
199
|
-
--viz-cat-1: #2563eb;
|
|
200
|
-
--viz-cat-2: #16a34a;
|
|
201
|
-
--viz-cat-3: #f59e0b;
|
|
202
|
-
--viz-cat-4: #ef4444;
|
|
203
|
-
--viz-cat-5: #8b5cf6;
|
|
204
|
-
--viz-cat-6: #14b8a6;
|
|
205
|
-
|
|
206
|
-
--viz-seq-start: #1e3a8a;
|
|
207
|
-
--viz-seq-mid: #3b82f6;
|
|
208
|
-
--viz-seq-end: #93c5fd;
|
|
209
|
-
|
|
210
|
-
/* Skeletons */
|
|
211
|
-
--skeleton-base: #374151;
|
|
212
|
-
--skeleton-pulse: #4b5563;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
/* High-contrast variant (theme override) */
|
|
216
|
-
:root[data-theme='dark'][data-contrast='high'] {
|
|
217
|
-
--color-border-subtle: #9ca3af;
|
|
218
|
-
--color-border-default: #e5e7eb;
|
|
219
|
-
--color-border-strong: #f9fafb;
|
|
220
|
-
|
|
221
|
-
--table-border-subtle: #6b7280;
|
|
222
|
-
--table-border-header: #9ca3af;
|
|
223
|
-
--table-divider: #9ca3af;
|
|
224
|
-
|
|
225
|
-
--focus-ring: 0 0 0 3px #e5e7eb;
|
|
226
|
-
}
|
|
@@ -1,220 +0,0 @@
|
|
|
1
|
-
html[data-theme='light'] {
|
|
2
|
-
/* ==========================================================================
|
|
3
|
-
* PRIMITIVES (THEME-DEPENDENT)
|
|
4
|
-
* ======================================================================= */
|
|
5
|
-
|
|
6
|
-
/* Brand blues */
|
|
7
|
-
--dbc-blue-500: #0c3ee3;
|
|
8
|
-
--dbc-blue-600: #0932b6;
|
|
9
|
-
--dbc-blue-400: #3b6ff5;
|
|
10
|
-
--dbc-blue-300: #7ea5ff;
|
|
11
|
-
--dbc-blue-100: #e8edfd;
|
|
12
|
-
--dbc-blue-150: #dce5fc;
|
|
13
|
-
|
|
14
|
-
/* Neutrals */
|
|
15
|
-
--dbc-neutral-900: #1a1a1a;
|
|
16
|
-
--dbc-neutral-700: #374151;
|
|
17
|
-
--dbc-neutral-600: #5f6368;
|
|
18
|
-
--dbc-neutral-200: #e5e7eb;
|
|
19
|
-
--dbc-neutral-100: #f3f4f6;
|
|
20
|
-
|
|
21
|
-
/* Added fixed surface neutrals */
|
|
22
|
-
--dbc-surface-muted: #f8fafc;
|
|
23
|
-
--dbc-surface-strong: #f3f4f6;
|
|
24
|
-
|
|
25
|
-
/* Contextual warm neutrals */
|
|
26
|
-
--dbc-contextual-200: #f4f2ee;
|
|
27
|
-
--dbc-contextual-100: #faf8f5;
|
|
28
|
-
|
|
29
|
-
/* Accents */
|
|
30
|
-
--dbc-pink-500: #ec4899;
|
|
31
|
-
--dbc-pink-600: #be185d;
|
|
32
|
-
|
|
33
|
-
--dbc-gray-500: #6b7280;
|
|
34
|
-
--dbc-gray-600: #4b5563;
|
|
35
|
-
|
|
36
|
-
/* Status colors */
|
|
37
|
-
--dbc-green-500: #10b981;
|
|
38
|
-
--dbc-green-100: #e6f9f3;
|
|
39
|
-
--dbc-green-700: #065f46;
|
|
40
|
-
--dbc-green-300: #34d399;
|
|
41
|
-
|
|
42
|
-
--dbc-amber-700: #b45309;
|
|
43
|
-
--dbc-amber-100: #fff7ed;
|
|
44
|
-
--dbc-amber-800: #92400e;
|
|
45
|
-
--dbc-amber-400: #f59e0b;
|
|
46
|
-
|
|
47
|
-
--dbc-red-600: #dc2626;
|
|
48
|
-
--dbc-red-100: #fef2f2;
|
|
49
|
-
--dbc-red-800: #991b1b;
|
|
50
|
-
--dbc-red-300: #f87171;
|
|
51
|
-
|
|
52
|
-
--dbc-info-500: #0ea5e9;
|
|
53
|
-
--dbc-info-100: #e0f2fe;
|
|
54
|
-
--dbc-info-700: #075985;
|
|
55
|
-
--dbc-info-300: #38bdf8;
|
|
56
|
-
|
|
57
|
-
/* ==========================================================================
|
|
58
|
-
* SEMANTIC COLORS (THEME-DEPENDENT)
|
|
59
|
-
* ======================================================================= */
|
|
60
|
-
|
|
61
|
-
--color-brand: var(--dbc-blue-500);
|
|
62
|
-
--color-brand-hover: var(--dbc-blue-600);
|
|
63
|
-
--color-brand-strong: var(--dbc-blue-600);
|
|
64
|
-
|
|
65
|
-
/* Backgrounds & surfaces */
|
|
66
|
-
--color-bg-page: #ffffff;
|
|
67
|
-
--color-bg-surface: #ffffff;
|
|
68
|
-
--color-bg-surface-subtle: var(--dbc-surface-muted);
|
|
69
|
-
--color-bg-surface-strong: var(--dbc-surface-strong);
|
|
70
|
-
--color-bg-inverse: #1f2937;
|
|
71
|
-
|
|
72
|
-
--color-bg-toolbar: #f3f4f6;
|
|
73
|
-
--color-bg-toolbar-hover: #eef0f3;
|
|
74
|
-
|
|
75
|
-
/* Contextual surfaces */
|
|
76
|
-
--color-bg-contextual: var(--dbc-contextual-200);
|
|
77
|
-
--color-bg-contextual-subtle: var(--dbc-contextual-100);
|
|
78
|
-
|
|
79
|
-
/* Interaction backgrounds */
|
|
80
|
-
--color-bg-hover-subtle: var(--opac-bg-light);
|
|
81
|
-
--color-bg-pressed-subtle: var(--opac-bg-default);
|
|
82
|
-
|
|
83
|
-
/* Selected */
|
|
84
|
-
--color-bg-selected: var(--dbc-blue-100);
|
|
85
|
-
--color-bg-selected-hover: var(--dbc-blue-150);
|
|
86
|
-
--color-highlight-bg: var(--color-bg-selected-hover);
|
|
87
|
-
--color-highlight-fg: var(--color-fg-default);
|
|
88
|
-
|
|
89
|
-
--color-neutral: var(--dbc-neutral-200);
|
|
90
|
-
|
|
91
|
-
/* Borders */
|
|
92
|
-
--color-border-subtle: #e5e7eb;
|
|
93
|
-
--color-border-default: #d1d5db;
|
|
94
|
-
--color-border-strong: #9ca3af;
|
|
95
|
-
--color-border-selected: var(--color-brand);
|
|
96
|
-
|
|
97
|
-
/* Text */
|
|
98
|
-
--color-fg-default: var(--dbc-neutral-900);
|
|
99
|
-
--color-fg-muted: var(--dbc-neutral-700);
|
|
100
|
-
--color-fg-subtle: var(--dbc-neutral-600);
|
|
101
|
-
--color-fg-inverse: #ffffff;
|
|
102
|
-
|
|
103
|
-
--color-fg-on-strong: #ffffff;
|
|
104
|
-
--color-fg-on-brand: #ffffff;
|
|
105
|
-
|
|
106
|
-
/* Links */
|
|
107
|
-
--color-link: var(--dbc-blue-500);
|
|
108
|
-
--color-link-hover: var(--dbc-blue-600);
|
|
109
|
-
|
|
110
|
-
/* Status */
|
|
111
|
-
--color-status-success: var(--dbc-green-500);
|
|
112
|
-
--color-status-success-bg: var(--dbc-green-100);
|
|
113
|
-
--color-status-success-border: var(--dbc-green-300);
|
|
114
|
-
--color-status-success-fg: var(--dbc-green-700);
|
|
115
|
-
|
|
116
|
-
--color-status-warning: var(--dbc-amber-700);
|
|
117
|
-
--color-status-warning-bg: var(--dbc-amber-100);
|
|
118
|
-
--color-status-warning-border: var(--dbc-amber-400);
|
|
119
|
-
--color-status-warning-fg: var(--dbc-amber-800);
|
|
120
|
-
|
|
121
|
-
--color-status-error: var(--dbc-red-600);
|
|
122
|
-
--color-status-error-bg: var(--dbc-red-100);
|
|
123
|
-
--color-status-error-border: var(--dbc-red-300);
|
|
124
|
-
--color-status-error-fg: var(--dbc-red-800);
|
|
125
|
-
|
|
126
|
-
--color-status-info: var(--dbc-info-500);
|
|
127
|
-
--color-status-info-bg: var(--dbc-info-100);
|
|
128
|
-
--color-status-info-border: var(--dbc-info-300);
|
|
129
|
-
--color-status-info-fg: var(--dbc-info-700);
|
|
130
|
-
|
|
131
|
-
/* Disabled */
|
|
132
|
-
--color-disabled-bg: var(--dbc-neutral-100);
|
|
133
|
-
--color-disabled-fg: #9ca3af;
|
|
134
|
-
--color-disabled-border: var(--dbc-neutral-200);
|
|
135
|
-
|
|
136
|
-
/* Focus */
|
|
137
|
-
--color-focus-ring: var(--dbc-blue-300);
|
|
138
|
-
--focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
|
|
139
|
-
|
|
140
|
-
/* Syntax (JSON viewer) */
|
|
141
|
-
--color-syntax-accent: var(--dbc-blue-300);
|
|
142
|
-
--color-syntax-string: var(--dbc-green-300);
|
|
143
|
-
--color-syntax-number: var(--dbc-amber-400);
|
|
144
|
-
--color-syntax-boolean: var(--dbc-pink-500);
|
|
145
|
-
|
|
146
|
-
/* ==========================================================================
|
|
147
|
-
* COMPONENT-LEVEL TOKENS (THEME-DEPENDENT COLORS)
|
|
148
|
-
* ======================================================================= */
|
|
149
|
-
|
|
150
|
-
/* Cards */
|
|
151
|
-
--card-bg-default: var(--color-bg-surface);
|
|
152
|
-
--card-bg-subtle: var(--color-bg-surface-subtle);
|
|
153
|
-
--card-bg-strong: var(--color-bg-surface-strong);
|
|
154
|
-
|
|
155
|
-
--card-fg-default: var(--color-fg-default);
|
|
156
|
-
--card-fg-on-strong: var(--color-fg-on-strong);
|
|
157
|
-
|
|
158
|
-
/* Buttons */
|
|
159
|
-
--button-bg-primary: var(--color-brand);
|
|
160
|
-
--button-bg-primary-hover: var(--color-brand-hover);
|
|
161
|
-
--button-fg-primary: var(--color-fg-on-brand);
|
|
162
|
-
|
|
163
|
-
--table-header-bg: #f5f6f8;
|
|
164
|
-
--table-row-bg: #ffffff;
|
|
165
|
-
--table-row-bg-alt: #f7f9fc;
|
|
166
|
-
--table-row-bg-hover: #eef2f7;
|
|
167
|
-
--table-row-bg-selected: var(--dbc-blue-100);
|
|
168
|
-
--table-row-bg-selected-hover: var(--dbc-blue-150);
|
|
169
|
-
|
|
170
|
-
--table-border-subtle: #eef1f4;
|
|
171
|
-
--table-border-header: #e2e6ea;
|
|
172
|
-
--table-divider: #e8ebef;
|
|
173
|
-
|
|
174
|
-
--table-header-fg: var(--color-fg-muted);
|
|
175
|
-
--table-cell-fg: var(--color-fg-default);
|
|
176
|
-
|
|
177
|
-
/* ==========================================================================
|
|
178
|
-
* THEME-SPECIFIC NON-COLOR TOKENS (VISUAL EFFECTS)
|
|
179
|
-
* ======================================================================= */
|
|
180
|
-
|
|
181
|
-
/* Opacities */
|
|
182
|
-
--opac-bg-light: rgba(0, 0, 0, 0.025);
|
|
183
|
-
--opac-bg-default: rgba(0, 0, 0, 0.05);
|
|
184
|
-
--opac-bg-dark: rgba(0, 0, 0, 0.1);
|
|
185
|
-
--opac-bg-brand: rgba(49, 94, 251, 0.05);
|
|
186
|
-
--opac-bg-light-invert: rgba(255, 255, 255, 0.025);
|
|
187
|
-
--opac-bg-default-invert: rgba(255, 255, 255, 0.05);
|
|
188
|
-
--opac-bg-dark-invert: rgba(255, 255, 255, 0.1);
|
|
189
|
-
|
|
190
|
-
/* Shadows */
|
|
191
|
-
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
192
|
-
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
193
|
-
--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
|
|
194
|
-
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
195
|
-
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
196
|
-
|
|
197
|
-
/* Data viz */
|
|
198
|
-
--viz-cat-1: #2563eb;
|
|
199
|
-
--viz-cat-2: #16a34a;
|
|
200
|
-
--viz-cat-3: #f59e0b;
|
|
201
|
-
--viz-cat-4: #ef4444;
|
|
202
|
-
--viz-cat-5: #8b5cf6;
|
|
203
|
-
--viz-cat-6: #14b8a6;
|
|
204
|
-
|
|
205
|
-
--viz-seq-start: #dbeafe;
|
|
206
|
-
--viz-seq-mid: #60a5fa;
|
|
207
|
-
--viz-seq-end: #1d4ed8;
|
|
208
|
-
|
|
209
|
-
/* Skeletons */
|
|
210
|
-
--skeleton-base: #e5e7eb;
|
|
211
|
-
--skeleton-pulse: #f3f4f6;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
/* High-contrast variant (theme override) */
|
|
215
|
-
:root[data-contrast='high'] {
|
|
216
|
-
--color-border-subtle: #4b5563;
|
|
217
|
-
--color-border-default: #374151;
|
|
218
|
-
--color-border-strong: #111827;
|
|
219
|
-
--focus-ring: 0 0 0 3px #111827;
|
|
220
|
-
}
|