doom-design-system 0.3.3 → 0.4.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/README.md +10 -6
- package/dist/components/Avatar/Avatar.js +2 -1
- package/dist/components/Badge/Badge.d.ts +5 -3
- package/dist/components/Badge/Badge.js +5 -5
- package/dist/components/Badge/Badge.module.css +20 -2
- package/dist/components/Button/Button.d.ts +3 -3
- package/dist/components/Button/Button.js +6 -6
- package/dist/components/Button/Button.module.css +30 -6
- package/dist/components/Drawer/Drawer.js +1 -1
- package/dist/components/Drawer/Drawer.module.css +0 -22
- package/dist/components/FileUpload/FileUpload.d.ts +32 -0
- package/dist/components/FileUpload/FileUpload.js +237 -0
- package/dist/components/FileUpload/FileUpload.module.css +330 -0
- package/dist/components/FileUpload/index.d.ts +2 -0
- package/dist/components/FileUpload/index.js +1 -0
- package/dist/components/Image/Image.d.ts +8 -0
- package/dist/components/Image/Image.js +60 -0
- package/dist/components/Image/Image.module.css +36 -0
- package/dist/components/Image/index.d.ts +1 -0
- package/dist/components/Image/index.js +1 -0
- package/dist/components/Layout/Layout.d.ts +12 -8
- package/dist/components/Layout/Layout.js +13 -11
- package/dist/components/Layout/Layout.module.css +29 -0
- package/dist/components/Link/Link.d.ts +6 -3
- package/dist/components/Link/Link.js +27 -6
- package/dist/components/Link/Link.module.css +22 -6
- package/dist/components/Modal/Modal.js +1 -1
- package/dist/components/Modal/Modal.module.css +0 -36
- package/dist/components/Sheet/Sheet.js +1 -1
- package/dist/components/Sheet/Sheet.module.css +0 -22
- package/dist/components/Slat/Slat.d.ts +14 -0
- package/dist/components/Slat/Slat.js +27 -0
- package/dist/components/Slat/Slat.module.css +101 -0
- package/dist/components/Slat/index.d.ts +2 -0
- package/dist/components/Slat/index.js +1 -0
- package/dist/index.d.ts +41 -38
- package/dist/index.js +41 -38
- package/dist/styles/globals.css +238 -0
- package/dist/styles/themes/definitions.d.ts +3 -3
- package/dist/styles/themes/definitions.js +3 -3
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ export declare const themes: {
|
|
|
7
7
|
readonly "--card-bg": "#ffffff";
|
|
8
8
|
readonly "--card-border": "#000000";
|
|
9
9
|
readonly "--surface-accent": "#f1f5f9";
|
|
10
|
+
readonly "--border-strong": "#000000";
|
|
10
11
|
readonly "--primary": "#a855f7";
|
|
11
12
|
readonly "--primary-hover": "#9333ea";
|
|
12
13
|
readonly "--primary-foreground": "#000000";
|
|
@@ -75,7 +76,6 @@ export declare const themes: {
|
|
|
75
76
|
readonly "--size-touch-target": string;
|
|
76
77
|
readonly "--common-black": "#000000";
|
|
77
78
|
readonly "--common-white": "#ffffff";
|
|
78
|
-
readonly "--border-strong": "#000000";
|
|
79
79
|
readonly "--border-width": string;
|
|
80
80
|
readonly "--radius": string;
|
|
81
81
|
readonly "--shadow-hard": string;
|
|
@@ -97,6 +97,7 @@ export declare const themes: {
|
|
|
97
97
|
readonly "--foreground": "#e2e8f0";
|
|
98
98
|
readonly "--card-bg": "#0f172a";
|
|
99
99
|
readonly "--card-border": "#1e293b";
|
|
100
|
+
readonly "--border-strong": "#334155";
|
|
100
101
|
readonly "--surface-accent": "#0f172a";
|
|
101
102
|
readonly "--primary": "#10b981";
|
|
102
103
|
readonly "--primary-hover": "#059669";
|
|
@@ -166,7 +167,6 @@ export declare const themes: {
|
|
|
166
167
|
readonly "--size-touch-target": string;
|
|
167
168
|
readonly "--common-black": "#000000";
|
|
168
169
|
readonly "--common-white": "#ffffff";
|
|
169
|
-
readonly "--border-strong": "#000000";
|
|
170
170
|
readonly "--border-width": string;
|
|
171
171
|
readonly "--radius": string;
|
|
172
172
|
readonly "--shadow-hard": string;
|
|
@@ -279,6 +279,7 @@ export declare const themes: {
|
|
|
279
279
|
readonly "--foreground": "#E8E9ED";
|
|
280
280
|
readonly "--card-bg": "#1A1F29";
|
|
281
281
|
readonly "--card-border": "#2D3748";
|
|
282
|
+
readonly "--border-strong": "#111827";
|
|
282
283
|
readonly "--surface-accent": "#111827";
|
|
283
284
|
readonly "--primary": "#F7B731";
|
|
284
285
|
readonly "--primary-hover": "#F5A623";
|
|
@@ -348,7 +349,6 @@ export declare const themes: {
|
|
|
348
349
|
readonly "--size-touch-target": string;
|
|
349
350
|
readonly "--common-black": "#000000";
|
|
350
351
|
readonly "--common-white": "#ffffff";
|
|
351
|
-
readonly "--border-strong": "#000000";
|
|
352
352
|
readonly "--border-width": string;
|
|
353
353
|
readonly "--radius": string;
|
|
354
354
|
readonly "--shadow-hard": string;
|
|
@@ -2,11 +2,11 @@ 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], "--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] }),
|
|
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], "--border-strong": palette.common.black, "--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",
|
|
9
|
-
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[950], "--foreground": palette.slate[200], "--card-bg": palette.slate[900], "--card-border": palette.slate[800], "--surface-accent": palette.slate[900], "--primary": palette.green[600], "--primary-hover": palette.green[700], "--primary-foreground": palette.slate[950], "--shadow-primary": palette.common.black, "--secondary": palette.slate[600], "--secondary-foreground": palette.slate[50], "--accent": palette.red[500], "--muted": palette.slate[500], "--muted-foreground": palette.slate[400], "--success": palette.green[600], "--success-foreground": palette.slate[950], "--warning": palette.yellow[500], "--warning-foreground": palette.slate[950], "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.slate[200], "--on-surface-muted": palette.slate[400], "--shadow-error": palette.common.black }),
|
|
9
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[950], "--foreground": palette.slate[200], "--card-bg": palette.slate[900], "--card-border": palette.slate[800], "--border-strong": palette.slate[700], "--surface-accent": palette.slate[900], "--primary": palette.green[600], "--primary-hover": palette.green[700], "--primary-foreground": palette.slate[950], "--shadow-primary": palette.common.black, "--secondary": palette.slate[600], "--secondary-foreground": palette.slate[50], "--accent": palette.red[500], "--muted": palette.slate[500], "--muted-foreground": palette.slate[400], "--success": palette.green[600], "--success-foreground": palette.slate[950], "--warning": palette.yellow[500], "--warning-foreground": palette.slate[950], "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.slate[200], "--on-surface-muted": palette.slate[400], "--shadow-error": palette.common.black }),
|
|
10
10
|
},
|
|
11
11
|
neighbor: {
|
|
12
12
|
name: "THE CAPTAIN",
|
|
@@ -14,6 +14,6 @@ export const themes = {
|
|
|
14
14
|
},
|
|
15
15
|
vigilante: {
|
|
16
16
|
name: "DARK KNIGHT",
|
|
17
|
-
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.gray[950], "--foreground": "#E8E9ED", "--card-bg": palette.gray[975], "--card-border": palette.gray[990], "--surface-accent": palette.gray[900], "--primary": palette.yellow[600], "--primary-hover": palette.yellow[700], "--primary-foreground": palette.gray[950], "--shadow-primary": palette.common.black, "--secondary": palette.gray[600], "--secondary-foreground": "#E8E9ED", "--accent": palette.blue[500], "--muted": palette.gray[500], "--muted-foreground": palette.gray[400], "--success": palette.green[400], "--success-foreground": palette.gray[950], "--warning": palette.yellow[700], "--warning-foreground": palette.gray[950], "--error": palette.red[700], "--error-foreground": palette.common.black, "--on-surface": "#E8E9ED", "--on-surface-muted": palette.gray[400], "--shadow-error": palette.common.black }),
|
|
17
|
+
variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.gray[950], "--foreground": "#E8E9ED", "--card-bg": palette.gray[975], "--card-border": palette.gray[990], "--border-strong": palette.gray[900], "--surface-accent": palette.gray[900], "--primary": palette.yellow[600], "--primary-hover": palette.yellow[700], "--primary-foreground": palette.gray[950], "--shadow-primary": palette.common.black, "--secondary": palette.gray[600], "--secondary-foreground": "#E8E9ED", "--accent": palette.blue[500], "--muted": palette.gray[500], "--muted-foreground": palette.gray[400], "--success": palette.green[400], "--success-foreground": palette.gray[950], "--warning": palette.yellow[700], "--warning-foreground": palette.gray[950], "--error": palette.red[700], "--error-foreground": palette.common.black, "--on-surface": "#E8E9ED", "--on-surface-muted": palette.gray[400], "--shadow-error": palette.common.black }),
|
|
18
18
|
},
|
|
19
19
|
};
|