@helpdice/theme 1.0.4 → 1.0.9

package/dist/css-baseline/css-baseline.d.ts

@@ -1,9 +1,10 @@
 import React, { ReactElement } from 'react';
+import flush from 'styled-jsx';
 export type FlushToReact = <T>(opts?: {
     nonce?: string;
 }) => Array<ReactElement<T>>;
 type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
-    flush: FlushToReact;
+    flush: typeof flush.StyleRegistry;
 };
 declare const MemoCssBaseline: MemoCssBaselineComponent<React.PropsWithChildren<unknown>>;
 export default MemoCssBaseline;

package/dist/css-baseline/index.js

@@ -600,6 +600,91 @@ function _typeof(o) {
   }, _typeof(o);
 }
 
+var shadows = {
+  button: "0 2px #0000000b",
+  text: "0 -1px 0 rgb(0 0 0 / 12%)",
+  drop: {
+    z1: "0px 2px 8px rgba(0, 0, 0, 0.4)",
+    z2: "rgba(149, 157, 165, 0.2) 0px 8px 24px",
+    z3: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
+  },
+  level: {
+    z1: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
+    z2: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+    z3: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
+    z4: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+    z5: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
+    z6: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px",
+    z7: "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
+    z8: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
+    z9: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
+    z10: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
+    z11: "rgba(0, 0, 0, 0.1) 0px 4px 12px",
+    z12: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
+    z13: "rgb(38, 57, 77) 0px 20px 30px -10px",
+    z14: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
+    z15: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
+    z16: "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
+    z17: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
+    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",
+    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",
+    z20: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
+    z21: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+    z22: "rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px",
+    z23: "rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px",
+    z24: "rgba(17, 17, 26, 0.1) 0px 0px 16px",
+    z25: "rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
+    z26: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px",
+    z27: "rgba(0, 0, 0, 0.15) 0px 3px 3px 0px",
+    z28: "rgba(0, 0, 0, 0.08) 0px 4px 12px",
+    z29: "rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px",
+    z30: "rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px",
+    z31: "rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px"
+  },
+  border: {
+    z1: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px",
+    z2: "rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px",
+    z3: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px",
+    z4: "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
+    z5: "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
+    z6: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px",
+    z7: "rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px",
+    z8: "rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em",
+    z9: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
+    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",
+    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",
+    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",
+    z13: "rgba(0, 0, 0, 0.15) 0px 2px 8px",
+    z14: "rgba(0, 0, 0, 0.18) 0px 2px 4px",
+    z15: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px",
+    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",
+    z17: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
+  },
+  inner: {
+    z1: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
+    z2: "rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset",
+    z3: "rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset",
+    z4: "rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset"
+  },
+  "float": {
+    z1: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+    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",
+    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",
+    z4: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z5: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z6: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px",
+    z7: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z8: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px",
+    z9: "rgba(0, 0, 0, 0.1) 0px 10px 50px"
+  },
+  top: {
+    z1: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
+    z2: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
+    z3: "rgba(0, 0, 0, 0.1) -4px 9px 25px -6px",
+    z4: "rgba(0, 0, 0, 0.09) 0px 3px 12px"
+  }
+};
+
 var defaultFont = {
   sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
   mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
@@ -703,7 +788,8 @@ var themes$1 = {
   layout: layout$1,
   palette: palette$1,
   breakpoints: breakpoints$1,
-  expressiveness: expressiveness$1
+  expressiveness: expressiveness$1,
+  shadows: shadows
 };
 
 var palette = {
@@ -766,7 +852,8 @@ var themes = {
   layout: layout,
   palette: palette,
   breakpoints: breakpoints,
-  expressiveness: expressiveness
+  expressiveness: expressiveness,
+  shadows: shadows
 };
 
 var isObject = function isObject(target) {
@@ -842,17 +929,33 @@ var Themes = {
 };
 
 /* "use client" */
-
 var defaultTheme = Themes.getPresetStaticTheme();
 var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
+
+// export const useTheme = (): HUIThemes => React.useContext<HUIThemes>(ThemeContext)
+
 var useTheme = function useTheme() {
-  return React.useContext(ThemeContext);
+  var context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
 };
 
-// import flush from 'styled-jsx'
+var styledJsx;
+var hasRequiredStyledJsx;
 
-// export type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>
+function requireStyledJsx () {
+	if (hasRequiredStyledJsx) return styledJsx;
+	hasRequiredStyledJsx = 1;
+	styledJsx = requireIndex();
+	return styledJsx;
+}
 
+var styledJsxExports = requireStyledJsx();
+var flush = /*@__PURE__*/getDefaultExportFromCjs(styledJsxExports);
+
+// export type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>
 // export type FlushToHTML = (opts?: { nonce?: string }) => string
 
 var CssBaseline = function CssBaseline(_ref) {
@@ -864,5 +967,6 @@ var CssBaseline = function CssBaseline(_ref) {
   }, "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, ";}")));
 };
 var MemoCssBaseline = /*#__PURE__*/React.memo(CssBaseline);
+MemoCssBaseline.flush = flush.StyleRegistry;
 
 exports.default = MemoCssBaseline;

package/dist/index.d.ts

@@ -21,3 +21,4 @@ export { default as Expand } from './shared/expand';
 export { default as Dropdown } from './shared/dropdown';
 export { default as CssTransition } from './shared/css-transition';
 export { default as Backdrop } from './shared/backdrop';
+export { addColorAlpha, colorToRgbValues } from './utils/color';

package/dist/index.js

@@ -172,6 +172,91 @@ var useHUIContext = function useHUIContext() {
   return React.useContext(HUIContent);
 };
 
+var shadows = {
+  button: "0 2px #0000000b",
+  text: "0 -1px 0 rgb(0 0 0 / 12%)",
+  drop: {
+    z1: "0px 2px 8px rgba(0, 0, 0, 0.4)",
+    z2: "rgba(149, 157, 165, 0.2) 0px 8px 24px",
+    z3: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
+  },
+  level: {
+    z1: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
+    z2: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+    z3: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
+    z4: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+    z5: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
+    z6: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px",
+    z7: "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
+    z8: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
+    z9: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
+    z10: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
+    z11: "rgba(0, 0, 0, 0.1) 0px 4px 12px",
+    z12: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
+    z13: "rgb(38, 57, 77) 0px 20px 30px -10px",
+    z14: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
+    z15: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
+    z16: "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
+    z17: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
+    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",
+    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",
+    z20: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
+    z21: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+    z22: "rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px",
+    z23: "rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px",
+    z24: "rgba(17, 17, 26, 0.1) 0px 0px 16px",
+    z25: "rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
+    z26: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px",
+    z27: "rgba(0, 0, 0, 0.15) 0px 3px 3px 0px",
+    z28: "rgba(0, 0, 0, 0.08) 0px 4px 12px",
+    z29: "rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px",
+    z30: "rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px",
+    z31: "rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px"
+  },
+  border: {
+    z1: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px",
+    z2: "rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px",
+    z3: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px",
+    z4: "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
+    z5: "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
+    z6: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px",
+    z7: "rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px",
+    z8: "rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em",
+    z9: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
+    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",
+    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",
+    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",
+    z13: "rgba(0, 0, 0, 0.15) 0px 2px 8px",
+    z14: "rgba(0, 0, 0, 0.18) 0px 2px 4px",
+    z15: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px",
+    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",
+    z17: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
+  },
+  inner: {
+    z1: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
+    z2: "rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset",
+    z3: "rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset",
+    z4: "rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset"
+  },
+  "float": {
+    z1: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+    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",
+    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",
+    z4: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z5: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z6: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px",
+    z7: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z8: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px",
+    z9: "rgba(0, 0, 0, 0.1) 0px 10px 50px"
+  },
+  top: {
+    z1: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
+    z2: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
+    z3: "rgba(0, 0, 0, 0.1) -4px 9px 25px -6px",
+    z4: "rgba(0, 0, 0, 0.09) 0px 3px 12px"
+  }
+};
+
 var defaultFont = {
   sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
   mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
@@ -275,7 +360,8 @@ var themes$1 = {
   layout: layout$1,
   palette: palette$1,
   breakpoints: breakpoints$1,
-  expressiveness: expressiveness$1
+  expressiveness: expressiveness$1,
+  shadows: shadows
 };
 
 var palette = {
@@ -338,7 +424,8 @@ var themes = {
   layout: layout,
   palette: palette,
   breakpoints: breakpoints,
-  expressiveness: expressiveness
+  expressiveness: expressiveness,
+  shadows: shadows
 };
 
 var isObject = function isObject(target) {
@@ -414,11 +501,17 @@ var Themes = {
 };
 
 /* "use client" */
-
 var defaultTheme = Themes.getPresetStaticTheme();
 var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
+
+// export const useTheme = (): HUIThemes => React.useContext<HUIThemes>(ThemeContext)
+
 var useTheme = function useTheme() {
-  return React.useContext(ThemeContext);
+  var context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
 };
 
 /* "use client" */
@@ -1442,10 +1535,20 @@ var HuiProvider = function HuiProvider(_ref) {
   }, children, /*#__PURE__*/React.createElement(ToastContainer, null)));
 };
 
-// import flush from 'styled-jsx'
+var styledJsx;
+var hasRequiredStyledJsx;
 
-// export type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>
+function requireStyledJsx () {
+	if (hasRequiredStyledJsx) return styledJsx;
+	hasRequiredStyledJsx = 1;
+	styledJsx = requireIndex();
+	return styledJsx;
+}
+
+var styledJsxExports = requireStyledJsx();
+var flush = /*@__PURE__*/getDefaultExportFromCjs(styledJsxExports);
 
+// export type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>
 // export type FlushToHTML = (opts?: { nonce?: string }) => string
 
 var CssBaseline = function CssBaseline(_ref) {
@@ -1457,6 +1560,7 @@ var CssBaseline = function CssBaseline(_ref) {
   }, "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, ";}")));
 };
 var MemoCssBaseline = /*#__PURE__*/React.memo(CssBaseline);
+MemoCssBaseline.flush = flush.StyleRegistry;
 
 var getElementOffset = function getElementOffset(el) {
   if (!el) return {
@@ -2090,6 +2194,41 @@ var Backdrop = /*#__PURE__*/React.memo(function (_ref) {
 });
 Backdrop.displayName = 'Backdrop';
 
+var hexToRgb = function hexToRgb(color) {
+  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  var full = color.replace(fullReg, function (_, r, g, b) {
+    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+  });
+  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+  if (!values) {
+    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
+  }
+  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
+};
+var colorToRgbValues = function colorToRgbValues(color) {
+  if (color.charAt(0) === '#') return hexToRgb(color);
+  var safeColor = color.replace(/ /g, '');
+  var colorType = color.substr(0, 4);
+  var regArray = safeColor.match(/\((.+)\)/);
+  if (!colorType.startsWith('rgb') || !regArray) {
+    console.log(color);
+    throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
+  }
+  return regArray[1].split(',').map(function (str) {
+    return Number.parseFloat(str);
+  });
+};
+var addColorAlpha = function addColorAlpha(color, alpha) {
+  if (!/^#|rgb|RGB/.test(color)) return color;
+  var _colorToRgbValues = colorToRgbValues(color),
+    _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3),
+    r = _colorToRgbValues2[0],
+    g = _colorToRgbValues2[1],
+    b = _colorToRgbValues2[2];
+  var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
+};
+
 exports.Backdrop = Backdrop;
 exports.CssBaseline = MemoCssBaseline;
 exports.CssTransition = CssTransition;
@@ -2099,6 +2238,8 @@ exports.Expand = Expand;
 exports.Highlight = Highlight;
 exports.Themes = Themes;
 exports.UiProvider = HuiProvider;
+exports.addColorAlpha = addColorAlpha;
+exports.colorToRgbValues = colorToRgbValues;
 exports.useAllThemes = useAllThemes;
 exports.useClasses = useClasses;
 exports.useCurrentState = useCurrentState;

package/dist/themes/index.js

@@ -55,6 +55,91 @@ function _typeof(o) {
   }, _typeof(o);
 }
 
+var shadows = {
+  button: "0 2px #0000000b",
+  text: "0 -1px 0 rgb(0 0 0 / 12%)",
+  drop: {
+    z1: "0px 2px 8px rgba(0, 0, 0, 0.4)",
+    z2: "rgba(149, 157, 165, 0.2) 0px 8px 24px",
+    z3: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
+  },
+  level: {
+    z1: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
+    z2: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+    z3: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
+    z4: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+    z5: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
+    z6: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px",
+    z7: "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
+    z8: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
+    z9: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
+    z10: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
+    z11: "rgba(0, 0, 0, 0.1) 0px 4px 12px",
+    z12: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
+    z13: "rgb(38, 57, 77) 0px 20px 30px -10px",
+    z14: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
+    z15: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
+    z16: "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
+    z17: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
+    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",
+    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",
+    z20: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
+    z21: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+    z22: "rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px",
+    z23: "rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px",
+    z24: "rgba(17, 17, 26, 0.1) 0px 0px 16px",
+    z25: "rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
+    z26: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px",
+    z27: "rgba(0, 0, 0, 0.15) 0px 3px 3px 0px",
+    z28: "rgba(0, 0, 0, 0.08) 0px 4px 12px",
+    z29: "rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px",
+    z30: "rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px",
+    z31: "rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px"
+  },
+  border: {
+    z1: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px",
+    z2: "rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px",
+    z3: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px",
+    z4: "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
+    z5: "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
+    z6: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px",
+    z7: "rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px",
+    z8: "rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em",
+    z9: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
+    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",
+    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",
+    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",
+    z13: "rgba(0, 0, 0, 0.15) 0px 2px 8px",
+    z14: "rgba(0, 0, 0, 0.18) 0px 2px 4px",
+    z15: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px",
+    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",
+    z17: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
+  },
+  inner: {
+    z1: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
+    z2: "rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset",
+    z3: "rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset",
+    z4: "rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset"
+  },
+  "float": {
+    z1: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+    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",
+    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",
+    z4: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z5: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z6: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px",
+    z7: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px",
+    z8: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px",
+    z9: "rgba(0, 0, 0, 0.1) 0px 10px 50px"
+  },
+  top: {
+    z1: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
+    z2: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
+    z3: "rgba(0, 0, 0, 0.1) -4px 9px 25px -6px",
+    z4: "rgba(0, 0, 0, 0.09) 0px 3px 12px"
+  }
+};
+
 var defaultFont = {
   sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
   mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
@@ -158,7 +243,8 @@ var themes$1 = {
   layout: layout$1,
   palette: palette$1,
   breakpoints: breakpoints$1,
-  expressiveness: expressiveness$1
+  expressiveness: expressiveness$1,
+  shadows: shadows
 };
 
 var palette = {
@@ -221,7 +307,8 @@ var themes = {
   layout: layout,
   palette: palette,
   breakpoints: breakpoints,
-  expressiveness: expressiveness
+  expressiveness: expressiveness,
+  shadows: shadows
 };
 
 var isObject = function isObject(target) {

package/dist/themes/presets/index.d.ts

@@ -80,6 +80,16 @@ export interface HUIThemesBreakpoints {
     lg: BreakpointsItem;
     xl: BreakpointsItem;
 }
+export interface HUIThemesShadow {
+    button: string;
+    text: string;
+    drop: Record<string, string>;
+    level: Record<string, string>;
+    border: Record<string, string>;
+    inner: Record<string, string>;
+    float: Record<string, string>;
+    top: Record<string, string>;
+}
 export interface HUIThemes {
     type: string;
     font: HUIThemesFont;
@@ -87,4 +97,5 @@ export interface HUIThemes {
     palette: HUIThemesPalette;
     breakpoints: HUIThemesBreakpoints;
     expressiveness: HUIThemesExpressiveness;
+    shadows: HUIThemesShadow;
 }

package/dist/themes/shadows.d.ts

@@ -0,0 +1,84 @@
+export declare const shadows: {
+    button: string;
+    text: string;
+    drop: {
+        z1: string;
+        z2: string;
+        z3: string;
+    };
+    level: {
+        z1: string;
+        z2: string;
+        z3: string;
+        z4: string;
+        z5: string;
+        z6: string;
+        z7: string;
+        z8: string;
+        z9: string;
+        z10: string;
+        z11: string;
+        z12: string;
+        z13: string;
+        z14: string;
+        z15: string;
+        z16: string;
+        z17: string;
+        z18: string;
+        z19: string;
+        z20: string;
+        z21: string;
+        z22: string;
+        z23: string;
+        z24: string;
+        z25: string;
+        z26: string;
+        z27: string;
+        z28: string;
+        z29: string;
+        z30: string;
+        z31: string;
+    };
+    border: {
+        z1: string;
+        z2: string;
+        z3: string;
+        z4: string;
+        z5: string;
+        z6: string;
+        z7: string;
+        z8: string;
+        z9: string;
+        z10: string;
+        z11: string;
+        z12: string;
+        z13: string;
+        z14: string;
+        z15: string;
+        z16: string;
+        z17: string;
+    };
+    inner: {
+        z1: string;
+        z2: string;
+        z3: string;
+        z4: string;
+    };
+    float: {
+        z1: string;
+        z2: string;
+        z3: string;
+        z4: string;
+        z5: string;
+        z6: string;
+        z7: string;
+        z8: string;
+        z9: string;
+    };
+    top: {
+        z1: string;
+        z2: string;
+        z3: string;
+        z4: string;
+    };
+};