Merge pull request #156 from digital-go-jp/update-v2-20250123

Update v2 (2025/01/23)
digital-go-jp · Jan 23, 2025 · 67151e3 · 67151e3
2 parents e4896e0 + c723f2a
commit 67151e3
Show file tree

Hide file tree

Showing 21 changed files with 1,573 additions and 1,078 deletions.
diff --git a/.storybook/globals.css b/.storybook/globals.css
@@ -6,6 +6,15 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    scrollbar-gutter: stable;
+  }
+
+  :root:has(dialog[open]) {
+    overflow: clip;
+    scrollbar-gutter: auto;
+  }
+
   body {
     @apply font-sans text-std-17N-170 text-solid-gray-900;
   }

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    '@storybook/addon-storysource',
   ],
   framework: {
     name: '@storybook/react-vite',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digital-go-jp/design-system-example-components",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "type": "module",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -39,34 +39,35 @@
     "storybook:test": "test-storybook"
   },
   "dependencies": {
-    "@digital-go-jp/tailwind-theme-plugin": "^0.2.2",
+    "@digital-go-jp/tailwind-theme-plugin": "^0.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@markuplint/jsx-parser": "^4.7.13",
-    "@markuplint/react-spec": "^4.5.11",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
+    "@markuplint/jsx-parser": "^4.7.14",
+    "@markuplint/react-spec": "^4.5.14",
+    "@storybook/addon-a11y": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/addon-storysource": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-vite": "^8.5.0",
+    "@storybook/test": "^8.5.0",
     "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.20",
-    "markuplint": "^4.11.3",
-    "postcss": "^8.4.49",
-    "storybook": "^8.4.7",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.5"
+    "markuplint": "^4.11.4",
+    "postcss": "^8.5.1",
+    "storybook": "^8.5.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11"
   },
   "engines": {
     "node": ">=18"

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -44,7 +44,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
       htmlFor={id}
     >
       <span
-        className={`flex items-center justify-center shrink-0 ${checkboxWrapperSizeStyle[size]}`}
+        className={`
+          flex items-center justify-center shrink-0 rounded-[calc(1/8*100%)] ${checkboxWrapperSizeStyle[size]}
+        has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420 forced-colors:has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-[CanvasText]
+        `}
       >
         <input
           className={`
@@ -53,9 +56,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
             before:hidden before:size-3.5 before:bg-white before:[clip-path:path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')]
             checked:before:block
             ${checkboxSizeStyle[size]}
-            ${!isError
-              ? 'border-solid-gray-600 hover:border-black checked:border-blue-900 checked:bg-blue-900 checked:hover:border-blue-1100 checked:hover:bg-blue-1100'
-              : 'border-error-1 hover:border-red-1000 checked:bg-error-1 checked:hover:bg-red-1000'
+            ${
+              !isError
+                ? 'border-solid-gray-600 hover:border-black checked:border-blue-900 checked:bg-blue-900 checked:hover:border-blue-1100 checked:hover:bg-blue-1100'
+                : 'border-error-1 hover:border-red-1000 checked:bg-error-1 checked:hover:bg-red-1000'
             }
             aria-disabled:!border-solid-gray-300 aria-disabled:!bg-solid-gray-50 aria-disabled:checked:!bg-solid-gray-300 aria-disabled:before:border-solid-gray-50
             forced-colors:checked:!bg-[CanvasText] forced-colors:before:!bg-[Canvas] forced-colors:aria-disabled:!border-[GrayText] forced-colors:aria-disabled:checked:!bg-[GrayText]