opui-css 3.3.5 → 4.0.0

package/css/components/typography.css

@@ -0,0 +1,585 @@
+@layer components.root {
+
+  :where(.p) {
+    text-wrap: pretty;
+
+    &.small {
+      font-size: var(--font-size-1);
+    }
+
+    &.large {
+      font-size: var(--font-size-3);
+    }
+  }
+
+  :where(.h1, .h2, .h3, .h4, .h5, .h6) {
+    color: var(--text-primary);
+    font-weight: 700;
+    text-wrap: pretty;
+  }
+
+  :where(.h1) {
+    font-size: var(--font-size-h1, var(--font-size-7));
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+  }
+
+  :where(.h2) {
+    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+
+  :where(.h3) {
+    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
+    letter-spacing: -0.01em;
+    line-height: 1.167;
+  }
+
+  :where(.h4) {
+    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
+    letter-spacing: -0.01em;
+    line-height: 1.235;
+  }
+
+  :where(.h5) {
+    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
+    line-height: 1.334;
+  }
+
+  :where(.h6) {
+    font-size: var(--font-size-h6, var(--font-size-1, 1rem));
+    line-height: 1;
+  }
+
+  /** Overline */
+  :where(.overline) {
+    color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
+        oklch(from var(--text-muted) calc(l * 0.75) c h));
+    font-size: var(--font-size-0);
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  :where(.hgroup) {
+    &>p {
+      margin: 0;
+    }
+
+    &> :where(h1, h2, h3, h4, h5, h6) {
+      margin-block: 0 0.4em;
+    }
+
+    /* First p element (overline) */
+    &>p:first-of-type:first-child {
+      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
+          oklch(from var(--text-muted) calc(l * 0.75) c h));
+      font-size: var(--font-size-0);
+      font-weight: 500;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    /* Body paragraphs after the heading */
+    &>p:not(:first-of-type:first-child) {
+      color: oklch(from currentColor l c h / 75%);
+      font-size: var(--font-size-3);
+      line-height: 1.6;
+    }
+
+    &>p+p {
+      margin-block-start: 0.75em;
+    }
+  }
+
+  /** Caption */
+  :where(.caption) {
+    color: var(--text-muted);
+    font-size: var(--font-size-0);
+    line-height: 1.6;
+  }
+
+
+
+  /* Inline text elements — class utilities (work anywhere) */
+  :where(.u, .abbr, .dfn) {
+    text-decoration: underline;
+    text-underline-offset: 1px;
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+
+  :where(.abbr, .dfn) {
+    font-style: normal;
+    text-decoration: var(--color-9) underline dotted;
+
+    &[title] {
+      cursor: help;
+      text-underline-offset: 1px;
+    }
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+
+  :where(.sup) {
+    font-size: 0.5em;
+    vertical-align: super;
+  }
+
+  :where(p, span).small {
+    font-size: max(0.5em, var(--font-size-0, 0.75rem));
+  }
+
+  :where(.cite) {
+    font-style: italic;
+  }
+
+  /* Code */
+  :where(.kbd) {
+    font-family: var(--font-mono);
+    background-color: var(--text-muted);
+    border-color: var(--text-muted);
+    border-radius: var(--radius-2);
+    border-width: var(--border-size-1);
+    color: var(--text-muted-contrast);
+    padding: 0.1ex 0.3ex;
+    word-break: break-word;
+  }
+
+  :where(.mark) {
+    border-radius: var(--radius-2);
+    box-decoration-break: clone;
+    padding: .1ex .3ex;
+    vertical-align: baseline;
+  }
+
+  :where(.s) {
+    text-decoration: line-through;
+  }
+
+  :where(.sub) {
+    font-size: 0.75em;
+    vertical-align: sub;
+  }
+
+  :where(.del) {
+    color: var(--color-9);
+    text-decoration: line-through;
+  }
+
+  :where(.ins) {
+    color: var(--color-9);
+    text-decoration: underline;
+    text-underline-offset: 1px;
+  }
+
+  :where(.var) {
+    font-family: var(--font-mono);
+    background-color: var(--text-muted);
+    border-color: var(--text-muted);
+    border-radius: var(--radius-2);
+    border-width: var(--border-size-1);
+    color: var(--text-muted-contrast);
+    padding: 0.1ex 0.3ex;
+    word-break: break-word;
+  }
+
+  :where(.samp) {
+    font-family: var(--font-mono);
+  }
+
+  /* Blockquote */
+  :where(.blockquote) {
+    border-inline-start: var(--border-size-3) solid currentColor;
+    padding-block: var(--size-3);
+    padding-inline: var(--size-4);
+
+    :first-child {
+      margin-block-start: 0;
+    }
+
+    :last-child {
+      margin-block-end: 0;
+    }
+
+    footer {
+      color: var(--text-muted);
+      margin-block-start: var(--size-3);
+    }
+  }
+
+  /* Code block */
+  :where(pre.code-block) {
+    background-color: var(--color-15);
+    border-radius: var(--border-radius);
+    color: var(--color-1);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-05);
+    max-inline-size: 100%;
+    overflow-x: auto;
+    padding-block: var(--size-3);
+    padding-inline: var(--size-4);
+    scrollbar-width: thin;
+    white-space: pre;
+
+    >code {
+      background: none;
+      border-radius: 0;
+      color: inherit;
+      font-size: inherit;
+      padding: 0;
+      word-break: normal;
+      writing-mode: inherit;
+    }
+  }
+
+}
+
+/* Rich text */
+@layer components.extended {
+  @scope (.rich-text) to (.not-rich-text) {
+    a {
+      color: var(--primary);
+      cursor: pointer;
+      font-size: inherit;
+      font-weight: 700;
+      line-height: inherit;
+      text-decoration: underline;
+      text-decoration-color: var(--primary);
+      text-underline-offset: 2px;
+
+      &[href] {
+
+        &:hover,
+        &:focus-visible {
+          color: var(--primary-light);
+        }
+      }
+    }
+
+    /* Blockquote */
+    blockquote {
+      border-inline-start: var(--border-size-3) solid currentColor;
+      font-size: inherit;
+      line-height: inherit;
+      padding-block: var(--size-3);
+      padding-inline: var(--size-4);
+
+      :first-child {
+        margin-block-start: 0;
+      }
+
+      :last-child {
+        margin-block-end: 0;
+      }
+
+      footer {
+        color: var(--text-muted);
+        margin-block-start: var(--size-3);
+      }
+    }
+
+    /* Code */
+    pre {
+      border-radius: var(--border-radius);
+      font-size: var(--font-size-05);
+      margin-block: var(--size-6);
+      max-inline-size: max-content;
+      min-inline-size: 0;
+      padding-block: var(--size-3);
+      padding-inline: var(--size-4);
+      white-space: pre;
+    }
+
+    pre:has(> code) {
+      background-color: var(--color-15);
+      border-radius: var(--border-radius);
+      color: var(--color-1);
+      max-inline-size: 100%;
+      overflow-x: auto;
+      scrollbar-width: thin;
+
+      >code {
+        background: none;
+        border-radius: 0;
+        color: inherit;
+        font-size: inherit;
+        padding: 0;
+        word-break: normal;
+        writing-mode: inherit;
+      }
+    }
+
+
+    /* Text */
+    p {
+      font-size: inherit;
+      line-height: inherit;
+      margin-block: 1.25em;
+      text-wrap: pretty;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      color: var(--text-primary);
+      font-weight: 700;
+      text-wrap: pretty;
+
+      &+*:not(&) {
+        margin-block-start: 0;
+      }
+    }
+
+    h1 {
+      font-size: var(--font-size-h1, var(--font-size-7));
+      letter-spacing: -0.02em;
+      line-height: 1.1111111;
+      margin-block: 0 0.8888889em;
+    }
+
+    h2 {
+      font-size: var(--font-size-h2, var(--font-size-5, 2rem));
+      letter-spacing: -0.02em;
+      line-height: 1.3333333;
+      margin-block: 2em 1em;
+    }
+
+    h3 {
+      font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
+      letter-spacing: -0.01em;
+      line-height: 1.6;
+      margin-block: 1.6em 0.6em;
+    }
+
+    h4 {
+      font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
+      letter-spacing: -0.01em;
+      line-height: 1.5;
+      margin-block: 1.5em 0.5em;
+    }
+
+    h5 {
+      font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
+      line-height: 1;
+      margin-block: 0 var(--size-1);
+    }
+
+    h6 {
+      font-size: var(--font-size-h6, var(--font-size-1, 1rem));
+      line-height: 1;
+      margin-block: 0 var(--size-1);
+    }
+
+    /** Overline */
+    :is(.overline, hgroup p:first-of-type:first-child) {
+      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
+          oklch(from var(--text-muted) calc(l * 0.75) c h));
+      font-size: var(--font-size-0);
+      font-weight: 500;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    hgroup {
+      &>p {
+        margin: 0;
+      }
+
+      &> :where(h1, h2, h3, h4, h5, h6) {
+        margin-block: 0 0.4em;
+      }
+
+      &+* {
+        margin-block-start: 3em;
+      }
+
+      /* Body paragraphs after the heading */
+      &>p:not(:first-of-type:first-child) {
+        color: oklch(from currentColor l c h / 75%);
+        font-size: var(--font-size-3);
+        line-height: 1.6;
+      }
+
+      &>p+p {
+        margin-block-start: 0.75em;
+      }
+    }
+
+    /* Lists */
+    ul:not([class]) {
+      list-style-type: disc;
+    }
+
+    ol:not([class]) {
+      list-style-type: decimal;
+    }
+
+    :where(ul, ol):not([class]) {
+      display: grid;
+      font-size: inherit;
+      gap: 0.5em;
+      line-height: inherit;
+      margin-block-end: 1.25em;
+      margin-block-start: 1.25em;
+      padding-inline-start: 1.625em;
+
+      li {
+        padding-inline-start: 0.375em;
+      }
+    }
+
+    /* Nested lists */
+    :where(ul ul),
+    :where(ul ol),
+    :where(ol ul),
+    :where(ol ol) {
+      margin-block-end: 0.75em;
+      margin-block-start: 0.75em;
+    }
+
+    /* Description lists */
+    :where(dl) {
+      font-size: inherit;
+      line-height: inherit;
+      margin-block-end: 1.25em;
+      margin-block-start: 1.25em;
+
+      dt {
+        font-weight: 700;
+        margin-block-start: 1.25em;
+      }
+
+      dd {
+        margin-block-start: 0.5em;
+        padding-inline-start: 1.625em;
+      }
+    }
+
+    /* Figures */
+    figure {
+      display: grid;
+      gap: var(--size-2);
+      margin-block: var(--size-7);
+      place-items: center;
+
+      &>* {
+        margin-block: 0;
+      }
+
+      & figcaption {
+        font-size: var(--font-size-0);
+        text-wrap: pretty;
+      }
+    }
+
+    /* Remove top margin from first child */
+    &> :first-child {
+      margin-block-start: 0;
+    }
+
+    /* Remove bottom margin from last child */
+    &> :last-child {
+      margin-block-end: 0;
+    }
+
+    /* Horizontal rules */
+    hr {
+      &+* {
+        margin-block-start: 0;
+      }
+    }
+
+    /* Inline text elements */
+    :where(ins, u, abbr, dfn) {
+      text-decoration: underline;
+      text-underline-offset: 1px;
+
+      @supports (-moz-appearance: none) {
+        text-underline-offset: 2px;
+      }
+    }
+
+    :where(abbr, dfn) {
+      font-style: normal;
+      text-decoration: var(--color-9) underline dotted;
+
+      &[title] {
+        cursor: help;
+        text-underline-offset: 1px;
+      }
+
+      @supports (-moz-appearance: none) {
+        text-underline-offset: 2px;
+      }
+    }
+
+    sup {
+      font-size: 0.5em;
+      vertical-align: super;
+    }
+
+    :where(del, ins) {
+      color: var(--color-9);
+    }
+
+    small {
+      font-size: max(0.5em, var(--font-size-0, 0.75rem));
+    }
+
+    cite {
+      font-style: italic;
+    }
+
+    /* Code */
+    :where(code, kbd, samp, pre) {
+      font-family: var(--font-mono);
+    }
+
+    code {
+      background-color: oklch(0 0 0 / 18%);
+      border-radius: var(--border-size-3);
+      font-size: 0.9em;
+      padding: 0.1ex 0.3ex;
+    }
+
+    :where(kbd, var) {
+      background-color: var(--text-muted);
+      border-color: var(--text-muted);
+      border-radius: var(--radius-2);
+      border-width: var(--border-size-1);
+      color: var(--text-muted-contrast);
+      padding: 0.1ex 0.3ex;
+    }
+
+    :not(pre) code,
+    kbd {
+      word-break: break-word;
+    }
+
+    :not(pre) code {
+      border-radius: var(--border-radius, var(--radius-2));
+      padding: 0.5ex;
+      writing-mode: lr;
+    }
+
+    mark {
+      border-radius: var(--radius-2);
+      box-decoration-break: clone;
+      padding: .1ex .3ex;
+      vertical-align: baseline;
+    }
+
+    s {
+      text-decoration: line-through;
+    }
+
+    sub {
+      font-size: 0.75em;
+      vertical-align: sub;
+    }
+  }
+}

package/{src/themes/theme-two → css}/components.css

@@ -1,37 +1,41 @@
-/*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
-*/
-
-/*** Root components (no dependencies)  */
-@import "./components/button.css";
-@import "./components/icon-button.css";
-@import "./components/tab-buttons.css";
-@import "./components/toggle-button-group.css";
-@import "./components/avatar.css";
-@import "./components/badge.css";
-@import "./components/card.css";
-@import "./components/chip.css";
-@import "./components/definition-list.css";
-@import "./components/divider.css";
-@import "./components/link.css";
-@import "./components/table.css";
-@import "./components/progress.css";
-@import "./components/spinner.css";
-@import "./components/checkbox-radio.css";
-@import "./components/switch.css";
-@import "./components/range.css";
-@import "./components/typography.css";
-
-/*** Extended components (has dependencies) */
-@import "./components/button-group.css";
-@import "./components/accordion.css";
-@import "./components/list.css";
-@import "./components/alert.css";
-@import "./components/dialog.css";
-@import "./components/snackbar.css";
-@import "./components/field-group.css";
-@import "./components/field.css";
-@import "./components/select.css";
-@import "./components/text-field.css";
-@import "./components/textarea.css";
-@import "./components/rich-text.css";
+/*
+* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
+*/
+
+/*** Root components (no dependencies)  */
+@import "./components/button.css";
+@import "./components/callout.css";
+@import "./components/icon-button.css";
+@import "./components/tabs.css";
+@import "./components/toggle-group.css";
+@import "./components/toggle-button.css";
+@import "./components/anchor.css";
+@import "./components/avatar.css";
+@import "./components/card.css";
+@import "./components/chip.css";
+@import "./components/description-list.css";
+@import "./components/divider.css";
+@import "./components/link.css";
+@import "./components/table.css";
+@import "./components/progress.css";
+@import "./components/spinner.css";
+@import "./components/checkbox.css";
+@import "./components/radio.css";
+@import "./components/range.css";
+@import "./components/switch.css";
+@import "./components/toast.css";
+@import "./components/typography.css";
+
+/*** Extended components (has dependencies) */
+@import "./components/badge.css";
+@import "./components/button-group.css";
+@import "./components/accordion.css";
+@import "./components/list.css";
+@import "./components/dialog.css";
+@import "./components/drawer.css";
+@import "./components/form.css";
+@import "./components/text-field.css";
+@import "./components/select.css";
+@import "./components/text-input.css";
+@import "./components/textarea.css";
+@import "./components/tooltip.css";

package/{src/themes/theme-two → css}/imports.css

@@ -1,16 +1,16 @@
-@layer openprops, normalize, theme, components.root, components.extended, utils;
-
-/* Open Props */
-@import "../../open-props.css";
-
-/* Normalize */
-@import "../../core/normalize.css";
-
-/* Theme */
-@import "./theme.css";
-
-/* Components */
-@import "./components.css";
-
-/* Utils */
-@import "../../core/utils.css";
+@layer openprops, normalize, theme, components.root, components.extended, utils;
+
+/* Open Props */
+@import "../open-props.css";
+
+/* Normalize */
+@import "../core/normalize.css";
+
+/* Theme */
+@import "./theme.css";
+
+/* Components */
+@import "./components.css";
+
+/* Utils */
+@import "../core/utils.css";

package/css/js/checkbox.js

@@ -0,0 +1,21 @@
+/**
+ * Checkbox runtime helpers.
+ *
+ * `indeterminate` is a JavaScript-only property on HTMLInputElement — the
+ * attribute alone has no effect. We mark inputs with `data-indeterminate` at
+ * render time and apply the property here, both on initial load and after
+ * Astro's view transitions swap the DOM.
+ */
+
+export function activateIndeterminate(root = document) {
+  root
+    .querySelectorAll('input[type="checkbox"][data-indeterminate]')
+    .forEach((el) => {
+      el.indeterminate = true
+    })
+}
+
+export function initCheckbox() {
+  activateIndeterminate()
+  document.addEventListener("astro:after-swap", () => activateIndeterminate())
+}