From e8ab911a8ae17d41eac532ab4f324d1ef9b052f1 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 18 Mar 2024 14:46:47 +0000
Subject: [PATCH] chore: GH pages deploy test 9

---
 src/core/styles.components.css |  46 +++--
 src/core/styles/forms.css      | 100 +++++-----
 src/core/styles/text.css       | 332 ++++++++++++++++-----------------
 3 files changed, 236 insertions(+), 242 deletions(-)

diff --git a/src/core/styles.components.css b/src/core/styles.components.css
index ae5d993fd..a70f42f11 100644
--- a/src/core/styles.components.css
+++ b/src/core/styles.components.css
@@ -3,33 +3,31 @@
 @import "./styles/text.css";
 @import "./styles/forms.css";
 
-@layer components {
-  .ui-input {
-    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-    @apply max-w-screen-sm;
-  }
+.ui-input {
+  @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+  @apply hover:bg-white hover:shadow-input hover:border-transparent;
+  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+  @apply max-w-screen-sm;
+}
 
-  /* Basis for icon component */
-  .ui-icon-cool-black {
-    stroke: var(--color-cool-black);
-  }
+/* Basis for icon component */
+.ui-icon-cool-black {
+  stroke: var(--color-cool-black);
+}
 
-  .ui-icon-white {
-    stroke: var(--color-white);
-  }
+.ui-icon-white {
+  stroke: var(--color-white);
+}
 
-  .ui-icon-dark-grey {
-    stroke: var(--color-dark-grey);
-  }
+.ui-icon-dark-grey {
+  stroke: var(--color-dark-grey);
+}
 
-  .ui-version-tag {
-    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+.ui-version-tag {
+  @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
 
-    position: relative;
-    vertical-align: super;
-    margin-left: 3px;
-    font-size: 8px;
-  }
+  position: relative;
+  vertical-align: super;
+  margin-left: 3px;
+  font-size: 8px;
 }
diff --git a/src/core/styles/forms.css b/src/core/styles/forms.css
index 02c7279ce..f7555b896 100644
--- a/src/core/styles/forms.css
+++ b/src/core/styles/forms.css
@@ -1,64 +1,62 @@
-@layer components {
-  .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans font-medium;
-  }
+.ui-checkbox-p1 {
+  @apply flex items-start mb-16 font-sans font-medium;
+}
 
-  .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans font-medium;
-  }
+.ui-checkbox-p2 {
+  @apply flex items-start mb-12 font-sans font-medium;
+}
 
-  .ui-checkbox-input {
-    @apply opacity-0 absolute h-20 w-20;
-  }
+.ui-checkbox-input {
+  @apply opacity-0 absolute h-20 w-20;
+}
 
-  .ui-checkbox-styled {
-    @apply w-20 h-20 mr-16;
-    @apply bg-white flex flex-shrink-0 justify-center items-center;
-    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
-  }
+.ui-checkbox-styled {
+  @apply w-20 h-20 mr-16;
+  @apply bg-white flex flex-shrink-0 justify-center items-center;
+  @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+}
 
-  .ui-checkbox-styled-tick {
-    @apply hidden text-white;
-  }
+.ui-checkbox-styled-tick {
+  @apply hidden text-white;
+}
 
-  .ui-checkbox-label-p1 {
-    @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
-  }
+.ui-checkbox-label-p1 {
+  @apply select-none;
+  @apply text-p1 font-medium text-cool-black;
+}
 
-  .ui-checkbox-label-p2 {
-    @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
-  }
+.ui-checkbox-label-p2 {
+  @apply select-none;
+  @apply text-p2 font-medium text-cool-black;
+}
 
-  .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
-  }
+.ui-checkbox-input:disabled + .ui-checkbox-styled {
+  @apply bg-gui-unavailable border;
+}
 
-  .ui-checkbox-input:focus + .ui-checkbox-styled {
-    border-width: 0.125rem;
-    @apply border-gui-focus;
-  }
+.ui-checkbox-input:focus + .ui-checkbox-styled {
+  border-width: 0.125rem;
+  @apply border-gui-focus;
+}
 
-  .ui-checkbox-input:checked + .ui-checkbox-styled {
-    @apply bg-active-orange border-dark-grey border;
-  }
+.ui-checkbox-input:checked + .ui-checkbox-styled {
+  @apply bg-active-orange border-dark-grey border;
+}
 
-  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
-    @apply block;
-  }
+.ui-checkbox-input:checked + .ui-checkbox-styled svg {
+  @apply block;
+}
 
-  .ui-textarea {
-    @apply font-sans font-medium text-cool-black text-p1;
-    @apply p-input mb-16;
-    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-  }
+.ui-textarea {
+  @apply font-sans font-medium text-cool-black text-p1;
+  @apply p-input mb-16;
+  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
+  @apply hover:bg-white hover:shadow-input hover:border-transparent;
+  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+}
 
-  .ui-textarea::placeholder {
-    /* CSS vars don't work in ::placeholder in Webkit :( */
-    /* color: var(--text-dark-grey); */
-    color: #76767c;
-  }
+.ui-textarea::placeholder {
+  /* CSS vars don't work in ::placeholder in Webkit :( */
+  /* color: var(--text-dark-grey); */
+  color: #76767c;
 }
diff --git a/src/core/styles/text.css b/src/core/styles/text.css
index a0819c6bd..15419619f 100644
--- a/src/core/styles/text.css
+++ b/src/core/styles/text.css
@@ -1,168 +1,166 @@
-@layer components {
-  .ui-text-title {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
-  }
-
-  .ui-text-h1 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
-  }
-
-  .ui-text-h2 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
-  }
-
-  .ui-text-h3 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h3;
-    @apply tracking-tighten-0.005;
-  }
-
-  .ui-text-h4 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h4;
-    @apply tracking-tighten-0.0015;
-  }
-
-  .ui-text-h5 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h5;
-    @apply tracking-tighten-0.0025;
-  }
-
-  .ui-text-p1 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p1;
-  }
-
-  .ui-text-p2 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p2;
-  }
-
-  .ui-text-p3 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p3;
-  }
-
-  .ui-text-standfirst {
-    @apply font-sans font-light text-active-orange;
-    @apply text-standfirst xl:text-standfirst-xl;
-    @apply tracking-tighten-0.025 xl:tracking-tighten-0.015;
-  }
-
-  .ui-text-quote {
-    @apply font-sans font-normal text-cool-black;
-    @apply text-quote leading-normal;
-    @apply tracking-tighten-0.0015;
-  }
-
-  .ui-text-sub-header {
-    @apply font-sans font-semibold text-neutral-800;
-    @apply text-sub-header-xs xs:text-sub-header leading-normal;
-  }
-
-  .ui-text-overline1 {
-    @apply font-mono font-medium text-active-orange uppercase;
-    @apply text-overline1 leading-normal;
-    @apply tracking-widen-0.16;
-  }
-
-  .ui-text-overline2 {
-    @apply font-mono font-medium text-active-orange uppercase;
-    @apply text-overline2 leading-normal;
-    @apply tracking-widen-0.16;
-  }
-
-  .ui-text-menu1 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu1 leading-snug;
-  }
-
-  .ui-text-menu2 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu2 leading-snug;
-  }
-
-  .ui-text-menu3 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu3 leading-snug;
-  }
-
-  .ui-text-code {
-    @apply font-mono font-normal text-code;
-  }
-
-  .ui-text-code2 {
-    @apply font-mono font-normal text-code2;
-  }
-
-  .ui-text-code-inline {
-    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
-  }
-
-  .ui-unordered-list {
-    @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16;
-    @apply list-disc;
-  }
-
-  .ui-ordered-list {
-    @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16;
-    @apply list-decimal;
-  }
-
-  .ui-ordered-list li,
-  .ui-unordered-list li {
-    @apply mb-8;
-  }
-
-  .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 my-8 list-circle;
-  }
-
-  .ui-ordered-list ol {
-    @apply ml-24 my-16 list-decimal;
-  }
-
-  .ui-unordered-list ul ul {
-    @apply list-square my-8;
-  }
-
-  .ui-unordered-list ul ul {
-    @apply my-8;
-  }
-
-  .ui-link {
-    @apply text-gui-default;
-    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-default focus:outline-gui-focus;
-    @apply no-underline;
-  }
-
-  .ui-link-neutral {
-    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey;
-    @apply underline;
-  }
-
-  /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
-  .ui-link-neutral:focus {
-    outline: 2px solid var(--color-neutral-000);
-  }
-
-  .ui-figcaption {
-    @apply font-mono text-p3 text-neutral-800;
-  }
+.ui-text-title {
+  @apply font-sans font-extrabold text-cool-black;
+  @apply text-title-xs xs:text-title xl:text-title-xl;
+  @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
+}
+
+.ui-text-h1 {
+  @apply font-sans font-extrabold text-cool-black;
+  @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
+  @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
+}
+
+.ui-text-h2 {
+  @apply font-sans font-extrabold text-cool-black;
+  @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
+  @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
+}
+
+.ui-text-h3 {
+  @apply font-sans font-extrabold text-cool-black;
+  @apply text-h3;
+  @apply tracking-tighten-0.005;
+}
+
+.ui-text-h4 {
+  @apply font-sans font-extrabold text-cool-black;
+  @apply text-h4;
+  @apply tracking-tighten-0.0015;
+}
+
+.ui-text-h5 {
+  @apply font-sans font-extrabold text-cool-black;
+  @apply text-h5;
+  @apply tracking-tighten-0.0025;
+}
+
+.ui-text-p1 {
+  @apply font-sans font-medium text-charcoal-grey;
+  @apply text-p1;
+}
+
+.ui-text-p2 {
+  @apply font-sans font-medium text-charcoal-grey;
+  @apply text-p2;
+}
+
+.ui-text-p3 {
+  @apply font-sans font-medium text-charcoal-grey;
+  @apply text-p3;
+}
+
+.ui-text-standfirst {
+  @apply font-sans font-light text-active-orange;
+  @apply text-standfirst xl:text-standfirst-xl;
+  @apply tracking-tighten-0.025 xl:tracking-tighten-0.015;
+}
+
+.ui-text-quote {
+  @apply font-sans font-normal text-cool-black;
+  @apply text-quote leading-normal;
+  @apply tracking-tighten-0.0015;
+}
+
+.ui-text-sub-header {
+  @apply font-sans font-semibold text-neutral-800;
+  @apply text-sub-header-xs xs:text-sub-header leading-normal;
+}
+
+.ui-text-overline1 {
+  @apply font-mono font-medium text-active-orange uppercase;
+  @apply text-overline1 leading-normal;
+  @apply tracking-widen-0.16;
+}
+
+.ui-text-overline2 {
+  @apply font-mono font-medium text-active-orange uppercase;
+  @apply text-overline2 leading-normal;
+  @apply tracking-widen-0.16;
+}
+
+.ui-text-menu1 {
+  @apply font-sans font-medium text-cool-black;
+  @apply text-menu1 leading-snug;
+}
+
+.ui-text-menu2 {
+  @apply font-sans font-medium text-cool-black;
+  @apply text-menu2 leading-snug;
+}
+
+.ui-text-menu3 {
+  @apply font-sans font-medium text-cool-black;
+  @apply text-menu3 leading-snug;
+}
+
+.ui-text-code {
+  @apply font-mono font-normal text-code;
+}
+
+.ui-text-code2 {
+  @apply font-mono font-normal text-code2;
+}
+
+.ui-text-code-inline {
+  @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+}
+
+.ui-unordered-list {
+  @apply text-p1 font-medium text-charcoal-grey;
+  @apply ml-32 my-16;
+  @apply list-disc;
+}
+
+.ui-ordered-list {
+  @apply text-p1 font-medium text-charcoal-grey;
+  @apply ml-32 my-16;
+  @apply list-decimal;
+}
+
+.ui-ordered-list li,
+.ui-unordered-list li {
+  @apply mb-8;
+}
+
+.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 my-8 list-circle;
+}
+
+.ui-ordered-list ol {
+  @apply ml-24 my-16 list-decimal;
+}
+
+.ui-unordered-list ul ul {
+  @apply list-square my-8;
+}
+
+.ui-unordered-list ul ul {
+  @apply my-8;
+}
+
+.ui-link {
+  @apply text-gui-default;
+  @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+  @apply focus:text-gui-default focus:outline-gui-focus;
+  @apply no-underline;
+}
+
+.ui-link-neutral {
+  @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+  @apply focus:text-charcoal-grey;
+  @apply underline;
+}
+
+/* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
+.ui-link-neutral:focus {
+  outline: 2px solid var(--color-neutral-000);
+}
+
+.ui-figcaption {
+  @apply font-mono text-p3 text-neutral-800;
 }