opui-css 2.4.0 → 3.0.0

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

@@ -1,107 +1,107 @@
-@layer components.root {
-  :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);
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :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/themes/theme-two/components/text-field.css

@@ -0,0 +1,57 @@
+@layer components.extended {
+  :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/themes/theme-two/components/textarea.css

@@ -0,0 +1,25 @@
+@layer components.extended {
+  :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/themes/theme-two/components/toggle-button-group.css

@@ -0,0 +1,135 @@
+@layer components.root {
+  :where([role="group"].toggle-button-group) {
+    --_border-radius: var(--button-border-radius);
+    --_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: oklch(from var(--primary) l c h / 25%);
+
+        /* Checkmark */
+        svg:first-of-type {
+          margin-block-end: -3px;
+        }
+      }
+    }
+  }
+}

package/src/themes/theme-two/components/tooltip.css

@@ -0,0 +1,94 @@
+@layer components.root {
+  :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%;
+  }
+}