@wistia/ui 0.26.16 → 1.0.0
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/dist/css-custom-data.css +164 -85
- package/dist/index.d.ts +10 -12
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +252 -347
- package/dist/index.js.map +1 -1
- package/package.json +34 -28
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui
|
|
3
|
+
* @license @wistia/ui v1.0.0
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -45,8 +45,10 @@ import { Dialog } from "@base-ui/react/dialog";
|
|
|
45
45
|
import { Progress } from "@base-ui/react/progress";
|
|
46
46
|
import { Select as Select$1 } from "@base-ui/react/select";
|
|
47
47
|
import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
|
|
48
|
-
//#
|
|
49
|
-
|
|
48
|
+
//#endregion
|
|
49
|
+
//#region src/css/GlobalStyle.tsx
|
|
50
|
+
const GlobalStyle = createGlobalStyle`
|
|
51
|
+
${css`
|
|
50
52
|
/**
|
|
51
53
|
* 1. Change from 'content-box' so that 'width' calculations are unaffected by 'padding' or 'border'
|
|
52
54
|
See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
|
@@ -170,188 +172,13 @@ const globalStyleAdjustmentsCss = css`
|
|
|
170
172
|
scroll-behavior: auto !important;
|
|
171
173
|
}
|
|
172
174
|
}
|
|
173
|
-
|
|
174
|
-
//#endregion
|
|
175
|
-
//#region src/css/designTokens/colorGlobal.css
|
|
176
|
-
var colorGlobal_default = "--wui-app-background: #ffffff;\n--wui-blue-surface: #f4f8ffcc;\n--wui-blue-contrast: #ffffff;\n--wui-purple-surface: #fdf5ffcc;\n--wui-purple-contrast: #ffffff;\n--wui-green-surface: #f3faf1cc;\n--wui-green-contrast: #ffffff;\n--wui-pink-surface: #fff5f9cc;\n--wui-pink-contrast: #ffffff;\n--wui-red-surface: #fff5f5cc;\n--wui-red-contrast: #ffffff;\n--wui-yellow-surface: #fafbe5cc;\n--wui-yellow-contrast: #22230b;\n--wui-orange-surface: #fff5f3cc;\n--wui-orange-contrast: #ffffff;\n--wui-error-surface: #fff5f5cc;\n--wui-error-contrast: #ffffff;\n--wui-success-surface: #f1faf5cc;\n--wui-success-contrast: #ffffff;\n--wui-warning-surface: #fefbe6cc;\n--wui-warning-contrast: #262209;\n--wui-gray-surface: #ffffffcc;\n--wui-gray-contrast: #ffffff;\n--wui-blue-1: #fdfdfe;\n--wui-blue-2: #f6f9ff;\n--wui-blue-3: #ecf2ff;\n--wui-blue-4: #ddeaff;\n--wui-blue-5: #cddfff;\n--wui-blue-6: #b8d1ff;\n--wui-blue-7: #a1beff;\n--wui-blue-8: #81a4fe;\n--wui-blue-9: #2949e5;\n--wui-blue-10: #1f36d3;\n--wui-blue-11: #3154dc;\n--wui-blue-12: #192b65;\n--wui-blue-alpha-1: #00008003;\n--wui-blue-alpha-2: #0055ff0a;\n--wui-blue-alpha-3: #0051ff12;\n--wui-blue-alpha-4: #0062ff21;\n--wui-blue-alpha-5: #005cff33;\n--wui-blue-alpha-6: #005aff47;\n--wui-blue-alpha-7: #004fff5e;\n--wui-blue-alpha-8: #0047fd7d;\n--wui-blue-alpha-9: #0026e0d6;\n--wui-blue-alpha-10: #001acde0;\n--wui-blue-alpha-11: #002bd4cf;\n--wui-blue-alpha-12: #001454e5;\n--wui-purple-1: #fefcff;\n--wui-purple-2: #fdf7ff;\n--wui-purple-3: #fbeaff;\n--wui-purple-4: #f7ddff;\n--wui-purple-5: #f2ceff;\n--wui-purple-6: #eabdff;\n--wui-purple-7: #e0a5fc;\n--wui-purple-8: #d285f7;\n--wui-purple-9: #ac12e0;\n--wui-purple-10: #9a09c9;\n--wui-purple-11: #9b0bca;\n--wui-purple-12: #550072;\n--wui-purple-alpha-1: #aa00ff03;\n--wui-purple-alpha-2: #c000ff08;\n--wui-purple-alpha-3: #cf00ff14;\n--wui-purple-alpha-4: #c300ff21;\n--wui-purple-alpha-5: #bc00ff30;\n--wui-purple-alpha-6: #ae00ff42;\n--wui-purple-alpha-7: #a801f759;\n--wui-purple-alpha-8: #a101ef7a;\n--wui-purple-alpha-9: #a600deed;\n--wui-purple-alpha-10: #9600c7f5;\n--wui-purple-alpha-11: #9700c8f5;\n--wui-purple-alpha-12: #550072;\n--wui-green-1: #fbfefa;\n--wui-green-2: #f5fbf4;\n--wui-green-3: #e7f8e5;\n--wui-green-4: #d8f2d4;\n--wui-green-5: #c6ebc0;\n--wui-green-6: #afe0a6;\n--wui-green-7: #8fd185;\n--wui-green-8: #5fbd51;\n--wui-green-9: #268713;\n--wui-green-10: #117900;\n--wui-green-11: #1e8106;\n--wui-green-12: #1e3d19;\n--wui-green-alpha-1: #33cc0005;\n--wui-green-alpha-2: #18a3000b;\n--wui-green-alpha-3: #14bb001a;\n--wui-green-alpha-4: #18b2012b;\n--wui-green-alpha-5: #19af003f;\n--wui-green-alpha-6: #1aa70059;\n--wui-green-alpha-7: #159f017a;\n--wui-green-alpha-8: #189f00b0;\n--wui-green-alpha-9: #159f00ae;\n--wui-green-alpha-10: #157d00ec;\n--wui-green-alpha-11: #117900;\n--wui-green-alpha-12: #197e00f9;\n--wui-pink-1: #fffcfd;\n--wui-pink-2: #fff7fa;\n--wui-pink-3: #ffe8f3;\n--wui-pink-4: #ffdaeb;\n--wui-pink-5: #fdcbe2;\n--wui-pink-6: #f7bcd8;\n--wui-pink-7: #efa8ca;\n--wui-pink-8: #e68eba;\n--wui-pink-9: #ff40b3;\n--wui-pink-10: #f12fa7;\n--wui-pink-11: #cd0089;\n--wui-pink-12: #680445;\n--wui-pink-alpha-1: #ff005503;\n--wui-pink-alpha-2: #ff006008;\n--wui-pink-alpha-3: #ff007a17;\n--wui-pink-alpha-4: #ff007626;\n--wui-pink-alpha-5: #f6007133;\n--wui-pink-alpha-6: #e1006b42;\n--wui-pink-alpha-7: #d1006457;\n--wui-pink-alpha-8: #c7006470;\n--wui-pink-alpha-9: #ff009abf;\n--wui-pink-alpha-10: #ee0093d1;\n--wui-pink-alpha-11: #cd0089;\n--wui-pink-alpha-12: #660042fa;\n--wui-red-1: #fffcfc;\n--wui-red-2: #fff7f7;\n--wui-red-3: #ffe9e9;\n--wui-red-4: #ffd9d9;\n--wui-red-5: #ffcaca;\n--wui-red-6: #ffbaba;\n--wui-red-7: #fca5a6;\n--wui-red-8: #f5898c;\n--wui-red-9: #ff2b51;\n--wui-red-10: #f10845;\n--wui-red-11: #db0035;\n--wui-red-12: #6d021a;\n--wui-red-alpha-1: #ff000003;\n--wui-red-alpha-2: #ff000008;\n--wui-red-alpha-3: #ff000017;\n--wui-red-alpha-4: #ff000026;\n--wui-red-alpha-5: #ff000036;\n--wui-red-alpha-6: #ff000045;\n--wui-red-alpha-7: #f7010359;\n--wui-red-alpha-8: #ea000775;\n--wui-red-alpha-9: #ff002ed4;\n--wui-red-alpha-10: #f1003ff7;\n--wui-red-alpha-11: #db0035;\n--wui-red-alpha-12: #6c0018fc;\n--wui-yellow-1: #fdfdf8;\n--wui-yellow-2: #fbfcea;\n--wui-yellow-3: #f6fbb8;\n--wui-yellow-4: #f0f491;\n--wui-yellow-5: #e7eb6d;\n--wui-yellow-6: #d8dd5d;\n--wui-yellow-7: #c8cc52;\n--wui-yellow-8: #b3b600;\n--wui-yellow-9: #bcbf19;\n--wui-yellow-10: #b1b400;\n--wui-yellow-11: #7a7b00;\n--wui-yellow-12: #3e3f14;\n--wui-yellow-alpha-1: #b7b70008;\n--wui-yellow-alpha-2: #cfdb0014;\n--wui-yellow-alpha-3: #dff10047;\n--wui-yellow-alpha-4: #dde6006e;\n--wui-yellow-alpha-5: #d5dc0091;\n--wui-yellow-alpha-6: #c2ca00a3;\n--wui-yellow-alpha-7: #aeb400ad;\n--wui-yellow-alpha-8: #b3b600;\n--wui-yellow-alpha-9: #b5b800e5;\n--wui-yellow-alpha-10: #b1b400;\n--wui-yellow-alpha-11: #7a7b00;\n--wui-yellow-alpha-12: #2e2f00eb;\n--wui-orange-1: #fffcfb;\n--wui-orange-2: #fff7f5;\n--wui-orange-3: #ffebe6;\n--wui-orange-4: #ffdbce;\n--wui-orange-5: #fcbfcb;\n--wui-orange-6: #ffbdaa;\n--wui-orange-7: #f4aa95;\n--wui-orange-8: #ea9178;\n--wui-orange-9: #d1451a;\n--wui-orange-10: #c23600;\n--wui-orange-11: #ce4216;\n--wui-orange-12: #592b1e;\n--wui-orange-alpha-1: #ff400005;\n--wui-orange-alpha-2: #ff33000a;\n--wui-orange-alpha-3: #ff33001a;\n--wui-orange-alpha-4: #ff440030;\n--wui-orange-alpha-5: #ff400045;\n--wui-orange-alpha-6: #ff390054;\n--wui-orange-alpha-7: #e533016b;\n--wui-orange-alpha-8: #d8300087;\n--wui-orange-alpha-9: #cc3000e5;\n--wui-orange-alpha-10: #c23600;\n--wui-orange-alpha-11: #c93000e8;\n--wui-orange-alpha-12: #430f00e0;\n--wui-error-1: #fffcfc;\n--wui-error-2: #fff7f7;\n--wui-error-3: #ffebea;\n--wui-error-4: #ffdcd9;\n--wui-error-5: #ffcdca;\n--wui-error-6: #febdb9;\n--wui-error-7: #f5a9a5;\n--wui-error-8: #eb8f8b;\n--wui-error-9: #e5484d;\n--wui-error-10: #d73840;\n--wui-error-11: #cc2e39;\n--wui-error-12: #64181b;\n--wui-error-alpha-1: #ff000003;\n--wui-error-alpha-2: #ff000008;\n--wui-error-alpha-3: #ff0d0014;\n--wui-error-alpha-4: #ff150026;\n--wui-error-alpha-5: #ff0f0036;\n--wui-error-alpha-6: #fc0f0045;\n--wui-error-alpha-7: #e30c0159;\n--wui-error-alpha-8: #d4090073;\n--wui-error-alpha-9: #db0007b8;\n--wui-error-alpha-10: #cc000ac7;\n--wui-error-alpha-11: #c1000ed1;\n--wui-error-alpha-12: #540003e8;\n--wui-success-1: #fbfefc;\n--wui-success-2: #f4fbf7;\n--wui-success-3: #e5f6eb;\n--wui-success-4: #d6f1df;\n--wui-success-5: #c4e8d1;\n--wui-success-6: #adddc0;\n--wui-success-7: #8fcea8;\n--wui-success-8: #60b887;\n--wui-success-9: #30a46c;\n--wui-success-10: #289662;\n--wui-success-11: #00814c;\n--wui-success-12: #1d3b2a;\n--wui-success-alpha-1: #00c04005;\n--wui-success-alpha-2: #00a3460a;\n--wui-success-alpha-3: #00a73b1a;\n--wui-success-alpha-4: #00a83829;\n--wui-success-alpha-5: #019c393b;\n--wui-success-alpha-6: #00963c52;\n--wui-success-alpha-7: #00903970;\n--wui-success-alpha-8: #008d3f9e;\n--wui-success-alpha-9: #008f4acf;\n--wui-success-alpha-10: #008345d6;\n--wui-success-alpha-11: #00814c;\n--wui-success-alpha-12: #00220fe3;\n--wui-warning-1: #fdfdfa;\n--wui-warning-2: #fefceb;\n--wui-warning-3: #fff9bf;\n--wui-warning-4: #fef29f;\n--wui-warning-5: #f8e981;\n--wui-warning-6: #e9da79;\n--wui-warning-7: #d8cb75;\n--wui-warning-8: #c4b54f;\n--wui-warning-9: #ffe62a;\n--wui-warning-10: #f3dd45;\n--wui-warning-11: #897a00;\n--wui-warning-12: #413d23;\n--wui-warning-alpha-1: #99990005;\n--wui-warning-alpha-2: #f3d90014;\n--wui-warning-alpha-3: #ffe80040;\n--wui-warning-alpha-4: #fddd0061;\n--wui-warning-alpha-5: #f1d3007d;\n--wui-warning-alpha-6: #d6b90087;\n--wui-warning-alpha-7: #b79f008a;\n--wui-warning-alpha-8: #aa9400b0;\n--wui-warning-alpha-9: #ffe100d6;\n--wui-warning-alpha-10: #efd100ba;\n--wui-warning-alpha-11: #897a00;\n--wui-warning-alpha-12: #231e00db;\n--wui-gray-1: #fcfcfd;\n--wui-gray-2: #f9f9fb;\n--wui-gray-3: #f0f0f3;\n--wui-gray-4: #e8e8ec;\n--wui-gray-5: #e0e0e5;\n--wui-gray-6: #d9d9de;\n--wui-gray-7: #ceced5;\n--wui-gray-8: #bbbbc4;\n--wui-gray-9: #8d8d95;\n--wui-gray-10: #82828a;\n--wui-gray-11: #64646a;\n--wui-gray-12: #202024;\n--wui-gray-alpha-1: #00005503;\n--wui-gray-alpha-2: #00005505;\n--wui-gray-alpha-3: #0000330f;\n--wui-gray-alpha-4: #00002d17;\n--wui-gray-alpha-5: #00002a1f;\n--wui-gray-alpha-6: #00002226;\n--wui-gray-alpha-7: #00002530;\n--wui-gray-alpha-8: #00002245;\n--wui-gray-alpha-9: #00001273;\n--wui-gray-alpha-10: #0000117d;\n--wui-gray-alpha-11: #00000a9c;\n--wui-gray-alpha-12: #000005de;\n--wui-vendor-hubspot-1: #fefcfb;\n--wui-vendor-hubspot-2: #fff5f2;\n--wui-vendor-hubspot-3: #ffe9e2;\n--wui-vendor-hubspot-4: #ffd7c9;\n--wui-vendor-hubspot-5: #ffc8b7;\n--wui-vendor-hubspot-6: #ffb8a3;\n--wui-vendor-hubspot-7: #ffa48d;\n--wui-vendor-hubspot-8: #f68a70;\n--wui-vendor-hubspot-9: #ff5c36;\n--wui-vendor-hubspot-10: #f24d25;\n--wui-vendor-hubspot-11: #d93a0f;\n--wui-vendor-hubspot-12: #5b2a1e;\n--wui-vendor-hubspot-surface: #fff3efcc;\n--wui-vendor-hubspot-contrast: #ffffff;\n--wui-vendor-marketo-1: #fdfdff;\n--wui-vendor-marketo-2: #f7f8ff;\n--wui-vendor-marketo-3: #eff2ff;\n--wui-vendor-marketo-4: #e3e8ff;\n--wui-vendor-marketo-5: #d5ddff;\n--wui-vendor-marketo-6: #c5cfff;\n--wui-vendor-marketo-7: #b0bcfa;\n--wui-vendor-marketo-8: #93a0f2;\n--wui-vendor-marketo-9: #4c50cc;\n--wui-vendor-marketo-10: #4040bb;\n--wui-vendor-marketo-11: #4f55c7;\n--wui-vendor-marketo-12: #252a62;\n--wui-vendor-marketo-surface: #f5f6ffcc;\n--wui-vendor-marketo-contrast: #ffffff;\n--wui-vendor-pardot-1: #fafdff;\n--wui-vendor-pardot-2: #f3fafe;\n--wui-vendor-pardot-3: #e1f5ff;\n--wui-vendor-pardot-4: #ceeeff;\n--wui-vendor-pardot-5: #bae5ff;\n--wui-vendor-pardot-6: #a4d9fa;\n--wui-vendor-pardot-7: #85c9f1;\n--wui-vendor-pardot-8: #4fb3e8;\n--wui-vendor-pardot-9: #00a1e0;\n--wui-vendor-pardot-10: #0094cf;\n--wui-vendor-pardot-11: #0079b5;\n--wui-vendor-pardot-12: #0c3a51;\n--wui-vendor-pardot-surface: #f0f9fecc;\n--wui-vendor-pardot-contrast: #ffffff;\n";
|
|
177
|
-
//#endregion
|
|
178
|
-
//#region src/css/designTokens/colorGlobalDark.css
|
|
179
|
-
var colorGlobalDark_default = "--wui-app-background: #101629;\n--wui-blue-surface: #141c2d80;\n--wui-blue-contrast: #ffffff;\n--wui-purple-surface: #34132980;\n--wui-purple-contrast: #ffffff;\n--wui-green-surface: #1c240280;\n--wui-green-contrast: #ffffff;\n--wui-pink-surface: #3c0f1080;\n--wui-pink-contrast: #ffffff;\n--wui-red-surface: #38160480;\n--wui-red-contrast: #ffffff;\n--wui-yellow-surface: #28220080;\n--wui-yellow-contrast: #22230b;\n--wui-orange-surface: #321a0480;\n--wui-orange-contrast: #ffffff;\n--wui-error-surface: #36160280;\n--wui-error-contrast: #ffffff;\n--wui-success-surface: #1a260880;\n--wui-success-contrast: #ffffff;\n--wui-warning-surface: #2c240080;\n--wui-warning-contrast: #262209;\n--wui-gray-surface: #0000000d;\n--wui-gray-contrast: #ffffff;\n--wui-blue-1: #111725;\n--wui-blue-2: #12192b;\n--wui-blue-3: #152452;\n--wui-blue-4: #192c6d;\n--wui-blue-5: #203681;\n--wui-blue-6: #284191;\n--wui-blue-7: #314da7;\n--wui-blue-8: #395ac3;\n--wui-blue-9: #2949e5;\n--wui-blue-10: #1f36d3;\n--wui-blue-11: #90b3ff;\n--wui-blue-12: #d2e1ff;\n--wui-blue-alpha-1: #90960003;\n--wui-blue-alpha-2: #90d6a905;\n--wui-blue-alpha-3: #2b5fff30;\n--wui-blue-alpha-4: #2c5bfd52;\n--wui-blue-alpha-5: #3764ff69;\n--wui-blue-alpha-6: #426fff7d;\n--wui-blue-alpha-7: #4773fe96;\n--wui-blue-alpha-8: #4975ffb8;\n--wui-blue-alpha-9: #2c4ffee0;\n--wui-blue-alpha-10: #233fffcc;\n--wui-blue-alpha-11: #90b3ff;\n--wui-blue-alpha-12: #d2e1ff;\n--wui-purple-1: #1c1320;\n--wui-purple-2: #221429;\n--wui-purple-3: #361544;\n--wui-purple-4: #46135b;\n--wui-purple-5: #521969;\n--wui-purple-6: #5f2578;\n--wui-purple-7: #753491;\n--wui-purple-8: #9643ba;\n--wui-purple-9: #ac12e0;\n--wui-purple-10: #9d00d0;\n--wui-purple-11: #e590ff;\n--wui-purple-12: #f4d2ff;\n--wui-purple-alpha-1: #fc00000d;\n--wui-purple-alpha-2: #f6002914;\n--wui-purple-alpha-3: #fd10d129;\n--wui-purple-alpha-4: #f60afe3d;\n--wui-purple-alpha-5: #eb20fd4d;\n--wui-purple-alpha-6: #e53ffd5e;\n--wui-purple-alpha-7: #e054ff7d;\n--wui-purple-alpha-8: #d659ffad;\n--wui-purple-alpha-9: #c612fedb;\n--wui-purple-alpha-10: #c400ffc7;\n--wui-purple-alpha-11: #e590ff;\n--wui-purple-alpha-12: #f4d2ff;\n--wui-green-1: #111a0f;\n--wui-green-2: #151e13;\n--wui-green-3: #182e14;\n--wui-green-4: #133e0c;\n--wui-green-5: #174c0d;\n--wui-green-6: #1a5c0e;\n--wui-green-7: #1d6d0d;\n--wui-green-8: #1d8004;\n--wui-green-9: #268713;\n--wui-green-10: #117900;\n--wui-green-11: #76d467;\n--wui-green-12: #aff9a3;\n--wui-green-alpha-1: #44e30005;\n--wui-green-alpha-2: #9ef90009;\n--wui-green-alpha-3: #5cf9001b;\n--wui-green-alpha-4: #22fe002c;\n--wui-green-alpha-5: #2efc003c;\n--wui-green-alpha-6: #32fe004d;\n--wui-green-alpha-7: #33fd0060;\n--wui-green-alpha-8: #2cfd0075;\n--wui-green-alpha-9: #3eff007c;\n--wui-green-alpha-10: #13fd006d;\n--wui-green-alpha-11: #8dff75d0;\n--wui-green-alpha-12: #b3fea6f9;\n--wui-pink-1: #1f1319;\n--wui-pink-2: #26121c;\n--wui-pink-3: #3f122b;\n--wui-pink-4: #550438;\n--wui-pink-5: #630b42;\n--wui-pink-6: #741b50;\n--wui-pink-7: #8f2965;\n--wui-pink-8: #b73581;\n--wui-pink-9: #ff40b3;\n--wui-pink-10: #f12fa7;\n--wui-pink-11: #ff86cc;\n--wui-pink-12: #ffcde8;\n--wui-pink-alpha-1: #f1000012;\n--wui-pink-alpha-2: #fa000017;\n--wui-pink-alpha-3: #fb023333;\n--wui-pink-alpha-4: #fe005d4a;\n--wui-pink-alpha-5: #fe007159;\n--wui-pink-alpha-6: #ff22866b;\n--wui-pink-alpha-7: #ff3a9a87;\n--wui-pink-alpha-8: #fe42a7b2;\n--wui-pink-alpha-9: #ff40b3;\n--wui-pink-alpha-10: #fe31aff2;\n--wui-pink-alpha-11: #ff86cc;\n--wui-pink-alpha-12: #ffcde8;\n--wui-red-1: #1e1414;\n--wui-red-2: #241616;\n--wui-red-3: #411014;\n--wui-red-4: #580314;\n--wui-red-5: #68071b;\n--wui-red-6: #7a1725;\n--wui-red-7: #952634;\n--wui-red-8: #c23244;\n--wui-red-9: #ff2b51;\n--wui-red-10: #f00e45;\n--wui-red-11: #ff8e93;\n--wui-red-12: #ffcfce;\n--wui-red-alpha-1: #fe00000f;\n--wui-red-alpha-2: #f8170017;\n--wui-red-alpha-3: #fc000036;\n--wui-red-alpha-4: #ff00004d;\n--wui-red-alpha-5: #ff00045e;\n--wui-red-alpha-6: #fd192173;\n--wui-red-alpha-7: #ff333d8f;\n--wui-red-alpha-8: #ff3b4ebf;\n--wui-red-alpha-9: #ff2b51;\n--wui-red-alpha-10: #ff0e46f0;\n--wui-red-alpha-11: #ff8e93;\n--wui-red-alpha-12: #ffcfce;\n--wui-yellow-1: #171811;\n--wui-yellow-2: #1c1c13;\n--wui-yellow-3: #292a16;\n--wui-yellow-4: #353615;\n--wui-yellow-5: #414218;\n--wui-yellow-6: #4e4f1c;\n--wui-yellow-7: #5c5e20;\n--wui-yellow-8: #6d6f22;\n--wui-yellow-9: #bcbf19;\n--wui-yellow-10: #b1b400;\n--wui-yellow-11: #cbcf4b;\n--wui-yellow-12: #eaeeae;\n--wui-yellow-alpha-1: #f0560008;\n--wui-yellow-alpha-2: #fc8c000d;\n--wui-yellow-alpha-3: #fdd3001c;\n--wui-yellow-alpha-4: #fce20029;\n--wui-yellow-alpha-5: #fcea0036;\n--wui-yellow-alpha-6: #fcef0042;\n--wui-yellow-alpha-7: #fdf60e52;\n--wui-yellow-alpha-8: #fdf91863;\n--wui-yellow-alpha-9: #feff13ba;\n--wui-yellow-alpha-10: #feff00ad;\n--wui-yellow-alpha-11: #fbff54cc;\n--wui-yellow-alpha-12: #fbfeb8ed;\n--wui-orange-1: #1c1514;\n--wui-orange-2: #211816;\n--wui-orange-3: #391a12;\n--wui-orange-4: #4e190b;\n--wui-orange-5: #5c2010;\n--wui-orange-6: #6c2d1c;\n--wui-orange-7: #833d2a;\n--wui-orange-8: #a95038;\n--wui-orange-9: #d1451a;\n--wui-orange-10: #c23600;\n--wui-orange-11: #ff9271;\n--wui-orange-12: #f9d4ca;\n--wui-orange-alpha-1: #fc03000d;\n--wui-orange-alpha-2: #f5310012;\n--wui-orange-alpha-3: #fe2e002b;\n--wui-orange-alpha-4: #fc220042;\n--wui-orange-alpha-5: #fd360052;\n--wui-orange-alpha-6: #fd520863;\n--wui-orange-alpha-7: #ff672c7a;\n--wui-orange-alpha-8: #fe7040a3;\n--wui-orange-alpha-9: #ff5117cf;\n--wui-orange-alpha-10: #ff4100bf;\n--wui-orange-alpha-11: #ff9271;\n--wui-orange-alpha-12: #ffd8cefa;\n--wui-error-1: #1d1514;\n--wui-error-2: #231615;\n--wui-error-3: #3d1414;\n--wui-error-4: #521013;\n--wui-error-5: #62171a;\n--wui-error-6: #732426;\n--wui-error-7: #8c3434;\n--wui-error-8: #b54546;\n--wui-error-9: #e5484d;\n--wui-error-10: #d63941;\n--wui-error-11: #ff8f8b;\n--wui-error-12: #ffd2ce;\n--wui-error-alpha-1: #fd04000d;\n--wui-error-alpha-2: #f7170014;\n--wui-error-alpha-3: #fb0c0030;\n--wui-error-alpha-4: #fd010047;\n--wui-error-alpha-5: #fe190059;\n--wui-error-alpha-6: #ff38226b;\n--wui-error-alpha-7: #fe4f3e85;\n--wui-error-alpha-8: #fe5a52b0;\n--wui-error-alpha-9: #fe4e52e3;\n--wui-error-alpha-10: #fe4046d4;\n--wui-error-alpha-11: #ff8f8b;\n--wui-error-alpha-12: #ffd2ce;\n--wui-success-1: #121915;\n--wui-success-2: #151e18;\n--wui-success-3: #172e21;\n--wui-success-4: #153c27;\n--wui-success-5: #1b4931;\n--wui-success-6: #23573c;\n--wui-success-7: #2b6848;\n--wui-success-8: #327c55;\n--wui-success-9: #30a46c;\n--wui-success-10: #1d9760;\n--wui-success-11: #63d196;\n--wui-success-12: #b2f1cb;\n--wui-success-alpha-1: #90d60005;\n--wui-success-alpha-2: #9ef9000a;\n--wui-success-alpha-3: #53f9001c;\n--wui-success-alpha-4: #2ffd1d29;\n--wui-success-alpha-5: #43ff4e38;\n--wui-success-alpha-6: #54fd6d47;\n--wui-success-alpha-7: #5dff8059;\n--wui-success-alpha-8: #5eff8e70;\n--wui-success-alpha-9: #45fe979c;\n--wui-success-alpha-10: #28fe8c8f;\n--wui-success-alpha-11: #78ffb1cc;\n--wui-success-alpha-12: #bcffd6f0;\n--wui-warning-1: #181711;\n--wui-warning-2: #1e1d14;\n--wui-warning-3: #2b270c;\n--wui-warning-4: #352f00;\n--wui-warning-5: #403800;\n--wui-warning-6: #4d450e;\n--wui-warning-7: #5f5720;\n--wui-warning-8: #796f2b;\n--wui-warning-9: #ffe629;\n--wui-warning-10: #f1dd4e;\n--wui-warning-11: #f2dd4f;\n--wui-warning-12: #f4edb8;\n--wui-warning-alpha-1: #f333000a;\n--wui-warning-alpha-2: #fe8d000f;\n--wui-warning-alpha-3: #feac001c;\n--wui-warning-alpha-4: #fcb50029;\n--wui-warning-alpha-5: #fcbc0033;\n--wui-warning-alpha-6: #fccc0042;\n--wui-warning-alpha-7: #fdd90e54;\n--wui-warning-alpha-8: #fddf2e70;\n--wui-warning-alpha-9: #ffe629;\n--wui-warning-alpha-10: #fee950f2;\n--wui-warning-alpha-11: #fee851f2;\n--wui-warning-alpha-12: #fef7bef5;\n--wui-gray-1: #0d162d;\n--wui-gray-2: #131c35;\n--wui-gray-3: #172448;\n--wui-gray-4: #1c2a50;\n--wui-gray-5: #223057;\n--wui-gray-6: #293860;\n--wui-gray-7: #36466f;\n--wui-gray-8: #4e5f8a;\n--wui-gray-9: #5b6d98;\n--wui-gray-10: #687aa7;\n--wui-gray-11: #9fb3e3;\n--wui-gray-12: #e4eeff;\n--wui-gray-alpha-1: #0017f605;\n--wui-gray-alpha-2: #437cf60f;\n--wui-gray-alpha-3: #4177ff26;\n--wui-gray-alpha-4: #5283fd2e;\n--wui-gray-alpha-5: #638fff38;\n--wui-gray-alpha-6: #719afe42;\n--wui-gray-alpha-7: #84a8fe54;\n--wui-gray-alpha-8: #98b7ff73;\n--wui-gray-alpha-9: #a0bcfe85;\n--wui-gray-alpha-10: #a4bffe96;\n--wui-gray-alpha-11: #b4caffde;\n--wui-gray-alpha-12: #e4eeff;\n--wui-vendor-hubspot-1: #1d1513;\n--wui-vendor-hubspot-2: #231815;\n--wui-vendor-hubspot-3: #3b1a12;\n--wui-vendor-hubspot-4: #511609;\n--wui-vendor-hubspot-5: #601d0d;\n--wui-vendor-hubspot-6: #702a1a;\n--wui-vendor-hubspot-7: #883a27;\n--wui-vendor-hubspot-8: #af4a33;\n--wui-vendor-hubspot-9: #ff5c36;\n--wui-vendor-hubspot-10: #f14f28;\n--wui-vendor-hubspot-11: #ff9578;\n--wui-vendor-hubspot-12: #ffd5ca;\n--wui-vendor-hubspot-surface: #361a0280;\n--wui-vendor-hubspot-contrast: #ffffff;\n--wui-vendor-marketo-1: #141621;\n--wui-vendor-marketo-2: #161827;\n--wui-vendor-marketo-3: #1f234a;\n--wui-vendor-marketo-4: #262a66;\n--wui-vendor-marketo-5: #2f3476;\n--wui-vendor-marketo-6: #383f83;\n--wui-vendor-marketo-7: #444c97;\n--wui-vendor-marketo-8: #515ab4;\n--wui-vendor-marketo-9: #4c50cc;\n--wui-vendor-marketo-10: #4040bb;\n--wui-vendor-marketo-11: #9faeff;\n--wui-vendor-marketo-12: #dae1ff;\n--wui-vendor-marketo-surface: #1c1a2680;\n--wui-vendor-marketo-contrast: #ffffff;\n--wui-vendor-pardot-1: #0e191f;\n--wui-vendor-pardot-2: #111d24;\n--wui-vendor-pardot-3: #092c3d;\n--wui-vendor-pardot-4: #003752;\n--wui-vendor-pardot-5: #004463;\n--wui-vendor-pardot-6: #055274;\n--wui-vendor-pardot-7: #15648a;\n--wui-vendor-pardot-8: #197ba9;\n--wui-vendor-pardot-9: #00a1e0;\n--wui-vendor-pardot-10: #0095d3;\n--wui-vendor-pardot-11: #62c3f8;\n--wui-vendor-pardot-12: #bfe7ff;\n--wui-vendor-pardot-surface: #12242080;\n--wui-vendor-pardot-contrast: #ffffff;\n";
|
|
180
|
-
//#endregion
|
|
181
|
-
//#region src/css/designTokens/colorGlobal.tsx
|
|
182
|
-
const lightGlobalTokens = css`
|
|
183
|
-
${colorGlobal_default}
|
|
184
|
-
`;
|
|
185
|
-
const darkGlobalTokens = css`
|
|
186
|
-
${colorGlobalDark_default}
|
|
187
|
-
`;
|
|
188
|
-
//#endregion
|
|
189
|
-
//#region src/css/designTokens/schemes/standard.css
|
|
190
|
-
var standard_default = "--wui-color-base-1: var(--wui-gray-1);\n--wui-color-base-2: var(--wui-gray-2);\n--wui-color-base-3: var(--wui-gray-3);\n--wui-color-base-4: var(--wui-gray-4);\n--wui-color-base-5: var(--wui-gray-5);\n--wui-color-base-6: var(--wui-gray-6);\n--wui-color-base-7: var(--wui-gray-7);\n--wui-color-base-8: var(--wui-gray-8);\n--wui-color-base-9: var(--wui-gray-9);\n--wui-color-base-10: var(--wui-gray-10);\n--wui-color-base-11: var(--wui-gray-11);\n--wui-color-base-12: var(--wui-gray-12);\n--wui-color-base-contrast: var(--wui-gray-contrast);\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-surface-token: var(--wui-gray-1);\n--wui-color-text-button-token: var(--wui-gray-12);\n--wui-color-text-link-token: var(--wui-color-accent-9);\n";
|
|
191
|
-
//#endregion
|
|
192
|
-
//#region src/css/designTokens/schemes/blue.css
|
|
193
|
-
var blue_default = "--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text-button-token: var(--wui-blue-12);\n--wui-color-text-link-token: var(--wui-blue-9);\n";
|
|
194
|
-
//#endregion
|
|
195
|
-
//#region src/css/designTokens/schemes/green.css
|
|
196
|
-
var green_default = "--wui-color-base-1: var(--wui-green-1);\n--wui-color-base-2: var(--wui-green-2);\n--wui-color-base-3: var(--wui-green-3);\n--wui-color-base-4: var(--wui-green-4);\n--wui-color-base-5: var(--wui-green-5);\n--wui-color-base-6: var(--wui-green-6);\n--wui-color-base-7: var(--wui-green-7);\n--wui-color-base-8: var(--wui-green-8);\n--wui-color-base-9: var(--wui-green-9);\n--wui-color-base-10: var(--wui-green-10);\n--wui-color-base-11: var(--wui-green-11);\n--wui-color-base-12: var(--wui-green-12);\n--wui-color-base-contrast: var(--wui-green-contrast);\n--wui-color-accent-1: var(--wui-green-1);\n--wui-color-accent-2: var(--wui-green-2);\n--wui-color-accent-3: var(--wui-green-3);\n--wui-color-accent-4: var(--wui-green-4);\n--wui-color-accent-5: var(--wui-green-5);\n--wui-color-accent-6: var(--wui-green-6);\n--wui-color-accent-7: var(--wui-green-7);\n--wui-color-accent-8: var(--wui-green-8);\n--wui-color-accent-9: var(--wui-green-9);\n--wui-color-accent-10: var(--wui-green-10);\n--wui-color-accent-11: var(--wui-green-11);\n--wui-color-accent-12: var(--wui-green-12);\n--wui-color-accent-contrast: var(--wui-green-contrast);\n--wui-color-surface-token: var(--wui-green-2);\n--wui-color-text-button-token: var(--wui-green-11);\n--wui-color-text-link-token: var(--wui-green-9);\n";
|
|
197
|
-
//#endregion
|
|
198
|
-
//#region src/css/designTokens/schemes/orange.css
|
|
199
|
-
var orange_default = "--wui-color-base-1: var(--wui-orange-1);\n--wui-color-base-2: var(--wui-orange-2);\n--wui-color-base-3: var(--wui-orange-3);\n--wui-color-base-4: var(--wui-orange-4);\n--wui-color-base-5: var(--wui-orange-5);\n--wui-color-base-6: var(--wui-orange-6);\n--wui-color-base-7: var(--wui-orange-7);\n--wui-color-base-8: var(--wui-orange-8);\n--wui-color-base-9: var(--wui-orange-9);\n--wui-color-base-10: var(--wui-orange-10);\n--wui-color-base-11: var(--wui-orange-11);\n--wui-color-base-12: var(--wui-orange-12);\n--wui-color-base-contrast: var(--wui-orange-contrast);\n--wui-color-accent-1: var(--wui-orange-1);\n--wui-color-accent-2: var(--wui-orange-2);\n--wui-color-accent-3: var(--wui-orange-3);\n--wui-color-accent-4: var(--wui-orange-4);\n--wui-color-accent-5: var(--wui-orange-5);\n--wui-color-accent-6: var(--wui-orange-6);\n--wui-color-accent-7: var(--wui-orange-7);\n--wui-color-accent-8: var(--wui-orange-8);\n--wui-color-accent-9: var(--wui-orange-9);\n--wui-color-accent-10: var(--wui-orange-10);\n--wui-color-accent-11: var(--wui-orange-11);\n--wui-color-accent-12: var(--wui-orange-12);\n--wui-color-accent-contrast: var(--wui-orange-contrast);\n--wui-color-surface-token: var(--wui-orange-2);\n--wui-color-text-button-token: var(--wui-orange-11);\n--wui-color-text-link-token: var(--wui-orange-9);\n";
|
|
200
|
-
//#endregion
|
|
201
|
-
//#region src/css/designTokens/schemes/pink.css
|
|
202
|
-
var pink_default = "--wui-color-base-1: var(--wui-pink-1);\n--wui-color-base-2: var(--wui-pink-2);\n--wui-color-base-3: var(--wui-pink-3);\n--wui-color-base-4: var(--wui-pink-4);\n--wui-color-base-5: var(--wui-pink-5);\n--wui-color-base-6: var(--wui-pink-6);\n--wui-color-base-7: var(--wui-pink-7);\n--wui-color-base-8: var(--wui-pink-8);\n--wui-color-base-9: var(--wui-pink-9);\n--wui-color-base-10: var(--wui-pink-10);\n--wui-color-base-11: var(--wui-pink-11);\n--wui-color-base-12: var(--wui-pink-12);\n--wui-color-base-contrast: var(--wui-pink-contrast);\n--wui-color-accent-1: var(--wui-pink-1);\n--wui-color-accent-2: var(--wui-pink-2);\n--wui-color-accent-3: var(--wui-pink-3);\n--wui-color-accent-4: var(--wui-pink-4);\n--wui-color-accent-5: var(--wui-pink-5);\n--wui-color-accent-6: var(--wui-pink-6);\n--wui-color-accent-7: var(--wui-pink-7);\n--wui-color-accent-8: var(--wui-pink-8);\n--wui-color-accent-9: var(--wui-pink-9);\n--wui-color-accent-10: var(--wui-pink-10);\n--wui-color-accent-11: var(--wui-pink-11);\n--wui-color-accent-12: var(--wui-pink-12);\n--wui-color-accent-contrast: var(--wui-pink-contrast);\n--wui-color-surface-token: var(--wui-pink-2);\n--wui-color-text-button-token: var(--wui-pink-11);\n--wui-color-text-link-token: var(--wui-pink-9);\n";
|
|
203
|
-
//#endregion
|
|
204
|
-
//#region src/css/designTokens/schemes/purple.css
|
|
205
|
-
var purple_default = "--wui-color-base-1: var(--wui-purple-1);\n--wui-color-base-2: var(--wui-purple-2);\n--wui-color-base-3: var(--wui-purple-3);\n--wui-color-base-4: var(--wui-purple-4);\n--wui-color-base-5: var(--wui-purple-5);\n--wui-color-base-6: var(--wui-purple-6);\n--wui-color-base-7: var(--wui-purple-7);\n--wui-color-base-8: var(--wui-purple-8);\n--wui-color-base-9: var(--wui-purple-9);\n--wui-color-base-10: var(--wui-purple-10);\n--wui-color-base-11: var(--wui-purple-11);\n--wui-color-base-12: var(--wui-purple-12);\n--wui-color-base-contrast: var(--wui-purple-contrast);\n--wui-color-accent-1: var(--wui-purple-1);\n--wui-color-accent-2: var(--wui-purple-2);\n--wui-color-accent-3: var(--wui-purple-3);\n--wui-color-accent-4: var(--wui-purple-4);\n--wui-color-accent-5: var(--wui-purple-5);\n--wui-color-accent-6: var(--wui-purple-6);\n--wui-color-accent-7: var(--wui-purple-7);\n--wui-color-accent-8: var(--wui-purple-8);\n--wui-color-accent-9: var(--wui-purple-9);\n--wui-color-accent-10: var(--wui-purple-10);\n--wui-color-accent-11: var(--wui-purple-11);\n--wui-color-accent-12: var(--wui-purple-12);\n--wui-color-accent-contrast: var(--wui-purple-contrast);\n--wui-color-surface-token: var(--wui-purple-2);\n--wui-color-text-button-token: var(--wui-purple-11);\n--wui-color-text-link-token: var(--wui-purple-9);\n";
|
|
206
|
-
//#endregion
|
|
207
|
-
//#region src/css/designTokens/schemes/red.css
|
|
208
|
-
var red_default = "--wui-color-base-1: var(--wui-red-1);\n--wui-color-base-2: var(--wui-red-2);\n--wui-color-base-3: var(--wui-red-3);\n--wui-color-base-4: var(--wui-red-4);\n--wui-color-base-5: var(--wui-red-5);\n--wui-color-base-6: var(--wui-red-6);\n--wui-color-base-7: var(--wui-red-7);\n--wui-color-base-8: var(--wui-red-8);\n--wui-color-base-9: var(--wui-red-9);\n--wui-color-base-10: var(--wui-red-10);\n--wui-color-base-11: var(--wui-red-11);\n--wui-color-base-12: var(--wui-red-12);\n--wui-color-base-contrast: var(--wui-red-contrast);\n--wui-color-accent-1: var(--wui-red-1);\n--wui-color-accent-2: var(--wui-red-2);\n--wui-color-accent-3: var(--wui-red-3);\n--wui-color-accent-4: var(--wui-red-4);\n--wui-color-accent-5: var(--wui-red-5);\n--wui-color-accent-6: var(--wui-red-6);\n--wui-color-accent-7: var(--wui-red-7);\n--wui-color-accent-8: var(--wui-red-8);\n--wui-color-accent-9: var(--wui-red-9);\n--wui-color-accent-10: var(--wui-red-10);\n--wui-color-accent-11: var(--wui-red-11);\n--wui-color-accent-12: var(--wui-red-12);\n--wui-color-accent-contrast: var(--wui-red-contrast);\n--wui-color-surface-token: var(--wui-red-2);\n--wui-color-text-button-token: var(--wui-red-11);\n--wui-color-text-link-token: var(--wui-red-9);\n";
|
|
209
|
-
//#endregion
|
|
210
|
-
//#region src/css/designTokens/schemes/yellow.css
|
|
211
|
-
var yellow_default = "--wui-color-base-1: var(--wui-yellow-1);\n--wui-color-base-2: var(--wui-yellow-2);\n--wui-color-base-3: var(--wui-yellow-3);\n--wui-color-base-4: var(--wui-yellow-4);\n--wui-color-base-5: var(--wui-yellow-5);\n--wui-color-base-6: var(--wui-yellow-6);\n--wui-color-base-7: var(--wui-yellow-7);\n--wui-color-base-8: var(--wui-yellow-8);\n--wui-color-base-9: var(--wui-yellow-9);\n--wui-color-base-10: var(--wui-yellow-10);\n--wui-color-base-11: var(--wui-yellow-11);\n--wui-color-base-12: var(--wui-yellow-12);\n--wui-color-base-contrast: var(--wui-yellow-contrast);\n--wui-color-accent-1: var(--wui-yellow-1);\n--wui-color-accent-2: var(--wui-yellow-2);\n--wui-color-accent-3: var(--wui-yellow-3);\n--wui-color-accent-4: var(--wui-yellow-4);\n--wui-color-accent-5: var(--wui-yellow-5);\n--wui-color-accent-6: var(--wui-yellow-6);\n--wui-color-accent-7: var(--wui-yellow-7);\n--wui-color-accent-8: var(--wui-yellow-8);\n--wui-color-accent-9: var(--wui-yellow-9);\n--wui-color-accent-10: var(--wui-yellow-10);\n--wui-color-accent-11: var(--wui-yellow-11);\n--wui-color-accent-12: var(--wui-yellow-12);\n--wui-color-accent-contrast: var(--wui-yellow-contrast);\n--wui-color-surface-token: var(--wui-yellow-2);\n--wui-color-text-button-token: var(--wui-yellow-11);\n--wui-color-text-link-token: var(--wui-yellow-9);\n";
|
|
212
|
-
//#endregion
|
|
213
|
-
//#region src/css/designTokens/schemes/error.css
|
|
214
|
-
var error_default = "--wui-color-base-1: var(--wui-error-1);\n--wui-color-base-2: var(--wui-error-2);\n--wui-color-base-3: var(--wui-error-3);\n--wui-color-base-4: var(--wui-error-4);\n--wui-color-base-5: var(--wui-error-5);\n--wui-color-base-6: var(--wui-error-6);\n--wui-color-base-7: var(--wui-error-7);\n--wui-color-base-8: var(--wui-error-8);\n--wui-color-base-9: var(--wui-error-9);\n--wui-color-base-10: var(--wui-error-10);\n--wui-color-base-11: var(--wui-error-11);\n--wui-color-base-12: var(--wui-error-12);\n--wui-color-base-contrast: var(--wui-error-contrast);\n--wui-color-accent-1: var(--wui-error-1);\n--wui-color-accent-2: var(--wui-error-2);\n--wui-color-accent-3: var(--wui-error-3);\n--wui-color-accent-4: var(--wui-error-4);\n--wui-color-accent-5: var(--wui-error-5);\n--wui-color-accent-6: var(--wui-error-6);\n--wui-color-accent-7: var(--wui-error-7);\n--wui-color-accent-8: var(--wui-error-8);\n--wui-color-accent-9: var(--wui-error-9);\n--wui-color-accent-10: var(--wui-error-10);\n--wui-color-accent-11: var(--wui-error-11);\n--wui-color-accent-12: var(--wui-error-12);\n--wui-color-accent-contrast: var(--wui-error-contrast);\n--wui-color-surface-token: var(--wui-error-2);\n--wui-color-text-button-token: var(--wui-error-11);\n--wui-color-text-link-token: var(--wui-error-9);\n";
|
|
215
|
-
//#endregion
|
|
216
|
-
//#region src/css/designTokens/schemes/info.css
|
|
217
|
-
var info_default = "--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-link-token: var(--wui-blue-9);\n";
|
|
218
|
-
//#endregion
|
|
219
|
-
//#region src/css/designTokens/schemes/success.css
|
|
220
|
-
var success_default = "--wui-color-base-1: var(--wui-success-1);\n--wui-color-base-2: var(--wui-success-2);\n--wui-color-base-3: var(--wui-success-3);\n--wui-color-base-4: var(--wui-success-4);\n--wui-color-base-5: var(--wui-success-5);\n--wui-color-base-6: var(--wui-success-6);\n--wui-color-base-7: var(--wui-success-7);\n--wui-color-base-8: var(--wui-success-8);\n--wui-color-base-9: var(--wui-success-9);\n--wui-color-base-10: var(--wui-success-10);\n--wui-color-base-11: var(--wui-success-11);\n--wui-color-base-12: var(--wui-success-12);\n--wui-color-base-contrast: var(--wui-success-contrast);\n--wui-color-accent-1: var(--wui-success-1);\n--wui-color-accent-2: var(--wui-success-2);\n--wui-color-accent-3: var(--wui-success-3);\n--wui-color-accent-4: var(--wui-success-4);\n--wui-color-accent-5: var(--wui-success-5);\n--wui-color-accent-6: var(--wui-success-6);\n--wui-color-accent-7: var(--wui-success-7);\n--wui-color-accent-8: var(--wui-success-8);\n--wui-color-accent-9: var(--wui-success-9);\n--wui-color-accent-10: var(--wui-success-10);\n--wui-color-accent-11: var(--wui-success-11);\n--wui-color-accent-12: var(--wui-success-12);\n--wui-color-accent-contrast: var(--wui-success-contrast);\n--wui-color-surface-token: var(--wui-success-2);\n--wui-color-text-button-token: var(--wui-success-11);\n--wui-color-text-link-token: var(--wui-success-9);\n";
|
|
221
|
-
//#endregion
|
|
222
|
-
//#region src/css/designTokens/schemes/warning.css
|
|
223
|
-
var warning_default = "--wui-color-base-1: var(--wui-warning-1);\n--wui-color-base-2: var(--wui-warning-2);\n--wui-color-base-3: var(--wui-warning-3);\n--wui-color-base-4: var(--wui-warning-4);\n--wui-color-base-5: var(--wui-warning-5);\n--wui-color-base-6: var(--wui-warning-6);\n--wui-color-base-7: var(--wui-warning-7);\n--wui-color-base-8: var(--wui-warning-8);\n--wui-color-base-9: var(--wui-warning-9);\n--wui-color-base-10: var(--wui-warning-10);\n--wui-color-base-11: var(--wui-warning-11);\n--wui-color-base-12: var(--wui-warning-12);\n--wui-color-base-contrast: var(--wui-warning-contrast);\n--wui-color-accent-1: var(--wui-warning-1);\n--wui-color-accent-2: var(--wui-warning-2);\n--wui-color-accent-3: var(--wui-warning-3);\n--wui-color-accent-4: var(--wui-warning-4);\n--wui-color-accent-5: var(--wui-warning-5);\n--wui-color-accent-6: var(--wui-warning-6);\n--wui-color-accent-7: var(--wui-warning-7);\n--wui-color-accent-8: var(--wui-warning-8);\n--wui-color-accent-9: var(--wui-warning-9);\n--wui-color-accent-10: var(--wui-warning-10);\n--wui-color-accent-11: var(--wui-warning-11);\n--wui-color-accent-12: var(--wui-warning-12);\n--wui-color-accent-contrast: var(--wui-warning-contrast);\n--wui-color-surface-token: var(--wui-warning-2);\n--wui-color-text-button-token: var(--wui-warning-11);\n--wui-color-text-link-token: var(--wui-warning-11);\n";
|
|
224
|
-
//#endregion
|
|
225
|
-
//#region src/css/designTokens/schemes/vendor-hubspot.css
|
|
226
|
-
var vendor_hubspot_default = "--wui-color-base-1: var(--wui-vendor-hubspot-1);\n--wui-color-base-2: var(--wui-vendor-hubspot-2);\n--wui-color-base-3: var(--wui-vendor-hubspot-3);\n--wui-color-base-4: var(--wui-vendor-hubspot-4);\n--wui-color-base-5: var(--wui-vendor-hubspot-5);\n--wui-color-base-6: var(--wui-vendor-hubspot-6);\n--wui-color-base-7: var(--wui-vendor-hubspot-7);\n--wui-color-base-8: var(--wui-vendor-hubspot-8);\n--wui-color-base-9: var(--wui-vendor-hubspot-9);\n--wui-color-base-10: var(--wui-vendor-hubspot-10);\n--wui-color-base-11: var(--wui-vendor-hubspot-11);\n--wui-color-base-12: var(--wui-vendor-hubspot-12);\n--wui-color-base-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-accent-1: var(--wui-vendor-hubspot-1);\n--wui-color-accent-2: var(--wui-vendor-hubspot-2);\n--wui-color-accent-3: var(--wui-vendor-hubspot-3);\n--wui-color-accent-4: var(--wui-vendor-hubspot-4);\n--wui-color-accent-5: var(--wui-vendor-hubspot-5);\n--wui-color-accent-6: var(--wui-vendor-hubspot-6);\n--wui-color-accent-7: var(--wui-vendor-hubspot-7);\n--wui-color-accent-8: var(--wui-vendor-hubspot-8);\n--wui-color-accent-9: var(--wui-vendor-hubspot-9);\n--wui-color-accent-10: var(--wui-vendor-hubspot-10);\n--wui-color-accent-11: var(--wui-vendor-hubspot-11);\n--wui-color-accent-12: var(--wui-vendor-hubspot-12);\n--wui-color-accent-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-surface-token: var(--wui-vendor-hubspot-2);\n--wui-color-text-button-token: var(--wui-vendor-hubspot-11);\n--wui-color-text-link-token: var(--wui-vendor-hubspot-9);\n";
|
|
227
|
-
//#endregion
|
|
228
|
-
//#region src/css/designTokens/schemes/vendor-marketo.css
|
|
229
|
-
var vendor_marketo_default = "--wui-color-base-1: var(--wui-vendor-marketo-1);\n--wui-color-base-2: var(--wui-vendor-marketo-2);\n--wui-color-base-3: var(--wui-vendor-marketo-3);\n--wui-color-base-4: var(--wui-vendor-marketo-4);\n--wui-color-base-5: var(--wui-vendor-marketo-5);\n--wui-color-base-6: var(--wui-vendor-marketo-6);\n--wui-color-base-7: var(--wui-vendor-marketo-7);\n--wui-color-base-8: var(--wui-vendor-marketo-8);\n--wui-color-base-9: var(--wui-vendor-marketo-9);\n--wui-color-base-10: var(--wui-vendor-marketo-10);\n--wui-color-base-11: var(--wui-vendor-marketo-11);\n--wui-color-base-12: var(--wui-vendor-marketo-12);\n--wui-color-base-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-accent-1: var(--wui-vendor-marketo-1);\n--wui-color-accent-2: var(--wui-vendor-marketo-2);\n--wui-color-accent-3: var(--wui-vendor-marketo-3);\n--wui-color-accent-4: var(--wui-vendor-marketo-4);\n--wui-color-accent-5: var(--wui-vendor-marketo-5);\n--wui-color-accent-6: var(--wui-vendor-marketo-6);\n--wui-color-accent-7: var(--wui-vendor-marketo-7);\n--wui-color-accent-8: var(--wui-vendor-marketo-8);\n--wui-color-accent-9: var(--wui-vendor-marketo-9);\n--wui-color-accent-10: var(--wui-vendor-marketo-10);\n--wui-color-accent-11: var(--wui-vendor-marketo-11);\n--wui-color-accent-12: var(--wui-vendor-marketo-12);\n--wui-color-accent-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-surface-token: var(--wui-vendor-marketo-2);\n--wui-color-text-button-token: var(--wui-vendor-marketo-11);\n--wui-color-text-link-token: var(--wui-vendor-marketo-9);\n";
|
|
230
|
-
//#endregion
|
|
231
|
-
//#region src/css/designTokens/schemes/vendor-pardot.css
|
|
232
|
-
var vendor_pardot_default = "--wui-color-base-1: var(--wui-vendor-pardot-1);\n--wui-color-base-2: var(--wui-vendor-pardot-2);\n--wui-color-base-3: var(--wui-vendor-pardot-3);\n--wui-color-base-4: var(--wui-vendor-pardot-4);\n--wui-color-base-5: var(--wui-vendor-pardot-5);\n--wui-color-base-6: var(--wui-vendor-pardot-6);\n--wui-color-base-7: var(--wui-vendor-pardot-7);\n--wui-color-base-8: var(--wui-vendor-pardot-8);\n--wui-color-base-9: var(--wui-vendor-pardot-9);\n--wui-color-base-10: var(--wui-vendor-pardot-10);\n--wui-color-base-11: var(--wui-vendor-pardot-11);\n--wui-color-base-12: var(--wui-vendor-pardot-12);\n--wui-color-base-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-accent-1: var(--wui-vendor-pardot-1);\n--wui-color-accent-2: var(--wui-vendor-pardot-2);\n--wui-color-accent-3: var(--wui-vendor-pardot-3);\n--wui-color-accent-4: var(--wui-vendor-pardot-4);\n--wui-color-accent-5: var(--wui-vendor-pardot-5);\n--wui-color-accent-6: var(--wui-vendor-pardot-6);\n--wui-color-accent-7: var(--wui-vendor-pardot-7);\n--wui-color-accent-8: var(--wui-vendor-pardot-8);\n--wui-color-accent-9: var(--wui-vendor-pardot-9);\n--wui-color-accent-10: var(--wui-vendor-pardot-10);\n--wui-color-accent-11: var(--wui-vendor-pardot-11);\n--wui-color-accent-12: var(--wui-vendor-pardot-12);\n--wui-color-accent-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-surface-token: var(--wui-vendor-pardot-2);\n--wui-color-text-button-token: var(--wui-vendor-pardot-11);\n--wui-color-text-link-token: var(--wui-vendor-pardot-9);\n";
|
|
233
|
-
//#endregion
|
|
234
|
-
//#region src/css/designTokens/schemes/nav.css
|
|
235
|
-
var nav_default = "--wui-color-bg-app: #1e3399;\n--wui-color-bg-fill: var(--wui-blue-1);\n--wui-color-bg-fill-hover: #e7e9f4;\n--wui-color-bg-fill-active: #dcdfef;\n--wui-color-bg-surface: transparent;\n--wui-color-bg-surface-hover: #15267b;\n--wui-color-bg-surface-active: #122271;\n--wui-color-bg-surface-secondary: #15267b;\n--wui-color-bg-surface-secondary-hover: #122271;\n--wui-color-bg-surface-secondary-active: #101e67;\n--wui-color-bg-surface-tertiary: #0d1a5c;\n--wui-color-border-secondary: #101e67;\n--wui-color-border-hover-secondary: #0e1c61;\n--wui-color-border-active-secondary: #0d1a5c;\n--wui-color-border: var(--wui-color-bg-fill);\n--wui-color-border-hover: var(--wui-color-bg-fill-hover);\n--wui-color-border-active: var(--wui-color-bg-fill-active);\n--wui-color-icon: var(--wui-blue-1);\n--wui-color-icon-on-fill: var(--wui-color-bg-app);\n--wui-color-text: var(--wui-blue-1);\n--wui-color-text-on-fill: var(--wui-color-bg-app);\n--wui-color-text-link: var(--wui-blue-4);\n--wui-color-text-secondary: var(--wui-blue-6);\n--wui-color-text-button: var(--wui-blue-1);\n--wui-color-focus-ring: var(--wui-blue-1);\n\n/* Nav - Disabled */\n--wui-color-bg-surface-disabled: transparent;\n--wui-color-icon-disabled: var(--wui-blue-8);\n--wui-color-text-disabled: var(--wui-blue-8);\n\n/* Nav - Selected */\n--wui-color-bg-surface-selected: var(--wui-color-bg-fill);\n--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);\n--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);\n--wui-color-icon-selected: var(--wui-color-bg-app);\n--wui-color-text-selected: var(--wui-color-bg-app);\n--wui-color-border-selected: transparent;\n--wui-color-border-hover-selected: transparent;\n--wui-color-border-active-selected: transparent;\n\n/* Nav - Overrides */\n--wui-color-segmented-color-text-override: var(--wui-blue-9);\n";
|
|
236
|
-
//#endregion
|
|
237
|
-
//#region src/css/designTokens/colorSchemes.tsx
|
|
238
|
-
const standardColorScheme = css`
|
|
239
|
-
${standard_default}
|
|
240
|
-
`;
|
|
241
|
-
const blueColorScheme = css`
|
|
242
|
-
${blue_default}
|
|
243
|
-
`;
|
|
244
|
-
const greenColorScheme = css`
|
|
245
|
-
${green_default}
|
|
246
|
-
`;
|
|
247
|
-
const orangeColorScheme = css`
|
|
248
|
-
${orange_default}
|
|
249
|
-
`;
|
|
250
|
-
const pinkColorScheme = css`
|
|
251
|
-
${pink_default}
|
|
252
|
-
`;
|
|
253
|
-
const purpleColorScheme = css`
|
|
254
|
-
${purple_default}
|
|
255
|
-
`;
|
|
256
|
-
const redColorScheme = css`
|
|
257
|
-
${red_default}
|
|
258
|
-
`;
|
|
259
|
-
const yellowColorScheme = css`
|
|
260
|
-
${yellow_default}
|
|
261
|
-
`;
|
|
262
|
-
const errorColorScheme = css`
|
|
263
|
-
${error_default}
|
|
264
|
-
`;
|
|
265
|
-
const infoColorScheme = css`
|
|
266
|
-
${info_default}
|
|
267
|
-
`;
|
|
268
|
-
const successColorScheme = css`
|
|
269
|
-
${success_default}
|
|
270
|
-
`;
|
|
271
|
-
const warningColorScheme = css`
|
|
272
|
-
${warning_default}
|
|
273
|
-
`;
|
|
274
|
-
const vendorHubspotColorScheme = css`
|
|
275
|
-
${vendor_hubspot_default}
|
|
276
|
-
`;
|
|
277
|
-
const vendorMarketoColorScheme = css`
|
|
278
|
-
${vendor_marketo_default}
|
|
279
|
-
`;
|
|
280
|
-
const vendorPardotColorScheme = css`
|
|
281
|
-
${vendor_pardot_default}
|
|
282
|
-
`;
|
|
283
|
-
const navColorScheme = css`
|
|
284
|
-
${nav_default}
|
|
285
|
-
`;
|
|
286
|
-
//#endregion
|
|
287
|
-
//#region src/css/designTokens/baseAlias.css
|
|
288
|
-
var baseAlias_default = "--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n";
|
|
289
|
-
//#endregion
|
|
290
|
-
//#region src/css/designTokens/colorAlias.css
|
|
291
|
-
var colorAlias_default = "/* --- Semantic --- */\n/* Error */\n--wui-color-bg-fill-active-error: var(--wui-error-11);\n--wui-color-bg-fill-error: var(--wui-error-9);\n--wui-color-bg-fill-hover-error: var(--wui-error-10);\n--wui-color-bg-surface-active-error: var(--wui-error-4);\n--wui-color-bg-surface-error: var(--wui-error-2);\n--wui-color-bg-surface-hover-error: var(--wui-error-3);\n--wui-color-bg-surface-secondary-active-error: var(--wui-error-5);\n--wui-color-bg-surface-secondary-error: var(--wui-error-3);\n--wui-color-bg-surface-secondary-hover-error: var(--wui-error-4);\n--wui-color-bg-surface-tertiary-error: var(--wui-error-5);\n--wui-color-border-error: var(--wui-error-6);\n--wui-color-border-hover-errror: var(--wui-error-8);\n--wui-color-border-active-error: var(--wui-error-9);\n--wui-color-border-secondary-error: var(--wui-error-8);\n--wui-color-border-secondary-hover-error: var(--wui-error-10);\n--wui-color-border-secondary-active-error: var(--wui-error-11);\n--wui-color-icon-error: var(--wui-error-11);\n--wui-color-icon-on-fill-error: var(--wui-error-contrast);\n--wui-color-text-error: var(--wui-error-11);\n--wui-color-text-button-error: var(--wui-error-11);\n--wui-color-text-link-error: var(--wui-error-11);\n--wui-color-text-on-fill-error: var(--wui-error-contrast);\n--wui-color-text-secondary-error: var(--wui-error-11);\n--wui-color-focus-ring-error: var(--wui-error-9);\n\n/* Info */\n--wui-color-bg-fill-active-info: var(--wui-blue-11);\n--wui-color-bg-fill-hover-info: var(--wui-blue-10);\n--wui-color-bg-fill-info: var(--wui-blue-9);\n--wui-color-bg-surface-active-info: var(--wui-blue-4);\n--wui-color-bg-surface-hover-info: var(--wui-blue-3);\n--wui-color-bg-surface-info: var(--wui-blue-2);\n--wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);\n--wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);\n--wui-color-bg-surface-secondary-info: var(--wui-blue-3);\n--wui-color-bg-surface-tertiary-info: var(--wui-blue-6);\n--wui-color-border-info: var(--wui-blue-6);\n--wui-color-border-hover-info: var(--wui-blue-8);\n--wui-color-border-active-info: var(--wui-blue-9);\n--wui-color-border-secondary-info: var(--wui-blue-8);\n--wui-color-border-secondary-hover-info: var(--wui-blue-10);\n--wui-color-border-secondary-active-info: var(--wui-blue-11);\n--wui-color-icon-info: var(--wui-blue-11);\n--wui-color-icon-on-fill-info: var(--wui-blue-contrast);\n--wui-color-text-info: var(--wui-blue-12);\n--wui-color-text-button-info: var(--wui-blue-11);\n--wui-color-text-link-info: var(--wui-blue-9);\n--wui-color-text-on-fill-info: var(--wui-blue-contrast);\n--wui-color-text-secondary-info: var(--wui-blue-11);\n--wui-color-focus-ring-info: var(--wui-blue-9);\n\n/* Success */\n--wui-color-bg-fill-active-success: var(--wui-success-11);\n--wui-color-bg-fill-hover-success: var(--wui-success-10);\n--wui-color-bg-fill-success: var(--wui-success-9);\n--wui-color-bg-surface-active-success: var(--wui-success-4);\n--wui-color-bg-surface-hover-success: var(--wui-success-3);\n--wui-color-bg-surface-secondary-active-success: var(--wui-success-5);\n--wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);\n--wui-color-bg-surface-secondary-success: var(--wui-success-3);\n--wui-color-bg-surface-success: var(--wui-success-2);\n--wui-color-bg-surface-tertiary-success: var(--wui-success-5);\n--wui-color-border-success: var(--wui-success-6);\n--wui-color-border-hover-success: var(--wui-success-8);\n--wui-color-border-active-success: var(--wui-success-9);\n--wui-color-border-secondary-success: var(--wui-success-8);\n--wui-color-border-secondary-hover-success: var(--wui-success-10);\n--wui-color-border-secondary-active-success: var(--wui-success-11);\n--wui-color-icon-on-fill-success: var(--wui-success-contrast);\n--wui-color-icon-success: var(--wui-success-11);\n--wui-color-text-link-success: var(--wui-success-9);\n--wui-color-text-on-fill-success: var(--wui-success-contrast);\n--wui-color-text-secondary-success: var(--wui-success-11);\n--wui-color-text-success: var(--wui-success-12);\n--wui-color-text-button-success: var(--wui-success-11);\n--wui-color-focus-ring-success: var(--wui-success-9);\n\n/* Warning */\n--wui-color-bg-fill-active-warning: var(--wui-warning-11);\n--wui-color-bg-fill-hover-warning: var(--wui-warning-10);\n--wui-color-bg-fill-warning: var(--wui-warning-9);\n--wui-color-bg-surface-active-warning: var(--wui-warning-4);\n--wui-color-bg-surface-hover-warning: var(--wui-warning-3);\n--wui-color-bg-surface-secondary-active-warning: var(--wui-warning-5);\n--wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);\n--wui-color-bg-surface-secondary-warning: var(--wui-warning-3);\n--wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);\n--wui-color-bg-surface-warning: var(--wui-warning-2);\n--wui-color-border-warning: var(--wui-warning-6);\n--wui-color-border-hover-warning: var(--wui-warning-8);\n--wui-color-border-active-warning: var(--wui-warning-9);\n--wui-color-border-secondary-warning: var(--wui-warning-8);\n--wui-color-border-secondary-hover-warning: var(--wui-warning-10);\n--wui-color-border-secondary-active-warning: var(--wui-warning-11);\n--wui-color-icon-on-fill-warning: var(--wui-warning-2);\n--wui-color-icon-warning: var(--wui-warning-11);\n--wui-color-text-link-warning: var(--wui-warning-11);\n--wui-color-text-on-fill-warning: var(--wui-warning-contrast);\n--wui-color-text-secondary-warning: var(--wui-warning-11);\n--wui-color-text-button-warning: var(--wui-warning-11);\n--wui-color-text-warning: var(--wui-warning-12);\n--wui-color-focus-ring-warning: var(--wui-warning-9);\n\n/* --- Accent --- */\n\n/* Blue */\n--wui-color-bg-fill-active-blue: var(--wui-blue-11);\n--wui-color-bg-fill-blue: var(--wui-blue-9);\n--wui-color-bg-fill-hover-blue: var(--wui-blue-10);\n--wui-color-bg-surface-active-blue: var(--wui-blue-4);\n--wui-color-bg-surface-blue: var(--wui-blue-2);\n--wui-color-bg-surface-hover-blue: var(--wui-blue-3);\n--wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);\n--wui-color-bg-surface-secondary-blue: var(--wui-blue-3);\n--wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-4);\n--wui-color-bg-surface-tertiary-blue: var(--wui-blue-5);\n--wui-color-border-blue: var(--wui-blue-6);\n--wui-color-border-hover-blue: var(--wui-blue-8);\n--wui-color-border-active-blue: var(--wui-blue-9);\n--wui-color-border-secondary-blue: var(--wui-blue-8);\n--wui-color-border-secondary-hover-blue: var(--wui-blue-10);\n--wui-color-border-secondary-active-blue: var(--wui-blue-11);\n--wui-color-icon-blue: var(--wui-blue-11);\n--wui-color-icon-on-fill-blue: var(--wui-blue-contrast);\n--wui-color-text-blue: var(--wui-blue-12);\n--wui-color-text-button-blue: var(--wui-blue-11);\n--wui-color-text-link-blue: var(--wui-blue-9);\n--wui-color-text-on-fill-blue: var(--wui-blue-2);\n--wui-color-text-secondary-blue: var(--wui-blue-5);\n--wui-color-focus-ring-blue: var(--wui-blue-9);\n\n/* Green */\n--wui-color-bg-fill-active-green: var(--wui-green-11);\n--wui-color-bg-fill-green: var(--wui-green-9);\n--wui-color-bg-fill-hover-green: var(--wui-green-10);\n--wui-color-bg-surface-active-green: var(--wui-green-4);\n--wui-color-bg-surface-green: var(--wui-green-2);\n--wui-color-bg-surface-hover-green: var(--wui-green-3);\n--wui-color-bg-surface-secondary-active-green: var(--wui-green-5);\n--wui-color-bg-surface-secondary-green: var(--wui-green-3);\n--wui-color-bg-surface-secondary-hover-green: var(--wui-green-4);\n--wui-color-bg-surface-tertiary-green: var(--wui-green-5);\n--wui-color-border-green: var(--wui-green-6);\n--wui-color-border-hover-green: var(--wui-green-8);\n--wui-color-border-active-green: var(--wui-green-9);\n--wui-color-border-secondary-green: var(--wui-green-8);\n--wui-color-border-secondary-hover-green: var(--wui-green-10);\n--wui-color-border-secondary-active-green: var(--wui-green-11);\n--wui-color-icon-green: var(--wui-green-11);\n--wui-color-icon-on-fill-green: var(--wui-green-contrast);\n--wui-color-text-green: var(--wui-green-12);\n--wui-color-text-button-green: var(--wui-green-11);\n--wui-color-text-link-green: var(--wui-green-11);\n--wui-color-text-on-fill-green: var(--wui-green-contrast);\n--wui-color-text-secondary-green: var(--wui-green-10);\n--wui-color-focus-ring-green: var(--wui-green-9);\n\n/* Orange */\n--wui-color-bg-fill-active-orange: var(--wui-orange-11);\n--wui-color-bg-fill-hover-orange: var(--wui-orange-10);\n--wui-color-bg-fill-orange: var(--wui-orange-9);\n--wui-color-bg-surface-active-orange: var(--wui-orange-4);\n--wui-color-bg-surface-hover-orange: var(--wui-orange-3);\n--wui-color-bg-surface-orange: var(--wui-orange-2);\n--wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);\n--wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);\n--wui-color-bg-surface-secondary-orange: var(--wui-orange-3);\n--wui-color-bg-surface-tertiary-orange: var(--wui-orange-5);\n--wui-color-border-orange: var(--wui-orange-6);\n--wui-color-border-hover-orange: var(--wui-orange-8);\n--wui-color-border-active-orange: var(--wui-orange-9);\n--wui-color-border-secondary-orange: var(--wui-orange-8);\n--wui-color-border-secondary-hover-orange: var(--wui-orange-10);\n--wui-color-border-secondary-active-orange: var(--wui-orange-11);\n--wui-color-icon-on-fill-orange: var(--wui-orange-contrast);\n--wui-color-icon-orange: var(--wui-orange-11);\n--wui-color-text-link-orange: var(--wui-orange-11);\n--wui-color-text-on-fill-orange: var(--wui-orange-contrast);\n--wui-color-text-orange: var(--wui-orange-12);\n--wui-color-text-button-orange: var(--wui-orange-11);\n--wui-color-text-secondary-orange: var(--wui-orange-10);\n--wui-color-focus-ring-orange: var(--wui-orange-9);\n\n/* Pink */\n--wui-color-bg-fill-active-pink: var(--wui-pink-11);\n--wui-color-bg-fill-hover-pink: var(--wui-pink-10);\n--wui-color-bg-fill-pink: var(--wui-pink-9);\n--wui-color-bg-surface-active-pink: var(--wui-pink-4);\n--wui-color-bg-surface-hover-pink: var(--wui-pink-3);\n--wui-color-bg-surface-pink: var(--wui-pink-2);\n--wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);\n--wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);\n--wui-color-bg-surface-secondary-pink: var(--wui-pink-3);\n--wui-color-bg-surface-tertiary-pink: var(--wui-pink-5);\n--wui-color-border-pink: var(--wui-pink-6);\n--wui-color-border-hover-pink: var(--wui-pink-8);\n--wui-color-border-active-pink: var(--wui-pink-9);\n--wui-color-border-secondary-pink: var(--wui-pink-8);\n--wui-color-border-secondary-hover-pink: var(--wui-pink-10);\n--wui-color-border-secondary-active-pink: var(--wui-pink-11);\n--wui-color-icon-on-fill-pink: var(--wui-pink-contrast);\n--wui-color-icon-pink: var(--wui-pink-11);\n--wui-color-text-link-pink: var(--wui-pink-11);\n--wui-color-text-on-fill-pink: var(--wui-pink-contrast);\n--wui-color-text-pink: var(--wui-pink-12);\n--wui-color-text-button-pink: var(--wui-pink-11);\n--wui-color-text-secondary-pink: var(--wui-pink-10);\n--wui-color-focus-ring-pink: var(--wui-pink-9);\n\n/* Purple */\n--wui-color-bg-fill-active-purple: var(--wui-purple-11);\n--wui-color-bg-fill-hover-purple: var(--wui-purple-10);\n--wui-color-bg-fill-purple: var(--wui-purple-9);\n--wui-color-bg-surface-active-purple: var(--wui-purple-4);\n--wui-color-bg-surface-hover-purple: var(--wui-purple-3);\n--wui-color-bg-surface-purple: var(--wui-purple-2);\n--wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);\n--wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);\n--wui-color-bg-surface-secondary-purple: var(--wui-purple-3);\n--wui-color-bg-surface-tertiary-purple: var(--wui-purple-5);\n--wui-color-border-purple: var(--wui-purple-6);\n--wui-color-border-hover-purple: var(--wui-purple-8);\n--wui-color-border-active-purple: var(--wui-purple-9);\n--wui-color-border-secondary-purple: var(--wui-purple-8);\n--wui-color-border-secondary-hover-purple: var(--wui-purple-10);\n--wui-color-border-secondary-active-purple: var(--wui-purple-11);\n--wui-color-icon-on-fill-purple: var(--wui-purple-contrast);\n--wui-color-icon-purple: var(--wui-purple-11);\n--wui-color-text-link-purple: var(--wui-purple-11);\n--wui-color-text-on-fill-purple: var(--wui-purple-contrast);\n--wui-color-text-button-purple: var(--wui-purple-11);\n--wui-color-text-purple: var(--wui-purple-12);\n--wui-color-text-secondary-purple: var(--wui-purple-11);\n--wui-color-focus-ring-purple: var(--wui-purple-9);\n\n/* Yellow */\n--wui-color-bg-fill-active-yellow: var(--wui-yellow-11);\n--wui-color-bg-fill-hover-yellow: var(--wui-yellow-10);\n--wui-color-bg-fill-yellow: var(--wui-yellow-9);\n--wui-color-bg-surface-active-yellow: var(--wui-yellow-4);\n--wui-color-bg-surface-hover-yellow: var(--wui-yellow-3);\n--wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-5);\n--wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);\n--wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);\n--wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);\n--wui-color-bg-surface-yellow: var(--wui-yellow-2);\n--wui-color-border-yellow: var(--wui-yellow-6);\n--wui-color-border-hover-yellow: var(--wui-yellow-8);\n--wui-color-border-active-yellow: var(--wui-yellow-9);\n--wui-color-border-secondary-yellow: var(--wui-yellow-8);\n--wui-color-border-secondary-hover-yellow: var(--wui-yellow-10);\n--wui-color-border-secondary-active-yellow: var(--wui-yellow-11);\n--wui-color-icon-on-fill-yellow: var(--wui-yellow-contrast);\n--wui-color-icon-yellow: var(--wui-yellow-11);\n--wui-color-text-link-yellow: var(--wui-yellow-11);\n--wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);\n--wui-color-text-secondary-yellow: var(--wui-yellow-10);\n--wui-color-text-yellow: var(--wui-yellow-11);\n--wui-color-text-button-yellow: var(--wui-yellow-12);\n--wui-color-focus-ring-yellow: var(--wui-yellow-9);\n\n/* --- Misc --- */\n--wui-color-bg-fill-white: #ffffff;\n--wui-color-focus-color: var(--wui-blue-9);\n--wui-color-invalid-indicator: var(--wui-error-9);\n--wui-color-notification-pill-color: var(--wui-pink-9);\n--wui-color-backdrop: var(--wui-gray-alpha-9);\n--wui-color-segmented-control-checked-background: var(--wui-bg-app);\n--wui-color-text-on-fill-white-selected: var(--wui-blue-9);\n--wui-color-bg-tooltip: #242528;\n--wui-color-drop-shadow: rgb(31 51 153 / 10%);\n\n/* --- State --- */\n\n/* Disabled */\n--wui-color-bg-surface-disabled: var(--wui-gray-3);\n--wui-color-border-disabled: var(--wui-gray-4);\n--wui-color-icon-disabled: var(--wui-gray-8);\n--wui-color-text-disabled: var(--wui-gray-10);\n--wui-color-focus-ring-disabled: var(--wui-gray-6);\n\n/* Selected */\n--wui-color-bg-surface-selected: var(--wui-blue-3);\n--wui-color-bg-surface-selected-active: var(--wui-blue-5);\n--wui-color-bg-surface-selected-hover: var(--wui-blue-4);\n--wui-color-icon-selected: var(--wui-blue-9);\n--wui-color-text-selected: var(--wui-blue-9);\n--wui-color-border-selected: var(--wui-blue-6);\n--wui-color-border-hover-selected: var(--wui-blue-8);\n--wui-color-border-active-selected: var(--wui-blue-9);\n";
|
|
292
|
-
//#endregion
|
|
293
|
-
//#region src/css/designTokens/colorAlias.tsx
|
|
294
|
-
const baseAliasTokens = css`
|
|
295
|
-
${baseAlias_default}
|
|
296
|
-
`;
|
|
297
|
-
const colorAliasTokens = css`
|
|
298
|
-
--wui-color-bg-app: var(--wui-app-background);
|
|
299
|
-
${standardColorScheme}
|
|
300
|
-
${baseAliasTokens}
|
|
301
|
-
${colorAlias_default}
|
|
302
|
-
`;
|
|
303
|
-
//#endregion
|
|
304
|
-
//#region src/css/designTokens/borderRadius.tsx
|
|
305
|
-
const borderRadiusTokens = css`
|
|
306
|
-
${"--wui-border-radius-00: 0;\n--wui-border-radius-01: 4px;\n--wui-border-radius-02: 8px;\n--wui-border-radius-03: 16px;\n--wui-border-radius-04: 20px;\n--wui-border-radius-05: 24px;\n--wui-border-radius-rounded: 1000px;\n"}
|
|
307
|
-
`;
|
|
308
|
-
//#endregion
|
|
309
|
-
//#region src/css/designTokens/spacing.tsx
|
|
310
|
-
const spacingTokens = css`
|
|
311
|
-
${"--wui-space-00: 0px;\n--wui-space-01: 4px;\n--wui-space-02: 8px;\n--wui-space-03: 12px;\n--wui-space-04: 16px;\n--wui-space-05: 24px;\n--wui-space-06: 32px;\n--wui-space-07: 40px;\n--wui-space-08: 48px;\n--wui-space-09: 64px;\n"}
|
|
312
|
-
`;
|
|
313
|
-
//#endregion
|
|
314
|
-
//#region src/css/designTokens/typography.tsx
|
|
315
|
-
const typographyTokens = css`
|
|
316
|
-
${"--wui-typography-family-default: intervariable, sans-serif;\n--wui-typography-family-brand: 'GT Walsheim', sans-serif;\n--wui-typography-family-mono: 'IBM Plex Mono', monospace;\n\n/* Brand Weights */\n--wui-typography-weight-brand-bold: 600;\n--wui-typography-weight-brand-black: 700;\n\n/* Heading Hero */\n--wui-typography-heading-hero-family: var(--wui-typography-family-brand);\n--wui-typography-heading-hero-line-height: 58px;\n--wui-typography-heading-hero-size: 48px;\n--wui-typography-heading-hero-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n\n/* Heading 1 */\n--wui-typography-heading-1-family: var(--wui-typography-family-brand);\n--wui-typography-heading-1-line-height: 44px;\n--wui-typography-heading-1-size: 36px;\n--wui-typography-heading-1-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n\n/* Heading 2 */\n--wui-typography-heading-2-family: var(--wui-typography-family-brand);\n--wui-typography-heading-2-line-height: 38px;\n--wui-typography-heading-2-size: 32px;\n--wui-typography-heading-2-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n\n/* Heading 3 */\n--wui-typography-heading-3-family: var(--wui-typography-family-brand);\n--wui-typography-heading-3-line-height: 30px;\n--wui-typography-heading-3-size: 24px;\n--wui-typography-heading-3-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n\n/* Heading 4 */\n--wui-typography-heading-4-family: var(--wui-typography-family-brand);\n--wui-typography-heading-4-line-height: 24px;\n--wui-typography-heading-4-size: 18px;\n--wui-typography-heading-4-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n\n/* Heading 5 */\n--wui-typography-heading-5-family: var(--wui-typography-family-brand);\n--wui-typography-heading-5-line-height: 22px;\n--wui-typography-heading-5-size: 16px;\n--wui-typography-heading-5-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n\n/* Heading 6 */\n--wui-typography-heading-6-family: var(--wui-typography-family-brand);\n--wui-typography-heading-6-line-height: 18px;\n--wui-typography-heading-6-size: 14px;\n--wui-typography-heading-6-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n\n/* Body Weight */\n--wui-typography-weight-body: 425;\n--wui-typography-weight-body-bold: 700;\n\n/* Body 1 */\n--wui-typography-body-1-family: var(--wui-typography-family-default);\n--wui-typography-body-1-line-height: 30px;\n--wui-typography-body-1-size: 20px;\n--wui-typography-body-1-weight: var(--wui-typography-weight-body);\n--wui-typography-body-1-paragraph-spacing: 16px;\n\n/* Body 2 */\n--wui-typography-body-2-family: var(--wui-typography-family-default);\n--wui-typography-body-2-line-height: 26px;\n--wui-typography-body-2-size: 16px;\n--wui-typography-body-2-weight: var(--wui-typography-weight-body);\n--wui-typography-body-2-paragraph-spacing: 12px;\n\n/* Body 3 */\n--wui-typography-body-3-family: var(--wui-typography-family-default);\n--wui-typography-body-3-line-height: 22px;\n--wui-typography-body-3-size: 14px;\n--wui-typography-body-3-weight: var(--wui-typography-weight-body);\n--wui-typography-body-3-paragraph-spacing: 8px;\n\n/* Body 4 */\n--wui-typography-body-4-family: var(--wui-typography-family-default);\n--wui-typography-body-4-line-height: 18px;\n--wui-typography-body-4-size: 12px;\n--wui-typography-body-4-weight: var(--wui-typography-weight-body);\n--wui-typography-body-4-paragraph-spacing: 8px;\n\n/* Label Weight */\n--wui-typography-weight-label: 475;\n--wui-typography-weight-label-bold: 600;\n\n/* Label 1 */\n--wui-typography-label-1-family: var(--wui-typography-family-default);\n--wui-typography-label-1-line-height: 24px;\n--wui-typography-label-1-size: 18px;\n--wui-typography-label-1-weight: var(--wui-typography-weight-label);\n\n/* Label 2 */\n--wui-typography-label-2-family: var(--wui-typography-family-default);\n--wui-typography-label-2-line-height: 18px;\n--wui-typography-label-2-size: 16px;\n--wui-typography-label-2-weight: var(--wui-typography-weight-label);\n\n/* Label 3 */\n--wui-typography-label-3-family: var(--wui-typography-family-default);\n--wui-typography-label-3-line-height: 16px;\n--wui-typography-label-3-size: 14px;\n--wui-typography-label-3-weight: var(--wui-typography-weight-label);\n\n/* Label 4 */\n--wui-typography-label-4-family: var(--wui-typography-family-default);\n--wui-typography-label-4-line-height: 14px;\n--wui-typography-label-4-size: 12px;\n--wui-typography-label-4-weight: var(--wui-typography-weight-label);\n"}
|
|
317
|
-
`;
|
|
318
|
-
//#endregion
|
|
319
|
-
//#region src/css/designTokens/zIndex.tsx
|
|
320
|
-
const zIndexTokens = css`
|
|
321
|
-
${"--wui-zindex-under: -1;\n--wui-zindex-backdrop: 500;\n--wui-zindex-menu: 500;\n--wui-zindex-modal: 500;\n--wui-zindex-popover: 500;\n--wui-zindex-select: 500;\n--wui-zindex-tooltip: 500;\n"}
|
|
322
|
-
`;
|
|
323
|
-
//#endregion
|
|
324
|
-
//#region src/css/designTokens/elevation.tsx
|
|
325
|
-
const elevationTokens = css`
|
|
326
|
-
${"--wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);\n--wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);\n"}
|
|
327
|
-
`;
|
|
328
|
-
//#endregion
|
|
329
|
-
//#region src/css/designTokens/motion.tsx
|
|
330
|
-
const motionTokens = css`
|
|
331
|
-
${"/* Durations */\n--wui-motion-duration-01: 70ms;\n--wui-motion-duration-02: 110ms;\n--wui-motion-duration-03: 150ms;\n--wui-motion-duration-04: 240ms;\n--wui-motion-duration-05: 400ms;\n--wui-motion-duration-06: 700ms;\n\n@media (prefers-reduced-motion: reduce) {\n --wui-motion-duration-01: 0.01ms;\n --wui-motion-duration-02: 0.01ms;\n --wui-motion-duration-03: 0.01ms;\n --wui-motion-duration-04: 0.01ms;\n --wui-motion-duration-05: 0.01ms;\n --wui-motion-duration-06: 0.01ms;\n}\n\n/* Easings */\n\n/* Taken from: https://polaris.shopify.com/tokens/motion */\n--wui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n--wui-motion-ease-in: cubic-bezier(0.42, 0, 1, 1);\n--wui-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);\n--wui-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);\n--wui-motion-linear: cubic-bezier(0, 0, 1, 1);\n"}
|
|
332
|
-
`;
|
|
333
|
-
//#endregion
|
|
334
|
-
//#region src/css/GlobalStyle.tsx
|
|
335
|
-
const GlobalStyle = createGlobalStyle`
|
|
336
|
-
${globalStyleAdjustmentsCss}
|
|
175
|
+
`}
|
|
337
176
|
${css`
|
|
177
|
+
${"/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root,\n[data-wui-theme='true'] {\n--wui-space-00: 0px;\n --wui-space-01: 4px;\n --wui-space-02: 8px;\n --wui-space-03: 12px;\n --wui-space-04: 16px;\n --wui-space-05: 24px;\n --wui-space-06: 32px;\n --wui-space-07: 40px;\n --wui-space-08: 48px;\n --wui-space-09: 64px;\n --wui-border-radius-00: 0px;\n --wui-border-radius-01: 4px;\n --wui-border-radius-02: 8px;\n --wui-border-radius-03: 16px;\n --wui-border-radius-04: 20px;\n --wui-border-radius-05: 24px;\n --wui-border-radius-rounded: 1000px;\n --wui-zindex-under: -1;\n --wui-zindex-backdrop: 500;\n --wui-zindex-menu: 500;\n --wui-zindex-modal: 500;\n --wui-zindex-popover: 500;\n --wui-zindex-select: 500;\n --wui-zindex-tooltip: 500;\n --wui-motion-duration-01: 70ms;\n --wui-motion-duration-02: 110ms;\n --wui-motion-duration-03: 150ms;\n --wui-motion-duration-04: 240ms;\n --wui-motion-duration-05: 400ms;\n --wui-motion-duration-06: 700ms;\n --wui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n --wui-motion-ease-in: cubic-bezier(0.42, 0, 1, 1);\n --wui-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);\n --wui-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);\n --wui-motion-linear: cubic-bezier(0, 0, 1, 1);\n --wui-typography-family-default: intervariable, sans-serif;\n --wui-typography-family-brand: \"GT Walsheim\", sans-serif;\n --wui-typography-family-mono: \"IBM Plex Mono\", monospace;\n --wui-typography-weight-brand-bold: 600;\n --wui-typography-weight-brand-black: 700;\n --wui-typography-weight-body: 425;\n --wui-typography-weight-body-bold: 700;\n --wui-typography-weight-label: 475;\n --wui-typography-weight-label-bold: 600;\n --wui-typography-heading-hero-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-hero-line-height: 58px;\n --wui-typography-heading-hero-letter-spacing: 0;\n --wui-typography-heading-hero-font-size: 48px;\n --wui-typography-heading-hero-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-hero: var(--wui-typography-heading-hero-font-weight) var(--wui-typography-heading-hero-font-size)/var(--wui-typography-heading-hero-line-height) var(--wui-typography-heading-hero-font-family);\n --wui-typography-heading-1-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-1-line-height: 44px;\n --wui-typography-heading-1-letter-spacing: 0;\n --wui-typography-heading-1-font-size: 36px;\n --wui-typography-heading-1-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-1: var(--wui-typography-heading-1-font-weight) var(--wui-typography-heading-1-font-size)/var(--wui-typography-heading-1-line-height) var(--wui-typography-heading-1-font-family);\n --wui-typography-heading-2-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-2-line-height: 38px;\n --wui-typography-heading-2-letter-spacing: 0;\n --wui-typography-heading-2-font-size: 32px;\n --wui-typography-heading-2-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-2: var(--wui-typography-heading-2-font-weight) var(--wui-typography-heading-2-font-size)/var(--wui-typography-heading-2-line-height) var(--wui-typography-heading-2-font-family);\n --wui-typography-heading-3-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-3-line-height: 30px;\n --wui-typography-heading-3-letter-spacing: 0;\n --wui-typography-heading-3-font-size: 24px;\n --wui-typography-heading-3-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-3: var(--wui-typography-heading-3-font-weight) var(--wui-typography-heading-3-font-size)/var(--wui-typography-heading-3-line-height) var(--wui-typography-heading-3-font-family);\n --wui-typography-heading-4-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-4-line-height: 24px;\n --wui-typography-heading-4-letter-spacing: 0;\n --wui-typography-heading-4-font-size: 18px;\n --wui-typography-heading-4-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-4: var(--wui-typography-heading-4-font-weight) var(--wui-typography-heading-4-font-size)/var(--wui-typography-heading-4-line-height) var(--wui-typography-heading-4-font-family);\n --wui-typography-heading-5-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-5-line-height: 22px;\n --wui-typography-heading-5-letter-spacing: 0;\n --wui-typography-heading-5-font-size: 16px;\n --wui-typography-heading-5-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-5: var(--wui-typography-heading-5-font-weight) var(--wui-typography-heading-5-font-size)/var(--wui-typography-heading-5-line-height) var(--wui-typography-heading-5-font-family);\n --wui-typography-heading-6-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-6-line-height: 18px;\n --wui-typography-heading-6-letter-spacing: 0;\n --wui-typography-heading-6-font-size: 14px;\n --wui-typography-heading-6-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-6: var(--wui-typography-heading-6-font-weight) var(--wui-typography-heading-6-font-size)/var(--wui-typography-heading-6-line-height) var(--wui-typography-heading-6-font-family);\n --wui-typography-body-1-font-family: var(--wui-typography-family-default);\n --wui-typography-body-1-line-height: 30px;\n --wui-typography-body-1-letter-spacing: 0;\n --wui-typography-body-1-font-size: 20px;\n --wui-typography-body-1-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-1-paragraph-spacing: 16px;\n --wui-typography-body-1: var(--wui-typography-body-1-font-weight) var(--wui-typography-body-1-font-size)/var(--wui-typography-body-1-line-height) var(--wui-typography-body-1-font-family);\n --wui-typography-body-2-font-family: var(--wui-typography-family-default);\n --wui-typography-body-2-line-height: 26px;\n --wui-typography-body-2-letter-spacing: 0;\n --wui-typography-body-2-font-size: 16px;\n --wui-typography-body-2-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-2-paragraph-spacing: 12px;\n --wui-typography-body-2: var(--wui-typography-body-2-font-weight) var(--wui-typography-body-2-font-size)/var(--wui-typography-body-2-line-height) var(--wui-typography-body-2-font-family);\n --wui-typography-body-3-font-family: var(--wui-typography-family-default);\n --wui-typography-body-3-line-height: 22px;\n --wui-typography-body-3-letter-spacing: 0;\n --wui-typography-body-3-font-size: 14px;\n --wui-typography-body-3-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-3-paragraph-spacing: 8px;\n --wui-typography-body-3: var(--wui-typography-body-3-font-weight) var(--wui-typography-body-3-font-size)/var(--wui-typography-body-3-line-height) var(--wui-typography-body-3-font-family);\n --wui-typography-body-4-font-family: var(--wui-typography-family-default);\n --wui-typography-body-4-line-height: 18px;\n --wui-typography-body-4-letter-spacing: 0;\n --wui-typography-body-4-font-size: 12px;\n --wui-typography-body-4-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-4-paragraph-spacing: 8px;\n --wui-typography-body-4: var(--wui-typography-body-4-font-weight) var(--wui-typography-body-4-font-size)/var(--wui-typography-body-4-line-height) var(--wui-typography-body-4-font-family);\n --wui-typography-label-1-font-family: var(--wui-typography-family-default);\n --wui-typography-label-1-line-height: 24px;\n --wui-typography-label-1-letter-spacing: 0;\n --wui-typography-label-1-font-size: 18px;\n --wui-typography-label-1-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-1: var(--wui-typography-label-1-font-weight) var(--wui-typography-label-1-font-size)/var(--wui-typography-label-1-line-height) var(--wui-typography-label-1-font-family);\n --wui-typography-label-2-font-family: var(--wui-typography-family-default);\n --wui-typography-label-2-line-height: 18px;\n --wui-typography-label-2-letter-spacing: 0;\n --wui-typography-label-2-font-size: 16px;\n --wui-typography-label-2-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-2: var(--wui-typography-label-2-font-weight) var(--wui-typography-label-2-font-size)/var(--wui-typography-label-2-line-height) var(--wui-typography-label-2-font-family);\n --wui-typography-label-3-font-family: var(--wui-typography-family-default);\n --wui-typography-label-3-line-height: 16px;\n --wui-typography-label-3-letter-spacing: 0;\n --wui-typography-label-3-font-size: 14px;\n --wui-typography-label-3-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-3: var(--wui-typography-label-3-font-weight) var(--wui-typography-label-3-font-size)/var(--wui-typography-label-3-line-height) var(--wui-typography-label-3-font-family);\n --wui-typography-label-4-font-family: var(--wui-typography-family-default);\n --wui-typography-label-4-line-height: 14px;\n --wui-typography-label-4-letter-spacing: 0;\n --wui-typography-label-4-font-size: 12px;\n --wui-typography-label-4-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-4: var(--wui-typography-label-4-font-weight) var(--wui-typography-label-4-font-size)/var(--wui-typography-label-4-line-height) var(--wui-typography-label-4-font-family);\n --wui-app-background: #fff;\n --wui-blue-1: #fdfdfe;\n --wui-color-accent-1: var(--wui-blue-1);\n --wui-blue-2: #f6f9ff;\n --wui-color-bg-surface-info: var(--wui-blue-2);\n --wui-color-bg-surface-blue: var(--wui-blue-2);\n --wui-color-text-on-fill-blue: var(--wui-blue-2);\n --wui-color-accent-2: var(--wui-blue-2);\n --wui-blue-3: #ecf2ff;\n --wui-color-bg-surface-hover-info: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-info: var(--wui-blue-3);\n --wui-color-bg-surface-hover-blue: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-blue: var(--wui-blue-3);\n --wui-color-bg-surface-selected: var(--wui-blue-3);\n --wui-color-accent-3: var(--wui-blue-3);\n --wui-blue-4: #ddeaff;\n --wui-color-bg-surface-active-info: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);\n --wui-color-bg-surface-active-blue: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-4);\n --wui-color-bg-surface-selected-hover: var(--wui-blue-4);\n --wui-color-accent-4: var(--wui-blue-4);\n --wui-blue-5: #cddfff;\n --wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);\n --wui-color-bg-surface-tertiary-blue: var(--wui-blue-5);\n --wui-color-bg-surface-selected-active: var(--wui-blue-5);\n --wui-color-text-secondary-blue: var(--wui-blue-5);\n --wui-color-accent-5: var(--wui-blue-5);\n --wui-blue-6: #b8d1ff;\n --wui-color-bg-surface-tertiary-info: var(--wui-blue-6);\n --wui-color-border-info: var(--wui-blue-6);\n --wui-color-border-blue: var(--wui-blue-6);\n --wui-color-accent-6: var(--wui-blue-6);\n --wui-blue-7: #a1beff;\n --wui-color-accent-7: var(--wui-blue-7);\n --wui-blue-8: #81a4fe;\n --wui-color-border-hover-info: var(--wui-blue-8);\n --wui-color-border-secondary-info: var(--wui-blue-8);\n --wui-color-border-hover-blue: var(--wui-blue-8);\n --wui-color-border-secondary-blue: var(--wui-blue-8);\n --wui-color-accent-8: var(--wui-blue-8);\n --wui-blue-9: #2949e5;\n --wui-color-bg-fill-info: var(--wui-blue-9);\n --wui-color-bg-fill-blue: var(--wui-blue-9);\n --wui-color-bg-fill: var(--wui-color-accent-9);\n --wui-color-border-active-info: var(--wui-blue-9);\n --wui-color-text-link-info: var(--wui-blue-9);\n --wui-color-focus-ring-info: var(--wui-blue-9);\n --wui-color-border-active-blue: var(--wui-blue-9);\n --wui-color-text-link-blue: var(--wui-blue-9);\n --wui-color-focus-ring-blue: var(--wui-blue-9);\n --wui-color-focus-color: var(--wui-blue-9);\n --wui-color-text-on-fill-white-selected: var(--wui-blue-9);\n --wui-color-icon-selected: var(--wui-blue-9);\n --wui-color-text-selected: var(--wui-blue-9);\n --wui-color-segmented-color-text-override: var(--wui-color-text-selected);\n --wui-color-accent-9: var(--wui-blue-9);\n --wui-color-text-link-token: var(--wui-color-accent-9);\n --wui-color-text-link: var(--wui-color-text-link-token);\n --wui-color-focus-ring: var(--wui-color-accent-9);\n --wui-blue-10: #1f36d3;\n --wui-color-bg-fill-hover-info: var(--wui-blue-10);\n --wui-color-bg-fill-hover-blue: var(--wui-blue-10);\n --wui-color-bg-fill-hover: var(--wui-color-accent-10);\n --wui-color-border-secondary-hover-info: var(--wui-blue-10);\n --wui-color-border-secondary-hover-blue: var(--wui-blue-10);\n --wui-color-accent-10: var(--wui-blue-10);\n --wui-blue-11: #3154dc;\n --wui-color-bg-fill-active-info: var(--wui-blue-11);\n --wui-color-bg-fill-active-blue: var(--wui-blue-11);\n --wui-color-bg-fill-active: var(--wui-color-accent-11);\n --wui-color-border-secondary-active-info: var(--wui-blue-11);\n --wui-color-icon-info: var(--wui-blue-11);\n --wui-color-text-button-info: var(--wui-blue-11);\n --wui-color-text-secondary-info: var(--wui-blue-11);\n --wui-color-border-secondary-active-blue: var(--wui-blue-11);\n --wui-color-icon-blue: var(--wui-blue-11);\n --wui-color-text-button-blue: var(--wui-blue-11);\n --wui-color-accent-11: var(--wui-blue-11);\n --wui-blue-12: #192b65;\n --wui-color-text-info: var(--wui-blue-12);\n --wui-color-text-blue: var(--wui-blue-12);\n --wui-color-accent-12: var(--wui-blue-12);\n --wui-blue-surface: #f4f8ffcc;\n --wui-blue-contrast: #fff;\n --wui-color-icon-on-fill-info: var(--wui-blue-contrast);\n --wui-color-text-on-fill-info: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-blue: var(--wui-blue-contrast);\n --wui-color-accent-contrast: var(--wui-blue-contrast);\n --wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n --wui-color-text-on-fill: var(--wui-color-accent-contrast);\n --wui-blue-alpha-1: #00008003;\n --wui-blue-alpha-2: #0055ff0a;\n --wui-blue-alpha-3: #0051ff12;\n --wui-blue-alpha-4: #0062ff21;\n --wui-blue-alpha-5: #005cff33;\n --wui-blue-alpha-6: #005aff47;\n --wui-blue-alpha-7: #004fff5e;\n --wui-blue-alpha-8: #0047fd7d;\n --wui-blue-alpha-9: #0026e0d6;\n --wui-blue-alpha-10: #001acde0;\n --wui-blue-alpha-11: #002bd4cf;\n --wui-blue-alpha-12: #001454e5;\n --wui-purple-1: #fefcff;\n --wui-purple-2: #fdf7ff;\n --wui-color-bg-surface-purple: var(--wui-purple-2);\n --wui-purple-3: #fbeaff;\n --wui-color-bg-surface-hover-purple: var(--wui-purple-3);\n --wui-color-bg-surface-secondary-purple: var(--wui-purple-3);\n --wui-purple-4: #f7ddff;\n --wui-color-bg-surface-active-purple: var(--wui-purple-4);\n --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);\n --wui-purple-5: #f2ceff;\n --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);\n --wui-color-bg-surface-tertiary-purple: var(--wui-purple-5);\n --wui-purple-6: #eabdff;\n --wui-color-border-purple: var(--wui-purple-6);\n --wui-purple-7: #e0a5fc;\n --wui-purple-8: #d285f7;\n --wui-color-border-hover-purple: var(--wui-purple-8);\n --wui-color-border-secondary-purple: var(--wui-purple-8);\n --wui-purple-9: #ac12e0;\n --wui-color-bg-fill-purple: var(--wui-purple-9);\n --wui-color-border-active-purple: var(--wui-purple-9);\n --wui-color-focus-ring-purple: var(--wui-purple-9);\n --wui-purple-10: #9a09c9;\n --wui-color-bg-fill-hover-purple: var(--wui-purple-10);\n --wui-color-border-secondary-hover-purple: var(--wui-purple-10);\n --wui-purple-11: #9b0bca;\n --wui-color-bg-fill-active-purple: var(--wui-purple-11);\n --wui-color-border-secondary-active-purple: var(--wui-purple-11);\n --wui-color-icon-purple: var(--wui-purple-11);\n --wui-color-text-link-purple: var(--wui-purple-11);\n --wui-color-text-button-purple: var(--wui-purple-11);\n --wui-color-text-secondary-purple: var(--wui-purple-11);\n --wui-purple-12: #550072;\n --wui-color-text-purple: var(--wui-purple-12);\n --wui-purple-surface: #fdf5ffcc;\n --wui-purple-contrast: #fff;\n --wui-color-icon-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-text-on-fill-purple: var(--wui-purple-contrast);\n --wui-purple-alpha-1: #aa00ff03;\n --wui-purple-alpha-2: #c000ff08;\n --wui-purple-alpha-3: #cf00ff14;\n --wui-purple-alpha-4: #c300ff21;\n --wui-purple-alpha-5: #bc00ff30;\n --wui-purple-alpha-6: #ae00ff42;\n --wui-purple-alpha-7: #a801f759;\n --wui-purple-alpha-8: #a101ef7a;\n --wui-purple-alpha-9: #a600deed;\n --wui-purple-alpha-10: #9600c7f5;\n --wui-purple-alpha-11: #9700c8f5;\n --wui-purple-alpha-12: #550072;\n --wui-green-1: #fbfefa;\n --wui-green-2: #f5fbf4;\n --wui-color-bg-surface-green: var(--wui-green-2);\n --wui-green-3: #e7f8e5;\n --wui-color-bg-surface-hover-green: var(--wui-green-3);\n --wui-color-bg-surface-secondary-green: var(--wui-green-3);\n --wui-green-4: #d8f2d4;\n --wui-color-bg-surface-active-green: var(--wui-green-4);\n --wui-color-bg-surface-secondary-hover-green: var(--wui-green-4);\n --wui-green-5: #c6ebc0;\n --wui-color-bg-surface-secondary-active-green: var(--wui-green-5);\n --wui-color-bg-surface-tertiary-green: var(--wui-green-5);\n --wui-green-6: #afe0a6;\n --wui-color-border-green: var(--wui-green-6);\n --wui-green-7: #8fd185;\n --wui-green-8: #5fbd51;\n --wui-color-border-hover-green: var(--wui-green-8);\n --wui-color-border-secondary-green: var(--wui-green-8);\n --wui-green-9: #268713;\n --wui-color-bg-fill-green: var(--wui-green-9);\n --wui-color-border-active-green: var(--wui-green-9);\n --wui-color-focus-ring-green: var(--wui-green-9);\n --wui-green-10: #117900;\n --wui-color-bg-fill-hover-green: var(--wui-green-10);\n --wui-color-border-secondary-hover-green: var(--wui-green-10);\n --wui-color-text-secondary-green: var(--wui-green-10);\n --wui-green-11: #1e8106;\n --wui-color-bg-fill-active-green: var(--wui-green-11);\n --wui-color-border-secondary-active-green: var(--wui-green-11);\n --wui-color-icon-green: var(--wui-green-11);\n --wui-color-text-button-green: var(--wui-green-11);\n --wui-color-text-link-green: var(--wui-green-11);\n --wui-green-12: #1e3d19;\n --wui-color-text-green: var(--wui-green-12);\n --wui-green-surface: #f3faf1cc;\n --wui-green-contrast: #fff;\n --wui-color-icon-on-fill-green: var(--wui-green-contrast);\n --wui-color-text-on-fill-green: var(--wui-green-contrast);\n --wui-green-alpha-1: #33cc0005;\n --wui-green-alpha-2: #18a3000b;\n --wui-green-alpha-3: #14bb001a;\n --wui-green-alpha-4: #18b2012b;\n --wui-green-alpha-5: #19af003f;\n --wui-green-alpha-6: #1aa70059;\n --wui-green-alpha-7: #159f017a;\n --wui-green-alpha-8: #189f00b0;\n --wui-green-alpha-9: #159f00ae;\n --wui-green-alpha-10: #157d00ec;\n --wui-green-alpha-11: #117900;\n --wui-green-alpha-12: #197e00f9;\n --wui-pink-1: #fffcfd;\n --wui-pink-2: #fff7fa;\n --wui-color-bg-surface-pink: var(--wui-pink-2);\n --wui-pink-3: #ffe8f3;\n --wui-color-bg-surface-hover-pink: var(--wui-pink-3);\n --wui-color-bg-surface-secondary-pink: var(--wui-pink-3);\n --wui-pink-4: #ffdaeb;\n --wui-color-bg-surface-active-pink: var(--wui-pink-4);\n --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);\n --wui-pink-5: #fdcbe2;\n --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);\n --wui-color-bg-surface-tertiary-pink: var(--wui-pink-5);\n --wui-pink-6: #f7bcd8;\n --wui-color-border-pink: var(--wui-pink-6);\n --wui-pink-7: #efa8ca;\n --wui-pink-8: #e68eba;\n --wui-color-border-hover-pink: var(--wui-pink-8);\n --wui-color-border-secondary-pink: var(--wui-pink-8);\n --wui-pink-9: #ff40b3;\n --wui-color-bg-fill-pink: var(--wui-pink-9);\n --wui-color-border-active-pink: var(--wui-pink-9);\n --wui-color-focus-ring-pink: var(--wui-pink-9);\n --wui-color-notification-pill-color: var(--wui-pink-9);\n --wui-pink-10: #f12fa7;\n --wui-color-bg-fill-hover-pink: var(--wui-pink-10);\n --wui-color-border-secondary-hover-pink: var(--wui-pink-10);\n --wui-color-text-secondary-pink: var(--wui-pink-10);\n --wui-pink-11: #cd0089;\n --wui-color-bg-fill-active-pink: var(--wui-pink-11);\n --wui-color-border-secondary-active-pink: var(--wui-pink-11);\n --wui-color-icon-pink: var(--wui-pink-11);\n --wui-color-text-link-pink: var(--wui-pink-11);\n --wui-color-text-button-pink: var(--wui-pink-11);\n --wui-pink-12: #680445;\n --wui-color-text-pink: var(--wui-pink-12);\n --wui-pink-surface: #fff5f9cc;\n --wui-pink-contrast: #fff;\n --wui-color-icon-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-text-on-fill-pink: var(--wui-pink-contrast);\n --wui-pink-alpha-1: #ff005503;\n --wui-pink-alpha-2: #ff006008;\n --wui-pink-alpha-3: #ff007a17;\n --wui-pink-alpha-4: #ff007626;\n --wui-pink-alpha-5: #f6007133;\n --wui-pink-alpha-6: #e1006b42;\n --wui-pink-alpha-7: #d1006457;\n --wui-pink-alpha-8: #c7006470;\n --wui-pink-alpha-9: #ff009abf;\n --wui-pink-alpha-10: #ee0093d1;\n --wui-pink-alpha-11: #cd0089;\n --wui-pink-alpha-12: #660042fa;\n --wui-red-1: #fffcfc;\n --wui-red-2: #fff7f7;\n --wui-red-3: #ffe9e9;\n --wui-red-4: #ffd9d9;\n --wui-red-5: #ffcaca;\n --wui-red-6: #ffbaba;\n --wui-red-7: #fca5a6;\n --wui-red-8: #f5898c;\n --wui-red-9: #ff2b51;\n --wui-red-10: #f10845;\n --wui-red-11: #db0035;\n --wui-red-12: #6d021a;\n --wui-red-surface: #fff5f5cc;\n --wui-red-contrast: #fff;\n --wui-red-alpha-1: #ff000003;\n --wui-red-alpha-2: #ff000008;\n --wui-red-alpha-3: #ff000017;\n --wui-red-alpha-4: #ff000026;\n --wui-red-alpha-5: #ff000036;\n --wui-red-alpha-6: #ff000045;\n --wui-red-alpha-7: #f7010359;\n --wui-red-alpha-8: #ea000775;\n --wui-red-alpha-9: #ff002ed4;\n --wui-red-alpha-10: #f1003ff7;\n --wui-red-alpha-11: #db0035;\n --wui-red-alpha-12: #6c0018fc;\n --wui-yellow-1: #fdfdf8;\n --wui-yellow-2: #fbfcea;\n --wui-color-bg-surface-yellow: var(--wui-yellow-2);\n --wui-yellow-3: #f6fbb8;\n --wui-color-bg-surface-hover-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);\n --wui-yellow-4: #f0f491;\n --wui-color-bg-surface-active-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);\n --wui-yellow-5: #e7eb6d;\n --wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);\n --wui-yellow-6: #d8dd5d;\n --wui-color-border-yellow: var(--wui-yellow-6);\n --wui-yellow-7: #c8cc52;\n --wui-yellow-8: #b3b600;\n --wui-color-border-hover-yellow: var(--wui-yellow-8);\n --wui-color-border-secondary-yellow: var(--wui-yellow-8);\n --wui-yellow-9: #bcbf19;\n --wui-color-bg-fill-yellow: var(--wui-yellow-9);\n --wui-color-border-active-yellow: var(--wui-yellow-9);\n --wui-color-focus-ring-yellow: var(--wui-yellow-9);\n --wui-yellow-10: #b1b400;\n --wui-color-bg-fill-hover-yellow: var(--wui-yellow-10);\n --wui-color-border-secondary-hover-yellow: var(--wui-yellow-10);\n --wui-color-text-secondary-yellow: var(--wui-yellow-10);\n --wui-yellow-11: #7a7b00;\n --wui-color-bg-fill-active-yellow: var(--wui-yellow-11);\n --wui-color-border-secondary-active-yellow: var(--wui-yellow-11);\n --wui-color-icon-yellow: var(--wui-yellow-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\n --wui-color-text-yellow: var(--wui-yellow-11);\n --wui-yellow-12: #3e3f14;\n --wui-color-text-button-yellow: var(--wui-yellow-12);\n --wui-yellow-surface: #fafbe5cc;\n --wui-yellow-contrast: #22230b;\n --wui-color-icon-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-yellow-alpha-1: #b7b70008;\n --wui-yellow-alpha-2: #cfdb0014;\n --wui-yellow-alpha-3: #dff10047;\n --wui-yellow-alpha-4: #dde6006e;\n --wui-yellow-alpha-5: #d5dc0091;\n --wui-yellow-alpha-6: #c2ca00a3;\n --wui-yellow-alpha-7: #aeb400ad;\n --wui-yellow-alpha-8: #b3b600;\n --wui-yellow-alpha-9: #b5b800e5;\n --wui-yellow-alpha-10: #b1b400;\n --wui-yellow-alpha-11: #7a7b00;\n --wui-yellow-alpha-12: #2e2f00eb;\n --wui-orange-1: #fffcfb;\n --wui-orange-2: #fff7f5;\n --wui-color-bg-surface-orange: var(--wui-orange-2);\n --wui-orange-3: #ffebe6;\n --wui-color-bg-surface-hover-orange: var(--wui-orange-3);\n --wui-color-bg-surface-secondary-orange: var(--wui-orange-3);\n --wui-orange-4: #ffdbce;\n --wui-color-bg-surface-active-orange: var(--wui-orange-4);\n --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);\n --wui-orange-5: #fcbfcb;\n --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);\n --wui-color-bg-surface-tertiary-orange: var(--wui-orange-5);\n --wui-orange-6: #ffbdaa;\n --wui-color-border-orange: var(--wui-orange-6);\n --wui-orange-7: #f4aa95;\n --wui-orange-8: #ea9178;\n --wui-color-border-hover-orange: var(--wui-orange-8);\n --wui-color-border-secondary-orange: var(--wui-orange-8);\n --wui-orange-9: #d1451a;\n --wui-color-bg-fill-orange: var(--wui-orange-9);\n --wui-color-border-active-orange: var(--wui-orange-9);\n --wui-color-focus-ring-orange: var(--wui-orange-9);\n --wui-orange-10: #c23600;\n --wui-color-bg-fill-hover-orange: var(--wui-orange-10);\n --wui-color-border-secondary-hover-orange: var(--wui-orange-10);\n --wui-color-text-secondary-orange: var(--wui-orange-10);\n --wui-orange-11: #ce4216;\n --wui-color-bg-fill-active-orange: var(--wui-orange-11);\n --wui-color-border-secondary-active-orange: var(--wui-orange-11);\n --wui-color-icon-orange: var(--wui-orange-11);\n --wui-color-text-link-orange: var(--wui-orange-11);\n --wui-color-text-button-orange: var(--wui-orange-11);\n --wui-orange-12: #592b1e;\n --wui-color-text-orange: var(--wui-orange-12);\n --wui-orange-surface: #fff5f3cc;\n --wui-orange-contrast: #fff;\n --wui-color-icon-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-text-on-fill-orange: var(--wui-orange-contrast);\n --wui-orange-alpha-1: #ff400005;\n --wui-orange-alpha-2: #ff33000a;\n --wui-orange-alpha-3: #ff33001a;\n --wui-orange-alpha-4: #ff440030;\n --wui-orange-alpha-5: #ff400045;\n --wui-orange-alpha-6: #ff390054;\n --wui-orange-alpha-7: #e533016b;\n --wui-orange-alpha-8: #d8300087;\n --wui-orange-alpha-9: #cc3000e5;\n --wui-orange-alpha-10: #c23600;\n --wui-orange-alpha-11: #c93000e8;\n --wui-orange-alpha-12: #430f00e0;\n --wui-error-1: #fffcfc;\n --wui-error-2: #fff7f7;\n --wui-color-bg-surface-error: var(--wui-error-2);\n --wui-error-3: #ffebea;\n --wui-color-bg-surface-hover-error: var(--wui-error-3);\n --wui-color-bg-surface-secondary-error: var(--wui-error-3);\n --wui-error-4: #ffdcd9;\n --wui-color-bg-surface-active-error: var(--wui-error-4);\n --wui-color-bg-surface-secondary-hover-error: var(--wui-error-4);\n --wui-error-5: #ffcdca;\n --wui-color-bg-surface-secondary-active-error: var(--wui-error-5);\n --wui-color-bg-surface-tertiary-error: var(--wui-error-5);\n --wui-error-6: #febdb9;\n --wui-color-border-error: var(--wui-error-6);\n --wui-error-7: #f5a9a5;\n --wui-error-8: #eb8f8b;\n --wui-color-border-secondary-error: var(--wui-error-8);\n --wui-error-9: #e5484d;\n --wui-color-bg-fill-error: var(--wui-error-9);\n --wui-color-border-active-error: var(--wui-error-9);\n --wui-color-focus-ring-error: var(--wui-error-9);\n --wui-color-invalid-indicator: var(--wui-error-9);\n --wui-error-10: #d73840;\n --wui-color-bg-fill-hover-error: var(--wui-error-10);\n --wui-color-border-secondary-hover-error: var(--wui-error-10);\n --wui-error-11: #cc2e39;\n --wui-color-bg-fill-active-error: var(--wui-error-11);\n --wui-color-border-secondary-active-error: var(--wui-error-11);\n --wui-color-icon-error: var(--wui-error-11);\n --wui-color-text-error: var(--wui-error-11);\n --wui-color-text-button-error: var(--wui-error-11);\n --wui-color-text-link-error: var(--wui-error-11);\n --wui-color-text-secondary-error: var(--wui-error-11);\n --wui-error-12: #64181b;\n --wui-error-surface: #fff5f5cc;\n --wui-error-contrast: #fff;\n --wui-color-icon-on-fill-error: var(--wui-error-contrast);\n --wui-color-text-on-fill-error: var(--wui-error-contrast);\n --wui-error-alpha-1: #ff000003;\n --wui-error-alpha-2: #ff000008;\n --wui-error-alpha-3: #ff0d0014;\n --wui-error-alpha-4: #ff150026;\n --wui-error-alpha-5: #ff0f0036;\n --wui-error-alpha-6: #fc0f0045;\n --wui-error-alpha-7: #e30c0159;\n --wui-error-alpha-8: #d4090073;\n --wui-error-alpha-9: #db0007b8;\n --wui-error-alpha-10: #cc000ac7;\n --wui-error-alpha-11: #c1000ed1;\n --wui-error-alpha-12: #540003e8;\n --wui-success-1: #fbfefc;\n --wui-success-2: #f4fbf7;\n --wui-color-bg-surface-success: var(--wui-success-2);\n --wui-success-3: #e5f6eb;\n --wui-color-bg-surface-hover-success: var(--wui-success-3);\n --wui-color-bg-surface-secondary-success: var(--wui-success-3);\n --wui-success-4: #d6f1df;\n --wui-color-bg-surface-active-success: var(--wui-success-4);\n --wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);\n --wui-success-5: #c4e8d1;\n --wui-color-bg-surface-secondary-active-success: var(--wui-success-5);\n --wui-color-bg-surface-tertiary-success: var(--wui-success-5);\n --wui-success-6: #adddc0;\n --wui-color-border-success: var(--wui-success-6);\n --wui-success-7: #8fcea8;\n --wui-success-8: #60b887;\n --wui-color-border-hover-success: var(--wui-success-8);\n --wui-color-border-secondary-success: var(--wui-success-8);\n --wui-success-9: #30a46c;\n --wui-color-bg-fill-success: var(--wui-success-9);\n --wui-color-border-active-success: var(--wui-success-9);\n --wui-color-text-link-success: var(--wui-success-9);\n --wui-color-focus-ring-success: var(--wui-success-9);\n --wui-success-10: #289662;\n --wui-color-bg-fill-hover-success: var(--wui-success-10);\n --wui-color-border-secondary-hover-success: var(--wui-success-10);\n --wui-success-11: #00814c;\n --wui-color-bg-fill-active-success: var(--wui-success-11);\n --wui-color-border-secondary-active-success: var(--wui-success-11);\n --wui-color-icon-success: var(--wui-success-11);\n --wui-color-text-secondary-success: var(--wui-success-11);\n --wui-color-text-button-success: var(--wui-success-11);\n --wui-success-12: #1d3b2a;\n --wui-color-text-success: var(--wui-success-12);\n --wui-success-surface: #f1faf5cc;\n --wui-success-contrast: #fff;\n --wui-color-icon-on-fill-success: var(--wui-success-contrast);\n --wui-color-text-on-fill-success: var(--wui-success-contrast);\n --wui-success-alpha-1: #00c04005;\n --wui-success-alpha-2: #00a3460a;\n --wui-success-alpha-3: #00a73b1a;\n --wui-success-alpha-4: #00a83829;\n --wui-success-alpha-5: #019c393b;\n --wui-success-alpha-6: #00963c52;\n --wui-success-alpha-7: #00903970;\n --wui-success-alpha-8: #008d3f9e;\n --wui-success-alpha-9: #008f4acf;\n --wui-success-alpha-10: #008345d6;\n --wui-success-alpha-11: #00814c;\n --wui-success-alpha-12: #00220fe3;\n --wui-warning-1: #fdfdfa;\n --wui-warning-2: #fefceb;\n --wui-color-bg-surface-warning: var(--wui-warning-2);\n --wui-color-icon-on-fill-warning: var(--wui-warning-2);\n --wui-warning-3: #fff9bf;\n --wui-color-bg-surface-hover-warning: var(--wui-warning-3);\n --wui-color-bg-surface-secondary-warning: var(--wui-warning-3);\n --wui-warning-4: #fef29f;\n --wui-color-bg-surface-active-warning: var(--wui-warning-4);\n --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);\n --wui-warning-5: #f8e981;\n --wui-color-bg-surface-secondary-active-warning: var(--wui-warning-5);\n --wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);\n --wui-warning-6: #e9da79;\n --wui-color-border-warning: var(--wui-warning-6);\n --wui-warning-7: #d8cb75;\n --wui-warning-8: #c4b54f;\n --wui-color-border-hover-warning: var(--wui-warning-8);\n --wui-color-border-secondary-warning: var(--wui-warning-8);\n --wui-warning-9: #ffe62a;\n --wui-color-bg-fill-warning: var(--wui-warning-9);\n --wui-color-border-active-warning: var(--wui-warning-9);\n --wui-color-focus-ring-warning: var(--wui-warning-9);\n --wui-warning-10: #f3dd45;\n --wui-color-bg-fill-hover-warning: var(--wui-warning-10);\n --wui-color-border-secondary-hover-warning: var(--wui-warning-10);\n --wui-warning-11: #897a00;\n --wui-color-bg-fill-active-warning: var(--wui-warning-11);\n --wui-color-border-secondary-active-warning: var(--wui-warning-11);\n --wui-color-icon-warning: var(--wui-warning-11);\n --wui-color-text-link-warning: var(--wui-warning-11);\n --wui-color-text-secondary-warning: var(--wui-warning-11);\n --wui-color-text-button-warning: var(--wui-warning-11);\n --wui-warning-12: #413d23;\n --wui-color-text-warning: var(--wui-warning-12);\n --wui-warning-surface: #fefbe6cc;\n --wui-warning-contrast: #262209;\n --wui-color-text-on-fill-warning: var(--wui-warning-contrast);\n --wui-warning-alpha-1: #99990005;\n --wui-warning-alpha-2: #f3d90014;\n --wui-warning-alpha-3: #ffe80040;\n --wui-warning-alpha-4: #fddd0061;\n --wui-warning-alpha-5: #f1d3007d;\n --wui-warning-alpha-6: #d6b90087;\n --wui-warning-alpha-7: #b79f008a;\n --wui-warning-alpha-8: #aa9400b0;\n --wui-warning-alpha-9: #ffe100d6;\n --wui-warning-alpha-10: #efd100ba;\n --wui-warning-alpha-11: #897a00;\n --wui-warning-alpha-12: #231e00db;\n --wui-gray-1: #fcfcfd;\n --wui-color-bg-surface: var(--wui-color-surface-token);\n --wui-color-base-1: var(--wui-gray-1);\n --wui-color-surface-token: var(--wui-gray-1);\n --wui-gray-2: #f9f9fb;\n --wui-color-base-2: var(--wui-gray-2);\n --wui-gray-3: #f0f0f3;\n --wui-color-bg-surface-hover: var(--wui-color-base-3);\n --wui-color-bg-surface-secondary: var(--wui-color-base-3);\n --wui-color-base-3: var(--wui-gray-3);\n --wui-gray-4: #e8e8ec;\n --wui-color-bg-surface-active: var(--wui-color-base-4);\n --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n --wui-color-border-disabled: var(--wui-gray-4);\n --wui-color-base-4: var(--wui-gray-4);\n --wui-gray-5: #e0e0e5;\n --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n --wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n --wui-color-base-5: var(--wui-gray-5);\n --wui-gray-6: #d9d9de;\n --wui-color-focus-ring-disabled: var(--wui-gray-6);\n --wui-color-base-6: var(--wui-gray-6);\n --wui-color-border: var(--wui-color-base-6);\n --wui-gray-7: #ceced5;\n --wui-color-base-7: var(--wui-gray-7);\n --wui-gray-8: #bbbbc4;\n --wui-color-icon-disabled: var(--wui-gray-8);\n --wui-color-base-8: var(--wui-gray-8);\n --wui-color-border-hover: var(--wui-color-base-8);\n --wui-color-border-secondary: var(--wui-color-base-8);\n --wui-gray-9: #8d8d95;\n --wui-color-base-9: var(--wui-gray-9);\n --wui-color-border-active: var(--wui-color-base-9);\n --wui-gray-10: #82828a;\n --wui-color-text-disabled: var(--wui-gray-10);\n --wui-color-base-10: var(--wui-gray-10);\n --wui-color-border-secondary-hover: var(--wui-color-base-10);\n --wui-gray-11: #64646a;\n --wui-color-base-11: var(--wui-gray-11);\n --wui-color-border-secondary-active: var(--wui-color-base-11);\n --wui-color-icon: var(--wui-color-base-11);\n --wui-color-text-secondary: var(--wui-color-base-11);\n --wui-gray-12: #202024;\n --wui-color-base-12: var(--wui-gray-12);\n --wui-color-text-button-token: var(--wui-gray-12);\n --wui-color-text: var(--wui-color-base-12);\n --wui-color-text-button: var(--wui-color-text-button-token);\n --wui-gray-surface: #fffc;\n --wui-gray-contrast: #fff;\n --wui-color-base-contrast: var(--wui-gray-contrast);\n --wui-gray-alpha-1: #00005503;\n --wui-gray-alpha-2: #00005505;\n --wui-gray-alpha-3: #0000330f;\n --wui-gray-alpha-4: #00002d17;\n --wui-gray-alpha-5: #00002a1f;\n --wui-gray-alpha-6: #00002226;\n --wui-gray-alpha-7: #00002530;\n --wui-gray-alpha-8: #00002245;\n --wui-gray-alpha-9: #00001273;\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-gray-alpha-10: #0000117d;\n --wui-gray-alpha-11: #00000a9c;\n --wui-gray-alpha-12: #000005de;\n --wui-vendor-hubspot-1: #fefcfb;\n --wui-vendor-hubspot-2: #fff5f2;\n --wui-vendor-hubspot-3: #ffe9e2;\n --wui-vendor-hubspot-4: #ffd7c9;\n --wui-vendor-hubspot-5: #ffc8b7;\n --wui-vendor-hubspot-6: #ffb8a3;\n --wui-vendor-hubspot-7: #ffa48d;\n --wui-vendor-hubspot-8: #f68a70;\n --wui-vendor-hubspot-9: #ff5c36;\n --wui-vendor-hubspot-10: #f24d25;\n --wui-vendor-hubspot-11: #d93a0f;\n --wui-vendor-hubspot-12: #5b2a1e;\n --wui-vendor-hubspot-surface: #fff3efcc;\n --wui-vendor-hubspot-contrast: #fff;\n --wui-vendor-marketo-1: #fdfdff;\n --wui-vendor-marketo-2: #f7f8ff;\n --wui-vendor-marketo-3: #eff2ff;\n --wui-vendor-marketo-4: #e3e8ff;\n --wui-vendor-marketo-5: #d5ddff;\n --wui-vendor-marketo-6: #c5cfff;\n --wui-vendor-marketo-7: #b0bcfa;\n --wui-vendor-marketo-8: #93a0f2;\n --wui-vendor-marketo-9: #4c50cc;\n --wui-vendor-marketo-10: #4040bb;\n --wui-vendor-marketo-11: #4f55c7;\n --wui-vendor-marketo-12: #252a62;\n --wui-vendor-marketo-surface: #f5f6ffcc;\n --wui-vendor-marketo-contrast: #fff;\n --wui-vendor-pardot-1: #fafdff;\n --wui-vendor-pardot-2: #f3fafe;\n --wui-vendor-pardot-3: #e1f5ff;\n --wui-vendor-pardot-4: #ceeeff;\n --wui-vendor-pardot-5: #bae5ff;\n --wui-vendor-pardot-6: #a4d9fa;\n --wui-vendor-pardot-7: #85c9f1;\n --wui-vendor-pardot-8: #4fb3e8;\n --wui-vendor-pardot-9: #00a1e0;\n --wui-vendor-pardot-10: #0094cf;\n --wui-vendor-pardot-11: #0079b5;\n --wui-vendor-pardot-12: #0c3a51;\n --wui-vendor-pardot-surface: #f0f9fecc;\n --wui-vendor-pardot-contrast: #fff;\n --wui-color-bg-fill-white: #fff;\n --wui-color-bg-tooltip: #242528;\n --wui-color-bg-surface-disabled: #f0f0f3;\n --wui-color-bg-app: #fff;\n --wui-color-segmented-control-checked-background: var(--wui-color-bg-app);\n --wui-color-drop-shadow: #1f33991a;\n --wui-elevation-01: 0 4px 8px 0 var(--wui-color-drop-shadow);\n --wui-elevation-02: 0 4px 24px 0 var(--wui-color-drop-shadow);\n --wui-color-border-selected: #b8d1ff;\n --wui-color-border-hover-selected: #81a4fe;\n --wui-color-border-active-selected: #2949e5;\n}\n"}
|
|
338
178
|
:root,
|
|
339
179
|
[data-wui-theme='true'] {
|
|
340
|
-
${
|
|
341
|
-
${css`
|
|
342
|
-
${lightGlobalTokens}
|
|
343
|
-
/* Dark mode is disabled until we have a more robust plan for supporting it */
|
|
344
|
-
|
|
345
|
-
/* @media (prefers-color-scheme: dark) {
|
|
346
|
-
${darkGlobalTokens}
|
|
347
|
-
} */
|
|
348
|
-
${colorAliasTokens}
|
|
349
|
-
`}
|
|
350
|
-
${elevationTokens}
|
|
351
|
-
${spacingTokens}
|
|
352
|
-
${typographyTokens}
|
|
353
|
-
${zIndexTokens}
|
|
354
|
-
${motionTokens}
|
|
180
|
+
${"/*\n * Typography weight overlay\n *\n * Reintroduces the var-with-fallback override hooks for heading weights. These\n * vars are part of the @wistia/ui public surface (see CustomizableThemeWrapper)\n * and consumers override them at any cascade level. DTCG aliases compile to a\n * single resolved value, so the fallback pattern can't live in the generated\n * tokens.css.\n *\n * Order matters: this file MUST follow the generated tokens.css so its\n * declarations win the cascade, and MUST precede typographyLegacyAliases.css so\n * the override hook propagates through any legacy `*-weight` alias as well.\n */\n--wui-typography-heading-hero-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-1-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-2-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-3-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-4-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-5-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-6-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n"}
|
|
181
|
+
${"/*\n * Legacy typography sub-property aliases\n *\n * Terrazzo's plugin-css emits typography composite sub-properties using DTCG\n * names verbatim (kebab-cased):\n * --wui-typography-<style>-font-family\n * --wui-typography-<style>-font-size\n * --wui-typography-<style>-font-weight\n *\n * Prior versions of @wistia/ui exposed shortened legacy names:\n * --wui-typography-<style>-family\n * --wui-typography-<style>-size\n * --wui-typography-<style>-weight\n *\n * These aliases preserve that surface so downstream apps (notably wistia/wistia)\n * keep working unchanged after the Terrazzo migration. Once all known consumers\n * have migrated to the DTCG names, delete this file and remove the import from\n * designTokens/index.tsx.\n *\n * Note: `line-height` and `paragraph-spacing` sub-properties are unchanged\n * between DTCG and the prior surface, so no aliases are required for those.\n *\n * --------------------------------------------------------------------------\n * Migrating consumers in wistia/wistia (run from the VMA repo root):\n *\n * # 1. List every legacy reference site:\n * grep -rnE --include='*.ts' --include='*.tsx' --include='*.css' \\\n * '--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9])-(family|size|weight)' \\\n * frontend\n *\n * # 2. Apply the rename in-place (BSD sed on macOS):\n * grep -rlE --include='*.ts' --include='*.tsx' --include='*.css' \\\n * '--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9])-(family|size|weight)' \\\n * frontend \\\n * | xargs sed -i '' -E \\\n * 's/(--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9]))-(family|size|weight)/\\1-font-\\3/g'\n *\n * # 3. (GNU sed / Linux variant — drop the empty '' after -i):\n * # ... | xargs sed -i -E '...'\n *\n * Special case: frontend/authentication/css/redesign/wistia-ui/design-tokens/\n * typography.css *defines* the legacy names itself (not consumed from\n * @wistia/ui). It will keep working post-rename, but should be migrated for\n * consistency.\n * --------------------------------------------------------------------------\n */\n--wui-typography-heading-hero-family: var(--wui-typography-heading-hero-font-family);\n--wui-typography-heading-hero-size: var(--wui-typography-heading-hero-font-size);\n--wui-typography-heading-hero-weight: var(--wui-typography-heading-hero-font-weight);\n--wui-typography-heading-1-family: var(--wui-typography-heading-1-font-family);\n--wui-typography-heading-1-size: var(--wui-typography-heading-1-font-size);\n--wui-typography-heading-1-weight: var(--wui-typography-heading-1-font-weight);\n--wui-typography-heading-2-family: var(--wui-typography-heading-2-font-family);\n--wui-typography-heading-2-size: var(--wui-typography-heading-2-font-size);\n--wui-typography-heading-2-weight: var(--wui-typography-heading-2-font-weight);\n--wui-typography-heading-3-family: var(--wui-typography-heading-3-font-family);\n--wui-typography-heading-3-size: var(--wui-typography-heading-3-font-size);\n--wui-typography-heading-3-weight: var(--wui-typography-heading-3-font-weight);\n--wui-typography-heading-4-family: var(--wui-typography-heading-4-font-family);\n--wui-typography-heading-4-size: var(--wui-typography-heading-4-font-size);\n--wui-typography-heading-4-weight: var(--wui-typography-heading-4-font-weight);\n--wui-typography-heading-5-family: var(--wui-typography-heading-5-font-family);\n--wui-typography-heading-5-size: var(--wui-typography-heading-5-font-size);\n--wui-typography-heading-5-weight: var(--wui-typography-heading-5-font-weight);\n--wui-typography-heading-6-family: var(--wui-typography-heading-6-font-family);\n--wui-typography-heading-6-size: var(--wui-typography-heading-6-font-size);\n--wui-typography-heading-6-weight: var(--wui-typography-heading-6-font-weight);\n--wui-typography-body-1-family: var(--wui-typography-body-1-font-family);\n--wui-typography-body-1-size: var(--wui-typography-body-1-font-size);\n--wui-typography-body-1-weight: var(--wui-typography-body-1-font-weight);\n--wui-typography-body-2-family: var(--wui-typography-body-2-font-family);\n--wui-typography-body-2-size: var(--wui-typography-body-2-font-size);\n--wui-typography-body-2-weight: var(--wui-typography-body-2-font-weight);\n--wui-typography-body-3-family: var(--wui-typography-body-3-font-family);\n--wui-typography-body-3-size: var(--wui-typography-body-3-font-size);\n--wui-typography-body-3-weight: var(--wui-typography-body-3-font-weight);\n--wui-typography-body-4-family: var(--wui-typography-body-4-font-family);\n--wui-typography-body-4-size: var(--wui-typography-body-4-font-size);\n--wui-typography-body-4-weight: var(--wui-typography-body-4-font-weight);\n--wui-typography-label-1-family: var(--wui-typography-label-1-font-family);\n--wui-typography-label-1-size: var(--wui-typography-label-1-font-size);\n--wui-typography-label-1-weight: var(--wui-typography-label-1-font-weight);\n--wui-typography-label-2-family: var(--wui-typography-label-2-font-family);\n--wui-typography-label-2-size: var(--wui-typography-label-2-font-size);\n--wui-typography-label-2-weight: var(--wui-typography-label-2-font-weight);\n--wui-typography-label-3-family: var(--wui-typography-label-3-font-family);\n--wui-typography-label-3-size: var(--wui-typography-label-3-font-size);\n--wui-typography-label-3-weight: var(--wui-typography-label-3-font-weight);\n--wui-typography-label-4-family: var(--wui-typography-label-4-font-family);\n--wui-typography-label-4-size: var(--wui-typography-label-4-font-size);\n--wui-typography-label-4-weight: var(--wui-typography-label-4-font-weight);\n"}
|
|
355
182
|
}
|
|
356
183
|
`}
|
|
357
184
|
${css`
|
|
@@ -1883,41 +1710,123 @@ const Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ jsx(Ellipsis
|
|
|
1883
1710
|
});
|
|
1884
1711
|
Ellipsis.displayName = "Ellipsis_UI";
|
|
1885
1712
|
//#endregion
|
|
1713
|
+
//#region src/css/designTokens/generated/schemes/standard.css
|
|
1714
|
+
var standard_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, standard permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-gray-1);\n--wui-color-base-2: var(--wui-gray-2);\n--wui-color-base-3: var(--wui-gray-3);\n--wui-color-base-4: var(--wui-gray-4);\n--wui-color-base-5: var(--wui-gray-5);\n--wui-color-base-6: var(--wui-gray-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-gray-7);\n--wui-color-base-8: var(--wui-gray-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-gray-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-gray-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-gray-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-gray-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-gray-contrast);\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-text-link-token: var(--wui-color-accent-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-gray-1);\n--wui-color-text-button-token: var(--wui-gray-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1715
|
+
//#endregion
|
|
1716
|
+
//#region src/css/designTokens/generated/schemes/blue.css
|
|
1717
|
+
var blue_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, blue permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-text-link-token: var(--wui-blue-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1718
|
+
//#endregion
|
|
1719
|
+
//#region src/css/designTokens/generated/schemes/green.css
|
|
1720
|
+
var green_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, green permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-green-1);\n--wui-color-base-2: var(--wui-green-2);\n--wui-color-base-3: var(--wui-green-3);\n--wui-color-base-4: var(--wui-green-4);\n--wui-color-base-5: var(--wui-green-5);\n--wui-color-base-6: var(--wui-green-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-green-7);\n--wui-color-base-8: var(--wui-green-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-green-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-green-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-green-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-green-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-green-contrast);\n--wui-color-accent-1: var(--wui-green-1);\n--wui-color-accent-2: var(--wui-green-2);\n--wui-color-accent-3: var(--wui-green-3);\n--wui-color-accent-4: var(--wui-green-4);\n--wui-color-accent-5: var(--wui-green-5);\n--wui-color-accent-6: var(--wui-green-6);\n--wui-color-accent-7: var(--wui-green-7);\n--wui-color-accent-8: var(--wui-green-8);\n--wui-color-accent-9: var(--wui-green-9);\n--wui-color-text-link-token: var(--wui-green-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-green-10);\n--wui-color-accent-11: var(--wui-green-11);\n--wui-color-accent-12: var(--wui-green-12);\n--wui-color-accent-contrast: var(--wui-green-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-green-2);\n--wui-color-text-button-token: var(--wui-green-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1721
|
+
//#endregion
|
|
1722
|
+
//#region src/css/designTokens/generated/schemes/orange.css
|
|
1723
|
+
var orange_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, orange permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-orange-1);\n--wui-color-base-2: var(--wui-orange-2);\n--wui-color-base-3: var(--wui-orange-3);\n--wui-color-base-4: var(--wui-orange-4);\n--wui-color-base-5: var(--wui-orange-5);\n--wui-color-base-6: var(--wui-orange-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-orange-7);\n--wui-color-base-8: var(--wui-orange-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-orange-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-orange-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-orange-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-orange-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-orange-contrast);\n--wui-color-accent-1: var(--wui-orange-1);\n--wui-color-accent-2: var(--wui-orange-2);\n--wui-color-accent-3: var(--wui-orange-3);\n--wui-color-accent-4: var(--wui-orange-4);\n--wui-color-accent-5: var(--wui-orange-5);\n--wui-color-accent-6: var(--wui-orange-6);\n--wui-color-accent-7: var(--wui-orange-7);\n--wui-color-accent-8: var(--wui-orange-8);\n--wui-color-accent-9: var(--wui-orange-9);\n--wui-color-text-link-token: var(--wui-orange-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-orange-10);\n--wui-color-accent-11: var(--wui-orange-11);\n--wui-color-accent-12: var(--wui-orange-12);\n--wui-color-accent-contrast: var(--wui-orange-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-orange-2);\n--wui-color-text-button-token: var(--wui-orange-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1724
|
+
//#endregion
|
|
1725
|
+
//#region src/css/designTokens/generated/schemes/pink.css
|
|
1726
|
+
var pink_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, pink permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-pink-1);\n--wui-color-base-2: var(--wui-pink-2);\n--wui-color-base-3: var(--wui-pink-3);\n--wui-color-base-4: var(--wui-pink-4);\n--wui-color-base-5: var(--wui-pink-5);\n--wui-color-base-6: var(--wui-pink-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-pink-7);\n--wui-color-base-8: var(--wui-pink-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-pink-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-pink-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-pink-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-pink-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-pink-contrast);\n--wui-color-accent-1: var(--wui-pink-1);\n--wui-color-accent-2: var(--wui-pink-2);\n--wui-color-accent-3: var(--wui-pink-3);\n--wui-color-accent-4: var(--wui-pink-4);\n--wui-color-accent-5: var(--wui-pink-5);\n--wui-color-accent-6: var(--wui-pink-6);\n--wui-color-accent-7: var(--wui-pink-7);\n--wui-color-accent-8: var(--wui-pink-8);\n--wui-color-accent-9: var(--wui-pink-9);\n--wui-color-text-link-token: var(--wui-pink-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-pink-10);\n--wui-color-accent-11: var(--wui-pink-11);\n--wui-color-accent-12: var(--wui-pink-12);\n--wui-color-accent-contrast: var(--wui-pink-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-pink-2);\n--wui-color-text-button-token: var(--wui-pink-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1727
|
+
//#endregion
|
|
1728
|
+
//#region src/css/designTokens/generated/schemes/purple.css
|
|
1729
|
+
var purple_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, purple permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-purple-1);\n--wui-color-base-2: var(--wui-purple-2);\n--wui-color-base-3: var(--wui-purple-3);\n--wui-color-base-4: var(--wui-purple-4);\n--wui-color-base-5: var(--wui-purple-5);\n--wui-color-base-6: var(--wui-purple-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-purple-7);\n--wui-color-base-8: var(--wui-purple-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-purple-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-purple-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-purple-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-purple-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-purple-contrast);\n--wui-color-accent-1: var(--wui-purple-1);\n--wui-color-accent-2: var(--wui-purple-2);\n--wui-color-accent-3: var(--wui-purple-3);\n--wui-color-accent-4: var(--wui-purple-4);\n--wui-color-accent-5: var(--wui-purple-5);\n--wui-color-accent-6: var(--wui-purple-6);\n--wui-color-accent-7: var(--wui-purple-7);\n--wui-color-accent-8: var(--wui-purple-8);\n--wui-color-accent-9: var(--wui-purple-9);\n--wui-color-text-link-token: var(--wui-purple-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-purple-10);\n--wui-color-accent-11: var(--wui-purple-11);\n--wui-color-accent-12: var(--wui-purple-12);\n--wui-color-accent-contrast: var(--wui-purple-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-purple-2);\n--wui-color-text-button-token: var(--wui-purple-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1730
|
+
//#endregion
|
|
1731
|
+
//#region src/css/designTokens/generated/schemes/red.css
|
|
1732
|
+
var red_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, red permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-red-1);\n--wui-color-base-2: var(--wui-red-2);\n--wui-color-base-3: var(--wui-red-3);\n--wui-color-base-4: var(--wui-red-4);\n--wui-color-base-5: var(--wui-red-5);\n--wui-color-base-6: var(--wui-red-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-red-7);\n--wui-color-base-8: var(--wui-red-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-red-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-red-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-red-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-red-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-red-contrast);\n--wui-color-accent-1: var(--wui-red-1);\n--wui-color-accent-2: var(--wui-red-2);\n--wui-color-accent-3: var(--wui-red-3);\n--wui-color-accent-4: var(--wui-red-4);\n--wui-color-accent-5: var(--wui-red-5);\n--wui-color-accent-6: var(--wui-red-6);\n--wui-color-accent-7: var(--wui-red-7);\n--wui-color-accent-8: var(--wui-red-8);\n--wui-color-accent-9: var(--wui-red-9);\n--wui-color-text-link-token: var(--wui-red-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-red-10);\n--wui-color-accent-11: var(--wui-red-11);\n--wui-color-accent-12: var(--wui-red-12);\n--wui-color-accent-contrast: var(--wui-red-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-red-2);\n--wui-color-text-button-token: var(--wui-red-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1733
|
+
//#endregion
|
|
1734
|
+
//#region src/css/designTokens/generated/schemes/yellow.css
|
|
1735
|
+
var yellow_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, yellow permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-yellow-1);\n--wui-color-base-2: var(--wui-yellow-2);\n--wui-color-base-3: var(--wui-yellow-3);\n--wui-color-base-4: var(--wui-yellow-4);\n--wui-color-base-5: var(--wui-yellow-5);\n--wui-color-base-6: var(--wui-yellow-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-yellow-7);\n--wui-color-base-8: var(--wui-yellow-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-yellow-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-yellow-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-yellow-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-yellow-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-yellow-contrast);\n--wui-color-accent-1: var(--wui-yellow-1);\n--wui-color-accent-2: var(--wui-yellow-2);\n--wui-color-accent-3: var(--wui-yellow-3);\n--wui-color-accent-4: var(--wui-yellow-4);\n--wui-color-accent-5: var(--wui-yellow-5);\n--wui-color-accent-6: var(--wui-yellow-6);\n--wui-color-accent-7: var(--wui-yellow-7);\n--wui-color-accent-8: var(--wui-yellow-8);\n--wui-color-accent-9: var(--wui-yellow-9);\n--wui-color-text-link-token: var(--wui-yellow-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-yellow-10);\n--wui-color-accent-11: var(--wui-yellow-11);\n--wui-color-accent-12: var(--wui-yellow-12);\n--wui-color-accent-contrast: var(--wui-yellow-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-yellow-2);\n--wui-color-text-button-token: var(--wui-yellow-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1736
|
+
//#endregion
|
|
1737
|
+
//#region src/css/designTokens/generated/schemes/error.css
|
|
1738
|
+
var error_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, error permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-error-1);\n--wui-color-base-2: var(--wui-error-2);\n--wui-color-base-3: var(--wui-error-3);\n--wui-color-base-4: var(--wui-error-4);\n--wui-color-base-5: var(--wui-error-5);\n--wui-color-base-6: var(--wui-error-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-error-7);\n--wui-color-base-8: var(--wui-error-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-error-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-error-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-error-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-error-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-error-contrast);\n--wui-color-accent-1: var(--wui-error-1);\n--wui-color-accent-2: var(--wui-error-2);\n--wui-color-accent-3: var(--wui-error-3);\n--wui-color-accent-4: var(--wui-error-4);\n--wui-color-accent-5: var(--wui-error-5);\n--wui-color-accent-6: var(--wui-error-6);\n--wui-color-accent-7: var(--wui-error-7);\n--wui-color-accent-8: var(--wui-error-8);\n--wui-color-accent-9: var(--wui-error-9);\n--wui-color-text-link-token: var(--wui-error-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-error-10);\n--wui-color-accent-11: var(--wui-error-11);\n--wui-color-accent-12: var(--wui-error-12);\n--wui-color-accent-contrast: var(--wui-error-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-error-2);\n--wui-color-text-button-token: var(--wui-error-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1739
|
+
//#endregion
|
|
1740
|
+
//#region src/css/designTokens/generated/schemes/info.css
|
|
1741
|
+
var info_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, info permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-text-link-token: var(--wui-blue-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1742
|
+
//#endregion
|
|
1743
|
+
//#region src/css/designTokens/generated/schemes/success.css
|
|
1744
|
+
var success_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, success permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-success-1);\n--wui-color-base-2: var(--wui-success-2);\n--wui-color-base-3: var(--wui-success-3);\n--wui-color-base-4: var(--wui-success-4);\n--wui-color-base-5: var(--wui-success-5);\n--wui-color-base-6: var(--wui-success-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-success-7);\n--wui-color-base-8: var(--wui-success-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-success-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-success-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-success-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-success-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-success-contrast);\n--wui-color-accent-1: var(--wui-success-1);\n--wui-color-accent-2: var(--wui-success-2);\n--wui-color-accent-3: var(--wui-success-3);\n--wui-color-accent-4: var(--wui-success-4);\n--wui-color-accent-5: var(--wui-success-5);\n--wui-color-accent-6: var(--wui-success-6);\n--wui-color-accent-7: var(--wui-success-7);\n--wui-color-accent-8: var(--wui-success-8);\n--wui-color-accent-9: var(--wui-success-9);\n--wui-color-text-link-token: var(--wui-success-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-success-10);\n--wui-color-accent-11: var(--wui-success-11);\n--wui-color-accent-12: var(--wui-success-12);\n--wui-color-accent-contrast: var(--wui-success-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-success-2);\n--wui-color-text-button-token: var(--wui-success-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1745
|
+
//#endregion
|
|
1746
|
+
//#region src/css/designTokens/generated/schemes/warning.css
|
|
1747
|
+
var warning_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, warning permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-warning-1);\n--wui-color-base-2: var(--wui-warning-2);\n--wui-color-base-3: var(--wui-warning-3);\n--wui-color-base-4: var(--wui-warning-4);\n--wui-color-base-5: var(--wui-warning-5);\n--wui-color-base-6: var(--wui-warning-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-warning-7);\n--wui-color-base-8: var(--wui-warning-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-warning-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-warning-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-warning-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-warning-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-warning-contrast);\n--wui-color-accent-1: var(--wui-warning-1);\n--wui-color-accent-2: var(--wui-warning-2);\n--wui-color-accent-3: var(--wui-warning-3);\n--wui-color-accent-4: var(--wui-warning-4);\n--wui-color-accent-5: var(--wui-warning-5);\n--wui-color-accent-6: var(--wui-warning-6);\n--wui-color-accent-7: var(--wui-warning-7);\n--wui-color-accent-8: var(--wui-warning-8);\n--wui-color-accent-9: var(--wui-warning-9);\n--wui-color-text-link-token: var(--wui-warning-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-warning-10);\n--wui-color-accent-11: var(--wui-warning-11);\n--wui-color-accent-12: var(--wui-warning-12);\n--wui-color-accent-contrast: var(--wui-warning-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-warning-2);\n--wui-color-text-button-token: var(--wui-warning-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1748
|
+
//#endregion
|
|
1749
|
+
//#region src/css/designTokens/generated/schemes/vendor-hubspot.css
|
|
1750
|
+
var vendor_hubspot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-hubspot permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-vendor-hubspot-1);\n--wui-color-base-2: var(--wui-vendor-hubspot-2);\n--wui-color-base-3: var(--wui-vendor-hubspot-3);\n--wui-color-base-4: var(--wui-vendor-hubspot-4);\n--wui-color-base-5: var(--wui-vendor-hubspot-5);\n--wui-color-base-6: var(--wui-vendor-hubspot-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-vendor-hubspot-7);\n--wui-color-base-8: var(--wui-vendor-hubspot-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-vendor-hubspot-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-vendor-hubspot-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-vendor-hubspot-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-vendor-hubspot-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-accent-1: var(--wui-vendor-hubspot-1);\n--wui-color-accent-2: var(--wui-vendor-hubspot-2);\n--wui-color-accent-3: var(--wui-vendor-hubspot-3);\n--wui-color-accent-4: var(--wui-vendor-hubspot-4);\n--wui-color-accent-5: var(--wui-vendor-hubspot-5);\n--wui-color-accent-6: var(--wui-vendor-hubspot-6);\n--wui-color-accent-7: var(--wui-vendor-hubspot-7);\n--wui-color-accent-8: var(--wui-vendor-hubspot-8);\n--wui-color-accent-9: var(--wui-vendor-hubspot-9);\n--wui-color-text-link-token: var(--wui-vendor-hubspot-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-vendor-hubspot-10);\n--wui-color-accent-11: var(--wui-vendor-hubspot-11);\n--wui-color-accent-12: var(--wui-vendor-hubspot-12);\n--wui-color-accent-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-hubspot-2);\n--wui-color-text-button-token: var(--wui-vendor-hubspot-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1751
|
+
//#endregion
|
|
1752
|
+
//#region src/css/designTokens/generated/schemes/vendor-marketo.css
|
|
1753
|
+
var vendor_marketo_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-marketo permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-vendor-marketo-1);\n--wui-color-base-2: var(--wui-vendor-marketo-2);\n--wui-color-base-3: var(--wui-vendor-marketo-3);\n--wui-color-base-4: var(--wui-vendor-marketo-4);\n--wui-color-base-5: var(--wui-vendor-marketo-5);\n--wui-color-base-6: var(--wui-vendor-marketo-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-vendor-marketo-7);\n--wui-color-base-8: var(--wui-vendor-marketo-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-vendor-marketo-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-vendor-marketo-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-vendor-marketo-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-vendor-marketo-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-accent-1: var(--wui-vendor-marketo-1);\n--wui-color-accent-2: var(--wui-vendor-marketo-2);\n--wui-color-accent-3: var(--wui-vendor-marketo-3);\n--wui-color-accent-4: var(--wui-vendor-marketo-4);\n--wui-color-accent-5: var(--wui-vendor-marketo-5);\n--wui-color-accent-6: var(--wui-vendor-marketo-6);\n--wui-color-accent-7: var(--wui-vendor-marketo-7);\n--wui-color-accent-8: var(--wui-vendor-marketo-8);\n--wui-color-accent-9: var(--wui-vendor-marketo-9);\n--wui-color-text-link-token: var(--wui-vendor-marketo-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-vendor-marketo-10);\n--wui-color-accent-11: var(--wui-vendor-marketo-11);\n--wui-color-accent-12: var(--wui-vendor-marketo-12);\n--wui-color-accent-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-marketo-2);\n--wui-color-text-button-token: var(--wui-vendor-marketo-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1754
|
+
//#endregion
|
|
1755
|
+
//#region src/css/designTokens/generated/schemes/vendor-pardot.css
|
|
1756
|
+
var vendor_pardot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-pardot permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-vendor-pardot-1);\n--wui-color-base-2: var(--wui-vendor-pardot-2);\n--wui-color-base-3: var(--wui-vendor-pardot-3);\n--wui-color-base-4: var(--wui-vendor-pardot-4);\n--wui-color-base-5: var(--wui-vendor-pardot-5);\n--wui-color-base-6: var(--wui-vendor-pardot-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-vendor-pardot-7);\n--wui-color-base-8: var(--wui-vendor-pardot-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-vendor-pardot-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-vendor-pardot-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-vendor-pardot-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-vendor-pardot-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-accent-1: var(--wui-vendor-pardot-1);\n--wui-color-accent-2: var(--wui-vendor-pardot-2);\n--wui-color-accent-3: var(--wui-vendor-pardot-3);\n--wui-color-accent-4: var(--wui-vendor-pardot-4);\n--wui-color-accent-5: var(--wui-vendor-pardot-5);\n--wui-color-accent-6: var(--wui-vendor-pardot-6);\n--wui-color-accent-7: var(--wui-vendor-pardot-7);\n--wui-color-accent-8: var(--wui-vendor-pardot-8);\n--wui-color-accent-9: var(--wui-vendor-pardot-9);\n--wui-color-text-link-token: var(--wui-vendor-pardot-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-vendor-pardot-10);\n--wui-color-accent-11: var(--wui-vendor-pardot-11);\n--wui-color-accent-12: var(--wui-vendor-pardot-12);\n--wui-color-accent-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-pardot-2);\n--wui-color-text-button-token: var(--wui-vendor-pardot-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
|
|
1757
|
+
//#endregion
|
|
1758
|
+
//#region src/css/designTokens/generated/schemes/nav.css
|
|
1759
|
+
var nav_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, nav permutation\n * ------------------------------------------- */\n--wui-color-bg-surface-disabled: #0000;\n--wui-color-bg-surface-selected: var(--wui-color-bg-fill);\n--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);\n--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);\n--wui-color-bg-app: #1e3399;\n--wui-color-bg-fill: var(--wui-blue-1);\n--wui-color-bg-fill-hover: #e7e9f4;\n--wui-color-bg-fill-active: #dcdfef;\n--wui-color-bg-surface: #0000;\n--wui-color-bg-surface-hover: #15267b;\n--wui-color-bg-surface-active: #122271;\n--wui-color-bg-surface-secondary: #15267b;\n--wui-color-bg-surface-secondary-hover: #122271;\n--wui-color-bg-surface-secondary-active: #101e67;\n--wui-color-bg-surface-tertiary: #0d1a5c;\n--wui-color-icon-disabled: var(--wui-blue-8);\n--wui-color-text-disabled: var(--wui-blue-8);\n--wui-color-icon-selected: var(--wui-color-bg-app);\n--wui-color-text-selected: var(--wui-color-bg-app);\n--wui-color-segmented-color-text-override: var(--wui-blue-9);\n--wui-color-border-selected: #0000;\n--wui-color-border-hover-selected: #0000;\n--wui-color-border-active-selected: #0000;\n--wui-color-border-secondary: #101e67;\n--wui-color-border: var(--wui-color-bg-fill);\n--wui-color-border-hover: var(--wui-color-bg-fill-hover);\n--wui-color-border-active: var(--wui-color-bg-fill-active);\n--wui-color-icon: var(--wui-blue-1);\n--wui-color-icon-on-fill: var(--wui-color-bg-app);\n--wui-color-text: var(--wui-blue-1);\n--wui-color-text-on-fill: var(--wui-color-bg-app);\n--wui-color-text-link: var(--wui-blue-4);\n--wui-color-text-secondary: var(--wui-blue-6);\n--wui-color-text-button: var(--wui-blue-1);\n--wui-color-focus-ring: var(--wui-blue-1);\n";
|
|
1760
|
+
//#endregion
|
|
1761
|
+
//#region src/css/designTokens/colorSchemes.tsx
|
|
1762
|
+
const standardColorScheme = css`
|
|
1763
|
+
${standard_default}
|
|
1764
|
+
`;
|
|
1765
|
+
const blueColorScheme = css`
|
|
1766
|
+
${blue_default}
|
|
1767
|
+
`;
|
|
1768
|
+
const greenColorScheme = css`
|
|
1769
|
+
${green_default}
|
|
1770
|
+
`;
|
|
1771
|
+
const orangeColorScheme = css`
|
|
1772
|
+
${orange_default}
|
|
1773
|
+
`;
|
|
1774
|
+
const pinkColorScheme = css`
|
|
1775
|
+
${pink_default}
|
|
1776
|
+
`;
|
|
1777
|
+
const purpleColorScheme = css`
|
|
1778
|
+
${purple_default}
|
|
1779
|
+
`;
|
|
1780
|
+
//#endregion
|
|
1886
1781
|
//#region src/private/helpers/getColorScheme/getColorScheme.ts
|
|
1887
1782
|
const colorSchemes = {
|
|
1888
1783
|
standard: standardColorScheme,
|
|
1889
1784
|
blue: blueColorScheme,
|
|
1890
1785
|
green: greenColorScheme,
|
|
1891
|
-
red:
|
|
1892
|
-
|
|
1786
|
+
red: css`
|
|
1787
|
+
${red_default}
|
|
1788
|
+
`,
|
|
1789
|
+
yellow: css`
|
|
1790
|
+
${yellow_default}
|
|
1791
|
+
`,
|
|
1893
1792
|
purple: purpleColorScheme,
|
|
1894
1793
|
orange: orangeColorScheme,
|
|
1895
1794
|
pink: pinkColorScheme,
|
|
1896
|
-
error:
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1795
|
+
error: css`
|
|
1796
|
+
${error_default}
|
|
1797
|
+
`,
|
|
1798
|
+
info: css`
|
|
1799
|
+
${info_default}
|
|
1800
|
+
`,
|
|
1801
|
+
success: css`
|
|
1802
|
+
${success_default}
|
|
1803
|
+
`,
|
|
1804
|
+
warning: css`
|
|
1805
|
+
${warning_default}
|
|
1806
|
+
`,
|
|
1807
|
+
"vendor-hubspot": css`
|
|
1808
|
+
${vendor_hubspot_default}
|
|
1809
|
+
`,
|
|
1810
|
+
"vendor-marketo": css`
|
|
1811
|
+
${vendor_marketo_default}
|
|
1812
|
+
`,
|
|
1813
|
+
"vendor-pardot": css`
|
|
1814
|
+
${vendor_pardot_default}
|
|
1815
|
+
`,
|
|
1816
|
+
nav: css`
|
|
1817
|
+
${nav_default}
|
|
1818
|
+
`
|
|
1904
1819
|
};
|
|
1905
1820
|
const getColorScheme = (colorScheme) => {
|
|
1906
1821
|
if (colorScheme === "inherit") return null;
|
|
1907
|
-
|
|
1908
|
-
${navColorScheme}
|
|
1909
|
-
`;
|
|
1910
|
-
return css`
|
|
1911
|
-
${colorSchemes[colorScheme]}
|
|
1912
|
-
${baseAliasTokens}
|
|
1913
|
-
`;
|
|
1822
|
+
return colorSchemes[colorScheme];
|
|
1914
1823
|
};
|
|
1915
1824
|
//#endregion
|
|
1916
1825
|
//#region src/private/components/Toast/Toast.tsx
|
|
1917
1826
|
const Message = styled(Ellipsis)`
|
|
1918
1827
|
line-height: 1.3;
|
|
1919
|
-
font-size: var(--wui-typography-label-3-size);
|
|
1920
|
-
font-weight: var(--wui-typography-label-3-weight);
|
|
1828
|
+
font-size: var(--wui-typography-label-3-font-size);
|
|
1829
|
+
font-weight: var(--wui-typography-label-3-font-weight);
|
|
1921
1830
|
${lineClampCss(3)}
|
|
1922
1831
|
word-break: normal;
|
|
1923
1832
|
`;
|
|
@@ -2054,8 +1963,8 @@ const buttonSmallStyles = css`
|
|
|
2054
1963
|
--button-padding-horizontal: var(--wui-space-02);
|
|
2055
1964
|
--button-label-padding-horizontal: var(--wui-space-01);
|
|
2056
1965
|
--button-typography-family: var(--wui-typography-family-default);
|
|
2057
|
-
--button-typography-size: var(--wui-typography-label-4-size);
|
|
2058
|
-
--button-typography-weight: var(--wui-typography-label-4-weight);
|
|
1966
|
+
--button-typography-size: var(--wui-typography-label-4-font-size);
|
|
1967
|
+
--button-typography-weight: var(--wui-typography-label-4-font-weight);
|
|
2059
1968
|
--button-typography-line-height: 16px;
|
|
2060
1969
|
--button-icon-size: 12px;
|
|
2061
1970
|
--button-label-gap: 4px;
|
|
@@ -2065,8 +1974,8 @@ const buttonMediumStyles = css`
|
|
|
2065
1974
|
--button-padding-horizontal: var(--wui-space-02);
|
|
2066
1975
|
--button-label-padding-horizontal: 6px;
|
|
2067
1976
|
--button-typography-family: var(--wui-typography-family-default);
|
|
2068
|
-
--button-typography-size: var(--wui-typography-label-3-size);
|
|
2069
|
-
--button-typography-weight: var(--wui-typography-label-3-weight);
|
|
1977
|
+
--button-typography-size: var(--wui-typography-label-3-font-size);
|
|
1978
|
+
--button-typography-weight: var(--wui-typography-label-3-font-weight);
|
|
2070
1979
|
--button-typography-line-height: 16px;
|
|
2071
1980
|
--button-icon-size: 16px;
|
|
2072
1981
|
--button-label-gap: 6px;
|
|
@@ -2076,8 +1985,8 @@ const buttonLargeStyles = css`
|
|
|
2076
1985
|
--button-padding-horizontal: var(--wui-space-02);
|
|
2077
1986
|
--button-label-padding-horizontal: var(--wui-space-02);
|
|
2078
1987
|
--button-typography-family: var(--wui-typography-family-default);
|
|
2079
|
-
--button-typography-size: var(--wui-typography-label-1-size);
|
|
2080
|
-
--button-typography-weight: var(--wui-typography-label-1-weight);
|
|
1988
|
+
--button-typography-size: var(--wui-typography-label-1-font-size);
|
|
1989
|
+
--button-typography-weight: var(--wui-typography-label-1-font-weight);
|
|
2081
1990
|
--button-typography-line-height: 24px;
|
|
2082
1991
|
--button-icon-size: 24px;
|
|
2083
1992
|
--button-label-gap: 8px;
|
|
@@ -2151,7 +2060,7 @@ const buttonBaseStyles = css`
|
|
|
2151
2060
|
|
|
2152
2061
|
/* This ensure that the icon is the corect color when the style is solid or the button is disabled */
|
|
2153
2062
|
&& {
|
|
2154
|
-
svg {
|
|
2063
|
+
& svg {
|
|
2155
2064
|
color: var(--button-color-icon);
|
|
2156
2065
|
width: var(--button-icon-size);
|
|
2157
2066
|
height: var(--button-icon-size);
|
|
@@ -5567,7 +5476,7 @@ const StyledLink = styled.a`
|
|
|
5567
5476
|
}
|
|
5568
5477
|
|
|
5569
5478
|
&& {
|
|
5570
|
-
svg {
|
|
5479
|
+
& svg {
|
|
5571
5480
|
width: 14px;
|
|
5572
5481
|
height: 14px;
|
|
5573
5482
|
flex: 0 0 14px;
|
|
@@ -5798,7 +5707,7 @@ const StyledActionButton = styled(Button)`
|
|
|
5798
5707
|
cursor: not-allowed;
|
|
5799
5708
|
|
|
5800
5709
|
&& {
|
|
5801
|
-
svg {
|
|
5710
|
+
& svg {
|
|
5802
5711
|
color: var(--wui-color-icon-disabled);
|
|
5803
5712
|
}
|
|
5804
5713
|
}
|
|
@@ -5812,7 +5721,7 @@ const StyledMainIcon = styled.div`
|
|
|
5812
5721
|
transition: color var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
5813
5722
|
|
|
5814
5723
|
&& {
|
|
5815
|
-
svg {
|
|
5724
|
+
& svg {
|
|
5816
5725
|
width: 24px;
|
|
5817
5726
|
height: 24px;
|
|
5818
5727
|
flex: 0 0 24px;
|
|
@@ -5841,7 +5750,7 @@ const StyledSecondaryIcon = styled.div`
|
|
|
5841
5750
|
`};
|
|
5842
5751
|
|
|
5843
5752
|
&& {
|
|
5844
|
-
svg {
|
|
5753
|
+
& svg {
|
|
5845
5754
|
width: 24px;
|
|
5846
5755
|
height: 24px;
|
|
5847
5756
|
flex: 0 0 24px;
|
|
@@ -5849,10 +5758,7 @@ const StyledSecondaryIcon = styled.div`
|
|
|
5849
5758
|
}
|
|
5850
5759
|
`;
|
|
5851
5760
|
const StyledLabel$3 = styled.span`
|
|
5852
|
-
font
|
|
5853
|
-
font-size: var(--wui-typography-heading-4-size);
|
|
5854
|
-
font-weight: var(--wui-typography-heading-4-weight);
|
|
5855
|
-
line-height: var(--wui-typography-heading-4-line-height);
|
|
5761
|
+
font: var(--wui-typography-heading-4);
|
|
5856
5762
|
color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text)"};
|
|
5857
5763
|
grid-column: 1 / -1;
|
|
5858
5764
|
grid-row: 2;
|
|
@@ -6102,8 +6008,8 @@ const StyledBadge = styled.div`
|
|
|
6102
6008
|
border-radius: var(--wui-border-radius-rounded);
|
|
6103
6009
|
color: var(--wui-color-text);
|
|
6104
6010
|
display: inline-flex;
|
|
6105
|
-
font-size: var(--wui-typography-label-4-size);
|
|
6106
|
-
font-weight: var(--wui-typography-label-4-weight);
|
|
6011
|
+
font-size: var(--wui-typography-label-4-font-size);
|
|
6012
|
+
font-weight: var(--wui-typography-label-4-font-weight);
|
|
6107
6013
|
gap: var(--wui-space-01);
|
|
6108
6014
|
justify-content: center;
|
|
6109
6015
|
line-height: var(--wui-typography-label-3-line-height);
|
|
@@ -6114,7 +6020,7 @@ const StyledBadge = styled.div`
|
|
|
6114
6020
|
|
|
6115
6021
|
/* Icon component size and color */
|
|
6116
6022
|
&& {
|
|
6117
|
-
svg {
|
|
6023
|
+
& svg {
|
|
6118
6024
|
color: var(--wui-color-icon);
|
|
6119
6025
|
height: 12px;
|
|
6120
6026
|
width: 12px;
|
|
@@ -6301,45 +6207,45 @@ const applyMaxCharsToChildren = (children, maxChars) => {
|
|
|
6301
6207
|
};
|
|
6302
6208
|
const variantStyleMap$1 = {
|
|
6303
6209
|
hero: css`
|
|
6304
|
-
--font-family: var(--wui-typography-heading-hero-family);
|
|
6305
|
-
--font-size: var(--wui-typography-heading-hero-size);
|
|
6306
|
-
--font-weight: var(--wui-typography-heading-hero-weight);
|
|
6210
|
+
--font-family: var(--wui-typography-heading-hero-font-family);
|
|
6211
|
+
--font-size: var(--wui-typography-heading-hero-font-size);
|
|
6212
|
+
--font-weight: var(--wui-typography-heading-hero-font-weight);
|
|
6307
6213
|
--line-height: var(--wui-typography-heading-hero-line-height);
|
|
6308
6214
|
`,
|
|
6309
6215
|
heading1: css`
|
|
6310
|
-
--font-family: var(--wui-typography-heading-1-family);
|
|
6311
|
-
--font-size: var(--wui-typography-heading-1-size);
|
|
6312
|
-
--font-weight: var(--wui-typography-heading-1-weight);
|
|
6216
|
+
--font-family: var(--wui-typography-heading-1-font-family);
|
|
6217
|
+
--font-size: var(--wui-typography-heading-1-font-size);
|
|
6218
|
+
--font-weight: var(--wui-typography-heading-1-font-weight);
|
|
6313
6219
|
--line-height: var(--wui-typography-heading-1-line-height);
|
|
6314
6220
|
`,
|
|
6315
6221
|
heading2: css`
|
|
6316
|
-
--font-family: var(--wui-typography-heading-2-family);
|
|
6317
|
-
--font-size: var(--wui-typography-heading-2-size);
|
|
6318
|
-
--font-weight: var(--wui-typography-heading-2-weight);
|
|
6222
|
+
--font-family: var(--wui-typography-heading-2-font-family);
|
|
6223
|
+
--font-size: var(--wui-typography-heading-2-font-size);
|
|
6224
|
+
--font-weight: var(--wui-typography-heading-2-font-weight);
|
|
6319
6225
|
--line-height: var(--wui-typography-heading-2-line-height);
|
|
6320
6226
|
`,
|
|
6321
6227
|
heading3: css`
|
|
6322
|
-
--font-family: var(--wui-typography-heading-3-family);
|
|
6323
|
-
--font-size: var(--wui-typography-heading-3-size);
|
|
6324
|
-
--font-weight: var(--wui-typography-heading-3-weight);
|
|
6228
|
+
--font-family: var(--wui-typography-heading-3-font-family);
|
|
6229
|
+
--font-size: var(--wui-typography-heading-3-font-size);
|
|
6230
|
+
--font-weight: var(--wui-typography-heading-3-font-weight);
|
|
6325
6231
|
--line-height: var(--wui-typography-heading-3-line-height);
|
|
6326
6232
|
`,
|
|
6327
6233
|
heading4: css`
|
|
6328
|
-
--font-family: var(--wui-typography-heading-4-family);
|
|
6329
|
-
--font-size: var(--wui-typography-heading-4-size);
|
|
6330
|
-
--font-weight: var(--wui-typography-heading-4-weight);
|
|
6234
|
+
--font-family: var(--wui-typography-heading-4-font-family);
|
|
6235
|
+
--font-size: var(--wui-typography-heading-4-font-size);
|
|
6236
|
+
--font-weight: var(--wui-typography-heading-4-font-weight);
|
|
6331
6237
|
--line-height: var(--wui-typography-heading-4-line-height);
|
|
6332
6238
|
`,
|
|
6333
6239
|
heading5: css`
|
|
6334
|
-
--font-family: var(--wui-typography-heading-5-family);
|
|
6335
|
-
--font-size: var(--wui-typography-heading-5-size);
|
|
6336
|
-
--font-weight: var(--wui-typography-heading-5-weight);
|
|
6240
|
+
--font-family: var(--wui-typography-heading-5-font-family);
|
|
6241
|
+
--font-size: var(--wui-typography-heading-5-font-size);
|
|
6242
|
+
--font-weight: var(--wui-typography-heading-5-font-weight);
|
|
6337
6243
|
--line-height: var(--wui-typography-heading-5-line-height);
|
|
6338
6244
|
`,
|
|
6339
6245
|
heading6: css`
|
|
6340
|
-
--font-family: var(--wui-typography-heading-6-family);
|
|
6341
|
-
--font-size: var(--wui-typography-heading-6-size);
|
|
6342
|
-
--font-weight: var(--wui-typography-heading-6-weight);
|
|
6246
|
+
--font-family: var(--wui-typography-heading-6-font-family);
|
|
6247
|
+
--font-size: var(--wui-typography-heading-6-font-size);
|
|
6248
|
+
--font-weight: var(--wui-typography-heading-6-font-weight);
|
|
6343
6249
|
--line-height: var(--wui-typography-heading-6-line-height);
|
|
6344
6250
|
`
|
|
6345
6251
|
};
|
|
@@ -6431,62 +6337,62 @@ const labelBoldStyles = css`
|
|
|
6431
6337
|
}
|
|
6432
6338
|
`;
|
|
6433
6339
|
const body1TextStyle = css`
|
|
6434
|
-
--font-family: var(--wui-typography-body-1-family);
|
|
6435
|
-
--font-size: var(--wui-typography-body-1-size);
|
|
6436
|
-
--font-weight: var(--wui-typography-body-1-weight);
|
|
6340
|
+
--font-family: var(--wui-typography-body-1-font-family);
|
|
6341
|
+
--font-size: var(--wui-typography-body-1-font-size);
|
|
6342
|
+
--font-weight: var(--wui-typography-body-1-font-weight);
|
|
6437
6343
|
--line-height: var(--wui-typography-body-1-line-height);
|
|
6438
6344
|
--paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
|
|
6439
6345
|
${sharedBodyStyle}
|
|
6440
6346
|
`;
|
|
6441
6347
|
const body2TextStyle = css`
|
|
6442
|
-
--font-family: var(--wui-typography-body-2-family);
|
|
6443
|
-
--font-size: var(--wui-typography-body-2-size);
|
|
6444
|
-
--font-weight: var(--wui-typography-body-2-weight);
|
|
6348
|
+
--font-family: var(--wui-typography-body-2-font-family);
|
|
6349
|
+
--font-size: var(--wui-typography-body-2-font-size);
|
|
6350
|
+
--font-weight: var(--wui-typography-body-2-font-weight);
|
|
6445
6351
|
--line-height: var(--wui-typography-body-2-line-height);
|
|
6446
6352
|
--paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
|
|
6447
6353
|
${sharedBodyStyle}
|
|
6448
6354
|
`;
|
|
6449
6355
|
const body3TextStyle = css`
|
|
6450
|
-
--font-family: var(--wui-typography-body-3-family);
|
|
6451
|
-
--font-size: var(--wui-typography-body-3-size);
|
|
6452
|
-
--font-weight: var(--wui-typography-body-3-weight);
|
|
6356
|
+
--font-family: var(--wui-typography-body-3-font-family);
|
|
6357
|
+
--font-size: var(--wui-typography-body-3-font-size);
|
|
6358
|
+
--font-weight: var(--wui-typography-body-3-font-weight);
|
|
6453
6359
|
--line-height: var(--wui-typography-body-3-line-height);
|
|
6454
6360
|
--paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
|
|
6455
6361
|
${sharedBodyStyle}
|
|
6456
6362
|
`;
|
|
6457
6363
|
const body4TextStyle = css`
|
|
6458
|
-
--font-family: var(--wui-typography-body-4-family);
|
|
6459
|
-
--font-size: var(--wui-typography-body-4-size);
|
|
6460
|
-
--font-weight: var(--wui-typography-body-4-weight);
|
|
6364
|
+
--font-family: var(--wui-typography-body-4-font-family);
|
|
6365
|
+
--font-size: var(--wui-typography-body-4-font-size);
|
|
6366
|
+
--font-weight: var(--wui-typography-body-4-font-weight);
|
|
6461
6367
|
--line-height: var(--wui-typography-body-4-line-height);
|
|
6462
6368
|
--paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
|
|
6463
6369
|
${sharedBodyStyle}
|
|
6464
6370
|
`;
|
|
6465
6371
|
const label1TextStyle = css`
|
|
6466
|
-
--font-family: var(--wui-typography-label-1-family);
|
|
6467
|
-
--font-size: var(--wui-typography-label-1-size);
|
|
6468
|
-
--font-weight: var(--wui-typography-label-1-weight);
|
|
6372
|
+
--font-family: var(--wui-typography-label-1-font-family);
|
|
6373
|
+
--font-size: var(--wui-typography-label-1-font-size);
|
|
6374
|
+
--font-weight: var(--wui-typography-label-1-font-weight);
|
|
6469
6375
|
--line-height: var(--wui-typography-label-1-line-height);
|
|
6470
6376
|
${labelBoldStyles}
|
|
6471
6377
|
`;
|
|
6472
6378
|
const label2TextStyle = css`
|
|
6473
|
-
--font-family: var(--wui-typography-label-2-family);
|
|
6474
|
-
--font-size: var(--wui-typography-label-2-size);
|
|
6475
|
-
--font-weight: var(--wui-typography-label-2-weight);
|
|
6379
|
+
--font-family: var(--wui-typography-label-2-font-family);
|
|
6380
|
+
--font-size: var(--wui-typography-label-2-font-size);
|
|
6381
|
+
--font-weight: var(--wui-typography-label-2-font-weight);
|
|
6476
6382
|
--line-height: var(--wui-typography-label-2-line-height);
|
|
6477
6383
|
${labelBoldStyles}
|
|
6478
6384
|
`;
|
|
6479
6385
|
const label3TextStyle = css`
|
|
6480
|
-
--font-family: var(--wui-typography-label-3-family);
|
|
6481
|
-
--font-size: var(--wui-typography-label-3-size);
|
|
6482
|
-
--font-weight: var(--wui-typography-label-3-weight);
|
|
6386
|
+
--font-family: var(--wui-typography-label-3-font-family);
|
|
6387
|
+
--font-size: var(--wui-typography-label-3-font-size);
|
|
6388
|
+
--font-weight: var(--wui-typography-label-3-font-weight);
|
|
6483
6389
|
--line-height: var(--wui-typography-label-3-line-height);
|
|
6484
6390
|
${labelBoldStyles}
|
|
6485
6391
|
`;
|
|
6486
6392
|
const label4TextStyle = css`
|
|
6487
|
-
--font-family: var(--wui-typography-label-4-family);
|
|
6488
|
-
--font-size: var(--wui-typography-label-4-size);
|
|
6489
|
-
--font-weight: var(--wui-typography-label-4-weight);
|
|
6393
|
+
--font-family: var(--wui-typography-label-4-font-family);
|
|
6394
|
+
--font-size: var(--wui-typography-label-4-font-size);
|
|
6395
|
+
--font-weight: var(--wui-typography-label-4-font-weight);
|
|
6490
6396
|
--line-height: var(--wui-typography-label-4-line-height);
|
|
6491
6397
|
${labelBoldStyles}
|
|
6492
6398
|
`;
|
|
@@ -6949,8 +6855,8 @@ const disabledStyle$2 = css`
|
|
|
6949
6855
|
const StyledFormControlLabelDescription = styled.div`
|
|
6950
6856
|
color: var(--wui-color-text-secondary);
|
|
6951
6857
|
display: block;
|
|
6952
|
-
font-size: var(--wui-typography-body-4-size);
|
|
6953
|
-
font-weight: var(--wui-typography-body-4-weight);
|
|
6858
|
+
font-size: var(--wui-typography-body-4-font-size);
|
|
6859
|
+
font-weight: var(--wui-typography-body-4-font-weight);
|
|
6954
6860
|
line-height: var(--wui-typography-body-4-line-height);
|
|
6955
6861
|
|
|
6956
6862
|
${({ $disabled }) => $disabled && disabledStyle$2}
|
|
@@ -6984,8 +6890,8 @@ const StyledFormControlLabel = styled.label`
|
|
|
6984
6890
|
gap: var(--wui-space-02);
|
|
6985
6891
|
width: 100%;
|
|
6986
6892
|
color: var(--wui-color-tex);
|
|
6987
|
-
font-size: var(--wui-typography-label-3-size);
|
|
6988
|
-
font-weight: var(--wui-typography-label-3-weight);
|
|
6893
|
+
font-size: var(--wui-typography-label-3-font-size);
|
|
6894
|
+
font-weight: var(--wui-typography-label-3-font-weight);
|
|
6989
6895
|
line-height: var(--wui-typography-body-3-line-height);
|
|
6990
6896
|
justify-content: ${({ $align }) => $align === "left" ? "flex-start" : "space-between"};
|
|
6991
6897
|
|
|
@@ -7103,11 +7009,12 @@ const FormContext = createContext({
|
|
|
7103
7009
|
formId: "NO_FORM",
|
|
7104
7010
|
labelPosition: "block"
|
|
7105
7011
|
});
|
|
7012
|
+
const DEFAULT_VALUES = {};
|
|
7106
7013
|
/**
|
|
7107
7014
|
* For creating forms. It provides a context for the form fields to access the form state and validation.
|
|
7108
7015
|
* It also provides a way to handle form submission and validation. It is built around [React 19's form APIs](https://react.dev/reference/react-dom/components/form).
|
|
7109
7016
|
*/
|
|
7110
|
-
const Form = ({ children, action, values =
|
|
7017
|
+
const Form = ({ children, action, values = DEFAULT_VALUES, labelPosition = "block", validate, fullWidth = false, ref: forwardedRef, ...props }) => {
|
|
7111
7018
|
const [errors, setErrors] = useState({});
|
|
7112
7019
|
const [hasSubmitted, setHasSubmitted] = useState(false);
|
|
7113
7020
|
const innerRef = useRef(null);
|
|
@@ -7261,7 +7168,7 @@ const StyledCheckboxWrapper = styled.div`
|
|
|
7261
7168
|
}
|
|
7262
7169
|
|
|
7263
7170
|
&:has(input:focus-visible) {
|
|
7264
|
-
[data-wui-faux-input='true'] {
|
|
7171
|
+
& [data-wui-faux-input='true'] {
|
|
7265
7172
|
--wui-checkbox-outline-color: var(--wui-color-focus-ring);
|
|
7266
7173
|
}
|
|
7267
7174
|
}
|
|
@@ -7423,7 +7330,7 @@ const StyledTrigger$1 = styled(Collapsible$1.Trigger)`
|
|
|
7423
7330
|
}
|
|
7424
7331
|
|
|
7425
7332
|
&[aria-expanded='true'] {
|
|
7426
|
-
[data-wui-collapsible-icon] {
|
|
7333
|
+
& [data-wui-collapsible-icon] {
|
|
7427
7334
|
&[data-wui-collapsible-icon-rotate='90'] {
|
|
7428
7335
|
transform: rotate(90deg);
|
|
7429
7336
|
}
|
|
@@ -7906,10 +7813,7 @@ const StyledLabel$2 = styled.label`
|
|
|
7906
7813
|
display: block;
|
|
7907
7814
|
width: 100%;
|
|
7908
7815
|
color: var(--wui-color-text);
|
|
7909
|
-
font
|
|
7910
|
-
line-height: var(--wui-typography-heading-6-line-height);
|
|
7911
|
-
font-size: var(--wui-typography-heading-6-size);
|
|
7912
|
-
font-weight: var(--wui-typography-heading-6-weight);
|
|
7816
|
+
font: var(--wui-typography-heading-6);
|
|
7913
7817
|
|
|
7914
7818
|
/* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
|
|
7915
7819
|
> input,
|
|
@@ -8068,9 +7972,9 @@ const StyledPopup$5 = styled(Tooltip$1.Popup)`
|
|
|
8068
7972
|
--tooltip-border-radius: var(--wui-border-radius-05);
|
|
8069
7973
|
--tooltip-bg: var(--wui-color-bg-tooltip);
|
|
8070
7974
|
--tooltip-color: var(--wui-color-text-on-fill);
|
|
8071
|
-
--tooltip-font-size: var(--wui-typography-label-4-size);
|
|
7975
|
+
--tooltip-font-size: var(--wui-typography-label-4-font-size);
|
|
8072
7976
|
--tooltip-line-height: var(--wui-typography-label-4-line-height);
|
|
8073
|
-
--tooltip-font-weight: var(--wui-typography-label-4-weight);
|
|
7977
|
+
--tooltip-font-weight: var(--wui-typography-label-4-font-weight);
|
|
8074
7978
|
--tooltip-horizontal-padding: var(--wui-space-02);
|
|
8075
7979
|
--tooltip-vertical-padding: var(--wui-space-03);
|
|
8076
7980
|
--tooltip-animation-duration: var(--wui-motion-duration-04);
|
|
@@ -8135,7 +8039,6 @@ const StyledTooltipArrow = styled.svg`
|
|
|
8135
8039
|
${arrowEdgeCss}
|
|
8136
8040
|
`;
|
|
8137
8041
|
const VISUAL_OFFSET = 6;
|
|
8138
|
-
const ARROW_EXTENSION = 6;
|
|
8139
8042
|
/**
|
|
8140
8043
|
* Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
|
|
8141
8044
|
* For elements that are not interactive, consider using a [Popover](/components/Popover) instead.
|
|
@@ -8154,7 +8057,7 @@ const Tooltip = ({ delay = 500, direction = "top", content, children, forceOpen,
|
|
|
8154
8057
|
...container != null ? { container } : {},
|
|
8155
8058
|
children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
|
|
8156
8059
|
side: direction,
|
|
8157
|
-
sideOffset: hideArrow ? VISUAL_OFFSET :
|
|
8060
|
+
sideOffset: hideArrow ? VISUAL_OFFSET : 12,
|
|
8158
8061
|
style: { zIndex: "var(--wui-zindex-tooltip)" },
|
|
8159
8062
|
children: /* @__PURE__ */ jsxs(StyledPopup$5, {
|
|
8160
8063
|
role: "tooltip",
|
|
@@ -8721,7 +8624,7 @@ const inputCss = css`
|
|
|
8721
8624
|
|
|
8722
8625
|
/* Typography */
|
|
8723
8626
|
--wui-input-placeholder: var(--wui-gray-10);
|
|
8724
|
-
--wui-input-font-size: var(--wui-typography-body-3-size);
|
|
8627
|
+
--wui-input-font-size: var(--wui-typography-body-3-font-size);
|
|
8725
8628
|
--wui-input-line-height: 16px;
|
|
8726
8629
|
--wui-input-font-weight: var(--wui-typography-weight-body);
|
|
8727
8630
|
`;
|
|
@@ -9423,7 +9326,7 @@ const SaturationAndValuePicker = ({ dataTestId }) => {
|
|
|
9423
9326
|
}
|
|
9424
9327
|
if (event.key === "ArrowLeft") {
|
|
9425
9328
|
event.preventDefault();
|
|
9426
|
-
nudgeHsv("s",
|
|
9329
|
+
nudgeHsv("s", -.02);
|
|
9427
9330
|
return;
|
|
9428
9331
|
}
|
|
9429
9332
|
if (event.key === "ArrowUp") {
|
|
@@ -9433,7 +9336,7 @@ const SaturationAndValuePicker = ({ dataTestId }) => {
|
|
|
9433
9336
|
}
|
|
9434
9337
|
if (event.key === "ArrowDown") {
|
|
9435
9338
|
event.preventDefault();
|
|
9436
|
-
nudgeHsv("v",
|
|
9339
|
+
nudgeHsv("v", -.02);
|
|
9437
9340
|
}
|
|
9438
9341
|
}, [nudgeHsv]);
|
|
9439
9342
|
const onWindowMouseMove = useCallback((event) => {
|
|
@@ -9506,8 +9409,8 @@ SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
|
|
|
9506
9409
|
//#region src/components/Tag/Tag.tsx
|
|
9507
9410
|
const TagLabel = styled.a`
|
|
9508
9411
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9509
|
-
font-size: var(--wui-typography-label-4-size);
|
|
9510
|
-
font-weight: var(--wui-typography-label-4-weight);
|
|
9412
|
+
font-size: var(--wui-typography-label-4-font-size);
|
|
9413
|
+
font-weight: var(--wui-typography-label-4-font-weight);
|
|
9511
9414
|
line-height: var(--wui-typography-label-4-line-height);
|
|
9512
9415
|
border-radius: var(--wui-border-radius-01);
|
|
9513
9416
|
display: flex;
|
|
@@ -9895,8 +9798,8 @@ const menuItemCss = css`
|
|
|
9895
9798
|
--menu-item-left-icon-size: 24px;
|
|
9896
9799
|
--menu-item-right-icon-size: 16px;
|
|
9897
9800
|
--menu-item-padding: var(--wui-space-02);
|
|
9898
|
-
--menu-label-font-size: var(--wui-typography-label-3-size);
|
|
9899
|
-
--menu-label-font-weight: var(--wui-typography-label-3-weight);
|
|
9801
|
+
--menu-label-font-size: var(--wui-typography-label-3-font-size);
|
|
9802
|
+
--menu-label-font-weight: var(--wui-typography-label-3-font-weight);
|
|
9900
9803
|
--menu-label-line-height: var(--wui-typography-label-3-line-height);
|
|
9901
9804
|
--menu-divider-margin: var(--wui-space-02);
|
|
9902
9805
|
`;
|
|
@@ -9906,8 +9809,8 @@ const compactMenuItemCss = css`
|
|
|
9906
9809
|
--menu-item-left-icon-size: 16px;
|
|
9907
9810
|
--menu-item-right-icon-size: 12px;
|
|
9908
9811
|
--menu-item-padding: 6px;
|
|
9909
|
-
--menu-label-font-size: var(--wui-typography-label-4-size);
|
|
9910
|
-
--menu-label-font-weight: var(--wui-typography-label-4-weight);
|
|
9812
|
+
--menu-label-font-size: var(--wui-typography-label-4-font-size);
|
|
9813
|
+
--menu-label-font-weight: var(--wui-typography-label-4-font-weight);
|
|
9911
9814
|
--menu-label-line-height: var(--wui-typography-label-4-line-height);
|
|
9912
9815
|
--menu-divider-margin: var(--wui-space-01);
|
|
9913
9816
|
`;
|
|
@@ -9956,10 +9859,11 @@ const MenuPopup = styled(Menu$1.Popup)`
|
|
|
9956
9859
|
${menuContentCss}
|
|
9957
9860
|
min-width: var(--anchor-width);
|
|
9958
9861
|
`;
|
|
9862
|
+
const DEFAULT_TRIGGER_PROPS = {};
|
|
9959
9863
|
/**
|
|
9960
9864
|
* Displays a menu to the users with a set of actions.
|
|
9961
9865
|
*/
|
|
9962
|
-
const Menu = ({ align = "start", children, disabled = false, compact = false, trigger, label, isOpen, side = "bottom", triggerProps =
|
|
9866
|
+
const Menu = ({ align = "start", children, disabled = false, compact = false, trigger, label, isOpen, side = "bottom", triggerProps = DEFAULT_TRIGGER_PROPS, onOpenChange, ref, ...props }) => {
|
|
9963
9867
|
const contextValue = useMemo(() => ({ compact }), [compact]);
|
|
9964
9868
|
const handleOpenChange = useCallback((nextOpen, eventDetails) => {
|
|
9965
9869
|
if (nextOpen !== isOpen) {
|
|
@@ -10014,7 +9918,8 @@ const ContextMenuPopup = styled(Menu$1.Popup)`
|
|
|
10014
9918
|
* 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
|
|
10015
9919
|
* 2. By providing a `position` prop, which will render the menu at the specified coordinates.
|
|
10016
9920
|
*/
|
|
10017
|
-
const
|
|
9921
|
+
const NOOP$4 = () => null;
|
|
9922
|
+
const ContextMenu = ({ position, triggerRef, children, side = "bottom", onRequestClose = NOOP$4, compact = false }) => {
|
|
10018
9923
|
const [isRightClicked, setIsRightClicked] = useState(false);
|
|
10019
9924
|
const [menuPosition, setMenuPosition] = useState(position ?? {
|
|
10020
9925
|
x: 0,
|
|
@@ -10151,7 +10056,7 @@ const StyledDataCard = styled.div`
|
|
|
10151
10056
|
--wui-data-card-text: var(--wui-color-text-button);
|
|
10152
10057
|
--wui-data-card-background: var(--wui-color-bg-surface-secondary-hover);
|
|
10153
10058
|
|
|
10154
|
-
[data-wui-data-card-hover-icon] {
|
|
10059
|
+
& [data-wui-data-card-hover-icon] {
|
|
10155
10060
|
opacity: 1;
|
|
10156
10061
|
transform: translateX(0);
|
|
10157
10062
|
}
|
|
@@ -10997,8 +10902,8 @@ const calendarCss = css`
|
|
|
10997
10902
|
--rdp-day-size: 36px;
|
|
10998
10903
|
|
|
10999
10904
|
font-family: var(--wui-typography-family-default);
|
|
11000
|
-
font-size: var(--wui-typography-body-3-size);
|
|
11001
|
-
font-weight: var(--wui-typography-body-3-weight);
|
|
10905
|
+
font-size: var(--wui-typography-body-3-font-size);
|
|
10906
|
+
font-weight: var(--wui-typography-body-3-font-weight);
|
|
11002
10907
|
user-select: none;
|
|
11003
10908
|
position: relative;
|
|
11004
10909
|
}
|
|
@@ -11023,9 +10928,9 @@ const calendarCss = css`
|
|
|
11023
10928
|
}
|
|
11024
10929
|
|
|
11025
10930
|
.rdp-caption_label {
|
|
11026
|
-
font-family: var(--wui-typography-heading-4-family);
|
|
11027
|
-
font-weight: var(--wui-typography-heading-4-weight);
|
|
11028
|
-
font-size: var(--wui-typography-heading-4-size);
|
|
10931
|
+
font-family: var(--wui-typography-heading-4-font-family);
|
|
10932
|
+
font-weight: var(--wui-typography-heading-4-font-weight);
|
|
10933
|
+
font-size: var(--wui-typography-heading-4-font-size);
|
|
11029
10934
|
line-height: var(--wui-typography-heading-4-line-height);
|
|
11030
10935
|
min-height: 32px;
|
|
11031
10936
|
display: flex;
|
|
@@ -11042,8 +10947,8 @@ const calendarCss = css`
|
|
|
11042
10947
|
/* Weekday headers */
|
|
11043
10948
|
.rdp-weekday {
|
|
11044
10949
|
color: var(--wui-color-text-secondary);
|
|
11045
|
-
font-weight: var(--wui-typography-label-3-weight);
|
|
11046
|
-
font-size: var(--wui-typography-label-3-size);
|
|
10950
|
+
font-weight: var(--wui-typography-label-3-font-weight);
|
|
10951
|
+
font-size: var(--wui-typography-label-3-font-size);
|
|
11047
10952
|
line-height: var(--wui-typography-label-3-line-height);
|
|
11048
10953
|
text-align: center;
|
|
11049
10954
|
width: var(--rdp-day-size);
|
|
@@ -11072,9 +10977,9 @@ const calendarCss = css`
|
|
|
11072
10977
|
border-radius: var(--wui-border-radius-rounded);
|
|
11073
10978
|
background: none;
|
|
11074
10979
|
cursor: pointer;
|
|
11075
|
-
font-family: var(--wui-typography-label-3-family);
|
|
11076
|
-
font-size: var(--wui-typography-label-3-size);
|
|
11077
|
-
font-weight: var(--wui-typography-label-3-weight);
|
|
10980
|
+
font-family: var(--wui-typography-label-3-font-family);
|
|
10981
|
+
font-size: var(--wui-typography-label-3-font-size);
|
|
10982
|
+
font-weight: var(--wui-typography-label-3-font-weight);
|
|
11078
10983
|
line-height: var(--wui-typography-label-3-line-height);
|
|
11079
10984
|
color: var(--wui-color-text);
|
|
11080
10985
|
padding: 0;
|
|
@@ -13631,8 +13536,8 @@ Mark.displayName = "Mark_UI";
|
|
|
13631
13536
|
//#endregion
|
|
13632
13537
|
//#region src/css/baseMarkdownCss.tsx
|
|
13633
13538
|
const textSizeToTokenMap = {
|
|
13634
|
-
body2: "--wui-typography-body-2-size",
|
|
13635
|
-
body3: "--wui-typography-body-3-size"
|
|
13539
|
+
body2: "--wui-typography-body-2-font-size",
|
|
13540
|
+
body3: "--wui-typography-body-3-font-size"
|
|
13636
13541
|
};
|
|
13637
13542
|
const baseMarkdownCss = (textSize = "body2") => css`
|
|
13638
13543
|
--wui-markdown-base-unit: var(${textSizeToTokenMap[textSize]});
|
|
@@ -13826,7 +13731,7 @@ const StyledLeftIconContainer = styled.div`
|
|
|
13826
13731
|
width: var(--menu-item-left-icon-size);
|
|
13827
13732
|
|
|
13828
13733
|
&& {
|
|
13829
|
-
svg {
|
|
13734
|
+
& svg {
|
|
13830
13735
|
height: var(--menu-item-left-icon-size);
|
|
13831
13736
|
width: var(--menu-item-left-icon-size);
|
|
13832
13737
|
flex: 0 0 var(--menu-item-left-icon-size);
|
|
@@ -13838,7 +13743,7 @@ const StyledRightIconContainer = styled.div`
|
|
|
13838
13743
|
width: var(--menu-item-right-icon-size);
|
|
13839
13744
|
|
|
13840
13745
|
&& {
|
|
13841
|
-
svg {
|
|
13746
|
+
& svg {
|
|
13842
13747
|
height: var(--menu-item-right-icon-size);
|
|
13843
13748
|
width: var(--menu-item-right-icon-size);
|
|
13844
13749
|
flex: 0 0 var(--menu-item-right-icon-size);
|
|
@@ -13854,7 +13759,7 @@ const StyledLabelAndDescriptionContainer = styled.div`
|
|
|
13854
13759
|
const StyledBadgeContainer = styled.div`
|
|
13855
13760
|
align-self: start;
|
|
13856
13761
|
justify-self: end;
|
|
13857
|
-
font-size: var(--wui-typography-label-4-size);
|
|
13762
|
+
font-size: var(--wui-typography-label-4-font-size);
|
|
13858
13763
|
color: var(--wui-color-text-secondary);
|
|
13859
13764
|
`;
|
|
13860
13765
|
const MenuItemButton = ({ children, appearance, command, icon, ref, ...props }) => {
|
|
@@ -13939,7 +13844,8 @@ const SubMenuTrigger = ({ icon, ...props }) => {
|
|
|
13939
13844
|
})
|
|
13940
13845
|
});
|
|
13941
13846
|
};
|
|
13942
|
-
const
|
|
13847
|
+
const NOOP$3 = () => null;
|
|
13848
|
+
const SubMenu = ({ label, description, children, onOpenChange = NOOP$3, ...props }) => {
|
|
13943
13849
|
const { isSmAndUp } = useMq();
|
|
13944
13850
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
13945
13851
|
const { compact } = useMenuContext();
|
|
@@ -13964,7 +13870,8 @@ const SubMenu = ({ label, description, children, onOpenChange = () => null, ...p
|
|
|
13964
13870
|
SubMenu.displayName = "SubMenu_UI";
|
|
13965
13871
|
//#endregion
|
|
13966
13872
|
//#region src/components/Menu/MenuItem.tsx
|
|
13967
|
-
const
|
|
13873
|
+
const NOOP$2 = () => null;
|
|
13874
|
+
const MenuItem = ({ onSelect = NOOP$2, closeOnClick = true, ref, ...props }) => {
|
|
13968
13875
|
return /* @__PURE__ */ jsx(Menu$1.Item, {
|
|
13969
13876
|
closeOnClick,
|
|
13970
13877
|
nativeButton: isNil(props.href),
|
|
@@ -13987,10 +13894,11 @@ const MenuRadioGroup = ({ children, ...props }) => {
|
|
|
13987
13894
|
MenuRadioGroup.displayName = "MenuRadioGroup_UI";
|
|
13988
13895
|
//#endregion
|
|
13989
13896
|
//#region src/components/Menu/RadioMenuItem.tsx
|
|
13990
|
-
const
|
|
13897
|
+
const DEFAULT_INDICATOR = /* @__PURE__ */ jsx(Icon, {
|
|
13991
13898
|
size: "sm",
|
|
13992
13899
|
type: "checkmark"
|
|
13993
|
-
})
|
|
13900
|
+
});
|
|
13901
|
+
const RadioMenuItem = ({ onSelect, value, indicator = DEFAULT_INDICATOR, ...props }) => {
|
|
13994
13902
|
const extraProps = onSelect ? { onClick: onSelect } : {};
|
|
13995
13903
|
return /* @__PURE__ */ jsx(Menu$1.RadioItem, {
|
|
13996
13904
|
closeOnClick: true,
|
|
@@ -14037,7 +13945,8 @@ const CheckboxIndicator = ({ checked, ...props }) => {
|
|
|
14037
13945
|
})]
|
|
14038
13946
|
});
|
|
14039
13947
|
};
|
|
14040
|
-
const
|
|
13948
|
+
const NOOP$1 = () => null;
|
|
13949
|
+
const CheckboxMenuItem = ({ onSelect = NOOP$1, checked, onCheckedChange, ...props }) => {
|
|
14041
13950
|
return /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
|
|
14042
13951
|
checked,
|
|
14043
13952
|
closeOnClick: false,
|
|
@@ -14142,16 +14051,10 @@ const MeterLabelContainer = styled.div`
|
|
|
14142
14051
|
align-items: baseline;
|
|
14143
14052
|
`;
|
|
14144
14053
|
const MeterLabel = styled.div`
|
|
14145
|
-
font
|
|
14146
|
-
line-height: var(--wui-typography-heading-5-line-height);
|
|
14147
|
-
font-size: var(--wui-typography-heading-5-size);
|
|
14148
|
-
font-weight: var(--wui-typography-heading-5-weight);
|
|
14054
|
+
font: var(--wui-typography-heading-5);
|
|
14149
14055
|
`;
|
|
14150
14056
|
const MeterLabelMeta = styled.div`
|
|
14151
|
-
font
|
|
14152
|
-
line-height: var(--wui-typography-heading-5-line-height);
|
|
14153
|
-
font-size: var(--wui-typography-heading-5-size);
|
|
14154
|
-
font-weight: var(--wui-typography-heading-5-weight);
|
|
14057
|
+
font: var(--wui-typography-heading-5);
|
|
14155
14058
|
`;
|
|
14156
14059
|
const MeterBarContainer = styled.div`
|
|
14157
14060
|
position: relative;
|
|
@@ -14182,8 +14085,8 @@ const MeterSegmentBar = styled.div`
|
|
|
14182
14085
|
`;
|
|
14183
14086
|
const MeterDescription = styled.div`
|
|
14184
14087
|
line-height: var(--wui-typography-label-3-line-height);
|
|
14185
|
-
font-size: var(--wui-typography-label-3-size);
|
|
14186
|
-
font-weight: var(--wui-typography-label-3-weight);
|
|
14088
|
+
font-size: var(--wui-typography-label-3-font-size);
|
|
14089
|
+
font-weight: var(--wui-typography-label-3-font-weight);
|
|
14187
14090
|
color: var(--wui-color-text-secondary);
|
|
14188
14091
|
`;
|
|
14189
14092
|
const MeterKey = styled.div`
|
|
@@ -14205,8 +14108,8 @@ const MeterKeyColorIndicator = styled.div`
|
|
|
14205
14108
|
`;
|
|
14206
14109
|
const MeterKeyLabel = styled.span`
|
|
14207
14110
|
line-height: var(--wui-typography-label-3-line-height);
|
|
14208
|
-
font-size: var(--wui-typography-label-3-size);
|
|
14209
|
-
font-weight: var(--wui-typography-label-3-weight);
|
|
14111
|
+
font-size: var(--wui-typography-label-3-font-size);
|
|
14112
|
+
font-weight: var(--wui-typography-label-3-font-weight);
|
|
14210
14113
|
color: var(--wui-color-text-secondary);
|
|
14211
14114
|
`;
|
|
14212
14115
|
const nodeToString = (node) => {
|
|
@@ -14320,10 +14223,7 @@ const Header = styled.header`
|
|
|
14320
14223
|
}
|
|
14321
14224
|
`;
|
|
14322
14225
|
const Title = styled(Dialog.Title)`
|
|
14323
|
-
font
|
|
14324
|
-
line-height: var(--wui-typography-heading-2-line-height);
|
|
14325
|
-
font-size: var(--wui-typography-heading-2-size);
|
|
14326
|
-
font-weight: var(--wui-typography-heading-2-weight);
|
|
14226
|
+
font: var(--wui-typography-heading-2);
|
|
14327
14227
|
overflow-wrap: anywhere;
|
|
14328
14228
|
`;
|
|
14329
14229
|
const ModalHeader = ({ title, hideTitle, hideCloseButton }) => {
|
|
@@ -14586,7 +14486,7 @@ const StyledTrack = styled(Progress.Track)`
|
|
|
14586
14486
|
const ProgressBarLabel = styled.div`
|
|
14587
14487
|
display: flex;
|
|
14588
14488
|
line-height: var(--wui-typography-label-3-line-height);
|
|
14589
|
-
font-size: var(--wui-typography-label-3-size);
|
|
14489
|
+
font-size: var(--wui-typography-label-3-font-size);
|
|
14590
14490
|
font-weight: var(--wui-typography-weight-label);
|
|
14591
14491
|
color: var(--wui-color-text-secondary);
|
|
14592
14492
|
flex-shrink: 0;
|
|
@@ -14841,7 +14741,7 @@ const StyledCard = styled.label`
|
|
|
14841
14741
|
|
|
14842
14742
|
&:has([data-wui-radio-card-image]) {
|
|
14843
14743
|
&:has(input:disabled) {
|
|
14844
|
-
[data-wui-radio-card-image] {
|
|
14744
|
+
& [data-wui-radio-card-image] {
|
|
14845
14745
|
filter: grayscale(100%);
|
|
14846
14746
|
}
|
|
14847
14747
|
}
|
|
@@ -15236,8 +15136,8 @@ const segmentedControlItemStyles = css`
|
|
|
15236
15136
|
gap: 2px;
|
|
15237
15137
|
flex-grow: 1;
|
|
15238
15138
|
flex-shrink: 1;
|
|
15239
|
-
font-size: var(--wui-typography-label-3-size);
|
|
15240
|
-
font-weight: var(--wui-typography-label-3-weight);
|
|
15139
|
+
font-size: var(--wui-typography-label-3-font-size);
|
|
15140
|
+
font-weight: var(--wui-typography-label-3-font-weight);
|
|
15241
15141
|
line-height: var(--wui-typography-label-3-line-height);
|
|
15242
15142
|
justify-content: center;
|
|
15243
15143
|
padding: 6px ${({ $hasLabel }) => $hasLabel ? "12px" : "6px"};
|
|
@@ -15272,7 +15172,7 @@ const segmentedControlItemStyles = css`
|
|
|
15272
15172
|
cursor: default;
|
|
15273
15173
|
transition: none;
|
|
15274
15174
|
|
|
15275
|
-
svg path {
|
|
15175
|
+
& svg path {
|
|
15276
15176
|
fill: var(--wui-color-icon-selected);
|
|
15277
15177
|
}
|
|
15278
15178
|
|
|
@@ -15286,7 +15186,7 @@ const segmentedControlItemStyles = css`
|
|
|
15286
15186
|
cursor: not-allowed;
|
|
15287
15187
|
color: var(--wui-color-text-disabled);
|
|
15288
15188
|
|
|
15289
|
-
svg path {
|
|
15189
|
+
& svg path {
|
|
15290
15190
|
fill: var(--wui-color-icon-disabled);
|
|
15291
15191
|
}
|
|
15292
15192
|
|
|
@@ -15479,10 +15379,11 @@ const collectItemLabels = (children) => Children.toArray(children).flatMap((chil
|
|
|
15479
15379
|
if (childChildren !== void 0 && childChildren !== null) return collectItemLabels(childChildren);
|
|
15480
15380
|
return [];
|
|
15481
15381
|
});
|
|
15382
|
+
const NOOP = () => null;
|
|
15482
15383
|
/**
|
|
15483
15384
|
* Display a list of options and choose one of them. Replacement for the native Select HTML element.
|
|
15484
15385
|
*/
|
|
15485
|
-
const Select = ({ colorScheme = "inherit", children, onOpenChange =
|
|
15386
|
+
const Select = ({ colorScheme = "inherit", children, onOpenChange = NOOP, onChange = NOOP, placeholder = "Select...", fullWidth = false, forceOpen = false, showScrollArrows = false, disabled, name, value, "aria-invalid": ariaInvalid, ref: forwardedRef, ...props }) => {
|
|
15486
15387
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
15487
15388
|
const rootProps = {
|
|
15488
15389
|
disabled,
|
|
@@ -15746,9 +15647,9 @@ SidebarGroup.displayName = "SidebarGroup_UI";
|
|
|
15746
15647
|
//#region src/components/Sidebar/SidebarButton.tsx
|
|
15747
15648
|
const StyledSidebarButton = styled(Button)`
|
|
15748
15649
|
--button-label-gap: var(--wui-space-02);
|
|
15749
|
-
--button-typography-size: var(--wui-typography-label-2-size);
|
|
15650
|
+
--button-typography-size: var(--wui-typography-label-2-font-size);
|
|
15750
15651
|
--button-typography-line-height: var(--wui-typography-label-2-line-height);
|
|
15751
|
-
--button-typography-weight: var(--wui-typography-body-2-weight);
|
|
15652
|
+
--button-typography-weight: var(--wui-typography-body-2-font-weight);
|
|
15752
15653
|
--button-label-padding-horizontal: var(--wui-space-00);
|
|
15753
15654
|
|
|
15754
15655
|
padding-inline: var(--wui-sidebar-item-inset);
|
|
@@ -15855,7 +15756,8 @@ const StyledSliderThumb = styled(Slider$1.Thumb)`
|
|
|
15855
15756
|
outline-width: 2px;
|
|
15856
15757
|
}
|
|
15857
15758
|
`;
|
|
15858
|
-
const
|
|
15759
|
+
const DEFAULT_INITIAL_VALUE = [0];
|
|
15760
|
+
const Slider = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled = false, initialValue = DEFAULT_INITIAL_VALUE, max = 100, min = 0, onChange, onValueCommitted, step = 1, value, "data-testid": dataTestId = "ui-slider", ...otherProps }) => {
|
|
15859
15761
|
if (!(isNonEmptyString(ariaLabel) || isNonEmptyString(ariaLabelledby))) throw new Error("UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop.");
|
|
15860
15762
|
const values = value ?? initialValue;
|
|
15861
15763
|
const handleValueChange = (newValue) => {
|
|
@@ -15893,23 +15795,25 @@ const StyledSplitButton = styled.span`
|
|
|
15893
15795
|
white-space: nowrap;
|
|
15894
15796
|
|
|
15895
15797
|
&:has(:nth-child(2)) {
|
|
15896
|
-
> [data-wui-button='true']:first-child {
|
|
15798
|
+
& > [data-wui-button='true']:first-child {
|
|
15897
15799
|
border-top-right-radius: 0;
|
|
15898
15800
|
border-bottom-right-radius: 0;
|
|
15899
15801
|
padding-right: 0;
|
|
15900
15802
|
}
|
|
15901
15803
|
|
|
15902
|
-
> [data-wui-button='true']:not(:first-child) {
|
|
15804
|
+
& > [data-wui-button='true']:not(:first-child) {
|
|
15903
15805
|
border-top-left-radius: 0;
|
|
15904
15806
|
border-bottom-left-radius: 0;
|
|
15905
15807
|
display: inline-flex;
|
|
15906
15808
|
}
|
|
15907
15809
|
}
|
|
15908
15810
|
`;
|
|
15811
|
+
const DEFAULT_MENU_ICON = /* @__PURE__ */ jsx(Icon, { type: "caret-down" });
|
|
15812
|
+
const DEFAULT_MENU_PROPS = {};
|
|
15909
15813
|
/**
|
|
15910
15814
|
* A SplitButton is an extension of [Button](/components/Button) that adds a menu to the right hand side of the button.
|
|
15911
15815
|
*/
|
|
15912
|
-
const SplitButton = ({ children, menuLabel = "Select an option", menuIcon =
|
|
15816
|
+
const SplitButton = ({ children, menuLabel = "Select an option", menuIcon = DEFAULT_MENU_ICON, menuItems, disabled = false, colorScheme = "inherit", variant = "solid", secondaryAction, size = "md", unstyled = false, menuProps = DEFAULT_MENU_PROPS, ...props }) => {
|
|
15913
15817
|
return /* @__PURE__ */ jsxs(StyledSplitButton, {
|
|
15914
15818
|
$colorScheme: colorScheme,
|
|
15915
15819
|
children: [
|
|
@@ -16010,14 +15914,14 @@ const sharedStyles = css`
|
|
|
16010
15914
|
`;
|
|
16011
15915
|
const StyledTh = styled.th`
|
|
16012
15916
|
${sharedStyles}
|
|
16013
|
-
font-size: var(--wui-typography-body-4-size);
|
|
15917
|
+
font-size: var(--wui-typography-body-4-font-size);
|
|
16014
15918
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
16015
15919
|
line-height: var(--wui-typography-body-4-line-height);
|
|
16016
15920
|
`;
|
|
16017
15921
|
const StyledTd = styled.td`
|
|
16018
15922
|
${sharedStyles}
|
|
16019
|
-
font-size: var(--wui-typography-body-2-size);
|
|
16020
|
-
font-weight: var(--wui-typography-body-2-weight);
|
|
15923
|
+
font-size: var(--wui-typography-body-2-font-size);
|
|
15924
|
+
font-weight: var(--wui-typography-body-2-font-weight);
|
|
16021
15925
|
line-height: var(--wui-typography-body-2-line-height);
|
|
16022
15926
|
`;
|
|
16023
15927
|
const TableCell = ({ children, ...props }) => {
|
|
@@ -16204,7 +16108,7 @@ const StyledThumbnailBadge = styled.div`
|
|
|
16204
16108
|
bottom: var(--wui-thumbnail-badge-offset, var(--wui-space-01));
|
|
16205
16109
|
color: var(--wui-color-text-on-fill);
|
|
16206
16110
|
display: flex;
|
|
16207
|
-
font-size: var(--wui-typography-body-4-size);
|
|
16111
|
+
font-size: var(--wui-typography-body-4-font-size);
|
|
16208
16112
|
font-weight: var(--wui-typography-weight-body-bold);
|
|
16209
16113
|
gap: var(--wui-space-01);
|
|
16210
16114
|
padding: 0 var(--wui-space-01);
|
|
@@ -16217,7 +16121,7 @@ const StyledThumbnailBadge = styled.div`
|
|
|
16217
16121
|
width: 12px;
|
|
16218
16122
|
flex: 0 0 12px;
|
|
16219
16123
|
|
|
16220
|
-
path {
|
|
16124
|
+
& path {
|
|
16221
16125
|
color: var(--wui-color-icon-on-fill);
|
|
16222
16126
|
}
|
|
16223
16127
|
}
|
|
@@ -16519,12 +16423,13 @@ const StyledThumbnailCollage = styled.div`
|
|
|
16519
16423
|
width: 100%;
|
|
16520
16424
|
}
|
|
16521
16425
|
`;
|
|
16426
|
+
const DEFAULT_CHILDREN = [];
|
|
16522
16427
|
/**
|
|
16523
16428
|
* A `ThumbnailCollage` is a component that displays multiple `Thumbnail` components in a responsive grid layout.
|
|
16524
16429
|
* It supports up to 3 thumbnails arranged in different configurations based on the number of children provided.
|
|
16525
16430
|
* If no thumbnails are provided, it displays a fallback thumbnail with a gradient background.
|
|
16526
16431
|
*/
|
|
16527
|
-
const ThumbnailCollage = ({ children =
|
|
16432
|
+
const ThumbnailCollage = ({ children = DEFAULT_CHILDREN, gradientBackground = "defaultMidOne", ...props }) => {
|
|
16528
16433
|
const thumbnailArray = Children.toArray(children);
|
|
16529
16434
|
const truncatedThumbnails = thumbnailArray.slice(0, 3);
|
|
16530
16435
|
const thumbnails = isNonEmptyArray(thumbnailArray) ? truncatedThumbnails.map((child) => {
|
|
@@ -16577,7 +16482,7 @@ const WistiaLogoComponent = styled.svg`
|
|
|
16577
16482
|
max-width: 100%;
|
|
16578
16483
|
|
|
16579
16484
|
&:hover {
|
|
16580
|
-
path {
|
|
16485
|
+
& path {
|
|
16581
16486
|
${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
|
|
16582
16487
|
}
|
|
16583
16488
|
}
|