@ably/ui 5.2.0 → 6.0.1

package/src/core/images/cust-logo-toyota-mono-pos.svg

@@ -0,0 +1,18 @@
+<svg width="244" height="122" viewBox="0 0 244 122" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.146 84.3092C122.135 80.7443 125.008 77.8684 128.597 77.8623C132.097 77.8679 134.973 80.7438 135.043 84.3092C134.973 87.8341 132.098 90.71 128.597 90.7599C125.008 90.71 122.135 87.8341 122.146 84.3092ZM128.597 88.3835C130.534 88.3536 132.138 86.5332 132.158 84.3092C132.138 82.0425 130.534 80.2221 128.597 80.2349C126.576 80.2216 124.968 82.0419 125.032 84.3092C124.968 86.533 126.576 88.3533 128.597 88.3835ZM142.34 90.4204V80.5746H146.074V78.3718H135.722V80.5746H139.626V90.4204H142.34ZM149.297 87.7015L148.281 90.4207H145.059L150.148 78.3718H153.541L158.464 90.4207H155.241L154.223 87.7015H149.297ZM153.541 85.6674H151.846H150.148L151.846 81.2533L153.541 85.6674ZM92.4479 80.5746V90.4204H89.7328V80.5746H86V78.3718H96.1825V80.5746H92.4479ZM103.307 77.8623C99.7384 77.8684 96.8668 80.7443 96.8614 84.3092C96.8666 87.8341 99.7384 90.71 103.307 90.7599C106.83 90.71 109.706 87.8341 109.758 84.3092C109.706 80.7438 106.83 77.8679 103.307 77.8623ZM103.307 88.3835C105.267 88.3536 106.87 86.5332 106.872 84.3092C106.87 82.0425 105.267 80.2221 103.307 80.2349C101.306 80.2216 99.7005 82.0419 99.7473 84.3092C99.7005 86.533 101.306 88.3533 103.307 88.3835ZM117.223 90.4204H115.867H114.511V85.8369L109.758 78.3718H112.981L115.867 83.4605L118.923 78.3718H121.976L117.223 85.8369V90.4204Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.507 72.7001C103.133 72.7001 88.1849 63.3463 88.1849 51.8499C88.1849 40.3524 103.133 31 121.507 31C139.88 31 154.829 40.3524 154.829 51.8499C154.829 63.3463 139.88 72.7001 121.507 72.7001ZM121.507 32.0243C103.697 32.0243 89.2075 40.9184 89.2075 51.8499C89.2075 62.784 103.697 71.6773 121.507 71.6775C139.317 71.6775 153.807 62.7837 153.807 51.8499C153.807 40.9184 139.317 32.0243 121.507 32.0243Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.929 40.0569C104.895 37.3336 110.559 35.2665 118.358 34.7903L119.968 34.6903L118.71 35.6985C116.489 37.476 114.766 41.2405 113.981 46.0278L113.896 46.5334L113.39 46.4506C108.609 45.6348 105.249 44.1141 104.167 42.2699C103.909 41.8307 103.779 41.3713 103.779 40.912C103.78 40.6205 103.831 40.3313 103.929 40.0569ZM104.801 40.9155C104.801 41.1911 104.883 41.4708 105.05 41.7543C105.928 43.2521 108.917 44.5763 113.073 45.3452C113.805 41.3049 115.208 37.9793 117.032 35.9156C110.636 36.5017 105.63 38.3188 104.893 40.3992C104.831 40.572 104.801 40.7417 104.801 40.9155ZM116.932 46.3337L116.832 46.89L117.397 46.933C118.735 47.0329 120.118 47.0868 121.506 47.0868C122.895 47.0868 124.279 47.0329 125.617 46.933L126.18 46.89L126.08 46.3337C125.311 42.014 123.6 39.4336 121.507 39.4336C119.412 39.4336 117.701 42.014 116.932 46.3337ZM124.955 45.9444C124.259 42.5992 122.938 40.4562 121.507 40.4562C120.076 40.4562 118.753 42.5992 118.059 45.9444C119.189 46.0183 120.342 46.0643 121.506 46.0643C122.671 46.0643 123.823 46.0183 124.955 45.9444ZM124.303 35.699C126.523 37.4765 128.247 41.2415 129.032 46.0283L129.116 46.5339L129.621 46.4511C134.405 45.6353 137.766 44.1141 138.845 42.2702C139.264 41.5615 139.344 40.7962 139.085 40.0576C138.119 37.3346 132.454 35.2675 124.656 34.7908L123.049 34.6908L124.303 35.699ZM138.119 40.3992C137.384 38.3221 132.377 36.5017 125.983 35.9156C127.808 37.9796 129.209 41.3051 129.941 45.3452C134.095 44.5763 137.084 43.2518 137.966 41.7543C138.129 41.4708 138.213 41.1911 138.213 40.9155C138.213 40.7417 138.183 40.572 138.119 40.3992ZM98.9945 42.0639C95.4895 44.9998 93.6371 48.4877 93.6371 52.1523C93.6371 60.7728 104.149 68.0595 118.087 69.0978L119.644 69.2147L118.458 68.2021C115.405 65.5898 113.508 59.3916 113.508 52.0255L113.54 50.2851L113.113 50.1982C105.782 48.8842 100.566 45.8015 99.8232 42.3494L99.6456 41.5206L98.9945 42.0639ZM99.0714 43.375C96.1935 45.9943 94.6607 49.01 94.6607 52.1523C94.6607 59.9479 104.081 66.5814 116.781 67.9365C114.108 64.7541 112.487 58.8555 112.487 52.0255C112.487 52.0255 112.495 51.5203 112.504 51.121C105.422 49.769 100.412 46.8632 99.0714 43.375ZM116.516 51.231L116.513 51.4165C116.513 58.2635 118.66 63.4291 121.507 63.4291C124.353 63.4291 126.5 58.2635 126.5 51.4165L126.493 50.6778L125.944 50.7248C124.496 50.8516 123.005 50.9145 121.507 50.9145C120.01 50.9145 118.517 50.8516 117.073 50.7248L116.521 50.675L116.516 51.231ZM121.507 62.4074C123.387 62.4074 125.394 58.1505 125.471 51.7798C124.169 51.8757 122.845 51.9355 121.507 51.9355C120.171 51.9355 118.843 51.8757 117.542 51.7798C117.617 58.1505 119.625 62.4074 121.507 62.4074ZM143.189 42.3494C142.447 45.8015 137.23 48.884 129.901 50.1982L129.471 50.2779L129.505 52.0252C129.505 59.3914 127.608 65.5898 124.555 68.2018L123.37 69.2144L124.925 69.0976C138.864 68.0592 149.376 60.7726 149.376 52.152C149.376 48.4875 147.522 44.9996 144.017 42.0636L143.368 41.5204L143.189 42.3494ZM148.354 52.1523C148.354 49.01 146.82 45.9943 143.94 43.375C142.599 46.8629 137.59 49.769 130.51 51.121C130.517 51.5201 130.527 52.0255 130.527 52.0255C130.527 58.8555 128.906 64.7541 126.233 67.9365C138.934 66.5814 148.354 59.9479 148.354 52.1523Z" fill="#03020D"/>
+<path d="M143.551 39.7174C143.598 39.8473 143.641 39.9797 143.675 40.1129C143.867 40.8787 143.828 41.6308 143.578 42.3637C146.903 45.1059 148.863 48.488 148.863 52.1525C148.863 61.2992 136.615 68.7157 121.507 68.7157C106.398 68.7157 94.1502 61.2992 94.1502 52.1525C94.1502 48.4911 96.1124 45.1062 99.4337 42.3637C99.1859 41.6308 99.1461 40.8787 99.3388 40.1129C99.3787 39.9675 99.4318 39.8262 99.4976 39.6906C94.96 42.9233 92.2089 47.16 92.2089 51.8C92.2089 61.9314 105.325 70.1437 121.507 70.1437C137.686 70.1437 150.804 61.9314 150.804 51.8C150.805 47.1697 148.065 42.9427 143.551 39.7174Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.507 34.1013C131.036 34.1013 139.514 36.5976 140.542 39.9968C141.434 42.9455 136.558 45.6747 128.873 46.7571L129.538 45.9439C135.759 44.8858 139.454 42.6291 138.602 40.2294C137.569 37.3167 130.061 35.2067 121.506 35.2067C112.951 35.2067 105.444 37.3162 104.411 40.2294C103.558 42.6288 107.254 44.8856 113.473 45.9439L114.141 46.7571C106.453 45.6747 101.58 42.9455 102.473 39.9968C103.502 36.5981 111.979 34.1013 121.507 34.1013ZM121.506 46.5735C122.925 46.5735 124.286 46.5206 125.577 46.4237L126.425 47.0367C124.868 47.1725 123.224 47.2494 121.507 47.2494C119.789 47.2494 118.145 47.1725 116.589 47.0367L117.432 46.4237H117.437C118.728 46.5206 120.088 46.5735 121.506 46.5735Z" fill="#03020D"/>
+<path d="M117.447 46.4237C118.161 42.4563 119.71 39.9769 121.506 39.9769C123.304 39.9769 124.852 42.4563 125.567 46.4237H125.581L126.417 47.0298C125.711 41.7903 123.78 38.442 121.507 38.442C119.233 38.442 117.302 41.7903 116.598 47.0298L117.433 46.4237H117.447Z" fill="#03020D"/>
+<path d="M126.67 49.9985L125.987 51.2338C125.987 51.3238 125.991 51.4163 125.991 51.5101C125.991 58.0866 123.98 63.073 121.506 63.073C119.031 63.073 117.024 58.0861 117.024 51.5101C117.024 51.4063 117.026 51.3033 117.028 51.2039L116.344 49.9985C116.324 50.4998 116.314 51.0015 116.314 51.5032C116.314 58.9593 118.639 64.6073 121.507 64.6073C124.376 64.6073 126.703 58.9593 126.703 51.5032C126.702 51.0015 126.691 50.4998 126.67 49.9985V49.9985Z" fill="#03020D"/>
+<path d="M114.152 46.7602C115.135 39.4776 118.056 34.1008 121.507 34.1008C117.807 34.1008 114.654 38.8643 113.483 45.9582L114.142 46.7602H114.152Z" fill="#03020D"/>
+<path d="M128.862 46.7602H128.869L129.528 45.9582C128.36 38.8643 125.205 34.1008 121.507 34.1008C124.958 34.1013 127.881 39.4776 128.862 46.7602Z" fill="#03020D"/>
+<path d="M129.988 50.6975L129.149 49.6959H129.142C129.189 50.4917 129.216 51.3005 129.216 52.1222C129.216 62.0751 125.764 70.1432 121.507 70.1432C126.28 70.1432 130.015 62.6602 130.015 52.1222C130.015 51.64 130.005 51.1671 129.988 50.6975Z" fill="#03020D"/>
+<path d="M113.8 52.1224C113.8 51.3008 113.827 50.492 113.873 49.6962H113.867L113.026 50.6947C113.008 51.1704 112.999 51.6464 112.998 52.1224C112.998 62.6605 116.736 70.1434 121.507 70.1434C117.252 70.1434 113.8 62.0751 113.8 52.1224Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M99.3391 40.1126C99.1463 40.8785 99.1862 41.6306 99.4339 42.3635C98.1626 43.4119 97.0923 44.5563 96.2535 45.7716C96.5458 43.8394 97.3146 42.0103 98.4904 40.4493C98.8209 40.1894 99.1568 39.9364 99.4978 39.6903C99.4321 39.8259 99.379 39.9673 99.3391 40.1126ZM146.76 45.7716C145.922 44.5563 144.849 43.4121 143.578 42.3635C143.828 41.6306 143.867 40.8788 143.674 40.1131C143.641 39.9799 143.598 39.8475 143.55 39.7177C143.881 39.9528 144.206 40.1968 144.523 40.4493C145.701 42.0093 146.47 43.8388 146.76 45.7716Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.507 31.5121C103.385 31.5121 88.6962 40.6189 88.6962 51.8499C88.6962 63.0836 103.385 72.1865 121.507 72.1868C139.626 72.1868 154.316 63.0833 154.316 51.8499C154.316 40.6189 139.626 31.5121 121.507 31.5121ZM150.804 51.7998C150.804 61.9312 137.686 70.1435 121.507 70.1435C105.325 70.1435 92.2081 61.9312 92.2081 51.7998C92.2081 41.668 105.325 33.4524 121.507 33.4524C137.686 33.4524 150.804 41.6675 150.804 51.7998Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.507 34.1013C117.252 34.1013 113.8 42.274 113.8 52.1224C113.8 62.075 117.25 70.1434 121.507 70.1434C125.764 70.1434 129.216 62.0753 129.216 52.1224C129.216 42.274 125.764 34.1013 121.507 34.1013ZM126.703 51.5063C126.703 58.9593 124.376 64.6073 121.507 64.6073C118.638 64.6073 116.313 58.9593 116.313 51.5063C116.313 43.7715 118.638 38.4423 121.507 38.4423C124.376 38.4423 126.703 43.7715 126.703 51.5063Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.507 31.8916C110.412 31.8916 100.185 36.7645 99.3391 40.1126C97.996 45.425 107.851 50.2322 121.507 50.2322C135.16 50.2322 145.016 45.4247 143.675 40.1126C142.477 35.3734 132.601 31.8916 121.507 31.8916ZM102.473 39.9968C103.502 36.5981 111.979 34.1013 121.507 34.1013C131.036 34.1013 139.514 36.5976 140.542 39.9968C141.694 43.804 133.233 47.2494 121.507 47.2494C109.783 47.2494 101.321 43.8045 102.473 39.9968Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.021 50.7019C104.578 49.1836 99.0236 45.4593 99.2233 41.2612C99.4009 45.0597 105.235 48.4249 113.867 49.6929L113.865 49.6959L113.021 50.7019ZM143.791 41.2612C143.615 45.0595 137.776 48.4247 129.146 49.6929L129.149 49.6959L129.991 50.7019C138.435 49.1839 143.99 45.4552 143.791 41.2612ZM116.333 49.9886L116.339 49.9927L117.043 51.2338C118.476 51.3563 119.966 51.4263 121.507 51.4263C123.055 51.4263 124.548 51.3565 125.991 51.2308L126.676 49.9922L126.68 49.9881C125.032 50.1448 123.305 50.2317 121.507 50.2317C119.78 50.2327 118.053 50.1516 116.333 49.9886Z" fill="#03020D"/>
+</svg>

package/src/core/styles/buttons.css

@@ -4,8 +4,39 @@
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt {
+    transition: background-position 0.2s;
+    background: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-red-orange) 50%
+    );
+    background-size: 200% 100%;
+    background-position: 0% 0%;
+
+    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply focus:outline-gui-focus;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt:hover,
+  .ui-btn-alt:focus {
+    background-position: 100% 0%;
+  }
+
+  .ui-btn-alt:disabled {
+    background: linear-gradient(var(--gradient-transparent));
+    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
   }
 
   .ui-btn-invert {
@@ -13,8 +44,9 @@
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply inline-flex items-center justify-center;
   }
 
   .ui-btn-secondary {
@@ -22,8 +54,9 @@
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply inline-flex items-center justify-center;
   }
 
   .ui-btn-secondary-invert {
@@ -31,7 +64,61 @@
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-icon {
+    @apply w-24 h-24 mr-16;
+  }
+
+  .ui-btn-icon-small {
+    @apply w-20 h-20 mr-12;
+  }
+
+  .ui-btn-icon-xsmall {
+    @apply w-16 h-16 mr-8;
+  }
+
+  .ui-chip {
+    @apply text-btn3 p-chip rounded text-cool-black;
+    @apply hover:bg-mid-grey;
+    @apply active:bg-red-orange active:text-white;
+    @apply focus:bg-red-orange focus:text-white focus:outline-none;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+  }
+
+  .ui-chip[data-selected] {
+    @apply bg-active-orange text-white;
+  }
+
+  .ui-chip[data-selected]:hover {
+    @apply bg-mid-grey text-cool-black;
+  }
+
+  .ui-chip[data-selected]:focus {
+    @apply bg-red-orange text-white;
+  }
+
+  .ui-chip-alt {
+    @apply text-btn3 p-chip rounded text-white;
+    @apply hover:bg-gui-hover;
+    @apply active:bg-gui-active active:text-white;
+    @apply focus:bg-gui-active focus:text-white focus:outline-none;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+  }
+
+  .ui-chip-alt[data-selected] {
+    @apply bg-dark-grey text-white;
+  }
+  .ui-chip-alt[data-selected]:hover {
+    @apply bg-gui-hover text-white;
+  }
+
+  .ui-chip-alt[data-selected]:focus {
+    @apply bg-gui-active text-white;
   }
 }

package/src/core/styles/forms.css

@@ -0,0 +1,50 @@
+@layer components {
+  .ui-checkbox-p1 {
+    @apply flex items-start mb-16 font-sans;
+  }
+
+  .ui-checkbox-p2 {
+    @apply flex items-start mb-12 font-sans;
+  }
+
+  .ui-checkbox-input {
+    @apply opacity-0 absolute h-20 w-20;
+  }
+
+  .ui-checkbox-styled {
+    @apply w-20 h-20 mr-16;
+    @apply bg-white flex flex-shrink-0 justify-center items-center;
+    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+  }
+
+  .ui-checkbox-styled-tick {
+    @apply hidden text-white;
+  }
+
+  .ui-checkbox-label-p1 {
+    @apply select-none;
+    @apply text-p1 font-light text-cool-black;
+  }
+
+  .ui-checkbox-label-p2 {
+    @apply select-none;
+    @apply text-p2 font-light text-cool-black;
+  }
+
+  .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-gui-unavailable border;
+  }
+
+  .ui-checkbox-input:focus + .ui-checkbox-styled {
+    border-width: 0.125rem;
+    @apply border-gui-focus;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-active-orange border-dark-grey border;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
+    @apply block;
+  }
+}

package/src/core/styles/properties.css

@@ -45,10 +45,27 @@
     --icon-color-github: #000000;
 
     --gradient-active-orange: linear-gradient(
-      62deg,
-      var(--color-active-orange) 0,
-      var(--color-active-orange) 60%,
-      var(--color-red-orange) 100%
+      61.2deg,
+      var(--color-active-orange) 10.46%,
+      #fe5215 38.63%,
+      #fc4a13 54.38%,
+      #f73c10 67.07%,
+      #f1280a 78.13%,
+      #e90f04 88.02%,
+      var(--color-red-orange) 92.73%
+    );
+
+    /* Used for smooth transitions from gradient to non-gradient backgrounds */
+    --gradient-transparent: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0)
+    );
+
+    --gradient-hot-pink: linear-gradient(
+      80.2deg,
+      var(--color-bright-red) 0%,
+      var(--color-jazzy-pink) 100%
     );
 
     --fs-title-xl: 4rem;
@@ -73,11 +90,15 @@
     --fs-overline2: 0.875rem;
     --fs-btn1: 1.125rem;
     --fs-btn2: 1rem;
+    --fs-btn3: 0.875rem;
     --fs-menu1: 1.125rem;
     --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
     --fs-quote: 1.5rem;
+    --fs-code1: 1rem;
+    --fs-code2: 0.875rem;
 
+    --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
     --lh-normal: 1.25;
@@ -109,17 +130,24 @@
     --spacing-80: 5rem;
     --spacing-88: 5.5rem;
     --spacing-96: 6rem;
+    --spacing-128: 8rem;
     --spacing-160: 10rem;
     --spacing-256: 16rem;
 
-    --spacing-btn: 0.9375rem 1.5rem; /* 15px 24px */
-    --spacing-btn-small: 0.6875rem 1rem; /* 11px 16px */
+    --spacing-btn-small: 0.875rem 1.25rem; /* 14px 16px */
+    --spacing-btn-xsmall: 0.875rem 1rem; /* 14px 16px */
+    --spacing-btn: 0.875rem 1.5rem; /* 14px 24px */
+    --spacing-btn-large: 0.875rem 1.75rem; /* 14px 28px */
     --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
     --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
     --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
     --spacing-media: 0.5rem; /* 8px */
     --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
     --spacing-overline: 0.6875rem 0; /* 11px 0 */
+    --spacing-chip-xsmall: 0.375rem 0.5rem; /* 6px 8px */
+    --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
+    --spacing-chip: 0.75rem 1rem; /* 6px 8px */
+    --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
 
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.

package/src/core/styles/text.css

@@ -14,7 +14,7 @@
   .ui-text-h2 {
     @apply font-sans font-medium text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.01;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h3 {
@@ -88,4 +88,65 @@
     @apply font-sans font-light text-cool-black;
     @apply text-menu3;
   }
+
+  .ui-text-code1 {
+    @apply font-mono font-normal text-code1;
+  }
+
+  .ui-text-code2 {
+    @apply font-mono font-normal text-code2;
+  }
+
+  .ui-unordered-list {
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mb-24;
+  }
+
+  .ui-unordered-list ul {
+    @apply ml-24 mt-16 list-circle;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply list-square;
+  }
+
+  .ui-unordered-list-with-emphasis {
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mt-32 -mb-12;
+  }
+
+  .ui-unordered-list-with-emphasis li div {
+    @apply relative -top-12;
+  }
+
+  .ui-unordered-list-with-emphasis li div > strong {
+    @apply block;
+  }
+
+  .ui-unordered-list-with-emphasis ul {
+    margin-top: calc(var(--spacing-16) + var(--spacing-8));
+    @apply ml-24 list-disc;
+  }
+
+  .ui-unordered-list-with-emphasis ul ul {
+    @apply list-circle;
+  }
+
+  /* visited needs to come before :hover et all else it overrides them */
+  .ui-link:visited {
+    @apply text-gui-viewed;
+  }
+
+  .ui-link {
+    @apply hover:text-active-orange active:text-red-orange;
+    text-decoration-color: var(--color-active-orange);
+    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+  }
+
+  .ui-link:focus {
+    @apply focus:text-white focus:bg-active-orange focus:outline-none;
+    text-decoration: none;
+  }
 }

package/src/core/styles.components.css

@@ -1,6 +1,7 @@
 @import "./styles/buttons.css";
 @import "./styles/layout.css";
 @import "./styles/text.css";
+@import "./styles/forms.css";
 
 @layer components {
   .ui-input {

package/tailwind.config.js

@@ -44,12 +44,16 @@ module.exports = {
       "sub-header-xs": ["var(--fs-sub-header-xs)", "var(--lh-normal)"],
       overline1: ["var(--fs-overline1)", "var(--lh-normal)"],
       overline2: ["var(--fs-overline2)", "var(--lh-normal)"],
-      btn1: ["var(--fs-btn1)", "var(--lh-tight)"],
+      btn1: ["var(--fs-btn1)", "var(--lh-normal)"],
       btn2: ["var(--fs-btn2)", "var(--lh-tight)"],
+      btn3: ["var(--fs-btn2)", "var(--lh-tight)"],
+      btn4: ["var(--fs-btn3)", "var(--lh-dense)"],
       menu1: ["var(--fs-menu1)", "var(--lh-tight)"],
       menu2: ["var(--fs-menu2)", "var(--lh-tight)"],
       menu3: ["var(--fs-menu3)", "var(--lh-snug)"],
       quote: ["var(--fs-quote)", "var(--lh-relaxed)"],
+      code1: ["var(--fs-code1)", "var(--lh-relaxed)"],
+      code2: ["var(--fs-code2)", "var(--lh-relaxed)"],
     },
     colors: {
       transparent: "transparent",
@@ -90,6 +94,12 @@ module.exports = {
     padding: (theme) => ({
       btn: "var(--spacing-btn)",
       "btn-small": "var(--spacing-btn-small)",
+      "btn-xsmall": "var(--spacing-btn-xsmall)",
+      "btn-large": "var(--spacing-btn-large)",
+      chip: "var(--spacing-chip)",
+      "chip-small": "var(--spacing-chip-small)",
+      "chip-xsmall": "var(--spacing-chip-xsmall)",
+      "chip-large": "var(--spacing-chip-large)",
       "menu-row": "var(--spacing-menu-row)",
       "menu-row-snug": "var(--spacing-menu-row-snug)",
       "menu-row-title": "var(--spacing-menu-row-title)",
@@ -146,6 +156,7 @@ module.exports = {
     borderRadius: {
       none: "0",
       sm: "0.125rem",
+      md: "0.1875rem",
       lg: "0.5rem",
       xl: "0.75rem",
       full: "9999px",
@@ -158,6 +169,7 @@ module.exports = {
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
+        "gradient-hot-pink": "var(--gradient-hot-pink)",
       },
       transitionProperty: {
         input: "background-color, box-shadow",
@@ -180,6 +192,13 @@ module.exports = {
         8: "8",
       },
     },
+    listStyleType: {
+      none: "none",
+      disc: "disc",
+      decimal: "decimal",
+      square: "square",
+      circle: "circle",
+    },
   },
   variants: {
     extend: {
@@ -187,7 +206,9 @@ module.exports = {
       textColor: ["hover", "focus", "active", "group-focus", "disabled"],
       display: ["group-focus"],
       backgroundColor: ["hover", "focus", "active", "group-focus", "disabled"],
+      backgroundImage: ["hover", "active", "focus"],
       filter: ["hover"],
+      cursor: ["disabled"],
     },
   },
   corePlugins: {