From 371efbc8466cd4424d6d7eaa5901a4fb5b97be16 Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Wed, 13 Nov 2024 13:45:53 +0900
Subject: [PATCH 1/5] fix: update design token usage

---
 .../react/src/components/Button/index.css     | 14 ++++++-------
 .../Checkbox/CheckboxInput/index.css          | 17 +++++++++++++++-
 .../react/src/components/Checkbox/index.css   |  2 +-
 .../__snapshots__/index.story.storyshot       | 10 ++++++++++
 .../src/components/Clickable/index.story.tsx  | 20 +++++++++++++++++--
 .../DropdownSelector/Popover/index.css        |  2 +-
 .../__snapshots__/index.story.storyshot       | 10 +++++++---
 .../src/components/DropdownSelector/index.css | 11 +++++-----
 .../DropdownSelector/index.story.tsx          |  2 ++
 .../react/src/components/IconButton/index.css | 16 +++++++--------
 .../src/components/LoadingSpinner/index.css   |  1 +
 .../src/components/Modal/ModalPlumbing.css    |  1 +
 .../Modal/__snapshots__/index.story.storyshot |  5 -----
 .../src/components/Modal/index.story.tsx      |  1 -
 .../src/components/Radio/RadioInput/index.css |  6 +++---
 .../Radio/__snapshots__/index.story.storyshot |  8 ++++----
 packages/react/src/components/Radio/index.css |  2 +-
 .../src/components/Radio/index.story.tsx      | 10 +++++++---
 .../src/components/SegmentedControl/index.css |  2 +-
 .../components/Switch/SwitchInput/index.css   |  8 ++++----
 .../react/src/components/Switch/index.css     |  2 +-
 .../react/src/components/TextArea/index.css   |  4 ++--
 .../TextField/AssistiveText/index.css         |  2 +-
 .../react/src/components/TextField/index.css  |  4 ++--
 24 files changed, 104 insertions(+), 56 deletions(-)

diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css
index 70bb644b2..f3b2072f0 100644
--- a/packages/react/src/components/Button/index.css
+++ b/packages/react/src/components/Button/index.css
@@ -24,8 +24,8 @@
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
-  color: var(--charcoal-color-text-secondary-default);
-  background-color: var(--charcoal-color-container-secondary-default);
+  color: var(--charcoal-color-text-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
   height: 40px;
 }
@@ -42,14 +42,14 @@
 }
 
 .charcoal-button:not(:disabled):hover {
-  color: var(--charcoal-color-text-secondary-hover);
-  background-color: var(--charcoal-color-container-secondary-hover);
+  color: var(--charcoal-color-text-hover);
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-button:not(:disabled):active,
-.charcoal-button[data-active='true'] {
-  color: var(--charcoal-color-text-secondary-press);
-  background-color: var(--charcoal-color-container-secondary-press);
+.charcoal-button:not(:disabled)[data-active='true'] {
+  color: var(--charcoal-color-text-press);
+  background-color: var(--charcoal-color-container-secondary-press-a);
 }
 
 .charcoal-button[data-variant='Primary'] {
diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.css b/packages/react/src/components/Checkbox/CheckboxInput/index.css
index 75a9ca3ae..de692504f 100644
--- a/packages/react/src/components/Checkbox/CheckboxInput/index.css
+++ b/packages/react/src/components/Checkbox/CheckboxInput/index.css
@@ -9,8 +9,15 @@
   transition: 0.2s box-shadow, 0.2s background-color;
   position: relative;
   box-sizing: border-box;
+  background-color: var(--charcoal-color-container-default);
 }
 
+.charcoal-checkbox-input:hover {
+  background-color: var(--charcoal-color-container-hover);
+}
+.charcoal-checkbox-input:active {
+  background-color: var(--charcoal-color-container-press);
+}
 .charcoal-checkbox-input:disabled,
 .charcoal-checkbox-input[readonly] {
   cursor: default;
@@ -23,7 +30,7 @@
 
 .charcoal-checkbox-input:checked::after {
   content: '';
-  background-color: white;
+  background-color: var(--charcoal-color-icon-on-primary-default);
   display: flex;
   margin: auto;
   width: 16px;
@@ -33,6 +40,14 @@
   );
 }
 
+.charcoal-checkbox-input:checked:hover::after {
+  background-color: var(--charcoal-color-icon-on-primary-hover);
+}
+
+.charcoal-checkbox-input:checked:active::after {
+  background-color: var(--charcoal-color-icon-on-primary-press);
+}
+
 .charcoal-checkbox-input:not(:checked) {
   border-width: 2px;
   border-style: solid;
diff --git a/packages/react/src/components/Checkbox/index.css b/packages/react/src/components/Checkbox/index.css
index 674650fcd..aeafa43a9 100644
--- a/packages/react/src/components/Checkbox/index.css
+++ b/packages/react/src/components/Checkbox/index.css
@@ -3,7 +3,7 @@
   cursor: pointer;
   display: flex;
   gap: 4px;
-  color: var(--charcoal-color-text-secondary-default);
+  color: var(--charcoal-color-text-default);
 }
 
 .charcoal-checkbox__label[aria-disabled='true'] {
diff --git a/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot b/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot
index d87b6c950..bcc9b2c8d 100644
--- a/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot
@@ -7,6 +7,11 @@ exports[`Storybook Tests > react/Clickable > Button 1`] = `
   <button
     className="charcoal-clickable"
     onClick={[Function]}
+    style={
+      Object {
+        "color": "var(--charcoal-color-text-secondary-default)",
+      }
+    }
   >
     button
   </button>
@@ -21,6 +26,11 @@ exports[`Storybook Tests > react/Clickable > Link 1`] = `
     className="charcoal-clickable"
     href="#"
     onClick={[Function]}
+    style={
+      Object {
+        "color": "var(--charcoal-color-text-secondary-default)",
+      }
+    }
   >
     link
   </a>
diff --git a/packages/react/src/components/Clickable/index.story.tsx b/packages/react/src/components/Clickable/index.story.tsx
index d7bb4b8da..b4afa0ec6 100644
--- a/packages/react/src/components/Clickable/index.story.tsx
+++ b/packages/react/src/components/Clickable/index.story.tsx
@@ -8,12 +8,28 @@ export default {
 } as Meta<typeof Clickable>
 
 export const Button: StoryObj = {
-  render: () => <Clickable onClick={action('click')}>button</Clickable>,
+  render: () => (
+    <Clickable
+      style={{
+        color: 'var(--charcoal-color-text-secondary-default)',
+      }}
+      onClick={action('click')}
+    >
+      button
+    </Clickable>
+  ),
 }
 
 export const Link: StoryObj = {
   render: () => (
-    <Clickable component="a" href="#" onClick={action('click')}>
+    <Clickable
+      style={{
+        color: 'var(--charcoal-color-text-secondary-default)',
+      }}
+      component="a"
+      href="#"
+      onClick={action('click')}
+    >
       link
     </Clickable>
   ),
diff --git a/packages/react/src/components/DropdownSelector/Popover/index.css b/packages/react/src/components/DropdownSelector/Popover/index.css
index 87bb66a1f..0788d10e4 100644
--- a/packages/react/src/components/DropdownSelector/Popover/index.css
+++ b/packages/react/src/components/DropdownSelector/Popover/index.css
@@ -4,7 +4,7 @@
   overflow: auto;
   max-height: inherit;
   background-color: var(--charcoal-color-background-default);
-  border: solid 1px var(--charcoal-color-border-default);
+  border: solid 1px var(--charcoal-color-border-secondary);
   border-radius: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
index e113646f2..a90e8f637 100644
--- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -260,7 +260,9 @@ exports[`Storybook Tests > react/DropdownSelector > Default 1`] = `
         <label
           className="charcoal-field-label"
           id="test-id"
-        />
+        >
+          Label
+        </label>
         <div
           className="charcoal-field-label-sub-label"
         >
@@ -315,8 +317,10 @@ exports[`Storybook Tests > react/DropdownSelector > Default 1`] = `
       >
         <span
           className="charcoal-ui-dropdown-selector-text"
-          data-placeholder={false}
-        />
+          data-placeholder={true}
+        >
+          Placeholder
+        </span>
         <pixiv-icon
           class="charcoal-ui-dropdown-selector-icon"
           name="16/Menu"
diff --git a/packages/react/src/components/DropdownSelector/index.css b/packages/react/src/components/DropdownSelector/index.css
index fc3448953..8465d27fd 100644
--- a/packages/react/src/components/DropdownSelector/index.css
+++ b/packages/react/src/components/DropdownSelector/index.css
@@ -3,6 +3,7 @@
   grid-template-columns: 1fr;
   grid-gap: 4px;
   width: 100%;
+  border-radius: 4px;
 }
 
 .charcoal-dropdown-selector-root[aria-disabled='true'] {
@@ -26,7 +27,7 @@
 
   padding-right: 8px;
   padding-left: 8px;
-  background-color: var(--charcoal-color-container-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
 
   transition: 0.2s box-shadow, 0.2s background-color;
@@ -47,11 +48,11 @@
 
 .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
 .charcoal-dropdown-selector-button:not(:disabled):active {
-  background-color: var(--charcoal-color-container-secondary-press);
+  background-color: var(--charcoal-color-container-secondary-press-a);
 }
 
 .charcoal-dropdown-selector-button:not(:disabled):hover {
-  background-color: var(--charcoal-color-container-secondary-hover);
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
@@ -70,7 +71,7 @@
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-color-text-secondary-default);
+  color: var(--charcoal-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -81,5 +82,5 @@
 }
 
 .charcoal-ui-dropdown-selector-icon {
-  color: var(--charcoal-color-text-secondary-default);
+  color: var(--charcoal-color-icon-secondary-default);
 }
diff --git a/packages/react/src/components/DropdownSelector/index.story.tsx b/packages/react/src/components/DropdownSelector/index.story.tsx
index 48c92b469..1ca55de1f 100644
--- a/packages/react/src/components/DropdownSelector/index.story.tsx
+++ b/packages/react/src/components/DropdownSelector/index.story.tsx
@@ -25,6 +25,8 @@ export const Default: StoryObj<typeof DropdownSelector> = {
           {...args}
           onChange={setSelected}
           value={args.value ? args.value : selected}
+          placeholder="Placeholder"
+          label="Label"
         >
           <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
           <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css
index a6e0b5ed0..9a1b6441d 100644
--- a/packages/react/src/components/IconButton/index.css
+++ b/packages/react/src/components/IconButton/index.css
@@ -51,54 +51,54 @@
 }
 
 .charcoal-icon-button[data-variant='Default'] {
-  color: var(--charcoal-color-text-tertiary-default);
+  color: var(--charcoal-color-icon-tertiary-default);
   background-color: rgba(0, 0, 0, 0);
 }
 .charcoal-icon-button[data-variant='Default'][data-active='true']:not(
     :disabled
   ):not([aria-disabled]),
 .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
-  color: var(--charcoal-color-text-tertiary-press);
+  color: var(--charcoal-color-icon-tertiary-press);
   background-color: var(--charcoal-color-container-press-a);
 }
 .charcoal-icon-button[data-variant='Default'][data-active='false']:not(
     :disabled
   ):not([aria-disabled]):hover,
 .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
-  color: var(--charcoal-color-text-tertiary-hover);
+  color: var(--charcoal-color-icon-tertiary-hover);
   background-color: var(--charcoal-color-container-hover-a);
 }
 .charcoal-icon-button[data-variant='Default'][data-active='false']:not(
     :disabled
   ):not([aria-disabled]):active,
 .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
-  color: var(--charcoal-color-text-tertiary-press);
+  color: var(--charcoal-color-icon-tertiary-press);
   background-color: var(--charcoal-color-container-press-a);
 }
 
 .charcoal-icon-button[data-variant='Overlay'] {
-  color: var(--charcoal-color-text-on-primary-default);
+  color: var(--charcoal-color-icon-on-on-img-default);
   background-color: var(--charcoal-color-container-on-img-default);
 }
 .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(
     :disabled
   ):not([aria-disabled]),
 .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
-  color: var(--charcoal-color-text-on-primary-press);
+  color: var(--charcoal-color-icon-on-on-img-press);
   background-color: var(--charcoal-color-container-on-img-press);
 }
 .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(
     :disabled
   ):not([aria-disabled]):hover,
 .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
-  color: var(--charcoal-color-text-on-primary-hover);
+  color: var(--charcoal-color-icon-on-on-img-hover);
   background-color: var(--charcoal-color-container-on-img-hover);
 }
 .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(
     :disabled
   ):not([aria-disabled]):active,
 .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
-  color: var(--charcoal-color-text-on-primary-press);
+  color: var(--charcoal-color-icon-on-on-img-press);
   background-color: var(--charcoal-color-container-on-img-press);
 }
 
diff --git a/packages/react/src/components/LoadingSpinner/index.css b/packages/react/src/components/LoadingSpinner/index.css
index c9e99c6a6..86e61acdd 100644
--- a/packages/react/src/components/LoadingSpinner/index.css
+++ b/packages/react/src/components/LoadingSpinner/index.css
@@ -10,6 +10,7 @@
   width: var(--charcoal-loading-spinner-size);
   height: var(--charcoal-loading-spinner-size);
   opacity: 0.84;
+  color: var(--charcoal-color-icon-tertiary-default);
   background-color: var(--charcoal-color-background-default);
 }
 .charcoal-loading-spinner[data-transparent='true'] {
diff --git a/packages/react/src/components/Modal/ModalPlumbing.css b/packages/react/src/components/Modal/ModalPlumbing.css
index 389ac16da..b5fab43ef 100644
--- a/packages/react/src/components/Modal/ModalPlumbing.css
+++ b/packages/react/src/components/Modal/ModalPlumbing.css
@@ -27,6 +27,7 @@
 
 .charcoal-modal-body {
   padding-bottom: 40px;
+  color: var(--charcoal-color-text-default);
 }
 
 .charcoal-modal-buttons {
diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
index 8115c99cf..3fde158b7 100644
--- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
@@ -66,7 +66,6 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
             <div
               style={
                 Object {
-                  "color": "var(--charcoal-color-text-secondary-default)",
                   "fontSize": 14,
                   "lineHeight": "22px",
                   "padding": "0 16px",
@@ -336,7 +335,6 @@ exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
             <div
               style={
                 Object {
-                  "color": "var(--charcoal-color-text-secondary-default)",
                   "fontSize": 14,
                   "lineHeight": "22px",
                   "padding": "0 16px",
@@ -460,7 +458,6 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
             <div
               style={
                 Object {
-                  "color": "var(--charcoal-color-text-secondary-default)",
                   "fontSize": 14,
                   "lineHeight": "22px",
                   "padding": "0 16px",
@@ -730,7 +727,6 @@ exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
             <div
               style={
                 Object {
-                  "color": "var(--charcoal-color-text-secondary-default)",
                   "fontSize": 14,
                   "lineHeight": "22px",
                   "padding": "0 16px",
@@ -919,7 +915,6 @@ exports[`Storybook Tests > react/Modal > NotDismmissableStory 1`] = `
             <div
               style={
                 Object {
-                  "color": "var(--charcoal-color-text-secondary-default)",
                   "fontSize": 14,
                   "lineHeight": "22px",
                   "padding": "0 16px",
diff --git a/packages/react/src/components/Modal/index.story.tsx b/packages/react/src/components/Modal/index.story.tsx
index 0c1fab41f..73ec2845b 100644
--- a/packages/react/src/components/Modal/index.story.tsx
+++ b/packages/react/src/components/Modal/index.story.tsx
@@ -124,7 +124,6 @@ const StyledModalText = (props: Omit<React.ComponentProps<'div'>, 'style'>) => {
         fontSize: 14,
         lineHeight: '22px',
         padding: '0 16px',
-        color: 'var(--charcoal-color-text-secondary-default)',
       }}
       {...props}
     />
diff --git a/packages/react/src/components/Radio/RadioInput/index.css b/packages/react/src/components/Radio/RadioInput/index.css
index 238c51d92..af3b69693 100644
--- a/packages/react/src/components/Radio/RadioInput/index.css
+++ b/packages/react/src/components/Radio/RadioInput/index.css
@@ -24,7 +24,7 @@
   width: 8px;
   height: 8px;
   pointer-events: none;
-  background-color: var(--charcoal-color-text-on-primary-default);
+  background-color: var(--charcoal-color-icon-on-primary-default);
   border-radius: 999999px;
   transition: 0.2s background-color, 0.2s box-shadow;
 }
@@ -70,7 +70,7 @@
 }
 
 .charcoal-radio-input:checked:not(:disabled):hover::after {
-  background-color: var(--charcoal-color-text-on-primary-hover);
+  background-color: var(--charcoal-color-icon-on-primary-hover);
 }
 
 .charcoal-radio-input:checked:not(:disabled):active {
@@ -78,5 +78,5 @@
 }
 
 .charcoal-radio-input:checked:not(:disabled):active::after {
-  background-color: var(--charcoal-color-text-on-primary-press);
+  background-color: var(--charcoal-color-icon-on-primary-press);
 }
diff --git a/packages/react/src/components/Radio/__snapshots__/index.story.storyshot b/packages/react/src/components/Radio/__snapshots__/index.story.storyshot
index bee3fedd9..61e709276 100644
--- a/packages/react/src/components/Radio/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Radio/__snapshots__/index.story.storyshot
@@ -14,7 +14,7 @@ exports[`Storybook Tests > react/Radio > Default 1`] = `
     }
   >
     <div
-      aria-label="default story"
+      aria-label="default story test-id"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -28,7 +28,7 @@ exports[`Storybook Tests > react/Radio > Default 1`] = `
           checked={true}
           className="charcoal-radio-input"
           disabled={false}
-          name="default_story"
+          name="default_story_test-id"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -49,7 +49,7 @@ exports[`Storybook Tests > react/Radio > Default 1`] = `
           checked={false}
           className="charcoal-radio-input"
           disabled={false}
-          name="default_story"
+          name="default_story_test-id"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -70,7 +70,7 @@ exports[`Storybook Tests > react/Radio > Default 1`] = `
           checked={false}
           className="charcoal-radio-input"
           disabled={false}
-          name="default_story"
+          name="default_story_test-id"
           onChange={[Function]}
           type="radio"
           value="3"
diff --git a/packages/react/src/components/Radio/index.css b/packages/react/src/components/Radio/index.css
index 32932bde1..72b5a6cfc 100644
--- a/packages/react/src/components/Radio/index.css
+++ b/packages/react/src/components/Radio/index.css
@@ -14,5 +14,5 @@
 .charcoal-radio__label_div {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-color-text-secondary-default);
+  color: var(--charcoal-color-text-default);
 }
diff --git a/packages/react/src/components/Radio/index.story.tsx b/packages/react/src/components/Radio/index.story.tsx
index 2069a6fd8..b939e15ad 100644
--- a/packages/react/src/components/Radio/index.story.tsx
+++ b/packages/react/src/components/Radio/index.story.tsx
@@ -1,3 +1,4 @@
+import { useId } from '@react-aria/utils'
 import Radio from '.'
 import { RadioGroup } from './RadioGroup'
 import { StoryObj } from '@storybook/react'
@@ -29,14 +30,17 @@ const LayoutDiv = (props: { children: React.ReactNode }) => {
 }
 
 export const Default: StoryObj<typeof Radio> = {
+  argTypes: {
+    disabled: { type: 'boolean', defaultValue: false },
+  },
   render: function Render(args) {
     const [value, setValue] = useState<Option>(options[0])
-
+    const id = useId()
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name="default_story"
-          label="default story"
+          name={`default_story_${id}`}
+          label={`default story ${id}`}
           {...args}
           value={value}
           onChange={setValue}
diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css
index 92a2b56a0..022e5d026 100644
--- a/packages/react/src/components/SegmentedControl/index.css
+++ b/packages/react/src/components/SegmentedControl/index.css
@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
 
-  background-color: var(--charcoal-color-container-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 16px;
 }
 
diff --git a/packages/react/src/components/Switch/SwitchInput/index.css b/packages/react/src/components/Switch/SwitchInput/index.css
index 2bc29d57c..c9b37b17d 100644
--- a/packages/react/src/components/Switch/SwitchInput/index.css
+++ b/packages/react/src/components/Switch/SwitchInput/index.css
@@ -20,7 +20,7 @@
 .charcoal-switch-input:disabled,
 .charcoal-switch-input[readonly] {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
+  color: var(--charcoal-color-icon-disable);
   background-color: var(--charcoal-color-container-disable);
 }
 
@@ -35,7 +35,7 @@
   transform: translateX(0);
   transition: transform 0.2s;
   border-radius: 1024px;
-  background-color: var(--charcoal-color-text-on-primary-default);
+  background-color: var(--charcoal-color-icon-on-primary-default);
 }
 
 .charcoal-switch-input:checked::after {
@@ -67,11 +67,11 @@
 }
 
 .charcoal-switch-input:not(:disabled)::after:hover {
-  background-color: var(--charcoal-color-text-on-primary-hover);
+  background-color: var(--charcoal-color-icon-on-primary-hover);
 }
 
 .charcoal-switch-input:not(:disabled)::after:active {
-  background-color: var(--charcoal-color-text-on-primary-press);
+  background-color: var(--charcoal-color-icon-on-primary-press);
 }
 
 .charcoal-switch-input:not(:disabled):checked:hover {
diff --git a/packages/react/src/components/Switch/index.css b/packages/react/src/components/Switch/index.css
index 12f1a3cfa..489a62334 100644
--- a/packages/react/src/components/Switch/index.css
+++ b/packages/react/src/components/Switch/index.css
@@ -19,5 +19,5 @@
 .charcoal-switch__label_div {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-color-text-secondary-default);
+  color: var(--charcoal-color-text-default);
 }
diff --git a/packages/react/src/components/TextArea/index.css b/packages/react/src/components/TextArea/index.css
index 831fbece0..77463f765 100644
--- a/packages/react/src/components/TextArea/index.css
+++ b/packages/react/src/components/TextArea/index.css
@@ -10,7 +10,7 @@
   overflow: hidden;
 
   color: var(--charcoal-color-text-secondary-default);
-  background-color: var(--charcoal-color-container-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   transition: 0.2s background-color, 0.2s box-shadow;
   height: calc(22px * var(--charcoal-text-area-rows) + 18px);
@@ -30,7 +30,7 @@
 }
 
 .charcoal-text-area-container:not([aria-disabled='true']):hover {
-  background-color: var(--charcoal-color-container-secondary-hover);
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-text-area-container[aria-invalid='true']:focus-within {
diff --git a/packages/react/src/components/TextField/AssistiveText/index.css b/packages/react/src/components/TextField/AssistiveText/index.css
index 53ea9bd91..40f7cc021 100644
--- a/packages/react/src/components/TextField/AssistiveText/index.css
+++ b/packages/react/src/components/TextField/AssistiveText/index.css
@@ -6,5 +6,5 @@
 }
 
 .charcoal-text-field-assistive-text[data-invalid='true'] {
-  color: var(--charcoal-color-container-negative-default);
+  color: var(--charcoal-color-text-negative-default);
 }
diff --git a/packages/react/src/components/TextField/index.css b/packages/react/src/components/TextField/index.css
index 43c6635de..6e7491938 100644
--- a/packages/react/src/components/TextField/index.css
+++ b/packages/react/src/components/TextField/index.css
@@ -9,7 +9,7 @@
   height: 40px;
   transition: 0.2s background-color, 0.2s box-shadow;
   color: var(--charcoal-color-text-secondary-default);
-  background-color: var(--charcoal-color-container-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   padding: 0 8px;
   line-height: 22px;
@@ -25,7 +25,7 @@
 }
 
 .charcoal-text-field-container:not([aria-disabled='true']):hover {
-  background-color: var(--charcoal-color-container-secondary-hover);
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-text-field-container:not([aria-disabled='true']):focus-within {

From ed9db943e2264bed6e8ca9bb408ec3628940b58b Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Wed, 13 Nov 2024 14:01:05 +0900
Subject: [PATCH 2/5] fix: remove pr target limits

---
 .github/workflows/bundle-size.yml     | 3 ---
 .github/workflows/docs-hosting-pr.yml | 3 ---
 .github/workflows/test-storybook.yml  | 3 ---
 .github/workflows/test.yml            | 3 ---
 4 files changed, 12 deletions(-)

diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml
index 81fc121db..6989c0c8c 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -2,9 +2,6 @@ name: Bundle Size
 
 on:
   pull_request:
-    branches:
-      - main
-      - v4.0.0
 
 jobs:
   build:
diff --git a/.github/workflows/docs-hosting-pr.yml b/.github/workflows/docs-hosting-pr.yml
index 38a263f49..02cc02dcb 100644
--- a/.github/workflows/docs-hosting-pr.yml
+++ b/.github/workflows/docs-hosting-pr.yml
@@ -2,9 +2,6 @@ name: Deploy to Preview Channel
 
 on:
   pull_request:
-    branches:
-      - main
-      - v4.0.0
 
 env:
   WORKLOAD_IDENTITY_PROVIDER: 'projects/643536859873/locations/global/workloadIdentityPools/charcoal/providers/github-actions'
diff --git a/.github/workflows/test-storybook.yml b/.github/workflows/test-storybook.yml
index 27ab66133..9ec2f5f86 100644
--- a/.github/workflows/test-storybook.yml
+++ b/.github/workflows/test-storybook.yml
@@ -2,9 +2,6 @@ name: test-storybook
 on:
   pull_request:
     types: [labeled, unlabeled, opened, synchronize, reopened]
-    branches:
-      - main
-      - v4.0.0
 
 concurrency:
   group: ${{ github.ref }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 348320ec9..07d76f6b9 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -5,9 +5,6 @@ on:
       - main
 
   pull_request:
-    branches:
-      - main
-      - v4.0.0
 
 jobs:
   build:

From e26d7513c55b3c43419f34f348d16c1e44ab4c28 Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Wed, 13 Nov 2024 14:01:33 +0900
Subject: [PATCH 3/5] fix: check bundle-size for owned packages only

---
 .github/workflows/bundle-size.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml
index 6989c0c8c..5993752e4 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -20,5 +20,5 @@ jobs:
 
           # sourcemap は見ない
           # d.ts はたまに異常な数の union 型が展開されるとかは検知したいが見なくて良いかもしれない
-          pattern: './packages/**/dist/**/*.{ts,js,cjs}'
+          pattern: './packages/*/dist/**/*.{ts,js,cjs}'
           exclude: '{**/node_modules/**}'

From 5aff40bb5cec1b65a933a9c3c866e1075b537f9e Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Wed, 13 Nov 2024 19:39:51 +0900
Subject: [PATCH 4/5] fix: revert disabled and readonly ui to opacity

---
 .../react/src/components/Button/index.css     |  3 +--
 .../Checkbox/CheckboxInput/index.css          | 19 ++++++++------
 .../react/src/components/Checkbox/index.css   |  6 ++++-
 .../DropdownSelector/ListItem/index.css       |  3 +--
 .../src/components/DropdownSelector/index.css |  3 +--
 .../__snapshots__/index.story.storyshot       | 18 +++++++++++++
 .../react/src/components/IconButton/index.css |  4 +--
 .../src/components/IconButton/index.story.tsx |  6 +++++
 packages/react/src/components/Radio/index.css |  2 +-
 .../src/components/SegmentedControl/index.css |  2 +-
 .../components/Switch/SwitchInput/index.css   |  2 --
 .../react/src/components/Switch/index.css     |  6 +----
 .../react/src/components/TagItem/index.css    |  3 +--
 .../react/src/components/TextArea/index.css   | 16 +++---------
 .../react/src/components/TextField/index.css  | 26 +++++++++----------
 15 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css
index f3b2072f0..8ed00e9c7 100644
--- a/packages/react/src/components/Button/index.css
+++ b/packages/react/src/components/Button/index.css
@@ -32,8 +32,7 @@
 
 .charcoal-button:disabled {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
-  background-color: var(--charcoal-color-container-disable);
+  opacity: 0.32;
 }
 
 .charcoal-button:not(:disabled):focus-visible {
diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.css b/packages/react/src/components/Checkbox/CheckboxInput/index.css
index de692504f..cfa91e4ef 100644
--- a/packages/react/src/components/Checkbox/CheckboxInput/index.css
+++ b/packages/react/src/components/Checkbox/CheckboxInput/index.css
@@ -18,10 +18,12 @@
 .charcoal-checkbox-input:active {
   background-color: var(--charcoal-color-container-press);
 }
-.charcoal-checkbox-input:disabled,
-.charcoal-checkbox-input[readonly] {
+.charcoal-checkbox-input:disabled {
   cursor: default;
-  background-color: var(--charcoal-color-container-disable);
+}
+.charcoal-checkbox-input:read-only {
+  cursor: default;
+  opacity: 0.32;
 }
 
 .charcoal-checkbox-input:checked {
@@ -61,17 +63,18 @@
 .charcoal-checkbox-input:not(:disabled):focus-visible {
   box-shadow: var(--charcoal-color-custom-focus-effect);
 }
-.charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {
-  box-shadow: none;
-}
 
-.charcoal-checkbox-input:checked:not(:disabled):hover {
+.charcoal-checkbox-input:checked:not(:disabled, :read-only):hover {
   background-color: var(--charcoal-color-container-primary-hover);
 }
-.charcoal-checkbox-input:checked:not(:disabled):active {
+.charcoal-checkbox-input:checked:not(:disabled, :read-only):active {
   background-color: var(--charcoal-color-container-primary-press);
 }
 
+.charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .charcoal-checkbox-input[aria-invalid='true'],
 .charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {
   box-shadow: var(--charcoal-color-custom-error-effect);
diff --git a/packages/react/src/components/Checkbox/index.css b/packages/react/src/components/Checkbox/index.css
index aeafa43a9..631bc0e77 100644
--- a/packages/react/src/components/Checkbox/index.css
+++ b/packages/react/src/components/Checkbox/index.css
@@ -8,7 +8,11 @@
 
 .charcoal-checkbox__label[aria-disabled='true'] {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
+  opacity: 0.32;
+}
+
+.charcoal-checkbox__label:has(input:read-only) {
+  cursor: default;
 }
 
 .charcoal-checkbox__label_div {
diff --git a/packages/react/src/components/DropdownSelector/ListItem/index.css b/packages/react/src/components/DropdownSelector/ListItem/index.css
index 348140cf7..edde968c4 100644
--- a/packages/react/src/components/DropdownSelector/ListItem/index.css
+++ b/packages/react/src/components/DropdownSelector/ListItem/index.css
@@ -20,6 +20,5 @@
 
 .charcoal-list-item[aria-disabled='true'] {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
-  background-color: var(--charcoal-color-container-disable);
+  opacity: 0.32;
 }
diff --git a/packages/react/src/components/DropdownSelector/index.css b/packages/react/src/components/DropdownSelector/index.css
index 8465d27fd..3deb00ed3 100644
--- a/packages/react/src/components/DropdownSelector/index.css
+++ b/packages/react/src/components/DropdownSelector/index.css
@@ -8,8 +8,7 @@
 
 .charcoal-dropdown-selector-root[aria-disabled='true'] {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
-  background-color: var(--charcoal-color-container-disable);
+  opacity: 0.32;
 }
 
 .charcoal-dropdown-selector-button {
diff --git a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
index 9a4e8d08c..cfe136237 100644
--- a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
@@ -18,6 +18,24 @@ exports[`Storybook Tests > react/IconButton > Default 1`] = `
 </div>
 `;
 
+exports[`Storybook Tests > react/IconButton > Disabled 1`] = `
+<div
+  data-dark={false}
+>
+  <button
+    className="charcoal-icon-button"
+    data-active={false}
+    data-size="M"
+    data-variant="Default"
+    disabled={true}
+  >
+    <pixiv-icon
+      name="16/Add"
+    />
+  </button>
+</div>
+`;
+
 exports[`Storybook Tests > react/IconButton > IsActive 1`] = `
 <div
   data-dark={false}
diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css
index 9a1b6441d..ed05f13a7 100644
--- a/packages/react/src/components/IconButton/index.css
+++ b/packages/react/src/components/IconButton/index.css
@@ -24,10 +24,10 @@
 }
 
 .charcoal-icon-button:disabled,
+.charcoal-icon-button[data-variant]:disabled,
 .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
-  background-color: var(--charcoal-color-container-disable);
+  opacity: 0.32;
 }
 .charcoal-icon-button:focus {
   outline: none;
diff --git a/packages/react/src/components/IconButton/index.story.tsx b/packages/react/src/components/IconButton/index.story.tsx
index cd5546353..cd554e565 100644
--- a/packages/react/src/components/IconButton/index.story.tsx
+++ b/packages/react/src/components/IconButton/index.story.tsx
@@ -32,3 +32,9 @@ export const Overlay: StoryObj<typeof IconButton> = {
     return <IconButton icon="16/Add" variant="Overlay" />
   },
 }
+
+export const Disabled: StoryObj<typeof IconButton> = {
+  render: () => {
+    return <IconButton icon="16/Add" disabled />
+  },
+}
diff --git a/packages/react/src/components/Radio/index.css b/packages/react/src/components/Radio/index.css
index 72b5a6cfc..8960fcecf 100644
--- a/packages/react/src/components/Radio/index.css
+++ b/packages/react/src/components/Radio/index.css
@@ -8,7 +8,7 @@
 
 .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
+  opacity: 0.32;
 }
 
 .charcoal-radio__label_div {
diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css
index 022e5d026..528ec49f8 100644
--- a/packages/react/src/components/SegmentedControl/index.css
+++ b/packages/react/src/components/SegmentedControl/index.css
@@ -26,7 +26,7 @@
     [aria-disabled='false']
   ) {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
+  opacity: 0.32;
 }
 
 .charcoal-segmented-control-radio__label[data-checked='true'] {
diff --git a/packages/react/src/components/Switch/SwitchInput/index.css b/packages/react/src/components/Switch/SwitchInput/index.css
index c9b37b17d..6e9f59876 100644
--- a/packages/react/src/components/Switch/SwitchInput/index.css
+++ b/packages/react/src/components/Switch/SwitchInput/index.css
@@ -20,8 +20,6 @@
 .charcoal-switch-input:disabled,
 .charcoal-switch-input[readonly] {
   cursor: default;
-  color: var(--charcoal-color-icon-disable);
-  background-color: var(--charcoal-color-container-disable);
 }
 
 .charcoal-switch-input::after {
diff --git a/packages/react/src/components/Switch/index.css b/packages/react/src/components/Switch/index.css
index 489a62334..cb67bced8 100644
--- a/packages/react/src/components/Switch/index.css
+++ b/packages/react/src/components/Switch/index.css
@@ -9,11 +9,7 @@
 
 .charcoal-switch__label[aria-disabled='true'] {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
-}
-
-.charcoal-switch__label[aria-disabled='true'] > input {
-  opacity: 1;
+  opacity: 0.32;
 }
 
 .charcoal-switch__label_div {
diff --git a/packages/react/src/components/TagItem/index.css b/packages/react/src/components/TagItem/index.css
index 34b8aa251..b344ff2fc 100644
--- a/packages/react/src/components/TagItem/index.css
+++ b/packages/react/src/components/TagItem/index.css
@@ -54,8 +54,7 @@
 .charcoal-tag-item:disabled,
 .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
-  background-color: var(--charcoal-color-container-disable);
+  opacity: 0.32;
 }
 .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
 .charcoal-tag-item[aria-disabled='false']:focus-visible {
diff --git a/packages/react/src/components/TextArea/index.css b/packages/react/src/components/TextArea/index.css
index 77463f765..d216974b5 100644
--- a/packages/react/src/components/TextArea/index.css
+++ b/packages/react/src/components/TextArea/index.css
@@ -5,6 +5,10 @@
   grid-gap: 4px;
 }
 
+.charcoal-text-area-root[aria-disabled='true'] {
+  opacity: 0.32;
+}
+
 .charcoal-text-area-container {
   position: relative;
   overflow: hidden;
@@ -25,14 +29,6 @@
   box-shadow: var(--charcoal-color-custom-focus-effect);
 }
 
-.charcoal-text-area-container[aria-disabled='true'] {
-  background-color: var(--charcoal-color-container-disable);
-}
-
-.charcoal-text-area-container:not([aria-disabled='true']):hover {
-  background-color: var(--charcoal-color-container-secondary-hover-a);
-}
-
 .charcoal-text-area-container[aria-invalid='true']:focus-within {
   box-shadow: var(--charcoal-color-custom-error-effect);
 }
@@ -64,10 +60,6 @@
   height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
 }
 
-.charcoal-text-area-textarea[aria-disabled='true'] {
-  color: var(--charcoal-color-text-disable);
-}
-
 .charcoal-text-area-textarea::placeholder {
   color: var(--charcoal-color-text-placeholder-default);
 }
diff --git a/packages/react/src/components/TextField/index.css b/packages/react/src/components/TextField/index.css
index 6e7491938..07e731a23 100644
--- a/packages/react/src/components/TextField/index.css
+++ b/packages/react/src/components/TextField/index.css
@@ -4,6 +4,11 @@
   grid-gap: 4px;
 }
 
+.charcoal-text-field-root[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.32;
+}
+
 .charcoal-text-field-container {
   display: flex;
   height: 40px;
@@ -20,23 +25,16 @@
   box-shadow: var(--charcoal-color-custom-error-effect);
 }
 
-.charcoal-text-field-container[aria-disabled='true'] {
-  background-color: var(--charcoal-color-container-disable);
-}
-
-.charcoal-text-field-container:not([aria-disabled='true']):hover {
-  background-color: var(--charcoal-color-container-secondary-hover-a);
-}
-
-.charcoal-text-field-container:not([aria-disabled='true']):focus-within {
+.charcoal-text-field-container:not(
+    [aria-disabled='true'],
+    [data-invalid='true']
+  ):focus-within {
   outline: none;
   box-shadow: var(--charcoal-color-custom-focus-effect);
 }
 
-.charcoal-text-field-container:not(
-    [aria-disabled='true']
-  )[data-invalid='true']:focus-within {
-  box-shadow: var(--charcoal-color-custom-focus-effect);
+.charcoal-text-field-container:not([aria-disabled='true']):hover {
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-text-field-prefix {
@@ -77,7 +75,7 @@
 }
 
 .charcoal-text-field-input[aria-disabled='true'] {
-  color: var(--charcoal-color-text-disable);
+  opacity: 0.32;
 }
 
 .charcoal-text-field-input::placeholder {

From df4f644ce004c18484a7e5b98ba48e7ac5a48345 Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Wed, 20 Nov 2024 15:39:50 +0900
Subject: [PATCH 5/5] fix: use input[readonly]

---
 packages/react/src/components/Checkbox/CheckboxInput/index.css | 2 +-
 packages/react/src/components/Checkbox/index.css               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.css b/packages/react/src/components/Checkbox/CheckboxInput/index.css
index cfa91e4ef..2667b4788 100644
--- a/packages/react/src/components/Checkbox/CheckboxInput/index.css
+++ b/packages/react/src/components/Checkbox/CheckboxInput/index.css
@@ -21,7 +21,7 @@
 .charcoal-checkbox-input:disabled {
   cursor: default;
 }
-.charcoal-checkbox-input:read-only {
+.charcoal-checkbox-input[readonly] {
   cursor: default;
   opacity: 0.32;
 }
diff --git a/packages/react/src/components/Checkbox/index.css b/packages/react/src/components/Checkbox/index.css
index 631bc0e77..79fe730b1 100644
--- a/packages/react/src/components/Checkbox/index.css
+++ b/packages/react/src/components/Checkbox/index.css
@@ -11,7 +11,7 @@
   opacity: 0.32;
 }
 
-.charcoal-checkbox__label:has(input:read-only) {
+.charcoal-checkbox__label:has(input[readonly]) {
   cursor: default;
 }