@blockle/blocks 0.9.1 → 0.10.0

package/dist/styles/themes/momotaro/components/slider.css.mjs

@@ -0,0 +1,66 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar } from "@vanilla-extract/css";
+import { style } from "../../../lib/css/style/style.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+import { focusable } from "./helpers.css.mjs";
+setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
+const trackBackground = createVar("trackBackground");
+const filledTrackBackground = createVar("filledTrackBackground");
+const thumbBackground = createVar("thumbBackground");
+const slider = makeComponentTheme("slider", {
+  base: style({
+    blockSize: "20px"
+  }),
+  track: style({
+    blockSize: "4px",
+    backgroundColor: trackBackground,
+    borderRadius: "small"
+  }),
+  filledTrack: style({
+    backgroundColor: filledTrackBackground
+  }),
+  thumb: style([{
+    backgroundColor: thumbBackground,
+    borderRadius: "50%",
+    height: "16px",
+    width: "16px"
+  }, focusable]),
+  variants: {
+    size: {
+      small: style({
+        inlineSize: "100px"
+      }),
+      medium: style({
+        inlineSize: "200px"
+      }),
+      large: style({
+        inlineSize: "300px"
+      })
+    },
+    colorScheme: {
+      primary: style({
+        vars: {
+          [trackBackground]: vars.color.primaryLight,
+          [filledTrackBackground]: vars.color.primary,
+          [thumbBackground]: vars.color.primary
+        }
+      }),
+      secondary: style({
+        vars: {
+          [trackBackground]: vars.color.primaryLight,
+          [filledTrackBackground]: vars.color.secondary,
+          [thumbBackground]: vars.color.secondary
+        }
+      })
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    colorScheme: "primary"
+  }
+});
+endFileScope();
+export {
+  slider
+};

package/dist/styles/themes/momotaro/components/spinner.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
 const spinAnimation = css.keyframes({
   "0%": {
     transform: "rotate(0deg)"

package/dist/styles/themes/momotaro/components/spinner.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { keyframes, style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-setFileScope("src/themes/momotaro/components/spinner.css.ts", "blocks");
+setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
 const spinAnimation = keyframes({
   "0%": {
     transform: "rotate(0deg)"

package/dist/styles/themes/momotaro/components/switch.css.cjs

@@ -5,7 +5,7 @@ const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
 const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/switch.css.ts", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
 const activeScaleFactor = css.createVar("activeScaleFactor");
 const switchTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("switch", {
   base: styles_lib_css_style_style_cjs.style([{

package/dist/styles/themes/momotaro/components/switch.css.mjs

@@ -4,7 +4,7 @@ import { style } from "../../../lib/css/style/style.mjs";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 import { focusable } from "./helpers.css.mjs";
-setFileScope("src/themes/momotaro/components/switch.css.ts", "blocks");
+setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
 const activeScaleFactor = createVar("activeScaleFactor");
 const switchTheme = makeComponentTheme("switch", {
   base: style([{

package/dist/styles/themes/momotaro/momotaro.css.cjs

@@ -3,7 +3,7 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const styles_lib_theme_makeTheme_cjs = require("../../lib/theme/makeTheme.cjs");
 const styles_themes_momotaro_components_index_cjs = require("./components/index.cjs");
 const styles_themes_momotaro_tokens_css_cjs = require("./tokens.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts", "blocks");
+fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts", "@blockle/blocks");
 const momotaro = styles_lib_theme_makeTheme_cjs.makeTheme({
   name: "momotaro",
   tokens: styles_themes_momotaro_tokens_css_cjs.tokens,

package/dist/styles/themes/momotaro/momotaro.css.mjs

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeTheme } from "../../lib/theme/makeTheme.mjs";
 import { components } from "./components/index.mjs";
 import { tokens } from "./tokens.css.mjs";
-setFileScope("src/themes/momotaro/momotaro.css.ts", "blocks");
+setFileScope("src/themes/momotaro/momotaro.css.ts", "@blockle/blocks");
 const momotaro = makeTheme({
   name: "momotaro",
   tokens,

package/dist/styles/themes/momotaro/tokens.css.cjs

@@ -1,6 +1,6 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-fileScope.setFileScope("src/themes/momotaro/tokens.css.ts", "blocks");
+fileScope.setFileScope("src/themes/momotaro/tokens.css.ts", "@blockle/blocks");
 const tokens = {
   border: {
     radius: {
@@ -22,9 +22,9 @@ const tokens = {
     primaryLight: "#E4DFFF",
     primary: "#7265E3",
     primaryDark: "#4D3CAB",
-    secondaryLight: "#7265E3",
+    secondaryLight: "#7CF5CD",
     secondary: "#7FE3F0",
-    secondaryDark: "#4D3CAB",
+    secondaryDark: "#68C6EF",
     text: "#2D3142",
     textLight: "#9C9EB9",
     textDark: "#4C5980",

package/dist/styles/themes/momotaro/tokens.css.mjs

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-setFileScope("src/themes/momotaro/tokens.css.ts", "blocks");
+setFileScope("src/themes/momotaro/tokens.css.ts", "@blockle/blocks");
 const tokens = {
   border: {
     radius: {
@@ -21,9 +21,9 @@ const tokens = {
     primaryLight: "#E4DFFF",
     primary: "#7265E3",
     primaryDark: "#4D3CAB",
-    secondaryLight: "#7265E3",
+    secondaryLight: "#7CF5CD",
     secondary: "#7FE3F0",
-    secondaryDark: "#4D3CAB",
+    secondaryDark: "#68C6EF",
     text: "#2D3142",
     textLight: "#9C9EB9",
     textDark: "#4C5980",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -59,7 +59,7 @@
     "string-width": "^4.2.2"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/css": "^1.14.1",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/sprinkles": "^1.6.1",
     "react": "^18.2.0",
@@ -67,10 +67,10 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
-    "@crackle/cli": "^0.13.0",
-    "@crackle/core": "^0.31.0",
+    "@crackle/cli": "^0.15.2",
+    "@crackle/core": "^0.33.1",
     "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-coverage": "^1.0.0",
+    "@storybook/addon-coverage": "^1.0.1",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -80,30 +80,30 @@
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
-    "@vanilla-extract/vite-plugin": "^3.9.3",
-    "@vitest/coverage-v8": "^1.2.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.60",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@vanilla-extract/vite-plugin": "^4.0.4",
+    "@vitest/coverage-v8": "^1.3.1",
     "autoprefixer": "^10.4.17",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-unicorn": "^50.0.1",
-    "jsdom": "^23.2.0",
-    "prettier": "^3.2.4",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-unicorn": "^51.0.1",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
     "storybook": "^7.6.17",
     "typescript": "^5.3.3",
-    "vitest": "^1.2.1"
+    "vitest": "^1.3.1"
   },
   "packageManager": "yarn@1.22.19"
 }