@blockle/blocks-theme-momotaro 6.2.1 → 6.2.4

package/dist/components/alert.css.js

@@ -4,7 +4,7 @@ setFileScope("src/components/alert.css.ts", "@blockle/blocks-theme-momotaro");
 const alert = makeComponentTheme(
   "alert",
   {
-    base: atoms({
+    root: atoms({
       borderWidth: "thin",
       borderStyle: "solid",
       padding: 2,

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;AAS9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAqHlD,CAAC"}
+{"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;AAS9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAsIlD,CAAC"}

package/dist/components/button.css.js

@@ -1,14 +1,14 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
-import { focusRingColor, clickable } from "./helpers.css.js";
+import { clickable } from "./helpers.css.js";
 setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
 const intentColor = createVar();
 const hoverBackgroundColor = createVar();
 const button = makeComponentTheme(
   "button",
   {
-    base: style([
+    root: style([
       atoms({
         display: "inline-flex",
         placeItems: "center",
@@ -78,16 +78,33 @@ const button = makeComponentTheme(
       },
       intent: {
         neutral: style({
+          vars: {
+            [intentColor]: vars.color["neutral-800"],
+            [hoverBackgroundColor]: vars.color["neutral-200"]
+          }
+        }),
+        primary: style({
           vars: {
             [intentColor]: vars.color["primary-600"],
             [hoverBackgroundColor]: vars.color["primary-100"]
           }
         }),
+        secondary: style({
+          vars: {
+            [intentColor]: vars.color["secondary-600"],
+            [hoverBackgroundColor]: vars.color["secondary-100"]
+          }
+        }),
+        success: style({
+          vars: {
+            [intentColor]: vars.color["success-600"],
+            [hoverBackgroundColor]: vars.color["success-100"]
+          }
+        }),
         danger: style({
           vars: {
             [intentColor]: vars.color["danger-700"],
-            [hoverBackgroundColor]: vars.color["danger-200"],
-            [focusRingColor]: vars.color["danger-300"]
+            [hoverBackgroundColor]: vars.color["danger-200"]
           }
         })
       }
@@ -96,7 +113,7 @@ const button = makeComponentTheme(
       {
         variants: {
           variant: "solid",
-          intent: "neutral"
+          intent: "primary"
         },
         style: style({
           vars: {
@@ -119,7 +136,7 @@ const button = makeComponentTheme(
     defaultVariants: {
       size: "medium",
       variant: "solid",
-      intent: "neutral"
+      intent: "primary"
     }
   }
 );

package/dist/components/checkbox.css.js

@@ -7,7 +7,7 @@ setFileScope("src/components/checkbox.css.ts", "@blockle/blocks-theme-momotaro")
 const checkbox = makeComponentTheme(
   "checkbox",
   {
-    base: style([
+    root: style([
       {
         display: "flex",
         alignItems: "center",

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

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

package/dist/components/dialog.css.js

@@ -13,7 +13,7 @@ const dialog = makeComponentTheme(
         border: "none",
         overflow: "auto",
         borderRadius: 2,
-        boxShadow: "large"
+        boxShadow: 3
       }),
       {
         maxHeight: "90%",
@@ -25,7 +25,6 @@ const dialog = makeComponentTheme(
           "&[open]": {
             transform: "translate(0, 0)",
             opacity: 1,
-            // @ts-expect-error - typings does not support @starting-style (yet)
             "@starting-style": {
               transform: "translate(0, -120px) scale(0.95)",
               opacity: 0

package/dist/components/divider.css.js

@@ -5,7 +5,7 @@ setFileScope("src/components/divider.css.ts", "@blockle/blocks-theme-momotaro");
 const divider = makeComponentTheme(
   "divider",
   {
-    base: style({
+    root: style({
       blockSize: 1
     }),
     defaultVariants: {

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

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

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

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

package/dist/components/drawer.css.js

@@ -0,0 +1,77 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { style, createVar } from "@vanilla-extract/css";
+setFileScope("src/components/drawer.css.ts", "@blockle/blocks-theme-momotaro");
+const startingTransform = createVar();
+const drawer = makeComponentTheme(
+  "drawer",
+  {
+    root: style([
+      atoms({
+        border: "none"
+      }),
+      {
+        selectors: {
+          "&[open]": {
+            transform: "translate(0, 0)",
+            opacity: 1,
+            "@starting-style": {
+              transform: startingTransform,
+              opacity: 0
+            }
+          },
+          "&[open]::backdrop": {
+            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": {
+              opacity: 0,
+              transitionBehavior: "allow-discrete",
+              transitionProperty: "opacity, overlay, display",
+              transitionDuration: "160ms, 240ms, 240ms"
+            }
+          }
+        }
+      }
+    ]),
+    variants: {
+      placement: {
+        top: style({
+          vars: {
+            [startingTransform]: "translate(0, -100%)"
+          }
+        }),
+        right: style({
+          vars: {
+            [startingTransform]: "translate(100%, 0)"
+          }
+        }),
+        bottom: style({
+          vars: {
+            [startingTransform]: "translate(0, 100%)"
+          }
+        }),
+        left: style({
+          vars: {
+            [startingTransform]: "translate(-100%, 0)"
+          }
+        })
+      }
+    }
+  }
+);
+endFileScope();
+export {
+  drawer
+};

package/dist/components/helpers.css.js

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { vars } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
 setFileScope("src/components/helpers.css.ts", "@blockle/blocks-theme-momotaro");
-const focusRingColor = createVar();
+createVar();
 const focusable = style({
   // '@media': {
   //   '(prefers-reduced-motion: no-preference)': {
@@ -40,6 +40,5 @@ const clickable = style([
 endFileScope();
 export {
   clickable,
-  focusRingColor,
   focusable
 };

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,EAEL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAkB7C,CAAC"}
+{"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"}

package/dist/components/icon.css.js

@@ -1,19 +1,25 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme } from "@blockle/blocks-core";
+import { makeComponentTheme, 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", {
-  base: "",
+  root: "",
   variants: {
     size: {
+      xsmall: style({
+        minWidth: pixelsToRem(12)
+      }),
       small: style({
-        minWidth: "1rem"
+        minWidth: pixelsToRem(16)
       }),
       medium: style({
-        minWidth: "2rem"
+        minWidth: pixelsToRem(32)
       }),
       large: style({
-        minWidth: "3rem"
+        minWidth: pixelsToRem(48)
+      }),
+      xlarge: style({
+        minWidth: pixelsToRem(64)
       })
     }
   },

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

package/dist/components/index.js

@@ -3,6 +3,7 @@ import { button } from "./button.css.js";
 import { checkbox } from "./checkbox.css.js";
 import { dialog } from "./dialog.css.js";
 import { divider } from "./divider.css.js";
+import { drawer } from "./drawer.css.js";
 import { icon } from "./icon.css.js";
 import { label } from "./label.css.js";
 import { link } from "./link.css.js";
@@ -22,6 +23,7 @@ const components = {
   checkbox,
   dialog,
   divider,
+  drawer,
   icon,
   label,
   link,

package/dist/components/label.css.js

@@ -5,7 +5,7 @@ setFileScope("src/components/label.css.ts", "@blockle/blocks-theme-momotaro");
 const label = makeComponentTheme(
   "label",
   {
-    base: style({}),
+    root: style({}),
     variants: {
       size: {
         small: style({

package/dist/components/link.css.js

@@ -4,7 +4,7 @@ import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/link.css.ts", "@blockle/blocks-theme-momotaro");
 const link = makeComponentTheme("link", {
-  base: style([
+  root: style([
     {
       outline: "none",
       border: "none",

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

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

package/dist/components/popover.css.js

@@ -5,11 +5,11 @@ setFileScope("src/components/popover.css.ts", "@blockle/blocks-theme-momotaro");
 const popover = makeComponentTheme(
   "popover",
   {
-    base: style([
+    root: style([
       atoms({
         backgroundColor: "white",
         borderRadius: 1,
-        boxShadow: "medium",
+        boxShadow: 2,
         padding: 2,
         margin: 1
         // Space between the popover and the anchor element
@@ -20,7 +20,6 @@ const popover = makeComponentTheme(
           "&: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

package/dist/components/progress.css.js

@@ -13,7 +13,7 @@ const indeterminateAnimation = keyframes({
 const progress = makeComponentTheme(
   "progress",
   {
-    base: style([
+    root: style([
       {
         height: 8
       },

package/dist/components/radio.css.js

@@ -7,7 +7,7 @@ setFileScope("src/components/radio.css.ts", "@blockle/blocks-theme-momotaro");
 const radio = makeComponentTheme(
   "radio",
   {
-    base: style([
+    root: style([
       {
         display: "flex",
         alignItems: "center",

package/dist/components/select.css.js

@@ -13,7 +13,7 @@ const select = makeComponentTheme(
         paddingBlock: 1,
         backgroundColor: "white",
         borderRadius: 2,
-        boxShadow: "medium"
+        boxShadow: 2
       }),
       {
         border: "none",

package/dist/components/slider.css.js

@@ -10,7 +10,7 @@ const thumbActive = createVar();
 const slider = makeComponentTheme(
   "slider",
   {
-    base: style({
+    root: style({
       blockSize: "20px"
     }),
     track: style([

package/dist/components/spinner.css.js

@@ -13,7 +13,7 @@ const spinAnimation = keyframes({
 const spinner = makeComponentTheme(
   "spinner",
   {
-    base: style({
+    root: style({
       aspectRatio: "1 / 1",
       overflow: "hidden",
       borderRadius: "50%",

package/dist/components/switch.css.js

@@ -7,7 +7,7 @@ const activeScaleFactor = createVar();
 const switchTheme = makeComponentTheme(
   "switch",
   {
-    base: style([
+    root: style([
       atoms({
         borderRadius: 4,
         backgroundColor: "text-200"
@@ -37,7 +37,7 @@ const switchTheme = makeComponentTheme(
       },
       focusable
     ]),
-    slider: style([
+    thumb: style([
       atoms({
         borderRadius: "full"
       }),

package/dist/components/textInput.css.js

@@ -6,7 +6,7 @@ setFileScope("src/components/textInput.css.ts", "@blockle/blocks-theme-momotaro"
 const textInput = makeComponentTheme(
   "textInput",
   {
-    container: style([
+    root: style([
       {
         minHeight: 40,
         backgroundColor: "white",
@@ -22,7 +22,7 @@ const textInput = makeComponentTheme(
         paddingBlock: 2,
         backgroundColor: "white",
         borderRadius: 2,
-        boxShadow: "medium",
+        boxShadow: 2,
         // Space between `startSlot | children | endSlot`
         gap: 2
       }),

package/dist/components/textarea.css.js

@@ -22,7 +22,7 @@ const textarea = makeComponentTheme(
         ":disabled": {}
       }
     ]),
-    container: style([
+    root: style([
       {
         overflow: "auto",
         minHeight: 96,
@@ -38,7 +38,7 @@ const textarea = makeComponentTheme(
         paddingBlock: 2,
         backgroundColor: "white",
         borderRadius: 2,
-        boxShadow: "medium"
+        boxShadow: 2
       }),
       focusable
     ])

package/dist/components/tooltip.css.js

@@ -5,7 +5,7 @@ setFileScope("src/components/tooltip.css.ts", "@blockle/blocks-theme-momotaro");
 const tooltip = makeComponentTheme(
   "tooltip",
   {
-    base: atoms({
+    root: atoms({
       padding: 1
     }),
     variants: {

package/dist/tokens.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.css.d.ts","sourceRoot":"","sources":["../src/tokens.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAErE,eAAO,MAAM,MAAM,EAAE,WA4JpB,CAAC"}
+{"version":3,"file":"tokens.css.d.ts","sourceRoot":"","sources":["../src/tokens.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAErE,eAAO,MAAM,MAAM,EAAE,WAyKpB,CAAC"}

package/dist/tokens.css.js

@@ -104,12 +104,25 @@ const tokens = {
       700: "#2E2E2E",
       800: "#1A1A1A",
       900: "#0D0D0D"
+    },
+    neutral: {
+      100: "#F7F7F7",
+      200: "#E1E1E1",
+      300: "#CFCFCF",
+      400: "#B1B1B1",
+      500: "#9E9E9E",
+      600: "#7E7E7E",
+      700: "#5E5E5E",
+      800: "#3C3C3C",
+      900: "#1A1A1A"
     }
   },
   shadow: {
-    small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
-    medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
-    large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
+    1: "0px 4px 8px rgba(0, 0, 0, 0.08)",
+    2: "0px 8px 16px rgba(0, 0, 0, 0.08)",
+    3: "0px 16px 24px rgba(0, 0, 0, 0.08)",
+    4: "0px 24px 32px rgba(0, 0, 0, 0.08)",
+    5: "0px 32px 40px rgba(0, 0, 0, 0.08)"
   },
   focus: {
     boxShadow: "0 0 1px 2px #7FE3F0"
@@ -132,8 +145,8 @@ const tokens = {
   typography: {
     fontFamily: {
       body: '"Rubik", sans-serif',
-      primary: '"Rubik", sans-serif',
-      secondary: '"Rubik", sans-serif'
+      heading: '"Rubik", sans-serif',
+      mono: '"Rubik", monospace'
     },
     fontSize: {
       xsmall: pixelsToRem(12),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-theme-momotaro",
-  "version": "6.2.1",
+  "version": "6.2.4",
   "description": "Momotaro theme for Blocks",
   "type": "module",
   "sideEffects": false,
@@ -22,7 +22,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/Blockle/blocks.git"
+    "url": "git+https://github.com/Blockle/blocks.git"
   },
   "author": "Niek Saarberg <n.saarberg@gmail.com>",
   "license": "MIT",
@@ -31,10 +31,14 @@
   },
   "homepage": "https://github.com/Blockle/blocks#readme",
   "dependencies": {
-    "@vanilla-extract/css": "^1.17.5"
+    "@vanilla-extract/css": "^1.18.0"
   },
   "peerDependencies": {
     "@blockle/blocks-core": ">=1.2.x",
-    "@vanilla-extract/css": "^1.17.5"
+    "@vanilla-extract/css": "^1.18.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   }
 }