@helpdice/theme 1.0.4 → 1.0.9

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 (24) hide show
  1. package/dist/css-baseline/css-baseline.d.ts +2 -1
  2. package/dist/css-baseline/index.js +110 -6
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +147 -6
  5. package/dist/themes/index.js +89 -2
  6. package/dist/themes/presets/index.d.ts +11 -0
  7. package/dist/themes/shadows.d.ts +84 -0
  8. package/dist/ui-provider/index.js +97 -4
  9. package/dist/use-all-themes/index.js +89 -2
  10. package/dist/use-media-query/index.js +97 -4
  11. package/dist/use-theme/index.js +97 -4
  12. package/dist/utils/color.d.ts +2 -0
  13. package/esm/css-baseline/css-baseline.d.ts +2 -1
  14. package/esm/css-baseline/css-baseline.js +2 -4
  15. package/esm/index.d.ts +1 -0
  16. package/esm/index.js +2 -1
  17. package/esm/themes/presets/dark.js +3 -1
  18. package/esm/themes/presets/default.js +3 -1
  19. package/esm/themes/presets/index.d.ts +11 -0
  20. package/esm/themes/shadows.d.ts +84 -0
  21. package/esm/themes/shadows.js +84 -0
  22. package/esm/use-theme/theme-context.js +8 -2
  23. package/esm/utils/color.d.ts +2 -0
  24. package/package.json +3 -1
package/dist/ui-provider/index.js CHANGED
@@ -153,6 +153,91 @@ var useHUIContext = function useHUIContext() {
153
153
  return React.useContext(HUIContent);
154
154
  };
155
155
 
156
+ var shadows = {
157
+ button: "0 2px #0000000b",
158
+ text: "0 -1px 0 rgb(0 0 0 / 12%)",
159
+ drop: {
160
+ z1: "0px 2px 8px rgba(0, 0, 0, 0.4)",
161
+ z2: "rgba(149, 157, 165, 0.2) 0px 8px 24px",
162
+ z3: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
163
+ },
164
+ level: {
165
+ z1: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
166
+ z2: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
167
+ z3: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
168
+ z4: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
169
+ z5: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
170
+ z6: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px",
171
+ z7: "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
172
+ z8: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
173
+ z9: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
174
+ z10: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
175
+ z11: "rgba(0, 0, 0, 0.1) 0px 4px 12px",
176
+ z12: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
177
+ z13: "rgb(38, 57, 77) 0px 20px 30px -10px",
178
+ z14: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
179
+ z15: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
180
+ z16: "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
181
+ z17: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
182
+ z18: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px",
183
+ z19: "rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset",
184
+ z20: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
185
+ z21: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
186
+ z22: "rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px",
187
+ z23: "rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px",
188
+ z24: "rgba(17, 17, 26, 0.1) 0px 0px 16px",
189
+ z25: "rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
190
+ z26: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px",
191
+ z27: "rgba(0, 0, 0, 0.15) 0px 3px 3px 0px",
192
+ z28: "rgba(0, 0, 0, 0.08) 0px 4px 12px",
193
+ z29: "rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px",
194
+ z30: "rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px",
195
+ z31: "rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px"
196
+ },
197
+ border: {
198
+ z1: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px",
199
+ z2: "rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px",
200
+ z3: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px",
201
+ z4: "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
202
+ z5: "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
203
+ z6: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px",
204
+ z7: "rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px",
205
+ z8: "rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em",
206
+ z9: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
207
+ z10: "rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px",
208
+ z11: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px",
209
+ z12: "rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px",
210
+ z13: "rgba(0, 0, 0, 0.15) 0px 2px 8px",
211
+ z14: "rgba(0, 0, 0, 0.18) 0px 2px 4px",
212
+ z15: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px",
213
+ z16: "rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset",
214
+ z17: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
215
+ },
216
+ inner: {
217
+ z1: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
218
+ z2: "rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset",
219
+ z3: "rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset",
220
+ z4: "rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset"
221
+ },
222
+ "float": {
223
+ z1: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
224
+ z2: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset",
225
+ z3: "rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
226
+ z4: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
227
+ z5: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
228
+ z6: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px",
229
+ z7: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
230
+ z8: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px",
231
+ z9: "rgba(0, 0, 0, 0.1) 0px 10px 50px"
232
+ },
233
+ top: {
234
+ z1: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
235
+ z2: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
236
+ z3: "rgba(0, 0, 0, 0.1) -4px 9px 25px -6px",
237
+ z4: "rgba(0, 0, 0, 0.09) 0px 3px 12px"
238
+ }
239
+ };
240
+
156
241
  var defaultFont = {
157
242
  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
158
243
  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
@@ -256,7 +341,8 @@ var themes$1 = {
256
341
  layout: layout$1,
257
342
  palette: palette$1,
258
343
  breakpoints: breakpoints$1,
259
- expressiveness: expressiveness$1
344
+ expressiveness: expressiveness$1,
345
+ shadows: shadows
260
346
  };
261
347
 
262
348
  var palette = {
@@ -319,7 +405,8 @@ var themes = {
319
405
  layout: layout,
320
406
  palette: palette,
321
407
  breakpoints: breakpoints,
322
- expressiveness: expressiveness
408
+ expressiveness: expressiveness,
409
+ shadows: shadows
323
410
  };
324
411
 
325
412
  var isObject = function isObject(target) {
@@ -395,11 +482,17 @@ var Themes = {
395
482
  };
396
483
 
397
484
  /* "use client" */
398
-
399
485
  var defaultTheme = Themes.getPresetStaticTheme();
400
486
  var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
487
+
488
+ // export const useTheme = (): HUIThemes => React.useContext<HUIThemes>(ThemeContext)
489
+
401
490
  var useTheme = function useTheme() {
402
- return React.useContext(ThemeContext);
491
+ var context = React.useContext(ThemeContext);
492
+ if (!context) {
493
+ throw new Error('useTheme must be used within a ThemeProvider');
494
+ }
495
+ return context;
403
496
  };
404
497
 
405
498
  /* "use client" */
package/dist/use-all-themes/index.js CHANGED
@@ -57,6 +57,91 @@ function _typeof(o) {
57
57
  }, _typeof(o);
58
58
  }
59
59
 
60
+ var shadows = {
61
+ button: "0 2px #0000000b",
62
+ text: "0 -1px 0 rgb(0 0 0 / 12%)",
63
+ drop: {
64
+ z1: "0px 2px 8px rgba(0, 0, 0, 0.4)",
65
+ z2: "rgba(149, 157, 165, 0.2) 0px 8px 24px",
66
+ z3: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
67
+ },
68
+ level: {
69
+ z1: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
70
+ z2: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
71
+ z3: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
72
+ z4: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
73
+ z5: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
74
+ z6: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px",
75
+ z7: "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
76
+ z8: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
77
+ z9: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
78
+ z10: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
79
+ z11: "rgba(0, 0, 0, 0.1) 0px 4px 12px",
80
+ z12: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
81
+ z13: "rgb(38, 57, 77) 0px 20px 30px -10px",
82
+ z14: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
83
+ z15: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
84
+ z16: "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
85
+ z17: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
86
+ z18: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px",
87
+ z19: "rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset",
88
+ z20: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
89
+ z21: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
90
+ z22: "rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px",
91
+ z23: "rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px",
92
+ z24: "rgba(17, 17, 26, 0.1) 0px 0px 16px",
93
+ z25: "rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
94
+ z26: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px",
95
+ z27: "rgba(0, 0, 0, 0.15) 0px 3px 3px 0px",
96
+ z28: "rgba(0, 0, 0, 0.08) 0px 4px 12px",
97
+ z29: "rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px",
98
+ z30: "rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px",
99
+ z31: "rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px"
100
+ },
101
+ border: {
102
+ z1: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px",
103
+ z2: "rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px",
104
+ z3: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px",
105
+ z4: "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
106
+ z5: "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
107
+ z6: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px",
108
+ z7: "rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px",
109
+ z8: "rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em",
110
+ z9: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
111
+ z10: "rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px",
112
+ z11: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px",
113
+ z12: "rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px",
114
+ z13: "rgba(0, 0, 0, 0.15) 0px 2px 8px",
115
+ z14: "rgba(0, 0, 0, 0.18) 0px 2px 4px",
116
+ z15: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px",
117
+ z16: "rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset",
118
+ z17: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
119
+ },
120
+ inner: {
121
+ z1: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
122
+ z2: "rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset",
123
+ z3: "rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset",
124
+ z4: "rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset"
125
+ },
126
+ "float": {
127
+ z1: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
128
+ z2: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset",
129
+ z3: "rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
130
+ z4: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
131
+ z5: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
132
+ z6: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px",
133
+ z7: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
134
+ z8: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px",
135
+ z9: "rgba(0, 0, 0, 0.1) 0px 10px 50px"
136
+ },
137
+ top: {
138
+ z1: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
139
+ z2: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
140
+ z3: "rgba(0, 0, 0, 0.1) -4px 9px 25px -6px",
141
+ z4: "rgba(0, 0, 0, 0.09) 0px 3px 12px"
142
+ }
143
+ };
144
+
60
145
  var defaultFont = {
61
146
  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
62
147
  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
@@ -160,7 +245,8 @@ var themes$1 = {
160
245
  layout: layout$1,
161
246
  palette: palette$1,
162
247
  breakpoints: breakpoints$1,
163
- expressiveness: expressiveness$1
248
+ expressiveness: expressiveness$1,
249
+ shadows: shadows
164
250
  };
165
251
 
166
252
  var palette = {
@@ -223,7 +309,8 @@ var themes = {
223
309
  layout: layout,
224
310
  palette: palette,
225
311
  breakpoints: breakpoints,
226
- expressiveness: expressiveness
312
+ expressiveness: expressiveness,
313
+ shadows: shadows
227
314
  };
228
315
 
229
316
  var isObject = function isObject(target) {
package/dist/use-media-query/index.js CHANGED
@@ -102,6 +102,91 @@ function _unsupportedIterableToArray(r, a) {
102
102
  }
103
103
  }
104
104
 
105
+ var shadows = {
106
+ button: "0 2px #0000000b",
107
+ text: "0 -1px 0 rgb(0 0 0 / 12%)",
108
+ drop: {
109
+ z1: "0px 2px 8px rgba(0, 0, 0, 0.4)",
110
+ z2: "rgba(149, 157, 165, 0.2) 0px 8px 24px",
111
+ z3: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
112
+ },
113
+ level: {
114
+ z1: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
115
+ z2: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
116
+ z3: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
117
+ z4: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
118
+ z5: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
119
+ z6: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px",
120
+ z7: "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
121
+ z8: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
122
+ z9: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
123
+ z10: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
124
+ z11: "rgba(0, 0, 0, 0.1) 0px 4px 12px",
125
+ z12: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
126
+ z13: "rgb(38, 57, 77) 0px 20px 30px -10px",
127
+ z14: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
128
+ z15: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
129
+ z16: "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
130
+ z17: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
131
+ z18: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px",
132
+ z19: "rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset",
133
+ z20: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
134
+ z21: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
135
+ z22: "rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px",
136
+ z23: "rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px",
137
+ z24: "rgba(17, 17, 26, 0.1) 0px 0px 16px",
138
+ z25: "rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
139
+ z26: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px",
140
+ z27: "rgba(0, 0, 0, 0.15) 0px 3px 3px 0px",
141
+ z28: "rgba(0, 0, 0, 0.08) 0px 4px 12px",
142
+ z29: "rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px",
143
+ z30: "rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px",
144
+ z31: "rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px"
145
+ },
146
+ border: {
147
+ z1: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px",
148
+ z2: "rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px",
149
+ z3: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px",
150
+ z4: "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
151
+ z5: "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
152
+ z6: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px",
153
+ z7: "rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px",
154
+ z8: "rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em",
155
+ z9: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
156
+ z10: "rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px",
157
+ z11: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px",
158
+ z12: "rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px",
159
+ z13: "rgba(0, 0, 0, 0.15) 0px 2px 8px",
160
+ z14: "rgba(0, 0, 0, 0.18) 0px 2px 4px",
161
+ z15: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px",
162
+ z16: "rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset",
163
+ z17: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
164
+ },
165
+ inner: {
166
+ z1: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
167
+ z2: "rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset",
168
+ z3: "rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset",
169
+ z4: "rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset"
170
+ },
171
+ "float": {
172
+ z1: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
173
+ z2: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset",
174
+ z3: "rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
175
+ z4: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
176
+ z5: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
177
+ z6: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px",
178
+ z7: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
179
+ z8: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px",
180
+ z9: "rgba(0, 0, 0, 0.1) 0px 10px 50px"
181
+ },
182
+ top: {
183
+ z1: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
184
+ z2: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
185
+ z3: "rgba(0, 0, 0, 0.1) -4px 9px 25px -6px",
186
+ z4: "rgba(0, 0, 0, 0.09) 0px 3px 12px"
187
+ }
188
+ };
189
+
105
190
  var defaultFont = {
106
191
  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
107
192
  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
@@ -205,7 +290,8 @@ var themes$1 = {
205
290
  layout: layout$1,
206
291
  palette: palette$1,
207
292
  breakpoints: breakpoints$1,
208
- expressiveness: expressiveness$1
293
+ expressiveness: expressiveness$1,
294
+ shadows: shadows
209
295
  };
210
296
 
211
297
  var palette = {
@@ -268,7 +354,8 @@ var themes = {
268
354
  layout: layout,
269
355
  palette: palette,
270
356
  breakpoints: breakpoints,
271
- expressiveness: expressiveness
357
+ expressiveness: expressiveness,
358
+ shadows: shadows
272
359
  };
273
360
 
274
361
  var isObject = function isObject(target) {
@@ -344,11 +431,17 @@ var Themes = {
344
431
  };
345
432
 
346
433
  /* "use client" */
347
-
348
434
  var defaultTheme = Themes.getPresetStaticTheme();
349
435
  var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
436
+
437
+ // export const useTheme = (): HUIThemes => React.useContext<HUIThemes>(ThemeContext)
438
+
350
439
  var useTheme = function useTheme() {
351
- return React.useContext(ThemeContext);
440
+ var context = React.useContext(ThemeContext);
441
+ if (!context) {
442
+ throw new Error('useTheme must be used within a ThemeProvider');
443
+ }
444
+ return context;
352
445
  };
353
446
 
354
447
  var tuple = function tuple() {
package/dist/use-theme/index.js CHANGED
@@ -57,6 +57,91 @@ function _typeof(o) {
57
57
  }, _typeof(o);
58
58
  }
59
59
 
60
+ var shadows = {
61
+ button: "0 2px #0000000b",
62
+ text: "0 -1px 0 rgb(0 0 0 / 12%)",
63
+ drop: {
64
+ z1: "0px 2px 8px rgba(0, 0, 0, 0.4)",
65
+ z2: "rgba(149, 157, 165, 0.2) 0px 8px 24px",
66
+ z3: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
67
+ },
68
+ level: {
69
+ z1: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
70
+ z2: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
71
+ z3: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
72
+ z4: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
73
+ z5: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
74
+ z6: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px",
75
+ z7: "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
76
+ z8: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
77
+ z9: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
78
+ z10: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
79
+ z11: "rgba(0, 0, 0, 0.1) 0px 4px 12px",
80
+ z12: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
81
+ z13: "rgb(38, 57, 77) 0px 20px 30px -10px",
82
+ z14: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
83
+ z15: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
84
+ z16: "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
85
+ z17: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
86
+ z18: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px",
87
+ z19: "rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset",
88
+ z20: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
89
+ z21: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
90
+ z22: "rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px",
91
+ z23: "rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px",
92
+ z24: "rgba(17, 17, 26, 0.1) 0px 0px 16px",
93
+ z25: "rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
94
+ z26: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px",
95
+ z27: "rgba(0, 0, 0, 0.15) 0px 3px 3px 0px",
96
+ z28: "rgba(0, 0, 0, 0.08) 0px 4px 12px",
97
+ z29: "rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px",
98
+ z30: "rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px",
99
+ z31: "rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px"
100
+ },
101
+ border: {
102
+ z1: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px",
103
+ z2: "rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px",
104
+ z3: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px",
105
+ z4: "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
106
+ z5: "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
107
+ z6: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px",
108
+ z7: "rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px",
109
+ z8: "rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em",
110
+ z9: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
111
+ z10: "rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px",
112
+ z11: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px",
113
+ z12: "rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px",
114
+ z13: "rgba(0, 0, 0, 0.15) 0px 2px 8px",
115
+ z14: "rgba(0, 0, 0, 0.18) 0px 2px 4px",
116
+ z15: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px",
117
+ z16: "rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset",
118
+ z17: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
119
+ },
120
+ inner: {
121
+ z1: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
122
+ z2: "rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset",
123
+ z3: "rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset",
124
+ z4: "rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset"
125
+ },
126
+ "float": {
127
+ z1: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
128
+ z2: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset",
129
+ z3: "rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
130
+ z4: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
131
+ z5: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
132
+ z6: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px",
133
+ z7: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
134
+ z8: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px",
135
+ z9: "rgba(0, 0, 0, 0.1) 0px 10px 50px"
136
+ },
137
+ top: {
138
+ z1: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
139
+ z2: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
140
+ z3: "rgba(0, 0, 0, 0.1) -4px 9px 25px -6px",
141
+ z4: "rgba(0, 0, 0, 0.09) 0px 3px 12px"
142
+ }
143
+ };
144
+
60
145
  var defaultFont = {
61
146
  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
62
147
  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
@@ -160,7 +245,8 @@ var themes$1 = {
160
245
  layout: layout$1,
161
246
  palette: palette$1,
162
247
  breakpoints: breakpoints$1,
163
- expressiveness: expressiveness$1
248
+ expressiveness: expressiveness$1,
249
+ shadows: shadows
164
250
  };
165
251
 
166
252
  var palette = {
@@ -223,7 +309,8 @@ var themes = {
223
309
  layout: layout,
224
310
  palette: palette,
225
311
  breakpoints: breakpoints,
226
- expressiveness: expressiveness
312
+ expressiveness: expressiveness,
313
+ shadows: shadows
227
314
  };
228
315
 
229
316
  var isObject = function isObject(target) {
@@ -299,11 +386,17 @@ var Themes = {
299
386
  };
300
387
 
301
388
  /* "use client" */
302
-
303
389
  var defaultTheme = Themes.getPresetStaticTheme();
304
390
  var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
391
+
392
+ // export const useTheme = (): HUIThemes => React.useContext<HUIThemes>(ThemeContext)
393
+
305
394
  var useTheme = function useTheme() {
306
- return React.useContext(ThemeContext);
395
+ var context = React.useContext(ThemeContext);
396
+ if (!context) {
397
+ throw new Error('useTheme must be used within a ThemeProvider');
398
+ }
399
+ return context;
307
400
  };
308
401
 
309
402
  exports.default = useTheme;
package/dist/utils/color.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const colorToRgbValues: (color: string) => number[];
2
+ export declare const addColorAlpha: (color: string, alpha: number) => string;
package/esm/css-baseline/css-baseline.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import React, { ReactElement } from 'react';
2
+ import flush from 'styled-jsx';
2
3
  export type FlushToReact = <T>(opts?: {
3
4
  nonce?: string;
4
5
  }) => Array<ReactElement<T>>;
5
6
  type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
6
- flush: FlushToReact;
7
+ flush: typeof flush.StyleRegistry;
7
8
  };
8
9
  declare const MemoCssBaseline: MemoCssBaselineComponent<React.PropsWithChildren<unknown>>;
9
10
  export default MemoCssBaseline;
package/esm/css-baseline/css-baseline.js CHANGED
@@ -2,10 +2,8 @@ import _JSXStyle from "../styled-jsx.es.js";
2
2
  /* "use client" */
3
3
  import React from 'react';
4
4
  import useTheme from '../use-theme';
5
- // import flush from 'styled-jsx'
6
-
5
+ import flush from 'styled-jsx';
7
6
  // export type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>
8
-
9
7
  // export type FlushToHTML = (opts?: { nonce?: string }) => string
10
8
 
11
9
  var CssBaseline = function CssBaseline(_ref) {
@@ -17,7 +15,7 @@ var CssBaseline = function CssBaseline(_ref) {
17
15
  }, "html,body{background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";}html{font-size:16px;--helpdice-icons-background:").concat(theme.palette.background, ";}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:").concat(theme.font.sans, ";}#__next{overflow-x:hidden;}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;font-family:").concat(theme.font.sans, ";}p{margin:1em 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875em;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.link, ";-webkit-text-decoration:").concat(theme.expressiveness.linkStyle, ";text-decoration:").concat(theme.expressiveness.linkStyle, ";}a:hover{-webkit-text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";}ul,ol{padding:0;list-style-type:none;margin:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";color:").concat(theme.palette.foreground, ";}ol{list-style-type:decimal;}li{margin-bottom:0.625em;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.7rem 0;}h1{font-size:3rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005em;-moz-letter-spacing:-0.005em;-ms-letter-spacing:-0.005em;letter-spacing:-0.005em;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:").concat(theme.palette.code, ";font-family:").concat(theme.font.mono, ";font-size:0.9em;white-space:pre-wrap;}code:before,code:after{content:'\\`';}pre{padding:calc(").concat(theme.layout.gap, " * 0.9) ").concat(theme.layout.gap, ";margin:").concat(theme.layout.gap, " 0;border:1px solid ").concat(theme.palette.accents_2, ";border-radius:").concat(theme.layout.radius, ";font-family:").concat(theme.font.mono, ";white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:14px;-webkit-overflow-scrolling:touch;}pre code{color:").concat(theme.palette.foreground, ";font-size:1em;line-height:1.25em;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:").concat(theme.palette.accents_2, ";}details{background-color:").concat(theme.palette.accents_1, ";border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::marker,summary::before,summary::-webkit-details-marker{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ").concat(theme.layout.gap, ") ").concat(theme.layout.gap, ";color:").concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";border-radius:").concat(theme.layout.radius, ";margin:1.5em 0;border:1px solid ").concat(theme.palette.border, ";}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:").concat(theme.palette.selection, ";color:").concat(theme.palette.foreground, ";}")));
18
16
  };
19
17
  var MemoCssBaseline = /*#__PURE__*/React.memo(CssBaseline);
20
- // MemoCssBaseline.flush = flush.StyleRegistry
18
+ MemoCssBaseline.flush = flush.StyleRegistry;
21
19
  // MemoCssBaseline.flushToHTML = flushToReact
22
20
 
23
21
  export default MemoCssBaseline;
package/esm/index.d.ts CHANGED
@@ -21,3 +21,4 @@ export { default as Expand } from './shared/expand';
21
21
  export { default as Dropdown } from './shared/dropdown';
22
22
  export { default as CssTransition } from './shared/css-transition';
23
23
  export { default as Backdrop } from './shared/backdrop';
24
+ export { addColorAlpha, colorToRgbValues } from './utils/color';
package/esm/index.js CHANGED
@@ -16,4 +16,5 @@ export { default as Ellipsis } from './shared/ellipsis';
16
16
  export { default as Expand } from './shared/expand';
17
17
  export { default as Dropdown } from './shared/dropdown';
18
18
  export { default as CssTransition } from './shared/css-transition';
19
- export { default as Backdrop } from './shared/backdrop';
19
+ export { default as Backdrop } from './shared/backdrop';
20
+ export { addColorAlpha, colorToRgbValues } from './utils/color';
package/esm/themes/presets/dark.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { shadows } from '../shadows';
1
2
  import { defaultFont, defaultBreakpoints, defaultLayout } from './shared';
2
3
  export var palette = {
3
4
  accents_1: '#111',
@@ -59,6 +60,7 @@ export var themes = {
59
60
  layout: layout,
60
61
  palette: palette,
61
62
  breakpoints: breakpoints,
62
- expressiveness: expressiveness
63
+ expressiveness: expressiveness,
64
+ shadows: shadows
63
65
  };
64
66
  export default themes;
package/esm/themes/presets/default.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { shadows } from '../shadows';
1
2
  import { defaultFont, defaultBreakpoints, defaultLayout } from './shared';
2
3
  export var palette = {
3
4
  accents_1: '#fafafa',
@@ -59,6 +60,7 @@ export var themes = {
59
60
  layout: layout,
60
61
  palette: palette,
61
62
  breakpoints: breakpoints,
62
- expressiveness: expressiveness
63
+ expressiveness: expressiveness,
64
+ shadows: shadows
63
65
  };
64
66
  export default themes;
package/esm/themes/presets/index.d.ts CHANGED
@@ -80,6 +80,16 @@ export interface HUIThemesBreakpoints {
80
80
  lg: BreakpointsItem;
81
81
  xl: BreakpointsItem;
82
82
  }
83
+ export interface HUIThemesShadow {
84
+ button: string;
85
+ text: string;
86
+ drop: Record<string, string>;
87
+ level: Record<string, string>;
88
+ border: Record<string, string>;
89
+ inner: Record<string, string>;
90
+ float: Record<string, string>;
91
+ top: Record<string, string>;
92
+ }
83
93
  export interface HUIThemes {
84
94
  type: string;
85
95
  font: HUIThemesFont;
@@ -87,4 +97,5 @@ export interface HUIThemes {
87
97
  palette: HUIThemesPalette;
88
98
  breakpoints: HUIThemesBreakpoints;
89
99
  expressiveness: HUIThemesExpressiveness;
100
+ shadows: HUIThemesShadow;
90
101
  }