@zonos/amino 5.1.1 → 5.1.2

package/all.d.ts

@@ -71,8 +71,6 @@ import './components/split-panel/SplitPanel';
 import './components/stack/HStack';
 import './components/stack/Stack';
 import './components/stack/VStack';
-import './components/styles/ColorPalette';
-import './components/styles/Shadow';
 import './components/surface/Surface';
 import './components/switch/Switch';
 import './components/table/Table';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

package/theme.css

@@ -1,5 +1,6 @@
 :root,
 [data-theme='day'] {
+  color-scheme: light;
   --amino-transition: all 0.2s ease-in-out 0s;
   --amino-type-scale-base: 16px;
   --amino-glass-0: #10111600;
@@ -265,6 +266,7 @@
 
 /* Night theme */
 [data-theme='night'] {
+  color-scheme: dark;
   --amino-glass-0: #ffffff00;
   --amino-glass-50: #ffffff0a;
   --amino-glass-100: #ffffff21;

package/utils/hooks/useAminoTheme.d.ts

@@ -1,8 +1,11 @@
+import type { Theme } from "../../types";
 type Params = {
-    /** Whether to modify the HTML body */
-    root: boolean;
+    /** Use with root to override a theme in localStorage */
+    override?: Theme;
+    /** Whether to modify the root HTML element */
+    root?: boolean;
 };
-export declare const useAminoTheme: (props?: Params) => {
+export declare const useAminoTheme: (params?: Params) => {
     aminoTheme: "day" | "night" | "midnight";
     setAminoTheme: (value: "day" | "night" | "midnight") => Promise<void>;
 };

package/utils/hooks/useAminoTheme.js

@@ -1 +1 @@
-"use strict";var e=require("react"),r=require("../../Theme-61f4342c.js"),t=require("./useStorage.js"),u=require("../storage.js");require("zod"),require("../../_tslib-ccfac372.js"),require("./useSwr.js"),require("swr");exports.useAminoTheme=function(a){var o=!!(null==a?void 0:a.root),i=t.useStorage({defaultValue:function(){if("undefined"==typeof window)return"day";var e=u.getStorageItem({key:"amino:theme",schema:r.themeSchema,type:"local"});return null!=e?e:"day"}(),key:"amino:theme",type:"local"}),n=i.setValue,s=i.value;return e.useEffect((function(){o&&(document.documentElement.dataset.theme=s)}),[s,o]),{aminoTheme:s,setAminoTheme:n}};
+"use strict";var e=require("react"),r=require("../../Theme-61f4342c.js"),t=require("./useStorage.js"),u=require("../storage.js");require("zod"),require("../../_tslib-ccfac372.js"),require("./useSwr.js"),require("swr");exports.useAminoTheme=function(a){var o=null!=a?a:{},i=o.override,n=o.root,s=t.useStorage({defaultValue:function(){if("undefined"==typeof window)return"day";var e=u.getStorageItem({key:"amino:theme",schema:r.themeSchema,type:"local"});return null!=e?e:"day"}(),key:"amino:theme",type:"local"}),m=s.setValue,l=s.value;return e.useEffect((function(){n&&(document.documentElement.dataset.theme=i||l)}),[l,i,n]),{aminoTheme:i||l,setAminoTheme:m}};

package/components/styles/ColorPalette.d.ts

@@ -1 +0,0 @@
-export declare const ColorPalette: () => import("react/jsx-runtime").JSX.Element;

package/components/styles/ColorPalette.js

@@ -1 +0,0 @@
-"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),t=require("styled-components"),r=require("../stack/VStack.js"),a=require("../text/Text.js"),c=require("../../styles/constants/theme.js");function i(e){return e&&e.__esModule?e:{default:e}}require("../stack/Stack.js");var l,s,o,d=i(t),u=["blue","cyan","green","orange","purple","red","gray","glass"],p=["100","200","300","400","500","600","700","800","900","1000"],m=d.default.div(l||(l=e.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, calc(33% - ","));\n  gap: ",";\n  align-items: center;\n"],["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, calc(33% - ","));\n  gap: ",";\n  align-items: center;\n"])),c.theme.space24,c.theme.space24),g=d.default.div(s||(s=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ",";\n  text-align: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ",";\n  text-align: center;\n"])),c.theme.space24),f=d.default.div(o||(o=e.__makeTemplateObject(["\n  color: ",";\n  font-size: ",";\n  padding: ",";\n  background: ",";\n"],["\n  color: ",";\n  font-size: ",";\n  padding: ",";\n  background: ",";\n"])),(function(e){return e.color}),c.theme.fontSizeS,c.theme.space24,(function(e){return c.theme[e.background]}));exports.ColorPalette=function(){return n.jsx(m,{children:u.map((function(t){return n.jsxs(g,{children:[n.jsx(a.Text,{type:"title",children:t.toUpperCase()}),n.jsx(r.VStack,{spacing:0,children:("gray"!==t&&"glass"!==t?p:e.__spreadArray(e.__spreadArray(["0","50"],e.__read(p),!1),["1100","1200"],!1)).map((function(e){var r="".concat(t).concat(e);return n.jsx("div",{children:n.jsx(f,{background:r,color:Number(e)<500?"black":"white",children:n.jsx(a.Text,{children:e})})},r)}))})]},t)}))})};

package/components/styles/Shadow.d.ts

@@ -1 +0,0 @@
-export declare const Shadow: () => import("react/jsx-runtime").JSX.Element;

package/components/styles/Shadow.js

@@ -1 +0,0 @@
-"use strict";var e=require("../../_tslib-ccfac372.js"),a=require("react/jsx-runtime"),n=require("react"),r=require("styled-components"),t=require("../../styles/constants/theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var s,d,u=l(r),i=[{label:"Inset",value:"inset"},{label:"Base",value:"small"},{label:"Medium",value:"base"},{label:"Large",value:"medium"},{label:"XL",value:"large"},{label:"2XL",value:"larger"}],o=u.default.div(s||(s=e.__makeTemplateObject(["\n  margin-bottom: ",";\n  box-shadow: var(",");\n  background: ",";\n  padding: "," ",";\n"],["\n  margin-bottom: ",";\n  box-shadow: var(",");\n  background: ",";\n  padding: "," ",";\n"])),t.theme.space40,(function(e){return e.shadow}),t.theme.gray100,t.theme.space16,t.theme.space24),c=u.default.div(d||(d=e.__makeTemplateObject(["\n  background: ",";\n  padding: "," ",";\n"],["\n  background: ",";\n  padding: "," ",";\n"])),t.theme.gray0,t.theme.space8,t.theme.space24);exports.Shadow=function(){return a.jsx(c,{children:i.map((function(e){var r=e.label,t=e.value,l="--amino-shadow-".concat(t);return a.jsxs(n.Fragment,{children:[a.jsxs("p",{children:["Shadow intensity: ",r]}),a.jsx(o,{shadow:l,children:a.jsxs("p",{children:["var(",l,")"]})})]},l)}))})};