@ably/ui 8.7.0-dev.e7c81e7 → 8.7.0-dev.ef0470f

package/core/styles.css

@@ -4,20 +4,24 @@
     --color-active-orange: #ff5416;
     --color-red-orange: #e40000;
     --color-white: #ffffff;
-    --color-electric-cyan: #4af7ff;
+    --color-electric-cyan: #4ad4ff;
     --color-zingy-green: #08ff13;
-    --color-bright-red: #ff2739;
+    --color-bright-red: #fe372b;
+    --color-orange-700: #ff2739;
     --color-jazzy-pink: #ff17d2;
-    --color-extra-light-grey: #fafafb;
-    --color-light-grey: #f5f5f6;
-    --color-mid-grey: #d9d9da;
-    --color-dark-grey: #76767c;
-    --color-charcoal-grey: #292831;
-    --color-gui-default: #0073e6;
-    --color-gui-hover: #0867c4;
-    --color-gui-focus: #0073e6;
-    --color-gui-focus-outline: #80b9f2;
+    --color-extra-light-grey: #f8fafc;
+    --color-light-grey: #f4f8fb;
+    --color-mid-grey: #c6ced9;
+    --color-dark-grey: #667085;
+    --color-charcoal-grey: #2b303b;
+    --color-gui-default: #006edc;
+    --color-gui-hover: #0862b9;
     --color-gui-active: #074095;
+    --color-gui-default-dark: #4da6ff;
+    --color-gui-hover-dark: #2894ff;
+    --color-gui-active-dark: #0080ff;
+    --color-gui-focus: #80b9f2;
+    --color-gui-focus-outline: #80b9f2;
     --color-gui-visited: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
@@ -36,6 +40,10 @@
     --syntax-red: #d54e53;
     --syntax-lilac: #bb87d3;
 
+    /* New Neutral colors */
+    --color-neutral-900: #39414e;
+    --color-neutral-500: #c6ced9;
+
     /* uptime status colors */
     --uptime-color-up: #39b54a;
     --uptime-color-trouble: #e87623;
@@ -70,38 +78,43 @@
 
     --gradient-hot-pink: linear-gradient(
       80.2deg,
-      var(--color-bright-red) 0%,
+      var(--color-orange-700) 0%,
       var(--color-jazzy-pink) 100%
     );
 
-    --fs-title-xl: 4rem;
-    --fs-title: 3.5rem;
-    --fs-title-xs: 3rem;
-    --fs-h1-xl: 3.5rem;
-    --fs-h1: 3rem;
-    --fs-h1-xs: 2.625rem;
-    --fs-h2-xl: 2.5rem;
+    --fs-title-xl: 3rem;
+    --fs-title: 2.75rem;
+    --fs-title-xs: 2.5rem;
+    --fs-h1-xl: 2.5rem;
+    --fs-h1: 2.25rem;
+    --fs-h1-xs: 2rem;
+
+    --fs-h2-xl: 2.125rem;
     --fs-h2: 2rem;
-    --fs-h2-xs: 1.875rem;
+    --fs-h2-xs: 1.75rem;
+
     --fs-h3: 1.5rem;
-    --fs-h4: 1.125rem;
-    --fs-p1: 1.125rem;
-    --fs-p2: 1rem;
+    --fs-h4: 1.25rem;
+    --fs-h5: 1rem;
+
+    --fs-p1: 1rem;
+    --fs-p2: 0.938rem;
     --fs-p3: 0.875rem;
     --fs-standfirst-xl: 2.25rem;
     --fs-standfirst: 1.5rem;
-    --fs-sub-header: 1.5rem;
-    --fs-sub-header-xs: 1.125rem;
+    --fs-sub-header: 1.125rem;
+    --fs-sub-header-xs: 1.063rem;
     --fs-overline1: 1rem;
     --fs-overline2: 0.875rem;
-    --fs-btn1: 1.125rem;
-    --fs-btn2: 1rem;
+    --fs-btn1: 1rem;
+    --fs-btn2: 0.938rem;
     --fs-btn3: 0.875rem;
-    --fs-menu1: 1.125rem;
-    --fs-menu2: 1rem;
+    --fs-menu1: 1rem;
+    --fs-menu2: 0.938rem;
     --fs-menu3: 0.875rem;
-    --fs-quote: 1.5rem;
-    --fs-code: 0.875rem;
+    --fs-quote: 1.25rem;
+    --fs-code: 0.938rem;
+    --fs-code2: 0.813rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;
@@ -115,7 +128,9 @@
     --ls-tighten-0_01: -0.01em;
     --ls-tighten-0_005: -0.005em;
     --ls-tighten-0_0025: -0.0025em;
+    --ls-tighten-0_0015: -0.0015em;
     --ls-widen-0_1: 0.1em;
+    --ls-widen-0_16: 0.16em;
     --ls-widen-0_15: 0.15em;
 
     --spacing-0: 0px;
@@ -130,6 +145,7 @@
     --spacing-20: 1.25rem;
     --spacing-24: 1.5rem;
     --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
     --spacing-40: 2.5rem;
     --spacing-48: 3rem;
     --spacing-64: 4rem;
@@ -177,7 +193,7 @@
 }
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @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;
@@ -201,7 +217,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -217,7 +233,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @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;
@@ -227,7 +243,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
     @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;
@@ -237,7 +253,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;
@@ -322,48 +338,54 @@
 }
 @layer components {
   .ui-text-title {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-title-xs xs:text-title xl:text-title-xl leading-tight;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.01;
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-h1-xs xs:text-h1 xl:text-h1-xl leading-tight;
+    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
   }
 
   .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.005;
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-h2-xs xs:text-h2 xl:text-h2-xl leading-tight;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
   }
 
   .ui-text-h3 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-h3;
-    @apply tracking-tighten-0.0025;
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-h3 leading-tight;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h4 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-h4 uppercase;
-    @apply tracking-widen-0.1;
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-h4 leading-tight;
+    @apply tracking-tighten-0.0015;
+  }
+
+  .ui-text-h5 {
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-h5 leading-tight;
+    @apply tracking-tighten-0.0025;
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-charcoal-grey;
-    @apply text-p1;
+    @apply font-manrope font-medium text-charcoal-grey;
+    @apply text-p1 leading-relaxed;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-charcoal-grey;
-    @apply text-p2;
+    @apply font-manrope font-medium text-charcoal-grey;
+    @apply text-p2 leading-relaxed;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-charcoal-grey;
-    @apply text-p3;
+    @apply font-manrope font-medium text-charcoal-grey;
+    @apply text-p3 leading-relaxed;
   }
 
   .ui-text-standfirst {
@@ -373,60 +395,63 @@
   }
 
   .ui-text-quote {
-    @apply font-sans font-light text-cool-black;
-    @apply text-quote;
-    @apply tracking-tighten-0.025;
+    @apply font-manrope font-normal text-cool-black;
+    @apply text-quote leading-normal;
+    @apply tracking-tighten-0.0015;
   }
 
   .ui-text-sub-header {
-    @apply font-sans font-light text-dark-grey;
-    @apply text-sub-header-xs xs:text-sub-header;
-    @apply tracking-tighten-0.025;
+    @apply font-manrope font-semibold text-neutral-900;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
   }
 
   .ui-text-overline1 {
-    @apply font-sans font-medium text-dark-grey uppercase;
-    @apply text-overline1;
-    @apply tracking-widen-0.15;
+    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
+    @apply text-overline1 leading-normal;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-overline2 {
-    @apply font-sans font-medium text-dark-grey uppercase;
-    @apply text-overline2;
-    @apply tracking-widen-0.1;
+    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
+    @apply text-overline2 leading-normal;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-menu1 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu1;
+    @apply font-manrope font-medium text-cool-black;
+    @apply text-menu1 leading-snug;
   }
 
   .ui-text-menu2 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu2;
+    @apply font-manrope font-medium text-cool-black;
+    @apply text-menu2 leading-snug;
   }
 
   .ui-text-menu3 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu3;
+    @apply font-manrope font-medium text-cool-black;
+    @apply text-menu3 leading-snug;
   }
 
   .ui-text-code {
-    @apply font-mono font-semibold text-code;
+    @apply font-jetbrains_mono font-medium text-code;
+  }
+
+  .ui-text-code2 {
+    @apply font-jetbrains_mono font-medium text-code2;
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply font-jetbrains_mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
   }
 
   .ui-unordered-list {
-    @apply text-p1 font-light text-cool-black;
-    @apply list-disc ml-32 mb-24;
+    @apply text-p1 font-medium text-cool-black;
+    @apply list-disc ml-32 my-16;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-light text-cool-black;
-    @apply ml-32 mb-24 list-decimal;
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16 list-decimal;
   }
 
   .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -443,11 +468,20 @@
   }
 
   .ui-unordered-list ul ul {
-    @apply list-square;
+    @apply list-square my-8;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply my-8;
+  }
+
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply font-medium font-manrope tracking-widen-0 leading-relaxed;
   }
 
   .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-light text-cool-black;
+    @apply text-p1 font-medium text-cool-black;
     @apply list-disc ml-32 mt-32 -mb-12;
   }
 
@@ -483,11 +517,11 @@
 }
 @layer components {
   .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans;
+    @apply flex items-start mb-16 font-manrope font-medium;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans;
+    @apply flex items-start mb-12 font-manrope font-medium;
   }
 
   .ui-checkbox-input {
@@ -506,12 +540,12 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-light text-cool-black;
+    @apply text-p1 font-medium text-cool-black;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-light text-cool-black;
+    @apply text-p2 font-medium text-cool-black;
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -532,7 +566,7 @@
   }
 
   .ui-textarea {
-    @apply font-sans font-light text-cool-black text-p1;
+    @apply font-manrope font-medium text-cool-black text-p1;
     @apply p-input mb-16;
     @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;
@@ -545,12 +579,6 @@
     color: #76767c;
   }
 
-  .ui-textarea:-ms-input-placeholder {
-    /* CSS vars don't work in ::placeholder in Webkit :( */
-    /* color: var(--text-dark-grey); */
-    color: #76767c;
-  }
-
   .ui-textarea::placeholder {
     /* CSS vars don't work in ::placeholder in Webkit :( */
     /* color: var(--text-dark-grey); */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.7.0-dev.e7c81e7",
+  "version": "8.7.0-dev.ef0470f",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/reset/scripts.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Reset=t())}(this,(function(){return(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Reset=t())}(this,(()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()));

package/reset/styles.css

@@ -86,8 +86,7 @@
   abbr[title] {
     border-bottom: none; /* 1 */
     text-decoration: underline; /* 2 */
-    -webkit-text-decoration: underline dotted;
-            text-decoration: underline dotted; /* 2 */
+    text-decoration: underline dotted; /* 2 */
   }
 
   /**
@@ -444,19 +443,10 @@
     resize: vertical;
   }
 
-  input:-ms-input-placeholder,
-  textarea:-ms-input-placeholder {
-    color: #a0aec0;
-  }
-
   input::-moz-placeholder, textarea::-moz-placeholder {
     color: #a0aec0;
   }
 
-  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-    color: #a0aec0;
-  }
-
   input::placeholder,
   textarea::placeholder {
     color: #a0aec0;

package/src/core/Meganav/component.css

@@ -93,7 +93,7 @@
     grid-template-rows: min-content 1fr;
 
     @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
-    @apply grid gap-x-8;
+    @apply grid gap-x-16;
   }
 
   .ui-meganav-media-heading {

package/src/core/MeganavContentCompany/component.html.erb

@@ -72,6 +72,15 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/events"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-events-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Events</p>
+              <p class="ui-meganav-media-copy">Join Ably at upcoming events.</p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
 

package/src/core/MeganavContentCompany/component.jsx

@@ -88,6 +88,15 @@ const MeganavContentCompany = ({ paths, absUrl }) => {
                 </div>
               </a>
             </li>
+            <li>
+              <a href={absUrl("/events")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-events-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Events</p>
+                  <p className="ui-meganav-media-copy">Join Ably at upcoming events.</p>
+                </div>
+              </a>
+            </li>
           </ul>
         </div>
 

package/src/core/MeganavContentDevelopers/component.html.erb

@@ -35,7 +35,6 @@
         </li>
       </ul>
     </div>
-
     <div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
         <li>
@@ -65,9 +64,17 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Multiplayer reference guide</p>
+              <p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
-
     <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
         Quick links

package/src/core/MeganavContentDevelopers/component.jsx

@@ -58,7 +58,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               <Icon name="icon-display-tutorials-demos-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Tutorials & Demos</p>
-                <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
+                <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources.</p>
               </div>
             </a>
           </li>
@@ -71,6 +71,15 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               </div>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/reference-guide-multiplayer")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Multiplayer reference guide</p>
+                <p className="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+              </div>
+            </a>
+          </li>
         </ul>
       </div>
 
@@ -99,6 +108,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               <p className="ui-meganav-media-heading">
                 Status
                 <iframe
+                  title="Ably status"
                   src="https://status.ably.com/embed/icon"
                   allowtransparency="true"
                   frameBorder="0"

package/src/core/MeganavContentUseCases/component.html.erb

@@ -11,7 +11,7 @@
           <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
             <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Chat</p>
+              <p class="ui-meganav-media-heading">Live Chat</p>
               <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
             </div>
           <% end %>

package/src/core/MeganavContentUseCases/component.jsx

@@ -16,7 +16,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
             <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
               <Icon name="icon-display-chat-stack-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Chat</p>
+                <p className="ui-meganav-media-heading">Live Chat</p>
                 <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
               </div>
             </a>

package/src/core/fonts/jetBrains-mono.css

@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
+}

package/src/core/fonts/manrope.css

@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
+}

package/src/core/icons/icon-display-events-col.svg

@@ -0,0 +1,13 @@
+<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="M42 16.75H6V15.25H42V16.75Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 14C5.25 11.3766 7.37665 9.25 10 9.25H38C40.6234 9.25 42.75 11.3766 42.75 14V38C42.75 40.6234 40.6234 42.75 38 42.75H10C7.37665 42.75 5.25 40.6234 5.25 38V14ZM10 10.75C8.20507 10.75 6.75 12.2051 6.75 14V38C6.75 39.7949 8.20507 41.25 10 41.25H38C39.7949 41.25 41.25 39.7949 41.25 38V14C41.25 12.2051 39.7949 10.75 38 10.75H10Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.75 7C17.1642 7 17.5 7.33579 17.5 7.75L17.5 12.25C17.5 12.6642 17.1642 13 16.75 13C16.3358 13 16 12.6642 16 12.25L16 7.75C16 7.33579 16.3358 7 16.75 7Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.75 7C32.1642 7 32.5 7.33579 32.5 7.75L32.5 12.25C32.5 12.6642 32.1642 13 31.75 13C31.3358 13 31 12.6642 31 12.25L31 7.75C31 7.33579 31.3358 7 31.75 7Z" fill="#03020D"/>
+<path d="M10 21C10 20.4477 10.4477 20 11 20H17C17.5523 20 18 20.4477 18 21V27C18 27.5523 17.5523 28 17 28H11C10.4477 28 10 27.5523 10 27V21Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 21.5V26.5H16.5V21.5H11.5ZM11 20C10.4477 20 10 20.4477 10 21V27C10 27.5523 10.4477 28 11 28H17C17.5523 28 18 27.5523 18 27V21C18 20.4477 17.5523 20 17 20H11Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 31.5V36.5H16.5V31.5H11.5ZM11 30C10.4477 30 10 30.4477 10 31V37C10 37.5523 10.4477 38 11 38H17C17.5523 38 18 37.5523 18 37V31C18 30.4477 17.5523 30 17 30H11Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 21.5V26.5H26.5V21.5H21.5ZM21 20C20.4477 20 20 20.4477 20 21V27C20 27.5523 20.4477 28 21 28H27C27.5523 28 28 27.5523 28 27V21C28 20.4477 27.5523 20 27 20H21Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 31.5V36.5H26.5V31.5H21.5ZM21 30C20.4477 30 20 30.4477 20 31V37C20 37.5523 20.4477 38 21 38H27C27.5523 38 28 37.5523 28 37V31C28 30.4477 27.5523 30 27 30H21Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 21.5V26.5H36.5V21.5H31.5ZM31 20C30.4477 20 30 20.4477 30 21V27C30 27.5523 30.4477 28 31 28H37C37.5523 28 38 27.5523 38 27V21C38 20.4477 37.5523 20 37 20H31Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 31.5V36.5H36.5V31.5H31.5ZM31 30C30.4477 30 30 30.4477 30 31V37C30 37.5523 30.4477 38 31 38H37C37.5523 38 38 37.5523 38 37V31C38 30.4477 37.5523 30 37 30H31Z" fill="#03020D"/>
+</svg>

package/src/core/styles/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @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;
@@ -24,7 +24,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -40,7 +40,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @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;
@@ -50,7 +50,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
     @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;
@@ -60,7 +60,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;