@ably/ui 7.8.4-dev.f992ca8 → 7.9.1

package/core/styles.css

@@ -15,10 +15,9 @@
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
     --color-gui-hover: #0867c4;
-    --color-gui-focus: #0073e6;
-    --color-gui-focus-outline: #80b9f2;
+    --color-gui-focus: #80b9f2;
     --color-gui-active: #074095;
-    --color-gui-visited: #4887c2;
+    --color-gui-viewed: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
     --color-gui-success: #11cb24;
@@ -156,7 +155,7 @@
     /* 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.
        alternatively, look for ui-grid-* helpers. */
-    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
+    --bp-xs: 375px; /* gutters 8px, side-margin 24px */
     --bp-sm: 768px; /* gutters 16px, side-margin 32px */
     --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
     --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
@@ -344,17 +343,17 @@
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p3;
   }
 
@@ -460,18 +459,24 @@
     @apply list-square;
   }
 
-  .ui-link {
-    @apply visited:text-gui-visited;
-    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus;
-    @apply underline;
+  /* visited needs to come before :hover et all else it overrides them */
+  .ui-link:visited {
+    @apply text-gui-viewed;
   }
 
-  .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 underline;
+  .ui-link {
+    @apply hover:text-active-orange active:text-red-orange;
+    -webkit-text-decoration-color: var(--color-active-orange);
+            text-decoration-color: var(--color-active-orange);
+    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
+    -webkit-text-decoration-line: underline;
+            text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+  }
+
+  .ui-link:focus {
+    @apply focus:text-white focus:bg-active-orange focus:outline-none;
+    text-decoration: none;
   }
 }
 @layer components {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "7.8.4-dev.f992ca8",
+  "version": "7.9.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",
@@ -54,13 +54,15 @@
     "build": "node scripts/build.js",
     "build:verbose": "node scripts/build.js -v",
     "watch": "node scripts/build.js -w",
-    "dev": "./cleanstart.sh",
+    "dev": "./scripts/cleanstart.sh",
     "format:check": "yarn prettier -c *.js src src/**/*.jsx cypress",
     "format:write": "yarn prettier -w *.js src src/**/*.jsx cypress",
     "lint": "eslint *.js src src/**/*.jsx cypress",
     "cy:open": "cypress open",
     "cy:headless": "cypress run --quiet",
-    "update:all": "./scripts/update-dependents.sh"
+    "update:all": "./scripts/update-dependents.sh",
+    "pre-release": "./scripts/pre-release.sh",
+    "release": "./scripts/release.sh"
   },
   "dependencies": {
     "array-flat-polyfill": "^1.0.1",

package/src/core/Code/component.css

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

package/src/core/styles/properties.css

@@ -15,10 +15,9 @@
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
     --color-gui-hover: #0867c4;
-    --color-gui-focus: #0073e6;
-    --color-gui-focus-outline: #80b9f2;
+    --color-gui-focus: #80b9f2;
     --color-gui-active: #074095;
-    --color-gui-visited: #4887c2;
+    --color-gui-viewed: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
     --color-gui-success: #11cb24;
@@ -156,7 +155,7 @@
     /* 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.
        alternatively, look for ui-grid-* helpers. */
-    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
+    --bp-xs: 375px; /* gutters 8px, side-margin 24px */
     --bp-sm: 768px; /* gutters 16px, side-margin 32px */
     --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
     --bp-lg: 1280px; /* gutters 24px, side-margin 64px */

package/src/core/styles/text.css

@@ -30,17 +30,17 @@
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p3;
   }
 
@@ -146,17 +146,21 @@
     @apply list-square;
   }
 
+  /* visited needs to come before :hover et all else it overrides them */
+  .ui-link:visited {
+    @apply text-gui-viewed;
+  }
+
   .ui-link {
-    @apply visited:text-gui-visited;
-    @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 hover:text-active-orange active:text-red-orange;
+    text-decoration-color: var(--color-active-orange);
+    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
   }
 
-  .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 underline;
+  .ui-link:focus {
+    @apply focus:text-white focus:bg-active-orange focus:outline-none;
+    text-decoration: none;
   }
 }

package/tailwind.config.js

@@ -17,7 +17,7 @@ module.exports = {
   theme: {
     screens: {
       // CSS custom properties can't be used in media queries
-      xs: "428px",
+      xs: "375px",
       sm: "768px",
       md: "1040px",
       lg: "1280px",
@@ -74,7 +74,7 @@ module.exports = {
       "gui-hover": "var(--color-gui-hover)",
       "gui-focus": "var(--color-gui-focus)",
       "gui-active": "var(--color-gui-active)",
-      "gui-visited": "var(--color-gui-visited)",
+      "gui-viewed": "var(--color-gui-viewed)",
       "gui-unavailable": "var(--color-gui-unavailable)",
       "gui-error": "var(--color-gui-error)",
       "gui-success": "var(--color-gui-success)",
@@ -181,8 +181,7 @@ module.exports = {
         filter: "filter",
       },
       outline: {
-        "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
-        "gui-focus-neutral": "2px solid var(--color-white)",
+        "gui-focus": "4px solid var(--color-gui-focus)",
       },
       width: {
         "extend-8": "calc(100% + var(--spacing-8))",
@@ -209,14 +208,7 @@ module.exports = {
   variants: {
     extend: {
       borderColor: ["hover", "focus", "active", "group-focus", "disabled"],
-      textColor: [
-        "hover",
-        "focus",
-        "active",
-        "group-focus",
-        "disabled",
-        "visited",
-      ],
+      textColor: ["hover", "focus", "active", "group-focus", "disabled"],
       display: ["group-focus"],
       backgroundColor: ["hover", "focus", "active", "group-focus", "disabled"],
       backgroundImage: ["hover", "active", "focus"],

package/core/fonts/source-code-pro.css

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

package/src/core/fonts/source-code-pro.css

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