opui-css 4.1.0 → 5.0.0

package/css/components/divider.css

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

package/css/components/drawer.css

@@ -1,5 +1,5 @@
 @layer components.root {
-	:where(dialog.drawer) {
+	:where(dialog.ui-drawer) {
 		--_backdrop-bg-color: transparent;
 		--_backdrop-blur: blur(2px);
 		--_bg-color: var(--surface-default);
@@ -43,11 +43,11 @@
 				opacity var(--_transition-duration) var(--_transition-timing);
 		}
 
-		&.backdrop-transparent {
+		&.ui-backdrop-transparent {
 			--_backdrop-blur: none;
 		}
 
-		.header {
+		.ui-header {
 			align-items: center;
 			border-block-end: var(--_border-width) solid var(--_border-color);
 			display: flex;
@@ -58,18 +58,18 @@
 				margin: 0;
 			}
 
-			:where(.icon-button) {
+			:where(.ui-icon-button) {
 				margin-inline-start: auto;
 			}
 		}
 
-		.content {
+		.ui-content {
 			flex: 1;
 			overflow-y: auto;
 			padding: var(--_content-padding);
 		}
 
-		.footer {
+		.ui-footer {
 			border-block-start: var(--_border-width) solid var(--_border-color);
 			display: flex;
 			gap: var(--_footer-gap);
@@ -77,48 +77,48 @@
 			padding: var(--_footer-padding);
 		}
 
-		&.inline-start,
-		&.inline-end {
+		&.ui-inline-start,
+		&.ui-inline-end {
 			block-size: 100dvb;
 			inline-size: var(--_inline-size);
 			inset-block: 0;
 			max-block-size: 100%;
 		}
 
-		&.inline-start {
+		&.ui-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 {
+		&.ui-inline-end {
 			border-inline-start: var(--_border-width) solid var(--_border-color);
 			inset-inline-end: 0;
 			inset-inline-start: auto;
 			translate: 100% 0;
 
-			.footer {
+			.ui-footer {
 				justify-content: start;
 			}
 		}
 
-		&.block-start,
-		&.block-end {
+		&.ui-block-start,
+		&.ui-block-end {
 			block-size: var(--_block-size);
 			inline-size: 100dvi;
 			inset-inline: 0;
 			max-block-size: 80dvb;
 		}
 
-		&.block-start {
+		&.ui-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 {
+		&.ui-block-end {
 			border-block-start: var(--_border-width) solid var(--_border-color);
 			inset-block-end: 0;
 			inset-block-start: auto;
@@ -137,29 +137,29 @@
 					opacity: 0;
 				}
 
-				&.inline-start {
+				&.ui-inline-start {
 					translate: -100% 0;
 				}
 
-				&.inline-end {
+				&.ui-inline-end {
 					translate: 100% 0;
 				}
 
-				&.block-start {
+				&.ui-block-start {
 					translate: 0 -100%;
 				}
 
-				&.block-end {
+				&.ui-block-end {
 					translate: 0 100%;
 				}
 			}
 		}
 	}
 
-	/* Scroll-lock is provided by the shared `.scroll-lock` utility in core/utils.css.
+	/* Scroll-lock is provided by the shared `.ui-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) {
+	html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
 		overflow: unset;
 		overscroll-behavior: auto;
 

package/css/components/form.css

@@ -1,7 +1,7 @@
 @layer components.extended {
 
   /* Form */
-  :where(.form) {
+  :where(.ui-form) {
     display: grid;
     gap: var(--size-8);
 
@@ -11,7 +11,7 @@
   }
 
   /* Fieldset */
-  :where(.fieldset) {
+  :where(.ui-fieldset) {
     all: unset;
     border: 0;
     border-radius: 0;
@@ -22,20 +22,20 @@
     padding: 0;
 
     /* Legend */
-    :where(legend, .legend) {
+    :where(legend, .ui-legend) {
       all: unset;
       color: var(--text-primary);
       font-weight: 600;
       margin-block-end: var(--size-3);
       padding: 0;
 
-      &:has(+ :where(.field-description)) {
+      &:has(+ :where(.ui-field-description)) {
         margin-block-end: 0;
       }
     }
 
     /* Field description / supporting text */
-    :where(.field-description) {
+    :where(.ui-field-description) {
       color: var(--text-muted);
       font-size: var(--font-size-05);
       line-height: var(--font-lineheight-3);
@@ -46,13 +46,13 @@
     }
 
     /* End text */
-    :where(.end-text) {
+    :where(.ui-end-text) {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       line-height: var(--font-lineheight-3);
     }
 
-    &:has(.text-field.row) {
+    &:has(.ui-text-field.ui-row) {
       row-gap: var(--size-7);
     }
 
@@ -63,26 +63,26 @@
 
       input,
       label,
-      .label {
+      .ui-label {
         cursor: not-allowed;
       }
     }
 
     /* Error / validation */
     &[data-invalid] {
-      :where(.end-text) {
+      :where(.ui-end-text) {
         color: var(--primary);
       }
 
-      :where(.checkbox, .radio, .switch) {
+      :where(.ui-checkbox, .ui-radio, .ui-switch) {
         --palette-source: oklch(0.58 0.21 var(--hue-red));
 
-        :where(.end-text) {
+        :where(.ui-end-text) {
           color: var(--primary);
         }
       }
 
-      :where(.switch) {
+      :where(.ui-switch) {
         input {
           border-radius: var(--radius-round);
           outline: 2px solid var(--primary);
@@ -92,7 +92,7 @@
 
     /* Required */
     &:has(:invalid) {
-      :where(legend, .legend) {
+      :where(legend, .ui-legend) {
         padding-inline-end: 1ex;
         position: relative;
 
@@ -107,18 +107,18 @@
   }
 
   /* Field group */
-  :where(.field-group) {
+  :where(.ui-field-group) {
     display: flex;
     flex-direction: column;
     gap: var(--size-4);
 
     /* If it only has checkboxes, radios, or switches */
-    &:has(> :where(.checkbox, .radio, .switch)):not(:has(> :not(.checkbox, .radio, .switch))) {
+    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(:has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
       gap: var(--size-2);
     }
 
     /* If it only has buttons */
-    &:has(.button):not(:has(*:not(.button))) {
+    &:has(.ui-button):not(:has(*:not(.ui-button))) {
       align-items: center;
       flex-direction: row;
       gap: var(--size-2);
@@ -134,11 +134,11 @@
     }
 
     /* Directions */
-    &.row {
+    &.ui-row {
       flex-direction: row;
       flex-wrap: wrap;
 
-      &:has(> :where(.checkbox, .radio, .switch)) {
+      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
         gap: var(--size-4);
       }
     }

package/css/components/icon-button.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.icon-button) {
+  :where(.ui-icon-button) {
     --_color: light-dark(var(--color-16), var(--color-1));
     --_color-contrast: light-dark(var(--color-1), var(--color-16));
     --_color-tonal: var(--surface-tonal);
@@ -67,8 +67,8 @@
        contrast text, and hover/active strategy are identical.
        The .critical scope class in theme.css redirects --palette-source so
        --color-6 below becomes a tint of the active color. */
-    &.critical,
-    &.primary {
+    &.ui-critical,
+    &.ui-primary {
       --_color-contrast: var(--gray-1);
       --_color-tonal: var(--color-6);
       --_accent-tonal-contrast: var(--text-primary-contrast);
@@ -82,11 +82,11 @@
       --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
     }
 
-    &.critical {
+    &.ui-critical {
       --_color: var(--critical);
     }
 
-    &.primary {
+    &.ui-primary {
       --_color: var(--primary);
     }
 
@@ -107,7 +107,7 @@
     }
 
     /* Size */
-    &.small {
+    &.ui-small {
       block-size: var(--size-4);
       inline-size: var(--size-4);
 
@@ -118,18 +118,18 @@
     }
 
     /* Variants */
-    &.outlined {
+    &.ui-outlined {
       --_bg-color: transparent;
       --_border-color: var(--_accent);
       --_text-color: var(--_accent);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--_accent-tonal);
       --_text-color: var(--_accent-tonal-contrast);
     }
 
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--_accent);
       --_interaction-active-color: var(--_filled-active-bg-color);
       --_interaction-hover-color: var(--_filled-hover-bg-color);

package/css/components/link.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.link) {
+  :where(.ui-link) {
     color: var(--primary);
     cursor: pointer;
     font-weight: 700;

package/css/components/list.css

@@ -4,10 +4,10 @@
 Lists meant to be used stand-alone or as part of Select elements
 
   Intended use-case:
-  - ul.list > li
-  - .select > .list > option
+  - ul.ui-list > li
+  - .ui-select > .ui-list > option
 */
-  :where(.list) {
+  :where(.ui-list) {
     --_bg-color: var(--surface-filled);
     --_bg-color-hover: oklch(from var(--primary) l c h / 15%);
 
@@ -25,20 +25,20 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Background color */
-    &.transparent {
+    &.ui-transparent {
       --_bg-color: transparent;
     }
 
-    &.default {
+    &.ui-default {
       --_bg-color: var(--surface-default);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--surface-tonal);
     }
 
     /* Borders on all list items */
-    &.bordered {
+    &.ui-bordered {
       :where(li + li, option + option) {
         margin-block-start: var(--size-3);
 
@@ -57,13 +57,13 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Dense - less gaps and spacing */
-    &.dense {
+    &.ui-dense {
       :where(li, option) {
         gap: var(--size-2);
         min-block-size: var(--size-7);
         padding: var(--size-1) var(--size-2);
 
-        &.border-top {
+        &.ui-border-top {
           margin-block-start: var(--size-2);
 
           &::before {
@@ -85,29 +85,29 @@ Lists meant to be used stand-alone or as part of Select elements
 
         /* Checkbox / Radio */
         &>label {
-          .end {
+          .ui-end {
             padding-inline-end: 0.125rem;
           }
 
-          &:where(.checkbox, .radio) {
+          &:where(.ui-checkbox, .ui-radio) {
             --_input-size: var(--size-3);
           }
         }
 
         /* Leading and trailing content */
-        .start,
-        .end {
-          .avatar {
+        .ui-start,
+        .ui-end {
+          .ui-avatar {
             max-inline-size: var(--size-6);
           }
 
-          .icon-button,
+          .ui-icon-button,
           svg {
             max-inline-size: var(--size-4);
           }
 
-          .checkbox,
-          .radio {
+          .ui-checkbox,
+          .ui-radio {
             --_input-size: var(--size-3);
           }
         }
@@ -115,7 +115,7 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Gutterless */
-    &.gutterless {
+    &.ui-gutterless {
       :where(li, option) {
         padding-inline: 0;
 
@@ -220,20 +220,20 @@ Lists meant to be used stand-alone or as part of Select elements
 
       /* Checkbox / Radio / Switch */
       &>label {
-        &:where(.checkbox, .radio, .switch) {
+        &:where(.ui-checkbox, .ui-radio, .ui-switch) {
           display: flex;
         }
 
-        .end {
+        .ui-end {
           padding-inline-end: var(--size-1);
         }
 
-        &:where(.checkbox, .radio) {
+        &:where(.ui-checkbox, .ui-radio) {
           inline-size: 100%;
         }
 
         /* Switches look comically big in lists, so it's better to use a smaller variant  */
-        &.switch {
+        &.ui-switch {
           --_dot-size: 0.75rem;
           --_track-height: var(--size-4);
           --_track-width: 2.5rem;
@@ -246,7 +246,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Border between list items */
-      &.border-top {
+      &.ui-border-top {
         margin-block-start: var(--size-3);
 
         &::before {
@@ -261,7 +261,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Text */
-      .text {
+      .ui-text {
         flex: 1;
         line-height: 1.6;
 
@@ -277,7 +277,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Leading content */
-      .start {
+      .ui-start {
         align-items: center;
         align-self: center;
         display: grid;
@@ -305,7 +305,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Trailing content */
-      .end {
+      .ui-end {
         align-items: center;
         display: flex;
         font-size: var(--font-size-0);
@@ -330,13 +330,13 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Inset */
-      &.inset {
-        .text {
+      &.ui-inset {
+        .ui-text {
           padding-inline-start: calc(var(--size-5) + var(--size-3));
         }
 
         /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
-        .start {
+        .ui-start {
           display: none;
         }
       }

package/css/components/progress.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(progress) {
+  :where(.ui-progress) {
     --_accent-color: var(--primary);
     --_bg-color: var(--surface-tonal);
 
@@ -15,15 +15,15 @@
     vertical-align: baseline;
 
     /* Color */
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--surface-filled);
     }
 
-    &.default {
+    &.ui-default {
       --_bg-color: var(--surface-default);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--surface-tonal);
     }
 

package/css/components/radio.css

@@ -1,5 +1,5 @@
 @layer components.root {
-	label.radio {
+	label.ui-radio {
 		--_input-size: 1.125rem;
 		--_indicator-size: 50%;
 
@@ -28,7 +28,7 @@
 
 		/* Required dot */
 		&:has(:invalid) {
-			.label:after {
+			.ui-label:after {
 				color: var(--red);
 				content: "*";
 				inset: 0 -0.25ex auto auto;
@@ -37,7 +37,7 @@
 		}
 
 		/* Label */
-		.label {
+		.ui-label {
 			color: var(--text-primary);
 			font-size: var(--font-size-05);
 			grid-column: 2;
@@ -47,7 +47,7 @@
 		}
 
 		/* End text */
-		:where(.end-text) {
+		:where(.ui-end-text) {
 			color: var(--text-muted);
 			font-size: var(--font-size-0);
 			grid-column: 2;
@@ -57,11 +57,11 @@
 		}
 
 		/* Stacked layout */
-		&.stack {
+		&.ui-stack {
 			grid-auto-columns: unset;
 			justify-items: center;
 
-			.label {
+			.ui-label {
 				grid-column: 1/-1;
 				grid-row: 2;
 				margin-block-start: var(--size-1);
@@ -73,7 +73,7 @@
 				}
 			}
 
-			.end-text {
+			.ui-end-text {
 				grid-column: 1/-1;
 				grid-row: 3;
 			}
@@ -122,14 +122,14 @@
 		}
 
 		/* Sizes */
-		&.small {
+		&.ui-small {
 			input[type="radio"] {
 				--_input-size: var(--size-3);
 
 			}
 		}
 
-		&.large {
+		&.ui-large {
 			input[type="radio"] {
 				--_input-size: var(--size-4);
 
@@ -141,7 +141,7 @@
 		&:has(:user-invalid) {
 			--palette-source: oklch(0.58 0.21 var(--hue-red));
 
-			:where(.end-text) {
+			:where(.ui-end-text) {
 				color: var(--primary);
 			}
 		}