@blockle/blocks-theme-momotaro 4.0.0 → 6.0.0

package/dist/components/button.css.js

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, createVar } from "@vanilla-extract/css";
 import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { style, createVar } from "@vanilla-extract/css";
 import { focusRingColor, clickable } from "./helpers.css.js";
 setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
 const intentColor = createVar();
@@ -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: "small"
+        gap: 2,
+        paddingBlock: 1
       }),
       {
         selectors: {
@@ -36,7 +37,7 @@ const button = makeComponentTheme(
         }),
         outline: style([
           atoms({
-            borderWidth: "small"
+            borderWidth: "thin"
           }),
           {
             color: intentColor,
@@ -53,26 +54,26 @@ const button = makeComponentTheme(
       size: {
         small: style([
           atoms({
-            paddingInline: "large"
+            paddingInline: 3
           }),
           {
-            height: 40
+            minHeight: 40
           }
         ]),
         medium: style([
           atoms({
-            paddingInline: "xlarge"
+            paddingInline: 4
           }),
           {
-            height: 56
+            minHeight: 48
           }
         ]),
         large: style([
           atoms({
-            paddingInline: "xlarge"
+            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
     ]),
@@ -53,8 +53,8 @@ const checkbox = makeComponentTheme(
     label: atoms({
       display: "flex",
       flexDirection: "row",
-      padding: "xsmall",
-      gap: "medium",
+      padding: 1,
+      gap: 2,
       cursor: "pointer"
     })
   }

package/dist/components/dialog.css.js

@@ -9,10 +9,10 @@ const dialog = makeComponentTheme(
       atoms({
         display: "flex",
         flexDirection: "column",
-        padding: "gutter",
+        padding: 5,
         border: "none",
         overflow: "auto",
-        borderRadius: "medium",
+        borderRadius: 2,
         boxShadow: "large"
       }),
       {
@@ -25,9 +25,9 @@ const dialog = makeComponentTheme(
           "&[open]": {
             transform: "translate(0, 0)",
             opacity: 1,
-            // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+            // @ts-expect-error - typings does not support @starting-style (yet)
             "@starting-style": {
-              transform: "translate(0, -120px)",
+              transform: "translate(0, -120px) scale(0.95)",
               opacity: 0
             }
           },
@@ -42,7 +42,7 @@ const dialog = makeComponentTheme(
         "@media": {
           "(prefers-reduced-motion: no-preference)": {
             // Ending style
-            transform: "translate(0, -120px)",
+            transform: "translate(0, -120px) scale(0.95)",
             opacity: 0,
             transitionBehavior: "allow-discrete",
             transitionProperty: "opacity, transform, overlay, display",

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 "@blockle/blocks-core";
+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 #AF8EFF",
+    outlineOffset: "2px"
   },
   selectors: {
     "&:disabled, &[disabled]": {
@@ -21,9 +20,9 @@ const focusable = style({
       pointerEvents: "none"
     },
     "&:has(input:focus-visible)": {
-      outline: "2px solid transparent",
-      outlineOffset: "2px",
-      boxShadow: vars.focus.boxShadow
+      outline: "2px solid #AF8EFF",
+      outlineOffset: "2px"
+      // boxShadow: vars.focus.boxShadow,
     },
     "&: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: "large",
         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/label.css.js

@@ -21,7 +21,7 @@ const label = makeComponentTheme(
       required: style({
         ":after": {
           content: '"*"',
-          marginLeft: vars.space.xsmall
+          marginLeft: vars.space[1]
         }
       })
     },

package/dist/components/popover.css.js

@@ -8,10 +8,10 @@ const popover = makeComponentTheme(
     base: style([
       atoms({
         backgroundColor: "white",
-        borderRadius: "small",
+        borderRadius: 1,
         boxShadow: "medium",
-        padding: "medium",
-        margin: "small"
+        padding: 2,
+        margin: 1
         // Space between the popover and the anchor element
       }),
       {

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/radio.css.js

@@ -54,8 +54,8 @@ const radio = makeComponentTheme(
     label: atoms({
       display: "flex",
       flexDirection: "row",
-      padding: "xsmall",
-      gap: "medium",
+      padding: 1,
+      gap: 2,
       cursor: "pointer"
     })
   }

package/dist/components/select.css.js

@@ -9,22 +9,23 @@ const select = makeComponentTheme(
     select: style([
       atoms({
         color: "text-700",
-        padding: "large",
+        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
     ]),
@@ -32,7 +33,7 @@ const select = makeComponentTheme(
       variant: {
         outline: style([
           atoms({
-            borderWidth: "small",
+            borderWidth: "thin",
             borderColor: "primary-500"
           }),
           {
@@ -43,7 +44,7 @@ const select = makeComponentTheme(
       }
     },
     icon: atoms({
-      paddingInline: "large"
+      paddingInline: 3
     }),
     defaultVariants: {
       variant: "solid"

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/components/tooltip.css.js

@@ -6,7 +6,7 @@ const tooltip = makeComponentTheme(
   "tooltip",
   {
     base: atoms({
-      padding: "small"
+      padding: 1
     }),
     variants: {
       colorScheme: {

package/dist/tokens.css.js

@@ -4,15 +4,14 @@ 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: {
-      small: "1px",
-      medium: "2px",
-      large: "4px"
+      thin: "1px",
+      thick: "2px"
     }
   },
   color: {
@@ -113,16 +112,17 @@ const tokens = {
     large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
   },
   focus: {
-    boxShadow: "0 0 1px 2px #AF8EFF"
+    boxShadow: "0 0 1px 2px #7FE3F0"
   },
   spacing: {
-    none: "0px",
-    gutter: "28px",
-    xsmall: "4px",
-    small: "8px",
-    medium: "12px",
-    large: "16px",
-    xlarge: "24px"
+    1: "4px",
+    2: "8px",
+    3: "16px",
+    4: "24px",
+    5: "32px",
+    6: "40px",
+    7: "48px",
+    8: "64px"
   },
   transition: {
     slow: "240ms",
@@ -143,9 +143,11 @@ const tokens = {
       xlarge: rem(24)
     },
     fontWeight: {
-      regular: 400,
+      light: 300,
+      normal: 400,
       medium: 500,
-      strong: 700
+      strong: 700,
+      bold: 800
     },
     lineHeight: {
       xsmall: rem(16),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-theme-momotaro",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "description": "Momotaro theme for Blocks",
   "type": "module",
   "sideEffects": false,
@@ -34,7 +34,7 @@
     "@vanilla-extract/css": "^1.17.1"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": "^0.24.0",
+    "@blockle/blocks-core": "^1.0.0",
     "@vanilla-extract/css": ">=1.17.1"
   }
 }