@ably/ui 8.6.0 → 8.7.0-dev.05d9441

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

@@ -0,0 +1,63 @@
+// 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 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";
+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: "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 },
+  { 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,71 @@
+@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 {
+  .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,103 @@
+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 "kotlin":
+    case "kt":
+      id = "kotlin";
+      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

@@ -24,60 +24,147 @@ module.exports = {
       xl: "1440px",
     },
     fontSize: {
-      title: ["var(--fs-title)", "var(--lh-tight)"],
-      "title-xl": ["var(--fs-title-xl)", "var(--lh-tight)"],
-      "title-xs": ["var(--fs-title-xs)", "var(--lh-tight)"],
+      title: ["var(--fs-title)", "var(--lh-min-normal)"],
+      "title-xl": ["var(--fs-title-xl)", "var(--lh-min-normal)"],
+      "title-xs": ["var(--fs-title-xs)", "var(--lh-min-normal)"],
       h1: ["var(--fs-h1)", "var(--lh-tight)"],
-      "h1-xl": ["var(--fs-h1-xl)", "var(--lh-tight)"],
-      "h1-xs": ["var(--fs-h1-xs)", "var(--lh-tight)"],
-      h2: ["var(--fs-h2)", "var(--lh-tight)"],
-      "h2-xl": ["var(--fs-h2-xl)", "var(--lh-tight)"],
-      "h2-xs": ["var(--fs-h2-xs)", "var(--lh-tight)"],
-      h3: ["var(--fs-h3)", "var(--lh-tight)"],
-      h4: ["var(--fs-h4)", "var(--lh-tight)"],
-      p1: ["var(--fs-p1)", "var(--lh-relaxed)"],
-      p2: ["var(--fs-p2)", "var(--lh-relaxed)"],
-      p3: ["var(--fs-p3)", "var(--lh-relaxed)"],
-      standfirst: ["var(--fs-standfirst)", "var(--lh-snug)"],
-      "standfirst-xl": ["var(--fs-standfirst-xl)", "var(--lh-snug)"],
-      "sub-header": ["var(--fs-sub-header)", "var(--lh-normal)"],
-      "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)"],
+      "h1-xl": ["var(--fs-h1-xl)", "var(--lh-min-normal)"],
+      "h1-xs": ["var(--fs-h1-xs)", "var(--lh-min-normal)"],
+      h2: ["var(--fs-h2)", "var(--lh-min-normal)"],
+      "h2-xl": ["var(--fs-h2-xl)", "var(--lh-min-normal)"],
+      "h2-xs": ["var(--fs-h2-xs)", "var(--lh-min-normal)"],
+      h3: ["var(--fs-h3)", "var(--lh-min-normal)"],
+      h4: ["var(--fs-h4)", "var(--lh-min-normal)"],
+      h5: ["var(--fs-h5)", "var(--lh-min-normal)"],
+      p1: ["var(--fs-p1)", "var(--lh-extra-relaxed)"],
+      p2: ["var(--fs-p2)", "var(--lh-extra-relaxed)"],
+      p3: ["var(--fs-p3)", "var(--lh-extra-relaxed)"],
+      standfirst: ["var(--fs-standfirst)"],
+      "standfirst-xl": ["var(--fs-standfirst-xl)"],
+      "sub-header": ["var(--fs-sub-header)"],
+      "sub-header-xs": ["var(--fs-sub-header-xs)"],
+      overline1: ["var(--fs-overline1)"],
+      overline2: ["var(--fs-overline2)"],
       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)"],
+      menu1: ["var(--fs-menu1)"],
+      menu2: ["var(--fs-menu2)"],
+      menu3: ["var(--fs-menu3)"],
+      quote: ["var(--fs-quote)"],
       code: ["var(--fs-code)", "var(--lh-dense)"],
+      code2: ["var(--fs-code2)", "var(--lh-dense)"],
     },
     colors: {
-      transparent: "transparent",
-      "cool-black": "var(--color-cool-black)",
-      "active-orange": "var(--color-active-orange)",
-      "red-orange": "var(--color-red-orange)",
-      white: "var(--color-white)",
-      "electric-cyan": "var(--color-electric-cyan)",
-      "zingy-green": "var(--color-zingy-green)",
-      "bright-red": "var(--color-bright-red)",
-      "jazzy-pink": "var(--color-jazzy-pink)",
-      "extra-light-grey": "var(--color-extra-light-grey)",
-      "light-grey": "var(--color-light-grey)",
-      "mid-grey": "var(--color-mid-grey)",
-      "dark-grey": "var(--color-dark-grey)",
-      "charcoal-grey": "var(--color-charcoal-grey)",
-      "gui-default": "var(--color-gui-default)",
-      "gui-alt": "var(--color-cool-black)",
-      "gui-hover": "var(--color-gui-hover)",
-      "gui-focus": "var(--color-gui-focus)",
-      "gui-active": "var(--color-gui-active)",
-      "gui-visited": "var(--color-gui-visited)",
+      "neutral-100": "var(--color-neutral-100)",
+      "neutral-200": "var(--color-neutral-200)",
+      "neutral-300": "var(--color-neutral-300)",
+      "neutral-400": "var(--color-neutral-400)",
+      "neutral-500": "var(--color-neutral-500)",
+      "neutral-600": "var(--color-neutral-600)",
+      "neutral-700": "var(--color-neutral-700)",
+      "neutral-800": "var(--color-neutral-800)",
+      "neutral-900": "var(--color-neutral-900)",
+      "neutral-1000": "var(--color-neutral-1000)",
+      "neutral-1100": "var(--color-neutral-1100)",
+      "neutral-1200": "var(--color-neutral-1200)",
+      "neutral-1300": "var(--color-neutral-1300)",
+
+      "orange-100": "var(--color-orange-100)",
+      "orange-200": "var(--color-orange-200)",
+      "orange-300": "var(--color-orange-300)",
+      "orange-400": "var(--color-orange-400)",
+      "orange-500": "var(--color-orange-500)",
+      "orange-600": "var(--color-orange-600)",
+      "orange-700": "var(--color-orange-700)",
+      "orange-800": "var(--color-orange-800)",
+      "orange-900": "var(--color-orange-900)",
+      "orange-1000": "var(--color-orange-1000)",
+      "orange-1100": "var(--color-orange-1100)",
+
+      "yellow-100": "var(--color-yellow-100)",
+      "yellow-200": "var(--color-yellow-200)",
+      "yellow-300": "var(--color-yellow-300)",
+      "yellow-400": "var(--color-yellow-400)",
+      "yellow-500": "var(--color-yellow-500)",
+      "yellow-600": "var(--color-yellow-600)",
+      "yellow-700": "var(--color-yellow-700)",
+      "yellow-800": "var(--color-yellow-800)",
+      "yellow-900": "var(--color-yellow-900)",
+      "green-100": "var(--color-green-100)",
+      "green-200": "var(--color-green-200)",
+      "green-300": "var(--color-green-300)",
+      "green-400": "var(--color-green-400)",
+      "green-500": "var(--color-green-500)",
+      "green-600": "var(--color-green-600)",
+      "green-700": "var(--color-green-700)",
+      "green-800": "var(--color-green-800)",
+      "green-900": "var(--color-green-900)",
+      "blue-100": "var(--color-blue-100)",
+      "blue-200": "var(--color-blue-200)",
+      "blue-300": "var(--color-blue-300)",
+      "blue-400": "var(--color-blue-400)",
+      "blue-500": "var(--color-blue-500)",
+      "blue-600": "var(--color-blue-600)",
+      "blue-700": "var(--color-blue-700)",
+      "blue-800": "var(--color-blue-800)",
+      "blue-900": "var(--color-blue-900)",
+      "violet-100": "var(--color-violet-100)",
+      "violet-200": "var(--color-violet-200)",
+      "violet-300": "var(--color-violet-300)",
+      "violet-400": "var(--color-violet-400)",
+      "violet-500": "var(--color-violet-500)",
+      "violet-600": "var(--color-violet-600)",
+      "violet-700": "var(--color-violet-700)",
+      "violet-800": "var(--color-violet-800)",
+      "violet-900": "var(--color-violet-900)",
+      "pink-100": "var(--color-pink-100)",
+      "pink-200": "var(--color-pink-200)",
+      "pink-300": "var(--color-pink-300)",
+      "pink-400": "var(--color-pink-400)",
+      "pink-500": "var(--color-pink-500)",
+      "pink-600": "var(--color-pink-600)",
+      "pink-700": "var(--color-pink-700)",
+      "pink-800": "var(--color-pink-800)",
+      "pink-900": "var(--color-pink-900)",
+
+      "gui-blue-default-light": "var(--color-gui-blue-default-light)",
+      "gui-blue-hover-light": "var(--color-gui-blue-hover-light)",
+      "gui-blue-active-light": "var(--color-gui-blue-active-light)",
+      "gui-blue-default-dark": "var(--color-gui-blue-default-dark)",
+      "gui-blue-hover-dark": "var(--color-gui-blue-hover-dark)",
+      "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
+      "gui-blue-focus": "var(--color-gui-blue-focus)",
       "gui-unavailable": "var(--color-gui-unavailable)",
-      "gui-error": "var(--color-gui-error)",
-      "gui-success": "var(--color-gui-success)",
+      "gui-success-green": "var(--color-gui-success-green)",
+      "gui-error-red": "var(--color-gui-error-red)",
+      "gui-focus": "var(--color-gui-focus)",
+      "gui-focus-outline": "var(--color-gui-focus-outline)",
+
+      transparent: "transparent",
+      "cool-black": "var(--color-neutral-1300)",
+      "active-orange": "var(--color-orange-600)",
+      "red-orange": "var(--color-orange-800)",
+      white: "var(--color-neutral-000)",
+      "electric-cyan": "var(--color-blue-400)",
+      "zingy-green": "var(--color-green-400)",
+      "bright-red": "var(--color-orange-700)",
+      "jazzy-pink": "var(--color-pink-500)",
+      "extra-light-grey": "var(--color-neutral-100)",
+      "light-grey": "var(--color-neutral-200)",
+      "mid-grey": "var(--color-neutral-500)",
+      "dark-grey": "var(--color-neutral-800)",
+      "charcoal-grey": "var(--color-neutral-1000)",
+      "gui-default": "var(--color-gui-blue-default-light)",
+      "gui-hover": "var(--color-gui-blue-hover-light)",
+      "gui-active": "var(--color-gui-blue-active-light)",
+      "gui-default-dark": "var(--color-gui-blue-default-dark)",
+      "gui-hover-dark": "var(--color-gui-blue-hover-dark)",
+      "gui-active-dark": "var(--color-gui-blue-active-dark)",
+      "gui-alt": "var(--color-neutral-1300)",
+      "gui-error": "var(--color-gui-error-red)",
+      "gui-success": "var(--color-gui-success-green)",
       "icon-linkedin": "var(--icon-color-linkedin)",
       "icon-twitter": "var(--icon-color-twitter)",
       "icon-glassdoor": "var(--icon-color-glassdoor)",
@@ -85,8 +172,10 @@ module.exports = {
       "icon-discord": "var(--icon-color-discord)",
     },
     fontFamily: {
-      sans: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
-      mono: ["Source Code Pro", "Courier", "monospace"],
+      sans_next: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
+      mono_source_code: ["Source Code Pro", "Courier", "monospace"],
+      sans: ["Manrope", "sans-serif"],
+      mono: ["JetBrains Mono", "monospace"],
     },
     margin: (theme, { negative }) => ({
       auto: "auto",
@@ -124,6 +213,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)",
@@ -131,6 +221,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)",
     },
@@ -142,7 +233,7 @@ module.exports = {
       ...breakpoints(theme("screens")),
     }),
     boxShadow: {
-      subtle: "0px 1px 0px var(--color-mid-grey)",
+      subtle: "0px 1px 0px var(--color-neutral-500)",
       tooltip: "0px 5px 10px 0px #00000022",
       container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
       "container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
@@ -154,11 +245,15 @@ 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": 0,
       "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",
@@ -184,7 +279,7 @@ module.exports = {
       },
       outline: {
         "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
-        "gui-focus-neutral": "2px solid var(--color-white)",
+        "gui-focus-neutral": "2px solid var(--color-neutral-000)",
       },
       width: {
         "extend-8": "calc(100% + var(--spacing-8))",

package/core/Meganav/component.js.LICENSE.txt

@@ -1,7 +0,0 @@
-/*!
- * @overview es6-promise - a tiny implementation of Promises/A+.
- * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
- * @license   Licensed under MIT license
- *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
- * @version   v4.2.8+1e68dce6
- */

package/core/MeganavSearchAutocomplete/component.js.LICENSE.txt

@@ -1,7 +0,0 @@
-/*!
- * @overview es6-promise - a tiny implementation of Promises/A+.
- * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
- * @license   Licensed under MIT license
- *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
- * @version   v4.2.8+1e68dce6
- */

package/core/Notice/component.js.LICENSE.txt

@@ -1,9 +0,0 @@
-/*!
- * JavaScript Cookie v2.2.1
- * https://github.com/js-cookie/js-cookie
- *
- * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
- * Released under the MIT license
- */
-
-/*! @license DOMPurify | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.2.2/LICENSE */