@blockle/blocks-theme-momotaro 6.3.0 → 7.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"alert.css.d.ts","sourceRoot":"","sources":["../../src/components/alert.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAkChD,CAAC"}
+{"version":3,"file":"alert.css.d.ts","sourceRoot":"","sources":["../../src/components/alert.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAY9B,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAkBhD,CAAC"}

package/dist/components/alert.css.js

@@ -1,6 +1,12 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
 setFileScope("src/components/alert.css.ts", "@blockle/blocks-theme-momotaro");
+const intentStyle = (roles) => style({
+  backgroundColor: roles.subtle,
+  color: roles.foreground,
+  borderColor: roles.border
+});
 const alert = makeComponentTheme(
   "alert",
   {
@@ -12,26 +18,10 @@ const alert = makeComponentTheme(
     }),
     variants: {
       intent: {
-        error: atoms({
-          backgroundColor: "danger-100",
-          color: "danger-800",
-          borderColor: "danger-300"
-        }),
-        info: atoms({
-          backgroundColor: "info-100",
-          color: "info-800",
-          borderColor: "info-300"
-        }),
-        success: atoms({
-          backgroundColor: "success-100",
-          color: "success-800",
-          borderColor: "success-300"
-        }),
-        warning: atoms({
-          backgroundColor: "warning-100",
-          color: "warning-800",
-          borderColor: "warning-300"
-        })
+        error: intentStyle(vars.colorRole.danger),
+        info: intentStyle(vars.colorRole.info),
+        success: intentStyle(vars.colorRole.success),
+        warning: intentStyle(vars.colorRole.warning)
       }
     }
   }

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,CAsIlD,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;AAW9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAmIlD,CAAC"}

package/dist/components/button.css.js

@@ -3,8 +3,10 @@ import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
 import { style, createVar } from "@vanilla-extract/css";
 import { clickable } from "./helpers.css.js";
 setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
-const intentColor = createVar();
-const hoverBackgroundColor = createVar();
+const solidColor = createVar();
+const solidHoverColor = createVar();
+const subtleColor = createVar();
+const contrastColor = createVar();
 const button = makeComponentTheme(
   "button",
   {
@@ -19,35 +21,46 @@ const button = makeComponentTheme(
         paddingBlock: 1
       }),
       {
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: hoverBackgroundColor
-          }
-        }
+        selectors: {}
       },
       clickable
     ]),
     variants: {
       variant: {
         solid: style({
-          color: vars.color.white,
-          backgroundColor: intentColor,
-          border: "none"
+          color: contrastColor,
+          backgroundColor: solidColor,
+          border: "none",
+          selectors: {
+            "&:hover:not(:disabled)": {
+              backgroundColor: solidHoverColor
+            }
+          }
         }),
         outline: style([
           atoms({
             borderWidth: "thin"
           }),
           {
-            color: intentColor,
+            color: solidColor,
             borderStyle: "solid",
-            borderColor: intentColor,
-            background: "transparent"
+            borderColor: solidColor,
+            background: "transparent",
+            selectors: {
+              "&:hover:not(:disabled)": {
+                backgroundColor: subtleColor
+              }
+            }
           }
         ]),
         ghost: style({
-          color: intentColor,
-          background: "transparent"
+          color: solidColor,
+          background: "transparent",
+          selectors: {
+            "&:hover:not(:disabled)": {
+              backgroundColor: subtleColor
+            }
+          }
         })
       },
       size: {
@@ -79,60 +92,46 @@ const button = makeComponentTheme(
       intent: {
         neutral: style({
           vars: {
-            [intentColor]: vars.color["neutral-800"],
-            [hoverBackgroundColor]: vars.color["neutral-200"]
+            [solidColor]: vars.colorRole.neutral.solid,
+            [solidHoverColor]: vars.colorRole.neutral.solidHover,
+            [subtleColor]: vars.colorRole.neutral.subtle,
+            [contrastColor]: vars.colorRole.neutral.contrast
           }
         }),
         primary: style({
           vars: {
-            [intentColor]: vars.color["primary-600"],
-            [hoverBackgroundColor]: vars.color["primary-100"]
+            [solidColor]: vars.colorRole.primary.solid,
+            [solidHoverColor]: vars.colorRole.primary.solidHover,
+            [subtleColor]: vars.colorRole.primary.subtle,
+            [contrastColor]: vars.colorRole.primary.contrast
           }
         }),
         secondary: style({
           vars: {
-            [intentColor]: vars.color["secondary-600"],
-            [hoverBackgroundColor]: vars.color["secondary-100"]
+            [solidColor]: vars.colorRole.secondary.solid,
+            [solidHoverColor]: vars.colorRole.secondary.solidHover,
+            [subtleColor]: vars.colorRole.secondary.subtle,
+            [contrastColor]: vars.colorRole.secondary.contrast
           }
         }),
         success: style({
           vars: {
-            [intentColor]: vars.color["success-600"],
-            [hoverBackgroundColor]: vars.color["success-100"]
+            [solidColor]: vars.colorRole.success.solid,
+            [solidHoverColor]: vars.colorRole.success.solidHover,
+            [subtleColor]: vars.colorRole.success.subtle,
+            [contrastColor]: vars.colorRole.success.contrast
           }
         }),
         danger: style({
           vars: {
-            [intentColor]: vars.color["danger-700"],
-            [hoverBackgroundColor]: vars.color["danger-200"]
+            [solidColor]: vars.colorRole.danger.solid,
+            [solidHoverColor]: vars.colorRole.danger.solidHover,
+            [subtleColor]: vars.colorRole.danger.subtle,
+            [contrastColor]: vars.colorRole.danger.contrast
           }
         })
       }
     },
-    compoundVariants: [
-      {
-        variants: {
-          variant: "solid",
-          intent: "primary"
-        },
-        style: style({
-          vars: {
-            [hoverBackgroundColor]: vars.color["primary-700"]
-          }
-        })
-      },
-      {
-        variants: {
-          variant: "solid",
-          intent: "danger"
-        },
-        style: style({
-          vars: {
-            [hoverBackgroundColor]: vars.color["danger-200"]
-          }
-        })
-      }
-    ],
     defaultVariants: {
       size: "medium",
       variant: "solid",

package/dist/components/checkbox.css.js

@@ -21,23 +21,23 @@ const checkbox = makeComponentTheme(
         },
         selectors: {
           "&:hover:not(:has(input:disabled))": {
-            backgroundColor: vars.color["primary-700"]
+            backgroundColor: vars.colorRole.primary.solidHover
           },
           "&:has(input:checked)": {
-            backgroundColor: vars.color["primary-500"]
+            backgroundColor: vars.colorRole.primary.solid
           }
         }
       },
       atoms({
-        backgroundColor: "primary-100",
         borderRadius: 1
       }),
+      { backgroundColor: vars.colorRole.primary.subtle },
       focusable
     ]),
     icon: style({
       inlineSize: "1rem",
       blockSize: "1rem",
-      color: "white",
+      color: vars.colorRole.primary.contrast,
       transform: "scale(0)",
       selectors: {
         "input:checked ~ &": {

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,CA0ElD,CAAC"}
+{"version":3,"file":"dialog.css.d.ts","sourceRoot":"","sources":["../../src/components/dialog.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CA4ElD,CAAC"}

package/dist/components/dialog.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/dialog.css.ts", "@blockle/blocks-theme-momotaro");
 const dialog = makeComponentTheme(
@@ -16,10 +16,12 @@ const dialog = makeComponentTheme(
         boxShadow: 3
       }),
       {
+        backgroundColor: vars.colorRole.surface.raised,
+        color: vars.colorRole.text.default,
         maxHeight: "90%",
         minWidth: "300px",
         "::backdrop": {
-          backgroundColor: "rgba(0, 0, 0, 0.5)"
+          backgroundColor: vars.colorRole.overlay.default
         },
         selectors: {
           "&[open]": {

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,EAC3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAmElD,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;AAK9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAsElD,CAAC"}

package/dist/components/drawer.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, 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();
@@ -11,6 +11,8 @@ const drawer = makeComponentTheme(
         border: "none"
       }),
       {
+        backgroundColor: vars.colorRole.surface.raised,
+        color: vars.colorRole.text.default,
         selectors: {
           "&[open]": {
             transform: "translate(0, 0)",
@@ -21,6 +23,7 @@ const drawer = makeComponentTheme(
             }
           },
           "&[open]::backdrop": {
+            backgroundColor: vars.colorRole.overlay.default,
             opacity: 1,
             "@starting-style": {
               opacity: 0

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

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

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

@@ -0,0 +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"}

package/dist/components/heading.css.js

@@ -0,0 +1,24 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, vars } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/heading.css.ts", "@blockle/blocks-theme-momotaro");
+const heading = makeComponentTheme(
+  "heading",
+  {
+    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 })
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+endFileScope();
+export {
+  heading
+};

package/dist/components/helpers.css.js

@@ -10,7 +10,7 @@ const focusable = style({
   //   },
   // },
   ":focus-visible": {
-    outline: `2px solid ${vars.color["primary-300"]}`,
+    outline: `2px solid ${vars.colorRole.focusRing.color}`,
     outlineOffset: "2px"
   },
   selectors: {
@@ -20,7 +20,7 @@ const focusable = style({
       pointerEvents: "none"
     },
     "&:has(:focus-visible:not(button))": {
-      outline: `2px solid ${vars.color["primary-300"]}`,
+      outline: `2px solid ${vars.colorRole.focusRing.color}`,
       outlineOffset: "2px"
     },
     "&:has(:disabled)": {

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

package/dist/components/index.js

@@ -4,6 +4,7 @@ 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 { heading } from "./heading.css.js";
 import { icon } from "./icon.css.js";
 import { label } from "./label.css.js";
 import { link } from "./link.css.js";
@@ -14,6 +15,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 { text } from "./text.css.js";
 import { textarea } from "./textarea.css.js";
 import { textInput } from "./textInput.css.js";
 import { tooltip } from "./tooltip.css.js";
@@ -24,6 +26,7 @@ const components = {
   dialog,
   divider,
   drawer,
+  heading,
   icon,
   label,
   link,
@@ -34,6 +37,7 @@ const components = {
   slider,
   spinner,
   switch: switchTheme,
+  text,
   textarea,
   textInput,
   tooltip

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,EAGL,KAAK,qBAAqB,EAC3B,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,EAEL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAK9B,eAAO,MAAM,IAAI,EAAE,qBAAqB,CAAC,MAAM,CA8C7C,CAAC"}

package/dist/components/link.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/link.css.ts", "@blockle/blocks-theme-momotaro");
@@ -33,13 +33,13 @@ const link = makeComponentTheme("link", {
         color: "inherit",
         fontWeight: "inherit"
       }),
-      primary: atoms({
-        color: "primary-500",
-        fontWeight: "medium"
+      primary: style({
+        color: vars.colorRole.primary.foreground,
+        fontWeight: 500
       }),
-      secondary: atoms({
-        color: "secondary-500",
-        fontWeight: "medium"
+      secondary: style({
+        color: vars.colorRole.secondary.foreground,
+        fontWeight: 500
       })
     },
     underline: style({

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,CAqCpD,CAAC"}
+{"version":3,"file":"popover.css.d.ts","sourceRoot":"","sources":["../../src/components/popover.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,SAAS,CAsCpD,CAAC"}

package/dist/components/popover.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/popover.css.ts", "@blockle/blocks-theme-momotaro");
 const popover = makeComponentTheme(
@@ -7,7 +7,6 @@ const popover = makeComponentTheme(
   {
     root: style([
       atoms({
-        backgroundColor: "white",
         borderRadius: 1,
         boxShadow: 2,
         padding: 2,
@@ -15,6 +14,8 @@ const popover = makeComponentTheme(
         // Space between the popover and the anchor element
       }),
       {
+        backgroundColor: vars.colorRole.surface.raised,
+        color: vars.colorRole.text.default,
         width: "max-content",
         selectors: {
           "&:popover-open": {

package/dist/components/progress.css.js

@@ -15,13 +15,13 @@ const progress = makeComponentTheme(
   {
     root: style([
       {
-        height: 8
+        height: 8,
+        backgroundColor: vars.colorRole.surface.sunken,
+        color: vars.colorRole.primary.solid
       },
       atoms({
         inlineSize: "full",
         borderRadius: 1,
-        backgroundColor: "text-200",
-        color: "primary-500",
         overflow: "hidden"
       })
     ]),
@@ -42,8 +42,8 @@ const progress = makeComponentTheme(
           45deg,
           transparent,
           transparent 20px,
-          ${vars.color["primary-700"]} 20px,
-          ${vars.color["primary-700"]} 40px
+          ${vars.colorRole.primary.solidHover} 20px,
+          ${vars.colorRole.primary.solidHover} 40px
         )`
           },
           "(prefers-reduced-motion: no-preference)": {

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

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

package/dist/components/radio.css.js

@@ -21,23 +21,21 @@ const radio = makeComponentTheme(
           }
         },
         ":hover": {
-          backgroundColor: vars.color["primary-700"]
+          backgroundColor: vars.colorRole.primary.solidHover
         },
         selectors: {
           "&:has(input:checked):not(:hover)": {
-            backgroundColor: vars.color["primary-500"]
+            backgroundColor: vars.colorRole.primary.solid
           }
         }
       },
-      atoms({
-        backgroundColor: "primary-100"
-      }),
+      { backgroundColor: vars.colorRole.primary.subtle },
       focusable
     ]),
     icon: style({
       height: 12,
       width: 12,
-      backgroundColor: "white",
+      backgroundColor: vars.colorRole.primary.contrast,
       borderRadius: "8px",
       transform: "scale(0)",
       "@media": {

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

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

package/dist/components/select.css.js

@@ -8,24 +8,19 @@ const select = makeComponentTheme(
   {
     select: style([
       atoms({
-        color: "text-700",
         paddingInline: 3,
         paddingBlock: 1,
-        backgroundColor: "white",
         borderRadius: 2,
         boxShadow: 2
       }),
       {
         border: "none",
         outline: "none",
+        color: vars.colorRole.text.default,
+        backgroundColor: vars.colorRole.surface.raised,
         minHeight: 40,
         transitionDuration: vars.transition.fast,
         transitionProperty: "outline-color, outline-offset"
-        // ':focus-within': {
-        //   outline: '2px solid transparent',
-        //   outlineOffset: '2px',
-        //   boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`,
-        // },
       },
       focusable
     ]),
@@ -33,11 +28,11 @@ const select = makeComponentTheme(
       variant: {
         outline: style([
           atoms({
-            borderWidth: "thin",
-            borderColor: "primary-500"
+            borderWidth: "thin"
           }),
           {
-            borderStyle: "solid"
+            borderStyle: "solid",
+            borderColor: vars.colorRole.primary.solid
           }
         ]),
         solid: style({})

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

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

package/dist/components/slider.css.js

@@ -7,6 +7,7 @@ const trackBackground = createVar();
 const filledTrackBackground = createVar();
 const thumbBackground = createVar();
 const thumbActive = createVar();
+const haloColor = createVar();
 const slider = makeComponentTheme(
   "slider",
   {
@@ -31,9 +32,9 @@ const slider = makeComponentTheme(
         borderRadius: "50%",
         height: "16px",
         width: "16px",
-        boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars.color["primary-100"]}, transparent 0%)`,
+        boxShadow: `0 0 0 0px color-mix(in srgb,  ${haloColor}, transparent 0%)`,
         vars: {
-          [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars.color["primary-100"]}, transparent 20%)`
+          [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${haloColor}, transparent 20%)`
         },
         ":hover": {
           boxShadow: thumbActive
@@ -61,34 +62,36 @@ const slider = makeComponentTheme(
           inlineSize: "300px"
         })
       },
-      colorScheme: {
+      intent: {
         primary: style({
           vars: {
-            [trackBackground]: vars.color["primary-100"],
-            [filledTrackBackground]: vars.color["primary-500"],
-            [thumbBackground]: vars.color["primary-500"]
+            [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.color["primary-100"],
-            [filledTrackBackground]: vars.color["secondary-500"],
-            [thumbBackground]: vars.color["secondary-500"]
+            [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.color["background-200"],
-          [filledTrackBackground]: vars.color["background-400"],
-          [thumbBackground]: vars.color["background-400"]
+          [trackBackground]: vars.colorRole.border.default,
+          [filledTrackBackground]: vars.colorRole.text.disabled,
+          [thumbBackground]: vars.colorRole.text.disabled
         }
       })
     },
     defaultVariants: {
       size: "medium",
-      colorScheme: "primary"
+      intent: "primary"
     }
   }
 );

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,CA0DvD,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,CA2DvD,CAAC"}

package/dist/components/switch.css.js

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms, vars } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, atoms } 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");
@@ -9,10 +9,10 @@ const switchTheme = makeComponentTheme(
   {
     root: style([
       atoms({
-        borderRadius: 4,
-        backgroundColor: "text-200"
+        borderRadius: 4
       }),
       {
+        backgroundColor: vars.colorRole.border.strong,
         width: 52,
         height: 32,
         "@media": {
@@ -22,7 +22,7 @@ const switchTheme = makeComponentTheme(
         },
         selectors: {
           '&[data-checked="true"]': {
-            backgroundColor: vars.color["secondary-500"]
+            backgroundColor: vars.colorRole.secondary.solid
           }
         },
         // Scale the switch when it's `:active`
@@ -48,7 +48,8 @@ const switchTheme = makeComponentTheme(
         left: 4,
         transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
         position: "absolute",
-        backgroundColor: "white",
+        // Deliberately fixed: the thumb is white in every mode
+        backgroundColor: vars.color.white,
         selectors: {
           '&[data-checked="true"]': {
             transform: `translateX(20px) scale(${activeScaleFactor})`

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

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

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

@@ -0,0 +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"}

package/dist/components/text.css.js

@@ -0,0 +1,21 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme, vars } 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 })
+    }
+  },
+  defaultVariants: {
+    color: "default"
+  }
+});
+endFileScope();
+export {
+  text
+};

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,CAwCxD,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,CAuCxD,CAAC"}

package/dist/components/textInput.css.js

@@ -9,7 +9,7 @@ const textInput = makeComponentTheme(
     root: style([
       {
         minHeight: 40,
-        backgroundColor: "white",
+        backgroundColor: vars.colorRole.surface.raised,
         "@media": {
           "(prefers-reduced-motion: no-preference)": {
             transition: `box-shadow ${vars.transition.fast}`
@@ -20,7 +20,6 @@ const textInput = makeComponentTheme(
         display: "flex",
         paddingInline: 3,
         paddingBlock: 2,
-        backgroundColor: "white",
         borderRadius: 2,
         boxShadow: 2,
         // Space between `startSlot | children | endSlot`
@@ -30,14 +29,14 @@ const textInput = makeComponentTheme(
     ]),
     input: style([
       atoms({
-        color: "text-900",
         border: "none",
         backgroundColor: "transparent"
       }),
       {
         outline: "none",
+        color: vars.colorRole.text.default,
         "::placeholder": {
-          color: vars.color["text-600"]
+          color: vars.colorRole.text.muted
         },
         ":disabled": {}
       }

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

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

package/dist/components/textarea.css.js

@@ -9,15 +9,15 @@ const textarea = makeComponentTheme(
     input: style([
       atoms({
         paddingInline: 3,
-        color: "text-900",
         border: "none",
         backgroundColor: "transparent"
       }),
       {
         borderRadius: "inherit",
         outline: "none",
+        color: vars.colorRole.text.default,
         "::placeholder": {
-          color: vars.color["text-600"]
+          color: vars.colorRole.text.muted
         },
         ":disabled": {}
       }
@@ -27,7 +27,7 @@ const textarea = makeComponentTheme(
         overflow: "auto",
         minHeight: 96,
         maxHeight: 240,
-        backgroundColor: "white",
+        backgroundColor: vars.colorRole.surface.raised,
         "@media": {
           "(prefers-reduced-motion: no-preference)": {
             transition: `box-shadow ${vars.transition.fast}`
@@ -36,7 +36,6 @@ const textarea = makeComponentTheme(
       },
       atoms({
         paddingBlock: 2,
-        backgroundColor: "white",
         borderRadius: 2,
         boxShadow: 2
       }),

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

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

package/dist/components/tooltip.css.js

@@ -1,7 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme, atoms } from "@blockle/blocks-core";
+import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/tooltip.css.ts", "@blockle/blocks-theme-momotaro");
+const { surface, text } = vars.colorRole;
 const tooltip = makeComponentTheme(
   "tooltip",
   {
@@ -9,21 +10,23 @@ const tooltip = makeComponentTheme(
       padding: 1
     }),
     variants: {
-      colorScheme: {
+      intent: {
+        // Inverse of the page: dark on light, light on dark
         primary: style({
-          backgroundColor: "rgba(0, 0, 0, 0.8)",
-          boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.1)",
-          color: "white"
+          backgroundColor: `color-mix(in srgb, ${surface.inverse} 80%, transparent)`,
+          boxShadow: `0 0 0 1px color-mix(in srgb, ${text.inverse} 10%, transparent)`,
+          color: text.inverse
         }),
+        // Same as the page
         secondary: style({
-          backgroundColor: "rgba(255, 255, 255, 0.8)",
-          boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
-          color: "black"
+          backgroundColor: `color-mix(in srgb, ${surface.default} 80%, transparent)`,
+          boxShadow: `0 0 0 1px color-mix(in srgb, ${text.default} 10%, transparent)`,
+          color: text.default
         })
       }
     },
     defaultVariants: {
-      colorScheme: "primary"
+      intent: "primary"
     }
   }
 );

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,WAiLpB,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;AAMrE,eAAO,MAAM,MAAM,EAAE,WA6PpB,CAAC"}

package/dist/tokens.css.js

@@ -1,6 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { pixelsToRem } from "@blockle/blocks-core";
 setFileScope("src/tokens.css.ts", "@blockle/blocks-theme-momotaro");
+const focusColor = "#8660FF";
+const focusColorDark = "#A8EEF6";
 const tokens = {
   border: {
     radius: {
@@ -28,6 +30,7 @@ const tokens = {
       "800": "#3B2A82",
       "900": "#2A1B5A"
     },
+    // Intentional multihue sequence; indices are not a strict lightness ramp.
     secondary: {
       "100": "#DFFAF9",
       "200": "#B3F1EE",
@@ -83,28 +86,6 @@ const tokens = {
       "800": "#804D00",
       "900": "#4D3300"
     },
-    background: {
-      100: "#FFFFFF",
-      200: "#F5F5F5",
-      300: "#E0E0E0",
-      400: "#AEAEAE",
-      500: "#7A7A7A",
-      600: "#4C4C4C",
-      700: "#2E2E2E",
-      800: "#1A1A1A",
-      900: "#0D0D0D"
-    },
-    text: {
-      100: "#FFFFFF",
-      200: "#F5F5F5",
-      300: "#E0E0E0",
-      400: "#AEAEAE",
-      500: "#7A7A7A",
-      600: "#4C4C4C",
-      700: "#2E2E2E",
-      800: "#1A1A1A",
-      900: "#0D0D0D"
-    },
     neutral: {
       100: "#F7F7F7",
       200: "#E1E1E1",
@@ -117,15 +98,112 @@ const tokens = {
       900: "#1A1A1A"
     }
   },
-  shadow: {
-    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"
+  // Dark values are a proposal, shown for review in the PR.
+  colorRoles: {
+    text: {
+      default: { light: "neutral-900", dark: "neutral-100" },
+      muted: { light: "neutral-700", dark: "neutral-400" },
+      disabled: { light: "neutral-400", dark: "neutral-600" },
+      inverse: { light: "white", dark: "neutral-900" }
+    },
+    surface: {
+      default: { light: "white", dark: "neutral-900" },
+      raised: { light: "white", dark: "neutral-800" },
+      sunken: { light: "neutral-100", dark: "#0D0D0D" },
+      inverse: { light: "neutral-900", dark: "neutral-100" }
+    },
+    border: {
+      default: { light: "neutral-200", dark: "neutral-800" },
+      strong: { light: "neutral-400", dark: "neutral-700" }
+    },
+    focusRing: {
+      color: { light: focusColor, dark: focusColorDark },
+      boxShadow: {
+        light: `0 0 1px 2px ${focusColor}`,
+        dark: `0 0 1px 2px ${focusColorDark}`
+      }
+    },
+    overlay: {
+      default: { light: "rgba(13, 13, 13, 0.4)", dark: "rgba(0, 0, 0, 0.6)" }
+    },
+    shadow: {
+      1: {
+        light: "0px 4px 8px rgba(0, 0, 0, 0.08)",
+        dark: "0px 4px 8px rgba(0, 0, 0, 0.4)"
+      },
+      2: {
+        light: "0px 8px 16px rgba(0, 0, 0, 0.08)",
+        dark: "0px 8px 16px rgba(0, 0, 0, 0.45)"
+      },
+      3: {
+        light: "0px 16px 24px rgba(0, 0, 0, 0.08)",
+        dark: "0px 16px 24px rgba(0, 0, 0, 0.5)"
+      },
+      4: {
+        light: "0px 24px 32px rgba(0, 0, 0, 0.08)",
+        dark: "0px 24px 32px rgba(0, 0, 0, 0.55)"
+      },
+      5: {
+        light: "0px 32px 40px rgba(0, 0, 0, 0.08)",
+        dark: "0px 32px 40px rgba(0, 0, 0, 0.6)"
+      }
+    },
+    primary: {
+      solid: { light: "primary-600", dark: "primary-300" },
+      solidHover: { light: "primary-700", dark: "primary-400" },
+      subtle: { light: "primary-100", dark: "primary-900" },
+      contrast: { light: "white", dark: "neutral-900" },
+      foreground: { light: "primary-700", dark: "primary-300" },
+      border: { light: "primary-300", dark: "primary-700" }
+    },
+    secondary: {
+      solid: { light: "secondary-500", dark: "secondary-500" },
+      solidHover: { light: "secondary-600", dark: "secondary-400" },
+      subtle: { light: "secondary-100", dark: "#0F3A4D" },
+      contrast: { light: "neutral-900", dark: "neutral-900" },
+      foreground: { light: "#126A94", dark: "secondary-400" },
+      border: { light: "secondary-300", dark: "secondary-800" }
+    },
+    neutral: {
+      solid: { light: "neutral-800", dark: "neutral-200" },
+      solidHover: { light: "neutral-900", dark: "neutral-300" },
+      subtle: { light: "neutral-100", dark: "neutral-800" },
+      contrast: { light: "white", dark: "neutral-900" },
+      foreground: { light: "neutral-800", dark: "neutral-300" },
+      border: { light: "neutral-300", dark: "neutral-700" }
+    },
+    danger: {
+      solid: { light: "danger-700", dark: "danger-400" },
+      solidHover: { light: "danger-800", dark: "danger-300" },
+      subtle: { light: "danger-100", dark: "danger-900" },
+      contrast: { light: "white", dark: "neutral-900" },
+      foreground: { light: "danger-700", dark: "danger-300" },
+      border: { light: "danger-300", dark: "danger-700" }
+    },
+    success: {
+      solid: { light: "success-800", dark: "success-500" },
+      solidHover: { light: "success-900", dark: "success-400" },
+      subtle: { light: "success-100", dark: "success-900" },
+      contrast: { light: "white", dark: "neutral-900" },
+      foreground: { light: "success-800", dark: "success-400" },
+      border: { light: "success-300", dark: "success-700" }
+    },
+    info: {
+      solid: { light: "info-700", dark: "info-400" },
+      solidHover: { light: "info-800", dark: "info-300" },
+      subtle: { light: "info-100", dark: "info-900" },
+      contrast: { light: "white", dark: "neutral-900" },
+      foreground: { light: "info-700", dark: "info-300" },
+      border: { light: "info-300", dark: "info-700" }
+    },
+    warning: {
+      solid: { light: "warning-500", dark: "warning-500" },
+      solidHover: { light: "warning-600", dark: "warning-400" },
+      subtle: { light: "warning-100", dark: "warning-900" },
+      contrast: { light: "neutral-900", dark: "neutral-900" },
+      foreground: { light: "warning-800", dark: "warning-400" },
+      border: { light: "warning-300", dark: "warning-700" }
+    }
   },
   spacing: {
     1: "4px",
@@ -146,7 +224,7 @@ const tokens = {
     fontFamily: {
       body: '"Rubik", sans-serif',
       heading: '"Rubik", sans-serif',
-      mono: '"Rubik", monospace'
+      mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
     },
     fontSize: {
       xsmall: pixelsToRem(12),
@@ -164,12 +242,10 @@ const tokens = {
       bold: 800
     },
     lineHeight: {
-      xsmall: pixelsToRem(16),
-      small: pixelsToRem(20),
-      medium: pixelsToRem(24),
-      large: pixelsToRem(28),
-      xlarge: pixelsToRem(32),
-      display: 1.1
+      compact: 1.1,
+      snug: 1.3,
+      normal: 1.5,
+      relaxed: 1.7
     },
     letterSpacing: {
       tight: "-0.02em",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-theme-momotaro",
-  "version": "6.3.0",
+  "version": "7.0.0",
   "description": "Momotaro theme for Blocks",
   "type": "module",
   "sideEffects": false,
@@ -34,7 +34,7 @@
     "@vanilla-extract/css": "^1.18.0"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": ">=1.3.x",
+    "@blockle/blocks-core": ">=3.0.x",
     "@vanilla-extract/css": "^1.18.0"
   },
   "publishConfig": {