upgrade tokens

ubie-oss · Aug 9, 2024 · acb0907 · acb0907
1 parent d8f2b3f
commit acb0907
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 279 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,7 +82,6 @@
     "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
-    "@ubie/design-tokens": "0.1.4",
     "@ubie/prettier-config": "0.1.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
@@ -127,7 +126,7 @@
   },
   "peerDependencies": {
     "@headlessui/react": ">1.7.0 <2.0.0",
-    "@ubie/design-tokens": "^0.0.10 || ^0.1.0",
+    "@ubie/design-tokens": ">=0.2.0",
     "@ubie/ubie-icons": ">=0.5.0 <0.6.2 || >=0.8.0",
     "clsx": ">1.2.0",
     "react": "^17 || ^18",

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -22,8 +22,6 @@ import type {
   TextColor,
   BodyFontSize,
   BodyLeading,
-  NoteFontSize,
-  NoteLeading,
   WidthProps,
 } from '../../types/style';
 import type { CSSProperties, FC, ReactNode } from 'react';
@@ -110,21 +108,6 @@ type PropsWithTextBody = BaseProps & {
   textLeading?: BodyLeading;
 };
 
-type PropsWithTextNote = BaseProps & {
-  /**
-   * 配下に含むテキストの種類
-   */
-  textType: Extract<TextType, 'note'>;
-  /**
-   * 配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能
-   */
-  textSize?: NoteFontSize;
-  /**
-   * 配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能
-   */
-  textLeading?: NoteLeading;
-};
-
 /**
  * If type is not specified, an empty object is returned because it is unknown how it is to be styled, i.e. it is not styled.
  * If type is specified but size or leading is not, specify default values (md or default.)
@@ -143,11 +126,6 @@ export const textStyleVariables = ({
       type: Extract<TextType, 'body'>;
       size: BodyFontSize | undefined;
       leading: BodyLeading | undefined;
-    }
-  | {
-      type: Extract<TextType, 'note'>;
-      size: NoteFontSize | undefined;
-      leading: NoteLeading | undefined;
     }): CSSProperties => {
   if (type == null) return {};
 
@@ -160,11 +138,6 @@ export const textStyleVariables = ({
         '--text-size': size ? cssFontSizeToken({ type, size }) : 'inherit',
         '--text-leading': leading ? cssLeadingToken({ type, size: size || 'md', leading }) : 'inherit',
       } as CSSProperties;
-    case 'note':
-      return {
-        '--text-size': size ? cssFontSizeToken({ type, size }) : 'inherit',
-        '--text-leading': leading ? cssLeadingToken({ type, size: size || 'md', leading }) : 'inherit',
-      } as CSSProperties;
     default:
       // eslint-disable-next-line no-case-declarations
       const _: never = type;
@@ -175,7 +148,7 @@ export const textStyleVariables = ({
 
 const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
-export const Box: FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote> = ({
+export const Box: FC<PropsWithoutText | PropsWithTextBody> = ({
   as: BoxComponent = 'div',
   children,
   p,
@@ -212,8 +185,6 @@ export const Box: FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote> =
 
   if (textType === 'body') {
     _textVariables = textStyleVariables({ type: textType, size: textSize, leading: textLeading });
-  } else if (textType === 'note') {
-    _textVariables = textStyleVariables({ type: textType, size: textSize, leading: textLeading });
   }
 
   const width = _width === 'full' ? '100%' : _width;

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -253,7 +253,7 @@
 
 .fixedIcon > * {
   width: var(--icon-size);
-  height: var(--sicon-size);
+  height: var(--icon-size);
 }
 
 .suffixIcon {
@@ -264,5 +264,5 @@
 
 .suffixIcon > * {
   width: var(--icon-size);
-  height: var(--sicon-size);
+  height: var(--icon-size);
 }
diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
@@ -36,13 +36,13 @@
 }
 
 .label.medium {
-  font-size: var(--text-body-md-tight-size);
-  line-height: var(--text-body-md-tight-line);
+  font-size: var(--text-body-md-size);
+  line-height: var(--text-body-md-narrow-line);
 }
 
 .label.small {
-  font-size: var(--text-body-sm-tight-size);
-  line-height: var(--text-body-sm-tight-line);
+  font-size: var(--text-body-sm-size);
+  line-height: var(--text-body-sm-narrow-line);
 }
 
 /**

diff --git a/src/components/HelperMessage/HelperMessage.module.css b/src/components/HelperMessage/HelperMessage.module.css
@@ -1,8 +1,8 @@
 .message {
   margin: 0;
-  font-size: var(--text-note-lg-size);
+  font-size: var(--text-body-sm-size);
   hyphens: auto;
-  line-height: var(--text-note-lg-tight-line);
+  line-height: var(--text-body-sm-line);
   color: var(--color-text-sub);
   overflow-wrap: anywhere;
 }
diff --git a/src/components/LinkCard/LinkCard.module.css b/src/components/LinkCard/LinkCard.module.css
@@ -60,13 +60,13 @@
 .medium {
   --icon-size: 2rem;
   --title-font-size: var(--text-heading-xs-line);
-  --description-font-size: var(--text-note-lg-size);
-  --description-line-height: var(--text-note-lg-line);
+  --description-font-size: var(--text-body-sm-size);
+  --description-line-height: var(--text-body-sm-line);
 }
 
 .small {
   --icon-size: 1.25rem;
   --title-font-size: var(--text-button-md-size);
-  --description-font-size: var(--text-note-md-size);
-  --description-line-height: var(--text-note-md-line);
+  --description-font-size: var(--text-body-xs-size);
+  --description-line-height: var(--text-body-xs-line);
 }
diff --git a/src/components/RadioButton/RadioButton.module.css b/src/components/RadioButton/RadioButton.module.css
@@ -82,11 +82,11 @@
 }
 
 .medium .label {
-  font-size: var(--text-body-md-tight-size);
-  line-height: var(--text-body-md-tight-line);
+  font-size: var(--text-body-md-size);
+  line-height: var(--text-body-md-narrow-line);
 }
 
 .small .label {
-  font-size: var(--text-body-sm-tight-size);
-  line-height: var(--text-body-sm-tight-line);
+  font-size: var(--text-body-sm-size);
+  line-height: var(--text-body-sm-narrow-line);
 }
diff --git a/src/components/RadioCard/RadioCard.module.css b/src/components/RadioCard/RadioCard.module.css
@@ -14,10 +14,10 @@
   box-sizing: border-box;
   display: inline-block;
   padding: 16px 12px 16px 44px;
-  font-size: 16px;
+  font-size: var(--text-body-md-size);
   font-weight: bold;
   hyphens: auto;
-  line-height: 23px;
+  line-height: var(--text-body-md-narrow-line);
   color: var(--color-text-main);
   overflow-wrap: anywhere;
   vertical-align: text-top;

diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css
@@ -9,7 +9,7 @@
   width: 100%;
   min-height: 54px;
   padding: 0 64px 0 16px;
-  font-size: 16px;
+  font-size: var(--text-body-md-size);
   font-weight: bold;
   line-height: 54px;
   color: var(--color-text-main);

diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css
@@ -55,6 +55,10 @@ button.text.link:focus-visible {
 }
 
 /* font-size */
+.body.xs {
+  --font-size: var(--text-body-xs-size);
+}
+
 .body.sm {
   --font-size: var(--text-body-sm-size);
 }
@@ -87,18 +91,6 @@ button.text.link:focus-visible {
   --font-size: var(--text-heading-xl-size);
 }
 
-.note.sm {
-  --font-size: var(--text-note-sm-size);
-}
-
-.note.md {
-  --font-size: var(--text-note-md-size);
-}
-
-.note.lg {
-  --font-size: var(--text-note-lg-size);
-}
-
 .button.sm {
   --font-size: var(--text-button-sm-size);
 }
@@ -111,10 +103,6 @@ button.text.link:focus-visible {
   --font-size: var(--text-button-lg-size);
 }
 
-.tag.sm {
-  --font-size: var(--text-tag-sm-size);
-}
-
 .tag.md {
   --font-size: var(--text-tag-md-size);
 }
@@ -151,10 +139,6 @@ button.text.link:focus-visible {
   --leading: var(--text-body-md-narrow-line);
 }
 
-.tight {
-  --leading: var(--text-body-md-tight-line);
-}
-
 /* color */
 .main {
   --color: var(--color-text-main);

diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -9,8 +9,6 @@ import {
   BodyLeading,
   HeadingFontSize,
   HeadingLeading,
-  NoteFontSize,
-  NoteLeading,
   ButtonFontSize,
   ButtonLeading,
   TagFontSize,
@@ -88,22 +86,6 @@ type HeadingProps = BaseProps & {
   leading?: HeadingLeading;
 };
 
-type NoteProps = BaseProps & {
-  /**
-   * テキストの種類
-   */
-  type: 'note';
-  /**
-   * フォントサイズの抽象値
-   */
-  size?: NoteFontSize;
-  /**
-   * 行送りの抽象値（`line-height`）
-   * @default default
-   */
-  leading?: NoteLeading;
-};
-
 type ButtonProps = BaseProps & {
   /**
    * テキストの種類
@@ -136,7 +118,7 @@ type TagProps = BaseProps & {
   leading?: TagLeading;
 };
 
-type TextProps = BodyProps | HeadingProps | NoteProps | ButtonProps | TagProps;
+type TextProps = BodyProps | HeadingProps | ButtonProps | TagProps;
 
 function TextInner<T extends ElementType>(
   props: {