@charcoal-ui/react 6.0.0-beta.1 → 6.0.0-rc.0

package/src/components/Button/index.css

@@ -24,8 +24,8 @@
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   transition:
     0.2s color,
     0.2s background-color,
@@ -46,86 +46,86 @@
 
   &:not(:disabled):not([aria-disabled]):hover,
   &[aria-disabled='false']:hover {
-    color: var(--charcoal-text2-hover);
-    background-color: var(--charcoal-surface3-hover);
+    color: var(--charcoal-color-text-hover);
+    background-color: var(--charcoal-color-container-secondary-hover-a);
   }
 
   &:not(:disabled):not([aria-disabled]):active,
   &[aria-disabled='false']:active,
   &[data-active='true'] {
-    color: var(--charcoal-text2-press);
-    background-color: var(--charcoal-surface3-press);
+    color: var(--charcoal-color-text-press);
+    background-color: var(--charcoal-color-container-secondary-press-a);
   }
 
   &[data-variant='Primary'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-brand);
+    color: var(--charcoal-color-text-on-primary-default);
+    background-color: var(--charcoal-color-container-primary-default);
 
     &:hover:not(:disabled):not([aria-disabled]),
     &:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-brand-hover);
+      color: var(--charcoal-color-text-on-primary-hover);
+      background-color: var(--charcoal-color-container-primary-hover);
     }
 
     &:active:not(:disabled):not([aria-disabled]),
     &:active[aria-disabled='false'],
     &[data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-brand-press);
+      color: var(--charcoal-color-text-on-primary-press);
+      background-color: var(--charcoal-color-container-primary-press);
     }
   }
 
   &[data-variant='Overlay'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface4);
+    color: var(--charcoal-color-text-on-on-img-default);
+    background-color: var(--charcoal-color-container-on-img-default);
 
     &:hover:not(:disabled):not([aria-disabled]),
     &:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface4-hover);
+      color: var(--charcoal-color-text-on-on-img-hover);
+      background-color: var(--charcoal-color-container-on-img-hover);
     }
 
     &:active:not(:disabled):not([aria-disabled]),
     &:active[aria-disabled='false'],
     &[data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
+      color: var(--charcoal-color-text-on-on-img-press);
+      background-color: var(--charcoal-color-container-on-img-press);
     }
   }
 
   &[data-variant='Navigation'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface6);
+    color: var(--charcoal-color-text-on-hud-default);
+    background-color: var(--charcoal-color-container-hud-default);
 
     &:hover:not(:disabled):not([aria-disabled]),
     &:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface6-hover);
+      color: var(--charcoal-color-text-on-hud-hover);
+      background-color: var(--charcoal-color-container-hud-hover);
     }
 
     &:active:not(:disabled):not([aria-disabled]),
     &:active[aria-disabled='false'],
     &[data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface6-press);
+      color: var(--charcoal-color-text-on-hud-press);
+      background-color: var(--charcoal-color-container-hud-press);
     }
   }
 
   &[data-variant='Danger'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-assertive);
+    color: var(--charcoal-color-text-on-negative-default);
+    background-color: var(--charcoal-color-container-negative-default);
 
     &:hover:not(:disabled):not([aria-disabled]),
     &:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-assertive-hover);
+      color: var(--charcoal-color-text-on-negative-hover);
+      background-color: var(--charcoal-color-container-negative-hover);
     }
 
     &:active:not(:disabled):not([aria-disabled]),
     &:active[aria-disabled='false'],
     &[data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-assertive-press);
+      color: var(--charcoal-color-text-on-negative-press);
+      background-color: var(--charcoal-color-container-negative-press);
     }
   }
 

package/src/components/Button/index.story.tsx

@@ -26,6 +26,24 @@ export const Danger: StoryObj<typeof Button> = {
   render: () => <Button variant="Danger">Danger</Button>,
 }
 
+export const TokenV2: StoryObj<typeof Button> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+      <Button>Default</Button>
+      <Button variant="Primary">Primary</Button>
+      <Button variant="Navigation">Navigation</Button>
+      <Button variant="Overlay">Overlay</Button>
+      <Button variant="Danger">Danger</Button>
+      <Button isActive>Active</Button>
+      <Button disabled>Disabled</Button>
+      <Button size="S">Small</Button>
+    </div>
+  ),
+}
+
 export const Small: StoryObj<typeof Button> = {
   render: () => <Button size="S">Small</Button>,
 }

package/src/components/Checkbox/CheckboxInput/index.css

@@ -20,7 +20,7 @@
 }
 
 .charcoal-checkbox-input:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-checkbox-input:checked::after {
@@ -38,7 +38,7 @@
 .charcoal-checkbox-input:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: var(--charcoal-text4);
+  border-color: var(--charcoal-color-border-default);
 }
 
 .charcoal-checkbox-input:not(:disabled):focus {
@@ -53,10 +53,10 @@
 }
 
 .charcoal-checkbox-input:checked:not(:disabled):hover {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 .charcoal-checkbox-input:checked:not(:disabled):active {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }
 
 .charcoal-checkbox-input[aria-invalid='true'],
@@ -66,19 +66,19 @@
 
 .charcoal-checkbox-input[data-rounded='true'] {
   border-radius: 10px;
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default);
   border: 2px solid transparent;
 }
 
 .charcoal-checkbox-input[data-rounded='true']:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {
-  background-color: var(--charcoal-surface3-hover);
+  background-color: var(--charcoal-color-container-secondary-hover);
 }
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {
-  background-color: var(--charcoal-surface3-press);
+  background-color: var(--charcoal-color-container-secondary-press);
 }
 
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {
@@ -86,10 +86,10 @@
 }
 
 .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }
 
 .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],

package/src/components/Checkbox/__snapshots__/index.css.snap

@@ -16,7 +16,7 @@
 
 .charcoal-checkbox__label_div {
   flex: 1;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
   font-size: 14px;
   line-height: 20px;
 }

package/src/components/Checkbox/index.css

@@ -16,7 +16,7 @@
 
 .charcoal-checkbox__label_div {
   flex: 1;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
   font-size: 14px;
   line-height: 20px;
 }

package/src/components/Checkbox/index.story.tsx

@@ -71,3 +71,21 @@ export const Invalid: StoryObj<typeof Checkbox> = {
     )
   },
 }
+
+export const TokenV2: StoryObj<typeof Checkbox> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: () => {
+    return (
+      <div style={{ display: 'grid', gap: 16 }}>
+        <Checkbox>Default</Checkbox>
+        <Checkbox checked>Checked</Checkbox>
+        <Checkbox invalid>Invalid</Checkbox>
+        <Checkbox checked disabled>
+          Disabled
+        </Checkbox>
+      </div>
+    )
+  },
+}

package/src/components/Clickable/index.story.tsx

@@ -18,3 +18,17 @@ export const Link: StoryObj = {
     </Clickable>
   ),
 }
+
+export const TokenV2: StoryObj = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: () => (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <Clickable onClick={action('click')}>button</Clickable>
+      <Clickable component="a" href="#" onClick={action('click')}>
+        link
+      </Clickable>
+    </div>
+  ),
+}

package/src/components/DropdownSelector/DropdownMenuItem/index.css

@@ -1,7 +1,7 @@
 .charcoal-dropdown-selector-menu-item {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
   padding: 9px 0;
 
   display: flex;
@@ -15,7 +15,7 @@
 }
 
 .charcoal-dropdown-selector-menu-item-icon {
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
   padding-right: 4px;
 }
 
@@ -27,7 +27,7 @@
 .charcoal-dropdown-selector-menu-secondary {
   font-size: 12px;
   line-height: 20px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   padding-bottom: 9px;
 
   display: flex;

package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot

@@ -14,7 +14,9 @@ exports[`Storybook Tests > react/internals/ListItem > Basic 1`] = `
       class="charcoal-list-item"
     >
       <pixiv-icon
+        class="charcoal-icon"
         name="16/Add"
+        style="--charcoal-icon-size: 16px;"
       />
        Add
     </li>

package/src/components/DropdownSelector/ListItem/index.css

@@ -15,7 +15,7 @@
 .charcoal-list-item:not([aria-disabled='true']):hover,
 .charcoal-list-item:not([aria-disabled='true']):focus,
 .charcoal-list-item:not([aria-disabled='true']):focus-within {
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default);
 }
 
 .charcoal-list-item[aria-disabled='true'] {

package/src/components/DropdownSelector/MenuItemGroup/index.css

@@ -4,7 +4,7 @@
 
 .charcoal-menu-item-group > span {
   display: block;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;

package/src/components/DropdownSelector/Popover/index.css

@@ -3,8 +3,8 @@
   list-style: none;
   overflow: auto;
   max-height: inherit;
-  background-color: var(--charcoal-background1);
-  border: solid 1px var(--charcoal-border-default);
+  background-color: var(--charcoal-color-background-default);
+  border: solid 1px var(--charcoal-color-border-secondary);
   border-radius: 8px;
   padding-top: 8px;
   padding-bottom: 8px;

package/src/components/DropdownSelector/__snapshots__/index.css.snap

@@ -23,7 +23,7 @@
   gap: 4px;
   padding-right: 8px;
   padding-left: 8px;
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   transition: 0.2s box-shadow,
     0.2s background-color;
@@ -43,11 +43,11 @@
 }
 
 .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'], .charcoal-dropdown-selector-button:not(:disabled):active {
-  background-color: var(--charcoal-surface3-press);
+  background-color: var(--charcoal-color-container-secondary-press-a);
 }
 
 .charcoal-dropdown-selector-button:not(:disabled):hover {
-  background-color: var(--charcoal-surface3-hover);
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
@@ -63,17 +63,17 @@
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-placeholder-default);
 }
 
 .charcoal-ui-dropdown-selector-icon {
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-icon-secondary-default);
 }
 

package/src/components/DropdownSelector/__snapshots__/index.story.storyshot

@@ -65,8 +65,9 @@ exports[`Storybook Tests > react/DropdownSelector > AssistiveText 1`] = `
             Option 1
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
         <div
@@ -150,8 +151,9 @@ exports[`Storybook Tests > react/DropdownSelector > CustomChildren 1`] = `
             </div>
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -220,8 +222,9 @@ exports[`Storybook Tests > react/DropdownSelector > Default 1`] = `
             data-placeholder="false"
           />
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -296,8 +299,9 @@ exports[`Storybook Tests > react/DropdownSelector > Disabled 1`] = `
             Option 1
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -381,8 +385,9 @@ exports[`Storybook Tests > react/DropdownSelector > DisabledItem 1`] = `
             Option 2 (disabled)
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -456,8 +461,9 @@ exports[`Storybook Tests > react/DropdownSelector > InFormTag 1`] = `
             Option 1
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -555,8 +561,9 @@ exports[`Storybook Tests > react/DropdownSelector > Invalid 1`] = `
             Option 1
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -631,8 +638,9 @@ exports[`Storybook Tests > react/DropdownSelector > InvalidAssistiveText 1`] = `
             Option 1
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
         <div
@@ -711,8 +719,9 @@ exports[`Storybook Tests > react/DropdownSelector > Label 1`] = `
             Option 1
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -785,8 +794,9 @@ exports[`Storybook Tests > react/DropdownSelector > LongNames 1`] = `
             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -863,8 +873,9 @@ exports[`Storybook Tests > react/DropdownSelector > RequiredText 1`] = `
             Option 1
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -952,8 +963,9 @@ exports[`Storybook Tests > react/DropdownSelector > Section 1`] = `
             Banana
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>
@@ -1027,8 +1039,9 @@ exports[`Storybook Tests > react/DropdownSelector > SubLabel 1`] = `
             Option 1
           </span>
           <pixiv-icon
-            class="charcoal-ui-dropdown-selector-icon"
+            class="charcoal-icon charcoal-ui-dropdown-selector-icon"
             name="16/Menu"
+            style="--charcoal-icon-size: 16px;"
           />
         </button>
       </div>

package/src/components/DropdownSelector/index.css

@@ -25,7 +25,7 @@
 
   padding-right: 8px;
   padding-left: 8px;
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
 
   transition:
@@ -48,11 +48,11 @@
 
     &[data-active='true'],
     &:active {
-      background-color: var(--charcoal-surface3-press);
+      background-color: var(--charcoal-color-container-secondary-press-a);
     }
 
     &:hover {
-      background-color: var(--charcoal-surface3-hover);
+      background-color: var(--charcoal-color-container-secondary-hover-a);
     }
 
     &:focus:not(:focus-visible) {
@@ -71,16 +71,16 @@
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 
   &[data-placeholder='true'] {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 }
 
 .charcoal-ui-dropdown-selector-icon {
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-icon-secondary-default);
 }

package/src/components/DropdownSelector/index.story.tsx

@@ -454,6 +454,55 @@ export const WithSeconday: StoryObj<typeof DropdownSelector> = {
   },
 }
 
+export const TokenV2: StoryObj<typeof DropdownSelector> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: function Render(props) {
+    const [selected, setSelected] = useState('option-3')
+    const [invalidSelected, setInvalidSelected] = useState('option-1')
+
+    return (
+      <div style={{ display: 'grid', gap: 24, width: 288 }}>
+        <DropdownSelector
+          {...props}
+          value={selected}
+          onChange={setSelected}
+          label="Label"
+          showLabel
+          required
+          requiredText="required"
+          subLabel="SubLabel"
+          assistiveText="assistiveText"
+        >
+          <DropdownMenuItem value="option-1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="option-2" disabled>
+            Option 2 (disabled)
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            value="option-3"
+            secondary={<span>Option 3 Secondary</span>}
+          >
+            Option 3
+          </DropdownMenuItem>
+        </DropdownSelector>
+        <DropdownSelector
+          {...props}
+          value={invalidSelected}
+          onChange={setInvalidSelected}
+          label="Invalid"
+          invalid
+          assistiveText="エラーメッセージ"
+        >
+          <DropdownMenuItem value="option-1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="option-2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="option-3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
+  },
+}
+
 export const WithRef: StoryObj<typeof DropdownSelector> = {
   render: function Render(props) {
     const [selected, setSelected] = useState('1')

package/src/components/FieldLabel/__snapshots__/index.css.snap

@@ -3,21 +3,21 @@
   line-height: 22px;
   font-weight: bold;
   display: flow-root;
-  color: var(--charcoal-text1);
+  color: var(--charcoal-color-text-default);
 }
 
 .charcoal-field-label-required-text {
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-field-label-sub-label {
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   transition: 0.2s color,
     0.2s box-shadow;
 }