Merge pull request #663 from pixiv/revert-604-naporitan/replace-token1

Revert "Update Design Tokens, Add CSS Variables Tests, and Introduce Custom CSS Variables for `@charcoal-ui/react`"

.storybook/global.css

@@ -6,7 +6,6 @@
   font-family: 'Noto Sans JP', sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
-  background-color: var(--charcoal-color-background-default);
 }
 
 #storybook-docs pre {

.storybook/theme-decorator.tsx

@@ -2,11 +2,7 @@ import { useLayoutEffect } from 'react'
 import { ThemeProvider } from 'styled-components'
 import { useDarkMode } from 'storybook-dark-mode'
 import { light, dark } from '@charcoal-ui/theme'
-import { themeSetter } from '@charcoal-ui/styled'
-
-import '../packages/theme/src/css/_variables_dark.css'
-import '../packages/theme/src/css/_variables_light.css'
-import '../packages/react/src/index.css'
+import { TokenInjector, themeSelector, themeSetter } from '@charcoal-ui/styled'
 
 const setter = themeSetter()
 
@@ -24,6 +20,14 @@ const Theme = ({ children }) => {
   return (
     <ThemeProvider theme={isDarkMode ? dark : light}>
       <div data-dark={isDarkMode}>{children}</div>
+      <TokenInjector
+        theme={{
+          ':root': light,
+          [themeSelector('dark')]: dark,
+          [themeSelector('light')]: light,
+        }}
+        background="background1"
+      ></TokenInjector>
     </ThemeProvider>
   )
 }

packages/react/src/components/Button/index.css

@@ -24,8 +24,8 @@
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
-  color: var(--charcoal-color-text-default);
-  background-color: var(--charcoal-color-container-secondary-default-a);
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
   height: 40px;
 }
@@ -37,88 +37,81 @@
 
 .charcoal-button:not(:disabled):focus-visible {
   outline: none;
-  box-shadow: var(--charcoal-color-custom-focus-effect);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
 .charcoal-button:not(:disabled):hover {
-  color: var(--charcoal-color-text-hover);
-  background-color: var(--charcoal-color-container-secondary-hover-a);
+  color: var(--charcoal-text2-hover);
+  background-color: var(--charcoal-surface3-hover);
 }
 
 .charcoal-button:not(:disabled):active,
-.charcoal-button:not(:disabled)[data-active='true'] {
-  color: var(--charcoal-color-text-press);
-  background-color: var(--charcoal-color-container-secondary-press-a);
+.charcoal-button[data-active='true'] {
+  color: var(--charcoal-text2-press);
+  background-color: var(--charcoal-surface3-press);
 }
 
 .charcoal-button[data-variant='Primary'] {
-  color: var(--charcoal-color-text-on-primary-default);
-  background-color: var(--charcoal-color-container-primary-default);
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-brand);
 }
 
 .charcoal-button[data-variant='Primary']:hover:not(:disabled) {
-  color: var(--charcoal-color-text-on-primary-hover);
-  background-color: var(--charcoal-color-container-primary-hover);
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-brand-hover);
 }
 
 .charcoal-button[data-variant='Primary']:active:not(:disabled),
 .charcoal-button[data-variant='Primary'][data-active='true'] {
-  color: var(--charcoal-color-text-on-primary-press);
-  background-color: var(--charcoal-color-container-primary-press);
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-brand-press);
 }
 
 .charcoal-button[data-variant='Overlay'] {
-  color: var(--charcoal-color-text-on-on-img-default);
-  background-color: var(--charcoal-color-container-on-img-default);
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface4);
 }
 
 .charcoal-button[data-variant='Overlay']:hover:not(:disabled) {
-  color: var(--charcoal-color-text-on-on-img-hover);
-  background-color: var(--charcoal-color-container-on-img-hover);
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-surface4-hover);
 }
 
 .charcoal-button[data-variant='Overlay']:active:not(:disabled),
 .charcoal-button[data-variant='Overlay'][data-active='true'] {
-  color: var(--charcoal-color-text-on-on-img-press);
-  background-color: var(--charcoal-color-container-on-img-press);
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-surface4-press);
 }
 
-/*
- * HUD 要素ではないが、以下の理由で HUD を色として利用する。
- * 1. UI パッケージであるがゆえにデザインを大幅に変えたくない
- *   a. このコンポーネントデザインは改善できると思っている
- * 2. この要素を説明するための Applied Token が存在しないため、例外的に Component Token という位置づけを追加することになる
- * 改善するとなくなる要素のために新しく Token を追加することは避けたいので、今回は最も近しい Applied Token の HUD を利用することにした。
- */
 .charcoal-button[data-variant='Navigation'] {
-  color: var(--charcoal-color-text-on-hud-default);
-  background-color: var(--charcoal-color-container-hud-default);
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface6);
 }
 
 .charcoal-button[data-variant='Navigation']:hover:not(:disabled) {
-  color: var(--charcoal-color-text-on-primary-hover);
-  background-color: var(--charcoal-color-container-hud-hover);
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-surface6-hover);
 }
 
 .charcoal-button[data-variant='Navigation']:active:not(:disabled),
 .charcoal-button[data-variant='Navigation'][data-active='true'] {
-  color: var(--charcoal-color-text-on-primary-press);
-  background-color: var(--charcoal-color-container-hud-press);
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-surface6-press);
 }
 
 .charcoal-button[data-variant='Danger'] {
-  color: var(--charcoal-color-text-on-negative-default);
-  background-color: var(--charcoal-color-container-negative-default);
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-assertive);
 }
 .charcoal-button[data-variant='Danger']:hover:not(:disabled) {
-  color: var(--charcoal-color-text-on-negative-hover);
-  background-color: var(--charcoal-color-container-negative-hover);
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-assertive-hover);
 }
 
 .charcoal-button[data-variant='Danger']:active:not(:disabled),
 .charcoal-button[data-variant='Danger'][data-active='true'] {
-  color: var(--charcoal-color-text-on-negative-press);
-  background-color: var(--charcoal-color-container-negative-press);
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-assertive-press);
 }
 
 .charcoal-button[data-size='S'] {

packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot

@@ -60,7 +60,7 @@ exports[`Storybook Tests > react/internals/CheckboxInput > Rounded 1`] = `
   <div
     style={
       Object {
-        "backgroundColor": "var(--charcoal-color-background-secondary)",
+        "backgroundColor": "var(--charcoal-background2)",
         "padding": 8,
       }
     }

packages/react/src/components/Checkbox/CheckboxInput/index.css

@@ -9,30 +9,21 @@
   transition: 0.2s box-shadow, 0.2s background-color;
   position: relative;
   box-sizing: border-box;
-  background-color: var(--charcoal-color-container-default);
 }
 
-.charcoal-checkbox-input:hover {
-  background-color: var(--charcoal-color-container-hover);
-}
-.charcoal-checkbox-input:active {
-  background-color: var(--charcoal-color-container-press);
-}
-.charcoal-checkbox-input:disabled {
-  cursor: default;
-}
+.charcoal-checkbox-input:disabled,
 .charcoal-checkbox-input[readonly] {
-  cursor: default;
   opacity: 0.32;
+  cursor: default;
 }
 
 .charcoal-checkbox-input:checked {
-  background-color: var(--charcoal-color-container-primary-default);
+  background-color: var(--charcoal-brand);
 }
 
 .charcoal-checkbox-input:checked::after {
   content: '';
-  background-color: var(--charcoal-color-icon-on-primary-default);
+  background-color: white;
   display: flex;
   margin: auto;
   width: 16px;
@@ -42,77 +33,68 @@
   );
 }
 
-.charcoal-checkbox-input:checked:hover::after {
-  background-color: var(--charcoal-color-icon-on-primary-hover);
-}
-
-.charcoal-checkbox-input:checked:active::after {
-  background-color: var(--charcoal-color-icon-on-primary-press);
-}
-
 .charcoal-checkbox-input:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: var(--charcoal-color-border-default);
+  border-color: var(--charcoal-text4);
 }
 
 .charcoal-checkbox-input:not(:disabled):focus {
   outline: none;
-  box-shadow: var(--charcoal-color-custom-focus-effect);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 .charcoal-checkbox-input:not(:disabled):focus-visible {
-  box-shadow: var(--charcoal-color-custom-focus-effect);
-}
-
-.charcoal-checkbox-input:checked:not(:disabled, :read-only):hover {
-  background-color: var(--charcoal-color-container-primary-hover);
-}
-.charcoal-checkbox-input:checked:not(:disabled, :read-only):active {
-  background-color: var(--charcoal-color-container-primary-press);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
-
 .charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {
   box-shadow: none;
 }
 
+.charcoal-checkbox-input:checked:not(:disabled):hover {
+  background-color: var(--charcoal-brand-hover);
+}
+.charcoal-checkbox-input:checked:not(:disabled):active {
+  background-color: var(--charcoal-brand-press);
+}
+
 .charcoal-checkbox-input[aria-invalid='true'],
 .charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {
-  box-shadow: var(--charcoal-color-custom-error-effect);
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
 }
 
 .charcoal-checkbox-input[data-rounded='true'] {
   border-radius: 10px;
-  background-color: var(--charcoal-color-container-secondary-default);
+  background-color: var(--charcoal-surface3);
   border: 2px solid transparent;
 }
 
 .charcoal-checkbox-input[data-rounded='true']:checked {
-  background-color: var(--charcoal-color-container-primary-default);
+  background-color: var(--charcoal-brand);
 }
 
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {
-  background-color: var(--charcoal-color-container-secondary-hover);
+  background-color: var(--charcoal-surface3-hover);
 }
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {
-  background-color: var(--charcoal-color-container-secondary-press);
+  background-color: var(--charcoal-surface3-press);
 }
 
 .charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {
-  box-shadow: var(--charcoal-color-custom-focus-effect);
+  box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);
 }
 
 .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {
-  background-color: var(--charcoal-color-container-primary-hover);
+  background-color: var(--charcoal-brand-hover);
 }
 .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {
-  background-color: var(--charcoal-color-container-primary-press);
+  background-color: var(--charcoal-brand-press);
 }
 
 .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],
 .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(
     :disabled
   ):focus {
-  box-shadow: var(--charcoal-color-custom-error-effect);
+  box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);
 }
 
 .charcoal-checkbox-input[data-rounded='true']::before {

packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx

@@ -42,10 +42,7 @@ export const Rounded: StoryObj<typeof CheckboxInput> = {
     const [checked, setChecked] = useState(false)
     return (
       <div
-        style={{
-          padding: 8,
-          backgroundColor: 'var(--charcoal-color-background-secondary)',
-        }}
+        style={{ padding: 8, backgroundColor: 'var(--charcoal-background2)' }}
       >
         <CheckboxInput checked={checked} onChange={setChecked} rounded />
       </div>

packages/react/src/components/Checkbox/index.css

@@ -3,20 +3,19 @@
   cursor: pointer;
   display: flex;
   gap: 4px;
-  color: var(--charcoal-color-text-default);
 }
 
 .charcoal-checkbox__label[aria-disabled='true'] {
   cursor: default;
   opacity: 0.32;
 }
 
-.charcoal-checkbox__label:has(input[readonly]) {
-  cursor: default;
+.charcoal-checkbox__label[aria-disabled='true'] > input {
+  opacity: 1;
 }
 
 .charcoal-checkbox__label_div {
-  color: inherit;
+  color: var(--charcoal-text2);
   font-size: 14px;
   line-height: 20px;
 }

packages/react/src/components/Clickable/__snapshots__/index.story.storyshot

@@ -7,11 +7,6 @@ exports[`Storybook Tests > react/Clickable > Button 1`] = `
   <button
     className="charcoal-clickable"
     onClick={[Function]}
-    style={
-      Object {
-        "color": "var(--charcoal-color-text-secondary-default)",
-      }
-    }
   >
     button
   </button>
@@ -26,11 +21,6 @@ exports[`Storybook Tests > react/Clickable > Link 1`] = `
     className="charcoal-clickable"
     href="#"
     onClick={[Function]}
-    style={
-      Object {
-        "color": "var(--charcoal-color-text-secondary-default)",
-      }
-    }
   >
     link
   </a>

packages/react/src/components/Clickable/index.story.tsx

@@ -8,28 +8,12 @@ export default {
 } as Meta<typeof Clickable>
 
 export const Button: StoryObj = {
-  render: () => (
-    <Clickable
-      style={{
-        color: 'var(--charcoal-color-text-secondary-default)',
-      }}
-      onClick={action('click')}
-    >
-      button
-    </Clickable>
-  ),
+  render: () => <Clickable onClick={action('click')}>button</Clickable>,
 }
 
 export const Link: StoryObj = {
   render: () => (
-    <Clickable
-      style={{
-        color: 'var(--charcoal-color-text-secondary-default)',
-      }}
-      component="a"
-      href="#"
-      onClick={action('click')}
-    >
+    <Clickable component="a" href="#" onClick={action('click')}>
       link
     </Clickable>
   ),