@blockle/blocks-theme-momotaro 1.0.5 → 2.0.0

package/dist/components/label.css.js

@@ -2,31 +2,34 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme, vars } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/label.css.ts", "@blockle/blocks-theme-momotaro");
-const label = makeComponentTheme("label", {
-  base: style({}),
-  variants: {
-    size: {
-      small: style({
-        fontSize: vars.fontSize.xsmall
-      }),
-      medium: style({
-        fontSize: vars.fontSize.small
-      }),
-      large: style({
-        fontSize: vars.fontSize.medium
+const label = makeComponentTheme(
+  "label",
+  {
+    base: style({}),
+    variants: {
+      size: {
+        small: style({
+          fontSize: vars.fontSize.xsmall
+        }),
+        medium: style({
+          fontSize: vars.fontSize.small
+        }),
+        large: style({
+          fontSize: vars.fontSize.medium
+        })
+      },
+      required: style({
+        ":after": {
+          content: '"*"',
+          marginLeft: vars.space.xsmall
+        }
       })
     },
-    required: style({
-      ":after": {
-        content: '"*"',
-        marginLeft: vars.space.xsmall
-      }
-    })
-  },
-  defaultVariants: {
-    size: "large"
+    defaultVariants: {
+      size: "large"
+    }
   }
-});
+);
 endFileScope();
 export {
   label

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

@@ -1 +1,2 @@
-export declare const link: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const link: ThemeComponentsStyles['link'];

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

@@ -1 +1,2 @@
-export declare const popover: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const popover: ThemeComponentsStyles['popover'];

package/dist/components/popover.css.js

@@ -2,43 +2,46 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme, atoms } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/popover.css.ts", "@blockle/blocks-theme-momotaro");
-const popover = makeComponentTheme("popover", {
-  base: style([
-    atoms({
-      backgroundColor: "white",
-      borderRadius: "small",
-      boxShadow: "medium",
-      padding: "medium",
-      margin: "small"
-      // Space between the popover and the anchor element
-    }),
-    {
-      width: "max-content",
-      selectors: {
-        "&:popover-open": {
-          transform: "translateY(0) scale(1)",
-          opacity: 1,
-          // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
-          "@starting-style": {
+const popover = makeComponentTheme(
+  "popover",
+  {
+    base: style([
+      atoms({
+        backgroundColor: "white",
+        borderRadius: "small",
+        boxShadow: "medium",
+        padding: "medium",
+        margin: "small"
+        // Space between the popover and the anchor element
+      }),
+      {
+        width: "max-content",
+        selectors: {
+          "&:popover-open": {
+            transform: "translateY(0) scale(1)",
+            opacity: 1,
+            // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+            "@starting-style": {
+              transform: "translateY(12px) scale(0.8)",
+              opacity: 0
+            }
+          }
+        },
+        // Apply the animation only if the user has not requested reduced motion
+        "@media": {
+          "(prefers-reduced-motion: no-preference)": {
+            // Ending style
             transform: "translateY(12px) scale(0.8)",
-            opacity: 0
+            opacity: 0,
+            transitionBehavior: "allow-discrete",
+            transitionProperty: "opacity, transform, overlay, display",
+            transitionDuration: "100ms"
           }
         }
-      },
-      // Apply the animation only if the user has not requested reduced motion
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          // Ending style
-          transform: "translateY(12px) scale(0.8)",
-          opacity: 0,
-          transitionBehavior: "allow-discrete",
-          transitionProperty: "opacity, transform, overlay, display",
-          transitionDuration: "100ms"
-        }
       }
-    }
-  ])
-});
+    ])
+  }
+);
 endFileScope();
 export {
   popover

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

@@ -1 +1,2 @@
-export declare const progress: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const progress: ThemeComponentsStyles['progress'];

package/dist/components/progress.css.js

@@ -10,47 +10,50 @@ const indeterminateAnimation = keyframes({
     transform: "translateX(100%)"
   }
 });
-const progress = makeComponentTheme("progress", {
-  base: style([
-    {
-      height: 8
-    },
-    atoms({
-      inlineSize: "full",
-      borderRadius: "small",
-      backgroundColor: "textLight",
-      color: "primary",
-      overflow: "hidden"
-    })
-  ]),
-  bar: style({
-    borderRadius: "inherit",
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "transform 180ms ease-out"
-      }
-    }
-  }),
-  variants: {
-    indeterminate: style({
+const progress = makeComponentTheme(
+  "progress",
+  {
+    base: style([
+      {
+        height: 8
+      },
+      atoms({
+        inlineSize: "full",
+        borderRadius: "small",
+        backgroundColor: "textLight",
+        color: "primary",
+        overflow: "hidden"
+      })
+    ]),
+    bar: style({
+      borderRadius: "inherit",
       "@media": {
-        // For reduce motion we show a striped pattern instead of animating
-        "(prefers-reduced-motion: reduce)": {
-          backgroundImage: `repeating-linear-gradient(
+        "(prefers-reduced-motion: no-preference)": {
+          transition: "transform 180ms ease-out"
+        }
+      }
+    }),
+    variants: {
+      indeterminate: style({
+        "@media": {
+          // For reduce motion we show a striped pattern instead of animating
+          "(prefers-reduced-motion: reduce)": {
+            backgroundImage: `repeating-linear-gradient(
           45deg,
           transparent,
           transparent 20px,
           ${vars.color.primaryDark} 20px,
           ${vars.color.primaryDark} 40px
         )`
-        },
-        "(prefers-reduced-motion: no-preference)": {
-          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
+          },
+          "(prefers-reduced-motion: no-preference)": {
+            animation: `${indeterminateAnimation} 3s ease-in-out infinite`
+          }
         }
-      }
-    })
+      })
+    }
   }
-});
+);
 endFileScope();
 export {
   progress

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

@@ -1 +1,2 @@
-export declare const radio: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const radio: ThemeComponentsStyles['radio'];

package/dist/components/radio.css.js

@@ -4,59 +4,62 @@ import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 import { bounceOut } from "./transitions.js";
 setFileScope("src/components/radio.css.ts", "@blockle/blocks-theme-momotaro");
-const radio = makeComponentTheme("radio", {
-  base: style([
-    {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      inlineSize: 24,
-      blockSize: 24,
-      borderRadius: 12,
+const radio = makeComponentTheme(
+  "radio",
+  {
+    base: style([
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        inlineSize: 24,
+        blockSize: 24,
+        borderRadius: 12,
+        "@media": {
+          "(prefers-reduced-motion: no-preference)": {
+            transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
+          }
+        },
+        ":hover": {
+          backgroundColor: vars.color.primaryDark
+        },
+        selectors: {
+          "&:has(input:checked):not(:hover)": {
+            backgroundColor: vars.color.primary
+          }
+        }
+      },
+      atoms({
+        backgroundColor: "primaryLight"
+      }),
+      focusable
+    ]),
+    icon: style({
+      height: 12,
+      width: 12,
+      backgroundColor: "white",
+      borderRadius: "8px",
+      transform: "scale(0)",
       "@media": {
         "(prefers-reduced-motion: no-preference)": {
-          transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
+          transition: `transform ${vars.transition.normal} ${bounceOut}`
         }
       },
-      ":hover": {
-        backgroundColor: vars.color.primaryDark
-      },
       selectors: {
-        "&:has(input:checked):not(:hover)": {
-          backgroundColor: vars.color.primary
+        "input:checked ~ &": {
+          transform: "scale(1)"
         }
       }
-    },
-    atoms({
-      backgroundColor: "primaryLight"
     }),
-    focusable
-  ]),
-  icon: style({
-    height: 12,
-    width: 12,
-    backgroundColor: "white",
-    borderRadius: "8px",
-    transform: "scale(0)",
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `transform ${vars.transition.normal} ${bounceOut}`
-      }
-    },
-    selectors: {
-      "input:checked ~ &": {
-        transform: "scale(1)"
-      }
-    }
-  }),
-  label: atoms({
-    display: "flex",
-    flexDirection: "row",
-    padding: "xsmall",
-    gap: "medium",
-    cursor: "pointer"
-  })
-});
+    label: atoms({
+      display: "flex",
+      flexDirection: "row",
+      padding: "xsmall",
+      gap: "medium",
+      cursor: "pointer"
+    })
+  }
+);
 endFileScope();
 export {
   radio

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

@@ -1 +1,2 @@
-export declare const select: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const select: ThemeComponentsStyles['select'];

package/dist/components/select.css.js

@@ -3,50 +3,53 @@ import { makeComponentTheme, atoms, vars } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/select.css.ts", "@blockle/blocks-theme-momotaro");
-const select = makeComponentTheme("select", {
-  select: style([
-    atoms({
-      color: "text",
-      padding: "large",
-      backgroundColor: "white",
-      borderRadius: "medium",
-      boxShadow: "medium"
-    }),
-    {
-      border: "none",
-      outline: "none",
-      minHeight: 56,
-      transitionDuration: vars.transition.fast,
-      transitionProperty: "box-shadow",
-      ":focus-within": {
-        outline: "2px solid transparent",
-        outlineOffset: "2px",
-        boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
+const select = makeComponentTheme(
+  "select",
+  {
+    select: style([
+      atoms({
+        color: "text",
+        padding: "large",
+        backgroundColor: "white",
+        borderRadius: "medium",
+        boxShadow: "medium"
+      }),
+      {
+        border: "none",
+        outline: "none",
+        minHeight: 56,
+        transitionDuration: vars.transition.fast,
+        transitionProperty: "box-shadow",
+        ":focus-within": {
+          outline: "2px solid transparent",
+          outlineOffset: "2px",
+          boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
+        }
+      },
+      focusable
+    ]),
+    variants: {
+      variant: {
+        outline: style([
+          atoms({
+            borderWidth: "small",
+            borderColor: "primary"
+          }),
+          {
+            borderStyle: "solid"
+          }
+        ]),
+        solid: style({})
       }
     },
-    focusable
-  ]),
-  variants: {
-    variant: {
-      outline: style([
-        atoms({
-          borderWidth: "small",
-          borderColor: "primary"
-        }),
-        {
-          borderStyle: "solid"
-        }
-      ]),
-      solid: style({})
+    icon: atoms({
+      paddingInline: "large"
+    }),
+    defaultVariants: {
+      variant: "solid"
     }
-  },
-  icon: style({
-    paddingInline: "large"
-  }),
-  defaultVariants: {
-    variant: "solid"
   }
-});
+);
 endFileScope();
 export {
   select

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

@@ -1 +1,2 @@
-export declare const slider: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const slider: ThemeComponentsStyles['slider'];

package/dist/components/slider.css.js

@@ -7,88 +7,91 @@ const trackBackground = createVar();
 const filledTrackBackground = createVar();
 const thumbBackground = createVar();
 const thumbActive = createVar();
-const slider = makeComponentTheme("slider", {
-  base: style({
-    blockSize: "20px"
-  }),
-  track: style([
-    atoms({
-      borderRadius: "small"
+const slider = makeComponentTheme(
+  "slider",
+  {
+    base: style({
+      blockSize: "20px"
     }),
-    {
-      blockSize: "4px",
-      backgroundColor: trackBackground
-    }
-  ]),
-  filledTrack: style({
-    backgroundColor: filledTrackBackground
-  }),
-  thumb: style([
-    {
-      backgroundColor: thumbBackground,
-      borderRadius: "50%",
-      height: "16px",
-      width: "16px",
-      boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 0%)`,
-      vars: {
-        [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 20%)`
-      },
-      ":hover": {
-        boxShadow: thumbActive
-      },
-      ":focus-visible": {
-        boxShadow: thumbActive
-      },
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: "box-shadow 0.2s"
-        }
-      }
-    },
-    focusable
-  ]),
-  variants: {
-    size: {
-      small: style({
-        inlineSize: "100px"
+    track: style([
+      atoms({
+        borderRadius: "small"
       }),
-      medium: style({
-        inlineSize: "200px"
-      }),
-      large: style({
-        inlineSize: "300px"
-      })
-    },
-    colorScheme: {
-      primary: style({
+      {
+        blockSize: "4px",
+        backgroundColor: trackBackground
+      }
+    ]),
+    filledTrack: style({
+      backgroundColor: filledTrackBackground
+    }),
+    thumb: style([
+      {
+        backgroundColor: thumbBackground,
+        borderRadius: "50%",
+        height: "16px",
+        width: "16px",
+        boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 0%)`,
         vars: {
-          [trackBackground]: vars.color.primaryLight,
-          [filledTrackBackground]: vars.color.primary,
-          [thumbBackground]: vars.color.primary
+          [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 20%)`
+        },
+        ":hover": {
+          boxShadow: thumbActive
+        },
+        ":focus-visible": {
+          boxShadow: thumbActive
+        },
+        "@media": {
+          "(prefers-reduced-motion: no-preference)": {
+            transition: "box-shadow 0.2s"
+          }
         }
-      }),
-      secondary: style({
+      },
+      focusable
+    ]),
+    variants: {
+      size: {
+        small: style({
+          inlineSize: "100px"
+        }),
+        medium: style({
+          inlineSize: "200px"
+        }),
+        large: style({
+          inlineSize: "300px"
+        })
+      },
+      colorScheme: {
+        primary: style({
+          vars: {
+            [trackBackground]: vars.color.primaryLight,
+            [filledTrackBackground]: vars.color.primary,
+            [thumbBackground]: vars.color.primary
+          }
+        }),
+        secondary: style({
+          vars: {
+            [trackBackground]: vars.color.primaryLight,
+            [filledTrackBackground]: vars.color.secondary,
+            [thumbBackground]: vars.color.secondary
+          }
+        })
+      },
+      disabled: style({
+        pointerEvents: "none",
         vars: {
-          [trackBackground]: vars.color.primaryLight,
-          [filledTrackBackground]: vars.color.secondary,
-          [thumbBackground]: vars.color.secondary
+          [trackBackground]: "#c0c0c0",
+          [filledTrackBackground]: "#ccc",
+          [thumbBackground]: "#c0c0c0"
         }
       })
     },
-    disabled: style({
-      pointerEvents: "none",
-      vars: {
-        [trackBackground]: "#c0c0c0",
-        [filledTrackBackground]: "#ccc",
-        [thumbBackground]: "#c0c0c0"
-      }
-    })
-  },
-  defaultVariants: {
-    size: "medium",
-    colorScheme: "primary"
+    defaultVariants: {
+      size: "medium",
+      colorScheme: "primary"
+    }
   }
-});
+);
 endFileScope();
 export {
   slider

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

@@ -1 +1,2 @@
-export declare const spinner: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const spinner: ThemeComponentsStyles['spinner'];