@xsolla/switch-theme-customization 0.161.2 → 0.161.3-pr315.1779889787

package/index.mjs

@@ -1902,41 +1902,6 @@ var publisherV2Themes = {
   dark: publisherV2Dark
 };
 
-// src/themes/baseColors.ts
-var themesBaseColorsArray = [
-  { theme: "publisherV2", baseColors: base8 },
-  { theme: "publisherV2Dark", baseColors: base9 },
-  { theme: "paystation4", baseColors: base2 },
-  { theme: "paystation4Dark", baseColors: base },
-  { theme: "paystation4Take2", baseColors: base3 },
-  { theme: "paystation4Gaijin", baseColors: base4 },
-  { theme: "paystation4Nexters", baseColors: base5 },
-  { theme: "emails", baseColors: base7 },
-  { theme: "emailsDark", baseColors: base6 }
-];
-var themesBaseColors = {
-  publisherV2: base8,
-  publisherV2Dark: base9,
-  paystation4: base2,
-  paystation4Dark: base,
-  paystation4Take2: base3,
-  paystation4Gaijin: base4,
-  paystation4Nexters: base5,
-  emails: base7,
-  emailsDark: base6
-};
-var themesColorsScheme = {
-  publisherV2: publisherV2LightScheme,
-  publisherV2Dark: publisherV2DarkScheme,
-  paystation4: ps4LightScheme,
-  paystation4Dark: ps4DarkScheme,
-  paystation4Take2: ps4Take2Scheme,
-  paystation4Gaijin: ps4GaijinScheme,
-  paystation4Nexters: ps4NextersScheme,
-  emails: emailsLightScheme,
-  emailsDark: emailsDarkScheme
-};
-
 // src/themes/pentagram/presets/pay-station-dark.ts
 import { colord as colord10 } from "colord";
 var baseDark = {
@@ -2601,6 +2566,201 @@ var createScheme = (b) => ({
 });
 var payStationScheme = createScheme(base10);
 
+// src/themes/pentagram/mappers/scheme-to-legacy.ts
+function mapThemeSchemeToLegacy(scheme) {
+  return {
+    core: {
+      background: {
+        primary: scheme.background.primary,
+        secondary: scheme.layer.float,
+        ghost: scheme.overlay.mono,
+        tone: scheme.layer.scrim,
+        selection: "transparent",
+        // deleted in Pentagram
+        hover: "transparent",
+        // deleted in Pentagram
+        brand: scheme.background.brand.secondary,
+        brandSecondary: scheme.background.brandExtra.secondary,
+        success: scheme.background.success.secondary,
+        warning: scheme.background.warning.secondary,
+        alert: scheme.background.alert.secondary,
+        neutral: scheme.background.neutral.secondary
+      },
+      divider: {
+        divider: scheme.border.secondary
+      },
+      text: {
+        primary: scheme.content.primary,
+        secondary: scheme.content.secondary,
+        tertiary: scheme.content.tertiary,
+        brand: scheme.content.brand.primary,
+        brandSecondary: scheme.content.brandExtra.primary,
+        success: scheme.content.success.primary,
+        warning: scheme.content.warning.primary,
+        alert: scheme.content.alert.primary,
+        neutral: scheme.content.neutral.primary
+      },
+      link: {
+        link: scheme.control.link.primary,
+        linkHover: scheme.control.link.primaryHover,
+        linkMinor: scheme.control.link.secondary,
+        linkMinorHover: scheme.control.link.secondaryHover
+      }
+    },
+    control: {
+      primary: {
+        bg: scheme.control.brand.primary.bg,
+        bgHover: scheme.control.brand.primary.bgHover,
+        bgPress: scheme.control.brand.primary.bgPress,
+        bgDisabled: scheme.control.brand.primary.bgDisable,
+        border: scheme.control.brand.primary.border,
+        borderHover: scheme.control.brand.primary.borderHover,
+        borderPress: scheme.control.brand.primary.borderPress
+      },
+      secondary: {
+        bg: scheme.control.brand.secondary.bg,
+        bgHover: scheme.control.brand.secondary.bgHover,
+        bgPress: scheme.control.brand.secondary.bgPress,
+        border: scheme.control.brand.secondary.border,
+        borderHover: scheme.control.brand.secondary.borderHover,
+        borderPress: scheme.control.brand.secondary.borderPress
+      },
+      default: {
+        bg: scheme.control.mono.primary.bg,
+        bgHover: scheme.control.mono.primary.bgHover,
+        bgPress: scheme.control.mono.primary.bgPress,
+        border: scheme.control.mono.primary.border,
+        borderHover: scheme.control.mono.primary.borderHover,
+        borderPress: scheme.control.mono.primary.borderPress
+      },
+      input: {
+        bg: scheme.control.input.bg,
+        bgHover: scheme.control.input.bgHover,
+        bgDisabled: scheme.control.input.bgDisable,
+        border: scheme.control.input.border,
+        borderHover: scheme.control.input.borderHover,
+        borderDisabled: scheme.control.input.borderDisable,
+        text: scheme.control.input.text,
+        textDisabled: scheme.control.input.textDisable,
+        placeholder: scheme.control.input.placeholder
+      },
+      focus: {
+        bg: scheme.control.focus.bg,
+        border: scheme.control.focus.border
+      },
+      alert: {
+        bg: scheme.control.alert.secondary.bg,
+        bgHover: scheme.control.alert.secondary.bgHover,
+        bgPress: scheme.control.alert.secondary.bgPress,
+        border: scheme.control.alert.secondary.border,
+        borderHover: scheme.control.alert.secondary.borderHover,
+        borderPress: scheme.control.alert.secondary.borderPress
+      },
+      check: {
+        bg: scheme.control.check.bg,
+        bgHover: scheme.control.check.bgHover,
+        bgDisabled: scheme.control.check.bgDisable
+      },
+      faint: {
+        bg: scheme.control.faint.bg,
+        bgHover: scheme.control.faint.bgHover,
+        border: scheme.control.faint.border,
+        borderHover: scheme.control.faint.borderHover
+      },
+      toggle: {
+        bg: scheme.control.switch.bg,
+        bgHover: scheme.control.switch.bgHover
+      },
+      text: {
+        active: scheme.control.brand.text.primary,
+        secondary: scheme.control.brand.text.secondary,
+        default: scheme.control.mono.text.primary,
+        primary: scheme.control.text.primary,
+        disabled: scheme.control.brand.text.disable,
+        faint: scheme.control.check.icon,
+        alert: scheme.control.alert.text.secondary
+      }
+    }
+  };
+}
+
+// src/themes/pentagram/pentagram.ts
+function convertToLegacyBase(pentagramBase) {
+  return {
+    content: pentagramBase.content.toRgbString(),
+    // Primary content color
+    surface: pentagramBase.background.toRgbString(),
+    // Background/surface color
+    project: pentagramBase.brand.toRgbString(),
+    // Primary brand color
+    accent: pentagramBase.brandExtra.toRgbString(),
+    // Secondary brand color
+    phantom: pentagramBase.mono.toRgbString(),
+    // Neutral/mono color
+    path: pentagramBase.brand.toRgbString(),
+    // Path color (same as brand)
+    success: pentagramBase.success.toRgbString(),
+    warning: pentagramBase.warning.toRgbString(),
+    alert: pentagramBase.alert.toRgbString(),
+    neutral: pentagramBase.neutral.toRgbString()
+  };
+}
+var paystation4PentagramLight = {
+  colors: {
+    base: convertToLegacyBase(base10),
+    ...mapThemeSchemeToLegacy(payStationScheme)
+  },
+  typo,
+  misc,
+  shadows,
+  globalStyle: "pentagram"
+};
+var paystation4PentagramDark = {
+  colors: {
+    base: convertToLegacyBase(baseDark),
+    ...mapThemeSchemeToLegacy(payStationDarkScheme)
+  },
+  typo,
+  misc,
+  shadows,
+  globalStyle: "pentagram"
+};
+
+// src/themes/baseColors.ts
+var themesBaseColorsArray = [
+  { theme: "publisherV2", baseColors: base8 },
+  { theme: "publisherV2Dark", baseColors: base9 },
+  { theme: "paystation4", baseColors: base2 },
+  { theme: "paystation4Dark", baseColors: base },
+  { theme: "paystation4Take2", baseColors: base3 },
+  { theme: "paystation4Gaijin", baseColors: base4 },
+  { theme: "paystation4Nexters", baseColors: base5 },
+  { theme: "emails", baseColors: base7 },
+  { theme: "emailsDark", baseColors: base6 }
+];
+var themesBaseColors = {
+  publisherV2: base8,
+  publisherV2Dark: base9,
+  paystation4: base2,
+  paystation4Dark: base,
+  paystation4Take2: base3,
+  paystation4Gaijin: base4,
+  paystation4Nexters: base5,
+  emails: base7,
+  emailsDark: base6
+};
+var themesColorsScheme = {
+  publisherV2: publisherV2LightScheme,
+  publisherV2Dark: publisherV2DarkScheme,
+  paystation4: ps4LightScheme,
+  paystation4Dark: ps4DarkScheme,
+  paystation4Take2: ps4Take2Scheme,
+  paystation4Gaijin: ps4GaijinScheme,
+  paystation4Nexters: ps4NextersScheme,
+  emails: emailsLightScheme,
+  emailsDark: emailsDarkScheme
+};
+
 // src/themes/index.ts
 var themes = {
   paystation4,
@@ -2611,7 +2771,9 @@ var themes = {
   emails,
   emailsDark,
   publisherV2,
-  publisherV2Dark
+  publisherV2Dark,
+  paystation4PentagramLight,
+  paystation4PentagramDark
 };
 
 // src/palettes/primaryPalette.ts
@@ -2867,15 +3029,1061 @@ var applyPentagramColors = (schemeBase, overrides) => {
   });
   return result;
 };
+
+// src/pentagram-to-legacy/pentagram-resolver.ts
+var FONT_SIZE_SCALE = {
+  "75": { desktop: "10px", mobile: "10px" },
+  "100": { desktop: "12px", mobile: "11px" },
+  "125": { desktop: "14px", mobile: "12px" },
+  "150": { desktop: "16px", mobile: "14px" },
+  "175": { desktop: "18px", mobile: "16px" },
+  "200": { desktop: "20px", mobile: "18px" },
+  "250": { desktop: "24px", mobile: "20px" },
+  "300": { desktop: "28px", mobile: "24px" },
+  "350": { desktop: "32px", mobile: "28px" },
+  "450": { desktop: "40px", mobile: "32px" },
+  "550": { desktop: "48px", mobile: "40px" },
+  "650": { desktop: "56px", mobile: "48px" },
+  "750": { desktop: "64px", mobile: "56px" }
+};
+var LINE_HEIGHT_DISPLAY = {
+  "75": { desktop: "10px", mobile: "10px" },
+  "100": { desktop: "12px", mobile: "11px" },
+  "125": { desktop: "14px", mobile: "12px" },
+  "150": { desktop: "16px", mobile: "14px" },
+  "175": { desktop: "18px", mobile: "16px" },
+  "200": { desktop: "20px", mobile: "18px" },
+  "250": { desktop: "24px", mobile: "20px" },
+  "300": { desktop: "28px", mobile: "24px" },
+  "350": { desktop: "32px", mobile: "28px" },
+  "450": { desktop: "40px", mobile: "32px" },
+  "550": { desktop: "48px", mobile: "40px" },
+  "650": { desktop: "56px", mobile: "48px" },
+  "750": { desktop: "64px", mobile: "56px" }
+};
+var LINE_HEIGHT_COMPACT = {
+  "75": { desktop: "14px", mobile: "13px" },
+  "100": { desktop: "16px", mobile: "14px" },
+  "125": { desktop: "18px", mobile: "16px" },
+  "150": { desktop: "20px", mobile: "18px" },
+  "175": { desktop: "24px", mobile: "20px" },
+  "200": { desktop: "26px", mobile: "24px" },
+  "250": { desktop: "30px", mobile: "26px" },
+  "300": { desktop: "36px", mobile: "30px" },
+  "350": { desktop: "42px", mobile: "36px" },
+  "450": { desktop: "52px", mobile: "42px" },
+  "550": { desktop: "62px", mobile: "52px" },
+  "650": { desktop: "72px", mobile: "62px" },
+  "750": { desktop: "82px", mobile: "72px" }
+};
+var LINE_HEIGHT_TEXT = {
+  "75": { desktop: "14px", mobile: "13px" },
+  "100": { desktop: "18px", mobile: "14px" },
+  "125": { desktop: "20px", mobile: "16px" },
+  "150": { desktop: "22px", mobile: "18px" },
+  "175": { desktop: "26px", mobile: "20px" },
+  "200": { desktop: "28px", mobile: "24px" },
+  "250": { desktop: "34px", mobile: "26px" },
+  "300": { desktop: "40px", mobile: "30px" },
+  "350": { desktop: "44px", mobile: "36px" },
+  "450": { desktop: "56px", mobile: "42px" },
+  "550": { desktop: "66px", mobile: "52px" },
+  "650": { desktop: "78px", mobile: "62px" },
+  "750": { desktop: "88px", mobile: "72px" }
+};
+var TYPOGRAPHY_SCALE_FONT_SIZE = {
+  "200": "10px",
+  "300": "12px",
+  "400": "14px",
+  "500": "16px",
+  "600": "18px"
+};
+var TYPOGRAPHY_SCALE_LINE_HEIGHT = {
+  "200": "16px",
+  "300": "18px",
+  "400": "20px",
+  "500": "22px",
+  "600": "24px"
+};
+var SPACING_SCALE = {
+  "50": "2px",
+  "75": "4px",
+  "100": "6px",
+  "150": "8px",
+  "200": "10px",
+  "250": "12px",
+  "300": "16px",
+  "400": "20px",
+  "500": "24px",
+  "600": "32px",
+  "800": "48px",
+  "1000": "64px"
+};
+var FONT_FAMILY = {
+  compact: "'Aktiv Grotesk', sans-serif",
+  display: "'Pilat Wide', 'Aktiv Grotesk', sans-serif",
+  text: "'Aktiv Grotesk', sans-serif"
+};
+var RADIUS_SCALE = {
+  "25": "2px",
+  "50": "4px",
+  "75": "6px",
+  "100": "8px",
+  "150": "12px",
+  "200": "16px",
+  "999": "999px"
+};
+var STROKE_SCALE = {
+  "1": "1px",
+  "2": "2px",
+  "3": "3px"
+};
+var PentagramResolver = class {
+  viewport;
+  constructor(viewport = "desktop") {
+    this.viewport = viewport;
+  }
+  setViewport(viewport) {
+    this.viewport = viewport;
+  }
+  /**
+   * Resolve a single alias to a concrete value.
+   *
+   * @param alias - Alias string like "300" (fontSize), "display/300" (lineHeight), or "radius/100"
+   * @param context - Optional context hint: 'fontSize' or 'lineHeight'
+   * @returns Resolved value (e.g., "28px") or original if not an alias
+   */
+  resolve(alias, context) {
+    if (typeof alias !== "string") {
+      return alias;
+    }
+    if (this.isResolved(alias)) {
+      return alias;
+    }
+    if (/^\d+$/.test(alias) && context !== "lineHeight") {
+      const value = FONT_SIZE_SCALE[alias];
+      return value ? value[this.viewport] : alias;
+    }
+    if (alias.startsWith("display/")) {
+      const step = alias.replace("display/", "");
+      const value = LINE_HEIGHT_DISPLAY[step];
+      return value ? value[this.viewport] : alias;
+    }
+    if (alias.startsWith("compact/")) {
+      const step = alias.replace("compact/", "");
+      const value = LINE_HEIGHT_COMPACT[step];
+      return value ? value[this.viewport] : alias;
+    }
+    if (alias.startsWith("text/")) {
+      const step = alias.replace("text/", "");
+      const value = LINE_HEIGHT_TEXT[step];
+      return value ? value[this.viewport] : alias;
+    }
+    if (alias.startsWith("font-size/")) {
+      const step = alias.replace("font-size/", "");
+      const value = FONT_SIZE_SCALE[step];
+      return value ? value[this.viewport] : alias;
+    }
+    if (alias.startsWith("line-height/display/")) {
+      const step = alias.replace("line-height/display/", "");
+      const value = LINE_HEIGHT_DISPLAY[step];
+      return value ? value[this.viewport] : alias;
+    }
+    if (alias.startsWith("line-height/compact/")) {
+      const step = alias.replace("line-height/compact/", "");
+      const value = LINE_HEIGHT_COMPACT[step];
+      return value ? value[this.viewport] : alias;
+    }
+    if (alias.startsWith("line-height/text/")) {
+      const step = alias.replace("line-height/text/", "");
+      const value = LINE_HEIGHT_TEXT[step];
+      return value ? value[this.viewport] : alias;
+    }
+    if (alias.startsWith("typography-scale/font-size/")) {
+      const step = alias.replace("typography-scale/font-size/", "");
+      return TYPOGRAPHY_SCALE_FONT_SIZE[step] ?? alias;
+    }
+    if (alias.startsWith("typography-scale/line-height/")) {
+      const step = alias.replace("typography-scale/line-height/", "");
+      return TYPOGRAPHY_SCALE_LINE_HEIGHT[step] ?? alias;
+    }
+    if (alias.startsWith("spacing/")) {
+      const step = alias.replace("spacing/", "");
+      return SPACING_SCALE[step] ?? alias;
+    }
+    if (FONT_FAMILY[alias]) {
+      return FONT_FAMILY[alias];
+    }
+    if (alias.startsWith("radius/")) {
+      const step = alias.replace("radius/", "");
+      return RADIUS_SCALE[step] ?? alias;
+    }
+    if (alias.startsWith("stroke/")) {
+      const step = alias.replace("stroke/", "");
+      return STROKE_SCALE[step] ?? alias;
+    }
+    return alias;
+  }
+  /**
+   * Recursively resolve all aliases in an object.
+   *
+   * @param obj - Object containing alias strings
+   * @returns New object with all aliases resolved to concrete values
+   */
+  resolveObject(obj) {
+    if (obj === null || obj === void 0) {
+      return obj;
+    }
+    if (typeof obj === "string" || typeof obj === "number") {
+      return this.resolve(obj);
+    }
+    if (Array.isArray(obj)) {
+      return obj.map((item) => this.resolveObject(item));
+    }
+    if (typeof obj === "object") {
+      const input = obj;
+      const result = {};
+      if ("scale" in input && typeof input.scale === "string" && Object.keys(input).length === 1) {
+        const scale = input.scale;
+        return {
+          fontSize: TYPOGRAPHY_SCALE_FONT_SIZE[scale] ?? `${scale}px`,
+          lineHeight: TYPOGRAPHY_SCALE_LINE_HEIGHT[scale] ?? `${scale}px`
+        };
+      }
+      for (const [key, value] of Object.entries(input)) {
+        if (key === "fontSize" && typeof value === "string") {
+          result[key] = this.resolve(value, "fontSize");
+        } else if (key === "lineHeight" && typeof value === "string") {
+          result[key] = this.resolve(value, "lineHeight");
+        } else {
+          result[key] = this.resolveObject(value);
+        }
+      }
+      return result;
+    }
+    return obj;
+  }
+  /**
+   * Check if a value is already resolved (not an alias).
+   */
+  isResolved(value) {
+    return /^\d+(\.\d+)?(px|em|rem|%|vw|vh|pt|cm|mm|in)$/i.test(value) || value.startsWith("rgb") || value.startsWith("#") || value.startsWith("var(") || value === "transparent" || value === "inherit" || value === "none";
+  }
+};
+function createResolver(viewport = "desktop") {
+  return new PentagramResolver(viewport);
+}
+function resolveForDesktop(obj) {
+  return new PentagramResolver("desktop").resolveObject(obj);
+}
+function resolveForMobile(obj) {
+  return new PentagramResolver("mobile").resolveObject(obj);
+}
+
+// src/pentagram-to-legacy/map-pentagram-typo-to-legacy.ts
+function extractControlTypo(size, defaultFontWeight = 400) {
+  if (!size) {
+    return {
+      fontSize: "14px",
+      lineHeight: "20px",
+      fontWeight: defaultFontWeight
+    };
+  }
+  const typo4 = size.typography ?? size;
+  return {
+    fontSize: typo4.fontSize ?? "14px",
+    lineHeight: typo4.lineHeight ?? "20px",
+    fontWeight: defaultFontWeight
+  };
+}
+function buildBasicStyle(variant, useAccent = false) {
+  const fontWeight = useAccent ? variant.accent?.fontWeight ?? 500 : variant.default?.fontWeight ?? 400;
+  return {
+    fontSize: variant.fontSize,
+    lineHeight: variant.lineHeight,
+    fontWeight
+  };
+}
+function buildParagraphStyle(variant) {
+  return {
+    fontSize: variant.fontSize,
+    lineHeight: variant.paragraph?.lineHeight ?? variant.lineHeight,
+    fontWeight: variant.default?.fontWeight ?? 400
+  };
+}
+var DEFAULT_FONT_FAMILY = `'GraphikLCWebUikit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
+function mapPentagramTypoToLegacy(pentagram, fontFamily = DEFAULT_FONT_FAMILY) {
+  const { heading, basic, control } = pentagram;
+  return {
+    fontFamily,
+    core: {
+      // heading.h1 → core.h1
+      h1: {
+        fontSize: heading.h1.fontSize,
+        lineHeight: heading.h1.lineHeight,
+        fontWeight: heading.h1.fontWeight ?? 700
+      },
+      // heading.h2 → core.h2
+      h2: {
+        fontSize: heading.h2.fontSize,
+        lineHeight: heading.h2.lineHeight,
+        fontWeight: heading.h2.fontWeight ?? 700
+      },
+      // heading.h3 → core.h3
+      h3: {
+        fontSize: heading.h3.fontSize,
+        lineHeight: heading.h3.lineHeight,
+        fontWeight: heading.h3.fontWeight ?? 700
+      },
+      // heading.h4 → core.h4
+      h4: {
+        fontSize: heading.h4.fontSize,
+        lineHeight: heading.h4.lineHeight,
+        fontWeight: heading.h4.fontWeight ?? 700
+      },
+      // basic.bodyMd → core.bodyMd
+      bodyMd: buildBasicStyle(basic.bodyMd, false),
+      // basic.bodyMd.accent → core.bodyMdAccent
+      bodyMdAccent: buildBasicStyle(basic.bodyMd, true),
+      // basic.bodyLg.accent → core.bodyLgAccent
+      bodyLgAccent: buildBasicStyle(basic.bodyLg, true),
+      // basic.bodyMd.paragraph → core.paragraph
+      paragraph: buildParagraphStyle(basic.bodyMd),
+      // basic.bodyMd → core.label (same as bodyMd)
+      label: buildBasicStyle(basic.bodyMd, false),
+      // basic.bodySm → core.minor
+      minor: buildBasicStyle(basic.bodySm, false)
+    },
+    components: {
+      // control.button.* → components.button.*
+      button: {
+        sm: extractControlTypo(control.button.sm, 500),
+        md: extractControlTypo(control.button.md, 500),
+        lg: extractControlTypo(control.button.lg, 500)
+      },
+      // control.input.* → components.input.*
+      input: {
+        sm: extractControlTypo(control.input.sm, 400),
+        md: extractControlTypo(control.input.md, 400),
+        lg: extractControlTypo(control.input.lg, 400)
+      },
+      // control.tab.* → components.tab.*
+      tab: {
+        sm: extractControlTypo(control.tab.sm, 500),
+        md: extractControlTypo(control.tab.md, 500),
+        lg: extractControlTypo(control.tab.lg, 500)
+      },
+      // control.checkbox.* + control.radio.* → components.check.*
+      // (checkbox and radio share the same legacy component)
+      check: {
+        sm: extractControlTypo(control.checkbox?.sm ?? control.radio?.sm, 400),
+        md: extractControlTypo(control.checkbox?.md ?? control.radio?.md, 400),
+        lg: extractControlTypo(control.checkbox?.lg ?? control.radio?.lg, 400)
+      },
+      // basic.bodyMd/bodySm/bodyXs → components.label.lg/md/sm
+      label: {
+        sm: buildBasicStyle(basic.bodyXs, false),
+        md: buildBasicStyle(basic.bodySm, false),
+        lg: buildBasicStyle(basic.bodyMd, false)
+      }
+    }
+  };
+}
+var DELETED_LEGACY_TYPO_VARS = [
+  "components.heading",
+  "components.fieldGroup",
+  "core.strong",
+  "core.bodyLg"
+];
+
+// src/pentagram-to-legacy/map-pentagram-shape-to-legacy.ts
+function getShapeBorderRadius(shape, preferredSize = "md", fallback = "8px") {
+  if (!shape) return fallback;
+  const size = shape[preferredSize] ?? shape["lg"] ?? shape["sm"] ?? Object.values(shape)[0];
+  return size?.borderRadius ?? fallback;
+}
+function getShapeBorderWidth(shape, preferredSize = "md", fallback = "1px") {
+  if (!shape) return fallback;
+  const size = shape[preferredSize] ?? shape["lg"] ?? shape["sm"] ?? Object.values(shape)[0];
+  return size?.borderWidth ?? size?.borderWeight ?? fallback;
+}
+function mapPentagramShapeToLegacy(pentagram, existingMisc) {
+  const buttonRadius = getShapeBorderRadius(pentagram.button, "md", "8px");
+  const inputRadius = getShapeBorderRadius(pentagram.input, "md", "8px");
+  const checkboxRadius = getShapeBorderRadius(pentagram.checkbox, "md", "4px");
+  const tagRadius = getShapeBorderRadius(pentagram.tag, "md", "8px");
+  const popupRadius = pentagram.modal?.borderRadius ?? pentagram.contextMenu?.md?.borderRadius ?? pentagram.tooltip?.md?.borderRadius ?? "8px";
+  const borderWidth = getShapeBorderWidth(pentagram.button, "md", "2px");
+  const buttonSm = pentagram.button?.sm?.borderRadius ?? "4px";
+  const buttonMd = pentagram.button?.md?.borderRadius ?? "6px";
+  const buttonLg = pentagram.button?.lg?.borderRadius ?? "8px";
+  const buttonXl = pentagram.button?.xl?.borderRadius ?? "8px";
+  return {
+    borderRadiusScale: {
+      sm: existingMisc?.borderRadiusScale?.sm ?? buttonSm,
+      md: existingMisc?.borderRadiusScale?.md ?? buttonMd,
+      lg: existingMisc?.borderRadiusScale?.lg ?? buttonLg,
+      xl: existingMisc?.borderRadiusScale?.xl ?? buttonXl
+    },
+    borderWidth: existingMisc?.borderWidth ?? borderWidth,
+    borderRadius: {
+      input: inputRadius,
+      button: buttonRadius,
+      buttonIcon: buttonRadius,
+      popup: popupRadius,
+      checkbox: checkboxRadius,
+      tag: tagRadius
+    },
+    minWidth: {
+      button: existingMisc?.minWidth?.button ?? "40px"
+    }
+  };
+}
+function flattenPentagramShapeToVars(pentagram) {
+  const vars = {};
+  function addSizedComponent(name, shape) {
+    if (!shape) return;
+    for (const [size, props] of Object.entries(shape)) {
+      if (props.borderRadius) {
+        vars[`shape-${name}-${size}-borderRadius`] = props.borderRadius;
+      }
+      if (props.borderWidth ?? props.borderWeight) {
+        vars[`shape-${name}-${size}-borderWidth`] = props.borderWidth ?? props.borderWeight;
+      }
+    }
+  }
+  addSizedComponent("button", pentagram.button);
+  addSizedComponent("input", pentagram.input);
+  addSizedComponent("checkbox", pentagram.checkbox);
+  addSizedComponent("tab", pentagram.tabItem);
+  addSizedComponent("tag", pentagram.tag);
+  addSizedComponent("radio", pentagram.radio);
+  addSizedComponent("switch", pentagram.switch);
+  addSizedComponent("segmented", pentagram.segmented);
+  addSizedComponent("segmentedItem", pentagram.segmentedItem);
+  addSizedComponent("tooltip", pentagram.tooltip);
+  addSizedComponent("contextMenu", pentagram.contextMenu);
+  addSizedComponent("avatar", pentagram.avatar);
+  addSizedComponent("toggleButtonGroup", pentagram.toggleButtonGroup);
+  if (pentagram.modal?.borderRadius) {
+    vars["shape-modal-borderRadius"] = pentagram.modal.borderRadius;
+  }
+  if (pentagram.cell?.borderRadius) {
+    vars["shape-cell-borderRadius"] = pentagram.cell.borderRadius;
+  }
+  if (pentagram.toast?.borderRadius) {
+    vars["shape-toast-borderRadius"] = pentagram.toast.borderRadius;
+  }
+  return vars;
+}
+
+// src/pentagram-to-legacy/map-handcrafted-pentagram-to-legacy.ts
+function mapHandCraftedPentagramToLegacy(pentagram) {
+  return {
+    core: {
+      background: {
+        primary: pentagram.background.primary,
+        secondary: pentagram.layer.float,
+        ghost: pentagram.overlay.mono,
+        tone: pentagram.layer.scrim,
+        selection: "transparent",
+        // deleted in Pentagram
+        hover: "transparent",
+        // deleted in Pentagram
+        brand: pentagram.background.brandSecondary,
+        brandSecondary: pentagram.background.brandExtraSecondary,
+        success: pentagram.background.successSecondary,
+        warning: pentagram.background.warningSecondary,
+        alert: pentagram.background.alertSecondary,
+        neutral: pentagram.background.neutralSecondary
+      },
+      divider: {
+        divider: pentagram.border.secondary
+      },
+      text: {
+        primary: pentagram.content.primary,
+        secondary: pentagram.content.secondary,
+        tertiary: pentagram.content.tertiary,
+        brand: pentagram.content.brandPrimary,
+        brandSecondary: pentagram.content.brandExtraPrimary,
+        success: pentagram.content.successPrimary,
+        warning: pentagram.content.warningPrimary,
+        alert: pentagram.content.alertPrimary,
+        neutral: pentagram.content.neutralPrimary
+      },
+      link: {
+        link: pentagram.control.link.primary,
+        linkHover: pentagram.control.link.primaryHover,
+        linkMinor: pentagram.control.link.secondary,
+        linkMinorHover: pentagram.control.link.secondaryHover
+      }
+    },
+    control: {
+      primary: {
+        bg: pentagram.control.brand.primary.bg,
+        bgHover: pentagram.control.brand.primary.bgHover,
+        bgPress: pentagram.control.brand.primary.bgPress,
+        bgDisabled: pentagram.control.brand.primary.bgDisable,
+        border: pentagram.control.brand.primary.border,
+        borderHover: pentagram.control.brand.primary.borderHover,
+        borderPress: pentagram.control.brand.primary.borderPress
+      },
+      secondary: {
+        bg: pentagram.control.brand.secondary.bg,
+        bgHover: pentagram.control.brand.secondary.bgHover,
+        bgPress: pentagram.control.brand.secondary.bgPress,
+        border: pentagram.control.brand.secondary.border,
+        borderHover: pentagram.control.brand.secondary.borderHover,
+        borderPress: pentagram.control.brand.secondary.borderPress
+      },
+      default: {
+        bg: pentagram.control.mono.primary.bg,
+        bgHover: pentagram.control.mono.primary.bgHover,
+        bgPress: pentagram.control.mono.primary.bgPress,
+        border: pentagram.control.mono.primary.border,
+        borderHover: pentagram.control.mono.primary.borderHover,
+        borderPress: pentagram.control.mono.primary.borderPress
+      },
+      input: {
+        bg: pentagram.control.input.bg,
+        bgHover: pentagram.control.input.bgHover,
+        bgDisabled: pentagram.control.input.bgDisable,
+        border: pentagram.control.input.border,
+        borderHover: pentagram.control.input.borderHover,
+        borderDisabled: pentagram.control.input.borderDisable,
+        text: pentagram.control.input.text,
+        textDisabled: pentagram.control.input.textDisable,
+        placeholder: pentagram.control.input.placeholder
+      },
+      focus: {
+        bg: pentagram.control.focus.bg,
+        border: pentagram.control.focus.border
+      },
+      alert: {
+        bg: pentagram.control.alert.secondary.bg,
+        bgHover: pentagram.control.alert.secondary.bgHover,
+        bgPress: pentagram.control.alert.secondary.bgPress,
+        border: pentagram.control.alert.secondary.border,
+        borderHover: pentagram.control.alert.secondary.borderHover,
+        borderPress: pentagram.control.alert.secondary.borderPress
+      },
+      check: {
+        bg: pentagram.control.check.bg,
+        bgHover: pentagram.control.check.bgHover,
+        bgDisabled: pentagram.control.check.bgDisable
+      },
+      faint: {
+        bg: pentagram.control.faint.bg,
+        bgHover: pentagram.control.faint.bgHover,
+        border: pentagram.control.faint.border,
+        borderHover: pentagram.control.faint.borderHover
+      },
+      toggle: {
+        bg: pentagram.control.switch.bg,
+        bgHover: pentagram.control.switch.bgHover
+      },
+      text: {
+        active: pentagram.control.brand.text.primary,
+        secondary: pentagram.control.brand.text.secondary,
+        default: pentagram.control.mono.text.primary,
+        primary: pentagram.control.text.primary,
+        disabled: pentagram.control.brand.text.disable,
+        faint: pentagram.control.check.icon,
+        alert: pentagram.control.alert.text.secondary
+      }
+    }
+  };
+}
+
+// src/pentagram-to-legacy/map-pentagram-theme-to-legacy.ts
+function buildBaseColorsFromPentagram(colors) {
+  return {
+    content: colors.content.primary,
+    surface: colors.background.primary,
+    project: colors.control.brand.primary.bg,
+    accent: colors.control.brand.text.primary,
+    phantom: colors.border.secondary,
+    path: colors.control.link.primary,
+    success: colors.content.successPrimary,
+    warning: colors.content.warningPrimary,
+    alert: colors.content.alertPrimary,
+    neutral: colors.content.neutralPrimary
+  };
+}
+function mapPentagramThemeToLegacy(pentagram, viewport = "desktop") {
+  const resolver = createResolver(viewport);
+  const resolvedTypo = resolver.resolveObject(pentagram.typo);
+  const resolvedShape = resolver.resolveObject(pentagram.shape);
+  return {
+    colors: {
+      base: buildBaseColorsFromPentagram(pentagram.colors),
+      ...mapHandCraftedPentagramToLegacy(pentagram.colors)
+    },
+    typo: mapPentagramTypoToLegacy(resolvedTypo),
+    misc: mapPentagramShapeToLegacy(resolvedShape),
+    shadows: pentagram.shadows
+  };
+}
+
+// src/pentagram-primitives/typo-primitives.json
+var typo_primitives_default = {
+  heading: {
+    h1: {
+      fontSize: "450",
+      lineHeight: "display/450",
+      fontWeight: 700
+    },
+    h2: {
+      fontSize: "350",
+      lineHeight: "display/350",
+      fontWeight: 700
+    },
+    h3: {
+      fontSize: "300",
+      lineHeight: "display/300",
+      fontWeight: 700
+    },
+    h4: {
+      fontSize: "250",
+      lineHeight: "display/250",
+      fontWeight: 700
+    },
+    h5: {
+      fontSize: "200",
+      lineHeight: "display/200",
+      fontWeight: 700
+    }
+  },
+  basic: {
+    display: {
+      fontFamily: "compact",
+      fontSize: "300",
+      lineHeight: "compact/300",
+      fontWeight: 500
+    },
+    bodyLg: {
+      fontSize: "175",
+      lineHeight: "compact/175",
+      default: {
+        fontWeight: 400
+      },
+      accent: {
+        fontWeight: 500
+      },
+      paragraph: {
+        spacing: "spacing/250",
+        lineHeight: "text/175"
+      }
+    },
+    bodyMd: {
+      fontSize: "150",
+      lineHeight: "compact/150",
+      default: {
+        fontWeight: 400
+      },
+      accent: {
+        fontWeight: 500
+      },
+      paragraph: {
+        spacing: "spacing/200",
+        lineHeight: "text/150"
+      }
+    },
+    bodySm: {
+      fontSize: "125",
+      lineHeight: "compact/125",
+      default: {
+        fontWeight: 400
+      },
+      accent: {
+        fontWeight: 500
+      },
+      paragraph: {
+        spacing: "spacing/150",
+        lineHeight: "text/125"
+      }
+    },
+    bodyXs: {
+      fontSize: "100",
+      lineHeight: "compact/100",
+      default: {
+        fontWeight: 400
+      },
+      accent: {
+        fontWeight: 500
+      },
+      paragraph: {
+        spacing: "spacing/100",
+        lineHeight: "text/100"
+      }
+    },
+    bodyXxs: {
+      fontSize: "75",
+      lineHeight: "compact/75",
+      default: {
+        fontWeight: 400
+      },
+      accent: {
+        fontWeight: 500
+      },
+      paragraph: {
+        spacing: "spacing/75",
+        lineHeight: "text/75"
+      }
+    }
+  },
+  control: {
+    button: {
+      xl: { scale: "600" },
+      lg: { scale: "500" },
+      md: { scale: "400" },
+      sm: { scale: "300" },
+      xs: { scale: "200" }
+    },
+    input: {
+      xl: { scale: "600" },
+      lg: { scale: "500" },
+      md: { scale: "400" },
+      sm: { scale: "300" },
+      xs: { scale: "200" }
+    },
+    checkbox: {
+      xl: { scale: "600" },
+      lg: { scale: "500" },
+      md: { scale: "400" },
+      sm: { scale: "300" }
+    },
+    tab: {
+      xl: { scale: "600" },
+      lg: { scale: "500" },
+      md: { scale: "400" },
+      sm: { scale: "300" },
+      xs: { scale: "300" }
+    },
+    radio: {
+      xl: { scale: "600" },
+      lg: { scale: "500" },
+      md: { scale: "400" },
+      sm: { scale: "300" }
+    },
+    segmentedItem: {
+      xl: { scale: "500" },
+      lg: { scale: "400" },
+      md: { scale: "300" },
+      sm: { scale: "200" }
+    },
+    tag: {
+      xl: { scale: "600" },
+      lg: { scale: "500" },
+      md: { scale: "400" },
+      sm: { scale: "300" },
+      xs: { scale: "200" }
+    },
+    toggleButton: {
+      xl: { scale: "600" },
+      lg: { scale: "500" },
+      md: { scale: "400" },
+      sm: { scale: "300" },
+      xs: { scale: "200" }
+    }
+  }
+};
+
+// src/pentagram-primitives/shape-primitives.json
+var shape_primitives_default = {
+  button: {
+    xl: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/75",
+      borderWidth: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    xs: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    }
+  },
+  checkbox: {
+    xl: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    }
+  },
+  input: {
+    xl: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    xs: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    }
+  },
+  cell: {
+    borderRadius: "radius/100",
+    borderWidth: "stroke/1"
+  },
+  modal: {
+    borderRadius: "radius/100"
+  },
+  toast: {
+    borderRadius: "radius/50",
+    borderWidth: "0px"
+  },
+  segmentedItem: {
+    xl: {
+      borderRadius: "radius/50",
+      borderWeight: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/50",
+      borderWeight: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/50",
+      borderWeight: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/25",
+      borderWeight: "stroke/1"
+    }
+  },
+  segmented: {
+    xl: {
+      borderRadius: "radius/100",
+      borderWeight: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/100",
+      borderWeight: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/100",
+      borderWeight: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/50",
+      borderWeight: "stroke/1"
+    }
+  },
+  switch: {
+    xl: {
+      borderRadius: "radius/50",
+      borderWeight: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/50",
+      borderWeight: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/50",
+      borderWeight: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/50",
+      borderWeight: "stroke/1"
+    }
+  },
+  knob: {
+    xl: {
+      borderRadius: "radius/25"
+    },
+    lg: {
+      borderRadius: "radius/25"
+    },
+    md: {
+      borderRadius: "radius/25"
+    },
+    sm: {
+      borderRadius: "radius/25"
+    }
+  },
+  tabItem: {
+    xl: {
+      borderRadius: "radius/100"
+    },
+    lg: {
+      borderRadius: "radius/100"
+    },
+    md: {
+      borderRadius: "radius/50"
+    },
+    sm: {
+      borderRadius: "radius/50"
+    }
+  },
+  tag: {
+    xl: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/75",
+      borderWidth: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    xs: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    }
+  },
+  tagLabel: {
+    borderRadius: "0px"
+  },
+  tooltip: {
+    xl: {
+      borderRadius: "radius/100"
+    },
+    lg: {
+      borderRadius: "radius/100"
+    },
+    md: {
+      borderRadius: "radius/100"
+    },
+    sm: {
+      borderRadius: "radius/50"
+    }
+  },
+  radio: {
+    xl: {
+      borderRadius: "radius/999",
+      borderWidth: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/999",
+      borderWidth: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/999",
+      borderWidth: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/999",
+      borderWidth: "stroke/1"
+    }
+  },
+  contextMenu: {
+    xl: {
+      borderRadius: "radius/100"
+    },
+    lg: {
+      borderRadius: "radius/100"
+    },
+    md: {
+      borderRadius: "radius/100"
+    },
+    sm: {
+      borderRadius: "radius/50"
+    }
+  },
+  avatar: {
+    xl: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/2"
+    },
+    lg: {
+      borderRadius: "radius/75",
+      borderWidth: "stroke/2"
+    },
+    md: {
+      borderRadius: "radius/75",
+      borderWidth: "stroke/2"
+    },
+    sm: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/2"
+    },
+    xs: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/2"
+    },
+    xxs: {
+      borderRadius: "radius/25",
+      borderWidth: "stroke/2"
+    }
+  },
+  toggleButtonGroup: {
+    xl: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/100",
+      borderWidth: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/75",
+      borderWidth: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    xs: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    }
+  }
+};
 export {
+  DELETED_LEGACY_TYPO_VARS,
+  PentagramResolver,
   base10 as base,
   baseDark,
+  buildBaseColorsFromPentagram,
   createDarkScheme,
+  createResolver,
   createScheme,
   emails,
   emailsDark,
   emailsThemes,
+  flattenPentagramShapeToVars,
   generateWithScheme,
+  mapHandCraftedPentagramToLegacy,
+  mapPentagramShapeToLegacy,
+  mapPentagramThemeToLegacy,
+  mapPentagramTypoToLegacy,
   palettes,
   payStationDarkScheme,
   payStationScheme,
@@ -2883,16 +4091,22 @@ export {
   paystation4Dark,
   paystation4Gaijin,
   paystation4Nexters,
+  paystation4PentagramDark,
+  paystation4PentagramLight,
   paystation4Take2,
   paystation4Themes,
   primaryPalette,
   publisherV2,
   publisherV2Dark,
   publisherV2Themes,
+  resolveForDesktop,
+  resolveForMobile,
+  shape_primitives_default as shapePrimitives,
   themeGenerator,
   themes,
   themesBaseColors,
   themesBaseColorsArray,
-  themesColorsScheme
+  themesColorsScheme,
+  typo_primitives_default as typoPrimitives
 };
 //# sourceMappingURL=index.mjs.map