@ably/ui 13.3.0 → 14.0.0-dev.58ef698

package/src/pages/Chips.mdx

@@ -0,0 +1,136 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import Icon from "../core/Icon/component.tsx";
+
+<Meta title="Brand/Chips" />
+
+<Unstyled>
+  <h1 className="ui-text-h1 mb-32">Chips</h1>
+  <p className="ui-text-p1 mb-32">
+    Different size chips can be achieved by using padding and text utilities,
+    see examples below.
+  </p>
+  <div>
+    <div className="inline-block mr-16">
+      <h3 className="ui-text-h3 mb-24">On light background</h3>
+      <div className="mb-40 p-12 border rounded inline-block">
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip p-chip-xsmall">
+            Default
+          </button>
+          <button type="button" className="ui-chip p-chip-xsmall" data-selected>
+            Selected
+          </button>
+          <button type="button" className="ui-chip p-chip-xsmall" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip p-chip-small">
+            Default
+          </button>
+          <button type="button" className="ui-chip p-chip-small" data-selected>
+            Selected
+          </button>
+          <button type="button" className="ui-chip p-chip-small" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip">
+            Default
+          </button>
+          <button type="button" className="ui-chip" data-selected>
+            Selected
+          </button>
+          <button type="button" className="ui-chip" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip p-chip-large text-btn-2">
+            Default
+          </button>
+          <button
+            type="button"
+            className="ui-chip p-chip-large text-btn-2"
+            data-selected
+          >
+            Selected
+          </button>
+          <button
+            type="button"
+            className="ui-chip p-chip-large text-btn-2"
+            disabled
+          >
+            Unavailable
+          </button>
+        </div>
+      </div>
+    </div>
+    <div className="inline-block">
+      <h3 className="ui-text-h3 mb-24">On dark background</h3>
+      <div className="bg-cool-black mb-40 p-12 border rounded inline-block">
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip-alt p-chip-xsmall">
+            Default
+          </button>
+          <button
+            type="button"
+            className="ui-chip-alt p-chip-xsmall"
+            data-selected
+          >
+            Selected
+          </button>
+          <button type="button" className="ui-chip-alt p-chip-xsmall" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip-alt p-chip-small">
+            Default
+          </button>
+          <button
+            type="button"
+            className="ui-chip-alt p-chip-small"
+            data-selected
+          >
+            Selected
+          </button>
+          <button type="button" className="ui-chip-alt p-chip-small" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="mb-12 mr-16 flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip-alt">
+            Default
+          </button>
+          <button type="button" className="ui-chip-alt" data-selected>
+            Selected
+          </button>
+          <button type="button" className="ui-chip-alt" disabled>
+            Unavailable
+          </button>
+        </div>
+        <div className="flex flex-wrap items-start gap-12">
+          <button type="button" className="ui-chip-alt p-chip-large text-btn-2">
+            Default
+          </button>
+          <button
+            type="button"
+            className="ui-chip-alt p-chip-large text-btn-2"
+            data-selected
+          >
+            Selected
+          </button>
+          <button
+            type="button"
+            className="ui-chip-alt p-chip-large text-btn-2"
+            disabled
+          >
+            Unavailable
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</Unstyled>

package/src/pages/Colour.mdx

@@ -0,0 +1,23 @@
+import { Fragment } from "react";
+import { Meta, Unstyled } from "@storybook/blocks";
+import { colours } from "./utils";
+
+<Meta title="Brand/Colour" />
+
+<Unstyled>
+  <h1 className="ui-text-h1 mb-32">Colour</h1>
+  {colours.map((category) => (
+    <Fragment key={category.name}>
+      <h3 className="ui-text-h2 mb-16">{category.name}</h3>
+      <ul className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-32 mb-40">
+        {category.colours.map(({ hex, name, bg }) => (
+          <li key={`${category.name}-${bg}`}>
+            <div className={`w-full h-64 mb-16 ${bg}`}></div>
+            <p className="ui-text-p1">{name}</p>
+            <p className="ui-text-p2">hex {hex}</p>
+          </li>
+        ))}
+      </ul>
+    </Fragment>
+  ))}
+</Unstyled>

package/src/pages/Forms.mdx

@@ -0,0 +1,173 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import { formsHtml } from "./utils";
+import Code from "../core/Code/component.tsx";
+import Icon from "../core/Icon/component.tsx";
+
+<Meta title="Brand/Forms" />
+
+<Unstyled>
+  <h1 className="ui-text-h1 mb-32">Forms</h1>
+  <h3 className="ui-text-h2 mb-24">Checkboxes</h3>
+  <div className="mb-40">
+    <h4 className="ui-text-h3 mb-16">Checkboxes with P1 size text</h4>
+    <div className="ui-checkbox-p1">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-1"
+        name="checkbox-example-1"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-1" className="ui-checkbox-label-p1">
+        Welcome to the Ably privacy policy. Ably respects your privacy, is
+        committed to protecting your personal data, and is compliant with
+        applicable data protection law. This privacy policy will inform you as
+        to how we look after certain of your personal data and tell you about
+        your privacy rights and how the law protects you. Please refer to the
+        Glossary below to understand the meaning of some of the terms used in
+        this privacy policy.
+      </label>
+    </div>
+    <div className="ui-checkbox-p1">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-2"
+        name="checkbox-example-2"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-2" className="ui-checkbox-label-p1">
+        Subscribe to the Ably Newsletter
+      </label>
+    </div>
+    <div className="ui-checkbox-p1">
+      <input
+        data-ui-checkbox-native=""
+        disabled=""
+        type="checkbox"
+        id="checkbox-example-3"
+        name="checkbox-example-3"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-3" className="ui-checkbox-label-p1">
+        This option is not available
+      </label>
+    </div>
+  </div>
+  <div className="mb-40">
+    <h4 className="ui-text-h3 mb-16">
+      Checkboxes with P2 size text and tighter spacing
+    </h4>
+    <div className="flex items-start mb-12">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-4"
+        name="checkbox-example-4"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-4" className="ui-checkbox-label-p2">
+        Welcome to the Ably privacy policy. Ably respects your privacy, is
+        committed to protecting your personal data, and is compliant with
+        applicable data protection law. This privacy policy will inform you as
+        to how we look after certain of your personal data and tell you about
+        your privacy rights and how the law protects you. Please refer to the
+        Glossary below to understand the meaning of some of the terms used in
+        this privacy policy.
+      </label>
+    </div>
+    <div className="flex items-start mb-12">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-5"
+        name="checkbox-example-5"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-5" className="ui-checkbox-label-p2">
+        Subscribe to the Ably Newsletter
+      </label>
+    </div>
+    <div className="ui-checkbox-p2">
+      <input
+        data-ui-checkbox-native=""
+        disabled=""
+        type="checkbox"
+        id="checkbox-example-6"
+        name="checkbox-example-6"
+        value="yes"
+        className="ui-checkbox-input"
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-6" className="ui-checkbox-label-p2">
+        This option is not available
+      </label>
+    </div>
+  </div>
+  <h3 className="ui-text-h2 mb-24">Textarea</h3>
+  <div className="mb-40">
+    <label className="ui-text-p1 block mb-24" htmlFor="example-text-area">
+      This is how a label for the textarea looks like. Control the size of the
+      area with the <code className="ui-inline-code">rows</code> attribute.
+    </label>
+    <textarea
+      id="example-text-area"
+      className="ui-textarea"
+      rows="2"
+      placeholder="The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."
+    ></textarea>
+    <p className="ui-text-p3 text-dark-grey">
+      Example of additional text beneath the textarea.
+    </p>
+  </div>
+  <div className="mb-40">
+    <h4 className="ui-text-h3 mb-16">Example HTML</h4>
+    <Code language="html" snippet={formsHtml} />
+  </div>
+</Unstyled>

package/src/pages/Layout.mdx

@@ -0,0 +1,58 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+
+<Meta title="Brand/Layout" />
+
+<Unstyled>
+<h1 className="ui-text-h1 mb-32">Layout</h1>
+
+<div class="ui-standard-container mb-32">
+  <div class="bg-mid-grey align-center p-32">
+    <p class="ui-text-h3 mb-24">ui-standard-container</p>
+    <p class="ui-text-p1 ">
+      Container that does not grow beyond the xl breakpoint (1440px), centers
+      and contains the correct outside padding across viewport changes.
+    </p>
+  </div>
+</div>
+
+<div class="ui-standard-container mb-32">
+  <div class="bg-mid-grey align-center p-32">
+    <p class="ui-text-h3 mb-24">ui-grid-gap</p>
+    <p class="ui-text-p1 mb-32">Add correct gaps across viewport changes.</p>
+    <div class="grid grid-cols-4 ui-grid-gap">
+      <div class="bg-cool-black text-white font-sans p-32 text-center">1</div>
+      <div class="bg-cool-black text-white font-sans p-32 text-center">2</div>
+      <div class="bg-cool-black text-white font-sans p-32 text-center">3</div>
+      <div class="bg-cool-black text-white font-sans p-32 text-center">4</div>
+    </div>
+  </div>
+</div>
+
+<div class="ui-standard-container mb-32">
+  <div class="bg-mid-grey align-center p-32">
+    <p class="ui-text-h3 mb-24">ui-grid-px</p>
+    <p class="ui-text-p1 mb-32">
+      Add padding on the x axis, with correct values across viewport changes.
+    </p>
+    <div class="ui-grid-px">
+      <div class="bg-cool-black text-white font-sans p-32 text-center">
+        Text
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="ui-standard-container mb-32">
+  <div class="bg-mid-grey align-center p-32">
+    <p class="ui-text-h3 mb-24">ui-grid-mx</p>
+    <p class="ui-text-p1 mb-32">
+      Add margin on the x axis, with correct values across viewport changes.
+    </p>
+    <div class="ui-grid-mx">
+      <div class="bg-cool-black text-white font-sans p-32 text-center">
+        Text
+      </div>
+    </div>
+  </div>
+</div>
+</Unstyled>

package/src/pages/Typography.mdx

@@ -0,0 +1,206 @@
+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

@@ -0,0 +1,70 @@
+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/tailwind.config.js

@@ -1,11 +1,5 @@
 module.exports = {
-  content: [
-    "./src/**/*.html.erb",
-    "./src/**/*.jsx",
-    "./src/**/*.js",
-    "./src/**/*.json",
-    "./src/**/*.css",
-  ],
+  content: ["./src/**/*.{js,json,css,ts,tsx,mdx}"],
   safelist: [
     "w-1/2",
     "w-1/3",