@vector-im/compound-design-tokens 0.0.2 → 0.0.3

package/assets/web/js/cpdLight.js

@@ -36,7 +36,6 @@ export const cpdFontFamilyMono = "Inconsolata";
 export const cpdFontWeightRegular = "400";
 export const cpdFontWeightMedium = "500";
 export const cpdFontWeightSemibold = "600";
-export const cpdFontWeightBold = "700";
 export const cpdFontLineHeightMinimum = "1";
 export const cpdFontLineHeightTight = "1.25";
 export const cpdFontLineHeightRegular = "1.5";
@@ -77,20 +76,37 @@ export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter";
 export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter";
 export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter";
 export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter";
-export const cpdColorGray100 = "#fbfbfc";
-export const cpdColorGray200 = "#f7f8f9";
-export const cpdColorGray300 = "#eef1f3";
-export const cpdColorGray400 = "#e2e6ea";
-export const cpdColorGray500 = "#ccd3da";
-export const cpdColorGray600 = "#bcc5ce";
-export const cpdColorGray700 = "#a2aebc";
-export const cpdColorGray800 = "#798b9d";
-export const cpdColorGray900 = "#5b6e81";
-export const cpdColorGray1000 = "#4d5f72";
-export const cpdColorGray1100 = "#415265";
-export const cpdColorGray1200 = "#2f4152";
-export const cpdColorGray1300 = "#1e2e3f";
-export const cpdColorGray1400 = "#0f1e2e";
+export const cpdIconChat = "icons/chat.svg";
+export const cpdIconCheckCircle = "icons/check-circle.svg";
+export const cpdIconCheck = "icons/check.svg";
+export const cpdIconChevron = "icons/chevron.svg";
+export const cpdIconClose = "icons/close.svg";
+export const cpdIconComputer = "icons/computer.svg";
+export const cpdIconDelete = "icons/delete.svg";
+export const cpdIconError = "icons/error.svg";
+export const cpdIconInfo = "icons/info.svg";
+export const cpdIconLock = "icons/lock.svg";
+export const cpdIconMobile = "icons/mobile.svg";
+export const cpdIconThread = "icons/thread.svg";
+export const cpdIconUser = "icons/user.svg";
+export const cpdIconVisibilityInvisible = "icons/visibility-invisible.svg";
+export const cpdIconVisibilityVisible = "icons/visibility-visible.svg";
+export const cpdIconWebBrowser = "icons/web-browser.svg";
+export const cpdColorThemeBg = "#ffffff";
+export const cpdColorGray100 = "#fbfcfd";
+export const cpdColorGray200 = "#f7f9fa";
+export const cpdColorGray300 = "#f0f2f5";
+export const cpdColorGray400 = "#e1e6ec";
+export const cpdColorGray500 = "#cdd3da";
+export const cpdColorGray600 = "#bdc4cc";
+export const cpdColorGray700 = "#a6adb7";
+export const cpdColorGray800 = "#818a95";
+export const cpdColorGray900 = "#656d77";
+export const cpdColorGray1000 = "#595e67";
+export const cpdColorGray1100 = "#4c5158";
+export const cpdColorGray1200 = "#3c4045";
+export const cpdColorGray1300 = "#2b2d32";
+export const cpdColorGray1400 = "#1b1d22";
 export const cpdColorRed100 = "#fffaf9";
 export const cpdColorRed200 = "#fff7f6";
 export const cpdColorRed300 = "#ffefec";
@@ -230,4 +246,212 @@ export const cpdColorPink1000 = "#b80a5b";
 export const cpdColorPink1100 = "#9f0850";
 export const cpdColorPink1200 = "#7e0642";
 export const cpdColorPink1300 = "#5f002b";
-export const cpdColorPink1400 = "#430017";
+export const cpdColorPink1400 = "#430017";
+export const cpdColorAlphaGray100 = "hsla(210, 48%, 41%, 0.02)";
+export const cpdColorAlphaGray200 = "hsla(200, 41%, 36%, 0.04)";
+export const cpdColorAlphaGray300 = "hsla(216, 89%, 18%, 0.06)";
+export const cpdColorAlphaGray400 = "hsla(213, 90%, 20%, 0.12)";
+export const cpdColorAlphaGray500 = "hsla(212, 87%, 15%, 0.2)";
+export const cpdColorAlphaGray600 = "hsla(212, 97%, 12%, 0.26)";
+export const cpdColorAlphaGray700 = "hsla(215, 96%, 10%, 0.35)";
+export const cpdColorAlphaGray800 = "hsla(213, 87%, 9%, 0.5)";
+export const cpdColorAlphaGray900 = "hsla(213, 83%, 7%, 0.61)";
+export const cpdColorAlphaGray1000 = "hsla(218, 79%, 6%, 0.66)";
+export const cpdColorAlphaGray1100 = "hsla(215, 74%, 5%, 0.71)";
+export const cpdColorAlphaGray1200 = "hsla(213, 73%, 3%, 0.77)";
+export const cpdColorAlphaGray1300 = "hsla(225, 57%, 3%, 0.84)";
+export const cpdColorAlphaGray1400 = "hsla(223, 64%, 2%, 0.9)";
+export const cpdColorAlphaRed100 = "hsla(10, 100%, 61%, 0.03)";
+export const cpdColorAlphaRed200 = "hsla(7, 100%, 56%, 0.04)";
+export const cpdColorAlphaRed300 = "hsla(9, 100%, 54%, 0.08)";
+export const cpdColorAlphaRed400 = "hsla(8, 100%, 52%, 0.15)";
+export const cpdColorAlphaRed500 = "hsla(8, 100%, 51%, 0.27)";
+export const cpdColorAlphaRed600 = "hsla(7, 100%, 51%, 0.36)";
+export const cpdColorAlphaRed700 = "hsla(5, 100%, 51%, 0.5)";
+export const cpdColorAlphaRed800 = "hsla(0, 100%, 51%, 0.77)";
+export const cpdColorAlphaRed900 = "hsla(355, 98%, 41%, 0.91)";
+export const cpdColorAlphaRed1000 = "hsla(353, 98%, 37%, 0.95)";
+export const cpdColorAlphaRed1100 = "hsla(350, 99%, 32%, 0.99)";
+export const cpdColorAlphaRed1200 = "hsl(357, 100%, 26%, 1)";
+export const cpdColorAlphaRed1300 = "hsl(0, 100%, 19%, 1)";
+export const cpdColorAlphaRed1400 = "hsl(0, 100%, 14%, 1)";
+export const cpdColorAlphaOrange100 = "hsla(22, 100%, 61%, 0.04)";
+export const cpdColorAlphaOrange200 = "hsla(26, 100%, 55%, 0.07)";
+export const cpdColorAlphaOrange300 = "hsla(24, 100%, 52%, 0.11)";
+export const cpdColorAlphaOrange400 = "hsla(25, 100%, 51%, 0.22)";
+export const cpdColorAlphaOrange500 = "hsla(25, 100%, 50%, 0.37)";
+export const cpdColorAlphaOrange600 = "hsla(26, 98%, 50%, 0.52)";
+export const cpdColorAlphaOrange700 = "hsla(27, 100%, 48%, 0.75)";
+export const cpdColorAlphaOrange800 = "hsl(28, 100%, 43%, 1)";
+export const cpdColorAlphaOrange900 = "hsl(22, 100%, 37%, 1)";
+export const cpdColorAlphaOrange1000 = "hsl(18, 100%, 34%, 1)";
+export const cpdColorAlphaOrange1100 = "hsl(13, 100%, 30%, 1)";
+export const cpdColorAlphaOrange1200 = "hsl(0, 100%, 26%, 1)";
+export const cpdColorAlphaOrange1300 = "hsl(0, 100%, 19%, 1)";
+export const cpdColorAlphaOrange1400 = "hsl(0, 100%, 14%, 1)";
+export const cpdColorAlphaYellow100 = "hsla(48, 100%, 51%, 0.06)";
+export const cpdColorAlphaYellow200 = "hsla(46, 100%, 53%, 0.13)";
+export const cpdColorAlphaYellow300 = "hsla(47, 100%, 51%, 0.25)";
+export const cpdColorAlphaYellow400 = "hsla(47, 100%, 51%, 0.49)";
+export const cpdColorAlphaYellow500 = "hsl(49, 100%, 49%, 1)";
+export const cpdColorAlphaYellow600 = "hsl(47, 100%, 47%, 1)";
+export const cpdColorAlphaYellow700 = "hsl(44, 100%, 44%, 1)";
+export const cpdColorAlphaYellow800 = "hsl(39, 100%, 37%, 1)";
+export const cpdColorAlphaYellow900 = "hsl(34, 100%, 31%, 1)";
+export const cpdColorAlphaYellow1000 = "hsl(32, 100%, 28%, 1)";
+export const cpdColorAlphaYellow1100 = "hsl(30, 100%, 25%, 1)";
+export const cpdColorAlphaYellow1200 = "hsl(26, 100%, 21%, 1)";
+export const cpdColorAlphaYellow1300 = "hsl(19, 100%, 17%, 1)";
+export const cpdColorAlphaYellow1400 = "hsl(6, 100%, 13%, 1)";
+export const cpdColorAlphaLime100 = "hsla(103, 75%, 46%, 0.04)";
+export const cpdColorAlphaLime200 = "hsla(107, 89%, 44%, 0.07)";
+export const cpdColorAlphaLime300 = "hsla(107, 98%, 41%, 0.15)";
+export const cpdColorAlphaLime400 = "hsla(105, 92%, 42%, 0.28)";
+export const cpdColorAlphaLime500 = "hsla(104, 98%, 40%, 0.51)";
+export const cpdColorAlphaLime600 = "hsla(102, 97%, 41%, 0.71)";
+export const cpdColorAlphaLime700 = "hsla(102, 100%, 37%, 0.86)";
+export const cpdColorAlphaLime800 = "hsla(107, 99%, 29%, 0.91)";
+export const cpdColorAlphaLime900 = "hsla(113, 97%, 24%, 0.96)";
+export const cpdColorAlphaLime1000 = "hsl(120, 100%, 22%, 1)";
+export const cpdColorAlphaLime1100 = "hsl(120, 100%, 19%, 1)";
+export const cpdColorAlphaLime1200 = "hsl(120, 100%, 15%, 1)";
+export const cpdColorAlphaLime1300 = "hsl(120, 100%, 11%, 1)";
+export const cpdColorAlphaLime1400 = "hsl(120, 100%, 7%, 1)";
+export const cpdColorAlphaGreen100 = "hsla(156, 79%, 41%, 0.03)";
+export const cpdColorAlphaGreen200 = "hsla(150, 79%, 41%, 0.06)";
+export const cpdColorAlphaGreen300 = "hsla(150, 100%, 36%, 0.11)";
+export const cpdColorAlphaGreen400 = "hsla(151, 93%, 37%, 0.23)";
+export const cpdColorAlphaGreen500 = "hsla(154, 96%, 37%, 0.41)";
+export const cpdColorAlphaGreen600 = "hsla(156, 99%, 36%, 0.56)";
+export const cpdColorAlphaGreen700 = "hsla(163, 99%, 38%, 0.96)";
+export const cpdColorAlphaGreen800 = "hsl(166, 100%, 30%, 1)";
+export const cpdColorAlphaGreen900 = "hsl(168, 100%, 24%, 1)";
+export const cpdColorAlphaGreen1000 = "hsl(166, 100%, 21%, 1)";
+export const cpdColorAlphaGreen1100 = "hsl(165, 100%, 18%, 1)";
+export const cpdColorAlphaGreen1200 = "hsl(162, 100%, 14%, 1)";
+export const cpdColorAlphaGreen1300 = "hsl(157, 100%, 10%, 1)";
+export const cpdColorAlphaGreen1400 = "hsl(149, 100%, 7%, 1)";
+export const cpdColorAlphaCyan100 = "hsla(180, 79%, 41%, 0.03)";
+export const cpdColorAlphaCyan200 = "hsla(186, 79%, 41%, 0.06)";
+export const cpdColorAlphaCyan300 = "hsla(188, 100%, 38%, 0.11)";
+export const cpdColorAlphaCyan400 = "hsla(186, 100%, 37%, 0.22)";
+export const cpdColorAlphaCyan500 = "hsla(186, 95%, 38%, 0.4)";
+export const cpdColorAlphaCyan600 = "hsla(187, 99%, 38%, 0.54)";
+export const cpdColorAlphaCyan700 = "hsla(186, 99%, 40%, 0.92)";
+export const cpdColorAlphaCyan800 = "hsl(194, 100%, 38%, 1)";
+export const cpdColorAlphaCyan900 = "hsl(200, 100%, 34%, 1)";
+export const cpdColorAlphaCyan1000 = "hsl(202, 100%, 31%, 1)";
+export const cpdColorAlphaCyan1100 = "hsl(204, 100%, 28%, 1)";
+export const cpdColorAlphaCyan1200 = "hsl(208, 100%, 23%, 1)";
+export const cpdColorAlphaCyan1300 = "hsl(213, 100%, 19%, 1)";
+export const cpdColorAlphaCyan1400 = "hsl(221, 100%, 16%, 1)";
+export const cpdColorAlphaBlue100 = "hsla(210, 100%, 61%, 0.03)";
+export const cpdColorAlphaBlue200 = "hsla(218, 100%, 57%, 0.05)";
+export const cpdColorAlphaBlue300 = "hsla(215, 100%, 52%, 0.09)";
+export const cpdColorAlphaBlue400 = "hsla(216, 95%, 51%, 0.16)";
+export const cpdColorAlphaBlue500 = "hsla(215, 93%, 50%, 0.28)";
+export const cpdColorAlphaBlue600 = "hsla(216, 95%, 48%, 0.37)";
+export const cpdColorAlphaBlue700 = "hsla(215, 98%, 47%, 0.51)";
+export const cpdColorAlphaBlue800 = "hsla(215, 100%, 46%, 0.75)";
+export const cpdColorAlphaBlue900 = "hsla(213, 99%, 44%, 0.99)";
+export const cpdColorAlphaBlue1000 = "hsla(214, 98%, 39%, 0.99)";
+export const cpdColorAlphaBlue1100 = "hsla(216, 99%, 35%, 0.98)";
+export const cpdColorAlphaBlue1200 = "hsla(218, 99%, 29%, 0.99)";
+export const cpdColorAlphaBlue1300 = "hsl(222, 98%, 24%, 1)";
+export const cpdColorAlphaBlue1400 = "hsl(232, 100%, 20%, 1)";
+export const cpdColorAlphaPurple100 = "hsla(240, 100%, 61%, 0.02)";
+export const cpdColorAlphaPurple200 = "hsla(248, 100%, 61%, 0.04)";
+export const cpdColorAlphaPurple300 = "hsla(248, 100%, 55%, 0.07)";
+export const cpdColorAlphaPurple400 = "hsla(248, 100%, 53%, 0.12)";
+export const cpdColorAlphaPurple500 = "hsla(248, 100%, 51%, 0.2)";
+export const cpdColorAlphaPurple600 = "hsla(249, 100%, 51%, 0.27)";
+export const cpdColorAlphaPurple700 = "hsla(251, 100%, 51%, 0.38)";
+export const cpdColorAlphaPurple800 = "hsla(254, 99%, 49%, 0.56)";
+export const cpdColorAlphaPurple900 = "hsla(258, 98%, 47%, 0.73)";
+export const cpdColorAlphaPurple1000 = "hsla(259, 98%, 42%, 0.79)";
+export const cpdColorAlphaPurple1100 = "hsla(260, 97%, 39%, 0.86)";
+export const cpdColorAlphaPurple1200 = "hsla(264, 98%, 36%, 0.99)";
+export const cpdColorAlphaPurple1300 = "hsl(262, 100%, 28%, 1)";
+export const cpdColorAlphaPurple1400 = "hsl(259, 100%, 20%, 1)";
+export const cpdColorAlphaFuchsia100 = "hsla(300, 95%, 41%, 0.02)";
+export const cpdColorAlphaFuchsia200 = "hsla(293, 95%, 41%, 0.04)";
+export const cpdColorAlphaFuchsia300 = "hsla(295, 89%, 41%, 0.07)";
+export const cpdColorAlphaFuchsia400 = "hsla(298, 91%, 40%, 0.13)";
+export const cpdColorAlphaFuchsia500 = "hsla(296, 93%, 39%, 0.23)";
+export const cpdColorAlphaFuchsia600 = "hsla(297, 93%, 38%, 0.31)";
+export const cpdColorAlphaFuchsia700 = "hsla(295, 96%, 37%, 0.43)";
+export const cpdColorAlphaFuchsia800 = "hsla(295, 97%, 37%, 0.64)";
+export const cpdColorAlphaFuchsia900 = "hsla(293, 100%, 34%, 0.8)";
+export const cpdColorAlphaFuchsia1000 = "hsla(291, 99%, 30%, 0.84)";
+export const cpdColorAlphaFuchsia1100 = "hsla(289, 96%, 28%, 0.88)";
+export const cpdColorAlphaFuchsia1200 = "hsla(286, 97%, 24%, 0.93)";
+export const cpdColorAlphaFuchsia1300 = "hsl(285, 100%, 20%, 1)";
+export const cpdColorAlphaFuchsia1400 = "hsl(281, 100%, 15%, 1)";
+export const cpdColorAlphaPink100 = "hsla(348, 100%, 51%, 0.02)";
+export const cpdColorAlphaPink200 = "hsla(348, 100%, 51%, 0.04)";
+export const cpdColorAlphaPink300 = "hsla(347, 100%, 54%, 0.08)";
+export const cpdColorAlphaPink400 = "hsla(347, 100%, 50%, 0.13)";
+export const cpdColorAlphaPink500 = "hsla(347, 100%, 50%, 0.24)";
+export const cpdColorAlphaPink600 = "hsla(346, 100%, 51%, 0.33)";
+export const cpdColorAlphaPink700 = "hsla(345, 100%, 50%, 0.47)";
+export const cpdColorAlphaPink800 = "hsla(340, 100%, 48%, 0.75)";
+export const cpdColorAlphaPink900 = "hsla(333, 98%, 41%, 0.96)";
+export const cpdColorAlphaPink1000 = "hsla(332, 98%, 36%, 0.97)";
+export const cpdColorAlphaPink1100 = "hsla(331, 100%, 31%, 0.97)";
+export const cpdColorAlphaPink1200 = "hsla(330, 98%, 24%, 0.98)";
+export const cpdColorAlphaPink1300 = "hsl(333, 100%, 19%, 1)";
+export const cpdColorAlphaPink1400 = "hsl(339, 100%, 13%, 1)";
+export const cpdColorTextPrimary = "#1b1d22";
+export const cpdColorTextSecondary = "#656d77";
+export const cpdColorTextPlaceholder = "#818a95";
+export const cpdColorTextDisabled = "#818a95";
+export const cpdColorTextActionPrimary = "#1b1d22";
+export const cpdColorTextActionAccent = "#007a61";
+export const cpdColorTextLinkExternal = "#0467dd";
+export const cpdColorTextCriticalPrimary = "#d51928";
+export const cpdColorTextSuccessPrimary = "#007a61";
+export const cpdColorTextInfoPrimary = "#0467dd";
+export const cpdColorTextOnSolidPrimary = "#ffffff";
+export const cpdColorBgSubtlePrimary = "#e1e6ec";
+export const cpdColorBgSubtleSecondary = "#f0f2f5";
+export const cpdColorBgCanvasDefault = "#ffffff";
+export const cpdColorBgCanvasDisabled = "#f7f9fa";
+export const cpdColorBgCanvasDefaultLevel1 = "#ffffff";
+export const cpdColorBgActionPrimaryRest = "#1b1d22";
+export const cpdColorBgActionPrimaryHovered = "#3c4045";
+export const cpdColorBgActionPrimaryPressed = "#4c5158";
+export const cpdColorBgActionPrimaryDisabled = "#a6adb7";
+export const cpdColorBgActionSecondaryRest = "#ffffff";
+export const cpdColorBgActionSecondaryHovered = "hsla(200, 41%, 36%, 0.04)";
+export const cpdColorBgActionSecondaryPressed = "hsla(216, 89%, 18%, 0.06)";
+export const cpdColorBgCriticalPrimary = "#d51928";
+export const cpdColorBgCriticalHovered = "#bc0f22";
+export const cpdColorBgCriticalSubtle = "#fff7f6";
+export const cpdColorBgCriticalSubtleHovered = "#ffefec";
+export const cpdColorBgSuccessSubtle = "#f1fbf6";
+export const cpdColorBgInfoSubtle = "#f4f8ff";
+export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5";
+export const cpdColorBorderDisabled = "#cdd3da";
+export const cpdColorBorderFocused = "#0467dd";
+export const cpdColorBorderInteractivePrimary = "#818a95";
+export const cpdColorBorderInteractiveSecondary = "#bdc4cc";
+export const cpdColorBorderInteractiveHovered = "#4c5158";
+export const cpdColorBorderCriticalPrimary = "#d51928";
+export const cpdColorBorderCriticalHovered = "#bc0f22";
+export const cpdColorBorderCriticalSubtle = "#ffc5bc";
+export const cpdColorBorderSuccessSubtle = "#98e1c1";
+export const cpdColorBorderInfoSubtle = "#bad5fc";
+export const cpdColorIconPrimary = "#1b1d22";
+export const cpdColorIconSecondary = "#656d77";
+export const cpdColorIconTertiary = "#818a95";
+export const cpdColorIconQuaternary = "#a6adb7";
+export const cpdColorIconDisabled = "#a6adb7";
+export const cpdColorIconPrimaryAlpha = "hsla(223, 64%, 2%, 0.9)";
+export const cpdColorIconSecondaryAlpha = "hsla(213, 83%, 7%, 0.61)";
+export const cpdColorIconTertiaryAlpha = "hsla(213, 87%, 9%, 0.5)";
+export const cpdColorIconQuaternaryAlpha = "hsla(215, 96%, 10%, 0.35)";
+export const cpdColorIconAccentTertiary = "#009b78";
+export const cpdColorIconCriticalPrimary = "#d51928";
+export const cpdColorIconSuccessPrimary = "#007a61";
+export const cpdColorIconInfoPrimary = "#0467dd";
+export const cpdColorIconOnSolidPrimary = "#ffffff";