@blockle/blocks-theme-momotaro 5.0.0 → 6.0.1

package/dist/components/button.css.js

@@ -13,10 +13,11 @@ const button = makeComponentTheme(
         display: "inline-flex",
         placeItems: "center",
         fontSize: "medium",
-        borderRadius: "medium",
+        borderRadius: 2,
         fontWeight: "medium",
         // Space between `startSlot | children | endSlot`
-        gap: 2
+        gap: 2,
+        paddingBlock: 1
       }),
       {
         selectors: {
@@ -56,7 +57,7 @@ const button = makeComponentTheme(
             paddingInline: 3
           }),
           {
-            height: 40
+            minHeight: 40
           }
         ]),
         medium: style([
@@ -64,7 +65,7 @@ const button = makeComponentTheme(
             paddingInline: 4
           }),
           {
-            height: 56
+            minHeight: 48
           }
         ]),
         large: style([
@@ -72,7 +73,7 @@ const button = makeComponentTheme(
             paddingInline: 4
           }),
           {
-            height: 72
+            minHeight: 56
           }
         ])
       },

package/dist/components/checkbox.css.js

@@ -30,7 +30,7 @@ const checkbox = makeComponentTheme(
       },
       atoms({
         backgroundColor: "primary-100",
-        borderRadius: "small"
+        borderRadius: 1
       }),
       focusable
     ]),

package/dist/components/dialog.css.js

@@ -12,7 +12,7 @@ const dialog = makeComponentTheme(
         padding: 5,
         border: "none",
         overflow: "auto",
-        borderRadius: "medium",
+        borderRadius: 2,
         boxShadow: "large"
       }),
       {

package/dist/components/helpers.css.js

@@ -1,18 +1,17 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { vars } from "@blockle/blocks-core";
-import { style, fallbackVar, createVar } from "@vanilla-extract/css";
+import { style, createVar } from "@vanilla-extract/css";
 setFileScope("src/components/helpers.css.ts", "@blockle/blocks-theme-momotaro");
 const focusRingColor = createVar();
 const focusable = style({
-  "@media": {
-    "(prefers-reduced-motion: no-preference)": {
-      transition: `box-shadow ${vars.transition.fast}`
-    }
-  },
+  // '@media': {
+  //   '(prefers-reduced-motion: no-preference)': {
+  //     transition: `outline ${vars.transition.fast}`,
+  //   },
+  // },
   ":focus-visible": {
-    outline: "2px solid transparent",
-    outlineOffset: "2px",
-    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`
+    outline: `2px solid ${vars.color["primary-300"]}`,
+    outlineOffset: "2px"
   },
   selectors: {
     "&:disabled, &[disabled]": {
@@ -21,9 +20,8 @@ const focusable = style({
       pointerEvents: "none"
     },
     "&:has(input:focus-visible)": {
-      outline: "2px solid transparent",
-      outlineOffset: "2px",
-      boxShadow: vars.focus.boxShadow
+      outline: `2px solid ${vars.color["primary-300"]}`,
+      outlineOffset: "2px"
     },
     "&:has(input:disabled)": {
       opacity: 0.5,

package/dist/components/input.css.js

@@ -1,6 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
+import { focusable } from "./helpers.css.js";
 setFileScope("src/components/input.css.ts", "@blockle/blocks-theme-momotaro");
 const input = makeComponentTheme(
   "input",
@@ -8,38 +9,36 @@ const input = makeComponentTheme(
     input: style([
       atoms({
         color: "text-900",
-        padding: 3,
         border: "none",
-        borderRadius: "small"
+        backgroundColor: "transparent"
       }),
       {
+        borderRadius: "inherit",
         outline: "none",
-        background: "transparent",
         "::placeholder": {
-          color: vars.color["text-300"]
+          color: vars.color["text-600"]
         },
         ":disabled": {}
       }
     ]),
     container: style([
       {
-        minHeight: 56,
+        minHeight: 40,
+        backgroundColor: "white",
         "@media": {
           "(prefers-reduced-motion: no-preference)": {
             transition: `box-shadow ${vars.transition.fast}`
           }
-        },
-        ":focus-within": {
-          outline: "2px solid transparent",
-          outlineOffset: "2px",
-          boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
         }
       },
       atoms({
+        paddingInline: 3,
+        paddingBlock: 2,
         backgroundColor: "white",
-        borderRadius: "medium",
+        borderRadius: 2,
         boxShadow: "medium"
-      })
+      }),
+      focusable
     ])
   }
 );

package/dist/components/popover.css.js

@@ -8,7 +8,7 @@ const popover = makeComponentTheme(
     base: style([
       atoms({
         backgroundColor: "white",
-        borderRadius: "small",
+        borderRadius: 1,
         boxShadow: "medium",
         padding: 2,
         margin: 1

package/dist/components/progress.css.js

@@ -19,7 +19,7 @@ const progress = makeComponentTheme(
       },
       atoms({
         inlineSize: "full",
-        borderRadius: "small",
+        borderRadius: 1,
         backgroundColor: "text-200",
         color: "primary-500",
         overflow: "hidden"

package/dist/components/select.css.js

@@ -9,22 +9,23 @@ const select = makeComponentTheme(
     select: style([
       atoms({
         color: "text-700",
-        padding: 3,
+        paddingInline: 3,
+        paddingBlock: 1,
         backgroundColor: "white",
-        borderRadius: "medium",
+        borderRadius: 2,
         boxShadow: "medium"
       }),
       {
         border: "none",
         outline: "none",
-        minHeight: 56,
+        minHeight: 40,
         transitionDuration: vars.transition.fast,
-        transitionProperty: "box-shadow",
-        ":focus-within": {
-          outline: "2px solid transparent",
-          outlineOffset: "2px",
-          boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
-        }
+        transitionProperty: "outline-color, outline-offset"
+        // ':focus-within': {
+        //   outline: '2px solid transparent',
+        //   outlineOffset: '2px',
+        //   boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`,
+        // },
       },
       focusable
     ]),

package/dist/components/slider.css.js

@@ -15,7 +15,7 @@ const slider = makeComponentTheme(
     }),
     track: style([
       atoms({
-        borderRadius: "small"
+        borderRadius: 1
       }),
       {
         blockSize: "4px",

package/dist/components/switch.css.js

@@ -9,7 +9,7 @@ const switchTheme = makeComponentTheme(
   {
     base: style([
       atoms({
-        borderRadius: "xlarge",
+        borderRadius: 4,
         backgroundColor: "text-200"
       }),
       {
@@ -39,7 +39,7 @@ const switchTheme = makeComponentTheme(
     ]),
     slider: style([
       atoms({
-        borderRadius: "xlarge"
+        borderRadius: "full"
       }),
       {
         width: 24,

package/dist/tokens.css.js

@@ -4,10 +4,10 @@ setFileScope("src/tokens.css.ts", "@blockle/blocks-theme-momotaro");
 const tokens = {
   border: {
     radius: {
-      small: "4px",
-      medium: "8px",
-      large: "16px",
-      xlarge: "32px"
+      1: "4px",
+      2: "8px",
+      3: "16px",
+      4: "32px"
     },
     width: {
       thin: "1px",
@@ -115,7 +115,6 @@ const tokens = {
     boxShadow: "0 0 1px 2px #7FE3F0"
   },
   spacing: {
-    0: "0px",
     1: "4px",
     2: "8px",
     3: "16px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-theme-momotaro",
-  "version": "5.0.0",
+  "version": "6.0.1",
   "description": "Momotaro theme for Blocks",
   "type": "module",
   "sideEffects": false,
@@ -34,7 +34,7 @@
     "@vanilla-extract/css": "^1.17.1"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": "^0.25.0",
+    "@blockle/blocks-core": ">=1.0.x",
     "@vanilla-extract/css": ">=1.17.1"
   }
 }