@blockle/blocks-theme-momotaro 7.1.0 → 7.2.0

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

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

package/dist/components/button.css.js

@@ -1,75 +1,30 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
-import { style, createVar } from "@vanilla-extract/css";
-import { clickable } from "./helpers.css.js";
+import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+import { buttonIntent, buttonVariant, buttonHeight, buttonBase, buttonRadius } from "./buttonBase.css.js";
 setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
-const solidColor = createVar();
-const solidHoverColor = createVar();
-const subtleColor = createVar();
-const contrastColor = createVar();
 const button = makeComponentTheme(
   "button",
   {
     root: style([
       atoms({
-        display: "inline-flex",
-        placeItems: "center",
         fontSize: "medium",
-        borderRadius: 2,
         fontWeight: "medium",
         gap: 2,
         paddingBlock: 1
       }),
-      {
-        selectors: {}
-      },
-      clickable
+      buttonBase,
+      buttonRadius
     ]),
     variants: {
-      variant: {
-        solid: style({
-          color: contrastColor,
-          backgroundColor: solidColor,
-          border: "none",
-          selectors: {
-            "&:hover:not(:disabled)": {
-              backgroundColor: solidHoverColor
-            }
-          }
-        }),
-        outline: style([
-          atoms({
-            borderWidth: "thin"
-          }),
-          {
-            color: solidColor,
-            borderStyle: "solid",
-            borderColor: solidColor,
-            background: "transparent",
-            selectors: {
-              "&:hover:not(:disabled)": {
-                backgroundColor: subtleColor
-              }
-            }
-          }
-        ]),
-        ghost: style({
-          color: solidColor,
-          background: "transparent",
-          selectors: {
-            "&:hover:not(:disabled)": {
-              backgroundColor: subtleColor
-            }
-          }
-        })
-      },
+      variant: buttonVariant,
       size: {
         small: style([
           atoms({
             paddingInline: 3
           }),
           {
-            minHeight: 40
+            minHeight: buttonHeight.small
           }
         ]),
         medium: style([
@@ -77,7 +32,7 @@ const button = makeComponentTheme(
             paddingInline: 4
           }),
           {
-            minHeight: 48
+            minHeight: buttonHeight.medium
           }
         ]),
         large: style([
@@ -85,52 +40,11 @@ const button = makeComponentTheme(
             paddingInline: 5
           }),
           {
-            minHeight: 56
+            minHeight: buttonHeight.large
           }
         ])
       },
-      intent: {
-        neutral: style({
-          vars: {
-            [solidColor]: vars.colorRole.neutral.solid,
-            [solidHoverColor]: vars.colorRole.neutral.solidHover,
-            [subtleColor]: vars.colorRole.neutral.subtle,
-            [contrastColor]: vars.colorRole.neutral.contrast
-          }
-        }),
-        primary: style({
-          vars: {
-            [solidColor]: vars.colorRole.primary.solid,
-            [solidHoverColor]: vars.colorRole.primary.solidHover,
-            [subtleColor]: vars.colorRole.primary.subtle,
-            [contrastColor]: vars.colorRole.primary.contrast
-          }
-        }),
-        secondary: style({
-          vars: {
-            [solidColor]: vars.colorRole.secondary.solid,
-            [solidHoverColor]: vars.colorRole.secondary.solidHover,
-            [subtleColor]: vars.colorRole.secondary.subtle,
-            [contrastColor]: vars.colorRole.secondary.contrast
-          }
-        }),
-        success: style({
-          vars: {
-            [solidColor]: vars.colorRole.success.solid,
-            [solidHoverColor]: vars.colorRole.success.solidHover,
-            [subtleColor]: vars.colorRole.success.subtle,
-            [contrastColor]: vars.colorRole.success.contrast
-          }
-        }),
-        danger: style({
-          vars: {
-            [solidColor]: vars.colorRole.danger.solid,
-            [solidHoverColor]: vars.colorRole.danger.solidHover,
-            [subtleColor]: vars.colorRole.danger.subtle,
-            [contrastColor]: vars.colorRole.danger.contrast
-          }
-        })
-      }
+      intent: buttonIntent
     },
     defaultVariants: {
       size: "medium",

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

@@ -0,0 +1,21 @@
+export declare const buttonHeight: {
+    readonly small: 40;
+    readonly medium: 48;
+    readonly large: 56;
+};
+export declare const buttonBase: string;
+export declare const buttonRadius: any;
+export declare const buttonVariant: {
+    solid: string;
+    outline: string;
+    ghost: string;
+};
+export declare const buttonIntent: {
+    neutral: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    danger: string;
+    inherit: string;
+};
+//# sourceMappingURL=buttonBase.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buttonBase.css.d.ts","sourceRoot":"","sources":["../../src/components/buttonBase.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,UAAU,QAMrB,CAAC;AAEH,eAAO,MAAM,YAAY,KAEvB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;CAoCzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;CAgDxB,CAAC"}

package/dist/components/buttonBase.css.js

@@ -0,0 +1,118 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { vars, atoms } from "@blockle/blocks-core";
+import { style, createVar } from "@vanilla-extract/css";
+import { clickable } from "./helpers.css.js";
+setFileScope("src/components/buttonBase.css.ts", "@blockle/blocks-theme-momotaro");
+const solidColor = createVar();
+const solidHoverColor = createVar();
+const subtleColor = createVar();
+const contrastColor = createVar();
+const buttonHeight = {
+  small: 40,
+  medium: 48,
+  large: 56
+};
+const buttonBase = style([
+  atoms({
+    display: "inline-flex",
+    placeItems: "center"
+  }),
+  clickable
+]);
+const buttonRadius = atoms({
+  borderRadius: 2
+});
+const buttonVariant = {
+  solid: style({
+    color: contrastColor,
+    backgroundColor: solidColor,
+    border: "none",
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: solidHoverColor
+      }
+    }
+  }),
+  outline: style([
+    atoms({
+      borderWidth: "thin"
+    }),
+    {
+      color: solidColor,
+      borderStyle: "solid",
+      borderColor: solidColor,
+      background: "transparent",
+      selectors: {
+        "&:hover:not(:disabled)": {
+          backgroundColor: subtleColor
+        }
+      }
+    }
+  ]),
+  ghost: style({
+    color: solidColor,
+    background: "transparent",
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: subtleColor
+      }
+    }
+  })
+};
+const buttonIntent = {
+  neutral: style({
+    vars: {
+      [solidColor]: vars.colorRole.neutral.solid,
+      [solidHoverColor]: vars.colorRole.neutral.solidHover,
+      [subtleColor]: vars.colorRole.neutral.subtle,
+      [contrastColor]: vars.colorRole.neutral.contrast
+    }
+  }),
+  primary: style({
+    vars: {
+      [solidColor]: vars.colorRole.primary.solid,
+      [solidHoverColor]: vars.colorRole.primary.solidHover,
+      [subtleColor]: vars.colorRole.primary.subtle,
+      [contrastColor]: vars.colorRole.primary.contrast
+    }
+  }),
+  secondary: style({
+    vars: {
+      [solidColor]: vars.colorRole.secondary.solid,
+      [solidHoverColor]: vars.colorRole.secondary.solidHover,
+      [subtleColor]: vars.colorRole.secondary.subtle,
+      [contrastColor]: vars.colorRole.secondary.contrast
+    }
+  }),
+  success: style({
+    vars: {
+      [solidColor]: vars.colorRole.success.solid,
+      [solidHoverColor]: vars.colorRole.success.solidHover,
+      [subtleColor]: vars.colorRole.success.subtle,
+      [contrastColor]: vars.colorRole.success.contrast
+    }
+  }),
+  danger: style({
+    vars: {
+      [solidColor]: vars.colorRole.danger.solid,
+      [solidHoverColor]: vars.colorRole.danger.solidHover,
+      [subtleColor]: vars.colorRole.danger.subtle,
+      [contrastColor]: vars.colorRole.danger.contrast
+    }
+  }),
+  // Takes the surrounding text color; only used with the ghost and outline variants
+  inherit: style({
+    vars: {
+      [solidColor]: "currentColor",
+      [subtleColor]: "color-mix(in srgb, currentColor 12%, transparent)"
+    }
+  })
+};
+endFileScope();
+export {
+  buttonBase,
+  buttonHeight,
+  buttonIntent,
+  buttonRadius,
+  buttonVariant
+};

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

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

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

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

package/dist/components/iconButton.css.js

@@ -0,0 +1,51 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { style, globalStyle } from "@vanilla-extract/css";
+import { buttonIntent, buttonRadius, buttonVariant, buttonBase, buttonHeight } from "./buttonBase.css.js";
+setFileScope("src/components/iconButton.css.ts", "@blockle/blocks-theme-momotaro");
+const sizeStyles = {
+  small: style({ blockSize: buttonHeight.small }),
+  medium: style({ blockSize: buttonHeight.medium }),
+  large: style({ blockSize: buttonHeight.large })
+};
+const iconSize = {
+  small: 20,
+  medium: 24,
+  large: 28
+};
+for (const key of ["small", "medium", "large"]) {
+  globalStyle(`${sizeStyles[key]} > svg`, {
+    inlineSize: iconSize[key],
+    blockSize: iconSize[key]
+  });
+}
+const iconButton = makeComponentTheme("iconButton", {
+  root: style([
+    buttonBase,
+    atoms({ justifyContent: "center" }),
+    {
+      aspectRatio: "1",
+      flexShrink: 0,
+      padding: 0
+    }
+  ]),
+  variants: {
+    variant: buttonVariant,
+    size: sizeStyles,
+    shape: {
+      square: buttonRadius,
+      circle: style({ borderRadius: "50%" })
+    },
+    intent: buttonIntent
+  },
+  defaultVariants: {
+    size: "medium",
+    variant: "solid",
+    intent: "primary",
+    shape: "square"
+  }
+});
+endFileScope();
+export {
+  iconButton
+};

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;AAyBlE,eAAO,MAAM,UAAU,EAAE,qBAuBxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AA2BlE,eAAO,MAAM,UAAU,EAAE,qBAyBxB,CAAC"}

package/dist/components/index.js

@@ -6,6 +6,7 @@ import { divider } from "./divider.css.js";
 import { drawer } from "./drawer.css.js";
 import { heading } from "./heading.css.js";
 import { icon } from "./icon.css.js";
+import { iconButton } from "./iconButton.css.js";
 import { label } from "./label.css.js";
 import { link } from "./link.css.js";
 import { popover } from "./popover.css.js";
@@ -15,6 +16,7 @@ import { select } from "./select.css.js";
 import { slider } from "./slider.css.js";
 import { spinner } from "./spinner.css.js";
 import { switchTheme } from "./switch.css.js";
+import { tag } from "./tag.css.js";
 import { text } from "./text.css.js";
 import { textarea } from "./textarea.css.js";
 import { textInput } from "./textInput.css.js";
@@ -29,6 +31,7 @@ const components = {
   drawer,
   heading,
   icon,
+  iconButton,
   label,
   link,
   popover,
@@ -38,6 +41,7 @@ const components = {
   slider,
   spinner,
   switch: switchTheme,
+  tag,
   text,
   textarea,
   textInput,

package/dist/components/link.css.js

@@ -28,7 +28,7 @@ const link = makeComponentTheme("link", {
     focusable
   ]),
   variants: {
-    variant: {
+    intent: {
       inherit: style({
         color: "inherit",
         fontWeight: "inherit"
@@ -37,8 +37,8 @@ const link = makeComponentTheme("link", {
         color: vars.colorRole.primary.foreground,
         fontWeight: 500
       }),
-      secondary: style({
-        color: vars.colorRole.secondary.foreground,
+      neutral: style({
+        color: vars.colorRole.neutral.foreground,
         fontWeight: 500
       })
     },
@@ -47,7 +47,7 @@ const link = makeComponentTheme("link", {
     })
   },
   defaultVariants: {
-    variant: "primary"
+    intent: "primary"
   }
 });
 endFileScope();

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

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

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

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

package/dist/components/tag.css.js

@@ -0,0 +1,100 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { style, createVar, globalStyle } from "@vanilla-extract/css";
+setFileScope("src/components/tag.css.ts", "@blockle/blocks-theme-momotaro");
+const paddingBlock = createVar();
+const paddingInline = createVar();
+const slot = style([
+  atoms({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }),
+  {
+    blockSize: "1lh",
+    flexShrink: 0
+  }
+]);
+const startSlot = style([slot]);
+const endSlot = style([slot]);
+const root = style([
+  atoms({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 1,
+    borderRadius: "full",
+    fontWeight: "medium",
+    lineHeight: "normal"
+  }),
+  {
+    verticalAlign: "middle",
+    whiteSpace: "nowrap",
+    paddingBlock,
+    paddingInline,
+    selectors: {
+      // A Slot sits as close to the rounded edge as to the top and bottom
+      [`&:has(> ${startSlot})`]: {
+        paddingInlineStart: paddingBlock
+      },
+      [`&:has(> ${endSlot})`]: {
+        paddingInlineEnd: paddingBlock
+      }
+    }
+  }
+]);
+globalStyle(`${root} > ${slot} > *`, {
+  blockSize: "100%",
+  inlineSize: "auto",
+  maxBlockSize: "100%"
+});
+globalStyle(`${root} > ${slot} > * > svg`, {
+  blockSize: "75%",
+  inlineSize: "75%"
+});
+const intentStyle = (roles) => style({
+  backgroundColor: roles.subtle,
+  color: roles.foreground
+});
+const tag = makeComponentTheme("tag", {
+  root,
+  startSlot,
+  endSlot,
+  variants: {
+    intent: {
+      primary: intentStyle(vars.colorRole.primary),
+      secondary: intentStyle(vars.colorRole.secondary),
+      neutral: intentStyle(vars.colorRole.neutral),
+      danger: intentStyle(vars.colorRole.danger),
+      success: intentStyle(vars.colorRole.success),
+      info: intentStyle(vars.colorRole.info),
+      warning: intentStyle(vars.colorRole.warning)
+    },
+    size: {
+      small: style([
+        atoms({ fontSize: "xsmall" }),
+        { vars: { [paddingBlock]: "2px", [paddingInline]: vars.space[2] } }
+      ]),
+      medium: style([
+        atoms({ fontSize: "small" }),
+        { vars: { [paddingBlock]: "2px", [paddingInline]: vars.space[2] } }
+      ]),
+      large: style([
+        atoms({ fontSize: "medium" }),
+        {
+          vars: {
+            [paddingBlock]: vars.space[1],
+            [paddingInline]: vars.space[3]
+          }
+        }
+      ])
+    }
+  },
+  defaultVariants: {
+    intent: "neutral",
+    size: "small"
+  }
+});
+endFileScope();
+export {
+  tag
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-theme-momotaro",
-  "version": "7.1.0",
+  "version": "7.2.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.1.x",
+    "@blockle/blocks-core": ">=3.2.x",
     "@vanilla-extract/css": "^1.18.0"
   },
   "publishConfig": {