opui-css 3.3.3 → 3.3.4

package/src/themes/theme-one/components/badge.css

@@ -1,101 +1,101 @@
-@layer components.root {
-  :where(.badge) {
-    --_bg-color: var(--primary);
-    --_border-color: var(--primary);
-    --_color: var(--gray-1);
-    --_inset-offset: 16px;
-    --_inset: auto auto calc(100% - var(--_inset-offset))
-      calc(100% - var(--_inset-offset));
-    --_translate: 0;
-
-    display: inline-flex;
-    position: relative;
-
-    &::after {
-      background-color: var(--_bg-color);
-      border: 2px solid var(--_border-color);
-      border-radius: 100vmax;
-      color: var(--_color);
-      content: attr(aria-label);
-      font-size: 12px;
-      font-weight: 500;
-      block-size: var(--size-4);
-      line-height: normal;
-      min-inline-size: var(--size-4, 1.125rem);
-      padding-inline: var(--size-1);
-      inset: var(--_inset);
-      position: absolute;
-      text-align: center;
-      translate: var(--_translate);
-      transition: opacity 0.2s var(--ease-out-1);
-      inline-size: max-content;
-    }
-
-    /* Alignment */
-    &.start-start {
-      --_inset: auto calc(100% - var(--_inset-offset))
-        calc(100% - var(--_inset-offset)) auto;
-    }
-    &.start-end {
-      --_inset: auto auto calc(100% - var(--_inset-offset))
-        calc(100% - var(--_inset-offset));
-    }
-    &.end-start {
-      --_inset: calc(100% - var(--_inset-offset))
-        calc(100% - var(--_inset-offset)) auto auto;
-    }
-    &.end-end {
-      --_inset: calc(100% - var(--_inset-offset)) auto auto
-        calc(100% - var(--_inset-offset));
-    }
-
-    /* Dot */
-    &.dot {
-      --_inset: 0 -1px auto auto;
-      &::after {
-        content: "";
-        min-inline-size: var(--size-2);
-        block-size: var(--size-2);
-        inline-size: var(--size-2);
-        padding: 0;
-      }
-    }
-
-    /* Visibility */
-    &.invisible {
-      &::after {
-        opacity: 0;
-        pointer-events: none;
-      }
-    }
-
-    /* Colors */
-    &.error,
-    &.good,
-    &.ok,
-    &.warning {
-      --_bg-color: var(--color-8);
-      --_border-color: var(--color-8);
-    }
-  }
-
-  [dir="rtl"] {
-    :where(.badge) {
-      --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
-
-      /* Alignment */
-      &.start-start {
-        --_inset: auto auto calc(100% - 16px) calc(100% - 16px);
-      }
-      &.start-end {
-        --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
-      }
-      &.end-start {
-        --_inset: calc(100% - 16px) auto auto calc(100% - 16px);
-      }
-      &.end-end {
-        --_inset: calc(100% - 16px) calc(100% - 16px) auto auto;
-      }
-    }
-  }
-}
+@layer components.root {
+  :where(.badge) {
+    --_bg-color: var(--primary);
+    --_border-color: var(--primary);
+    --_color: var(--gray-1);
+    --_inset-offset: 16px;
+    --_inset: auto auto calc(100% - var(--_inset-offset))
+      calc(100% - var(--_inset-offset));
+    --_translate: 0;
+
+    display: inline-flex;
+    position: relative;
+
+    &::after {
+      background-color: var(--_bg-color);
+      border: 2px solid var(--_border-color);
+      border-radius: 100vmax;
+      color: var(--_color);
+      content: attr(aria-label);
+      font-size: 12px;
+      font-weight: 500;
+      block-size: var(--size-4);
+      line-height: normal;
+      min-inline-size: var(--size-4, 1.125rem);
+      padding-inline: var(--size-1);
+      inset: var(--_inset);
+      position: absolute;
+      text-align: center;
+      translate: var(--_translate);
+      transition: opacity 0.2s var(--ease-out-1);
+      inline-size: max-content;
+    }
+
+    /* Alignment */
+    &.start-start {
+      --_inset: auto calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset)) auto;
+    }
+    &.start-end {
+      --_inset: auto auto calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset));
+    }
+    &.end-start {
+      --_inset: calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset)) auto auto;
+    }
+    &.end-end {
+      --_inset: calc(100% - var(--_inset-offset)) auto auto
+        calc(100% - var(--_inset-offset));
+    }
+
+    /* Dot */
+    &.dot {
+      --_inset: 0 -1px auto auto;
+      &::after {
+        content: "";
+        min-inline-size: var(--size-2);
+        block-size: var(--size-2);
+        inline-size: var(--size-2);
+        padding: 0;
+      }
+    }
+
+    /* Visibility */
+    &.invisible {
+      &::after {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    /* Colors */
+    &.error,
+    &.good,
+    &.ok,
+    &.warning {
+      --_bg-color: var(--color-8);
+      --_border-color: var(--color-8);
+    }
+  }
+
+  [dir="rtl"] {
+    :where(.badge) {
+      --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
+
+      /* Alignment */
+      &.start-start {
+        --_inset: auto auto calc(100% - 16px) calc(100% - 16px);
+      }
+      &.start-end {
+        --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
+      }
+      &.end-start {
+        --_inset: calc(100% - 16px) auto auto calc(100% - 16px);
+      }
+      &.end-end {
+        --_inset: calc(100% - 16px) calc(100% - 16px) auto auto;
+      }
+    }
+  }
+}

package/src/themes/theme-one/components/button-group.css

@@ -1,69 +1,69 @@
-@layer components.extended {
-  :where([role="group"].button-group) {
-    --_border-radius: var(--button-border-radius);
-
-    border-radius: var(--_border-radius);
-    display: inline-flex;
-    min-width: max-content;
-
-    button {
-      border-radius: 0;
-
-      svg {
-        max-inline-size: 0.7lh;
-      }
-
-      &:focus-visible {
-        outline-offset: -4px;
-      }
-
-      & + & {
-        border-inline-width: 1px;
-        margin-inline-start: -1px;
-      }
-
-      &: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);
-      }
-
-      /* Variants */
-      /*** Text & Elevated */
-      &:not(:where(.tonal, .filled, .outlined)) {
-        & + button {
-          border-inline-start: 1px solid var(--border-color);
-        }
-      }
-
-      &:where(.tonal, .filled) {
-        & + button {
-          border-inline-start-color: var(--color-7);
-        }
-      }
-
-      &:where(.tonal, .filled, .elevated) {
-        & + &[disabled] {
-          border-inline-start-color: color-mix(
-            in oklch,
-            var(--border-color) 90%,
-            white
-          );
-        }
-      }
-
-      &:where(.elevated) {
-        box-shadow: var(--shadow-1);
-
-        button {
-          &:not(:hover) {
-            box-shadow: none;
-          }
-        }
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where([role="group"].button-group) {
+    --_border-radius: var(--button-border-radius);
+
+    border-radius: var(--_border-radius);
+    display: inline-flex;
+    min-width: max-content;
+
+    button {
+      border-radius: 0;
+
+      svg {
+        max-inline-size: 0.7lh;
+      }
+
+      &:focus-visible {
+        outline-offset: -4px;
+      }
+
+      & + & {
+        border-inline-width: 1px;
+        margin-inline-start: -1px;
+      }
+
+      &: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);
+      }
+
+      /* Variants */
+      /*** Text & Elevated */
+      &:not(:where(.tonal, .filled, .outlined)) {
+        & + button {
+          border-inline-start: 1px solid var(--border-color);
+        }
+      }
+
+      &:where(.tonal, .filled) {
+        & + button {
+          border-inline-start-color: var(--color-7);
+        }
+      }
+
+      &:where(.tonal, .filled, .elevated) {
+        & + &[disabled] {
+          border-inline-start-color: color-mix(
+            in oklch,
+            var(--border-color) 90%,
+            white
+          );
+        }
+      }
+
+      &:where(.elevated) {
+        box-shadow: var(--shadow-1);
+
+        button {
+          &:not(:hover) {
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+}