リリース

Radix Themes のリリースと変更ログ。

3.1.3

• 制御されていないCheckboxコンポーネントに対する不定のインジケーターをサポート

3.1.2

• areasプロパティをGridコンポーネントに追加し、gridAreaプロパティをすべてのレイアウトコンポーネント(Box、Container、Flex、Grid、Section)に追加
• 長い値（IDなど）が次の行に折り返せるように、DataListコンポーネントにoverflow-wrap: anywhereスタイルを追加
• 不定のCheckboxコンポーネントに対する不定のインジケーターをサポート

3.1.1

• Radix Primitivesのアップグレード

3.1.0

• React 19のサポート
• すべてのRadix Primitivesをアップグレードしてください。

3.0.5

• align、height、minHeight、およびmaxHeightプロパティをAlertDialog.ContentとDialog.Contentに追加しました。

3.0.4

• Radix Themesパッケージが、内部の循環依存関係のためにWebpackでバンドルできない問題を修正しました。
• Progressコンポーネントでmaxプロパティをサポートしました。

3.0.3

• テーマ設定grayColorが、明示的なappearance="light"またはappearance="dark"値と組み合わせて効果がない問題を修正しました。
• 明示的なcolor値が使用されている場合に、Linkが自動的な高コントラストの色を使用しない回帰を修正しました。
• グレーのテキストの中にネストされている場合に、Linkが正しいテキスト選択とフォーカスカラーを使用しない回帰を修正しました。
• Linkのタップハイライトスタイルを調整しました。
• CheckboxGroup.ItemとRadioGroup.Itemを調整し、テキストがはみ出した際の切り詰めレイアウトを実現できるようにしました。
• 実質的な効果がないコンポーネントから、不要なdata-accent-color属性を削除しました。
• colorプロパティ定義の内蔵処理を改良しました。
• TextFieldとTextAreaの自動入力と無効時の色を改良しました。
• Spinnerコンポーネント用に内部--spinner-animation-duration CSS変数を追加しました。

3.0.2

• CSSから不要なブラウザプレフィックスを削除し、バンドルサイズを17KB削減しました。
• 色付きテキストの中にネストされている場合に、Linkが自動的な高コントラストの色を使用しない回帰を修正しました。
• Linkがbuttonとしてレンダリングされた場合に、ホバースタイルが表示されない回帰を修正しました。
• TextAreaがFirefoxで空白文字列を保持しない回帰を修正しました。

3.0.1

• リセットスタイルシートの構文エラーを修正しました。
• SafariでのCheckbox size="1"インジケーターのチェックマークの配置を修正しました。
• SafariでCheckboxとRadioの無効時のカーソルスタイルが機能しない問題を修正しました。

3.0.0

アップグレードガイド

このリリースには、いくつかの破壊的変更が含まれています。アップグレードするには、以下の手順に従ってください。

一般

• 複数パーツのコンポーネントは、名前付きパーツをエクスポートしなくなりました。代わりにドット表記を使用してください。これはReact Server Componentsで動作するように改訂されました。例：
  • DialogRoot → Dialog.Root
  • DialogTrigger → Dialog.Trigger
  • DialogContent → Dialog.Content
  • …その他すべての複数パーツコンポーネントも同様です。
    • AlertDialog
    • Callout
    • ContextMenu
    • Dialog
    • DropdownMenu
    • HoverCard
    • Popover
    • RadioGroup
    • Select
    • Table
    • Tabs
    • TextField
• プロパティ定義やヘルパーなどのパッケージ内部構造は、ルート@radix-ui/themesインポートエントリポイントから使用できなくなりました。
  • 代わりに@radix-ui/themes/propsと@radix-ui/themes/helpersからインポートしてください。

プロパティ

• レイアウトコンポーネントのwidthとheightプロパティは、もうスペーススケールにマップされません。widthとheightプロパティの使用箇所を対応するスペーススケールステップで置き換えてください。
  • width="1" → width="4px"
  • width="2" → width="8px"
  • width="3" → width="12px"
  • width="4" → width="16px"
  • width="5" → width="24px"
  • width="6" → width="32px"
  • width="7" → width="40px"
  • width="8" → width="48px"
  • width="9" → width="64px"
  • …heightも同様です。
  • レスポンシブオブジェクト構文も更新してください。
  • ハードコードされた値の代わりに、var(--space-1)からvar(--space-9)を使用することもできます。
• レイアウトコンポーネントのshrinkとgrowプロパティの名前が変更されました。
  • shrink → flexShrink
  • grow → flexGrow

色

カスタムコンポーネントで以下のトークンを使用していた場合は、対応する参照を置き換えてください。

• --color-surface-accent → --accent-surface
• コントラストカラーの名前が変更されました。
  • --accent-9-contrast → --accent-contrast
  • --red-9-contrast → --red-contrast
  • --pink-9-contrast → --pink-contrast
  • --blue-9-contrast → --blue-contrast
  • …すべてのスケールも同様です。
• 新しいフォーカスカラーのスケールが追加されました。以下のトークン名を変更してください。
  • --color-autofill-root → --focus-a3
  • --color-focus-root → --focus-8
  • --color-selection-root → --focus-a5
• --gray-2-translucentおよび対応する色付きグレーの色は削除されました。
  • 代わりに、バックドロップブラーフィルターと組み合わせて--color-panel-translucentを使用してください。

コンポーネント

• AlertDialog、Dialogは、Content部分でデフォルトでmaxWidth="600px"になりました。
  • これは以前の580px値よりもわずかに大きくなっています。異なる幅のダイアログを使用する場合は、独自の値でmaxWidthを上書きしてください。
• Badgeに新しいsize="3"が追加され、size="2"はサイズが小さくなり、size="1"の寸法が調整されました。
  • size="2"の使用箇所をsize="3"に置き換えてください。
• Cardコンポーネントの内部HTML構造とスタイルが変更され、現在は単一のHTMLノードでレンダリングされます。スタイルや動作をオーバーライドするために実装上の特殊な動作に依存していた場合、コードが期待通りに動作することを確認してください。
  • ghost以外のバリアントでCardの背景色をオーバーライドする必要がある場合は、background-colorを直接指定する代わりに、--card-background-color変数を使用するか、Cardの最初の子要素としてネストされた<Inset p="current">要素で背景色を設定してください。
  • asChildを使用している、または親コンポーネントによってasChild化されているCardインスタンスを確認してください。（追加のスタイルのないリンクまたはボタンカードのような一般的なケースは、期待通りに動作します。）
• HoverCardとPopoverは、コンテンツ部分にデフォルトでmaxWidth="480px"が設定されるようになりました。
  • より広い幅が必要なポpoverとホバーカードを使用する場合は、独自の値でmaxWidthをオーバーライドしてください。
• RadioGroupの内部HTML構造とスタイルが変更され、Item部分にchildrenを渡す際にオプションのテキストラベルを表示するように設計されました。Root部分は、フレックスカラムスタイルとスペーシングも提供するようになりました。
  • より低レベルの制御が必要な場合は、Radioコンポーネントを使用してください。
• Sectionに新しいsize="3"が追加されました。
  • size="3"を使用していたすべてのSectionをsize="4"に更新してください。
• Tabsの基礎となる文字/単語間隔のCSS変数が、TabsとTabNavの両方のコンポーネントをサポートするように名前が変更されました。これらの変数を使用していた場合は、新しい値に名前を変更してください。
  • --tabs-trigger-active-letter-spacing → --tab-active-letter-spacing
  • --tabs-trigger-active-word-spacing → --tab-active-word-spacing
  • --tabs-trigger-inactive-letter-spacing → --tab-inactive-letter-spacing
  • --tabs-trigger-inactive-word-spacing → --tab-inactive-word-spacing
• TextFieldは、RootとSlotの2つの部分のみになり、Input部分が削除され、プロップの転送方法が簡素化されました。
  • TextField.Rootを使用せずに使用されていたすべてのTextField.Input部分は、TextField.Rootに名前を変更する必要があります。
  • TextField.Root内で使用されていたすべてのTextField.Input部分は削除し、そのプロップをTextField.Root部分に直接配置する必要があります。
  • TextField.Inputの右側に配置されたすべてのTextField.Slot部分には、side="right"プロップが必要です。ただし、1つのTextField内に2つのスロット（例：左に1つ、右に1つ）を使用していた場合は、調整は必要ありません。その場合、スロットは自動的に異なる側に配置されます。
  • スタイルや動作をオーバーライドするために実装上の特殊な動作に依存していた場合、コードが期待通りに動作することを確認してください。
• Themeは、もはやbodyの背景色を自動的に設定しません。背景色は、デフォルトでルートThemeによって提供されるようになりました。CSS変数--color-page-backgroundは使用できなくなりました。
  • ほとんどの場合、.radix-themes要素で使用可能な--color-backgroundで安全に置き換えることができます。
• Tooltipは、コンテンツ部分にデフォルトでmaxWidth="360px"が設定されるようになりました。
  • より広い幅が必要なツールチップを使用する場合は、独自の値でmaxWidthをオーバーライドしてください。

完全な変更ログ

• 一般
  • パッケージ構造
    • ESM互換性の向上
    • 個々のコンポーネントパーツのツリーシェイキングの向上
    • [Breaking] マルチパートコンポーネントの名前付きエクスポートの削除
      • 注：新しいアプローチにより、サーバーコンポーネントでもドット表記が確実に機能します。
    • [Breaking] ルート@radix-ui/themesインポートエントリポイントからコンポーネントのプロップ定義と内部ヘルパーを削除し、@radix-ui/themes/propsと@radix-ui/themes/helpersからエクスポートして、同じテクニックを使用してRadix Themesの上に独自のコンポーネントライブラリを構築できるようにします。
    • 複雑なツール設定で最新のモジュール解決ルールをサポートできない場合の回避策として、パッケージの内部に直接アクセスできるように、ワイルドカードエントリポイントをパッケージに追加しました。
    • 高度なユースケースのための追加のCSSファイルエクスポートを追加しました。
      • CSSの優先順位を細かく制御する必要がある場合に備えて、個々のtokens.css、components.css、utilities.cssファイルをエクスポートします。たとえば、独自のCSSの後にRadix Themesのutilities.cssをインポートし、それ以外のすべてをその前にインポートできます。
      • 上記に加えて、インポートする色をカスタマイズできます。tokens.cssをインポートする代わりに、tokens/base.cssとtokens/colors/*.cssをインポートすることもできます。ここで*は、プロジェクトに必要なアクセントカラーとグレーカラーの名前に対応します。
      • レイアウトコンポーネント（Box、Flex、Grid、Container、Section）のスタイルのみを含むlayout.cssをエクスポートします。上記のユースケースをサポートするために、個々のエクスポートlayout/tokens.css、layout/components.css、layout/utilities.cssも利用できます。
  • プロパティ
    • すべてのレイアウトコンポーネントに次のプロップを追加しました。
      • minWidth、maxWidth
      • minHeight、maxHeight
      • flexBasis、flexShrink、flexGrow
      • gridColumn、gridColumnStart、gridColumnEnd
      • gridRow、gridRowStart、gridRowEnd
      • overflow、overflowX、overflowY
    • レスポンシブオブジェクト構文で使用する場合も含めて、任意のCSS値を許可するようにすべてのレイアウトプロップを再設計しました。任意の値をサポートするプロップには、次のものがあります。
      • width、minWidth、maxWidth
      • height、minHeight、maxHeight
      • m、mx、my、mt、mr、mb、ml
      • `p`、`px`、`py`、`pt`、`pr`、`pb`、`pl`
      • `inset`、`top`、`right`、`bottom`、`left`
      • `gap`、`gapX`、`gapY`
      • flexBasis、flexShrink、flexGrow
      • gridColumn、gridColumnStart、gridColumnEnd
      • gridRow、gridRowStart、gridRowEnd
    • [破壊的変更] `width` プロパティと `height` プロパティは、スペーススケールにマッピングされなくなりました。これは、ほとんどの場合、幅と高さにスペーススケールが設定されておらず、IDEのオートコンプリート候補としてスペーススケールを表示することが不自然で誤解を招く可能性があったためです。
    • [破壊的変更] `shrink` プロパティと `grow` プロパティの名前を `flexShrink` と `flexGrow` に変更しました。
    • レイアウトプロパティの型シグネチャを更新し、可能な限りコードエディタの候補にスペーススケール値のみを使用するようにしました。CSSキーワードや`auto`、`100vw`などの値は、手動で文字列値として使用できます。
    • すべてのレイアウトプロパティにJSDocでドキュメントを付与しました。
    • ブレークポイントオブジェクトで`initial`キーがない場合に、レスポンシブプロパティのデフォルトプロパティ値が適用されない問題を修正しました。
    • ネイティブHTML要素から継承した`color`、`defaultValue`、`defaultChecked`属性を、カスタム実装との混同を避けるため、コンポーネントから削除しました。
    • [破壊的変更] すべてのコンポーネントとパーツにおける`asChild`プロパティの可用性を再設計しました。
  • 色
    • アクセントカラーを受け入れる他のコンポーネント内にネストされている場合でも、`highContrast`テキストの色が常に正しく動作するようにしました。
    • `variant="soft"`のメニュー項目の背景色を調整しました。
    • [破壊的変更] `--color-surface-accent`を`--accent-surface`に名前変更しました。
    • [破壊的変更] `--accent-9-contrast`、`--red-9-contrast`、`--pink-9-contrast`、`--blue-9-contrast`などを`--accent-contrast`、`--red-contrast`、`--pink-contrast`、`--blue-contrast`などに名前変更しました。
    • `--gray-2-translucent`と対応する色付きグレーの色を削除しました。
    • `--color-surface`と`--color-panel-translucent`の値を調整しました。
    • [破壊的変更] `--color-focus-root`、`--color-selection-root`、`--color-autofill-root`をフォーカスカラースケール（例：`--focus-1`～`--focus-12`、`--focus-a1`～`--focus-a12`）に置き換えました。
  • その他
    • アニメーションの大部分を高速化しました。
    • パディングまたはボーダースタイルを持つすべての要素が`box-sizing: border-box`を使用するようにしました。
    • 無効なカーソルのスタイルが正しく適用されるようにしました。
    • 半透明パネルにぼかしバックドロップフィルター効果を追加しました。
• 11個の新しいコンポーネントを追加しました。
  • DataList
    • キーバリューペアとしてテキストデータを表示するためのコンポーネント。パーツ:
      • Root
      • Item
      • Label
      • Value
  • CheckboxGroup
    • オプションのテキストラベルとロービングフォーカスを持つチェックボックスのグループ。パーツ:
      • Root
      • Item
  • CheckboxCards
    • リストから1つ以上の値を選択するためのインタラクティブなカードコンポーネント。パーツ:
      • Root
      • Item
  • Progress
    • タスクの完了状況を示すプログレスバーコンポーネント。
  • Radio
    • 独自のレイアウトでラジオ入力を作成するためのスタンドアロン要素。
  • RadioCards
    • リストから1つの値を選択するためのインタラクティブなカードコンポーネント。パーツ:
      • Root
      • Item
  • Reset
    • ネイティブHTML要素のスタイルをリセットするコンポーネント。
  • SegmentedControl
    • 複数のオプションから1つのオプションを選択し、タブのようなインターフェースを制御するためのコンポーネント。
  • Skeleton
    • 任意のUI要素をラップしてローディングスケルトンに変換できるコンポーネント。`loading`プロパティを使用して、自身またはReactフラグメントを条件付きでレンダリングすることもできます。
  • Spinner
    • ローディングスピナーコンポーネント。`Skeleton`と同様に、任意のUI要素をラップし、条件付きの`loading`プロパティを使用して表示できます。
  • TabNav
    • `Tabs`と同様ですが、ページナビゲーションに使用されます。通常のリンクをレンダリングし、ロービングフォーカスをサポートします。パーツ:
      • Root
      • Link
• `AlertDialog`、`Dialog`
  • 絶対配置された子要素をサポートするために`position: relative`を追加しました。
  • Contentパーツに`width`、`minWidth`、`maxWidth`プロパティを追加しました。
  • Contentパーツのデフォルトで`maxWidth="600px"`に設定しました。
  • スクロールコンテナを再設計し、スクロールバーをダイアログのContentパーツではなくビューポートに表示するようにしました。スタイルや動作をオーバーライドするために実装の癖に依存していた場合、コードが期待通りに動作することを確認してください。
• Badge
  • `user-select: none`を削除しました。
  • [破壊的変更] `size="3"`を追加し、`size="2"`をさらに小さくし、`size="1"`の寸法を調整しました。
• `Blockquote`、`Code`、`Em`、`Heading`、`Quote`、`Link`、`Strong`、`Text`
  • テキストの折り返しと省略記号による切り詰めを制御する新しい`wrap`プロパティと`truncate`プロパティを追加しました。
• Card
  • 内部HTML構造とスタイルを再設計しました。このコンポーネントは現在、単一のHTMLノードをレンダリングします。スタイルや動作をオーバーライドするために実装の癖に依存していた場合、コードが期待通りに動作することを確認してください。
• Code
  • `variant="ghost"`の色は、`color`プロパティを使用して明示的に設定されない限り、Textと同様に色を継承するようになりました。
• Container
  • コンテナの内容を左、中央、または右に配置するかどうかを制御する`align`プロパティを追加しました。
  • [破壊的変更] `display="block"`の値を`display="initial"`に変更しました（以前の値は壊れていました）。
• `ContextMenu`、`DropdownMenu`
  • `CheckboxItem`と`RadioItem`パーツに`color`プロパティを追加しました。
• `Checkbox`、`RadioGroup`、`Switch`
  • 内部HTML構造とスタイルを再設計しました。これらのコンポーネントは、より少ないHTMLノードをレンダリングし、すべてのプロパティを最上位ノードに転送するようになりました。スタイルや動作をオーバーライドするために実装の癖に依存していた場合、コードが期待通りに動作することを確認してください。
• DropdownMenu
  • Contentパーツが`variant="soft"`を使用する場合、強調表示されたアイテムに明るいテキストの色を使用するようになりました。
  • 下向き矢印インジケーターをレンダリングするオプションの`TriggerIcon`パーツを追加しました。
• `Box`、`Flex`、`Grid`
  • `span`または`div`としてレンダリングするための`as`プロパティのサポートを追加しました。
  • Boxコンポーネントについて、タグに関わらず`display: block`スタイルが強制適用されるようになりました。
• `Button`、`IconButton`
  • 新しい`loading`プロパティを追加しました。
• Flex
  • `gapX`と`gapY`プロパティを追加しました。
• `HoverCard`、`Popover`
  • 絶対配置された子要素をサポートするために`position: relative`を追加しました。
  • コンテンツ部分に`width`、`minWidth`、`maxWidth`、`height`、`minHeight`、`maxHeight`プロパティを追加しました。
  • コンテンツ部分のデフォルトの`maxWidth`を`"480px"`に設定しました。
• RadioGroup
  • **[互換性なし]** 内部HTML構造とスタイルを再設計しました。このコンポーネントは、`Item`部分に`children`を渡した場合にオプションのテキストラベルを表示するように設計されており、`Root`部分はflex columnスタイルと間隔を提供するようになりました。
• Section
  • [破壊的変更] `display="block"`の値を`display="initial"`に変更しました（以前の値は壊れていました）。
  • **[互換性なし]** `size="3"`の値を新しい値に変更し、`size="4"`には以前の値を使用します。
• Select
  • トリガーのフォントウェイトが、親の`<label>`要素などから継承されないようにします。
• Separator
  • `orientation`プロパティでレスポンシブな値を許可しました。
• ScrollArea
  • 親要素の自動高さによって情報が提供された場合に、スクロールエリアが100％の高さに伸縮できない問題を修正しました。
• Slider
  • 境界ボックスのサイズを、スライダートラックのサイズに合わせました。
  • `flex-shrink: 0`を`flex-grow: 1`と`width: stretch`/`height: stretch`に置き換えて、レイアウトにおいてスライダー要素がより直感的に伸縮できるようにしました。
  • Safariにおける過剰なフォーカスアウトラインを修正しました。
• Table
  • `table-layout`スタイルプロパティを制御するための新しい`layout`プロパティを追加しました。
  • `TableCell`部分の`width`プロパティの型シグネチャと実装を、レイアウトコンポーネントの`width`プロパティと調整しました。
  • `TableCell`部分に`minWidth`と`maxWidth`プロパティを追加しました。
• Tabs:
  • `TabsList`に`color`と`highContrast`プロパティを追加しました。
  • `TabsList`と`TabsContent`にマージンに関するプロパティを追加しました。
  • `.radix-themes`内の文字/単語間隔のCSS変数を改名し、`Tabs`と`TabNav`両方のコンポーネントをサポートするようにしました。
    • --tabs-trigger-active-letter-spacing → --tab-active-letter-spacing
    • --tabs-trigger-active-word-spacing → --tab-active-word-spacing
    • --tabs-trigger-inactive-letter-spacing → --tab-inactive-letter-spacing
    • --tabs-trigger-inactive-word-spacing → --tab-inactive-word-spacing
• TextArea
  • `radius`プロパティを追加しました。
  • `resize`プロパティを追加しました。
  • Grammarly拡張機能がコンポーネントスタイルを壊してしまう問題を修正しました。
  • 親の`<label>`要素などからフォントウェイトが継承されないようにします。
  • 内部HTML構造とスタイルを再設計しました。スタイルや動作をオーバーライドするために実装上の癖を利用していた場合、コードが期待通りに動作することを確認してください。
• TextField
  • **[互換性なし]** プロパティの転送方法を簡素化し、内部HTML構造とスタイルを再設計するために`Input`部分を削除しました。
  • 一部の入力`type`で`getSelectionRange`がサポートされない問題を修正しました。
  • Grammarly拡張機能がコンポーネントスタイルを壊してしまう問題を修正しました。
  • 親の`<label>`要素などからフォントウェイトが継承されないようにします。
• ThemePanel
  • Theme Panelの切り替えホットキーを"T"キー(修飾キーなし)、ダークモードの切り替えを"D"キー(修飾キーなし)に変更しました。
• テーマ
  • ルート`Theme`コンポーネントに`min-height: 100vh`を設定しました。
  • 特定の状況で`hasBackground`プロパティの値が効果を持たない問題を修正しました。
  • `Theme`がデフォルトで背景色を持つ場合のロジックを改良しました。明示的な`hasBackground`プロパティを持たない`Themeは背景色を表示します。
    • ルート`Theme`コンポーネントの場合
    • 明示的なappearance値を持つ場合(例: `<Theme apperance="light">`または`<Theme apperance="dark">`)
  • ボディの背景色は自動的に設定されなくなりました。背景色は、デフォルトでルート`Theme`によって提供されるようになりました。
    • **[互換性なし]** CSS変数`--color-page-background`は使用できなくなりました。
    • `html`の`suppressHydrationWarning`は不要になりました(他のライブラリ(例: `next-themes`)で必要とされない限り)。
  • すべてのThemeプロパティをJSDocで文書化しました。
• Tooltip
  • `width`、`minWidth`、`maxWidth`プロパティを追加しました。
  • ツールチップコンテンツのデフォルトの`maxWidth`を`"360px"`に設定しました。
  • デフォルトの遅延時間を200msに変更しました。

2.0.2

• ChromeでRadix ThemesスタイルシートのCSSインスペクターを使用中にクラッシュすることがあった問題を修正しました。

2.0.1

• Card
  • `variant="surface"`の境界線が`color-mix`をサポートしていないブラウザで消えてしまう問題を修正しました。
  • `variant="surface"`の境界線の色を調整しました。
• Code
  • `Link`内で`variant="ghost"`が使用されている場合、`Link`の`underline="hover"`が尊重されるようにしました。
• TextField
  • 一般的なフォントでの垂直方向のテキスト配置を改善しました。
  • 入力が無効になっている場合、自動入力アクセントの色を適用しません。
  • 自動入力アクセントの色が常にフォーカスアウトラインの色と一致するようにしました。

2.0.0

• 一般
  • CSSビルドでセレクタを組み合わせ、ブラウザで要素を検査する際の開発者エクスペリエンスを向上させました。
  • CSSビルドからコメントを削除しました。
  • HTML要素のスタイル設定ではCSSセレクタの特異性を`0,1,0`に、擬似要素のスタイル設定では`0,1,1`に制限し、Tailwindとの互換性を向上させました。
    • **[アップグレードガイド]** Radix Themesの特異性の癖に依存していた場合、スタイルのオーバーライドが期待通りに機能することを確認してください。
  • (Radix Colors 3.0.0を介して)ダークモードの色を再設計し、ライトモードの色を調整しました。
    • 彩度が高すぎる透明なグレーを修正しました。
    • **[アップグレードガイド]** カスタムスタイルの色トークンを使用していた場合、デザインが期待通りに見えることを確認してください。
    • **[アップグレードガイド]** 特定の色をオーバーライドしていた場合、オーバーライドが新しいカラースケールと調和していることを確認してください。
  • 透明な黒と白のカラースケールを再設計しました。
    • [アップグレードガイド] カスタムスタイルで透過性の黒と白のカラースケールを使用していた場合（--black-a1、--white-a1など）、新しい値を確認し、デザインが期待通りに見えるように使用されているステップを更新してください。
      • --black-a1をrgba(0, 0, 0, 0.01)に変更します。
      • --black-a2をrgba(0, 0, 0, 0.024)に変更します。
      • --black-a3を--black-a1に変更します。
      • --black-a4を--black-a2に変更します。
      • --black-a5を--black-a2に変更します。
      • --black-a6を--black-a3に変更します。
      • --black-a7を--black-a3または--black-a4に変更します。
      • --black-a8を--black-a5に変更します。
      • --black-a9を--black-a6または--black-a7に変更します。
      • --black-a10を--black-a7に変更します。
      • --black-a11を--black-a8に変更します。
      • --black-a12を--black-a11に変更します。
      • --white-a1をtransparentに変更します。
      • --white-a2をrgba(255, 255, 255, 0.01)に変更します。
      • --white-a3を--white-a1または--white-a2に変更します。
      • --white-a4を--white-a2に変更します。
      • --white-a5を--white-a3に変更します。
      • --white-a6を--white-a3または--white-a4に変更します。
      • --white-a7を--white-a4に変更します。
      • --white-a8を--white-a5に変更します。
      • --white-a9を--white-a6に変更します。
      • --white-a10を--white-a7に変更します。
      • --white-a11を--white-a9に変更します。
      • --white-a12を--white-a11または--white-a12に変更します。
  • シャドウのスケールを調整します。
  • テキスト選択の色と同様に、ほとんどのcolor="gray"コンポーネントのフォーカスリングにテーマのアクセントカラーを維持します。
  • 内部コンポーネント固有のCSS変数の一部を、命名パターンに従うように変更します。
  • Themeコンポーネントでの強制的な明/暗表示は、正しい入力自動入力の背景色など、対応するブラウザの色も設定します。
  • すべての@keyframesアニメーション名をrt-プレフィックスを追加し、ケバブケースに変更します。
  • フォーカススタイルの大部分にbox-shadowではなくoutlineを使用します。これにより、フォーカスされた要素でのChromeにおけるわずかなアンチエイリアシングの問題を回避できます。
• `AlertDialog`、`Dialog`
  • ダイアログコンテンツの周囲にパディングを追加して、ビューポートの端に触れないようにします。
  • iOSでダイアログコンテンツがビューポートからはみ出ないようにします。
• アバター
  • フォールバックアイコンのサイズを強制的に適用しません。
    • [アップグレードガイド] フォールバックとしてsvgアセットを使用していた場合は、適切なサイズを手動で設定してください。
  • インタラクティブ要素のカーソルスタイルを制御するためのCSS変数を追加します。
    • --cursor-button: default;
    • --cursor-checkbox: default;
    • --cursor-disabled: not-allowed;
    • --cursor-link: pointer;
    • --cursor-menu-item: default;
    • --cursor-radio: default;
    • --cursor-slider-thumb: default;
    • --cursor-slider-thumb-active: default;
    • --cursor-switch: default;
  • .rt-reset-buttonクラスと.rt-reset-aクラスを単一の.rt-resetクラスに置き換えます。
    • 新しい.rt-resetクラスは、カスタムコンポーネントを作成する際にa、button、h1、h2、h3、h4、h5、h6、ol、ul、p、preタグのリセットに使用できます。
    • [アップグレードガイド] カスタムコンポーネントでこれらのクラスを使用していた場合は、使用するクラス名を更新してください。
• blockquote
  • [破壊的変更] trimプロパティを削除しました。
• `Button`、`IconButton`
  • 無効状態のルックアンドフィールを調整し、標準化しました。
  • disabledをasChildと共に使用する場合、他の要素にも無効スタイルを適用します。
  • 明暗モードのさまざまなアクセントカラーでvariant="classic"のルックアンドフィールを向上させました。
• Callout
  • Callout.Root内に複数のCallout.Text要素をネストできるように、レイアウトの動作を調整しました。
    • [アップグレードガイド] Callout.Rootがflexプロパティを提供していた方法に依存していた場合は、レイアウトを明示的にFlexコンポーネントを使用するように変更してください。
  • 明示的なcolorプロパティが渡されない限り、コールアウトがテキストカラーを継承する問題を修正しました。
    • [アップグレードガイド]以前の外観を好む場合は、テキストを濃くするためにhighContrastプロパティをコールアウトに渡してください。
  • 灰色のvariant="surface"には灰色の背景を使用します。
  • variant="outline"には、より濃いアウトラインの色を使用します。
• チェックボックス
  • [破壊的変更]チェックボックスをTextコンポーネントでラップすると、チェックボックスがテキストの最初の行に自動的に配置されるようにレイアウトを改善しました。
    • [アップグレードガイド]チェックボックスを含むレイアウトが期待通りでない場合は、<Text as="label" size="...">でチェックボックスをラップし、優先するテキストサイズを使用してください。
  • [破壊的変更]サイズの再設計 - より小さいsize="1"を追加し、デフォルトサイズをsize="2"に変更し、より洗練されたsize="3"を追加しました。
    • [アップグレードガイド]明示的なsizeプロパティを使用してsize="1"またはsize="2"のチェックボックスを使用していた場合は、それぞれsize="2"とsize="3"に名前を変更してください。
  • variant="classic"のルックアンドフィールを調整しました。
  • 無効状態のルックアンドフィールを調整し、標準化しました。
• Card
  • variant="classic"のシャドウが要素の外側に広がらないように調整しました。
  • variant="classic"のホバーと押下スタイルを調整しました。
  • 不足していた押下スタイルを追加しました。
  • 内部シャドウの適用方法を調整し、コンポーネントの外側の背景とブレンドするようにしました。
• Code
  • CodeがLink内にある場合に、インタラクティブスタイルを追加しました。
  • 親のText要素に基づいたサイズか、コード自身のsizeプロパティからのサイズかに関わらず、variant="ghost"のフォントサイズが不整合になる問題を修正しました。
  • variant="outline"とvariant="surface"について、アウトラインの太さをフォントサイズに相対的にスケーリングしました。
  • variant="solid"の::selection背景色を改善しました。
  • カスタムコードフォントの垂直メトリクスとデフォルト値がうまく合わない場合に備え、CodeバリアントのパディングをカスタマイズするためのCSS変数を.radix-themesに追加しました。
    • --code-padding-top
    • --code-padding-bottom
• DropdownMenu、ContextMenu
  • テーマ設定がradius="full"の場合、ボーダーの半径を小さくしました。
  • 水平方向のパディングを調整しました。
  • ラベルの見た目と感触を洗練させました。
• グリッド
  • Gridコンポーネントをネストした際に、子孫のGridが意図せず親のスタイルを継承するバグを修正しました。
• インセット
  • コンテンツが親要素のパディングまでクリップされるか、ボーダーまでクリップされるかを制御するためのclipプロパティを追加しました。
  • TableがInset内にある場合、テーブルセルのパディングを自動的に調整します。
• Kbd
  • 垂直方向の配置を微調整しました。
• Link
  • 下線の色を彩度を下げました。
  • Textと同様に、色の付いたHeading要素内にあるリンクを自動的に高コントラストにしました。
  • variant="outline"とvariant="surface"について、下線の太さをフォントサイズに相対的にスケーリングしました。
• RadioGroup
  • [破壊的変更] レイアウトを改善し、ラジオボタンをTextコンポーネントでラップすると、ラジオボタンがテキストの最初の行に自動的に揃うようになりました。
    • [アップグレードガイド] ラジオボタンを含むレイアウトが期待通りに表示されることを確認してください。そうでない場合は、<Text as="label" size="...">を使用して、お好みのテキストサイズでラジオボタンをラップしてください。
  • [破壊的変更] サイズを再設計しました。より小さなsize="1"を追加し、デフォルトサイズをsize="2"に変更し、より洗練されたsize="3"を追加しました。
    • [アップグレードガイド] 明示的なsizeプロパティを使用してsize="1"またはsize="2"のラジオボタンを使用していた場合、それぞれsize="2"とsize="3"に名前を変更してください。
  • variant="classic"のルックアンドフィールを調整しました。
  • 無効状態のルックアンドフィールを調整し、標準化しました。
• Select
  • 長いアイテムリストでのスクロールバーの非表示の問題を修正しました。
  • ライトモードとダークモード全体でvariant="classic"の見た目と感触を改善しました。
  • position="popper"を使用する場合、SelectContentをトリガーの左側に配置しました。
  • 水平方向のパディングを調整しました。
  • ラベルの見た目と感触を洗練させました。
  • size="3"を再設計しました。
• ScrollArea
  • プリミティブのバージョンをアップグレードし、上流の型の問題を修正しました。
  • スクロールバーマージンの変数の名前をスクロールバーの向きを含めるように変更し、.radix-themesで宣言して、スクロールバーの位置調整を容易にしました。
    • [アップグレードガイド] --scrollarea-scrollbar-margin-top、--scrollarea-scrollbar-margin-leftなどを利用していた場合、新しい名前に従い、適切なレベルで設定されていることを確認してください。.rt-ScrollAreaScrollbar要素をターゲットにして変数を設定する必要はもうありません。オーバーライドが必要なコンポーネントで直接設定できます。新しい変数
      • --scrollarea-scrollbar-horizontal-margin-top
      • --scrollarea-scrollbar-horizontal-margin-bottom
      • --scrollarea-scrollbar-horizontal-margin-left
      • --scrollarea-scrollbar-horizontal-margin-right
      • --scrollarea-scrollbar-vertical-margin-top
      • --scrollarea-scrollbar-vertical-margin-bottom
      • --scrollarea-scrollbar-vertical-margin-left
      • --scrollarea-scrollbar-vertical-margin-right
• Slider
  • コンポーネントで使用されている影と色を調整しました。
  • 無効状態のルックアンドフィールを調整し、標準化しました。
  • 高コントラストのスライダーで無効時のスタイルが正しくない問題を修正しました。
• スイッチ
  • [破壊的変更] レイアウトを改善し、スイッチをSwitchコンポーネントでラップすると、スイッチがテキストの最初の行に自動的に揃うようになりました。
    • [アップグレードガイド] スイッチを含むレイアウトが期待通りに表示されることを確認してください。そうでない場合は、<Text as="label" size="...">を使用して、お好みのテキストサイズでスイッチをラップしてください。
  • [破壊的変更] サイズを再設計し、size="2"とsize="3"を小さくしました。
    • [アップグレードガイド] 以前の外観と合わせるには、size="2"の代わりにsize="3"を使用してください。
  • コンポーネントで使用されている影と色を調整しました。
  • 無効状態のルックアンドフィールを調整し、標準化しました。
• Table
  • 外側の境界線の適用方法を調整し、コンポーネントの外側の背景と調和するようにしました。
• Tabs
  • デフォルト値がカスタムフォントでうまく機能しない場合に備え、アクティブと非アクティブのタブの文字間隔と単語間隔をカスタマイズするためのCSS変数を.radix-themesに追加しました。これにより、視覚的なウェイトの変化を最小限に抑えることができます。
    • --tabs-trigger-active-letter-spacing
    • --tabs-trigger-active-word-spacing
    • --tabs-trigger-inactive-letter-spacing
    • --tabs-trigger-inactive-word-spacing
• テキスト
  • asプロパティにas="label"オプションを追加しました。
  • asプロパティが指定されていない場合の、プロパティ型の解決方法を改善しました。
• TextArea
  • スタイル設定のために複数のHTMLノードを使用する内部実装を再設計しました。
    • レイアウトスタイルを調整し、TextAreaが真のdisplay: block要素のように動作し、利用可能なスペースを水平方向に満たすようにしました。
    • styleとclassNameは、ラッピングdiv要素に転送されるようになりました。refおよびその他のプロパティは、引き続きtextarea自体に転送されます。
    • [アップグレードガイド] style、className、または関連するHTMLノードをターゲットとするカスタムCSSを使用してTextAreaのスタイルをオーバーライドしていた場合、カスタムスタイルが期待通りに動作することを確認してください。
    • [アップグレードガイド] ブラウザによって設定されたTextAreaの固有の幅に依存していた場合、レイアウトが期待通りに表示されることを確認してください。
  • よりバランスの取れた外観になるように、パディング値を調整しました。
    • TextAreaがオーバーフローする場合に、より快適なタイピング体験のために、一致するスクロールマージンを使用しました。
  • 内部シャドウの適用方法を調整し、コンポーネントの外側の背景とブレンドするようにしました。
  • 無効状態と読み取り専用状態の見た目と感触を洗練させ、標準化しました。
  • 無効な入力でテキスト値が色付きで表示されるSafariのバグを修正しました。
  • 自動入力のスタイルを改善しました。
• TextField
  • 潜在的なスタッキングの問題を回避するために、コンテナのz-indexをリセットしました。
  • よりバランスの取れた外観になるように、パディング値を調整しました。
    • カーソルが入力の最後に位置している場合に、長い値が左端で切り捨てられないように、padding-leftの代わりにtext-indentを使用しました。
  • 内部シャドウの適用方法を調整し、コンポーネントの外側の背景とブレンドするようにしました。
  • 無効状態と読み取り専用状態の見た目と感触を洗練させ、標準化しました。
  • 無効な入力でテキスト値が色付きで表示されるSafariのバグを修正しました。
  • Chromeで入力内で水平方向にスクロールしたときに長い値が表示されないのを防いでいた省略記号による切り捨てを削除しました。
  • 自動入力のスタイルを改善しました。
• ThemePanel
  • 外観を変更する際のトランジションを無効にしました。
  • ボーダー半径プレビューのコントラストを改善しました。
• Tooltip
  • テーマ設定がradius="full"の場合、ボーダーの半径を小さくしました。
  • [破壊的変更] multilineプロパティを削除しました。
    • [アップグレードガイド] multilineプロパティを使用していた場合、関連するTooltip要素にstyle={{ maxWidth: 250 }}を渡してください。

1.1.2

• ThemePropsとThemePanelPropsをエクスポートしました。

1.1.1

• すべてのコンポーネントのプロパティタイプをエクスポートし、特定の設定における型エラーを解決しました。

1.1.0

• 3つの新しいカラースケールを追加しました。ruby、iris、jade
• 安定したビルドを可能にするために、Radix Primitives依存関係の明示的なバージョンを設定しました。
• 特定の設定における型エラーを解決するために、ContextMenuSub、DialogRoot、HoverCardRoot、PopoverRootに明示的なReact.FC型を使用しました。

1.0.0

• 最初のリリース！🎉