@xsolla/switch-theme-customization 0.166.0 → 0.167.0-pr315.1780550581

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.
Files changed (8) hide show
  1. package/README.md +18 -0
  2. package/index.d.mts +942 -53
  3. package/index.d.ts +942 -53
  4. package/index.js +1553 -372
  5. package/index.js.map +1 -1
  6. package/index.mjs +1531 -367
  7. package/index.mjs.map +1 -1
  8. package/package.json +1 -1
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
+ mapPentagramShapeToLegacy: () => mapPentagramShapeToLegacy,
45
+ mapPentagramThemeToLegacy: () => mapPentagramThemeToLegacy,
46
+ mapPentagramTypoToLegacy: () => mapPentagramTypoToLegacy,
47
+ mapThemeSchemeToLegacy: () => mapThemeSchemeToLegacy,
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,1046 @@ 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/themes/pentagram/mappers/scheme-to-legacy.ts
2911
+ function mapThemeSchemeToLegacy(colors) {
2912
+ return {
2913
+ core: {
2914
+ background: {
2915
+ primary: colors.background.primary,
2916
+ secondary: colors.layer.float,
2917
+ ghost: colors.overlay.mono,
2918
+ tone: colors.layer.scrim,
2919
+ selection: "transparent",
2920
+ // deleted in Pentagram
2921
+ hover: "transparent",
2922
+ // deleted in Pentagram
2923
+ brand: colors.background.brand.secondary,
2924
+ brandSecondary: colors.background.brandExtra.secondary,
2925
+ success: colors.background.success.secondary,
2926
+ warning: colors.background.warning.secondary,
2927
+ alert: colors.background.alert.secondary,
2928
+ neutral: colors.background.neutral.secondary
2929
+ },
2930
+ divider: {
2931
+ divider: colors.border.secondary
2932
+ },
2933
+ text: {
2934
+ primary: colors.content.primary,
2935
+ secondary: colors.content.secondary,
2936
+ tertiary: colors.content.tertiary,
2937
+ brand: colors.content.brand.primary,
2938
+ brandSecondary: colors.content.brandExtra.primary,
2939
+ success: colors.content.success.primary,
2940
+ warning: colors.content.warning.primary,
2941
+ alert: colors.content.alert.primary,
2942
+ neutral: colors.content.neutral.primary
2943
+ },
2944
+ link: {
2945
+ link: colors.control.link.primary,
2946
+ linkHover: colors.control.link.primaryHover,
2947
+ linkMinor: colors.control.link.secondary,
2948
+ linkMinorHover: colors.control.link.secondaryHover
2949
+ }
2950
+ },
2951
+ control: {
2952
+ primary: {
2953
+ bg: colors.control.brand.primary.bg,
2954
+ bgHover: colors.control.brand.primary.bgHover,
2955
+ bgPress: colors.control.brand.primary.bgPress,
2956
+ bgDisabled: colors.control.brand.primary.bgDisable,
2957
+ border: colors.control.brand.primary.border,
2958
+ borderHover: colors.control.brand.primary.borderHover,
2959
+ borderPress: colors.control.brand.primary.borderPress
2960
+ },
2961
+ secondary: {
2962
+ bg: colors.control.brand.secondary.bg,
2963
+ bgHover: colors.control.brand.secondary.bgHover,
2964
+ bgPress: colors.control.brand.secondary.bgPress,
2965
+ border: colors.control.brand.secondary.border,
2966
+ borderHover: colors.control.brand.secondary.borderHover,
2967
+ borderPress: colors.control.brand.secondary.borderPress
2968
+ },
2969
+ default: {
2970
+ bg: colors.control.mono.primary.bg,
2971
+ bgHover: colors.control.mono.primary.bgHover,
2972
+ bgPress: colors.control.mono.primary.bgPress,
2973
+ border: colors.control.mono.primary.border,
2974
+ borderHover: colors.control.mono.primary.borderHover,
2975
+ borderPress: colors.control.mono.primary.borderPress
2976
+ },
2977
+ input: {
2978
+ bg: colors.control.input.bg,
2979
+ bgHover: colors.control.input.bgHover,
2980
+ bgDisabled: colors.control.input.bgDisable,
2981
+ border: colors.control.input.border,
2982
+ borderHover: colors.control.input.borderHover,
2983
+ borderDisabled: colors.control.input.borderDisable,
2984
+ text: colors.control.input.text,
2985
+ textDisabled: colors.control.input.textDisable,
2986
+ placeholder: colors.control.input.placeholder
2987
+ },
2988
+ focus: {
2989
+ bg: colors.control.focus.bg,
2990
+ border: colors.control.focus.border
2991
+ },
2992
+ alert: {
2993
+ bg: colors.control.alert.secondary.bg,
2994
+ bgHover: colors.control.alert.secondary.bgHover,
2995
+ bgPress: colors.control.alert.secondary.bgPress,
2996
+ border: colors.control.alert.secondary.border,
2997
+ borderHover: colors.control.alert.secondary.borderHover,
2998
+ borderPress: colors.control.alert.secondary.borderPress
2999
+ },
3000
+ check: {
3001
+ bg: colors.control.check.bg,
3002
+ bgHover: colors.control.check.bgHover,
3003
+ bgDisabled: colors.control.check.bgDisable
3004
+ },
3005
+ faint: {
3006
+ bg: colors.control.faint.bg,
3007
+ bgHover: colors.control.faint.bgHover,
3008
+ border: colors.control.faint.border,
3009
+ borderHover: colors.control.faint.borderHover
3010
+ },
3011
+ toggle: {
3012
+ bg: colors.control.switch.bg,
3013
+ bgHover: colors.control.switch.bgHover
3014
+ },
3015
+ text: {
3016
+ active: colors.control.brand.text.primary,
3017
+ secondary: colors.control.brand.text.secondary,
3018
+ default: colors.control.mono.text.primary,
3019
+ primary: colors.control.text.primary,
3020
+ disabled: colors.control.brand.text.disable,
3021
+ faint: colors.control.check.icon,
3022
+ alert: colors.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.success.primary,
3038
+ warning: colors.content.warning.primary,
3039
+ alert: colors.content.alert.primary,
3040
+ neutral: colors.content.neutral.primary
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
+ ...mapThemeSchemeToLegacy(pentagram.colors)
3051
+ },
3052
+ typo: mapPentagramTypoToLegacy(resolvedTypo),
3053
+ misc: mapPentagramShapeToLegacy(resolvedShape),
3054
+ shadows: pentagram.shadows
3055
+ };
3056
+ }
3057
+
2001
3058
  // src/themes/pentagram/presets/pay-station-dark.ts
2002
3059
  var import_colord10 = require("colord");
2003
3060
  var baseDark = {
@@ -2021,314 +3078,339 @@ var baseDark = {
2021
3078
  onAlert: (0, import_colord10.colord)("#000000"),
2022
3079
  onNeutral: (0, import_colord10.colord)("#000000")
2023
3080
  };
2024
- var createDarkScheme = (b) => ({
3081
+ var pentagramDarkScheme = (b) => ({
3082
+ base: {
3083
+ content: b.content.toRgbString(),
3084
+ contentInverse: b.contentInverse.toRgbString(),
3085
+ background: b.background.toRgbString(),
3086
+ backgroundInverse: b.backgroundInverse.toRgbString(),
3087
+ brand: b.brand.toRgbString(),
3088
+ brandExtra: b.brandExtra.toRgbString(),
3089
+ success: b.success.toRgbString(),
3090
+ warning: b.warning.toRgbString(),
3091
+ alert: b.alert.toRgbString(),
3092
+ neutral: b.neutral.toRgbString(),
3093
+ mono: b.mono.toRgbString(),
3094
+ linkPrimary: b.linkPrimary.toRgbString(),
3095
+ linkSecondary: b.linkSecondary.toRgbString(),
3096
+ onBrand: b.onBrand.toRgbString(),
3097
+ onBrandExtra: b.onBrandExtra.toRgbString(),
3098
+ onSuccess: b.onSuccess.toRgbString(),
3099
+ onWarning: b.onWarning.toRgbString(),
3100
+ onAlert: b.onAlert.toRgbString(),
3101
+ onNeutral: b.onNeutral.toRgbString()
3102
+ },
2025
3103
  background: {
2026
- primary: b.background.toHslString(),
2027
- secondary: b.background.darken(0.05).toHslString(),
3104
+ primary: b.background.toRgbString(),
3105
+ secondary: b.background.darken(0.05).toRgbString(),
2028
3106
  brand: {
2029
- primary: b.brand.toHslString(),
2030
- secondary: b.brand.darken(0.4).toHslString()
3107
+ primary: b.brand.toRgbString(),
3108
+ secondary: b.brand.darken(0.4).toRgbString()
2031
3109
  },
2032
3110
  brandExtra: {
2033
- primary: b.brandExtra.toHslString(),
2034
- secondary: b.brandExtra.darken(0.4).toHslString()
3111
+ primary: b.brandExtra.toRgbString(),
3112
+ secondary: b.brandExtra.darken(0.4).toRgbString()
2035
3113
  },
2036
3114
  success: {
2037
- primary: b.success.toHslString(),
2038
- secondary: b.success.darken(0.4).toHslString()
3115
+ primary: b.success.toRgbString(),
3116
+ secondary: b.success.darken(0.4).toRgbString()
2039
3117
  },
2040
3118
  warning: {
2041
- primary: b.warning.toHslString(),
2042
- secondary: b.warning.darken(0.4).toHslString()
3119
+ primary: b.warning.toRgbString(),
3120
+ secondary: b.warning.darken(0.4).toRgbString()
2043
3121
  },
2044
3122
  alert: {
2045
- primary: b.alert.toHslString(),
2046
- secondary: b.alert.darken(0.4).toHslString()
3123
+ primary: b.alert.toRgbString(),
3124
+ secondary: b.alert.darken(0.4).toRgbString()
2047
3125
  },
2048
3126
  neutral: {
2049
- primary: b.neutral.toHslString(),
2050
- secondary: b.neutral.darken(0.4).toHslString()
3127
+ primary: b.neutral.toRgbString(),
3128
+ secondary: b.neutral.darken(0.4).toRgbString()
2051
3129
  },
2052
- inverse: b.backgroundInverse.toHslString(),
3130
+ inverse: b.backgroundInverse.toRgbString(),
2053
3131
  static: { light: "#ffffff", dark: "#000000" }
2054
3132
  },
2055
3133
  content: {
2056
- primary: b.content.toHslString(),
2057
- secondary: b.content.alpha(0.75).toHslString(),
2058
- tertiary: b.content.alpha(0.6).toHslString(),
3134
+ primary: b.content.toRgbString(),
3135
+ secondary: b.content.alpha(0.75).toRgbString(),
3136
+ tertiary: b.content.alpha(0.6).toRgbString(),
2059
3137
  brand: {
2060
- primary: b.brand.lighten(0.2).toHslString(),
2061
- secondary: b.brand.lighten(0.1).toHslString()
3138
+ primary: b.brand.lighten(0.2).toRgbString(),
3139
+ secondary: b.brand.lighten(0.1).toRgbString()
2062
3140
  },
2063
3141
  brandExtra: {
2064
- primary: b.brandExtra.lighten(0.2).toHslString(),
2065
- secondary: b.brandExtra.lighten(0.1).toHslString()
3142
+ primary: b.brandExtra.lighten(0.2).toRgbString(),
3143
+ secondary: b.brandExtra.lighten(0.1).toRgbString()
2066
3144
  },
2067
3145
  success: {
2068
- primary: b.success.lighten(0.2).toHslString(),
2069
- secondary: b.success.lighten(0.1).toHslString()
3146
+ primary: b.success.lighten(0.2).toRgbString(),
3147
+ secondary: b.success.lighten(0.1).toRgbString()
2070
3148
  },
2071
3149
  warning: {
2072
- primary: b.warning.lighten(0.2).toHslString(),
2073
- secondary: b.warning.lighten(0.1).toHslString()
3150
+ primary: b.warning.lighten(0.2).toRgbString(),
3151
+ secondary: b.warning.lighten(0.1).toRgbString()
2074
3152
  },
2075
3153
  alert: {
2076
- primary: b.alert.lighten(0.2).toHslString(),
2077
- secondary: b.alert.lighten(0.1).toHslString()
3154
+ primary: b.alert.lighten(0.2).toRgbString(),
3155
+ secondary: b.alert.lighten(0.1).toRgbString()
2078
3156
  },
2079
3157
  neutral: {
2080
- primary: b.neutral.lighten(0.2).toHslString(),
2081
- secondary: b.neutral.lighten(0.1).toHslString()
3158
+ primary: b.neutral.lighten(0.2).toRgbString(),
3159
+ secondary: b.neutral.lighten(0.1).toRgbString()
2082
3160
  },
2083
- inverse: b.contentInverse.toHslString(),
3161
+ inverse: b.contentInverse.toRgbString(),
2084
3162
  static: { light: "#ffffff", dark: "#000000" },
2085
3163
  on: {
2086
- brand: b.onBrand.toHslString(),
2087
- brandExtra: b.onBrandExtra.toHslString(),
2088
- success: b.onSuccess.toHslString(),
2089
- warning: b.onWarning.toHslString(),
2090
- alert: b.onAlert.toHslString(),
2091
- neutral: b.onNeutral.toHslString()
3164
+ brand: b.onBrand.toRgbString(),
3165
+ brandExtra: b.onBrandExtra.toRgbString(),
3166
+ success: b.onSuccess.toRgbString(),
3167
+ warning: b.onWarning.toRgbString(),
3168
+ alert: b.onAlert.toRgbString(),
3169
+ neutral: b.onNeutral.toRgbString()
2092
3170
  }
2093
3171
  },
2094
3172
  border: {
2095
- primary: b.mono.toHslString(),
2096
- secondary: b.mono.alpha(0.15).toHslString(),
2097
- inverse: b.contentInverse.alpha(0.15).toHslString(),
2098
- brand: b.brand.toHslString(),
2099
- brandExtra: b.brandExtra.toHslString(),
2100
- success: b.success.toHslString(),
2101
- warning: b.warning.toHslString(),
2102
- alert: b.alert.toHslString(),
2103
- neutral: b.neutral.toHslString()
3173
+ primary: b.mono.toRgbString(),
3174
+ secondary: b.mono.alpha(0.15).toRgbString(),
3175
+ inverse: b.contentInverse.alpha(0.15).toRgbString(),
3176
+ brand: b.brand.toRgbString(),
3177
+ brandExtra: b.brandExtra.toRgbString(),
3178
+ success: b.success.toRgbString(),
3179
+ warning: b.warning.toRgbString(),
3180
+ alert: b.alert.toRgbString(),
3181
+ neutral: b.neutral.toRgbString()
2104
3182
  },
2105
3183
  overlay: {
2106
- mono: b.mono.alpha(0.08).toHslString(),
2107
- brand: b.brand.alpha(0.3).toHslString(),
2108
- brandExtra: b.brandExtra.alpha(0.3).toHslString(),
2109
- success: b.success.alpha(0.3).toHslString(),
2110
- warning: b.warning.alpha(0.3).toHslString(),
2111
- alert: b.alert.alpha(0.3).toHslString(),
2112
- neutral: b.neutral.alpha(0.3).toHslString()
3184
+ mono: b.mono.alpha(0.08).toRgbString(),
3185
+ brand: b.brand.alpha(0.3).toRgbString(),
3186
+ brandExtra: b.brandExtra.alpha(0.3).toRgbString(),
3187
+ success: b.success.alpha(0.3).toRgbString(),
3188
+ warning: b.warning.alpha(0.3).toRgbString(),
3189
+ alert: b.alert.alpha(0.3).toRgbString(),
3190
+ neutral: b.neutral.alpha(0.3).toRgbString()
2113
3191
  },
2114
3192
  layer: {
2115
- scrim: b.contentInverse.alpha(0.75).toHslString(),
2116
- float: b.background.lighten(0.05).toHslString()
3193
+ scrim: b.contentInverse.alpha(0.75).toRgbString(),
3194
+ float: b.background.lighten(0.05).toRgbString()
2117
3195
  },
2118
3196
  control: {
2119
3197
  brand: {
2120
3198
  primary: {
2121
- bg: b.brand.toHslString(),
2122
- bgHover: b.brand.lighten(0.1).toHslString(),
2123
- bgPress: b.brand.darken(0.1).toHslString(),
2124
- bgDisable: b.mono.alpha(0.25).toHslString(),
2125
- border: b.brand.darken(0.1).toHslString(),
2126
- borderHover: b.brand.darken(0.1).toHslString(),
2127
- borderPress: b.brand.darken(0.1).toHslString(),
3199
+ bg: b.brand.toRgbString(),
3200
+ bgHover: b.brand.lighten(0.1).toRgbString(),
3201
+ bgPress: b.brand.darken(0.1).toRgbString(),
3202
+ bgDisable: b.mono.alpha(0.25).toRgbString(),
3203
+ border: b.brand.darken(0.1).toRgbString(),
3204
+ borderHover: b.brand.darken(0.1).toRgbString(),
3205
+ borderPress: b.brand.darken(0.1).toRgbString(),
2128
3206
  borderDisable: "transparent"
2129
3207
  },
2130
3208
  secondary: {
2131
- bg: b.brand.alpha(0.4).toHslString(),
2132
- bgHover: b.brand.alpha(0.4).lighten(0.1).toHslString(),
2133
- bgPress: b.brand.alpha(0.4).darken(0.1).toHslString(),
2134
- border: b.brand.toHslString(),
2135
- borderHover: b.brand.toHslString(),
2136
- borderPress: b.brand.toHslString()
3209
+ bg: b.brand.alpha(0.4).toRgbString(),
3210
+ bgHover: b.brand.alpha(0.4).lighten(0.1).toRgbString(),
3211
+ bgPress: b.brand.alpha(0.4).darken(0.1).toRgbString(),
3212
+ border: b.brand.toRgbString(),
3213
+ borderHover: b.brand.toRgbString(),
3214
+ borderPress: b.brand.toRgbString()
2137
3215
  },
2138
3216
  tertiary: {
2139
3217
  bg: "transparent",
2140
- bgHover: b.brand.alpha(0.2).toHslString(),
2141
- bgPress: b.brand.alpha(0.3).toHslString(),
3218
+ bgHover: b.brand.alpha(0.2).toRgbString(),
3219
+ bgPress: b.brand.alpha(0.3).toRgbString(),
2142
3220
  border: "transparent",
2143
3221
  borderHover: "transparent",
2144
3222
  borderPress: "transparent"
2145
3223
  },
2146
3224
  text: {
2147
- primary: b.onBrand.toHslString(),
2148
- secondary: b.content.toHslString(),
2149
- tertiary: b.brand.lighten(0.2).toHslString(),
2150
- disable: b.mono.alpha(0.65).toHslString()
3225
+ primary: b.onBrand.toRgbString(),
3226
+ secondary: b.content.toRgbString(),
3227
+ tertiary: b.brand.lighten(0.2).toRgbString(),
3228
+ disable: b.mono.alpha(0.65).toRgbString()
2151
3229
  }
2152
3230
  },
2153
3231
  mono: {
2154
3232
  primary: {
2155
- bg: b.mono.toHslString(),
2156
- bgHover: b.mono.darken(0.15).toHslString(),
2157
- bgPress: b.mono.darken(0.3).toHslString(),
3233
+ bg: b.mono.toRgbString(),
3234
+ bgHover: b.mono.darken(0.15).toRgbString(),
3235
+ bgPress: b.mono.darken(0.3).toRgbString(),
2158
3236
  border: "transparent",
2159
3237
  borderHover: "transparent",
2160
3238
  borderPress: "transparent"
2161
3239
  },
2162
3240
  secondary: {
2163
- bg: b.mono.alpha(0.4).toHslString(),
2164
- bgHover: b.mono.alpha(0.35).darken(0.15).toHslString(),
2165
- bgPress: b.mono.alpha(0.35).darken(0.3).toHslString(),
2166
- border: b.mono.alpha(0.25).toHslString(),
2167
- borderHover: b.mono.alpha(0.25).toHslString(),
2168
- borderPress: b.mono.alpha(0.25).toHslString()
3241
+ bg: b.mono.alpha(0.4).toRgbString(),
3242
+ bgHover: b.mono.alpha(0.35).darken(0.15).toRgbString(),
3243
+ bgPress: b.mono.alpha(0.35).darken(0.3).toRgbString(),
3244
+ border: b.mono.alpha(0.25).toRgbString(),
3245
+ borderHover: b.mono.alpha(0.25).toRgbString(),
3246
+ borderPress: b.mono.alpha(0.25).toRgbString()
2169
3247
  },
2170
3248
  tertiary: {
2171
3249
  bg: "transparent",
2172
- bgHover: b.mono.alpha(0.15).toHslString(),
2173
- bgPress: b.mono.alpha(0.25).toHslString(),
3250
+ bgHover: b.mono.alpha(0.15).toRgbString(),
3251
+ bgPress: b.mono.alpha(0.25).toRgbString(),
2174
3252
  border: "transparent",
2175
3253
  borderHover: "transparent",
2176
3254
  borderPress: "transparent"
2177
3255
  },
2178
3256
  text: {
2179
- primary: b.contentInverse.toHslString(),
2180
- secondary: b.content.toHslString(),
2181
- tertiary: b.content.toHslString()
3257
+ primary: b.contentInverse.toRgbString(),
3258
+ secondary: b.content.toRgbString(),
3259
+ tertiary: b.content.toRgbString()
2182
3260
  }
2183
3261
  },
2184
3262
  brandExtra: {
2185
3263
  primary: {
2186
- bg: b.brandExtra.toHslString(),
2187
- bgHover: b.brandExtra.lighten(0.1).toHslString(),
2188
- bgPress: b.brandExtra.darken(0.1).toHslString(),
2189
- border: b.brandExtra.darken(0.1).toHslString(),
2190
- borderHover: b.brandExtra.darken(0.1).toHslString(),
2191
- borderPress: b.brandExtra.darken(0.1).toHslString()
3264
+ bg: b.brandExtra.toRgbString(),
3265
+ bgHover: b.brandExtra.lighten(0.1).toRgbString(),
3266
+ bgPress: b.brandExtra.darken(0.1).toRgbString(),
3267
+ border: b.brandExtra.darken(0.1).toRgbString(),
3268
+ borderHover: b.brandExtra.darken(0.1).toRgbString(),
3269
+ borderPress: b.brandExtra.darken(0.1).toRgbString()
2192
3270
  },
2193
3271
  secondary: {
2194
- bg: b.brandExtra.alpha(0.4).toHslString(),
2195
- bgHover: b.brandExtra.alpha(0.4).lighten(0.1).toHslString(),
2196
- bgPress: b.brandExtra.alpha(0.4).darken(0.1).toHslString(),
2197
- border: b.brandExtra.toHslString(),
2198
- borderHover: b.brandExtra.toHslString(),
2199
- borderPress: b.brandExtra.toHslString()
3272
+ bg: b.brandExtra.alpha(0.4).toRgbString(),
3273
+ bgHover: b.brandExtra.alpha(0.4).lighten(0.1).toRgbString(),
3274
+ bgPress: b.brandExtra.alpha(0.4).darken(0.1).toRgbString(),
3275
+ border: b.brandExtra.toRgbString(),
3276
+ borderHover: b.brandExtra.toRgbString(),
3277
+ borderPress: b.brandExtra.toRgbString()
2200
3278
  },
2201
3279
  tertiary: {
2202
3280
  bg: "transparent",
2203
- bgHover: b.brandExtra.alpha(0.2).toHslString(),
2204
- bgPress: b.brandExtra.alpha(0.3).toHslString(),
3281
+ bgHover: b.brandExtra.alpha(0.2).toRgbString(),
3282
+ bgPress: b.brandExtra.alpha(0.3).toRgbString(),
2205
3283
  border: "transparent",
2206
3284
  borderHover: "transparent",
2207
3285
  borderPress: "transparent"
2208
3286
  },
2209
3287
  text: {
2210
- primary: b.onBrandExtra.toHslString(),
2211
- secondary: b.content.toHslString(),
2212
- tertiary: b.brandExtra.lighten(0.2).toHslString()
3288
+ primary: b.onBrandExtra.toRgbString(),
3289
+ secondary: b.content.toRgbString(),
3290
+ tertiary: b.brandExtra.lighten(0.2).toRgbString()
2213
3291
  }
2214
3292
  },
2215
3293
  alert: {
2216
- bg: b.alert.toHslString(),
2217
- border: b.alert.lighten(0.2).toHslString(),
3294
+ bg: b.alert.toRgbString(),
3295
+ border: b.alert.lighten(0.2).toRgbString(),
2218
3296
  primary: {
2219
- bg: b.alert.toHslString(),
2220
- bgHover: b.alert.lighten(0.1).toHslString(),
2221
- bgPress: b.alert.darken(0.1).toHslString(),
2222
- border: b.alert.darken(0.1).toHslString(),
2223
- borderHover: b.alert.darken(0.1).toHslString(),
2224
- borderPress: b.alert.darken(0.1).toHslString()
3297
+ bg: b.alert.toRgbString(),
3298
+ bgHover: b.alert.lighten(0.1).toRgbString(),
3299
+ bgPress: b.alert.darken(0.1).toRgbString(),
3300
+ border: b.alert.darken(0.1).toRgbString(),
3301
+ borderHover: b.alert.darken(0.1).toRgbString(),
3302
+ borderPress: b.alert.darken(0.1).toRgbString()
2225
3303
  },
2226
3304
  secondary: {
2227
- bg: b.alert.alpha(0.4).toHslString(),
2228
- bgHover: b.alert.alpha(0.4).lighten(0.1).toHslString(),
2229
- bgPress: b.alert.alpha(0.4).darken(0.1).toHslString(),
2230
- border: b.alert.toHslString(),
2231
- borderHover: b.alert.toHslString(),
2232
- borderPress: b.alert.toHslString()
3305
+ bg: b.alert.alpha(0.4).toRgbString(),
3306
+ bgHover: b.alert.alpha(0.4).lighten(0.1).toRgbString(),
3307
+ bgPress: b.alert.alpha(0.4).darken(0.1).toRgbString(),
3308
+ border: b.alert.toRgbString(),
3309
+ borderHover: b.alert.toRgbString(),
3310
+ borderPress: b.alert.toRgbString()
2233
3311
  },
2234
3312
  tertiary: {
2235
3313
  bg: "transparent",
2236
- bgHover: b.alert.alpha(0.2).toHslString(),
2237
- bgPress: b.alert.alpha(0.3).toHslString(),
3314
+ bgHover: b.alert.alpha(0.2).toRgbString(),
3315
+ bgPress: b.alert.alpha(0.3).toRgbString(),
2238
3316
  border: "transparent",
2239
3317
  borderHover: "transparent",
2240
3318
  borderPress: "transparent"
2241
3319
  },
2242
3320
  text: {
2243
- primary: b.onAlert.toHslString(),
2244
- secondary: b.content.toHslString(),
2245
- tertiary: b.alert.lighten(0.2).toHslString()
3321
+ primary: b.onAlert.toRgbString(),
3322
+ secondary: b.content.toRgbString(),
3323
+ tertiary: b.alert.lighten(0.2).toRgbString()
2246
3324
  }
2247
3325
  },
2248
3326
  input: {
2249
- bg: b.mono.alpha(0.08).toHslString(),
2250
- bgHover: b.mono.alpha(0.12).toHslString(),
2251
- bgDisable: b.mono.alpha(0.25).toHslString(),
2252
- border: b.mono.alpha(0.15).toHslString(),
2253
- borderHover: b.mono.alpha(0.25).toHslString(),
2254
- borderDisable: b.mono.alpha(0.08).toHslString(),
2255
- text: b.content.toHslString(),
2256
- placeholder: b.content.alpha(0.6).toHslString(),
2257
- textDisable: b.content.alpha(0.36).toHslString()
3327
+ bg: b.mono.alpha(0.08).toRgbString(),
3328
+ bgHover: b.mono.alpha(0.12).toRgbString(),
3329
+ bgDisable: b.mono.alpha(0.25).toRgbString(),
3330
+ border: b.mono.alpha(0.15).toRgbString(),
3331
+ borderHover: b.mono.alpha(0.25).toRgbString(),
3332
+ borderDisable: b.mono.alpha(0.08).toRgbString(),
3333
+ text: b.content.toRgbString(),
3334
+ placeholder: b.content.alpha(0.6).toRgbString(),
3335
+ textDisable: b.content.alpha(0.36).toRgbString()
2258
3336
  },
2259
3337
  focus: {
2260
- bg: b.background.toHslString(),
2261
- border: b.brand.toHslString()
3338
+ bg: b.background.toRgbString(),
3339
+ border: b.brand.toRgbString()
2262
3340
  },
2263
3341
  check: {
2264
- bg: b.brand.toHslString(),
2265
- bgHover: b.brand.lighten(0.1).toHslString(),
2266
- bgDisable: b.mono.alpha(0.25).toHslString(),
2267
- border: b.brand.toHslString(),
2268
- borderHover: b.brand.lighten(0.1).toHslString(),
3342
+ bg: b.brand.toRgbString(),
3343
+ bgHover: b.brand.lighten(0.1).toRgbString(),
3344
+ bgDisable: b.mono.alpha(0.25).toRgbString(),
3345
+ border: b.brand.toRgbString(),
3346
+ borderHover: b.brand.lighten(0.1).toRgbString(),
2269
3347
  borderDisable: "transparent",
2270
- icon: b.onBrand.toHslString()
3348
+ icon: b.onBrand.toRgbString()
2271
3349
  },
2272
3350
  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(),
2276
- borderHover: b.mono.alpha(0.25).toHslString()
3351
+ bg: b.mono.alpha(0.15).toRgbString(),
3352
+ bgHover: b.mono.alpha(0.2).toRgbString(),
3353
+ border: b.mono.alpha(0.2).toRgbString(),
3354
+ borderHover: b.mono.alpha(0.25).toRgbString()
2277
3355
  },
2278
3356
  slider: {
2279
- bg: b.brand.toHslString(),
2280
- bgHover: b.brand.lighten(0.1).toHslString(),
2281
- bgDisable: b.mono.alpha(0.25).toHslString()
3357
+ bg: b.brand.toRgbString(),
3358
+ bgHover: b.brand.lighten(0.1).toRgbString(),
3359
+ bgDisable: b.mono.alpha(0.25).toRgbString()
2282
3360
  },
2283
3361
  switch: {
2284
- bg: b.brand.toHslString(),
2285
- bgHover: b.brand.lighten(0.1).toHslString(),
2286
- bgDisable: b.mono.alpha(0.25).toHslString(),
2287
- border: b.brand.toHslString(),
2288
- borderHover: b.brand.lighten(0.1).toHslString(),
3362
+ bg: b.brand.toRgbString(),
3363
+ bgHover: b.brand.lighten(0.1).toRgbString(),
3364
+ bgDisable: b.mono.alpha(0.25).toRgbString(),
3365
+ border: b.brand.toRgbString(),
3366
+ borderHover: b.brand.lighten(0.1).toRgbString(),
2289
3367
  borderDisable: "transparent"
2290
3368
  },
2291
3369
  knob: {
2292
- bg: b.onBrand.toHslString(),
2293
- bgHover: b.onBrand.darken(0.1).toHslString(),
2294
- bgInactive: b.mono.alpha(0.6).toHslString()
3370
+ bg: b.onBrand.toRgbString(),
3371
+ bgHover: b.onBrand.lighten(0.1).toRgbString(),
3372
+ bgActive: b.onBrand.toRgbString(),
3373
+ bgActiveHover: b.onBrand.lighten(0.1).toRgbString(),
3374
+ bgInactive: b.mono.toRgbString(),
3375
+ bgInactiveHover: b.mono.lighten(0.1).toRgbString(),
3376
+ bgDisable: b.mono.alpha(0.25).toRgbString()
2295
3377
  },
2296
3378
  text: {
2297
- primary: b.content.toHslString(),
2298
- disable: b.content.alpha(0.36).toHslString()
3379
+ primary: b.content.toRgbString(),
3380
+ disable: b.content.alpha(0.36).toRgbString()
2299
3381
  },
2300
3382
  link: {
2301
- primary: b.linkPrimary.toHslString(),
2302
- primaryHover: b.linkPrimary.alpha(0.7).toHslString(),
2303
- secondary: b.linkSecondary.toHslString(),
2304
- secondaryHover: b.linkSecondary.alpha(0.7).toHslString()
3383
+ primary: b.linkPrimary.toRgbString(),
3384
+ primaryHover: b.linkPrimary.alpha(0.7).toRgbString(),
3385
+ secondary: b.linkSecondary.toRgbString(),
3386
+ secondaryHover: b.linkSecondary.alpha(0.7).toRgbString()
2305
3387
  },
2306
3388
  segmented: {
2307
- bg: b.mono.alpha(0.08).toHslString(),
2308
- bgHover: b.mono.alpha(0.12).toHslString(),
2309
- bgActive: b.mono.alpha(0.15).toHslString(),
2310
- border: b.mono.alpha(0.15).toHslString(),
2311
- borderHover: b.mono.alpha(0.25).toHslString(),
3389
+ bg: b.mono.alpha(0.08).toRgbString(),
3390
+ bgHover: b.mono.alpha(0.12).toRgbString(),
3391
+ bgActive: b.mono.alpha(0.15).toRgbString(),
3392
+ border: b.mono.alpha(0.15).toRgbString(),
3393
+ borderHover: b.mono.alpha(0.25).toRgbString(),
2312
3394
  borderActive: "transparent",
2313
- text: b.content.toHslString(),
2314
- textDisable: b.content.alpha(0.36).toHslString()
3395
+ text: b.content.toRgbString(),
3396
+ textDisable: b.content.alpha(0.36).toRgbString()
2315
3397
  },
2316
3398
  toggleButton: {
2317
- bg: b.mono.alpha(0.08).toHslString(),
2318
- bgHover: b.mono.alpha(0.12).toHslString(),
2319
- bgActive: b.brand.alpha(0.4).toHslString(),
2320
- bgDisable: b.mono.alpha(0.25).toHslString(),
2321
- border: b.mono.alpha(0.15).toHslString(),
2322
- borderHover: b.mono.alpha(0.25).toHslString(),
2323
- borderActive: b.brand.toHslString(),
2324
- borderDisable: b.mono.alpha(0.08).toHslString(),
2325
- text: b.content.toHslString(),
2326
- textActive: b.content.toHslString(),
2327
- textDisable: b.content.alpha(0.36).toHslString()
3399
+ bg: b.mono.alpha(0.08).toRgbString(),
3400
+ bgHover: b.mono.alpha(0.12).toRgbString(),
3401
+ bgActive: b.brand.alpha(0.4).toRgbString(),
3402
+ bgDisable: b.mono.alpha(0.25).toRgbString(),
3403
+ border: b.mono.alpha(0.15).toRgbString(),
3404
+ borderHover: b.mono.alpha(0.25).toRgbString(),
3405
+ borderActive: b.brand.toRgbString(),
3406
+ borderDisable: b.mono.alpha(0.08).toRgbString(),
3407
+ text: b.content.toRgbString(),
3408
+ textActive: b.content.toRgbString(),
3409
+ textDisable: b.content.alpha(0.36).toRgbString()
2328
3410
  }
2329
3411
  }
2330
3412
  });
2331
- var payStationDarkScheme = createDarkScheme(baseDark);
3413
+ var pentagramDark = pentagramDarkScheme(baseDark);
2332
3414
 
2333
3415
  // src/themes/pentagram/presets/pay-station-light.ts
2334
3416
  var import_colord11 = require("colord");
@@ -2353,314 +3435,396 @@ var base10 = {
2353
3435
  onAlert: (0, import_colord11.colord)("#000000"),
2354
3436
  onNeutral: (0, import_colord11.colord)("#000000")
2355
3437
  };
2356
- var createScheme = (b) => ({
3438
+ var pentagramLightScheme = (b) => ({
3439
+ base: {
3440
+ content: b.content.toRgbString(),
3441
+ contentInverse: b.contentInverse.toRgbString(),
3442
+ background: b.background.toRgbString(),
3443
+ backgroundInverse: b.backgroundInverse.toRgbString(),
3444
+ brand: b.brand.toRgbString(),
3445
+ brandExtra: b.brandExtra.toRgbString(),
3446
+ success: b.success.toRgbString(),
3447
+ warning: b.warning.toRgbString(),
3448
+ alert: b.alert.toRgbString(),
3449
+ neutral: b.neutral.toRgbString(),
3450
+ mono: b.mono.toRgbString(),
3451
+ linkPrimary: b.linkPrimary.toRgbString(),
3452
+ linkSecondary: b.linkSecondary.toRgbString(),
3453
+ onBrand: b.onBrand.toRgbString(),
3454
+ onBrandExtra: b.onBrandExtra.toRgbString(),
3455
+ onSuccess: b.onSuccess.toRgbString(),
3456
+ onWarning: b.onWarning.toRgbString(),
3457
+ onAlert: b.onAlert.toRgbString(),
3458
+ onNeutral: b.onNeutral.toRgbString()
3459
+ },
2357
3460
  background: {
2358
- primary: b.background.toHslString(),
2359
- secondary: b.background.saturate(0.02).darken(0.05).toHslString(),
3461
+ primary: b.background.toRgbString(),
3462
+ secondary: b.background.saturate(0.02).darken(0.05).toRgbString(),
2360
3463
  brand: {
2361
- primary: b.brand.toHslString(),
2362
- secondary: b.brand.lighten(0.3).toHslString()
3464
+ primary: b.brand.toRgbString(),
3465
+ secondary: b.brand.lighten(0.3).toRgbString()
2363
3466
  },
2364
3467
  brandExtra: {
2365
- primary: b.brandExtra.toHslString(),
2366
- secondary: b.brandExtra.lighten(0.3).toHslString()
3468
+ primary: b.brandExtra.toRgbString(),
3469
+ secondary: b.brandExtra.lighten(0.3).toRgbString()
2367
3470
  },
2368
3471
  success: {
2369
- primary: b.success.toHslString(),
2370
- secondary: b.success.lighten(0.3).toHslString()
3472
+ primary: b.success.toRgbString(),
3473
+ secondary: b.success.lighten(0.3).toRgbString()
2371
3474
  },
2372
3475
  warning: {
2373
- primary: b.warning.toHslString(),
2374
- secondary: b.warning.lighten(0.3).toHslString()
3476
+ primary: b.warning.toRgbString(),
3477
+ secondary: b.warning.lighten(0.3).toRgbString()
2375
3478
  },
2376
3479
  alert: {
2377
- primary: b.alert.toHslString(),
2378
- secondary: b.alert.lighten(0.3).toHslString()
3480
+ primary: b.alert.toRgbString(),
3481
+ secondary: b.alert.lighten(0.3).toRgbString()
2379
3482
  },
2380
3483
  neutral: {
2381
- primary: b.neutral.toHslString(),
2382
- secondary: b.neutral.lighten(0.3).toHslString()
3484
+ primary: b.neutral.toRgbString(),
3485
+ secondary: b.neutral.lighten(0.3).toRgbString()
2383
3486
  },
2384
- inverse: b.backgroundInverse.toHslString(),
3487
+ inverse: b.backgroundInverse.toRgbString(),
2385
3488
  static: { light: "#ffffff", dark: "#000000" }
2386
3489
  },
2387
3490
  content: {
2388
- primary: b.content.toHslString(),
2389
- secondary: b.content.alpha(0.75).toHslString(),
2390
- tertiary: b.content.alpha(0.6).toHslString(),
3491
+ primary: b.content.toRgbString(),
3492
+ secondary: b.content.alpha(0.75).toRgbString(),
3493
+ tertiary: b.content.alpha(0.6).toRgbString(),
2391
3494
  brand: {
2392
- primary: b.brand.darken(0.3).toHslString(),
2393
- secondary: b.brand.darken(0.1).toHslString()
3495
+ primary: b.brand.darken(0.3).toRgbString(),
3496
+ secondary: b.brand.darken(0.1).toRgbString()
2394
3497
  },
2395
3498
  brandExtra: {
2396
- primary: b.brandExtra.darken(0.3).toHslString(),
2397
- secondary: b.brandExtra.darken(0.1).toHslString()
3499
+ primary: b.brandExtra.darken(0.3).toRgbString(),
3500
+ secondary: b.brandExtra.darken(0.1).toRgbString()
2398
3501
  },
2399
3502
  success: {
2400
- primary: b.success.darken(0.3).toHslString(),
2401
- secondary: b.success.darken(0.1).toHslString()
3503
+ primary: b.success.darken(0.3).toRgbString(),
3504
+ secondary: b.success.darken(0.1).toRgbString()
2402
3505
  },
2403
3506
  warning: {
2404
- primary: b.warning.darken(0.3).toHslString(),
2405
- secondary: b.warning.darken(0.1).toHslString()
3507
+ primary: b.warning.darken(0.3).toRgbString(),
3508
+ secondary: b.warning.darken(0.1).toRgbString()
2406
3509
  },
2407
3510
  alert: {
2408
- primary: b.alert.darken(0.3).toHslString(),
2409
- secondary: b.alert.darken(0.1).toHslString()
3511
+ primary: b.alert.darken(0.3).toRgbString(),
3512
+ secondary: b.alert.darken(0.1).toRgbString()
2410
3513
  },
2411
3514
  neutral: {
2412
- primary: b.neutral.darken(0.3).toHslString(),
2413
- secondary: b.neutral.darken(0.1).toHslString()
3515
+ primary: b.neutral.darken(0.3).toRgbString(),
3516
+ secondary: b.neutral.darken(0.1).toRgbString()
2414
3517
  },
2415
- inverse: b.contentInverse.toHslString(),
3518
+ inverse: b.contentInverse.toRgbString(),
2416
3519
  static: { light: "#ffffff", dark: "#000000" },
2417
3520
  on: {
2418
- brand: b.onBrand.toHslString(),
2419
- brandExtra: b.onBrandExtra.toHslString(),
2420
- success: b.onSuccess.toHslString(),
2421
- warning: b.onWarning.toHslString(),
2422
- alert: b.onAlert.toHslString(),
2423
- neutral: b.onNeutral.toHslString()
3521
+ brand: b.onBrand.toRgbString(),
3522
+ brandExtra: b.onBrandExtra.toRgbString(),
3523
+ success: b.onSuccess.toRgbString(),
3524
+ warning: b.onWarning.toRgbString(),
3525
+ alert: b.onAlert.toRgbString(),
3526
+ neutral: b.onNeutral.toRgbString()
2424
3527
  }
2425
3528
  },
2426
3529
  border: {
2427
- primary: b.mono.toHslString(),
2428
- secondary: b.mono.alpha(0.12).toHslString(),
2429
- inverse: b.contentInverse.alpha(0.15).toHslString(),
2430
- brand: b.brand.toHslString(),
2431
- brandExtra: b.brandExtra.toHslString(),
2432
- success: b.success.toHslString(),
2433
- warning: b.warning.toHslString(),
2434
- alert: b.alert.toHslString(),
2435
- neutral: b.neutral.toHslString()
3530
+ primary: b.mono.toRgbString(),
3531
+ secondary: b.mono.alpha(0.12).toRgbString(),
3532
+ inverse: b.contentInverse.alpha(0.15).toRgbString(),
3533
+ brand: b.brand.toRgbString(),
3534
+ brandExtra: b.brandExtra.toRgbString(),
3535
+ success: b.success.toRgbString(),
3536
+ warning: b.warning.toRgbString(),
3537
+ alert: b.alert.toRgbString(),
3538
+ neutral: b.neutral.toRgbString()
2436
3539
  },
2437
3540
  overlay: {
2438
- mono: b.mono.alpha(0.05).toHslString(),
2439
- brand: b.brand.alpha(0.3).toHslString(),
2440
- brandExtra: b.brandExtra.alpha(0.3).toHslString(),
2441
- success: b.success.alpha(0.3).toHslString(),
2442
- warning: b.warning.alpha(0.3).toHslString(),
2443
- alert: b.alert.alpha(0.3).toHslString(),
2444
- neutral: b.neutral.alpha(0.3).toHslString()
3541
+ mono: b.mono.alpha(0.05).toRgbString(),
3542
+ brand: b.brand.alpha(0.3).toRgbString(),
3543
+ brandExtra: b.brandExtra.alpha(0.3).toRgbString(),
3544
+ success: b.success.alpha(0.3).toRgbString(),
3545
+ warning: b.warning.alpha(0.3).toRgbString(),
3546
+ alert: b.alert.alpha(0.3).toRgbString(),
3547
+ neutral: b.neutral.alpha(0.3).toRgbString()
2445
3548
  },
2446
3549
  layer: {
2447
- scrim: b.mono.alpha(0.75).toHslString(),
2448
- float: b.background.toHslString()
3550
+ scrim: b.mono.alpha(0.75).toRgbString(),
3551
+ float: b.background.toRgbString()
2449
3552
  },
2450
3553
  control: {
2451
3554
  brand: {
2452
3555
  primary: {
2453
- bg: b.brand.toHslString(),
2454
- bgHover: b.brand.lighten(0.1).toHslString(),
2455
- bgPress: b.brand.darken(0.1).toHslString(),
2456
- bgDisable: b.mono.alpha(0.3).toHslString(),
2457
- border: b.brand.darken(0.1).toHslString(),
2458
- borderHover: b.brand.darken(0.1).toHslString(),
2459
- borderPress: b.brand.darken(0.1).toHslString(),
3556
+ bg: b.brand.toRgbString(),
3557
+ bgHover: b.brand.lighten(0.1).toRgbString(),
3558
+ bgPress: b.brand.darken(0.1).toRgbString(),
3559
+ bgDisable: b.mono.alpha(0.3).toRgbString(),
3560
+ border: b.brand.darken(0.1).toRgbString(),
3561
+ borderHover: b.brand.darken(0.1).toRgbString(),
3562
+ borderPress: b.brand.darken(0.1).toRgbString(),
2460
3563
  borderDisable: "transparent"
2461
3564
  },
2462
3565
  secondary: {
2463
- bg: b.brand.alpha(0.4).toHslString(),
2464
- bgHover: b.brand.alpha(0.4).lighten(0.1).toHslString(),
2465
- bgPress: b.brand.alpha(0.4).darken(0.1).toHslString(),
2466
- border: b.brand.toHslString(),
2467
- borderHover: b.brand.toHslString(),
2468
- borderPress: b.brand.toHslString()
3566
+ bg: b.brand.alpha(0.4).toRgbString(),
3567
+ bgHover: b.brand.alpha(0.4).lighten(0.1).toRgbString(),
3568
+ bgPress: b.brand.alpha(0.4).darken(0.1).toRgbString(),
3569
+ border: b.brand.toRgbString(),
3570
+ borderHover: b.brand.toRgbString(),
3571
+ borderPress: b.brand.toRgbString()
2469
3572
  },
2470
3573
  tertiary: {
2471
3574
  bg: "transparent",
2472
- bgHover: b.brand.alpha(0.15).toHslString(),
2473
- bgPress: b.brand.alpha(0.25).toHslString(),
3575
+ bgHover: b.brand.alpha(0.15).toRgbString(),
3576
+ bgPress: b.brand.alpha(0.25).toRgbString(),
2474
3577
  border: "transparent",
2475
3578
  borderHover: "transparent",
2476
3579
  borderPress: "transparent"
2477
3580
  },
2478
3581
  text: {
2479
- primary: b.onBrand.toHslString(),
2480
- secondary: b.content.toHslString(),
2481
- tertiary: b.brand.darken(0.2).toHslString(),
2482
- disable: b.mono.alpha(0.75).toHslString()
3582
+ primary: b.onBrand.toRgbString(),
3583
+ secondary: b.content.toRgbString(),
3584
+ tertiary: b.brand.darken(0.2).toRgbString(),
3585
+ disable: b.mono.alpha(0.75).toRgbString()
2483
3586
  }
2484
3587
  },
2485
3588
  mono: {
2486
3589
  primary: {
2487
- bg: b.mono.lighten(0.1).toHslString(),
2488
- bgHover: b.mono.lighten(0.2).toHslString(),
2489
- bgPress: b.mono.toHslString(),
3590
+ bg: b.mono.lighten(0.1).toRgbString(),
3591
+ bgHover: b.mono.lighten(0.2).toRgbString(),
3592
+ bgPress: b.mono.toRgbString(),
2490
3593
  border: "transparent",
2491
3594
  borderHover: "transparent",
2492
3595
  borderPress: "transparent"
2493
3596
  },
2494
3597
  secondary: {
2495
- bg: b.mono.alpha(0.12).lighten(0.1).toHslString(),
2496
- bgHover: b.mono.alpha(0.12).lighten(0.2).toHslString(),
2497
- bgPress: b.mono.alpha(0.12).toHslString(),
2498
- border: b.mono.alpha(0.2).toHslString(),
2499
- borderHover: b.mono.alpha(0.2).toHslString(),
2500
- borderPress: b.mono.alpha(0.2).toHslString()
3598
+ bg: b.mono.alpha(0.12).lighten(0.1).toRgbString(),
3599
+ bgHover: b.mono.alpha(0.12).lighten(0.2).toRgbString(),
3600
+ bgPress: b.mono.alpha(0.12).toRgbString(),
3601
+ border: b.mono.alpha(0.2).toRgbString(),
3602
+ borderHover: b.mono.alpha(0.2).toRgbString(),
3603
+ borderPress: b.mono.alpha(0.2).toRgbString()
2501
3604
  },
2502
3605
  tertiary: {
2503
3606
  bg: "transparent",
2504
- bgHover: b.mono.alpha(0.1).toHslString(),
2505
- bgPress: b.mono.alpha(0.2).toHslString(),
3607
+ bgHover: b.mono.alpha(0.1).toRgbString(),
3608
+ bgPress: b.mono.alpha(0.2).toRgbString(),
2506
3609
  border: "transparent",
2507
3610
  borderHover: "transparent",
2508
3611
  borderPress: "transparent"
2509
3612
  },
2510
3613
  text: {
2511
- primary: b.contentInverse.toHslString(),
2512
- secondary: b.mono.toHslString(),
2513
- tertiary: b.mono.toHslString()
3614
+ primary: b.contentInverse.toRgbString(),
3615
+ secondary: b.mono.toRgbString(),
3616
+ tertiary: b.mono.toRgbString()
2514
3617
  }
2515
3618
  },
2516
3619
  brandExtra: {
2517
3620
  primary: {
2518
- bg: b.brandExtra.toHslString(),
2519
- bgHover: b.brandExtra.lighten(0.1).toHslString(),
2520
- bgPress: b.brandExtra.darken(0.1).toHslString(),
2521
- border: b.brandExtra.darken(0.2).toHslString(),
2522
- borderHover: b.brandExtra.darken(0.2).toHslString(),
2523
- borderPress: b.brandExtra.darken(0.2).toHslString()
3621
+ bg: b.brandExtra.toRgbString(),
3622
+ bgHover: b.brandExtra.lighten(0.1).toRgbString(),
3623
+ bgPress: b.brandExtra.darken(0.1).toRgbString(),
3624
+ border: b.brandExtra.darken(0.2).toRgbString(),
3625
+ borderHover: b.brandExtra.darken(0.2).toRgbString(),
3626
+ borderPress: b.brandExtra.darken(0.2).toRgbString()
2524
3627
  },
2525
3628
  secondary: {
2526
- bg: b.brandExtra.alpha(0.4).toHslString(),
2527
- bgHover: b.brandExtra.alpha(0.4).darken(0.1).toHslString(),
2528
- bgPress: b.brandExtra.alpha(0.4).lighten(0.1).toHslString(),
2529
- border: b.brandExtra.toHslString(),
2530
- borderHover: b.brandExtra.toHslString(),
2531
- borderPress: b.brandExtra.toHslString()
3629
+ bg: b.brandExtra.alpha(0.4).toRgbString(),
3630
+ bgHover: b.brandExtra.alpha(0.4).darken(0.1).toRgbString(),
3631
+ bgPress: b.brandExtra.alpha(0.4).lighten(0.1).toRgbString(),
3632
+ border: b.brandExtra.toRgbString(),
3633
+ borderHover: b.brandExtra.toRgbString(),
3634
+ borderPress: b.brandExtra.toRgbString()
2532
3635
  },
2533
3636
  tertiary: {
2534
3637
  bg: "transparent",
2535
- bgHover: b.brandExtra.alpha(0.1).toHslString(),
2536
- bgPress: b.brandExtra.alpha(0.2).toHslString(),
3638
+ bgHover: b.brandExtra.alpha(0.1).toRgbString(),
3639
+ bgPress: b.brandExtra.alpha(0.2).toRgbString(),
2537
3640
  border: "transparent",
2538
3641
  borderHover: "transparent",
2539
3642
  borderPress: "transparent"
2540
3643
  },
2541
3644
  text: {
2542
- primary: b.onBrandExtra.toHslString(),
2543
- secondary: b.content.toHslString(),
2544
- tertiary: b.brandExtra.darken(0.2).toHslString()
3645
+ primary: b.onBrandExtra.toRgbString(),
3646
+ secondary: b.content.toRgbString(),
3647
+ tertiary: b.brandExtra.darken(0.2).toRgbString()
2545
3648
  }
2546
3649
  },
2547
3650
  alert: {
2548
- bg: b.alert.lighten(0.3).toHslString(),
2549
- border: b.alert.toHslString(),
3651
+ bg: b.alert.lighten(0.3).toRgbString(),
3652
+ border: b.alert.toRgbString(),
2550
3653
  primary: {
2551
- bg: b.alert.toHslString(),
2552
- bgHover: b.alert.lighten(0.1).toHslString(),
2553
- bgPress: b.alert.darken(0.1).toHslString(),
3654
+ bg: b.alert.toRgbString(),
3655
+ bgHover: b.alert.lighten(0.1).toRgbString(),
3656
+ bgPress: b.alert.darken(0.1).toRgbString(),
2554
3657
  border: "transparent",
2555
3658
  borderHover: "transparent",
2556
3659
  borderPress: "transparent"
2557
3660
  },
2558
3661
  secondary: {
2559
- bg: b.alert.lighten(0.3).toHslString(),
2560
- bgHover: b.alert.lighten(0.2).toHslString(),
2561
- bgPress: b.alert.lighten(0.1).toHslString(),
2562
- border: b.alert.toHslString(),
2563
- borderHover: b.alert.toHslString(),
2564
- borderPress: b.alert.toHslString()
3662
+ bg: b.alert.lighten(0.3).toRgbString(),
3663
+ bgHover: b.alert.lighten(0.2).toRgbString(),
3664
+ bgPress: b.alert.lighten(0.1).toRgbString(),
3665
+ border: b.alert.toRgbString(),
3666
+ borderHover: b.alert.toRgbString(),
3667
+ borderPress: b.alert.toRgbString()
2565
3668
  },
2566
3669
  tertiary: {
2567
3670
  bg: "transparent",
2568
- bgHover: b.alert.alpha(0.1).toHslString(),
2569
- bgPress: b.alert.alpha(0.2).toHslString(),
3671
+ bgHover: b.alert.alpha(0.1).toRgbString(),
3672
+ bgPress: b.alert.alpha(0.2).toRgbString(),
2570
3673
  border: "transparent",
2571
3674
  borderHover: "transparent",
2572
3675
  borderPress: "transparent"
2573
3676
  },
2574
3677
  text: {
2575
- primary: b.onAlert.toHslString(),
2576
- secondary: b.content.toHslString(),
2577
- tertiary: b.alert.darken(0.2).toHslString()
3678
+ primary: b.onAlert.toRgbString(),
3679
+ secondary: b.content.toRgbString(),
3680
+ tertiary: b.alert.darken(0.2).toRgbString()
2578
3681
  }
2579
3682
  },
2580
3683
  input: {
2581
- bg: b.mono.alpha(0.08).toHslString(),
2582
- bgHover: b.mono.alpha(0.12).toHslString(),
2583
- bgDisable: b.mono.alpha(0.25).toHslString(),
2584
- border: b.mono.alpha(0.12).toHslString(),
2585
- borderHover: b.mono.alpha(0.18).toHslString(),
2586
- borderDisable: b.mono.alpha(0.08).toHslString(),
2587
- text: b.content.toHslString(),
2588
- placeholder: b.content.alpha(0.6).toHslString(),
2589
- textDisable: b.content.alpha(0.36).toHslString()
3684
+ bg: b.mono.alpha(0.08).toRgbString(),
3685
+ bgHover: b.mono.alpha(0.12).toRgbString(),
3686
+ bgDisable: b.mono.alpha(0.25).toRgbString(),
3687
+ border: b.mono.alpha(0.12).toRgbString(),
3688
+ borderHover: b.mono.alpha(0.18).toRgbString(),
3689
+ borderDisable: b.mono.alpha(0.08).toRgbString(),
3690
+ text: b.content.toRgbString(),
3691
+ placeholder: b.content.alpha(0.6).toRgbString(),
3692
+ textDisable: b.content.alpha(0.36).toRgbString()
2590
3693
  },
2591
3694
  focus: {
2592
- bg: b.background.toHslString(),
2593
- border: b.brand.toHslString()
3695
+ bg: b.background.toRgbString(),
3696
+ border: b.brand.toRgbString()
2594
3697
  },
2595
3698
  check: {
2596
- bg: b.brand.toHslString(),
2597
- bgHover: b.brand.darken(0.1).toHslString(),
2598
- bgDisable: b.mono.alpha(0.2).toHslString(),
2599
- border: b.brand.toHslString(),
2600
- borderHover: b.brand.darken(0.1).toHslString(),
3699
+ bg: b.brand.toRgbString(),
3700
+ bgHover: b.brand.darken(0.1).toRgbString(),
3701
+ bgDisable: b.mono.alpha(0.2).toRgbString(),
3702
+ border: b.brand.toRgbString(),
3703
+ borderHover: b.brand.darken(0.1).toRgbString(),
2601
3704
  borderDisable: "transparent",
2602
- icon: b.onBrand.toHslString()
3705
+ icon: b.onBrand.toRgbString()
2603
3706
  },
2604
3707
  faint: {
2605
- bg: b.mono.alpha(0.15).toHslString(),
2606
- bgHover: b.mono.alpha(0.2).toHslString(),
2607
- border: b.mono.alpha(0.2).toHslString(),
2608
- borderHover: b.mono.alpha(0.1).toHslString()
3708
+ bg: b.mono.alpha(0.15).toRgbString(),
3709
+ bgHover: b.mono.alpha(0.2).toRgbString(),
3710
+ border: b.mono.alpha(0.2).toRgbString(),
3711
+ borderHover: b.mono.alpha(0.25).toRgbString()
2609
3712
  },
2610
3713
  slider: {
2611
- bg: b.brand.toHslString(),
2612
- bgHover: b.brand.lighten(0.1).toHslString(),
2613
- bgDisable: b.mono.alpha(0.25).toHslString()
3714
+ bg: b.brand.toRgbString(),
3715
+ bgHover: b.brand.lighten(0.1).toRgbString(),
3716
+ bgDisable: b.mono.alpha(0.25).toRgbString()
2614
3717
  },
2615
3718
  switch: {
2616
- bg: b.brand.toHslString(),
2617
- bgHover: b.brand.darken(0.1).toHslString(),
2618
- bgDisable: b.mono.alpha(0.25).toHslString(),
2619
- border: b.brand.toHslString(),
2620
- borderHover: b.brand.darken(0.1).toHslString(),
3719
+ bg: b.brand.toRgbString(),
3720
+ bgHover: b.brand.darken(0.1).toRgbString(),
3721
+ bgDisable: b.mono.alpha(0.25).toRgbString(),
3722
+ border: b.brand.toRgbString(),
3723
+ borderHover: b.brand.darken(0.1).toRgbString(),
2621
3724
  borderDisable: "transparent"
2622
3725
  },
2623
3726
  knob: {
2624
- bg: b.onBrand.toHslString(),
2625
- bgHover: b.onBrand.darken(0.1).toHslString(),
2626
- bgInactive: b.onBrand.toHslString()
3727
+ bg: b.onBrand.toRgbString(),
3728
+ bgHover: b.onBrand.darken(0.1).toRgbString(),
3729
+ bgActive: b.onBrand.toRgbString(),
3730
+ bgActiveHover: b.onBrand.darken(0.1).toRgbString(),
3731
+ bgInactive: b.onBrand.toRgbString(),
3732
+ bgInactiveHover: b.onBrand.darken(0.1).toRgbString(),
3733
+ bgDisable: b.mono.alpha(0.25).toRgbString()
2627
3734
  },
2628
3735
  text: {
2629
- primary: b.content.toHslString(),
2630
- disable: b.content.alpha(0.36).toHslString()
3736
+ primary: b.content.toRgbString(),
3737
+ disable: b.content.alpha(0.36).toRgbString()
2631
3738
  },
2632
3739
  link: {
2633
- primary: b.linkPrimary.toHslString(),
2634
- primaryHover: b.linkPrimary.alpha(0.7).toHslString(),
2635
- secondary: b.linkSecondary.toHslString(),
2636
- secondaryHover: b.linkSecondary.alpha(0.7).toHslString()
3740
+ primary: b.linkPrimary.toRgbString(),
3741
+ primaryHover: b.linkPrimary.alpha(0.7).toRgbString(),
3742
+ secondary: b.linkSecondary.toRgbString(),
3743
+ secondaryHover: b.linkSecondary.alpha(0.7).toRgbString()
2637
3744
  },
2638
3745
  segmented: {
2639
- bg: b.mono.alpha(0.08).toHslString(),
2640
- bgHover: b.mono.alpha(0.08).toHslString(),
2641
- bgActive: b.background.toHslString(),
2642
- border: b.mono.alpha(0.12).toHslString(),
2643
- borderHover: b.mono.alpha(0.18).toHslString(),
3746
+ bg: b.mono.alpha(0.08).toRgbString(),
3747
+ bgHover: b.mono.alpha(0.08).toRgbString(),
3748
+ bgActive: b.background.toRgbString(),
3749
+ border: b.mono.alpha(0.12).toRgbString(),
3750
+ borderHover: b.mono.alpha(0.18).toRgbString(),
2644
3751
  borderActive: "transparent",
2645
- text: b.content.toHslString(),
2646
- textDisable: b.content.alpha(0.36).toHslString()
3752
+ text: b.content.toRgbString(),
3753
+ textDisable: b.content.alpha(0.36).toRgbString()
2647
3754
  },
2648
3755
  toggleButton: {
2649
- bg: b.mono.alpha(0.08).toHslString(),
2650
- bgHover: b.mono.alpha(0.12).toHslString(),
2651
- bgActive: b.brand.alpha(0.4).toHslString(),
2652
- bgDisable: b.mono.alpha(0.25).toHslString(),
2653
- border: b.mono.alpha(0.12).toHslString(),
2654
- borderHover: b.mono.alpha(0.18).toHslString(),
2655
- borderActive: b.brand.toHslString(),
3756
+ bg: b.mono.alpha(0.08).toRgbString(),
3757
+ bgHover: b.mono.alpha(0.12).toRgbString(),
3758
+ bgActive: b.brand.alpha(0.4).toRgbString(),
3759
+ bgDisable: b.mono.alpha(0.25).toRgbString(),
3760
+ border: b.mono.alpha(0.12).toRgbString(),
3761
+ borderHover: b.mono.alpha(0.18).toRgbString(),
3762
+ borderActive: b.brand.toRgbString(),
2656
3763
  borderDisable: "transparent",
2657
- text: b.content.toHslString(),
2658
- textActive: b.content.toHslString(),
2659
- textDisable: b.content.alpha(0.36).toHslString()
3764
+ text: b.content.toRgbString(),
3765
+ textActive: b.content.toRgbString(),
3766
+ textDisable: b.content.alpha(0.36).toRgbString()
2660
3767
  }
2661
3768
  }
2662
3769
  });
2663
- var payStationScheme = createScheme(base10);
3770
+ var pentagramLight = pentagramLightScheme(base10);
3771
+
3772
+ // src/themes/pentagram/pentagram.ts
3773
+ function convertToLegacyBase(pentagramBase) {
3774
+ return {
3775
+ content: pentagramBase.content.toRgbString(),
3776
+ surface: pentagramBase.background.toRgbString(),
3777
+ project: pentagramBase.brand.toRgbString(),
3778
+ accent: pentagramBase.brandExtra.toRgbString(),
3779
+ phantom: pentagramBase.mono.toRgbString(),
3780
+ path: pentagramBase.brand.toRgbString(),
3781
+ success: pentagramBase.success.toRgbString(),
3782
+ warning: pentagramBase.warning.toRgbString(),
3783
+ alert: pentagramBase.alert.toRgbString(),
3784
+ neutral: pentagramBase.neutral.toRgbString()
3785
+ };
3786
+ }
3787
+ var desktopResolver = createResolver("desktop");
3788
+ var resolvedTypoDesktop = desktopResolver.resolvePrimitives(
3789
+ typo_primitives_default
3790
+ );
3791
+ var resolvedShapeDesktop = desktopResolver.resolvePrimitives(shape_primitives_default);
3792
+ var pentagramTypo = mapPentagramTypoToLegacy(resolvedTypoDesktop);
3793
+ var pentagramMisc = mapPentagramShapeToLegacy(resolvedShapeDesktop);
3794
+ var paystation4PentagramLightLegacyCompatible = {
3795
+ colors: {
3796
+ base: convertToLegacyBase(base10),
3797
+ ...mapThemeSchemeToLegacy(pentagramLight)
3798
+ },
3799
+ typo: pentagramTypo,
3800
+ misc: pentagramMisc,
3801
+ shadows: shadowsDefault,
3802
+ globalStyle: "pentagram"
3803
+ };
3804
+ var paystation4PentagramDarkLegacyCompatible = {
3805
+ colors: {
3806
+ base: convertToLegacyBase(baseDark),
3807
+ ...mapThemeSchemeToLegacy(pentagramDark)
3808
+ },
3809
+ typo: pentagramTypo,
3810
+ misc: pentagramMisc,
3811
+ shadows: shadowsDefault,
3812
+ globalStyle: "pentagram"
3813
+ };
3814
+ var paystation4PentagramLight = {
3815
+ colors: pentagramLight,
3816
+ shape: shape_primitives_default,
3817
+ typo: typo_primitives_default,
3818
+ shadows: shadowsDefault,
3819
+ globalStyle: "pentagram"
3820
+ };
3821
+ var paystation4PentagramDark = {
3822
+ colors: pentagramDark,
3823
+ shape: shape_primitives_default,
3824
+ typo: typo_primitives_default,
3825
+ shadows: shadowsDefault,
3826
+ globalStyle: "pentagram"
3827
+ };
2664
3828
 
2665
3829
  // src/themes/index.ts
2666
3830
  var themes = {
@@ -2845,8 +4009,8 @@ var pentagramBaseColors = {
2845
4009
  payStationDark: baseDark
2846
4010
  };
2847
4011
  var pentagramColorsScheme = {
2848
- payStationLight: createScheme,
2849
- payStationDark: createDarkScheme
4012
+ payStationLight: pentagramLightScheme,
4013
+ payStationDark: pentagramDarkScheme
2850
4014
  };
2851
4015
  var pentagramBaseColorsKeys = [
2852
4016
  "content",
@@ -2930,31 +4094,48 @@ var applyPentagramColors = (schemeBase, overrides) => {
2930
4094
  };
2931
4095
  // Annotate the CommonJS export names for ESM import in node:
2932
4096
  0 && (module.exports = {
4097
+ DELETED_LEGACY_TYPO_VARS,
4098
+ PentagramResolver,
2933
4099
  base,
2934
4100
  baseDark,
2935
- createDarkScheme,
2936
- createScheme,
4101
+ buildBaseColorsFromPentagram,
4102
+ createResolver,
2937
4103
  emails,
2938
4104
  emailsDark,
2939
4105
  emailsThemes,
4106
+ flattenPentagramShapeToVars,
2940
4107
  generateWithScheme,
4108
+ mapPentagramShapeToLegacy,
4109
+ mapPentagramThemeToLegacy,
4110
+ mapPentagramTypoToLegacy,
4111
+ mapThemeSchemeToLegacy,
2941
4112
  palettes,
2942
- payStationDarkScheme,
2943
- payStationScheme,
2944
4113
  paystation4,
2945
4114
  paystation4Dark,
2946
4115
  paystation4Gaijin,
2947
4116
  paystation4Nexters,
4117
+ paystation4PentagramDark,
4118
+ paystation4PentagramDarkLegacyCompatible,
4119
+ paystation4PentagramLight,
4120
+ paystation4PentagramLightLegacyCompatible,
2948
4121
  paystation4Take2,
2949
4122
  paystation4Themes,
4123
+ pentagramDark,
4124
+ pentagramDarkScheme,
4125
+ pentagramLight,
4126
+ pentagramLightScheme,
2950
4127
  primaryPalette,
2951
4128
  publisherV2,
2952
4129
  publisherV2Dark,
2953
4130
  publisherV2Themes,
4131
+ resolveForDesktop,
4132
+ resolveForMobile,
4133
+ shapePrimitives,
2954
4134
  themeGenerator,
2955
4135
  themes,
2956
4136
  themesBaseColors,
2957
4137
  themesBaseColorsArray,
2958
- themesColorsScheme
4138
+ themesColorsScheme,
4139
+ typoPrimitives
2959
4140
  });
2960
4141
  //# sourceMappingURL=index.js.map