@xsolla/switch-theme-customization 0.161.2 → 0.161.3-pr320.1780471492

package/index.mjs

@@ -1937,6 +1937,1046 @@ var themesColorsScheme = {
   emailsDark: emailsDarkScheme
 };
 
+// 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",
+      borderWidth: "stroke/1"
+    },
+    lg: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    md: {
+      borderRadius: "radius/50",
+      borderWidth: "stroke/1"
+    },
+    sm: {
+      borderRadius: "radius/25",
+      borderWidth: "stroke/1"
+    }
+  },
+  segmented: {
+    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"
+    }
+  },
+  switch: {
+    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"
+    }
+  },
+  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"
+    }
+  }
+};
+
+// 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 {
+  device;
+  constructor(device = "desktop") {
+    this.device = device;
+  }
+  setDevice(device) {
+    this.device = device;
+  }
+  /**
+   * 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.device] : alias;
+    }
+    if (alias.startsWith("display/")) {
+      const step = alias.replace("display/", "");
+      const value = LINE_HEIGHT_DISPLAY[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("compact/")) {
+      const step = alias.replace("compact/", "");
+      const value = LINE_HEIGHT_COMPACT[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("text/")) {
+      const step = alias.replace("text/", "");
+      const value = LINE_HEIGHT_TEXT[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("font-size/")) {
+      const step = alias.replace("font-size/", "");
+      const value = FONT_SIZE_SCALE[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("line-height/display/")) {
+      const step = alias.replace("line-height/display/", "");
+      const value = LINE_HEIGHT_DISPLAY[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("line-height/compact/")) {
+      const step = alias.replace("line-height/compact/", "");
+      const value = LINE_HEIGHT_COMPACT[step];
+      return value ? value[this.device] : alias;
+    }
+    if (alias.startsWith("line-height/text/")) {
+      const step = alias.replace("line-height/text/", "");
+      const value = LINE_HEIGHT_TEXT[step];
+      return value ? value[this.device] : 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
+   */
+  resolvePrimitives(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.resolvePrimitives(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.resolvePrimitives(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(device = "desktop") {
+  return new PentagramResolver(device);
+}
+function resolveForDesktop(obj) {
+  return new PentagramResolver("desktop").resolvePrimitives(obj);
+}
+function resolveForMobile(obj) {
+  return new PentagramResolver("mobile").resolvePrimitives(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
+    };
+  }
+  return {
+    fontSize: size.fontSize,
+    lineHeight: size.lineHeight,
+    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.bodyLg → core.bodyLg (DELETED but required for compatibility)
+      bodyLg: buildBasicStyle(basic.bodyLg, false),
+      // 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),
+      // core.strong (DELETED but required for compatibility)
+      strong: buildBasicStyle(basic.bodyMd, true)
+    },
+    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 ?? 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) {
+        vars[`shape-${name}-${size}-borderWidth`] = props.borderWidth;
+      }
+    }
+  }
+  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/themes/pentagram/mappers/scheme-to-legacy.ts
+function mapThemeSchemeToLegacy(colors) {
+  return {
+    core: {
+      background: {
+        primary: colors.background.primary,
+        secondary: colors.layer.float,
+        ghost: colors.overlay.mono,
+        tone: colors.layer.scrim,
+        selection: "transparent",
+        // deleted in Pentagram
+        hover: "transparent",
+        // deleted in Pentagram
+        brand: colors.background.brand.secondary,
+        brandSecondary: colors.background.brandExtra.secondary,
+        success: colors.background.success.secondary,
+        warning: colors.background.warning.secondary,
+        alert: colors.background.alert.secondary,
+        neutral: colors.background.neutral.secondary
+      },
+      divider: {
+        divider: colors.border.secondary
+      },
+      text: {
+        primary: colors.content.primary,
+        secondary: colors.content.secondary,
+        tertiary: colors.content.tertiary,
+        brand: colors.content.brand.primary,
+        brandSecondary: colors.content.brandExtra.primary,
+        success: colors.content.success.primary,
+        warning: colors.content.warning.primary,
+        alert: colors.content.alert.primary,
+        neutral: colors.content.neutral.primary
+      },
+      link: {
+        link: colors.control.link.primary,
+        linkHover: colors.control.link.primaryHover,
+        linkMinor: colors.control.link.secondary,
+        linkMinorHover: colors.control.link.secondaryHover
+      }
+    },
+    control: {
+      primary: {
+        bg: colors.control.brand.primary.bg,
+        bgHover: colors.control.brand.primary.bgHover,
+        bgPress: colors.control.brand.primary.bgPress,
+        bgDisabled: colors.control.brand.primary.bgDisable,
+        border: colors.control.brand.primary.border,
+        borderHover: colors.control.brand.primary.borderHover,
+        borderPress: colors.control.brand.primary.borderPress
+      },
+      secondary: {
+        bg: colors.control.brand.secondary.bg,
+        bgHover: colors.control.brand.secondary.bgHover,
+        bgPress: colors.control.brand.secondary.bgPress,
+        border: colors.control.brand.secondary.border,
+        borderHover: colors.control.brand.secondary.borderHover,
+        borderPress: colors.control.brand.secondary.borderPress
+      },
+      default: {
+        bg: colors.control.mono.primary.bg,
+        bgHover: colors.control.mono.primary.bgHover,
+        bgPress: colors.control.mono.primary.bgPress,
+        border: colors.control.mono.primary.border,
+        borderHover: colors.control.mono.primary.borderHover,
+        borderPress: colors.control.mono.primary.borderPress
+      },
+      input: {
+        bg: colors.control.input.bg,
+        bgHover: colors.control.input.bgHover,
+        bgDisabled: colors.control.input.bgDisable,
+        border: colors.control.input.border,
+        borderHover: colors.control.input.borderHover,
+        borderDisabled: colors.control.input.borderDisable,
+        text: colors.control.input.text,
+        textDisabled: colors.control.input.textDisable,
+        placeholder: colors.control.input.placeholder
+      },
+      focus: {
+        bg: colors.control.focus.bg,
+        border: colors.control.focus.border
+      },
+      alert: {
+        bg: colors.control.alert.secondary.bg,
+        bgHover: colors.control.alert.secondary.bgHover,
+        bgPress: colors.control.alert.secondary.bgPress,
+        border: colors.control.alert.secondary.border,
+        borderHover: colors.control.alert.secondary.borderHover,
+        borderPress: colors.control.alert.secondary.borderPress
+      },
+      check: {
+        bg: colors.control.check.bg,
+        bgHover: colors.control.check.bgHover,
+        bgDisabled: colors.control.check.bgDisable
+      },
+      faint: {
+        bg: colors.control.faint.bg,
+        bgHover: colors.control.faint.bgHover,
+        border: colors.control.faint.border,
+        borderHover: colors.control.faint.borderHover
+      },
+      toggle: {
+        bg: colors.control.switch.bg,
+        bgHover: colors.control.switch.bgHover
+      },
+      text: {
+        active: colors.control.brand.text.primary,
+        secondary: colors.control.brand.text.secondary,
+        default: colors.control.mono.text.primary,
+        primary: colors.control.text.primary,
+        disabled: colors.control.brand.text.disable,
+        faint: colors.control.check.icon,
+        alert: colors.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.success.primary,
+    warning: colors.content.warning.primary,
+    alert: colors.content.alert.primary,
+    neutral: colors.content.neutral.primary
+  };
+}
+function mapPentagramThemeToLegacy(pentagram, device = "desktop") {
+  const resolver = createResolver(device);
+  const resolvedTypo = resolver.resolvePrimitives(pentagram.typo);
+  const resolvedShape = resolver.resolvePrimitives(pentagram.shape);
+  return {
+    colors: {
+      base: buildBaseColorsFromPentagram(pentagram.colors),
+      ...mapThemeSchemeToLegacy(pentagram.colors)
+    },
+    typo: mapPentagramTypoToLegacy(resolvedTypo),
+    misc: mapPentagramShapeToLegacy(resolvedShape),
+    shadows: pentagram.shadows
+  };
+}
+
 // src/themes/pentagram/presets/pay-station-dark.ts
 import { colord as colord10 } from "colord";
 var baseDark = {
@@ -1960,7 +3000,28 @@ var baseDark = {
   onAlert: colord10("#000000"),
   onNeutral: colord10("#000000")
 };
-var createDarkScheme = (b) => ({
+var pentagramDarkScheme = (b) => ({
+  base: {
+    content: b.content.toHslString(),
+    contentInverse: b.contentInverse.toHslString(),
+    background: b.background.toHslString(),
+    backgroundInverse: b.backgroundInverse.toHslString(),
+    brand: b.brand.toHslString(),
+    brandExtra: b.brandExtra.toHslString(),
+    success: b.success.toHslString(),
+    warning: b.warning.toHslString(),
+    alert: b.alert.toHslString(),
+    neutral: b.neutral.toHslString(),
+    mono: b.mono.toHslString(),
+    linkPrimary: b.linkPrimary.toHslString(),
+    linkSecondary: b.linkSecondary.toHslString(),
+    onBrand: b.onBrand.toHslString(),
+    onBrandExtra: b.onBrandExtra.toHslString(),
+    onSuccess: b.onSuccess.toHslString(),
+    onWarning: b.onWarning.toHslString(),
+    onAlert: b.onAlert.toHslString(),
+    onNeutral: b.onNeutral.toHslString()
+  },
   background: {
     primary: b.background.toHslString(),
     secondary: b.background.darken(0.05).toHslString(),
@@ -2209,9 +3270,9 @@ var createDarkScheme = (b) => ({
       icon: b.onBrand.toHslString()
     },
     faint: {
-      bg: b.mono.alpha(0.1).toHslString(),
-      bgHover: b.mono.alpha(0.15).toHslString(),
-      border: b.mono.alpha(0.15).toHslString(),
+      bg: b.mono.alpha(0.15).toHslString(),
+      bgHover: b.mono.alpha(0.2).toHslString(),
+      border: b.mono.alpha(0.2).toHslString(),
       borderHover: b.mono.alpha(0.25).toHslString()
     },
     slider: {
@@ -2229,8 +3290,12 @@ var createDarkScheme = (b) => ({
     },
     knob: {
       bg: b.onBrand.toHslString(),
-      bgHover: b.onBrand.darken(0.1).toHslString(),
-      bgInactive: b.mono.alpha(0.6).toHslString()
+      bgHover: b.onBrand.lighten(0.1).toHslString(),
+      bgActive: b.onBrand.toHslString(),
+      bgActiveHover: b.onBrand.lighten(0.1).toHslString(),
+      bgInactive: b.mono.toHslString(),
+      bgInactiveHover: b.mono.lighten(0.1).toHslString(),
+      bgDisable: b.mono.alpha(0.25).toHslString()
     },
     text: {
       primary: b.content.toHslString(),
@@ -2267,7 +3332,7 @@ var createDarkScheme = (b) => ({
     }
   }
 });
-var payStationDarkScheme = createDarkScheme(baseDark);
+var pentagramDark = pentagramDarkScheme(baseDark);
 
 // src/themes/pentagram/presets/pay-station-light.ts
 import { colord as colord11 } from "colord";
@@ -2292,7 +3357,28 @@ var base10 = {
   onAlert: colord11("#000000"),
   onNeutral: colord11("#000000")
 };
-var createScheme = (b) => ({
+var pentagramLightScheme = (b) => ({
+  base: {
+    content: b.content.toHslString(),
+    contentInverse: b.contentInverse.toHslString(),
+    background: b.background.toHslString(),
+    backgroundInverse: b.backgroundInverse.toHslString(),
+    brand: b.brand.toHslString(),
+    brandExtra: b.brandExtra.toHslString(),
+    success: b.success.toHslString(),
+    warning: b.warning.toHslString(),
+    alert: b.alert.toHslString(),
+    neutral: b.neutral.toHslString(),
+    mono: b.mono.toHslString(),
+    linkPrimary: b.linkPrimary.toHslString(),
+    linkSecondary: b.linkSecondary.toHslString(),
+    onBrand: b.onBrand.toHslString(),
+    onBrandExtra: b.onBrandExtra.toHslString(),
+    onSuccess: b.onSuccess.toHslString(),
+    onWarning: b.onWarning.toHslString(),
+    onAlert: b.onAlert.toHslString(),
+    onNeutral: b.onNeutral.toHslString()
+  },
   background: {
     primary: b.background.toHslString(),
     secondary: b.background.saturate(0.02).darken(0.05).toHslString(),
@@ -2544,7 +3630,7 @@ var createScheme = (b) => ({
       bg: b.mono.alpha(0.15).toHslString(),
       bgHover: b.mono.alpha(0.2).toHslString(),
       border: b.mono.alpha(0.2).toHslString(),
-      borderHover: b.mono.alpha(0.1).toHslString()
+      borderHover: b.mono.alpha(0.25).toHslString()
     },
     slider: {
       bg: b.brand.toHslString(),
@@ -2562,7 +3648,11 @@ var createScheme = (b) => ({
     knob: {
       bg: b.onBrand.toHslString(),
       bgHover: b.onBrand.darken(0.1).toHslString(),
-      bgInactive: b.onBrand.toHslString()
+      bgActive: b.onBrand.toHslString(),
+      bgActiveHover: b.onBrand.darken(0.1).toHslString(),
+      bgInactive: b.onBrand.toHslString(),
+      bgInactiveHover: b.onBrand.darken(0.1).toHslString(),
+      bgDisable: b.mono.alpha(0.25).toHslString()
     },
     text: {
       primary: b.content.toHslString(),
@@ -2599,7 +3689,64 @@ var createScheme = (b) => ({
     }
   }
 });
-var payStationScheme = createScheme(base10);
+var pentagramLight = pentagramLightScheme(base10);
+
+// src/themes/pentagram/pentagram.ts
+function convertToLegacyBase(pentagramBase) {
+  return {
+    content: pentagramBase.content.toRgbString(),
+    surface: pentagramBase.background.toRgbString(),
+    project: pentagramBase.brand.toRgbString(),
+    accent: pentagramBase.brandExtra.toRgbString(),
+    phantom: pentagramBase.mono.toRgbString(),
+    path: pentagramBase.brand.toRgbString(),
+    success: pentagramBase.success.toRgbString(),
+    warning: pentagramBase.warning.toRgbString(),
+    alert: pentagramBase.alert.toRgbString(),
+    neutral: pentagramBase.neutral.toRgbString()
+  };
+}
+var desktopResolver = createResolver("desktop");
+var resolvedTypoDesktop = desktopResolver.resolvePrimitives(
+  typo_primitives_default
+);
+var resolvedShapeDesktop = desktopResolver.resolvePrimitives(shape_primitives_default);
+var pentagramTypo = mapPentagramTypoToLegacy(resolvedTypoDesktop);
+var pentagramMisc = mapPentagramShapeToLegacy(resolvedShapeDesktop);
+var paystation4PentagramLightLegacyCompatible = {
+  colors: {
+    base: convertToLegacyBase(base10),
+    ...mapThemeSchemeToLegacy(pentagramLight)
+  },
+  typo: pentagramTypo,
+  misc: pentagramMisc,
+  shadows: shadowsDefault,
+  globalStyle: "pentagram"
+};
+var paystation4PentagramDarkLegacyCompatible = {
+  colors: {
+    base: convertToLegacyBase(baseDark),
+    ...mapThemeSchemeToLegacy(pentagramDark)
+  },
+  typo: pentagramTypo,
+  misc: pentagramMisc,
+  shadows: shadowsDefault,
+  globalStyle: "pentagram"
+};
+var paystation4PentagramLight = {
+  colors: pentagramLight,
+  shape: shape_primitives_default,
+  typo: typo_primitives_default,
+  shadows: shadowsDefault,
+  globalStyle: "pentagram"
+};
+var paystation4PentagramDark = {
+  colors: pentagramDark,
+  shape: shape_primitives_default,
+  typo: typo_primitives_default,
+  shadows: shadowsDefault,
+  globalStyle: "pentagram"
+};
 
 // src/themes/index.ts
 var themes = {
@@ -2784,8 +3931,8 @@ var pentagramBaseColors = {
   payStationDark: baseDark
 };
 var pentagramColorsScheme = {
-  payStationLight: createScheme,
-  payStationDark: createDarkScheme
+  payStationLight: pentagramLightScheme,
+  payStationDark: pentagramDarkScheme
 };
 var pentagramBaseColorsKeys = [
   "content",
@@ -2868,31 +4015,48 @@ var applyPentagramColors = (schemeBase, overrides) => {
   return result;
 };
 export {
+  DELETED_LEGACY_TYPO_VARS,
+  PentagramResolver,
   base10 as base,
   baseDark,
-  createDarkScheme,
-  createScheme,
+  buildBaseColorsFromPentagram,
+  createResolver,
   emails,
   emailsDark,
   emailsThemes,
+  flattenPentagramShapeToVars,
   generateWithScheme,
+  mapPentagramShapeToLegacy,
+  mapPentagramThemeToLegacy,
+  mapPentagramTypoToLegacy,
+  mapThemeSchemeToLegacy,
   palettes,
-  payStationDarkScheme,
-  payStationScheme,
   paystation4,
   paystation4Dark,
   paystation4Gaijin,
   paystation4Nexters,
+  paystation4PentagramDark,
+  paystation4PentagramDarkLegacyCompatible,
+  paystation4PentagramLight,
+  paystation4PentagramLightLegacyCompatible,
   paystation4Take2,
   paystation4Themes,
+  pentagramDark,
+  pentagramDarkScheme,
+  pentagramLight,
+  pentagramLightScheme,
   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