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

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

package/src/components/FieldLabel/index.css

@@ -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;

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

@@ -1,5 +1,5 @@
 .charcoal-hint-text {
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default);
   border-radius: 8px;
   padding: 12px 16px;
   display: flex;
@@ -20,13 +20,13 @@
 .charcoal-hint-text-icon {
   display: flex;
   align-items: center;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-icon-tertiary-default);
   height: 22px;
   margin: 0 4px 0 0;
 }
 
 .charcoal-hint-text-message {
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
   font-size: 14px;
   line-height: 22px;
   display: flow-root;

package/src/components/HintText/index.css

@@ -1,5 +1,5 @@
 .charcoal-hint-text {
-  background-color: var(--charcoal-surface3);
+  background-color: var(--charcoal-color-container-secondary-default);
   border-radius: 8px;
   padding: 12px 16px;
   display: flex;
@@ -17,13 +17,13 @@
 .charcoal-hint-text-icon {
   display: flex;
   align-items: center;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-icon-tertiary-default);
   height: 22px;
   margin: 0 4px 0 0;
 }
 
 .charcoal-hint-text-message {
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
   font-size: 14px;
   line-height: 22px;
   display: flow-root;

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

@@ -37,3 +37,15 @@ export const NarrowWidth: StoryObj<typeof HintText> = {
     </div>
   ),
 }
+
+export const TokenV2: StoryObj<typeof HintText> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: () => (
+    <div style={{ display: 'grid', gap: 16, width: 320 }}>
+      <HintText context="section">Section hint text</HintText>
+      <HintText context="page">Page hint text</HintText>
+    </div>
+  ),
+}

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

@@ -53,43 +53,43 @@
 }
 
 .charcoal-icon-button[data-variant='Default'] {
-  color: var(--charcoal-text3);
-  background-color: var(--charcoal-transparent);
+  color: var(--charcoal-color-icon-tertiary-default);
+  background-color: var(--charcoal-color-container-default-a);
 }
 
 .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]), .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
+  color: var(--charcoal-color-icon-tertiary-press);
+  background-color: var(--charcoal-color-container-press-a);
 }
 
 .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover, .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-  background-color: var(--charcoal-transparent-hover);
+  color: var(--charcoal-color-icon-tertiary-hover);
+  background-color: var(--charcoal-color-container-hover-a);
 }
 
 .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active, .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-  background-color: var(--charcoal-transparent-press);
+  color: var(--charcoal-color-icon-tertiary-press);
+  background-color: var(--charcoal-color-container-press-a);
 }
 
 .charcoal-icon-button[data-variant='Overlay'] {
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-surface4);
+  color: var(--charcoal-color-icon-on-on-img-default);
+  background-color: var(--charcoal-color-container-on-img-default);
 }
 
 .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]), .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
-  color: var(--charcoal-text5-press);
-  background-color: var(--charcoal-surface4-press);
+  color: var(--charcoal-color-icon-on-on-img-press);
+  background-color: var(--charcoal-color-container-on-img-press);
 }
 
 .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover, .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
-  color: var(--charcoal-text5-hover);
-  background-color: var(--charcoal-surface4-hover);
+  color: var(--charcoal-color-icon-on-on-img-hover);
+  background-color: var(--charcoal-color-container-on-img-hover);
 }
 
 .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active, .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
-  color: var(--charcoal-text5-press);
-  background-color: var(--charcoal-surface4-press);
+  color: var(--charcoal-color-icon-on-on-img-press);
+  background-color: var(--charcoal-color-container-on-img-press);
 }
 
 .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus, .charcoal-icon-button[aria-disabled='false']:focus {

package/src/components/IconButton/index.css

@@ -55,48 +55,48 @@
   }
 
   &[data-variant='Default'] {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-transparent);
+    color: var(--charcoal-color-icon-tertiary-default);
+    background-color: var(--charcoal-color-container-default-a);
 
     &[data-active='true']:not(:disabled):not([aria-disabled]),
     &[data-active='true'][aria-disabled='false'] {
-      color: var(--charcoal-text3-press);
-      background-color: var(--charcoal-transparent-press);
+      color: var(--charcoal-color-icon-tertiary-press);
+      background-color: var(--charcoal-color-container-press-a);
     }
 
     &[data-active='false']:not(:disabled):not([aria-disabled]):hover,
     &[data-active='false'][aria-disabled='false']:hover {
-      color: var(--charcoal-text3-hover);
-      background-color: var(--charcoal-transparent-hover);
+      color: var(--charcoal-color-icon-tertiary-hover);
+      background-color: var(--charcoal-color-container-hover-a);
     }
 
     &[data-active='false']:not(:disabled):not([aria-disabled]):active,
     &[data-active='false'][aria-disabled='false']:active {
-      color: var(--charcoal-text3-press);
-      background-color: var(--charcoal-transparent-press);
+      color: var(--charcoal-color-icon-tertiary-press);
+      background-color: var(--charcoal-color-container-press-a);
     }
   }
 
   &[data-variant='Overlay'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface4);
+    color: var(--charcoal-color-icon-on-on-img-default);
+    background-color: var(--charcoal-color-container-on-img-default);
 
     &[data-active='true']:not(:disabled):not([aria-disabled]),
     &[data-active='true'][aria-disabled='false'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
+      color: var(--charcoal-color-icon-on-on-img-press);
+      background-color: var(--charcoal-color-container-on-img-press);
     }
 
     &[data-active='false']:not(:disabled):not([aria-disabled]):hover,
     &[data-active='false'][aria-disabled='false']:hover {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface4-hover);
+      color: var(--charcoal-color-icon-on-on-img-hover);
+      background-color: var(--charcoal-color-container-on-img-hover);
     }
 
     &[data-active='false']:not(:disabled):not([aria-disabled]):active,
     &[data-active='false'][aria-disabled='false']:active {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
+      color: var(--charcoal-color-icon-on-on-img-press);
+      background-color: var(--charcoal-color-container-on-img-press);
     }
   }
 

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

@@ -32,3 +32,18 @@ export const Overlay: StoryObj<typeof IconButton> = {
     return <IconButton icon="16/Add" variant="Overlay" />
   },
 }
+
+export const TokenV2: StoryObj<typeof IconButton> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: () => {
+    return (
+      <div style={{ display: 'flex', gap: 8 }}>
+        <IconButton icon="16/Add" title="add" />
+        <IconButton icon="16/Add" title="active" isActive />
+        <IconButton icon="16/Add" title="overlay" variant="Overlay" />
+      </div>
+    )
+  },
+}

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

@@ -1,18 +1,18 @@
 .charcoal-loading-spinner {
   box-sizing: content-box;
   margin: auto;
-  padding: var(--charcoal-loading-spinner-padding);
+  padding: 16px;
   border-radius: 8px;
-  font-size: var(--charcoal-loading-spinner-size);
-  width: var(--charcoal-loading-spinner-size);
-  height: var(--charcoal-loading-spinner-size);
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
   opacity: 0.84;
-  color: var(--charcoal-text4);
-  background-color: var(--charcoal-background1);
+  color: var(--charcoal-color-icon-tertiary-default);
+  background-color: var(--charcoal-color-background-default);
 }
 
 .charcoal-loading-spinner[data-transparent='true'] {
-  background-color: var(--charcoal-transparent);
+  background-color: var(--charcoal-color-container-default-a);
 }
 
 @keyframes charcoal-loading-spinner-icon-scale-out {