@blockle/blocks-theme-momotaro 7.0.0 → 7.1.0

package/dist/components/alert.css.js

@@ -18,7 +18,7 @@ const alert = makeComponentTheme(
     }),
     variants: {
       intent: {
-        error: intentStyle(vars.colorRole.danger),
+        danger: intentStyle(vars.colorRole.danger),
         info: intentStyle(vars.colorRole.info),
         success: intentStyle(vars.colorRole.success),
         warning: intentStyle(vars.colorRole.warning)

package/dist/components/drawer.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.css.d.ts","sourceRoot":"","sources":["../../src/components/drawer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAsElD,CAAC"}
+{"version":3,"file":"drawer.css.d.ts","sourceRoot":"","sources":["../../src/components/drawer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAM9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CA8FlD,CAAC"}

package/dist/components/drawer.css.js

@@ -3,6 +3,7 @@ import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
 setFileScope("src/components/drawer.css.ts", "@blockle/blocks-theme-momotaro");
 const startingTransform = createVar();
+const drawerSize = createVar();
 const drawer = makeComponentTheme(
   "drawer",
   {
@@ -53,24 +54,48 @@ const drawer = makeComponentTheme(
         top: style({
           vars: {
             [startingTransform]: "translate(0, -100%)"
-          }
+          },
+          height: drawerSize
         }),
         right: style({
           vars: {
             [startingTransform]: "translate(100%, 0)"
-          }
+          },
+          width: drawerSize
         }),
         bottom: style({
           vars: {
             [startingTransform]: "translate(0, 100%)"
-          }
+          },
+          height: drawerSize
         }),
         left: style({
           vars: {
             [startingTransform]: "translate(-100%, 0)"
+          },
+          width: drawerSize
+        })
+      },
+      size: {
+        small: style({
+          vars: {
+            [drawerSize]: "min(300px, 100%)"
+          }
+        }),
+        medium: style({
+          vars: {
+            [drawerSize]: "min(480px, 100%)"
+          }
+        }),
+        large: style({
+          vars: {
+            [drawerSize]: "min(640px, 100%)"
           }
         })
       }
+    },
+    defaultVariants: {
+      size: "small"
     }
   }
 );

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAwBlE,eAAO,MAAM,UAAU,EAAE,qBAsBxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAyBlE,eAAO,MAAM,UAAU,EAAE,qBAuBxB,CAAC"}

package/dist/components/index.js

@@ -18,6 +18,7 @@ import { switchTheme } from "./switch.css.js";
 import { text } from "./text.css.js";
 import { textarea } from "./textarea.css.js";
 import { textInput } from "./textInput.css.js";
+import { toast } from "./toast.css.js";
 import { tooltip } from "./tooltip.css.js";
 const components = {
   alert,
@@ -40,6 +41,7 @@ const components = {
   text,
   textarea,
   textInput,
+  toast,
   tooltip
 };
 export {

package/dist/components/select.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../src/components/select.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CA0ClD,CAAC"}
+{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../src/components/select.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAmElD,CAAC"}

package/dist/components/select.css.js

@@ -8,7 +8,6 @@ const select = makeComponentTheme(
   {
     select: style([
       atoms({
-        paddingInline: 3,
         paddingBlock: 1,
         borderRadius: 2,
         boxShadow: 2
@@ -18,7 +17,6 @@ const select = makeComponentTheme(
         outline: "none",
         color: vars.colorRole.text.default,
         backgroundColor: vars.colorRole.surface.raised,
-        minHeight: 40,
         transitionDuration: vars.transition.fast,
         transitionProperty: "outline-color, outline-offset"
       },
@@ -36,12 +34,39 @@ const select = makeComponentTheme(
           }
         ]),
         solid: style({})
+      },
+      size: {
+        small: style([
+          atoms({
+            paddingInline: 3
+          }),
+          {
+            minHeight: 40
+          }
+        ]),
+        medium: style([
+          atoms({
+            paddingInline: 4
+          }),
+          {
+            minHeight: 48
+          }
+        ]),
+        large: style([
+          atoms({
+            paddingInline: 5
+          }),
+          {
+            minHeight: 56
+          }
+        ])
       }
     },
     icon: atoms({
       paddingInline: 3
     }),
     defaultVariants: {
+      size: "medium",
       variant: "solid"
     }
   }

package/dist/components/toast.css.d.ts

@@ -0,0 +1,3 @@
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const toast: ThemeComponentsStyles['toast'];
+//# sourceMappingURL=toast.css.d.ts.map

package/dist/components/toast.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.css.d.ts","sourceRoot":"","sources":["../../src/components/toast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAuB9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAqChD,CAAC"}

package/dist/components/toast.css.js

@@ -0,0 +1,61 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { style, keyframes, createVar } from "@vanilla-extract/css";
+setFileScope("src/components/toast.css.ts", "@blockle/blocks-theme-momotaro");
+const enterTranslate = createVar();
+const toastEnter = keyframes({
+  from: { opacity: 0, scale: 0.9, translate: enterTranslate },
+  to: { opacity: 1, scale: 1, translate: "0 0" }
+});
+const top = style({
+  vars: {
+    [enterTranslate]: "0 -20%"
+  }
+});
+const bottom = style({
+  vars: {
+    [enterTranslate]: "0 20%"
+  }
+});
+const toast = makeComponentTheme(
+  "toast",
+  {
+    root: style([
+      atoms({
+        gap: 2,
+        padding: 2
+      }),
+      {
+        maxWidth: "min(100%, 400px)"
+      }
+    ]),
+    toast: style([
+      atoms({
+        boxShadow: 3
+      }),
+      {
+        "@media": {
+          "(prefers-reduced-motion: no-preference)": {
+            animationName: toastEnter,
+            animationDuration: "240ms",
+            animationTimingFunction: "ease-out"
+          }
+        }
+      }
+    ]),
+    variants: {
+      placement: {
+        top,
+        "top-start": top,
+        "top-end": top,
+        bottom,
+        "bottom-start": bottom,
+        "bottom-end": bottom
+      }
+    }
+  }
+);
+endFileScope();
+export {
+  toast
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-theme-momotaro",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "Momotaro theme for Blocks",
   "type": "module",
   "sideEffects": false,
@@ -34,7 +34,7 @@
     "@vanilla-extract/css": "^1.18.0"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": ">=3.0.x",
+    "@blockle/blocks-core": ">=3.1.x",
     "@vanilla-extract/css": "^1.18.0"
   },
   "publishConfig": {