@ably/ui 8.6.0 → 8.7.0-dev.28a63f9

package/src/core/icons/stackoverflow.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="M16.8833 17.0404L6.44573 14.8304L6.89029 12.7367L17.3279 14.9467L16.8833 17.0404ZM17.4825 14.3457L7.81808 9.82876L8.72653 7.89014L18.391 12.4071L17.4825 14.3457ZM18.7002 11.9031L10.5048 5.05977L11.8771 3.41195L20.0726 10.2552L18.7002 11.9031ZM14.0806 1.27948L15.8009 0L22.1601 8.58804L20.4398 9.86753L14.0806 1.27948ZM16.8833 19.7351H6.25244V17.6026H16.8833V19.7351ZM21.1356 15.4701H19.0094V21.8675H4.12617V15.4701H2V24H21.1356V15.4701Z" fill="currentColor"/>
+</svg>

package/src/core/icons/youtube.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1509_18255)">
+    <path d="M30.525 3.44433C30.1655 2.09844 29.113 1.03726 27.778 0.6749C25.3391 0.00195312 15.5834 0.00195312 15.5834 0.00195312C15.5834 0.00195312 5.82773 0.00195312 3.38881 0.649017C2.0795 1.01137 1.00124 2.09844 0.64182 3.44433C0 5.90318 0 11.002 0 11.002C0 11.002 0 16.1268 0.64182 18.5597C1.00124 19.9056 2.05382 20.9668 3.38881 21.3292C5.8534 22.0021 15.5834 22.0021 15.5834 22.0021C15.5834 22.0021 25.3391 22.0021 27.778 21.3551C29.113 20.9927 30.1655 19.9315 30.525 18.5856C31.1668 16.1268 31.1668 11.0279 31.1668 11.0279C31.1668 11.0279 31.1925 5.90318 30.525 3.44433Z" fill="currentColor"/>
+    <path d="M20.5892 11.0021L12.4766 6.2915V15.7128L20.5892 11.0021Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1509_18255">
+      <rect width="31.1667" height="22" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/core/styles/properties.css

@@ -47,6 +47,8 @@
     --icon-color-glassdoor: #0baa41;
     --icon-color-github: #000000;
     --icon-color-discord: #5865f2;
+    --icon-color-stackoverflow: #f48024;
+    --icon-color-youtube: #ff0000;
 
     --gradient-active-orange: linear-gradient(
       61.2deg,

package/src/core/styles/text.css

@@ -147,16 +147,15 @@
   }
 
   .ui-link {
-    @apply visited:text-gui-visited;
+    @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus;
-    @apply underline;
+    @apply focus:text-gui-default focus:outline-gui-focus;
+    @apply no-underline;
   }
 
   .ui-link-neutral {
-    @apply visited:text-dark-grey;
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
+    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
     @apply underline;
   }
 }

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

@@ -0,0 +1,61 @@
+// 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 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: "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,69 @@
+@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");
+}
+
+@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,98 @@
+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 "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

@@ -131,6 +131,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)",
     },