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