src/app/styles/themes/light.css - dev - 45case/ptable

src/app/styles/themes/light.css

55 строк2 KB

Olya

feat: интерактивная подсветка элементов по сериям и агрегатным состояниям

15 июл 2026, 18:34

15 июл 2026, 18:34681598d

:root,
html[data-theme="light"] {
  --ui-page-top-glow: rgba(96, 128, 160, 0.04);
  --ui-page-bg-start: #f4f7fa;
  --ui-page-bg-end: #ebf0f5;
  --ui-ink-strong: #15202b;
  --ui-ink-muted: #5d6c7b;
  --ui-panel: #fcfdfe;
  --ui-panel-elevated: rgba(252, 253, 254, 0.97);
  --ui-panel-muted: #e8edf3;
  --ui-line: #c6d0db;
  --ui-line-strong: #a2b1bf;
  --ui-shadow: rgba(15, 24, 34, 0.09);
  --ui-brand: #3f6585;
  --ui-hover-surface: #eff4f9;
  --ui-active-surface: #e5ebf3;
  --ui-selected-surface: #dce5ee;
  --ui-selected-border: #61809d;
  --ui-focus-ring: #7090ab;
  --ui-element-surface-mix: 20%;
  --ui-element-border-mix: 35%;
  --ui-element-border-strong-mix: 52%;
  --ui-tone-alkali: oklch(0.66 0.044 48);
  --ui-tone-alkaline-earth: oklch(0.69 0.05 82);
  --ui-tone-transition: oklch(0.66 0.044 356);
  --ui-tone-post-transition: oklch(0.67 0.034 244);
  --ui-tone-metalloid: oklch(0.67 0.041 190);
  --ui-tone-nonmetal: oklch(0.69 0.043 138);
  --ui-tone-halogen: oklch(0.7 0.046 158);
  --ui-tone-noble-gas: oklch(0.69 0.043 302);
  --ui-tone-lanthanide: oklch(0.71 0.05 74);
  --ui-tone-actinide: oklch(0.69 0.042 332);
  --ui-tone-unknown: oklch(0.66 0.018 252);
  --ui-tone-phase-solid: #ffffff;
  --ui-tone-phase-liquid: oklch(0.6 0.18 266);
  --ui-tone-phase-gas: oklch(0.63 0.21 24);
  --ui-tone-phase-unknown: oklch(0.54 0.04 285);
  --app-background:
    radial-gradient(circle at 18% -12%, var(--ui-page-top-glow), transparent 32%),
    linear-gradient(180deg, var(--ui-page-bg-start) 0%, var(--ui-page-bg-end) 100%);
  --color-text-primary: var(--ui-ink-strong);
  --color-text-secondary: var(--ui-ink-muted);
  --color-surface: var(--ui-panel);
  --color-surface-elevated: var(--ui-panel-elevated);
  --color-surface-muted: var(--ui-panel-muted);
  --color-border: var(--ui-line);
  --color-border-strong: var(--ui-line-strong);
  --color-shadow: var(--ui-shadow);
  --color-accent: var(--ui-brand);
  --color-hover-surface: var(--ui-hover-surface);
  --color-active-surface: var(--ui-active-surface);
  --color-selected-surface: var(--ui-selected-surface);
  --color-selected-border: var(--ui-selected-border);
  --color-focus-ring: var(--ui-focus-ring);
}