@ably/ui 6.9.0 → 6.10.0-dev.67b3652

package/core/Code/component.css

@@ -1,5 +1,5 @@
 @layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
 }
 
 @layer components {

package/core/Code.jsx

@@ -7548,7 +7548,7 @@ var Code = function Code(_ref) {
   var language = _ref.language,
       snippet = _ref.snippet,
       _ref$textSize = _ref.textSize,
-      textSize = _ref$textSize === void 0 ? "ui-text-code1" : _ref$textSize,
+      textSize = _ref$textSize === void 0 ? "ui-text-code" : _ref$textSize,
       _ref$padding = _ref.padding,
       padding = _ref$padding === void 0 ? "p-32" : _ref$padding,
       _ref$additionalCSS = _ref.additionalCSS,

package/core/styles.css

@@ -96,8 +96,7 @@
     --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
     --fs-quote: 1.5rem;
-    --fs-code1: 1rem;
-    --fs-code2: 0.875rem;
+    --fs-code: 0.875rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;
@@ -149,6 +148,7 @@
     --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
     --spacing-chip: 0.75rem 1rem; /* 6px 8px */
     --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
+    --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
 
     /* 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.
@@ -400,12 +400,12 @@
     @apply text-menu3;
   }
 
-  .ui-text-code1 {
-    @apply font-mono font-normal text-code1;
+  .ui-text-code {
+    @apply font-mono font-semibold text-code;
   }
 
-  .ui-text-code2 {
-    @apply font-mono font-normal 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;
   }
 
   .ui-unordered-list {
@@ -413,10 +413,24 @@
     @apply list-disc ml-32 mb-24;
   }
 
+  .ui-ordered-list {
+    @apply text-p1 font-light text-cool-black;
+    @apply ml-32 mb-24 list-decimal;
+  }
+
+  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
+  .ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
+    margin-bottom: 0;
+  }
+
   .ui-unordered-list ul {
     @apply ml-24 mt-16 list-circle;
   }
 
+  .ui-ordered-list ol {
+    @apply ml-24 mt-16 list-decimal;
+  }
+
   .ui-unordered-list ul ul {
     @apply list-square;
   }
@@ -436,11 +450,11 @@
 
   .ui-unordered-list-with-emphasis ul {
     margin-top: calc(var(--spacing-16) + var(--spacing-8));
-    @apply ml-24 list-disc;
+    @apply ml-24 list-circle;
   }
 
   .ui-unordered-list-with-emphasis ul ul {
-    @apply list-circle;
+    @apply list-square;
   }
 
   /* visited needs to come before :hover et all else it overrides them */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "6.9.0",
+  "version": "6.10.0-dev.67b3652",
   "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/src/core/Code/component.css

@@ -1,5 +1,5 @@
 @layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
 }
 
 @layer components {

package/src/core/Code/component.jsx

@@ -4,7 +4,7 @@ import T from "prop-types";
 import "./component.css";
 import { highlight } from "./component.js";
 
-const Code = ({ language, snippet, textSize = "ui-text-code1", padding = "p-32", additionalCSS = "" }) => {
+const Code = ({ language, snippet, textSize = "ui-text-code", padding = "p-32", additionalCSS = "" }) => {
   const HTMLraw = highlight(language, `${snippet}`.trim());
   const className = `language-${language} ${textSize}`;
   return (

package/src/core/Code/component.rb

@@ -2,7 +2,7 @@ module AblyUi
   module Core
     class Code < ViewComponent::Base
       include AblyUi::Core::Util
-      def initialize(language:, snippet:, text_size: 'ui-text-code1')
+      def initialize(language:, snippet:, text_size: 'ui-text-code')
         @language = language
         @snippet = snippet.try(:strip)
         @text_size = text_size

package/src/core/styles/properties.css

@@ -96,8 +96,7 @@
     --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
     --fs-quote: 1.5rem;
-    --fs-code1: 1rem;
-    --fs-code2: 0.875rem;
+    --fs-code: 0.875rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;
@@ -149,6 +148,7 @@
     --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
     --spacing-chip: 0.75rem 1rem; /* 6px 8px */
     --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
+    --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
 
     /* 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

@@ -89,12 +89,12 @@
     @apply text-menu3;
   }
 
-  .ui-text-code1 {
-    @apply font-mono font-normal text-code1;
+  .ui-text-code {
+    @apply font-mono font-semibold text-code;
   }
 
-  .ui-text-code2 {
-    @apply font-mono font-normal 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;
   }
 
   .ui-unordered-list {
@@ -102,10 +102,24 @@
     @apply list-disc ml-32 mb-24;
   }
 
+  .ui-ordered-list {
+    @apply text-p1 font-light text-cool-black;
+    @apply ml-32 mb-24 list-decimal;
+  }
+
+  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
+  .ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
+    margin-bottom: 0;
+  }
+
   .ui-unordered-list ul {
     @apply ml-24 mt-16 list-circle;
   }
 
+  .ui-ordered-list ol {
+    @apply ml-24 mt-16 list-decimal;
+  }
+
   .ui-unordered-list ul ul {
     @apply list-square;
   }
@@ -125,11 +139,11 @@
 
   .ui-unordered-list-with-emphasis ul {
     margin-top: calc(var(--spacing-16) + var(--spacing-8));
-    @apply ml-24 list-disc;
+    @apply ml-24 list-circle;
   }
 
   .ui-unordered-list-with-emphasis ul ul {
-    @apply list-circle;
+    @apply list-square;
   }
 
   /* visited needs to come before :hover et all else it overrides them */

package/tailwind.config.js

@@ -52,8 +52,7 @@ module.exports = {
       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)"],
+      code: ["var(--fs-code)", "var(--lh-dense)"],
     },
     colors: {
       transparent: "transparent",
@@ -107,6 +106,7 @@ module.exports = {
       media: "var(--spacing-media)",
       input: "var(--spacing-input)",
       overline: "var(--spacing-overline)",
+      "inline-code": "var(--spacing-inline-code)",
       ...theme("spacing"),
     }),
     spacing: {