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

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

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

package/src/components/TextField/index.css

@@ -14,8 +14,8 @@
   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 @@
   }
 
   &:not([aria-disabled='true']):hover {
-    background-color: var(--charcoal-surface3-hover);
+    background-color: var(--charcoal-color-container-secondary-hover-a);
   }
 
   &:not([aria-disabled='true']):focus-within {
@@ -79,15 +79,15 @@
   appearance: none;
   background: transparent;
 
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 
   &::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);
 }