Merge pull request #143 from digital-go-jp/update-v2-20241223

Update v2 (2024/12/23)

README.md

@@ -8,13 +8,9 @@
 
 このリポジトリでは全てのコンポーネントは実装していません。  
 （定期的にサンプルは追加予定です。）  
-未実装のコンポーネントについてはスクラッチで書かずに、以下のようなヘッドレスUIライブラリの利用を推奨します。
+未実装のコンポーネントについてはスクラッチで書かずに、ヘッドレスUIライブラリの利用を推奨します。
 
-- [React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
-- [Radix UI](https://www.radix-ui.com/)
-- [Headless UI](https://headlessui.com/)
-
-スクラッチで書く場合は、[ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/)の[Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)を参考にして実装を進める事を推奨します。
+スクラッチで書く必要がある場合は、[ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/)の[Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)を参考にして実装を進める事を推奨します。
 
 ## サンプルコード
 

package.json

@@ -39,34 +39,34 @@
     "storybook:test": "test-storybook"
   },
   "dependencies": {
-    "@digital-go-jp/tailwind-theme-plugin": "^0.2.1",
+    "@digital-go-jp/tailwind-theme-plugin": "^0.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.15"
+    "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.5",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-vite": "^8.4.5",
-    "@storybook/test": "^8.4.5",
+    "@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",
     "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^22.9.1",
+    "@types/node": "^22.10.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "autoprefixer": "^10.4.20",
     "markuplint": "^4.11.3",
     "postcss": "^8.4.49",
-    "storybook": "^8.4.5",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.11"
+    "storybook": "^8.4.7",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5"
   },
   "engines": {
     "node": ">=18"

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -46,7 +46,7 @@ export const breadcrumbLinkStyle = `
   text-blue-1000 text-oln-16N-100 underline underline-offset-[calc(3/16*1rem)]
   hover:text-blue-900 hover:decoration-[calc(3/16*1rem)]
   active:text-orange-700 active:decoration-1
-  focus-visible:rounded focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:text-blue-1000 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+  focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:text-blue-1000 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
 `;
 
 export type BreadcrumbLinkProps = {

src/components/Button/Button.tsx

@@ -54,10 +54,10 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
 };
 
 export const buttonSizeStyle: { [key in ButtonSize]: string } = {
-  lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-lg px-4 py-3 text-oln-16B-100',
-  md: 'min-w-24 min-h-12 rounded-lg px-4 py-2 text-oln-16B-100',
-  sm: 'relative min-w-20 min-h-9 rounded-md px-3 py-0.5 text-oln-16B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
-  xs: 'relative min-w-18 min-h-7 rounded px-2 py-0.5 text-oln-14B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
+  lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-8 px-4 py-3 text-oln-16B-100',
+  md: 'min-w-24 min-h-12 rounded-8 px-4 py-2 text-oln-16B-100',
+  sm: 'relative min-w-20 min-h-9 rounded-6 px-3 py-0.5 text-oln-16B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
+  xs: 'relative min-w-18 min-h-7 rounded-4 px-2 py-0.5 text-oln-14B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
 };
 
 export type ButtonProps = {

src/components/EmergencyBanner/parts/Button.tsx

@@ -8,7 +8,7 @@ export const EmergencyBannerButton = (props: Props) => {
   return (
     <div
       className={`
-        flex items-center justify-center mx-auto mt-6 mb-1 w-fit min-w-64 p-4 bg-error-1 text-white text-oln-16B-100 rounded-lg
+        flex items-center justify-center mx-auto mt-6 mb-1 w-fit min-w-64 p-4 bg-error-1 text-white text-oln-16B-100 rounded-8
         outline outline-2 outline-error-1 outline-offset-[calc(2/16*1rem)]
         desktop:outline-4 desktop:outline-offset-[calc(4/16*1rem)] desktop:mt-8 desktop:mb-2
         ${className ?? ''}

src/components/HamburgerMenuButton/HamburgerMenuButton.tsx

@@ -9,7 +9,7 @@ export const HamburgerMenuButton = forwardRef<HTMLButtonElement, HamburgerMenuBu
     return (
       <button
         className={`
-        flex w-fit items-center gap-x-1.5 text-oln-16N-100 rounded touch-manipulation
+        flex w-fit items-center gap-x-1.5 text-oln-16N-100 rounded-4 touch-manipulation
         hover:bg-solid-gray-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
         focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
         ${className ?? ''}

src/components/Input/Input.tsx

@@ -22,7 +22,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   return (
     <input
       className={`
-        max-w-full rounded-lg border bg-white px-4 py-3 text-oln-16N-100 text-solid-gray-800
+        max-w-full rounded-8 border bg-white px-4 py-3 text-oln-16N-100 text-solid-gray-800
         ${InputBlockSizeStyle[blockSize]}
         ${isError ? 'border-error-1' : 'border-solid-gray-900'}
         focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300

src/components/LanguageSelector/LanguageSelector.stories.tsx

@@ -251,7 +251,7 @@ export const WithoutLabel: Story = {
           <LanguageSelectorButton
             aria-controls={`${sampleId}-menu`}
             aria-expanded={isMenuOpen}
-            className='!px-0 !gap-0 !rounded hover:outline hover:outline-black'
+            className='!px-0 !gap-0 !rounded-4 hover:outline hover:outline-black'
             onClick={() => setIsMenuOpen(!isMenuOpen)}
             ref={buttonRef}
           >
@@ -520,7 +520,7 @@ export const Responsive: Story = {
           <LanguageSelectorButton
             aria-controls={`${sampleId}-menu`}
             aria-expanded={isMenuOpen}
-            className='!px-0 !gap-0 !rounded hover:outline hover:outline-black desktop:!px-2 desktop:!gap-1 desktop:!rounded-lg desktop:hover:[&:not(:focus-visible)]:outline-0'
+            className='!px-0 !gap-0 !rounded-4 hover:outline hover:outline-black desktop:!px-2 desktop:!gap-1 desktop:!rounded-8 desktop:hover:[&:not(:focus-visible)]:outline-0'
             onClick={() => setIsMenuOpen(!isMenuOpen)}
             ref={buttonRef}
           >
@@ -586,7 +586,7 @@ export const OnlyUI = {
         </LanguageSelector>
 
         <LanguageSelector>
-          <LanguageSelectorButton className='!px-0 !py-0 !gap-0 !rounded hover:outline hover:outline-black'>
+          <LanguageSelectorButton className='!px-0 !py-0 !gap-0 !rounded-4 hover:outline hover:outline-black'>
             <LanguageSelectorGlobeWithLabelIcon />
             <LanguageSelectorArrowIcon className='mt-0.5 rotate-180' />
           </LanguageSelectorButton>

src/components/LanguageSelector/parts/Button.tsx

@@ -9,7 +9,7 @@ export const LanguageSelectorButton = forwardRef<HTMLButtonElement, LanguageSele
     return (
       <button
         className={`
-          flex w-fit gap-1 items-center px-2 min-h-[calc(44/16*1rem)] text-oln-16N-100 text-solid-gray-800 rounded-lg
+          flex w-fit gap-1 items-center px-2 min-h-[calc(44/16*1rem)] text-oln-16N-100 text-solid-gray-800 rounded-8
           hover:bg-solid-gray-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
           focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300 focus-visible:bg-yellow-300
           ${className ?? ''}

src/components/LanguageSelector/parts/Menu.tsx

@@ -11,7 +11,7 @@ export const LanguageSelectorMenu = forwardRef<HTMLUListElement, LanguageSelecto
     return (
       <ul
         className={`
-        min-w-fit w-auto py-2 border border-solid-gray-420 bg-white shadow-1 rounded-lg
+        min-w-fit w-auto py-2 border border-solid-gray-420 bg-white shadow-1 rounded-8
         has-[>:nth-child(7)]:rounded-r-none
         ${isCondensed ? 'max-h-[calc((32*6.5+16)/16*1rem)]' : 'max-h-[calc((44*6.5+16)/16*1rem)]'}
         ${className ?? ''}

src/components/Link/Link.tsx

@@ -5,7 +5,7 @@ export const linkDefaultStyle = 'text-blue-1000 underline underline-offset-[calc
 export const linkVisitedStyle = 'visited:text-magenta-900';
 export const linkHoverStyle = 'hover:text-blue-1000 hover:decoration-[calc(3/16*1rem)]';
 export const linkFocusStyle =
-  'focus-visible:rounded focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:text-blue-1000 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300';
+  'focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:text-blue-1000 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300';
 export const linkActiveStyle = 'active:text-orange-700 active:decoration-1';
 
 export const linkStyle = `

src/components/NotificationBanner/parts/Close.tsx

@@ -10,7 +10,7 @@ export const NotificationBannerClose = (props: Props) => {
   return (
     <button
       className={`
-        inline-flex items-center gap-0.5 -mt-2 -mr-3 text-solid-gray-900 border border-transparent rounded-lg
+        inline-flex items-center gap-0.5 -mt-2 -mr-3 text-solid-gray-900 border border-transparent rounded-8
         desktop:px-2 desktop:py-0.5 desktop:mt-0 desktop:mr-0
         hover:border-solid-gray-900
         focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300 focus-visible:bg-yellow-300 focus-visible:border-transparent

src/components/NotificationBanner/styles.ts

@@ -1,7 +1,7 @@
 import type { NotifiationBannerStyle, NotifiationBannerType } from './types';
 
 export const bannerStyleClasses: { [key in NotifiationBannerStyle]: string } = {
-  standard: ' border-[3px] rounded-xl',
+  standard: ' border-[3px] rounded-12',
   'color-chip':
     'border-2 !pl-6 shadow-[inset_8px_0_0_0_var(--color-chip-color)] desktop:!pl-10 desktop:shadow-[inset_16px_0_0_0_var(--color-chip-color)]',
 };

src/components/Select/Select.tsx

@@ -33,7 +33,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) =>
     <span className='relative'>
       <select
         className={`
-          w-full appearance-none border rounded-lg bg-white pl-4 pr-10 py-[calc(11/16*1rem)] text-oln-16N-100 text-solid-gray-800
+          w-full appearance-none border rounded-8 bg-white pl-4 pr-10 py-[calc(11/16*1rem)] text-oln-16N-100 text-solid-gray-800
            ${SelectBlockSizeStyle[blockSize]}
           ${isError ? 'border-error-1' : 'border-solid-gray-900'}
           focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300

src/components/Textarea/Textarea.tsx

@@ -10,7 +10,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, r
   return (
     <textarea
       className={`
-        rounded-lg max-w-full border bg-white p-4 text-std-16N-170 text-solid-gray-800
+        rounded-8 max-w-full border bg-white p-4 text-std-16N-170 text-solid-gray-800
         ${isError ? 'border-error-1' : 'border-solid-gray-800'}
         focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
         aria-disabled:border-solid-gray-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:pointer-events-none aria-disabled:forced-colors:text-[GrayText] aria-disabled:forced-colors:border-[GrayText]

src/components/UtilityLink/UtilityLink.tsx

@@ -3,7 +3,7 @@ import { Slot } from '../Slot';
 
 export const utilityLinkStyle = `!text-solid-gray-800 text-dns-16N-130 underline underline-offset-[calc(3/16*1rem)]
   hover:decoration-[calc(3/16*1rem)]
-  focus-visible:rounded focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:text-blue-1000 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300`;
+  focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:text-blue-1000 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300`;
 
 export type UtilityLinkProps = {
   className?: string;

src/components/v1/Dialog/Dialog.tsx

@@ -29,7 +29,7 @@ export const DialogBody = (props: DialogBodyProps) => {
   const { children, className, ...rest } = props;
   return (
     <div
-      className={`flex flex-col items-center gap-4 rounded-xl border border-solid-gray-200 bg-white p-6 desktop:p-10 ${
+      className={`flex flex-col items-center gap-4 rounded-12 border border-solid-gray-200 bg-white p-6 desktop:p-10 ${
         className ?? ''
       }`}
       onClick={(e) => {

src/docs/introduction.stories.tsx

@@ -56,27 +56,10 @@ export const Introduction: Story = {
           HTMLネイティブの機能が利用可能になった際には、既存の実装を最新の標準に置き換えていきます。この取り組みにより、一部のブラウザではまだ実装されていない最新機能を試験的に導入することもあります。
         </p>
         <p className='my-4'>
-          HTMLネイティブ機能だけでは実現できないコンポーネントに関しては、以下のようなヘッドレスUIライブラリの使用を推奨します。
+          HTMLネイティブ機能だけでは実現できないコンポーネントに関しては、ヘッドレスUIライブラリの使用を推奨します。
         </p>
-        <Ul className='my-4 md:my-6 space-y-2'>
-          <li>
-            <Link href='https://react-spectrum.adobe.com/react-aria/index.html' target='_blank'>
-              React Aria
-            </Link>
-          </li>
-          <li>
-            <Link href='https://www.radix-ui.com/' target='_blank'>
-              Radix UI
-            </Link>
-          </li>
-          <li>
-            <Link href='https://headlessui.com/' target='_blank'>
-              Headless UI
-            </Link>
-          </li>
-        </Ul>
         <p className='my-4'>
-          一部のサンプルコードでは、Reactの機能を使った実装も提供していますので、実装の参考にしてください。キーボード操作などの挙動については
+          一部のサンプルコードでは、Reactの機能を使った実装も提供していますので、実装の参考にしてください。WAI-ARIAやキーボード操作などの挙動については
           <Link href='ARIA Authoring Practices Guide (APG)' target='_blank'>
             ARIA Authoring Practices Guide (APG)
           </Link>

src/tokens/Elevation.tsx

@@ -6,35 +6,35 @@ export const Elevation = () => {
       </div>
       <div className='flex flex-wrap gap-12'>
         <div className='flex flex-col gap-4'>
-          <div className={'size-48 rounded-xl shadow-1'}></div>
+          <div className={'size-48 rounded-12 shadow-1'}></div>
           <span className='text-std-16B-170 self-center'>Style 1</span>
         </div>
         <div className='flex flex-col gap-4'>
-          <div className={'size-48 rounded-xl shadow-2'}></div>
+          <div className={'size-48 rounded-12 shadow-2'}></div>
           <span className='text-std-16B-170 self-center'>Style 2</span>
         </div>
         <div className='flex flex-col gap-4'>
-          <div className={'size-48 rounded-xl shadow-3'}></div>
+          <div className={'size-48 rounded-12 shadow-3'}></div>
           <span className='text-std-16B-170 self-center'>Style 3</span>
         </div>
         <div className='flex flex-col gap-4'>
-          <div className={'size-48 rounded-xl shadow-4'}></div>
+          <div className={'size-48 rounded-12 shadow-4'}></div>
           <span className='text-std-16B-170 self-center'>Style 4</span>
         </div>
         <div className='flex flex-col gap-4'>
-          <div className={'size-48 rounded-xl shadow-5'}></div>
+          <div className={'size-48 rounded-12 shadow-5'}></div>
           <span className='text-std-16B-170 self-center'>Style 5</span>
         </div>
         <div className='flex flex-col gap-4'>
-          <div className={'size-48 rounded-xl shadow-6'}></div>
+          <div className={'size-48 rounded-12 shadow-6'}></div>
           <span className='text-std-16B-170 self-center'>Style 6</span>
         </div>
         <div className='flex flex-col gap-4'>
-          <div className={'size-48 rounded-xl shadow-7'}></div>
+          <div className={'size-48 rounded-12 shadow-7'}></div>
           <span className='text-std-16B-170 self-center'>Style 7</span>
         </div>
         <div className='flex flex-col gap-4'>
-          <div className={'size-48 rounded-xl shadow-8'}></div>
+          <div className={'size-48 rounded-12 shadow-8'}></div>
           <span className='text-std-16B-170 self-center'>Style 8</span>
         </div>
       </div>

src/tokens/Radius.tsx

@@ -6,23 +6,35 @@ export const Radius = () => {
       </div>
       <div className='flex flex-wrap gap-8'>
         <div className='flex flex-col gap-2'>
-          <div className={'size-14 bg-solid-gray-400'}></div>
+          <div className={'size-32 bg-solid-gray-400'}></div>
           <span className='text-dns-14N-130'>none</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'size-14 rounded-8 bg-solid-gray-400'}></div>
+          <div className={'size-32 rounded-4 bg-solid-gray-400'}></div>
+          <span className='text-dns-14N-130'>4px</span>
+        </div>
+        <div className='flex flex-col gap-2'>
+          <div className={'size-32 rounded-6 bg-solid-gray-400'}></div>
+          <span className='text-dns-14N-130'>6px</span>
+        </div>
+        <div className='flex flex-col gap-2'>
+          <div className={'size-32 rounded-8 bg-solid-gray-400'}></div>
           <span className='text-dns-14N-130'>8px</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'size-14 rounded-16 bg-solid-gray-400'}></div>
+          <div className={'size-32 rounded-12 bg-solid-gray-400'}></div>
+          <span className='text-dns-14N-130'>12px</span>
+        </div>
+        <div className='flex flex-col gap-2'>
+          <div className={'size-32 rounded-16 bg-solid-gray-400'}></div>
           <span className='text-dns-14N-130'>16px</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'size-14 rounded-32 bg-solid-gray-400'}></div>
+          <div className={'size-32 rounded-32 bg-solid-gray-400'}></div>
           <span className='text-dns-14N-130'>32px</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'size-14 rounded-full bg-solid-gray-400'}></div>
+          <div className={'size-32 rounded-full bg-solid-gray-400'}></div>
           <span className='text-dns-14N-130'>full</span>
         </div>
       </div>