@xsolla/switch-theme-customization 0.161.3 → 0.162.0-pr320.1780402460

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js CHANGED
@@ -30,32 +30,49 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.ts
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
+ DELETED_LEGACY_TYPO_VARS: () => DELETED_LEGACY_TYPO_VARS,
34
+ PentagramResolver: () => PentagramResolver,
33
35
  base: () => base10,
34
36
  baseDark: () => baseDark,
35
- createDarkScheme: () => createDarkScheme,
36
- createScheme: () => createScheme,
37
+ buildBaseColorsFromPentagram: () => buildBaseColorsFromPentagram,
38
+ createResolver: () => createResolver,
37
39
  emails: () => emails,
38
40
  emailsDark: () => emailsDark,
39
41
  emailsThemes: () => emailsThemes,
42
+ flattenPentagramShapeToVars: () => flattenPentagramShapeToVars,
40
43
  generateWithScheme: () => generateWithScheme,
44
+ mapHandCraftedPentagramToLegacy: () => mapHandCraftedPentagramToLegacy,
45
+ mapPentagramShapeToLegacy: () => mapPentagramShapeToLegacy,
46
+ mapPentagramThemeToLegacy: () => mapPentagramThemeToLegacy,
47
+ mapPentagramTypoToLegacy: () => mapPentagramTypoToLegacy,
41
48
  palettes: () => palettes,
42
- payStationDarkScheme: () => payStationDarkScheme,
43
- payStationScheme: () => payStationScheme,
44
49
  paystation4: () => paystation4,
45
50
  paystation4Dark: () => paystation4Dark,
46
51
  paystation4Gaijin: () => paystation4Gaijin,
47
52
  paystation4Nexters: () => paystation4Nexters,
53
+ paystation4PentagramDark: () => paystation4PentagramDark,
54
+ paystation4PentagramDarkLegacyCompatible: () => paystation4PentagramDarkLegacyCompatible,
55
+ paystation4PentagramLight: () => paystation4PentagramLight,
56
+ paystation4PentagramLightLegacyCompatible: () => paystation4PentagramLightLegacyCompatible,
48
57
  paystation4Take2: () => paystation4Take2,
49
58
  paystation4Themes: () => paystation4Themes,
59
+ pentagramDark: () => pentagramDark,
60
+ pentagramDarkScheme: () => pentagramDarkScheme,
61
+ pentagramLight: () => pentagramLight,
62
+ pentagramLightScheme: () => pentagramLightScheme,
50
63
  primaryPalette: () => primaryPalette,
51
64
  publisherV2: () => publisherV2,
52
65
  publisherV2Dark: () => publisherV2Dark,
53
66
  publisherV2Themes: () => publisherV2Themes,
67
+ resolveForDesktop: () => resolveForDesktop,
68
+ resolveForMobile: () => resolveForMobile,
69
+ shapePrimitives: () => shape_primitives_default,
54
70
  themeGenerator: () => themeGenerator,
55
71
  themes: () => themes,
56
72
  themesBaseColors: () => themesBaseColors,
57
73
  themesBaseColorsArray: () => themesBaseColorsArray,
58
- themesColorsScheme: () => themesColorsScheme
74
+ themesColorsScheme: () => themesColorsScheme,
75
+ typoPrimitives: () => typo_primitives_default
59
76
  });
60
77
  module.exports = __toCommonJS(index_exports);
61
78
 
@@ -1998,6 +2015,1164 @@ var themesColorsScheme = {
1998
2015
  emailsDark: emailsDarkScheme
1999
2016
  };
2000
2017
 
2018
+ // src/pentagram-primitives/typo-primitives.json
2019
+ var typo_primitives_default = {
2020
+ heading: {
2021
+ h1: {
2022
+ fontSize: "450",
2023
+ lineHeight: "display/450",
2024
+ fontWeight: 700
2025
+ },
2026
+ h2: {
2027
+ fontSize: "350",
2028
+ lineHeight: "display/350",
2029
+ fontWeight: 700
2030
+ },
2031
+ h3: {
2032
+ fontSize: "300",
2033
+ lineHeight: "display/300",
2034
+ fontWeight: 700
2035
+ },
2036
+ h4: {
2037
+ fontSize: "250",
2038
+ lineHeight: "display/250",
2039
+ fontWeight: 700
2040
+ },
2041
+ h5: {
2042
+ fontSize: "200",
2043
+ lineHeight: "display/200",
2044
+ fontWeight: 700
2045
+ }
2046
+ },
2047
+ basic: {
2048
+ display: {
2049
+ fontFamily: "compact",
2050
+ fontSize: "300",
2051
+ lineHeight: "compact/300",
2052
+ fontWeight: 500
2053
+ },
2054
+ bodyLg: {
2055
+ fontSize: "175",
2056
+ lineHeight: "compact/175",
2057
+ default: {
2058
+ fontWeight: 400
2059
+ },
2060
+ accent: {
2061
+ fontWeight: 500
2062
+ },
2063
+ paragraph: {
2064
+ spacing: "spacing/250",
2065
+ lineHeight: "text/175"
2066
+ }
2067
+ },
2068
+ bodyMd: {
2069
+ fontSize: "150",
2070
+ lineHeight: "compact/150",
2071
+ default: {
2072
+ fontWeight: 400
2073
+ },
2074
+ accent: {
2075
+ fontWeight: 500
2076
+ },
2077
+ paragraph: {
2078
+ spacing: "spacing/200",
2079
+ lineHeight: "text/150"
2080
+ }
2081
+ },
2082
+ bodySm: {
2083
+ fontSize: "125",
2084
+ lineHeight: "compact/125",
2085
+ default: {
2086
+ fontWeight: 400
2087
+ },
2088
+ accent: {
2089
+ fontWeight: 500
2090
+ },
2091
+ paragraph: {
2092
+ spacing: "spacing/150",
2093
+ lineHeight: "text/125"
2094
+ }
2095
+ },
2096
+ bodyXs: {
2097
+ fontSize: "100",
2098
+ lineHeight: "compact/100",
2099
+ default: {
2100
+ fontWeight: 400
2101
+ },
2102
+ accent: {
2103
+ fontWeight: 500
2104
+ },
2105
+ paragraph: {
2106
+ spacing: "spacing/100",
2107
+ lineHeight: "text/100"
2108
+ }
2109
+ },
2110
+ bodyXxs: {
2111
+ fontSize: "75",
2112
+ lineHeight: "compact/75",
2113
+ default: {
2114
+ fontWeight: 400
2115
+ },
2116
+ accent: {
2117
+ fontWeight: 500
2118
+ },
2119
+ paragraph: {
2120
+ spacing: "spacing/75",
2121
+ lineHeight: "text/75"
2122
+ }
2123
+ }
2124
+ },
2125
+ control: {
2126
+ button: {
2127
+ xl: { scale: "600" },
2128
+ lg: { scale: "500" },
2129
+ md: { scale: "400" },
2130
+ sm: { scale: "300" },
2131
+ xs: { scale: "200" }
2132
+ },
2133
+ input: {
2134
+ xl: { scale: "600" },
2135
+ lg: { scale: "500" },
2136
+ md: { scale: "400" },
2137
+ sm: { scale: "300" },
2138
+ xs: { scale: "200" }
2139
+ },
2140
+ checkbox: {
2141
+ xl: { scale: "600" },
2142
+ lg: { scale: "500" },
2143
+ md: { scale: "400" },
2144
+ sm: { scale: "300" }
2145
+ },
2146
+ tab: {
2147
+ xl: { scale: "600" },
2148
+ lg: { scale: "500" },
2149
+ md: { scale: "400" },
2150
+ sm: { scale: "300" },
2151
+ xs: { scale: "300" }
2152
+ },
2153
+ radio: {
2154
+ xl: { scale: "600" },
2155
+ lg: { scale: "500" },
2156
+ md: { scale: "400" },
2157
+ sm: { scale: "300" }
2158
+ },
2159
+ segmentedItem: {
2160
+ xl: { scale: "500" },
2161
+ lg: { scale: "400" },
2162
+ md: { scale: "300" },
2163
+ sm: { scale: "200" }
2164
+ },
2165
+ tag: {
2166
+ xl: { scale: "600" },
2167
+ lg: { scale: "500" },
2168
+ md: { scale: "400" },
2169
+ sm: { scale: "300" },
2170
+ xs: { scale: "200" }
2171
+ },
2172
+ toggleButton: {
2173
+ xl: { scale: "600" },
2174
+ lg: { scale: "500" },
2175
+ md: { scale: "400" },
2176
+ sm: { scale: "300" },
2177
+ xs: { scale: "200" }
2178
+ }
2179
+ }
2180
+ };
2181
+
2182
+ // src/pentagram-primitives/shape-primitives.json
2183
+ var shape_primitives_default = {
2184
+ button: {
2185
+ xl: {
2186
+ borderRadius: "radius/100",
2187
+ borderWidth: "stroke/1"
2188
+ },
2189
+ lg: {
2190
+ borderRadius: "radius/100",
2191
+ borderWidth: "stroke/1"
2192
+ },
2193
+ md: {
2194
+ borderRadius: "radius/75",
2195
+ borderWidth: "stroke/1"
2196
+ },
2197
+ sm: {
2198
+ borderRadius: "radius/50",
2199
+ borderWidth: "stroke/1"
2200
+ },
2201
+ xs: {
2202
+ borderRadius: "radius/50",
2203
+ borderWidth: "stroke/1"
2204
+ }
2205
+ },
2206
+ checkbox: {
2207
+ xl: {
2208
+ borderRadius: "radius/50",
2209
+ borderWidth: "stroke/1"
2210
+ },
2211
+ lg: {
2212
+ borderRadius: "radius/50",
2213
+ borderWidth: "stroke/1"
2214
+ },
2215
+ md: {
2216
+ borderRadius: "radius/50",
2217
+ borderWidth: "stroke/1"
2218
+ },
2219
+ sm: {
2220
+ borderRadius: "radius/50",
2221
+ borderWidth: "stroke/1"
2222
+ }
2223
+ },
2224
+ input: {
2225
+ xl: {
2226
+ borderRadius: "radius/100",
2227
+ borderWidth: "stroke/1"
2228
+ },
2229
+ lg: {
2230
+ borderRadius: "radius/100",
2231
+ borderWidth: "stroke/1"
2232
+ },
2233
+ md: {
2234
+ borderRadius: "radius/100",
2235
+ borderWidth: "stroke/1"
2236
+ },
2237
+ sm: {
2238
+ borderRadius: "radius/50",
2239
+ borderWidth: "stroke/1"
2240
+ },
2241
+ xs: {
2242
+ borderRadius: "radius/50",
2243
+ borderWidth: "stroke/1"
2244
+ }
2245
+ },
2246
+ cell: {
2247
+ borderRadius: "radius/100",
2248
+ borderWidth: "stroke/1"
2249
+ },
2250
+ modal: {
2251
+ borderRadius: "radius/100"
2252
+ },
2253
+ toast: {
2254
+ borderRadius: "radius/50",
2255
+ borderWidth: "0px"
2256
+ },
2257
+ segmentedItem: {
2258
+ xl: {
2259
+ borderRadius: "radius/50",
2260
+ borderWidth: "stroke/1"
2261
+ },
2262
+ lg: {
2263
+ borderRadius: "radius/50",
2264
+ borderWidth: "stroke/1"
2265
+ },
2266
+ md: {
2267
+ borderRadius: "radius/50",
2268
+ borderWidth: "stroke/1"
2269
+ },
2270
+ sm: {
2271
+ borderRadius: "radius/25",
2272
+ borderWidth: "stroke/1"
2273
+ }
2274
+ },
2275
+ segmented: {
2276
+ xl: {
2277
+ borderRadius: "radius/100",
2278
+ borderWidth: "stroke/1"
2279
+ },
2280
+ lg: {
2281
+ borderRadius: "radius/100",
2282
+ borderWidth: "stroke/1"
2283
+ },
2284
+ md: {
2285
+ borderRadius: "radius/100",
2286
+ borderWidth: "stroke/1"
2287
+ },
2288
+ sm: {
2289
+ borderRadius: "radius/50",
2290
+ borderWidth: "stroke/1"
2291
+ }
2292
+ },
2293
+ switch: {
2294
+ xl: {
2295
+ borderRadius: "radius/50",
2296
+ borderWidth: "stroke/1"
2297
+ },
2298
+ lg: {
2299
+ borderRadius: "radius/50",
2300
+ borderWidth: "stroke/1"
2301
+ },
2302
+ md: {
2303
+ borderRadius: "radius/50",
2304
+ borderWidth: "stroke/1"
2305
+ },
2306
+ sm: {
2307
+ borderRadius: "radius/50",
2308
+ borderWidth: "stroke/1"
2309
+ }
2310
+ },
2311
+ knob: {
2312
+ xl: {
2313
+ borderRadius: "radius/25"
2314
+ },
2315
+ lg: {
2316
+ borderRadius: "radius/25"
2317
+ },
2318
+ md: {
2319
+ borderRadius: "radius/25"
2320
+ },
2321
+ sm: {
2322
+ borderRadius: "radius/25"
2323
+ }
2324
+ },
2325
+ tabItem: {
2326
+ xl: {
2327
+ borderRadius: "radius/100"
2328
+ },
2329
+ lg: {
2330
+ borderRadius: "radius/100"
2331
+ },
2332
+ md: {
2333
+ borderRadius: "radius/50"
2334
+ },
2335
+ sm: {
2336
+ borderRadius: "radius/50"
2337
+ }
2338
+ },
2339
+ tag: {
2340
+ xl: {
2341
+ borderRadius: "radius/100",
2342
+ borderWidth: "stroke/1"
2343
+ },
2344
+ lg: {
2345
+ borderRadius: "radius/100",
2346
+ borderWidth: "stroke/1"
2347
+ },
2348
+ md: {
2349
+ borderRadius: "radius/75",
2350
+ borderWidth: "stroke/1"
2351
+ },
2352
+ sm: {
2353
+ borderRadius: "radius/50",
2354
+ borderWidth: "stroke/1"
2355
+ },
2356
+ xs: {
2357
+ borderRadius: "radius/50",
2358
+ borderWidth: "stroke/1"
2359
+ }
2360
+ },
2361
+ tagLabel: {
2362
+ borderRadius: "0px"
2363
+ },
2364
+ tooltip: {
2365
+ xl: {
2366
+ borderRadius: "radius/100"
2367
+ },
2368
+ lg: {
2369
+ borderRadius: "radius/100"
2370
+ },
2371
+ md: {
2372
+ borderRadius: "radius/100"
2373
+ },
2374
+ sm: {
2375
+ borderRadius: "radius/50"
2376
+ }
2377
+ },
2378
+ radio: {
2379
+ xl: {
2380
+ borderRadius: "radius/999",
2381
+ borderWidth: "stroke/1"
2382
+ },
2383
+ lg: {
2384
+ borderRadius: "radius/999",
2385
+ borderWidth: "stroke/1"
2386
+ },
2387
+ md: {
2388
+ borderRadius: "radius/999",
2389
+ borderWidth: "stroke/1"
2390
+ },
2391
+ sm: {
2392
+ borderRadius: "radius/999",
2393
+ borderWidth: "stroke/1"
2394
+ }
2395
+ },
2396
+ contextMenu: {
2397
+ xl: {
2398
+ borderRadius: "radius/100"
2399
+ },
2400
+ lg: {
2401
+ borderRadius: "radius/100"
2402
+ },
2403
+ md: {
2404
+ borderRadius: "radius/100"
2405
+ },
2406
+ sm: {
2407
+ borderRadius: "radius/50"
2408
+ }
2409
+ },
2410
+ avatar: {
2411
+ xl: {
2412
+ borderRadius: "radius/100",
2413
+ borderWidth: "stroke/2"
2414
+ },
2415
+ lg: {
2416
+ borderRadius: "radius/75",
2417
+ borderWidth: "stroke/2"
2418
+ },
2419
+ md: {
2420
+ borderRadius: "radius/75",
2421
+ borderWidth: "stroke/2"
2422
+ },
2423
+ sm: {
2424
+ borderRadius: "radius/50",
2425
+ borderWidth: "stroke/2"
2426
+ },
2427
+ xs: {
2428
+ borderRadius: "radius/50",
2429
+ borderWidth: "stroke/2"
2430
+ },
2431
+ xxs: {
2432
+ borderRadius: "radius/25",
2433
+ borderWidth: "stroke/2"
2434
+ }
2435
+ },
2436
+ toggleButtonGroup: {
2437
+ xl: {
2438
+ borderRadius: "radius/100",
2439
+ borderWidth: "stroke/1"
2440
+ },
2441
+ lg: {
2442
+ borderRadius: "radius/100",
2443
+ borderWidth: "stroke/1"
2444
+ },
2445
+ md: {
2446
+ borderRadius: "radius/75",
2447
+ borderWidth: "stroke/1"
2448
+ },
2449
+ sm: {
2450
+ borderRadius: "radius/50",
2451
+ borderWidth: "stroke/1"
2452
+ },
2453
+ xs: {
2454
+ borderRadius: "radius/50",
2455
+ borderWidth: "stroke/1"
2456
+ }
2457
+ }
2458
+ };
2459
+
2460
+ // src/pentagram-to-legacy/pentagram-resolver.ts
2461
+ var FONT_SIZE_SCALE = {
2462
+ "75": { desktop: "10px", mobile: "10px" },
2463
+ "100": { desktop: "12px", mobile: "11px" },
2464
+ "125": { desktop: "14px", mobile: "12px" },
2465
+ "150": { desktop: "16px", mobile: "14px" },
2466
+ "175": { desktop: "18px", mobile: "16px" },
2467
+ "200": { desktop: "20px", mobile: "18px" },
2468
+ "250": { desktop: "24px", mobile: "20px" },
2469
+ "300": { desktop: "28px", mobile: "24px" },
2470
+ "350": { desktop: "32px", mobile: "28px" },
2471
+ "450": { desktop: "40px", mobile: "32px" },
2472
+ "550": { desktop: "48px", mobile: "40px" },
2473
+ "650": { desktop: "56px", mobile: "48px" },
2474
+ "750": { desktop: "64px", mobile: "56px" }
2475
+ };
2476
+ var LINE_HEIGHT_DISPLAY = {
2477
+ "75": { desktop: "10px", mobile: "10px" },
2478
+ "100": { desktop: "12px", mobile: "11px" },
2479
+ "125": { desktop: "14px", mobile: "12px" },
2480
+ "150": { desktop: "16px", mobile: "14px" },
2481
+ "175": { desktop: "18px", mobile: "16px" },
2482
+ "200": { desktop: "20px", mobile: "18px" },
2483
+ "250": { desktop: "24px", mobile: "20px" },
2484
+ "300": { desktop: "28px", mobile: "24px" },
2485
+ "350": { desktop: "32px", mobile: "28px" },
2486
+ "450": { desktop: "40px", mobile: "32px" },
2487
+ "550": { desktop: "48px", mobile: "40px" },
2488
+ "650": { desktop: "56px", mobile: "48px" },
2489
+ "750": { desktop: "64px", mobile: "56px" }
2490
+ };
2491
+ var LINE_HEIGHT_COMPACT = {
2492
+ "75": { desktop: "14px", mobile: "13px" },
2493
+ "100": { desktop: "16px", mobile: "14px" },
2494
+ "125": { desktop: "18px", mobile: "16px" },
2495
+ "150": { desktop: "20px", mobile: "18px" },
2496
+ "175": { desktop: "24px", mobile: "20px" },
2497
+ "200": { desktop: "26px", mobile: "24px" },
2498
+ "250": { desktop: "30px", mobile: "26px" },
2499
+ "300": { desktop: "36px", mobile: "30px" },
2500
+ "350": { desktop: "42px", mobile: "36px" },
2501
+ "450": { desktop: "52px", mobile: "42px" },
2502
+ "550": { desktop: "62px", mobile: "52px" },
2503
+ "650": { desktop: "72px", mobile: "62px" },
2504
+ "750": { desktop: "82px", mobile: "72px" }
2505
+ };
2506
+ var LINE_HEIGHT_TEXT = {
2507
+ "75": { desktop: "14px", mobile: "13px" },
2508
+ "100": { desktop: "18px", mobile: "14px" },
2509
+ "125": { desktop: "20px", mobile: "16px" },
2510
+ "150": { desktop: "22px", mobile: "18px" },
2511
+ "175": { desktop: "26px", mobile: "20px" },
2512
+ "200": { desktop: "28px", mobile: "24px" },
2513
+ "250": { desktop: "34px", mobile: "26px" },
2514
+ "300": { desktop: "40px", mobile: "30px" },
2515
+ "350": { desktop: "44px", mobile: "36px" },
2516
+ "450": { desktop: "56px", mobile: "42px" },
2517
+ "550": { desktop: "66px", mobile: "52px" },
2518
+ "650": { desktop: "78px", mobile: "62px" },
2519
+ "750": { desktop: "88px", mobile: "72px" }
2520
+ };
2521
+ var TYPOGRAPHY_SCALE_FONT_SIZE = {
2522
+ "200": "10px",
2523
+ "300": "12px",
2524
+ "400": "14px",
2525
+ "500": "16px",
2526
+ "600": "18px"
2527
+ };
2528
+ var TYPOGRAPHY_SCALE_LINE_HEIGHT = {
2529
+ "200": "16px",
2530
+ "300": "18px",
2531
+ "400": "20px",
2532
+ "500": "22px",
2533
+ "600": "24px"
2534
+ };
2535
+ var SPACING_SCALE = {
2536
+ "50": "2px",
2537
+ "75": "4px",
2538
+ "100": "6px",
2539
+ "150": "8px",
2540
+ "200": "10px",
2541
+ "250": "12px",
2542
+ "300": "16px",
2543
+ "400": "20px",
2544
+ "500": "24px",
2545
+ "600": "32px",
2546
+ "800": "48px",
2547
+ "1000": "64px"
2548
+ };
2549
+ var FONT_FAMILY = {
2550
+ compact: "'Aktiv Grotesk', sans-serif",
2551
+ display: "'Pilat Wide', 'Aktiv Grotesk', sans-serif",
2552
+ text: "'Aktiv Grotesk', sans-serif"
2553
+ };
2554
+ var RADIUS_SCALE = {
2555
+ "25": "2px",
2556
+ "50": "4px",
2557
+ "75": "6px",
2558
+ "100": "8px",
2559
+ "150": "12px",
2560
+ "200": "16px",
2561
+ "999": "999px"
2562
+ };
2563
+ var STROKE_SCALE = {
2564
+ "1": "1px",
2565
+ "2": "2px",
2566
+ "3": "3px"
2567
+ };
2568
+ var PentagramResolver = class {
2569
+ device;
2570
+ constructor(device = "desktop") {
2571
+ this.device = device;
2572
+ }
2573
+ setDevice(device) {
2574
+ this.device = device;
2575
+ }
2576
+ /**
2577
+ * Resolve a single alias to a concrete value.
2578
+ *
2579
+ * @param alias - Alias string like "300" (fontSize), "display/300" (lineHeight), or "radius/100"
2580
+ * @param context - Optional context hint: 'fontSize' or 'lineHeight'
2581
+ * @returns Resolved value (e.g., "28px") or original if not an alias
2582
+ */
2583
+ resolve(alias, context) {
2584
+ if (typeof alias !== "string") {
2585
+ return alias;
2586
+ }
2587
+ if (this.isResolved(alias)) {
2588
+ return alias;
2589
+ }
2590
+ if (/^\d+$/.test(alias) && context !== "lineHeight") {
2591
+ const value = FONT_SIZE_SCALE[alias];
2592
+ return value ? value[this.device] : alias;
2593
+ }
2594
+ if (alias.startsWith("display/")) {
2595
+ const step = alias.replace("display/", "");
2596
+ const value = LINE_HEIGHT_DISPLAY[step];
2597
+ return value ? value[this.device] : alias;
2598
+ }
2599
+ if (alias.startsWith("compact/")) {
2600
+ const step = alias.replace("compact/", "");
2601
+ const value = LINE_HEIGHT_COMPACT[step];
2602
+ return value ? value[this.device] : alias;
2603
+ }
2604
+ if (alias.startsWith("text/")) {
2605
+ const step = alias.replace("text/", "");
2606
+ const value = LINE_HEIGHT_TEXT[step];
2607
+ return value ? value[this.device] : alias;
2608
+ }
2609
+ if (alias.startsWith("font-size/")) {
2610
+ const step = alias.replace("font-size/", "");
2611
+ const value = FONT_SIZE_SCALE[step];
2612
+ return value ? value[this.device] : alias;
2613
+ }
2614
+ if (alias.startsWith("line-height/display/")) {
2615
+ const step = alias.replace("line-height/display/", "");
2616
+ const value = LINE_HEIGHT_DISPLAY[step];
2617
+ return value ? value[this.device] : alias;
2618
+ }
2619
+ if (alias.startsWith("line-height/compact/")) {
2620
+ const step = alias.replace("line-height/compact/", "");
2621
+ const value = LINE_HEIGHT_COMPACT[step];
2622
+ return value ? value[this.device] : alias;
2623
+ }
2624
+ if (alias.startsWith("line-height/text/")) {
2625
+ const step = alias.replace("line-height/text/", "");
2626
+ const value = LINE_HEIGHT_TEXT[step];
2627
+ return value ? value[this.device] : alias;
2628
+ }
2629
+ if (alias.startsWith("typography-scale/font-size/")) {
2630
+ const step = alias.replace("typography-scale/font-size/", "");
2631
+ return TYPOGRAPHY_SCALE_FONT_SIZE[step] ?? alias;
2632
+ }
2633
+ if (alias.startsWith("typography-scale/line-height/")) {
2634
+ const step = alias.replace("typography-scale/line-height/", "");
2635
+ return TYPOGRAPHY_SCALE_LINE_HEIGHT[step] ?? alias;
2636
+ }
2637
+ if (alias.startsWith("spacing/")) {
2638
+ const step = alias.replace("spacing/", "");
2639
+ return SPACING_SCALE[step] ?? alias;
2640
+ }
2641
+ if (FONT_FAMILY[alias]) {
2642
+ return FONT_FAMILY[alias];
2643
+ }
2644
+ if (alias.startsWith("radius/")) {
2645
+ const step = alias.replace("radius/", "");
2646
+ return RADIUS_SCALE[step] ?? alias;
2647
+ }
2648
+ if (alias.startsWith("stroke/")) {
2649
+ const step = alias.replace("stroke/", "");
2650
+ return STROKE_SCALE[step] ?? alias;
2651
+ }
2652
+ return alias;
2653
+ }
2654
+ /**
2655
+ * Recursively resolve all aliases in an object.
2656
+ *
2657
+ * @param obj - Object containing alias strings
2658
+ * @returns New object with all aliases resolved to concrete values
2659
+ */
2660
+ resolvePrimitives(obj) {
2661
+ if (obj === null || obj === void 0) {
2662
+ return obj;
2663
+ }
2664
+ if (typeof obj === "string" || typeof obj === "number") {
2665
+ return this.resolve(obj);
2666
+ }
2667
+ if (Array.isArray(obj)) {
2668
+ return obj.map((item) => this.resolvePrimitives(item));
2669
+ }
2670
+ if (typeof obj === "object") {
2671
+ const input = obj;
2672
+ const result = {};
2673
+ if ("scale" in input && typeof input.scale === "string" && Object.keys(input).length === 1) {
2674
+ const scale = input.scale;
2675
+ return {
2676
+ fontSize: TYPOGRAPHY_SCALE_FONT_SIZE[scale] ?? `${scale}px`,
2677
+ lineHeight: TYPOGRAPHY_SCALE_LINE_HEIGHT[scale] ?? `${scale}px`
2678
+ };
2679
+ }
2680
+ for (const [key, value] of Object.entries(input)) {
2681
+ if (key === "fontSize" && typeof value === "string") {
2682
+ result[key] = this.resolve(value, "fontSize");
2683
+ } else if (key === "lineHeight" && typeof value === "string") {
2684
+ result[key] = this.resolve(value, "lineHeight");
2685
+ } else {
2686
+ result[key] = this.resolvePrimitives(value);
2687
+ }
2688
+ }
2689
+ return result;
2690
+ }
2691
+ return obj;
2692
+ }
2693
+ /**
2694
+ * Check if a value is already resolved (not an alias).
2695
+ */
2696
+ isResolved(value) {
2697
+ 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";
2698
+ }
2699
+ };
2700
+ function createResolver(device = "desktop") {
2701
+ return new PentagramResolver(device);
2702
+ }
2703
+ function resolveForDesktop(obj) {
2704
+ return new PentagramResolver("desktop").resolvePrimitives(obj);
2705
+ }
2706
+ function resolveForMobile(obj) {
2707
+ return new PentagramResolver("mobile").resolvePrimitives(obj);
2708
+ }
2709
+
2710
+ // src/pentagram-to-legacy/map-pentagram-typo-to-legacy.ts
2711
+ function extractControlTypo(size, defaultFontWeight = 400) {
2712
+ if (!size) {
2713
+ return {
2714
+ fontSize: "14px",
2715
+ lineHeight: "20px",
2716
+ fontWeight: defaultFontWeight
2717
+ };
2718
+ }
2719
+ return {
2720
+ fontSize: size.fontSize,
2721
+ lineHeight: size.lineHeight,
2722
+ fontWeight: defaultFontWeight
2723
+ };
2724
+ }
2725
+ function buildBasicStyle(variant, useAccent = false) {
2726
+ const fontWeight = useAccent ? variant.accent?.fontWeight ?? 500 : variant.default?.fontWeight ?? 400;
2727
+ return {
2728
+ fontSize: variant.fontSize,
2729
+ lineHeight: variant.lineHeight,
2730
+ fontWeight
2731
+ };
2732
+ }
2733
+ function buildParagraphStyle(variant) {
2734
+ return {
2735
+ fontSize: variant.fontSize,
2736
+ lineHeight: variant.paragraph?.lineHeight ?? variant.lineHeight,
2737
+ fontWeight: variant.default?.fontWeight ?? 400
2738
+ };
2739
+ }
2740
+ var DEFAULT_FONT_FAMILY = `'GraphikLCWebUikit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
2741
+ function mapPentagramTypoToLegacy(pentagram, fontFamily = DEFAULT_FONT_FAMILY) {
2742
+ const { heading, basic, control } = pentagram;
2743
+ return {
2744
+ fontFamily,
2745
+ core: {
2746
+ // heading.h1 → core.h1
2747
+ h1: {
2748
+ fontSize: heading.h1.fontSize,
2749
+ lineHeight: heading.h1.lineHeight,
2750
+ fontWeight: heading.h1.fontWeight ?? 700
2751
+ },
2752
+ // heading.h2 → core.h2
2753
+ h2: {
2754
+ fontSize: heading.h2.fontSize,
2755
+ lineHeight: heading.h2.lineHeight,
2756
+ fontWeight: heading.h2.fontWeight ?? 700
2757
+ },
2758
+ // heading.h3 → core.h3
2759
+ h3: {
2760
+ fontSize: heading.h3.fontSize,
2761
+ lineHeight: heading.h3.lineHeight,
2762
+ fontWeight: heading.h3.fontWeight ?? 700
2763
+ },
2764
+ // heading.h4 → core.h4
2765
+ h4: {
2766
+ fontSize: heading.h4.fontSize,
2767
+ lineHeight: heading.h4.lineHeight,
2768
+ fontWeight: heading.h4.fontWeight ?? 700
2769
+ },
2770
+ // basic.bodyMd → core.bodyMd
2771
+ bodyMd: buildBasicStyle(basic.bodyMd, false),
2772
+ // basic.bodyMd.accent → core.bodyMdAccent
2773
+ bodyMdAccent: buildBasicStyle(basic.bodyMd, true),
2774
+ // basic.bodyLg.accent → core.bodyLgAccent
2775
+ bodyLgAccent: buildBasicStyle(basic.bodyLg, true),
2776
+ // basic.bodyLg → core.bodyLg (DELETED but required for compatibility)
2777
+ bodyLg: buildBasicStyle(basic.bodyLg, false),
2778
+ // basic.bodyMd.paragraph → core.paragraph
2779
+ paragraph: buildParagraphStyle(basic.bodyMd),
2780
+ // basic.bodyMd → core.label (same as bodyMd)
2781
+ label: buildBasicStyle(basic.bodyMd, false),
2782
+ // basic.bodySm → core.minor
2783
+ minor: buildBasicStyle(basic.bodySm, false),
2784
+ // core.strong (DELETED but required for compatibility)
2785
+ strong: buildBasicStyle(basic.bodyMd, true)
2786
+ },
2787
+ components: {
2788
+ // control.button.* → components.button.*
2789
+ button: {
2790
+ sm: extractControlTypo(control.button.sm, 500),
2791
+ md: extractControlTypo(control.button.md, 500),
2792
+ lg: extractControlTypo(control.button.lg, 500)
2793
+ },
2794
+ // control.input.* → components.input.*
2795
+ input: {
2796
+ sm: extractControlTypo(control.input.sm, 400),
2797
+ md: extractControlTypo(control.input.md, 400),
2798
+ lg: extractControlTypo(control.input.lg, 400)
2799
+ },
2800
+ // control.tab.* → components.tab.*
2801
+ tab: {
2802
+ sm: extractControlTypo(control.tab.sm, 500),
2803
+ md: extractControlTypo(control.tab.md, 500),
2804
+ lg: extractControlTypo(control.tab.lg, 500)
2805
+ },
2806
+ // control.checkbox.* + control.radio.* → components.check.*
2807
+ // (checkbox and radio share the same legacy component)
2808
+ check: {
2809
+ sm: extractControlTypo(control.checkbox?.sm ?? control.radio?.sm, 400),
2810
+ md: extractControlTypo(control.checkbox?.md ?? control.radio?.md, 400),
2811
+ lg: extractControlTypo(control.checkbox?.lg ?? control.radio?.lg, 400)
2812
+ },
2813
+ // basic.bodyMd/bodySm/bodyXs → components.label.lg/md/sm
2814
+ label: {
2815
+ sm: buildBasicStyle(basic.bodyXs, false),
2816
+ md: buildBasicStyle(basic.bodySm, false),
2817
+ lg: buildBasicStyle(basic.bodyMd, false)
2818
+ }
2819
+ }
2820
+ };
2821
+ }
2822
+ var DELETED_LEGACY_TYPO_VARS = [
2823
+ "components.heading",
2824
+ "components.fieldGroup",
2825
+ "core.strong",
2826
+ "core.bodyLg"
2827
+ ];
2828
+
2829
+ // src/pentagram-to-legacy/map-pentagram-shape-to-legacy.ts
2830
+ function getShapeBorderRadius(shape, preferredSize = "md", fallback = "8px") {
2831
+ if (!shape) return fallback;
2832
+ const size = shape[preferredSize] ?? shape["lg"] ?? shape["sm"] ?? Object.values(shape)[0];
2833
+ return size?.borderRadius ?? fallback;
2834
+ }
2835
+ function getShapeBorderWidth(shape, preferredSize = "md", fallback = "1px") {
2836
+ if (!shape) return fallback;
2837
+ const size = shape[preferredSize] ?? shape["lg"] ?? shape["sm"] ?? Object.values(shape)[0];
2838
+ return size?.borderWidth ?? fallback;
2839
+ }
2840
+ function mapPentagramShapeToLegacy(pentagram, existingMisc) {
2841
+ const buttonRadius = getShapeBorderRadius(pentagram.button, "md", "8px");
2842
+ const inputRadius = getShapeBorderRadius(pentagram.input, "md", "8px");
2843
+ const checkboxRadius = getShapeBorderRadius(pentagram.checkbox, "md", "4px");
2844
+ const tagRadius = getShapeBorderRadius(pentagram.tag, "md", "8px");
2845
+ const popupRadius = pentagram.modal?.borderRadius ?? pentagram.contextMenu?.md?.borderRadius ?? pentagram.tooltip?.md?.borderRadius ?? "8px";
2846
+ const borderWidth = getShapeBorderWidth(pentagram.button, "md", "2px");
2847
+ const buttonSm = pentagram.button?.sm?.borderRadius ?? "4px";
2848
+ const buttonMd = pentagram.button?.md?.borderRadius ?? "6px";
2849
+ const buttonLg = pentagram.button?.lg?.borderRadius ?? "8px";
2850
+ const buttonXl = pentagram.button?.xl?.borderRadius ?? "8px";
2851
+ return {
2852
+ borderRadiusScale: {
2853
+ sm: existingMisc?.borderRadiusScale?.sm ?? buttonSm,
2854
+ md: existingMisc?.borderRadiusScale?.md ?? buttonMd,
2855
+ lg: existingMisc?.borderRadiusScale?.lg ?? buttonLg,
2856
+ xl: existingMisc?.borderRadiusScale?.xl ?? buttonXl
2857
+ },
2858
+ borderWidth: existingMisc?.borderWidth ?? borderWidth,
2859
+ borderRadius: {
2860
+ input: inputRadius,
2861
+ button: buttonRadius,
2862
+ buttonIcon: buttonRadius,
2863
+ popup: popupRadius,
2864
+ checkbox: checkboxRadius,
2865
+ tag: tagRadius
2866
+ },
2867
+ minWidth: {
2868
+ button: existingMisc?.minWidth?.button ?? "40px"
2869
+ }
2870
+ };
2871
+ }
2872
+ function flattenPentagramShapeToVars(pentagram) {
2873
+ const vars = {};
2874
+ function addSizedComponent(name, shape) {
2875
+ if (!shape) return;
2876
+ for (const [size, props] of Object.entries(shape)) {
2877
+ if (props.borderRadius) {
2878
+ vars[`shape-${name}-${size}-borderRadius`] = props.borderRadius;
2879
+ }
2880
+ if (props.borderWidth) {
2881
+ vars[`shape-${name}-${size}-borderWidth`] = props.borderWidth;
2882
+ }
2883
+ }
2884
+ }
2885
+ addSizedComponent("button", pentagram.button);
2886
+ addSizedComponent("input", pentagram.input);
2887
+ addSizedComponent("checkbox", pentagram.checkbox);
2888
+ addSizedComponent("tab", pentagram.tabItem);
2889
+ addSizedComponent("tag", pentagram.tag);
2890
+ addSizedComponent("radio", pentagram.radio);
2891
+ addSizedComponent("switch", pentagram.switch);
2892
+ addSizedComponent("segmented", pentagram.segmented);
2893
+ addSizedComponent("segmentedItem", pentagram.segmentedItem);
2894
+ addSizedComponent("tooltip", pentagram.tooltip);
2895
+ addSizedComponent("contextMenu", pentagram.contextMenu);
2896
+ addSizedComponent("avatar", pentagram.avatar);
2897
+ addSizedComponent("toggleButtonGroup", pentagram.toggleButtonGroup);
2898
+ if (pentagram.modal?.borderRadius) {
2899
+ vars["shape-modal-borderRadius"] = pentagram.modal.borderRadius;
2900
+ }
2901
+ if (pentagram.cell?.borderRadius) {
2902
+ vars["shape-cell-borderRadius"] = pentagram.cell.borderRadius;
2903
+ }
2904
+ if (pentagram.toast?.borderRadius) {
2905
+ vars["shape-toast-borderRadius"] = pentagram.toast.borderRadius;
2906
+ }
2907
+ return vars;
2908
+ }
2909
+
2910
+ // src/pentagram-to-legacy/map-handcrafted-pentagram-to-legacy.ts
2911
+ function mapHandCraftedPentagramToLegacy(pentagram) {
2912
+ return {
2913
+ core: {
2914
+ background: {
2915
+ primary: pentagram.background.primary,
2916
+ secondary: pentagram.layer.float,
2917
+ ghost: pentagram.overlay.mono,
2918
+ tone: pentagram.layer.scrim,
2919
+ selection: "transparent",
2920
+ // deleted in Pentagram
2921
+ hover: "transparent",
2922
+ // deleted in Pentagram
2923
+ brand: pentagram.background.brandSecondary,
2924
+ brandSecondary: pentagram.background.brandExtraSecondary,
2925
+ success: pentagram.background.successSecondary,
2926
+ warning: pentagram.background.warningSecondary,
2927
+ alert: pentagram.background.alertSecondary,
2928
+ neutral: pentagram.background.neutralSecondary
2929
+ },
2930
+ divider: {
2931
+ divider: pentagram.border.secondary
2932
+ },
2933
+ text: {
2934
+ primary: pentagram.content.primary,
2935
+ secondary: pentagram.content.secondary,
2936
+ tertiary: pentagram.content.tertiary,
2937
+ brand: pentagram.content.brandPrimary,
2938
+ brandSecondary: pentagram.content.brandExtraPrimary,
2939
+ success: pentagram.content.successPrimary,
2940
+ warning: pentagram.content.warningPrimary,
2941
+ alert: pentagram.content.alertPrimary,
2942
+ neutral: pentagram.content.neutralPrimary
2943
+ },
2944
+ link: {
2945
+ link: pentagram.control.link.primary,
2946
+ linkHover: pentagram.control.link.primaryHover,
2947
+ linkMinor: pentagram.control.link.secondary,
2948
+ linkMinorHover: pentagram.control.link.secondaryHover
2949
+ }
2950
+ },
2951
+ control: {
2952
+ primary: {
2953
+ bg: pentagram.control.brand.primary.bg,
2954
+ bgHover: pentagram.control.brand.primary.bgHover,
2955
+ bgPress: pentagram.control.brand.primary.bgPress,
2956
+ bgDisabled: pentagram.control.brand.primary.bgDisable,
2957
+ border: pentagram.control.brand.primary.border,
2958
+ borderHover: pentagram.control.brand.primary.borderHover,
2959
+ borderPress: pentagram.control.brand.primary.borderPress
2960
+ },
2961
+ secondary: {
2962
+ bg: pentagram.control.brand.secondary.bg,
2963
+ bgHover: pentagram.control.brand.secondary.bgHover,
2964
+ bgPress: pentagram.control.brand.secondary.bgPress,
2965
+ border: pentagram.control.brand.secondary.border,
2966
+ borderHover: pentagram.control.brand.secondary.borderHover,
2967
+ borderPress: pentagram.control.brand.secondary.borderPress
2968
+ },
2969
+ default: {
2970
+ bg: pentagram.control.mono.primary.bg,
2971
+ bgHover: pentagram.control.mono.primary.bgHover,
2972
+ bgPress: pentagram.control.mono.primary.bgPress,
2973
+ border: pentagram.control.mono.primary.border,
2974
+ borderHover: pentagram.control.mono.primary.borderHover,
2975
+ borderPress: pentagram.control.mono.primary.borderPress
2976
+ },
2977
+ input: {
2978
+ bg: pentagram.control.input.bg,
2979
+ bgHover: pentagram.control.input.bgHover,
2980
+ bgDisabled: pentagram.control.input.bgDisable,
2981
+ border: pentagram.control.input.border,
2982
+ borderHover: pentagram.control.input.borderHover,
2983
+ borderDisabled: pentagram.control.input.borderDisable,
2984
+ text: pentagram.control.input.text,
2985
+ textDisabled: pentagram.control.input.textDisable,
2986
+ placeholder: pentagram.control.input.placeholder
2987
+ },
2988
+ focus: {
2989
+ bg: pentagram.control.focus.bg,
2990
+ border: pentagram.control.focus.border
2991
+ },
2992
+ alert: {
2993
+ bg: pentagram.control.alert.secondary.bg,
2994
+ bgHover: pentagram.control.alert.secondary.bgHover,
2995
+ bgPress: pentagram.control.alert.secondary.bgPress,
2996
+ border: pentagram.control.alert.secondary.border,
2997
+ borderHover: pentagram.control.alert.secondary.borderHover,
2998
+ borderPress: pentagram.control.alert.secondary.borderPress
2999
+ },
3000
+ check: {
3001
+ bg: pentagram.control.check.bg,
3002
+ bgHover: pentagram.control.check.bgHover,
3003
+ bgDisabled: pentagram.control.check.bgDisable
3004
+ },
3005
+ faint: {
3006
+ bg: pentagram.control.faint.bg,
3007
+ bgHover: pentagram.control.faint.bgHover,
3008
+ border: pentagram.control.faint.border,
3009
+ borderHover: pentagram.control.faint.borderHover
3010
+ },
3011
+ toggle: {
3012
+ bg: pentagram.control.switch.bg,
3013
+ bgHover: pentagram.control.switch.bgHover
3014
+ },
3015
+ text: {
3016
+ active: pentagram.control.brand.text.primary,
3017
+ secondary: pentagram.control.brand.text.secondary,
3018
+ default: pentagram.control.mono.text.primary,
3019
+ primary: pentagram.control.text.primary,
3020
+ disabled: pentagram.control.brand.text.disable,
3021
+ faint: pentagram.control.check.icon,
3022
+ alert: pentagram.control.alert.text.secondary
3023
+ }
3024
+ }
3025
+ };
3026
+ }
3027
+
3028
+ // src/pentagram-to-legacy/map-pentagram-theme-to-legacy.ts
3029
+ function buildBaseColorsFromPentagram(colors) {
3030
+ return {
3031
+ content: colors.content.primary,
3032
+ surface: colors.background.primary,
3033
+ project: colors.control.brand.primary.bg,
3034
+ accent: colors.control.brand.text.primary,
3035
+ phantom: colors.border.secondary,
3036
+ path: colors.control.link.primary,
3037
+ success: colors.content.successPrimary,
3038
+ warning: colors.content.warningPrimary,
3039
+ alert: colors.content.alertPrimary,
3040
+ neutral: colors.content.neutralPrimary
3041
+ };
3042
+ }
3043
+ function mapPentagramThemeToLegacy(pentagram, device = "desktop") {
3044
+ const resolver = createResolver(device);
3045
+ const resolvedTypo = resolver.resolvePrimitives(pentagram.typo);
3046
+ const resolvedShape = resolver.resolvePrimitives(pentagram.shape);
3047
+ return {
3048
+ colors: {
3049
+ base: buildBaseColorsFromPentagram(pentagram.colors),
3050
+ ...mapHandCraftedPentagramToLegacy(pentagram.colors)
3051
+ },
3052
+ typo: mapPentagramTypoToLegacy(resolvedTypo),
3053
+ misc: mapPentagramShapeToLegacy(resolvedShape),
3054
+ shadows: pentagram.shadows
3055
+ };
3056
+ }
3057
+
3058
+ // src/themes/pentagram/mappers/scheme-to-legacy.ts
3059
+ function mapThemeSchemeToLegacy(scheme) {
3060
+ return {
3061
+ core: {
3062
+ background: {
3063
+ primary: scheme.background.primary,
3064
+ secondary: scheme.layer.float,
3065
+ ghost: scheme.overlay.mono,
3066
+ tone: scheme.layer.scrim,
3067
+ selection: "transparent",
3068
+ // deleted in Pentagram
3069
+ hover: "transparent",
3070
+ // deleted in Pentagram
3071
+ brand: scheme.background.brand.secondary,
3072
+ brandSecondary: scheme.background.brandExtra.secondary,
3073
+ success: scheme.background.success.secondary,
3074
+ warning: scheme.background.warning.secondary,
3075
+ alert: scheme.background.alert.secondary,
3076
+ neutral: scheme.background.neutral.secondary
3077
+ },
3078
+ divider: {
3079
+ divider: scheme.border.secondary
3080
+ },
3081
+ text: {
3082
+ primary: scheme.content.primary,
3083
+ secondary: scheme.content.secondary,
3084
+ tertiary: scheme.content.tertiary,
3085
+ brand: scheme.content.brand.primary,
3086
+ brandSecondary: scheme.content.brandExtra.primary,
3087
+ success: scheme.content.success.primary,
3088
+ warning: scheme.content.warning.primary,
3089
+ alert: scheme.content.alert.primary,
3090
+ neutral: scheme.content.neutral.primary
3091
+ },
3092
+ link: {
3093
+ link: scheme.control.link.primary,
3094
+ linkHover: scheme.control.link.primaryHover,
3095
+ linkMinor: scheme.control.link.secondary,
3096
+ linkMinorHover: scheme.control.link.secondaryHover
3097
+ }
3098
+ },
3099
+ control: {
3100
+ primary: {
3101
+ bg: scheme.control.brand.primary.bg,
3102
+ bgHover: scheme.control.brand.primary.bgHover,
3103
+ bgPress: scheme.control.brand.primary.bgPress,
3104
+ bgDisabled: scheme.control.brand.primary.bgDisable,
3105
+ border: scheme.control.brand.primary.border,
3106
+ borderHover: scheme.control.brand.primary.borderHover,
3107
+ borderPress: scheme.control.brand.primary.borderPress
3108
+ },
3109
+ secondary: {
3110
+ bg: scheme.control.brand.secondary.bg,
3111
+ bgHover: scheme.control.brand.secondary.bgHover,
3112
+ bgPress: scheme.control.brand.secondary.bgPress,
3113
+ border: scheme.control.brand.secondary.border,
3114
+ borderHover: scheme.control.brand.secondary.borderHover,
3115
+ borderPress: scheme.control.brand.secondary.borderPress
3116
+ },
3117
+ default: {
3118
+ bg: scheme.control.mono.primary.bg,
3119
+ bgHover: scheme.control.mono.primary.bgHover,
3120
+ bgPress: scheme.control.mono.primary.bgPress,
3121
+ border: scheme.control.mono.primary.border,
3122
+ borderHover: scheme.control.mono.primary.borderHover,
3123
+ borderPress: scheme.control.mono.primary.borderPress
3124
+ },
3125
+ input: {
3126
+ bg: scheme.control.input.bg,
3127
+ bgHover: scheme.control.input.bgHover,
3128
+ bgDisabled: scheme.control.input.bgDisable,
3129
+ border: scheme.control.input.border,
3130
+ borderHover: scheme.control.input.borderHover,
3131
+ borderDisabled: scheme.control.input.borderDisable,
3132
+ text: scheme.control.input.text,
3133
+ textDisabled: scheme.control.input.textDisable,
3134
+ placeholder: scheme.control.input.placeholder
3135
+ },
3136
+ focus: {
3137
+ bg: scheme.control.focus.bg,
3138
+ border: scheme.control.focus.border
3139
+ },
3140
+ alert: {
3141
+ bg: scheme.control.alert.secondary.bg,
3142
+ bgHover: scheme.control.alert.secondary.bgHover,
3143
+ bgPress: scheme.control.alert.secondary.bgPress,
3144
+ border: scheme.control.alert.secondary.border,
3145
+ borderHover: scheme.control.alert.secondary.borderHover,
3146
+ borderPress: scheme.control.alert.secondary.borderPress
3147
+ },
3148
+ check: {
3149
+ bg: scheme.control.check.bg,
3150
+ bgHover: scheme.control.check.bgHover,
3151
+ bgDisabled: scheme.control.check.bgDisable
3152
+ },
3153
+ faint: {
3154
+ bg: scheme.control.faint.bg,
3155
+ bgHover: scheme.control.faint.bgHover,
3156
+ border: scheme.control.faint.border,
3157
+ borderHover: scheme.control.faint.borderHover
3158
+ },
3159
+ toggle: {
3160
+ bg: scheme.control.switch.bg,
3161
+ bgHover: scheme.control.switch.bgHover
3162
+ },
3163
+ text: {
3164
+ active: scheme.control.brand.text.primary,
3165
+ secondary: scheme.control.brand.text.secondary,
3166
+ default: scheme.control.mono.text.primary,
3167
+ primary: scheme.control.text.primary,
3168
+ disabled: scheme.control.brand.text.disable,
3169
+ faint: scheme.control.check.icon,
3170
+ alert: scheme.control.alert.text.secondary
3171
+ }
3172
+ }
3173
+ };
3174
+ }
3175
+
2001
3176
  // src/themes/pentagram/presets/pay-station-dark.ts
2002
3177
  var import_colord10 = require("colord");
2003
3178
  var baseDark = {
@@ -2021,7 +3196,28 @@ var baseDark = {
2021
3196
  onAlert: (0, import_colord10.colord)("#000000"),
2022
3197
  onNeutral: (0, import_colord10.colord)("#000000")
2023
3198
  };
2024
- var createDarkScheme = (b) => ({
3199
+ var pentagramDarkScheme = (b) => ({
3200
+ base: {
3201
+ content: b.content.toHslString(),
3202
+ contentInverse: b.contentInverse.toHslString(),
3203
+ background: b.background.toHslString(),
3204
+ backgroundInverse: b.backgroundInverse.toHslString(),
3205
+ brand: b.brand.toHslString(),
3206
+ brandExtra: b.brandExtra.toHslString(),
3207
+ success: b.success.toHslString(),
3208
+ warning: b.warning.toHslString(),
3209
+ alert: b.alert.toHslString(),
3210
+ neutral: b.neutral.toHslString(),
3211
+ mono: b.mono.toHslString(),
3212
+ linkPrimary: b.linkPrimary.toHslString(),
3213
+ linkSecondary: b.linkSecondary.toHslString(),
3214
+ onBrand: b.onBrand.toHslString(),
3215
+ onBrandExtra: b.onBrandExtra.toHslString(),
3216
+ onSuccess: b.onSuccess.toHslString(),
3217
+ onWarning: b.onWarning.toHslString(),
3218
+ onAlert: b.onAlert.toHslString(),
3219
+ onNeutral: b.onNeutral.toHslString()
3220
+ },
2025
3221
  background: {
2026
3222
  primary: b.background.toHslString(),
2027
3223
  secondary: b.background.darken(0.05).toHslString(),
@@ -2270,9 +3466,9 @@ var createDarkScheme = (b) => ({
2270
3466
  icon: b.onBrand.toHslString()
2271
3467
  },
2272
3468
  faint: {
2273
- bg: b.mono.alpha(0.1).toHslString(),
2274
- bgHover: b.mono.alpha(0.15).toHslString(),
2275
- border: b.mono.alpha(0.15).toHslString(),
3469
+ bg: b.mono.alpha(0.15).toHslString(),
3470
+ bgHover: b.mono.alpha(0.2).toHslString(),
3471
+ border: b.mono.alpha(0.2).toHslString(),
2276
3472
  borderHover: b.mono.alpha(0.25).toHslString()
2277
3473
  },
2278
3474
  slider: {
@@ -2290,8 +3486,12 @@ var createDarkScheme = (b) => ({
2290
3486
  },
2291
3487
  knob: {
2292
3488
  bg: b.onBrand.toHslString(),
2293
- bgHover: b.onBrand.darken(0.1).toHslString(),
2294
- bgInactive: b.mono.alpha(0.6).toHslString()
3489
+ bgHover: b.onBrand.lighten(0.1).toHslString(),
3490
+ bgActive: b.onBrand.toHslString(),
3491
+ bgActiveHover: b.onBrand.lighten(0.1).toHslString(),
3492
+ bgInactive: b.mono.toHslString(),
3493
+ bgInactiveHover: b.mono.lighten(0.1).toHslString(),
3494
+ bgDisable: b.mono.alpha(0.25).toHslString()
2295
3495
  },
2296
3496
  text: {
2297
3497
  primary: b.content.toHslString(),
@@ -2328,7 +3528,7 @@ var createDarkScheme = (b) => ({
2328
3528
  }
2329
3529
  }
2330
3530
  });
2331
- var payStationDarkScheme = createDarkScheme(baseDark);
3531
+ var pentagramDark = pentagramDarkScheme(baseDark);
2332
3532
 
2333
3533
  // src/themes/pentagram/presets/pay-station-light.ts
2334
3534
  var import_colord11 = require("colord");
@@ -2353,7 +3553,28 @@ var base10 = {
2353
3553
  onAlert: (0, import_colord11.colord)("#000000"),
2354
3554
  onNeutral: (0, import_colord11.colord)("#000000")
2355
3555
  };
2356
- var createScheme = (b) => ({
3556
+ var pentagramLightScheme = (b) => ({
3557
+ base: {
3558
+ content: b.content.toHslString(),
3559
+ contentInverse: b.contentInverse.toHslString(),
3560
+ background: b.background.toHslString(),
3561
+ backgroundInverse: b.backgroundInverse.toHslString(),
3562
+ brand: b.brand.toHslString(),
3563
+ brandExtra: b.brandExtra.toHslString(),
3564
+ success: b.success.toHslString(),
3565
+ warning: b.warning.toHslString(),
3566
+ alert: b.alert.toHslString(),
3567
+ neutral: b.neutral.toHslString(),
3568
+ mono: b.mono.toHslString(),
3569
+ linkPrimary: b.linkPrimary.toHslString(),
3570
+ linkSecondary: b.linkSecondary.toHslString(),
3571
+ onBrand: b.onBrand.toHslString(),
3572
+ onBrandExtra: b.onBrandExtra.toHslString(),
3573
+ onSuccess: b.onSuccess.toHslString(),
3574
+ onWarning: b.onWarning.toHslString(),
3575
+ onAlert: b.onAlert.toHslString(),
3576
+ onNeutral: b.onNeutral.toHslString()
3577
+ },
2357
3578
  background: {
2358
3579
  primary: b.background.toHslString(),
2359
3580
  secondary: b.background.saturate(0.02).darken(0.05).toHslString(),
@@ -2605,7 +3826,7 @@ var createScheme = (b) => ({
2605
3826
  bg: b.mono.alpha(0.15).toHslString(),
2606
3827
  bgHover: b.mono.alpha(0.2).toHslString(),
2607
3828
  border: b.mono.alpha(0.2).toHslString(),
2608
- borderHover: b.mono.alpha(0.1).toHslString()
3829
+ borderHover: b.mono.alpha(0.25).toHslString()
2609
3830
  },
2610
3831
  slider: {
2611
3832
  bg: b.brand.toHslString(),
@@ -2623,7 +3844,11 @@ var createScheme = (b) => ({
2623
3844
  knob: {
2624
3845
  bg: b.onBrand.toHslString(),
2625
3846
  bgHover: b.onBrand.darken(0.1).toHslString(),
2626
- bgInactive: b.onBrand.toHslString()
3847
+ bgActive: b.onBrand.toHslString(),
3848
+ bgActiveHover: b.onBrand.darken(0.1).toHslString(),
3849
+ bgInactive: b.onBrand.toHslString(),
3850
+ bgInactiveHover: b.onBrand.darken(0.1).toHslString(),
3851
+ bgDisable: b.mono.alpha(0.25).toHslString()
2627
3852
  },
2628
3853
  text: {
2629
3854
  primary: b.content.toHslString(),
@@ -2660,7 +3885,64 @@ var createScheme = (b) => ({
2660
3885
  }
2661
3886
  }
2662
3887
  });
2663
- var payStationScheme = createScheme(base10);
3888
+ var pentagramLight = pentagramLightScheme(base10);
3889
+
3890
+ // src/themes/pentagram/pentagram.ts
3891
+ function convertToLegacyBase(pentagramBase) {
3892
+ return {
3893
+ content: pentagramBase.content.toRgbString(),
3894
+ surface: pentagramBase.background.toRgbString(),
3895
+ project: pentagramBase.brand.toRgbString(),
3896
+ accent: pentagramBase.brandExtra.toRgbString(),
3897
+ phantom: pentagramBase.mono.toRgbString(),
3898
+ path: pentagramBase.brand.toRgbString(),
3899
+ success: pentagramBase.success.toRgbString(),
3900
+ warning: pentagramBase.warning.toRgbString(),
3901
+ alert: pentagramBase.alert.toRgbString(),
3902
+ neutral: pentagramBase.neutral.toRgbString()
3903
+ };
3904
+ }
3905
+ var desktopResolver = createResolver("desktop");
3906
+ var resolvedTypoDesktop = desktopResolver.resolvePrimitives(
3907
+ typo_primitives_default
3908
+ );
3909
+ var resolvedShapeDesktop = desktopResolver.resolvePrimitives(shape_primitives_default);
3910
+ var pentagramTypo = mapPentagramTypoToLegacy(resolvedTypoDesktop);
3911
+ var pentagramMisc = mapPentagramShapeToLegacy(resolvedShapeDesktop);
3912
+ var paystation4PentagramLightLegacyCompatible = {
3913
+ colors: {
3914
+ base: convertToLegacyBase(base10),
3915
+ ...mapThemeSchemeToLegacy(pentagramLight)
3916
+ },
3917
+ typo: pentagramTypo,
3918
+ misc: pentagramMisc,
3919
+ shadows: shadowsDefault,
3920
+ globalStyle: "pentagram"
3921
+ };
3922
+ var paystation4PentagramDarkLegacyCompatible = {
3923
+ colors: {
3924
+ base: convertToLegacyBase(baseDark),
3925
+ ...mapThemeSchemeToLegacy(pentagramDark)
3926
+ },
3927
+ typo: pentagramTypo,
3928
+ misc: pentagramMisc,
3929
+ shadows: shadowsDefault,
3930
+ globalStyle: "pentagram"
3931
+ };
3932
+ var paystation4PentagramLight = {
3933
+ colors: pentagramLight,
3934
+ shape: shape_primitives_default,
3935
+ typo: typo_primitives_default,
3936
+ shadows: shadowsDefault,
3937
+ globalStyle: "pentagram"
3938
+ };
3939
+ var paystation4PentagramDark = {
3940
+ colors: pentagramDark,
3941
+ shape: shape_primitives_default,
3942
+ typo: typo_primitives_default,
3943
+ shadows: shadowsDefault,
3944
+ globalStyle: "pentagram"
3945
+ };
2664
3946
 
2665
3947
  // src/themes/index.ts
2666
3948
  var themes = {
@@ -2845,8 +4127,8 @@ var pentagramBaseColors = {
2845
4127
  payStationDark: baseDark
2846
4128
  };
2847
4129
  var pentagramColorsScheme = {
2848
- payStationLight: createScheme,
2849
- payStationDark: createDarkScheme
4130
+ payStationLight: pentagramLightScheme,
4131
+ payStationDark: pentagramDarkScheme
2850
4132
  };
2851
4133
  var pentagramBaseColorsKeys = [
2852
4134
  "content",
@@ -2930,31 +4212,48 @@ var applyPentagramColors = (schemeBase, overrides) => {
2930
4212
  };
2931
4213
  // Annotate the CommonJS export names for ESM import in node:
2932
4214
  0 && (module.exports = {
4215
+ DELETED_LEGACY_TYPO_VARS,
4216
+ PentagramResolver,
2933
4217
  base,
2934
4218
  baseDark,
2935
- createDarkScheme,
2936
- createScheme,
4219
+ buildBaseColorsFromPentagram,
4220
+ createResolver,
2937
4221
  emails,
2938
4222
  emailsDark,
2939
4223
  emailsThemes,
4224
+ flattenPentagramShapeToVars,
2940
4225
  generateWithScheme,
4226
+ mapHandCraftedPentagramToLegacy,
4227
+ mapPentagramShapeToLegacy,
4228
+ mapPentagramThemeToLegacy,
4229
+ mapPentagramTypoToLegacy,
2941
4230
  palettes,
2942
- payStationDarkScheme,
2943
- payStationScheme,
2944
4231
  paystation4,
2945
4232
  paystation4Dark,
2946
4233
  paystation4Gaijin,
2947
4234
  paystation4Nexters,
4235
+ paystation4PentagramDark,
4236
+ paystation4PentagramDarkLegacyCompatible,
4237
+ paystation4PentagramLight,
4238
+ paystation4PentagramLightLegacyCompatible,
2948
4239
  paystation4Take2,
2949
4240
  paystation4Themes,
4241
+ pentagramDark,
4242
+ pentagramDarkScheme,
4243
+ pentagramLight,
4244
+ pentagramLightScheme,
2950
4245
  primaryPalette,
2951
4246
  publisherV2,
2952
4247
  publisherV2Dark,
2953
4248
  publisherV2Themes,
4249
+ resolveForDesktop,
4250
+ resolveForMobile,
4251
+ shapePrimitives,
2954
4252
  themeGenerator,
2955
4253
  themes,
2956
4254
  themesBaseColors,
2957
4255
  themesBaseColorsArray,
2958
- themesColorsScheme
4256
+ themesColorsScheme,
4257
+ typoPrimitives
2959
4258
  });
2960
4259
  //# sourceMappingURL=index.js.map