feat: Support for complete token refurbishment

package.json

@@ -111,7 +111,7 @@
   },
   "peerDependencies": {
     "@headlessui/react": "^2.0.0",
-    "@ubie/design-tokens": ">=0.2.0",
+    "@ubie/design-tokens": ">=0.3.2",
     "@ubie/ubie-icons": ">=0.5.0 <0.6.2 || >=0.8.0",
     "react": "^17 || ^18",
     "react-dom": "^18"

src/components/Accordion/Accordion.module.css

@@ -13,11 +13,11 @@
   overflow-wrap: anywhere;
   cursor: pointer;
   background: none;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-black);
 }
 
 .button:hover {
-  background-color: var(--color-background-primary);
+  background-color: var(--color-background-blue);
 }
 
 /* for Safari */
@@ -55,7 +55,7 @@ details[open].medium .button {
   width: 1.5rem;
   height: 1.5rem;
   margin-left: 1rem;
-  color: var(--color-primary);
+  color: var(--color-ubie-blue-600);
 }
 
 details[open] .arrow {
@@ -64,12 +64,12 @@ details[open] .arrow {
 
 .medium .panel {
   padding: var(--size-spacing-md);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-black);
   border-top: none;
   border-radius: 0 0 var(--radius-md) var(--radius-md);
 }
 
 .small .panel {
   padding: var(--size-spacing-xs);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border-black);
 }

src/components/Box/Box.module.css

@@ -12,53 +12,11 @@
   line-height: var(--text-leading);
   color: var(--text-color);
   overflow-wrap: anywhere;
+  background-color: var(--background-color);
+  border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius);
 }
 
-.box.backgroundColorPrimary {
-  background-color: var(--color-background-primary);
-}
-
-.box.backgroundColorPrimaryDarken {
-  background-color: var(--color-background-primary-darken);
-}
-
-.box.backgroundColorAccent {
-  background-color: var(--color-background-accent);
-}
-
-.box.backgroundColorAccentDarken {
-  background-color: var(--color-background-accent-darken);
-}
-
-.box.backgroundColorAlert {
-  background-color: var(--color-background-alert);
-}
-
-.box.backgroundColorGray {
-  background-color: var(--color-background-gray);
-}
-
-.box.backgroundColorWhite {
-  background-color: var(--color-background-white);
-}
-
-.box.borderGray {
-  border: 1px solid var(--color-border);
-}
-
-.box.borderGrayThick {
-  border: 2px solid var(--color-border);
-}
-
-.box.borderPrimary {
-  border: 1px solid var(--color-primary);
-}
-
-.box.borderPrimaryThick {
-  border: 2px solid var(--color-primary);
-}
-
 .box.textBold {
   font-weight: bold;
 }

src/components/Box/Box.tsx

@@ -3,6 +3,8 @@
 import clsx from 'clsx';
 import styles from './Box.module.css';
 import {
+  backgroundColorVariable,
+  borderVariables,
   colorVariable,
   cssFontSizeToken,
   cssLeadingToken,
@@ -14,13 +16,14 @@ import {
 import { HTMLTagname } from '../../utils/types';
 import type { CustomDataAttributeProps } from '../../types/attributes';
 import type {
-  BackgroundColor,
+  BackgroundColorVariant,
   BodyFontSize,
   BodyLeading,
+  BorderVariant,
   MarginProps,
   PaddingProps,
   RadiusProp,
-  TextColor,
+  TextColorVariant,
   TextType,
   WidthProps,
 } from '../../types/style';
@@ -41,11 +44,11 @@ type BaseProps = {
   /**
    * 背景色
    */
-  backgroundColor?: BackgroundColor;
+  backgroundColor?: BackgroundColorVariant;
   /**
    * ボーダーの種類
    */
-  border?: 'gray' | 'grayThick' | 'primary' | 'primaryThick';
+  border?: BorderVariant;
   /**
    * 幅を指定。fullは後方互換のため残している
    * @default 'auto'
@@ -58,7 +61,7 @@ type BaseProps = {
   /**
    * 文字色の抽象値
    */
-  textColor?: TextColor;
+  textColor?: TextColorVariant;
   /**
    * テキストの配置。指定しない場合、親要素の配置を継承
    */
@@ -192,8 +195,6 @@ export const Box: FC<PropsWithoutText | PropsWithTextBody> = ({
     <BoxComponent
       className={clsx([
         styles.box,
-        backgroundColor && styles[`backgroundColor${capitalize(backgroundColor)}`],
-        border && styles[`border${capitalize(border)}`],
         width && styles.widthFull,
         inline && styles.inline,
         textBold && styles.textBold,
@@ -223,6 +224,8 @@ export const Box: FC<PropsWithoutText | PropsWithTextBody> = ({
         ...radiusVariables(radius),
         ..._textVariables,
         ...colorVariable(textColor),
+        ...borderVariables(border),
+        ...backgroundColorVariable(backgroundColor),
         ...widthVariables({
           width,
           minWidth,

src/components/Button/Button.module.css

@@ -32,7 +32,7 @@
 }
 
 .button:focus-visible {
-  outline: solid var(--color-accent) 2px;
+  outline: solid var(--focus-ring, var(--color-border-blue-darken)) 2px;
 }
 
 .button.loading {
@@ -83,72 +83,61 @@
   --text: var(--color-text-white);
   --text-hover: var(--color-text-white);
   --text-disabled: var(--color-text-disabled);
-  --bg: var(--color-primary);
-  --bg-hover: var(--color-primary-darken);
-  --bg-disabled: var(--color-background-gray);
-  --border-color: var(--color-primary);
-  --border-color-hover: var(--color-primary-darken);
-  --border-color-disabled: var(--color-background-gray);
+  --bg: var(--color-background-blue-inverse);
+  --bg-hover: var(--color-background-blue-inverse-darken);
+  --bg-disabled: var(--color-background-black-darken);
+  --border-color: var(--color-background-blue-inverse);
+  --border-color-hover: var(--color-background-blue-inverse-darken);
+  --border-color-disabled: var(--color-background-black-darken);
+  --focus-ring: var(--color-border-pink-darken);
 }
 
 .secondary {
   --text: var(--color-text-main);
   --text-hover: var(--color-text-main);
   --text-disabled: var(--color-text-disabled);
   --bg: var(--color-background-white);
-  --bg-hover: var(--color-background-gray);
-  --bg-disabled: var(--color-background-gray);
-  --border-color: var(--color-border);
-  --border-color-hover: var(--color-border);
-  --border-color-disabled: var(--color-background-gray);
-}
-
-.accent {
-  --text: var(--color-text-white);
-  --text-hover: var(--color-text-white);
-  --text-disabled: var(--color-text-disabled);
-  --bg: var(--color-accent);
-  --bg-hover: var(--color-accent-darken);
-  --bg-disabled: var(--color-background-gray);
-  --border-color: var(--color-accent);
-  --border-color-hover: var(--color-accent-darken);
-  --border-color-disabled: var(--color-background-gray);
+  --bg-hover: var(--color-background-black-darken);
+  --bg-disabled: var(--color-background-black-darken);
+  --border-color: var(--color-border-black);
+  --border-color-hover: var(--color-border-black);
+  --border-color-disabled: var(--color-background-black-darken);
 }
 
 .alert {
   --text: var(--color-text-white);
   --text-hover: var(--color-text-white);
   --text-disabled: var(--color-text-disabled);
-  --bg: var(--color-alert);
-  --bg-hover: var(--color-alert-darken);
-  --bg-disabled: var(--color-background-gray);
-  --border-color: var(--color-alert);
-  --border-color-hover: var(--color-alert-darken);
-  --border-color-disabled: var(--color-background-gray);
+  --bg: var(--color-background-red-inverse);
+  --bg-hover: var(--color-background-red-inverse-darken);
+  --bg-disabled: var(--color-background-black-darken);
+  --border-color: var(--color-background-red-inverse);
+  --border-color-hover: var(--color-background-red-inverse-darken);
+  --border-color-disabled: var(--color-background-black-darken);
 }
 
 .text {
-  --text: var(--color-primary);
-  --text-hover: var(--color-primary-darken);
+  --text: var(--color-ubie-blue-600);
+  --text-hover: var(--color-ubie-blue-700);
   --text-disabled: var(--color-text-disabled);
   --bg: transparent;
-  --bg-hover: var(--color-background-primary);
+  --bg-hover: var(--color-background-blue);
   --bg-disabled: transparent;
   --border-color: transparent;
-  --border-color-hover: var(--color-background-primary);
-  --border-color-disabled: var(--color-background-gray);
+  --border-color-hover: var(--color-background-blue);
+  --border-color-disabled: var(--color-background-black-darken);
 }
 
 .textAlert {
-  --text: var(--color-alert);
-  --text-hover: var(--color-alert-darken);
+  --text: var(--color-text-red);
+  --text-hover: var(--color-ubie-red-700);
   --text-disabled: var(--color-text-disabled);
   --bg: transparent;
-  --bg-hover: var(--color-background-alert);
+  --bg-hover: var(--color-background-red);
   --bg-disabled: transparent;
   --border-color: transparent;
-  --border-color-hover: var(--color-background-alert);
-  --border-color-disabled: var(--color-background-gray);
+  --border-color-hover: var(--color-background-red);
+  --border-color-disabled: var(--color-background-black-darken);
 }
 
 .authGoogle {

src/components/Button/ButtonTypes.ts

@@ -12,16 +12,7 @@ export type BaseProps = {
    * ボタンの種類
    * @default primary
    */
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | 'accent'
-    | 'alert'
-    | 'text'
-    | 'textAlert'
-    | 'authGoogle'
-    | 'authLINE'
-    | 'authApple';
+  variant?: 'primary' | 'secondary' | 'alert' | 'text' | 'textAlert' | 'authGoogle' | 'authLINE' | 'authApple';
   /**
    * 種類
    * @default large

src/components/ButtonCard/ButtonCard.module.css

@@ -17,19 +17,19 @@
   overflow-wrap: anywhere;
   cursor: pointer;
   background-color: var(--color-ubie-white);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-black);
   border-radius: var(--radius-md);
   transition: background-color 0.3s var(--ease-out-quint);
 }
 
 @media (hover: hover) {
   .card:hover:not(:disabled) {
-    background-color: var(--color-background-primary);
+    background-color: var(--color-background-blue);
   }
 }
 
 .card:disabled {
   color: var(--color-text-disabled);
   cursor: initial;
-  background-color: var(--color-background-gray);
+  background-color: var(--color-background-black-darken);
 }

src/components/Checkbox/Checkbox.module.css

@@ -55,7 +55,7 @@
   justify-content: center;
   color: var(--color-ubie-white);
   background-color: var(--color-ubie-white);
-  border: 2px solid var(--color-border);
+  border: 2px solid var(--color-border-black);
   border-radius: var(--radius-sm);
 }
 
@@ -70,8 +70,8 @@
 }
 
 .symbol.isIndeterminate {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
+  background-color: var(--color-ubie-blue-600);
+  border-color: var(--color-ubie-blue-600);
 }
 
 .checkbox:checked + .symbol,
@@ -80,11 +80,11 @@
 }
 
 .checkbox:checked + .symbol {
-  background-color: var(--color-primary);
+  background-color: var(--color-ubie-blue-600);
 }
 
 .checkbox:focus-visible + .symbol {
-  outline: 2px solid var(--color-accent);
+  outline: 2px solid var(--color-border-pink-darken);
 }
 
 .checkbox:disabled:checked + .symbol,
@@ -94,11 +94,11 @@
 
 @media (hover: hover) {
   .checkbox:not(:disabled) + .symbol:not(.isIndeterminate):hover {
-    border-color: var(--color-primary);
+    border-color: var(--color-border-blue-darken);
   }
 
   .checkbox:checked:not(:disabled) + .symbol:hover {
-    background-color: var(--color-primary-darken);
+    background-color: var(--color-ubie-blue-700);
   }
 }