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

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 {

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/__snapshots__/index.story.storyshot

@@ -187,8 +187,9 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
                       Apple
                     </span>
                     <pixiv-icon
-                      class="charcoal-ui-dropdown-selector-icon"
+                      class="charcoal-icon charcoal-ui-dropdown-selector-icon"
                       name="16/Menu"
+                      style="--charcoal-icon-size: 16px;"
                     />
                   </button>
                 </div>
@@ -221,7 +222,9 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
             type="button"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="24/Close"
+              style="--charcoal-icon-size: 24px;"
             />
           </button>
         </div>
@@ -322,7 +325,9 @@ exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
             type="button"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="24/Close"
+              style="--charcoal-icon-size: 24px;"
             />
           </button>
         </div>
@@ -515,8 +520,9 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
                       Apple
                     </span>
                     <pixiv-icon
-                      class="charcoal-ui-dropdown-selector-icon"
+                      class="charcoal-icon charcoal-ui-dropdown-selector-icon"
                       name="16/Menu"
+                      style="--charcoal-icon-size: 16px;"
                     />
                   </button>
                 </div>
@@ -549,7 +555,9 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
             type="button"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="24/Close"
+              style="--charcoal-icon-size: 24px;"
             />
           </button>
         </div>
@@ -712,7 +720,9 @@ exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
             type="button"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="24/Close"
+              style="--charcoal-icon-size: 24px;"
             />
           </button>
         </div>

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/__snapshots__/index.story.storyshot

@@ -30,7 +30,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -59,7 +61,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -89,7 +93,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -118,7 +124,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -162,7 +170,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -191,7 +201,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -220,7 +232,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -249,7 +263,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -293,7 +309,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
           data-overlay="true"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -322,7 +340,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
           data-overlay="true"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -351,7 +371,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
           data-overlay="true"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -380,7 +402,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
           data-overlay="true"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -424,7 +448,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -454,7 +480,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -484,7 +512,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -514,7 +544,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>

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/MultiSelect/index.tsx

@@ -76,7 +76,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
           aria-invalid={invalid}
           aria-hidden
         >
-          <Icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
+          <Icon name="24/Check" fixedSize={16} />
         </div>
         {Boolean(children) && (
           <div className="charcoal-multi-select-label">{children}</div>