doom-design-system 0.4.3 → 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.
Files changed (8) hide show
  1. package/dist/components/Modal/Modal.module.css +5 -1
  2. package/dist/components/Tabs/Tabs.d.ts +2 -1
  3. package/dist/components/Tabs/Tabs.js +2 -2
  4. package/dist/components/Tabs/Tabs.module.css +37 -0
  5. package/dist/styles/themes/definitions.d.ts +1 -1
  6. package/dist/styles/themes/definitions.js +1 -1
  7. package/dist/tsconfig.build.tsbuildinfo +1 -1
  8. package/package.json +1 -1
package/dist/components/Modal/Modal.module.css CHANGED
@@ -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) !important;
74
+ box-shadow: var(--shadow-hard);
71
75
  }
72
76
 
73
77
  .header {
package/dist/components/Tabs/Tabs.d.ts CHANGED
@@ -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;
package/dist/components/Tabs/Tabs.js CHANGED
@@ -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"]);
package/dist/components/Tabs/Tabs.module.css CHANGED
@@ -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/themes/definitions.d.ts CHANGED
@@ -111,7 +111,7 @@ export declare const themes: {
111
111
  readonly "--primary-hover": "#059669";
112
112
  readonly "--secondary": "#475569";
113
113
  readonly "--secondary-foreground": "#F8FAFC";
114
- readonly "--shadow-base": "rgba(0, 0, 0, 0.5)";
114
+ readonly "--shadow-base": "#000000";
115
115
  readonly "--shadow-error": "#991b1b";
116
116
  readonly "--shadow-primary": "#14532d";
117
117
  readonly "--success": "#10b981";
package/dist/styles/themes/definitions.js CHANGED
@@ -6,7 +6,7 @@ export const themes = {
6
6
  },
7
7
  doom: {
8
8
  name: "DOOMSDAY",
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] }),
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",