アプリケーション開発者向け

スタイリングコンポーネント

既存のコンポーネントをセマンティック CSS 変数にポイントします。テーマの変更には、CSS の再構築やコンポーネントの再レンダリングは必要ありません。

セマンティック変数を直接使用する

プリセットごとに静的スタイルシートを生成したり、実行時のテーマ値からクラス名を構築したりしないでください。ルールを安定した状態に保ち、ランタイムに変数値を置き換えさせます。

css

.card {
  color: var(--oria-color-surface-fg);
  background: var(--oria-color-surface-raised);
  border: var(--oria-border-width-default) solid var(--oria-color-border);
  border-radius: var(--oria-radius-lg);
  box-shadow: var(--oria-shadow-md);
}

.page {
  background: var(--oria-pattern-bg, none),
    var(--oria-gradient-bg, var(--oria-color-bg));
}

Tailwind v4 のセマンティック値をマップする

@oriatheme/tailwind の事前構築済み静的ブリッジを使用して手書きのマッピングをスキップします (@oriatheme/tailwind/oria.css; oria テーマの tailwind-bridge でカスタムプレフィックスを生成します)。

css

@import "tailwindcss";

@theme inline {
  --color-background: var(--oria-color-bg);
  --color-foreground: var(--oria-color-fg);
  --color-surface: var(--oria-color-surface);
  --color-primary: var(--oria-color-primary);
  --color-primary-foreground: var(--oria-color-primary-fg);
  --radius-lg: var(--oria-radius-lg);
  --shadow-md: var(--oria-shadow-md);
}

tsx

<section className="rounded-lg bg-surface p-4 text-foreground shadow-md">
  <button className="bg-primary px-4 py-2 text-primary-foreground">
    Save changes
  </button>
</section>

ベースカラーが安定する

@oriatheme/colors provides 26 fixed families and 11 steps for selection and general styling; they do not change with a theme. Only semantic --oria-* variables respond to the theme.

続行: React および Next.js