opui-css 5.4.1 → 5.4.3

package/css/components/button.css

@@ -1,228 +1,212 @@
-@layer components.root {
-  :where(.ui-button) {
-    --_motion: var(--motion, 1);
-    --_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 calc(0.1s * var(--_motion)) ease,
-      color calc(0.1s * var(--_motion)) ease,
-      border-color calc(0.1s * var(--_motion)) ease,
-      box-shadow calc(0.1s * var(--_motion)) 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. */
-    &.ui-critical,
-    &.ui-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);
-    }
-
-    &.ui-critical {
-      --_color: var(--critical);
-    }
-
-    &.ui-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), &.ui-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. */
-    &.ui-x-small {
-      --_min-height: var(--button-size-x-small);
-      --_font-size: var(--font-size-0);
-      padding-block: 0;
-      padding-inline: 0.5ex;
-    }
-
-    &.ui-small {
-      --_min-height: var(--button-size-small);
-      --_font-size: var(--font-size-05);
-      padding-block: 0;
-      padding-inline: 0.75ex;
-    }
-
-    &.ui-large {
-      --_min-height: var(--button-size-large);
-      padding-inline: 4ex;
-    }
-
-    /* Variants */
-    &.ui-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);
-        }
-      }
-    }
-
-    &.ui-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);
-        }
-      }
-    }
-
-    &.ui-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);
-  }
-}
+@layer components.root {
+  :where(.ui-button) {
+    --_motion: var(--motion, 1);
+    --_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 calc(0.1s * var(--_motion)) ease,
+      color calc(0.1s * var(--_motion)) ease,
+      border-color calc(0.1s * var(--_motion)) ease,
+      box-shadow calc(0.1s * var(--_motion)) ease;
+    user-select: none;
+
+    &.ui-critical,
+    &.ui-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);
+    }
+
+    &.ui-critical {
+      --_color: var(--critical);
+    }
+
+    &.ui-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), &.ui-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 */
+    &.ui-x-small {
+      --_min-height: var(--button-size-x-small);
+      --_font-size: var(--font-size-0);
+      padding-block: 0;
+      padding-inline: 0.5ex;
+    }
+
+    &.ui-small {
+      --_min-height: var(--button-size-small);
+      --_font-size: var(--font-size-05);
+      padding-block: 0;
+      padding-inline: 0.75ex;
+    }
+
+    &.ui-large {
+      --_min-height: var(--button-size-large);
+      padding-inline: 4ex;
+    }
+
+    /* Variants */
+    &.ui-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);
+        }
+      }
+    }
+
+    &.ui-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);
+        }
+      }
+    }
+
+    &.ui-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

@@ -1,112 +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);
+      }
+    }
+  }
+}