src/entities/element/lib/presentation.ts - dev - 45case/ptable

src/entities/element/lib/presentation.ts
65 строк2 KB
Olya
first_commit
06 июл 2026, 18:16
06 июл 2026, 18:160ff6e29
import type { ElementPhaseAtStp, ElementSeries, PeriodicElement } from "../model/elements";

type ElementToneKey =
  | "actinide"
  | "alkali"
  | "alkaline-earth"
  | "halogen"
  | "lanthanide"
  | "metalloid"
  | "noble-gas"
  | "nonmetal"
  | "post-transition"
  | "transition"
  | "unknown";

const elementSeriesToneMap: Record<ElementSeries, ElementToneKey> = {
  actinide: "actinide",
  "alkali-metal": "alkali",
  "alkaline-earth-metal": "alkaline-earth",
  lanthanide: "lanthanide",
  metalloid: "metalloid",
  "noble-gas": "noble-gas",
  nonmetal: "nonmetal",
  "post-transition-metal": "post-transition",
  "transition-metal": "transition",
  unknown: "unknown",
};

const elementPhaseToneMap: Record<ElementPhaseAtStp, string> = {
  gas: "var(--table-state-gas)",
  liquid: "var(--table-state-liquid)",
  solid: "var(--table-state-solid)",
  unknown: "var(--table-state-unknown)",
};

function resolveElementTone(
  elementOrSeries: Pick<PeriodicElement, "group" | "series"> | ElementSeries,
): ElementToneKey {
  if (typeof elementOrSeries === "string") {
    return elementSeriesToneMap[elementOrSeries];
  }

  if (elementOrSeries.series === "nonmetal" && elementOrSeries.group === 17) {
    return "halogen";
  }

  return elementSeriesToneMap[elementOrSeries.series];
}

export function getElementToneStyle(
  elementOrSeries: Pick<PeriodicElement, "group" | "series"> | ElementSeries,
) {
  const tone = resolveElementTone(elementOrSeries);

  return {
    "--element-tone-accent": `var(--element-tone-${tone}-accent)`,
    "--element-tone-border": `var(--element-tone-${tone}-border)`,
    "--element-tone-border-strong": `var(--element-tone-${tone}-border-strong)`,
    "--element-tone-surface": `var(--element-tone-${tone}-surface)`,
  } as Record<string, string>;
}

export function getElementPhaseTone(phase: ElementPhaseAtStp) {
  return elementPhaseToneMap[phase];
}