@ably/ui 14.0.4 → 14.0.6

package/src/pages/Typography.mdx

@@ -1,206 +0,0 @@
-import { Unstyled, Meta } from "@storybook/blocks";
-
-<Meta title="Brand/Typography" />
-
-<Unstyled>
-  <section id="section-typography" className="mb-64">
-    <h1 className="ui-text-h1 mb-32">Typography</h1>
-    <p className="ui-text-p1 mb-32">
-      Type definitions do not include margin as it can be contextual. Figma
-      and the below list include recommended margins.
-    </p>
-    <p className="ui-text-p1 mb-32">
-      The below list is created with ui-text-* helpers which include
-      properties beyond the standard{" "}
-      <code className="ui-inline-code">font-size</code> and{" "}
-      <code className="ui-inline-code">line-height</code> that text-*
-      includes.
-    </p>
-    <div className="mb-40">
-      <hr className="m-0" />
-      <p className="ui-text-title mt-64 mb-40 xs:mt-80 xs:mb-32 xl:mt-96 xl:mb-32">
-        Title - this is a title
-      </p>
-      <hr className="m-0" />
-      <p className="ui-text-h1 mb-40">H1 - this is an h1</p>
-      <hr className="m-0" />
-      <p className="ui-text-h2 mb-36">H2 - this is an h2</p>
-      <hr className="m-0" />
-      <p className="ui-text-h3 mb-24">H3 - this is an h3</p>
-      <hr className="m-0" />
-      <p className="ui-text-h4 mb-16">H4 - this is an h4</p>
-      <hr className="m-0" />
-      <p className="ui-text-h5 mb-16">H5 - this is an h5</p>
-      <hr className="m-0" />
-      <p className="ui-text-p1 mb-32">Paragraph 1</p>
-      <hr className="m-0" />
-      <p className="ui-text-p1 font-bold mb-32">Paragraph 1 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-p2 mb-24">Paragraph 2</p>
-      <hr className="m-0" />
-      <p className="ui-text-p2 font-bold mb-24">Paragraph 2 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-p3 mb-24">Paragraph 3</p>
-      <hr className="m-0" />
-      <p className="ui-text-p3 font-bold mb-24">Paragraph 3 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-figcaption mb-16">This is a figure caption style</p>
-      <hr className="m-0" />
-
-      <p className="ui-text-quote mb-24">Quote</p>
-      <hr className="m-0" />
-      <p className="ui-text-sub-header mb-40 xs:mb-48">Sub-header</p>
-      <hr className="m-0" />
-      <p className="ui-text-overline1 mb-12">Overline 1</p>
-      <hr className="m-0" />
-      <p className="ui-text-overline2 mb-8">Overline 2</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu1">Menu label 1</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu1 font-bold">Menu label 1 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu2">Menu label 2</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu2 font-bold">Menu label 2 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu3">Menu label 3</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu3 font-bold">Menu label 3 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-code">Code 1 font for code blocks</p>
-      <hr className="m-0" />
-      <p className="ui-text-code2">Code 2 font for code blocks</p>
-      <hr className="m-0" />
-      <p className="ui-text-p1 mt-12 mb-12">
-        Text, then styling for{" "}
-        <span className="ui-text-code-inline">inline code</span>, within
-        paragraphs.
-      </p>
-      <hr className="m-0" />
-
-    </div>
-
-    {" "}
-
-    {" "}
-
-    <div className="mb-40">
-      <h3 className="ui-text-h2 mb-24">Links</h3>
-      <p className="ui-text-p1 mb-24">
-        The default text color is inherited from the surrounding text.
-      </p>
-      <div className="flex flex-wrap">
-        <div className="p-16 mb-16 mr-16 border rounded">
-          <p className="ui-text-p1 text-charcoal-grey">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
-            odio. Class aptent taciti sociosqu ad litora torquent per conubia
-            nostra, <a href="/xyz" className="ui-link"> per inceptos himenaeos</a>.
-          </p>
-        </div>
-        <div className="p-16 mb-16 mr-16 border rounded bg-cool-black">
-          <p className="ui-text-p1 text-white">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
-            odio. Class aptent taciti sociosqu ad litora torquent per conubia
-            nostra, <a href="/123" className="ui-link"> per inceptos himenaeos</a>.
-          </p>
-        </div>
-        <div className="p-16 mb-16 mr-16 border rounded bg-jazzy-pink">
-          <p className="ui-text-p1 text-charcoal-grey">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
-            odio. Class aptent taciti sociosqu ad litora torquent per conubia
-            nostra <a href="/123" className="ui-link-neutral">per inceptos himenaeos</a>.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div className="mb-40">
-      <h3 className="ui-text-h2 mb-24">Lists</h3>
-      <p className="ui-text-p1 mb-24">
-        Note that lists support having li items and li items with children,
-        while keeping the same margin (in these examples, the ordered list has
-        paragraphs).
-      </p>
-
-      <div className="mb-40">
-        <h4 className="ui-text-h3 mb-16">Unordered</h4>
-        <p className="ui-text-p1">
-          This is the preceding paragraph sed nisl id lectus scelerisque
-          facilisis consectetur eget nisl. Morbi scelerisque felis vel
-          ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
-          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
-          nulla pellentesque sapien.
-        </p>
-        <ul className="ui-unordered-list">
-          <li>
-            Pellentesque consequat elit eget tristique sagittis. Etiam et erat
-            et lorem elementum commodo. Aenean congue diam a nibh accumsan
-            tincidunt.
-            <ul>
-              <li>
-                In id ante quis quam sodales auctor in a ante. Maecenas
-                faucibus, diam sit amet sollicitudin pellentesque, est nulla
-                pellentesque sapien.
-                <ul>
-                  <li>Etiam et erat et lorem elementum commodo.</li>
-                  <li>Etiam et erat et lorem elementum commodo.</li>
-                </ul>
-              </li>
-            </ul>
-          </li>
-          <li>Etiam et erat et lorem elementum commodo.</li>
-        </ul>
-        <p className="ui-text-p1 mb-24">
-          This is the following paragraph sed nisl id lectus scelerisque
-          facilisis consectetur eget nisl. Morbi scelerisque felis vel
-          ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
-          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
-          nulla pellentesque sapien.
-        </p>
-      </div>
-
-      <div className="mb-40">
-        <h4 className="ui-text-h3 mb-16">Ordered</h4>
-        <p className="ui-text-p1">
-          This is the preceding paragraph sed nisl id lectus scelerisque
-          facilisis consectetur eget nisl. Morbi scelerisque felis vel
-          ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
-          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
-          nulla pellentesque sapien.
-        </p>
-        <ol className="ui-ordered-list">
-          <li>
-            <p>
-              Pellentesque consequat elit eget tristique sagittis. Etiam et
-              erat et lorem elementum commodo. Aenean congue diam a nibh
-              accumsan tincidunt.
-            </p>
-            <ol>
-              <li>
-                <p>
-                  In id ante quis quam sodales auctor in a ante. Maecenas
-                  faucibus, diam sit amet sollicitudin pellentesque, est nulla
-                  pellentesque sapien.
-                </p>
-                <ol>
-                  <li>
-                    <p>Etiam et erat et lorem elementum commodo.</p>
-                  </li>
-                </ol>
-              </li>
-            </ol>
-          </li>
-        </ol>
-        <p className="ui-text-p1 mb-24">
-          This is the following paragraph sed nisl id lectus scelerisque
-          facilisis consectetur eget nisl. Morbi scelerisque felis vel
-          ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
-          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
-          nulla pellentesque sapien.
-        </p>
-      </div>
-
-    </div>
-
-  </section>
-</Unstyled>

package/src/pages/utils.ts

@@ -1,70 +0,0 @@
-export const colours = [
-  {
-    name: "Primary",
-    colours: [
-      { bg: "bg-cool-black", name: "Cool Black", hex: "#03020D" },
-      { bg: "bg-active-orange", name: "Active Orange", hex: "#FF5416" },
-      { bg: "bg-white", name: "White", hex: "#FFFFFF" },
-    ],
-  },
-  {
-    name: "Secondary",
-    colours: [
-      { bg: "bg-electric-cyan", name: "Electric Cyan", hex: "#4AD4FF" },
-      { bg: "bg-zingy-green", name: "Zingy Green", hex: "#08FF13" },
-      { bg: "bg-bright-red", name: "Bright Red", hex: "#FE372B" },
-      { bg: "bg-jazzy-pink", name: "Jazzy Pink", hex: "#FF17D2" },
-    ],
-  },
-  {
-    name: "Neutrals",
-    colours: [
-      { bg: "bg-extra-light-grey", name: "Extra Light Grey", hex: "#F8FAFC" },
-      { bg: "bg-light-grey", name: "Light Grey", hex: "#F4F8FB" },
-      { bg: "bg-mid-grey", name: "Mid Grey", hex: "#C6CED9" },
-      { bg: "bg-dark-grey", name: "Dark Grey", hex: "#667085" },
-      { bg: "bg-charcoal-grey", name: "Charcoal Grey", hex: "#2B303B" },
-      { bg: "bg-neutral-500", name: "Neutral 500", hex: "#C6CED9" },
-      { bg: "bg-neutral-900", name: "Neutral 900", hex: "#39414E" },
-    ],
-  },
-  {
-    name: "GUI",
-    colours: [
-      { bg: "bg-gui-default", name: "Default (Light)", hex: "#006EDC" },
-      { bg: "bg-gui-hover", name: "Hover (Light)", hex: "#0862B9" },
-      { bg: "bg-gui-active", name: "Active (Light)", hex: "#074095" },
-      { bg: "bg-gui-default-dark", name: "Default (Dark)", hex: "#4DA6FF" },
-      { bg: "bg-gui-hover-dark", name: "Hover (Dark)", hex: "#2894FF" },
-      { bg: "bg-gui-active-dark", name: "Active (Dark)", hex: "#0080FF" },
-      { bg: "bg-gui-blue-visited", name: "Visited", hex: "#4887c2" },
-      { bg: "bg-gui-focus", name: "Focus", hex: "#80B9F2" },
-      { bg: "bg-gui-focus-outline", name: "Focus Outline", hex: "#80B9F2" },
-      { bg: "bg-gui-unavailable", name: "Unavailable", hex: "#a8a8a8" },
-      { bg: "bg-gui-success", name: "Success", hex: "#11CB24" },
-      { bg: "bg-gui-error", name: "Error", hex: "#FB0C0C" },
-    ],
-  },
-];
-
-export const formsHtml = `
-<div class="ui-checkbox-p1">
-  <input
-    data-ui-checkbox-native
-    type="checkbox"
-    id="checkbox"
-    name="checkbox"
-    value="yes"
-    class="ui-checkbox-input" />
-
-  <div
-    data-ui-checkbox-styled
-    class="ui-checkbox-styled">
-    <svg class="ui-checkbox-styled-tick">
-      <use xlink:href="#sprite-icon-gui-tick"></use>
-    </svg>
-  </div>
-
-  <label for="checkbox-example" class="ui-checkbox-label-p1">Yes</label>
-</div>
-`;

package/src/reset/scripts.js

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

package/src/reset/styles/normalize.css

@@ -1,353 +0,0 @@
-@layer base {
-  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-  /* Document
-   ========================================================================== */
-
-  /**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-  html {
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-  }
-
-  /* Sections
-   ========================================================================== */
-
-  /**
- * Remove the margin in all browsers.
- */
-
-  body {
-    margin: 0;
-  }
-
-  /**
- * Render the `main` element consistently in IE.
- */
-
-  main {
-    display: block;
-  }
-
-  /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-  h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-
-  /* Grouping content
-   ========================================================================== */
-
-  /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-  hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-  }
-
-  /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-  pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /* Text-level semantics
-   ========================================================================== */
-
-  /**
- * Remove the gray background on active links in IE 10.
- */
-
-  a {
-    background-color: transparent;
-  }
-
-  /**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-  abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-  }
-
-  /**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /**
- * Add the correct font size in all browsers.
- */
-
-  small {
-    font-size: 80%;
-  }
-
-  /**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /* Embedded content
-   ========================================================================== */
-
-  /**
- * Remove the border on images inside links in IE 10.
- */
-
-  img {
-    border-style: none;
-  }
-
-  /* Forms
-   ========================================================================== */
-
-  /**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
-  }
-
-  /**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-  button,
-  input {
-    /* 1 */
-    overflow: visible;
-  }
-
-  /**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-  button,
-  select {
-    /* 1 */
-    text-transform: none;
-  }
-
-  /**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-  }
-
-  /**
- * Remove the inner border and padding in Firefox.
- */
-
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  /**
- * Restore the focus styles unset by the previous rule.
- */
-
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-
-  /**
- * Correct the padding in Firefox.
- */
-
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-
-  /**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-  legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
-  }
-
-  /**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-  textarea {
-    overflow: auto;
-  }
-
-  /**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-  [type="checkbox"],
-  [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-  }
-
-  /**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-  [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-  }
-
-  /**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-  [type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  /* Interactive
-   ========================================================================== */
-
-  /*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-  details {
-    display: block;
-  }
-
-  /*
- * Add the correct display in all browsers.
- */
-
-  summary {
-    display: list-item;
-  }
-
-  /* Misc
-   ========================================================================== */
-
-  /**
- * Add the correct display in IE 10+.
- */
-
-  template {
-    display: none;
-  }
-
-  /**
- * Add the correct display in IE 10.
- */
-
-  [hidden] {
-    display: none;
-  }
-}