opui-css 2.3.0 → 3.0.0

package/src/themes/theme-two/components/toggle-button-group.css

@@ -1,135 +1,135 @@
-@layer components.root {
-  :where([role="group"].toggle-button-group) {
-    --_border-radius: var(--button-border-radius);
-    --_button-padding-inline: clamp(var(--size-2), 3cqi, var(--size-4));
-    --_max-width: auto;
-    --_icon-size: var(--size-4);
-
-    background-color: var(--surface-default);
-    border: 1px solid var(--border-color);
-    border-radius: var(--_border-radius);
-    display: flex;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    max-inline-size: var(--_max-width);
-    min-inline-size: max-content;
-    overflow: clip;
-
-    /* Size */
-    &.small {
-      button {
-        min-block-size: 2.1875rem; /* 35px */
-      }
-    }
-
-    &.x-small {
-      button {
-        min-block-size: var(--size-6); /* 30px */
-      }
-    }
-
-    &.fullwidth {
-      inline-size: 100%;
-    }
-
-    /* Button */
-    button {
-      --_bg-color: transparent;
-
-      align-items: center;
-      background: var(--_bg-color) var(--ripple, none);
-      border-radius: 0;
-      border-inline: 1px solid var(--border-color);
-      border-inline-start-width: 0;
-      color: var(--text-color-1);
-      display: inline-flex;
-      flex: auto;
-      gap: 1ex;
-      justify-content: center;
-      min-block-size: 2.5rem; /* 40px */
-      min-inline-size: 5ex;
-      outline-offset: calc(-1 * var(--size-2));
-      padding: 0 var(--_button-padding-inline);
-      position: relative;
-      user-select: none;
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color 0.2s var(--ease-out-3),
-          box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
-          color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
-      }
-
-      /* Element states */
-      &:hover {
-        --_bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
-      }
-
-      &:focus-visible {
-        outline-offset: -6px;
-      }
-
-      /* Disabled */
-      &[disabled] {
-        border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
-        cursor: not-allowed;
-        color: color-mix(in oklch, var(--text-color-1) 30%, transparent);
-      }
-
-      &[disabled] + &:not([disabled]):not(:last-of-type) {
-        border-inline-end-width: 1px;
-      }
-
-      /* Assign border radius for outline */
-      &:first-of-type {
-        border-bottom-left-radius: var(--_border-radius);
-        border-top-left-radius: var(--_border-radius);
-      }
-      &:last-of-type {
-        border-bottom-right-radius: var(--_border-radius);
-        border-top-right-radius: var(--_border-radius);
-      }
-
-      &:last-of-type {
-        border-inline-end-width: 0;
-      }
-
-      /* 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;
-        }
-      }
-
-      /* Icons */
-      svg {
-        inline-size: var(--_icon-size);
-        inset-inline-start: calc(var(--_button-padding-inline));
-
-        & + svg {
-          max-block-size: var(--size-5);
-          max-inline-size: var(--size-7);
-        }
-      }
-
-      /* Selected */
-      &.selected {
-        --_bg-color: oklch(from var(--primary) l c h / 25%);
-
-        /* Checkmark */
-        svg:first-of-type {
-          margin-block-end: -3px;
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :where([role="group"].toggle-button-group) {
+    --_border-radius: var(--button-border-radius);
+    --_button-padding-inline: clamp(var(--size-2), 3cqi, var(--size-4));
+    --_max-width: auto;
+    --_icon-size: var(--size-4);
+
+    background-color: var(--surface-default);
+    border: 1px solid var(--border-color);
+    border-radius: var(--_border-radius);
+    display: flex;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    max-inline-size: var(--_max-width);
+    min-inline-size: max-content;
+    overflow: clip;
+
+    /* Size */
+    &.small {
+      button {
+        min-block-size: 2.1875rem; /* 35px */
+      }
+    }
+
+    &.x-small {
+      button {
+        min-block-size: var(--size-6); /* 30px */
+      }
+    }
+
+    &.fullwidth {
+      inline-size: 100%;
+    }
+
+    /* Button */
+    button {
+      --_bg-color: transparent;
+
+      align-items: center;
+      background: var(--_bg-color) var(--ripple, none);
+      border-radius: 0;
+      border-inline: 1px solid var(--border-color);
+      border-inline-start-width: 0;
+      color: var(--text-color-1);
+      display: inline-flex;
+      flex: auto;
+      gap: 1ex;
+      justify-content: center;
+      min-block-size: 2.5rem; /* 40px */
+      min-inline-size: 5ex;
+      outline-offset: calc(-1 * var(--size-2));
+      padding: 0 var(--_button-padding-inline);
+      position: relative;
+      user-select: none;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color 0.2s var(--ease-out-3),
+          box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
+          color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
+      }
+
+      /* Element states */
+      &:hover {
+        --_bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
+      }
+
+      &:focus-visible {
+        outline-offset: -6px;
+      }
+
+      /* Disabled */
+      &[disabled] {
+        border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
+        cursor: not-allowed;
+        color: color-mix(in oklch, var(--text-color-1) 30%, transparent);
+      }
+
+      &[disabled] + &:not([disabled]):not(:last-of-type) {
+        border-inline-end-width: 1px;
+      }
+
+      /* Assign border radius for outline */
+      &:first-of-type {
+        border-bottom-left-radius: var(--_border-radius);
+        border-top-left-radius: var(--_border-radius);
+      }
+      &:last-of-type {
+        border-bottom-right-radius: var(--_border-radius);
+        border-top-right-radius: var(--_border-radius);
+      }
+
+      &:last-of-type {
+        border-inline-end-width: 0;
+      }
+
+      /* 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;
+        }
+      }
+
+      /* Icons */
+      svg {
+        inline-size: var(--_icon-size);
+        inset-inline-start: calc(var(--_button-padding-inline));
+
+        & + svg {
+          max-block-size: var(--size-5);
+          max-inline-size: var(--size-7);
+        }
+      }
+
+      /* Selected */
+      &.selected {
+        --_bg-color: oklch(from var(--primary) l c h / 25%);
+
+        /* Checkmark */
+        svg:first-of-type {
+          margin-block-end: -3px;
+        }
+      }
+    }
+  }
+}

package/src/themes/theme-two/components/tooltip.css

@@ -1,94 +1,94 @@
-@layer components.root {
-  :where(.tooltip) {
-    background-color: var(--surface-tonal);
-    border-radius: var(--radius-2);
-    font-size: var(--font-size-xs);
-    margin: var(--size-1);
-    opacity: 1;
-    padding: 0 var(--size-2);
-    position: absolute;
-    position-area: block-start;
-    position-try-fallbacks: flip-block;
-    /* position-try-order: most-height; */
-    view-transition-name: vt-tooltip;
-    z-index: 1;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:where([class^="top"], [class^="bottom"]) {
-      background-color: red;
-      position-try-order: most-height;
-    }
-
-    &:where([class^="left"], [class^="right"]) {
-      background-color: red;
-      position-try-order: most-width;
-    }
-
-    &.top {
-      position-area: block-start;
-    }
-    &.top-start {
-      position-area: block-start span-inline-start;
-    }
-    &.top-end {
-      position-area: block-start span-inline-end;
-    }
-    &.right {
-      position-area: inline-end;
-    }
-    &.right-start {
-      position-area: inline-end span-block-start;
-    }
-    &.right-end {
-      position-area: inline-end span-block-end;
-    }
-    &.bottom {
-      position-area: block-end;
-    }
-    &.bottom-start {
-      position-area: block-end span-inline-start;
-    }
-    &.bottom-end {
-      position-area: block-end span-inline-end;
-    }
-    &.left {
-      position-area: inline-start;
-    }
-    &.left-start {
-      position-area: inline-start span-block-start;
-    }
-    &.left-end {
-      position-area: inline-start span-block-end;
-    }
-
-    /* Swap it around for rtl */
-    :dir(rtl) {
-      &.right {
-        position-area: inline-start;
-      }
-      &.right-start {
-        position-area: inline-start span-block-start;
-      }
-      &.right-end {
-        position-area: inline-start span-block-end;
-      }
-      &.left {
-        position-area: inline-end;
-      }
-      &.left-start {
-        position-area: inline-end span-block-start;
-      }
-      &.left-end {
-        position-area: inline-end span-block-end;
-      }
-    }
-  }
-
-  ::view-transition-old(vt-tooltip),
-  ::view-transition-new(vt-tooltip) {
-    height: 100%;
-  }
-}
+@layer components.root {
+  :where(.tooltip) {
+    background-color: var(--surface-tonal);
+    border-radius: var(--radius-2);
+    font-size: var(--font-size-xs);
+    margin: var(--size-1);
+    opacity: 1;
+    padding: 0 var(--size-2);
+    position: absolute;
+    position-area: block-start;
+    position-try-fallbacks: flip-block;
+    /* position-try-order: most-height; */
+    view-transition-name: vt-tooltip;
+    z-index: 1;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:where([class^="top"], [class^="bottom"]) {
+      background-color: red;
+      position-try-order: most-height;
+    }
+
+    &:where([class^="left"], [class^="right"]) {
+      background-color: red;
+      position-try-order: most-width;
+    }
+
+    &.top {
+      position-area: block-start;
+    }
+    &.top-start {
+      position-area: block-start span-inline-start;
+    }
+    &.top-end {
+      position-area: block-start span-inline-end;
+    }
+    &.right {
+      position-area: inline-end;
+    }
+    &.right-start {
+      position-area: inline-end span-block-start;
+    }
+    &.right-end {
+      position-area: inline-end span-block-end;
+    }
+    &.bottom {
+      position-area: block-end;
+    }
+    &.bottom-start {
+      position-area: block-end span-inline-start;
+    }
+    &.bottom-end {
+      position-area: block-end span-inline-end;
+    }
+    &.left {
+      position-area: inline-start;
+    }
+    &.left-start {
+      position-area: inline-start span-block-start;
+    }
+    &.left-end {
+      position-area: inline-start span-block-end;
+    }
+
+    /* Swap it around for rtl */
+    :dir(rtl) {
+      &.right {
+        position-area: inline-start;
+      }
+      &.right-start {
+        position-area: inline-start span-block-start;
+      }
+      &.right-end {
+        position-area: inline-start span-block-end;
+      }
+      &.left {
+        position-area: inline-end;
+      }
+      &.left-start {
+        position-area: inline-end span-block-start;
+      }
+      &.left-end {
+        position-area: inline-end span-block-end;
+      }
+    }
+  }
+
+  ::view-transition-old(vt-tooltip),
+  ::view-transition-new(vt-tooltip) {
+    height: 100%;
+  }
+}