opui-css 1.2.4

package/src/components/table.css

@@ -0,0 +1,107 @@
+@layer components.base {
+  :where(table) {
+    border-collapse: collapse;
+    display: block;
+    margin: var(--size-3) 0;
+    max-inline-size: 100%;
+    position: relative;
+
+    /* Rows */
+    tr {
+      background-color: var(--surface-default);
+      border-top: 1px solid var(--border-color);
+
+      &:hover {
+        background-color: oklch(from var(--surface-filled) l c h / 75%);
+      }
+    }
+
+    /* Cells */
+    th,
+    td {
+      border: 1px solid var(--border-color);
+      padding: var(--size-1) var(--size-2);
+    }
+
+    th {
+      background-color: var(--surface-filled);
+      color: var(--text-color-1);
+      font-size: var(--font-size-sm, 0.75rem);
+      font-weight: 600;
+      text-align: start;
+    }
+
+    td {
+      font-size: var(--font-size-sm, 0.75rem);
+    }
+
+    /* Caption */
+    caption {
+      caption-side: bottom;
+      color: var(--text-color-2);
+      font-size: var(--font-size-sm, 0.75rem);
+      padding: var(--size-2) 0;
+      text-align: start;
+    }
+
+    /* Header */
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    /* Footer */
+    tfoot {
+      border-top: 2px solid var(--border-color);
+
+      tr {
+        background-color: var(--surface-filled);
+      }
+
+      td {
+        color: var(--text-color-1);
+        font-weight: 600;
+      }
+    }
+
+    /* Column group */
+    colgroup col {
+      border: none;
+    }
+
+    @container (width < 60ch) {
+      th,
+      td {
+        padding: var(--size-1) 0.875rem;
+      }
+    }
+
+    /* Sticky header */
+    &.sticky-header thead {
+      background-color: var(--surface-filled);
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 1;
+    }
+
+    /* Dense */
+    &.dense {
+      th,
+      td {
+        padding: var(--size-1) var(--size-2);
+      }
+
+      caption {
+        padding: var(--size-1) 0;
+      }
+
+      @container (width < 60ch) {
+        th,
+        td {
+          padding: var(--size-1) var(--size-2);
+        }
+      }
+    }
+  }
+}

package/src/components/text-field.css

@@ -0,0 +1,57 @@
+@layer components.has-deps {
+  :where(
+    .field:has(
+        :where(
+          input[type="date"],
+          input[type="datetime-local"],
+          input[type="email"],
+          input[type="month"],
+          input[type="number"],
+          input[type="password"],
+          input[type="search"],
+          input[type="tel"],
+          input[type="text"],
+          input[type="time"],
+          input[type="url"],
+          input[type="week"]
+        )
+      )
+  ) {
+    /* Sizes */
+    &.small {
+      input {
+        padding-inline: var(--size-2);
+      }
+    }
+  }
+
+  /* Autosuggest */
+  :where(.field:has(input[list])) {
+    /* Hide native arrow */
+    input::-webkit-calendar-picker-indicator {
+      opacity: 0;
+      position: absolute;
+      cursor: pointer;
+      pointer-events: none;
+    }
+  }
+  :where(
+    .field:has(input[list]:placeholder-shown),
+    .field:has(input[list]):where(:focus-within, :hover)
+  ) {
+    /* Arrow */
+    &::after {
+      block-size: 0;
+      border-block-start: 5px solid;
+      border-inline: 5px solid transparent;
+      content: "";
+      display: inline-block;
+      flex-shrink: 0;
+      inline-size: 0;
+      inset: 50% var(--size-3) auto auto;
+      pointer-events: none;
+      position: absolute;
+      translate: 0 -50%;
+    }
+  }
+}

package/src/components/textarea.css

@@ -0,0 +1,25 @@
+@layer components.has-deps {
+  :where(.field:has(textarea)) {
+    textarea {
+      block-size: auto;
+      field-sizing: content;
+      min-block-size: 5rem;
+      resize: vertical;
+    }
+
+    /* Size */
+    &.small {
+      textarea {
+        min-block-size: var(--_height);
+      }
+    }
+
+    /* Auto-fit */
+    &.auto-fit {
+      textarea {
+        min-block-size: var(--_height);
+        resize: both;
+      }
+    }
+  }
+}

package/src/components/toggle-button-group.css

@@ -0,0 +1,142 @@
+@layer components.base {
+  :where([role="group"].toggle-button-group) {
+    --_border-radius: var(--radius-round);
+    --_button-padding-inline: clamp(var(--size-2), 3cqi, var(--size-4));
+    --_max-width: auto;
+    --_icon-size: var(--size-4);
+
+    background-color: var(--surface-default);
+    border: 1px solid var(--border-color);
+    border-radius: var(--_border-radius);
+    display: flex;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    max-inline-size: var(--_max-width);
+    min-inline-size: max-content;
+    overflow: clip;
+
+    /* Size */
+    &.small {
+      button {
+        min-block-size: 2.1875rem; /* 35px */
+      }
+    }
+
+    &.x-small {
+      button {
+        min-block-size: var(--size-6); /* 30px */
+      }
+    }
+
+    &.fullwidth {
+      inline-size: 100%;
+    }
+
+    /* Button */
+    button {
+      --_bg-color: transparent;
+
+      align-items: center;
+      background: var(--_bg-color) var(--ripple, none);
+      border-radius: 0;
+      border-inline: 1px solid var(--border-color);
+      border-inline-start-width: 0;
+      color: var(--text-color-1);
+      display: inline-flex;
+      flex: auto;
+      gap: 1ex;
+      justify-content: center;
+      min-block-size: 2.5rem; /* 40px */
+      min-inline-size: 5ex;
+      outline-offset: calc(-1 * var(--size-2));
+      padding: 0 var(--_button-padding-inline);
+      position: relative;
+      user-select: none;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition:
+          background-color 0.2s var(--ease-out-3),
+          box-shadow 0.2s var(--ease-out-3),
+          border-color 0.2s var(--ease-out-3),
+          color 0.2s var(--ease-out-3),
+          outline-offset 0.05s var(--ease-1);
+      }
+
+      /* Element states */
+      &:hover {
+        --_bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
+      }
+
+      &:focus-visible {
+        outline-offset: -6px;
+      }
+
+      /* Disabled */
+      &[disabled] {
+        border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
+        cursor: not-allowed;
+        color: color-mix(in oklch, var(--text-color-1) 30%, transparent);
+      }
+
+      &[disabled] + &:not([disabled]):not(:last-of-type) {
+        border-inline-end-width: 1px;
+      }
+
+      /* Assign border radius for outline */
+      &:first-of-type {
+        border-bottom-left-radius: var(--_border-radius);
+        border-top-left-radius: var(--_border-radius);
+      }
+      &:last-of-type {
+        border-bottom-right-radius: var(--_border-radius);
+        border-top-right-radius: var(--_border-radius);
+      }
+
+      &:last-of-type {
+        border-inline-end-width: 0;
+      }
+
+      /* Ripple effect */
+      background-position: center;
+
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
+            center/15000%;
+
+          transition: background var(--button-ripple-duration);
+        }
+
+        &:where(:hover:active) {
+          background-size: var(--button-ripple-size);
+          transition: background 0s;
+        }
+      }
+
+      /* Icons */
+      svg {
+        inline-size: var(--_icon-size);
+        inset-inline-start: calc(var(--_button-padding-inline));
+
+        & + svg {
+          max-block-size: var(--size-5);
+          max-inline-size: var(--size-7);
+        }
+      }
+
+      /* Selected */
+      &.selected {
+        --_bg-color: color-mix(
+          in oklch,
+          var(--primary) 12%,
+          var(--surface-default)
+        );
+
+        /* Checkmark */
+        svg:first-of-type {
+          margin-block-end: -3px;
+        }
+      }
+    }
+  }
+}

package/src/components/tooltip.css

@@ -0,0 +1,94 @@
+@layer components.base {
+  :where(.tooltip) {
+    background-color: var(--surface-tonal);
+    border-radius: var(--radius-2);
+    font-size: var(--font-size-xs);
+    margin: var(--size-1);
+    opacity: 1;
+    padding: 0 var(--size-2);
+    position: absolute;
+    position-area: block-start;
+    position-try-fallbacks: flip-block;
+    /* position-try-order: most-height; */
+    view-transition-name: vt-tooltip;
+    z-index: 1;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:where([class^="top"], [class^="bottom"]) {
+      background-color: red;
+      position-try-order: most-height;
+    }
+
+    &:where([class^="left"], [class^="right"]) {
+      background-color: red;
+      position-try-order: most-width;
+    }
+
+    &.top {
+      position-area: block-start;
+    }
+    &.top-start {
+      position-area: block-start span-inline-start;
+    }
+    &.top-end {
+      position-area: block-start span-inline-end;
+    }
+    &.right {
+      position-area: inline-end;
+    }
+    &.right-start {
+      position-area: inline-end span-block-start;
+    }
+    &.right-end {
+      position-area: inline-end span-block-end;
+    }
+    &.bottom {
+      position-area: block-end;
+    }
+    &.bottom-start {
+      position-area: block-end span-inline-start;
+    }
+    &.bottom-end {
+      position-area: block-end span-inline-end;
+    }
+    &.left {
+      position-area: inline-start;
+    }
+    &.left-start {
+      position-area: inline-start span-block-start;
+    }
+    &.left-end {
+      position-area: inline-start span-block-end;
+    }
+
+    /* Swap it around for rtl */
+    :dir(rtl) {
+      &.right {
+        position-area: inline-start;
+      }
+      &.right-start {
+        position-area: inline-start span-block-start;
+      }
+      &.right-end {
+        position-area: inline-start span-block-end;
+      }
+      &.left {
+        position-area: inline-end;
+      }
+      &.left-start {
+        position-area: inline-end span-block-start;
+      }
+      &.left-end {
+        position-area: inline-end span-block-end;
+      }
+    }
+  }
+
+  ::view-transition-old(vt-tooltip),
+  ::view-transition-new(vt-tooltip) {
+    height: 100%;
+  }
+}

package/src/components/typography.css

@@ -0,0 +1,209 @@
+@layer components.base {
+  /* Base typography */
+  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+    color: var(--text-color-1);
+    font-weight: 700;
+    text-wrap: pretty;
+  }
+
+  :where(h1, .h1) {
+    font-size: var(--font-size-h1, var(--font-size-7));
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+  }
+
+  :where(h2, .h2) {
+    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+
+  :where(h3, .h3) {
+    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
+    letter-spacing: -0.01em;
+    line-height: 1.167;
+  }
+
+  :where(h4, .h4) {
+    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
+    letter-spacing: -0.01em;
+    line-height: 1.235;
+  }
+
+  :where(h5, .h5) {
+    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
+    line-height: 1.334;
+  }
+
+  :where(h6, .h6) {
+    font-size: var(--font-size-h6, var(--font-size-1, 1rem));
+    line-height: 1;
+  }
+
+  :where(hgroup) {
+    & > :where(p, .p) {
+      margin: 0;
+    }
+
+    & > :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+      margin-block-end: 0.4em;
+    }
+
+    /* The second p element */
+    & > :where(p, .p):last-of-type:last-child:not(:first-child) {
+      color: oklch(from currentColor l c h / 75%);
+      font-size: var(--font-size-lg);
+      line-height: 1.6;
+    }
+  }
+
+  /** Overline */
+  :where(.overline, hgroup > :where(p, .p):first-of-type:first-child) {
+    color: light-dark(
+      oklch(from var(--text-color-2) calc(l * 1.25) c h),
+      oklch(from var(--text-color-2) calc(l * 0.75) c h)
+    );
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    line-height: 2.5;
+    text-transform: uppercase;
+  }
+
+  :where(p, .p) {
+    text-wrap: pretty;
+
+    &.small {
+      font-size: var(--font-size-md);
+    }
+    &.large {
+      font-size: var(--font-size-lg);
+    }
+  }
+
+  /* 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;
+    }
+  }
+
+  :where(sup) {
+    font-size: 0.5em;
+  }
+
+  :where(del, ins) {
+    color: var(--color-9);
+  }
+
+  :where(small) {
+    font-size: max(0.5em, var(--font-size-0, 0.75rem));
+    max-inline-size: var(--size-content-1);
+  }
+
+  :where(cite) {
+    font-style: italic;
+  }
+
+  /* Blockquote */
+  :where(blockquote) {
+    border-inline-start-width: var(--border-size-3);
+    display: grid;
+    gap: var(--size-3);
+    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-color-2);
+    }
+  }
+
+  /* Code */
+  :where(pre) {
+    border-radius: 0.375rem;
+    direction: ltr;
+    font-size: 0.875rem;
+    line-height: 1.7142857;
+    margin-block: 1.7142857em;
+    max-inline-size: max-content;
+    min-inline-size: 0;
+    padding-block: 0.8571429em;
+    padding-inline: 1.1428571em;
+    white-space: pre;
+    writing-mode: lr;
+  }
+
+  :where(code, kbd, samp, pre) {
+    font-family: var(--font-mono);
+  }
+
+  :where(code) {
+    background-color: oklch(00 0 0 /18%);
+    border-radius: var(--border-size-3);
+    font-size: 0.9em;
+    padding: 0.2ex 0.5ex;
+  }
+
+  :where(kbd, var) {
+    background-color: var(--text-color-2);
+    border-color: var(--text-color-2);
+    border-radius: var(--border-radius, var(--radius-2));
+    border-width: var(--border-size-1);
+    color: var(--text-color-2-contrast);
+    padding: calc(var(--size-1) / 2) var(--size-1);
+  }
+
+  :where(:not(pre) code, kbd) {
+    word-break: break-word;
+  }
+
+  :where(:not(pre) code) {
+    border-radius: var(--border-radius, var(--radius-2));
+    padding: var(--size-1) var(--size-2);
+    writing-mode: lr;
+  }
+
+  :where(mark) {
+    border-radius: var(--border-radius, 0);
+    box-decoration-break: clone;
+    padding: calc(var(--size-1) / 2) var(--size-1);
+    vertical-align: baseline;
+  }
+
+  /* Misc */
+  :where(dt) {
+    font-weight: 700;
+  }
+
+  :where(figure) {
+    & > :where(figcaption) {
+      font-size: var(--font-size-1, 1rem);
+      text-wrap: balance;
+    }
+  }
+}

package/src/main.css

@@ -0,0 +1,59 @@
+@layer openprops, normalize, utils, theme, components.base, components.has-deps;
+
+/*
+* Open Props
+* Import as many props as you need here.
+* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
+*/
+@import "open-props/css/media-queries.css";
+@import "open-props/index.css" layer(openprops);
+@import "open-props/css/sizes/media.css" layer(openprops);
+@import "open-props/css/font/lineheight.css" layer(openprops);
+@import "open-props/css/color/hues.oklch.css" layer(openprops);
+
+/* Normalize */
+@import "./normalize.css";
+
+/* Utils */
+@import "./utils.css";
+
+/* Theme */
+@import "./theme.css";
+
+/*
+* Components
+* Components are divided into two categories - if they are stand-alone (base) or if they have dependencies (has-deps).
+*/
+/*** Base 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";
+
+/*** 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";