@yakad/ui 1.2.63-beta → 1.2.66-beta

package/container/container.module.css

@@ -9,34 +9,16 @@ div.container {
 
 div.container.xs {
     max-width: 44.4rem;
-    padding-left: calc((100% - 44.4rem) / 2);
-    padding-right: calc((100% - 44.4rem) / 2);
 }
 div.container.sm {
     max-width: 60rem;
-    padding-left: calc((100% - 60rem) / 2);
-    padding-right: calc((100% - 60rem) / 2);
 }
 div.container.md {
     max-width: 90rem;
-    padding-left: calc((100% - 90rem) / 2);
-    padding-right: calc((100% - 90rem) / 2);
 }
 div.container.lg {
     max-width: 120rem;
-    padding-left: calc((100% - 120rem) / 2);
-    padding-right: calc((100% - 120rem) / 2);
 }
 div.container.xl {
     max-width: 150rem;
-    padding-left: calc((100% - 150rem) / 2);
-    padding-right: calc((100% - 150rem) / 2);
-}
-
-div.container.dotted {
-    background-image: radial-gradient(
-        rgb(var(--surfaceContainerLowestColor)) 0.8px,
-        rgb(var(--surfaceContainerHighestColor)) 0.5px
-    );
-    background-size: 10px 10px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.63-beta",
+    "version": "1.2.66-beta",
     "description": "",
     "main": "./src/index.js",
     "scripts": {

package/theme/theme.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 interface ThemeProps extends React.HTMLAttributes<HTMLElement> {
     mode?: "light" | "dark" | "system";
-    color?: "green" | "pink" | "grow" | "blue" | "purple";
+    color?: "green" | "pink" | "yellow" | "blue" | "purple";
+    zoom?: number;
 }
 declare function Theme(props: ThemeProps): JSX.Element;
 export default Theme;

package/theme/theme.js

@@ -2,6 +2,8 @@ import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./theme.module.css";
 function Theme(props) {
+    const zoomPercentage = props.zoom ? (props.zoom / 100) * 62.5 : 62.5;
+    document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
     const joinedClassNames = joinClassNames(props.mode ? styles[props.mode] : styles.system, props.color ? styles[props.color] : styles.blue, props.className);
     return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
 }

package/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAOxC,SAAS,KAAK,CAAC,KAAiB;IAC5B,MAAM,gBAAgB,GAAG,cAAc,CACnC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAC/C,KAAK,CAAC,SAAU,CACnB,CAAC;IACF,OAAO,CACH,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACtC,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAQxC,SAAS,KAAK,CAAC,KAAiB;IAC5B,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACrE,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACtC,WAAW,EACX,cAAc,GAAG,GAAG,CACvB,CAAC;IAEF,MAAM,gBAAgB,GAAG,cAAc,CACnC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAC/C,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACtC,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAED,eAAe,KAAK,CAAC"}

package/theme/theme.module.css

@@ -178,7 +178,7 @@
     --DarkOutlineVariantColor: 68 71 70;
 }
 
-.grow {
+.growth {
     --LightPrimaryColor: 97 98 0;
     --LightPrimaryContainerColor: 232 233 113;
     --LightSecondaryColor: 98 91 113;
@@ -394,4 +394,4 @@
         --outlineColor: var(--DarkOutlineColor);
         --outlineVariantColor: var(--DarkOutlineVariantColor);
     }
-}
+}

package/theme/theme.tsx

@@ -4,15 +4,23 @@ import styles from "./theme.module.css";
 
 interface ThemeProps extends React.HTMLAttributes<HTMLElement> {
     mode?: "light" | "dark" | "system";
-    color?: "green" | "pink" | "grow" | "blue" | "purple";
+    color?: "green" | "pink" | "yellow" | "blue" | "purple";
+    zoom?: number;
 }
 
 function Theme(props: ThemeProps) {
+    const zoomPercentage = props.zoom ? (props.zoom / 100) * 62.5 : 62.5;
+    document.documentElement.style.setProperty(
+        "font-size",
+        zoomPercentage + "%"
+    );
+
     const joinedClassNames = joinClassNames(
         props.mode ? styles[props.mode] : styles.system,
         props.color ? styles[props.color] : styles.blue,
         props.className!
     );
+
     return (
         <div {...props} className={joinedClassNames}>
             {props.children}