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

package/src/components/Pagination/Pagination.story.tsx

@@ -108,6 +108,17 @@ export const PageRange5: StoryObj<typeof Pagination> = {
   },
 }
 
+export const TokenV2: StoryObj<typeof Pagination> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  args: {
+    page: 50,
+    pageCount: 103,
+    pageRangeDisplayed: 5,
+  },
+}
+
 export const LinkPaginationStory: StoryObj<typeof Pagination> = {
   args: {
     page: 5,

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

@@ -39,8 +39,8 @@
    */
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-transform: translateZ(0);
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
+  color: var(--charcoal-color-text-tertiary-default);
+  background-color: var(--charcoal-color-container-default-a);
   border-radius: 20px;
   transition: 0.2s background-color,
     0.2s box-shadow;
@@ -61,13 +61,13 @@
 }
 
 .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover, .charcoal-pagination-button[aria-disabled='false']:hover {
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-tertiary-default);
+  background-color: var(--charcoal-color-container-secondary-default);
 }
 
 .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active, .charcoal-pagination-button[aria-disabled='false']:active {
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-surface10);
+  color: var(--charcoal-color-text-tertiary-press);
+  background-color: var(--charcoal-color-container-tertiary-press);
 }
 
 .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus, .charcoal-pagination-button[aria-disabled='false']:focus {
@@ -85,26 +85,23 @@
 
 .charcoal-pagination-button[aria-current] {
   cursor: default;
-  background-color: var(--charcoal-surface6);
-  color: var(--charcoal-text5);
+  background-color: var(--charcoal-color-container-hud-default);
+  color: var(--charcoal-color-text-on-hud-default);
 }
 
 .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover, .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {
-  background-color: var(--charcoal-surface6);
-  color: var(--charcoal-text5);
+  background-color: var(--charcoal-color-container-hud-default);
+  color: var(--charcoal-color-text-on-hud-default);
 }
 /* stylelint-enable no-descending-specificity */
 
-/* Kept flat: different root class from .charcoal-pagination-button */
-
-.charcoal-pagination-nav-button[hidden] {
+.charcoal-pagination-nav-button[data-hidden] {
   visibility: hidden;
-  display: block;
 }
 
 .charcoal-pagination-spacer, .charcoal-pagination-spacer:hover, .charcoal-pagination-spacer:active {
   cursor: default;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   background: none;
 }
 

package/src/components/Pagination/index.css

@@ -40,8 +40,8 @@
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-transform: translateZ(0);
 
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
+  color: var(--charcoal-color-text-tertiary-default);
+  background-color: var(--charcoal-color-container-default-a);
   border-radius: 20px;
   transition:
     0.2s background-color,
@@ -63,14 +63,14 @@
 
   &:not(:disabled):not([aria-disabled]):hover,
   &[aria-disabled='false']:hover {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-surface3);
+    color: var(--charcoal-color-text-tertiary-default);
+    background-color: var(--charcoal-color-container-secondary-default);
   }
 
   &:not(:disabled):not([aria-disabled]):active,
   &[aria-disabled='false']:active {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-surface10);
+    color: var(--charcoal-color-text-tertiary-press);
+    background-color: var(--charcoal-color-container-tertiary-press);
   }
 
   &:not(:disabled):not([aria-disabled]):focus,
@@ -91,22 +91,20 @@
 
   &[aria-current] {
     cursor: default;
-    background-color: var(--charcoal-surface6);
-    color: var(--charcoal-text5);
+    background-color: var(--charcoal-color-container-hud-default);
+    color: var(--charcoal-color-text-on-hud-default);
 
     &:not(:disabled):not([aria-disabled]):hover,
     &:not(:disabled):not([aria-disabled]):active {
-      background-color: var(--charcoal-surface6);
-      color: var(--charcoal-text5);
+      background-color: var(--charcoal-color-container-hud-default);
+      color: var(--charcoal-color-text-on-hud-default);
     }
   }
 }
 /* stylelint-enable no-descending-specificity */
 
-/* Kept flat: different root class from .charcoal-pagination-button */
-.charcoal-pagination-nav-button[hidden] {
+.charcoal-pagination-nav-button[data-hidden] {
   visibility: hidden;
-  display: block;
 }
 
 .charcoal-pagination-spacer {
@@ -114,7 +112,7 @@
   &:hover,
   &:active {
     cursor: default;
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-tertiary-default);
     background: none;
   }
 

package/src/components/Pagination/index.tsx

@@ -44,7 +44,8 @@ function NavButton({ direction, ariaLabel }: NavButtonProps) {
     <IconButton
       icon={isPrev ? '24/Prev' : '24/Next'}
       size={size}
-      hidden={disabled}
+      /* Use data-hidden, not [hidden]: Tailwind preflight's `[hidden] { display: none !important }` would clobber `visibility: hidden` and collapse the layout space. */
+      data-hidden={disabled || undefined}
       aria-label={ariaLabel}
       {...(isLinkMode && makeUrl
         ? {

package/src/components/Radio/RadioInput/index.css

@@ -10,14 +10,14 @@
   height: 20px;
   cursor: pointer;
   border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
+  background-color: var(--charcoal-color-container-default);
   transition:
     0.2s background-color,
     0.2s box-shadow;
 }
 
 .charcoal-radio-input:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-radio-input:checked::after {
@@ -26,7 +26,7 @@
   width: 8px;
   height: 8px;
   pointer-events: none;
-  background-color: var(--charcoal-text5);
+  background-color: var(--charcoal-color-icon-on-primary-default);
   border-radius: 999999px;
   transition:
     0.2s background-color,
@@ -36,7 +36,7 @@
 .charcoal-radio-input:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: var(--charcoal-text3);
+  border-color: var(--charcoal-color-border-default);
 }
 
 .charcoal-radio-input:disabled {
@@ -44,11 +44,11 @@
 }
 
 .charcoal-radio-input:not(:disabled):hover {
-  background-color: var(--charcoal-surface1-hover);
+  background-color: var(--charcoal-color-container-hover);
 }
 
 .charcoal-radio-input:not(:disabled):active {
-  background-color: var(--charcoal-surface1-press);
+  background-color: var(--charcoal-color-container-press);
 }
 
 .charcoal-radio-input:not(:disabled):focus {
@@ -70,17 +70,17 @@
 }
 
 .charcoal-radio-input:checked:not(:disabled):hover {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 
 .charcoal-radio-input:checked:not(:disabled):hover::after {
-  background-color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-color-icon-on-primary-hover);
 }
 
 .charcoal-radio-input:checked:not(:disabled):active {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }
 
 .charcoal-radio-input:checked:not(:disabled):active::after {
-  background-color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-color-icon-on-primary-press);
 }

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

@@ -14,6 +14,6 @@
 .charcoal-radio__label_div {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 }
 

package/src/components/Radio/index.css

@@ -14,5 +14,5 @@
 .charcoal-radio__label_div {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 }

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

@@ -146,3 +146,43 @@ export const Invalid: StoryObj<typeof Radio> = {
     )
   },
 }
+
+export const TokenV2: StoryObj<typeof Radio> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: function Render() {
+    const [defaultValue, setDefaultValue] = useState<Option>(options[0])
+    const [invalidValue, setInvalidValue] = useState<Option>(options[1])
+
+    return (
+      <LayoutDiv>
+        <RadioGroup<Option>
+          name="token_v2_default_story"
+          label="default"
+          value={defaultValue}
+          onChange={setDefaultValue}
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option} disabled={option === '3'}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+        <RadioGroup<Option>
+          name="token_v2_invalid_story"
+          label="invalid"
+          value={invalidValue}
+          onChange={setInvalidValue}
+          invalid
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}

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

@@ -1,7 +1,7 @@
 .charcoal-segmented-control {
   display: inline-flex;
   align-items: center;
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 16px;
 }
 
@@ -26,7 +26,7 @@
   padding-right: 16px;
   padding-left: 16px;
   border-radius: 16px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
   font-size: 14px;
   line-height: 22px;
 }
@@ -37,8 +37,8 @@
 }
 
 .charcoal-segmented-control-radio__label[data-checked='true'] {
-  background-color: var(--charcoal-brand);
-  color: var(--charcoal-text5);
+  background-color: var(--charcoal-color-container-primary-default);
+  color: var(--charcoal-color-text-on-primary-default);
 }
 
 .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'], .charcoal-segmented-control-radio__label[data-full-width='true'] {

package/src/components/SegmentedControl/index.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
 
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 16px;
 
   &[data-uniform-segment-width='true'],
@@ -29,7 +29,7 @@
   padding-right: 16px;
   padding-left: 16px;
   border-radius: 16px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 
   font-size: 14px;
   line-height: 22px;
@@ -40,8 +40,8 @@
   }
 
   &[data-checked='true'] {
-    background-color: var(--charcoal-brand);
-    color: var(--charcoal-text5);
+    background-color: var(--charcoal-color-container-primary-default);
+    color: var(--charcoal-color-text-on-primary-default);
   }
 
   &[data-uniform-segment-width='true'],

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

@@ -118,3 +118,23 @@ export const UniformWidthAndFullWidthSegments: StoryObj<
     fullWidth: true,
   },
 }
+
+export const TokenV2: StoryObj<typeof SegmentedControl> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  args: {
+    name: 'token-v2',
+    data: [
+      { label: '選択肢1', value: 'option1' },
+      { label: '選択肢2', value: 'option2' },
+      { label: '選択肢3', value: 'option3' },
+      { label: 'Disabled', value: 'option4', disabled: true },
+    ],
+    disabled: false,
+    readonly: false,
+    required: false,
+    uniformSegmentWidth: true,
+    fullWidth: false,
+  },
+}

package/src/components/Switch/SwitchInput/index.css

@@ -14,7 +14,7 @@
   border-radius: 16px;
   height: 16px;
   margin: 0;
-  background-color: var(--charcoal-text4);
+  background-color: var(--charcoal-color-container-neutral-default);
 }
 
 .charcoal-switch-input:disabled,
@@ -34,7 +34,7 @@
   transform: translateX(0);
   transition: transform 0.2s;
   border-radius: 1024px;
-  background-color: var(--charcoal-text5);
+  background-color: var(--charcoal-color-icon-on-primary-default);
 }
 
 .charcoal-switch-input:checked::after {
@@ -43,15 +43,15 @@
 }
 
 .charcoal-switch-input:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-switch-input:not(:disabled):hover {
-  background-color: var(--charcoal-text4-hover);
+  background-color: var(--charcoal-color-container-neutral-hover);
 }
 
 .charcoal-switch-input:not(:disabled):active {
-  background-color: var(--charcoal-text4-press);
+  background-color: var(--charcoal-color-container-neutral-press);
 }
 
 .charcoal-switch-input:not(:disabled):focus {
@@ -66,17 +66,17 @@
 }
 
 .charcoal-switch-input:not(:disabled)::after:hover {
-  background-color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-color-icon-on-primary-hover);
 }
 
 .charcoal-switch-input:not(:disabled)::after:active {
-  background-color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-color-icon-on-primary-press);
 }
 
 .charcoal-switch-input:not(:disabled):checked:hover {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 
 .charcoal-switch-input:not(:disabled):checked:active {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }

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

@@ -19,6 +19,6 @@
 .charcoal-switch__label_div {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 }
 

package/src/components/Switch/index.css

@@ -19,5 +19,5 @@
 .charcoal-switch__label_div {
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 }

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

@@ -81,3 +81,22 @@ export const Disabled: StoryObj<typeof Switch> = {
     )
   },
 }
+
+export const TokenV2: StoryObj<typeof Switch> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: function Render() {
+    const [checked, setChecked] = useState(true)
+    return (
+      <div style={{ display: 'grid', gap: 16 }}>
+        <Switch name="token-v2-default" checked={checked} onChange={setChecked}>
+          Label
+        </Switch>
+        <Switch name="token-v2-disabled" checked disabled>
+          Disabled
+        </Switch>
+      </div>
+    )
+  },
+}

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

@@ -1,8 +1,9 @@
 .charcoal-tag-item {
-  --charcoal-tag-item-color: var(--charcoal-text5);
+  --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);
   --charcoal-tag-item-size: 40px;
   --charcoal-tag-item-padding-left: 24px;
   --charcoal-tag-item-padding-right: 24px;
+  --charcoal-tag-item-bg:  ;
   isolation: isolate;
   position: relative;
   appearance: none;
@@ -39,7 +40,7 @@
 }
 
 .charcoal-tag-item[data-state='inactive'] {
-  --charcoal-tag-item-color: var(--charcoal-text2);
+  --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-tag-item[data-state='active'] {
@@ -71,7 +72,7 @@
 }
 
 .charcoal-tag-item__bg[data-bg-variant='image'] {
-  background-color: var(--charcoal-surface4);
+  background-color: var(--charcoal-color-container-on-img-default);
 }
 
 .charcoal-tag-item__bg[data-bg-variant='image']::before {
@@ -89,7 +90,7 @@
 }
 
 .charcoal-tag-item__bg[data-state='inactive'] {
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default);
 }
 
 .charcoal-tag-item__label {

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

@@ -24,7 +24,9 @@ exports[`Storybook Tests > react/TagItem > Active 1`] = `
         </span>
       </div>
       <pixiv-icon
+        class="charcoal-icon"
         name="16/Remove"
+        style="--charcoal-icon-size: 16px;"
       />
     </button>
   </div>

package/src/components/TagItem/index.css

@@ -1,8 +1,9 @@
 .charcoal-tag-item {
-  --charcoal-tag-item-color: var(--charcoal-text5);
+  --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);
   --charcoal-tag-item-size: 40px;
   --charcoal-tag-item-padding-left: 24px;
   --charcoal-tag-item-padding-right: 24px;
+  --charcoal-tag-item-bg: ;
 
   isolation: isolate;
   position: relative;
@@ -44,7 +45,7 @@
   }
 
   &[data-state='inactive'] {
-    --charcoal-tag-item-color: var(--charcoal-text2);
+    --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);
   }
 
   &[data-state='active'] {
@@ -80,7 +81,7 @@
   background-color: var(--charcoal-tag-item-bg);
 
   &[data-bg-variant='image'] {
-    background-color: var(--charcoal-surface4);
+    background-color: var(--charcoal-color-container-on-img-default);
 
     &::before {
       content: '';
@@ -98,7 +99,7 @@
   }
 
   &[data-state='inactive'] {
-    background-color: var(--charcoal-surface3);
+    background-color: var(--charcoal-color-container-secondary-default);
   }
 }
 

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

@@ -64,3 +64,20 @@ export const Disabled: StoryObj<typeof TagItem> = {
     return <TagItem label="#女の子" disabled />
   },
 }
+
+export const TokenV2: StoryObj<typeof TagItem> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: function Render() {
+    return (
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+        <TagItem label="#女の子" translatedLabel="girl" />
+        <TagItem label="#女の子" status="active" />
+        <TagItem label="#女の子" status="inactive" />
+        <TagItem label="#女の子" disabled />
+        <TagItem label="女の子" bgColor="var(--charcoal-brand)" />
+      </div>
+    )
+  },
+}

package/src/components/TextArea/TextArea.story.tsx

@@ -84,6 +84,36 @@ export const Invalid: StoryObj<typeof TextArea> = {
   },
 }
 
+export const TokenV2: StoryObj<typeof TextArea> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render() {
+    return (
+      <div style={{ display: 'grid', gap: 24, width: 320 }}>
+        <TextArea
+          label="Label"
+          showLabel
+          required
+          requiredText="*必須"
+          subLabel={<Clickable>Text Link</Clickable>}
+          placeholder="Placeholder"
+          assistiveText="説明が入ります"
+          showCount
+          maxLength={100}
+        />
+        <TextArea
+          label="Invalid"
+          invalid
+          placeholder="Placeholder"
+          assistiveText="エラーメッセージ"
+        />
+        <TextArea label="Disabled" disabled value="Disabled value" />
+      </div>
+    )
+  },
+}
+
 export const ReadOnly: StoryObj<typeof TextArea> = {
   render() {
     return <TextArea label="Label" readOnly value="読み取り専用" />

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

@@ -9,10 +9,12 @@
 }
 
 .charcoal-text-area-container {
+  /* Runtime variable overridden by the React component. */
+  --charcoal-text-area-rows: 4;
   position: relative;
   overflow: hidden;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   transition: 0.2s background-color,
     0.2s box-shadow;
@@ -29,7 +31,7 @@
 }
 
 .charcoal-text-area-container:not([aria-disabled='true']):hover {
-  background-color: var(--charcoal-surface3-hover);
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-text-area-container[aria-invalid='true']:focus-within {
@@ -64,7 +66,7 @@
 }
 
 .charcoal-text-area-textarea::placeholder {
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-placeholder-default);
 }
 
 .charcoal-text-area-counter {
@@ -73,6 +75,6 @@
   right: 8px;
   line-height: 22px;
   font-size: 14px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
 }