doom-design-system 0.4.2 → 0.4.4
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/Button/Button.module.css +1 -1
- package/dist/components/Drawer/Drawer.module.css +2 -2
- package/dist/components/Link/Link.module.css +1 -1
- package/dist/components/Modal/Modal.module.css +5 -1
- package/dist/components/Select/Select.module.css +1 -1
- package/dist/components/Sheet/Sheet.module.css +1 -1
- package/dist/components/SplitButton/SplitButton.module.css +1 -1
- package/dist/components/Tabs/Tabs.d.ts +2 -1
- package/dist/components/Tabs/Tabs.js +2 -2
- package/dist/components/Tabs/Tabs.module.css +37 -0
- package/dist/styles/globals.css +4 -4
- package/dist/styles/themes/definitions.d.ts +57 -53
- package/dist/styles/themes/definitions.js +5 -5
- package/dist/styles/tokens.d.ts +25 -3
- package/dist/styles/tokens.js +30 -8
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
border-left: 0;
|
|
36
36
|
/* Standard directional shadow for left-anchored panel */
|
|
37
37
|
/* Bottom-Right shadow for left-anchored elements */
|
|
38
|
-
box-shadow: 8px 8px 0 0 var(--
|
|
38
|
+
box-shadow: 8px 8px 0 0 var(--shadow-base);
|
|
39
39
|
border-top-right-radius: var(--radius);
|
|
40
40
|
border-bottom-right-radius: var(--radius);
|
|
41
41
|
transform: translateX(calc(-100% - 20px));
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
border-right: 0;
|
|
47
47
|
/* Standard directional shadow for right-anchored panel */
|
|
48
48
|
/* Bottom-Left shadow for right-anchored elements */
|
|
49
|
-
box-shadow: -8px 8px 0 0 var(--
|
|
49
|
+
box-shadow: -8px 8px 0 0 var(--shadow-base);
|
|
50
50
|
border-top-left-radius: var(--radius);
|
|
51
51
|
border-bottom-left-radius: var(--radius);
|
|
52
52
|
transform: translateX(calc(100% + 20px));
|
|
@@ -63,11 +63,15 @@
|
|
|
63
63
|
.modalCard.solid {
|
|
64
64
|
/* In solid mode, we need to override the close button to ensure contrast */
|
|
65
65
|
}
|
|
66
|
+
.modalCard.solid .closeButton:hover {
|
|
67
|
+
transform: translate(-2px, -2px);
|
|
68
|
+
box-shadow: 6px 6px 0px 0px var(--shadow-base);
|
|
69
|
+
}
|
|
66
70
|
.modalCard.solid .closeButton {
|
|
67
71
|
background-color: var(--error) !important;
|
|
68
72
|
color: var(--error-foreground) !important;
|
|
69
73
|
border-color: var(--border-strong) !important;
|
|
70
|
-
box-shadow: var(--shadow-hard)
|
|
74
|
+
box-shadow: var(--shadow-hard);
|
|
71
75
|
}
|
|
72
76
|
|
|
73
77
|
.header {
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
}
|
|
28
28
|
.trigger:hover {
|
|
29
29
|
transform: translate(-2px, -2px);
|
|
30
|
-
box-shadow: 6px 6px 0px 0px var(--
|
|
30
|
+
box-shadow: 6px 6px 0px 0px var(--shadow-base);
|
|
31
31
|
}
|
|
32
32
|
.trigger:focus, .trigger:focus-visible, .trigger[aria-expanded=true] {
|
|
33
33
|
outline: none;
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
border-top-right-radius: var(--radius);
|
|
30
30
|
/* Brutalist Hard Shadow - Top anchored */
|
|
31
31
|
/* Top-Right heavy shadow */
|
|
32
|
-
box-shadow: 8px -8px 0 0 var(--
|
|
32
|
+
box-shadow: 8px -8px 0 0 var(--shadow-base);
|
|
33
33
|
display: flex;
|
|
34
34
|
flex-direction: column;
|
|
35
35
|
z-index: var(--z-drawer);
|
|
@@ -8,8 +8,9 @@ interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
export declare function Tabs({ defaultValue, value, onValueChange, children, className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
10
10
|
children: React.ReactNode;
|
|
11
|
+
align?: "left" | "right";
|
|
11
12
|
}
|
|
12
|
-
export declare function TabsList({ children, className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function TabsList({ children, className, align, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
14
15
|
value: string;
|
|
15
16
|
children: React.ReactNode;
|
|
@@ -30,8 +30,8 @@ export function Tabs(_a) {
|
|
|
30
30
|
return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab, baseId: reactId }, children: _jsx("div", Object.assign({ className: className }, props, { children: children })) }));
|
|
31
31
|
}
|
|
32
32
|
export function TabsList(_a) {
|
|
33
|
-
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
|
|
34
|
-
return (_jsx("div", Object.assign({ role: "tablist", "aria-orientation": "horizontal", "aria-label": props["aria-label"] || "Tabs", className: clsx(styles.tabsList, className) }, props, { children: children })));
|
|
33
|
+
var { children, className, align = "left" } = _a, props = __rest(_a, ["children", "className", "align"]);
|
|
34
|
+
return (_jsx("div", Object.assign({ role: "tablist", "aria-orientation": "horizontal", "aria-label": props["aria-label"] || "Tabs", className: clsx(styles.tabsList, styles[`align-${align}`], className) }, props, { children: children })));
|
|
35
35
|
}
|
|
36
36
|
export function TabsTrigger(_a) {
|
|
37
37
|
var { value, children, className, onClick } = _a, props = __rest(_a, ["value", "children", "className", "onClick"]);
|
|
@@ -14,9 +14,33 @@
|
|
|
14
14
|
padding-left: var(--spacing-md);
|
|
15
15
|
position: relative;
|
|
16
16
|
gap: 0.5rem;
|
|
17
|
+
overflow-x: auto;
|
|
18
|
+
-webkit-overflow-scrolling: touch;
|
|
19
|
+
max-width: 100%;
|
|
20
|
+
scrollbar-width: none;
|
|
21
|
+
}
|
|
22
|
+
.tabsList::-webkit-scrollbar {
|
|
23
|
+
display: none;
|
|
24
|
+
}
|
|
25
|
+
.tabsList.align-left {
|
|
26
|
+
justify-content: flex-start;
|
|
27
|
+
}
|
|
28
|
+
.tabsList.align-right {
|
|
29
|
+
justify-content: flex-end;
|
|
30
|
+
padding-right: var(--spacing-md);
|
|
31
|
+
padding-left: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (max-width: 640px) {
|
|
35
|
+
.tabsList {
|
|
36
|
+
padding-left: 0;
|
|
37
|
+
padding-right: 0;
|
|
38
|
+
gap: 0.25rem;
|
|
39
|
+
}
|
|
17
40
|
}
|
|
18
41
|
|
|
19
42
|
.tabsTrigger {
|
|
43
|
+
flex-shrink: 0;
|
|
20
44
|
padding: 0.75rem 1.5rem;
|
|
21
45
|
font-size: 0.9rem;
|
|
22
46
|
font-weight: 700;
|
|
@@ -32,6 +56,12 @@
|
|
|
32
56
|
z-index: 1;
|
|
33
57
|
transition: all 0.2s ease;
|
|
34
58
|
transform: translateY(4px);
|
|
59
|
+
white-space: nowrap;
|
|
60
|
+
}
|
|
61
|
+
@media (max-width: 640px) {
|
|
62
|
+
.tabsTrigger {
|
|
63
|
+
padding: 0.75rem 1rem;
|
|
64
|
+
}
|
|
35
65
|
}
|
|
36
66
|
.tabsTrigger:hover {
|
|
37
67
|
background-color: color-mix(in srgb, var(--primary), transparent 90%);
|
|
@@ -58,6 +88,13 @@
|
|
|
58
88
|
box-shadow: var(--shadow-hard);
|
|
59
89
|
position: relative;
|
|
60
90
|
z-index: var(--z-elevated);
|
|
91
|
+
}
|
|
92
|
+
@media (max-width: 640px) {
|
|
93
|
+
.tabsBody {
|
|
94
|
+
padding: var(--spacing-md);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
.tabsBody {
|
|
61
98
|
min-height: 600px;
|
|
62
99
|
margin-top: -3px;
|
|
63
100
|
}
|
package/dist/styles/globals.css
CHANGED
|
@@ -1789,17 +1789,17 @@ body {
|
|
|
1789
1789
|
}
|
|
1790
1790
|
body .shadow-top-hard {
|
|
1791
1791
|
/* Top-Right heavy shadow */
|
|
1792
|
-
box-shadow: 8px -8px 0 0 var(--
|
|
1792
|
+
box-shadow: 8px -8px 0 0 var(--shadow-base);
|
|
1793
1793
|
}
|
|
1794
1794
|
body .shadow-bottom-hard {
|
|
1795
1795
|
/* Standard Bottom-Right shadow */
|
|
1796
|
-
box-shadow: 8px 8px 0 0 var(--
|
|
1796
|
+
box-shadow: 8px 8px 0 0 var(--shadow-base);
|
|
1797
1797
|
}
|
|
1798
1798
|
body .shadow-left-hard {
|
|
1799
1799
|
/* Bottom-Left shadow for right-anchored elements */
|
|
1800
|
-
box-shadow: -8px 8px 0 0 var(--
|
|
1800
|
+
box-shadow: -8px 8px 0 0 var(--shadow-base);
|
|
1801
1801
|
}
|
|
1802
1802
|
body .shadow-right-hard {
|
|
1803
1803
|
/* Bottom-Right shadow for left-anchored elements */
|
|
1804
|
-
box-shadow: 8px 8px 0 0 var(--
|
|
1804
|
+
box-shadow: 8px 8px 0 0 var(--shadow-base);
|
|
1805
1805
|
}
|
|
@@ -2,30 +2,31 @@ export declare const themes: {
|
|
|
2
2
|
readonly default: {
|
|
3
3
|
readonly name: "Default";
|
|
4
4
|
readonly variables: {
|
|
5
|
+
readonly "--accent": "#ef4444";
|
|
5
6
|
readonly "--background": "#e0e7ff";
|
|
6
|
-
readonly "--
|
|
7
|
+
readonly "--border-strong": "#000000";
|
|
7
8
|
readonly "--card-bg": "#ffffff";
|
|
8
9
|
readonly "--card-border": "#000000";
|
|
9
|
-
readonly "--
|
|
10
|
-
readonly "--
|
|
10
|
+
readonly "--error": "#ef4444";
|
|
11
|
+
readonly "--error-foreground": "#000000";
|
|
12
|
+
readonly "--foreground": "#000000";
|
|
13
|
+
readonly "--muted": "#9ca3af";
|
|
14
|
+
readonly "--muted-foreground": "#374151";
|
|
15
|
+
readonly "--on-surface": "#000000";
|
|
16
|
+
readonly "--on-surface-muted": "#374151";
|
|
11
17
|
readonly "--primary": "#a855f7";
|
|
12
|
-
readonly "--primary-hover": "#9333ea";
|
|
13
18
|
readonly "--primary-foreground": "#000000";
|
|
14
|
-
readonly "--
|
|
19
|
+
readonly "--primary-hover": "#9333ea";
|
|
15
20
|
readonly "--secondary": "#fbbf24";
|
|
16
21
|
readonly "--secondary-foreground": "#000000";
|
|
17
|
-
readonly "--
|
|
18
|
-
readonly "--
|
|
19
|
-
readonly "--
|
|
22
|
+
readonly "--shadow-base": "#000000";
|
|
23
|
+
readonly "--shadow-error": "#991b1b";
|
|
24
|
+
readonly "--shadow-primary": "#6b21a8";
|
|
20
25
|
readonly "--success": "#22c55e";
|
|
21
26
|
readonly "--success-foreground": "#000000";
|
|
27
|
+
readonly "--surface-accent": "#f1f5f9";
|
|
22
28
|
readonly "--warning": "#f59e0b";
|
|
23
29
|
readonly "--warning-foreground": "#000000";
|
|
24
|
-
readonly "--error": "#ef4444";
|
|
25
|
-
readonly "--error-foreground": "#000000";
|
|
26
|
-
readonly "--on-surface": "#000000";
|
|
27
|
-
readonly "--on-surface-muted": "#374151";
|
|
28
|
-
readonly "--shadow-error": "#b91c1c";
|
|
29
30
|
readonly "--text-xs": string;
|
|
30
31
|
readonly "--text-sm": string;
|
|
31
32
|
readonly "--text-base": string;
|
|
@@ -93,30 +94,31 @@ export declare const themes: {
|
|
|
93
94
|
readonly doom: {
|
|
94
95
|
readonly name: "DOOMSDAY";
|
|
95
96
|
readonly variables: {
|
|
97
|
+
readonly "--accent": "#ef4444";
|
|
96
98
|
readonly "--background": "#020617";
|
|
97
|
-
readonly "--
|
|
99
|
+
readonly "--border-strong": "#334155";
|
|
98
100
|
readonly "--card-bg": "#0f172a";
|
|
99
101
|
readonly "--card-border": "#1e293b";
|
|
100
|
-
readonly "--
|
|
101
|
-
readonly "--
|
|
102
|
+
readonly "--error": "#ef4444";
|
|
103
|
+
readonly "--error-foreground": "#000000";
|
|
104
|
+
readonly "--foreground": "#e2e8f0";
|
|
105
|
+
readonly "--muted": "#64748b";
|
|
106
|
+
readonly "--muted-foreground": "#94a3b8";
|
|
107
|
+
readonly "--on-surface": "#e2e8f0";
|
|
108
|
+
readonly "--on-surface-muted": "#94a3b8";
|
|
102
109
|
readonly "--primary": "#10b981";
|
|
103
|
-
readonly "--primary-hover": "#059669";
|
|
104
110
|
readonly "--primary-foreground": "#020617";
|
|
105
|
-
readonly "--
|
|
111
|
+
readonly "--primary-hover": "#059669";
|
|
106
112
|
readonly "--secondary": "#475569";
|
|
107
113
|
readonly "--secondary-foreground": "#F8FAFC";
|
|
108
|
-
readonly "--
|
|
109
|
-
readonly "--
|
|
110
|
-
readonly "--
|
|
114
|
+
readonly "--shadow-base": "#000000";
|
|
115
|
+
readonly "--shadow-error": "#991b1b";
|
|
116
|
+
readonly "--shadow-primary": "#14532d";
|
|
111
117
|
readonly "--success": "#10b981";
|
|
112
118
|
readonly "--success-foreground": "#020617";
|
|
119
|
+
readonly "--surface-accent": "#0f172a";
|
|
113
120
|
readonly "--warning": "#f59e0b";
|
|
114
121
|
readonly "--warning-foreground": "#020617";
|
|
115
|
-
readonly "--error": "#ef4444";
|
|
116
|
-
readonly "--error-foreground": "#000000";
|
|
117
|
-
readonly "--on-surface": "#e2e8f0";
|
|
118
|
-
readonly "--on-surface-muted": "#94a3b8";
|
|
119
|
-
readonly "--shadow-error": "#000000";
|
|
120
122
|
readonly "--text-xs": string;
|
|
121
123
|
readonly "--text-sm": string;
|
|
122
124
|
readonly "--text-base": string;
|
|
@@ -181,33 +183,34 @@ export declare const themes: {
|
|
|
181
183
|
readonly "--shadow-lg": string;
|
|
182
184
|
};
|
|
183
185
|
};
|
|
184
|
-
readonly
|
|
186
|
+
readonly captain: {
|
|
185
187
|
readonly name: "THE CAPTAIN";
|
|
186
188
|
readonly variables: {
|
|
189
|
+
readonly "--accent": "#b91c1c";
|
|
187
190
|
readonly "--background": "#F8FAFC";
|
|
188
|
-
readonly "--
|
|
191
|
+
readonly "--border-strong": "#0f172a";
|
|
189
192
|
readonly "--card-bg": "#ffffff";
|
|
190
193
|
readonly "--card-border": "#000000";
|
|
191
|
-
readonly "--
|
|
194
|
+
readonly "--error": "#b91c1c";
|
|
195
|
+
readonly "--error-foreground": "#ffffff";
|
|
196
|
+
readonly "--foreground": "#0f172a";
|
|
197
|
+
readonly "--muted": "#94a3b8";
|
|
198
|
+
readonly "--muted-foreground": "#475569";
|
|
199
|
+
readonly "--on-surface": "#0f172a";
|
|
200
|
+
readonly "--on-surface-muted": "#475569";
|
|
192
201
|
readonly "--primary": "#2563eb";
|
|
193
|
-
readonly "--primary-hover": "#1d4ed8";
|
|
194
202
|
readonly "--primary-foreground": "#ffffff";
|
|
195
|
-
readonly "--
|
|
203
|
+
readonly "--primary-hover": "#1d4ed8";
|
|
196
204
|
readonly "--secondary": "#64748b";
|
|
197
205
|
readonly "--secondary-foreground": "#ffffff";
|
|
198
|
-
readonly "--
|
|
199
|
-
readonly "--
|
|
200
|
-
readonly "--
|
|
206
|
+
readonly "--shadow-base": "#000000";
|
|
207
|
+
readonly "--shadow-error": "#7f1d1d";
|
|
208
|
+
readonly "--shadow-primary": "#1e3a8a";
|
|
201
209
|
readonly "--success": "#10b981";
|
|
202
210
|
readonly "--success-foreground": "#ffffff";
|
|
211
|
+
readonly "--surface-accent": "#f1f5f9";
|
|
203
212
|
readonly "--warning": "#F7B731";
|
|
204
213
|
readonly "--warning-foreground": "#0F1419";
|
|
205
|
-
readonly "--error": "#b91c1c";
|
|
206
|
-
readonly "--error-foreground": "#ffffff";
|
|
207
|
-
readonly "--on-surface": "#0f172a";
|
|
208
|
-
readonly "--on-surface-muted": "#475569";
|
|
209
|
-
readonly "--shadow-error": "#991b1b";
|
|
210
|
-
readonly "--border-strong": "#0f172a";
|
|
211
214
|
readonly "--text-xs": string;
|
|
212
215
|
readonly "--text-sm": string;
|
|
213
216
|
readonly "--text-base": string;
|
|
@@ -275,30 +278,31 @@ export declare const themes: {
|
|
|
275
278
|
readonly vigilante: {
|
|
276
279
|
readonly name: "DARK KNIGHT";
|
|
277
280
|
readonly variables: {
|
|
281
|
+
readonly "--accent": "#3B82F6";
|
|
278
282
|
readonly "--background": "#0F1419";
|
|
279
|
-
readonly "--
|
|
283
|
+
readonly "--border-strong": "#111827";
|
|
280
284
|
readonly "--card-bg": "#1A1F29";
|
|
281
285
|
readonly "--card-border": "#2D3748";
|
|
282
|
-
readonly "--
|
|
283
|
-
readonly "--
|
|
286
|
+
readonly "--error": "#F56565";
|
|
287
|
+
readonly "--error-foreground": "#000000";
|
|
288
|
+
readonly "--foreground": "#E8E9ED";
|
|
289
|
+
readonly "--muted": "#6b7280";
|
|
290
|
+
readonly "--muted-foreground": "#9ca3af";
|
|
291
|
+
readonly "--on-surface": "#E8E9ED";
|
|
292
|
+
readonly "--on-surface-muted": "#9ca3af";
|
|
284
293
|
readonly "--primary": "#F7B731";
|
|
285
|
-
readonly "--primary-hover": "#F5A623";
|
|
286
294
|
readonly "--primary-foreground": "#0F1419";
|
|
287
|
-
readonly "--
|
|
295
|
+
readonly "--primary-hover": "#F5A623";
|
|
288
296
|
readonly "--secondary": "#4b5563";
|
|
289
297
|
readonly "--secondary-foreground": "#E8E9ED";
|
|
290
|
-
readonly "--
|
|
291
|
-
readonly "--
|
|
292
|
-
readonly "--
|
|
298
|
+
readonly "--shadow-base": "#000000";
|
|
299
|
+
readonly "--shadow-error": "#7f1d1d";
|
|
300
|
+
readonly "--shadow-primary": "#78350f";
|
|
293
301
|
readonly "--success": "#4ade80";
|
|
294
302
|
readonly "--success-foreground": "#0F1419";
|
|
303
|
+
readonly "--surface-accent": "#111827";
|
|
295
304
|
readonly "--warning": "#F5A623";
|
|
296
305
|
readonly "--warning-foreground": "#0F1419";
|
|
297
|
-
readonly "--error": "#F56565";
|
|
298
|
-
readonly "--error-foreground": "#000000";
|
|
299
|
-
readonly "--on-surface": "#E8E9ED";
|
|
300
|
-
readonly "--on-surface-muted": "#9ca3af";
|
|
301
|
-
readonly "--shadow-error": "#000000";
|
|
302
306
|
readonly "--text-xs": string;
|
|
303
307
|
readonly "--text-sm": string;
|
|
304
308
|
readonly "--text-base": string;
|
|
@@ -2,18 +2,18 @@ import { palette, baseVariables } from "../tokens.js";
|
|
|
2
2
|
export const themes = {
|
|
3
3
|
default: {
|
|
4
4
|
name: "Default",
|
|
5
|
-
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.indigo[100], "--
|
|
5
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--accent": palette.red[500], "--background": palette.indigo[100], "--border-strong": palette.black[950], "--card-bg": palette.white[950], "--card-border": palette.black[950], "--error": palette.red[500], "--error-foreground": palette.black[950], "--foreground": palette.black[950], "--muted": palette.gray[400], "--muted-foreground": palette.gray[700], "--on-surface": palette.black[950], "--on-surface-muted": palette.gray[700], "--primary": palette.purple[500], "--primary-foreground": palette.black[950], "--primary-hover": palette.purple[600], "--secondary": palette.yellow[400], "--secondary-foreground": palette.black[950], "--shadow-base": palette.black[950], "--shadow-error": palette.red[800], "--shadow-primary": palette.purple[800], "--success": palette.green[500], "--success-foreground": palette.black[950], "--surface-accent": palette.slate[100], "--warning": palette.yellow[500], "--warning-foreground": palette.black[950] }),
|
|
6
6
|
},
|
|
7
7
|
doom: {
|
|
8
8
|
name: "DOOMSDAY",
|
|
9
|
-
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[950], "--
|
|
9
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--accent": palette.red[500], "--background": palette.slate[950], "--border-strong": palette.slate[700], "--card-bg": palette.slate[900], "--card-border": palette.slate[800], "--error": palette.red[500], "--error-foreground": palette.black[950], "--foreground": palette.slate[200], "--muted": palette.slate[500], "--muted-foreground": palette.slate[400], "--on-surface": palette.slate[200], "--on-surface-muted": palette.slate[400], "--primary": palette.green[600], "--primary-foreground": palette.slate[950], "--primary-hover": palette.green[700], "--secondary": palette.slate[600], "--secondary-foreground": palette.slate[50], "--shadow-base": palette.black[950], "--shadow-error": palette.red[800], "--shadow-primary": palette.green[900], "--success": palette.green[600], "--success-foreground": palette.slate[950], "--surface-accent": palette.slate[900], "--warning": palette.yellow[500], "--warning-foreground": palette.slate[950] }),
|
|
10
10
|
},
|
|
11
|
-
|
|
11
|
+
captain: {
|
|
12
12
|
name: "THE CAPTAIN",
|
|
13
|
-
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[50], "--
|
|
13
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--accent": palette.red[600], "--background": palette.slate[50], "--border-strong": palette.slate[900], "--card-bg": palette.white[950], "--card-border": palette.black[950], "--error": palette.red[600], "--error-foreground": palette.white[950], "--foreground": palette.slate[900], "--muted": palette.slate[400], "--muted-foreground": palette.slate[600], "--on-surface": palette.slate[900], "--on-surface-muted": palette.slate[600], "--primary": palette.blue[600], "--primary-foreground": palette.white[950], "--primary-hover": palette.blue[700], "--secondary": palette.slate[500], "--secondary-foreground": palette.white[950], "--shadow-base": palette.black[950], "--shadow-error": palette.red[900], "--shadow-primary": palette.blue[900], "--success": palette.green[600], "--success-foreground": palette.white[950], "--surface-accent": palette.slate[100], "--warning": palette.yellow[600], "--warning-foreground": palette.gray[950] }),
|
|
14
14
|
},
|
|
15
15
|
vigilante: {
|
|
16
16
|
name: "DARK KNIGHT",
|
|
17
|
-
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.gray[950], "--
|
|
17
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--accent": palette.blue[500], "--background": palette.gray[950], "--border-strong": palette.gray[900], "--card-bg": palette.gray[975], "--card-border": palette.gray[990], "--error": palette.red[700], "--error-foreground": palette.black[950], "--foreground": "#E8E9ED", "--muted": palette.gray[500], "--muted-foreground": palette.gray[400], "--on-surface": "#E8E9ED", "--on-surface-muted": palette.gray[400], "--primary": palette.yellow[600], "--primary-foreground": palette.gray[950], "--primary-hover": palette.yellow[700], "--secondary": palette.gray[600], "--secondary-foreground": "#E8E9ED", "--shadow-base": palette.black[950], "--shadow-error": palette.red[900], "--shadow-primary": palette.yellow[900], "--success": palette.green[400], "--success-foreground": palette.gray[950], "--surface-accent": palette.gray[900], "--warning": palette.yellow[700], "--warning-foreground": palette.gray[950] }),
|
|
18
18
|
},
|
|
19
19
|
};
|
package/dist/styles/tokens.d.ts
CHANGED
|
@@ -1,7 +1,29 @@
|
|
|
1
1
|
export declare const palette: {
|
|
2
|
-
readonly
|
|
3
|
-
readonly
|
|
4
|
-
readonly
|
|
2
|
+
readonly black: {
|
|
3
|
+
readonly 50: "rgba(0, 0, 0, 0.05)";
|
|
4
|
+
readonly 100: "rgba(0, 0, 0, 0.1)";
|
|
5
|
+
readonly 200: "rgba(0, 0, 0, 0.2)";
|
|
6
|
+
readonly 300: "rgba(0, 0, 0, 0.3)";
|
|
7
|
+
readonly 400: "rgba(0, 0, 0, 0.4)";
|
|
8
|
+
readonly 500: "rgba(0, 0, 0, 0.5)";
|
|
9
|
+
readonly 600: "rgba(0, 0, 0, 0.6)";
|
|
10
|
+
readonly 700: "rgba(0, 0, 0, 0.7)";
|
|
11
|
+
readonly 800: "rgba(0, 0, 0, 0.8)";
|
|
12
|
+
readonly 900: "rgba(0, 0, 0, 0.9)";
|
|
13
|
+
readonly 950: "#000000";
|
|
14
|
+
};
|
|
15
|
+
readonly white: {
|
|
16
|
+
readonly 50: "rgba(255, 255, 255, 0.05)";
|
|
17
|
+
readonly 100: "rgba(255, 255, 255, 0.1)";
|
|
18
|
+
readonly 200: "rgba(255, 255, 255, 0.2)";
|
|
19
|
+
readonly 300: "rgba(255, 255, 255, 0.3)";
|
|
20
|
+
readonly 400: "rgba(255, 255, 255, 0.4)";
|
|
21
|
+
readonly 500: "rgba(255, 255, 255, 0.5)";
|
|
22
|
+
readonly 600: "rgba(255, 255, 255, 0.6)";
|
|
23
|
+
readonly 700: "rgba(255, 255, 255, 0.7)";
|
|
24
|
+
readonly 800: "rgba(255, 255, 255, 0.8)";
|
|
25
|
+
readonly 900: "rgba(255, 255, 255, 0.9)";
|
|
26
|
+
readonly 950: "#ffffff";
|
|
5
27
|
};
|
|
6
28
|
readonly slate: {
|
|
7
29
|
readonly 50: "#F8FAFC";
|
package/dist/styles/tokens.js
CHANGED
|
@@ -1,7 +1,29 @@
|
|
|
1
1
|
export const palette = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
black: {
|
|
3
|
+
50: "rgba(0, 0, 0, 0.05)",
|
|
4
|
+
100: "rgba(0, 0, 0, 0.1)",
|
|
5
|
+
200: "rgba(0, 0, 0, 0.2)",
|
|
6
|
+
300: "rgba(0, 0, 0, 0.3)",
|
|
7
|
+
400: "rgba(0, 0, 0, 0.4)",
|
|
8
|
+
500: "rgba(0, 0, 0, 0.5)",
|
|
9
|
+
600: "rgba(0, 0, 0, 0.6)",
|
|
10
|
+
700: "rgba(0, 0, 0, 0.7)",
|
|
11
|
+
800: "rgba(0, 0, 0, 0.8)",
|
|
12
|
+
900: "rgba(0, 0, 0, 0.9)",
|
|
13
|
+
950: "#000000",
|
|
14
|
+
},
|
|
15
|
+
white: {
|
|
16
|
+
50: "rgba(255, 255, 255, 0.05)",
|
|
17
|
+
100: "rgba(255, 255, 255, 0.1)",
|
|
18
|
+
200: "rgba(255, 255, 255, 0.2)",
|
|
19
|
+
300: "rgba(255, 255, 255, 0.3)",
|
|
20
|
+
400: "rgba(255, 255, 255, 0.4)",
|
|
21
|
+
500: "rgba(255, 255, 255, 0.5)",
|
|
22
|
+
600: "rgba(255, 255, 255, 0.6)",
|
|
23
|
+
700: "rgba(255, 255, 255, 0.7)",
|
|
24
|
+
800: "rgba(255, 255, 255, 0.8)",
|
|
25
|
+
900: "rgba(255, 255, 255, 0.9)",
|
|
26
|
+
950: "#ffffff",
|
|
5
27
|
},
|
|
6
28
|
slate: {
|
|
7
29
|
50: "#F8FAFC",
|
|
@@ -175,15 +197,15 @@ export const baseVariables = {
|
|
|
175
197
|
"--size-icon-lg": "32px",
|
|
176
198
|
"--size-touch-target": "44px",
|
|
177
199
|
// Common Colors
|
|
178
|
-
"--common-black": palette.
|
|
179
|
-
"--common-white": palette.
|
|
200
|
+
"--common-black": palette.black[950],
|
|
201
|
+
"--common-white": palette.white[950],
|
|
180
202
|
// Functional Tokens (Structure)
|
|
181
|
-
"--border-strong": palette.
|
|
203
|
+
"--border-strong": palette.black[950],
|
|
182
204
|
// Structural Standards (Global)
|
|
183
205
|
"--border-width": "2px",
|
|
184
206
|
"--radius": "4px",
|
|
185
|
-
"--shadow-hard": "4px 4px 0px 0px var(--
|
|
186
|
-
"--shadow-hover": "6px 6px 0px 0px var(--
|
|
207
|
+
"--shadow-hard": "4px 4px 0px 0px var(--shadow-base)",
|
|
208
|
+
"--shadow-hover": "6px 6px 0px 0px var(--shadow-base)",
|
|
187
209
|
// Typography Standards (Global)
|
|
188
210
|
"--font-heading": "var(--font-montserrat)",
|
|
189
211
|
"--heading-transform": "uppercase",
|