@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.mjs CHANGED
@@ -1937,6 +1937,1164 @@ var themesColorsScheme = {
1937
1937
  emailsDark: emailsDarkScheme
1938
1938
  };
1939
1939
 
1940
+ // src/pentagram-primitives/typo-primitives.json
1941
+ var typo_primitives_default = {
1942
+ heading: {
1943
+ h1: {
1944
+ fontSize: "450",
1945
+ lineHeight: "display/450",
1946
+ fontWeight: 700
1947
+ },
1948
+ h2: {
1949
+ fontSize: "350",
1950
+ lineHeight: "display/350",
1951
+ fontWeight: 700
1952
+ },
1953
+ h3: {
1954
+ fontSize: "300",
1955
+ lineHeight: "display/300",
1956
+ fontWeight: 700
1957
+ },
1958
+ h4: {
1959
+ fontSize: "250",
1960
+ lineHeight: "display/250",
1961
+ fontWeight: 700
1962
+ },
1963
+ h5: {
1964
+ fontSize: "200",
1965
+ lineHeight: "display/200",
1966
+ fontWeight: 700
1967
+ }
1968
+ },
1969
+ basic: {
1970
+ display: {
1971
+ fontFamily: "compact",
1972
+ fontSize: "300",
1973
+ lineHeight: "compact/300",
1974
+ fontWeight: 500
1975
+ },
1976
+ bodyLg: {
1977
+ fontSize: "175",
1978
+ lineHeight: "compact/175",
1979
+ default: {
1980
+ fontWeight: 400
1981
+ },
1982
+ accent: {
1983
+ fontWeight: 500
1984
+ },
1985
+ paragraph: {
1986
+ spacing: "spacing/250",
1987
+ lineHeight: "text/175"
1988
+ }
1989
+ },
1990
+ bodyMd: {
1991
+ fontSize: "150",
1992
+ lineHeight: "compact/150",
1993
+ default: {
1994
+ fontWeight: 400
1995
+ },
1996
+ accent: {
1997
+ fontWeight: 500
1998
+ },
1999
+ paragraph: {
2000
+ spacing: "spacing/200",
2001
+ lineHeight: "text/150"
2002
+ }
2003
+ },
2004
+ bodySm: {
2005
+ fontSize: "125",
2006
+ lineHeight: "compact/125",
2007
+ default: {
2008
+ fontWeight: 400
2009
+ },
2010
+ accent: {
2011
+ fontWeight: 500
2012
+ },
2013
+ paragraph: {
2014
+ spacing: "spacing/150",
2015
+ lineHeight: "text/125"
2016
+ }
2017
+ },
2018
+ bodyXs: {
2019
+ fontSize: "100",
2020
+ lineHeight: "compact/100",
2021
+ default: {
2022
+ fontWeight: 400
2023
+ },
2024
+ accent: {
2025
+ fontWeight: 500
2026
+ },
2027
+ paragraph: {
2028
+ spacing: "spacing/100",
2029
+ lineHeight: "text/100"
2030
+ }
2031
+ },
2032
+ bodyXxs: {
2033
+ fontSize: "75",
2034
+ lineHeight: "compact/75",
2035
+ default: {
2036
+ fontWeight: 400
2037
+ },
2038
+ accent: {
2039
+ fontWeight: 500
2040
+ },
2041
+ paragraph: {
2042
+ spacing: "spacing/75",
2043
+ lineHeight: "text/75"
2044
+ }
2045
+ }
2046
+ },
2047
+ control: {
2048
+ button: {
2049
+ xl: { scale: "600" },
2050
+ lg: { scale: "500" },
2051
+ md: { scale: "400" },
2052
+ sm: { scale: "300" },
2053
+ xs: { scale: "200" }
2054
+ },
2055
+ input: {
2056
+ xl: { scale: "600" },
2057
+ lg: { scale: "500" },
2058
+ md: { scale: "400" },
2059
+ sm: { scale: "300" },
2060
+ xs: { scale: "200" }
2061
+ },
2062
+ checkbox: {
2063
+ xl: { scale: "600" },
2064
+ lg: { scale: "500" },
2065
+ md: { scale: "400" },
2066
+ sm: { scale: "300" }
2067
+ },
2068
+ tab: {
2069
+ xl: { scale: "600" },
2070
+ lg: { scale: "500" },
2071
+ md: { scale: "400" },
2072
+ sm: { scale: "300" },
2073
+ xs: { scale: "300" }
2074
+ },
2075
+ radio: {
2076
+ xl: { scale: "600" },
2077
+ lg: { scale: "500" },
2078
+ md: { scale: "400" },
2079
+ sm: { scale: "300" }
2080
+ },
2081
+ segmentedItem: {
2082
+ xl: { scale: "500" },
2083
+ lg: { scale: "400" },
2084
+ md: { scale: "300" },
2085
+ sm: { scale: "200" }
2086
+ },
2087
+ tag: {
2088
+ xl: { scale: "600" },
2089
+ lg: { scale: "500" },
2090
+ md: { scale: "400" },
2091
+ sm: { scale: "300" },
2092
+ xs: { scale: "200" }
2093
+ },
2094
+ toggleButton: {
2095
+ xl: { scale: "600" },
2096
+ lg: { scale: "500" },
2097
+ md: { scale: "400" },
2098
+ sm: { scale: "300" },
2099
+ xs: { scale: "200" }
2100
+ }
2101
+ }
2102
+ };
2103
+
2104
+ // src/pentagram-primitives/shape-primitives.json
2105
+ var shape_primitives_default = {
2106
+ button: {
2107
+ xl: {
2108
+ borderRadius: "radius/100",
2109
+ borderWidth: "stroke/1"
2110
+ },
2111
+ lg: {
2112
+ borderRadius: "radius/100",
2113
+ borderWidth: "stroke/1"
2114
+ },
2115
+ md: {
2116
+ borderRadius: "radius/75",
2117
+ borderWidth: "stroke/1"
2118
+ },
2119
+ sm: {
2120
+ borderRadius: "radius/50",
2121
+ borderWidth: "stroke/1"
2122
+ },
2123
+ xs: {
2124
+ borderRadius: "radius/50",
2125
+ borderWidth: "stroke/1"
2126
+ }
2127
+ },
2128
+ checkbox: {
2129
+ xl: {
2130
+ borderRadius: "radius/50",
2131
+ borderWidth: "stroke/1"
2132
+ },
2133
+ lg: {
2134
+ borderRadius: "radius/50",
2135
+ borderWidth: "stroke/1"
2136
+ },
2137
+ md: {
2138
+ borderRadius: "radius/50",
2139
+ borderWidth: "stroke/1"
2140
+ },
2141
+ sm: {
2142
+ borderRadius: "radius/50",
2143
+ borderWidth: "stroke/1"
2144
+ }
2145
+ },
2146
+ input: {
2147
+ xl: {
2148
+ borderRadius: "radius/100",
2149
+ borderWidth: "stroke/1"
2150
+ },
2151
+ lg: {
2152
+ borderRadius: "radius/100",
2153
+ borderWidth: "stroke/1"
2154
+ },
2155
+ md: {
2156
+ borderRadius: "radius/100",
2157
+ borderWidth: "stroke/1"
2158
+ },
2159
+ sm: {
2160
+ borderRadius: "radius/50",
2161
+ borderWidth: "stroke/1"
2162
+ },
2163
+ xs: {
2164
+ borderRadius: "radius/50",
2165
+ borderWidth: "stroke/1"
2166
+ }
2167
+ },
2168
+ cell: {
2169
+ borderRadius: "radius/100",
2170
+ borderWidth: "stroke/1"
2171
+ },
2172
+ modal: {
2173
+ borderRadius: "radius/100"
2174
+ },
2175
+ toast: {
2176
+ borderRadius: "radius/50",
2177
+ borderWidth: "0px"
2178
+ },
2179
+ segmentedItem: {
2180
+ xl: {
2181
+ borderRadius: "radius/50",
2182
+ borderWidth: "stroke/1"
2183
+ },
2184
+ lg: {
2185
+ borderRadius: "radius/50",
2186
+ borderWidth: "stroke/1"
2187
+ },
2188
+ md: {
2189
+ borderRadius: "radius/50",
2190
+ borderWidth: "stroke/1"
2191
+ },
2192
+ sm: {
2193
+ borderRadius: "radius/25",
2194
+ borderWidth: "stroke/1"
2195
+ }
2196
+ },
2197
+ segmented: {
2198
+ xl: {
2199
+ borderRadius: "radius/100",
2200
+ borderWidth: "stroke/1"
2201
+ },
2202
+ lg: {
2203
+ borderRadius: "radius/100",
2204
+ borderWidth: "stroke/1"
2205
+ },
2206
+ md: {
2207
+ borderRadius: "radius/100",
2208
+ borderWidth: "stroke/1"
2209
+ },
2210
+ sm: {
2211
+ borderRadius: "radius/50",
2212
+ borderWidth: "stroke/1"
2213
+ }
2214
+ },
2215
+ switch: {
2216
+ xl: {
2217
+ borderRadius: "radius/50",
2218
+ borderWidth: "stroke/1"
2219
+ },
2220
+ lg: {
2221
+ borderRadius: "radius/50",
2222
+ borderWidth: "stroke/1"
2223
+ },
2224
+ md: {
2225
+ borderRadius: "radius/50",
2226
+ borderWidth: "stroke/1"
2227
+ },
2228
+ sm: {
2229
+ borderRadius: "radius/50",
2230
+ borderWidth: "stroke/1"
2231
+ }
2232
+ },
2233
+ knob: {
2234
+ xl: {
2235
+ borderRadius: "radius/25"
2236
+ },
2237
+ lg: {
2238
+ borderRadius: "radius/25"
2239
+ },
2240
+ md: {
2241
+ borderRadius: "radius/25"
2242
+ },
2243
+ sm: {
2244
+ borderRadius: "radius/25"
2245
+ }
2246
+ },
2247
+ tabItem: {
2248
+ xl: {
2249
+ borderRadius: "radius/100"
2250
+ },
2251
+ lg: {
2252
+ borderRadius: "radius/100"
2253
+ },
2254
+ md: {
2255
+ borderRadius: "radius/50"
2256
+ },
2257
+ sm: {
2258
+ borderRadius: "radius/50"
2259
+ }
2260
+ },
2261
+ tag: {
2262
+ xl: {
2263
+ borderRadius: "radius/100",
2264
+ borderWidth: "stroke/1"
2265
+ },
2266
+ lg: {
2267
+ borderRadius: "radius/100",
2268
+ borderWidth: "stroke/1"
2269
+ },
2270
+ md: {
2271
+ borderRadius: "radius/75",
2272
+ borderWidth: "stroke/1"
2273
+ },
2274
+ sm: {
2275
+ borderRadius: "radius/50",
2276
+ borderWidth: "stroke/1"
2277
+ },
2278
+ xs: {
2279
+ borderRadius: "radius/50",
2280
+ borderWidth: "stroke/1"
2281
+ }
2282
+ },
2283
+ tagLabel: {
2284
+ borderRadius: "0px"
2285
+ },
2286
+ tooltip: {
2287
+ xl: {
2288
+ borderRadius: "radius/100"
2289
+ },
2290
+ lg: {
2291
+ borderRadius: "radius/100"
2292
+ },
2293
+ md: {
2294
+ borderRadius: "radius/100"
2295
+ },
2296
+ sm: {
2297
+ borderRadius: "radius/50"
2298
+ }
2299
+ },
2300
+ radio: {
2301
+ xl: {
2302
+ borderRadius: "radius/999",
2303
+ borderWidth: "stroke/1"
2304
+ },
2305
+ lg: {
2306
+ borderRadius: "radius/999",
2307
+ borderWidth: "stroke/1"
2308
+ },
2309
+ md: {
2310
+ borderRadius: "radius/999",
2311
+ borderWidth: "stroke/1"
2312
+ },
2313
+ sm: {
2314
+ borderRadius: "radius/999",
2315
+ borderWidth: "stroke/1"
2316
+ }
2317
+ },
2318
+ contextMenu: {
2319
+ xl: {
2320
+ borderRadius: "radius/100"
2321
+ },
2322
+ lg: {
2323
+ borderRadius: "radius/100"
2324
+ },
2325
+ md: {
2326
+ borderRadius: "radius/100"
2327
+ },
2328
+ sm: {
2329
+ borderRadius: "radius/50"
2330
+ }
2331
+ },
2332
+ avatar: {
2333
+ xl: {
2334
+ borderRadius: "radius/100",
2335
+ borderWidth: "stroke/2"
2336
+ },
2337
+ lg: {
2338
+ borderRadius: "radius/75",
2339
+ borderWidth: "stroke/2"
2340
+ },
2341
+ md: {
2342
+ borderRadius: "radius/75",
2343
+ borderWidth: "stroke/2"
2344
+ },
2345
+ sm: {
2346
+ borderRadius: "radius/50",
2347
+ borderWidth: "stroke/2"
2348
+ },
2349
+ xs: {
2350
+ borderRadius: "radius/50",
2351
+ borderWidth: "stroke/2"
2352
+ },
2353
+ xxs: {
2354
+ borderRadius: "radius/25",
2355
+ borderWidth: "stroke/2"
2356
+ }
2357
+ },
2358
+ toggleButtonGroup: {
2359
+ xl: {
2360
+ borderRadius: "radius/100",
2361
+ borderWidth: "stroke/1"
2362
+ },
2363
+ lg: {
2364
+ borderRadius: "radius/100",
2365
+ borderWidth: "stroke/1"
2366
+ },
2367
+ md: {
2368
+ borderRadius: "radius/75",
2369
+ borderWidth: "stroke/1"
2370
+ },
2371
+ sm: {
2372
+ borderRadius: "radius/50",
2373
+ borderWidth: "stroke/1"
2374
+ },
2375
+ xs: {
2376
+ borderRadius: "radius/50",
2377
+ borderWidth: "stroke/1"
2378
+ }
2379
+ }
2380
+ };
2381
+
2382
+ // src/pentagram-to-legacy/pentagram-resolver.ts
2383
+ var FONT_SIZE_SCALE = {
2384
+ "75": { desktop: "10px", mobile: "10px" },
2385
+ "100": { desktop: "12px", mobile: "11px" },
2386
+ "125": { desktop: "14px", mobile: "12px" },
2387
+ "150": { desktop: "16px", mobile: "14px" },
2388
+ "175": { desktop: "18px", mobile: "16px" },
2389
+ "200": { desktop: "20px", mobile: "18px" },
2390
+ "250": { desktop: "24px", mobile: "20px" },
2391
+ "300": { desktop: "28px", mobile: "24px" },
2392
+ "350": { desktop: "32px", mobile: "28px" },
2393
+ "450": { desktop: "40px", mobile: "32px" },
2394
+ "550": { desktop: "48px", mobile: "40px" },
2395
+ "650": { desktop: "56px", mobile: "48px" },
2396
+ "750": { desktop: "64px", mobile: "56px" }
2397
+ };
2398
+ var LINE_HEIGHT_DISPLAY = {
2399
+ "75": { desktop: "10px", mobile: "10px" },
2400
+ "100": { desktop: "12px", mobile: "11px" },
2401
+ "125": { desktop: "14px", mobile: "12px" },
2402
+ "150": { desktop: "16px", mobile: "14px" },
2403
+ "175": { desktop: "18px", mobile: "16px" },
2404
+ "200": { desktop: "20px", mobile: "18px" },
2405
+ "250": { desktop: "24px", mobile: "20px" },
2406
+ "300": { desktop: "28px", mobile: "24px" },
2407
+ "350": { desktop: "32px", mobile: "28px" },
2408
+ "450": { desktop: "40px", mobile: "32px" },
2409
+ "550": { desktop: "48px", mobile: "40px" },
2410
+ "650": { desktop: "56px", mobile: "48px" },
2411
+ "750": { desktop: "64px", mobile: "56px" }
2412
+ };
2413
+ var LINE_HEIGHT_COMPACT = {
2414
+ "75": { desktop: "14px", mobile: "13px" },
2415
+ "100": { desktop: "16px", mobile: "14px" },
2416
+ "125": { desktop: "18px", mobile: "16px" },
2417
+ "150": { desktop: "20px", mobile: "18px" },
2418
+ "175": { desktop: "24px", mobile: "20px" },
2419
+ "200": { desktop: "26px", mobile: "24px" },
2420
+ "250": { desktop: "30px", mobile: "26px" },
2421
+ "300": { desktop: "36px", mobile: "30px" },
2422
+ "350": { desktop: "42px", mobile: "36px" },
2423
+ "450": { desktop: "52px", mobile: "42px" },
2424
+ "550": { desktop: "62px", mobile: "52px" },
2425
+ "650": { desktop: "72px", mobile: "62px" },
2426
+ "750": { desktop: "82px", mobile: "72px" }
2427
+ };
2428
+ var LINE_HEIGHT_TEXT = {
2429
+ "75": { desktop: "14px", mobile: "13px" },
2430
+ "100": { desktop: "18px", mobile: "14px" },
2431
+ "125": { desktop: "20px", mobile: "16px" },
2432
+ "150": { desktop: "22px", mobile: "18px" },
2433
+ "175": { desktop: "26px", mobile: "20px" },
2434
+ "200": { desktop: "28px", mobile: "24px" },
2435
+ "250": { desktop: "34px", mobile: "26px" },
2436
+ "300": { desktop: "40px", mobile: "30px" },
2437
+ "350": { desktop: "44px", mobile: "36px" },
2438
+ "450": { desktop: "56px", mobile: "42px" },
2439
+ "550": { desktop: "66px", mobile: "52px" },
2440
+ "650": { desktop: "78px", mobile: "62px" },
2441
+ "750": { desktop: "88px", mobile: "72px" }
2442
+ };
2443
+ var TYPOGRAPHY_SCALE_FONT_SIZE = {
2444
+ "200": "10px",
2445
+ "300": "12px",
2446
+ "400": "14px",
2447
+ "500": "16px",
2448
+ "600": "18px"
2449
+ };
2450
+ var TYPOGRAPHY_SCALE_LINE_HEIGHT = {
2451
+ "200": "16px",
2452
+ "300": "18px",
2453
+ "400": "20px",
2454
+ "500": "22px",
2455
+ "600": "24px"
2456
+ };
2457
+ var SPACING_SCALE = {
2458
+ "50": "2px",
2459
+ "75": "4px",
2460
+ "100": "6px",
2461
+ "150": "8px",
2462
+ "200": "10px",
2463
+ "250": "12px",
2464
+ "300": "16px",
2465
+ "400": "20px",
2466
+ "500": "24px",
2467
+ "600": "32px",
2468
+ "800": "48px",
2469
+ "1000": "64px"
2470
+ };
2471
+ var FONT_FAMILY = {
2472
+ compact: "'Aktiv Grotesk', sans-serif",
2473
+ display: "'Pilat Wide', 'Aktiv Grotesk', sans-serif",
2474
+ text: "'Aktiv Grotesk', sans-serif"
2475
+ };
2476
+ var RADIUS_SCALE = {
2477
+ "25": "2px",
2478
+ "50": "4px",
2479
+ "75": "6px",
2480
+ "100": "8px",
2481
+ "150": "12px",
2482
+ "200": "16px",
2483
+ "999": "999px"
2484
+ };
2485
+ var STROKE_SCALE = {
2486
+ "1": "1px",
2487
+ "2": "2px",
2488
+ "3": "3px"
2489
+ };
2490
+ var PentagramResolver = class {
2491
+ device;
2492
+ constructor(device = "desktop") {
2493
+ this.device = device;
2494
+ }
2495
+ setDevice(device) {
2496
+ this.device = device;
2497
+ }
2498
+ /**
2499
+ * Resolve a single alias to a concrete value.
2500
+ *
2501
+ * @param alias - Alias string like "300" (fontSize), "display/300" (lineHeight), or "radius/100"
2502
+ * @param context - Optional context hint: 'fontSize' or 'lineHeight'
2503
+ * @returns Resolved value (e.g., "28px") or original if not an alias
2504
+ */
2505
+ resolve(alias, context) {
2506
+ if (typeof alias !== "string") {
2507
+ return alias;
2508
+ }
2509
+ if (this.isResolved(alias)) {
2510
+ return alias;
2511
+ }
2512
+ if (/^\d+$/.test(alias) && context !== "lineHeight") {
2513
+ const value = FONT_SIZE_SCALE[alias];
2514
+ return value ? value[this.device] : alias;
2515
+ }
2516
+ if (alias.startsWith("display/")) {
2517
+ const step = alias.replace("display/", "");
2518
+ const value = LINE_HEIGHT_DISPLAY[step];
2519
+ return value ? value[this.device] : alias;
2520
+ }
2521
+ if (alias.startsWith("compact/")) {
2522
+ const step = alias.replace("compact/", "");
2523
+ const value = LINE_HEIGHT_COMPACT[step];
2524
+ return value ? value[this.device] : alias;
2525
+ }
2526
+ if (alias.startsWith("text/")) {
2527
+ const step = alias.replace("text/", "");
2528
+ const value = LINE_HEIGHT_TEXT[step];
2529
+ return value ? value[this.device] : alias;
2530
+ }
2531
+ if (alias.startsWith("font-size/")) {
2532
+ const step = alias.replace("font-size/", "");
2533
+ const value = FONT_SIZE_SCALE[step];
2534
+ return value ? value[this.device] : alias;
2535
+ }
2536
+ if (alias.startsWith("line-height/display/")) {
2537
+ const step = alias.replace("line-height/display/", "");
2538
+ const value = LINE_HEIGHT_DISPLAY[step];
2539
+ return value ? value[this.device] : alias;
2540
+ }
2541
+ if (alias.startsWith("line-height/compact/")) {
2542
+ const step = alias.replace("line-height/compact/", "");
2543
+ const value = LINE_HEIGHT_COMPACT[step];
2544
+ return value ? value[this.device] : alias;
2545
+ }
2546
+ if (alias.startsWith("line-height/text/")) {
2547
+ const step = alias.replace("line-height/text/", "");
2548
+ const value = LINE_HEIGHT_TEXT[step];
2549
+ return value ? value[this.device] : alias;
2550
+ }
2551
+ if (alias.startsWith("typography-scale/font-size/")) {
2552
+ const step = alias.replace("typography-scale/font-size/", "");
2553
+ return TYPOGRAPHY_SCALE_FONT_SIZE[step] ?? alias;
2554
+ }
2555
+ if (alias.startsWith("typography-scale/line-height/")) {
2556
+ const step = alias.replace("typography-scale/line-height/", "");
2557
+ return TYPOGRAPHY_SCALE_LINE_HEIGHT[step] ?? alias;
2558
+ }
2559
+ if (alias.startsWith("spacing/")) {
2560
+ const step = alias.replace("spacing/", "");
2561
+ return SPACING_SCALE[step] ?? alias;
2562
+ }
2563
+ if (FONT_FAMILY[alias]) {
2564
+ return FONT_FAMILY[alias];
2565
+ }
2566
+ if (alias.startsWith("radius/")) {
2567
+ const step = alias.replace("radius/", "");
2568
+ return RADIUS_SCALE[step] ?? alias;
2569
+ }
2570
+ if (alias.startsWith("stroke/")) {
2571
+ const step = alias.replace("stroke/", "");
2572
+ return STROKE_SCALE[step] ?? alias;
2573
+ }
2574
+ return alias;
2575
+ }
2576
+ /**
2577
+ * Recursively resolve all aliases in an object.
2578
+ *
2579
+ * @param obj - Object containing alias strings
2580
+ * @returns New object with all aliases resolved to concrete values
2581
+ */
2582
+ resolvePrimitives(obj) {
2583
+ if (obj === null || obj === void 0) {
2584
+ return obj;
2585
+ }
2586
+ if (typeof obj === "string" || typeof obj === "number") {
2587
+ return this.resolve(obj);
2588
+ }
2589
+ if (Array.isArray(obj)) {
2590
+ return obj.map((item) => this.resolvePrimitives(item));
2591
+ }
2592
+ if (typeof obj === "object") {
2593
+ const input = obj;
2594
+ const result = {};
2595
+ if ("scale" in input && typeof input.scale === "string" && Object.keys(input).length === 1) {
2596
+ const scale = input.scale;
2597
+ return {
2598
+ fontSize: TYPOGRAPHY_SCALE_FONT_SIZE[scale] ?? `${scale}px`,
2599
+ lineHeight: TYPOGRAPHY_SCALE_LINE_HEIGHT[scale] ?? `${scale}px`
2600
+ };
2601
+ }
2602
+ for (const [key, value] of Object.entries(input)) {
2603
+ if (key === "fontSize" && typeof value === "string") {
2604
+ result[key] = this.resolve(value, "fontSize");
2605
+ } else if (key === "lineHeight" && typeof value === "string") {
2606
+ result[key] = this.resolve(value, "lineHeight");
2607
+ } else {
2608
+ result[key] = this.resolvePrimitives(value);
2609
+ }
2610
+ }
2611
+ return result;
2612
+ }
2613
+ return obj;
2614
+ }
2615
+ /**
2616
+ * Check if a value is already resolved (not an alias).
2617
+ */
2618
+ isResolved(value) {
2619
+ 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";
2620
+ }
2621
+ };
2622
+ function createResolver(device = "desktop") {
2623
+ return new PentagramResolver(device);
2624
+ }
2625
+ function resolveForDesktop(obj) {
2626
+ return new PentagramResolver("desktop").resolvePrimitives(obj);
2627
+ }
2628
+ function resolveForMobile(obj) {
2629
+ return new PentagramResolver("mobile").resolvePrimitives(obj);
2630
+ }
2631
+
2632
+ // src/pentagram-to-legacy/map-pentagram-typo-to-legacy.ts
2633
+ function extractControlTypo(size, defaultFontWeight = 400) {
2634
+ if (!size) {
2635
+ return {
2636
+ fontSize: "14px",
2637
+ lineHeight: "20px",
2638
+ fontWeight: defaultFontWeight
2639
+ };
2640
+ }
2641
+ return {
2642
+ fontSize: size.fontSize,
2643
+ lineHeight: size.lineHeight,
2644
+ fontWeight: defaultFontWeight
2645
+ };
2646
+ }
2647
+ function buildBasicStyle(variant, useAccent = false) {
2648
+ const fontWeight = useAccent ? variant.accent?.fontWeight ?? 500 : variant.default?.fontWeight ?? 400;
2649
+ return {
2650
+ fontSize: variant.fontSize,
2651
+ lineHeight: variant.lineHeight,
2652
+ fontWeight
2653
+ };
2654
+ }
2655
+ function buildParagraphStyle(variant) {
2656
+ return {
2657
+ fontSize: variant.fontSize,
2658
+ lineHeight: variant.paragraph?.lineHeight ?? variant.lineHeight,
2659
+ fontWeight: variant.default?.fontWeight ?? 400
2660
+ };
2661
+ }
2662
+ var DEFAULT_FONT_FAMILY = `'GraphikLCWebUikit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
2663
+ function mapPentagramTypoToLegacy(pentagram, fontFamily = DEFAULT_FONT_FAMILY) {
2664
+ const { heading, basic, control } = pentagram;
2665
+ return {
2666
+ fontFamily,
2667
+ core: {
2668
+ // heading.h1 → core.h1
2669
+ h1: {
2670
+ fontSize: heading.h1.fontSize,
2671
+ lineHeight: heading.h1.lineHeight,
2672
+ fontWeight: heading.h1.fontWeight ?? 700
2673
+ },
2674
+ // heading.h2 → core.h2
2675
+ h2: {
2676
+ fontSize: heading.h2.fontSize,
2677
+ lineHeight: heading.h2.lineHeight,
2678
+ fontWeight: heading.h2.fontWeight ?? 700
2679
+ },
2680
+ // heading.h3 → core.h3
2681
+ h3: {
2682
+ fontSize: heading.h3.fontSize,
2683
+ lineHeight: heading.h3.lineHeight,
2684
+ fontWeight: heading.h3.fontWeight ?? 700
2685
+ },
2686
+ // heading.h4 → core.h4
2687
+ h4: {
2688
+ fontSize: heading.h4.fontSize,
2689
+ lineHeight: heading.h4.lineHeight,
2690
+ fontWeight: heading.h4.fontWeight ?? 700
2691
+ },
2692
+ // basic.bodyMd → core.bodyMd
2693
+ bodyMd: buildBasicStyle(basic.bodyMd, false),
2694
+ // basic.bodyMd.accent → core.bodyMdAccent
2695
+ bodyMdAccent: buildBasicStyle(basic.bodyMd, true),
2696
+ // basic.bodyLg.accent → core.bodyLgAccent
2697
+ bodyLgAccent: buildBasicStyle(basic.bodyLg, true),
2698
+ // basic.bodyLg → core.bodyLg (DELETED but required for compatibility)
2699
+ bodyLg: buildBasicStyle(basic.bodyLg, false),
2700
+ // basic.bodyMd.paragraph → core.paragraph
2701
+ paragraph: buildParagraphStyle(basic.bodyMd),
2702
+ // basic.bodyMd → core.label (same as bodyMd)
2703
+ label: buildBasicStyle(basic.bodyMd, false),
2704
+ // basic.bodySm → core.minor
2705
+ minor: buildBasicStyle(basic.bodySm, false),
2706
+ // core.strong (DELETED but required for compatibility)
2707
+ strong: buildBasicStyle(basic.bodyMd, true)
2708
+ },
2709
+ components: {
2710
+ // control.button.* → components.button.*
2711
+ button: {
2712
+ sm: extractControlTypo(control.button.sm, 500),
2713
+ md: extractControlTypo(control.button.md, 500),
2714
+ lg: extractControlTypo(control.button.lg, 500)
2715
+ },
2716
+ // control.input.* → components.input.*
2717
+ input: {
2718
+ sm: extractControlTypo(control.input.sm, 400),
2719
+ md: extractControlTypo(control.input.md, 400),
2720
+ lg: extractControlTypo(control.input.lg, 400)
2721
+ },
2722
+ // control.tab.* → components.tab.*
2723
+ tab: {
2724
+ sm: extractControlTypo(control.tab.sm, 500),
2725
+ md: extractControlTypo(control.tab.md, 500),
2726
+ lg: extractControlTypo(control.tab.lg, 500)
2727
+ },
2728
+ // control.checkbox.* + control.radio.* → components.check.*
2729
+ // (checkbox and radio share the same legacy component)
2730
+ check: {
2731
+ sm: extractControlTypo(control.checkbox?.sm ?? control.radio?.sm, 400),
2732
+ md: extractControlTypo(control.checkbox?.md ?? control.radio?.md, 400),
2733
+ lg: extractControlTypo(control.checkbox?.lg ?? control.radio?.lg, 400)
2734
+ },
2735
+ // basic.bodyMd/bodySm/bodyXs → components.label.lg/md/sm
2736
+ label: {
2737
+ sm: buildBasicStyle(basic.bodyXs, false),
2738
+ md: buildBasicStyle(basic.bodySm, false),
2739
+ lg: buildBasicStyle(basic.bodyMd, false)
2740
+ }
2741
+ }
2742
+ };
2743
+ }
2744
+ var DELETED_LEGACY_TYPO_VARS = [
2745
+ "components.heading",
2746
+ "components.fieldGroup",
2747
+ "core.strong",
2748
+ "core.bodyLg"
2749
+ ];
2750
+
2751
+ // src/pentagram-to-legacy/map-pentagram-shape-to-legacy.ts
2752
+ function getShapeBorderRadius(shape, preferredSize = "md", fallback = "8px") {
2753
+ if (!shape) return fallback;
2754
+ const size = shape[preferredSize] ?? shape["lg"] ?? shape["sm"] ?? Object.values(shape)[0];
2755
+ return size?.borderRadius ?? fallback;
2756
+ }
2757
+ function getShapeBorderWidth(shape, preferredSize = "md", fallback = "1px") {
2758
+ if (!shape) return fallback;
2759
+ const size = shape[preferredSize] ?? shape["lg"] ?? shape["sm"] ?? Object.values(shape)[0];
2760
+ return size?.borderWidth ?? fallback;
2761
+ }
2762
+ function mapPentagramShapeToLegacy(pentagram, existingMisc) {
2763
+ const buttonRadius = getShapeBorderRadius(pentagram.button, "md", "8px");
2764
+ const inputRadius = getShapeBorderRadius(pentagram.input, "md", "8px");
2765
+ const checkboxRadius = getShapeBorderRadius(pentagram.checkbox, "md", "4px");
2766
+ const tagRadius = getShapeBorderRadius(pentagram.tag, "md", "8px");
2767
+ const popupRadius = pentagram.modal?.borderRadius ?? pentagram.contextMenu?.md?.borderRadius ?? pentagram.tooltip?.md?.borderRadius ?? "8px";
2768
+ const borderWidth = getShapeBorderWidth(pentagram.button, "md", "2px");
2769
+ const buttonSm = pentagram.button?.sm?.borderRadius ?? "4px";
2770
+ const buttonMd = pentagram.button?.md?.borderRadius ?? "6px";
2771
+ const buttonLg = pentagram.button?.lg?.borderRadius ?? "8px";
2772
+ const buttonXl = pentagram.button?.xl?.borderRadius ?? "8px";
2773
+ return {
2774
+ borderRadiusScale: {
2775
+ sm: existingMisc?.borderRadiusScale?.sm ?? buttonSm,
2776
+ md: existingMisc?.borderRadiusScale?.md ?? buttonMd,
2777
+ lg: existingMisc?.borderRadiusScale?.lg ?? buttonLg,
2778
+ xl: existingMisc?.borderRadiusScale?.xl ?? buttonXl
2779
+ },
2780
+ borderWidth: existingMisc?.borderWidth ?? borderWidth,
2781
+ borderRadius: {
2782
+ input: inputRadius,
2783
+ button: buttonRadius,
2784
+ buttonIcon: buttonRadius,
2785
+ popup: popupRadius,
2786
+ checkbox: checkboxRadius,
2787
+ tag: tagRadius
2788
+ },
2789
+ minWidth: {
2790
+ button: existingMisc?.minWidth?.button ?? "40px"
2791
+ }
2792
+ };
2793
+ }
2794
+ function flattenPentagramShapeToVars(pentagram) {
2795
+ const vars = {};
2796
+ function addSizedComponent(name, shape) {
2797
+ if (!shape) return;
2798
+ for (const [size, props] of Object.entries(shape)) {
2799
+ if (props.borderRadius) {
2800
+ vars[`shape-${name}-${size}-borderRadius`] = props.borderRadius;
2801
+ }
2802
+ if (props.borderWidth) {
2803
+ vars[`shape-${name}-${size}-borderWidth`] = props.borderWidth;
2804
+ }
2805
+ }
2806
+ }
2807
+ addSizedComponent("button", pentagram.button);
2808
+ addSizedComponent("input", pentagram.input);
2809
+ addSizedComponent("checkbox", pentagram.checkbox);
2810
+ addSizedComponent("tab", pentagram.tabItem);
2811
+ addSizedComponent("tag", pentagram.tag);
2812
+ addSizedComponent("radio", pentagram.radio);
2813
+ addSizedComponent("switch", pentagram.switch);
2814
+ addSizedComponent("segmented", pentagram.segmented);
2815
+ addSizedComponent("segmentedItem", pentagram.segmentedItem);
2816
+ addSizedComponent("tooltip", pentagram.tooltip);
2817
+ addSizedComponent("contextMenu", pentagram.contextMenu);
2818
+ addSizedComponent("avatar", pentagram.avatar);
2819
+ addSizedComponent("toggleButtonGroup", pentagram.toggleButtonGroup);
2820
+ if (pentagram.modal?.borderRadius) {
2821
+ vars["shape-modal-borderRadius"] = pentagram.modal.borderRadius;
2822
+ }
2823
+ if (pentagram.cell?.borderRadius) {
2824
+ vars["shape-cell-borderRadius"] = pentagram.cell.borderRadius;
2825
+ }
2826
+ if (pentagram.toast?.borderRadius) {
2827
+ vars["shape-toast-borderRadius"] = pentagram.toast.borderRadius;
2828
+ }
2829
+ return vars;
2830
+ }
2831
+
2832
+ // src/pentagram-to-legacy/map-handcrafted-pentagram-to-legacy.ts
2833
+ function mapHandCraftedPentagramToLegacy(pentagram) {
2834
+ return {
2835
+ core: {
2836
+ background: {
2837
+ primary: pentagram.background.primary,
2838
+ secondary: pentagram.layer.float,
2839
+ ghost: pentagram.overlay.mono,
2840
+ tone: pentagram.layer.scrim,
2841
+ selection: "transparent",
2842
+ // deleted in Pentagram
2843
+ hover: "transparent",
2844
+ // deleted in Pentagram
2845
+ brand: pentagram.background.brandSecondary,
2846
+ brandSecondary: pentagram.background.brandExtraSecondary,
2847
+ success: pentagram.background.successSecondary,
2848
+ warning: pentagram.background.warningSecondary,
2849
+ alert: pentagram.background.alertSecondary,
2850
+ neutral: pentagram.background.neutralSecondary
2851
+ },
2852
+ divider: {
2853
+ divider: pentagram.border.secondary
2854
+ },
2855
+ text: {
2856
+ primary: pentagram.content.primary,
2857
+ secondary: pentagram.content.secondary,
2858
+ tertiary: pentagram.content.tertiary,
2859
+ brand: pentagram.content.brandPrimary,
2860
+ brandSecondary: pentagram.content.brandExtraPrimary,
2861
+ success: pentagram.content.successPrimary,
2862
+ warning: pentagram.content.warningPrimary,
2863
+ alert: pentagram.content.alertPrimary,
2864
+ neutral: pentagram.content.neutralPrimary
2865
+ },
2866
+ link: {
2867
+ link: pentagram.control.link.primary,
2868
+ linkHover: pentagram.control.link.primaryHover,
2869
+ linkMinor: pentagram.control.link.secondary,
2870
+ linkMinorHover: pentagram.control.link.secondaryHover
2871
+ }
2872
+ },
2873
+ control: {
2874
+ primary: {
2875
+ bg: pentagram.control.brand.primary.bg,
2876
+ bgHover: pentagram.control.brand.primary.bgHover,
2877
+ bgPress: pentagram.control.brand.primary.bgPress,
2878
+ bgDisabled: pentagram.control.brand.primary.bgDisable,
2879
+ border: pentagram.control.brand.primary.border,
2880
+ borderHover: pentagram.control.brand.primary.borderHover,
2881
+ borderPress: pentagram.control.brand.primary.borderPress
2882
+ },
2883
+ secondary: {
2884
+ bg: pentagram.control.brand.secondary.bg,
2885
+ bgHover: pentagram.control.brand.secondary.bgHover,
2886
+ bgPress: pentagram.control.brand.secondary.bgPress,
2887
+ border: pentagram.control.brand.secondary.border,
2888
+ borderHover: pentagram.control.brand.secondary.borderHover,
2889
+ borderPress: pentagram.control.brand.secondary.borderPress
2890
+ },
2891
+ default: {
2892
+ bg: pentagram.control.mono.primary.bg,
2893
+ bgHover: pentagram.control.mono.primary.bgHover,
2894
+ bgPress: pentagram.control.mono.primary.bgPress,
2895
+ border: pentagram.control.mono.primary.border,
2896
+ borderHover: pentagram.control.mono.primary.borderHover,
2897
+ borderPress: pentagram.control.mono.primary.borderPress
2898
+ },
2899
+ input: {
2900
+ bg: pentagram.control.input.bg,
2901
+ bgHover: pentagram.control.input.bgHover,
2902
+ bgDisabled: pentagram.control.input.bgDisable,
2903
+ border: pentagram.control.input.border,
2904
+ borderHover: pentagram.control.input.borderHover,
2905
+ borderDisabled: pentagram.control.input.borderDisable,
2906
+ text: pentagram.control.input.text,
2907
+ textDisabled: pentagram.control.input.textDisable,
2908
+ placeholder: pentagram.control.input.placeholder
2909
+ },
2910
+ focus: {
2911
+ bg: pentagram.control.focus.bg,
2912
+ border: pentagram.control.focus.border
2913
+ },
2914
+ alert: {
2915
+ bg: pentagram.control.alert.secondary.bg,
2916
+ bgHover: pentagram.control.alert.secondary.bgHover,
2917
+ bgPress: pentagram.control.alert.secondary.bgPress,
2918
+ border: pentagram.control.alert.secondary.border,
2919
+ borderHover: pentagram.control.alert.secondary.borderHover,
2920
+ borderPress: pentagram.control.alert.secondary.borderPress
2921
+ },
2922
+ check: {
2923
+ bg: pentagram.control.check.bg,
2924
+ bgHover: pentagram.control.check.bgHover,
2925
+ bgDisabled: pentagram.control.check.bgDisable
2926
+ },
2927
+ faint: {
2928
+ bg: pentagram.control.faint.bg,
2929
+ bgHover: pentagram.control.faint.bgHover,
2930
+ border: pentagram.control.faint.border,
2931
+ borderHover: pentagram.control.faint.borderHover
2932
+ },
2933
+ toggle: {
2934
+ bg: pentagram.control.switch.bg,
2935
+ bgHover: pentagram.control.switch.bgHover
2936
+ },
2937
+ text: {
2938
+ active: pentagram.control.brand.text.primary,
2939
+ secondary: pentagram.control.brand.text.secondary,
2940
+ default: pentagram.control.mono.text.primary,
2941
+ primary: pentagram.control.text.primary,
2942
+ disabled: pentagram.control.brand.text.disable,
2943
+ faint: pentagram.control.check.icon,
2944
+ alert: pentagram.control.alert.text.secondary
2945
+ }
2946
+ }
2947
+ };
2948
+ }
2949
+
2950
+ // src/pentagram-to-legacy/map-pentagram-theme-to-legacy.ts
2951
+ function buildBaseColorsFromPentagram(colors) {
2952
+ return {
2953
+ content: colors.content.primary,
2954
+ surface: colors.background.primary,
2955
+ project: colors.control.brand.primary.bg,
2956
+ accent: colors.control.brand.text.primary,
2957
+ phantom: colors.border.secondary,
2958
+ path: colors.control.link.primary,
2959
+ success: colors.content.successPrimary,
2960
+ warning: colors.content.warningPrimary,
2961
+ alert: colors.content.alertPrimary,
2962
+ neutral: colors.content.neutralPrimary
2963
+ };
2964
+ }
2965
+ function mapPentagramThemeToLegacy(pentagram, device = "desktop") {
2966
+ const resolver = createResolver(device);
2967
+ const resolvedTypo = resolver.resolvePrimitives(pentagram.typo);
2968
+ const resolvedShape = resolver.resolvePrimitives(pentagram.shape);
2969
+ return {
2970
+ colors: {
2971
+ base: buildBaseColorsFromPentagram(pentagram.colors),
2972
+ ...mapHandCraftedPentagramToLegacy(pentagram.colors)
2973
+ },
2974
+ typo: mapPentagramTypoToLegacy(resolvedTypo),
2975
+ misc: mapPentagramShapeToLegacy(resolvedShape),
2976
+ shadows: pentagram.shadows
2977
+ };
2978
+ }
2979
+
2980
+ // src/themes/pentagram/mappers/scheme-to-legacy.ts
2981
+ function mapThemeSchemeToLegacy(scheme) {
2982
+ return {
2983
+ core: {
2984
+ background: {
2985
+ primary: scheme.background.primary,
2986
+ secondary: scheme.layer.float,
2987
+ ghost: scheme.overlay.mono,
2988
+ tone: scheme.layer.scrim,
2989
+ selection: "transparent",
2990
+ // deleted in Pentagram
2991
+ hover: "transparent",
2992
+ // deleted in Pentagram
2993
+ brand: scheme.background.brand.secondary,
2994
+ brandSecondary: scheme.background.brandExtra.secondary,
2995
+ success: scheme.background.success.secondary,
2996
+ warning: scheme.background.warning.secondary,
2997
+ alert: scheme.background.alert.secondary,
2998
+ neutral: scheme.background.neutral.secondary
2999
+ },
3000
+ divider: {
3001
+ divider: scheme.border.secondary
3002
+ },
3003
+ text: {
3004
+ primary: scheme.content.primary,
3005
+ secondary: scheme.content.secondary,
3006
+ tertiary: scheme.content.tertiary,
3007
+ brand: scheme.content.brand.primary,
3008
+ brandSecondary: scheme.content.brandExtra.primary,
3009
+ success: scheme.content.success.primary,
3010
+ warning: scheme.content.warning.primary,
3011
+ alert: scheme.content.alert.primary,
3012
+ neutral: scheme.content.neutral.primary
3013
+ },
3014
+ link: {
3015
+ link: scheme.control.link.primary,
3016
+ linkHover: scheme.control.link.primaryHover,
3017
+ linkMinor: scheme.control.link.secondary,
3018
+ linkMinorHover: scheme.control.link.secondaryHover
3019
+ }
3020
+ },
3021
+ control: {
3022
+ primary: {
3023
+ bg: scheme.control.brand.primary.bg,
3024
+ bgHover: scheme.control.brand.primary.bgHover,
3025
+ bgPress: scheme.control.brand.primary.bgPress,
3026
+ bgDisabled: scheme.control.brand.primary.bgDisable,
3027
+ border: scheme.control.brand.primary.border,
3028
+ borderHover: scheme.control.brand.primary.borderHover,
3029
+ borderPress: scheme.control.brand.primary.borderPress
3030
+ },
3031
+ secondary: {
3032
+ bg: scheme.control.brand.secondary.bg,
3033
+ bgHover: scheme.control.brand.secondary.bgHover,
3034
+ bgPress: scheme.control.brand.secondary.bgPress,
3035
+ border: scheme.control.brand.secondary.border,
3036
+ borderHover: scheme.control.brand.secondary.borderHover,
3037
+ borderPress: scheme.control.brand.secondary.borderPress
3038
+ },
3039
+ default: {
3040
+ bg: scheme.control.mono.primary.bg,
3041
+ bgHover: scheme.control.mono.primary.bgHover,
3042
+ bgPress: scheme.control.mono.primary.bgPress,
3043
+ border: scheme.control.mono.primary.border,
3044
+ borderHover: scheme.control.mono.primary.borderHover,
3045
+ borderPress: scheme.control.mono.primary.borderPress
3046
+ },
3047
+ input: {
3048
+ bg: scheme.control.input.bg,
3049
+ bgHover: scheme.control.input.bgHover,
3050
+ bgDisabled: scheme.control.input.bgDisable,
3051
+ border: scheme.control.input.border,
3052
+ borderHover: scheme.control.input.borderHover,
3053
+ borderDisabled: scheme.control.input.borderDisable,
3054
+ text: scheme.control.input.text,
3055
+ textDisabled: scheme.control.input.textDisable,
3056
+ placeholder: scheme.control.input.placeholder
3057
+ },
3058
+ focus: {
3059
+ bg: scheme.control.focus.bg,
3060
+ border: scheme.control.focus.border
3061
+ },
3062
+ alert: {
3063
+ bg: scheme.control.alert.secondary.bg,
3064
+ bgHover: scheme.control.alert.secondary.bgHover,
3065
+ bgPress: scheme.control.alert.secondary.bgPress,
3066
+ border: scheme.control.alert.secondary.border,
3067
+ borderHover: scheme.control.alert.secondary.borderHover,
3068
+ borderPress: scheme.control.alert.secondary.borderPress
3069
+ },
3070
+ check: {
3071
+ bg: scheme.control.check.bg,
3072
+ bgHover: scheme.control.check.bgHover,
3073
+ bgDisabled: scheme.control.check.bgDisable
3074
+ },
3075
+ faint: {
3076
+ bg: scheme.control.faint.bg,
3077
+ bgHover: scheme.control.faint.bgHover,
3078
+ border: scheme.control.faint.border,
3079
+ borderHover: scheme.control.faint.borderHover
3080
+ },
3081
+ toggle: {
3082
+ bg: scheme.control.switch.bg,
3083
+ bgHover: scheme.control.switch.bgHover
3084
+ },
3085
+ text: {
3086
+ active: scheme.control.brand.text.primary,
3087
+ secondary: scheme.control.brand.text.secondary,
3088
+ default: scheme.control.mono.text.primary,
3089
+ primary: scheme.control.text.primary,
3090
+ disabled: scheme.control.brand.text.disable,
3091
+ faint: scheme.control.check.icon,
3092
+ alert: scheme.control.alert.text.secondary
3093
+ }
3094
+ }
3095
+ };
3096
+ }
3097
+
1940
3098
  // src/themes/pentagram/presets/pay-station-dark.ts
1941
3099
  import { colord as colord10 } from "colord";
1942
3100
  var baseDark = {
@@ -1960,7 +3118,28 @@ var baseDark = {
1960
3118
  onAlert: colord10("#000000"),
1961
3119
  onNeutral: colord10("#000000")
1962
3120
  };
1963
- var createDarkScheme = (b) => ({
3121
+ var pentagramDarkScheme = (b) => ({
3122
+ base: {
3123
+ content: b.content.toHslString(),
3124
+ contentInverse: b.contentInverse.toHslString(),
3125
+ background: b.background.toHslString(),
3126
+ backgroundInverse: b.backgroundInverse.toHslString(),
3127
+ brand: b.brand.toHslString(),
3128
+ brandExtra: b.brandExtra.toHslString(),
3129
+ success: b.success.toHslString(),
3130
+ warning: b.warning.toHslString(),
3131
+ alert: b.alert.toHslString(),
3132
+ neutral: b.neutral.toHslString(),
3133
+ mono: b.mono.toHslString(),
3134
+ linkPrimary: b.linkPrimary.toHslString(),
3135
+ linkSecondary: b.linkSecondary.toHslString(),
3136
+ onBrand: b.onBrand.toHslString(),
3137
+ onBrandExtra: b.onBrandExtra.toHslString(),
3138
+ onSuccess: b.onSuccess.toHslString(),
3139
+ onWarning: b.onWarning.toHslString(),
3140
+ onAlert: b.onAlert.toHslString(),
3141
+ onNeutral: b.onNeutral.toHslString()
3142
+ },
1964
3143
  background: {
1965
3144
  primary: b.background.toHslString(),
1966
3145
  secondary: b.background.darken(0.05).toHslString(),
@@ -2209,9 +3388,9 @@ var createDarkScheme = (b) => ({
2209
3388
  icon: b.onBrand.toHslString()
2210
3389
  },
2211
3390
  faint: {
2212
- bg: b.mono.alpha(0.1).toHslString(),
2213
- bgHover: b.mono.alpha(0.15).toHslString(),
2214
- border: b.mono.alpha(0.15).toHslString(),
3391
+ bg: b.mono.alpha(0.15).toHslString(),
3392
+ bgHover: b.mono.alpha(0.2).toHslString(),
3393
+ border: b.mono.alpha(0.2).toHslString(),
2215
3394
  borderHover: b.mono.alpha(0.25).toHslString()
2216
3395
  },
2217
3396
  slider: {
@@ -2229,8 +3408,12 @@ var createDarkScheme = (b) => ({
2229
3408
  },
2230
3409
  knob: {
2231
3410
  bg: b.onBrand.toHslString(),
2232
- bgHover: b.onBrand.darken(0.1).toHslString(),
2233
- bgInactive: b.mono.alpha(0.6).toHslString()
3411
+ bgHover: b.onBrand.lighten(0.1).toHslString(),
3412
+ bgActive: b.onBrand.toHslString(),
3413
+ bgActiveHover: b.onBrand.lighten(0.1).toHslString(),
3414
+ bgInactive: b.mono.toHslString(),
3415
+ bgInactiveHover: b.mono.lighten(0.1).toHslString(),
3416
+ bgDisable: b.mono.alpha(0.25).toHslString()
2234
3417
  },
2235
3418
  text: {
2236
3419
  primary: b.content.toHslString(),
@@ -2267,7 +3450,7 @@ var createDarkScheme = (b) => ({
2267
3450
  }
2268
3451
  }
2269
3452
  });
2270
- var payStationDarkScheme = createDarkScheme(baseDark);
3453
+ var pentagramDark = pentagramDarkScheme(baseDark);
2271
3454
 
2272
3455
  // src/themes/pentagram/presets/pay-station-light.ts
2273
3456
  import { colord as colord11 } from "colord";
@@ -2292,7 +3475,28 @@ var base10 = {
2292
3475
  onAlert: colord11("#000000"),
2293
3476
  onNeutral: colord11("#000000")
2294
3477
  };
2295
- var createScheme = (b) => ({
3478
+ var pentagramLightScheme = (b) => ({
3479
+ base: {
3480
+ content: b.content.toHslString(),
3481
+ contentInverse: b.contentInverse.toHslString(),
3482
+ background: b.background.toHslString(),
3483
+ backgroundInverse: b.backgroundInverse.toHslString(),
3484
+ brand: b.brand.toHslString(),
3485
+ brandExtra: b.brandExtra.toHslString(),
3486
+ success: b.success.toHslString(),
3487
+ warning: b.warning.toHslString(),
3488
+ alert: b.alert.toHslString(),
3489
+ neutral: b.neutral.toHslString(),
3490
+ mono: b.mono.toHslString(),
3491
+ linkPrimary: b.linkPrimary.toHslString(),
3492
+ linkSecondary: b.linkSecondary.toHslString(),
3493
+ onBrand: b.onBrand.toHslString(),
3494
+ onBrandExtra: b.onBrandExtra.toHslString(),
3495
+ onSuccess: b.onSuccess.toHslString(),
3496
+ onWarning: b.onWarning.toHslString(),
3497
+ onAlert: b.onAlert.toHslString(),
3498
+ onNeutral: b.onNeutral.toHslString()
3499
+ },
2296
3500
  background: {
2297
3501
  primary: b.background.toHslString(),
2298
3502
  secondary: b.background.saturate(0.02).darken(0.05).toHslString(),
@@ -2544,7 +3748,7 @@ var createScheme = (b) => ({
2544
3748
  bg: b.mono.alpha(0.15).toHslString(),
2545
3749
  bgHover: b.mono.alpha(0.2).toHslString(),
2546
3750
  border: b.mono.alpha(0.2).toHslString(),
2547
- borderHover: b.mono.alpha(0.1).toHslString()
3751
+ borderHover: b.mono.alpha(0.25).toHslString()
2548
3752
  },
2549
3753
  slider: {
2550
3754
  bg: b.brand.toHslString(),
@@ -2562,7 +3766,11 @@ var createScheme = (b) => ({
2562
3766
  knob: {
2563
3767
  bg: b.onBrand.toHslString(),
2564
3768
  bgHover: b.onBrand.darken(0.1).toHslString(),
2565
- bgInactive: b.onBrand.toHslString()
3769
+ bgActive: b.onBrand.toHslString(),
3770
+ bgActiveHover: b.onBrand.darken(0.1).toHslString(),
3771
+ bgInactive: b.onBrand.toHslString(),
3772
+ bgInactiveHover: b.onBrand.darken(0.1).toHslString(),
3773
+ bgDisable: b.mono.alpha(0.25).toHslString()
2566
3774
  },
2567
3775
  text: {
2568
3776
  primary: b.content.toHslString(),
@@ -2599,7 +3807,64 @@ var createScheme = (b) => ({
2599
3807
  }
2600
3808
  }
2601
3809
  });
2602
- var payStationScheme = createScheme(base10);
3810
+ var pentagramLight = pentagramLightScheme(base10);
3811
+
3812
+ // src/themes/pentagram/pentagram.ts
3813
+ function convertToLegacyBase(pentagramBase) {
3814
+ return {
3815
+ content: pentagramBase.content.toRgbString(),
3816
+ surface: pentagramBase.background.toRgbString(),
3817
+ project: pentagramBase.brand.toRgbString(),
3818
+ accent: pentagramBase.brandExtra.toRgbString(),
3819
+ phantom: pentagramBase.mono.toRgbString(),
3820
+ path: pentagramBase.brand.toRgbString(),
3821
+ success: pentagramBase.success.toRgbString(),
3822
+ warning: pentagramBase.warning.toRgbString(),
3823
+ alert: pentagramBase.alert.toRgbString(),
3824
+ neutral: pentagramBase.neutral.toRgbString()
3825
+ };
3826
+ }
3827
+ var desktopResolver = createResolver("desktop");
3828
+ var resolvedTypoDesktop = desktopResolver.resolvePrimitives(
3829
+ typo_primitives_default
3830
+ );
3831
+ var resolvedShapeDesktop = desktopResolver.resolvePrimitives(shape_primitives_default);
3832
+ var pentagramTypo = mapPentagramTypoToLegacy(resolvedTypoDesktop);
3833
+ var pentagramMisc = mapPentagramShapeToLegacy(resolvedShapeDesktop);
3834
+ var paystation4PentagramLightLegacyCompatible = {
3835
+ colors: {
3836
+ base: convertToLegacyBase(base10),
3837
+ ...mapThemeSchemeToLegacy(pentagramLight)
3838
+ },
3839
+ typo: pentagramTypo,
3840
+ misc: pentagramMisc,
3841
+ shadows: shadowsDefault,
3842
+ globalStyle: "pentagram"
3843
+ };
3844
+ var paystation4PentagramDarkLegacyCompatible = {
3845
+ colors: {
3846
+ base: convertToLegacyBase(baseDark),
3847
+ ...mapThemeSchemeToLegacy(pentagramDark)
3848
+ },
3849
+ typo: pentagramTypo,
3850
+ misc: pentagramMisc,
3851
+ shadows: shadowsDefault,
3852
+ globalStyle: "pentagram"
3853
+ };
3854
+ var paystation4PentagramLight = {
3855
+ colors: pentagramLight,
3856
+ shape: shape_primitives_default,
3857
+ typo: typo_primitives_default,
3858
+ shadows: shadowsDefault,
3859
+ globalStyle: "pentagram"
3860
+ };
3861
+ var paystation4PentagramDark = {
3862
+ colors: pentagramDark,
3863
+ shape: shape_primitives_default,
3864
+ typo: typo_primitives_default,
3865
+ shadows: shadowsDefault,
3866
+ globalStyle: "pentagram"
3867
+ };
2603
3868
 
2604
3869
  // src/themes/index.ts
2605
3870
  var themes = {
@@ -2784,8 +4049,8 @@ var pentagramBaseColors = {
2784
4049
  payStationDark: baseDark
2785
4050
  };
2786
4051
  var pentagramColorsScheme = {
2787
- payStationLight: createScheme,
2788
- payStationDark: createDarkScheme
4052
+ payStationLight: pentagramLightScheme,
4053
+ payStationDark: pentagramDarkScheme
2789
4054
  };
2790
4055
  var pentagramBaseColorsKeys = [
2791
4056
  "content",
@@ -2868,31 +4133,48 @@ var applyPentagramColors = (schemeBase, overrides) => {
2868
4133
  return result;
2869
4134
  };
2870
4135
  export {
4136
+ DELETED_LEGACY_TYPO_VARS,
4137
+ PentagramResolver,
2871
4138
  base10 as base,
2872
4139
  baseDark,
2873
- createDarkScheme,
2874
- createScheme,
4140
+ buildBaseColorsFromPentagram,
4141
+ createResolver,
2875
4142
  emails,
2876
4143
  emailsDark,
2877
4144
  emailsThemes,
4145
+ flattenPentagramShapeToVars,
2878
4146
  generateWithScheme,
4147
+ mapHandCraftedPentagramToLegacy,
4148
+ mapPentagramShapeToLegacy,
4149
+ mapPentagramThemeToLegacy,
4150
+ mapPentagramTypoToLegacy,
2879
4151
  palettes,
2880
- payStationDarkScheme,
2881
- payStationScheme,
2882
4152
  paystation4,
2883
4153
  paystation4Dark,
2884
4154
  paystation4Gaijin,
2885
4155
  paystation4Nexters,
4156
+ paystation4PentagramDark,
4157
+ paystation4PentagramDarkLegacyCompatible,
4158
+ paystation4PentagramLight,
4159
+ paystation4PentagramLightLegacyCompatible,
2886
4160
  paystation4Take2,
2887
4161
  paystation4Themes,
4162
+ pentagramDark,
4163
+ pentagramDarkScheme,
4164
+ pentagramLight,
4165
+ pentagramLightScheme,
2888
4166
  primaryPalette,
2889
4167
  publisherV2,
2890
4168
  publisherV2Dark,
2891
4169
  publisherV2Themes,
4170
+ resolveForDesktop,
4171
+ resolveForMobile,
4172
+ shape_primitives_default as shapePrimitives,
2892
4173
  themeGenerator,
2893
4174
  themes,
2894
4175
  themesBaseColors,
2895
4176
  themesBaseColorsArray,
2896
- themesColorsScheme
4177
+ themesColorsScheme,
4178
+ typo_primitives_default as typoPrimitives
2897
4179
  };
2898
4180
  //# sourceMappingURL=index.mjs.map