Merge pull request #87 from digital-go-jp/v2

merge v2 into main

Author: johnykei

.storybook/globals.css

@@ -14,6 +14,6 @@
       BlinkMacSystemFont,
       sans-serif;
 
-    @apply text-std-17N-7 text-solid-grey-900;
+    @apply text-std-17N-170 text-solid-gray-900;
   }
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-go-jp/design-system-example-components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "type": "module",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -39,7 +39,7 @@
     "storybook:test": "test-storybook"
   },
   "dependencies": {
-    "@digital-go-jp/tailwind-theme-plugin": "^0.1.16",
+    "@digital-go-jp/tailwind-theme-plugin": "^0.1.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.13"

package.json

@@ -129,7 +129,7 @@ export const WithSquareIcon: Story = {
             </AccordionSummary>
             <div className='px-1 py-2 desktop:px-2 desktop:py-4'>
               <h4
-                className={`md:text-std-20B-6 mb-4 ${focusVisibleStyles}`}
+                className={`md:text-std-20B-160 mb-4 ${focusVisibleStyles}`}
                 ref={focusTargetRef1}
                 tabIndex={-1}
               >

src/components/Accordion/Accordion.stories.tsx

@@ -6,7 +6,7 @@ export const Accordion = (props: AccordionProps) => {
   const { children, className, ...rest } = props;
 
   return (
-    <details className={`group ${className ?? ''} border-b border-solid-grey-420`} {...rest}>
+    <details className={`group ${className ?? ''} border-b border-solid-gray-420`} {...rest}>
       {children}
     </details>
   );
@@ -69,9 +69,9 @@ export const AccordionSummary = (props: AccordionSummaryProps) => {
   return (
     <summary
       className={`
-        group/summary flex cursor-default list-none items-center justify-between gap-4 p-2 text-std-16M-7
-        desktop:p-3 desktop:text-std-20N-5 desktop:gap-10
-        hover:bg-solid-grey-50
+        group/summary flex cursor-default list-none items-center justify-between gap-4 p-2 text-std-16N-170
+        desktop:p-3 desktop:text-std-20N-150 desktop:gap-10
+        hover:bg-solid-gray-50
         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:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
         [&::-webkit-details-marker]:hidden ${className ?? ''}
       `}

src/components/Accordion/Accordion.tsx

@@ -19,8 +19,8 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
     hover:underline
     active:bg-blue-1200
     active:underline
-    aria-disabled:bg-solid-grey-300
-    aria-disabled:text-solid-grey-50
+    aria-disabled:bg-solid-gray-300
+    aria-disabled:text-solid-gray-50
   `,
   outline: `
     bg-white
@@ -33,7 +33,7 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
     active:text-blue-1200
     active:underline
     aria-disabled:bg-white
-    aria-disabled:text-solid-grey-300
+    aria-disabled:text-solid-gray-300
   `,
   text: `
     bg-transparent
@@ -47,15 +47,15 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
     focus-visible:bg-yellow-300
     aria-disabled:bg-transparent
     aria-disabled:focus-visible:bg-yellow-300
-    aria-disabled:text-solid-grey-300
+    aria-disabled:text-solid-gray-300
   `,
 };
 
 export const buttonSizeStyle: { [key in ButtonSize]: string } = {
-  lg: 'min-w-[calc(136/16*1rem)] rounded-lg p-4 text-oln-16B-1 leading-snug',
-  md: 'min-w-24 rounded-lg px-4 py-3 text-oln-16B-1 leading-snug',
-  sm: 'relative min-w-20 rounded-md px-3 py-1.5 text-oln-16B-1 leading-snug after:absolute after:-inset-x-[calc(1/16*1rem)] after:-inset-y-[calc(5/16*1rem)]',
-  xs: 'relative min-w-18 rounded px-2 py-1.5 text-oln-14B-1 after:absolute after:-inset-x-[calc(1/16*1rem)] after:-inset-y-[calc(9/16*1rem)]',
+  lg: 'min-w-[calc(136/16*1rem)] rounded-lg p-4 text-oln-16B-100 leading-snug',
+  md: 'min-w-24 rounded-lg px-4 py-3 text-oln-16B-100 leading-snug',
+  sm: 'relative min-w-20 rounded-md px-3 py-1.5 text-oln-16B-100 leading-snug after:absolute after:-inset-x-[calc(1/16*1rem)] after:-inset-y-[calc(5/16*1rem)]',
+  xs: 'relative min-w-18 rounded px-2 py-1.5 text-oln-14B-100 after:absolute after:-inset-x-[calc(1/16*1rem)] after:-inset-y-[calc(9/16*1rem)]',
 };
 
 export type ButtonProps = {

src/components/Button/Button.tsx

@@ -13,17 +13,17 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
 
   return (
     <label
-      className='flex w-fit items-start gap-3 py-2 text-dns-16N-3 text-solid-grey-800'
+      className='flex w-fit items-start gap-3 py-2 text-dns-16N-130 text-solid-gray-800'
       htmlFor={id}
     >
       <input
         className={`
-          appearance-none relative shrink-0 mt-0.5 w-[calc(17/16*1rem)] h-[calc(17/16*1rem)] border-[calc(1.5/16*1rem)] border-solid-grey-900 bg-white rounded-sm
+          appearance-none relative shrink-0 mt-0.5 w-[calc(17/16*1rem)] h-[calc(17/16*1rem)] border-[calc(1.5/16*1rem)] border-solid-gray-900 bg-white rounded-sm
           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
           before:hidden before:absolute before:top-[calc(3/16*1rem)] before:left-[calc(2.5/16*1rem)] before:w-[calc(9/16*1rem)] before:h-[calc(5.5/16*1rem)] before:border-b-[calc(1.5/16*1rem)] before:border-l-[calc(1.5/16*1rem)] before:border-white before:-rotate-45
           checked:bg-blue-900 checked:border-blue-900 checked:before:block
           ${isError && '!border-error-1 checked:bg-error-1'}
-          aria-disabled:bg-solid-grey-50 aria-disabled:!border-solid-grey-300 aria-disabled:before:border-solid-grey-50 checked:aria-disabled:bg-solid-grey-300
+          aria-disabled:bg-solid-gray-50 aria-disabled:!border-solid-gray-300 aria-disabled:before:border-solid-gray-50 checked:aria-disabled:bg-solid-gray-300
         `}
         id={id}
         onClick={props['aria-disabled'] ? handleDisabled : onClick}

src/components/Checkbox/Checkbox.tsx

@@ -8,12 +8,12 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     color: {
-      options: ['grey-420', 'grey-536', 'black'],
+      options: ['gray-420', 'gray-536', 'black'],
       control: { type: 'radio' },
       description: '線の色を以下から選択します。',
       table: {
-        defaultValue: { summary: 'grey-420' },
-        type: { summary: "'grey-420', 'grey-536', 'black'" },
+        defaultValue: { summary: 'gray-420' },
+        type: { summary: "'gray-420', 'gray-536', 'black'" },
       },
     },
   },
@@ -33,7 +33,7 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {
   args: {
     className: '',
-    color: 'grey-420',
+    color: 'gray-420',
   },
 };
 
@@ -42,16 +42,16 @@ export const Solid: Story = {
     return (
       <div className='flex flex-col gap-8'>
         <Divider />
-        <Divider color='grey-536' />
+        <Divider color='gray-536' />
         <Divider color='black' />
         <Divider className='border-t-2' />
-        <Divider color='grey-536' className='border-t-2' />
+        <Divider color='gray-536' className='border-t-2' />
         <Divider color='black' className='border-t-2' />
         <Divider className='border-t-[3px]' />
-        <Divider color='grey-536' className='border-t-[3px]' />
+        <Divider color='gray-536' className='border-t-[3px]' />
         <Divider color='black' className='border-t-[3px]' />
         <Divider className='border-t-4' />
-        <Divider color='grey-536' className='border-t-4' />
+        <Divider color='gray-536' className='border-t-4' />
         <Divider color='black' className='border-t-4' />
       </div>
     );
@@ -63,16 +63,16 @@ export const Dash: Story = {
     return (
       <div className='flex flex-col gap-8'>
         <Divider className='border-dashed' />
-        <Divider color='grey-536' className='border-dashed' />
+        <Divider color='gray-536' className='border-dashed' />
         <Divider color='black' className='border-dashed' />
         <Divider className='border-dashed border-t-2' />
-        <Divider color='grey-536' className='border-dashed border-t-2' />
+        <Divider color='gray-536' className='border-dashed border-t-2' />
         <Divider color='black' className='border-dashed border-t-2' />
         <Divider className='border-dashed border-t-[3px]' />
-        <Divider color='grey-536' className='border-dashed border-t-[3px]' />
+        <Divider color='gray-536' className='border-dashed border-t-[3px]' />
         <Divider color='black' className='border-dashed border-t-[3px]' />
         <Divider className='border-dashed border-t-4' />
-        <Divider color='grey-536' className='border-dashed border-t-4' />
+        <Divider color='gray-536' className='border-dashed border-t-4' />
         <Divider color='black' className='border-dashed border-t-4' />
       </div>
     );

src/components/Divider/Divider.stories.tsx

@@ -1,10 +1,10 @@
 import type { ComponentProps } from 'react';
 
-export type DividerColor = 'grey-420' | 'grey-536' | 'black';
+export type DividerColor = 'gray-420' | 'gray-536' | 'black';
 
 export const DividerColorStyle: { [key in DividerColor]: string } = {
-  'grey-420': 'border-solid-grey-420',
-  'grey-536': 'border-solid-grey-536',
+  'gray-420': 'border-solid-gray-420',
+  'gray-536': 'border-solid-gray-536',
   black: 'border-black',
 };
 
@@ -13,7 +13,7 @@ export type DividerProps = ComponentProps<'hr'> & {
 };
 
 export const Divider = (props: DividerProps) => {
-  const { className, color = 'grey-420', ...rest } = props;
+  const { className, color = 'gray-420', ...rest } = props;
 
   return <hr className={`${DividerColorStyle[color]} ${className ?? ''}`} {...rest}></hr>;
 };

src/components/Divider/Divider.tsx

@@ -31,8 +31,8 @@ export const Playground: Story = {
         </EmergencyBannerHeading>
         <EmergencyBannerBody>
           <div className='flex flex-col gap-2 desktop:gap-4'>
-            <p className='text-std-16N-7'>年月日</p>
-            <p className='text-std-16N-7 desktop:text-std-20N-5'>バナーデスクリプション</p>
+            <p className='text-std-16N-170'>年月日</p>
+            <p className='text-std-16N-170 desktop:text-std-20N-150'>バナーデスクリプション</p>
           </div>
         </EmergencyBannerBody>
       </>
@@ -50,10 +50,10 @@ export const Example = {
           </EmergencyBannerHeading>
           <EmergencyBannerBody>
             <div className='flex flex-col gap-2 desktop:gap-4'>
-              <p className='text-std-16N-7'>
+              <p className='text-std-16N-170'>
                 <time dateTime='2024-01-01T06:00'>2024年1月1日 06:00更新</time>
               </p>
-              <p className='text-std-16N-7 desktop:text-std-20N-5'>
+              <p className='text-std-16N-170 desktop:text-std-20N-150'>
                 1時23分に○○地区に対して避難準備情報が発令されました。お年寄りの方等避難に時間がかかる方は、直ちに指定避難所へ避難してください。
               </p>
             </div>