@ably/ui 5.3.0 → 6.0.1-dev.6103afe

package/src/core/icons/icon-display-map-pin.svg

@@ -1,3 +1,3 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 18.08C10.75 10.7342 16.7342 4.75 24.08 4.75C31.4644 4.75 37.41 10.7328 37.41 18.08C37.41 20.5268 36.5797 23.334 35.2826 26.2091C33.9901 29.0739 32.26 31.9501 30.5191 34.5193C28.7797 37.0864 27.0387 39.3334 25.732 40.9391C25.079 41.7416 24.5353 42.3828 24.1556 42.8227L24.1191 42.865L24.0802 42.8201C23.6982 42.3792 23.1514 41.7365 22.4946 40.9324C21.1804 39.3235 19.4294 37.0726 17.68 34.5029C15.929 31.9311 14.189 29.0536 12.8892 26.1906C11.5845 23.317 10.75 20.5155 10.75 18.08ZM23.5643 44.5037C23.5645 44.5039 23.5646 44.504 24.12 44L24.6762 44.5031C24.5341 44.6602 24.3323 44.7498 24.1206 44.75C23.9088 44.7502 23.7066 44.6605 23.5643 44.5037ZM23.5643 44.5037L24.12 44C24.6762 44.5031 24.677 44.5023 24.6772 44.5021L24.6794 44.4996L24.6877 44.4904L24.7191 44.4553L24.7733 44.3946L24.8393 44.3202C24.9441 44.2018 25.0969 44.0277 25.291 43.8029C25.6791 43.3534 26.2322 42.7009 26.8955 41.8859C28.2213 40.2566 29.9903 37.9736 31.7609 35.3607C33.53 32.75 35.3099 29.7961 36.6499 26.8259C37.9853 23.866 38.91 20.8332 38.91 18.08C38.91 9.90718 32.2956 3.25 24.08 3.25C15.9058 3.25 9.25 9.90579 9.25 18.08C9.25 20.8245 10.1805 23.853 11.5233 26.8107C12.871 29.7789 14.661 32.7339 16.44 35.3471C18.2206 37.9624 19.9996 40.249 21.3329 41.8813C21.9999 42.6979 22.5562 43.3517 22.9464 43.8022C23.1415 44.0275 23.2952 44.202 23.4006 44.3206C23.4532 44.38 23.4938 44.4253 23.5214 44.4561L23.553 44.4912L23.5643 44.5037ZM16.79 17.2401C16.79 13.2139 20.0539 9.95007 24.08 9.95007C28.1062 9.95007 31.37 13.2139 31.37 17.2401C31.37 21.2662 28.1062 24.5301 24.08 24.5301C20.0539 24.5301 16.79 21.2662 16.79 17.2401ZM24.08 8.45007C19.2255 8.45007 15.29 12.3855 15.29 17.2401C15.29 22.0947 19.2255 26.0301 24.08 26.0301C28.9346 26.0301 32.87 22.0947 32.87 17.2401C32.87 12.3855 28.9346 8.45007 24.08 8.45007Z" fill="#03020D" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 18.08C10.75 10.7342 16.7342 4.75 24.08 4.75C31.4644 4.75 37.41 10.7328 37.41 18.08C37.41 20.5268 36.5797 23.334 35.2826 26.2091C33.9901 29.0739 32.26 31.9501 30.5191 34.5193C28.7797 37.0864 27.0387 39.3334 25.732 40.9391C25.079 41.7416 24.5353 42.3828 24.1556 42.8227L24.1191 42.865L24.0802 42.8201C23.6982 42.3792 23.1514 41.7365 22.4946 40.9324C21.1804 39.3235 19.4294 37.0726 17.68 34.5029C15.929 31.9311 14.189 29.0536 12.8892 26.1906C11.5845 23.317 10.75 20.5155 10.75 18.08ZM23.5643 44.5037C23.5645 44.5039 23.5646 44.504 24.12 44L24.6762 44.5031C24.5341 44.6602 24.3323 44.7498 24.1206 44.75C23.9088 44.7502 23.7066 44.6605 23.5643 44.5037ZM23.5643 44.5037L24.12 44C24.6762 44.5031 24.677 44.5023 24.6772 44.5021L24.6794 44.4996L24.6877 44.4904L24.7191 44.4553L24.7733 44.3946L24.8393 44.3202C24.9441 44.2018 25.0969 44.0277 25.291 43.8029C25.6791 43.3534 26.2322 42.7009 26.8955 41.8859C28.2213 40.2566 29.9903 37.9736 31.7609 35.3607C33.53 32.75 35.3099 29.7961 36.6499 26.8259C37.9853 23.866 38.91 20.8332 38.91 18.08C38.91 9.90718 32.2956 3.25 24.08 3.25C15.9058 3.25 9.25 9.90579 9.25 18.08C9.25 20.8245 10.1805 23.853 11.5233 26.8107C12.871 29.7789 14.661 32.7339 16.44 35.3471C18.2206 37.9624 19.9996 40.249 21.3329 41.8813C21.9999 42.6979 22.5562 43.3517 22.9464 43.8022C23.1415 44.0275 23.2952 44.202 23.4006 44.3206C23.4532 44.38 23.4938 44.4253 23.5214 44.4561L23.553 44.4912L23.5643 44.5037ZM16.79 17.2401C16.79 13.2139 20.0539 9.95007 24.08 9.95007C28.1062 9.95007 31.37 13.2139 31.37 17.2401C31.37 21.2662 28.1062 24.5301 24.08 24.5301C20.0539 24.5301 16.79 21.2662 16.79 17.2401ZM24.08 8.45007C19.2255 8.45007 15.29 12.3855 15.29 17.2401C15.29 22.0947 19.2255 26.0301 24.08 26.0301C28.9346 26.0301 32.87 22.0947 32.87 17.2401C32.87 12.3855 28.9346 8.45007 24.08 8.45007Z" fill="#03020D"/>
 </svg>

package/src/core/icons/icon-display-servers.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8.5H44C45.3807 8.5 46.5 9.61929 46.5 11V19C46.5 20.3807 45.3807 21.5 44 21.5H4C2.61929 21.5 1.5 20.3807 1.5 19V11C1.5 9.61929 2.61929 8.5 4 8.5ZM0 11C0 8.79086 1.79086 7 4 7H44C46.2091 7 48 8.79086 48 11V19C48 21.2091 46.2091 23 44 23H4C1.79086 23 0 21.2091 0 19V11ZM4 26.5H44C45.3807 26.5 46.5 27.6193 46.5 29V37C46.5 38.3807 45.3807 39.5 44 39.5H4C2.61929 39.5 1.5 38.3807 1.5 37V29C1.5 27.6193 2.61929 26.5 4 26.5ZM0 29C0 26.7909 1.79086 25 4 25H44C46.2091 25 48 26.7909 48 29V37C48 39.2091 46.2091 41 44 41H4C1.79086 41 0 39.2091 0 37V29ZM6.75 30C6.75 29.5858 6.41421 29.25 6 29.25C5.58579 29.25 5.25 29.5858 5.25 30V36C5.25 36.4142 5.58579 36.75 6 36.75C6.41421 36.75 6.75 36.4142 6.75 36V30ZM9 29.25C9.41421 29.25 9.75 29.5858 9.75 30V36C9.75 36.4142 9.41421 36.75 9 36.75C8.58579 36.75 8.25 36.4142 8.25 36V30C8.25 29.5858 8.58579 29.25 9 29.25ZM41 34C41.5523 34 42 33.5523 42 33C42 32.4477 41.5523 32 41 32C40.4477 32 40 32.4477 40 33C40 33.5523 40.4477 34 41 34ZM36 33C36 33.5523 35.5523 34 35 34C34.4477 34 34 33.5523 34 33C34 32.4477 34.4477 32 35 32C35.5523 32 36 32.4477 36 33ZM6 11.25C6.41421 11.25 6.75 11.5858 6.75 12V18C6.75 18.4142 6.41421 18.75 6 18.75C5.58579 18.75 5.25 18.4142 5.25 18V12C5.25 11.5858 5.58579 11.25 6 11.25ZM9.75 12C9.75 11.5858 9.41421 11.25 9 11.25C8.58579 11.25 8.25 11.5858 8.25 12V18C8.25 18.4142 8.58579 18.75 9 18.75C9.41421 18.75 9.75 18.4142 9.75 18V12ZM42 15C42 15.5523 41.5523 16 41 16C40.4477 16 40 15.5523 40 15C40 14.4477 40.4477 14 41 14C41.5523 14 42 14.4477 42 15ZM35 16C35.5523 16 36 15.5523 36 15C36 14.4477 35.5523 14 35 14C34.4477 14 34 14.4477 34 15C34 15.5523 34.4477 16 35 16Z" fill="#03020D"/>
+</svg>

package/src/core/icons/icon-gui-history.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="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.4477 22.4477 11 23 11C23.5523 11 24 11.4477 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C12.5523 0 13 0.447715 13 1C13 1.55228 12.5523 2 12 2ZM12 4C12.5523 4 13 4.44772 13 5V11.0801C13 11.3721 13.1276 11.6494 13.3492 11.8394L16.1508 14.2407C16.5701 14.6002 16.6187 15.2315 16.2593 15.6508C15.8998 16.0701 15.2685 16.1187 14.8492 15.7593L12.0476 13.3579C11.3827 12.788 11 11.9559 11 11.0801V5C11 4.44772 11.4477 4 12 4ZM19.75 5.25C20.3023 5.25 20.75 4.80228 20.75 4.25C20.75 3.69772 20.3023 3.25 19.75 3.25C19.1977 3.25 18.75 3.69772 18.75 4.25C18.75 4.80228 19.1977 5.25 19.75 5.25ZM17.5 2C17.5 2.55228 17.0523 3 16.5 3C15.9477 3 15.5 2.55228 15.5 2C15.5 1.44772 15.9477 1 16.5 1C17.0523 1 17.5 1.44772 17.5 2ZM22 8.5C22.5523 8.5 23 8.05229 23 7.5C23 6.94772 22.5523 6.5 22 6.5C21.4477 6.5 21 6.94772 21 7.5C21 8.05229 21.4477 8.5 22 8.5Z" fill="currentColor"/>
+</svg>

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

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6508 0.240762C10.2315 -0.118661 9.60017 -0.0700991 9.24075 0.349227C8.88132 0.768553 8.92989 1.39985 9.34921 1.75927L10.8721 3.06461C5.91928 3.63496 2 7.90866 2 13C2 18.4723 6.52771 23 12 23C17.4723 23 22 18.4723 22 13C22 12.4477 21.5523 12 21 12C20.4477 12 20 12.4477 20 13C20 17.3677 16.3677 21 12 21C7.63228 21 4 17.3677 4 13C4 8.96189 7.10476 5.5524 11.025 5.06081L9.2929 6.79291C8.90237 7.18344 8.90237 7.8166 9.2929 8.20712C9.68342 8.59765 10.3166 8.59765 10.7071 8.20712L14.2071 4.70713C14.4041 4.51016 14.51 4.23998 14.4993 3.96164C14.4886 3.6833 14.3623 3.42204 14.1508 3.24076L10.6508 0.240762Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="currentColor"/>
+</clipPath>
+</defs>
+</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: {