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

package/src/components/LoadingSpinner/index.css

@@ -1,17 +1,17 @@
 .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);
 
   &[data-transparent='true'] {
-    background-color: var(--charcoal-transparent);
+    background-color: var(--charcoal-color-container-default-a);
   }
 }
 

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

@@ -25,3 +25,16 @@ export const Size: StoryObj<typeof LoadingSpinner> = {
 export const Padding: StoryObj<typeof LoadingSpinner> = {
   render: () => <LoadingSpinner padding={24} />,
 }
+
+export const TokenV2: StoryObj<typeof LoadingSpinner> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+      <LoadingSpinner />
+      <LoadingSpinner transparent />
+      <LoadingSpinner size={48} />
+    </div>
+  ),
+}

package/src/components/Modal/Dialog/index.css

@@ -4,7 +4,7 @@
   height: fit-content;
   width: 440px;
 
-  background-color: var(--charcoal-surface1);
+  background-color: var(--charcoal-color-container-default);
   border-radius: 24px;
 }
 

package/src/components/Modal/ModalPlumbing.css

@@ -13,7 +13,7 @@
 }
 
 .charcoal-modal-header-title {
-  color: var(--charcoal-text1);
+  color: var(--charcoal-color-text-default);
   font-size: 16px;
   line-height: 24px;
   font-weight: bold;

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

@@ -9,7 +9,7 @@
   justify-content: center;
   padding: 40px 0;
   box-sizing: border-box;
-  background-color: var(--charcoal-surface4);
+  background-color: var(--charcoal-color-container-neutral-default);
 }
 
 @media (max-width: 743px) {
@@ -23,7 +23,7 @@
   position: absolute;
   top: 8px;
   right: 8px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   transition: 0.2s color;
 }
 

package/src/components/Modal/index.css

@@ -10,7 +10,7 @@
   padding: 40px 0;
   box-sizing: border-box;
 
-  background-color: var(--charcoal-surface4);
+  background-color: var(--charcoal-color-container-neutral-default);
 
   @media (max-width: 743px) {
     &[data-bottom-sheet='true'],
@@ -25,7 +25,7 @@
   top: 8px;
   right: 8px;
 
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
   transition: 0.2s color;
 }
 

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

@@ -135,6 +135,26 @@ const StyledModalText = (props: Omit<React.ComponentProps<'div'>, 'style'>) => {
 
 export const Default: StoryObj<typeof Modal> = {}
 
+export const TokenV2: StoryObj<typeof Modal> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: function Render(args) {
+    const state = useOverlayTriggerState({ defaultOpen: true })
+    return (
+      <OverlayProvider>
+        <Button onClick={() => state.open()}>Open Modal</Button>
+        <M
+          {...args}
+          isDismissable
+          isOpen={state.isOpen}
+          onClose={() => state.close()}
+        />
+      </OverlayProvider>
+    )
+  },
+}
+
 export const FullBottomSheet: StoryObj<typeof Modal> = {
   args: {
     bottomSheet: 'full',

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

@@ -17,7 +17,7 @@
   align-items: center;
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 }
 
 .charcoal-multi-select-label::before {
@@ -42,14 +42,14 @@
   width: 20px;
   height: 20px;
   margin: 0;
-  background-color: var(--charcoal-text3);
+  background-color: var(--charcoal-color-container-neutral-default);
   border-radius: 999999px;
   transition: 0.2s background-color,
     0.2s box-shadow;
 }
 
 .charcoal-multi-select-input[type='checkbox']:checked {
-  background-color: var(--charcoal-brand);
+  background-color: var(--charcoal-color-container-primary-default);
 }
 
 .charcoal-multi-select-input[type='checkbox']:focus {
@@ -66,19 +66,19 @@
 }
 
 .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]), .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-color-container-neutral-hover);
 }
 
 .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]), .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-color-container-neutral-press);
 }
 
 .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]), .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-hover);
+  background-color: var(--charcoal-color-container-primary-hover);
 }
 
 .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]), .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-press);
+  background-color: var(--charcoal-color-container-primary-press);
 }
 
 .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not([aria-disabled]) {
@@ -90,7 +90,7 @@
 }
 
 .charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {
-  background-color: var(--charcoal-surface4);
+  background-color: var(--charcoal-color-container-on-img-default);
 }
 
 .charcoal-multi-select-overlay {
@@ -104,7 +104,7 @@
   width: 24px;
   height: 24px;
   border-radius: 999999px;
-  color: var(--charcoal-text5);
+  color: var(--charcoal-color-icon-on-primary-default);
   transition: 0.2s box-shadow;
 }
 
@@ -117,7 +117,7 @@
 }
 
 .charcoal-multi-select-overlay[data-overlay='true'] {
-  border-color: var(--charcoal-text5);
+  border-color: var(--charcoal-color-border-hud);
   border-width: 2px;
   border-style: solid;
 }

package/src/components/MultiSelect/index.css

@@ -18,7 +18,7 @@
   align-items: center;
   font-size: 14px;
   line-height: 22px;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-default);
 
   &::before {
     display: block;
@@ -43,14 +43,14 @@
   width: 20px;
   height: 20px;
   margin: 0;
-  background-color: var(--charcoal-text3);
+  background-color: var(--charcoal-color-container-neutral-default);
   border-radius: 999999px;
   transition:
     0.2s background-color,
     0.2s box-shadow;
 
   &:checked {
-    background-color: var(--charcoal-brand);
+    background-color: var(--charcoal-color-container-primary-default);
   }
 
   &:focus {
@@ -68,22 +68,22 @@
 
   &:hover:not(:disabled):not([aria-disabled]),
   &:hover[aria-disabled='false'] {
-    background-color: var(--charcoal-text3-hover);
+    background-color: var(--charcoal-color-container-neutral-hover);
   }
 
   &:active:not(:disabled):not([aria-disabled]),
   &:active[aria-disabled='false'] {
-    background-color: var(--charcoal-text3-press);
+    background-color: var(--charcoal-color-container-neutral-press);
   }
 
   &:checked:hover:not(:disabled):not([aria-disabled]),
   &:checked:hover[aria-disabled='false'] {
-    background-color: var(--charcoal-brand-hover);
+    background-color: var(--charcoal-color-container-primary-hover);
   }
 
   &:checked:active:not(:disabled):not([aria-disabled]),
   &:checked:active[aria-disabled='false'] {
-    background-color: var(--charcoal-brand-press);
+    background-color: var(--charcoal-color-container-primary-press);
   }
 
   &[aria-invalid='true'][data-overlay='false']:not(:disabled):not(
@@ -97,7 +97,7 @@
   }
 
   &[data-overlay='true'] {
-    background-color: var(--charcoal-surface4);
+    background-color: var(--charcoal-color-container-on-img-default);
   }
 }
 
@@ -112,7 +112,7 @@
   width: 24px;
   height: 24px;
   border-radius: 999999px;
-  color: var(--charcoal-text5);
+  color: var(--charcoal-color-icon-on-primary-default);
   transition: 0.2s box-shadow;
 
   &[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
@@ -126,7 +126,7 @@
   }
 
   &[data-overlay='true'] {
-    border-color: var(--charcoal-text5);
+    border-color: var(--charcoal-color-border-hud);
     border-width: 2px;
     border-style: solid;
   }

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

@@ -96,6 +96,56 @@ export const Overlay: StoryObj<typeof MultiSelect> = {
   },
 }
 
+export const TokenV2: StoryObj<typeof MultiSelect> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render: function Render() {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <div style={{ display: 'grid', gap: 24 }}>
+        <StyledMultiSelectGroup
+          name="token-v2-default"
+          label="default"
+          onChange={action('click')}
+          selected={['選択肢1', '選択肢3']}
+        >
+          {options.map((option) => (
+            <MultiSelect value={option} key={option}>
+              {option}
+            </MultiSelect>
+          ))}
+        </StyledMultiSelectGroup>
+        <StyledMultiSelectGroup
+          name="token-v2-invalid"
+          label="invalid"
+          onChange={action('click')}
+          selected={[]}
+          invalid
+        >
+          {options.map((option) => (
+            <MultiSelect value={option} key={option}>
+              {option}
+            </MultiSelect>
+          ))}
+        </StyledMultiSelectGroup>
+        <StyledMultiSelectGroup
+          name="token-v2-overlay"
+          label="overlay"
+          onChange={action('click')}
+          selected={['選択肢2']}
+        >
+          {options.map((option) => (
+            <MultiSelect variant="overlay" value={option} key={option}>
+              {option}
+            </MultiSelect>
+          ))}
+        </StyledMultiSelectGroup>
+      </div>
+    )
+  },
+}
+
 export const Playground: StoryObj<typeof MultiSelect> = {
   render: function Render(args) {
     const [selected, setSelected] = useState<string[]>([])

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,13 +85,13 @@
 
 .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 */
 
@@ -101,7 +101,7 @@
 
 .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,13 +91,13 @@
 
   &[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);
     }
   }
 }
@@ -112,7 +112,7 @@
   &:hover,
   &:active {
     cursor: default;
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-tertiary-default);
     background: none;
   }
 

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'],