@ably/ui 8.7.0-dev.bd84e91 → 8.7.0-dev.bf010f7

package/src/core/styles/text.css

@@ -1,46 +1,52 @@
 @layer components {
   .ui-text-title {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-manrope font-extrabold 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 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 font-manrope font-extrabold text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.01;
+    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
   }
 
   .ui-text-h2 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-manrope font-extrabold text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.005;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
   }
 
   .ui-text-h3 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-manrope font-extrabold text-cool-black;
     @apply text-h3;
-    @apply tracking-tighten-0.0025;
+    @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;
+    @apply tracking-tighten-0.0015;
+  }
+
+  .ui-text-h5 {
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-h5;
+    @apply tracking-tighten-0.0025;
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-manrope font-medium text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-manrope font-medium text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-manrope font-medium text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -51,59 +57,62 @@
   }
 
   .ui-text-quote {
-    @apply font-sans font-light text-cool-black;
+    @apply font-manrope font-normal text-cool-black;
     @apply text-quote;
-    @apply tracking-tighten-0.025;
+    @apply tracking-tighten-0.0015;
   }
 
   .ui-text-sub-header {
-    @apply font-sans font-light text-dark-grey;
+    @apply font-manrope font-semibold text-dark-grey;
     @apply text-sub-header-xs xs:text-sub-header;
-    @apply tracking-tighten-0.025;
   }
 
   .ui-text-overline1 {
-    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply font-mono font-medium text-active-orange uppercase;
     @apply text-overline1;
-    @apply tracking-widen-0.15;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-overline2 {
-    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply font-mono font-medium text-active-orange uppercase;
     @apply text-overline2;
-    @apply tracking-widen-0.1;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-menu1 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-manrope font-medium text-cool-black;
     @apply text-menu1;
   }
 
   .ui-text-menu2 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-manrope font-medium text-cool-black;
     @apply text-menu2;
   }
 
   .ui-text-menu3 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-manrope font-medium text-cool-black;
     @apply text-menu3;
   }
 
   .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 text-p1 font-medium text-cool-black;
     @apply list-disc ml-32 mb-24;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-light text-cool-black;
+    @apply text-p1 font-medium text-charcoal-grey;
     @apply ml-32 mb-24 list-decimal;
   }
 
@@ -124,8 +133,13 @@
     @apply list-square;
   }
 
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply font-medium font-manrope;
+  }
+
   .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;
   }
 

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

@@ -22,6 +22,7 @@ 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 kotlin from "highlight.js/lib/languages/kotlin";
 import sql from "highlight.js/lib/languages/sql";
 import xml from "highlight.js/lib/languages/xml";
 import yaml from "highlight.js/lib/languages/yaml";
@@ -44,6 +45,7 @@ const registry = [
   { label: "C++", key: "cpp", module: cpp },
   { label: "Dart", key: "dart", module: dart },
   { label: "Swift", key: "swift", module: swift },
+  { label: "Kotlin", key: "kotlin", module: kotlin },
   { label: "Objective C", key: "objectivec", module: objectivec },
   { label: "Node.js", key: "javascript", module: javascript },
   { label: "JSON", key: "json", module: json },

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

@@ -1,5 +1,7 @@
 @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");
+  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
 }
 
 @layer components {

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

@@ -43,6 +43,11 @@ const languageToHighlightKey = (lang) => {
       id = "typescript";
       break;
 
+    case "kotlin":
+    case "kt":
+      id = "kotlin";
+      break;
+
     case "shell":
     case "fh":
     case "sh":

package/tailwind.config.js

@@ -35,6 +35,7 @@ module.exports = {
       "h2-xs": ["var(--fs-h2-xs)", "var(--lh-tight)"],
       h3: ["var(--fs-h3)", "var(--lh-tight)"],
       h4: ["var(--fs-h4)", "var(--lh-tight)"],
+      h5: ["var(--fs-h5)", "var(--lh-tight)"],
       p1: ["var(--fs-p1)", "var(--lh-relaxed)"],
       p2: ["var(--fs-p2)", "var(--lh-relaxed)"],
       p3: ["var(--fs-p3)", "var(--lh-relaxed)"],
@@ -53,6 +54,7 @@ module.exports = {
       menu3: ["var(--fs-menu3)", "var(--lh-snug)"],
       quote: ["var(--fs-quote)", "var(--lh-relaxed)"],
       code: ["var(--fs-code)", "var(--lh-dense)"],
+      code2: ["var(--fs-code2)", "var(--lh-dense)"],
     },
     colors: {
       transparent: "transparent",
@@ -87,6 +89,8 @@ module.exports = {
     fontFamily: {
       sans: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
       mono: ["Source Code Pro", "Courier", "monospace"],
+      manrope: ["Manrope", "sans-serif"],
+      jetbrains_mono: ["JetBrains Mono", "monospace"],
     },
     margin: (theme, { negative }) => ({
       auto: "auto",
@@ -124,6 +128,7 @@ module.exports = {
       20: "var(--spacing-20)",
       24: "var(--spacing-24)",
       32: "var(--spacing-32)",
+      36: "var(--spacing-36)",
       40: "var(--spacing-40)",
       48: "var(--spacing-48)",
       64: "var(--spacing-64)",
@@ -155,11 +160,14 @@ module.exports = {
       "tighten-0.025": "var(--ls-tighten-0_025)",
       "tighten-0.02": "var(--ls-tighten-0_02)",
       "tighten-0.015": "var(--ls-tighten-0_015)",
+      "tighten-0.0125": "var(--ls-tighten-0_0125)",
       "tighten-0.01": "var(--ls-tighten-0_01)",
       "tighten-0.005": "var(--ls-tighten-0_005)",
       "tighten-0.0025": "var(--ls-tighten-0_0025)",
+      "tighten-0.0015": "var(--ls-tighten-0_0015)",
       "widen-0.1": "var(--ls-widen-0_1)",
       "widen-0.15": "var(--ls-widen-0_15)",
+      "widen-0.16": "var(--ls-widen-0_16)",
     },
     borderRadius: {
       none: "0",

package/core/DropdownMenuPreview/component.js

@@ -1,6 +0,0 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	
-/******/ 	
-/******/ })()
-;

package/core/DropdownMenuPreview.jsx

@@ -1,6 +0,0 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	
-/******/ 	
-/******/ })()
-;