opui-css 5.0.0 → 5.1.0

package/css/components/form.css

@@ -1,146 +1,147 @@
-@layer components.extended {
-
-  /* Form */
-  :where(.ui-form) {
-    display: grid;
-    gap: var(--size-8);
-
-    hr {
-      margin-block: 0;
-    }
-  }
-
-  /* Fieldset */
-  :where(.ui-fieldset) {
-    all: unset;
-    border: 0;
-    border-radius: 0;
-    display: grid;
-    gap: var(--size-1);
-    margin: 0;
-    min-inline-size: 0;
-    padding: 0;
-
-    /* Legend */
-    :where(legend, .ui-legend) {
-      all: unset;
-      color: var(--text-primary);
-      font-weight: 600;
-      margin-block-end: var(--size-3);
-      padding: 0;
-
-      &:has(+ :where(.ui-field-description)) {
-        margin-block-end: 0;
-      }
-    }
-
-    /* Field description / supporting text */
-    :where(.ui-field-description) {
-      color: var(--text-muted);
-      font-size: var(--font-size-05);
-      line-height: var(--font-lineheight-3);
-
-      &:has(+ *) {
-        margin-block-end: var(--size-3);
-      }
-    }
-
-    /* End text */
-    :where(.ui-end-text) {
-      color: var(--text-muted);
-      font-size: var(--font-size-0);
-      line-height: var(--font-lineheight-3);
-    }
-
-    &:has(.ui-text-field.ui-row) {
-      row-gap: var(--size-7);
-    }
-
-    /* Disabled */
-    &[disabled] {
-      opacity: 0.64;
-      user-select: none;
-
-      input,
-      label,
-      .ui-label {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Error / validation */
-    &[data-invalid] {
-      :where(.ui-end-text) {
-        color: var(--primary);
-      }
-
-      :where(.ui-checkbox, .ui-radio, .ui-switch) {
-        --palette-source: oklch(0.58 0.21 var(--hue-red));
-
-        :where(.ui-end-text) {
-          color: var(--primary);
-        }
-      }
-
-      :where(.ui-switch) {
-        input {
-          border-radius: var(--radius-round);
-          outline: 2px solid var(--primary);
-        }
-      }
-    }
-
-    /* Required */
-    &:has(:invalid) {
-      :where(legend, .ui-legend) {
-        padding-inline-end: 1ex;
-        position: relative;
-
-        &::after {
-          color: var(--red);
-          content: "*";
-          inset: 0 -0.25ex auto auto;
-          position: absolute;
-        }
-      }
-    }
-  }
-
-  /* Field group */
-  :where(.ui-field-group) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-4);
-
-    /* If it only has checkboxes, radios, or switches */
-    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(:has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
-      gap: var(--size-2);
-    }
-
-    /* If it only has buttons */
-    &:has(.ui-button):not(:has(*:not(.ui-button))) {
-      align-items: center;
-      flex-direction: row;
-      gap: var(--size-2);
-
-      /* If it's not preceeded by an hr */
-      &:not(hr + &) {
-        margin-block-start: var(--size-4);
-      }
-    }
-
-    &+& {
-      margin-block-start: var(--size-5);
-    }
-
-    /* Directions */
-    &.ui-row {
-      flex-direction: row;
-      flex-wrap: wrap;
-
-      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
-        gap: var(--size-4);
-      }
-    }
-  }
-}
+@layer components.extended {
+  /* Form */
+  :where(.ui-form) {
+    display: grid;
+    gap: var(--size-8);
+
+    hr {
+      margin-block: 0;
+    }
+  }
+
+  /* Fieldset */
+  :where(.ui-fieldset) {
+    all: unset;
+    border: 0;
+    border-radius: 0;
+    display: grid;
+    gap: var(--size-1);
+    margin: 0;
+    min-inline-size: 0;
+    padding: 0;
+
+    /* Legend */
+    :where(legend, .ui-legend) {
+      all: unset;
+      color: var(--text-primary);
+      font-weight: 600;
+      margin-block-end: var(--size-3);
+      padding: 0;
+
+      &:has(+ :where(.ui-field-description)) {
+        margin-block-end: 0;
+      }
+    }
+
+    /* Field description / supporting text */
+    :where(.ui-field-description) {
+      color: var(--text-muted);
+      font-size: var(--font-size-05);
+      line-height: var(--font-lineheight-3);
+
+      &:has(+ *) {
+        margin-block-end: var(--size-3);
+      }
+    }
+
+    /* End text */
+    :where(.ui-end-text) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      line-height: var(--font-lineheight-3);
+    }
+
+    &:has(.ui-text-field.ui-row) {
+      row-gap: var(--size-7);
+    }
+
+    /* Disabled */
+    &[disabled] {
+      opacity: 0.64;
+      user-select: none;
+
+      input,
+      label,
+      .ui-label {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Error / validation */
+    &[data-invalid] {
+      :where(.ui-end-text) {
+        color: var(--critical);
+      }
+
+      :where(.ui-checkbox, .ui-radio, .ui-switch) {
+        --primary: var(--critical);
+
+        :where(.ui-end-text) {
+          color: var(--critical);
+        }
+      }
+
+      :where(.ui-switch) {
+        input {
+          border-radius: var(--radius-round);
+          outline: 2px solid var(--critical);
+        }
+      }
+    }
+
+    /* Required */
+    &:has(:invalid) {
+      :where(legend, .ui-legend) {
+        padding-inline-end: 1ex;
+        position: relative;
+
+        &::after {
+          color: var(--red);
+          content: "*";
+          inset: 0 -0.25ex auto auto;
+          position: absolute;
+        }
+      }
+    }
+  }
+
+  /* Field group */
+  :where(.ui-field-group) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-4);
+
+    /* If it only has checkboxes, radios, or switches */
+    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(
+        :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))
+      ) {
+      gap: var(--size-2);
+    }
+
+    /* If it only has buttons */
+    &:has(.ui-button):not(:has(*:not(.ui-button))) {
+      align-items: center;
+      flex-direction: row;
+      gap: var(--size-2);
+
+      /* If it's not preceeded by an hr */
+      &:not(hr + &) {
+        margin-block-start: var(--size-4);
+      }
+    }
+
+    & + & {
+      margin-block-start: var(--size-5);
+    }
+
+    /* Directions */
+    &.ui-row {
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
+        gap: var(--size-4);
+      }
+    }
+  }
+}

package/css/components/icon-button.css

@@ -1,139 +1,158 @@
-@layer components.root {
-  :where(.ui-icon-button) {
-    --_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);
-    --_text-color: inherit;
-
-    align-items: center;
-    aspect-ratio: 1;
-    background-color: var(--_bg-color);
-    block-size: var(--size-6);
-    border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--radius-round);
-    color: var(--_text-color);
-    display: inline-flex;
-    inline-size: var(--size-6);
-    justify-content: center;
-    padding: 0;
-    transform-style: preserve-3d;
-    transition: background-color .1s ease, color .1s ease,
-      border-color .1s ease, box-shadow .1s ease;
-
-    &:where([disabled]) {
-      --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
-      cursor: not-allowed;
-      opacity: 0.64;
-    }
-
-    svg {
-      block-size: auto;
-      inline-size: auto;
-      max-block-size: var(--size-5);
-      max-inline-size: var(--size-5);
-      pointer-events: none;
-    }
-
-    /* Ripple effect, utils.css */
-    &::before {
-      --highlight-size: 130%;
-      background-color: transparent;
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: transform 0.2s ease, background-color .1s ease;
-      }
-    }
-
-    /* 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);
-    }
-
-    /* Element states */
-    &:where(:not([disabled])) {
-      &:where(:not(:active):hover) {
-        &::before {
-          background-color: var(--_interaction-hover-color, var(--_default-hover-bg-color));
-        }
-      }
-
-      &:where(:hover:active),
-      &[aria-current="page"] {
-        &::before {
-          background-color: var(--_interaction-active-color, var(--_default-active-bg-color));
-        }
-      }
-    }
-
-    /* Size */
-    &.ui-small {
-      block-size: var(--size-4);
-      inline-size: var(--size-4);
-
-      svg {
-        max-block-size: var(--size-4);
-        max-inline-size: var(--size-4);
-      }
-    }
-
-    /* Variants */
-    &.ui-outlined {
-      --_bg-color: transparent;
-      --_border-color: var(--_accent);
-      --_text-color: var(--_accent);
-    }
-
-    &.ui-tonal {
-      --_bg-color: var(--_accent-tonal);
-      --_text-color: var(--_accent-tonal-contrast);
-    }
-
-    &.ui-filled {
-      --_bg-color: var(--_accent);
-      --_interaction-active-color: var(--_filled-active-bg-color);
-      --_interaction-hover-color: var(--_filled-hover-bg-color);
-      --_text-color: var(--_accent-contrast);
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-icon-button) {
+    --_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);
+    --_text-color: inherit;
+
+    align-items: center;
+    aspect-ratio: 1;
+    background-color: var(--_bg-color);
+    block-size: var(--size-6);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--radius-round);
+    color: var(--_text-color);
+    display: inline-flex;
+    inline-size: var(--size-6);
+    justify-content: center;
+    padding: 0;
+    transform-style: preserve-3d;
+    transition:
+      background-color 0.1s ease,
+      color 0.1s ease,
+      border-color 0.1s ease,
+      box-shadow 0.1s ease;
+
+    &:where([disabled]) {
+      --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
+      cursor: not-allowed;
+      opacity: 0.64;
+    }
+
+    svg {
+      block-size: auto;
+      inline-size: auto;
+      max-block-size: var(--size-5);
+      max-inline-size: var(--size-5);
+      pointer-events: none;
+    }
+
+    /* Ripple effect, utils.css */
+    &::before {
+      --highlight-size: 130%;
+      background-color: transparent;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition:
+          transform 0.2s ease,
+          background-color 0.1s ease;
+      }
+    }
+
+    /* 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);
+    }
+
+    /* Element states */
+    &:where(:not([disabled])) {
+      &:where(:not(:active):hover) {
+        &::before {
+          background-color: var(
+            --_interaction-hover-color,
+            var(--_default-hover-bg-color)
+          );
+        }
+      }
+
+      &:where(:hover:active),
+      &[aria-current="page"] {
+        &::before {
+          background-color: var(
+            --_interaction-active-color,
+            var(--_default-active-bg-color)
+          );
+        }
+      }
+    }
+
+    /* Size */
+    &.ui-small {
+      block-size: var(--size-4);
+      inline-size: var(--size-4);
+
+      svg {
+        max-block-size: var(--size-4);
+        max-inline-size: var(--size-4);
+      }
+    }
+
+    /* Variants */
+    &.ui-outlined {
+      --_bg-color: transparent;
+      --_border-color: var(--_accent);
+      --_text-color: var(--_accent);
+    }
+
+    &.ui-tonal {
+      --_bg-color: var(--_accent-tonal);
+      --_text-color: var(--_accent-tonal-contrast);
+    }
+
+    &.ui-filled {
+      --_bg-color: var(--_accent);
+      --_interaction-active-color: var(--_filled-active-bg-color);
+      --_interaction-hover-color: var(--_filled-hover-bg-color);
+      --_text-color: var(--_accent-contrast);
+    }
+  }
+}

package/css/components/link.css

@@ -1,21 +1,21 @@
-@layer components.root {
-  :where(.ui-link) {
-    color: var(--primary);
-    cursor: pointer;
-    font-weight: 700;
-    text-decoration: underline;
-    text-decoration-color: var(--primary);
-    text-underline-offset: 2px;
-
-    &[href] {
-      &:hover,
-      &:focus-visible {
-        color: var(--primary-light);
-      }
-    }
-
-    @supports (-moz-appearance: none) {
-      text-underline-offset: 2px;
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-link) {
+    color: var(--primary);
+    cursor: pointer;
+    font-weight: 700;
+    text-decoration: underline;
+    text-decoration-color: var(--primary);
+    text-underline-offset: 2px;
+
+    &[href] {
+      &:hover,
+      &:focus-visible {
+        color: var(--primary-light);
+      }
+    }
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+}