テキストスタイル

概要

テキストスタイルは、プロジェクト全体でテキストのスタイルを再利用するために使用されるトークンです。

テーマに定義されているスタイルはこちらです。

<Text textStyle="mono">Mono</Text>

export const textStyles = defineStyles.textStyle({
  ghost: {
    color: "colorScheme.outline",
  },
  mono: {
    fontFamily: "mono",
    fontWeight: "medium",
    letterSpacing: "widest",
    whiteSpace: "nowrap",
  },
  outline: {
    color: "colorScheme.outline",
  },
  solid: {
    color: "colorScheme.contrast",
  },
  subtle: {
    color: "colorScheme.fg",
  },
  surface: {
    color: "colorScheme.fg",
  },
})

カスタマイズ

• 1

  テーマを生成する

  CLIを使用してテーマを生成します。

  下記のコマンドを実行する前に、@yamada-ui/cliをインストールしてinitコマンドを実行する必要があります。詳しくは、こちらをご覧ください。

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  スタイルを変更する

  生成したテーマのstyles/text-styles.tsを変更します。

  theme/styles/text-styles.ts

  import { defineStyles } from "@yamada-ui/react"
  
  export const textStyles = defineStyles.textStyle({
    gradient: {
      bgClip: "text",
      bgGradient: "linear(to-l, #7928CA, #FF0080)",
      fontSize: "5xl",
      w: "full",
    },
    ghost: {
      color: "colorScheme.outline",
    },
    mono: {
      fontFamily: "mono",
      fontWeight: "medium",
      letterSpacing: "widest",
      whiteSpace: "nowrap",
    },
    outline: {
      color: "colorScheme.outline",
    },
    solid: {
      color: "colorScheme.contrast",
    },
    subtle: {
      color: "colorScheme.fg",
    },
    surface: {
      color: "colorScheme.fg",
    },
  })
  

• 3

  プロバイダーを更新する

  生成したテーマをUIProviderに設定します。

  import { UIProvider } from "@workspaces/ui"
  import { theme } from "@workspace/theme"
  
  const App = () => {
    return (
      <UIProvider theme={theme}>
        <YourApplication />
      </UIProvider>
    )
  }
  

• 4

  テキストスタイルを使う

  textStyleに値を設定します。

  <Text textStyle="gradient" />