opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/callout.css

@@ -1,61 +1,70 @@
 @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);
+    --_bg-color: var(--ui-surface-tonal);
+    --_border-color: var(--ui-border-color-raised, var(--ui-surface-tonal));
+    --_content-gap: var(--ui-space-2);
+    --_font-size: var(--ui-font-size-small);
+    --_gap: var(--ui-space-3);
+    --_icon-size: var(--ui-icon-size);
+    --_icon-text-color: currentColor;
+    --_link-hover-text-color: var(--ui-primary-text);
+    --_outlined-bg-color: var(--ui-surface);
+    --_outlined-border-color: var(--ui-border-color);
+    --_outlined-icon-text-color: currentColor;
+    --_outlined-text-color: var(--ui-text-strong);
+    --_padding: var(--ui-space-3);
+    --_radius: var(--ui-radius);
+    --_shadow: var(--ui-shadow-surface);
+    --_surface-bg-color: var(--ui-surface);
+    --_text-color: var(--ui-text-strong);
+    --_title-font-size: var(--ui-font-size-body);
+    --ui-divider-gap: var(--ui-space-3);
+
+    background-color: var(--_surface-bg-color);
+    border: var(--ui-border-width) solid var(--_border-color);
+    border-radius: var(--_radius);
+    box-shadow: var(--_shadow);
+    color: var(--_text-color);
     isolation: isolate;
     padding: var(--_padding);
     position: relative;
 
+    &:not(
+      .ui-critical,
+      .ui-info,
+      .ui-neutral,
+      .ui-outlined,
+      .ui-success,
+      .ui-warning
+    ) {
+      --ui-border-color: var(--ui-border-color-on-raised);
+      --ui-field-border-color: var(--ui-field-border-color-on-raised);
+    }
+
     &.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);
+      --_bg-color: var(--ui-palette-tint-subtle);
+      --_border-color: var(--ui-palette-border);
+      --_icon-text-color: var(--ui-palette-accent);
+      --_outlined-border-color: var(--ui-palette-accent);
+      --_outlined-icon-text-color: var(--ui-palette-accent);
+      --_outlined-text-color: var(--ui-palette-strong);
+      --_text-color: var(--ui-palette-strong);
     }
 
     &.ui-outlined {
       --_bg-color: var(--_outlined-bg-color);
       --_border-color: var(--_outlined-border-color);
-      --_color: var(--_outlined-color);
-      --_icon-color: var(--_outlined-icon-color);
+      --_icon-text-color: var(--_outlined-icon-text-color);
+      --_text-color: var(--_outlined-text-color);
     }
 
     &::before {
       background-color: var(--_bg-color);
-      border-radius: inherit;
+      border-radius: max(0px, calc(var(--_radius) - var(--ui-border-width)));
       content: "";
       inset: 0;
       pointer-events: none;
@@ -64,9 +73,12 @@
     }
 
     & > .ui-content {
-      display: grid;
+      display: flow-root;
       font-size: var(--_font-size);
-      gap: var(--_content-gap);
+
+      & > * + * {
+        margin-block-start: var(--_content-gap);
+      }
 
       h1,
       h2,
@@ -76,7 +88,7 @@
       h6 {
         color: inherit;
         font-size: var(--_title-font-size);
-        font-weight: 600;
+        font-weight: var(--ui-font-weight-semibold);
 
         * {
           font-size: inherit;
@@ -91,22 +103,51 @@
       a[href] {
         color: inherit;
 
-        &:hover {
-          color: var(--_link-hover-color);
+        @media (hover: hover) {
+          &:hover {
+            color: var(--_link-hover-text-color);
+          }
+        }
+
+        &:focus-visible {
+          color: var(--_link-hover-text-color);
         }
       }
     }
 
     /* Icon */
-    &:has(svg) {
+    &:has(> svg) {
+      align-content: start;
       display: grid;
       gap: var(--_gap);
       grid-template-columns: var(--_icon-size) 1fr;
 
-      svg {
-        margin-block-start: 0.15rem;
-        stroke: var(--_icon-color);
+      & > svg {
+        color: var(--_icon-text-color);
+        margin-block-start: 0.15em;
       }
     }
   }
+
+  @scope (.ui-rich-text) to (.ui-not-rich-text) {
+    .ui-callout > .ui-content,
+    .ui-callout > :scope.ui-content {
+      display: block;
+    }
+
+    .ui-callout > .ui-content > * + *,
+    .ui-callout > :scope.ui-content > * + * {
+      margin-block-start: revert-layer;
+    }
+
+    .ui-callout > .ui-content :is(h1, h2, h3, h4, h5, h6):where(:not([class])),
+    .ui-callout
+      > :scope.ui-content
+      :is(h1, h2, h3, h4, h5, h6):where(:not([class])) {
+      letter-spacing: inherit;
+      line-height: inherit;
+      margin-block: 0;
+      text-wrap: inherit;
+    }
+  }
 }

package/css/components/card.css

@@ -1,75 +1,89 @@
 @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);
+  :where(.ui-accordion, .ui-card, .ui-dialog) {
+    --_motion: var(--ui-motion);
+    --_bg-color: var(--_surface-bg-color);
+    --_border-color: transparent;
+    --_border-width: 0;
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease);
+    --_elevated-bg-color: var(--ui-surface-elevated);
+    --_elevated-shadow: var(--ui-shadow-elevated);
+    --_outlined-border-color: var(--ui-border-color);
+    --_padding: var(--ui-card-padding, var(--ui-space-3));
+    --_shadow: none;
+    --_surface-bg-color: var(--ui-surface);
+    --_tonal-bg-color: var(--ui-surface-tonal);
+    --ui-divider-gap: var(--ui-space-3);
+
+    background-color: var(--_bg-color);
+    border-color: var(--_border-color);
+    border-radius: var(--ui-radius);
     border-style: solid;
-    border-width: var(--_card-border-width);
-    box-shadow: var(--_card-shadow);
+    border-width: var(--_border-width);
+    box-shadow: var(--_shadow);
     display: flex;
     flex-direction: column;
-    gap: var(--size-3);
+    gap: var(--ui-space-3);
+    min-inline-size: 0;
     overflow: hidden;
+    overflow-wrap: break-word;
     padding-inline: 0;
     position: relative;
 
     /* Variants */
-    &.ui-text {
-      --_card-bg-color: transparent;
-      --_card-border-color: transparent;
-      --_card-border-width: 0;
-      --_card-shadow: none;
+    &.ui-transparent {
+      --_bg-color: transparent;
+      --_border-color: transparent;
+      --_border-width: 0;
+      --_shadow: none;
     }
 
     &.ui-tonal {
-      --_card-bg-color: var(--_bg-tonal);
-      --_card-border-width: 1px;
+      --_bg-color: var(--_tonal-bg-color);
+      --_border-color: var(--ui-border-color-raised, var(--_surface-bg-color));
+      --_border-width: var(--ui-border-width);
+      --_shadow: var(--ui-shadow-surface);
+      --ui-border-color: var(--ui-border-color-on-raised);
+      --ui-field-border-color: var(--ui-field-border-color-on-raised);
     }
 
     &.ui-elevated {
-      --_card-bg-color: var(--_bg-elevated);
-      --_card-shadow: var(--_shadow-elevated);
+      --_bg-color: var(--_elevated-bg-color);
+      --_border-color: var(--ui-border-color-raised, var(--_surface-bg-color));
+      --_border-width: var(--ui-border-width);
+      --_shadow: var(--_elevated-shadow);
+      --ui-border-color: var(--ui-border-color-on-raised);
+      --ui-field-border-color: var(--ui-field-border-color-on-raised);
     }
 
     &.ui-outlined {
-      --_card-bg-color: var(--_bg-surface);
-      --_card-border-color: var(--_border-color);
-      --_card-border-width: 1px;
+      --_bg-color: var(--_surface-bg-color);
+      --_border-color: var(--_outlined-border-color);
+      --_border-width: var(--ui-border-width);
+      --_shadow: var(--ui-shadow-surface);
     }
 
-    &> :where(hgroup, .ui-content) {
-      padding-inline: var(--size-3);
+    & > :where(hgroup, .ui-content, .ui-header) {
+      margin-block: 0;
+      padding-inline: var(--_padding);
 
       &:last-child {
-        padding-block-end: var(--size-3);
+        padding-block-end: var(--_padding);
       }
     }
 
     /* Header */
-    &>hgroup {
-      padding-block: var(--size-3) 0;
+    & > :where(hgroup, .ui-header) {
+      padding-block: var(--_padding) 0;
+
+      & > :where(h1, h2, h3, h4, h5, h6, p) {
+        margin-block: 0;
+      }
 
       /* Top paragraph */
-      &>p:first-of-type:first-child {
-        font-size: var(--font-size-0);
-        line-height: 1.3;
+      & > p:first-of-type:first-child {
+        font-size: var(--ui-font-size-caption);
+        line-height: var(--ui-line-height-tight);
       }
 
       :where(h1, h2, h3, h4, h5, h6):last-child {
@@ -77,40 +91,144 @@
       }
 
       /* Bottom paragraph */
-      &>p:last-of-type:last-child:not(:first-child) {
-        font-size: var(--font-size-1);
+      & > p:last-of-type:last-child:not(:first-child) {
+        font-size: var(--ui-font-size-body);
       }
     }
 
     /* Content */
-    &>.ui-content:where(:only-child, :first-child) {
-      padding-block: var(--size-3) var(--size-4);
+    & > .ui-content:where(:only-child, :first-child) {
+      padding-block: var(--_padding) calc(var(--_padding) + var(--ui-space-1));
+    }
+
+    & > :where(.ui-content:not(.ui-rich-text)) > * {
+      margin-block: 0;
+    }
+
+    &
+      > :where(
+        .ui-content:not(
+          .ui-rich-text,
+          :has(
+            > :is(
+              a,
+              abbr,
+              b,
+              button,
+              cite,
+              code,
+              em,
+              i,
+              img,
+              input,
+              kbd,
+              mark,
+              q,
+              s,
+              samp,
+              small,
+              span,
+              strong,
+              sub,
+              sup,
+              svg,
+              time,
+              u,
+              var,
+              .ui-carousel
+            )
+          )
+        )
+      ) {
+      align-content: start;
+      display: grid;
+      gap: var(--ui-space-3);
+      grid-template-columns: minmax(0, 1fr);
+
+      & > .ui-divider {
+        margin-block: 0;
+      }
+    }
+
+    & > .ui-content:has(+ .ui-divider) {
+      padding-block-end: 0;
     }
 
     /* Actions */
-    &>.ui-actions {
+    &:where(.ui-accordion, .ui-card) > .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);
+      flex-wrap: wrap;
+      gap: var(--ui-space-2);
+      justify-content: end;
+      margin-block-start: auto;
+      padding-block: var(--ui-space-2);
+      padding-inline: var(--_padding);
 
-      &:has(.ui-button:first-child[class="ui-button"]) {
-        padding-inline: var(--size-1) var(--size-3);
+      /* Alignment */
+      &.ui-align-start {
+        justify-content: start;
       }
+    }
+
+    @media (hover: hover) {
+      &:has(.ui-card-link:hover):not(
+          :has(:is(.ui-accordion, .ui-card, .ui-dialog) .ui-card-link:hover)
+        ) {
+        --_border-color: var(--ui-text);
 
-      &:has(.ui-button:not([class="ui-button"])) {
-        padding-block-end: var(--size-2);
+        @media (forced-colors: active) {
+          --_border-color: Highlight;
+        }
       }
+    }
 
-      /* Alignment */
-      &.ui-align-end {
-        justify-content: end;
+    &:has(.ui-card-link:focus-visible):not(
+        :has(
+          :is(.ui-accordion, .ui-card, .ui-dialog) .ui-card-link:focus-visible
+        )
+      ) {
+      animation: ui-focus-ring var(--_duration) var(--_ease);
+      outline: var(--ui-focus-ring-width) var(--ui-focus-ring-style)
+        var(--ui-focus-ring-color);
+      outline-offset: var(--ui-focus-ring-offset);
+    }
+  }
 
-        &:has(.ui-button:first-child[class="ui-button"]) {
-          padding-inline: var(--size-3) var(--size-1);
-        }
+  :where(
+    :is(.ui-accordion, .ui-card, .ui-dialog):has(.ui-card-link)
+      :is(
+        a[href],
+        button,
+        input,
+        label,
+        select,
+        summary,
+        textarea,
+        [tabindex]
+      ):not(.ui-card-link)
+  ) {
+    position: relative;
+    z-index: 1;
+  }
+
+  :where(.ui-card-link) {
+    color: inherit;
+    text-decoration: none;
+
+    &::after {
+      content: "";
+      inset: 0;
+      position: absolute;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: underline;
       }
     }
   }
+
+  :where(.ui-accordion, .ui-card, .ui-dialog) .ui-card-link:focus-visible {
+    outline: none;
+  }
 }