Merge pull request #652 from pixiv/yue/replace-token1-modify

fix: update design token usage
pixiv · Nov 20, 2024 · ce5294c · ce5294c
2 parents 178fe0d + df4f644
commit ce5294c
Show file tree

Hide file tree

Showing 32 changed files with 166 additions and 119 deletions.
diff --git 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:
@@ -23,5 +20,5 @@ jobs:
 
           # sourcemap は見ない
           # d.ts はたまに異常な数の union 型が展開されるとかは検知したいが見なくて良いかもしれない
-          pattern: './packages/**/dist/**/*.{ts,js,cjs}'
+          pattern: './packages/*/dist/**/*.{ts,js,cjs}'
           exclude: '{**/node_modules/**}'
diff --git 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
@@ -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
@@ -5,9 +5,6 @@ on:
       - main
 
   pull_request:
-    branches:
-      - main
-      - v4.0.0
 
 jobs:
   build:

diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css
@@ -24,16 +24,15 @@
   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;
 }
 
 .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 {
@@ -42,14 +41,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
@@ -9,12 +9,21 @@
   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:disabled,
+.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 {
+  cursor: default;
+}
 .charcoal-checkbox-input[readonly] {
   cursor: default;
-  background-color: var(--charcoal-color-container-disable);
+  opacity: 0.32;
 }
 
 .charcoal-checkbox-input:checked {
@@ -23,7 +32,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 +42,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;
@@ -46,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
@@ -3,12 +3,16 @@
   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'] {
   cursor: default;
-  color: var(--charcoal-color-text-disable);
+  opacity: 0.32;
+}
+
+.charcoal-checkbox__label:has(input[readonly]) {
+  cursor: default;
 }
 
 .charcoal-checkbox__label_div {

diff --git 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
@@ -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/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/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
@@ -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
@@ -3,12 +3,12 @@
   grid-template-columns: 1fr;
   grid-gap: 4px;
   width: 100%;
+  border-radius: 4px;
 }
 
 .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 {
@@ -26,7 +26,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 +47,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 +70,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 +81,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
@@ -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/__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}
-Original file line number
+Diff line change
@@ Expand Up / @@ -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'
@@ Expand Down @@