@ably/ui 11.7.1 → 12.0.0-dev.31bc8d9

package/core/styles.css

@@ -1,34 +1,132 @@
 @layer base {
   :root {
-    --color-cool-black: #03020d;
-    --color-active-orange: #ff5416;
-    --color-red-orange: #e40000;
-    --color-white: #ffffff;
-    --color-electric-cyan: #4af7ff;
-    --color-zingy-green: #08ff13;
-    --color-bright-red: #ff2739;
-    --color-jazzy-pink: #ff17d2;
-    --color-extra-light-grey: #fafafb;
-    --color-light-grey: #f5f5f6;
-    --color-mid-grey: #d9d9da;
-    --color-dark-grey: #76767c;
-    --color-charcoal-grey: #292831;
-    --color-gui-default: #0073e6;
-    --color-gui-hover: #0867c4;
-    --color-gui-focus: #0073e6;
+    /* Neutral colors */
+    --color-neutral-000: #ffffff;
+    --color-neutral-100: #f8fafc;
+    --color-neutral-200: #f4f8fb;
+    --color-neutral-300: #edf1f7;
+    --color-neutral-400: #e2e7ef;
+    --color-neutral-500: #c6ced9;
+    --color-neutral-600: #adb6c2;
+    --color-neutral-700: #89929f;
+    --color-neutral-800: #667085;
+    --color-neutral-900: #39414e;
+    --color-neutral-1000: #2b303b;
+    --color-neutral-1100: #202531;
+    --color-neutral-1200: #141924;
+    --color-neutral-1300: #03020d;
+
+    /* Ably orange */
+    --color-orange-100: #fff5f1;
+    --color-orange-200: #ffe3d8;
+    --color-orange-300: #ffc4ae;
+    --color-orange-400: #ff9c79;
+    --color-orange-500: #ff723f;
+    --color-orange-600: #ff5416;
+    --color-orange-700: #ff2739;
+    --color-orange-800: #e40000;
+    --color-orange-900: #b82202;
+    --color-orange-1000: #751500;
+    --color-orange-1100: #2a0b00;
+
+    /* Secondary colours */
+    --color-yellow-100: #fffbef;
+    --color-yellow-200: #fff0ba;
+    --color-yellow-300: #ffe27c;
+    --color-yellow-400: #ffd43d;
+    --color-yellow-500: #f8c100;
+    --color-yellow-600: #e8a700;
+    --color-yellow-700: #ac8600;
+    --color-yellow-800: #654f00;
+    --color-yellow-900: #291c01;
+    --color-green-100: #f1fff1;
+    --color-green-200: #b8ffbb;
+    --color-green-300: #80ff85;
+    --color-green-400: #08ff13;
+    --color-green-500: #00e80b;
+    --color-green-600: #00c008;
+    --color-green-700: #008e06;
+    --color-green-800: #005303;
+    --color-green-900: #002a02;
+    --color-blue-100: #f1fbff;
+    --color-blue-200: #b8eaff;
+    --color-blue-300: #80d9ff;
+    --color-blue-400: #4ad4ff;
+    --color-blue-500: #2cc0ff;
+    --color-blue-600: #00a5ec;
+    --color-blue-700: #0284cd;
+    --color-blue-800: #004b75;
+    --color-blue-900: #001b2a;
+    --color-violet-100: #f7f2fe;
+    --color-violet-200: #d8bcfb;
+    --color-violet-300: #b986f8;
+    --color-violet-400: #9951f5;
+    --color-violet-500: #7a1bf2;
+    --color-violet-600: #5f0bc9;
+    --color-violet-700: #460894;
+    --color-violet-800: #2d055e;
+    --color-violet-900: #130228;
+    --color-pink-100: #fff1fc;
+    --color-pink-200: #ffb8f1;
+    --color-pink-300: #ff80e6;
+    --color-pink-400: #ff47db;
+    --color-pink-500: #ff17d2;
+    --color-pink-600: #d400ab;
+    --color-pink-700: #9c007e;
+    --color-pink-800: #630050;
+    --color-pink-900: #2a0022;
+
+    /* GUI colours */
+    /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
+    --color-gui-blue-default-light: #006edc;
+    --color-gui-blue-hover-light: #0862b9;
+    --color-gui-blue-active-light: #074095;
+    --color-gui-blue-default-dark: #4da6ff;
+    --color-gui-blue-hover-dark: #2894ff;
+    --color-gui-blue-active-dark: #0080ff;
+    --color-gui-blue-focus: #80b9f2;
+    --color-gui-unavailable: #a8a8a8;
+    --color-gui-success-green: #11cb24;
+    --color-gui-error-red: #fb0c0c;
+    --color-gui-focus: #80b9f2;
     --color-gui-focus-outline: #80b9f2;
-    --color-gui-active: #074095;
     --color-gui-visited: #4887c2;
-    --color-gui-unavailable: #a8a8a8;
-    --color-gui-error: #fb0c0c;
-    --color-gui-success: #11cb24;
+
+    /* Colours replaced by neutral colours */
+    --color-white: var(--color-neutral-000);
+    --color-extra-light-grey: var(--color-neutral-100);
+    --color-light-grey: var(--color-neutral-200);
+    --color-mid-grey: var(--color-neutral-500);
+    --color-dark-grey: var(--color-neutral-800);
+    --color-charcoal-grey: var(--color-neutral-1000);
+    --color-cool-black: var(--color-neutral-1300);
+
+    /* Colours replaced by orange colours */
+    --color-active-orange: var(--color-orange-600);
+    --color-bright-red: var(--color-orange-700);
+    --color-red-orange: var(--color-orange-800);
+
+    /* Colours replaced by secondary colours */
+    --color-electric-cyan: var(--color-blue-400);
+    --color-zingy-green: var(--color-green-400);
+    --color-jazzy-pink: var(--color-pink-500);
+
+    /* Colours replaced by GUI colours */
+    --color-gui-default: var(--color-gui-blue-default-light);
+    --color-gui-hover: var(--color-gui-blue-hover-light);
+    --color-gui-active: var(--color-gui-blue-active-light);
+    --color-gui-error: var(--color-gui-error-red);
+    --color-gui-success: var(--color-gui-success-green);
+    --color-gui-default-dark: var(--color-gui-blue-default-dark);
+    --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
+    --color-gui-active-dark: var(--color-gui-blue-active-dark);
 
     /* code syntax: theme */
-    --syntax-black: var(--color-cool-black);
-    --syntax-dark-grey: var(--color-dark-grey);
-    --syntax-mid-grey: var(--color-mid-grey);
-    --syntax-light-grey: var(--color-light-grey);
-    --syntax-extra-light-grey: var(--color-extra-light-grey);
+    --syntax-black: var(--color-neutral-1300);
+    --syntax-dark-grey: var(--color-neutral-800);
+    --syntax-mid-grey: var(--color-neutral-500);
+    --syntax-light-grey: var(--color-neutral-200);
+    --syntax-extra-light-grey: var(--color-neutral-100);
     --syntax-orange: #e78c45;
     --syntax-yellow: #e7c547;
     --syntax-blue: #3490ec;
@@ -36,11 +134,6 @@
     --syntax-red: #d54e53;
     --syntax-lilac: #bb87d3;
 
-    /* uptime status colors */
-    --uptime-color-up: #39b54a;
-    --uptime-color-trouble: #e87623;
-    --uptime-color-down: #e6242c;
-
     /* flat colors for social icons */
     --icon-color-linkedin: #1269bf;
     --icon-color-twitter: #2caae1;
@@ -70,44 +163,51 @@
 
     --gradient-hot-pink: linear-gradient(
       80.2deg,
-      var(--color-bright-red) 0%,
+      var(--color-orange-700) 0%,
       var(--color-jazzy-pink) 100%
     );
 
-    --fs-title-xl: 4rem;
-    --fs-title: 3.5rem;
-    --fs-title-xs: 3rem;
-    --fs-h1-xl: 3.5rem;
-    --fs-h1: 3rem;
-    --fs-h1-xs: 2.625rem;
-    --fs-h2-xl: 2.5rem;
+    --fs-title-xl: 3rem;
+    --fs-title: 2.75rem;
+    --fs-title-xs: 2.5rem;
+    --fs-h1-xl: 2.5rem;
+    --fs-h1: 2.25rem;
+    --fs-h1-xs: 2rem;
+
+    --fs-h2-xl: 2.125rem;
     --fs-h2: 2rem;
-    --fs-h2-xs: 1.875rem;
+    --fs-h2-xs: 1.75rem;
+
     --fs-h3: 1.5rem;
-    --fs-h4: 1.125rem;
-    --fs-p1: 1.125rem;
-    --fs-p2: 1rem;
+    --fs-h4: 1.25rem;
+    --fs-h5: 1rem;
+
+    --fs-p1: 1rem;
+    --fs-p2: 0.938rem;
     --fs-p3: 0.875rem;
     --fs-standfirst-xl: 2.25rem;
     --fs-standfirst: 1.5rem;
-    --fs-sub-header: 1.5rem;
-    --fs-sub-header-xs: 1.125rem;
+    --fs-sub-header: 1.125rem;
+    --fs-sub-header-xs: 1.063rem;
     --fs-overline1: 1rem;
     --fs-overline2: 0.875rem;
-    --fs-btn1: 1.125rem;
-    --fs-btn2: 1rem;
+    --fs-btn1: 1rem;
+    --fs-btn2: 0.938rem;
     --fs-btn3: 0.875rem;
-    --fs-menu1: 1.125rem;
-    --fs-menu2: 1rem;
+    --fs-menu1: 1rem;
+    --fs-menu2: 0.938rem;
     --fs-menu3: 0.875rem;
-    --fs-quote: 1.5rem;
-    --fs-code: 0.875rem;
+    --fs-quote: 1.25rem;
+    --fs-code: 0.938rem;
+    --fs-code2: 0.813rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
+    --lh-min-normal: 1.2;
     --lh-normal: 1.25;
     --lh-relaxed: 1.45;
+    --lh-extra-relaxed: 1.6;
 
     --ls-tighten-0_025: -0.025em;
     --ls-tighten-0_02: -0.02em;
@@ -115,7 +215,9 @@
     --ls-tighten-0_01: -0.01em;
     --ls-tighten-0_005: -0.005em;
     --ls-tighten-0_0025: -0.0025em;
+    --ls-tighten-0_0015: -0.0015em;
     --ls-widen-0_1: 0.1em;
+    --ls-widen-0_16: 0.16em;
     --ls-widen-0_15: 0.15em;
 
     --spacing-0: 0px;
@@ -130,6 +232,7 @@
     --spacing-20: 1.25rem;
     --spacing-24: 1.5rem;
     --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
     --spacing-40: 2.5rem;
     --spacing-48: 3rem;
     --spacing-64: 4rem;
@@ -171,13 +274,11 @@
 
     /* Expose component values for cross-component usage */
     --ui-meganav-height: 4rem;
-    --ui-showcase-client-logo-min-width: 8.75rem; /* 140px at 16px base*/
-    --ui-showcase-client-logo-max-width: 15rem; /* 240px at 16px base*/
   }
 }
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -201,7 +302,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -217,7 +318,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -227,7 +328,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -237,7 +338,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;
@@ -322,47 +423,53 @@
 }
 @layer components {
   .ui-text-title {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.01;
+    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
   }
 
   .ui-text-h2 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.005;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
   }
 
   .ui-text-h3 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h3;
-    @apply tracking-tighten-0.0025;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h4 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h4;
-    @apply tracking-widen-0.1;
+    @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-light text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -373,60 +480,70 @@
   }
 
   .ui-text-quote {
-    @apply font-sans font-light text-cool-black;
-    @apply text-quote;
-    @apply tracking-tighten-0.025;
+    @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-light text-dark-grey;
-    @apply text-sub-header-xs xs:text-sub-header;
-    @apply tracking-tighten-0.025;
+    @apply font-sans font-semibold text-neutral-800;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
   }
 
   .ui-text-overline1 {
-    @apply font-sans font-medium text-dark-grey uppercase;
-    @apply text-overline1;
-    @apply tracking-widen-0.15;
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline1 leading-normal;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-overline2 {
-    @apply font-sans font-medium text-dark-grey uppercase;
-    @apply text-overline2;
-    @apply tracking-widen-0.1;
+    @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-light text-cool-black;
-    @apply text-menu1;
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu1 leading-snug;
   }
 
   .ui-text-menu2 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu2;
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu2 leading-snug;
   }
 
   .ui-text-menu3 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu3;
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu3 leading-snug;
   }
 
   .ui-text-code {
-    @apply font-mono font-semibold 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-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @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-light text-cool-black;
-    @apply list-disc ml-32 mb-24;
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-disc;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-light text-cool-black;
-    @apply ml-32 mb-24 list-decimal;
+    @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),
@@ -435,37 +552,19 @@
   }
 
   .ui-unordered-list ul {
-    @apply ml-24 mt-16 list-circle;
+    @apply ml-24 my-8 list-circle;
   }
 
   .ui-ordered-list ol {
-    @apply ml-24 mt-16 list-decimal;
+    @apply ml-24 my-16 list-decimal;
   }
 
   .ui-unordered-list ul ul {
-    @apply list-square;
+    @apply list-square my-8;
   }
 
-  .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-light text-cool-black;
-    @apply list-disc ml-32 mt-32 -mb-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div {
-    @apply relative -top-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div > strong {
-    @apply block;
-  }
-
-  .ui-unordered-list-with-emphasis ul {
-    margin-top: calc(var(--spacing-16) + var(--spacing-8));
-    @apply ml-24 list-circle;
-  }
-
-  .ui-unordered-list-with-emphasis ul ul {
-    @apply list-square;
+  .ui-unordered-list ul ul {
+    @apply my-8;
   }
 
   .ui-link {
@@ -477,17 +576,26 @@
 
   .ui-link-neutral {
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
+    @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;
+  }
 }
 @layer components {
   .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans;
+    @apply flex items-start mb-16 font-sans font-medium;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans;
+    @apply flex items-start mb-12 font-sans font-medium;
   }
 
   .ui-checkbox-input {
@@ -506,12 +614,12 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-light text-cool-black;
+    @apply text-p1 font-medium text-cool-black;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-light text-cool-black;
+    @apply text-p2 font-medium text-cool-black;
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -532,7 +640,7 @@
   }
 
   .ui-textarea {
-    @apply font-sans font-light text-cool-black text-p1;
+    @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;
@@ -553,7 +661,7 @@
 }
 @layer components {
   .ui-input {
-    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "11.7.1",
+  "version": "12.0.0-dev.31bc8d9",
   "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",
@@ -24,7 +24,6 @@
     "autoprefixer": "^10.0.2",
     "babel-loader": "^8.2.0",
     "blink-diff": "^1.0.13",
-    "change-case": "^4.1.1",
     "commander": "^7.2.0",
     "css-loader": "^5.0.0",
     "cypress": "^13.3.1",
@@ -32,7 +31,6 @@
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-react": "^7.21.5",
-    "extra-watch-webpack-plugin": "^1.0.3",
     "find-imports": "^1.1.0",
     "mini-css-extract-plugin": "^1.2.1",
     "null-loader": "^4.0.1",
@@ -43,8 +41,7 @@
     "postcss-loader": "^4.0.4",
     "prettier": "^2.3.0",
     "svg-spritemap-webpack-plugin": "^3.7.1",
-    "tailwindcss": "^2.0.1",
-    "tailwindcss-filters": "^3.0.0",
+    "tailwindcss": "^3.3.6",
     "webpack": "^5.3.2",
     "webpack-cli": "^4.2.0",
     "yargs": "^16.2.0"

package/src/core/ContactFooter/component.jsx

@@ -16,8 +16,8 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-live-chat" size="3rem" additionalCSS="block mb-16" />
           <div>
-            <div className="text-h3 mb-24">Live Chat</div>
-            <p className="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
+            <div className="ui-text-h3 mb-24">Live Chat</div>
+            <p className="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
           </div>
           <button
             type="button"
@@ -34,13 +34,13 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-call-mobile" size="3rem" additionalCSS="block mb-16" />
           <div className="flex-grow">
-            <div className="text-h3 mb-24">Call us</div>
-            <p className="text-p1 font-light">
+            <div className="ui-text-h3 mb-24">Call us</div>
+            <p className="ui-text-p1">
               <span className="block">
-                <strong className="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free)
+                <strong className="font-bold">+1 877 434 5287</strong> (USA, toll free)
               </span>
               <span className="block">
-                <strong className="text-p1 font-medium">+44 20 3318 4689</strong> (UK)
+                <strong className="font-bold">+44 20 3318 4689</strong> (UK)
               </span>
             </p>
           </div>
@@ -49,8 +49,8 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-tech-account-comms" size="3rem" additionalCSS="block mb-16" />
           <div>
-            <div className="text-h3 mb-24">Technical and account support</div>
-            <p className="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
+            <div className="ui-text-h3 mb-24">Technical and account support</div>
+            <p className="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
           </div>
           <a className="ui-btn-secondary self-start p-btn mt-16" href={absUrl("/support")}>
             Get support now

package/src/core/DropdownMenu/component.jsx

@@ -92,7 +92,7 @@ const Link = ({ url, title, subtitle, iconName, children }) => {
         {title}
         {iconName ? <Icon name={iconName} size="1rem" color="text-cool-black" additionalCSS="align-middle ml-8 relative -top-1 -left-4" /> : null}
       </p>
-      {subtitle ? <p className="text-p3 mb-16 text-dark-grey">{subtitle}</p> : null}
+      {subtitle ? <p className="ui-text-p3 mb-16">{subtitle}</p> : null}
       {children}
     </a>
   );

package/src/core/FeaturedLink/component.js

@@ -1 +0,0 @@
-import "./component.css";