sashigane テーマビルダー
primary を1色選ぶと、パレット全体が規則から生成されます。 コントラストは全色相で構造的に保証されています。
選んだ色はどこに入ったか
#3b82f6→primary 段400 #3a85ffΔL 0.012 / ΔC 0.008 / ΔH 0.0°primary
50
100
200
300
400
500
600
700
800
900
950
枠が二重の段が選んだ色に最も近い段、下線の段が --sg-color-accent が使う段です（ライトモードは段500、ダークモードは段400）。
| 選んだ色を… | 比 | 文字として | マークとして |
|---|---|---|---|
| ライトモードの面に置くと | 3.57:1 | 使えない（4.5:1 に届かない） | 使える（3:1 以上） |
| ダークモードの面に置くと | 4.78:1 | 使える（4.5:1 以上） | 使える（3:1 以上） |
色相は保たれています。変わるのは明度と彩度で、 これは規則が解いています。--sg-color-accent は文字の役割なので、 選んだ色そのものではなく 4.5:1 を満たす段を使います。 上の表で「使えない」となっている側では、選んだ色を文字にすると読めません。
警告
status-too-close-to-primaryprimary の色相が info と近すぎます（角距離 18°）。info と primary が見分けにくくなります。
見た目
ページの地の上文字 段500 / マーク 段400
カードの見出し補助的な説明文です。中間色が primary の色相で着色されているため、 アクセント色と並べても浮かないことを確かめます。
dangerwarningsuccessinfo
系列1系列2系列3系列4系列5
カードの上文字 段600 / マーク 段500
カードの見出し補助的な説明文です。中間色が primary の色相で着色されているため、 アクセント色と並べても浮かないことを確かめます。
dangerwarningsuccessinfo
系列1系列2系列3系列4系列5
ページの地の上文字 段400 / マーク 段300
カードの見出し補助的な説明文です。中間色が primary の色相で着色されているため、 アクセント色と並べても浮かないことを確かめます。
dangerwarningsuccessinfo
系列1系列2系列3系列4系列5
カードの上文字 段300 / マーク 段200
カードの見出し補助的な説明文です。中間色が primary の色相で着色されているため、 アクセント色と並べても浮かないことを確かめます。
dangerwarningsuccessinfo
系列1系列2系列3系列4系列5
デモ
いま選んでいる色でページを1枚組み、別のタブで開きます。素の CSS だけで書かれていて、React を通りません。
密度は画面幅に従うのが既定です。画面幅そのものは、開いた先の ブラウザ窓を狭めれば確かめられます。
パレット
neutral260°
50
100
200
300
400
500
600
700
800
900
950
primary260°
50
100
200
300
400
500
600
700
800
900
950
danger17°
50
100
200
300
400
500
600
700
800
900
950
warning62°
50
100
200
300
400
500
600
700
800
900
950
success158°
50
100
200
300
400
500
600
700
800
900
950
info242°
50
100
200
300
400
500
600
700
800
900
950
series-1260°
50
100
200
300
400
500
600
700
800
900
950
series-2332°
50
100
200
300
400
500
600
700
800
900
950
series-344°
50
100
200
300
400
500
600
700
800
900
950
series-4116°
50
100
200
300
400
500
600
700
800
900
950
series-5188°
50
100
200
300
400
500
600
700
800
900
950
コントラスト
| 組み合わせ | 目標 | primary | danger | warning | success | info |
|---|---|---|---|---|---|---|
| ライトモードの面(50) に 段500 | 4.5:1 | 5.00 | 5.39 | 4.97 | 4.50 | 4.73 |
| ライトモードの面(50) に 段400 | 3:1 | 3.42 | 3.79 | 3.47 | 3.11 | 3.29 |
| ダークモードの面(950) に 段400 | 4.5:1 | 5.00 | 4.50 | 4.92 | 5.48 | 5.19 |
| ダークモードの面(950) に 段500 | 3:1 | 3.42 | 3.17 | 3.43 | 3.79 | 3.61 |
解いた明度: アンカー 0.5461 / 下端 0.2137
CSS
/*
sashigane — CSS 変数。これ1つでフレームワーク非依存に動く。
生成物。手で編集しない。@sashigane/tokens v0.1.7 が生成する。
規則と根拠: https://github.com/shun2218-dev/sashigane/tree/v0.1.7/docs
primary の色相 259.8° から生成した（段 500 は #0065ed）。
受け継ぐのは色相だけで、明度も彩度も規則から解かれる。
--sg-{カテゴリ}-{数字} はプリミティブ。コンポーネントからは参照しない。
使ってよいのは役割の名前（--sg-color-bg-page、--sg-text-body など）。
--sg-font-brand-* だけは逆で、**利用側が定義する**差し込み口である。
:root に書くと、書体スタックの欧文の位置と、太さの役割に差し込まれる。
**:root 以外に書いても効かない。** 口を読むのは :root のプリミティブなので、
子孫に書いた値は誰にも読まれない。エラーにはならない。
*/
:root {
/* spacing */
--sg-space-0: 0;
--sg-space-1: 0.25rem;
--sg-space-2: 0.5rem;
--sg-space-3: 0.75rem;
--sg-space-4: 1rem;
--sg-space-5: 1.5rem;
--sg-space-6: 2rem;
--sg-space-7: 3rem;
--sg-space-8: 4rem;
--sg-space-9: 6rem;
/* font-size */
--sg-font-size-0: 0.702332rem;
--sg-font-size-1: 0.790123rem;
--sg-font-size-2: 0.888889rem;
--sg-font-size-3: 1rem;
--sg-font-size-4: 1.25rem;
--sg-font-size-5: 1.5625rem;
--sg-font-size-6: 1.953125rem;
--sg-font-size-7: 2.441406rem;
--sg-font-size-8: 3.051758rem;
--sg-font-size-9: 3.814697rem;
--sg-font-size-10: 4.768372rem;
/* line-height — サイズから導出される従属値。単体では使わない */
--sg-line-height-display-0: 1.5119;
--sg-line-height-display-1: 1.4328;
--sg-line-height-display-2: 1.3625;
--sg-line-height-display-3: 1.3;
--sg-line-height-display-4: 1.2;
--sg-line-height-display-5: 1.12;
--sg-line-height-display-6: 1.056;
--sg-line-height-display-7: 1.0048;
--sg-line-height-display-8: 0.9638;
--sg-line-height-display-9: 0.9311;
--sg-line-height-display-10: 0.9049;
--sg-line-height-ui-0: 1.7119;
--sg-line-height-ui-1: 1.6328;
--sg-line-height-ui-2: 1.5625;
--sg-line-height-ui-3: 1.5;
--sg-line-height-ui-4: 1.4;
--sg-line-height-ui-5: 1.32;
--sg-line-height-ui-6: 1.256;
--sg-line-height-ui-7: 1.2048;
--sg-line-height-ui-8: 1.1638;
--sg-line-height-ui-9: 1.1311;
--sg-line-height-ui-10: 1.1049;
--sg-line-height-prose-0: 1.9119;
--sg-line-height-prose-1: 1.8328;
--sg-line-height-prose-2: 1.7625;
--sg-line-height-prose-3: 1.7;
--sg-line-height-prose-4: 1.6;
--sg-line-height-prose-5: 1.52;
--sg-line-height-prose-6: 1.456;
--sg-line-height-prose-7: 1.4048;
--sg-line-height-prose-8: 1.3638;
--sg-line-height-prose-9: 1.3311;
--sg-line-height-prose-10: 1.3049;
/* letter-spacing — 行高と同じくサイズから導出される従属値。単体では使わない。
本文サイズで 0。小さい段は正、大きい段は負。漸近線が最大の詰めになる */
--sg-letter-spacing-0: 0.0212em;
--sg-letter-spacing-1: 0.0133em;
--sg-letter-spacing-2: 0.0063em;
--sg-letter-spacing-3: 0;
--sg-letter-spacing-4: -0.01em;
--sg-letter-spacing-5: -0.018em;
--sg-letter-spacing-6: -0.0244em;
--sg-letter-spacing-7: -0.0295em;
--sg-letter-spacing-8: -0.0336em;
--sg-letter-spacing-9: -0.0369em;
--sg-letter-spacing-10: -0.0395em;
--sg-letter-spacing-caps: 0.08em;
/* radius — spacing の部分集合。full は段ではない */
--sg-radius-0: 0;
--sg-radius-1: 0.25rem;
--sg-radius-2: 0.5rem;
--sg-radius-3: 0.75rem;
--sg-radius-4: 1rem;
--sg-radius-full: 9999px;
/* duration — 遷移とループは知覚上の制約が違う別スケール */
--sg-duration-0: 100ms;
--sg-duration-1: 141.4ms;
--sg-duration-2: 200ms;
--sg-duration-3: 282.8ms;
--sg-duration-4: 400ms;
--sg-duration-loop-0: 707.1ms;
--sg-duration-loop-1: 1000ms;
--sg-duration-loop-2: 1414.2ms;
/* 滞在 — 知らせが画面に留まる長さ。遷移でもループでもない
遷移は目が追える速さ、ループは待たされていると読み取れる速さで決まるが、
こちらは**読み終わるまでの長さ**で決まる */
--sg-duration-dwell-0: 2000ms;
--sg-duration-dwell-1: 2828.4ms;
--sg-duration-dwell-2: 4000ms;
--sg-duration-dwell-3: 5656.9ms;
--sg-duration-dwell-4: 8000ms;
/* width — root から導出できない次元。時間と画面幅に続く3つ目の例外。
器の幅であって、画面の幅ではない（画面幅は breakpoint） */
--sg-width-0: 16rem;
--sg-width-1: 22.627417rem;
--sg-width-2: 32rem;
--sg-width-3: 45.254834rem;
--sg-width-4: 64rem;
/* breakpoint — root から導出できない3つ目の次元。
**CSS 変数はメディアクエリの中では使えない。** ここは Tailwind アダプタと
人が値を読むためのもので、素の CSS の利用者は値を直接書くことになる */
--sg-breakpoint-sm: 40rem;
--sg-breakpoint-md: 48rem;
--sg-breakpoint-lg: 64rem;
--sg-breakpoint-xl: 80rem;
/* border-width — px 固定。他の寸法は rem だが、枠線だけは拡大させない */
--sg-border-width-0: 1px;
--sg-border-width-1: 2px;
--sg-border-width-2: 3px;
/* font-family — 構造だけを規定し、書体名は利用側が差す。
差し込み口は宣言しない（宣言するとフォールバックが効かない）:
--sg-font-brand-body-latin
--sg-font-brand-body-cjk
--sg-font-brand-display-latin
--sg-font-brand-display-cjk
--sg-font-brand-mono-latin
--sg-font-brand-mono-cjk
未定義のままなら generic へ落ちる。差せば欧文 → 和文 → generic の順序は保証される。 */
--sg-font-stack-body: var(--sg-font-brand-body-latin, ui-sans-serif), var(--sg-font-brand-body-cjk, system-ui), sans-serif;
--sg-font-stack-display: var(--sg-font-brand-display-latin, var(--sg-font-brand-body-latin, ui-sans-serif)), var(--sg-font-brand-display-cjk, var(--sg-font-brand-body-cjk, system-ui)), sans-serif;
--sg-font-stack-mono: var(--sg-font-brand-mono-latin, ui-monospace), var(--sg-font-brand-mono-cjk, monospace), monospace;
/* font-weight — 太さも root から導けない。**使える段は書体次第**で、
無い段を指定すると合成太字になる。エラーにはならない。
そこで書体名と同じく差し込み口を持つ。ここも宣言しない:
--sg-font-brand-weight-base
--sg-font-brand-weight-emphasis
--sg-font-brand-weight-heading
--sg-font-brand-weight-strong
差さなければ既定が効く。既定は観測に基づく4段である。 */
--sg-font-weight-base: var(--sg-font-brand-weight-base, 400);
--sg-font-weight-emphasis: var(--sg-font-brand-weight-emphasis, 500);
--sg-font-weight-heading: var(--sg-font-brand-weight-heading, 600);
--sg-font-weight-strong: var(--sg-font-brand-weight-strong, 700);
/* 数字を等幅にする指定。CSS と Tailwind で符号化が違う */
--sg-font-variant-tabular: tabular-nums;
--sg-font-feature-tabular: "tnum";
/* 色 — primary から生成。段は対比の保証境界に解かれている */
--sg-neutral-50: oklch(0.9900 0.0009 259.81);
--sg-neutral-100: oklch(0.9456 0.0052 259.81);
--sg-neutral-200: oklch(0.8645 0.0133 259.81);
--sg-neutral-300: oklch(0.7594 0.0247 259.81);
--sg-neutral-400: oklch(0.6349 0.0221 259.81);
--sg-neutral-500: oklch(0.5461 0.0190 259.81);
--sg-neutral-600: oklch(0.4796 0.0167 259.81);
--sg-neutral-700: oklch(0.4131 0.0144 259.81);
--sg-neutral-800: oklch(0.3466 0.0121 259.81);
--sg-neutral-900: oklch(0.2802 0.0098 259.81);
--sg-neutral-950: oklch(0.2137 0.0075 259.81);
--sg-primary-50: oklch(0.9900 0.0047 259.81);
--sg-primary-100: oklch(0.9456 0.0260 259.81);
--sg-primary-200: oklch(0.8645 0.0667 259.81);
--sg-primary-300: oklch(0.7594 0.1235 259.81);
--sg-primary-400: oklch(0.6349 0.1965 259.81);
--sg-primary-500: oklch(0.5461 0.2208 259.81);
--sg-primary-600: oklch(0.4796 0.1940 259.81);
--sg-primary-700: oklch(0.4131 0.1673 259.81);
--sg-primary-800: oklch(0.3466 0.1406 259.81);
--sg-primary-900: oklch(0.2802 0.1140 259.81);
--sg-primary-950: oklch(0.2137 0.0878 259.81);
--sg-danger-50: oklch(0.9900 0.0048 17.00);
--sg-danger-100: oklch(0.9456 0.0272 17.00);
--sg-danger-200: oklch(0.8645 0.0731 17.00);
--sg-danger-300: oklch(0.7594 0.1446 17.00);
--sg-danger-400: oklch(0.6349 0.2534 17.00);
--sg-danger-500: oklch(0.5461 0.2187 17.00);
--sg-danger-600: oklch(0.4796 0.1921 17.00);
--sg-danger-700: oklch(0.4131 0.1656 17.00);
--sg-danger-800: oklch(0.3466 0.1390 17.00);
--sg-danger-900: oklch(0.2802 0.1126 17.00);
--sg-danger-950: oklch(0.2137 0.0863 17.00);
--sg-warning-50: oklch(0.9900 0.0063 62.00);
--sg-warning-100: oklch(0.9456 0.0350 62.00);
--sg-warning-200: oklch(0.8645 0.0927 62.00);
--sg-warning-300: oklch(0.7594 0.1748 62.00);
--sg-warning-400: oklch(0.6349 0.1462 62.00);
--sg-warning-500: oklch(0.5461 0.1258 62.00);
--sg-warning-600: oklch(0.4796 0.1105 62.00);
--sg-warning-700: oklch(0.4131 0.0953 62.00);
--sg-warning-800: oklch(0.3466 0.0801 62.00);
--sg-warning-900: oklch(0.2802 0.0649 62.00);
--sg-warning-950: oklch(0.2137 0.0499 62.00);
--sg-success-50: oklch(0.9900 0.0147 158.00);
--sg-success-100: oklch(0.9456 0.0846 158.00);
--sg-success-200: oklch(0.8645 0.2022 158.00);
--sg-success-300: oklch(0.7594 0.1777 158.00);
--sg-success-400: oklch(0.6349 0.1486 158.00);
--sg-success-500: oklch(0.5461 0.1278 158.00);
--sg-success-600: oklch(0.4796 0.1123 158.00);
--sg-success-700: oklch(0.4131 0.0968 158.00);
--sg-success-800: oklch(0.3466 0.0813 158.00);
--sg-success-900: oklch(0.2802 0.0658 158.00);
--sg-success-950: oklch(0.2137 0.0505 158.00);
--sg-info-50: oklch(0.9900 0.0052 242.00);
--sg-info-100: oklch(0.9456 0.0285 242.00);
--sg-info-200: oklch(0.8645 0.0733 242.00);
--sg-info-300: oklch(0.7594 0.1354 242.00);
--sg-info-400: oklch(0.6349 0.1507 242.00);
--sg-info-500: oklch(0.5461 0.1297 242.00);
--sg-info-600: oklch(0.4796 0.1139 242.00);
--sg-info-700: oklch(0.4131 0.0982 242.00);
--sg-info-800: oklch(0.3466 0.0825 242.00);
--sg-info-900: oklch(0.2802 0.0668 242.00);
--sg-info-950: oklch(0.2137 0.0513 242.00);
--sg-series-1-50: oklch(0.9900 0.0047 260.00);
--sg-series-1-100: oklch(0.9456 0.0259 260.00);
--sg-series-1-200: oklch(0.8645 0.0667 260.00);
--sg-series-1-300: oklch(0.7594 0.1234 260.00);
--sg-series-1-400: oklch(0.6349 0.1105 260.00);
--sg-series-1-500: oklch(0.5461 0.0951 260.00);
--sg-series-1-600: oklch(0.4796 0.0836 260.00);
--sg-series-1-700: oklch(0.4131 0.0720 260.00);
--sg-series-1-800: oklch(0.3466 0.0605 260.00);
--sg-series-1-900: oklch(0.2802 0.0490 260.00);
--sg-series-1-950: oklch(0.2137 0.0376 260.00);
--sg-series-2-50: oklch(0.9900 0.0047 331.81);
--sg-series-2-100: oklch(0.9456 0.0259 331.81);
--sg-series-2-200: oklch(0.8645 0.0667 331.81);
--sg-series-2-300: oklch(0.7594 0.1234 331.81);
--sg-series-2-400: oklch(0.6349 0.1105 331.81);
--sg-series-2-500: oklch(0.5461 0.0951 331.81);
--sg-series-2-600: oklch(0.4796 0.0836 331.81);
--sg-series-2-700: oklch(0.4131 0.0720 331.81);
--sg-series-2-800: oklch(0.3466 0.0605 331.81);
--sg-series-2-900: oklch(0.2802 0.0490 331.81);
--sg-series-2-950: oklch(0.2137 0.0376 331.81);
--sg-series-3-50: oklch(0.9900 0.0047 43.81);
--sg-series-3-100: oklch(0.9456 0.0259 43.81);
--sg-series-3-200: oklch(0.8645 0.0667 43.81);
--sg-series-3-300: oklch(0.7594 0.1234 43.81);
--sg-series-3-400: oklch(0.6349 0.1105 43.81);
--sg-series-3-500: oklch(0.5461 0.0951 43.81);
--sg-series-3-600: oklch(0.4796 0.0836 43.81);
--sg-series-3-700: oklch(0.4131 0.0720 43.81);
--sg-series-3-800: oklch(0.3466 0.0605 43.81);
--sg-series-3-900: oklch(0.2802 0.0490 43.81);
--sg-series-3-950: oklch(0.2137 0.0376 43.81);
--sg-series-4-50: oklch(0.9900 0.0047 115.81);
--sg-series-4-100: oklch(0.9456 0.0259 115.81);
--sg-series-4-200: oklch(0.8645 0.0667 115.81);
--sg-series-4-300: oklch(0.7594 0.1234 115.81);
--sg-series-4-400: oklch(0.6349 0.1105 115.81);
--sg-series-4-500: oklch(0.5461 0.0951 115.81);
--sg-series-4-600: oklch(0.4796 0.0836 115.81);
--sg-series-4-700: oklch(0.4131 0.0720 115.81);
--sg-series-4-800: oklch(0.3466 0.0605 115.81);
--sg-series-4-900: oklch(0.2802 0.0490 115.81);
--sg-series-4-950: oklch(0.2137 0.0376 115.81);
--sg-series-5-50: oklch(0.9900 0.0047 187.81);
--sg-series-5-100: oklch(0.9456 0.0259 187.81);
--sg-series-5-200: oklch(0.8645 0.0667 187.81);
--sg-series-5-300: oklch(0.7594 0.1234 187.81);
--sg-series-5-400: oklch(0.6349 0.1105 187.81);
--sg-series-5-500: oklch(0.5461 0.0951 187.81);
--sg-series-5-600: oklch(0.4796 0.0836 187.81);
--sg-series-5-700: oklch(0.4131 0.0720 187.81);
--sg-series-5-800: oklch(0.3466 0.0605 187.81);
--sg-series-5-900: oklch(0.2802 0.0490 187.81);
--sg-series-5-950: oklch(0.2137 0.0376 187.81);
/* 淡い塗りだけが使うランプ。明度は上と同じで、彩度だけ色相をまたいで揃えてある。
揃えないと、sRGB が明るい端で許す彩度の差がそのまま出て、緑だけ蛍光に見える。
文字は上のランプを使う。塗りのために文字を濁らせない */
--sg-primary-subtle-50: oklch(0.9900 0.0047 259.81);
--sg-primary-subtle-100: oklch(0.9456 0.0260 259.81);
--sg-primary-subtle-200: oklch(0.8645 0.0667 259.81);
--sg-primary-subtle-300: oklch(0.7594 0.1235 259.81);
--sg-primary-subtle-400: oklch(0.6349 0.1462 259.81);
--sg-primary-subtle-500: oklch(0.5461 0.1258 259.81);
--sg-primary-subtle-600: oklch(0.4796 0.1105 259.81);
--sg-primary-subtle-700: oklch(0.4131 0.0953 259.81);
--sg-primary-subtle-800: oklch(0.3466 0.0801 259.81);
--sg-primary-subtle-900: oklch(0.2802 0.0649 259.81);
--sg-primary-subtle-950: oklch(0.2137 0.0499 259.81);
--sg-danger-subtle-50: oklch(0.9900 0.0047 17.00);
--sg-danger-subtle-100: oklch(0.9456 0.0260 17.00);
--sg-danger-subtle-200: oklch(0.8645 0.0667 17.00);
--sg-danger-subtle-300: oklch(0.7594 0.1235 17.00);
--sg-danger-subtle-400: oklch(0.6349 0.1462 17.00);
--sg-danger-subtle-500: oklch(0.5461 0.1258 17.00);
--sg-danger-subtle-600: oklch(0.4796 0.1105 17.00);
--sg-danger-subtle-700: oklch(0.4131 0.0953 17.00);
--sg-danger-subtle-800: oklch(0.3466 0.0801 17.00);
--sg-danger-subtle-900: oklch(0.2802 0.0649 17.00);
--sg-danger-subtle-950: oklch(0.2137 0.0499 17.00);
--sg-warning-subtle-50: oklch(0.9900 0.0047 62.00);
--sg-warning-subtle-100: oklch(0.9456 0.0260 62.00);
--sg-warning-subtle-200: oklch(0.8645 0.0667 62.00);
--sg-warning-subtle-300: oklch(0.7594 0.1235 62.00);
--sg-warning-subtle-400: oklch(0.6349 0.1462 62.00);
--sg-warning-subtle-500: oklch(0.5461 0.1258 62.00);
--sg-warning-subtle-600: oklch(0.4796 0.1105 62.00);
--sg-warning-subtle-700: oklch(0.4131 0.0953 62.00);
--sg-warning-subtle-800: oklch(0.3466 0.0801 62.00);
--sg-warning-subtle-900: oklch(0.2802 0.0649 62.00);
--sg-warning-subtle-950: oklch(0.2137 0.0499 62.00);
--sg-success-subtle-50: oklch(0.9900 0.0047 158.00);
--sg-success-subtle-100: oklch(0.9456 0.0260 158.00);
--sg-success-subtle-200: oklch(0.8645 0.0667 158.00);
--sg-success-subtle-300: oklch(0.7594 0.1235 158.00);
--sg-success-subtle-400: oklch(0.6349 0.1462 158.00);
--sg-success-subtle-500: oklch(0.5461 0.1258 158.00);
--sg-success-subtle-600: oklch(0.4796 0.1105 158.00);
--sg-success-subtle-700: oklch(0.4131 0.0953 158.00);
--sg-success-subtle-800: oklch(0.3466 0.0801 158.00);
--sg-success-subtle-900: oklch(0.2802 0.0649 158.00);
--sg-success-subtle-950: oklch(0.2137 0.0499 158.00);
--sg-info-subtle-50: oklch(0.9900 0.0047 242.00);
--sg-info-subtle-100: oklch(0.9456 0.0260 242.00);
--sg-info-subtle-200: oklch(0.8645 0.0667 242.00);
--sg-info-subtle-300: oklch(0.7594 0.1235 242.00);
--sg-info-subtle-400: oklch(0.6349 0.1462 242.00);
--sg-info-subtle-500: oklch(0.5461 0.1258 242.00);
--sg-info-subtle-600: oklch(0.4796 0.1105 242.00);
--sg-info-subtle-700: oklch(0.4131 0.0953 242.00);
--sg-info-subtle-800: oklch(0.3466 0.0801 242.00);
--sg-info-subtle-900: oklch(0.2802 0.0649 242.00);
--sg-info-subtle-950: oklch(0.2137 0.0499 242.00);
/* 影の色。**唯一、透過を持つ色である。**
中間色ランプの暗端に、面の梯子1段分になるアルファを解いて足したもの。
色相は primary から来るので、純黒の影にはならない。
明色モードでしか使わない。暗色では影が機能しないため（測定済み） */
--sg-shadow-ink: oklch(0.2137 0.0075 259.81 / 0.1298);
/* ここからセマンティック（参照可） */
/* タイポグラフィ — サイズと行高は必ず対。書体は役割ごとの既定 */
--sg-text-caption: var(--sg-font-size-1);
--sg-text-caption-leading: var(--sg-line-height-ui-1);
--sg-text-caption-tracking: var(--sg-letter-spacing-1);
--sg-text-caption-family: var(--sg-font-stack-body);
--sg-text-label: var(--sg-font-size-2);
--sg-text-label-leading: var(--sg-line-height-ui-2);
--sg-text-label-tracking: var(--sg-letter-spacing-2);
--sg-text-label-family: var(--sg-font-stack-mono);
--sg-text-body: var(--sg-font-size-3);
--sg-text-body-leading: var(--sg-line-height-ui-3);
--sg-text-body-tracking: var(--sg-letter-spacing-3);
--sg-text-body-family: var(--sg-font-stack-body);
--sg-text-body-prose: var(--sg-font-size-3);
--sg-text-body-prose-leading: var(--sg-line-height-prose-3);
--sg-text-body-prose-tracking: var(--sg-letter-spacing-3);
--sg-text-body-prose-family: var(--sg-font-stack-body);
--sg-text-heading-3: var(--sg-font-size-4);
--sg-text-heading-3-leading: var(--sg-line-height-ui-4);
--sg-text-heading-3-tracking: var(--sg-letter-spacing-4);
--sg-text-heading-3-family: var(--sg-font-stack-display);
--sg-text-heading-2: var(--sg-font-size-5);
--sg-text-heading-2-leading: var(--sg-line-height-ui-5);
--sg-text-heading-2-tracking: var(--sg-letter-spacing-5);
--sg-text-heading-2-family: var(--sg-font-stack-display);
--sg-text-heading-1: var(--sg-font-size-6);
--sg-text-heading-1-leading: var(--sg-line-height-ui-6);
--sg-text-heading-1-tracking: var(--sg-letter-spacing-6);
--sg-text-heading-1-family: var(--sg-font-stack-display);
--sg-text-display: var(--sg-font-size-8);
--sg-text-display-leading: var(--sg-line-height-display-8);
--sg-text-display-tracking: var(--sg-letter-spacing-8);
--sg-text-display-family: var(--sg-font-stack-display);
/* 大文字化の加算項。サイズと直交するので段を持たない。
サイズ側の項と**足して**使う:
letter-spacing: calc(var(--sg-text-label-tracking) + var(--sg-tracking-caps)); */
--sg-tracking-caps: var(--sg-letter-spacing-caps);
/* 太さの役割。書体スタックと同じく、プリミティブが差し込み口を包む */
--sg-weight-base: var(--sg-font-weight-base);
--sg-weight-emphasis: var(--sg-font-weight-emphasis);
--sg-weight-heading: var(--sg-font-weight-heading);
--sg-weight-strong: var(--sg-font-weight-strong);
/* 書体だけの役割。サイズと直交するので段を持たない */
--sg-text-numeric-family: var(--sg-font-stack-mono);
--sg-text-numeric-variant: var(--sg-font-variant-tabular);
--sg-text-code-family: var(--sg-font-stack-mono);
/* 骨格の余白。密度で動くのはここだけ */
--sg-space-page: var(--sg-space-5);
--sg-space-section: var(--sg-space-7);
--sg-space-surface: var(--sg-space-5);
/* 知らせが留まる長さ。滞在の段のまん中 */
--sg-duration-notice: var(--sg-duration-dwell-2);
--sg-color-bg-page: var(--sg-neutral-50);
--sg-color-text-default: var(--sg-neutral-900);
--sg-color-text-muted: var(--sg-neutral-600);
--sg-color-text-faint: var(--sg-neutral-500);
--sg-color-border-subtle: var(--sg-neutral-200);
--sg-color-border-default: var(--sg-neutral-300);
--sg-color-border-strong: var(--sg-neutral-400);
--sg-color-chart-gridline: var(--sg-neutral-100);
--sg-color-accent: var(--sg-primary-500);
--sg-color-accent-mark: var(--sg-primary-400);
--sg-color-accent-strong: var(--sg-primary-600);
--sg-color-danger-strong: var(--sg-danger-600);
--sg-color-warning-strong: var(--sg-warning-600);
--sg-color-success-strong: var(--sg-success-600);
--sg-color-info-strong: var(--sg-info-600);
--sg-color-on-accent: var(--sg-neutral-50);
--sg-color-on-danger: var(--sg-neutral-50);
--sg-color-on-warning: var(--sg-neutral-50);
--sg-color-on-success: var(--sg-neutral-50);
--sg-color-on-info: var(--sg-neutral-50);
--sg-color-accent-subtle: var(--sg-primary-subtle-100);
--sg-color-on-accent-subtle: var(--sg-primary-600);
--sg-color-danger-subtle: var(--sg-danger-subtle-100);
--sg-color-on-danger-subtle: var(--sg-danger-600);
--sg-color-warning-subtle: var(--sg-warning-subtle-100);
--sg-color-on-warning-subtle: var(--sg-warning-600);
--sg-color-success-subtle: var(--sg-success-subtle-100);
--sg-color-on-success-subtle: var(--sg-success-600);
--sg-color-info-subtle: var(--sg-info-subtle-100);
--sg-color-on-info-subtle: var(--sg-info-600);
--sg-color-border-focus: var(--sg-primary-400);
--sg-color-danger: var(--sg-danger-500);
--sg-color-danger-mark: var(--sg-danger-400);
--sg-color-warning: var(--sg-warning-500);
--sg-color-warning-mark: var(--sg-warning-400);
--sg-color-success: var(--sg-success-500);
--sg-color-success-mark: var(--sg-success-400);
--sg-color-info: var(--sg-info-500);
--sg-color-info-mark: var(--sg-info-400);
--sg-color-chart-1: var(--sg-series-1-800);
--sg-color-chart-2: var(--sg-series-2-400);
--sg-color-chart-3: var(--sg-series-3-700);
--sg-color-chart-4: var(--sg-series-4-500);
--sg-color-chart-5: var(--sg-series-5-600);
--sg-color-sequential-1: var(--sg-primary-100);
--sg-color-sequential-2: var(--sg-primary-200);
--sg-color-sequential-3: var(--sg-primary-300);
--sg-color-sequential-4: var(--sg-primary-400);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-600);
--sg-color-sequential-7: var(--sg-primary-700);
--sg-color-sequential-8: var(--sg-primary-800);
--sg-color-sequential-9: var(--sg-primary-900);
--sg-color-sequential-10: var(--sg-primary-950);
--sg-elevation-raised: 0 4px 8px var(--sg-shadow-ink);
--sg-elevation-overlay: 0 8px 16px var(--sg-shadow-ink);
--sg-elevation-front: 0 12px 24px var(--sg-shadow-ink);
--sg-color-deeper-bg: var(--sg-neutral-100);
--sg-color-hover-text-default: var(--sg-neutral-900);
--sg-color-hover-text-muted: var(--sg-neutral-700);
--sg-color-hover-text-faint: var(--sg-neutral-600);
--sg-color-hover-border-subtle: var(--sg-neutral-300);
--sg-color-hover-border-default: var(--sg-neutral-400);
--sg-color-hover-border-strong: var(--sg-neutral-500);
--sg-color-hover-chart-gridline: var(--sg-neutral-200);
--sg-color-hover-accent: var(--sg-primary-600);
--sg-color-hover-accent-mark: var(--sg-primary-500);
--sg-color-hover-accent-strong: var(--sg-primary-700);
--sg-color-hover-danger-strong: var(--sg-danger-700);
--sg-color-hover-warning-strong: var(--sg-warning-700);
--sg-color-hover-success-strong: var(--sg-success-700);
--sg-color-hover-info-strong: var(--sg-info-700);
--sg-color-hover-on-accent: var(--sg-neutral-50);
--sg-color-hover-on-danger: var(--sg-neutral-50);
--sg-color-hover-on-warning: var(--sg-neutral-50);
--sg-color-hover-on-success: var(--sg-neutral-50);
--sg-color-hover-on-info: var(--sg-neutral-50);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-200);
--sg-color-hover-on-accent-subtle: var(--sg-primary-700);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-200);
--sg-color-hover-on-danger-subtle: var(--sg-danger-700);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-200);
--sg-color-hover-on-warning-subtle: var(--sg-warning-700);
--sg-color-hover-success-subtle: var(--sg-success-subtle-200);
--sg-color-hover-on-success-subtle: var(--sg-success-700);
--sg-color-hover-info-subtle: var(--sg-info-subtle-200);
--sg-color-hover-on-info-subtle: var(--sg-info-700);
--sg-color-hover-border-focus: var(--sg-primary-500);
--sg-color-hover-danger: var(--sg-danger-600);
--sg-color-hover-danger-mark: var(--sg-danger-500);
--sg-color-hover-warning: var(--sg-warning-600);
--sg-color-hover-warning-mark: var(--sg-warning-500);
--sg-color-hover-success: var(--sg-success-600);
--sg-color-hover-success-mark: var(--sg-success-500);
--sg-color-hover-info: var(--sg-info-600);
--sg-color-hover-info-mark: var(--sg-info-500);
--sg-color-hover-chart-1: var(--sg-series-1-900);
--sg-color-hover-chart-2: var(--sg-series-2-700);
--sg-color-hover-chart-3: var(--sg-series-3-600);
--sg-color-hover-chart-4: var(--sg-series-4-800);
--sg-color-hover-chart-5: var(--sg-series-5-500);
--sg-color-hover-sequential-1: var(--sg-primary-50);
--sg-color-hover-sequential-2: var(--sg-primary-200);
--sg-color-hover-sequential-3: var(--sg-primary-300);
--sg-color-hover-sequential-4: var(--sg-primary-400);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-600);
--sg-color-hover-sequential-7: var(--sg-primary-700);
--sg-color-hover-sequential-8: var(--sg-primary-800);
--sg-color-hover-sequential-9: var(--sg-primary-900);
--sg-color-hover-sequential-10: var(--sg-primary-950);
color-scheme: light;
}
/* 密度。既定は画面幅に従い、data-sg-density で固定できる。
テーマと同じ形で、メディアクエリより後に固定用を出して順序で勝たせる。
狭い画面では1段浅い段を指す。境界は sm（40rem）。 */
@media (width < 40rem) {
:root {
--sg-space-page: var(--sg-space-4);
--sg-space-section: var(--sg-space-6);
--sg-space-surface: var(--sg-space-4);
}
}
[data-sg-density="compact"] {
--sg-space-page: var(--sg-space-4);
--sg-space-section: var(--sg-space-6);
--sg-space-surface: var(--sg-space-4);
}
[data-sg-density="default"] {
--sg-space-page: var(--sg-space-5);
--sg-space-section: var(--sg-space-7);
--sg-space-surface: var(--sg-space-5);
}
[data-sg-density="comfortable"] {
--sg-space-page: var(--sg-space-6);
--sg-space-section: var(--sg-space-8);
--sg-space-surface: var(--sg-space-6);
}
/* 面の文脈。背景と前景を同時に決める。
保証が成立するのは面の1段目だけなので、深い面では役割が1段深い段を指す。
塗るだけの道は塞いである（Tailwind アダプタに bg-surface / bg-inset は無い）。 */
[data-sg-surface="page"] {
background-color: var(--sg-neutral-50);
--sg-color-bg-page: var(--sg-neutral-50);
--sg-color-text-default: var(--sg-neutral-900);
--sg-color-text-muted: var(--sg-neutral-600);
--sg-color-text-faint: var(--sg-neutral-500);
--sg-color-border-subtle: var(--sg-neutral-200);
--sg-color-border-default: var(--sg-neutral-300);
--sg-color-border-strong: var(--sg-neutral-400);
--sg-color-chart-gridline: var(--sg-neutral-100);
--sg-color-accent: var(--sg-primary-500);
--sg-color-accent-mark: var(--sg-primary-400);
--sg-color-accent-strong: var(--sg-primary-600);
--sg-color-danger-strong: var(--sg-danger-600);
--sg-color-warning-strong: var(--sg-warning-600);
--sg-color-success-strong: var(--sg-success-600);
--sg-color-info-strong: var(--sg-info-600);
--sg-color-on-accent: var(--sg-neutral-50);
--sg-color-on-danger: var(--sg-neutral-50);
--sg-color-on-warning: var(--sg-neutral-50);
--sg-color-on-success: var(--sg-neutral-50);
--sg-color-on-info: var(--sg-neutral-50);
--sg-color-accent-subtle: var(--sg-primary-subtle-100);
--sg-color-on-accent-subtle: var(--sg-primary-600);
--sg-color-danger-subtle: var(--sg-danger-subtle-100);
--sg-color-on-danger-subtle: var(--sg-danger-600);
--sg-color-warning-subtle: var(--sg-warning-subtle-100);
--sg-color-on-warning-subtle: var(--sg-warning-600);
--sg-color-success-subtle: var(--sg-success-subtle-100);
--sg-color-on-success-subtle: var(--sg-success-600);
--sg-color-info-subtle: var(--sg-info-subtle-100);
--sg-color-on-info-subtle: var(--sg-info-600);
--sg-color-border-focus: var(--sg-primary-400);
--sg-color-danger: var(--sg-danger-500);
--sg-color-danger-mark: var(--sg-danger-400);
--sg-color-warning: var(--sg-warning-500);
--sg-color-warning-mark: var(--sg-warning-400);
--sg-color-success: var(--sg-success-500);
--sg-color-success-mark: var(--sg-success-400);
--sg-color-info: var(--sg-info-500);
--sg-color-info-mark: var(--sg-info-400);
--sg-color-chart-1: var(--sg-series-1-800);
--sg-color-chart-2: var(--sg-series-2-400);
--sg-color-chart-3: var(--sg-series-3-700);
--sg-color-chart-4: var(--sg-series-4-500);
--sg-color-chart-5: var(--sg-series-5-600);
--sg-color-sequential-1: var(--sg-primary-100);
--sg-color-sequential-2: var(--sg-primary-200);
--sg-color-sequential-3: var(--sg-primary-300);
--sg-color-sequential-4: var(--sg-primary-400);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-600);
--sg-color-sequential-7: var(--sg-primary-700);
--sg-color-sequential-8: var(--sg-primary-800);
--sg-color-sequential-9: var(--sg-primary-900);
--sg-color-sequential-10: var(--sg-primary-950);
--sg-elevation-raised: 0 4px 8px var(--sg-shadow-ink);
--sg-elevation-overlay: 0 8px 16px var(--sg-shadow-ink);
--sg-elevation-front: 0 12px 24px var(--sg-shadow-ink);
--sg-color-deeper-bg: var(--sg-neutral-100);
--sg-color-hover-text-default: var(--sg-neutral-900);
--sg-color-hover-text-muted: var(--sg-neutral-700);
--sg-color-hover-text-faint: var(--sg-neutral-600);
--sg-color-hover-border-subtle: var(--sg-neutral-300);
--sg-color-hover-border-default: var(--sg-neutral-400);
--sg-color-hover-border-strong: var(--sg-neutral-500);
--sg-color-hover-chart-gridline: var(--sg-neutral-200);
--sg-color-hover-accent: var(--sg-primary-600);
--sg-color-hover-accent-mark: var(--sg-primary-500);
--sg-color-hover-accent-strong: var(--sg-primary-700);
--sg-color-hover-danger-strong: var(--sg-danger-700);
--sg-color-hover-warning-strong: var(--sg-warning-700);
--sg-color-hover-success-strong: var(--sg-success-700);
--sg-color-hover-info-strong: var(--sg-info-700);
--sg-color-hover-on-accent: var(--sg-neutral-50);
--sg-color-hover-on-danger: var(--sg-neutral-50);
--sg-color-hover-on-warning: var(--sg-neutral-50);
--sg-color-hover-on-success: var(--sg-neutral-50);
--sg-color-hover-on-info: var(--sg-neutral-50);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-200);
--sg-color-hover-on-accent-subtle: var(--sg-primary-700);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-200);
--sg-color-hover-on-danger-subtle: var(--sg-danger-700);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-200);
--sg-color-hover-on-warning-subtle: var(--sg-warning-700);
--sg-color-hover-success-subtle: var(--sg-success-subtle-200);
--sg-color-hover-on-success-subtle: var(--sg-success-700);
--sg-color-hover-info-subtle: var(--sg-info-subtle-200);
--sg-color-hover-on-info-subtle: var(--sg-info-700);
--sg-color-hover-border-focus: var(--sg-primary-500);
--sg-color-hover-danger: var(--sg-danger-600);
--sg-color-hover-danger-mark: var(--sg-danger-500);
--sg-color-hover-warning: var(--sg-warning-600);
--sg-color-hover-warning-mark: var(--sg-warning-500);
--sg-color-hover-success: var(--sg-success-600);
--sg-color-hover-success-mark: var(--sg-success-500);
--sg-color-hover-info: var(--sg-info-600);
--sg-color-hover-info-mark: var(--sg-info-500);
--sg-color-hover-chart-1: var(--sg-series-1-900);
--sg-color-hover-chart-2: var(--sg-series-2-700);
--sg-color-hover-chart-3: var(--sg-series-3-600);
--sg-color-hover-chart-4: var(--sg-series-4-800);
--sg-color-hover-chart-5: var(--sg-series-5-500);
--sg-color-hover-sequential-1: var(--sg-primary-50);
--sg-color-hover-sequential-2: var(--sg-primary-200);
--sg-color-hover-sequential-3: var(--sg-primary-300);
--sg-color-hover-sequential-4: var(--sg-primary-400);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-600);
--sg-color-hover-sequential-7: var(--sg-primary-700);
--sg-color-hover-sequential-8: var(--sg-primary-800);
--sg-color-hover-sequential-9: var(--sg-primary-900);
--sg-color-hover-sequential-10: var(--sg-primary-950);
}
[data-sg-surface="surface"], [data-sg-surface="overlay"] {
background-color: var(--sg-neutral-100);
--sg-color-text-default: var(--sg-neutral-900);
--sg-color-text-muted: var(--sg-neutral-700);
--sg-color-text-faint: var(--sg-neutral-600);
--sg-color-border-subtle: var(--sg-neutral-300);
--sg-color-border-default: var(--sg-neutral-400);
--sg-color-border-strong: var(--sg-neutral-500);
--sg-color-chart-gridline: var(--sg-neutral-200);
--sg-color-accent: var(--sg-primary-600);
--sg-color-accent-mark: var(--sg-primary-500);
--sg-color-accent-strong: var(--sg-primary-700);
--sg-color-danger-strong: var(--sg-danger-700);
--sg-color-warning-strong: var(--sg-warning-700);
--sg-color-success-strong: var(--sg-success-700);
--sg-color-info-strong: var(--sg-info-700);
--sg-color-on-accent: var(--sg-neutral-50);
--sg-color-on-danger: var(--sg-neutral-50);
--sg-color-on-warning: var(--sg-neutral-50);
--sg-color-on-success: var(--sg-neutral-50);
--sg-color-on-info: var(--sg-neutral-50);
--sg-color-accent-subtle: var(--sg-primary-subtle-200);
--sg-color-on-accent-subtle: var(--sg-primary-700);
--sg-color-danger-subtle: var(--sg-danger-subtle-200);
--sg-color-on-danger-subtle: var(--sg-danger-700);
--sg-color-warning-subtle: var(--sg-warning-subtle-200);
--sg-color-on-warning-subtle: var(--sg-warning-700);
--sg-color-success-subtle: var(--sg-success-subtle-200);
--sg-color-on-success-subtle: var(--sg-success-700);
--sg-color-info-subtle: var(--sg-info-subtle-200);
--sg-color-on-info-subtle: var(--sg-info-700);
--sg-color-border-focus: var(--sg-primary-500);
--sg-color-danger: var(--sg-danger-600);
--sg-color-danger-mark: var(--sg-danger-500);
--sg-color-warning: var(--sg-warning-600);
--sg-color-warning-mark: var(--sg-warning-500);
--sg-color-success: var(--sg-success-600);
--sg-color-success-mark: var(--sg-success-500);
--sg-color-info: var(--sg-info-600);
--sg-color-info-mark: var(--sg-info-500);
--sg-color-chart-1: var(--sg-series-1-900);
--sg-color-chart-2: var(--sg-series-2-700);
--sg-color-chart-3: var(--sg-series-3-600);
--sg-color-chart-4: var(--sg-series-4-800);
--sg-color-chart-5: var(--sg-series-5-500);
--sg-color-sequential-1: var(--sg-primary-50);
--sg-color-sequential-2: var(--sg-primary-200);
--sg-color-sequential-3: var(--sg-primary-300);
--sg-color-sequential-4: var(--sg-primary-400);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-600);
--sg-color-sequential-7: var(--sg-primary-700);
--sg-color-sequential-8: var(--sg-primary-800);
--sg-color-sequential-9: var(--sg-primary-900);
--sg-color-sequential-10: var(--sg-primary-950);
--sg-color-deeper-bg: var(--sg-neutral-200);
--sg-color-hover-text-default: var(--sg-neutral-900);
--sg-color-hover-text-muted: var(--sg-neutral-800);
--sg-color-hover-text-faint: var(--sg-neutral-700);
--sg-color-hover-border-subtle: var(--sg-neutral-400);
--sg-color-hover-border-default: var(--sg-neutral-500);
--sg-color-hover-border-strong: var(--sg-neutral-600);
--sg-color-hover-chart-gridline: var(--sg-neutral-300);
--sg-color-hover-accent: var(--sg-primary-700);
--sg-color-hover-accent-mark: var(--sg-primary-600);
--sg-color-hover-accent-strong: var(--sg-primary-800);
--sg-color-hover-danger-strong: var(--sg-danger-800);
--sg-color-hover-warning-strong: var(--sg-warning-800);
--sg-color-hover-success-strong: var(--sg-success-800);
--sg-color-hover-info-strong: var(--sg-info-800);
--sg-color-hover-on-accent: var(--sg-neutral-50);
--sg-color-hover-on-danger: var(--sg-neutral-50);
--sg-color-hover-on-warning: var(--sg-neutral-50);
--sg-color-hover-on-success: var(--sg-neutral-50);
--sg-color-hover-on-info: var(--sg-neutral-50);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-300);
--sg-color-hover-on-accent-subtle: var(--sg-primary-800);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-300);
--sg-color-hover-on-danger-subtle: var(--sg-danger-800);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-300);
--sg-color-hover-on-warning-subtle: var(--sg-warning-800);
--sg-color-hover-success-subtle: var(--sg-success-subtle-300);
--sg-color-hover-on-success-subtle: var(--sg-success-800);
--sg-color-hover-info-subtle: var(--sg-info-subtle-300);
--sg-color-hover-on-info-subtle: var(--sg-info-800);
--sg-color-hover-border-focus: var(--sg-primary-600);
--sg-color-hover-danger: var(--sg-danger-700);
--sg-color-hover-danger-mark: var(--sg-danger-600);
--sg-color-hover-warning: var(--sg-warning-700);
--sg-color-hover-warning-mark: var(--sg-warning-600);
--sg-color-hover-success: var(--sg-success-700);
--sg-color-hover-success-mark: var(--sg-success-600);
--sg-color-hover-info: var(--sg-info-700);
--sg-color-hover-info-mark: var(--sg-info-600);
--sg-color-hover-chart-1: var(--sg-series-1-900);
--sg-color-hover-chart-2: var(--sg-series-2-600);
--sg-color-hover-chart-3: var(--sg-series-3-950);
--sg-color-hover-chart-4: var(--sg-series-4-700);
--sg-color-hover-chart-5: var(--sg-series-5-800);
--sg-color-hover-sequential-1: var(--sg-primary-50);
--sg-color-hover-sequential-2: var(--sg-primary-100);
--sg-color-hover-sequential-3: var(--sg-primary-300);
--sg-color-hover-sequential-4: var(--sg-primary-400);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-600);
--sg-color-hover-sequential-7: var(--sg-primary-700);
--sg-color-hover-sequential-8: var(--sg-primary-800);
--sg-color-hover-sequential-9: var(--sg-primary-900);
--sg-color-hover-sequential-10: var(--sg-primary-950);
}
[data-sg-surface="inset"] {
background-color: var(--sg-neutral-200);
--sg-color-text-default: var(--sg-neutral-900);
--sg-color-text-muted: var(--sg-neutral-800);
--sg-color-text-faint: var(--sg-neutral-700);
--sg-color-border-subtle: var(--sg-neutral-400);
--sg-color-border-default: var(--sg-neutral-500);
--sg-color-border-strong: var(--sg-neutral-600);
--sg-color-chart-gridline: var(--sg-neutral-300);
--sg-color-accent: var(--sg-primary-700);
--sg-color-accent-mark: var(--sg-primary-600);
--sg-color-accent-strong: var(--sg-primary-800);
--sg-color-danger-strong: var(--sg-danger-800);
--sg-color-warning-strong: var(--sg-warning-800);
--sg-color-success-strong: var(--sg-success-800);
--sg-color-info-strong: var(--sg-info-800);
--sg-color-on-accent: var(--sg-neutral-50);
--sg-color-on-danger: var(--sg-neutral-50);
--sg-color-on-warning: var(--sg-neutral-50);
--sg-color-on-success: var(--sg-neutral-50);
--sg-color-on-info: var(--sg-neutral-50);
--sg-color-accent-subtle: var(--sg-primary-subtle-300);
--sg-color-on-accent-subtle: var(--sg-primary-800);
--sg-color-danger-subtle: var(--sg-danger-subtle-300);
--sg-color-on-danger-subtle: var(--sg-danger-800);
--sg-color-warning-subtle: var(--sg-warning-subtle-300);
--sg-color-on-warning-subtle: var(--sg-warning-800);
--sg-color-success-subtle: var(--sg-success-subtle-300);
--sg-color-on-success-subtle: var(--sg-success-800);
--sg-color-info-subtle: var(--sg-info-subtle-300);
--sg-color-on-info-subtle: var(--sg-info-800);
--sg-color-border-focus: var(--sg-primary-600);
--sg-color-danger: var(--sg-danger-700);
--sg-color-danger-mark: var(--sg-danger-600);
--sg-color-warning: var(--sg-warning-700);
--sg-color-warning-mark: var(--sg-warning-600);
--sg-color-success: var(--sg-success-700);
--sg-color-success-mark: var(--sg-success-600);
--sg-color-info: var(--sg-info-700);
--sg-color-info-mark: var(--sg-info-600);
--sg-color-chart-1: var(--sg-series-1-900);
--sg-color-chart-2: var(--sg-series-2-600);
--sg-color-chart-3: var(--sg-series-3-950);
--sg-color-chart-4: var(--sg-series-4-700);
--sg-color-chart-5: var(--sg-series-5-800);
--sg-color-sequential-1: var(--sg-primary-50);
--sg-color-sequential-2: var(--sg-primary-100);
--sg-color-sequential-3: var(--sg-primary-300);
--sg-color-sequential-4: var(--sg-primary-400);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-600);
--sg-color-sequential-7: var(--sg-primary-700);
--sg-color-sequential-8: var(--sg-primary-800);
--sg-color-sequential-9: var(--sg-primary-900);
--sg-color-sequential-10: var(--sg-primary-950);
--sg-color-deeper-bg: var(--sg-neutral-300);
--sg-color-hover-text-default: var(--sg-neutral-900);
--sg-color-hover-text-muted: var(--sg-neutral-900);
--sg-color-hover-text-faint: var(--sg-neutral-800);
--sg-color-hover-border-subtle: var(--sg-neutral-500);
--sg-color-hover-border-default: var(--sg-neutral-600);
--sg-color-hover-border-strong: var(--sg-neutral-700);
--sg-color-hover-chart-gridline: var(--sg-neutral-400);
--sg-color-hover-accent: var(--sg-primary-800);
--sg-color-hover-accent-mark: var(--sg-primary-700);
--sg-color-hover-accent-strong: var(--sg-primary-900);
--sg-color-hover-danger-strong: var(--sg-danger-900);
--sg-color-hover-warning-strong: var(--sg-warning-900);
--sg-color-hover-success-strong: var(--sg-success-900);
--sg-color-hover-info-strong: var(--sg-info-900);
--sg-color-hover-on-accent: var(--sg-neutral-50);
--sg-color-hover-on-danger: var(--sg-neutral-50);
--sg-color-hover-on-warning: var(--sg-neutral-50);
--sg-color-hover-on-success: var(--sg-neutral-50);
--sg-color-hover-on-info: var(--sg-neutral-50);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-400);
--sg-color-hover-on-accent-subtle: var(--sg-primary-950);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-400);
--sg-color-hover-on-danger-subtle: var(--sg-danger-950);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-400);
--sg-color-hover-on-warning-subtle: var(--sg-warning-950);
--sg-color-hover-success-subtle: var(--sg-success-subtle-400);
--sg-color-hover-on-success-subtle: var(--sg-success-950);
--sg-color-hover-info-subtle: var(--sg-info-subtle-400);
--sg-color-hover-on-info-subtle: var(--sg-info-950);
--sg-color-hover-border-focus: var(--sg-primary-700);
--sg-color-hover-danger: var(--sg-danger-800);
--sg-color-hover-danger-mark: var(--sg-danger-700);
--sg-color-hover-warning: var(--sg-warning-800);
--sg-color-hover-warning-mark: var(--sg-warning-700);
--sg-color-hover-success: var(--sg-success-800);
--sg-color-hover-success-mark: var(--sg-success-700);
--sg-color-hover-info: var(--sg-info-800);
--sg-color-hover-info-mark: var(--sg-info-700);
--sg-color-hover-sequential-1: var(--sg-primary-50);
--sg-color-hover-sequential-2: var(--sg-primary-100);
--sg-color-hover-sequential-3: var(--sg-primary-200);
--sg-color-hover-sequential-4: var(--sg-primary-400);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-600);
--sg-color-hover-sequential-7: var(--sg-primary-700);
--sg-color-hover-sequential-8: var(--sg-primary-800);
--sg-color-hover-sequential-9: var(--sg-primary-900);
--sg-color-hover-sequential-10: var(--sg-primary-950);
--sg-color-hover-chart-1: var(--sg-color-chart-1);
--sg-color-hover-chart-2: var(--sg-color-chart-2);
--sg-color-hover-chart-3: var(--sg-color-chart-3);
--sg-color-hover-chart-4: var(--sg-color-chart-4);
--sg-color-hover-chart-5: var(--sg-color-chart-5);
}
[data-sg-surface="page"] [data-sg-fill="accent"], [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="accent"]:hover, [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-sg-surface="page"] [data-sg-fill="danger"], [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="danger"]:hover, [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-sg-surface="page"] [data-sg-fill="warning"], [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="warning"]:hover, [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-sg-surface="page"] [data-sg-fill="success"], [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="success"]:hover, [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-sg-surface="page"] [data-sg-fill="info"], [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="info"]:hover, [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="accent"], [data-sg-surface="overlay"] [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="accent"]:hover, [data-sg-surface="overlay"] [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="danger"], [data-sg-surface="overlay"] [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="danger"]:hover, [data-sg-surface="overlay"] [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="warning"], [data-sg-surface="overlay"] [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="warning"]:hover, [data-sg-surface="overlay"] [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="success"], [data-sg-surface="overlay"] [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="success"]:hover, [data-sg-surface="overlay"] [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="info"], [data-sg-surface="overlay"] [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="info"]:hover, [data-sg-surface="overlay"] [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
/* 後ろを覆う。**塗るだけの道は作らない**——宣言した要素の ::backdrop だけを塗る。
覆いの上には何も乗らないので、面ではなく塗りだけである。
--sg-color-scrim は**宣言していない差し込み口**である。濃さを変えたい利用側が定義する。
<dialog data-sg-scrim data-sg-surface="overlay"></dialog> */
[data-sg-scrim]::backdrop {
background-color: var(--sg-color-scrim, color-mix(in oklab, var(--sg-neutral-950) 50%, transparent));
}
/* 折りたたみの開閉。**素の details に乗せたまま、高さを動かす。**
閉じているあいだ、ブラウザは中身を描画しない。0 から実際の高さへ動かすには
`::details-content` に触り、`interpolate-size` で auto を補間できるようにする。
**`interpolate-size` は継承する**ので :root に一度書けば届く。
**宣言した details だけが動く。** 面・塗り・覆い・骨組みと同じ形である。
<details data-sg-collapse>...</details>
`content-visibility` を一緒に遷移させるのは、**閉じるときにも動かすため**である。
これが無いと、閉じた瞬間に中身が消えて高さだけが縮む。
**動きを減らす設定を尊重するのは利用側の責務ではない。** ここで止める。 */
:root {
interpolate-size: allow-keywords;
}
[data-sg-collapse]::details-content {
block-size: 0;
overflow: hidden;
transition:
block-size var(--sg-duration-2) ease-in-out,
content-visibility var(--sg-duration-2) ease-in-out allow-discrete;
}
[data-sg-collapse][open]::details-content {
block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
[data-sg-collapse]::details-content {
transition: none;
}
}
/* 出入りの動き。**覆いを持つものは、覆いと一緒に出入りする。**
閉じるときが難しい。`close()` は表示を即座に消すので、
何もしないと**消えてから動く**ことになり、動きが見えない。
`display` と `overlay` を allow-discrete で遷移させると、
**動き終わるまで最前面の層に留まる。**
Tailwind 側には出口を作っていない。`transition-property` に
`display` と `overlay` を並べる書き方が、クラス名の規則で書けないためである。
**動きを減らす設定を尊重するのは利用側の責務ではない。** ここで止める。 */
[data-sg-scrim],
[data-sg-scrim]::backdrop {
opacity: 0;
transition:
opacity var(--sg-duration-2) ease-in-out,
display var(--sg-duration-2) ease-in-out allow-discrete,
overlay var(--sg-duration-2) ease-in-out allow-discrete;
}
[data-sg-scrim][open],
[data-sg-scrim][open]::backdrop {
opacity: 1;
}
/* 開いた瞬間の始点。**これが無いと、開くときだけ動かない**——
表示され始めた要素には遷移の始点が無いためである */
@starting-style {
[data-sg-scrim][open],
[data-sg-scrim][open]::backdrop {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
[data-sg-scrim],
[data-sg-scrim]::backdrop {
transition: none;
}
}
@media (prefers-color-scheme: dark) {
:root {
--sg-color-bg-page: var(--sg-neutral-950);
--sg-color-text-default: var(--sg-neutral-100);
--sg-color-text-muted: var(--sg-neutral-300);
--sg-color-text-faint: var(--sg-neutral-400);
--sg-color-border-subtle: var(--sg-neutral-800);
--sg-color-border-default: var(--sg-neutral-700);
--sg-color-border-strong: var(--sg-neutral-600);
--sg-color-chart-gridline: var(--sg-neutral-900);
--sg-color-accent: var(--sg-primary-400);
--sg-color-accent-mark: var(--sg-primary-300);
--sg-color-accent-strong: var(--sg-primary-300);
--sg-color-danger-strong: var(--sg-danger-300);
--sg-color-warning-strong: var(--sg-warning-300);
--sg-color-success-strong: var(--sg-success-300);
--sg-color-info-strong: var(--sg-info-300);
--sg-color-on-accent: var(--sg-neutral-950);
--sg-color-on-danger: var(--sg-neutral-950);
--sg-color-on-warning: var(--sg-neutral-950);
--sg-color-on-success: var(--sg-neutral-950);
--sg-color-on-info: var(--sg-neutral-950);
--sg-color-accent-subtle: var(--sg-primary-subtle-900);
--sg-color-on-accent-subtle: var(--sg-primary-300);
--sg-color-danger-subtle: var(--sg-danger-subtle-900);
--sg-color-on-danger-subtle: var(--sg-danger-300);
--sg-color-warning-subtle: var(--sg-warning-subtle-900);
--sg-color-on-warning-subtle: var(--sg-warning-300);
--sg-color-success-subtle: var(--sg-success-subtle-900);
--sg-color-on-success-subtle: var(--sg-success-300);
--sg-color-info-subtle: var(--sg-info-subtle-900);
--sg-color-on-info-subtle: var(--sg-info-300);
--sg-color-border-focus: var(--sg-primary-300);
--sg-color-danger: var(--sg-danger-400);
--sg-color-danger-mark: var(--sg-danger-300);
--sg-color-warning: var(--sg-warning-400);
--sg-color-warning-mark: var(--sg-warning-300);
--sg-color-success: var(--sg-success-400);
--sg-color-success-mark: var(--sg-success-300);
--sg-color-info: var(--sg-info-400);
--sg-color-info-mark: var(--sg-info-300);
--sg-color-chart-1: var(--sg-series-1-100);
--sg-color-chart-2: var(--sg-series-2-300);
--sg-color-chart-3: var(--sg-series-3-200);
--sg-color-chart-4: var(--sg-series-4-400);
--sg-color-chart-5: var(--sg-series-5-500);
--sg-color-sequential-1: var(--sg-primary-900);
--sg-color-sequential-2: var(--sg-primary-800);
--sg-color-sequential-3: var(--sg-primary-700);
--sg-color-sequential-4: var(--sg-primary-600);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-400);
--sg-color-sequential-7: var(--sg-primary-300);
--sg-color-sequential-8: var(--sg-primary-200);
--sg-color-sequential-9: var(--sg-primary-100);
--sg-color-sequential-10: var(--sg-primary-50);
--sg-elevation-raised: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-800);
--sg-elevation-overlay: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-700);
--sg-elevation-front: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-600);
--sg-color-deeper-bg: var(--sg-neutral-900);
--sg-color-hover-text-default: var(--sg-neutral-100);
--sg-color-hover-text-muted: var(--sg-neutral-200);
--sg-color-hover-text-faint: var(--sg-neutral-300);
--sg-color-hover-border-subtle: var(--sg-neutral-700);
--sg-color-hover-border-default: var(--sg-neutral-600);
--sg-color-hover-border-strong: var(--sg-neutral-500);
--sg-color-hover-chart-gridline: var(--sg-neutral-800);
--sg-color-hover-accent: var(--sg-primary-300);
--sg-color-hover-accent-mark: var(--sg-primary-200);
--sg-color-hover-accent-strong: var(--sg-primary-200);
--sg-color-hover-danger-strong: var(--sg-danger-200);
--sg-color-hover-warning-strong: var(--sg-warning-200);
--sg-color-hover-success-strong: var(--sg-success-200);
--sg-color-hover-info-strong: var(--sg-info-200);
--sg-color-hover-on-accent: var(--sg-neutral-950);
--sg-color-hover-on-danger: var(--sg-neutral-950);
--sg-color-hover-on-warning: var(--sg-neutral-950);
--sg-color-hover-on-success: var(--sg-neutral-950);
--sg-color-hover-on-info: var(--sg-neutral-950);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-800);
--sg-color-hover-on-accent-subtle: var(--sg-primary-300);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-800);
--sg-color-hover-on-danger-subtle: var(--sg-danger-300);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-800);
--sg-color-hover-on-warning-subtle: var(--sg-warning-300);
--sg-color-hover-success-subtle: var(--sg-success-subtle-800);
--sg-color-hover-on-success-subtle: var(--sg-success-300);
--sg-color-hover-info-subtle: var(--sg-info-subtle-800);
--sg-color-hover-on-info-subtle: var(--sg-info-300);
--sg-color-hover-border-focus: var(--sg-primary-200);
--sg-color-hover-danger: var(--sg-danger-300);
--sg-color-hover-danger-mark: var(--sg-danger-200);
--sg-color-hover-warning: var(--sg-warning-300);
--sg-color-hover-warning-mark: var(--sg-warning-200);
--sg-color-hover-success: var(--sg-success-300);
--sg-color-hover-success-mark: var(--sg-success-200);
--sg-color-hover-info: var(--sg-info-300);
--sg-color-hover-info-mark: var(--sg-info-200);
--sg-color-hover-chart-1: var(--sg-series-1-50);
--sg-color-hover-chart-2: var(--sg-series-2-400);
--sg-color-hover-chart-3: var(--sg-series-3-100);
--sg-color-hover-chart-4: var(--sg-series-4-300);
--sg-color-hover-chart-5: var(--sg-series-5-200);
--sg-color-hover-sequential-1: var(--sg-primary-950);
--sg-color-hover-sequential-2: var(--sg-primary-800);
--sg-color-hover-sequential-3: var(--sg-primary-700);
--sg-color-hover-sequential-4: var(--sg-primary-600);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-400);
--sg-color-hover-sequential-7: var(--sg-primary-300);
--sg-color-hover-sequential-8: var(--sg-primary-200);
--sg-color-hover-sequential-9: var(--sg-primary-100);
--sg-color-hover-sequential-10: var(--sg-primary-50);
color-scheme: dark;
}
[data-sg-surface="page"] {
background-color: var(--sg-neutral-950);
--sg-color-bg-page: var(--sg-neutral-950);
--sg-color-text-default: var(--sg-neutral-100);
--sg-color-text-muted: var(--sg-neutral-300);
--sg-color-text-faint: var(--sg-neutral-400);
--sg-color-border-subtle: var(--sg-neutral-800);
--sg-color-border-default: var(--sg-neutral-700);
--sg-color-border-strong: var(--sg-neutral-600);
--sg-color-chart-gridline: var(--sg-neutral-900);
--sg-color-accent: var(--sg-primary-400);
--sg-color-accent-mark: var(--sg-primary-300);
--sg-color-accent-strong: var(--sg-primary-300);
--sg-color-danger-strong: var(--sg-danger-300);
--sg-color-warning-strong: var(--sg-warning-300);
--sg-color-success-strong: var(--sg-success-300);
--sg-color-info-strong: var(--sg-info-300);
--sg-color-on-accent: var(--sg-neutral-950);
--sg-color-on-danger: var(--sg-neutral-950);
--sg-color-on-warning: var(--sg-neutral-950);
--sg-color-on-success: var(--sg-neutral-950);
--sg-color-on-info: var(--sg-neutral-950);
--sg-color-accent-subtle: var(--sg-primary-subtle-900);
--sg-color-on-accent-subtle: var(--sg-primary-300);
--sg-color-danger-subtle: var(--sg-danger-subtle-900);
--sg-color-on-danger-subtle: var(--sg-danger-300);
--sg-color-warning-subtle: var(--sg-warning-subtle-900);
--sg-color-on-warning-subtle: var(--sg-warning-300);
--sg-color-success-subtle: var(--sg-success-subtle-900);
--sg-color-on-success-subtle: var(--sg-success-300);
--sg-color-info-subtle: var(--sg-info-subtle-900);
--sg-color-on-info-subtle: var(--sg-info-300);
--sg-color-border-focus: var(--sg-primary-300);
--sg-color-danger: var(--sg-danger-400);
--sg-color-danger-mark: var(--sg-danger-300);
--sg-color-warning: var(--sg-warning-400);
--sg-color-warning-mark: var(--sg-warning-300);
--sg-color-success: var(--sg-success-400);
--sg-color-success-mark: var(--sg-success-300);
--sg-color-info: var(--sg-info-400);
--sg-color-info-mark: var(--sg-info-300);
--sg-color-chart-1: var(--sg-series-1-100);
--sg-color-chart-2: var(--sg-series-2-300);
--sg-color-chart-3: var(--sg-series-3-200);
--sg-color-chart-4: var(--sg-series-4-400);
--sg-color-chart-5: var(--sg-series-5-500);
--sg-color-sequential-1: var(--sg-primary-900);
--sg-color-sequential-2: var(--sg-primary-800);
--sg-color-sequential-3: var(--sg-primary-700);
--sg-color-sequential-4: var(--sg-primary-600);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-400);
--sg-color-sequential-7: var(--sg-primary-300);
--sg-color-sequential-8: var(--sg-primary-200);
--sg-color-sequential-9: var(--sg-primary-100);
--sg-color-sequential-10: var(--sg-primary-50);
--sg-elevation-raised: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-800);
--sg-elevation-overlay: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-700);
--sg-elevation-front: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-600);
--sg-color-deeper-bg: var(--sg-neutral-900);
--sg-color-hover-text-default: var(--sg-neutral-100);
--sg-color-hover-text-muted: var(--sg-neutral-200);
--sg-color-hover-text-faint: var(--sg-neutral-300);
--sg-color-hover-border-subtle: var(--sg-neutral-700);
--sg-color-hover-border-default: var(--sg-neutral-600);
--sg-color-hover-border-strong: var(--sg-neutral-500);
--sg-color-hover-chart-gridline: var(--sg-neutral-800);
--sg-color-hover-accent: var(--sg-primary-300);
--sg-color-hover-accent-mark: var(--sg-primary-200);
--sg-color-hover-accent-strong: var(--sg-primary-200);
--sg-color-hover-danger-strong: var(--sg-danger-200);
--sg-color-hover-warning-strong: var(--sg-warning-200);
--sg-color-hover-success-strong: var(--sg-success-200);
--sg-color-hover-info-strong: var(--sg-info-200);
--sg-color-hover-on-accent: var(--sg-neutral-950);
--sg-color-hover-on-danger: var(--sg-neutral-950);
--sg-color-hover-on-warning: var(--sg-neutral-950);
--sg-color-hover-on-success: var(--sg-neutral-950);
--sg-color-hover-on-info: var(--sg-neutral-950);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-800);
--sg-color-hover-on-accent-subtle: var(--sg-primary-300);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-800);
--sg-color-hover-on-danger-subtle: var(--sg-danger-300);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-800);
--sg-color-hover-on-warning-subtle: var(--sg-warning-300);
--sg-color-hover-success-subtle: var(--sg-success-subtle-800);
--sg-color-hover-on-success-subtle: var(--sg-success-300);
--sg-color-hover-info-subtle: var(--sg-info-subtle-800);
--sg-color-hover-on-info-subtle: var(--sg-info-300);
--sg-color-hover-border-focus: var(--sg-primary-200);
--sg-color-hover-danger: var(--sg-danger-300);
--sg-color-hover-danger-mark: var(--sg-danger-200);
--sg-color-hover-warning: var(--sg-warning-300);
--sg-color-hover-warning-mark: var(--sg-warning-200);
--sg-color-hover-success: var(--sg-success-300);
--sg-color-hover-success-mark: var(--sg-success-200);
--sg-color-hover-info: var(--sg-info-300);
--sg-color-hover-info-mark: var(--sg-info-200);
--sg-color-hover-chart-1: var(--sg-series-1-50);
--sg-color-hover-chart-2: var(--sg-series-2-400);
--sg-color-hover-chart-3: var(--sg-series-3-100);
--sg-color-hover-chart-4: var(--sg-series-4-300);
--sg-color-hover-chart-5: var(--sg-series-5-200);
--sg-color-hover-sequential-1: var(--sg-primary-950);
--sg-color-hover-sequential-2: var(--sg-primary-800);
--sg-color-hover-sequential-3: var(--sg-primary-700);
--sg-color-hover-sequential-4: var(--sg-primary-600);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-400);
--sg-color-hover-sequential-7: var(--sg-primary-300);
--sg-color-hover-sequential-8: var(--sg-primary-200);
--sg-color-hover-sequential-9: var(--sg-primary-100);
--sg-color-hover-sequential-10: var(--sg-primary-50);
}
[data-sg-surface="surface"], [data-sg-surface="overlay"] {
background-color: var(--sg-neutral-900);
--sg-color-text-default: var(--sg-neutral-100);
--sg-color-text-muted: var(--sg-neutral-200);
--sg-color-text-faint: var(--sg-neutral-300);
--sg-color-border-subtle: var(--sg-neutral-700);
--sg-color-border-default: var(--sg-neutral-600);
--sg-color-border-strong: var(--sg-neutral-500);
--sg-color-chart-gridline: var(--sg-neutral-800);
--sg-color-accent: var(--sg-primary-300);
--sg-color-accent-mark: var(--sg-primary-200);
--sg-color-accent-strong: var(--sg-primary-200);
--sg-color-danger-strong: var(--sg-danger-200);
--sg-color-warning-strong: var(--sg-warning-200);
--sg-color-success-strong: var(--sg-success-200);
--sg-color-info-strong: var(--sg-info-200);
--sg-color-on-accent: var(--sg-neutral-950);
--sg-color-on-danger: var(--sg-neutral-950);
--sg-color-on-warning: var(--sg-neutral-950);
--sg-color-on-success: var(--sg-neutral-950);
--sg-color-on-info: var(--sg-neutral-950);
--sg-color-accent-subtle: var(--sg-primary-subtle-800);
--sg-color-on-accent-subtle: var(--sg-primary-300);
--sg-color-danger-subtle: var(--sg-danger-subtle-800);
--sg-color-on-danger-subtle: var(--sg-danger-300);
--sg-color-warning-subtle: var(--sg-warning-subtle-800);
--sg-color-on-warning-subtle: var(--sg-warning-300);
--sg-color-success-subtle: var(--sg-success-subtle-800);
--sg-color-on-success-subtle: var(--sg-success-300);
--sg-color-info-subtle: var(--sg-info-subtle-800);
--sg-color-on-info-subtle: var(--sg-info-300);
--sg-color-border-focus: var(--sg-primary-200);
--sg-color-danger: var(--sg-danger-300);
--sg-color-danger-mark: var(--sg-danger-200);
--sg-color-warning: var(--sg-warning-300);
--sg-color-warning-mark: var(--sg-warning-200);
--sg-color-success: var(--sg-success-300);
--sg-color-success-mark: var(--sg-success-200);
--sg-color-info: var(--sg-info-300);
--sg-color-info-mark: var(--sg-info-200);
--sg-color-chart-1: var(--sg-series-1-50);
--sg-color-chart-2: var(--sg-series-2-400);
--sg-color-chart-3: var(--sg-series-3-100);
--sg-color-chart-4: var(--sg-series-4-300);
--sg-color-chart-5: var(--sg-series-5-200);
--sg-color-sequential-1: var(--sg-primary-950);
--sg-color-sequential-2: var(--sg-primary-800);
--sg-color-sequential-3: var(--sg-primary-700);
--sg-color-sequential-4: var(--sg-primary-600);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-400);
--sg-color-sequential-7: var(--sg-primary-300);
--sg-color-sequential-8: var(--sg-primary-200);
--sg-color-sequential-9: var(--sg-primary-100);
--sg-color-sequential-10: var(--sg-primary-50);
--sg-elevation-raised: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-700);
--sg-elevation-overlay: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-600);
--sg-elevation-front: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-500);
--sg-color-deeper-bg: var(--sg-neutral-800);
--sg-color-hover-text-default: var(--sg-neutral-100);
--sg-color-hover-text-muted: var(--sg-neutral-200);
--sg-color-hover-text-faint: var(--sg-neutral-300);
--sg-color-hover-border-subtle: var(--sg-neutral-600);
--sg-color-hover-border-default: var(--sg-neutral-500);
--sg-color-hover-border-strong: var(--sg-neutral-400);
--sg-color-hover-chart-gridline: var(--sg-neutral-700);
--sg-color-hover-accent: var(--sg-primary-300);
--sg-color-hover-accent-mark: var(--sg-primary-200);
--sg-color-hover-accent-strong: var(--sg-primary-200);
--sg-color-hover-danger-strong: var(--sg-danger-200);
--sg-color-hover-warning-strong: var(--sg-warning-200);
--sg-color-hover-success-strong: var(--sg-success-200);
--sg-color-hover-info-strong: var(--sg-info-200);
--sg-color-hover-on-accent: var(--sg-neutral-950);
--sg-color-hover-on-danger: var(--sg-neutral-950);
--sg-color-hover-on-warning: var(--sg-neutral-950);
--sg-color-hover-on-success: var(--sg-neutral-950);
--sg-color-hover-on-info: var(--sg-neutral-950);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-700);
--sg-color-hover-on-accent-subtle: var(--sg-primary-200);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-700);
--sg-color-hover-on-danger-subtle: var(--sg-danger-200);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-700);
--sg-color-hover-on-warning-subtle: var(--sg-warning-200);
--sg-color-hover-success-subtle: var(--sg-success-subtle-700);
--sg-color-hover-on-success-subtle: var(--sg-success-200);
--sg-color-hover-info-subtle: var(--sg-info-subtle-700);
--sg-color-hover-on-info-subtle: var(--sg-info-200);
--sg-color-hover-border-focus: var(--sg-primary-200);
--sg-color-hover-danger: var(--sg-danger-300);
--sg-color-hover-danger-mark: var(--sg-danger-200);
--sg-color-hover-warning: var(--sg-warning-300);
--sg-color-hover-warning-mark: var(--sg-warning-200);
--sg-color-hover-success: var(--sg-success-300);
--sg-color-hover-success-mark: var(--sg-success-200);
--sg-color-hover-info: var(--sg-info-300);
--sg-color-hover-info-mark: var(--sg-info-200);
--sg-color-hover-sequential-1: var(--sg-primary-950);
--sg-color-hover-sequential-2: var(--sg-primary-900);
--sg-color-hover-sequential-3: var(--sg-primary-700);
--sg-color-hover-sequential-4: var(--sg-primary-600);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-400);
--sg-color-hover-sequential-7: var(--sg-primary-300);
--sg-color-hover-sequential-8: var(--sg-primary-200);
--sg-color-hover-sequential-9: var(--sg-primary-100);
--sg-color-hover-sequential-10: var(--sg-primary-50);
--sg-color-hover-chart-1: var(--sg-color-chart-1);
--sg-color-hover-chart-2: var(--sg-color-chart-2);
--sg-color-hover-chart-3: var(--sg-color-chart-3);
--sg-color-hover-chart-4: var(--sg-color-chart-4);
--sg-color-hover-chart-5: var(--sg-color-chart-5);
}
[data-sg-surface="inset"] {
background-color: var(--sg-neutral-800);
--sg-color-text-default: var(--sg-neutral-100);
--sg-color-text-muted: var(--sg-neutral-200);
--sg-color-text-faint: var(--sg-neutral-300);
--sg-color-border-subtle: var(--sg-neutral-600);
--sg-color-border-default: var(--sg-neutral-500);
--sg-color-border-strong: var(--sg-neutral-400);
--sg-color-chart-gridline: var(--sg-neutral-700);
--sg-color-accent: var(--sg-primary-300);
--sg-color-accent-mark: var(--sg-primary-200);
--sg-color-accent-strong: var(--sg-primary-200);
--sg-color-danger-strong: var(--sg-danger-200);
--sg-color-warning-strong: var(--sg-warning-200);
--sg-color-success-strong: var(--sg-success-200);
--sg-color-info-strong: var(--sg-info-200);
--sg-color-on-accent: var(--sg-neutral-950);
--sg-color-on-danger: var(--sg-neutral-950);
--sg-color-on-warning: var(--sg-neutral-950);
--sg-color-on-success: var(--sg-neutral-950);
--sg-color-on-info: var(--sg-neutral-950);
--sg-color-accent-subtle: var(--sg-primary-subtle-700);
--sg-color-on-accent-subtle: var(--sg-primary-200);
--sg-color-danger-subtle: var(--sg-danger-subtle-700);
--sg-color-on-danger-subtle: var(--sg-danger-200);
--sg-color-warning-subtle: var(--sg-warning-subtle-700);
--sg-color-on-warning-subtle: var(--sg-warning-200);
--sg-color-success-subtle: var(--sg-success-subtle-700);
--sg-color-on-success-subtle: var(--sg-success-200);
--sg-color-info-subtle: var(--sg-info-subtle-700);
--sg-color-on-info-subtle: var(--sg-info-200);
--sg-color-border-focus: var(--sg-primary-200);
--sg-color-danger: var(--sg-danger-300);
--sg-color-danger-mark: var(--sg-danger-200);
--sg-color-warning: var(--sg-warning-300);
--sg-color-warning-mark: var(--sg-warning-200);
--sg-color-success: var(--sg-success-300);
--sg-color-success-mark: var(--sg-success-200);
--sg-color-info: var(--sg-info-300);
--sg-color-info-mark: var(--sg-info-200);
--sg-color-sequential-1: var(--sg-primary-950);
--sg-color-sequential-2: var(--sg-primary-900);
--sg-color-sequential-3: var(--sg-primary-700);
--sg-color-sequential-4: var(--sg-primary-600);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-400);
--sg-color-sequential-7: var(--sg-primary-300);
--sg-color-sequential-8: var(--sg-primary-200);
--sg-color-sequential-9: var(--sg-primary-100);
--sg-color-sequential-10: var(--sg-primary-50);
--sg-elevation-raised: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-600);
--sg-elevation-overlay: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-500);
--sg-elevation-front: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-400);
--sg-color-deeper-bg: var(--sg-neutral-700);
--sg-color-hover-text-default: var(--sg-neutral-100);
--sg-color-hover-text-muted: var(--sg-neutral-100);
--sg-color-hover-text-faint: var(--sg-neutral-200);
--sg-color-hover-border-subtle: var(--sg-neutral-500);
--sg-color-hover-border-default: var(--sg-neutral-400);
--sg-color-hover-border-strong: var(--sg-neutral-300);
--sg-color-hover-chart-gridline: var(--sg-neutral-600);
--sg-color-hover-accent: var(--sg-primary-200);
--sg-color-hover-accent-mark: var(--sg-primary-100);
--sg-color-hover-accent-strong: var(--sg-primary-100);
--sg-color-hover-danger-strong: var(--sg-danger-100);
--sg-color-hover-warning-strong: var(--sg-warning-100);
--sg-color-hover-success-strong: var(--sg-success-100);
--sg-color-hover-info-strong: var(--sg-info-100);
--sg-color-hover-on-accent: var(--sg-neutral-950);
--sg-color-hover-on-danger: var(--sg-neutral-950);
--sg-color-hover-on-warning: var(--sg-neutral-950);
--sg-color-hover-on-success: var(--sg-neutral-950);
--sg-color-hover-on-info: var(--sg-neutral-950);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-600);
--sg-color-hover-on-accent-subtle: var(--sg-primary-100);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-600);
--sg-color-hover-on-danger-subtle: var(--sg-danger-100);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-600);
--sg-color-hover-on-warning-subtle: var(--sg-warning-100);
--sg-color-hover-success-subtle: var(--sg-success-subtle-600);
--sg-color-hover-on-success-subtle: var(--sg-success-100);
--sg-color-hover-info-subtle: var(--sg-info-subtle-600);
--sg-color-hover-on-info-subtle: var(--sg-info-100);
--sg-color-hover-border-focus: var(--sg-primary-100);
--sg-color-hover-danger: var(--sg-danger-200);
--sg-color-hover-danger-mark: var(--sg-danger-100);
--sg-color-hover-warning: var(--sg-warning-200);
--sg-color-hover-warning-mark: var(--sg-warning-100);
--sg-color-hover-success: var(--sg-success-200);
--sg-color-hover-success-mark: var(--sg-success-100);
--sg-color-hover-info: var(--sg-info-200);
--sg-color-hover-info-mark: var(--sg-info-100);
--sg-color-hover-sequential-1: var(--sg-primary-950);
--sg-color-hover-sequential-2: var(--sg-primary-900);
--sg-color-hover-sequential-3: var(--sg-primary-800);
--sg-color-hover-sequential-4: var(--sg-primary-600);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-400);
--sg-color-hover-sequential-7: var(--sg-primary-300);
--sg-color-hover-sequential-8: var(--sg-primary-200);
--sg-color-hover-sequential-9: var(--sg-primary-100);
--sg-color-hover-sequential-10: var(--sg-primary-50);
--sg-color-hover-chart-1: var(--sg-color-chart-1);
--sg-color-hover-chart-2: var(--sg-color-chart-2);
--sg-color-hover-chart-3: var(--sg-color-chart-3);
--sg-color-hover-chart-4: var(--sg-color-chart-4);
--sg-color-hover-chart-5: var(--sg-color-chart-5);
}
[data-sg-surface="page"] [data-sg-fill="accent"], [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="accent"]:hover, [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-sg-surface="page"] [data-sg-fill="danger"], [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="danger"]:hover, [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-sg-surface="page"] [data-sg-fill="warning"], [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="warning"]:hover, [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-sg-surface="page"] [data-sg-fill="success"], [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="success"]:hover, [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-sg-surface="page"] [data-sg-fill="info"], [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="page"] [data-sg-fill="info"]:hover, [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="accent"], [data-sg-surface="overlay"] [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="accent"]:hover, [data-sg-surface="overlay"] [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="danger"], [data-sg-surface="overlay"] [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="danger"]:hover, [data-sg-surface="overlay"] [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="warning"], [data-sg-surface="overlay"] [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="warning"]:hover, [data-sg-surface="overlay"] [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="success"], [data-sg-surface="overlay"] [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="success"]:hover, [data-sg-surface="overlay"] [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-sg-surface="surface"] [data-sg-fill="info"], [data-sg-surface="overlay"] [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="surface"] [data-sg-fill="info"]:hover, [data-sg-surface="overlay"] [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-sg-surface="inset"] [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-sg-surface="inset"] [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
}
/* 明示的な指定は OS の設定より優先する。
両方向を出すのは、明色専用・暗色専用のアプリが固定できるようにするため。
:root と同じ詳細度なので、順序でメディアクエリに勝つ。 */
[data-theme="light"] {
--sg-color-bg-page: var(--sg-neutral-50);
--sg-color-text-default: var(--sg-neutral-900);
--sg-color-text-muted: var(--sg-neutral-600);
--sg-color-text-faint: var(--sg-neutral-500);
--sg-color-border-subtle: var(--sg-neutral-200);
--sg-color-border-default: var(--sg-neutral-300);
--sg-color-border-strong: var(--sg-neutral-400);
--sg-color-chart-gridline: var(--sg-neutral-100);
--sg-color-accent: var(--sg-primary-500);
--sg-color-accent-mark: var(--sg-primary-400);
--sg-color-accent-strong: var(--sg-primary-600);
--sg-color-danger-strong: var(--sg-danger-600);
--sg-color-warning-strong: var(--sg-warning-600);
--sg-color-success-strong: var(--sg-success-600);
--sg-color-info-strong: var(--sg-info-600);
--sg-color-on-accent: var(--sg-neutral-50);
--sg-color-on-danger: var(--sg-neutral-50);
--sg-color-on-warning: var(--sg-neutral-50);
--sg-color-on-success: var(--sg-neutral-50);
--sg-color-on-info: var(--sg-neutral-50);
--sg-color-accent-subtle: var(--sg-primary-subtle-100);
--sg-color-on-accent-subtle: var(--sg-primary-600);
--sg-color-danger-subtle: var(--sg-danger-subtle-100);
--sg-color-on-danger-subtle: var(--sg-danger-600);
--sg-color-warning-subtle: var(--sg-warning-subtle-100);
--sg-color-on-warning-subtle: var(--sg-warning-600);
--sg-color-success-subtle: var(--sg-success-subtle-100);
--sg-color-on-success-subtle: var(--sg-success-600);
--sg-color-info-subtle: var(--sg-info-subtle-100);
--sg-color-on-info-subtle: var(--sg-info-600);
--sg-color-border-focus: var(--sg-primary-400);
--sg-color-danger: var(--sg-danger-500);
--sg-color-danger-mark: var(--sg-danger-400);
--sg-color-warning: var(--sg-warning-500);
--sg-color-warning-mark: var(--sg-warning-400);
--sg-color-success: var(--sg-success-500);
--sg-color-success-mark: var(--sg-success-400);
--sg-color-info: var(--sg-info-500);
--sg-color-info-mark: var(--sg-info-400);
--sg-color-chart-1: var(--sg-series-1-800);
--sg-color-chart-2: var(--sg-series-2-400);
--sg-color-chart-3: var(--sg-series-3-700);
--sg-color-chart-4: var(--sg-series-4-500);
--sg-color-chart-5: var(--sg-series-5-600);
--sg-color-sequential-1: var(--sg-primary-100);
--sg-color-sequential-2: var(--sg-primary-200);
--sg-color-sequential-3: var(--sg-primary-300);
--sg-color-sequential-4: var(--sg-primary-400);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-600);
--sg-color-sequential-7: var(--sg-primary-700);
--sg-color-sequential-8: var(--sg-primary-800);
--sg-color-sequential-9: var(--sg-primary-900);
--sg-color-sequential-10: var(--sg-primary-950);
--sg-elevation-raised: 0 4px 8px var(--sg-shadow-ink);
--sg-elevation-overlay: 0 8px 16px var(--sg-shadow-ink);
--sg-elevation-front: 0 12px 24px var(--sg-shadow-ink);
--sg-color-deeper-bg: var(--sg-neutral-100);
--sg-color-hover-text-default: var(--sg-neutral-900);
--sg-color-hover-text-muted: var(--sg-neutral-700);
--sg-color-hover-text-faint: var(--sg-neutral-600);
--sg-color-hover-border-subtle: var(--sg-neutral-300);
--sg-color-hover-border-default: var(--sg-neutral-400);
--sg-color-hover-border-strong: var(--sg-neutral-500);
--sg-color-hover-chart-gridline: var(--sg-neutral-200);
--sg-color-hover-accent: var(--sg-primary-600);
--sg-color-hover-accent-mark: var(--sg-primary-500);
--sg-color-hover-accent-strong: var(--sg-primary-700);
--sg-color-hover-danger-strong: var(--sg-danger-700);
--sg-color-hover-warning-strong: var(--sg-warning-700);
--sg-color-hover-success-strong: var(--sg-success-700);
--sg-color-hover-info-strong: var(--sg-info-700);
--sg-color-hover-on-accent: var(--sg-neutral-50);
--sg-color-hover-on-danger: var(--sg-neutral-50);
--sg-color-hover-on-warning: var(--sg-neutral-50);
--sg-color-hover-on-success: var(--sg-neutral-50);
--sg-color-hover-on-info: var(--sg-neutral-50);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-200);
--sg-color-hover-on-accent-subtle: var(--sg-primary-700);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-200);
--sg-color-hover-on-danger-subtle: var(--sg-danger-700);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-200);
--sg-color-hover-on-warning-subtle: var(--sg-warning-700);
--sg-color-hover-success-subtle: var(--sg-success-subtle-200);
--sg-color-hover-on-success-subtle: var(--sg-success-700);
--sg-color-hover-info-subtle: var(--sg-info-subtle-200);
--sg-color-hover-on-info-subtle: var(--sg-info-700);
--sg-color-hover-border-focus: var(--sg-primary-500);
--sg-color-hover-danger: var(--sg-danger-600);
--sg-color-hover-danger-mark: var(--sg-danger-500);
--sg-color-hover-warning: var(--sg-warning-600);
--sg-color-hover-warning-mark: var(--sg-warning-500);
--sg-color-hover-success: var(--sg-success-600);
--sg-color-hover-success-mark: var(--sg-success-500);
--sg-color-hover-info: var(--sg-info-600);
--sg-color-hover-info-mark: var(--sg-info-500);
--sg-color-hover-chart-1: var(--sg-series-1-900);
--sg-color-hover-chart-2: var(--sg-series-2-700);
--sg-color-hover-chart-3: var(--sg-series-3-600);
--sg-color-hover-chart-4: var(--sg-series-4-800);
--sg-color-hover-chart-5: var(--sg-series-5-500);
--sg-color-hover-sequential-1: var(--sg-primary-50);
--sg-color-hover-sequential-2: var(--sg-primary-200);
--sg-color-hover-sequential-3: var(--sg-primary-300);
--sg-color-hover-sequential-4: var(--sg-primary-400);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-600);
--sg-color-hover-sequential-7: var(--sg-primary-700);
--sg-color-hover-sequential-8: var(--sg-primary-800);
--sg-color-hover-sequential-9: var(--sg-primary-900);
--sg-color-hover-sequential-10: var(--sg-primary-950);
color-scheme: light;
}
[data-theme="light"] [data-sg-surface="page"], [data-theme="light"][data-sg-surface="page"] {
background-color: var(--sg-neutral-50);
--sg-color-bg-page: var(--sg-neutral-50);
--sg-color-text-default: var(--sg-neutral-900);
--sg-color-text-muted: var(--sg-neutral-600);
--sg-color-text-faint: var(--sg-neutral-500);
--sg-color-border-subtle: var(--sg-neutral-200);
--sg-color-border-default: var(--sg-neutral-300);
--sg-color-border-strong: var(--sg-neutral-400);
--sg-color-chart-gridline: var(--sg-neutral-100);
--sg-color-accent: var(--sg-primary-500);
--sg-color-accent-mark: var(--sg-primary-400);
--sg-color-accent-strong: var(--sg-primary-600);
--sg-color-danger-strong: var(--sg-danger-600);
--sg-color-warning-strong: var(--sg-warning-600);
--sg-color-success-strong: var(--sg-success-600);
--sg-color-info-strong: var(--sg-info-600);
--sg-color-on-accent: var(--sg-neutral-50);
--sg-color-on-danger: var(--sg-neutral-50);
--sg-color-on-warning: var(--sg-neutral-50);
--sg-color-on-success: var(--sg-neutral-50);
--sg-color-on-info: var(--sg-neutral-50);
--sg-color-accent-subtle: var(--sg-primary-subtle-100);
--sg-color-on-accent-subtle: var(--sg-primary-600);
--sg-color-danger-subtle: var(--sg-danger-subtle-100);
--sg-color-on-danger-subtle: var(--sg-danger-600);
--sg-color-warning-subtle: var(--sg-warning-subtle-100);
--sg-color-on-warning-subtle: var(--sg-warning-600);
--sg-color-success-subtle: var(--sg-success-subtle-100);
--sg-color-on-success-subtle: var(--sg-success-600);
--sg-color-info-subtle: var(--sg-info-subtle-100);
--sg-color-on-info-subtle: var(--sg-info-600);
--sg-color-border-focus: var(--sg-primary-400);
--sg-color-danger: var(--sg-danger-500);
--sg-color-danger-mark: var(--sg-danger-400);
--sg-color-warning: var(--sg-warning-500);
--sg-color-warning-mark: var(--sg-warning-400);
--sg-color-success: var(--sg-success-500);
--sg-color-success-mark: var(--sg-success-400);
--sg-color-info: var(--sg-info-500);
--sg-color-info-mark: var(--sg-info-400);
--sg-color-chart-1: var(--sg-series-1-800);
--sg-color-chart-2: var(--sg-series-2-400);
--sg-color-chart-3: var(--sg-series-3-700);
--sg-color-chart-4: var(--sg-series-4-500);
--sg-color-chart-5: var(--sg-series-5-600);
--sg-color-sequential-1: var(--sg-primary-100);
--sg-color-sequential-2: var(--sg-primary-200);
--sg-color-sequential-3: var(--sg-primary-300);
--sg-color-sequential-4: var(--sg-primary-400);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-600);
--sg-color-sequential-7: var(--sg-primary-700);
--sg-color-sequential-8: var(--sg-primary-800);
--sg-color-sequential-9: var(--sg-primary-900);
--sg-color-sequential-10: var(--sg-primary-950);
--sg-elevation-raised: 0 4px 8px var(--sg-shadow-ink);
--sg-elevation-overlay: 0 8px 16px var(--sg-shadow-ink);
--sg-elevation-front: 0 12px 24px var(--sg-shadow-ink);
--sg-color-deeper-bg: var(--sg-neutral-100);
--sg-color-hover-text-default: var(--sg-neutral-900);
--sg-color-hover-text-muted: var(--sg-neutral-700);
--sg-color-hover-text-faint: var(--sg-neutral-600);
--sg-color-hover-border-subtle: var(--sg-neutral-300);
--sg-color-hover-border-default: var(--sg-neutral-400);
--sg-color-hover-border-strong: var(--sg-neutral-500);
--sg-color-hover-chart-gridline: var(--sg-neutral-200);
--sg-color-hover-accent: var(--sg-primary-600);
--sg-color-hover-accent-mark: var(--sg-primary-500);
--sg-color-hover-accent-strong: var(--sg-primary-700);
--sg-color-hover-danger-strong: var(--sg-danger-700);
--sg-color-hover-warning-strong: var(--sg-warning-700);
--sg-color-hover-success-strong: var(--sg-success-700);
--sg-color-hover-info-strong: var(--sg-info-700);
--sg-color-hover-on-accent: var(--sg-neutral-50);
--sg-color-hover-on-danger: var(--sg-neutral-50);
--sg-color-hover-on-warning: var(--sg-neutral-50);
--sg-color-hover-on-success: var(--sg-neutral-50);
--sg-color-hover-on-info: var(--sg-neutral-50);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-200);
--sg-color-hover-on-accent-subtle: var(--sg-primary-700);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-200);
--sg-color-hover-on-danger-subtle: var(--sg-danger-700);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-200);
--sg-color-hover-on-warning-subtle: var(--sg-warning-700);
--sg-color-hover-success-subtle: var(--sg-success-subtle-200);
--sg-color-hover-on-success-subtle: var(--sg-success-700);
--sg-color-hover-info-subtle: var(--sg-info-subtle-200);
--sg-color-hover-on-info-subtle: var(--sg-info-700);
--sg-color-hover-border-focus: var(--sg-primary-500);
--sg-color-hover-danger: var(--sg-danger-600);
--sg-color-hover-danger-mark: var(--sg-danger-500);
--sg-color-hover-warning: var(--sg-warning-600);
--sg-color-hover-warning-mark: var(--sg-warning-500);
--sg-color-hover-success: var(--sg-success-600);
--sg-color-hover-success-mark: var(--sg-success-500);
--sg-color-hover-info: var(--sg-info-600);
--sg-color-hover-info-mark: var(--sg-info-500);
--sg-color-hover-chart-1: var(--sg-series-1-900);
--sg-color-hover-chart-2: var(--sg-series-2-700);
--sg-color-hover-chart-3: var(--sg-series-3-600);
--sg-color-hover-chart-4: var(--sg-series-4-800);
--sg-color-hover-chart-5: var(--sg-series-5-500);
--sg-color-hover-sequential-1: var(--sg-primary-50);
--sg-color-hover-sequential-2: var(--sg-primary-200);
--sg-color-hover-sequential-3: var(--sg-primary-300);
--sg-color-hover-sequential-4: var(--sg-primary-400);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-600);
--sg-color-hover-sequential-7: var(--sg-primary-700);
--sg-color-hover-sequential-8: var(--sg-primary-800);
--sg-color-hover-sequential-9: var(--sg-primary-900);
--sg-color-hover-sequential-10: var(--sg-primary-950);
}
[data-theme="light"] [data-sg-surface="surface"], [data-theme="light"][data-sg-surface="surface"], [data-theme="light"] [data-sg-surface="overlay"], [data-theme="light"][data-sg-surface="overlay"] {
background-color: var(--sg-neutral-100);
--sg-color-text-default: var(--sg-neutral-900);
--sg-color-text-muted: var(--sg-neutral-700);
--sg-color-text-faint: var(--sg-neutral-600);
--sg-color-border-subtle: var(--sg-neutral-300);
--sg-color-border-default: var(--sg-neutral-400);
--sg-color-border-strong: var(--sg-neutral-500);
--sg-color-chart-gridline: var(--sg-neutral-200);
--sg-color-accent: var(--sg-primary-600);
--sg-color-accent-mark: var(--sg-primary-500);
--sg-color-accent-strong: var(--sg-primary-700);
--sg-color-danger-strong: var(--sg-danger-700);
--sg-color-warning-strong: var(--sg-warning-700);
--sg-color-success-strong: var(--sg-success-700);
--sg-color-info-strong: var(--sg-info-700);
--sg-color-on-accent: var(--sg-neutral-50);
--sg-color-on-danger: var(--sg-neutral-50);
--sg-color-on-warning: var(--sg-neutral-50);
--sg-color-on-success: var(--sg-neutral-50);
--sg-color-on-info: var(--sg-neutral-50);
--sg-color-accent-subtle: var(--sg-primary-subtle-200);
--sg-color-on-accent-subtle: var(--sg-primary-700);
--sg-color-danger-subtle: var(--sg-danger-subtle-200);
--sg-color-on-danger-subtle: var(--sg-danger-700);
--sg-color-warning-subtle: var(--sg-warning-subtle-200);
--sg-color-on-warning-subtle: var(--sg-warning-700);
--sg-color-success-subtle: var(--sg-success-subtle-200);
--sg-color-on-success-subtle: var(--sg-success-700);
--sg-color-info-subtle: var(--sg-info-subtle-200);
--sg-color-on-info-subtle: var(--sg-info-700);
--sg-color-border-focus: var(--sg-primary-500);
--sg-color-danger: var(--sg-danger-600);
--sg-color-danger-mark: var(--sg-danger-500);
--sg-color-warning: var(--sg-warning-600);
--sg-color-warning-mark: var(--sg-warning-500);
--sg-color-success: var(--sg-success-600);
--sg-color-success-mark: var(--sg-success-500);
--sg-color-info: var(--sg-info-600);
--sg-color-info-mark: var(--sg-info-500);
--sg-color-chart-1: var(--sg-series-1-900);
--sg-color-chart-2: var(--sg-series-2-700);
--sg-color-chart-3: var(--sg-series-3-600);
--sg-color-chart-4: var(--sg-series-4-800);
--sg-color-chart-5: var(--sg-series-5-500);
--sg-color-sequential-1: var(--sg-primary-50);
--sg-color-sequential-2: var(--sg-primary-200);
--sg-color-sequential-3: var(--sg-primary-300);
--sg-color-sequential-4: var(--sg-primary-400);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-600);
--sg-color-sequential-7: var(--sg-primary-700);
--sg-color-sequential-8: var(--sg-primary-800);
--sg-color-sequential-9: var(--sg-primary-900);
--sg-color-sequential-10: var(--sg-primary-950);
--sg-color-deeper-bg: var(--sg-neutral-200);
--sg-color-hover-text-default: var(--sg-neutral-900);
--sg-color-hover-text-muted: var(--sg-neutral-800);
--sg-color-hover-text-faint: var(--sg-neutral-700);
--sg-color-hover-border-subtle: var(--sg-neutral-400);
--sg-color-hover-border-default: var(--sg-neutral-500);
--sg-color-hover-border-strong: var(--sg-neutral-600);
--sg-color-hover-chart-gridline: var(--sg-neutral-300);
--sg-color-hover-accent: var(--sg-primary-700);
--sg-color-hover-accent-mark: var(--sg-primary-600);
--sg-color-hover-accent-strong: var(--sg-primary-800);
--sg-color-hover-danger-strong: var(--sg-danger-800);
--sg-color-hover-warning-strong: var(--sg-warning-800);
--sg-color-hover-success-strong: var(--sg-success-800);
--sg-color-hover-info-strong: var(--sg-info-800);
--sg-color-hover-on-accent: var(--sg-neutral-50);
--sg-color-hover-on-danger: var(--sg-neutral-50);
--sg-color-hover-on-warning: var(--sg-neutral-50);
--sg-color-hover-on-success: var(--sg-neutral-50);
--sg-color-hover-on-info: var(--sg-neutral-50);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-300);
--sg-color-hover-on-accent-subtle: var(--sg-primary-800);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-300);
--sg-color-hover-on-danger-subtle: var(--sg-danger-800);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-300);
--sg-color-hover-on-warning-subtle: var(--sg-warning-800);
--sg-color-hover-success-subtle: var(--sg-success-subtle-300);
--sg-color-hover-on-success-subtle: var(--sg-success-800);
--sg-color-hover-info-subtle: var(--sg-info-subtle-300);
--sg-color-hover-on-info-subtle: var(--sg-info-800);
--sg-color-hover-border-focus: var(--sg-primary-600);
--sg-color-hover-danger: var(--sg-danger-700);
--sg-color-hover-danger-mark: var(--sg-danger-600);
--sg-color-hover-warning: var(--sg-warning-700);
--sg-color-hover-warning-mark: var(--sg-warning-600);
--sg-color-hover-success: var(--sg-success-700);
--sg-color-hover-success-mark: var(--sg-success-600);
--sg-color-hover-info: var(--sg-info-700);
--sg-color-hover-info-mark: var(--sg-info-600);
--sg-color-hover-chart-1: var(--sg-series-1-900);
--sg-color-hover-chart-2: var(--sg-series-2-600);
--sg-color-hover-chart-3: var(--sg-series-3-950);
--sg-color-hover-chart-4: var(--sg-series-4-700);
--sg-color-hover-chart-5: var(--sg-series-5-800);
--sg-color-hover-sequential-1: var(--sg-primary-50);
--sg-color-hover-sequential-2: var(--sg-primary-100);
--sg-color-hover-sequential-3: var(--sg-primary-300);
--sg-color-hover-sequential-4: var(--sg-primary-400);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-600);
--sg-color-hover-sequential-7: var(--sg-primary-700);
--sg-color-hover-sequential-8: var(--sg-primary-800);
--sg-color-hover-sequential-9: var(--sg-primary-900);
--sg-color-hover-sequential-10: var(--sg-primary-950);
}
[data-theme="light"] [data-sg-surface="inset"], [data-theme="light"][data-sg-surface="inset"] {
background-color: var(--sg-neutral-200);
--sg-color-text-default: var(--sg-neutral-900);
--sg-color-text-muted: var(--sg-neutral-800);
--sg-color-text-faint: var(--sg-neutral-700);
--sg-color-border-subtle: var(--sg-neutral-400);
--sg-color-border-default: var(--sg-neutral-500);
--sg-color-border-strong: var(--sg-neutral-600);
--sg-color-chart-gridline: var(--sg-neutral-300);
--sg-color-accent: var(--sg-primary-700);
--sg-color-accent-mark: var(--sg-primary-600);
--sg-color-accent-strong: var(--sg-primary-800);
--sg-color-danger-strong: var(--sg-danger-800);
--sg-color-warning-strong: var(--sg-warning-800);
--sg-color-success-strong: var(--sg-success-800);
--sg-color-info-strong: var(--sg-info-800);
--sg-color-on-accent: var(--sg-neutral-50);
--sg-color-on-danger: var(--sg-neutral-50);
--sg-color-on-warning: var(--sg-neutral-50);
--sg-color-on-success: var(--sg-neutral-50);
--sg-color-on-info: var(--sg-neutral-50);
--sg-color-accent-subtle: var(--sg-primary-subtle-300);
--sg-color-on-accent-subtle: var(--sg-primary-800);
--sg-color-danger-subtle: var(--sg-danger-subtle-300);
--sg-color-on-danger-subtle: var(--sg-danger-800);
--sg-color-warning-subtle: var(--sg-warning-subtle-300);
--sg-color-on-warning-subtle: var(--sg-warning-800);
--sg-color-success-subtle: var(--sg-success-subtle-300);
--sg-color-on-success-subtle: var(--sg-success-800);
--sg-color-info-subtle: var(--sg-info-subtle-300);
--sg-color-on-info-subtle: var(--sg-info-800);
--sg-color-border-focus: var(--sg-primary-600);
--sg-color-danger: var(--sg-danger-700);
--sg-color-danger-mark: var(--sg-danger-600);
--sg-color-warning: var(--sg-warning-700);
--sg-color-warning-mark: var(--sg-warning-600);
--sg-color-success: var(--sg-success-700);
--sg-color-success-mark: var(--sg-success-600);
--sg-color-info: var(--sg-info-700);
--sg-color-info-mark: var(--sg-info-600);
--sg-color-chart-1: var(--sg-series-1-900);
--sg-color-chart-2: var(--sg-series-2-600);
--sg-color-chart-3: var(--sg-series-3-950);
--sg-color-chart-4: var(--sg-series-4-700);
--sg-color-chart-5: var(--sg-series-5-800);
--sg-color-sequential-1: var(--sg-primary-50);
--sg-color-sequential-2: var(--sg-primary-100);
--sg-color-sequential-3: var(--sg-primary-300);
--sg-color-sequential-4: var(--sg-primary-400);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-600);
--sg-color-sequential-7: var(--sg-primary-700);
--sg-color-sequential-8: var(--sg-primary-800);
--sg-color-sequential-9: var(--sg-primary-900);
--sg-color-sequential-10: var(--sg-primary-950);
--sg-color-deeper-bg: var(--sg-neutral-300);
--sg-color-hover-text-default: var(--sg-neutral-900);
--sg-color-hover-text-muted: var(--sg-neutral-900);
--sg-color-hover-text-faint: var(--sg-neutral-800);
--sg-color-hover-border-subtle: var(--sg-neutral-500);
--sg-color-hover-border-default: var(--sg-neutral-600);
--sg-color-hover-border-strong: var(--sg-neutral-700);
--sg-color-hover-chart-gridline: var(--sg-neutral-400);
--sg-color-hover-accent: var(--sg-primary-800);
--sg-color-hover-accent-mark: var(--sg-primary-700);
--sg-color-hover-accent-strong: var(--sg-primary-900);
--sg-color-hover-danger-strong: var(--sg-danger-900);
--sg-color-hover-warning-strong: var(--sg-warning-900);
--sg-color-hover-success-strong: var(--sg-success-900);
--sg-color-hover-info-strong: var(--sg-info-900);
--sg-color-hover-on-accent: var(--sg-neutral-50);
--sg-color-hover-on-danger: var(--sg-neutral-50);
--sg-color-hover-on-warning: var(--sg-neutral-50);
--sg-color-hover-on-success: var(--sg-neutral-50);
--sg-color-hover-on-info: var(--sg-neutral-50);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-400);
--sg-color-hover-on-accent-subtle: var(--sg-primary-950);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-400);
--sg-color-hover-on-danger-subtle: var(--sg-danger-950);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-400);
--sg-color-hover-on-warning-subtle: var(--sg-warning-950);
--sg-color-hover-success-subtle: var(--sg-success-subtle-400);
--sg-color-hover-on-success-subtle: var(--sg-success-950);
--sg-color-hover-info-subtle: var(--sg-info-subtle-400);
--sg-color-hover-on-info-subtle: var(--sg-info-950);
--sg-color-hover-border-focus: var(--sg-primary-700);
--sg-color-hover-danger: var(--sg-danger-800);
--sg-color-hover-danger-mark: var(--sg-danger-700);
--sg-color-hover-warning: var(--sg-warning-800);
--sg-color-hover-warning-mark: var(--sg-warning-700);
--sg-color-hover-success: var(--sg-success-800);
--sg-color-hover-success-mark: var(--sg-success-700);
--sg-color-hover-info: var(--sg-info-800);
--sg-color-hover-info-mark: var(--sg-info-700);
--sg-color-hover-sequential-1: var(--sg-primary-50);
--sg-color-hover-sequential-2: var(--sg-primary-100);
--sg-color-hover-sequential-3: var(--sg-primary-200);
--sg-color-hover-sequential-4: var(--sg-primary-400);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-600);
--sg-color-hover-sequential-7: var(--sg-primary-700);
--sg-color-hover-sequential-8: var(--sg-primary-800);
--sg-color-hover-sequential-9: var(--sg-primary-900);
--sg-color-hover-sequential-10: var(--sg-primary-950);
--sg-color-hover-chart-1: var(--sg-color-chart-1);
--sg-color-hover-chart-2: var(--sg-color-chart-2);
--sg-color-hover-chart-3: var(--sg-color-chart-3);
--sg-color-hover-chart-4: var(--sg-color-chart-4);
--sg-color-hover-chart-5: var(--sg-color-chart-5);
}
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="accent"], [data-theme="light"][data-sg-surface="page"] [data-sg-fill="accent"], [data-theme="light"] [data-sg-fill="accent"], [data-theme="light"][data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="accent"]:hover, [data-theme="light"][data-sg-surface="page"] [data-sg-fill="accent"]:hover, [data-theme="light"] [data-sg-fill="accent"]:hover, [data-theme="light"][data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="danger"], [data-theme="light"][data-sg-surface="page"] [data-sg-fill="danger"], [data-theme="light"] [data-sg-fill="danger"], [data-theme="light"][data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="danger"]:hover, [data-theme="light"][data-sg-surface="page"] [data-sg-fill="danger"]:hover, [data-theme="light"] [data-sg-fill="danger"]:hover, [data-theme="light"][data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="warning"], [data-theme="light"][data-sg-surface="page"] [data-sg-fill="warning"], [data-theme="light"] [data-sg-fill="warning"], [data-theme="light"][data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="warning"]:hover, [data-theme="light"][data-sg-surface="page"] [data-sg-fill="warning"]:hover, [data-theme="light"] [data-sg-fill="warning"]:hover, [data-theme="light"][data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="success"], [data-theme="light"][data-sg-surface="page"] [data-sg-fill="success"], [data-theme="light"] [data-sg-fill="success"], [data-theme="light"][data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="success"]:hover, [data-theme="light"][data-sg-surface="page"] [data-sg-fill="success"]:hover, [data-theme="light"] [data-sg-fill="success"]:hover, [data-theme="light"][data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="info"], [data-theme="light"][data-sg-surface="page"] [data-sg-fill="info"], [data-theme="light"] [data-sg-fill="info"], [data-theme="light"][data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="page"] [data-sg-fill="info"]:hover, [data-theme="light"][data-sg-surface="page"] [data-sg-fill="info"]:hover, [data-theme="light"] [data-sg-fill="info"]:hover, [data-theme="light"][data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="accent"], [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="accent"], [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="accent"], [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="accent"]:hover, [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="accent"]:hover, [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="accent"]:hover, [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="danger"], [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="danger"], [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="danger"], [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="danger"]:hover, [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="danger"]:hover, [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="danger"]:hover, [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="warning"], [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="warning"], [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="warning"], [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="warning"]:hover, [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="warning"]:hover, [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="warning"]:hover, [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="success"], [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="success"], [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="success"], [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="success"]:hover, [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="success"]:hover, [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="success"]:hover, [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="info"], [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="info"], [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="info"], [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="surface"] [data-sg-fill="info"]:hover, [data-theme="light"][data-sg-surface="surface"] [data-sg-fill="info"]:hover, [data-theme="light"] [data-sg-surface="overlay"] [data-sg-fill="info"]:hover, [data-theme="light"][data-sg-surface="overlay"] [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="accent"], [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="accent"]:hover, [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="danger"], [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="danger"]:hover, [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="warning"], [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="warning"]:hover, [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="success"], [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="success"]:hover, [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="info"], [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="light"] [data-sg-surface="inset"] [data-sg-fill="info"]:hover, [data-theme="light"][data-sg-surface="inset"] [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-theme="dark"] {
--sg-color-bg-page: var(--sg-neutral-950);
--sg-color-text-default: var(--sg-neutral-100);
--sg-color-text-muted: var(--sg-neutral-300);
--sg-color-text-faint: var(--sg-neutral-400);
--sg-color-border-subtle: var(--sg-neutral-800);
--sg-color-border-default: var(--sg-neutral-700);
--sg-color-border-strong: var(--sg-neutral-600);
--sg-color-chart-gridline: var(--sg-neutral-900);
--sg-color-accent: var(--sg-primary-400);
--sg-color-accent-mark: var(--sg-primary-300);
--sg-color-accent-strong: var(--sg-primary-300);
--sg-color-danger-strong: var(--sg-danger-300);
--sg-color-warning-strong: var(--sg-warning-300);
--sg-color-success-strong: var(--sg-success-300);
--sg-color-info-strong: var(--sg-info-300);
--sg-color-on-accent: var(--sg-neutral-950);
--sg-color-on-danger: var(--sg-neutral-950);
--sg-color-on-warning: var(--sg-neutral-950);
--sg-color-on-success: var(--sg-neutral-950);
--sg-color-on-info: var(--sg-neutral-950);
--sg-color-accent-subtle: var(--sg-primary-subtle-900);
--sg-color-on-accent-subtle: var(--sg-primary-300);
--sg-color-danger-subtle: var(--sg-danger-subtle-900);
--sg-color-on-danger-subtle: var(--sg-danger-300);
--sg-color-warning-subtle: var(--sg-warning-subtle-900);
--sg-color-on-warning-subtle: var(--sg-warning-300);
--sg-color-success-subtle: var(--sg-success-subtle-900);
--sg-color-on-success-subtle: var(--sg-success-300);
--sg-color-info-subtle: var(--sg-info-subtle-900);
--sg-color-on-info-subtle: var(--sg-info-300);
--sg-color-border-focus: var(--sg-primary-300);
--sg-color-danger: var(--sg-danger-400);
--sg-color-danger-mark: var(--sg-danger-300);
--sg-color-warning: var(--sg-warning-400);
--sg-color-warning-mark: var(--sg-warning-300);
--sg-color-success: var(--sg-success-400);
--sg-color-success-mark: var(--sg-success-300);
--sg-color-info: var(--sg-info-400);
--sg-color-info-mark: var(--sg-info-300);
--sg-color-chart-1: var(--sg-series-1-100);
--sg-color-chart-2: var(--sg-series-2-300);
--sg-color-chart-3: var(--sg-series-3-200);
--sg-color-chart-4: var(--sg-series-4-400);
--sg-color-chart-5: var(--sg-series-5-500);
--sg-color-sequential-1: var(--sg-primary-900);
--sg-color-sequential-2: var(--sg-primary-800);
--sg-color-sequential-3: var(--sg-primary-700);
--sg-color-sequential-4: var(--sg-primary-600);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-400);
--sg-color-sequential-7: var(--sg-primary-300);
--sg-color-sequential-8: var(--sg-primary-200);
--sg-color-sequential-9: var(--sg-primary-100);
--sg-color-sequential-10: var(--sg-primary-50);
--sg-elevation-raised: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-800);
--sg-elevation-overlay: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-700);
--sg-elevation-front: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-600);
--sg-color-deeper-bg: var(--sg-neutral-900);
--sg-color-hover-text-default: var(--sg-neutral-100);
--sg-color-hover-text-muted: var(--sg-neutral-200);
--sg-color-hover-text-faint: var(--sg-neutral-300);
--sg-color-hover-border-subtle: var(--sg-neutral-700);
--sg-color-hover-border-default: var(--sg-neutral-600);
--sg-color-hover-border-strong: var(--sg-neutral-500);
--sg-color-hover-chart-gridline: var(--sg-neutral-800);
--sg-color-hover-accent: var(--sg-primary-300);
--sg-color-hover-accent-mark: var(--sg-primary-200);
--sg-color-hover-accent-strong: var(--sg-primary-200);
--sg-color-hover-danger-strong: var(--sg-danger-200);
--sg-color-hover-warning-strong: var(--sg-warning-200);
--sg-color-hover-success-strong: var(--sg-success-200);
--sg-color-hover-info-strong: var(--sg-info-200);
--sg-color-hover-on-accent: var(--sg-neutral-950);
--sg-color-hover-on-danger: var(--sg-neutral-950);
--sg-color-hover-on-warning: var(--sg-neutral-950);
--sg-color-hover-on-success: var(--sg-neutral-950);
--sg-color-hover-on-info: var(--sg-neutral-950);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-800);
--sg-color-hover-on-accent-subtle: var(--sg-primary-300);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-800);
--sg-color-hover-on-danger-subtle: var(--sg-danger-300);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-800);
--sg-color-hover-on-warning-subtle: var(--sg-warning-300);
--sg-color-hover-success-subtle: var(--sg-success-subtle-800);
--sg-color-hover-on-success-subtle: var(--sg-success-300);
--sg-color-hover-info-subtle: var(--sg-info-subtle-800);
--sg-color-hover-on-info-subtle: var(--sg-info-300);
--sg-color-hover-border-focus: var(--sg-primary-200);
--sg-color-hover-danger: var(--sg-danger-300);
--sg-color-hover-danger-mark: var(--sg-danger-200);
--sg-color-hover-warning: var(--sg-warning-300);
--sg-color-hover-warning-mark: var(--sg-warning-200);
--sg-color-hover-success: var(--sg-success-300);
--sg-color-hover-success-mark: var(--sg-success-200);
--sg-color-hover-info: var(--sg-info-300);
--sg-color-hover-info-mark: var(--sg-info-200);
--sg-color-hover-chart-1: var(--sg-series-1-50);
--sg-color-hover-chart-2: var(--sg-series-2-400);
--sg-color-hover-chart-3: var(--sg-series-3-100);
--sg-color-hover-chart-4: var(--sg-series-4-300);
--sg-color-hover-chart-5: var(--sg-series-5-200);
--sg-color-hover-sequential-1: var(--sg-primary-950);
--sg-color-hover-sequential-2: var(--sg-primary-800);
--sg-color-hover-sequential-3: var(--sg-primary-700);
--sg-color-hover-sequential-4: var(--sg-primary-600);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-400);
--sg-color-hover-sequential-7: var(--sg-primary-300);
--sg-color-hover-sequential-8: var(--sg-primary-200);
--sg-color-hover-sequential-9: var(--sg-primary-100);
--sg-color-hover-sequential-10: var(--sg-primary-50);
color-scheme: dark;
}
[data-theme="dark"] [data-sg-surface="page"], [data-theme="dark"][data-sg-surface="page"] {
background-color: var(--sg-neutral-950);
--sg-color-bg-page: var(--sg-neutral-950);
--sg-color-text-default: var(--sg-neutral-100);
--sg-color-text-muted: var(--sg-neutral-300);
--sg-color-text-faint: var(--sg-neutral-400);
--sg-color-border-subtle: var(--sg-neutral-800);
--sg-color-border-default: var(--sg-neutral-700);
--sg-color-border-strong: var(--sg-neutral-600);
--sg-color-chart-gridline: var(--sg-neutral-900);
--sg-color-accent: var(--sg-primary-400);
--sg-color-accent-mark: var(--sg-primary-300);
--sg-color-accent-strong: var(--sg-primary-300);
--sg-color-danger-strong: var(--sg-danger-300);
--sg-color-warning-strong: var(--sg-warning-300);
--sg-color-success-strong: var(--sg-success-300);
--sg-color-info-strong: var(--sg-info-300);
--sg-color-on-accent: var(--sg-neutral-950);
--sg-color-on-danger: var(--sg-neutral-950);
--sg-color-on-warning: var(--sg-neutral-950);
--sg-color-on-success: var(--sg-neutral-950);
--sg-color-on-info: var(--sg-neutral-950);
--sg-color-accent-subtle: var(--sg-primary-subtle-900);
--sg-color-on-accent-subtle: var(--sg-primary-300);
--sg-color-danger-subtle: var(--sg-danger-subtle-900);
--sg-color-on-danger-subtle: var(--sg-danger-300);
--sg-color-warning-subtle: var(--sg-warning-subtle-900);
--sg-color-on-warning-subtle: var(--sg-warning-300);
--sg-color-success-subtle: var(--sg-success-subtle-900);
--sg-color-on-success-subtle: var(--sg-success-300);
--sg-color-info-subtle: var(--sg-info-subtle-900);
--sg-color-on-info-subtle: var(--sg-info-300);
--sg-color-border-focus: var(--sg-primary-300);
--sg-color-danger: var(--sg-danger-400);
--sg-color-danger-mark: var(--sg-danger-300);
--sg-color-warning: var(--sg-warning-400);
--sg-color-warning-mark: var(--sg-warning-300);
--sg-color-success: var(--sg-success-400);
--sg-color-success-mark: var(--sg-success-300);
--sg-color-info: var(--sg-info-400);
--sg-color-info-mark: var(--sg-info-300);
--sg-color-chart-1: var(--sg-series-1-100);
--sg-color-chart-2: var(--sg-series-2-300);
--sg-color-chart-3: var(--sg-series-3-200);
--sg-color-chart-4: var(--sg-series-4-400);
--sg-color-chart-5: var(--sg-series-5-500);
--sg-color-sequential-1: var(--sg-primary-900);
--sg-color-sequential-2: var(--sg-primary-800);
--sg-color-sequential-3: var(--sg-primary-700);
--sg-color-sequential-4: var(--sg-primary-600);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-400);
--sg-color-sequential-7: var(--sg-primary-300);
--sg-color-sequential-8: var(--sg-primary-200);
--sg-color-sequential-9: var(--sg-primary-100);
--sg-color-sequential-10: var(--sg-primary-50);
--sg-elevation-raised: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-800);
--sg-elevation-overlay: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-700);
--sg-elevation-front: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-600);
--sg-color-deeper-bg: var(--sg-neutral-900);
--sg-color-hover-text-default: var(--sg-neutral-100);
--sg-color-hover-text-muted: var(--sg-neutral-200);
--sg-color-hover-text-faint: var(--sg-neutral-300);
--sg-color-hover-border-subtle: var(--sg-neutral-700);
--sg-color-hover-border-default: var(--sg-neutral-600);
--sg-color-hover-border-strong: var(--sg-neutral-500);
--sg-color-hover-chart-gridline: var(--sg-neutral-800);
--sg-color-hover-accent: var(--sg-primary-300);
--sg-color-hover-accent-mark: var(--sg-primary-200);
--sg-color-hover-accent-strong: var(--sg-primary-200);
--sg-color-hover-danger-strong: var(--sg-danger-200);
--sg-color-hover-warning-strong: var(--sg-warning-200);
--sg-color-hover-success-strong: var(--sg-success-200);
--sg-color-hover-info-strong: var(--sg-info-200);
--sg-color-hover-on-accent: var(--sg-neutral-950);
--sg-color-hover-on-danger: var(--sg-neutral-950);
--sg-color-hover-on-warning: var(--sg-neutral-950);
--sg-color-hover-on-success: var(--sg-neutral-950);
--sg-color-hover-on-info: var(--sg-neutral-950);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-800);
--sg-color-hover-on-accent-subtle: var(--sg-primary-300);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-800);
--sg-color-hover-on-danger-subtle: var(--sg-danger-300);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-800);
--sg-color-hover-on-warning-subtle: var(--sg-warning-300);
--sg-color-hover-success-subtle: var(--sg-success-subtle-800);
--sg-color-hover-on-success-subtle: var(--sg-success-300);
--sg-color-hover-info-subtle: var(--sg-info-subtle-800);
--sg-color-hover-on-info-subtle: var(--sg-info-300);
--sg-color-hover-border-focus: var(--sg-primary-200);
--sg-color-hover-danger: var(--sg-danger-300);
--sg-color-hover-danger-mark: var(--sg-danger-200);
--sg-color-hover-warning: var(--sg-warning-300);
--sg-color-hover-warning-mark: var(--sg-warning-200);
--sg-color-hover-success: var(--sg-success-300);
--sg-color-hover-success-mark: var(--sg-success-200);
--sg-color-hover-info: var(--sg-info-300);
--sg-color-hover-info-mark: var(--sg-info-200);
--sg-color-hover-chart-1: var(--sg-series-1-50);
--sg-color-hover-chart-2: var(--sg-series-2-400);
--sg-color-hover-chart-3: var(--sg-series-3-100);
--sg-color-hover-chart-4: var(--sg-series-4-300);
--sg-color-hover-chart-5: var(--sg-series-5-200);
--sg-color-hover-sequential-1: var(--sg-primary-950);
--sg-color-hover-sequential-2: var(--sg-primary-800);
--sg-color-hover-sequential-3: var(--sg-primary-700);
--sg-color-hover-sequential-4: var(--sg-primary-600);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-400);
--sg-color-hover-sequential-7: var(--sg-primary-300);
--sg-color-hover-sequential-8: var(--sg-primary-200);
--sg-color-hover-sequential-9: var(--sg-primary-100);
--sg-color-hover-sequential-10: var(--sg-primary-50);
}
[data-theme="dark"] [data-sg-surface="surface"], [data-theme="dark"][data-sg-surface="surface"], [data-theme="dark"] [data-sg-surface="overlay"], [data-theme="dark"][data-sg-surface="overlay"] {
background-color: var(--sg-neutral-900);
--sg-color-text-default: var(--sg-neutral-100);
--sg-color-text-muted: var(--sg-neutral-200);
--sg-color-text-faint: var(--sg-neutral-300);
--sg-color-border-subtle: var(--sg-neutral-700);
--sg-color-border-default: var(--sg-neutral-600);
--sg-color-border-strong: var(--sg-neutral-500);
--sg-color-chart-gridline: var(--sg-neutral-800);
--sg-color-accent: var(--sg-primary-300);
--sg-color-accent-mark: var(--sg-primary-200);
--sg-color-accent-strong: var(--sg-primary-200);
--sg-color-danger-strong: var(--sg-danger-200);
--sg-color-warning-strong: var(--sg-warning-200);
--sg-color-success-strong: var(--sg-success-200);
--sg-color-info-strong: var(--sg-info-200);
--sg-color-on-accent: var(--sg-neutral-950);
--sg-color-on-danger: var(--sg-neutral-950);
--sg-color-on-warning: var(--sg-neutral-950);
--sg-color-on-success: var(--sg-neutral-950);
--sg-color-on-info: var(--sg-neutral-950);
--sg-color-accent-subtle: var(--sg-primary-subtle-800);
--sg-color-on-accent-subtle: var(--sg-primary-300);
--sg-color-danger-subtle: var(--sg-danger-subtle-800);
--sg-color-on-danger-subtle: var(--sg-danger-300);
--sg-color-warning-subtle: var(--sg-warning-subtle-800);
--sg-color-on-warning-subtle: var(--sg-warning-300);
--sg-color-success-subtle: var(--sg-success-subtle-800);
--sg-color-on-success-subtle: var(--sg-success-300);
--sg-color-info-subtle: var(--sg-info-subtle-800);
--sg-color-on-info-subtle: var(--sg-info-300);
--sg-color-border-focus: var(--sg-primary-200);
--sg-color-danger: var(--sg-danger-300);
--sg-color-danger-mark: var(--sg-danger-200);
--sg-color-warning: var(--sg-warning-300);
--sg-color-warning-mark: var(--sg-warning-200);
--sg-color-success: var(--sg-success-300);
--sg-color-success-mark: var(--sg-success-200);
--sg-color-info: var(--sg-info-300);
--sg-color-info-mark: var(--sg-info-200);
--sg-color-chart-1: var(--sg-series-1-50);
--sg-color-chart-2: var(--sg-series-2-400);
--sg-color-chart-3: var(--sg-series-3-100);
--sg-color-chart-4: var(--sg-series-4-300);
--sg-color-chart-5: var(--sg-series-5-200);
--sg-color-sequential-1: var(--sg-primary-950);
--sg-color-sequential-2: var(--sg-primary-800);
--sg-color-sequential-3: var(--sg-primary-700);
--sg-color-sequential-4: var(--sg-primary-600);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-400);
--sg-color-sequential-7: var(--sg-primary-300);
--sg-color-sequential-8: var(--sg-primary-200);
--sg-color-sequential-9: var(--sg-primary-100);
--sg-color-sequential-10: var(--sg-primary-50);
--sg-elevation-raised: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-700);
--sg-elevation-overlay: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-600);
--sg-elevation-front: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-500);
--sg-color-deeper-bg: var(--sg-neutral-800);
--sg-color-hover-text-default: var(--sg-neutral-100);
--sg-color-hover-text-muted: var(--sg-neutral-200);
--sg-color-hover-text-faint: var(--sg-neutral-300);
--sg-color-hover-border-subtle: var(--sg-neutral-600);
--sg-color-hover-border-default: var(--sg-neutral-500);
--sg-color-hover-border-strong: var(--sg-neutral-400);
--sg-color-hover-chart-gridline: var(--sg-neutral-700);
--sg-color-hover-accent: var(--sg-primary-300);
--sg-color-hover-accent-mark: var(--sg-primary-200);
--sg-color-hover-accent-strong: var(--sg-primary-200);
--sg-color-hover-danger-strong: var(--sg-danger-200);
--sg-color-hover-warning-strong: var(--sg-warning-200);
--sg-color-hover-success-strong: var(--sg-success-200);
--sg-color-hover-info-strong: var(--sg-info-200);
--sg-color-hover-on-accent: var(--sg-neutral-950);
--sg-color-hover-on-danger: var(--sg-neutral-950);
--sg-color-hover-on-warning: var(--sg-neutral-950);
--sg-color-hover-on-success: var(--sg-neutral-950);
--sg-color-hover-on-info: var(--sg-neutral-950);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-700);
--sg-color-hover-on-accent-subtle: var(--sg-primary-200);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-700);
--sg-color-hover-on-danger-subtle: var(--sg-danger-200);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-700);
--sg-color-hover-on-warning-subtle: var(--sg-warning-200);
--sg-color-hover-success-subtle: var(--sg-success-subtle-700);
--sg-color-hover-on-success-subtle: var(--sg-success-200);
--sg-color-hover-info-subtle: var(--sg-info-subtle-700);
--sg-color-hover-on-info-subtle: var(--sg-info-200);
--sg-color-hover-border-focus: var(--sg-primary-200);
--sg-color-hover-danger: var(--sg-danger-300);
--sg-color-hover-danger-mark: var(--sg-danger-200);
--sg-color-hover-warning: var(--sg-warning-300);
--sg-color-hover-warning-mark: var(--sg-warning-200);
--sg-color-hover-success: var(--sg-success-300);
--sg-color-hover-success-mark: var(--sg-success-200);
--sg-color-hover-info: var(--sg-info-300);
--sg-color-hover-info-mark: var(--sg-info-200);
--sg-color-hover-sequential-1: var(--sg-primary-950);
--sg-color-hover-sequential-2: var(--sg-primary-900);
--sg-color-hover-sequential-3: var(--sg-primary-700);
--sg-color-hover-sequential-4: var(--sg-primary-600);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-400);
--sg-color-hover-sequential-7: var(--sg-primary-300);
--sg-color-hover-sequential-8: var(--sg-primary-200);
--sg-color-hover-sequential-9: var(--sg-primary-100);
--sg-color-hover-sequential-10: var(--sg-primary-50);
--sg-color-hover-chart-1: var(--sg-color-chart-1);
--sg-color-hover-chart-2: var(--sg-color-chart-2);
--sg-color-hover-chart-3: var(--sg-color-chart-3);
--sg-color-hover-chart-4: var(--sg-color-chart-4);
--sg-color-hover-chart-5: var(--sg-color-chart-5);
}
[data-theme="dark"] [data-sg-surface="inset"], [data-theme="dark"][data-sg-surface="inset"] {
background-color: var(--sg-neutral-800);
--sg-color-text-default: var(--sg-neutral-100);
--sg-color-text-muted: var(--sg-neutral-200);
--sg-color-text-faint: var(--sg-neutral-300);
--sg-color-border-subtle: var(--sg-neutral-600);
--sg-color-border-default: var(--sg-neutral-500);
--sg-color-border-strong: var(--sg-neutral-400);
--sg-color-chart-gridline: var(--sg-neutral-700);
--sg-color-accent: var(--sg-primary-300);
--sg-color-accent-mark: var(--sg-primary-200);
--sg-color-accent-strong: var(--sg-primary-200);
--sg-color-danger-strong: var(--sg-danger-200);
--sg-color-warning-strong: var(--sg-warning-200);
--sg-color-success-strong: var(--sg-success-200);
--sg-color-info-strong: var(--sg-info-200);
--sg-color-on-accent: var(--sg-neutral-950);
--sg-color-on-danger: var(--sg-neutral-950);
--sg-color-on-warning: var(--sg-neutral-950);
--sg-color-on-success: var(--sg-neutral-950);
--sg-color-on-info: var(--sg-neutral-950);
--sg-color-accent-subtle: var(--sg-primary-subtle-700);
--sg-color-on-accent-subtle: var(--sg-primary-200);
--sg-color-danger-subtle: var(--sg-danger-subtle-700);
--sg-color-on-danger-subtle: var(--sg-danger-200);
--sg-color-warning-subtle: var(--sg-warning-subtle-700);
--sg-color-on-warning-subtle: var(--sg-warning-200);
--sg-color-success-subtle: var(--sg-success-subtle-700);
--sg-color-on-success-subtle: var(--sg-success-200);
--sg-color-info-subtle: var(--sg-info-subtle-700);
--sg-color-on-info-subtle: var(--sg-info-200);
--sg-color-border-focus: var(--sg-primary-200);
--sg-color-danger: var(--sg-danger-300);
--sg-color-danger-mark: var(--sg-danger-200);
--sg-color-warning: var(--sg-warning-300);
--sg-color-warning-mark: var(--sg-warning-200);
--sg-color-success: var(--sg-success-300);
--sg-color-success-mark: var(--sg-success-200);
--sg-color-info: var(--sg-info-300);
--sg-color-info-mark: var(--sg-info-200);
--sg-color-sequential-1: var(--sg-primary-950);
--sg-color-sequential-2: var(--sg-primary-900);
--sg-color-sequential-3: var(--sg-primary-700);
--sg-color-sequential-4: var(--sg-primary-600);
--sg-color-sequential-5: var(--sg-primary-500);
--sg-color-sequential-6: var(--sg-primary-400);
--sg-color-sequential-7: var(--sg-primary-300);
--sg-color-sequential-8: var(--sg-primary-200);
--sg-color-sequential-9: var(--sg-primary-100);
--sg-color-sequential-10: var(--sg-primary-50);
--sg-elevation-raised: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-600);
--sg-elevation-overlay: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-500);
--sg-elevation-front: 0 0 0 var(--sg-border-width-0) var(--sg-neutral-400);
--sg-color-deeper-bg: var(--sg-neutral-700);
--sg-color-hover-text-default: var(--sg-neutral-100);
--sg-color-hover-text-muted: var(--sg-neutral-100);
--sg-color-hover-text-faint: var(--sg-neutral-200);
--sg-color-hover-border-subtle: var(--sg-neutral-500);
--sg-color-hover-border-default: var(--sg-neutral-400);
--sg-color-hover-border-strong: var(--sg-neutral-300);
--sg-color-hover-chart-gridline: var(--sg-neutral-600);
--sg-color-hover-accent: var(--sg-primary-200);
--sg-color-hover-accent-mark: var(--sg-primary-100);
--sg-color-hover-accent-strong: var(--sg-primary-100);
--sg-color-hover-danger-strong: var(--sg-danger-100);
--sg-color-hover-warning-strong: var(--sg-warning-100);
--sg-color-hover-success-strong: var(--sg-success-100);
--sg-color-hover-info-strong: var(--sg-info-100);
--sg-color-hover-on-accent: var(--sg-neutral-950);
--sg-color-hover-on-danger: var(--sg-neutral-950);
--sg-color-hover-on-warning: var(--sg-neutral-950);
--sg-color-hover-on-success: var(--sg-neutral-950);
--sg-color-hover-on-info: var(--sg-neutral-950);
--sg-color-hover-accent-subtle: var(--sg-primary-subtle-600);
--sg-color-hover-on-accent-subtle: var(--sg-primary-100);
--sg-color-hover-danger-subtle: var(--sg-danger-subtle-600);
--sg-color-hover-on-danger-subtle: var(--sg-danger-100);
--sg-color-hover-warning-subtle: var(--sg-warning-subtle-600);
--sg-color-hover-on-warning-subtle: var(--sg-warning-100);
--sg-color-hover-success-subtle: var(--sg-success-subtle-600);
--sg-color-hover-on-success-subtle: var(--sg-success-100);
--sg-color-hover-info-subtle: var(--sg-info-subtle-600);
--sg-color-hover-on-info-subtle: var(--sg-info-100);
--sg-color-hover-border-focus: var(--sg-primary-100);
--sg-color-hover-danger: var(--sg-danger-200);
--sg-color-hover-danger-mark: var(--sg-danger-100);
--sg-color-hover-warning: var(--sg-warning-200);
--sg-color-hover-warning-mark: var(--sg-warning-100);
--sg-color-hover-success: var(--sg-success-200);
--sg-color-hover-success-mark: var(--sg-success-100);
--sg-color-hover-info: var(--sg-info-200);
--sg-color-hover-info-mark: var(--sg-info-100);
--sg-color-hover-sequential-1: var(--sg-primary-950);
--sg-color-hover-sequential-2: var(--sg-primary-900);
--sg-color-hover-sequential-3: var(--sg-primary-800);
--sg-color-hover-sequential-4: var(--sg-primary-600);
--sg-color-hover-sequential-5: var(--sg-primary-500);
--sg-color-hover-sequential-6: var(--sg-primary-400);
--sg-color-hover-sequential-7: var(--sg-primary-300);
--sg-color-hover-sequential-8: var(--sg-primary-200);
--sg-color-hover-sequential-9: var(--sg-primary-100);
--sg-color-hover-sequential-10: var(--sg-primary-50);
--sg-color-hover-chart-1: var(--sg-color-chart-1);
--sg-color-hover-chart-2: var(--sg-color-chart-2);
--sg-color-hover-chart-3: var(--sg-color-chart-3);
--sg-color-hover-chart-4: var(--sg-color-chart-4);
--sg-color-hover-chart-5: var(--sg-color-chart-5);
}
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="accent"], [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="accent"], [data-theme="dark"] [data-sg-fill="accent"], [data-theme="dark"][data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="accent"]:hover, [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="accent"]:hover, [data-theme="dark"] [data-sg-fill="accent"]:hover, [data-theme="dark"][data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="danger"], [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="danger"], [data-theme="dark"] [data-sg-fill="danger"], [data-theme="dark"][data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="danger"]:hover, [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="danger"]:hover, [data-theme="dark"] [data-sg-fill="danger"]:hover, [data-theme="dark"][data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="warning"], [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="warning"], [data-theme="dark"] [data-sg-fill="warning"], [data-theme="dark"][data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="warning"]:hover, [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="warning"]:hover, [data-theme="dark"] [data-sg-fill="warning"]:hover, [data-theme="dark"][data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="success"], [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="success"], [data-theme="dark"] [data-sg-fill="success"], [data-theme="dark"][data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="success"]:hover, [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="success"]:hover, [data-theme="dark"] [data-sg-fill="success"]:hover, [data-theme="dark"][data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="info"], [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="info"], [data-theme="dark"] [data-sg-fill="info"], [data-theme="dark"][data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-500);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="page"] [data-sg-fill="info"]:hover, [data-theme="dark"][data-sg-surface="page"] [data-sg-fill="info"]:hover, [data-theme="dark"] [data-sg-fill="info"]:hover, [data-theme="dark"][data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="accent"], [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="accent"], [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="accent"], [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="accent"]:hover, [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="accent"]:hover, [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="accent"]:hover, [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="danger"], [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="danger"], [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="danger"], [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="danger"]:hover, [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="danger"]:hover, [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="danger"]:hover, [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="warning"], [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="warning"], [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="warning"], [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="warning"]:hover, [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="warning"]:hover, [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="warning"]:hover, [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="success"], [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="success"], [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="success"], [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="success"]:hover, [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="success"]:hover, [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="success"]:hover, [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="info"], [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="info"], [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="info"], [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-400);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="surface"] [data-sg-fill="info"]:hover, [data-theme="dark"][data-sg-surface="surface"] [data-sg-fill="info"]:hover, [data-theme="dark"] [data-sg-surface="overlay"] [data-sg-fill="info"]:hover, [data-theme="dark"][data-sg-surface="overlay"] [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="accent"], [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="accent"] {
background-color: var(--sg-primary-500);
border-color: var(--sg-primary-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="accent"]:hover, [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="accent"]:hover {
background-color: var(--sg-primary-600);
}
}
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="danger"], [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="danger"] {
background-color: var(--sg-danger-500);
border-color: var(--sg-danger-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="danger"]:hover, [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="danger"]:hover {
background-color: var(--sg-danger-600);
}
}
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="warning"], [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="warning"] {
background-color: var(--sg-warning-500);
border-color: var(--sg-warning-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="warning"]:hover, [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="warning"]:hover {
background-color: var(--sg-warning-600);
}
}
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="success"], [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="success"] {
background-color: var(--sg-success-500);
border-color: var(--sg-success-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="success"]:hover, [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="success"]:hover {
background-color: var(--sg-success-600);
}
}
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="info"], [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="info"] {
background-color: var(--sg-info-500);
border-color: var(--sg-info-300);
color: var(--sg-neutral-50);
}
@media (hover: hover) {
[data-theme="dark"] [data-sg-surface="inset"] [data-sg-fill="info"]:hover, [data-theme="dark"][data-sg-surface="inset"] [data-sg-fill="info"]:hover {
background-color: var(--sg-info-600);
}
}
/* hover の文脈。**規則は1本だけ**で、値は面が控えた --sg-color-hover-* から
継承で届く。セレクタで面ごとに書き分けると、overlay が梯子の途中に戻る面である
ために「入れ子の深さ」と「出力の順序」が一致せず、どちらかの入れ子が必ず外れる。
data-sg-interactive を付けた要素だけが対象。付けなければ何も起きないので、
背景だけ塗って前景を置き去りにする道は存在しない。面と同じ理由である。
触る画面では hover が張り付いて残るため (hover: hover) で囲う。
面のブロックより後に出すことで、背景色の指定が順序で勝つ。 */
/* 骨組み表示の動き。**素の CSS の利用者にも届くようにここへ出す。**
Tailwind 側に出口は無い。--animate-* は意図的に写像していない。
ユーティリティも用意すると、素の CSS の経路だけが prefers-reduced-motion を
尊重する形になるためである。data-sg-skeleton は Tailwind の利用者にも使える。
**地の色を1段深い面との間で動かす。**
以前は透明度を 1 → 0.4 で動かしていたが、0.4 に根拠が無かった。
0% と 100% を書かないので、要素の現在の地の色がそのまま両端になる。
**付ける先は面を名乗っている要素である。** 地の色を動かすので、
data-sg-surface を持たない要素に付けると動かす地が無く、transparent から
補間される。**エラーにはならない。**骨組みそのものに付けること:
<div data-sg-surface="inset" data-sg-skeleton></div>
**動きを減らす設定を尊重するのは利用側の責務ではない。** ここで止める。
prefers-reduced-motion は「見せない」ではなく「動かさない」なので、
アニメーションだけを止め、要素は残す */
@keyframes skeleton {
50% { background-color: var(--sg-color-deeper-bg); }
}
[data-sg-skeleton] {
animation: skeleton var(--sg-duration-loop-1) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
[data-sg-skeleton] {
animation: none;
}
}
/* 回り続ける表示。**骨組み表示と同じ形で、素の CSS の利用者にも届く。**
Tailwind 側に出口は無い。--animate-* は意図的に写像していない。
**周期はループスケールの一番速い段から引く。** 待たされていることが
読み取れる速さが要るためで、遅くすると止まって見える。
加減速は付けない——回り続けるものに始点と終点は無い。
**回すのは transform だけである。** 大きさも色も持たない——
どちらも利用側が決める。付ける先は円でも弧でも構わない:
<span data-sg-spinner></span>
**動きを減らす設定では止める。** 骨組み表示と同じ判断である。
止まると見た目からは進行が読み取れなくなるので、
**動きだけで状態を伝えないこと。** aria-busy か文字を併せて出す */
@keyframes sg-spin {
to { transform: rotate(1turn); }
}
[data-sg-spinner] {
animation: sg-spin var(--sg-duration-loop-0) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
[data-sg-spinner] {
animation: none;
}
}
/* 出入りの動き。**宣言したものが、現れるときと消えるときに動く。**
<li data-sg-appear>…</li>
<li data-sg-appear data-sg-leaving>…</li> ← 消えかけ
**消えかけは、外す前の状態である。** 動きが終わってから外す。
長さは CSS にしかない——待つ側は `Animation` の終わりを見るので、
**同じ長さを JS 側に写さなくてよい。**
消えるときに高さを 0 にするのは、**後ろに並んでいるものが跳ねないため**である。
**動きを減らす設定では止める。** 出入りは飾りであって、情報ではない。
ただし**消えかけは残す**——止めた結果いつまでも消えないのでは困るので、
長さを詰めて即座に終わらせる。 */
@keyframes sg-appear {
from { opacity: 0; translate: 0 var(--sg-space-3); }
}
@keyframes sg-disappear {
to {
opacity: 0;
translate: 0 var(--sg-space-3);
block-size: 0;
padding-block: 0;
}
}
[data-sg-appear] {
animation: sg-appear var(--sg-duration-2) ease-out;
}
[data-sg-appear][data-sg-leaving] {
animation: sg-disappear var(--sg-duration-2) ease-in forwards;
}
@media (prefers-reduced-motion: reduce) {
[data-sg-appear] {
animation-name: none;
}
[data-sg-appear][data-sg-leaving] {
animation-name: sg-disappear;
animation-duration: 1ms;
}
}
/* 残り時間のゲージ。**宣言した要素が、満ちた状態から空へまっすぐ減る。**
長さは差し込み口から取る。**書かなければ通知の滞在時間**になる:
<span data-sg-gauge></span>
<span data-sg-gauge style="--sg-gauge-duration: 8000ms"></span>
**止めるのは属性である。** ポインタが乗っているあいだ数えない、を表す:
<span data-sg-gauge data-sg-gauge-paused></span>
加減速は付けない。**時間そのものを表しているので、速さが変わると嘘になる。**
**動きを減らす設定でも止めない。** これは飾りではなく、
あと何秒で消えるかという情報である。止めると読み取れなくなる。 */
@keyframes sg-gauge {
to { transform: scaleX(0); }
}
[data-sg-gauge] {
transform-origin: left center;
animation: sg-gauge var(--sg-gauge-duration, var(--sg-duration-notice)) linear forwards;
}
[data-sg-gauge-paused] {
animation-play-state: paused;
}
@media (hover: hover) {
[data-sg-interactive]:hover {
background-color: var(--sg-color-deeper-bg);
--sg-color-text-default: var(--sg-color-hover-text-default);
--sg-color-text-muted: var(--sg-color-hover-text-muted);
--sg-color-text-faint: var(--sg-color-hover-text-faint);
--sg-color-border-subtle: var(--sg-color-hover-border-subtle);
--sg-color-border-default: var(--sg-color-hover-border-default);
--sg-color-border-strong: var(--sg-color-hover-border-strong);
--sg-color-chart-gridline: var(--sg-color-hover-chart-gridline);
--sg-color-accent: var(--sg-color-hover-accent);
--sg-color-accent-mark: var(--sg-color-hover-accent-mark);
--sg-color-accent-strong: var(--sg-color-hover-accent-strong);
--sg-color-danger-strong: var(--sg-color-hover-danger-strong);
--sg-color-warning-strong: var(--sg-color-hover-warning-strong);
--sg-color-success-strong: var(--sg-color-hover-success-strong);
--sg-color-info-strong: var(--sg-color-hover-info-strong);
--sg-color-on-accent: var(--sg-color-hover-on-accent);
--sg-color-on-danger: var(--sg-color-hover-on-danger);
--sg-color-on-warning: var(--sg-color-hover-on-warning);
--sg-color-on-success: var(--sg-color-hover-on-success);
--sg-color-on-info: var(--sg-color-hover-on-info);
--sg-color-accent-subtle: var(--sg-color-hover-accent-subtle);
--sg-color-on-accent-subtle: var(--sg-color-hover-on-accent-subtle);
--sg-color-danger-subtle: var(--sg-color-hover-danger-subtle);
--sg-color-on-danger-subtle: var(--sg-color-hover-on-danger-subtle);
--sg-color-warning-subtle: var(--sg-color-hover-warning-subtle);
--sg-color-on-warning-subtle: var(--sg-color-hover-on-warning-subtle);
--sg-color-success-subtle: var(--sg-color-hover-success-subtle);
--sg-color-on-success-subtle: var(--sg-color-hover-on-success-subtle);
--sg-color-info-subtle: var(--sg-color-hover-info-subtle);
--sg-color-on-info-subtle: var(--sg-color-hover-on-info-subtle);
--sg-color-border-focus: var(--sg-color-hover-border-focus);
--sg-color-danger: var(--sg-color-hover-danger);
--sg-color-danger-mark: var(--sg-color-hover-danger-mark);
--sg-color-warning: var(--sg-color-hover-warning);
--sg-color-warning-mark: var(--sg-color-hover-warning-mark);
--sg-color-success: var(--sg-color-hover-success);
--sg-color-success-mark: var(--sg-color-hover-success-mark);
--sg-color-info: var(--sg-color-hover-info);
--sg-color-info-mark: var(--sg-color-hover-info-mark);
--sg-color-chart-1: var(--sg-color-hover-chart-1);
--sg-color-chart-2: var(--sg-color-hover-chart-2);
--sg-color-chart-3: var(--sg-color-hover-chart-3);
--sg-color-chart-4: var(--sg-color-hover-chart-4);
--sg-color-chart-5: var(--sg-color-hover-chart-5);
--sg-color-sequential-1: var(--sg-color-hover-sequential-1);
--sg-color-sequential-2: var(--sg-color-hover-sequential-2);
--sg-color-sequential-3: var(--sg-color-hover-sequential-3);
--sg-color-sequential-4: var(--sg-color-hover-sequential-4);
--sg-color-sequential-5: var(--sg-color-hover-sequential-5);
--sg-color-sequential-6: var(--sg-color-hover-sequential-6);
--sg-color-sequential-7: var(--sg-color-hover-sequential-7);
--sg-color-sequential-8: var(--sg-color-hover-sequential-8);
--sg-color-sequential-9: var(--sg-color-hover-sequential-9);
--sg-color-sequential-10: var(--sg-color-hover-sequential-10);
}
}