@ably/ui 7.10.0-dev.e980a00 → 8.0.0-dev.467d57d

package/core/styles.css

@@ -15,9 +15,10 @@
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
     --color-gui-hover: #0867c4;
-    --color-gui-focus: #80b9f2;
+    --color-gui-focus: #0073e6;
+    --color-gui-focus-outline: #80b9f2;
     --color-gui-active: #074095;
-    --color-gui-viewed: #4887c2;
+    --color-gui-visited: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
     --color-gui-success: #11cb24;
@@ -157,7 +158,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: 375px; /* gutters 8px, side-margin 24px */
+    --bp-xs: 428px; /* 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 */
@@ -345,17 +346,17 @@
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -461,24 +462,18 @@
     @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;
   }
 
-  .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;
+  .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;
   }
 }
 @layer components {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "7.10.0-dev.e980a00",
+  "version": "8.0.0-dev.467d57d",
   "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",
@@ -65,7 +65,7 @@
     "release": "./scripts/release.sh"
   },
   "dependencies": {
-    "addsearch-js-client": "^0.6.7",
+    "addsearch-js-client": "^0.7.0",
     "array-flat-polyfill": "^1.0.1",
     "deepmerge": "^4.2.2",
     "dompurify": "^2.2.9",

package/src/core/Code/component.css

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

package/src/core/Meganav/component.js

@@ -18,6 +18,7 @@ import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/compon
 import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component";
 import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component";
 import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component";
 
 // Close menu when user clicks outside of viewport
 const windowOnBlur = (closeAll) => {
@@ -112,11 +113,14 @@ const documentScroll = (themeName) => {
   };
 };
 
-export default function Meganav({ themeName } = { themeName: null }) {
+export default function Meganav(
+  { themeName, addSearchApiKey } = { themeName: null }
+) {
   const controls = MeganavControl();
   const panelOpenControls = MobilePanelOpenClick();
   const panelCloseControls = MobilePanelCloseClick();
-  const search = MeganavSearchAutocomplete();
+  const search = MeganavSearchAutocomplete(addSearchApiKey);
+  const searchSuggestions = MeganavSearchSuggestions();
 
   const mobileDropdownControl = MeganavControlMobileDropdown({
     clearPanels: () =>
@@ -126,6 +130,7 @@ export default function Meganav({ themeName } = { themeName: null }) {
   const closeAll = () =>
     [
       mobileDropdownControl,
+      searchSuggestions,
       ...panelOpenControls,
       ...panelCloseControls,
       ...controls,
@@ -137,6 +142,7 @@ export default function Meganav({ themeName } = { themeName: null }) {
     documentClick(closeAll),
     windowOnBlur(closeAll),
     mobileDropdownControl,
+    searchSuggestions,
     ...controls,
     ...panelOpenControls,
     ...panelCloseControls,

package/src/core/Meganav/component.jsx

@@ -64,7 +64,7 @@ const panels = {
   MeganavContentDevelopers: MeganavContentDevelopers,
 };
 
-export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase }) {
+export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase, addSearchApiKey }) {
   const [sessionState, setSessionState] = useState(null);
 
   useEffect(() => {
@@ -74,7 +74,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
   }, []);
 
   useEffect(() => {
-    const teardown = MeganavScripts({ themeName });
+    const teardown = MeganavScripts({ themeName, addSearchApiKey });
     return () => teardown();
   }, [sessionState]);
 
@@ -119,4 +119,5 @@ Meganav.propTypes = {
   }),
   loginLink: T.string,
   urlBase: T.string,
+  addSearchApiKey: T.string,
 };

package/src/core/MeganavControlMobileDropdown/component.js

@@ -7,8 +7,6 @@ const MeganavControlMobileDropdown = ({ clearPanels }) => {
   const dropdown = queryId("meganav-mobile-dropdown");
   const menuIcon = queryId("meganav-control-mobile-dropdown-menu");
   const closeIcon = queryId("meganav-control-mobile-dropdown-close");
-  const meganavSearchSuggestionsToggle = queryId("meganav-mobile-search-input");
-  const meganavSearchSuggestions = queryId("meganav-mobile-search-suggestions");
 
   const clickHandler = () => {
     const ariaExpanded = control.getAttribute("aria-expanded");
@@ -28,40 +26,12 @@ const MeganavControlMobileDropdown = ({ clearPanels }) => {
     closeIcon.classList.toggle("hidden");
   };
 
-  const focusSuggestionsHandler = () => {
-    meganavSearchSuggestions.classList.add("max-h-96");
-  };
-  const blurSuggestionsHandler = (event) => {
-    if (
-      event.relatedTarget === meganavSearchSuggestions.querySelectorAll("a")[0]
-    ) {
-      return;
-    }
-    meganavSearchSuggestions.classList.remove("max-h-96");
-  };
-
   control.addEventListener("click", clickHandler);
-  meganavSearchSuggestionsToggle.addEventListener(
-    "focus",
-    focusSuggestionsHandler
-  );
-  meganavSearchSuggestionsToggle.addEventListener(
-    "blur",
-    blurSuggestionsHandler
-  );
 
   return {
     teardown: () => {
       control.removeEventListener("click", clickHandler);
       scrollLock.enablePageScroll();
-      meganavSearchSuggestionsToggle.removeEventListener(
-        "focus",
-        focusSuggestionsHandler
-      );
-      meganavSearchSuggestionsToggle.removeEventListener(
-        "blur",
-        blurSuggestionsHandler
-      );
     },
     clear: () => {
       dropdown.classList.replace("visible", "invisible");
@@ -69,7 +39,6 @@ const MeganavControlMobileDropdown = ({ clearPanels }) => {
       menuIcon.classList.remove("hidden");
       closeIcon.classList.add("hidden");
       scrollLock.enablePageScroll();
-      meganavSearchSuggestions.classList.remove("max-h-96");
     },
   };
 };

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

@@ -28,6 +28,7 @@
               class="ui-input px-48 h-48"
               style={{ maxWidth: "none" }}
               placeholder="Search"
+              autocomplete="off"
               data-id="meganav-mobile-search-input"
             />
 

package/src/core/MeganavItemsMobile/component.jsx

@@ -53,6 +53,7 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs
                   className="ui-input px-48 h-48"
                   style={{ maxWidth: "none" }}
                   placeholder="Search"
+                  autoComplete="off"
                   data-id="meganav-mobile-search-input"
                 />
 

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

@@ -43,10 +43,10 @@
 
   <li>
     <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
-  <li>
+  </li>
 
   <% if account? %>
-    <li class="ml-16">
+    <li>
       <%= link_to "Dashboard", @session_data[:account][:links][:dashboard][:href], class: "ui-btn-secondary p-btn-small" %>
     </li>
   <% end %>

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

@@ -2,12 +2,12 @@
   type="button"
   data-id="meganav-control"
   data-control="search"
-  class="h-64 w-24 px-24 pr-48 py-20"
+  class="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
   aria-expanded="false"
   aria-controls="panel-search"
   aria-label="Show Search Panel"
 >
-  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "hover:text-gui-hover")) %>
+  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "group-hover:text-gui-hover group-focus:text-gui-focus")) %>
 </button>
 
 <div class="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">

package/src/core/MeganavSearch/component.jsx

@@ -11,12 +11,12 @@ const MeganavSearch = ({ absUrl }) => {
         type="button"
         data-id="meganav-control"
         data-control="search"
-        className="h-64 w-24 px-24 pr-48 py-20"
+        className="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
         aria-expanded="false"
         aria-controls="panel-search"
         aria-label={`Show Search Panel`}
       >
-        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="hover:text-gui-hover" />
+        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="group-hover:text-gui-hover group-focus:text-gui-focus" />
       </button>
 
       <div className="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">

package/src/core/MeganavSearchAutocomplete/component.js

@@ -18,8 +18,8 @@ const init = ({ input, container, listContainer, clear, client }) => {
     }
   };
 
-  const markQueryInSuggestion = (suggestion, query) => {
-    return suggestion.value.replace(
+  const markQueryInSuggestion = (suggestionValue, query) => {
+    return suggestionValue.replace(
       query.toLowerCase(),
       `<span class="font-light">${query}</span>`
     );
@@ -47,9 +47,16 @@ const init = ({ input, container, listContainer, clear, client }) => {
 
   const renderResults =
     (query) =>
-    (results = { suggestions: [] }) => {
+    (results = {}) => {
       toggleClearBtn(query);
 
+      // Prevent invalid access error when key is invalid
+      if (!Array.isArray(results.suggestions)) {
+        clearResults();
+        return;
+      }
+
+      // Prevent key error from invalid key
       if (results.suggestions.length === 0) {
         clearResults();
         return;
@@ -58,6 +65,7 @@ const init = ({ input, container, listContainer, clear, client }) => {
       const items = results.suggestions.map((suggestion, index) => {
         const li = document.createElement("li");
         const button = document.createElement("button");
+        button.type = "button";
 
         button.classList.add(
           "ui-text-menu2",
@@ -71,25 +79,25 @@ const init = ({ input, container, listContainer, clear, client }) => {
           "hover:bg-light-grey"
         );
 
-        button.innerHTML = markQueryInSuggestion(suggestion, query);
+        button.innerHTML = markQueryInSuggestion(suggestion.value, query);
 
         button.dataset.suggestionIndex = index;
 
         button.addEventListener("click", () => {
-          navigateToUrl(suggestion);
+          navigateToUrl(suggestion.value);
         });
 
         button.addEventListener("keydown", (e) => {
           const key = e.key;
 
           if (key === "ArrowDown") {
-            focusNext();
+            focusNext(index);
           } else if (key === "ArrowUp" && index - 1 < 0) {
             input.focus();
           } else if (key === "ArrowUp" && index - 1 >= 0) {
-            focusPrevious();
+            focusPrevious(index);
           } else if (key === "Enter" || key === "Space") {
-            navigateToUrl(suggestion);
+            navigateToUrl(suggestion.value);
           }
         });
 
@@ -142,12 +150,12 @@ const init = ({ input, container, listContainer, clear, client }) => {
   };
 };
 
-export default () => {
-  const apiKey = document.body.dataset.addSearchApiKey;
+export default (apiKey) => {
   if (!apiKey) {
     console.log(`No AddSearch API key provided, skipping search suggestions.`);
     return [];
   }
+
   const client = new AddSearchClient(apiKey);
 
   return [

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

@@ -1,10 +1,10 @@
 <section class="ui-meganav-content grid-cols-12">
   <div class="col-span-8">
     <div class="mb-32">
-      <form class="flex items-start" action={absUrl("/search")} method="get">
+      <%= tag.form class: "flex items-start", action: abs_url("/search"), method: "get" do %>
         <div class="relative w-full">
           <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css:"absolute top-12 left-16")) %>
-          <input type="search" name="q" class="ui-input pl-48 h-48" placeholder="Search" data-id="meganav-search-input" />
+          <input type="search" name="q" class="ui-input pl-48 h-48" placeholder="Search" autocomplete="off" data-id="meganav-search-input" />
 
           <%= render(AblyUi::Core::MeganavSearchAutocomplete.new) %>
         </div>
@@ -12,7 +12,7 @@
         <button type="submit" class="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">
           Search
         </button>
-      </form>
+      <% end %>
     </div>
   </div>
 

package/src/core/MeganavSearchPanel/component.jsx

@@ -13,7 +13,7 @@ const MeganavSearchPanel = ({ absUrl }) => {
           <form className="flex items-start" action={absUrl("/search")} method="get">
             <div className="relative w-full">
               <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="absolute top-12 left-16" />
-              <input type="search" name="q" className="ui-input pl-48 h-48" placeholder="Search" data-id="meganav-search-input" />
+              <input type="search" name="q" className="ui-input pl-48 h-48" placeholder="Search" autoComplete="off" data-id="meganav-search-input" />
 
               <MeganavSearchAutocomplete />
             </div>

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

@@ -3,16 +3,16 @@
 <div class="flex justify-between items-center overflow-x-scroll md:overflow-auto">
   <ul class="flex">
     <li class="py-12 pr-8 flex-shrink-0">
-      <%= link_to 'How does Ably work?', abs_url("/docs/how-ably-works"), class: "ui-text-p2" %>
+      <%= link_to 'How does Ably work?', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
     <li class="py-12 px-8 flex-shrink-0">
-      <%= link_to 'Quickstart guide', abs_url("/docs/quick-start-guide"), class: "ui-text-p2" %>
+      <%= link_to 'Quickstart guide', abs_url("/docs/quick-start-guide"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
     <li class="py-12 px-8 flex-shrink-0">
-      <%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2" %>
+      <%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
     <li class="py-12 pl-8 flex-shrink-0">
-      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2" %>
+      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
   </ul>
 

package/src/core/MeganavSearchSuggestions/component.js

@@ -0,0 +1,123 @@
+import { queryId } from "../dom-query";
+
+const DRAG_BUFFER = 5;
+
+const getTranslateX = (node) =>
+  new DOMMatrix(window.getComputedStyle(node).transform).e;
+
+const updateTranslateX = (node, value) =>
+  (node.style.transform = `translateX(${value}px)`);
+
+const dragLeftBoundary = (translateX, threshold) => translateX >= threshold;
+
+const dragRightBoundary = (translateX, itemsWidth, windowWidth, threshold) =>
+  Math.abs(translateX - windowWidth + threshold) > itemsWidth;
+
+const getDistance = (e, touchStartX) =>
+  e.changedTouches[0]?.clientX - touchStartX;
+
+const withinBuffer = (distance) => Math.abs(distance) < DRAG_BUFFER;
+
+const MeganavSearchSuggestions = () => {
+  const suggestionsToggle = queryId("meganav-mobile-search-input");
+  const suggestions = queryId("meganav-mobile-search-suggestions");
+  const list = suggestions.querySelector("ul");
+  const listItems = list.querySelectorAll("li");
+
+  const itemsTotalWidth = Array.from(listItems)
+    .map((item) => item.getBoundingClientRect().width)
+    .reduce((acc, val) => acc + val, 0);
+
+  const dragLeft = (distance, threshold) => {
+    const currentTranslateX = getTranslateX(list);
+    const translateX = Math.round(currentTranslateX + distance);
+    if (dragLeftBoundary(translateX, threshold)) return;
+    updateTranslateX(list, translateX);
+  };
+
+  const dragLeftEnd = (distance, threshold) => {
+    const currentTranslateX = getTranslateX(list);
+    let translateX = Math.round(currentTranslateX + distance);
+
+    if (dragLeftBoundary(translateX, threshold)) {
+      translateX = 0;
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  const dragRight = (distance, threshold) => {
+    const listWidth = list.getBoundingClientRect().width;
+    const currentTranslateX = getTranslateX(list);
+    const translateX = Math.round(currentTranslateX + distance);
+
+    if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
+      return;
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  const dragRightEnd = (distance, threshold) => {
+    const listWidth = list.getBoundingClientRect().width;
+    const currentTranslateX = getTranslateX(list);
+    let translateX = Math.round(currentTranslateX + distance);
+
+    if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
+      translateX = -(itemsTotalWidth - listWidth + threshold);
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  let touchStartX;
+
+  const touchstartHandler = (e) => {
+    touchStartX = e.touches[0]?.clientX;
+  };
+
+  const touchmoveHandler = (e) => {
+    const distance = getDistance(e, touchStartX);
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeft(distance, 24) : dragRight(distance, 96);
+  };
+
+  const touchendHandler = (e) => {
+    const distance = getDistance(e, touchStartX);
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
+  };
+
+  const focusSuggestionsHandler = () => {
+    suggestions.classList.add("max-h-96");
+  };
+
+  const blurSuggestionsHandler = (e) => {
+    if (e.relatedTarget === suggestions.querySelectorAll("a")[0]) {
+      return;
+    }
+    suggestions.classList.remove("max-h-96");
+  };
+
+  suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
+  suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
+  suggestions.addEventListener("touchstart", touchstartHandler);
+  suggestions.addEventListener("touchmove", touchmoveHandler);
+  suggestions.addEventListener("touchend", touchendHandler);
+
+  return {
+    teardown: () => {
+      suggestionsToggle.removeEventListener("focus", focusSuggestionsHandler);
+      suggestionsToggle.removeEventListener("blur", blurSuggestionsHandler);
+      suggestions.removeEventListener("touchstart", touchstartHandler);
+      suggestions.removeEventListener("touchmove", touchmoveHandler);
+      suggestions.removeEventListener("touchend", touchendHandler);
+    },
+    clear: () => {
+      suggestions.classList.remove("max-h-96");
+      list.style.transform = `translateX(0px)`;
+    },
+  };
+};
+
+export default MeganavSearchSuggestions;

package/src/core/MeganavSearchSuggestions/component.jsx

@@ -8,25 +8,25 @@ const MeganavSearchSuggestions = ({ absUrl, displaySupportLink }) => {
     <>
       <p className="ui-text-overline2 text-cool-black py-12">Popular pages</p>
 
-      <div className="flex justify-between items-center overflow-x-scroll md:overflow-auto">
-        <ul className="flex">
+      <div className="flex justify-between items-center overflow-hidden">
+        <ul className="flex transition-transform">
           <li className="py-12 pr-8 flex-shrink-0">
-            <a href={absUrl("/docs/how-ably-works")} className="ui-text-p2">
+            <a href={absUrl("/docs/how-ably-works")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
               How does Ably work?
             </a>
           </li>
           <li className="py-12 px-8 flex-shrink-0">
-            <a href={absUrl("/docs/quick-start-guide")} className="ui-text-p2">
+            <a href={absUrl("/docs/quick-start-guide")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
               Quickstart guide
             </a>
           </li>
           <li className="py-12 px-8 flex-shrink-0">
-            <a href={absUrl("/docs/core-features/pubsub")} className="ui-text-p2">
+            <a href={absUrl("/docs/core-features/pubsub")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
               Publish/Subscribe Messaging
             </a>
           </li>
           <li className="py-12 pl-8 flex-shrink-0">
-            <a href={absUrl("/platform")} className="ui-text-p2">
+            <a href={absUrl("/platform")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
               Platform
             </a>
           </li>

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

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

package/src/core/styles/properties.css

@@ -15,9 +15,10 @@
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
     --color-gui-hover: #0867c4;
-    --color-gui-focus: #80b9f2;
+    --color-gui-focus: #0073e6;
+    --color-gui-focus-outline: #80b9f2;
     --color-gui-active: #074095;
-    --color-gui-viewed: #4887c2;
+    --color-gui-visited: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
     --color-gui-success: #11cb24;
@@ -157,7 +158,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: 375px; /* gutters 8px, side-margin 24px */
+    --bp-xs: 428px; /* 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 */