@solostylist/ui-kit 1.0.47 → 1.0.49

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/s-tip/s-tip.js +1 -1
  2. package/dist/theme/customizations/data-display.d.ts +5 -0
  3. package/dist/theme/customizations/data-display.js +16 -5
  4. package/dist/theme/customizations/feedback.js +4 -1
  5. package/dist/theme/customizations/inputs.js +38 -33
  6. package/dist/theme/theme-primitives.d.ts +1 -170
  7. package/dist/theme/theme-primitives.js +34 -218
  8. package/package.json +1 -1
package/dist/s-tip/s-tip.js CHANGED
@@ -10,7 +10,7 @@ const c = ({ message: t }) => /* @__PURE__ */ r.jsxs(
10
10
  sx: {
11
11
  display: "flex",
12
12
  alignItems: "center",
13
- bgcolor: "var(--s-palette-background-paper)",
13
+ bgcolor: "var(--s-palette-background-default)",
14
14
  borderRadius: 1,
15
15
  p: 1,
16
16
  color: "var(--s-palette-text-secondary)"
package/dist/theme/customizations/data-display.d.ts CHANGED
@@ -1,2 +1,7 @@
1
1
  import { Components, Theme } from '@mui/material/styles';
2
+ declare module '@mui/material/Chip' {
3
+ interface ChipPropsColorOverrides {
4
+ premium: true;
5
+ }
6
+ }
2
7
  export declare const dataDisplayCustomizations: Components<Theme>;
package/dist/theme/customizations/data-display.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { j as n } from "../../jsx-runtime-C5mzlN2N.js";
2
2
  import { IconCircleX as s } from "@tabler/icons-react";
3
3
  import { gray as e, green as l, red as a } from "../theme-primitives.js";
4
- import { i as c } from "../../iconButtonClasses-CpCspPuI.js";
5
- import { g as d } from "../../generateUtilityClasses-CvAVhM6T.js";
4
+ import { i as d } from "../../iconButtonClasses-CpCspPuI.js";
5
+ import { g as c } from "../../generateUtilityClasses-CvAVhM6T.js";
6
6
  import { s as i } from "../../svgIconClasses-SRBiyaM8.js";
7
7
  import { b as p } from "../../buttonBaseClasses-CTVeu_V8.js";
8
8
  import { t as y } from "../../typographyClasses-DVLfmcGt.js";
9
9
  import { a as t } from "../../createTheme-CyFSna1a.js";
10
- const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), z = {
10
+ const r = c("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), h = {
11
11
  MuiList: {
12
12
  styleOverrides: {
13
13
  root: {
@@ -193,6 +193,17 @@ const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colo
193
193
  fontSize: o.typography.caption.fontSize
194
194
  }
195
195
  }
196
+ },
197
+ {
198
+ props: { color: "premium" },
199
+ style: {
200
+ background: "linear-gradient(90deg, #18181b 0%, #27272a 100%)",
201
+ border: "1px solid",
202
+ borderColor: o.palette.divider,
203
+ [`& .${r.label}`]: {
204
+ fontWeight: 600
205
+ }
206
+ }
196
207
  }
197
208
  ]
198
209
  }),
@@ -206,7 +217,7 @@ const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colo
206
217
  display: "flex",
207
218
  gap: 8,
208
219
  marginRight: 6,
209
- [`& .${c.root}`]: {
220
+ [`& .${d.root}`]: {
210
221
  minWidth: 0,
211
222
  width: 36,
212
223
  height: 36
@@ -235,5 +246,5 @@ const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colo
235
246
  }
236
247
  };
237
248
  export {
238
- z as dataDisplayCustomizations
249
+ h as dataDisplayCustomizations
239
250
  };
package/dist/theme/customizations/feedback.js CHANGED
@@ -24,7 +24,10 @@ const l = {
24
24
  "& .MuiDialog-paper": {
25
25
  borderRadius: "10px",
26
26
  border: "1px solid",
27
- borderColor: (r.vars || r).palette.divider
27
+ borderColor: (r.vars || r).palette.divider,
28
+ backgroundColor: (r.vars || r).palette.background.paper,
29
+ backgroundImage: "none",
30
+ boxShadow: "none"
28
31
  }
29
32
  })
30
33
  }
package/dist/theme/customizations/inputs.js CHANGED
@@ -1,17 +1,17 @@
1
- import { j as a } from "../../jsx-runtime-C5mzlN2N.js";
2
- import { c as l } from "../../createSvgIcon-FIMSBrG5.js";
1
+ import { j as t } from "../../jsx-runtime-C5mzlN2N.js";
2
+ import { c as n } from "../../createSvgIcon-FIMSBrG5.js";
3
3
  import { brand as e, gray as r } from "../theme-primitives.js";
4
4
  import { o as i } from "../../outlinedInputClasses-Y-zQ9ZHZ.js";
5
5
  import { g as d } from "../../generateUtilityClasses-CvAVhM6T.js";
6
6
  import { s } from "../../svgIconClasses-SRBiyaM8.js";
7
- import { a as t } from "../../createTheme-CyFSna1a.js";
8
- const c = l(/* @__PURE__ */ a.jsx("path", {
7
+ import { a } from "../../createTheme-CyFSna1a.js";
8
+ const c = n(/* @__PURE__ */ t.jsx("path", {
9
9
  d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1m1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"
10
- }), "CheckBoxOutlineBlankRounded"), p = l(/* @__PURE__ */ a.jsx("path", {
10
+ }), "CheckBoxOutlineBlankRounded"), p = n(/* @__PURE__ */ t.jsx("path", {
11
11
  d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
12
- }), "CheckRounded"), u = l(/* @__PURE__ */ a.jsx("path", {
12
+ }), "CheckRounded"), u = n(/* @__PURE__ */ t.jsx("path", {
13
13
  d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1"
14
- }), "RemoveRounded"), b = d("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), n = d("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), m = {
14
+ }), "RemoveRounded"), b = d("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), l = d("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), m = {
15
15
  MuiButtonBase: {
16
16
  defaultProps: {
17
17
  disableTouchRipple: !0,
@@ -99,6 +99,11 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
99
99
  "& .MuiButton-loadingIndicator": {
100
100
  color: "black"
101
101
  }
102
+ },
103
+ "&.Mui-disabled": {
104
+ color: r[400],
105
+ backgroundColor: r[300],
106
+ backgroundImage: "none"
102
107
  }
103
108
  })
104
109
  }
@@ -111,8 +116,8 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
111
116
  style: {
112
117
  color: "white",
113
118
  backgroundColor: e[300],
114
- backgroundImage: `linear-gradient(to bottom, ${t(e[400], 0.8)}, ${e[500]})`,
115
- boxShadow: `inset 0 2px 0 ${t(e[200], 0.2)}, inset 0 -2px 0 ${t(e[700], 0.4)}`,
119
+ backgroundImage: `linear-gradient(to bottom, ${a(e[400], 0.8)}, ${e[500]})`,
120
+ boxShadow: `inset 0 2px 0 ${a(e[200], 0.2)}, inset 0 -2px 0 ${a(e[700], 0.4)}`,
116
121
  border: `1px solid ${e[500]}`,
117
122
  "&:hover": {
118
123
  backgroundColor: e[700],
@@ -137,7 +142,7 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
137
142
  color: (o.vars || o).palette.text.primary,
138
143
  border: "1px solid",
139
144
  borderColor: r[200],
140
- backgroundColor: t(r[50], 0.3),
145
+ backgroundColor: a(r[50], 0.3),
141
146
  "&:hover": {
142
147
  backgroundColor: r[100],
143
148
  borderColor: r[300]
@@ -178,19 +183,19 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
178
183
  borderColor: e[400]
179
184
  },
180
185
  "&:active": {
181
- backgroundColor: t(e[200], 0.7)
186
+ backgroundColor: a(e[200], 0.7)
182
187
  },
183
188
  ...o.applyStyles("dark", {
184
189
  color: e[50],
185
190
  border: "1px solid",
186
191
  borderColor: e[900],
187
- backgroundColor: t(e[900], 0.3),
192
+ backgroundColor: a(e[900], 0.3),
188
193
  "&:hover": {
189
194
  borderColor: e[700],
190
- backgroundColor: t(e[900], 0.6)
195
+ backgroundColor: a(e[900], 0.6)
191
196
  },
192
197
  "&:active": {
193
- backgroundColor: t(e[900], 0.5)
198
+ backgroundColor: a(e[900], 0.5)
194
199
  }
195
200
  })
196
201
  }
@@ -213,7 +218,7 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
213
218
  backgroundColor: r[700]
214
219
  },
215
220
  "&:active": {
216
- backgroundColor: t(r[700], 0.7)
221
+ backgroundColor: a(r[700], 0.7)
217
222
  }
218
223
  })
219
224
  }
@@ -226,18 +231,18 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
226
231
  style: {
227
232
  color: e[700],
228
233
  "&:hover": {
229
- backgroundColor: t(e[100], 0.5)
234
+ backgroundColor: a(e[100], 0.5)
230
235
  },
231
236
  "&:active": {
232
- backgroundColor: t(e[200], 0.7)
237
+ backgroundColor: a(e[200], 0.7)
233
238
  },
234
239
  ...o.applyStyles("dark", {
235
240
  color: e[100],
236
241
  "&:hover": {
237
- backgroundColor: t(e[900], 0.5)
242
+ backgroundColor: a(e[900], 0.5)
238
243
  },
239
244
  "&:active": {
240
- backgroundColor: t(e[900], 0.3)
245
+ backgroundColor: a(e[900], 0.3)
241
246
  }
242
247
  })
243
248
  }
@@ -305,15 +310,15 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
305
310
  styleOverrides: {
306
311
  root: ({ theme: o }) => ({
307
312
  borderRadius: "10px",
308
- boxShadow: `0 4px 16px ${t(r[400], 0.2)}`,
309
- [`& .${n.selected}`]: {
313
+ boxShadow: `0 4px 16px ${a(r[400], 0.2)}`,
314
+ [`& .${l.selected}`]: {
310
315
  color: e[500]
311
316
  },
312
317
  ...o.applyStyles("dark", {
313
- [`& .${n.selected}`]: {
318
+ [`& .${l.selected}`]: {
314
319
  color: "#fff"
315
320
  },
316
- boxShadow: `0 4px 16px ${t(e[700], 0.5)}`
321
+ boxShadow: `0 4px 16px ${a(e[700], 0.5)}`
317
322
  })
318
323
  })
319
324
  }
@@ -338,9 +343,9 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
338
343
  MuiCheckbox: {
339
344
  defaultProps: {
340
345
  disableRipple: !0,
341
- icon: /* @__PURE__ */ a.jsx(c, { sx: { color: "hsla(210, 0%, 0%, 0.0)" } }),
342
- checkedIcon: /* @__PURE__ */ a.jsx(p, { sx: { height: 14, width: 14 } }),
343
- indeterminateIcon: /* @__PURE__ */ a.jsx(u, { sx: { height: 14, width: 14 } })
346
+ icon: /* @__PURE__ */ t.jsx(c, { sx: { color: "hsla(210, 0%, 0%, 0.0)" } }),
347
+ checkedIcon: /* @__PURE__ */ t.jsx(p, { sx: { height: 14, width: 14 } }),
348
+ indeterminateIcon: /* @__PURE__ */ t.jsx(u, { sx: { height: 14, width: 14 } })
344
349
  },
345
350
  styleOverrides: {
346
351
  root: ({ theme: o }) => ({
@@ -349,15 +354,15 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
349
354
  width: 16,
350
355
  borderRadius: 5,
351
356
  border: "1px solid ",
352
- borderColor: t(r[300], 0.8),
357
+ borderColor: a(r[300], 0.8),
353
358
  boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset",
354
- backgroundColor: t(r[100], 0.4),
359
+ backgroundColor: a(r[100], 0.4),
355
360
  transition: "border-color, background-color, 120ms ease-in",
356
361
  "&:hover": {
357
362
  borderColor: e[300]
358
363
  },
359
364
  "&.Mui-focusVisible": {
360
- outline: `3px solid ${t(e[500], 0.5)}`,
365
+ outline: `3px solid ${a(e[500], 0.5)}`,
361
366
  outlineOffset: "2px",
362
367
  borderColor: e[400]
363
368
  },
@@ -371,15 +376,15 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
371
376
  }
372
377
  },
373
378
  ...o.applyStyles("dark", {
374
- borderColor: t(r[700], 0.8),
379
+ borderColor: a(r[700], 0.8),
375
380
  boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset",
376
- backgroundColor: t(r[900], 0.8),
381
+ backgroundColor: a(r[900], 0.8),
377
382
  "&:hover": {
378
383
  borderColor: e[300]
379
384
  },
380
385
  "&.Mui-focusVisible": {
381
386
  borderColor: e[400],
382
- outline: `3px solid ${t(e[500], 0.5)}`,
387
+ outline: `3px solid ${a(e[500], 0.5)}`,
383
388
  outlineOffset: "2px"
384
389
  }
385
390
  })
@@ -449,7 +454,7 @@ const c = l(/* @__PURE__ */ a.jsx("path", {
449
454
  borderColor: r[400]
450
455
  },
451
456
  [`&.${i.focused}`]: {
452
- outline: `3px solid ${t(e[500], 0.5)}`,
457
+ outline: `3px solid ${a(e[500], 0.5)}`,
453
458
  borderColor: e[400]
454
459
  },
455
460
  ...o.applyStyles("dark", {
package/dist/theme/theme-primitives.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { PaletteMode, Shadows } from '@mui/material/styles';
1
+ import { Shadows } from '@mui/material/styles';
2
2
  declare module '@mui/material/Paper' {
3
3
  interface PaperPropsVariantOverrides {
4
4
  highlighted: true;
@@ -83,176 +83,7 @@ export declare const red: {
83
83
  800: string;
84
84
  900: string;
85
85
  };
86
- export declare const getDesignTokens: (mode: PaletteMode) => {
87
- palette: {
88
- mode: PaletteMode;
89
- primary: {
90
- contrastText: string;
91
- light: string;
92
- main: string;
93
- dark: string;
94
- };
95
- info: {
96
- contrastText: string;
97
- light: string;
98
- main: string;
99
- dark: string;
100
- };
101
- warning: {
102
- light: string;
103
- main: string;
104
- dark: string;
105
- };
106
- error: {
107
- light: string;
108
- main: string;
109
- dark: string;
110
- };
111
- success: {
112
- light: string;
113
- main: string;
114
- dark: string;
115
- };
116
- grey: {
117
- 50: string;
118
- 100: string;
119
- 200: string;
120
- 300: string;
121
- 400: string;
122
- 500: string;
123
- 600: string;
124
- 700: string;
125
- 800: string;
126
- 900: string;
127
- };
128
- divider: string;
129
- background: {
130
- default: string;
131
- paper: string;
132
- };
133
- text: {
134
- primary: string;
135
- secondary: string;
136
- warning: string;
137
- };
138
- action: {
139
- hover: string;
140
- selected: string;
141
- };
142
- };
143
- typography: {
144
- fontFamily: string;
145
- h1: {
146
- fontSize: string;
147
- fontWeight: number;
148
- lineHeight: number;
149
- letterSpacing: number;
150
- };
151
- h2: {
152
- fontSize: string;
153
- fontWeight: number;
154
- lineHeight: number;
155
- };
156
- h3: {
157
- fontSize: string;
158
- lineHeight: number;
159
- };
160
- h4: {
161
- fontSize: string;
162
- fontWeight: number;
163
- lineHeight: number;
164
- };
165
- h5: {
166
- fontSize: string;
167
- fontWeight: number;
168
- };
169
- h6: {
170
- fontSize: string;
171
- fontWeight: number;
172
- };
173
- subtitle1: {
174
- fontSize: string;
175
- };
176
- subtitle2: {
177
- fontSize: string;
178
- fontWeight: number;
179
- };
180
- body1: {
181
- fontSize: string;
182
- };
183
- body2: {
184
- fontSize: string;
185
- fontWeight: number;
186
- };
187
- caption: {
188
- fontSize: string;
189
- fontWeight: number;
190
- };
191
- };
192
- shape: {
193
- borderRadius: number;
194
- };
195
- shadows: Shadows;
196
- };
197
86
  export declare const colorSchemes: {
198
- light: {
199
- palette: {
200
- primary: {
201
- light: string;
202
- main: string;
203
- dark: string;
204
- contrastText: string;
205
- };
206
- info: {
207
- light: string;
208
- main: string;
209
- dark: string;
210
- contrastText: string;
211
- };
212
- warning: {
213
- light: string;
214
- main: string;
215
- dark: string;
216
- };
217
- error: {
218
- light: string;
219
- main: string;
220
- dark: string;
221
- };
222
- success: {
223
- light: string;
224
- main: string;
225
- dark: string;
226
- };
227
- grey: {
228
- 50: string;
229
- 100: string;
230
- 200: string;
231
- 300: string;
232
- 400: string;
233
- 500: string;
234
- 600: string;
235
- 700: string;
236
- 800: string;
237
- 900: string;
238
- };
239
- divider: string;
240
- background: {
241
- default: string;
242
- paper: string;
243
- };
244
- text: {
245
- primary: string;
246
- secondary: string;
247
- warning: string;
248
- };
249
- action: {
250
- hover: string;
251
- selected: string;
252
- };
253
- baseShadow: string;
254
- };
255
- };
256
87
  dark: {
257
88
  palette: {
258
89
  primary: {
package/dist/theme/theme-primitives.js CHANGED
@@ -1,5 +1,5 @@
1
- import { b as s, a as r } from "../createTheme-CyFSna1a.js";
2
- const a = s(), n = [...a.shadows], t = {
1
+ import { b as r, a as s } from "../createTheme-CyFSna1a.js";
2
+ const h = r(), t = {
3
3
  50: "hsl(210, 100%, 95%)",
4
4
  100: "hsl(210, 100%, 92%)",
5
5
  200: "hsl(210, 100%, 80%)",
@@ -42,7 +42,7 @@ const a = s(), n = [...a.shadows], t = {
42
42
  700: "hsl(120, 75%, 16%)",
43
43
  800: "hsl(120, 84%, 10%)",
44
44
  900: "hsl(120, 87%, 6%)"
45
- }, h = {
45
+ }, l = {
46
46
  50: "hsl(45, 100%, 97%)",
47
47
  100: "hsl(45, 92%, 90%)",
48
48
  200: "hsl(45, 94%, 80%)",
@@ -53,7 +53,7 @@ const a = s(), n = [...a.shadows], t = {
53
53
  700: "hsl(45, 94%, 20%)",
54
54
  800: "hsl(45, 95%, 16%)",
55
55
  900: "hsl(45, 93%, 12%)"
56
- }, i = {
56
+ }, a = {
57
57
  50: "hsl(0, 100%, 97%)",
58
58
  100: "hsl(0, 92%, 90%)",
59
59
  200: "hsl(0, 94%, 80%)",
@@ -64,190 +64,7 @@ const a = s(), n = [...a.shadows], t = {
64
64
  700: "hsl(0, 94%, 18%)",
65
65
  800: "hsl(0, 95%, 12%)",
66
66
  900: "hsl(0, 93%, 6%)"
67
- }, y = (p) => (n[1] = p === "dark" ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px" : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", {
68
- palette: {
69
- mode: p,
70
- primary: {
71
- light: t[200],
72
- main: t[400],
73
- dark: t[700],
74
- contrastText: t[50],
75
- ...p === "dark" && {
76
- contrastText: t[50],
77
- light: t[300],
78
- main: t[400],
79
- dark: t[700]
80
- }
81
- },
82
- info: {
83
- light: t[100],
84
- main: t[300],
85
- dark: t[600],
86
- contrastText: e[50],
87
- ...p === "dark" && {
88
- contrastText: t[300],
89
- light: t[500],
90
- main: t[700],
91
- dark: t[900]
92
- }
93
- },
94
- warning: {
95
- light: h[300],
96
- main: h[400],
97
- dark: h[800],
98
- ...p === "dark" && {
99
- light: h[400],
100
- main: h[500],
101
- dark: h[700]
102
- }
103
- },
104
- error: {
105
- light: i[300],
106
- main: i[400],
107
- dark: i[800],
108
- ...p === "dark" && {
109
- light: i[400],
110
- main: i[500],
111
- dark: i[700]
112
- }
113
- },
114
- success: {
115
- light: o[300],
116
- main: o[400],
117
- dark: o[800],
118
- ...p === "dark" && {
119
- light: o[400],
120
- main: o[500],
121
- dark: o[700]
122
- }
123
- },
124
- grey: {
125
- ...e
126
- },
127
- divider: p === "dark" ? r(e[700], 0.6) : r(e[300], 0.4),
128
- background: {
129
- default: "hsl(0, 0%, 99%)",
130
- paper: "hsl(220, 35%, 97%)",
131
- ...p === "dark" && { default: e[900], paper: "hsl(220, 30%, 7%)" }
132
- },
133
- text: {
134
- primary: e[800],
135
- secondary: e[600],
136
- warning: h[400],
137
- ...p === "dark" && { primary: "rgb(255, 255, 255)", secondary: e[400] }
138
- },
139
- action: {
140
- hover: r(e[200], 0.2),
141
- selected: `${r(e[200], 0.3)}`,
142
- ...p === "dark" && {
143
- hover: r(e[600], 0.2),
144
- selected: r(e[600], 0.3)
145
- }
146
- }
147
- },
148
- typography: {
149
- fontFamily: "Inter, sans-serif",
150
- h1: {
151
- fontSize: a.typography.pxToRem(48),
152
- fontWeight: 600,
153
- lineHeight: 1.2,
154
- letterSpacing: -0.5
155
- },
156
- h2: {
157
- fontSize: a.typography.pxToRem(36),
158
- fontWeight: 600,
159
- lineHeight: 1.2
160
- },
161
- h3: {
162
- fontSize: a.typography.pxToRem(30),
163
- lineHeight: 1.2
164
- },
165
- h4: {
166
- fontSize: a.typography.pxToRem(24),
167
- fontWeight: 600,
168
- lineHeight: 1.5
169
- },
170
- h5: {
171
- fontSize: a.typography.pxToRem(20),
172
- fontWeight: 600
173
- },
174
- h6: {
175
- fontSize: a.typography.pxToRem(18),
176
- fontWeight: 600
177
- },
178
- subtitle1: {
179
- fontSize: a.typography.pxToRem(18)
180
- },
181
- subtitle2: {
182
- fontSize: a.typography.pxToRem(14),
183
- fontWeight: 500
184
- },
185
- body1: {
186
- fontSize: a.typography.pxToRem(14)
187
- },
188
- body2: {
189
- fontSize: a.typography.pxToRem(14),
190
- fontWeight: 400
191
- },
192
- caption: {
193
- fontSize: a.typography.pxToRem(12),
194
- fontWeight: 400
195
- }
196
- },
197
- shape: {
198
- borderRadius: 8
199
- },
200
- shadows: n
201
- }), x = {
202
- light: {
203
- palette: {
204
- primary: {
205
- light: t[200],
206
- main: t[400],
207
- dark: t[700],
208
- contrastText: t[50]
209
- },
210
- info: {
211
- light: t[100],
212
- main: t[300],
213
- dark: t[600],
214
- contrastText: e[50]
215
- },
216
- warning: {
217
- light: h[300],
218
- main: h[400],
219
- dark: h[800]
220
- },
221
- error: {
222
- light: i[300],
223
- main: i[400],
224
- dark: i[800]
225
- },
226
- success: {
227
- light: o[300],
228
- main: o[400],
229
- dark: o[800]
230
- },
231
- grey: {
232
- ...e
233
- },
234
- divider: r(e[300], 0.4),
235
- background: {
236
- default: "hsl(0, 0%, 99%)",
237
- paper: "hsl(220, 35%, 97%)"
238
- },
239
- text: {
240
- primary: e[800],
241
- secondary: e[600],
242
- warning: h[400]
243
- },
244
- action: {
245
- hover: r(e[200], 0.2),
246
- selected: `${r(e[200], 0.3)}`
247
- },
248
- baseShadow: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px"
249
- }
250
- },
67
+ }, i = {
251
68
  dark: {
252
69
  palette: {
253
70
  primary: {
@@ -263,14 +80,14 @@ const a = s(), n = [...a.shadows], t = {
263
80
  dark: t[900]
264
81
  },
265
82
  warning: {
266
- light: h[400],
267
- main: h[500],
268
- dark: h[700]
83
+ light: l[400],
84
+ main: l[500],
85
+ dark: l[700]
269
86
  },
270
87
  error: {
271
- light: i[400],
272
- main: i[500],
273
- dark: i[700]
88
+ light: a[400],
89
+ main: a[500],
90
+ dark: a[700]
274
91
  },
275
92
  success: {
276
93
  light: o[400],
@@ -280,7 +97,7 @@ const a = s(), n = [...a.shadows], t = {
280
97
  grey: {
281
98
  ...e
282
99
  },
283
- divider: r(e[700], 0.6),
100
+ divider: s(e[700], 0.6),
284
101
  background: {
285
102
  default: e[900],
286
103
  paper: "hsl(220, 30%, 7%)"
@@ -290,72 +107,71 @@ const a = s(), n = [...a.shadows], t = {
290
107
  secondary: e[400]
291
108
  },
292
109
  action: {
293
- hover: r(e[600], 0.2),
294
- selected: r(e[600], 0.3)
110
+ hover: s(e[600], 0.2),
111
+ selected: s(e[600], 0.3)
295
112
  },
296
113
  baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
297
114
  }
298
115
  }
299
- }, d = {
116
+ }, g = {
300
117
  fontFamily: "Inter, sans-serif",
301
118
  h1: {
302
- fontSize: a.typography.pxToRem(48),
119
+ fontSize: h.typography.pxToRem(48),
303
120
  fontWeight: 600,
304
121
  lineHeight: 1.2,
305
122
  letterSpacing: -0.5
306
123
  },
307
124
  h2: {
308
- fontSize: a.typography.pxToRem(36),
125
+ fontSize: h.typography.pxToRem(36),
309
126
  fontWeight: 600,
310
127
  lineHeight: 1.2
311
128
  },
312
129
  h3: {
313
- fontSize: a.typography.pxToRem(30),
130
+ fontSize: h.typography.pxToRem(30),
314
131
  lineHeight: 1.2
315
132
  },
316
133
  h4: {
317
- fontSize: a.typography.pxToRem(24),
134
+ fontSize: h.typography.pxToRem(24),
318
135
  fontWeight: 600,
319
136
  lineHeight: 1.5
320
137
  },
321
138
  h5: {
322
- fontSize: a.typography.pxToRem(20),
139
+ fontSize: h.typography.pxToRem(20),
323
140
  fontWeight: 600
324
141
  },
325
142
  h6: {
326
- fontSize: a.typography.pxToRem(18),
143
+ fontSize: h.typography.pxToRem(18),
327
144
  fontWeight: 600
328
145
  },
329
146
  subtitle1: {
330
- fontSize: a.typography.pxToRem(18)
147
+ fontSize: h.typography.pxToRem(18)
331
148
  },
332
149
  subtitle2: {
333
- fontSize: a.typography.pxToRem(14),
150
+ fontSize: h.typography.pxToRem(14),
334
151
  fontWeight: 500
335
152
  },
336
153
  body1: {
337
- fontSize: a.typography.pxToRem(14)
154
+ fontSize: h.typography.pxToRem(14)
338
155
  },
339
156
  body2: {
340
- fontSize: a.typography.pxToRem(14),
157
+ fontSize: h.typography.pxToRem(14),
341
158
  fontWeight: 400
342
159
  },
343
160
  caption: {
344
- fontSize: a.typography.pxToRem(12),
161
+ fontSize: h.typography.pxToRem(12),
345
162
  fontWeight: 400
346
163
  }
347
- }, f = {
164
+ }, y = {
348
165
  borderRadius: 8
349
- }, l = ["none", "var(--s-palette-baseShadow)", ...a.shadows.slice(2)], c = l;
166
+ }, n = ["none", "var(--s-palette-baseShadow)", ...h.shadows.slice(2)], f = n;
350
167
  export {
351
168
  t as brand,
352
- x as colorSchemes,
353
- y as getDesignTokens,
169
+ i as colorSchemes,
354
170
  e as gray,
355
171
  o as green,
356
- h as orange,
357
- i as red,
358
- c as shadows,
359
- f as shape,
360
- d as typography
172
+ l as orange,
173
+ a as red,
174
+ f as shadows,
175
+ y as shape,
176
+ g as typography
361
177
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org"
5
5
  },
6
- "version": "1.0.47",
6
+ "version": "1.0.49",
7
7
  "description": "advanced ui kit for solostylist",
8
8
  "private": false,
9
9
  "type": "module",