@ably/ui 14.0.0-dev.968e4a2 → 14.0.0-dev.b96df46

package/src/core/styles/text.css

@@ -1,166 +1,168 @@
-.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;
+@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;
+  }
 }

package/src/core/styles.components.css

@@ -3,31 +3,33 @@
 @import "./styles/text.css";
 @import "./styles/forms.css";
 
-.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;
-}
+@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;
+  }
 
-/* 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;
+  }
 }

package/src/core/utils/syntax-highlighter.css

@@ -1,67 +1,71 @@
-@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
-
-.hljs {
-  background: var(--syntax-black);
-  color: var(--syntax-light-grey);
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
 }
 
-.hljs-emphasis {
-  @apply italic;
-}
+@layer components {
+  .hljs {
+    background: var(--syntax-black);
+    color: var(--syntax-light-grey);
+  }
 
-.hljs-strong {
-  @apply font-bold;
-}
+  .hljs-emphasis {
+    @apply italic;
+  }
 
-.hljs-comment,
-.hljs-quote {
-  color: var(--syntax-dark-grey);
-}
+  .hljs-strong {
+    @apply font-bold;
+  }
 
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag,
-.hljs-name,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-regexp,
-.hljs-deletion {
-  color: var(--syntax-red);
-}
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--syntax-dark-grey);
+  }
 
-.hljs-number,
-.hljs-built_in,
-.hljs-literal,
-.hljs-type,
-.hljs-params,
-.hljs-meta,
-.hljs-link {
-  color: var(--syntax-orange);
-}
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-regexp,
+  .hljs-deletion {
+    color: var(--syntax-red);
+  }
 
-.hljs-attribute {
-  color: var(--syntax-yellow);
-}
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-literal,
+  .hljs-type,
+  .hljs-params,
+  .hljs-meta,
+  .hljs-link {
+    color: var(--syntax-orange);
+  }
 
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition {
-  color: var(--syntax-green);
-}
+  .hljs-attribute {
+    color: var(--syntax-yellow);
+  }
 
-.hljs-title,
-.hljs-section {
-  color: var(--syntax-blue);
-}
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition {
+    color: var(--syntax-green);
+  }
 
-.hljs-keyword,
-.hljs-selector-tag {
-  color: var(--syntax-lilac);
-}
+  .hljs-title,
+  .hljs-section {
+    color: var(--syntax-blue);
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: var(--syntax-lilac);
+  }
 
-.hljs-subst {
-  color: var(--syntax-mid-grey);
+  .hljs-subst {
+    color: var(--syntax-mid-grey);
+  }
 }

package/src/pages/Buttons.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import Icon from "../core/Icon/component.tsx";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Buttons" />
 

package/src/pages/Chips.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import Icon from "../core/Icon/component.tsx";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Chips" />
 

package/src/pages/Forms.mdx

@@ -1,7 +1,7 @@
 import { Meta, Unstyled } from "@storybook/blocks";
 import { formsHtml } from "./utils";
-import Code from "../core/Code/component.tsx";
-import Icon from "../core/Icon/component.tsx";
+import Code from "../core/Code";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Forms" />
 

package/core/CookieMessage/component.js

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

package/core/Flash/component.js

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

package/core/Footer/component.js

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

package/src/core/CookieMessage/component.js

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

package/src/core/Flash/component.js

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

package/src/core/Footer/component.js

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