doom-design-system 0.1.15 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion/Accordion.d.ts +7 -6
- package/dist/components/Accordion/Accordion.js +36 -28
- package/dist/components/Accordion/Accordion.module.css +78 -22
- package/dist/components/Avatar/Avatar.d.ts +4 -4
- package/dist/components/Avatar/Avatar.js +6 -6
- package/dist/components/Badge/Badge.module.css +3 -3
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +2 -2
- package/dist/components/Checkbox/Checkbox.js +7 -7
- package/dist/components/Drawer/Drawer.js +5 -3
- package/dist/components/Drawer/Drawer.module.css +8 -6
- package/dist/components/Form/Form.module.css +1 -0
- package/dist/components/Input/Input.d.ts +3 -2
- package/dist/components/Input/Input.js +15 -3
- package/dist/components/Input/Input.module.css +33 -0
- package/dist/components/Modal/Modal.d.ts +5 -4
- package/dist/components/Modal/Modal.js +13 -6
- package/dist/components/Modal/Modal.module.css +64 -29
- package/dist/components/Popover/Popover.d.ts +3 -3
- package/dist/components/Popover/Popover.js +38 -36
- package/dist/components/ProgressBar/ProgressBar.d.ts +2 -1
- package/dist/components/ProgressBar/ProgressBar.js +10 -5
- package/dist/components/ProgressBar/ProgressBar.module.css +7 -0
- package/dist/components/Select/Select.js +6 -4
- package/dist/components/Select/Select.module.css +2 -2
- package/dist/components/Sheet/Sheet.d.ts +2 -2
- package/dist/components/Sheet/Sheet.js +18 -16
- package/dist/components/Sheet/Sheet.module.css +1 -2
- package/dist/components/Slider/Slider.d.ts +3 -3
- package/dist/components/Slider/Slider.js +11 -7
- package/dist/components/Slider/Slider.module.css +1 -1
- package/dist/components/SplitButton/SplitButton.d.ts +2 -2
- package/dist/components/SplitButton/SplitButton.js +8 -8
- package/dist/components/Tabs/Tabs.js +2 -2
- package/dist/components/Tabs/Tabs.module.css +9 -7
- package/dist/components/Textarea/Textarea.d.ts +8 -3
- package/dist/components/Textarea/Textarea.js +25 -6
- package/dist/components/Textarea/Textarea.module.css +71 -0
- package/dist/styles/themes/definitions.d.ts +312 -300
- package/dist/styles/themes/definitions.js +60 -60
- package/dist/tsconfig.build.tsbuildinfo +1 -0
- package/package.json +2 -2
- package/dist/tsconfig.tsbuildinfo +0 -1
|
@@ -1,81 +1,81 @@
|
|
|
1
1
|
const baseVariables = {
|
|
2
2
|
// Typography Scale
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
"--text-xs": "0.75rem",
|
|
4
|
+
"--text-sm": "0.875rem",
|
|
5
|
+
"--text-base": "1rem",
|
|
6
|
+
"--text-lg": "1.125rem",
|
|
7
|
+
"--text-xl": "1.25rem",
|
|
8
|
+
"--text-2xl": "1.5rem",
|
|
9
|
+
"--text-3xl": "1.875rem",
|
|
10
|
+
"--text-4xl": "2.25rem",
|
|
11
|
+
"--text-5xl": "3rem",
|
|
12
|
+
"--text-6xl": "3.75rem",
|
|
13
13
|
// Font Weights
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
"--font-thin": "100",
|
|
15
|
+
"--font-extralight": "200",
|
|
16
|
+
"--font-light": "300",
|
|
17
|
+
"--font-regular": "400",
|
|
18
|
+
"--font-medium": "500",
|
|
19
|
+
"--font-semibold": "600",
|
|
20
|
+
"--font-bold": "700",
|
|
21
|
+
"--font-extrabold": "800",
|
|
22
|
+
"--font-black": "900",
|
|
23
23
|
// Spacing Scale
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
"--spacing-xs": "0.25rem",
|
|
25
|
+
"--spacing-sm": "0.5rem",
|
|
26
|
+
"--spacing-md": "1rem",
|
|
27
|
+
"--spacing-lg": "1.5rem",
|
|
28
|
+
"--spacing-xl": "2rem",
|
|
29
|
+
"--spacing-2xl": "3rem",
|
|
30
30
|
// Z-Indices
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
"--z-base": "0",
|
|
32
|
+
"--z-elevated": "10",
|
|
33
|
+
"--z-header": "40",
|
|
34
|
+
"--z-dropdown": "50",
|
|
35
|
+
"--z-modal": "100",
|
|
36
|
+
"--z-tooltip": "200",
|
|
37
37
|
// Motion
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
"--duration-fast": "150ms",
|
|
39
|
+
"--duration-normal": "250ms",
|
|
40
|
+
"--duration-slow": "350ms",
|
|
41
|
+
"--ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
42
|
+
"--ease-out": "cubic-bezier(0.0, 0, 0.2, 1)",
|
|
43
|
+
"--ease-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
44
44
|
// Border Radius
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
"--radius-pill": "9999px",
|
|
46
|
+
"--radius-full": "50%",
|
|
47
47
|
// Outline
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
"--outline-width": "2px",
|
|
49
|
+
"--outline-offset": "2px",
|
|
50
50
|
// Overlay
|
|
51
|
-
|
|
51
|
+
"--overlay-opacity": "0.5",
|
|
52
52
|
// Common Sizes
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
"--size-icon-sm": "20px",
|
|
54
|
+
"--size-icon-md": "24px",
|
|
55
|
+
"--size-icon-lg": "32px",
|
|
56
|
+
"--size-touch-target": "44px",
|
|
57
57
|
// Shadows (consistent relative to theme colors)
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
58
|
+
"--shadow-sm": "2px 2px 0px 0px var(--card-border)",
|
|
59
|
+
"--shadow-sm-hover": "3px 3px 0px 0px var(--card-border)",
|
|
60
|
+
"--shadow-sm-checked": "3px 3px 0px 0px var(--card-border)",
|
|
61
|
+
"--shadow-sm-checked-hover": "4px 4px 0px 0px var(--card-border)",
|
|
62
|
+
"--shadow-lg": "8px 8px 0px 0px var(--card-border)",
|
|
63
63
|
};
|
|
64
64
|
export const themes = {
|
|
65
65
|
default: {
|
|
66
|
-
name:
|
|
67
|
-
variables: Object.assign(Object.assign({}, baseVariables), {
|
|
66
|
+
name: "Default",
|
|
67
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--background": "#e0e7ff", "--foreground": "#000000", "--card-bg": "#ffffff", "--card-border": "#000000", "--primary": "#a855f7", "--primary-hover": "#9333ea", "--primary-foreground": "#000000", "--shadow-primary": "#7e22ce", "--secondary": "#fbbf24", "--secondary-foreground": "#000000", "--accent": "#ec4899", "--muted": "#94a3b8", "--muted-foreground": "#334155", "--success": "#22c55e", "--success-foreground": "#000000", "--warning": "#f59e0b", "--warning-foreground": "#000000", "--error": "#ef4444", "--error-foreground": "#000000", "--shadow-error": "#b91c1c", "--border-width": "3px", "--radius": "8px", "--shadow-hard": "5px 5px 0px 0px #000000", "--shadow-hover": "7px 7px 0px 0px #000000", "--font-heading": "var(--font-montserrat)", "--heading-transform": "uppercase", "--heading-weight": "900" }),
|
|
68
68
|
},
|
|
69
69
|
doom: {
|
|
70
|
-
name:
|
|
71
|
-
variables: Object.assign(Object.assign({}, baseVariables), {
|
|
70
|
+
name: "DOOMSDAY",
|
|
71
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--background": "#020617", "--foreground": "#e2e8f0", "--card-bg": "#0f172a", "--card-border": "#1e293b", "--primary": "#10b981", "--primary-hover": "#059669", "--primary-foreground": "#020617", "--shadow-primary": "#000000", "--secondary": "#334155", "--secondary-foreground": "#f8fafc", "--accent": "#fbbf24", "--muted": "#64748b", "--muted-foreground": "#94a3b8", "--success": "#10b981", "--success-foreground": "#020617", "--warning": "#fbbf24", "--warning-foreground": "#020617", "--error": "#ef4444", "--error-foreground": "#000000", "--shadow-error": "#000000", "--border-width": "2px", "--radius": "2px", "--shadow-hard": "5px 5px 0px 0px #000000", "--shadow-hover": "7px 7px 0px 0px #000000", "--font-heading": "var(--font-montserrat)", "--heading-transform": "uppercase", "--heading-weight": "700" }),
|
|
72
72
|
},
|
|
73
73
|
neighbor: {
|
|
74
|
-
name:
|
|
75
|
-
variables: Object.assign(Object.assign({}, baseVariables), {
|
|
74
|
+
name: "THE CAPTAIN",
|
|
75
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--background": "#F8FAFC", "--foreground": "#0F172A", "--card-bg": "#FFFFFF", "--card-border": "#002D72", "--primary": "#002D72", "--primary-hover": "#1E3A8A", "--primary-foreground": "#FFFFFF", "--shadow-primary": "#001533", "--secondary": "#B91C1C", "--secondary-foreground": "#FFFFFF", "--accent": "#C0C0C0", "--muted": "#64748B", "--muted-foreground": "#475569", "--success": "#15803D", "--success-foreground": "#FFFFFF", "--warning": "#B45309", "--warning-foreground": "#FFFFFF", "--error": "#B91C1C", "--error-foreground": "#FFFFFF", "--shadow-error": "#7f1d1d", "--border-width": "3px", "--radius": "8px", "--shadow-hard": "6px 6px 0px 0px #0F172A", "--shadow-hover": "8px 8px 0px 0px #0F172A", "--font-heading": "var(--font-montserrat)", "--heading-transform": "uppercase", "--heading-weight": "900" }),
|
|
76
76
|
},
|
|
77
77
|
vigilante: {
|
|
78
|
-
name:
|
|
79
|
-
variables: Object.assign(Object.assign({}, baseVariables), {
|
|
80
|
-
}
|
|
78
|
+
name: "DARK KNIGHT",
|
|
79
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--background": "#0F1419", "--foreground": "#E8E9ED", "--card-bg": "#1A1F29", "--card-border": "#2D3748", "--primary": "#F7B731", "--primary-hover": "#F5A623", "--primary-foreground": "#0F1419", "--shadow-primary": "#000000", "--secondary": "#4A5568", "--secondary-foreground": "#E8E9ED", "--accent": "#3B82F6", "--muted": "#718096", "--muted-foreground": "#A0AEC0", "--success": "#48BB78", "--success-foreground": "#0F1419", "--warning": "#ED8936", "--warning-foreground": "#0F1419", "--error": "#F56565", "--error-foreground": "#000000", "--shadow-error": "#000000", "--border-width": "2px", "--radius": "6px", "--shadow-hard": "5px 5px 0px 0px #000000", "--shadow-hover": "7px 7px 0px 0px #000000", "--font-heading": "var(--font-montserrat)", "--heading-transform": "uppercase", "--heading-weight": "700" }),
|
|
80
|
+
},
|
|
81
81
|
};
|