@ably/ui 7.8.0-dev.57f3505 → 7.8.0-dev.ba22343

package/core/Logo.jsx

@@ -214,16 +214,27 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var Logo = function Logo(_ref) {
-  var theme = _ref.theme,
-      dataId = _ref.dataId,
+  var dataId = _ref.dataId,
       _ref$href = _ref.href,
       href = _ref$href === void 0 ? "/" : _ref$href;
+
+  // This fixes a bug where if the logo is rendered more then once on the page, and one of the instance
+  // of it is hidden, the other instance will not show the ably shape from the logo.
+  // This is because the defs in this SVG reference ids that need to be unique ids. The browser discards the "newer"
+  // linearGradients defined in the other logo, and inherits the `hidden` style from the first.
+  var createID = function createID() {
+    return "paint_gradient_".concat(Date.now());
+  };
+
+  var gradientIds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return [createID(), createID()];
+  }, []);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: href,
     className: "h-32"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
     "data-id": dataId,
-    className: "".concat(theme.logoTextColor, " transition-colors"),
+    className: "text-cool-black transition-colors",
     width: "108",
     height: "32",
     viewBox: "0 0 108 32",
@@ -233,12 +244,12 @@ var Logo = function Logo(_ref) {
     fill: "currentColor"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
     d: "M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z",
-    fill: "url(#paint0_linear)"
+    fill: "url(#".concat(gradientIds[0], ")")
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
     d: "M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z",
-    fill: "url(#paint1_linear)"
+    fill: "url(#".concat(gradientIds[1], ")")
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("defs", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("linearGradient", {
-    id: "paint0_linear",
+    id: gradientIds[0],
     x1: "5.47361",
     y1: "37.4219",
     x2: "32.4603",
@@ -262,7 +273,7 @@ var Logo = function Logo(_ref) {
     offset: "1",
     stopColor: "#FF0000"
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("linearGradient", {
-    id: "paint1_linear",
+    id: gradientIds[1],
     x1: "10.7084",
     y1: "39.3593",
     x2: "26.6583",
@@ -290,7 +301,6 @@ var Logo = function Logo(_ref) {
 
 Logo.propTypes = {
   dataId: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   href: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().memo(Logo));

package/core/Meganav.jsx

@@ -478,16 +478,27 @@ Icon.propTypes = {
 
 
 var Logo = function Logo(_ref) {
-  var theme = _ref.theme,
-      dataId = _ref.dataId,
+  var dataId = _ref.dataId,
       _ref$href = _ref.href,
       href = _ref$href === void 0 ? "/" : _ref$href;
+
+  // This fixes a bug where if the logo is rendered more then once on the page, and one of the instance
+  // of it is hidden, the other instance will not show the ably shape from the logo.
+  // This is because the defs in this SVG reference ids that need to be unique ids. The browser discards the "newer"
+  // linearGradients defined in the other logo, and inherits the `hidden` style from the first.
+  var createID = function createID() {
+    return "paint_gradient_".concat(Date.now());
+  };
+
+  var gradientIds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return [createID(), createID()];
+  }, []);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: href,
     className: "h-32"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
     "data-id": dataId,
-    className: "".concat(theme.logoTextColor, " transition-colors"),
+    className: "text-cool-black transition-colors",
     width: "108",
     height: "32",
     viewBox: "0 0 108 32",
@@ -497,12 +508,12 @@ var Logo = function Logo(_ref) {
     fill: "currentColor"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
     d: "M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z",
-    fill: "url(#paint0_linear)"
+    fill: "url(#".concat(gradientIds[0], ")")
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
     d: "M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z",
-    fill: "url(#paint1_linear)"
+    fill: "url(#".concat(gradientIds[1], ")")
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("defs", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("linearGradient", {
-    id: "paint0_linear",
+    id: gradientIds[0],
     x1: "5.47361",
     y1: "37.4219",
     x2: "32.4603",
@@ -526,7 +537,7 @@ var Logo = function Logo(_ref) {
     offset: "1",
     stopColor: "#FF0000"
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("linearGradient", {
-    id: "paint1_linear",
+    id: gradientIds[1],
     x1: "10.7084",
     y1: "39.3593",
     x2: "26.6583",
@@ -554,7 +565,6 @@ var Logo = function Logo(_ref) {
 
 Logo.propTypes = {
   dataId: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   href: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().memo(Logo));
@@ -6485,7 +6495,6 @@ function component_Meganav(_ref2) {
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-meganav ui-grid-px"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
-    theme: theme,
     dataId: "meganav-logo",
     href: urlBase
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(MeganavItemsDesktop_component.default, {

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.0-dev.57f3505",
+  "version": "7.8.0-dev.ba22343",
   "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,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/Logo/component.html.erb

@@ -1,13 +1,13 @@
 <%= link_to logo_href, class: 'h-32' do %>
-  <%= tag.svg class: ["transition-colors", theme(:logo_text_color)], data: { id: data_id }, width: "108", height: "32", viewBox: "0 0 108 32", xmlns: "http://www.w3.org/2000/svg" do %>
+  <%= tag.svg class: ["transition-colors", "text-cool-black"], data: { id: data_id }, width: "108", height: "32", viewBox: "0 0 108 32", xmlns: "http://www.w3.org/2000/svg" do %>
     <path
       d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
       fill="currentColor"
     />
-    <path d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z" fill="url(#paint0_linear)" />
-    <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#paint1_linear)" />
+    <path d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z" fill="url(#<%= gradient_id_0 %>)" />
+    <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#<%= gradient_id_1 %>)" />
     <defs>
-      <linearGradient id="paint0_linear" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
+      <linearGradient id="<%= gradient_id_0 %>" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
         <stop stop-color="#FF5416" />
         <stop offset="0.2535" stop-color="#FF5115" />
         <stop offset="0.461" stop-color="#FF4712" />
@@ -15,7 +15,7 @@
         <stop offset="0.8327" stop-color="#FF1E08" />
         <stop offset="1" stop-color="#FF0000" />
       </linearGradient>
-      <linearGradient id="paint1_linear" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
+      <linearGradient id="<%= gradient_id_1 %>" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
         <stop stop-color="#FF5416" />
         <stop offset="0.2535" stop-color="#FF5115" />
         <stop offset="0.461" stop-color="#FF4712" />

package/src/core/Logo/component.jsx

@@ -1,11 +1,19 @@
-import React from "react";
+import React, { useMemo } from "react";
 import T from "prop-types";
 
-const Logo = ({ theme, dataId, href = "/" }) => (
-  <a href={href} className="h-32">
+const Logo = ({ dataId, href = "/" }) => {
+  // This fixes a bug where if the logo is rendered more then once on the page, and one of the instance
+  // of it is hidden, the other instance will not show the ably shape from the logo.
+
+  // This is because the defs in this SVG reference ids that need to be unique ids. The browser discards the "newer"
+  // linearGradients defined in the other logo, and inherits the `hidden` style from the first.
+  const createID = () => `paint_gradient_${Date.now()}`
+  const gradientIds = useMemo(() => [createID(), createID()], [])
+
+  return <a href={href} className="h-32">
     <svg
       data-id={dataId}
-      className={`${theme.logoTextColor} transition-colors`}
+      className="text-cool-black transition-colors"
       width="108"
       height="32"
       viewBox="0 0 108 32"
@@ -17,11 +25,11 @@ const Logo = ({ theme, dataId, href = "/" }) => (
       />
       <path
         d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z"
-        fill="url(#paint0_linear)"
+        fill={`url(#${gradientIds[0]})`}
       />
-      <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#paint1_linear)" />
+      <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill={`url(#${gradientIds[1]})`} />
       <defs>
-        <linearGradient id="paint0_linear" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
+        <linearGradient id={gradientIds[0]} x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
           <stop stopColor="#FF5416" />
           <stop offset="0.2535" stopColor="#FF5115" />
           <stop offset="0.461" stopColor="#FF4712" />
@@ -29,7 +37,7 @@ const Logo = ({ theme, dataId, href = "/" }) => (
           <stop offset="0.8327" stopColor="#FF1E08" />
           <stop offset="1" stopColor="#FF0000" />
         </linearGradient>
-        <linearGradient id="paint1_linear" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
+        <linearGradient id={gradientIds[1]} x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
           <stop stopColor="#FF5416" />
           <stop offset="0.2535" stopColor="#FF5115" />
           <stop offset="0.461" stopColor="#FF4712" />
@@ -40,11 +48,10 @@ const Logo = ({ theme, dataId, href = "/" }) => (
       </defs>
     </svg>
   </a>
-);
+};
 
 Logo.propTypes = {
   dataId: T.string,
-  theme: T.object,
   href: T.string,
 };
 

package/src/core/Logo/component.rb

@@ -3,11 +3,13 @@ module AblyUi
     class Logo < ViewComponent::Base
       include AblyUi::Core::MeganavConfig
 
-      attr_reader :href, :data_id
+      attr_reader :href, :data_id, :gradient_id_0, :gradient_id_1
 
-      def initialize(theme_name:, data_id: '', href:)
+      def initialize(data_id: '', href:)
         @data_id = data_id
         @href = href
+        @gradient_id_0 = "paint_linear_#{Date.now}"
+        @gradient_id_1 = "paint_linear_#{Date.now}"
         theme_setup(theme_name)
       end
 

package/src/core/Meganav/component.html.erb

@@ -2,7 +2,7 @@
   <%= notice %>
 
   <div class="ui-meganav ui-grid-px">
-    <%= render(AblyUi::Core::Logo.new(theme_name: @theme_name, data_id: "meganav-logo", href: logo_link)) %>
+    <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
     <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
 
     <% if @session_data[:signedIn] %>

package/src/core/Meganav/component.jsx

@@ -81,7 +81,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
     <nav className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`} data-id="meganav" aria-label="Main">
       {notice && <Notice {...notice.props} config={notice.config} />}
       <div className="ui-meganav ui-grid-px">
-        <Logo theme={theme} dataId="meganav-logo" href={urlBase} />
+        <Logo dataId="meganav-logo" href={urlBase} />
         <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />
 
         {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}

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");
-}