@ably/ui 8.5.0 → 8.7.0-dev.0ce5893

package/src/core/icons/icon-gui-filter-flow-step-3.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.3939 2.24805H1.68174ZM1.68174 2.24805L1.68052 2.24805ZM22.3939 2.24805C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.28882 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805M22.2745 3.74805H1.80416L3.64786 7.24805H20.4308L22.2745 3.74805ZM22.395 3.74805C22.3953 3.74805 22.3947 3.74805 22.395 3.74805Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.5111 10.248 20.5109 10.248 20.511 10.248C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248ZM20.1743 11.748L18.8274 14.248H5.25102L3.90417 11.748H20.1743ZM20.5122 11.748C20.5125 11.748 20.5119 11.748 20.5122 11.748Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-gui-link.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.6504 10.9943C7.50158 10.9572 7.35629 10.9074 7.21593 10.8456L4.87765 13.184C4.45229 13.6083 3.833 13.7737 3.25284 13.6179C2.67256 13.4622 2.21933 13.009 2.06367 12.4287C1.90788 11.8486 2.07331 11.2293 2.49759 10.8039L6.06769 7.23381C6.2223 7.07685 6.40904 6.95503 6.61497 6.8768C6.67926 6.83877 6.74987 6.81263 6.82337 6.79945C6.91776 6.76913 7.0158 6.75113 7.1148 6.74588C7.34183 6.72638 7.57047 6.75263 7.78724 6.82323C8.03527 6.90906 8.26093 7.04941 8.44766 7.23381C8.60441 7.38756 8.72795 7.57184 8.81054 7.7752C8.82243 7.7753 8.84033 7.7693 8.85222 7.7693C9.03715 7.74745 9.20912 7.66355 9.34015 7.53134L10.1553 6.71619C10.0111 6.47158 9.83729 6.24574 9.63769 6.04375C9.21919 5.62621 8.69782 5.32655 8.12632 5.17503C8.06975 5.15768 8.01211 5.14386 7.95382 5.13346C7.88096 5.10914 7.80457 5.09704 7.72775 5.09778C7.66464 5.08653 7.60111 5.07861 7.53725 5.07389C7.53575 5.07228 7.53361 5.07143 7.53136 5.07143C7.52911 5.07132 7.52696 5.07228 7.52536 5.07389C7.42303 5.05814 7.31921 5.05418 7.21604 5.062C7.07472 5.06286 6.93361 5.07271 6.79348 5.09178H6.78159L6.61498 5.11557C6.3122 5.18082 6.01852 5.28271 5.74037 5.41909C5.42096 5.57949 5.12964 5.79045 4.87765 6.04372L1.30755 9.61383C0.458775 10.4644 0.127904 11.703 0.439273 12.8636C0.750725 14.0241 1.65727 14.9307 2.81785 15.2421C3.97841 15.5535 5.217 15.2226 6.06759 14.3739L9.34009 11.1014C8.77534 11.1789 8.20074 11.1425 7.65035 10.9942L7.6504 10.9943Z" fill="currentColor" />
+  <path d="M14.6953 0.986249C14.0642 0.354761 13.2081 0 12.3153 0C11.4225 0 10.5663 0.354761 9.93528 0.986249L6.66278 4.25875C7.38396 4.15729 8.11907 4.24129 8.79878 4.50272L11.1253 2.17633C11.5504 1.75119 12.1701 1.58511 12.7509 1.74069C13.3316 1.89636 13.7852 2.35001 13.9409 2.93073C14.0965 3.51145 13.9304 4.13117 13.5052 4.55631L11.1789 6.8828L10.8457 7.21592L10.5066 7.55513L9.93539 8.1263H9.93528C9.66614 8.39866 9.31065 8.56914 8.92975 8.60822C8.78704 8.62215 8.64304 8.61819 8.5014 8.59633C8.36158 8.58251 8.22497 8.5464 8.09672 8.48919C7.68798 8.31851 7.36311 7.99356 7.19232 7.5849C6.99239 7.60054 6.80467 7.68701 6.66281 7.82875L5.84766 8.6439C6.13448 9.13707 6.54451 9.54713 7.03759 9.83395C7.16434 9.9112 7.29784 9.97687 7.43626 10.0303C7.57769 10.0959 7.72522 10.1478 7.87663 10.1851C8.67486 10.4001 9.52437 10.3132 10.2625 9.94109C10.4786 9.83277 10.6822 9.70109 10.8694 9.54831L10.8753 9.54242C10.9587 9.47106 11.0478 9.39371 11.1253 9.31635L14.6954 5.74625C15.3269 5.11506 15.6817 4.25899 15.6817 3.36619C15.6817 2.47347 15.3269 1.61729 14.6954 0.98621L14.6953 0.986249Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-gui-resources.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5C4.30964 1.5 3.75 2.05964 3.75 2.75V3.75H5C5.41421 3.75 5.75 4.08579 5.75 4.5C5.75 4.91421 5.41421 5.25 5 5.25H3.75V6.75H5C5.41421 6.75 5.75 7.08579 5.75 7.5C5.75 7.91421 5.41421 8.25 5 8.25H3.75V9.75H5C5.41421 9.75 5.75 10.0858 5.75 10.5C5.75 10.9142 5.41421 11.25 5 11.25H3.75V12.75H5C5.41421 12.75 5.75 13.0858 5.75 13.5C5.75 13.9142 5.41421 14.25 5 14.25H3.75V15.75H5C5.41421 15.75 5.75 16.0858 5.75 16.5C5.75 16.9142 5.41421 17.25 5 17.25H3.75V18.75H5C5.41421 18.75 5.75 19.0858 5.75 19.5C5.75 19.9142 5.41421 20.25 5 20.25H3.75V21.25C3.75 21.9404 4.30964 22.5 5 22.5H18.5C19.1904 22.5 19.75 21.9404 19.75 21.25V19.75H12C10.4812 19.75 9.25 18.5188 9.25 17V12C9.25 10.4812 10.4812 9.25 12 9.25H19.75V3.75C19.75 2.50736 18.7426 1.5 17.5 1.5H5ZM2.25 2.75V3.75H1C0.585786 3.75 0.25 4.08579 0.25 4.5C0.25 4.91421 0.585786 5.25 1 5.25H2.25V6.75H1C0.585786 6.75 0.25 7.08579 0.25 7.5C0.25 7.91421 0.585786 8.25 1 8.25H2.25V9.75H1C0.585786 9.75 0.25 10.0858 0.25 10.5C0.25 10.9142 0.585786 11.25 1 11.25H2.25V12.75H1C0.585786 12.75 0.25 13.0858 0.25 13.5C0.25 13.9142 0.585786 14.25 1 14.25H2.25V15.75H1C0.585786 15.75 0.25 16.0858 0.25 16.5C0.25 16.9142 0.585786 17.25 1 17.25H2.25V18.75H1C0.585786 18.75 0.25 19.0858 0.25 19.5C0.25 19.9142 0.585786 20.25 1 20.25H2.25V21.25C2.25 22.7688 3.48122 24 5 24H18.5C20.0188 24 21.25 22.7688 21.25 21.25V19.7388C22.6516 19.6125 23.75 18.4345 23.75 17V12C23.75 10.5655 22.6516 9.38752 21.25 9.26121V3.75C21.25 1.67893 19.5711 0 17.5 0H5C3.48122 0 2.25 1.23122 2.25 2.75ZM20.5 10.75H12C11.3096 10.75 10.75 11.3096 10.75 12V17C10.75 17.6904 11.3096 18.25 12 18.25H20.5H21C21.6904 18.25 22.25 17.6904 22.25 17V12C22.25 11.3096 21.6904 10.75 21 10.75H20.5ZM12.5 4.25C12.5 3.42157 13.1716 2.75 14 2.75H17C17.8284 2.75 18.5 3.42157 18.5 4.25V5.25C18.5 6.07843 17.8284 6.75 17 6.75H14C13.1716 6.75 12.5 6.07843 12.5 5.25V4.25ZM14 3.75C13.7239 3.75 13.5 3.97386 13.5 4.25V5.25C13.5 5.52614 13.7239 5.75 14 5.75H17C17.2761 5.75 17.5 5.52614 17.5 5.25V4.25C17.5 3.97386 17.2761 3.75 17 3.75H14ZM15.5 13.2582L17.4746 14.4992L15.5 15.7402V13.2582ZM18.0421 15.3236C18.6526 14.9399 18.6526 14.0585 18.0421 13.6747L16.0176 12.4024C15.377 11.9998 14.5 12.4363 14.5 13.2268V15.7716C14.5 16.5621 15.377 16.9986 16.0176 16.596L18.0421 15.3236Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-live-updates-results-metrics-col.svg

@@ -0,0 +1,26 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.5 9.5H33C30.3766 9.5 28.5 11.3766 28.5 14V23C28.5 24.5188 29.4812 25.75 31 25.75H39.75C41.2688 25.75 42.5 24.5188 42.5 23V15.5" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M31.4286 17.5H34.75V12.5H31.4286C31.4286 12.5 30.5 12.5 30.5 13.5V16.5C30.5 17.5 31.4286 17.5 31.4286 17.5Z" stroke="#03020D" stroke-linejoin="round"/>
+<path d="M40.5 15V16.5C40.5 17.5 39.5714 17.5 39.5714 17.5C38.6429 17.5 36.25 17.5 36.25 17.5V12.5H37" stroke="#03020D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.5 31L31.5 28" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M42 31L40 28" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M30.5 29.5H41" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="31.5" cy="21.5" r="1.5" fill="#03020D"/>
+<circle cx="39.5" cy="21.5" r="1.5" fill="#03020D"/>
+<path d="M14.5 4.12444C14.0122 4.0426 13.5111 4 13 4C8.02947 4 4.00003 8.02944 4.00003 13C4.00003 17.9706 8.02947 22 13 22C17.9706 22 22 17.9706 22 13C22 12.047 21.8519 11.1286 21.5774 10.2666" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M10.3121 12.0403L12.3515 10.3026C12.7252 9.98417 13.2749 9.98417 13.6486 10.3026L15.6879 12.0403C16.0221 12.325 16.1315 12.7943 15.9577 13.1974L15.1176 15.1459C14.9596 15.5125 14.5986 15.75 14.1993 15.75H11.8007C11.4015 15.75 11.0405 15.5125 10.8824 15.1459L10.0424 13.1974C9.86861 12.7943 9.978 12.325 10.3121 12.0403Z" fill="#03020D" stroke="#03020D" stroke-width="1.5"/>
+<path d="M10.1954 4.61029L12.3515 6.44738C12.7252 6.76583 13.2749 6.76583 13.6486 6.44738L14.2736 5.91483C14.4966 5.72484 14.625 5.44662 14.625 5.15367L14.625 4.21875" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M21.775 13.5001L19.0118 11.5963C18.8872 11.5104 18.8433 11.3467 18.9083 11.21V11.21C19.0391 10.9352 19.9843 10.2787 20.2844 10.2279C20.5919 10.1758 20.9897 10.1021 21.5 10" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M5.37081 7.59113L6.83859 10.6776C7.04946 11.1211 6.9072 11.652 6.50287 11.9306L3.68849 13.8696" stroke="#03020D" stroke-width="1.5"/>
+<path d="M16 18.5L17 18L20 18.5L18 20.5L15.5 21.5L16 18.5Z" fill="#03020D"/>
+<path d="M5.31416 18.3281L8.71616 18.0006C9.20491 17.9535 9.65552 18.2683 9.77955 18.7434L10.6429 22.0503" stroke="#03020D" stroke-width="1.5"/>
+<path d="M15.3563 22.0504L16.22 18.7436C16.3441 18.2686 16.7947 17.9539 17.2835 18.001L20.6854 18.3288" stroke="#03020D" stroke-width="1.5"/>
+<path d="M18.1185 27.5C17.2809 27.1759 16.3772 27 15.448 27C7.936 27.0233 8.2 33.6262 8.104 34.3261C5.8 34.5594 4 36.4726 4 38.7825C4 41.2556 6.064 43 8.608 43H22.288C25.456 42.93 28 40.6723 28 37.5692C28 36.2139 27.514 34.9733 26.7009 34" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 30C19 27.7909 20.7909 26 23 26C25.2091 26 27 27.7909 27 30C27 32.2091 25.2091 34 23 34C20.7909 34 19 32.2091 19 30Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C16 2.79086 17.7909 1 20 1C22.2091 1 24 2.79086 24 5C24 7.20914 22.2091 9 20 9C17.7909 9 16 7.20914 16 5Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38 10C38 7.79086 39.7909 6 42 6C44.2091 6 46 7.79086 46 10C46 12.2091 44.2091 14 42 14C39.7909 14 38 12.2091 38 10Z" fill="#FF5416"/>
+<path d="M7 11.5V10.5L5.5 8.5L4 11V13.5L7 11.5Z" fill="#03020D"/>
+<path d="M10 19L9 18L6 18.5L8 20.5L10 21.5V19Z" fill="#03020D"/>
+<path d="M19 11L21 10L22 12L21.5 13L19.5 12L19 11Z" fill="#03020D"/>
+<path d="M14.5 5.5L13 6.5L11 5V4H14.5V5.5Z" fill="#03020D"/>
+</svg>

package/src/core/icons/icon-multi-user-spaces-col.svg

@@ -0,0 +1,13 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="13" y="13" width="6" height="6" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<rect x="31" y="13" width="6" height="6" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<rect x="13" y="31" width="6" height="6" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M16 19L16 31" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M34 19L34 26" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M19 16L31 16" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M19 34L29 34" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.7494 34.1265C47.7376 33.8234 47.5443 33.5572 47.2597 33.4522L30.3737 27.2184C30.0903 27.1138 29.7719 27.1893 29.5658 27.41C29.3596 27.6308 29.306 27.9536 29.4297 28.2291L36.806 44.66C36.932 44.9405 37.2163 45.1158 37.5235 45.1021C37.8306 45.0885 38.0984 44.8888 38.199 44.5983L40.4903 37.9808L47.3138 34.8369C47.5894 34.71 47.7613 34.4296 47.7494 34.1265Z" fill="#FF5416"/>
+<path d="M12.8863 45.5057L1.62891 41.3499L6.37144 39.1648L7.96873 34.5518L12.8863 45.5057Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M30.2574 0.999899L19 5.15576L23.7425 7.34085L25.3398 11.9538L30.2574 0.999899Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M33 6L44 6" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/src/core/icons/stackoverflow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8833 17.0404L6.44573 14.8304L6.89029 12.7367L17.3279 14.9467L16.8833 17.0404ZM17.4825 14.3457L7.81808 9.82876L8.72653 7.89014L18.391 12.4071L17.4825 14.3457ZM18.7002 11.9031L10.5048 5.05977L11.8771 3.41195L20.0726 10.2552L18.7002 11.9031ZM14.0806 1.27948L15.8009 0L22.1601 8.58804L20.4398 9.86753L14.0806 1.27948ZM16.8833 19.7351H6.25244V17.6026H16.8833V19.7351ZM21.1356 15.4701H19.0094V21.8675H4.12617V15.4701H2V24H21.1356V15.4701Z" fill="currentColor"/>
+</svg>

package/src/core/icons/youtube.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1509_18255)">
+    <path d="M30.525 3.44433C30.1655 2.09844 29.113 1.03726 27.778 0.6749C25.3391 0.00195312 15.5834 0.00195312 15.5834 0.00195312C15.5834 0.00195312 5.82773 0.00195312 3.38881 0.649017C2.0795 1.01137 1.00124 2.09844 0.64182 3.44433C0 5.90318 0 11.002 0 11.002C0 11.002 0 16.1268 0.64182 18.5597C1.00124 19.9056 2.05382 20.9668 3.38881 21.3292C5.8534 22.0021 15.5834 22.0021 15.5834 22.0021C15.5834 22.0021 25.3391 22.0021 27.778 21.3551C29.113 20.9927 30.1655 19.9315 30.525 18.5856C31.1668 16.1268 31.1668 11.0279 31.1668 11.0279C31.1668 11.0279 31.1925 5.90318 30.525 3.44433Z" fill="currentColor"/>
+    <path d="M20.5892 11.0021L12.4766 6.2915V15.7128L20.5892 11.0021Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1509_18255">
+      <rect width="31.1667" height="22" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/core/styles/properties.css

@@ -47,6 +47,8 @@
     --icon-color-glassdoor: #0baa41;
     --icon-color-github: #000000;
     --icon-color-discord: #5865f2;
+    --icon-color-stackoverflow: #f48024;
+    --icon-color-youtube: #ff0000;
 
     --gradient-active-orange: linear-gradient(
       61.2deg,

package/src/core/styles/text.css

@@ -147,16 +147,15 @@
   }
 
   .ui-link {
-    @apply visited:text-gui-visited;
+    @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus;
-    @apply underline;
+    @apply focus:text-gui-default focus:outline-gui-focus;
+    @apply no-underline;
   }
 
   .ui-link-neutral {
-    @apply visited:text-dark-grey;
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
+    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
     @apply underline;
   }
 }

package/src/core/utils/syntax-highlighter-registry.js

@@ -0,0 +1,61 @@
+// This file can be used in the browser, but because of the weight of all the language
+// definitions, preferably it should be used on the server.
+
+import bash from "highlight.js/lib/languages/bash";
+import cpp from "highlight.js/lib/languages/cpp";
+import csharp from "highlight.js/lib/languages/csharp";
+import css from "highlight.js/lib/languages/css";
+import dart from "highlight.js/lib/languages/dart";
+import dos from "highlight.js/lib/languages/dos";
+import diff from "highlight.js/lib/languages/diff";
+import erlang from "highlight.js/lib/languages/erlang";
+import elixir from "highlight.js/lib/languages/elixir";
+import plaintext from "highlight.js/lib/languages/plaintext";
+import go from "highlight.js/lib/languages/go";
+import http from "highlight.js/lib/languages/http";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import typescript from "highlight.js/lib/languages/typescript";
+import json from "highlight.js/lib/languages/json";
+import objectivec from "highlight.js/lib/languages/objectivec";
+import php from "highlight.js/lib/languages/php";
+import python from "highlight.js/lib/languages/python";
+import ruby from "highlight.js/lib/languages/ruby";
+import swift from "highlight.js/lib/languages/swift";
+import sql from "highlight.js/lib/languages/sql";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+import curl from "highlightjs-curl/src/languages/curl";
+
+const registry = [
+  { label: "Text", key: "text", module: plaintext },
+  { label: "JS", key: "javascript", module: javascript },
+  { label: "TS", key: "typescript", module: typescript },
+  { label: "Java", key: "java", module: java },
+  { label: "Ruby", key: "ruby", module: ruby },
+  { label: "Python", key: "python", module: python },
+  { label: "PHP", key: "php", module: php },
+  { label: "Shell", key: "bash", module: bash },
+  { label: "C#", key: "cs", module: csharp },
+  { label: "CSS", key: "css", module: css },
+  { label: "Go", key: "go", module: go },
+  { label: "HTML", key: "xml", module: xml },
+  { label: "HTTP", key: "http", module: http },
+  { label: "C++", key: "cpp", module: cpp },
+  { label: "Dart", key: "dart", module: dart },
+  { label: "Swift", key: "swift", module: swift },
+  { label: "Objective C", key: "objectivec", module: objectivec },
+  { label: "Node.js", key: "javascript", module: javascript },
+  { label: "JSON", key: "json", module: json },
+  { label: "DOS", key: "dos", module: dos },
+  { label: "YAML", key: "yaml", module: yaml },
+  { label: "Erlang", key: "erlang", module: erlang },
+  { label: "Elixir", key: "elixir", module: elixir },
+  { label: "Diff", key: "diff", module: diff },
+  { label: "SQL", key: "sql", module: sql },
+  { label: "cURL", key: "curl", module: curl },
+  { label: "HTML", key: "html", module: xml },
+  { label: "XML", key: "xml", module: xml },
+];
+
+export default registry;

package/src/core/utils/syntax-highlighter.css

@@ -0,0 +1,69 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
+}
+
+@layer components {
+  .hljs {
+    background: var(--syntax-black);
+    color: var(--syntax-light-grey);
+  }
+
+  .hljs-emphasis {
+    @apply italic;
+  }
+
+  .hljs-strong {
+    @apply font-bold;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--syntax-dark-grey);
+  }
+
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-regexp,
+  .hljs-deletion {
+    color: var(--syntax-red);
+  }
+
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-literal,
+  .hljs-type,
+  .hljs-params,
+  .hljs-meta,
+  .hljs-link {
+    color: var(--syntax-orange);
+  }
+
+  .hljs-attribute {
+    color: var(--syntax-yellow);
+  }
+
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition {
+    color: var(--syntax-green);
+  }
+
+  .hljs-title,
+  .hljs-section {
+    color: var(--syntax-blue);
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: var(--syntax-lilac);
+  }
+
+  .hljs-subst {
+    color: var(--syntax-mid-grey);
+  }
+}

package/src/core/utils/syntax-highlighter.js

@@ -0,0 +1,98 @@
+import hljs from "highlight.js/lib/core";
+
+// Map certain frameworks, protocols etc to available langauage packs
+const languageToHighlightKey = (lang) => {
+  let id;
+
+  if (!lang) {
+    lang = "text";
+  }
+
+  switch (lang.toLowerCase()) {
+    case "android":
+      id = "java";
+      break;
+
+    case ".net":
+    case "net":
+    case "dotnet":
+    case "csharp":
+    case "c#":
+      id = "cs";
+      break;
+
+    case "objc":
+    case "objective c":
+      id = "objectivec";
+      break;
+
+    case "laravel":
+      id = "php";
+      break;
+
+    case "flutter":
+      id = "dart";
+      break;
+
+    case "node.js":
+    case "js":
+      id = "javascript";
+      break;
+
+    case "ts":
+      id = "typescript";
+      break;
+
+    case "shell":
+    case "fh":
+    case "sh":
+      id = "bash";
+      break;
+
+    case "https":
+    case "http":
+    case "txt":
+    case "plaintext":
+      id = "text";
+      break;
+
+    case "cmd":
+    case "bat":
+      id = "dos";
+      break;
+
+    case "yml":
+      id = "yaml";
+      break;
+
+    case "erl":
+      id = "erlang";
+      break;
+
+    case "patch":
+      id = "diff";
+      break;
+
+    case "svg":
+      id = "xml";
+      break;
+
+    default:
+      break;
+  }
+
+  return id || lang;
+};
+
+const registerDefaultLanguages = (register) => {
+  register.forEach(({ key, module }) => hljs.registerLanguage(key, module));
+};
+
+const highlightSnippet = (languageKeyword, snippet) => {
+  const language = languageToHighlightKey(languageKeyword);
+  if (typeof snippet !== "string" || !snippet || !language) return;
+
+  return hljs.highlight(snippet, { language }).value;
+};
+
+export { highlightSnippet, languageToHighlightKey, registerDefaultLanguages };

package/tailwind.config.js

@@ -131,6 +131,7 @@ module.exports = {
       80: "var(--spacing-80)",
       88: "var(--spacing-88)",
       96: "var(--spacing-96)",
+      128: "var(--spacing-128)",
       160: "var(--spacing-160)",
       256: "var(--spacing-256)",
     },