opui-css 3.3.4 → 4.0.0

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

@@ -1,135 +1,87 @@
-@layer components.root {
-  :where(.chip) {
-    --_bg-color: var(--surface-tonal);
-    --_border-color: var(--border-color);
-    --_color: var(--text-color-1);
-
-    align-items: center;
-    background: var(--_bg-color) var(--ripple, none);
-    border: 1px solid var(--_border-color);
-    border-radius: var(--radius-2, 0.5rem);
-    color: var(--_color);
-    display: inline-flex;
-    font-size: var(--font-size-0, 0.75rem);
-    gap: var(--size-1);
-    block-size: var(--size-7, 2rem);
-    padding-inline: var(--size-2);
-    text-decoration: none;
-
-    /* Variants */
-    &.tonal {
-      --_bg-color: var(--surface-tonal);
-      --_color: var(--text-color-1);
-    }
-
-    &.outlined {
-      --_bg-color: var(--surface-default);
-      --_color: var(--text-color-1);
-    }
-
-    /* TODO: should this be out of the box? */
-    /* Colors */
-    /* &:hover {
-      --_bg-color: var(--color-11);
-      --_border-color: var(--color-11);
-      --_color: var(--text-color-1);
-    } */
-    /* &.red,
-    &.blue,
-    &.green,
-    &.orange,
-    &.primary {
-      --_bg-color: var(--color-5);
-      --_border-color: var(--color-7);
-      --_color: var(--text-color-1-contrast);
-
-      &:hover {
-        --_bg-color: var(--color-7);
-        --_border-color: var(--color-7);
-        --_color: var(--text-color-1-contrast);
-
-        &:active {
-          --_bg-color: var(--color-8);
-          --_border-color: var(--color-8);
-        }
-      }
-
-      &.outlined {
-        --_bg-color: var(--surface-tonal);
-        --_color: var(--text-color-1);
-        --_border-color: var(--color-9);
-
-        &:hover {
-          --_bg-color: var(--color-9);
-          --_border-color: var(--color-9);
-          --_color: var(--text-color-1);
-
-          &:active {
-            --_bg-color: var(--color-11);
-            --_border-color: var(--color-11);
-          }
-        }
-      }
-    } */
-
-    &:where(button, a):where(:not([disabled])) {
-      &:where(:not(:active)):hover {
-        --_bg-color: light-dark(
-          oklch(from var(--surface-tonal) calc(l * 0.98) c h),
-          oklch(from var(--surface-tonal) calc(l * 1.1) c h)
-        );
-      }
-    }
-
-    /* Icon */
-    &:has(svg:first-child) {
-      padding-inline: var(--size-1) var(--size-2);
-    }
-    &:has(svg:last-child) {
-      padding-inline: var(--size-2) var(--size-1);
-    }
-
-    &:has(svg) {
-      svg {
-        flex-shrink: 0;
-        inline-size: var(--size-3);
-      }
-    }
-
-    /* Sizes */
-    &.small {
-      block-size: var(--size-5);
-    }
-    &.multiline {
-      block-size: auto;
-    }
-
-    /* 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;
-      }
-    }
-
-    /* Disabled */
-    &:where([disabled]) {
-      opacity: 0.64;
-      --_text-color: color-mix(
-        in oklch,
-        var(--text-color-2) 50%,
-        var(--surface-default)
-      );
-      cursor: not-allowed;
-    }
-  }
-}
+@layer components.root {
+  :where(.chip) {
+    --_bg-color: var(--surface-tonal);
+    --_border-color: var(--border-color);
+    --_color: var(--text-primary);
+
+    align-items: center;
+    background: var(--_bg-color) var(--ripple, none);
+    block-size: var(--size-7, 2rem);
+    border-radius: var(--radius-2, 0.5rem);
+    border: 1px solid var(--_border-color);
+    color: var(--_color);
+    display: inline-flex;
+    font-size: var(--font-size-0, 0.75rem);
+    gap: var(--size-1);
+    padding-inline: var(--size-2);
+    text-decoration: none;
+
+    /* Variants */
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+      --_color: var(--text-primary);
+    }
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_color: var(--text-primary);
+    }
+
+    &:where(button, a):where(:not([disabled])) {
+      &:where(:not(:active)):hover {
+        --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.98) c h),
+            oklch(from var(--surface-tonal) calc(l * 1.1) c h));
+      }
+    }
+
+    /* Icon */
+    &:has(svg:first-child) {
+      padding-inline: var(--size-1) var(--size-2);
+    }
+
+    &:has(svg:last-child) {
+      padding-inline: var(--size-2) var(--size-1);
+    }
+
+    &:has(svg) {
+      svg {
+        flex-shrink: 0;
+        inline-size: var(--size-3);
+      }
+    }
+
+    /* Sizes */
+    &.small {
+      block-size: var(--size-5);
+    }
+
+    &.multiline {
+      block-size: auto;
+    }
+
+    /* 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;
+      }
+    }
+
+    /* Disabled */
+    &:where([disabled]) {
+      opacity: 0.64;
+      --_color: color-mix(in oklch,
+          var(--text-muted) 50%,
+          var(--surface-default));
+      cursor: not-allowed;
+    }
+  }
+}

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

@@ -1,68 +1,77 @@
-@layer components.root {
-  :where(.definition-list) {
-    --_border-style: solid;
-    --_border-width: 1px;
-
-    display: grid;
-    gap: var(--size-3);
-    padding: 0;
-
-    &.dotted {
-      --_border-style: dotted;
-      --_border-width: 2px;
-    }
-
-    li {
-      display: grid;
-      margin: 0;
-      padding: 0;
-
-      .term {
-        display: block;
-        font-weight: 700;
-        overflow: hidden;
-        position: relative;
-      }
-
-      hr {
-        display: none;
-        margin: 0;
-      }
-    }
-
-    @container (width > 45ch) {
-      gap: var(--size-1);
-
-      li {
-        align-items: baseline;
-        display: grid;
-        gap: var(--size-1);
-        grid-template-columns: 1fr auto;
-
-        &:has(hr) {
-          grid-template-columns: auto 1fr auto;
-        }
-
-        hr {
-          background-color: transparent;
-          border-block-end: var(--_border-width) var(--_border-style)
-            var(--border-color);
-          block-size: 2px;
-          display: block;
-        }
-
-        .term {
-          inline-size: max-content;
-
-          &::after {
-            display: inline-block;
-          }
-        }
-        .description {
-          color: var(--text-color-2);
-          text-align: end;
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :where(.description-list) {
+    --_border-style: solid;
+    --_border-width: 1px;
+
+    display: grid;
+    gap: var(--size-3);
+    margin: 0;
+    padding: 0;
+
+    &.dotted {
+      --_border-style: dotted;
+      --_border-width: 2px;
+    }
+
+    .item {
+      display: grid;
+      margin: 0;
+      padding: 0;
+
+      dt {
+        display: block;
+        font-weight: 700;
+        overflow: hidden;
+        position: relative;
+      }
+
+      dd {
+        margin: 0;
+      }
+    }
+
+    @container (width > 45ch) {
+      gap: var(--size-1);
+
+      .item {
+        align-items: baseline;
+        display: grid;
+        gap: var(--size-1);
+        grid-template-columns: 1fr auto;
+
+        dt {
+          inline-size: max-content;
+
+          &::after {
+            display: inline-block;
+          }
+        }
+
+        dd {
+          color: var(--text-muted);
+          text-align: end;
+        }
+      }
+
+      &.bordered .item {
+        grid-template-columns: auto 1fr auto;
+
+        dt {
+          order: 0;
+        }
+
+        dd {
+          order: 2;
+        }
+
+        &::after {
+          background-color: transparent;
+          block-size: 2px;
+          border-block-end: var(--_border-width) var(--_border-style) var(--border-color);
+          content: "";
+          order: 1;
+        }
+      }
+    }
+  }
+}

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

@@ -1,59 +1,68 @@
-@layer components.extended {
-  :where(dialog) {
-    margin-block-start: 15%; /* vertical alignment */
-    padding-block: 0;
-    pointer-events: none;
-
-    &::backdrop {
-      background-color: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(5px);
-
-      @media (prefers-reduced-motion: reduce) {
-        backdrop-filter: none;
-      }
-    }
-
-    &:not([open]) {
-      display: none;
-    }
-
-    &[open] {
-      pointer-events: all;
-    }
-
-    .actions {
-      justify-content: end;
-      padding-inline: var(--size-3) var(--size-1);
-    }
-
-    /* Animation */
-    /* There's no close animation, intentionally */
-    opacity: 0;
-
-    &[open] {
-      opacity: 1;
-      transition: display 0.2s allow-discrete,
-        margin-block-start 0.3s var(--ease-1), overlay 0.2s allow-discrete,
-        opacity 0.2s var(--ease-out-1);
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-      margin-block-start: 17%;
-      &[open] {
-        margin-block-start: 15%;
-
-        @starting-style {
-          margin-block-start: 17%;
-        }
-      }
-    }
-  }
-
-  :where(html:has(dialog[open])) {
-    overflow: hidden;
-  }
-}
+@layer components.extended {
+  :where(.dialog) {
+    inline-size: 100%;
+    inset: 0;
+    margin: auto;
+    margin-block-start: 15%;
+    max-inline-size: calc(100% - var(--size-4));
+    padding-block: 0;
+    pointer-events: none;
+    position: fixed;
+
+    @media (width > 600px) {
+      max-inline-size: 60ch;
+    }
+
+    /* Animation */
+    /* There's no close animation, intentionally */
+    opacity: 0;
+
+    &::backdrop {
+      backdrop-filter: blur(1px);
+      background-color: rgba(0, 0, 0, 0.5);
+
+      @media (prefers-reduced-motion: reduce) {
+        backdrop-filter: none;
+      }
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    &[open] {
+      pointer-events: all;
+    }
+
+    .actions {
+      justify-content: end;
+      padding-inline: var(--size-3) var(--size-1);
+    }
+
+    &[open] {
+      opacity: 1;
+      transition: display 0.2s allow-discrete,
+        overlay 0.2s allow-discrete,
+        opacity 0.2s var(--ease-out-1);
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      &[open] {
+        margin-block-start: 15%;
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  :where(html:has(.dialog[open])) {
+    block-size: 100%;
+    overflow: hidden;
+  }
+}

package/css/components/divider.css

@@ -0,0 +1,20 @@
+@layer components.root {
+  :where(hr) {
+    background-color: var(--border-color);
+    block-size: var(--border-size-1);
+    margin-block: var(--size-fluid-3);
+
+    /* Border color */
+    &.border-filled {
+      background-color: var(--surface-filled);
+    }
+
+    &.border-primary {
+      background-color: var(--primary);
+    }
+
+    &.border-tonal {
+      background-color: var(--surface-tonal);
+    }
+  }
+}

package/css/components/drawer.css

@@ -0,0 +1,171 @@
+@layer components.root {
+	:where(dialog.drawer) {
+		--_backdrop-bg-color: transparent;
+		--_backdrop-blur: blur(2px);
+		--_bg-color: var(--surface-default);
+		--_block-size: min(80vb, 650px);
+		--_border-color: var(--border-color);
+		--_border-width: var(--border-width);
+		--_color: var(--text-primary);
+		--_content-padding: var(--size-4);
+		--_footer-gap: var(--size-3);
+		--_footer-padding: var(--size-3);
+		--_header-font-size: var(--font-size-3);
+		--_header-padding: var(--size-3);
+		--_inline-size: min(375px, 100vi);
+		--_shadow: var(--shadow-2);
+		--_transition-duration: 0.2s;
+		--_transition-timing: var(--ease-out-3);
+
+		background-color: var(--_bg-color);
+		border: none;
+		box-shadow: var(--_shadow);
+		color: var(--_color);
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		max-inline-size: 100%;
+		padding: 0;
+		position: fixed;
+		transition:
+			display var(--_transition-duration) allow-discrete,
+			overlay var(--_transition-duration) allow-discrete,
+			translate var(--_transition-duration) var(--_transition-timing);
+		z-index: 1000;
+
+		&::backdrop {
+			backdrop-filter: var(--_backdrop-blur);
+			background-color: var(--_backdrop-bg-color);
+			opacity: 0;
+			transition:
+				display var(--_transition-duration) allow-discrete,
+				overlay var(--_transition-duration) allow-discrete,
+				opacity var(--_transition-duration) var(--_transition-timing);
+		}
+
+		&.backdrop-transparent {
+			--_backdrop-blur: none;
+		}
+
+		.header {
+			align-items: center;
+			border-block-end: var(--_border-width) solid var(--_border-color);
+			display: flex;
+			padding: var(--_header-padding);
+
+			:where(h1, h2, h3, h4, h5, h6) {
+				font-size: var(--_header-font-size);
+				margin: 0;
+			}
+
+			:where(.icon-button) {
+				margin-inline-start: auto;
+			}
+		}
+
+		.content {
+			flex: 1;
+			overflow-y: auto;
+			padding: var(--_content-padding);
+		}
+
+		.footer {
+			border-block-start: var(--_border-width) solid var(--_border-color);
+			display: flex;
+			gap: var(--_footer-gap);
+			justify-content: end;
+			padding: var(--_footer-padding);
+		}
+
+		&.inline-start,
+		&.inline-end {
+			block-size: 100dvb;
+			inline-size: var(--_inline-size);
+			inset-block: 0;
+			max-block-size: 100%;
+		}
+
+		&.inline-start {
+			border-inline-end: var(--_border-width) solid var(--_border-color);
+			inset-inline-end: auto;
+			inset-inline-start: 0;
+			translate: -100% 0;
+		}
+
+		&.inline-end {
+			border-inline-start: var(--_border-width) solid var(--_border-color);
+			inset-inline-end: 0;
+			inset-inline-start: auto;
+			translate: 100% 0;
+
+			.footer {
+				justify-content: start;
+			}
+		}
+
+		&.block-start,
+		&.block-end {
+			block-size: var(--_block-size);
+			inline-size: 100dvi;
+			inset-inline: 0;
+			max-block-size: 80dvb;
+		}
+
+		&.block-start {
+			border-block-end: var(--_border-width) solid var(--_border-color);
+			inset-block-end: auto;
+			inset-block-start: 0;
+			translate: 0 -100%;
+		}
+
+		&.block-end {
+			border-block-start: var(--_border-width) solid var(--_border-color);
+			inset-block-end: 0;
+			inset-block-start: auto;
+			translate: 0 100%;
+		}
+
+		&[open] {
+			translate: 0 0;
+
+			&::backdrop {
+				opacity: 1;
+			}
+
+			@starting-style {
+				&::backdrop {
+					opacity: 0;
+				}
+
+				&.inline-start {
+					translate: -100% 0;
+				}
+
+				&.inline-end {
+					translate: 100% 0;
+				}
+
+				&.block-start {
+					translate: 0 -100%;
+				}
+
+				&.block-end {
+					translate: 0 100%;
+				}
+			}
+		}
+	}
+
+	/* Scroll-lock is provided by the shared `.scroll-lock` utility in core/utils.css.
+	   This carve-out re-enables page scrolling when a transparent-backdrop drawer is
+	   open on wide viewports (where the drawer doesn't visually cover the page). */
+	html:has(dialog.drawer.scroll-lock[open].backdrop-transparent) {
+		overflow: unset;
+		overscroll-behavior: auto;
+
+		@media (width < 500px) {
+			overflow: clip;
+			overscroll-behavior: contain;
+		}
+	}
+}