@ably/ui 16.1.0 → 16.1.1

package/core/styles/properties.css

@@ -212,13 +212,11 @@
     --fs-code: 0.813rem;
     --fs-code2: 0.688rem;
 
-    --lh-dense: 1;
-    --lh-tight: 1.125;
-    --lh-snug: 1.15;
+    --lh-none: 1;
+    --lh-dense: 1.125;
     --lh-min-normal: 1.2;
-    --lh-normal: 1.25;
-    --lh-relaxed: 1.45;
-    --lh-extra-relaxed: 1.6;
+    --lh-snug: 1.4;
+    --lh-relaxed: 1.6;
 
     --ls-tighten-0_025: -0.025em;
     --ls-tighten-0_02: -0.02em;

package/core/styles/text.css

@@ -81,19 +81,19 @@
   }
 
   .ui-text-label1 {
-    @apply font-sans text-neutral-900 text-label1 font-semibold leading-snug;
+    @apply font-sans text-neutral-900 text-label1 font-semibold;
   }
 
   .ui-text-label2 {
-    @apply font-sans text-neutral-900 text-label2 font-semibold leading-snug;
+    @apply font-sans text-neutral-900 text-label2 font-semibold;
   }
 
   .ui-text-label3 {
-    @apply font-sans text-neutral-900 text-label3 font-semibold leading-snug;
+    @apply font-sans text-neutral-900 text-label3 font-semibold;
   }
 
   .ui-text-label4 {
-    @apply font-sans text-neutral-900 text-label4 font-semibold leading-snug;
+    @apply font-sans text-neutral-900 text-label4 font-semibold;
   }
 
   .ui-theme-dark .ui-text-label1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "16.1.0",
+  "version": "16.1.1",
   "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/tailwind.config.js

@@ -15,7 +15,7 @@ module.exports = {
       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: ["var(--fs-h1)", "var(--lh-dense)"],
       "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)"],
@@ -24,23 +24,23 @@ module.exports = {
       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)"],
-      p4: ["var(--fs-p4)", "var(--lh-extra-relaxed)"],
+      p1: ["var(--fs-p1)", "var(--lh-relaxed)"],
+      p2: ["var(--fs-p2)", "var(--lh-relaxed)"],
+      p3: ["var(--fs-p3)", "var(--lh-relaxed)"],
+      p4: ["var(--fs-p4)", "var(--lh-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)"],
-      label1: ["var(--fs-label1)"],
-      label2: ["var(--fs-label2)"],
-      label3: ["var(--fs-label3)"],
-      label4: ["var(--fs-label4)"],
+      label1: ["var(--fs-label1)", "var(--lh-snug)"],
+      label2: ["var(--fs-label2)", "var(--lh-snug)"],
+      label3: ["var(--fs-label3)", "var(--lh-snug)"],
+      label4: ["var(--fs-label4)", "var(--lh-snug)"],
       quote: ["var(--fs-quote)"],
-      code: ["var(--fs-code)", "var(--lh-dense)"],
-      code2: ["var(--fs-code2)", "var(--lh-dense)"],
+      code: ["var(--fs-code)", "var(--lh-none)"],
+      code2: ["var(--fs-code2)", "var(--lh-none)"],
     },
     colors: {
       "neutral-000": "var(--color-neutral-000)",
@@ -307,6 +307,11 @@ module.exports = {
       gridRowStart: {
         8: "8",
       },
+      lineHeight: {
+        dense: "var(--lh-dense)",
+        snug: "var(--lh-snug)",
+        relaxed: "var(--lh-relaxed)",
+      },
       keyframes: {
         tooltipEntry: {
           "0%": { transform: "translateY(8px)", opacity: 0 },