src/app/styles/element-palette.css - dev - 45case/ptable

src/app/styles/element-palette.css
179 строк6 KB
Olya
first_commit
06 июл 2026, 18:16
06 июл 2026, 18:160ff6e29
:root {
  /* Element palettes are derived from shared OKLCH seed hues so light and dark stay aligned. */
  --element-tone-actinide-accent: var(--ui-tone-actinide);
  --element-tone-actinide-border: color-mix(
    in oklab,
    var(--ui-tone-actinide) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-actinide-border-strong: color-mix(
    in oklab,
    var(--ui-tone-actinide) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-actinide-surface: color-mix(
    in oklab,
    var(--ui-tone-actinide) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-alkali-accent: var(--ui-tone-alkali);
  --element-tone-alkali-border: color-mix(
    in oklab,
    var(--ui-tone-alkali) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-alkali-border-strong: color-mix(
    in oklab,
    var(--ui-tone-alkali) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-alkali-surface: color-mix(
    in oklab,
    var(--ui-tone-alkali) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-alkaline-earth-accent: var(--ui-tone-alkaline-earth);
  --element-tone-alkaline-earth-border: color-mix(
    in oklab,
    var(--ui-tone-alkaline-earth) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-alkaline-earth-border-strong: color-mix(
    in oklab,
    var(--ui-tone-alkaline-earth) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-alkaline-earth-surface: color-mix(
    in oklab,
    var(--ui-tone-alkaline-earth) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-transition-accent: var(--ui-tone-transition);
  --element-tone-transition-border: color-mix(
    in oklab,
    var(--ui-tone-transition) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-transition-border-strong: color-mix(
    in oklab,
    var(--ui-tone-transition) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-transition-surface: color-mix(
    in oklab,
    var(--ui-tone-transition) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-post-transition-accent: var(--ui-tone-post-transition);
  --element-tone-post-transition-border: color-mix(
    in oklab,
    var(--ui-tone-post-transition) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-post-transition-border-strong: color-mix(
    in oklab,
    var(--ui-tone-post-transition) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-post-transition-surface: color-mix(
    in oklab,
    var(--ui-tone-post-transition) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-metalloid-accent: var(--ui-tone-metalloid);
  --element-tone-metalloid-border: color-mix(
    in oklab,
    var(--ui-tone-metalloid) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-metalloid-border-strong: color-mix(
    in oklab,
    var(--ui-tone-metalloid) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-metalloid-surface: color-mix(
    in oklab,
    var(--ui-tone-metalloid) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-nonmetal-accent: var(--ui-tone-nonmetal);
  --element-tone-nonmetal-border: color-mix(
    in oklab,
    var(--ui-tone-nonmetal) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-nonmetal-border-strong: color-mix(
    in oklab,
    var(--ui-tone-nonmetal) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-nonmetal-surface: color-mix(
    in oklab,
    var(--ui-tone-nonmetal) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-halogen-accent: var(--ui-tone-halogen);
  --element-tone-halogen-border: color-mix(
    in oklab,
    var(--ui-tone-halogen) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-halogen-border-strong: color-mix(
    in oklab,
    var(--ui-tone-halogen) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-halogen-surface: color-mix(
    in oklab,
    var(--ui-tone-halogen) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-noble-gas-accent: var(--ui-tone-noble-gas);
  --element-tone-noble-gas-border: color-mix(
    in oklab,
    var(--ui-tone-noble-gas) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-noble-gas-border-strong: color-mix(
    in oklab,
    var(--ui-tone-noble-gas) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-noble-gas-surface: color-mix(
    in oklab,
    var(--ui-tone-noble-gas) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-lanthanide-accent: var(--ui-tone-lanthanide);
  --element-tone-lanthanide-border: color-mix(
    in oklab,
    var(--ui-tone-lanthanide) var(--ui-element-border-mix),
    var(--color-border)
  );
  --element-tone-lanthanide-border-strong: color-mix(
    in oklab,
    var(--ui-tone-lanthanide) var(--ui-element-border-strong-mix),
    var(--color-border-strong)
  );
  --element-tone-lanthanide-surface: color-mix(
    in oklab,
    var(--ui-tone-lanthanide) var(--ui-element-surface-mix),
    var(--color-surface)
  );
  --element-tone-unknown-accent: var(--ui-tone-unknown);
  --element-tone-unknown-border: color-mix(
    in oklab,
    var(--ui-tone-unknown) calc(var(--ui-element-border-mix) - 2%),
    var(--color-border)
  );
  --element-tone-unknown-border-strong: color-mix(
    in oklab,
    var(--ui-tone-unknown) calc(var(--ui-element-border-strong-mix) - 2%),
    var(--color-border-strong)
  );
  --element-tone-unknown-surface: color-mix(
    in oklab,
    var(--ui-tone-unknown) calc(var(--ui-element-surface-mix) - 1%),
    var(--color-surface)
  );
}