レイヤースタイル

概要

レイヤースタイルは、プロジェクト全体で視覚的なスタイルを再利用するために使用されるトークンです。

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

<Wrap gap="md" colorScheme="blue">
  <For each={["solid", "subtle", "surface", "ghost", "outline"]}>
    {(token, index) => (
      <Box
        as="button"
        type="button"
        key={index}
        layerStyle={token}
        px="md"
        py="sm"
        rounded="l2"
        _hover={{ layerStyle: `${token}.hover` }}
      >
        {toTitleCase(token)}
      </Box>
    )}
  </For>
</Wrap>

export const layerStyles = defineStyles.layerStyle({
  active: { opacity: 1 },
  disabled: {
    cursor: "not-allowed",
    opacity: 0.4,
    _ripple: { display: "none" },
  },
  ghost: {
    bg: "transparent",
    border: "1px solid transparent",
    color: "colorScheme.outline",
  },
  "ghost.hover": {
    bg: "colorScheme.ghost",
  },
  hover: { opacity: 0.8 },
  outline: {
    bg: "transparent",
    border: "1px solid {colorScheme.muted}",
    color: "colorScheme.outline",
  },
  "outline.hover": {
    bg: "colorScheme.ghost",
  },
  panel: {
    bg: "bg.panel",
    borderColor: "border",
    borderWidth: "1px",
  },
  readOnly: {
    cursor: "default",
    _ripple: { display: "none" },
  },
  solid: {
    bg: "colorScheme.solid",
    border: "1px solid transparent",
    color: "colorScheme.contrast",
  },
  "solid.hover": {
    bg: "colorScheme.solid/80",
  },
  subtle: {
    bg: "colorScheme.subtle",
    border: "1px solid transparent",
    color: "colorScheme.fg",
  },
  "subtle.hover": {
    bg: "colorScheme.muted",
  },
  surface: {
    bg: "colorScheme.subtle",
    border: "1px solid {colorScheme.muted}",
    color: "colorScheme.fg",
  },
  "surface.hover": {
    bg: "colorScheme.muted",
  },
  visuallyHidden: visuallyHiddenAttributes.style,
})

カスタマイズ

• 1

  テーマを生成する

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

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

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  スタイルを変更する

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

  theme/styles/layer-styles.ts

  import { defineStyles, visuallyHiddenAttributes } from "@yamada-ui/react"
  
  export const layerStyles = defineStyles.layerStyle({
    dim: { opacity: 0.6 }, 
    active: { opacity: 1 },
    disabled: {
      cursor: "not-allowed",
      opacity: 0.4,
      _ripple: { display: "none" },
    },
    ghost: {
      bg: "transparent",
      border: "1px solid transparent",
      color: "colorScheme.outline",
    },
    "ghost.hover": {
      bg: "colorScheme.ghost",
    },
    hover: { opacity: 0.8 },
    outline: {
      bg: "transparent",
      border: "1px solid {colorScheme.muted}",
      color: "colorScheme.outline",
    },
    "outline.hover": {
      bg: "colorScheme.ghost",
    },
    panel: {
      bg: "bg.panel",
      borderColor: "border",
      borderWidth: "1px",
    },
    readOnly: {
      cursor: "default",
      _ripple: { display: "none" },
    },
    solid: {
      bg: "colorScheme.solid",
      border: "1px solid transparent",
      color: "colorScheme.contrast",
    },
    "solid.hover": {
      bg: "colorScheme.solid/80",
    },
    subtle: {
      bg: "colorScheme.subtle",
      border: "1px solid transparent",
      color: "colorScheme.fg",
    },
    "subtle.hover": {
      bg: "colorScheme.muted",
    },
    surface: {
      bg: "colorScheme.subtle",
      border: "1px solid {colorScheme.muted}",
      color: "colorScheme.fg",
    },
    "surface.hover": {
      bg: "colorScheme.muted",
    },
    visuallyHidden: visuallyHiddenAttributes.style,
  })
  

• 3

  プロバイダーを更新する

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

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

• 4

  レイヤースタイルを使う

  layerStyleに値を設定します。

  <Box layerStyle="dim" />