メインコンテンツへスキップ
menumenu tanreiexpand_morecontrasttranslate
tanreiexpand_more
はじめにWebReactSwiftUIJetpack ComposeFlutterReact Nativeプリセット自分のデザインシステムを作るAI エージェントと Tanrei を使うブランドデザイントークンデザインシステムとカスタマイズTheme Studioカラータイポグラフィアイコン形状エレベーションモーションインタラクション状態振る舞いレイアウトアクセシビリティ言葉カラートークンタイプスケールトークン形状トークンエレベーショントークンモーショントークン状態トークンスペースと寸法のトークンコンポーネントボタンメインアクションボタンセグメントボタンボタングループメニュー付きボタンツールバーコピーボタンチェックボックスラジオボタンスイッチチップメニュースライダースライダーフィールドカレンダーDateTimePickerフィールドグループラジオグループチェックボックスグループセレクトセレクトフィールドメニューバーファイルアップロードファイルピッカー 上級者向けドロップゾーンテキスト入力欄 上級者向けテキストフィールドチップフィールドフィールドコンボボックス 上級者向けコンボボックスフィールド数値入力欄 上級者向け数値フィールドカラー入力欄 上級者向けカラーフィールドワンタイムコード入力欄 上級者向けワンタイムコードフィールド埋め込みテキスト入力欄 上級者向けチャットコンポーザーカード区切り線モーダルレイヤー 上級者向けダイアログリストリスト行ボトムシートサイドシートカルーセルコードブロックテーブルポップオーバーステップアコーディオン説明リスト図アプリシェルページヘッダーツリービュータイムライン画像プレビューハンドルサイズ変更できる枠スクロールエリアバッジプログレスインジケーターメーターナンバーティッカーローディングインジケータースナックバーツールチップキーボードショートカットタグインラインコードコールアウトアバター空の状態タググループスケルトンファイル項目色見本マーキーテキストタブタブビューアプリバーナビゲーションバーナビゲーションドロワー検索リンクページネーション前後のリンクステッパーパンくずリスト目次リンクカードFAB メニューステータスTanrei の作り方コントリビューションライセンスと帰属
ホームトークンリファレンス状態トークン

状態トークン

ステートレイヤーと無効の不透明度。

content_copyMarkdown で表示

tanrei.sys.state 以下にある不透明度です。各見本は、サーフェスの上とプライマリの塗りの上にレイヤーを重ねて示しています。使い方の指針は、インタラクション状態を参照してください。

トークン 値 見本
--tanrei-sys-state-disabled-container-opacity 0.12 (12%) AaAa
--tanrei-sys-state-disabled-content-opacity 0.38 (38%) AaAa
--tanrei-sys-state-dragged-state-layer-opacity 0.16 (16%) AaAa
--tanrei-sys-state-focus-state-layer-opacity 0.1 (10%) AaAa
--tanrei-sys-state-hover-state-layer-opacity 0.08 (8%) AaAa
--tanrei-sys-state-pressed-state-layer-opacity 0.1 (10%) AaAa
--tanrei-sys-state-selected-state-layer-opacity 0.16 (16%) AaAa

生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/state.tokens.json