phase-5: add runtime theme and branding engine services

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

@@ -0,0 +1,33 @@
+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 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,
+    '--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;
+}