opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/button.css

@@ -1,212 +1,422 @@
-@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);
-  }
-}
+@layer components.root {
+  :where(.ui-button) {
+    --_motion: var(--ui-motion);
+    --_accent: var(
+      --ui-button-accent,
+      var(--ui-control-accent, var(--ui-palette-strong))
+    );
+    --_accent-fill: var(--ui-button-accent-filled, var(--_accent));
+    --_accent-text: light-dark(
+      var(--_accent),
+      oklch(
+        from var(--_accent) max(l, var(--ui-text-min-lightness))
+          min(c, var(--ui-text-max-chroma)) h
+      )
+    );
+    --_accent-tonal: var(--ui-surface-tonal);
+    --_actions-shift: min(
+      var(--_padding-inline) + var(--_border-width),
+      var(--ui-space-3) -
+        max(
+          var(--ui-focus-ring-offset) + var(--ui-focus-ring-width),
+          var(--ui-space-1)
+        )
+    );
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-width: var(--ui-border-width);
+    --_default-active-bg-color: light-dark(
+      oklch(from var(--_accent) l 0.06 h / var(--ui-state-active-alpha-light)),
+      oklch(from var(--_accent) l 0.06 h / var(--ui-state-active-alpha-dark))
+    );
+    --_default-hover-bg-color: light-dark(
+      oklch(from var(--_accent) l 0.01 h / var(--ui-state-hover-alpha-light)),
+      oklch(from var(--_accent) l 0.01 h / var(--ui-state-hover-alpha-dark))
+    );
+    --_duration: calc(var(--ui-duration-fast) * var(--_motion));
+    --_ease: var(--ui-ease);
+    /* Lightens accents darker than L 0.3, darkens the rest */
+    --_filled-active-bg-color: light-dark(
+      oklch(
+        from var(--_accent-fill)
+          calc(l + 0.075 + 0.225 * clamp(-1, (0.3 - l) * 1000, 1)) c h
+      ),
+      oklch(from var(--_accent-fill) calc(l - 0.15) c h)
+    );
+    /* Lightens accents darker than L 0.3, darkens the rest */
+    --_filled-hover-bg-color: light-dark(
+      oklch(
+        from var(--_accent-fill)
+          calc(l + 0.05 + 0.15 * clamp(-1, (0.3 - l) * 1000, 1)) c h
+      ),
+      oklch(from var(--_accent-fill) calc(l - 0.1) c h)
+    );
+    --_font-size: var(--ui-font-size-control);
+    --_icon-size: 0.7lh;
+    --_on-accent: var(
+      --ui-button-on-accent,
+      var(--ui-on-control-accent, var(--ui-palette-on-strong))
+    );
+    --_on-accent-fill: var(--ui-button-on-accent-filled, var(--_on-accent));
+    --_on-accent-tonal: var(--_accent);
+    --_outlined-active-bg-color: var(--_filled-active-bg-color);
+    --_outlined-active-border-color: var(--_outlined-active-bg-color);
+    --_outlined-active-text-color: var(--_on-accent-fill);
+    --_outlined-hover-bg-color: var(--_accent-fill);
+    --_outlined-hover-border-color: var(--_accent-fill);
+    --_outlined-hover-text-color: var(--_on-accent-fill);
+    --_padding-inline: var(--ui-button-padding-inline, 1.5ex);
+    --_radius: var(--ui-button-radius, var(--ui-radius));
+    --_shadow: none;
+    --_size: var(--ui-button-size);
+    --_text-color: var(--_accent-text);
+    --_tonal-active-bg-color: var(--_outlined-active-bg-color);
+    --_tonal-active-text-color: var(--_on-accent-fill);
+    --_tonal-hover-bg-color: var(--_accent-fill);
+    --_tonal-hover-text-color: var(--_on-accent-fill);
+
+    @container style(--ui-button-hover: layer) {
+      --_filled-active-bg-color: color-mix(
+        in oklch,
+        var(--_accent-fill),
+        var(--_on-accent-fill) var(--ui-state-active-alpha-accent)
+      );
+      --_filled-hover-bg-color: color-mix(
+        in oklch,
+        var(--_accent-fill),
+        var(--_on-accent-fill) var(--ui-state-hover-alpha-accent)
+      );
+      --_outlined-active-bg-color: var(--_default-active-bg-color);
+      --_outlined-active-border-color: var(--_accent);
+      --_outlined-active-text-color: var(--_accent-text);
+      --_outlined-hover-bg-color: var(--_default-hover-bg-color);
+      --_outlined-hover-border-color: var(--_accent);
+      --_outlined-hover-text-color: var(--_accent-text);
+      --_tonal-active-bg-color: color-mix(
+        in oklch,
+        var(--_accent-tonal),
+        var(--_on-accent-tonal) var(--ui-state-active-alpha-accent)
+      );
+      --_tonal-active-text-color: var(--_on-accent-tonal);
+      --_tonal-hover-bg-color: color-mix(
+        in oklch,
+        var(--_accent-tonal),
+        var(--_on-accent-tonal) var(--ui-state-hover-alpha-accent)
+      );
+      --_tonal-hover-text-color: var(--_on-accent-tonal);
+    }
+
+    -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(--_radius);
+    box-shadow: var(--_shadow);
+    color: var(--_text-color);
+    display: inline-flex;
+    font-size: var(--_font-size);
+    font-weight: var(--ui-button-font-weight, var(--ui-font-weight-bold));
+    gap: var(--ui-space-2);
+    justify-content: center;
+    min-block-size: var(--_size);
+    padding-block: min(
+      0.5ex,
+      max(0px, (var(--_size) - 1lh - var(--_border-width) * 2) / 2)
+    );
+    padding-inline: var(--_padding-inline);
+    text-align: center;
+    text-decoration: none;
+    transition:
+      background-color var(--_duration) var(--_ease),
+      border-color var(--_duration) var(--_ease),
+      box-shadow var(--_duration) var(--_ease),
+      color var(--_duration) var(--_ease),
+      translate var(--_duration) var(--_ease);
+    -webkit-user-select: none;
+    user-select: none;
+
+    &.ui-critical,
+    &.ui-primary,
+    /* Color inherited from Button Group. */
+    :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) > & {
+      --_accent-tonal: var(--ui-palette-tint);
+      --_default-active-bg-color: oklch(
+        from var(--_accent) l c h / var(--ui-state-active-alpha-accent)
+      );
+      --_default-hover-bg-color: oklch(
+        from var(--_accent) l c h / var(--ui-state-hover-alpha-accent)
+      );
+      --_on-accent-tonal: var(--ui-palette-on-tint);
+      --_outlined-active-bg-color: oklch(
+        from var(--_accent-fill) calc(l - 0.1) c h
+      );
+
+      @container style(--ui-button-hover: layer) {
+        --_outlined-active-bg-color: var(--_default-active-bg-color);
+      }
+    }
+
+    &.ui-critical,
+    :where(.ui-button-group.ui-critical) > & {
+      --_accent: var(--ui-critical);
+      --_accent-fill: oklch(
+        from var(--ui-critical) min(l, var(--ui-accent-fill-max-lightness)) c h
+      );
+      --_accent-text: var(--ui-critical-text);
+      --_on-accent: var(--ui-on-fill);
+      --_on-accent-fill: var(--_on-accent);
+    }
+
+    &.ui-primary,
+    :where(.ui-button-group.ui-primary) > & {
+      --_accent: var(--ui-primary);
+      --_accent-fill: var(--_accent);
+      --_accent-text: var(--ui-primary-text);
+      --_accent-tonal: var(--ui-primary-tonal, var(--ui-palette-tint));
+      --_on-accent: var(--ui-on-primary);
+      --_on-accent-fill: var(--_on-accent);
+      --_on-accent-tonal: var(--ui-on-primary-tonal, var(--ui-palette-on-tint));
+    }
+
+    /* Hover & Active */
+    &:where(:not(:disabled, [aria-disabled="true"])) {
+      @media (hover: hover) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--_default-hover-bg-color);
+        }
+      }
+
+      &:where(:active),
+      &[aria-current="page"] {
+        --_bg-color: var(--_default-active-bg-color);
+      }
+    }
+
+    /* Icons / Keyboard */
+    &:where(:has(> svg)) {
+      gap: 1ex;
+
+      & > svg {
+        block-size: auto;
+        color: currentColor;
+        flex-shrink: 0;
+        inline-size: auto;
+        max-block-size: var(--_icon-size);
+      }
+    }
+
+    &:where(:has(> svg:first-child + *)) {
+      padding-inline-start: calc(var(--_padding-inline) * 0.75);
+    }
+
+    &:where(:has(> * + svg:last-child)) {
+      padding-inline-end: calc(var(--_padding-inline) * 0.75);
+    }
+
+    /* Keyboard input */
+    kbd {
+      background-color: color-mix(in oklch, currentColor 12%, transparent);
+      border: 0;
+      border-radius: var(--ui-radius-small);
+      color: inherit;
+      font-family: var(--ui-font-code);
+      font-size: 0.8em;
+      font-weight: var(--ui-font-weight-normal);
+      line-height: var(--ui-line-height-tight);
+      padding-block: 0.1ex;
+      padding-inline: 0.3ex;
+    }
+
+    /* Sizes */
+    &.ui-x-small,
+    :where(.ui-button-group.ui-x-small) > & {
+      --_font-size: var(--ui-font-size-caption);
+      --_padding-inline: var(--ui-button-padding-inline-x-small, 1ex);
+      --_size: var(--ui-button-size-x-small);
+      padding-block: 0;
+    }
+
+    &.ui-small,
+    :where(.ui-button-group.ui-small) > & {
+      --_font-size: var(--ui-font-size-small);
+      --_padding-inline: var(--ui-button-padding-inline-small, 1.25ex);
+      --_size: var(--ui-button-size-small);
+      padding-block: 0;
+    }
+
+    &.ui-large,
+    :where(.ui-button-group.ui-large) > & {
+      --_padding-inline: var(--ui-button-padding-inline-large, 2.5ex);
+      --_size: var(--ui-button-size-large);
+    }
+
+    &:where(:has(> svg:only-child)) {
+      --_icon-size: calc(var(--_size) * 0.6);
+      min-inline-size: var(--_size);
+      padding-inline: 0;
+    }
+
+    /* Card and Accordion actions, Dialog footer */
+    :where(
+        :is(.ui-accordion, .ui-card):not(
+            .ui-accordion.ui-transparent,
+            .ui-card.ui-transparent > .ui-accordion
+          )
+          > .ui-actions.ui-align-start,
+        .ui-dialog > .ui-footer.ui-align-start,
+        .ui-dialog > .ui-footer.ui-align-start > .ui-actions:first-child
+      )
+      > &:where(:first-child:not(.ui-filled, .ui-outlined, .ui-tonal)) {
+      margin-inline-start: calc(-1 * var(--_actions-shift));
+    }
+
+    :where(
+        :is(.ui-accordion, .ui-card):not(
+            .ui-accordion.ui-transparent,
+            .ui-card.ui-transparent > .ui-accordion
+          )
+          > .ui-actions:not(.ui-align-start),
+        .ui-dialog > .ui-footer:not(.ui-align-start),
+        .ui-dialog > .ui-footer > .ui-actions:last-child
+      )
+      > &:where(:last-child:not(.ui-filled, .ui-outlined, .ui-tonal)) {
+      margin-inline-end: calc(-1 * var(--_actions-shift));
+    }
+
+    /* Variants */
+    &.ui-outlined,
+    :where(.ui-button-group.ui-outlined) > & {
+      --_bg-color: transparent;
+      --_border-color: var(--ui-control-border-color, var(--_accent));
+      --_text-color: var(--_accent-text);
+
+      @container style(--ui-contrast: more) {
+        --_border-color: var(--ui-control-border-color, var(--_accent-text));
+      }
+
+      &:where(:not(:disabled, [aria-disabled="true"])) {
+        @media (hover: hover) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_outlined-hover-bg-color);
+            --_border-color: var(
+              --ui-control-border-color,
+              var(--_outlined-hover-border-color)
+            );
+            --_text-color: var(--_outlined-hover-text-color);
+          }
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_outlined-active-bg-color);
+          --_border-color: var(
+            --ui-control-border-color,
+            var(--_outlined-active-border-color)
+          );
+          --_text-color: var(--_outlined-active-text-color);
+        }
+      }
+    }
+
+    &:is(.ui-filled, .ui-outlined, .ui-tonal) {
+      --_shadow: var(--ui-shadow-control);
+
+      &:where(:not(:disabled, [aria-disabled="true"])) {
+        @media (hover: hover) {
+          &:where(:not(:active):hover) {
+            --_shadow: var(--ui-button-hover-shadow, var(--ui-shadow-control));
+            translate: var(--ui-button-hover-translate, none);
+          }
+        }
+      }
+    }
+
+    &:is(.ui-filled, .ui-tonal) {
+      --_border-color: var(--ui-control-border-color-filled, transparent);
+    }
+
+    &.ui-tonal,
+    :where(.ui-button-group.ui-tonal) > & {
+      --_bg-color: var(--_accent-tonal);
+      --_text-color: var(--_on-accent-tonal);
+
+      &:where(:not(:disabled, [aria-disabled="true"])) {
+        @media (hover: hover) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_tonal-hover-bg-color);
+            --_text-color: var(--_tonal-hover-text-color);
+          }
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_tonal-active-bg-color);
+          --_text-color: var(--_tonal-active-text-color);
+        }
+      }
+    }
+
+    &.ui-filled,
+    :where(.ui-button-group.ui-filled) > & {
+      --_bg-color: var(--_accent-fill);
+      --_text-color: var(--_on-accent-fill);
+
+      &:where(:not(:disabled, [aria-disabled="true"])) {
+        @media (hover: hover) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_filled-hover-bg-color);
+          }
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_filled-active-bg-color);
+        }
+      }
+    }
+
+    /* Disabled */
+    &:is([disabled], [aria-disabled="true"]) {
+      cursor: not-allowed;
+
+      &:is(
+        .ui-filled,
+        .ui-tonal,
+        :where(.ui-button-group.ui-filled, .ui-button-group.ui-tonal) > *
+      ) {
+        opacity: var(--ui-disabled-opacity);
+      }
+
+      &:not(
+        .ui-filled,
+        .ui-tonal,
+        :where(.ui-button-group.ui-filled, .ui-button-group.ui-tonal) > *
+      ) {
+        --_text-color: var(--ui-text-disabled);
+      }
+
+      &:is(.ui-outlined, :where(.ui-button-group.ui-outlined) > *) {
+        --_border-color: var(--ui-text-disabled);
+      }
+    }
+
+    &.ui-round {
+      --_radius: var(--ui-radius-round);
+    }
+  }
+
+  /* File input */
+  :where(input[type="file"]) {
+    align-self: flex-start;
+    border: var(--ui-field-border-width) solid var(--ui-field-border-color);
+    border-radius: var(--ui-radius-small);
+    box-shadow: var(--ui-shadow-field, var(--ui-shadow-control));
+    color: var(--ui-text);
+    cursor: initial;
+    max-inline-size: 100%;
+    padding: 0;
+  }
+
+  :where(input[type="file"])::file-selector-button {
+    cursor: pointer;
+    margin-inline-end: var(--ui-space-3);
+  }
+}