opui-css 3.3.5 → 4.0.1

package/css/components/button.css

@@ -0,0 +1,215 @@
+@layer components.root {
+  :where(.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);
+
+    --_accent: var(--_color);
+    --_accent-contrast: var(--_color-contrast);
+    --_accent-tonal: var(--_color-tonal);
+    --_accent-tonal-contrast: var(--_color);
+
+    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
+        oklch(from var(--_accent) l 0.01 h / 20%));
+    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
+        oklch(from var(--_accent) l 0.06 h / 30%));
+
+    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
+        oklch(from var(--_accent) calc(l - 0.1) c h));
+    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
+        oklch(from var(--_accent) calc(l - 0.15) c h));
+    --_outlined-active-bg-color: var(--_filled-active-bg-color);
+
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-width: var(--border-size-1);
+    --_font-size: var(--font-size-1);
+    --_min-height: var(--button-size);
+    --_border-radius: var(--button-border-radius, var(--radius-2));
+    --_text-color: var(--_accent);
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    align-items: center;
+    background-color: var(--_bg-color);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    color: var(--_text-color);
+    display: inline-flex;
+    font-size: var(--_font-size);
+    font-weight: 700;
+    gap: var(--size-2);
+    justify-content: center;
+    min-block-size: var(--_min-height);
+    padding-block: 0.5ex;
+    padding-inline: 1.5ex;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color .1s ease, color .1s ease,
+      border-color .1s ease, box-shadow .1s ease;
+    user-select: none;
+
+    /* Colors — shared interaction model for critical and primary.
+       Each color modifier below only swaps --_color; the tonal surface,
+       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 {
+      --_color-contrast: var(--gray-1);
+      --_color-tonal: var(--color-6);
+      --_accent-tonal-contrast: var(--text-primary-contrast);
+
+      --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
+      --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
+
+      --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+      --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
+
+      --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+    }
+
+    &.critical {
+      --_color: var(--critical);
+    }
+
+    &.primary {
+      --_color: var(--primary);
+    }
+
+    /* Disabled */
+    &:where([disabled]) {
+      --_text-color: color-mix(in oklch,
+          var(--text-muted) 50%,
+          var(--surface-default));
+
+      cursor: not-allowed;
+      opacity: 0.64;
+    }
+
+    /* Hover & Active */
+    &:where(:not([disabled])) {
+      &:where(:not(:active):hover) {
+        --_bg-color: var(--_default-hover-bg-color);
+      }
+
+      &:where(:hover:active),
+      &[aria-current="page"] {
+        --_bg-color: var(--_default-active-bg-color);
+      }
+    }
+
+
+    /* Icons / Keyboard */
+    &:where(:has(svg), &.icon-only) {
+      gap: 1ex;
+
+      svg {
+        color: currentColor;
+        max-block-size: 0.7lh;
+      }
+    }
+
+    /* Keyboard input */
+    :is(kbd) {
+      background-color: oklch(from currentColor l c h / 10%);
+      border: 0;
+      color: oklch(from currentColor l c h / 80%);
+      font-size: 0.8em;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+
+    /* Sizes — heights aliased from the shared --control-size scale.
+       Override --button-size-* in a parent scope to resize an entire region. */
+    &.x-small {
+      --_min-height: var(--button-size-x-small);
+      --_font-size: var(--font-size-0);
+      padding-block: 0;
+      padding-inline: .5ex;
+    }
+
+    &.small {
+      --_min-height: var(--button-size-small);
+      --_font-size: var(--font-size-05);
+      padding-block: 0;
+      padding-inline: .75ex;
+    }
+
+    &.large {
+      --_min-height: var(--button-size-large);
+      padding-inline: 4ex;
+    }
+
+    /* Variants */
+    &.outlined {
+      --_bg-color: transparent;
+      --_border-color: var(--_accent);
+      --_text-color: var(--_accent);
+
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--_accent);
+          --_border-color: var(--_accent);
+          --_text-color: var(--_accent-contrast);
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_outlined-active-bg-color);
+          --_border-color: var(--_outlined-active-bg-color);
+          --_text-color: var(--_accent-contrast);
+        }
+      }
+    }
+
+    &.tonal {
+      --_bg-color: var(--_accent-tonal);
+      --_text-color: var(--_accent-tonal-contrast);
+
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--_accent);
+          --_text-color: var(--_accent-contrast);
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_outlined-active-bg-color);
+          --_text-color: var(--_accent-contrast);
+        }
+      }
+    }
+
+    &.filled {
+      --_bg-color: var(--_accent);
+      --_text-color: var(--_accent-contrast);
+
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--_filled-hover-bg-color);
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_filled-active-bg-color);
+        }
+      }
+    }
+  }
+
+  /* file input */
+  :where(input[type="file"]) {
+    align-self: flex-start;
+    border: var(--border-size-1) solid var(--surface-filled);
+    border-radius: var(--radius-2);
+    box-shadow: var(--inner-shadow-4);
+    color: var(--text-muted-contrast);
+    cursor: initial;
+    max-inline-size: 100%;
+    padding: 0;
+  }
+
+  :where(input[type="file"])::-webkit-file-upload-button,
+  :where(input[type="file"])::file-selector-button {
+    cursor: pointer;
+    margin-inline-end: var(--size-relative-6);
+  }
+}

package/css/components/callout.css

@@ -0,0 +1,109 @@
+@layer components.root {
+	:where(.callout) {
+		--_bg-color: var(--surface-tonal);
+		--_border-color: var(--surface-tonal);
+		--_color: var(--text-primary);
+		--_icon-color: currentColor;
+		--_link-hover-color: var(--primary);
+		--_padding: var(--size-3);
+		--_border-radius: var(--border-radius);
+		--_gap: var(--size-3);
+		--_content-gap: var(--size-2);
+		--_font-size: var(--font-size-05);
+		--_title-font-size: var(--font-size-1);
+		--_icon-size: var(--size-4);
+		--_surface-bg: var(--surface-default);
+
+		--_outlined-bg-color: var(--surface-default);
+		--_outlined-border-color: var(--border-color);
+		--_outlined-color: var(--text-primary);
+		--_outlined-icon-color: currentColor;
+
+		background-color: var(--_bg-color, var(--_surface-bg));
+		border: 1px solid var(--_border-color, var(--border-color));
+		border-radius: var(--_border-radius);
+		color: var(--_color);
+		isolation: isolate;
+		padding: var(--_padding);
+		position: relative;
+
+		&.critical,
+		&.info,
+		&.neutral,
+		&.success,
+		&.warning {
+			--_bg-color: light-dark(oklch(from var(--color-2) l c h / 20%), oklch(from var(--color-6) l c h / 5%));
+			--_border-color: light-dark(var(--color-5), var(--color-11));
+			--_color: light-dark(var(--color-16), var(--color-1));
+			--_icon-color: var(--color-9);
+
+			--_outlined-bg-color: var(--surface-default);
+			--_outlined-border-color: var(--color-9);
+			--_outlined-color: light-dark(var(--color-15), var(--color-1));
+			--_outlined-icon-color: var(--color-9);
+		}
+
+		&.outlined {
+			--_bg-color: var(--_outlined-bg-color);
+			--_border-color: var(--_outlined-border-color);
+			--_color: var(--_outlined-color);
+			--_icon-color: var(--_outlined-icon-color);
+		}
+
+		&::before {
+			background-color: var(--_bg-color);
+			border-radius: inherit;
+			content: "";
+			inset: 0;
+			pointer-events: none;
+			position: absolute;
+			z-index: -1;
+		}
+
+		&>.content {
+			display: grid;
+			font-size: var(--_font-size);
+			gap: var(--_content-gap);
+
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: inherit;
+				font-size: var(--_title-font-size);
+				font-weight: 600;
+
+				* {
+					font-size: inherit;
+				}
+			}
+		}
+
+		/* Links
+    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
+    */
+		&:not(.outlined) {
+			a[href] {
+				color: inherit;
+
+				&:hover {
+					color: var(--_link-hover-color);
+				}
+			}
+		}
+
+		/* Icon */
+		&:has(svg) {
+			display: grid;
+			gap: var(--_gap);
+			grid-template-columns: var(--_icon-size) 1fr;
+
+			svg {
+				margin-block-start: 0.15rem;
+				stroke: var(--_icon-color);
+			}
+		}
+	}
+}

package/css/components/card.css

@@ -0,0 +1,117 @@
+@layer components.root {
+  :where(.card) {
+    --_bg-tonal: var(--surface-tonal);
+    --_bg-elevated: var(--surface-elevated);
+    --_bg-surface: var(--surface-default);
+    --_border-color: var(--border-color);
+    --_card-bg-color: var(--_bg-surface);
+    --_card-border-color: transparent;
+    --_card-border-width: 0;
+
+    --_card-shadow: none;
+    --_shadow-light: var(--shadow-3);
+    --_shadow-dark: var(--shadow-4);
+    --_shadow-elevated: var(--_shadow-light);
+
+    @container style(--color-scheme: dark) {
+      --_shadow-elevated: var(--_shadow-dark);
+    }
+
+    background-color: var(--_card-bg-color);
+    border-color: var(--_card-border-color);
+    border-radius: var(--border-radius);
+    border-style: solid;
+    border-width: var(--_card-border-width);
+    box-shadow: var(--_card-shadow);
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-3);
+    overflow: hidden;
+    padding-inline: 0;
+    position: relative;
+
+    /* Variants */
+    &.text {
+      --_card-bg-color: transparent;
+      --_card-border-color: transparent;
+      --_card-border-width: 0;
+      --_card-shadow: none;
+    }
+
+    &.tonal {
+      --_card-bg-color: var(--_bg-tonal);
+      --_card-border-width: 1px;
+    }
+
+    &.elevated {
+      --_card-bg-color: var(--_bg-elevated);
+      --_card-shadow: var(--_shadow-elevated);
+    }
+
+    &.outlined {
+      --_card-bg-color: var(--_bg-surface);
+      --_card-border-color: var(--_border-color);
+      --_card-border-width: 1px;
+    }
+
+    &> :where(hgroup, .content) {
+      padding-inline: var(--size-3);
+
+      &:last-child {
+        padding-block-end: var(--size-3);
+      }
+    }
+
+    /* Header */
+    &>hgroup {
+      padding-block: var(--size-3) 0;
+
+      /* Top paragraph */
+      &>p:first-of-type:first-child {
+        line-height: 1.3;
+      }
+
+      :where(h1, h2, h3, h4, h5, h6):last-child {
+        margin-block-end: 0;
+      }
+
+      /* Bottom paragraph */
+      &>p:last-of-type:last-child:not(:first-child) {
+        font-size: var(--font-size-1);
+      }
+    }
+
+    /* Content */
+    &>.content:where(:only-child, :first-child) {
+      padding-block: var(--size-3) var(--size-4);
+    }
+
+    /* Actions */
+    &>.actions {
+      display: flex;
+      gap: var(--size-2);
+      margin-block: var(--size-2) 0;
+      padding-block-end: var(--size-2);
+      padding-inline: var(--size-3);
+
+      &:has(.button:first-child[class="button"]) {
+        padding-inline: var(--size-1) var(--size-3);
+      }
+
+      &:has(.button:not([class="button"])) {
+        padding-block-end: var(--size-2);
+      }
+
+      /* Alignment */
+      &.align-end {
+        justify-content: end;
+
+        &:has(.button:first-child[class="button"]) {
+          padding-inline: var(--size-3) var(--size-1);
+        }
+      }
+    }
+
+
+  }
+}

package/css/components/checkbox.css

@@ -0,0 +1,205 @@
+@layer components.root {
+	label.checkbox {
+		--_input-size: var(--size-4);
+
+		align-items: center;
+		color: var(--text-primary);
+		cursor: pointer;
+		display: inline-grid;
+		gap: 0 var(--size-2);
+		grid-auto-columns: auto;
+		grid-auto-flow: column;
+		inline-size: fit-content;
+		line-height: 1.5;
+		transform: translateZ(0);
+		user-select: none;
+
+		/* Disabled */
+		&:has([disabled]) {
+			cursor: not-allowed;
+			opacity: 0.64;
+			user-select: none;
+
+			input {
+				cursor: not-allowed;
+			}
+		}
+
+		/* Required dot */
+		&:has(:invalid) {
+			.label:after {
+				color: var(--red);
+				content: "*";
+				inset: 0 -0.25ex auto auto;
+				position: absolute;
+			}
+		}
+
+		/* Label */
+		.label {
+			color: var(--text-primary);
+			font-size: var(--font-size-05);
+			grid-column: 2;
+			grid-row: 1;
+			position: relative;
+			padding-inline: 0 1ex;
+		}
+
+		/* End text */
+		:where(.end-text) {
+			color: var(--text-muted);
+			font-size: var(--font-size-0);
+			grid-column: 2;
+			grid-row: 2;
+			line-height: 1.5;
+			z-index: 1;
+		}
+
+		/* Spread layout */
+		&.spread {
+			align-items: center;
+			column-gap: var(--size-4);
+			grid-auto-flow: unset;
+			grid-template-columns: 1fr auto;
+			inline-size: 100%;
+
+			.label {
+				font-weight: 600;
+				grid-column: 1;
+				grid-row: 1;
+				inline-size: fit-content;
+			}
+
+			input {
+				grid-column: 2;
+				grid-row: 1;
+			}
+
+			:where(.end-text) {
+				grid-column: 1;
+				grid-row: 2;
+			}
+		}
+
+		/* Stacked layout */
+		&.stack {
+			justify-items: center;
+			grid-auto-columns: unset;
+
+			.label {
+				grid-column: 1/-1;
+				grid-row: 2;
+				margin-block-start: var(--size-1);
+				padding-inline: 1ex;
+
+				/* Required dot */
+				&::after {
+					inset: 0 -0.25ex auto auto;
+				}
+			}
+
+			.end-text {
+				grid-column: 1/-1;
+				grid-row: 3;
+			}
+		}
+
+		/* Input */
+		input[type="checkbox"] {
+			--_input-size: var(--size-4);
+
+			appearance: none;
+			aspect-ratio: 1;
+			background-color: var(--surface-default);
+			block-size: var(--_input-size);
+			border-radius: var(--radius-1);
+			border: 1px solid var(--border-color);
+			box-sizing: border-box;
+			cursor: pointer;
+			display: grid;
+			font-size: var(--_input-size);
+			inline-size: var(--_input-size);
+			margin: 0;
+			padding: 0;
+			place-items: center;
+			position: relative;
+
+			&:checked,
+			&:indeterminate {
+				background-color: var(--primary);
+				border-color: var(--primary);
+			}
+
+
+			/* Checkmark */
+			&::after {
+				background-color: var(--primary-contrast);
+				clip-path: polygon(15% 52%, 40% 77%, 85% 32%, 75% 22%, 40% 57%, 25% 42%);
+				content: "";
+				inset: 0;
+				opacity: 0;
+				position: absolute;
+			}
+
+			&:checked::after,
+			&:indeterminate::after {
+				opacity: 1;
+			}
+
+			/* Indeterminate dash */
+			&:indeterminate::after {
+				clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
+			}
+
+			&::before {
+				--highlight-size: 175%;
+			}
+		}
+
+		/* Sizes */
+		&.small {
+			input[type="checkbox"] {
+				--_input-size: var(--size-3);
+			}
+		}
+
+		&.large {
+			input[type="checkbox"] {
+				--_input-size: var(--size-5);
+			}
+		}
+
+		/* Validation */
+		&[data-invalid],
+		&:has(:user-invalid) {
+			--palette-source: oklch(0.58 0.21 var(--hue-red));
+
+			:where(.end-text) {
+				color: var(--primary);
+			}
+		}
+
+		/* Touch devices */
+		@media (pointer: coarse) {
+			input {
+				--_input-size: var(--size-4);
+			}
+		}
+
+		@media (forced-colors: active) {
+			input {
+				border: 1px solid CanvasText;
+
+				&:checked,
+				&:indeterminate {
+					background-color: SelectedItem;
+					border-color: SelectedItem;
+
+					&::after {
+						background-color: SelectedItemText;
+					}
+				}
+			}
+		}
+	}
+}