diff --git a/docs/src/components/NavList.tsx b/docs/src/components/NavList.tsx index 47607cdf4..568c2a3aa 100644 --- a/docs/src/components/NavList.tsx +++ b/docs/src/components/NavList.tsx @@ -107,12 +107,12 @@ const tailwindDiffList: ListItem[] = [ const tailwindConfigList: ListItem[] = [ { text: 'クイックスタート', - href: '/@charcoal-ui/tailwind-config/quickstart' + href: '/@charcoal-ui/tailwind-config/quickstart', }, { text: 'カスタマイズする', - href: '/@charcoal-ui/tailwind-config/customize' - } + href: '/@charcoal-ui/tailwind-config/customize', + }, ] export const NavList: FC<{ className?: string }> = (props) => { diff --git a/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx b/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx index 2386ec465..ffd7c699d 100644 --- a/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx +++ b/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx @@ -1,17 +1,20 @@ -import { ContentRoot } from "../../../components/ContentRoot"; -import { InlineCode } from "../../../components/InlineCode"; -import { SSRHighlight } from "../../../components/SSRHighlight"; -import { Table } from "../../../components/Table"; -import { dedent } from "../../../utils/string"; +import { ContentRoot } from '../../../components/ContentRoot' +import { InlineCode } from '../../../components/InlineCode' +import { SSRHighlight } from '../../../components/SSRHighlight' +import { Table } from '../../../components/Table' +import { dedent } from '../../../utils/string' export default function CustomizeTailwindConfig() { - return ( -

カスタマイズする

-

- createTailwindConfig() を利用することでお使いの環境、色などに適応させることができます。 -

+ return ( + +

カスタマイズする

+

+ createTailwindConfig(){' '} + を利用することでお使いの環境、色などに適応させることができます。 +

- -

- createTailwindConfig には以下のオプションを渡すことができます。 -

- + `} + lang="javascript" + /> +

+ createTailwindConfig{' '} + には以下のオプションを渡すことができます。 +

+
-

ThemaMap について

-

- charcoal は Tailwind.css の通常のダークモード（ dark:〇〇 系のクラス ）をサポートしません。
- なぜなら charcoal における「色」は、同じ名前でも light テーマと dark テーマで違うカラーコードであり得るからです。
- これを表現するために @charcoal-ui/tailwind-config では theme というオプションを受け取ります。
-

-

- 以下の例は :root（つまり通常ケース）では light テーマを、システムの設定がダークモードである場合は dark テーマを使用するものです。
-

- ThemaMap について +

+ charcoal は Tailwind.css の通常のダークモード（{' '} + dark:〇〇 系のクラス ）をサポートしません。 +
+ なぜなら charcoal における「色」は、同じ名前でも light テーマと dark + テーマで違うカラーコードであり得るからです。 +
+ これを表現するために{' '} + @charcoal-ui/tailwind-config では{' '} + theme というオプションを受け取ります。 +
+

+

+ 以下の例は :root（つまり通常ケース）では light + テーマを、システムの設定がダークモードである場合は dark + テーマを使用するものです。
+

+ -

- theme オプションを設定する場合、ダークテーマ対応を行わないサービスであっても :root に必ず自身のプロダクトのカラーテーマを渡す必要があります。 -

-

- theme をこのように書くと、 このような CSS Variables を生成します。 -

- +

+ theme{' '} + オプションを設定する場合、ダークテーマ対応を行わないサービスであっても{' '} + :root{' '} + に必ず自身のプロダクトのカラーテーマを渡す必要があります。 +

+

+ theme をこのように書くと、 このような CSS + Variables を生成します。 +

+ -

- このとき、以下のように書く必要はありません。
- キーが @media で始まる場合はビルド時に :root が補われます。 -

- +

+ このとき、以下のように書く必要はありません。 +
+ キーが @media で始まる場合はビルド時に{' '} + :root が補われます。 +

+ -

- theme のキーとして通常のセレクタを指定することもできます。
- これによりダークモードの切り替えがDOMの状態に依存するケースにも対応します。 localStorage などで JS での切り替えを実装しているアプリケーションはこのような手法が好ましいでしょう。 -

- +

+ theme{' '} + のキーとして通常のセレクタを指定することもできます。 +
+ これによりダークモードの切り替えがDOMの状態に依存するケースにも対応します。{' '} + localStorage などで JS + での切り替えを実装しているアプリケーションはこのような手法が好ましいでしょう。 +

+ - + - ) + `} + /> + + ) } const options = { - version: { - type: 'v1 | v2 | v3', - description: 'Tailwind.cssのバージョン系統を指定します。色のキー名に使われる DEFAULT と default などの違いを内部で吸収します。' - }, - theme: { - type: 'Record', - description: '条件ごとの色の値のマッピングを渡します。 :root は必須のキーです。' - } -} \ No newline at end of file + version: { + type: 'v1 | v2 | v3', + description: + 'Tailwind.cssのバージョン系統を指定します。色のキー名に使われる DEFAULT と default などの違いを内部で吸収します。', + }, + theme: { + type: 'Record', + description: + '条件ごとの色の値のマッピングを渡します。 :root は必須のキーです。', + }, +} diff --git a/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx b/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx index 0d4574a02..5bb3e951e 100644 --- a/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx +++ b/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx @@ -1,49 +1,52 @@ -import Link from "next/link"; -import { ContentRoot } from "../../../components/ContentRoot"; -import { SSRHighlight } from "../../../components/SSRHighlight"; -import { dedent } from "../../../utils/string"; -import { InlineCode } from "../../../components/InlineCode"; +import Link from 'next/link' +import { ContentRoot } from '../../../components/ContentRoot' +import { SSRHighlight } from '../../../components/SSRHighlight' +import { dedent } from '../../../utils/string' +import { InlineCode } from '../../../components/InlineCode' export default function InstallPage() { - return ( - -

@charcoal-ui/tailwind-config クイックスタート

- - npm-badge - -

インストール

-

npm

- +

@charcoal-ui/tailwind-config クイックスタート

+ + npm-badge + +

インストール

+

npm

+ -

yarn

- +

yarn

+ + lang="shell" + /> -
+
-

概要

-

- @charcoal-ui/tailwind-configは、Tailwindに@charcoal-ui/foundationを適用します。 -

+

概要

+

+ @charcoal-ui/tailwind-configは、Tailwindに + @charcoal-ui/foundationを適用します。 +

-

使い方

-

- tailwind.config.js の中で require して使います。 -

+

使い方

+

+ tailwind.config.js の中で require{' '} + して使います。 +

-

デフォルトのconfigを使う

- デフォルトのconfigを使う + -

- テーマの調整などが必要な場合は カスタマイズする のページを見てください。 -

- - ) -} \ No newline at end of file + `} + lang="javascript" + /> +

+ テーマの調整などが必要な場合は{' '} + + カスタマイズする + {' '} + のページを見てください。 +

+ + ) +}