marketplaces/src/app/theme/mappers/theme-css-vars.mapper.ts

import { ThemeConfig } from '../../shared/models/config';
import { ThemeCssVariables } from '../tokens/theme-css-variable.model';
import { THEME_VARIABLE_MAP } from '../tokens/theme-variable-map';

export function mapThemeConfigToCssVariables(theme: ThemeConfig): ThemeCssVariables {
  const spacingScale = Array.isArray(theme.spacing.scale) && theme.spacing.scale.length > 0
    ? theme.spacing.scale
    : [0.25, 0.5, 1, 1.5, 2];

  const spacingValues = spacingScale
    .slice(0, 5)
    .map(multiplier => `${Math.max(0, Number(multiplier) || 0) * theme.spacing.unit}px`);

  while (spacingValues.length < 5) {
    spacingValues.push(`${theme.spacing.unit}px`);
  }

  const vars: ThemeCssVariables = {
    [THEME_VARIABLE_MAP.primary]: theme.palette.primary,
    [THEME_VARIABLE_MAP.secondary]: theme.palette.secondary,
    [THEME_VARIABLE_MAP.accent]: theme.palette.accent,
    [THEME_VARIABLE_MAP.success]: theme.palette.success,
    [THEME_VARIABLE_MAP.warning]: theme.palette.warning,
    [THEME_VARIABLE_MAP.danger]: theme.palette.danger,
    [THEME_VARIABLE_MAP.info]: theme.palette.info,
    [THEME_VARIABLE_MAP.textPrimary]: theme.palette.textPrimary,
    [THEME_VARIABLE_MAP.textSecondary]: theme.palette.textSecondary,
    [THEME_VARIABLE_MAP.backgroundPrimary]: theme.palette.backgroundPrimary,
    [THEME_VARIABLE_MAP.backgroundSecondary]: theme.palette.backgroundSecondary,
    [THEME_VARIABLE_MAP.border]: theme.palette.border,
    [THEME_VARIABLE_MAP.spaceXs]: spacingValues[0],
    [THEME_VARIABLE_MAP.spaceSm]: spacingValues[1],
    [THEME_VARIABLE_MAP.spaceMd]: spacingValues[2],
    [THEME_VARIABLE_MAP.spaceLg]: spacingValues[3],
    [THEME_VARIABLE_MAP.spaceXl]: spacingValues[4],
    [THEME_VARIABLE_MAP.transitionFast]: '120ms ease',
    [THEME_VARIABLE_MAP.transitionNormal]: '180ms ease',
    [THEME_VARIABLE_MAP.transitionSlow]: '300ms ease',
    '--app-font-family': theme.typography.primaryFontFamily,
    '--app-font-size': `${theme.typography.baseFontSize}px`,
    '--app-spacing-unit': `${theme.spacing.unit}px`
  };

  for (const [key, value] of Object.entries(theme.borderRadiusScale)) {
    vars[`--radius-${key}`] = value;
  }

  for (const [key, value] of Object.entries(theme.shadows)) {
    vars[`--shadow-${key}`] = value;
  }

  return vars;
}