@blockle/blocks-theme-momotaro 7.2.0 → 7.3.0

package/dist/components/divider.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme } from "@blockle/blocks-core";
+import { makeComponentTheme, layers } from "@blockle/blocks-core";
 import { style, fallbackVar, createVar } from "@vanilla-extract/css";
 setFileScope("src/components/divider.css.ts", "@blockle/blocks-theme-momotaro");
 const sizeVar = createVar();
@@ -7,28 +7,44 @@ const divider = makeComponentTheme(
   "divider",
   {
     root: style({
-      ":before": {
-        blockSize: fallbackVar(sizeVar, "1px")
-      },
-      ":after": {
-        blockSize: fallbackVar(sizeVar, "1px")
+      "@layer": {
+        [layers.theme]: {
+          ":before": {
+            blockSize: fallbackVar(sizeVar, "1px")
+          },
+          ":after": {
+            blockSize: fallbackVar(sizeVar, "1px")
+          }
+        }
       }
     }),
     variants: {
       size: {
         1: style({
-          vars: {
-            [sizeVar]: "1px"
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [sizeVar]: "1px"
+              }
+            }
           }
         }),
         2: style({
-          vars: {
-            [sizeVar]: "2px"
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [sizeVar]: "2px"
+              }
+            }
           }
         }),
         3: style({
-          vars: {
-            [sizeVar]: "3px"
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [sizeVar]: "3px"
+              }
+            }
           }
         })
       }

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;AAM9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CA8FlD,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,CA0HlD,CAAC"}

package/dist/components/drawer.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, layers, vars } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
 setFileScope("src/components/drawer.css.ts", "@blockle/blocks-theme-momotaro");
 const startingTransform = createVar();
@@ -7,89 +7,117 @@ const drawerSize = createVar();
 const drawer = makeComponentTheme(
   "drawer",
   {
-    root: style([
-      atoms({
-        border: "none"
-      }),
-      {
-        backgroundColor: vars.colorRole.surface.raised,
-        color: vars.colorRole.text.default,
-        selectors: {
-          "&[open]": {
-            transform: "translate(0, 0)",
-            opacity: 1,
-            "@starting-style": {
-              transform: startingTransform,
-              opacity: 0
+    root: style({
+      "@layer": {
+        [layers.theme]: {
+          border: "none",
+          backgroundColor: vars.colorRole.surface.raised,
+          color: vars.colorRole.text.default,
+          selectors: {
+            "&[open]": {
+              transform: "translate(0, 0)",
+              opacity: 1,
+              "@starting-style": {
+                transform: startingTransform,
+                opacity: 0
+              }
+            },
+            "&[open]::backdrop": {
+              backgroundColor: vars.colorRole.overlay.default,
+              opacity: 1,
+              "@starting-style": {
+                opacity: 0
+              }
             }
           },
-          "&[open]::backdrop": {
-            backgroundColor: vars.colorRole.overlay.default,
-            opacity: 1,
-            "@starting-style": {
-              opacity: 0
-            }
-          }
-        },
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            // Ending style
-            transform: startingTransform,
-            opacity: 0,
-            transitionBehavior: "allow-discrete",
-            transitionProperty: "opacity, transform, overlay, display",
-            transitionDuration: "240ms, 160ms, 240ms, 240ms",
-            "::backdrop": {
+          "@media": {
+            "(prefers-reduced-motion: no-preference)": {
+              // Ending style
+              transform: startingTransform,
               opacity: 0,
               transitionBehavior: "allow-discrete",
-              transitionProperty: "opacity, overlay, display",
-              transitionDuration: "160ms, 240ms, 240ms"
+              transitionProperty: "opacity, transform, overlay, display",
+              transitionDuration: "240ms, 160ms, 240ms, 240ms",
+              "::backdrop": {
+                opacity: 0,
+                transitionBehavior: "allow-discrete",
+                transitionProperty: "opacity, overlay, display",
+                transitionDuration: "160ms, 240ms, 240ms"
+              }
             }
           }
         }
       }
-    ]),
+    }),
     variants: {
       placement: {
         top: style({
-          vars: {
-            [startingTransform]: "translate(0, -100%)"
-          },
-          height: drawerSize
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [startingTransform]: "translate(0, -100%)"
+              },
+              height: drawerSize
+            }
+          }
         }),
         right: style({
-          vars: {
-            [startingTransform]: "translate(100%, 0)"
-          },
-          width: drawerSize
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [startingTransform]: "translate(100%, 0)"
+              },
+              width: drawerSize
+            }
+          }
         }),
         bottom: style({
-          vars: {
-            [startingTransform]: "translate(0, 100%)"
-          },
-          height: drawerSize
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [startingTransform]: "translate(0, 100%)"
+              },
+              height: drawerSize
+            }
+          }
         }),
         left: style({
-          vars: {
-            [startingTransform]: "translate(-100%, 0)"
-          },
-          width: drawerSize
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [startingTransform]: "translate(-100%, 0)"
+              },
+              width: drawerSize
+            }
+          }
         })
       },
       size: {
         small: style({
-          vars: {
-            [drawerSize]: "min(300px, 100%)"
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [drawerSize]: "min(300px, 100%)"
+              }
+            }
           }
         }),
         medium: style({
-          vars: {
-            [drawerSize]: "min(480px, 100%)"
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [drawerSize]: "min(480px, 100%)"
+              }
+            }
           }
         }),
         large: style({
-          vars: {
-            [drawerSize]: "min(640px, 100%)"
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [drawerSize]: "min(640px, 100%)"
+              }
+            }
           }
         })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"heading.css.d.ts","sourceRoot":"","sources":["../../src/components/heading.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CAepD,CAAC"}
+{"version":3,"file":"heading.css.d.ts","sourceRoot":"","sources":["../../src/components/heading.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CAuBpD,CAAC"}

package/dist/components/heading.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/heading.css.ts", "@blockle/blocks-theme-momotaro");
 const heading = makeComponentTheme(
@@ -7,10 +7,18 @@ const heading = makeComponentTheme(
   {
     variants: {
       color: {
-        default: style({ color: vars.colorRole.text.default }),
-        muted: style({ color: vars.colorRole.text.muted }),
-        disabled: style({ color: vars.colorRole.text.disabled }),
-        inverse: style({ color: vars.colorRole.text.inverse })
+        default: style({
+          "@layer": { [layers.theme]: { color: vars.colorRole.text.default } }
+        }),
+        muted: style({
+          "@layer": { [layers.theme]: { color: vars.colorRole.text.muted } }
+        }),
+        disabled: style({
+          "@layer": { [layers.theme]: { color: vars.colorRole.text.disabled } }
+        }),
+        inverse: style({
+          "@layer": { [layers.theme]: { color: vars.colorRole.text.inverse } }
+        })
       }
     },
     defaultVariants: {

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.css.d.ts","sourceRoot":"","sources":["../../src/components/helpers.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,oBAAc,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,SAAS,QAyBpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAOpB,CAAC"}
+{"version":3,"file":"helpers.css.d.ts","sourceRoot":"","sources":["../../src/components/helpers.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,oBAAc,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,SAAS,QA6BpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAWpB,CAAC"}

package/dist/components/helpers.css.js

@@ -1,39 +1,47 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { vars } from "@blockle/blocks-core";
+import { vars, layers } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
 setFileScope("src/components/helpers.css.ts", "@blockle/blocks-theme-momotaro");
 createVar();
 const focusable = style({
-  // '@media': {
-  //   '(prefers-reduced-motion: no-preference)': {
-  //     transition: `outline ${vars.transition.fast}`,
-  //   },
-  // },
-  ":focus-visible": {
-    outline: `2px solid ${vars.colorRole.focusRing.color}`,
-    outlineOffset: "2px"
-  },
-  selectors: {
-    '&:disabled, &[disabled], &[aria-disabled="true"]': {
-      opacity: 0.5,
-      cursor: "auto",
-      pointerEvents: "none"
-    },
-    "&:has(:focus-visible:not(button))": {
-      outline: `2px solid ${vars.colorRole.focusRing.color}`,
-      outlineOffset: "2px"
-    },
-    "&:has(:disabled)": {
-      opacity: 0.5,
-      cursor: "auto"
+  "@layer": {
+    [layers.theme]: {
+      // '@media': {
+      //   '(prefers-reduced-motion: no-preference)': {
+      //     transition: `outline ${vars.transition.fast}`,
+      //   },
+      // },
+      ":focus-visible": {
+        outline: `2px solid ${vars.colorRole.focusRing.color}`,
+        outlineOffset: "2px"
+      },
+      selectors: {
+        '&:disabled, &[disabled], &[aria-disabled="true"]': {
+          opacity: 0.5,
+          cursor: "auto",
+          pointerEvents: "none"
+        },
+        "&:has(:focus-visible:not(button))": {
+          outline: `2px solid ${vars.colorRole.focusRing.color}`,
+          outlineOffset: "2px"
+        },
+        "&:has(:disabled)": {
+          opacity: 0.5,
+          cursor: "auto"
+        }
+      }
     }
   }
 });
 const clickable = style([
   focusable,
   {
-    ":active": {
-      transform: "scale(0.975)"
+    "@layer": {
+      [layers.theme]: {
+        ":active": {
+          transform: "scale(0.975)"
+        }
+      }
     }
   }
 ]);

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

@@ -1 +1 @@
-{"version":3,"file":"icon.css.d.ts","sourceRoot":"","sources":["../../src/components/icon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAwB7C,CAAC"}
+{"version":3,"file":"icon.css.d.ts","sourceRoot":"","sources":["../../src/components/icon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,IAAI,EAAE,qBAAqB,CAAC,MAAM,CA4C7C,CAAC"}

package/dist/components/icon.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, pixelsToRem } from "@blockle/blocks-core";
+import { makeComponentTheme, layers, pixelsToRem } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/icon.css.ts", "@blockle/blocks-theme-momotaro");
 const icon = makeComponentTheme("icon", {
@@ -7,19 +7,39 @@ const icon = makeComponentTheme("icon", {
   variants: {
     size: {
       xsmall: style({
-        width: pixelsToRem(12)
+        "@layer": {
+          [layers.theme]: {
+            width: pixelsToRem(12)
+          }
+        }
       }),
       small: style({
-        width: pixelsToRem(16)
+        "@layer": {
+          [layers.theme]: {
+            width: pixelsToRem(16)
+          }
+        }
       }),
       medium: style({
-        width: pixelsToRem(32)
+        "@layer": {
+          [layers.theme]: {
+            width: pixelsToRem(32)
+          }
+        }
       }),
       large: style({
-        width: pixelsToRem(48)
+        "@layer": {
+          [layers.theme]: {
+            width: pixelsToRem(48)
+          }
+        }
       }),
       xlarge: style({
-        width: pixelsToRem(64)
+        "@layer": {
+          [layers.theme]: {
+            width: pixelsToRem(64)
+          }
+        }
       })
     }
   },

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

@@ -1 +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"}
+{"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;AAqC9B,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAgCvD,CAAC"}

package/dist/components/iconButton.css.js

@@ -1,12 +1,13 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, layers } 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 sizeStyle = (blockSize) => style({ "@layer": { [layers.theme]: { blockSize } } });
 const sizeStyles = {
-  small: style({ blockSize: buttonHeight.small }),
-  medium: style({ blockSize: buttonHeight.medium }),
-  large: style({ blockSize: buttonHeight.large })
+  small: sizeStyle(buttonHeight.small),
+  medium: sizeStyle(buttonHeight.medium),
+  large: sizeStyle(buttonHeight.large)
 };
 const iconSize = {
   small: 20,
@@ -15,18 +16,26 @@ const iconSize = {
 };
 for (const key of ["small", "medium", "large"]) {
   globalStyle(`${sizeStyles[key]} > svg`, {
-    inlineSize: iconSize[key],
-    blockSize: iconSize[key]
+    "@layer": {
+      [layers.theme]: {
+        inlineSize: iconSize[key],
+        blockSize: iconSize[key]
+      }
+    }
   });
 }
 const iconButton = makeComponentTheme("iconButton", {
   root: style([
     buttonBase,
-    atoms({ justifyContent: "center" }),
     {
-      aspectRatio: "1",
-      flexShrink: 0,
-      padding: 0
+      "@layer": {
+        [layers.theme]: {
+          justifyContent: "center",
+          aspectRatio: "1",
+          flexShrink: 0,
+          padding: 0
+        }
+      }
     }
   ]),
   variants: {
@@ -34,7 +43,9 @@ const iconButton = makeComponentTheme("iconButton", {
     size: sizeStyles,
     shape: {
       square: buttonRadius,
-      circle: style({ borderRadius: "50%" })
+      circle: style({
+        "@layer": { [layers.theme]: { borderRadius: "50%" } }
+      })
     },
     intent: buttonIntent
   },

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

package/dist/components/index.js

@@ -9,6 +9,7 @@ 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 { menu } from "./menu.css.js";
 import { popover } from "./popover.css.js";
 import { progress } from "./progress.css.js";
 import { radio } from "./radio.css.js";
@@ -16,6 +17,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 { tabs } from "./tabs.css.js";
 import { tag } from "./tag.css.js";
 import { text } from "./text.css.js";
 import { textarea } from "./textarea.css.js";
@@ -34,6 +36,7 @@ const components = {
   iconButton,
   label,
   link,
+  menu,
   popover,
   progress,
   radio,
@@ -41,6 +44,7 @@ const components = {
   slider,
   spinner,
   switch: switchTheme,
+  tabs,
   tag,
   text,
   textarea,

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

@@ -1 +1 @@
-{"version":3,"file":"label.css.d.ts","sourceRoot":"","sources":["../../src/components/label.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CA6BhD,CAAC"}
+{"version":3,"file":"label.css.d.ts","sourceRoot":"","sources":["../../src/components/label.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAiDhD,CAAC"}

package/dist/components/label.css.js

@@ -1,29 +1,49 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/label.css.ts", "@blockle/blocks-theme-momotaro");
 const label = makeComponentTheme(
   "label",
   {
     root: style({
-      letterSpacing: vars.letterSpacing.wide
+      "@layer": {
+        [layers.theme]: {
+          letterSpacing: vars.letterSpacing.wide
+        }
+      }
     }),
     variants: {
       size: {
         small: style({
-          fontSize: vars.fontSize.xsmall
+          "@layer": {
+            [layers.theme]: {
+              fontSize: vars.fontSize.xsmall
+            }
+          }
         }),
         medium: style({
-          fontSize: vars.fontSize.small
+          "@layer": {
+            [layers.theme]: {
+              fontSize: vars.fontSize.small
+            }
+          }
         }),
         large: style({
-          fontSize: vars.fontSize.medium
+          "@layer": {
+            [layers.theme]: {
+              fontSize: vars.fontSize.medium
+            }
+          }
         })
       },
       required: style({
-        ":after": {
-          content: '"*"',
-          marginLeft: vars.space[1]
+        "@layer": {
+          [layers.theme]: {
+            ":after": {
+              content: '"*"',
+              marginLeft: vars.space[1]
+            }
+          }
         }
       })
     },

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

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