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

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

@@ -5,7 +5,7 @@ exports[`Storybook Tests > react/TagItem > Active 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -28,7 +28,7 @@ exports[`Storybook Tests > react/TagItem > Active 1`] = `
         name="16/Remove"
         style="--charcoal-icon-size: 16px;"
       />
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -38,7 +38,7 @@ exports[`Storybook Tests > react/TagItem > BGColor 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -56,7 +56,7 @@ exports[`Storybook Tests > react/TagItem > BGColor 1`] = `
           女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -66,7 +66,7 @@ exports[`Storybook Tests > react/TagItem > BGImage 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="image"
       data-size="M"
@@ -84,7 +84,7 @@ exports[`Storybook Tests > react/TagItem > BGImage 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -94,7 +94,7 @@ exports[`Storybook Tests > react/TagItem > Default 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -112,7 +112,7 @@ exports[`Storybook Tests > react/TagItem > Default 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -122,12 +122,12 @@ exports[`Storybook Tests > react/TagItem > Disabled 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
+      aria-disabled="true"
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
       data-state="default"
-      disabled=""
       style="--charcoal-tag-item-bg: #7ACCB1;"
     >
       <div
@@ -141,7 +141,7 @@ exports[`Storybook Tests > react/TagItem > Disabled 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -151,7 +151,7 @@ exports[`Storybook Tests > react/TagItem > InActive 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -169,7 +169,7 @@ exports[`Storybook Tests > react/TagItem > InActive 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -179,7 +179,7 @@ exports[`Storybook Tests > react/TagItem > Small 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="S"
@@ -197,7 +197,7 @@ exports[`Storybook Tests > react/TagItem > Small 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </div>
 `;
@@ -207,7 +207,7 @@ exports[`Storybook Tests > react/TagItem > TranslatedLabel 1`] = `
   <div
     data-dark="false"
   >
-    <button
+    <a
       class="charcoal-tag-item charcoal-tag-item__bg"
       data-bg-variant="color"
       data-size="M"
@@ -230,7 +230,7 @@ exports[`Storybook Tests > react/TagItem > TranslatedLabel 1`] = `
           #女の子
         </span>
       </div>
-    </button>
+    </a>
   </div>
 </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/TagItem/index.tsx

@@ -4,27 +4,29 @@ import { useClassNames } from '../../_lib/useClassNames'
 import './index.css'
 
 import { useObjectRef } from 'react-aria/useObjectRef'
+import { useLink } from 'react-aria'
 
 type SizeMap = {
   S: 32
   M: 40
 }
 
-export type TagItemProps<T extends React.ElementType = 'button'> = {
+export type TagItemProps<T extends React.ElementType = 'a'> = {
   label: string
   translatedLabel?: string
   bgColor?: string
   bgImage?: string
   status?: 'default' | 'active' | 'inactive'
   size?: keyof SizeMap
+  disabled?: boolean
   /**
    * The component used for root element.
-   * @type T extends React.ElementType = 'button'
+   * @type T extends React.ElementType = 'a'
    */
   component?: T
-} & Omit<React.ComponentPropsWithRef<T>, 'children'>
+} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'disabled'>
 
-const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
+const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
   function TagItemInner<T extends React.ElementType>(
     {
       component,
@@ -34,9 +36,11 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
       bgImage,
       size = 'M',
       status = 'default',
+      disabled,
+      'aria-disabled': ariaDisabled,
       ...props
     }: TagItemProps<T>,
-    _ref: ForwardedRef<HTMLButtonElement>,
+    _ref: ForwardedRef<HTMLAnchorElement>,
   ) {
     const ref = useObjectRef(_ref)
 
@@ -52,11 +56,25 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
       bgImage !== undefined && bgImage.length > 0 ? 'image' : 'color'
     const bg = bgVariant === 'color' ? bgColor : `url(${bgImage ?? ''})`
 
-    const Component = useMemo(() => component ?? 'button', [component])
+    const Component = useMemo(() => component ?? 'a', [component])
+    const isButton = Component === 'button'
+
+    const { linkProps } = useLink(
+      {
+        isDisabled: disabled,
+        elementType: typeof Component === 'string' ? Component : 'a',
+      },
+      ref,
+    )
+
+    const disabledProps = isButton
+      ? { disabled, 'aria-disabled': ariaDisabled }
+      : linkProps
 
     return (
       <Component
         {...props}
+        {...disabledProps}
         ref={ref}
         className={className}
         data-state={status}
@@ -84,6 +102,6 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
       </Component>
     )
   },
-) as <T extends React.ElementType = 'button'>(p: TagItemProps<T>) => JSX.Element
+) as <T extends React.ElementType = 'a'>(p: TagItemProps<T>) => JSX.Element
 
 export default memo(TagItem)

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);
 }
 

package/src/components/TextArea/index.css

@@ -9,11 +9,14 @@
 }
 
 .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,
@@ -30,7 +33,7 @@
   }
 
   &:not([aria-disabled='true']):hover {
-    background-color: var(--charcoal-surface3-hover);
+    background-color: var(--charcoal-color-container-secondary-hover-a);
   }
 
   &[aria-invalid='true']:focus-within {
@@ -66,7 +69,7 @@
   }
 
   &::placeholder {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 }
 
@@ -77,5 +80,5 @@
 
   line-height: 22px;
   font-size: 14px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
 }

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

@@ -1,4 +1,7 @@
 .charcoal-text-ellipsis {
+  /* Runtime variables overridden by the React component. */
+  --charcoal-text-ellipsis-line-limit: 1;
+  --charcoal-text-ellipsis-line-height: inherit;
   overflow: hidden;
   overflow-wrap: break-word;
   display: -webkit-box;

package/src/components/TextEllipsis/index.css

@@ -1,4 +1,8 @@
 .charcoal-text-ellipsis {
+  /* Runtime variables overridden by the React component. */
+  --charcoal-text-ellipsis-line-limit: 1;
+  --charcoal-text-ellipsis-line-height: inherit;
+
   overflow: hidden;
   overflow-wrap: break-word;
   display: -webkit-box;

package/src/components/TextField/AssistiveText/index.css

@@ -2,9 +2,9 @@
   font-size: 14px;
   line-height: 22px;
   margin: 0;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-text-field-assistive-text[data-invalid='true'] {
-  color: var(--charcoal-assertive);
+  color: var(--charcoal-color-text-negative-default);
 }

package/src/components/TextField/TextField.story.tsx

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

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

@@ -13,8 +13,8 @@
   height: 40px;
   transition: 0.2s background-color,
     0.2s box-shadow;
-  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;
   padding: 0 8px;
   line-height: 22px;
@@ -26,7 +26,7 @@
 }
 
 .charcoal-text-field-container:not([aria-disabled='true']):hover {
-  background-color: var(--charcoal-surface3-hover);
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
@@ -77,16 +77,16 @@
   /* Display box-shadow for iOS Safari */
   appearance: none;
   background: transparent;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-text-field-input::placeholder {
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-placeholder-default);
 }
 
 .charcoal-text-field-line-counter {
   line-height: 22px;
   font-size: 14px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
 }