opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/chip.css

@@ -1,92 +1,215 @@
-@layer components.root {
-  :where(.ui-chip) {
-    --_bg-color: var(--surface-tonal);
-    --_border-color: var(--border-color);
-    --_color: var(--text-primary);
-
-    align-items: center;
-    background: var(--_bg-color) var(--ripple, none);
-    block-size: var(--size-7, 2rem);
-    border-radius: var(--radius-2, 0.5rem);
-    border: 1px solid var(--_border-color);
-    color: var(--_color);
-    display: inline-flex;
-    font-size: var(--font-size-0, 0.75rem);
-    gap: var(--size-1);
-    padding-inline: var(--size-2);
-    text-decoration: none;
-
-    /* Variants */
-    &.ui-tonal {
-      --_bg-color: var(--surface-tonal);
-      --_color: var(--text-primary);
-    }
-
-    &.ui-outlined {
-      --_bg-color: var(--surface-default);
-      --_color: var(--text-primary);
-    }
-
-    &:where(button, a):where(:not([disabled])) {
-      &:where(:not(:active)):hover {
-        --_bg-color: light-dark(
-          oklch(from var(--surface-tonal) calc(l * 0.98) c h),
-          oklch(from var(--surface-tonal) calc(l * 1.1) c h)
-        );
-      }
-    }
-
-    /* Icon */
-    &:has(svg:first-child) {
-      padding-inline: var(--size-1) var(--size-2);
-    }
-
-    &:has(svg:last-child) {
-      padding-inline: var(--size-2) var(--size-1);
-    }
-
-    &:has(svg) {
-      svg {
-        flex-shrink: 0;
-        inline-size: var(--size-3);
-      }
-    }
-
-    /* Sizes */
-    &.ui-small {
-      block-size: var(--size-5);
-    }
-
-    &.ui-multiline {
-      block-size: auto;
-    }
-
-    /* Ripple effect */
-    background-position: center;
-
-    &:where(:not([disabled])) {
-      &:where(:not(:active):hover) {
-        --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
-          center/15000%;
-
-        transition: background var(--button-ripple-duration);
-      }
-
-      &:where(:hover:active) {
-        background-size: var(--button-ripple-size);
-        transition: background 0s;
-      }
-    }
-
-    /* Disabled */
-    &:where([disabled]) {
-      opacity: 0.64;
-      --_color: color-mix(
-        in oklch,
-        var(--text-muted) 50%,
-        var(--surface-default)
-      );
-      cursor: not-allowed;
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-chip) {
+    --_bg-color: var(--ui-surface-tonal);
+    --_border-color: var(
+      --ui-control-border-color-filled,
+      var(--ui-border-color)
+    );
+    --_dot-bg-color: currentColor;
+    --_font-size: var(--ui-font-size-caption);
+    --_icon-padding-inline: var(--ui-space-1);
+    --_icon-size: var(--ui-icon-size-small);
+    --_padding-inline: var(--ui-space-2);
+    --_pressed-bg-color: var(--ui-selected, var(--ui-primary));
+    --_size: var(--ui-chip-size);
+    --_text-color: var(--ui-text-strong);
+
+    align-items: center;
+    background-color: var(--_bg-color);
+    block-size: var(--_size);
+    border: var(--ui-border-width) solid var(--_border-color);
+    border-radius: var(--ui-chip-radius, var(--ui-radius));
+    color: var(--_text-color);
+    display: inline-flex;
+    font-size: var(--_font-size);
+    gap: var(--ui-space-1);
+    max-inline-size: 100%;
+    padding-inline: var(--_padding-inline);
+    text-decoration: none;
+
+    &:not(.ui-multiline) > .ui-text {
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Variants */
+    &.ui-outlined {
+      --_bg-color: var(--ui-surface);
+      --_border-color: var(--ui-control-border-color, var(--ui-border-color));
+      --_text-color: var(--ui-text-strong);
+
+      box-shadow: var(--ui-shadow-control);
+    }
+
+    &:where(button, a):where(:not(:disabled, [aria-disabled="true"])) {
+      @media (hover: hover) {
+        &:hover {
+          --_bg-color: var(--ui-surface-tonal-hover);
+        }
+      }
+    }
+
+    &:is(.ui-critical, .ui-info, .ui-neutral, .ui-success, .ui-warning) {
+      --_dot-bg-color: var(--ui-palette-accent);
+
+      &:where(:not(.ui-outlined)) {
+        --_bg-color: var(--ui-palette-tint-subtle);
+        --_border-color: var(--ui-palette-border);
+        --_text-color: var(--ui-palette-strong);
+
+        &:where(button, a):where(:not(:disabled, [aria-disabled="true"])) {
+          @media (hover: hover) {
+            &:hover {
+              --_bg-color: light-dark(
+                oklch(from var(--_accent) 0.92 calc(c * 0.35) h),
+                oklch(from var(--_accent) 0.35 calc(c * 0.4) h)
+              );
+            }
+          }
+        }
+      }
+    }
+
+    &.ui-critical {
+      --_accent: var(--ui-critical);
+    }
+
+    &.ui-info {
+      --_accent: var(--ui-info);
+    }
+
+    &.ui-neutral {
+      --_accent: var(--ui-neutral);
+    }
+
+    &.ui-success {
+      --_accent: var(--ui-success);
+    }
+
+    &.ui-warning {
+      --_accent: var(--ui-warning);
+    }
+
+    &.ui-dot::before {
+      background-color: var(--_dot-bg-color);
+      block-size: var(--ui-space-2);
+      border-radius: var(--ui-radius-round);
+      content: "";
+      flex-shrink: 0;
+      inline-size: var(--ui-space-2);
+
+      @media (forced-colors: active) {
+        background-color: CanvasText;
+        forced-color-adjust: none;
+      }
+    }
+
+    &.ui-dot.ui-critical::before {
+      border-radius: 0;
+      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+      scale: 1.25;
+    }
+
+    &.ui-dot.ui-neutral::before {
+      background-color: transparent;
+      border: var(--ui-border-width-thick) solid var(--_dot-bg-color);
+
+      @media (forced-colors: active) {
+        border-color: CanvasText;
+      }
+    }
+
+    &.ui-dot.ui-warning::before {
+      border-radius: 0;
+      clip-path: polygon(50% 0, 100% 100%, 0 100%);
+      scale: 1.25;
+    }
+
+    /* Icon */
+    &:has(> svg:first-child) {
+      padding-inline-start: var(--_icon-padding-inline);
+    }
+
+    &:has(> svg:last-child) {
+      padding-inline-end: var(--_icon-padding-inline);
+    }
+
+    svg {
+      flex-shrink: 0;
+      inline-size: var(--_icon-size);
+    }
+
+    /* Sizes */
+    &.ui-x-small {
+      --_size: var(--ui-chip-size-x-small);
+    }
+
+    &.ui-small {
+      --_size: var(--ui-chip-size-small);
+    }
+
+    &.ui-large {
+      --_font-size: var(--ui-font-size-small);
+      --_icon-padding-inline: var(--ui-space-2);
+      --_icon-size: var(--ui-icon-size);
+      --_padding-inline: var(--ui-space-3);
+      --_size: var(--ui-chip-size-large);
+    }
+
+    &.ui-multiline {
+      block-size: auto;
+    }
+
+    /* Disabled */
+    &:is([disabled], [aria-disabled="true"]) {
+      --_text-color: var(--ui-text-disabled);
+
+      cursor: not-allowed;
+    }
+
+    &.ui-disabled:not(a, button) {
+      --_text-color: var(--ui-text-strong);
+
+      cursor: auto;
+      opacity: var(--ui-disabled-opacity);
+
+      @container style(--ui-contrast: more) {
+        --_text-color: var(--ui-text);
+
+        opacity: 1;
+      }
+    }
+
+    /* Pressed */
+    &:where(button)[aria-pressed="true"] {
+      --_bg-color: var(--_pressed-bg-color);
+      --_border-color: var(
+        --ui-control-border-color-filled,
+        var(--ui-control-border-color, var(--ui-border-color))
+      );
+      --_dot-bg-color: currentColor;
+      --_text-color: var(--ui-on-selected, var(--ui-on-primary));
+
+      &:where(:not(:disabled)) {
+        @media (hover: hover) {
+          &:hover {
+            --_bg-color: oklch(from var(--_pressed-bg-color) calc(l * 0.9) c h);
+          }
+        }
+      }
+
+      &:disabled {
+        opacity: var(--ui-disabled-opacity);
+      }
+
+      @media (forced-colors: active) {
+        background-color: SelectedItem;
+        border-color: SelectedItem;
+        color: SelectedItemText;
+        forced-color-adjust: none;
+      }
+    }
+  }
+}

package/css/components/choice.css

@@ -0,0 +1,291 @@
+@layer components.root {
+  :where(label.ui-checkbox, label.ui-radio, .ui-switch) {
+    --_motion: var(--ui-motion);
+    --_accent: var(
+      --ui-choice-accent,
+      var(
+        --ui-control-accent,
+        light-dark(
+          var(--ui-primary),
+          oklch(
+            from var(--ui-primary) min(l, var(--ui-choice-fill-max-lightness)) c
+              h
+          )
+        )
+      )
+    );
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease);
+    --_on-accent: var(
+      --ui-choice-on-accent,
+      var(
+        --ui-on-control-accent,
+        light-dark(var(--ui-on-primary), var(--ui-on-fill))
+      )
+    );
+
+    align-items: start;
+    color: var(--ui-text-strong);
+    cursor: pointer;
+    display: inline-grid;
+    gap: 0 var(--ui-space-2);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    inline-size: fit-content;
+    line-height: var(--ui-line-height-control);
+    -webkit-user-select: none;
+    user-select: none;
+
+    &:not(:has(.ui-label, .ui-text)) {
+      align-items: center;
+      min-block-size: var(--ui-space-5);
+      min-inline-size: var(--ui-space-5);
+      place-content: center;
+      vertical-align: middle;
+    }
+
+    /* Disabled */
+    &:has([disabled], input[aria-disabled="true"]) {
+      cursor: not-allowed;
+      opacity: var(--ui-disabled-opacity);
+      -webkit-user-select: none;
+      user-select: none;
+
+      input {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Required dot */
+    &:has(:required) {
+      .ui-label::after {
+        color: var(--ui-field-required-text-color);
+        content: "*";
+        margin-inline-start: 0.25ex;
+
+        @supports (content: "*" / "") {
+          content: "*" / "";
+        }
+      }
+    }
+
+    /* Label */
+    .ui-label {
+      color: var(--ui-field-label-text-color);
+      font-size: var(--ui-field-label-font-size);
+      grid-column: 2;
+      grid-row: 1;
+      margin-block-start: calc(
+        (var(--_size) - 1lh) / 2 + var(--ui-choice-label-offset)
+      );
+      padding-inline: 0 1ex;
+      position: relative;
+    }
+
+    /* End text */
+    :where(.ui-end-text) {
+      color: var(--ui-field-helper-text-color);
+      font-size: var(--ui-field-helper-font-size);
+      grid-column: 2;
+      grid-row: 2;
+      line-height: var(--ui-field-helper-line-height);
+      z-index: 1;
+    }
+
+    &:where(.ui-checkbox, .ui-radio) {
+      --_size: var(--ui-choice-size);
+
+      transform: translateZ(0);
+
+      &.ui-card input:is([type="checkbox"], [type="radio"])::before {
+        content: none;
+      }
+
+      /* Hover and active effect */
+      input:is([type="checkbox"], [type="radio"]) {
+        --_ripple-size: 175%;
+
+        &:where(:not(:disabled, [aria-disabled="true"])) {
+          @media (hover: hover) {
+            &:hover::before {
+              --_thumb-scale: 1;
+            }
+          }
+
+          &:active::before {
+            --_thumb-scale: 1.1;
+          }
+
+          &::before {
+            --_thumb-scale: 0.01;
+
+            background-color: var(--ui-choice-ripple-bg-color);
+            clip-path: circle(50%);
+            content: "";
+            inset: calc((100% - var(--_ripple-size)) / 2);
+            position: absolute;
+            transform: translateZ(-1px) scale(var(--_thumb-scale));
+            transform-origin: center center;
+
+            transition: transform var(--_duration) var(--_ease);
+            will-change: transform;
+          }
+        }
+      }
+    }
+
+    /* Validation */
+    &:has([aria-invalid="true"], :user-invalid) {
+      --_accent: light-dark(
+        var(--ui-invalid),
+        oklch(
+          from var(--ui-invalid) min(l, var(--ui-choice-fill-max-lightness)) c h
+        )
+      );
+      --_on-accent: var(--ui-on-fill);
+
+      :where(.ui-end-text) {
+        color: var(--ui-invalid-text);
+      }
+    }
+
+    /* Sizes */
+    &.ui-x-small {
+      --ui-choice-size: var(--ui-choice-size-x-small);
+      --ui-switch-thumb-size: var(--ui-switch-thumb-size-x-small);
+      --ui-switch-track-block-size: var(--ui-switch-track-block-size-x-small);
+      --ui-switch-track-inline-size: var(--ui-switch-track-inline-size-x-small);
+    }
+
+    &.ui-small {
+      --ui-choice-size: var(--ui-choice-size-small);
+      --ui-switch-thumb-size: var(--ui-switch-thumb-size-small);
+      --ui-switch-track-block-size: var(--ui-switch-track-block-size-small);
+      --ui-switch-track-inline-size: var(--ui-switch-track-inline-size-small);
+    }
+
+    &.ui-large {
+      --ui-choice-size: var(--ui-choice-size-large);
+      --ui-switch-thumb-size: var(--ui-switch-thumb-size-large);
+      --ui-switch-track-block-size: var(--ui-switch-track-block-size-large);
+      --ui-switch-track-inline-size: var(--ui-switch-track-inline-size-large);
+    }
+
+    /* Spread layout */
+    &.ui-spread {
+      align-items: start;
+      column-gap: var(--ui-space-4);
+      grid-auto-flow: unset;
+      grid-template-columns: 1fr auto;
+      inline-size: 100%;
+
+      .ui-label {
+        font-weight: var(--ui-field-label-font-weight);
+        grid-column: 1;
+        grid-row: 1;
+        inline-size: fit-content;
+      }
+
+      input {
+        grid-column: 2;
+        grid-row: 1;
+      }
+
+      :where(.ui-end-text) {
+        grid-column: 1;
+        grid-row: 2;
+      }
+    }
+
+    /* Stacked layout */
+    &.ui-vertical {
+      grid-auto-columns: unset;
+      justify-items: center;
+
+      .ui-label {
+        grid-column: 1/-1;
+        grid-row: 2;
+        margin-block-start: var(--ui-space-1);
+        padding-inline: 1ex;
+      }
+
+      .ui-end-text {
+        grid-column: 1/-1;
+        grid-row: 3;
+      }
+    }
+
+    /* Card */
+    &.ui-card {
+      --_card-padding: var(--ui-space-3);
+      --_checked-bg-color: var(
+        --ui-primary-tonal,
+        oklch(
+          from var(--ui-primary) l c h / var(--ui-state-active-alpha-accent)
+        )
+      );
+      --_hover-bg-color: var(--ui-surface-tonal-hover);
+
+      @container style(--ui-contrast: more) {
+        --_checked-bg-color: var(
+          --ui-primary-tonal,
+          oklch(
+            from var(--ui-primary) l c h / var(--ui-state-hover-alpha-accent)
+          )
+        );
+      }
+
+      inline-size: 100%;
+      overflow: visible;
+      padding: var(--_card-padding);
+      transition:
+        background-color var(--_duration) var(--_ease),
+        border-color var(--_duration) var(--_ease);
+
+      &:not(.ui-spread) {
+        column-gap: var(--ui-space-3);
+        grid-template-columns: auto 1fr;
+      }
+
+      &:is(.ui-small, .ui-x-small) {
+        --_card-padding: var(--ui-space-2);
+      }
+
+      &:not(.ui-elevated, .ui-tonal) {
+        --_border-color: var(--ui-border-color);
+        --_border-width: var(--ui-border-width);
+        --_shadow: var(--ui-shadow-surface);
+      }
+
+      @media (hover: hover) {
+        &:hover:not(:has(:checked, [disabled], input[aria-disabled="true"])) {
+          --_bg-color: var(--_hover-bg-color);
+        }
+      }
+
+      &:has(input:checked) {
+        --_bg-color: var(--_checked-bg-color);
+        --_border-color: var(--_accent);
+
+        @media (forced-colors: active) {
+          --_border-color: SelectedItem;
+        }
+      }
+
+      &:has([aria-invalid="true"], :user-invalid) {
+        --_border-color: var(--ui-invalid);
+      }
+
+      &:has(input: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);
+      }
+
+      input:focus-visible {
+        outline: none;
+      }
+    }
+  }
+}