refactor: tweak styles for forced-colors mode

Author: johnykei

src/components/Accordion/Accordion.tsx

@@ -24,7 +24,7 @@ export const AccordionDefaultIconWrapper = (props: AccordionDefaultIconWrapperPr
       className={`
         inline-flex border border-current bg-white text-blue-1000
         ${shapeStyle === 'square' ? 'rounded-lg' : 'rounded-full'}
-        group-hover/summary:ring-[calc(2/16*1rem)] group-hover/summary:ring-blue-1000
+        group-hover/summary:outline group-hover/summary:outline-2 group-hover/summary:outline-current
         ${className ?? ''}
       `}
       {...rest}

src/components/Button/Button.stories.tsx

@@ -56,7 +56,7 @@ export const AllButtons = {
     return (
       <div className='flex flex-col gap-8'>
         <div>
-          <h2 className='mb-6 text-std-32B-5'>塗りボタン（Solid Fill）</h2>
+          <h2 className='mb-6 text-std-32B-150'>塗りボタン（Solid Fill）</h2>
           <div className='flex items-center gap-4'>
             <Button variant='solid-fill' size='lg'>
               ラベル
@@ -73,7 +73,7 @@ export const AllButtons = {
           </div>
         </div>
         <div>
-          <h2 className='mb-6 text-std-32B-5'>アウトラインボタン（Outline）</h2>
+          <h2 className='mb-6 text-std-32B-150'>アウトラインボタン（Outline）</h2>
           <div className='flex items-center gap-4'>
             <Button variant='outline' size='lg'>
               ラベル
@@ -90,7 +90,7 @@ export const AllButtons = {
           </div>
         </div>
         <div>
-          <h2 className='mb-6 text-std-32B-5'>テキストボタン（Text）</h2>
+          <h2 className='mb-6 text-std-32B-150'>テキストボタン（Text）</h2>
           <div className='flex items-center gap-4'>
             <Button variant='text' size='lg'>
               ラベル
@@ -116,7 +116,7 @@ export const DisabledButtons = {
     return (
       <div className='flex flex-col gap-8'>
         <div>
-          <h2 className='mb-4 text-std-32B-5'>Disabledの作例（aria-disabled 属性を使用）</h2>
+          <h2 className='mb-4 text-std-32B-150'>Disabledの作例（aria-disabled 属性を使用）</h2>
           <p className='mb-8'>
             ※ ボタンの無効化に<code>disabled</code>
             コンテンツ属性ではなく、キーボード操作のタブフォーカスでもアクセスできる
@@ -188,30 +188,30 @@ export const LinkButtons = {
     return (
       <div className='flex flex-col gap-8'>
         <div>
-          <h2 className='mb-6 text-std-32B-5'>ボタンの見た目をしたリンク（Solid Fill）</h2>
+          <h2 className='mb-6 text-std-32B-150'>ボタンの見た目をしたリンク（Solid Fill）</h2>
           <div className='flex items-center gap-4'>
             <Button asChild variant='solid-fill' size='lg'>
-              <a className='text-center' href={href}>
+              <a className='inline-flex items-center justify-center' href={href}>
                 ラベル
               </a>
             </Button>
           </div>
         </div>
         <div>
-          <h2 className='mb-6 text-std-32B-5'>ボタンの見た目をしたリンク（Outline）</h2>
+          <h2 className='mb-6 text-std-32B-150'>ボタンの見た目をしたリンク（Outline）</h2>
           <div className='flex items-center gap-4'>
             <Button asChild variant='outline' size='lg'>
-              <a className='text-center' href={href}>
+              <a className='inline-flex items-center justify-center' href={href}>
                 ラベル
               </a>
             </Button>
           </div>
         </div>
         <div>
-          <h2 className='mb-6 text-std-32B-5'>ボタンの見た目をしたリンク（Text）</h2>
+          <h2 className='mb-6 text-std-32B-150'>ボタンの見た目をしたリンク（Text）</h2>
           <div className='flex items-center gap-4'>
             <Button asChild variant='text' size='lg'>
-              <a className='text-center' href={href}>
+              <a className='inline-flex items-center justify-center' href={href}>
                 ラベル
               </a>
             </Button>

src/components/Button/Button.tsx

@@ -5,16 +5,18 @@ export type ButtonVariant = 'solid-fill' | 'outline' | 'text';
 export type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 
 export const buttonBaseStyle = `
-  border underline-offset-[calc(3/16*1rem)]
+  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
-  aria-disabled:pointer-events-none
+  aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
 `;
 
 export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
   'solid-fill': `
+    border-4
+    border-double
+    border-transparent
     bg-blue-900
     text-white
-    border-transparent
     hover:bg-blue-1000
     hover:underline
     active:bg-blue-1200
@@ -23,9 +25,10 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
     aria-disabled:text-solid-gray-50
   `,
   outline: `
+    border
+    border-current
     bg-white
     text-blue-900
-    border-current
     hover:bg-blue-200
     hover:text-blue-1000
     hover:underline
@@ -36,12 +39,11 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
     aria-disabled:text-solid-gray-300
   `,
   text: `
-    bg-transparent
     text-blue-900
-    border-transparent
     underline
     hover:bg-blue-50
     hover:text-blue-1000
+    hover:decoration-[calc(3/16*1rem)]
     active:bg-blue-100
     active:text-blue-1200
     focus-visible:bg-yellow-300
@@ -52,10 +54,10 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
 };
 
 export const buttonSizeStyle: { [key in ButtonSize]: string } = {
-  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)]',
+  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]',
 };
 
 export type ButtonProps = {

src/components/Checkbox/Checkbox.tsx

@@ -21,9 +21,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
           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-gray-50 aria-disabled:!border-solid-gray-300 aria-disabled:before:border-solid-gray-50 checked:aria-disabled:bg-solid-gray-300
+          checked:bg-blue-900 checked:border-blue-900 checked:before:block checked:forced-colors:bg-[CanvasText] checked:before:forced-colors:border-[Canvas]
+          ${isError ? '!border-error-1 checked:bg-error-1' : ''}
+          aria-disabled:bg-solid-gray-50 aria-disabled:!border-solid-gray-300 aria-disabled:before:border-solid-gray-50 aria-disabled:checked:bg-solid-gray-300 aria-disabled:forced-colors:!border-[GrayText] aria-disabled:checked:forced-colors:bg-[GrayText]
         `}
         id={id}
         onClick={props['aria-disabled'] ? handleDisabled : onClick}

src/components/Input/Input.tsx

@@ -26,7 +26,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         ${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
-        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: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]
         ${className ?? ''}
       `}
       readOnly={props['aria-disabled'] ? true : readOnly}

src/components/Radio/Radio.tsx

@@ -21,9 +21,9 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
           appearance-none relative shrink-0 mt-[calc(1/16*1rem)] w-[calc(19/16*1rem)] h-[calc(19/16*1rem)] border-[calc(1.5/16*1rem)] border-solid-gray-900 bg-white rounded-full
           before:w-[calc(9/16*1rem)] before:h-[calc(9/16*1rem)] before:hidden before:rounded-full before:absolute before:top-[calc(3.5/16*1rem)] before:left-[calc(3.5/16*1rem)]
           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
-          checked:border-blue-900 checked:before:block checked:before:bg-blue-900
-          ${isError && '!border-error-1 checked:border-error-1 checked:before:bg-error-1'}
-          aria-disabled:bg-solid-gray-50 aria-disabled:border-solid-gray-300 aria-disabled:before:bg-solid-gray-420
+          checked:border-blue-900 checked:before:block checked:before:bg-blue-900 checked:before:forced-colors:bg-[CanvasText]
+          ${isError ? '!border-error-1 checked:border-error-1 checked:before:bg-error-1' : ''}
+          aria-disabled:bg-solid-gray-50 aria-disabled:border-solid-gray-300 aria-disabled:before:bg-solid-gray-420 aria-disabled:forced-colors:border-[GrayText] aria-disabled:before:forced-colors:bg-[GrayText]
         `}
         id={id}
         ref={ref}

src/components/Select/Select.tsx

@@ -36,7 +36,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) =>
           size-full appearance-none border rounded-lg bg-white px-4 py-[calc(11/16*1rem)] text-oln-16N-100 text-solid-gray-800
           ${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
-          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: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]
           ${className ?? ''}
         `}
         onMouseDown={props['aria-disabled'] ? handleDisabledMouseDown : onMouseDown}

src/components/Textarea/Textarea.tsx

@@ -19,7 +19,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, r
         }
         ${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: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]
         ${className ?? ''}
       `}
       readOnly={props['aria-disabled'] ? true : readOnly}