opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/callout.css

@@ -1,112 +1,153 @@
-@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(--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: 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);
+      --_icon-text-color: var(--_outlined-icon-text-color);
+      --_text-color: var(--_outlined-text-color);
+    }
+
+    &::before {
+      background-color: var(--_bg-color);
+      border-radius: max(0px, calc(var(--_radius) - var(--ui-border-width)));
+      content: "";
+      inset: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: -1;
+    }
+
+    & > .ui-content {
+      display: flow-root;
+      font-size: var(--_font-size);
+
+      & > * + * {
+        margin-block-start: var(--_content-gap);
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: inherit;
+        font-size: var(--_title-font-size);
+        font-weight: var(--ui-font-weight-semibold);
+
+        * {
+          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;
+
+        @media (hover: hover) {
+          &:hover {
+            color: var(--_link-hover-text-color);
+          }
+        }
+
+        &:focus-visible {
+          color: var(--_link-hover-text-color);
+        }
+      }
+    }
+
+    /* Icon */
+    &:has(> svg) {
+      align-content: start;
+      display: grid;
+      gap: var(--_gap);
+      grid-template-columns: var(--_icon-size) 1fr;
+
+      & > 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,116 +1,234 @@
-@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 {
-        font-size: var(--font-size-0);
-        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-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(--_border-width);
+    box-shadow: var(--_shadow);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-3);
+    min-inline-size: 0;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    padding-inline: 0;
+    position: relative;
+
+    /* Variants */
+    &.ui-transparent {
+      --_bg-color: transparent;
+      --_border-color: transparent;
+      --_border-width: 0;
+      --_shadow: none;
+    }
+
+    &.ui-tonal {
+      --_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 {
+      --_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 {
+      --_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, .ui-header) {
+      margin-block: 0;
+      padding-inline: var(--_padding);
+
+      &:last-child {
+        padding-block-end: var(--_padding);
+      }
+    }
+
+    /* Header */
+    & > :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(--ui-font-size-caption);
+        line-height: var(--ui-line-height-tight);
+      }
+
+      :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(--ui-font-size-body);
+      }
+    }
+
+    /* Content */
+    & > .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 */
+    &:where(.ui-accordion, .ui-card) > .ui-actions {
+      display: flex;
+      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);
+
+      /* 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);
+
+        @media (forced-colors: active) {
+          --_border-color: Highlight;
+        }
+      }
+    }
+
+    &: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);
+    }
+  }
+
+  :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;
+  }
+}