opui-css 5.0.0 → 5.1.0

package/css/components/callout.css

@@ -1,109 +1,112 @@
-@layer components.root {
-	:where(.ui-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;
-
-		&.ui-critical,
-		&.ui-info,
-		&.ui-neutral,
-		&.ui-success,
-		&.ui-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);
-		}
-
-		&.ui-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;
-		}
-
-		&>.ui-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(.ui-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);
-			}
-		}
-	}
-}
+@layer components.root {
+  :where(.ui-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;
+
+    &.ui-critical,
+    &.ui-info,
+    &.ui-neutral,
+    &.ui-success,
+    &.ui-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);
+    }
+
+    &.ui-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;
+    }
+
+    & > .ui-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(.ui-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

@@ -1,117 +1,115 @@
-@layer components.root {
-  :where(.ui-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 */
-    &.ui-text {
-      --_card-bg-color: transparent;
-      --_card-border-color: transparent;
-      --_card-border-width: 0;
-      --_card-shadow: none;
-    }
-
-    &.ui-tonal {
-      --_card-bg-color: var(--_bg-tonal);
-      --_card-border-width: 1px;
-    }
-
-    &.ui-elevated {
-      --_card-bg-color: var(--_bg-elevated);
-      --_card-shadow: var(--_shadow-elevated);
-    }
-
-    &.ui-outlined {
-      --_card-bg-color: var(--_bg-surface);
-      --_card-border-color: var(--_border-color);
-      --_card-border-width: 1px;
-    }
-
-    &> :where(hgroup, .ui-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 */
-    &>.ui-content:where(:only-child, :first-child) {
-      padding-block: var(--size-3) var(--size-4);
-    }
-
-    /* Actions */
-    &>.ui-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(.ui-button:first-child[class="ui-button"]) {
-        padding-inline: var(--size-1) var(--size-3);
-      }
-
-      &:has(.ui-button:not([class="ui-button"])) {
-        padding-block-end: var(--size-2);
-      }
-
-      /* Alignment */
-      &.ui-align-end {
-        justify-content: end;
-
-        &:has(.ui-button:first-child[class="ui-button"]) {
-          padding-inline: var(--size-3) var(--size-1);
-        }
-      }
-    }
-
-
-  }
-}
+@layer components.root {
+  :where(.ui-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 */
+    &.ui-text {
+      --_card-bg-color: transparent;
+      --_card-border-color: transparent;
+      --_card-border-width: 0;
+      --_card-shadow: none;
+    }
+
+    &.ui-tonal {
+      --_card-bg-color: var(--_bg-tonal);
+      --_card-border-width: 1px;
+    }
+
+    &.ui-elevated {
+      --_card-bg-color: var(--_bg-elevated);
+      --_card-shadow: var(--_shadow-elevated);
+    }
+
+    &.ui-outlined {
+      --_card-bg-color: var(--_bg-surface);
+      --_card-border-color: var(--_border-color);
+      --_card-border-width: 1px;
+    }
+
+    & > :where(hgroup, .ui-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 */
+    & > .ui-content:where(:only-child, :first-child) {
+      padding-block: var(--size-3) var(--size-4);
+    }
+
+    /* Actions */
+    & > .ui-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(.ui-button:first-child[class="ui-button"]) {
+        padding-inline: var(--size-1) var(--size-3);
+      }
+
+      &:has(.ui-button:not([class="ui-button"])) {
+        padding-block-end: var(--size-2);
+      }
+
+      /* Alignment */
+      &.ui-align-end {
+        justify-content: end;
+
+        &:has(.ui-button:first-child[class="ui-button"]) {
+          padding-inline: var(--size-3) var(--size-1);
+        }
+      }
+    }
+  }
+}