Merge pull request #2158 from ably/rollback-ably-ui-update

[WEB-3426] Rollback ably-ui update

package.json

@@ -39,7 +39,7 @@
     "no-githooks": "git config --unset core.hooksPath"
   },
   "dependencies": {
-    "@ably/ui": "^13.3.0",
+    "@ably/ui": "^11.0.0",
     "@codesandbox/sandpack-react": "^2.9.0",
     "@mdx-js/react": "^2.3.0",
     "@react-hook/media-query": "^1.1.1",

src/components/Menu/LanguageDropdownSelector/LanguageDropdownSelector.tsx

@@ -56,21 +56,7 @@ export const LanguageDropdownSelector = ({
     fontWeight: '500',
     boxShadow: 'none',
     cursor: 'pointer',
-    fontFamily: `Manrope,
-        ui-sans-serif,
-        system-ui,
-        -apple-system,
-        BlinkMacSystemFont,
-        Segoe UI,
-        Roboto,
-        Helvetica Neue,
-        Arial,
-        Noto Sans,
-        sans-serif,
-        Apple Color Emoji,
-        Segoe UI Emoji,
-        Segoe UI Symbol,
-        Noto Color Emoji`,
+    fontFamily: `NEXT Book, Arial, Helvetica, sans-serif`,
     borderRadius: '0.375rem',
     flexShrink: '0',
     height: '2.25rem',

src/components/blocks/list/list.module.css

@@ -4,7 +4,9 @@ All styles to be migrated to Tailwind classes when convenient */
 .list-dt {
   font-weight: 500;
   margin: 0 0 10px;
-  @media (min-width: 40em) {
+}
+@media (min-width: 40em) {
+  .list-dt {
     min-width: 120px;
   }
 }
@@ -17,74 +19,77 @@ All styles to be migrated to Tailwind classes when convenient */
   margin-bottom: 20px;
   font-size: 16px;
   overflow-x: scroll;
+}
 
-  /**
-    * This :only-child directive is present to ensure that multiple lines are not shown in the situation
-    * where there is a <dl> inside a <div> that is selected based on language type in between two other divs, i.e.
-    * <dl>
-    *   <dt></dt>
-    *   <dd></dd>
-    * </dl>
-    * <div>
-    *   <dl>
-    *     <dt></dt>
-    *     <dd></dd>
-    *   </dl>
-    * </div>
-    * <dl>
-    *   <dt></dt>
-    *   <dd></dd>
-    * </dl>
-    */
-  :only-child {
-    margin-bottom: -1px;
-    margin-top: -21px;
-  }
+/**
+ * This :only-child directive is present to ensure that multiple lines are not shown in the situation
+ * where there is a <dl> inside a <div> that is selected based on language type in between two other divs, i.e.
+ * <dl>
+ *   <dt></dt>
+ *   <dd></dd>
+ * </dl>
+ * <div>
+ *   <dl>
+ *     <dt></dt>
+ *     <dd></dd>
+ *   </dl>
+ * </div>
+ * <dl>
+ *   <dt></dt>
+ *   <dd></dd>
+ * </dl>
+ */
+.list-dl:only-child {
+  margin-bottom: -1px;
+  margin-top: -21px;
+}
 
-  div {
-    display: contents;
-  }
-  dt,
-  dd {
-    border-bottom: 1px solid #e1e1e1;
-    height: 100%;
-    padding: 15px 20px 15px 0;
-    line-height: 1.5;
-  }
-  dt {
-    grid-column: 1;
-  }
-  dd > em:not(.italics):first-of-type {
-    background: #e1e1e1;
-    border-radius: 5px;
-    padding: 2px 5px;
-    display: block;
-    width: fit-content;
-    block-size: fit-content;
-    margin-bottom: 7px;
-    ::before {
-      content: '(default: ';
-    }
-    ::after {
-      content: ')';
-    }
-  }
-  dd > em.italics:last-of-type {
-    float: right;
-    display: block;
-    text-align: right;
-    font-size: 12px;
-    margin-top: 12px;
-  }
+.list-dl div {
+  display: contents;
+}
+.list-dl dt,
+.list-dl dd {
+  border-bottom: 1px solid #e1e1e1;
+  height: 100%;
+  padding: 15px 20px 15px 0;
+  line-height: 1.5;
+}
+.list-dl dt {
+  grid-column: 1;
+}
+.list-dl dd > em:not(.italics):first-of-type {
+  background: #e1e1e1;
+  border-radius: 5px;
+  padding: 2px 5px;
+  display: block;
+  width: fit-content;
+  block-size: fit-content;
+  margin: 7px 0;
+}
+.list-dl dd > em:not(.italics):first-of-type::before {
+  content: '(default: ';
+}
+.list-dl dd > em:not(.italics):first-of-type::after {
+  content: ')';
+}
+.list-dl dd > em.italics:last-of-type {
+  float: right;
+  display: block;
+  text-align: right;
+  font-size: 12px;
+  margin-top: 12px;
 }
 
+
 div.definition-list-row-styles {
   display: block;
   min-height: 35px;
   border-bottom: 1px solid #e1e1e1;
   overflow: auto;
   padding: 15px 0;
-  @media (min-width: 40em) {
+}
+@media (min-width: 40em) {
+  div.definition-list-row-styles {
     display: flex;
     padding: 0;
     width: 100%;

src/styles/global.css

@@ -33,9 +33,7 @@
   }
 
   body {
-    font-family: 'Manrope', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans',
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'ui-sans-serif', 'system-ui',
-      '-apple-system', sans-serif;
+    font-family: NEXT Book, Arial, Helvetica, sans-serif;
     margin: 0;
     font-weight: 300;
     font-size: 17px;
@@ -59,6 +57,52 @@
     padding-top: 24px;
   }
 
+  @font-face {
+    font-family: 'Museo Sans';
+    font-weight: 300;
+    font-display: swap;
+    src:
+      url('../fonts/museosans/300/webfont.woff2') format('woff2'),
+      url('../fonts/museosans/300/webfont.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Museo Sans';
+    font-weight: 500;
+    font-display: swap;
+    src:
+      url('../fonts/museosans/500/webfont.woff2') format('woff2'),
+      url('../fonts/museosans/500/webfont.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Museo Sans';
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+    src:
+      url('../fonts/museosans/500italic/webfont.woff2') format('woff2'),
+      url('../fonts/museosans/500italic/webfont.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Museo Sans';
+    font-weight: 700;
+    font-display: swap;
+    src:
+      url('../fonts/museosans/700/webfont.woff2') format('woff2'),
+      url('../fonts/museosans/700/webfont.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Museo Sans';
+    font-weight: 900;
+    font-display: swap;
+    src:
+      url('../fonts/museosans/900/webfont.woff2') format('woff2'),
+      url('../fonts/museosans/900/webfont.woff') format('woff');
+  }
+
   @font-face {
     font-family: 'JetBrains Mono';
     font-style: normal;

tailwind.config.js

@@ -20,13 +20,17 @@ const safelistGreedy = [/^docs-.*/, /^col-span-.*/, /^rotate-/];
 
 module.exports = extendConfig((ablyUIConfig) => ({
   ...ablyUIConfig,
-  content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@ably/ui/**/*', ...ablyUIConfig.content],
-  safelist: {
-    ...Object.keys(apiReferenceSpecificColors).map((c) => `bg-${c}`),
-    ...Object.keys(highlightColors).map((c) => `bg-${c}`),
-    ...safelistStandard,
-    ...safelistGreedy.map((regex) => ({ pattern: regex })),
-    ...ablyUIConfig.safelist,
+  purge: {
+    content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@ably/ui/**/*', ...ablyUIConfig.purge.content],
+    safelist: {
+      ...ablyUIConfig.purge.safelist,
+      standard: [
+        ...Object.keys(apiReferenceSpecificColors).map((c) => `bg-${c}`),
+        ...Object.keys(highlightColors).map((c) => `bg-${c}`),
+        ...safelistStandard,
+      ],
+      greedy: [...ablyUIConfig.purge.options.safelist.greedy, ...safelistGreedy],
+    },
   },
   theme: {
     ...ablyUIConfig.theme,

yarn.lock

@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@ably/ui@^13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-13.3.0.tgz#ffcea6bbf0ca426e5070ffcf6fb6e60f3d5950ad"
-  integrity sha512-i//wiRE1vYszQ51oQT6S9tcoMiCopfc3QvlRuGsUFaE4VTnZf6QL2ltCdFA6PyNlWI9nFeOkIIBy0vEItjetmA==
+"@ably/ui@^11.0.0":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-11.7.1.tgz#dd59f45b2ccd8889d3f0cc1f2c751fa542f9ec27"
+  integrity sha512-izRK2DAYhBlmcrBzpwAOMoH8iMRaz+LNfbL7MzGNCwkPipuPqL1+9hVTXIhp0tfcGIlOAnR/CjZECjKVxLcTeg==
   dependencies:
     "@mrtkrcm/cypress-plugin-snapshots" "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0"
     addsearch-js-client "^0.7.0"