@blockle/blocks 0.8.5 → 0.8.7

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

@@ -1,6 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { keyframes, style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/progress.css.ts?used", "blocks");
 const indeterminateAnimation = keyframes({
@@ -12,15 +13,15 @@ const indeterminateAnimation = keyframes({
   }
 }, "indeterminateAnimation");
 const progress = makeComponentTheme("progress", {
-  container: style([{
-    height: 6
+  base: style([{
+    height: 8
   }, atoms({
     width: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
     color: "primary",
     overflow: "hidden"
-  })], "progress_container"),
+  })], "progress_base"),
   bar: style({
     borderRadius: "inherit",
     "@media": {
@@ -31,10 +32,19 @@ const progress = makeComponentTheme("progress", {
   }, "progress_bar"),
   variants: {
     indeterminate: style({
-      animation: `${indeterminateAnimation} 10s ease-in-out infinite`,
       "@media": {
+        // For reduce motion we show a striped pattern instead of animating
+        "(prefers-reduced-motion: reduce)": {
+          backgroundImage: `repeating-linear-gradient(
+            45deg,
+            transparent,
+            transparent 20px,
+            ${vars.color.primaryDark} 20px,
+            ${vars.color.primaryDark} 40px
+          )`
+        },
         "(prefers-reduced-motion: no-preference)": {
-          animationDuration: "3s"
+          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
         }
       }
     }, "progress_variants_indeterminate")

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

@@ -0,0 +1,58 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+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?used", "blocks");
+const activeScaleFactor = css.createVar("activeScaleFactor");
+const switchTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("switch", {
+  base: styles_lib_css_style_style_cjs.style([{
+    width: 52,
+    height: 32,
+    borderRadius: "xlarge",
+    backgroundColor: "textLight",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "background-color 120ms linear"
+      }
+    },
+    selectors: {
+      '&[data-checked="true"]': {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.secondary
+      }
+    },
+    // Scale the switch when it's `:active`
+    vars: {
+      [activeScaleFactor]: "1"
+    },
+    ":active": {
+      vars: {
+        [activeScaleFactor]: "0.96"
+      }
+    }
+  }, styles_themes_momotaro_components_helpers_css_cjs.focusable]),
+  slider: styles_lib_css_style_style_cjs.style({
+    width: 24,
+    height: 24,
+    top: 4,
+    left: 4,
+    transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+    position: "absolute",
+    backgroundColor: "white",
+    borderRadius: "xlarge",
+    selectors: {
+      '&[data-checked="true"]': {
+        transform: `translateX(20px) scale(${activeScaleFactor})`
+      }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 120ms ease-out"
+      }
+    }
+  })
+});
+fileScope.endFileScope();
+exports.switchTheme = switchTheme;

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

@@ -0,0 +1,59 @@
+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/switch.css.ts?used", "blocks");
+const activeScaleFactor = createVar("activeScaleFactor");
+const switchTheme = makeComponentTheme("switch", {
+  base: style([{
+    width: 52,
+    height: 32,
+    borderRadius: "xlarge",
+    backgroundColor: "textLight",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "background-color 120ms linear"
+      }
+    },
+    selectors: {
+      '&[data-checked="true"]': {
+        backgroundColor: vars.color.secondary
+      }
+    },
+    // Scale the switch when it's `:active`
+    vars: {
+      [activeScaleFactor]: "1"
+    },
+    ":active": {
+      vars: {
+        [activeScaleFactor]: "0.96"
+      }
+    }
+  }, focusable]),
+  slider: style({
+    width: 24,
+    height: 24,
+    top: 4,
+    left: 4,
+    transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+    position: "absolute",
+    backgroundColor: "white",
+    borderRadius: "xlarge",
+    selectors: {
+      '&[data-checked="true"]': {
+        transform: `translateX(20px) scale(${activeScaleFactor})`
+      }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 120ms ease-out"
+      }
+    }
+  })
+});
+endFileScope();
+export {
+  switchTheme
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -60,26 +60,27 @@
     "@changesets/cli": "^2.26.2",
     "@crackle/cli": "^0.12.4",
     "@crackle/core": "^0.28.0",
-    "@storybook/addon-a11y": "^7.5.2",
+    "@storybook/addon-a11y": "^7.5.3",
     "@storybook/addon-coverage": "^0.0.9",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-vite": "^7.5.2",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.0",
     "@types/react": "^18.2.34",
     "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "@vanilla-extract/vite-plugin": "^3.8.2",
     "@vitest/coverage-v8": "^0.34.6",
+    "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -90,7 +91,7 @@
     "jsdom": "^22.1.0",
     "prettier": "^3.0.3",
     "prop-types": "^15.8.1",
-    "storybook": "^7.5.2",
+    "storybook": "^7.5.3",
     "typescript": "^5.2.2",
     "vitest": "^0.34.6"
   },