@ably/ui 13.3.0 → 14.0.0-dev.0ed6be7

package/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;
 }

package/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;
 }

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

@@ -1,71 +1,67 @@
-@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");
-}
+@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");
 
-@layer components {
-  .hljs {
-    background: var(--syntax-black);
-    color: var(--syntax-light-grey);
-  }
+.hljs {
+  background: var(--syntax-black);
+  color: var(--syntax-light-grey);
+}
 
-  .hljs-emphasis {
-    @apply italic;
-  }
+.hljs-emphasis {
+  @apply italic;
+}
 
-  .hljs-strong {
-    @apply font-bold;
-  }
+.hljs-strong {
+  @apply font-bold;
+}
 
-  .hljs-comment,
-  .hljs-quote {
-    color: var(--syntax-dark-grey);
-  }
+.hljs-comment,
+.hljs-quote {
+  color: var(--syntax-dark-grey);
+}
 
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-tag,
-  .hljs-name,
-  .hljs-selector-id,
-  .hljs-selector-class,
-  .hljs-regexp,
-  .hljs-deletion {
-    color: var(--syntax-red);
-  }
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: var(--syntax-red);
+}
 
-  .hljs-number,
-  .hljs-built_in,
-  .hljs-literal,
-  .hljs-type,
-  .hljs-params,
-  .hljs-meta,
-  .hljs-link {
-    color: var(--syntax-orange);
-  }
+.hljs-number,
+.hljs-built_in,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: var(--syntax-orange);
+}
 
-  .hljs-attribute {
-    color: var(--syntax-yellow);
-  }
+.hljs-attribute {
+  color: var(--syntax-yellow);
+}
 
-  .hljs-string,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-addition {
-    color: var(--syntax-green);
-  }
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: var(--syntax-green);
+}
 
-  .hljs-title,
-  .hljs-section {
-    color: var(--syntax-blue);
-  }
+.hljs-title,
+.hljs-section {
+  color: var(--syntax-blue);
+}
 
-  .hljs-keyword,
-  .hljs-selector-tag {
-    color: var(--syntax-lilac);
-  }
+.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

@@ -0,0 +1,121 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import Icon from "../core/Icon/component.tsx";
+
+<Meta title="Brand/Buttons" />
+
+<Unstyled>
+  <h2 className="ui-text-h1 mb-32">Buttons</h2>
+  <div className="flex flex-wrap">
+    <p className="ui-text-p1 mb-32">Different size buttons can be achieved by using padding and text utilities, see
+      examples below.</p>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">Standard</h3>
+      <button type="button" className="ui-btn">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn-alt">
+        Primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary">
+        Secondary button
+      </button>
+      <button type="button" className="ui-btn" disabled>
+        Unavailable primary button
+      </button>
+      <button type="button" className="ui-btn-alt" disabled>
+        Unavailable primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary" disabled>
+        Unavailable secondary button
+      </button>
+    </div>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16 bg-cool-black">
+      <h3 className="ui-text-h3 text-white">Inverted</h3>
+      <button type="button" className="ui-btn-invert">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn-secondary-invert">
+        Secondary button
+      </button>
+      <button type="button" className="ui-btn-invert" disabled>
+        Unavailable primary button
+      </button>
+      <button type="button" className="ui-btn-secondary-invert" disabled>
+        Unavailable secondary button
+      </button>
+    </div>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">With icons</h3>
+      <button type="button" className="ui-btn">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button alternative with icon
+      </button>
+      <button type="button" className="ui-btn-secondary">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Secondary button with icon
+      </button>
+      <button type="button" className="ui-btn" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable primary button alternative with icon
+      </button>
+      <button type="button" className="ui-btn-secondary" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable secondary button with icon
+      </button>
+    </div>
+
+  </div>
+
+  <div className="flex flex-wrap">
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">Extra small</h3>
+      <button type="button" className="ui-btn p-btn-xsmall text-btn4">Primary button</button>
+      <button type="button" className="ui-btn p-btn-xsmall text-btn4">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon-xsmall" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-xsmall text-btn4">Primary button alternative</button>
+      <button type="button" className="ui-btn-secondary p-btn-xsmall text-btn4">Secondary button</button>
+    </div>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">Small</h3>
+      <button type="button" className="ui-btn p-btn-small text-btn3">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn p-btn-small text-btn3">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon-small" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-small text-btn3">
+        Primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary p-btn-small text-btn3">
+        Secondary button
+      </button>
+    </div>
+
+    <div className="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+      <h3 className="ui-text-h3">Large</h3>
+      <button type="button" className="ui-btn p-btn-large text-btn1">Primary button</button>
+      <button type="button" className="ui-btn p-btn-large text-btn1">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-large text-btn1">Primary button alternative</button>
+      <button type="button" className="ui-btn-secondary p-btn-large text-btn1">Secondary button</button>
+    </div>
+
+  </div>
+</Unstyled>