doom-design-system 0.4.1 → 0.4.3
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/Layout/Layout.d.ts +82 -1
- package/dist/components/Layout/Layout.js +34 -5
- package/dist/components/Layout/Layout.module.css +64 -5
- package/dist/components/Link/Link.module.css +1 -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/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));
|
|
@@ -13,33 +13,114 @@ declare const SPACING_MAP: {
|
|
|
13
13
|
readonly 16: "4rem";
|
|
14
14
|
};
|
|
15
15
|
export type Spacing = keyof typeof SPACING_MAP;
|
|
16
|
-
interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
|
|
16
|
+
export interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
|
|
17
|
+
/** The content to be rendered inside the layout container. */
|
|
17
18
|
children?: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* The HTML element or React component to render as the root node.
|
|
21
|
+
* @default "div"
|
|
22
|
+
*/
|
|
18
23
|
as?: ElementType;
|
|
19
24
|
}
|
|
20
25
|
export interface GridProps extends LayoutProps {
|
|
26
|
+
/**
|
|
27
|
+
* Defines the columns of the grid.
|
|
28
|
+
* Accepts a number (e.g., `3` for 3 equal columns) or a CSS string (e.g., `"1fr 2fr"`).
|
|
29
|
+
* @default "1fr"
|
|
30
|
+
*/
|
|
21
31
|
columns?: string | number;
|
|
32
|
+
/**
|
|
33
|
+
* Spacing between grid items.
|
|
34
|
+
* Maps to the design system spacing tokens (e.g., `4` = 1rem).
|
|
35
|
+
* @default 4
|
|
36
|
+
*/
|
|
22
37
|
gap?: Spacing;
|
|
23
38
|
}
|
|
39
|
+
/**
|
|
40
|
+
* A CSS Grid container for creating two-dimensional layouts.
|
|
41
|
+
* Use this when you need precise control over columns and rows, or complex grid placements.
|
|
42
|
+
*/
|
|
24
43
|
export declare function Grid({ children, columns, gap, className, style, as: Component, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
25
44
|
export interface FlexProps extends LayoutProps {
|
|
45
|
+
/**
|
|
46
|
+
* The direction in which flex items are placed in the flex container.
|
|
47
|
+
* @default "row"
|
|
48
|
+
*/
|
|
26
49
|
direction?: "row" | "column" | "row-reverse" | "column-reverse";
|
|
50
|
+
/**
|
|
51
|
+
* Alignment of items along the main axis.
|
|
52
|
+
* @default "flex-start"
|
|
53
|
+
*/
|
|
27
54
|
justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
|
|
55
|
+
/**
|
|
56
|
+
* Alignment of items along the cross axis.
|
|
57
|
+
* @default "stretch"
|
|
58
|
+
*/
|
|
28
59
|
align?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
|
|
60
|
+
/**
|
|
61
|
+
* Spacing between flex items.
|
|
62
|
+
* Maps to the design system spacing tokens.
|
|
63
|
+
* @default 0
|
|
64
|
+
*/
|
|
29
65
|
gap?: Spacing;
|
|
66
|
+
/**
|
|
67
|
+
* Controls whether flex items are forced onto one line or can wrap onto multiple lines.
|
|
68
|
+
* @default false
|
|
69
|
+
*/
|
|
30
70
|
wrap?: boolean | "wrap" | "nowrap" | "wrap-reverse";
|
|
31
71
|
}
|
|
72
|
+
/**
|
|
73
|
+
* A flexible box container for one-dimensional layouts.
|
|
74
|
+
* Use this as your primary layout tool for aligning items in a row or column,
|
|
75
|
+
* distributing space, and handling wrapping.
|
|
76
|
+
*/
|
|
32
77
|
export declare function Flex({ children, direction, justify, align, gap, wrap, className, style, as: Component, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
|
|
33
78
|
export interface StackProps extends Omit<FlexProps, "direction"> {
|
|
79
|
+
/**
|
|
80
|
+
* The direction to stack items. Defaults to vertical ("column").
|
|
81
|
+
* Can be overridden to "row" for semantic or responsive adjustments.
|
|
82
|
+
* @default "column"
|
|
83
|
+
*/
|
|
34
84
|
direction?: "column" | "column-reverse" | "row" | "row-reverse";
|
|
35
85
|
}
|
|
86
|
+
/**
|
|
87
|
+
* A specialized Flex container explicitly optimized for vertical stacking.
|
|
88
|
+
* Use this for lists, form fields, card content, or any group of elements
|
|
89
|
+
* that should be arranged vertically with consistent spacing.
|
|
90
|
+
* Note: While it defaults to column, `direction="row"` is supported for semantic overrides.
|
|
91
|
+
*/
|
|
36
92
|
export declare function Stack({ children, direction, gap, align, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
|
|
37
93
|
export interface SwitcherProps extends FlexProps {
|
|
94
|
+
/**
|
|
95
|
+
* The breakpoint threshold at which the layout switches from horizontal to vertical.
|
|
96
|
+
* e.g., "xs" means it will be horizontal on screens larger than "xs" (480px), and vertical below.
|
|
97
|
+
* @default "xs"
|
|
98
|
+
*/
|
|
38
99
|
threshold?: "xxs" | "xs" | "sm" | "md";
|
|
39
100
|
}
|
|
101
|
+
/**
|
|
102
|
+
* A responsive layout component that switches from horizontal to vertical layout
|
|
103
|
+
* based on a container query or breakpoint threshold.
|
|
104
|
+
* Use this for "sidebar + main content" layouts or any pattern that needs
|
|
105
|
+
* to stack on smaller screens but sit side-by-side on larger ones.
|
|
106
|
+
*/
|
|
40
107
|
export declare function Switcher({ children, threshold, className, ...props }: SwitcherProps): import("react/jsx-runtime").JSX.Element;
|
|
41
108
|
export interface ContainerProps extends LayoutProps {
|
|
109
|
+
/**
|
|
110
|
+
* The maximum width of the container.
|
|
111
|
+
* - `sm`: 640px
|
|
112
|
+
* - `md`: 768px
|
|
113
|
+
* - `lg`: 1024px
|
|
114
|
+
* - `xl`: 1280px
|
|
115
|
+
* - `fluid`: 100%
|
|
116
|
+
* @default "xl"
|
|
117
|
+
*/
|
|
42
118
|
maxWidth?: "sm" | "md" | "lg" | "xl" | "fluid";
|
|
43
119
|
}
|
|
120
|
+
/**
|
|
121
|
+
* A specific layout component for centering content horizontally on the page.
|
|
122
|
+
* Use this to constrain the maximum width of your page content or sections,
|
|
123
|
+
* ensuring consistent margins and readability on large screens.
|
|
124
|
+
*/
|
|
44
125
|
export declare function Container({ children, maxWidth, className, as: Component, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
45
126
|
export {};
|
|
@@ -13,7 +13,6 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import clsx from "clsx";
|
|
15
15
|
import styles from "./Layout.module.css";
|
|
16
|
-
// --- Tokens ---
|
|
17
16
|
const SPACING_MAP = {
|
|
18
17
|
0: "0",
|
|
19
18
|
1: "0.25rem",
|
|
@@ -32,25 +31,55 @@ function resolveGap(gap) {
|
|
|
32
31
|
return undefined;
|
|
33
32
|
return SPACING_MAP[gap];
|
|
34
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* A CSS Grid container for creating two-dimensional layouts.
|
|
36
|
+
* Use this when you need precise control over columns and rows, or complex grid placements.
|
|
37
|
+
*/
|
|
35
38
|
export function Grid(_a) {
|
|
36
39
|
var { children, columns = "1fr", gap = 4, className, style, as: Component = "div" } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style", "as"]);
|
|
37
40
|
const gridTemplateColumns = typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns;
|
|
38
|
-
|
|
41
|
+
const gridClasses = clsx(styles.grid, className);
|
|
42
|
+
return (_jsx(Component, Object.assign({ className: gridClasses, style: Object.assign({ gridTemplateColumns, gap: resolveGap(gap) }, style) }, props, { children: children })));
|
|
39
43
|
}
|
|
44
|
+
/**
|
|
45
|
+
* A flexible box container for one-dimensional layouts.
|
|
46
|
+
* Use this as your primary layout tool for aligning items in a row or column,
|
|
47
|
+
* distributing space, and handling wrapping.
|
|
48
|
+
*/
|
|
40
49
|
export function Flex(_a) {
|
|
41
50
|
var { children, direction = "row", justify = "flex-start", align = "stretch", gap = 0, wrap = false, className, style, as: Component = "div" } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap", "className", "style", "as"]);
|
|
42
51
|
const flexWrap = typeof wrap === "boolean" ? (wrap ? "wrap" : "nowrap") : wrap;
|
|
43
|
-
|
|
52
|
+
const flexClasses = clsx(styles.flex, styles[`direction-${direction}`], justify && styles[`justify-${justify}`], align && styles[`align-${align}`], className);
|
|
53
|
+
return (_jsx(Component, Object.assign({ className: flexClasses, style: Object.assign({ gap: resolveGap(gap), flexWrap }, style) }, props, { children: children })));
|
|
44
54
|
}
|
|
55
|
+
/**
|
|
56
|
+
* A specialized Flex container explicitly optimized for vertical stacking.
|
|
57
|
+
* Use this for lists, form fields, card content, or any group of elements
|
|
58
|
+
* that should be arranged vertically with consistent spacing.
|
|
59
|
+
* Note: While it defaults to column, `direction="row"` is supported for semantic overrides.
|
|
60
|
+
*/
|
|
45
61
|
export function Stack(_a) {
|
|
46
62
|
var { children, direction = "column", gap = 4, align = "stretch" } = _a, props = __rest(_a, ["children", "direction", "gap", "align"]);
|
|
47
63
|
return (_jsx(Flex, Object.assign({ direction: direction, gap: gap, align: align }, props, { children: children })));
|
|
48
64
|
}
|
|
65
|
+
/**
|
|
66
|
+
* A responsive layout component that switches from horizontal to vertical layout
|
|
67
|
+
* based on a container query or breakpoint threshold.
|
|
68
|
+
* Use this for "sidebar + main content" layouts or any pattern that needs
|
|
69
|
+
* to stack on smaller screens but sit side-by-side on larger ones.
|
|
70
|
+
*/
|
|
49
71
|
export function Switcher(_a) {
|
|
50
72
|
var { children, threshold = "xs", className } = _a, props = __rest(_a, ["children", "threshold", "className"]);
|
|
51
|
-
|
|
73
|
+
const switcherClasses = clsx(styles.switcher, styles[`switch-${threshold}`], className);
|
|
74
|
+
return (_jsx(Flex, Object.assign({ className: switcherClasses }, props, { children: children })));
|
|
52
75
|
}
|
|
76
|
+
/**
|
|
77
|
+
* A specific layout component for centering content horizontally on the page.
|
|
78
|
+
* Use this to constrain the maximum width of your page content or sections,
|
|
79
|
+
* ensuring consistent margins and readability on large screens.
|
|
80
|
+
*/
|
|
53
81
|
export function Container(_a) {
|
|
54
82
|
var { children, maxWidth = "xl", className, as: Component = "div" } = _a, props = __rest(_a, ["children", "maxWidth", "className", "as"]);
|
|
55
|
-
|
|
83
|
+
const containerClasses = clsx(styles.container, styles[maxWidth], className);
|
|
84
|
+
return (_jsx(Component, Object.assign({ className: containerClasses }, props, { children: children })));
|
|
56
85
|
}
|
|
@@ -6,6 +6,66 @@
|
|
|
6
6
|
display: flex;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
.direction-row {
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.direction-column {
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.direction-row-reverse {
|
|
18
|
+
flex-direction: row-reverse;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.direction-column-reverse {
|
|
22
|
+
flex-direction: column-reverse;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.justify-flex-start {
|
|
26
|
+
justify-content: flex-start;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.justify-flex-end {
|
|
30
|
+
justify-content: flex-end;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.justify-center {
|
|
34
|
+
justify-content: center;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.justify-space-between {
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.justify-space-around {
|
|
42
|
+
justify-content: space-around;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.justify-space-evenly {
|
|
46
|
+
justify-content: space-evenly;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.align-flex-start {
|
|
50
|
+
align-items: flex-start;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.align-flex-end {
|
|
54
|
+
align-items: flex-end;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.align-center {
|
|
58
|
+
align-items: center;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.align-stretch {
|
|
62
|
+
align-items: stretch;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.align-baseline {
|
|
66
|
+
align-items: baseline;
|
|
67
|
+
}
|
|
68
|
+
|
|
9
69
|
.container {
|
|
10
70
|
width: 100%;
|
|
11
71
|
margin-left: auto;
|
|
@@ -31,29 +91,28 @@
|
|
|
31
91
|
|
|
32
92
|
.switcher {
|
|
33
93
|
display: flex;
|
|
34
|
-
flex-direction: row;
|
|
35
94
|
}
|
|
36
95
|
@media (max-width: 360px) {
|
|
37
96
|
.switcher.switch-xxs {
|
|
38
97
|
flex-direction: column;
|
|
39
|
-
align-items: flex-start
|
|
98
|
+
align-items: flex-start;
|
|
40
99
|
}
|
|
41
100
|
}
|
|
42
101
|
@media (max-width: 480px) {
|
|
43
102
|
.switcher.switch-xs {
|
|
44
103
|
flex-direction: column;
|
|
45
|
-
align-items: flex-start
|
|
104
|
+
align-items: flex-start;
|
|
46
105
|
}
|
|
47
106
|
}
|
|
48
107
|
@media (max-width: 640px) {
|
|
49
108
|
.switcher.switch-sm {
|
|
50
109
|
flex-direction: column;
|
|
51
|
-
align-items: flex-start
|
|
110
|
+
align-items: flex-start;
|
|
52
111
|
}
|
|
53
112
|
}
|
|
54
113
|
@media (max-width: 768px) {
|
|
55
114
|
.switcher.switch-md {
|
|
56
115
|
flex-direction: column;
|
|
57
|
-
align-items: flex-start
|
|
116
|
+
align-items: flex-start;
|
|
58
117
|
}
|
|
59
118
|
}
|
|
@@ -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);
|
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": "rgba(0, 0, 0, 0.5)";
|
|
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[500], "--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";
|