opui-css 2.3.0 → 3.0.0

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

@@ -1,172 +1,172 @@
-@layer components.extended {
-  :where(details) {
-    --_accordion-transition-time: 0.2s;
-    --_bg-color: transparent;
-    --_margin-inline: var(--size-1);
-    --_shadow: none;
-
-    background-color: var(--_bg-color);
-    box-shadow: var(--_shadow);
-    border-radius: var(--border-radius, 4px);
-    display: block;
-    margin-inline: var(--_margin-inline);
-    transition: all var(--_accordion-transition-time) ease-out;
-
-    /* Accordion animation */
-    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
-    @media (prefers-reduced-motion: no-preference) {
-      interpolate-size: allow-keywords;
-    }
-
-    &::details-content {
-      block-size: 0;
-      opacity: 0;
-      overflow-y: clip;
-      transition: content-visibility var(--_accordion-transition-time)
-          allow-discrete,
-        opacity var(--_accordion-transition-time),
-        block-size var(--_accordion-transition-time);
-    }
-
-    &[open]::details-content {
-      block-size: auto;
-      opacity: 1;
-    }
-    /***/
-
-    & > summary {
-      background-color: inherit;
-      cursor: pointer;
-      font-weight: 700;
-      padding-block: var(--size-3);
-      user-select: none;
-    }
-
-    /* Custom arrow */
-    /* summary {
-      align-items: center;
-      background-color: inherit;
-      cursor: pointer;
-      display: flex;
-      justify-content: space-between;
-      list-style: none;
-      padding-block: var(--size-3);
-      user-select: none;
-
-      &::marker,
-      &::-webkit-details-marker {
-        display: none;
-      }
-
-      svg {
-        transition: rotate 0.2s ease-out;
-      }
-    }
-
-    &[open] > summary svg {
-      rotate: 180deg;
-    } */
-
-    & > .content {
-      margin-block-start: 0;
-      padding-block: var(--size-2) var(--size-3);
-    }
-
-    & > .actions {
-      display: flex;
-      gap: var(--size-1);
-      justify-content: end;
-      margin-block-start: var(--size-3);
-      padding-block-end: var(--size-1);
-      padding-inline: var(--size-3) var(--size-1);
-    }
-
-    /* Variants */
-    &.card,
-    &.text {
-      --_bg-color: transparent;
-      --_margin-inline: var(--size-1);
-    }
-
-    &.elevated {
-      --_bg-color: var(--surface-elevated);
-      --_margin-inline: 0;
-      --_shadow: var(--shadow-2);
-    }
-
-    &.outlined {
-      --_bg-color: var(--surface-default);
-      --_margin-inline: 0;
-      border: 1px solid var(--border-color);
-    }
-
-    &.tonal {
-      --_bg-color: var(--surface-tonal);
-      --_margin-inline: 0;
-    }
-
-    &:where(.elevated, .outlined, .tonal) > * {
-      padding-inline: var(--size-3);
-    }
-  }
-
-  /* Accordion group  */
-  :where(.card:has(details)) {
-    --_gutter-color: var(--border-color);
-
-    display: block;
-
-    & > .content {
-      margin-block: 0;
-      padding: 0;
-    }
-
-    &.card,
-    &.text {
-      &:not(.tonal, .outlined, .elevated) {
-        summary {
-          padding-inline: 0;
-        }
-      }
-    }
-
-    details {
-      --_margin-inline: 0;
-
-      border: 0;
-      box-shadow: none;
-
-      & > * {
-        padding-inline: var(--size-3);
-      }
-
-      /* Border between accordion items */
-      & + & {
-        summary {
-          border-radius: 0;
-          border-block-start: 1px solid var(--_gutter-color);
-        }
-      }
-
-      /* First item */
-      &:first-of-type {
-        border-start-start-radius: var(--border-radius, 0.25rem);
-        border-start-end-radius: var(--border-radius, 0.25rem);
-        summary {
-          border-start-start-radius: var(--border-radius, 0.25rem);
-          border-start-end-radius: var(--border-radius, 0.25rem);
-        }
-      }
-
-      /* Last item */
-      &:last-of-type {
-        border-end-start-radius: var(--border-radius, 0.25rem);
-        border-end-end-radius: var(--border-radius, 0.25rem);
-        summary {
-          border-end-start-radius: var(--border-radius, 0.25rem);
-          border-end-end-radius: var(--border-radius, 0.25rem);
-        }
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(details) {
+    --_accordion-transition-time: 0.2s;
+    --_bg-color: transparent;
+    --_margin-inline: var(--size-1);
+    --_shadow: none;
+
+    background-color: var(--_bg-color);
+    box-shadow: var(--_shadow);
+    border-radius: var(--border-radius, 4px);
+    display: block;
+    margin-inline: var(--_margin-inline);
+    transition: all var(--_accordion-transition-time) ease-out;
+
+    /* Accordion animation */
+    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      opacity: 0;
+      overflow-y: clip;
+      transition: content-visibility var(--_accordion-transition-time)
+          allow-discrete,
+        opacity var(--_accordion-transition-time),
+        block-size var(--_accordion-transition-time);
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+      opacity: 1;
+    }
+    /***/
+
+    & > summary {
+      background-color: inherit;
+      cursor: pointer;
+      font-weight: 700;
+      padding-block: var(--size-3);
+      user-select: none;
+    }
+
+    /* Custom arrow */
+    /* summary {
+      align-items: center;
+      background-color: inherit;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      list-style: none;
+      padding-block: var(--size-3);
+      user-select: none;
+
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      svg {
+        transition: rotate 0.2s ease-out;
+      }
+    }
+
+    &[open] > summary svg {
+      rotate: 180deg;
+    } */
+
+    & > .content {
+      margin-block-start: 0;
+      padding-block: var(--size-2) var(--size-3);
+    }
+
+    & > .actions {
+      display: flex;
+      gap: var(--size-1);
+      justify-content: end;
+      margin-block-start: var(--size-3);
+      padding-block-end: var(--size-1);
+      padding-inline: var(--size-3) var(--size-1);
+    }
+
+    /* Variants */
+    &.card,
+    &.text {
+      --_bg-color: transparent;
+      --_margin-inline: var(--size-1);
+    }
+
+    &.elevated {
+      --_bg-color: var(--surface-elevated);
+      --_margin-inline: 0;
+      --_shadow: var(--shadow-2);
+    }
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_margin-inline: 0;
+      border: 1px solid var(--border-color);
+    }
+
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+      --_margin-inline: 0;
+    }
+
+    &:where(.elevated, .outlined, .tonal) > * {
+      padding-inline: var(--size-3);
+    }
+  }
+
+  /* Accordion group  */
+  :where(.card:has(details)) {
+    --_gutter-color: var(--border-color);
+
+    display: block;
+
+    & > .content {
+      margin-block: 0;
+      padding: 0;
+    }
+
+    &.card,
+    &.text {
+      &:not(.tonal, .outlined, .elevated) {
+        summary {
+          padding-inline: 0;
+        }
+      }
+    }
+
+    details {
+      --_margin-inline: 0;
+
+      border: 0;
+      box-shadow: none;
+
+      & > * {
+        padding-inline: var(--size-3);
+      }
+
+      /* Border between accordion items */
+      & + & {
+        summary {
+          border-radius: 0;
+          border-block-start: 1px solid var(--_gutter-color);
+        }
+      }
+
+      /* First item */
+      &:first-of-type {
+        border-start-start-radius: var(--border-radius, 0.25rem);
+        border-start-end-radius: var(--border-radius, 0.25rem);
+        summary {
+          border-start-start-radius: var(--border-radius, 0.25rem);
+          border-start-end-radius: var(--border-radius, 0.25rem);
+        }
+      }
+
+      /* Last item */
+      &:last-of-type {
+        border-end-start-radius: var(--border-radius, 0.25rem);
+        border-end-end-radius: var(--border-radius, 0.25rem);
+        summary {
+          border-end-start-radius: var(--border-radius, 0.25rem);
+          border-end-end-radius: var(--border-radius, 0.25rem);
+        }
+      }
+    }
+  }
+}

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

@@ -1,85 +1,85 @@
-@layer components.extended {
-  :where(.alert) {
-    --_bg-color: var(--surface-tonal);
-    --_border-color: var(--surface-tonal);
-    --_color: var(--text-color-1);
-
-    &.outlined {
-      --_bg-color: var(--surface-default);
-      --_border-color: var(--border-color);
-      --_color: var(--text-color-1);
-    }
-
-    background-color: var(--_bg-color);
-    border: 1px solid var(--_border-color);
-    border-radius: var(--border-radius);
-    color: var(--_color);
-    padding: var(--size-3);
-
-    & > .content {
-      display: grid;
-      gap: var(--size-2);
-      font-size: var(--font-size-sm);
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: inherit;
-        font-size: var(--font-size-md);
-        font-weight: 600;
-
-        * {
-          font-size: inherit;
-        }
-      }
-    }
-
-    /* Colors */
-    &.error,
-    &.ok,
-    &.warning {
-      --_bg-color: var(--color-4);
-      --_border-color: var(--color-9);
-      --_color: var(--color-15);
-
-      &.outlined {
-        --_bg-color: var(--surface-default);
-        --_border-color: var(--color-9);
-        --_color: light-dark(var(--color-15), var(--color-1));
-      }
-
-      svg {
-        margin-block-start: 0.15rem;
-        stroke: var(--color-9);
-      }
-    }
-
-    /* Links
-    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
-    */
-    &:not(.outlined) {
-      a[href] {
-        color: inherit;
-
-        &:hover {
-          color: var(--primary);
-        }
-      }
-    }
-
-    /* Icon */
-    &:has(svg) {
-      display: grid;
-      gap: var(--size-3);
-      grid-template-columns: var(--size-4) 1fr;
-
-      svg {
-        margin-block-start: 0.15rem;
-        stroke: currentColor;
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(.alert) {
+    --_bg-color: var(--surface-tonal);
+    --_border-color: var(--surface-tonal);
+    --_color: var(--text-color-1);
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_border-color: var(--border-color);
+      --_color: var(--text-color-1);
+    }
+
+    background-color: var(--_bg-color);
+    border: 1px solid var(--_border-color);
+    border-radius: var(--border-radius);
+    color: var(--_color);
+    padding: var(--size-3);
+
+    & > .content {
+      display: grid;
+      gap: var(--size-2);
+      font-size: var(--font-size-sm);
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: inherit;
+        font-size: var(--font-size-md);
+        font-weight: 600;
+
+        * {
+          font-size: inherit;
+        }
+      }
+    }
+
+    /* Colors */
+    &.error,
+    &.ok,
+    &.warning {
+      --_bg-color: var(--color-4);
+      --_border-color: var(--color-9);
+      --_color: var(--color-15);
+
+      &.outlined {
+        --_bg-color: var(--surface-default);
+        --_border-color: var(--color-9);
+        --_color: light-dark(var(--color-15), var(--color-1));
+      }
+
+      svg {
+        margin-block-start: 0.15rem;
+        stroke: var(--color-9);
+      }
+    }
+
+    /* Links
+    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
+    */
+    &:not(.outlined) {
+      a[href] {
+        color: inherit;
+
+        &:hover {
+          color: var(--primary);
+        }
+      }
+    }
+
+    /* Icon */
+    &:has(svg) {
+      display: grid;
+      gap: var(--size-3);
+      grid-template-columns: var(--size-4) 1fr;
+
+      svg {
+        margin-block-start: 0.15rem;
+        stroke: currentColor;
+      }
+    }
+  }
+}

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

@@ -1,68 +1,68 @@
-@layer components.root {
-  :where(.avatar) {
-    --_bg-color: var(--color-8);
-    --_color: var(--text-color-1);
-    --_width: 40px;
-
-    align-items: center;
-    background-color: var(--_bg-color);
-    color: var(--_color);
-    aspect-ratio: 1;
-    border-radius: 100vmax;
-    display: inline-flex;
-    inline-size: var(--_width);
-    justify-content: center;
-    overflow: clip;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-
-    &:has(img) {
-      background-color: transparent;
-    }
-
-    svg {
-      max-inline-size: var(--size-5);
-    }
-
-    img {
-      block-size: 100%;
-      inline-size: 100%;
-      inset: 0;
-      object-fit: cover;
-      position: absolute;
-    }
-
-    &.squared {
-      border-radius: 0;
-    }
-
-    &.rounded {
-      border-radius: var(--border-size-3);
-    }
-  }
-
-  /*
-  TODO: implement reading-order if that becomes a thing.
-  https://developer.chrome.com/blog/reading-order/
-  */
-  :where(.avatar-group) {
-    --_margin: var(--size-1);
-
-    display: flex;
-    flex-direction: row-reverse;
-
-    &.gap-small {
-      --_margin: var(--size-2);
-    }
-
-    &.gap-x-small {
-      --_margin: var(--size-3);
-    }
-
-    .avatar {
-      margin-inline-end: calc(-1 * var(--_margin));
-      outline: 2px solid var(--surface-default);
-    }
-  }
-}
+@layer components.root {
+  :where(.avatar) {
+    --_bg-color: var(--color-8);
+    --_color: var(--text-color-1);
+    --_width: 40px;
+
+    align-items: center;
+    background-color: var(--_bg-color);
+    color: var(--_color);
+    aspect-ratio: 1;
+    border-radius: 100vmax;
+    display: inline-flex;
+    inline-size: var(--_width);
+    justify-content: center;
+    overflow: clip;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+
+    &:has(img) {
+      background-color: transparent;
+    }
+
+    svg {
+      max-inline-size: var(--size-5);
+    }
+
+    img {
+      block-size: 100%;
+      inline-size: 100%;
+      inset: 0;
+      object-fit: cover;
+      position: absolute;
+    }
+
+    &.squared {
+      border-radius: 0;
+    }
+
+    &.rounded {
+      border-radius: var(--border-size-3);
+    }
+  }
+
+  /*
+  TODO: implement reading-order if that becomes a thing.
+  https://developer.chrome.com/blog/reading-order/
+  */
+  :where(.avatar-group) {
+    --_margin: var(--size-1);
+
+    display: flex;
+    flex-direction: row-reverse;
+
+    &.gap-small {
+      --_margin: var(--size-2);
+    }
+
+    &.gap-x-small {
+      --_margin: var(--size-3);
+    }
+
+    .avatar {
+      margin-inline-end: calc(-1 * var(--_margin));
+      outline: 2px solid var(--surface-default);
+    }
+  }
+}