テーマをカスタマイズする変数 デスクトップアシスタント

特定の CSS 変数を変更して、 デスクトップアシスタントのテーマをカスタマイズできます。

表 : 1. バナーの色

変数	説明	順序
brand-primary-darkest	ブランドのプライマリカラーの最も暗い色合い。	1
brand-primary-darker	ブランドのプライマリカラーの最も暗い色合いよりもわずかに明るい色合い。	2
ブランドプライマリ	UI で使用されるプライマリブランド色。	3
brand-primary-lighter	プライマリブランド色よりも明るい色合い。	4

指定した色を指定した順序で使用することで、バナーにグラデーションを適用できます。

表 : 2. レイアウトとタイポグラフの変数

変数	説明	デフォルト
バックグラウンド:セカンダリ	メインフォーカスではない UI 要素に使用されるセカンダリ背景色。	#ffffff
background-primary	UI のメインフォーカス領域に使用されるプライマリ背景色。	#f6f6f8
font-size-base	UI テキストに使用される基本フォントサイズ。	16px
font-weight-base	UI 本文テキストに使用される基本フォントの重み。	400
font-family-sans-serif	UI テキストに使用されるデフォルトのサンセリフフォントファミリー。	Lato
line-height-base	間隔と読みやすさのためのデフォルトのテキスト行の高さ。	1.4
font-size-h5	見出しレベル 5 のフォントサイズ。	16px または $font-size-base 変数の値。
font-size-h4	見出しレベル 4 のフォントサイズ。	18px この値は、 ceil() 関数 ceil(($font-size-base * 1.125)) を使用して計算されます。 たとえば、 font-size-base の値が 16 px の場合、 font-size-h4 の値は 18 px: ceil((16px * 1.125))//18px です。
font-size-h3	見出しレベル 3 のフォントサイズ。	20px この値は、 ceil() 関数 ceil(($font-size-base * 1.25)) を使用して計算されます。
font-size-xl	特大のフォントサイズ。通常、タイトルまたは大きなラベルに使用されます。	24px この値は、 ceil() 関数 ceil(($font-size-base * 1.5)) を使用して計算されます。
font-size-xs	通常、マイナーラベルまたはキャプションに使用される極小フォントサイズ。	12px この値は、 ceil() 関数 ceil(($font-size-base * 0.75)) を使用して計算されます。
font-size-small	ベースフォントよりも小さいフォントで、セカンダリテキストに使用されます。	14px この値は、 ceil() 関数 ceil(($font-size-base * 0.875)) を使用して計算されます。
headings-font-family	見出しに使用されるフォントファミリー。	Lato
headings-font-weight	見出しに使用されるフォントの太さ。	600

表 : 3. 色の変数

変数	説明	デフォルト
text-primary	本文テキストに使用されるメインの色。	#181A1F
text-color	UI の一般的なテキスト色で、 テキストプライマリと同じです。 text-primary の値をまだ定義していない場合にのみ、この変数の値を設定します。	$text-primary!default 例: $text-primary: #000000 !default;
text-secondary	目立たない UI テキストに使用される色。	#474D5A
text-tertiary	ヘルプテキストや注釈などの第 3 テキストの色。	#656E81
text-muted	一般に テキストターシャリと同じ、ミュートされたテキスト色。 text-tertiary の値をまだ定義していない場合にのみ、この変数の値を設定します。	$text-tertiary!default 例: $text-tertiary: #999999 !default;
色:グレー	境界線や背景などの要素に使用される中間色のグレー。	#C6CBCB
link-color	ハイパーリンクの色。	#3c59e7

表 : 4. ボタンとインタラクティブ要素の変数

変数	説明	デフォルト
btn-default-color	ボタンテキストのデフォルトの色。	$brandプライマリ
btn-primary-color	プライマリボタンのテキスト色。	$text白
btn-primary-bg	プライマリボタンの背景色。	$brandプライマリ
ブランドプライマリ	UI 全体で使用されるプライマリブランド色。	#4f52bd!default;
brand-primary-darker	プライマリブランド色の濃い色合い。	#333579
brand-primary-darkest	プライマリブランド色の最も暗い色合い。	#1D1E46
brand-primary-lighter	プライマリブランド色の明るい色合い。	#8789D2
brand-primary-lightest	プライマリブランド色の最も明るい色合い。	#D1D2EE

表 : 5. ステータスとアラートの色

変数	説明	デフォルト
brand-warning-darker	UI 警告ステータス色の濃い色合い。	#AFA400
brand-success-darker	UI で成功状況に使用される暗い色合い。	#3B7F00
brand-danger-darker	UI の危険ステータスに使用される暗い色合い。	#CC293C
alert-warning-bg	アラートと警告に使用される背景色。	$state-warning-bg
badge-color	UI のバッジのテキストの色。	$text白

表 : 6. 境界線とレイアウトの変数

変数	説明	デフォルト値
border-primary	メイン UI 要素に使用されるプライマリ境界色。	#8790A1
ボーダー:セカンダリ	目立たない UI 要素に使用されるセカンダリ境界色。	#ACB2BE
border-tertiary	背景の境界線に使用される第 3 の境界線の色。	#DADDE2
border-width-xs	細い線や明るい仕切りなどの UI 要素に使用される極小の境界線幅。	1px
border-style-solid	境界線のスタイルを実線に設定します。	実線
border-radius-base	UI 要素の角を丸めるためのベース境界半径。	4px
input-border	入力フィールドの境界線のスタイル。	$borderプライマリ

表 : 7. 間隔変数

変数	説明	デフォルト値
sp-space--xxl	広いギャップや大きなレイアウトに対応する特大の間隔。	32px
sp-space--xl	主要セクションの特大間隔。	24 ピクセル
sp-space--lg	パディングやマージンの間隔が大きい。	16 ピクセル
sp-space--md	ほとんどの UI 要素の中間隔または標準間隔。	12 ピクセル
sp-space--sm	コンパクトなレイアウトのための小さな間隔。	8px
sp-space--xs	ギャップを最小限に抑えるための非常に小さな間隔。	4px
sp-space--xxs	UIのギャップを最小限に抑えるための非常に小さな間隔。	2px
panel-heading-padding	パネルまたはカードの見出しセクションに適用されるパディング。	$sp-space--xl

表 : 8. フォントの太さ、影と効果の変数

変数	説明	デフォルト値
フォントの太さ変数
font-weight-lg	大きいテキストまたは太字のテキストに使用されるフォントの太さ。	600 この値は、 ceil() 関数 ceil(($font-weight-base * 1.5)) を使用して計算されます。
シャドウとエフェクトの変数
sp-panel-box-shadow	パネルコンポーネントのシャドウスタイリング。	0 4px 8px 0 rgba(23、40、52、0.08)
sp-box-shadow--md	UI コンポーネントの中ボックスシャドウ効果。