doom-design-system 0.3.1 → 0.3.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/Link/Link.module.css +5 -3
- package/dist/components/Pagination/Pagination.module.css +1 -1
- package/dist/components/Select/Select.module.css +1 -1
- package/dist/components/SplitButton/SplitButton.module.css +1 -1
- package/dist/styles/themes/definitions.d.ts +2 -2
- package/dist/styles/themes/definitions.js +1 -1
- package/dist/styles/tokens.d.ts +12 -0
- package/dist/styles/tokens.js +13 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -34,13 +34,15 @@
|
|
|
34
34
|
padding: 0.75rem 1.5rem;
|
|
35
35
|
text-transform: uppercase;
|
|
36
36
|
letter-spacing: 0.05em;
|
|
37
|
-
box-shadow: var(--shadow-
|
|
37
|
+
box-shadow: var(--shadow-hard);
|
|
38
38
|
font-size: 0.75rem;
|
|
39
39
|
}
|
|
40
40
|
.link.button:hover {
|
|
41
|
-
filter: brightness(1.1);
|
|
42
41
|
transform: translate(-2px, -2px);
|
|
43
|
-
box-shadow: var(--
|
|
42
|
+
box-shadow: 6px 6px 0px 0px var(--border-strong);
|
|
43
|
+
}
|
|
44
|
+
.link.button:hover {
|
|
45
|
+
filter: brightness(1.1);
|
|
44
46
|
}
|
|
45
47
|
.link.button:active {
|
|
46
48
|
transform: translate(0, 0);
|
|
@@ -2,11 +2,11 @@ export declare const themes: {
|
|
|
2
2
|
readonly default: {
|
|
3
3
|
readonly name: "Default";
|
|
4
4
|
readonly variables: {
|
|
5
|
-
readonly "--background": "#
|
|
5
|
+
readonly "--background": "#e0e7ff";
|
|
6
6
|
readonly "--foreground": "#000000";
|
|
7
7
|
readonly "--card-bg": "#ffffff";
|
|
8
8
|
readonly "--card-border": "#000000";
|
|
9
|
-
readonly "--surface-accent": "#
|
|
9
|
+
readonly "--surface-accent": "#f1f5f9";
|
|
10
10
|
readonly "--primary": "#a855f7";
|
|
11
11
|
readonly "--primary-hover": "#9333ea";
|
|
12
12
|
readonly "--primary-foreground": "#000000";
|
|
@@ -2,7 +2,7 @@ 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.
|
|
5
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.indigo[100], "--foreground": palette.common.black, "--card-bg": palette.common.white, "--card-border": palette.common.black, "--surface-accent": palette.slate[100], "--primary": palette.purple[500], "--primary-hover": palette.purple[600], "--primary-foreground": palette.common.black, "--shadow-primary": palette.purple[700], "--secondary": palette.yellow[400], "--secondary-foreground": palette.common.black, "--accent": palette.red[500], "--muted": palette.gray[400], "--muted-foreground": palette.gray[700], "--success": palette.green[500], "--success-foreground": palette.common.black, "--warning": palette.yellow[500], "--warning-foreground": palette.common.black, "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.common.black, "--on-surface-muted": palette.gray[700], "--shadow-error": palette.red[600] }),
|
|
6
6
|
},
|
|
7
7
|
doom: {
|
|
8
8
|
name: "DOOMSDAY",
|
package/dist/styles/tokens.d.ts
CHANGED
|
@@ -52,6 +52,18 @@ export declare const palette: {
|
|
|
52
52
|
readonly 800: "#1e40af";
|
|
53
53
|
readonly 900: "#1e3a8a";
|
|
54
54
|
};
|
|
55
|
+
readonly indigo: {
|
|
56
|
+
readonly 50: "#eef2ff";
|
|
57
|
+
readonly 100: "#e0e7ff";
|
|
58
|
+
readonly 200: "#c7d2fe";
|
|
59
|
+
readonly 300: "#a5b4fc";
|
|
60
|
+
readonly 400: "#818cf8";
|
|
61
|
+
readonly 500: "#6366f1";
|
|
62
|
+
readonly 600: "#4f46e5";
|
|
63
|
+
readonly 700: "#4338ca";
|
|
64
|
+
readonly 800: "#3730a3";
|
|
65
|
+
readonly 900: "#312e81";
|
|
66
|
+
};
|
|
55
67
|
readonly yellow: {
|
|
56
68
|
readonly 50: "#fefce8";
|
|
57
69
|
readonly 100: "#fef9c3";
|
package/dist/styles/tokens.js
CHANGED
|
@@ -52,6 +52,18 @@ export const palette = {
|
|
|
52
52
|
800: "#1e40af",
|
|
53
53
|
900: "#1e3a8a",
|
|
54
54
|
},
|
|
55
|
+
indigo: {
|
|
56
|
+
50: "#eef2ff",
|
|
57
|
+
100: "#e0e7ff",
|
|
58
|
+
200: "#c7d2fe",
|
|
59
|
+
300: "#a5b4fc",
|
|
60
|
+
400: "#818cf8",
|
|
61
|
+
500: "#6366f1",
|
|
62
|
+
600: "#4f46e5",
|
|
63
|
+
700: "#4338ca",
|
|
64
|
+
800: "#3730a3",
|
|
65
|
+
900: "#312e81",
|
|
66
|
+
},
|
|
55
67
|
yellow: {
|
|
56
68
|
50: "#fefce8",
|
|
57
69
|
100: "#fef9c3",
|
|
@@ -171,7 +183,7 @@ export const baseVariables = {
|
|
|
171
183
|
"--border-width": "2px",
|
|
172
184
|
"--radius": "4px",
|
|
173
185
|
"--shadow-hard": "4px 4px 0px 0px var(--border-strong)",
|
|
174
|
-
"--shadow-hover": "
|
|
186
|
+
"--shadow-hover": "6px 6px 0px 0px var(--border-strong)",
|
|
175
187
|
// Typography Standards (Global)
|
|
176
188
|
"--font-heading": "var(--font-montserrat)",
|
|
177
189
|
"--heading-transform": "uppercase",
|