@blockle/blocks-theme-momotaro 7.2.0 → 7.3.0

package/dist/components/slider.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/slider.css.ts", "@blockle/blocks-theme-momotaro");
@@ -12,39 +12,51 @@ const slider = makeComponentTheme(
   "slider",
   {
     root: style({
-      blockSize: "20px"
+      "@layer": {
+        [layers.theme]: {
+          blockSize: "20px"
+        }
+      }
     }),
-    track: style([
-      atoms({
-        borderRadius: 1
-      }),
-      {
-        blockSize: "4px",
-        backgroundColor: trackBackground
+    track: style({
+      "@layer": {
+        [layers.theme]: {
+          borderRadius: vars.borderRadius[1],
+          blockSize: "4px",
+          backgroundColor: trackBackground
+        }
       }
-    ]),
+    }),
     filledTrack: style({
-      backgroundColor: filledTrackBackground
+      "@layer": {
+        [layers.theme]: {
+          backgroundColor: filledTrackBackground
+        }
+      }
     }),
     thumb: style([
       {
-        backgroundColor: thumbBackground,
-        borderRadius: "50%",
-        height: "16px",
-        width: "16px",
-        boxShadow: `0 0 0 0px color-mix(in srgb,  ${haloColor}, transparent 0%)`,
-        vars: {
-          [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${haloColor}, transparent 20%)`
-        },
-        ":hover": {
-          boxShadow: thumbActive
-        },
-        ":focus-visible": {
-          boxShadow: thumbActive
-        },
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            transition: "box-shadow 0.2s"
+        "@layer": {
+          [layers.theme]: {
+            backgroundColor: thumbBackground,
+            borderRadius: "50%",
+            height: "16px",
+            width: "16px",
+            boxShadow: `0 0 0 0px color-mix(in srgb,  ${haloColor}, transparent 0%)`,
+            vars: {
+              [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${haloColor}, transparent 20%)`
+            },
+            ":hover": {
+              boxShadow: thumbActive
+            },
+            ":focus-visible": {
+              boxShadow: thumbActive
+            },
+            "@media": {
+              "(prefers-reduced-motion: no-preference)": {
+                transition: "box-shadow 0.2s"
+              }
+            }
           }
         }
       },
@@ -53,39 +65,63 @@ const slider = makeComponentTheme(
     variants: {
       size: {
         small: style({
-          inlineSize: "100px"
+          "@layer": {
+            [layers.theme]: {
+              inlineSize: "100px"
+            }
+          }
         }),
         medium: style({
-          inlineSize: "200px"
+          "@layer": {
+            [layers.theme]: {
+              inlineSize: "200px"
+            }
+          }
         }),
         large: style({
-          inlineSize: "300px"
+          "@layer": {
+            [layers.theme]: {
+              inlineSize: "300px"
+            }
+          }
         })
       },
       intent: {
         primary: style({
-          vars: {
-            [trackBackground]: vars.colorRole.primary.subtle,
-            [filledTrackBackground]: vars.colorRole.primary.solid,
-            [thumbBackground]: vars.colorRole.primary.solid,
-            [haloColor]: vars.colorRole.primary.subtle
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [trackBackground]: vars.colorRole.primary.subtle,
+                [filledTrackBackground]: vars.colorRole.primary.solid,
+                [thumbBackground]: vars.colorRole.primary.solid,
+                [haloColor]: vars.colorRole.primary.subtle
+              }
+            }
           }
         }),
         secondary: style({
-          vars: {
-            [trackBackground]: vars.colorRole.secondary.subtle,
-            [filledTrackBackground]: vars.colorRole.secondary.solid,
-            [thumbBackground]: vars.colorRole.secondary.solid,
-            [haloColor]: vars.colorRole.secondary.subtle
+          "@layer": {
+            [layers.theme]: {
+              vars: {
+                [trackBackground]: vars.colorRole.secondary.subtle,
+                [filledTrackBackground]: vars.colorRole.secondary.solid,
+                [thumbBackground]: vars.colorRole.secondary.solid,
+                [haloColor]: vars.colorRole.secondary.subtle
+              }
+            }
           }
         })
       },
       disabled: style({
-        pointerEvents: "none",
-        vars: {
-          [trackBackground]: vars.colorRole.border.default,
-          [filledTrackBackground]: vars.colorRole.text.disabled,
-          [thumbBackground]: vars.colorRole.text.disabled
+        "@layer": {
+          [layers.theme]: {
+            pointerEvents: "none",
+            vars: {
+              [trackBackground]: vars.colorRole.border.default,
+              [filledTrackBackground]: vars.colorRole.text.disabled,
+              [thumbBackground]: vars.colorRole.text.disabled
+            }
+          }
         }
       })
     },

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.css.d.ts","sourceRoot":"","sources":["../../src/components/spinner.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAY9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CA8BpD,CAAC"}
+{"version":3,"file":"spinner.css.d.ts","sourceRoot":"","sources":["../../src/components/spinner.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAY9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CA8CpD,CAAC"}

package/dist/components/spinner.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, keyframes } from "@vanilla-extract/css";
 setFileScope("src/components/spinner.css.ts", "@blockle/blocks-theme-momotaro");
 const spinAnimation = keyframes({
@@ -14,25 +14,41 @@ const spinner = makeComponentTheme(
   "spinner",
   {
     root: style({
-      aspectRatio: "1 / 1",
-      overflow: "hidden",
-      borderRadius: "50%",
-      borderWidth: "3px",
-      borderStyle: "solid",
-      borderColor: "currentColor transparent currentColor transparent",
-      animation: `${spinAnimation} 1.2s linear infinite`
+      "@layer": {
+        [layers.theme]: {
+          aspectRatio: "1 / 1",
+          overflow: "hidden",
+          borderRadius: "50%",
+          borderWidth: "3px",
+          borderStyle: "solid",
+          borderColor: "currentColor transparent currentColor transparent",
+          animation: `${spinAnimation} 1.2s linear infinite`
+        }
+      }
     }),
     variants: {
-      // note: colors are handled by atoms
+      // note: colors come from the color scheme (currentColor)
       size: {
         small: style({
-          width: 16
+          "@layer": {
+            [layers.theme]: {
+              width: 16
+            }
+          }
         }),
         medium: style({
-          width: 24
+          "@layer": {
+            [layers.theme]: {
+              width: 24
+            }
+          }
         }),
         large: style({
-          width: 32
+          "@layer": {
+            [layers.theme]: {
+              width: 32
+            }
+          }
         })
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../src/components/switch.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAO9B,eAAO,MAAM,WAAW,EAAE,qBAAqB,CAAC,QAAQ,CA2DvD,CAAC"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../src/components/switch.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAO9B,eAAO,MAAM,WAAW,EAAE,qBAAqB,CAAC,QAAQ,CA6DvD,CAAC"}

package/dist/components/switch.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/switch.css.ts", "@blockle/blocks-theme-momotaro");
@@ -8,60 +8,62 @@ const switchTheme = makeComponentTheme(
   "switch",
   {
     root: style([
-      atoms({
-        borderRadius: 4
-      }),
       {
-        backgroundColor: vars.colorRole.border.strong,
-        width: 52,
-        height: 32,
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
-          }
-        },
-        selectors: {
-          '&[data-checked="true"]': {
-            backgroundColor: vars.colorRole.secondary.solid
-          }
-        },
-        // Scale the switch when it's `:active`
-        vars: {
-          [activeScaleFactor]: "1"
-        },
-        ":active": {
-          vars: {
-            [activeScaleFactor]: "0.96"
+        "@layer": {
+          [layers.theme]: {
+            borderRadius: vars.borderRadius[4],
+            backgroundColor: vars.colorRole.border.strong,
+            width: 52,
+            height: 32,
+            "@media": {
+              "(prefers-reduced-motion: no-preference)": {
+                transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
+              }
+            },
+            selectors: {
+              '&[data-checked="true"]': {
+                backgroundColor: vars.colorRole.secondary.solid
+              }
+            },
+            // Scale the switch when it's `:active`
+            vars: {
+              [activeScaleFactor]: "1"
+            },
+            ":active": {
+              vars: {
+                [activeScaleFactor]: "0.96"
+              }
+            }
           }
         }
       },
       focusable
     ]),
-    thumb: style([
-      atoms({
-        borderRadius: "full"
-      }),
-      {
-        width: 24,
-        height: 24,
-        top: 4,
-        left: 4,
-        transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
-        position: "absolute",
-        // Deliberately fixed: the thumb is white in every mode
-        backgroundColor: vars.color.white,
-        selectors: {
-          '&[data-checked="true"]': {
-            transform: `translateX(20px) scale(${activeScaleFactor})`
-          }
-        },
-        "@media": {
-          "(prefers-reduced-motion: no-preference)": {
-            transition: "transform 120ms ease-out"
+    thumb: style({
+      "@layer": {
+        [layers.theme]: {
+          borderRadius: vars.borderRadius.full,
+          width: 24,
+          height: 24,
+          top: 4,
+          left: 4,
+          transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+          position: "absolute",
+          // Deliberately fixed: the thumb is white in every mode
+          backgroundColor: vars.color.white,
+          selectors: {
+            '&[data-checked="true"]': {
+              transform: `translateX(20px) scale(${activeScaleFactor})`
+            }
+          },
+          "@media": {
+            "(prefers-reduced-motion: no-preference)": {
+              transition: "transform 120ms ease-out"
+            }
           }
         }
       }
-    ])
+    })
   }
 );
 endFileScope();

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.css.d.ts","sourceRoot":"","sources":["../../src/components/tabs.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAG3B,MAAM,sBAAsB,CAAC;AAqG9B,eAAO,MAAM,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAO7C,CAAC"}

package/dist/components/tabs.css.js

@@ -0,0 +1,102 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, vars, layers, tabIndicatorVars } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+import { focusable } from "./helpers.css.js";
+setFileScope("src/components/tabs.css.ts", "@blockle/blocks-theme-momotaro");
+const list = style({
+  "@layer": {
+    [layers.theme]: {
+      // The thin baseline under the whole row
+      boxShadow: `inset 0 -1px 0 ${vars.colorRole.border.default}`,
+      vars: {
+        [tabIndicatorVars.color]: vars.colorRole.primary.solid,
+        [tabIndicatorVars.thickness]: "2px",
+        [tabIndicatorVars.duration]: "200ms",
+        [tabIndicatorVars.easing]: "ease-in-out"
+      }
+    }
+  }
+});
+const tab = style({
+  "@layer": {
+    [layers.theme]: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }
+});
+const trigger = style([
+  focusable,
+  {
+    "@layer": {
+      [layers.theme]: {
+        paddingBlock: vars.space[2],
+        paddingInline: vars.space[3],
+        border: "none",
+        background: "transparent",
+        color: vars.colorRole.text.muted,
+        font: "inherit",
+        fontSize: "inherit",
+        fontWeight: 500,
+        textDecoration: "none",
+        cursor: "pointer",
+        whiteSpace: "nowrap",
+        selectors: {
+          "&:hover": {
+            color: vars.colorRole.text.default
+          },
+          '&[aria-selected="true"], &[aria-current="page"]': {
+            color: vars.colorRole.text.default,
+            fontWeight: 600
+          }
+        }
+      }
+    }
+  }
+]);
+const slot = style({
+  "@layer": {
+    [layers.theme]: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }
+});
+const startSlot = style([
+  slot,
+  {
+    "@layer": {
+      [layers.theme]: { paddingInlineStart: vars.space[3] }
+    }
+  }
+]);
+const endSlot = style([
+  slot,
+  {
+    "@layer": {
+      [layers.theme]: { paddingInlineEnd: vars.space[2] }
+    }
+  }
+]);
+const panel = style({
+  "@layer": {
+    [layers.theme]: {
+      ":focus-visible": {
+        outline: `2px solid ${vars.colorRole.focusRing.color}`,
+        outlineOffset: "2px"
+      }
+    }
+  }
+});
+const tabs = makeComponentTheme("tabs", {
+  list,
+  tab,
+  trigger,
+  startSlot,
+  endSlot,
+  panel
+});
+endFileScope();
+export {
+  tabs
+};

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

@@ -1 +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"}
+{"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;AAkG9B,eAAO,MAAM,GAAG,EAAE,qBAAqB,CAAC,KAAK,CAwB3C,CAAC"}

package/dist/components/tag.css.js

@@ -1,59 +1,82 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, layers } 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 slot = style({
+  "@layer": {
+    [layers.theme]: {
+      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
+const root = style({
+  "@layer": {
+    [layers.theme]: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: vars.space[1],
+      borderRadius: vars.borderRadius.full,
+      fontWeight: vars.fontWeight.medium,
+      lineHeight: vars.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%"
+  "@layer": {
+    [layers.theme]: {
+      blockSize: "100%",
+      inlineSize: "auto",
+      maxBlockSize: "100%"
+    }
+  }
 });
 globalStyle(`${root} > ${slot} > * > svg`, {
-  blockSize: "75%",
-  inlineSize: "75%"
+  "@layer": {
+    [layers.theme]: {
+      blockSize: "75%",
+      inlineSize: "75%"
+    }
+  }
 });
 const intentStyle = (roles) => style({
-  backgroundColor: roles.subtle,
-  color: roles.foreground
+  "@layer": {
+    [layers.theme]: {
+      backgroundColor: roles.subtle,
+      color: roles.foreground
+    }
+  }
+});
+const sizeStyle = (fontSize, paddingBlockValue, paddingInlineValue) => style({
+  "@layer": {
+    [layers.theme]: {
+      fontSize,
+      vars: {
+        [paddingBlock]: paddingBlockValue,
+        [paddingInline]: paddingInlineValue
+      }
+    }
+  }
 });
 const tag = makeComponentTheme("tag", {
   root,
@@ -70,23 +93,9 @@ const tag = makeComponentTheme("tag", {
       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]
-          }
-        }
-      ])
+      small: sizeStyle(vars.fontSize.xsmall, "2px", vars.space[2]),
+      medium: sizeStyle(vars.fontSize.small, "2px", vars.space[2]),
+      large: sizeStyle(vars.fontSize.medium, vars.space[1], vars.space[3])
     }
   },
   defaultVariants: {

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

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

package/dist/components/text.css.js

@@ -1,14 +1,22 @@
 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/text.css.ts", "@blockle/blocks-theme-momotaro");
 const text = makeComponentTheme("text", {
   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/textInput.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textInput.css.d.ts","sourceRoot":"","sources":["../../src/components/textInput.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,WAAW,CAuCxD,CAAC"}
+{"version":3,"file":"textInput.css.d.ts","sourceRoot":"","sources":["../../src/components/textInput.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,WAAW,CAyCxD,CAAC"}