opui-css 2.3.0 → 2.4.0

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

@@ -1,162 +0,0 @@
-@layer components.extended {
-  :where(.field > select) {
-    position: relative;
-
-    /* Default arrow */
-    &::picker-icon {
-      block-size: 0;
-      border-block-start: 5px solid;
-      border-inline: 5px solid transparent;
-      color: currentColor;
-      content: "";
-      inline-size: 0;
-      inset: 50% var(--size-3) auto auto;
-      pointer-events: none;
-      position: absolute;
-      translate: 0 -50%;
-    }
-
-    &:open {
-      &::picker-icon {
-        rotate: 180deg;
-      }
-    }
-
-    /* Select popover */
-    &::picker(select) {
-      /* Animation on-stage styles */
-      border: 0;
-      box-shadow: var(--shadow-2);
-      opacity: 1;
-      padding: 0;
-      scale: 1;
-
-      /* Animation starting styles */
-      @starting-style {
-        opacity: 0;
-        transform: scale(0.9);
-      }
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
-          overlay 0.2s allow-discrete, scale 0.2s var(--ease-3);
-      }
-    }
-
-    /* Animation off-stage styles */
-    &:not(:open)::picker(select) {
-      opacity: 0;
-      scale: 0.9;
-    }
-
-    button {
-      background-color: transparent;
-      display: flex;
-      inline-size: 100%;
-      margin: 0;
-      position: relative;
-
-      selectedcontent {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-
-    .list {
-      /* Groups */
-      [role="group"] {
-        label {
-          background-color: light-dark(var(--gray-3), var(--gray-13));
-          color: light-dark(
-            oklch(from var(--text-color-1) calc(l * 0.75) c h),
-            oklch(from var(--text-color-1) calc(l * 1.25) c h)
-          );
-          font-weight: 500;
-          overflow: hidden;
-          padding-inline: var(--size-2);
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        &:not(:first-child),
-        option:first-of-type {
-          margin-block-start: var(--size-2);
-        }
-
-        option:last-of-type,
-        &:last-child {
-          option:last-of-type {
-            margin-block-end: 0;
-          }
-        }
-      }
-
-      /* Option */
-      option {
-        /* Checkmark */
-        /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
-        &::check {
-          display: none;
-        }
-        &::checkmark {
-          display: none;
-        }
-        &::before {
-          display: none;
-        }
-
-        &:focus-visible {
-          outline-offset: -1px;
-        }
-      }
-    }
-  }
-
-  :where(.field:has(> select)) {
-    /* Size */
-    &.small {
-      button {
-        padding-inline: var(--size-2) var(--size-7);
-
-        &::after {
-          inset-inline-end: var(--size-2);
-        }
-      }
-    }
-
-    /*
-    * Non-experimental Select
-    *
-    * Hack to get the arrow working. Pseudo elements aren't allowed on the `<select>` element, so need to add it on the `.field` class instead. Noting this down if an `:after` element would be needed on a `.field`.
-    */
-    &:not(:has(button)) {
-      select {
-        appearance: none;
-      }
-
-      /* Arrow */
-      &::after {
-        align-self: center;
-        block-size: 0;
-        border-block-start: 5px solid;
-        border-inline: 5px solid transparent;
-        content: "";
-        display: inline-block;
-        flex-shrink: 0;
-        grid-column: 1/-1;
-        grid-row: 2;
-        inline-size: 0;
-        inset-inline-end: var(--size-3);
-        justify-self: end;
-        pointer-events: none;
-        position: relative;
-      }
-    }
-  }
-
-  select:has(button),
-  ::picker(select) {
-    appearance: base-select;
-  }
-}

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

@@ -1,148 +0,0 @@
-@layer components.extended {
-  :where(.snackbar) {
-    align-items: center;
-    /* Inverse surface-filled */
-    background-color: light-dark(var(--gray-15), var(--gray-2));
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow-2);
-    color: var(--text-color-1-contrast);
-    display: flex;
-    font-size: var(--font-size-sm);
-    gap: var(--size-3);
-    inset-block: auto var(--size-3);
-    inset-inline: var(--size-3) auto;
-    justify-content: space-between;
-    min-inline-size: min(100%, 37ch);
-    padding: var(--size-2) var(--size-3);
-    position: fixed;
-    inline-size: calc(100% - var(--size-6, 1.75rem));
-    z-index: 100;
-
-    &::backdrop {
-      display: none;
-    }
-
-    * {
-      word-break: break-word;
-    }
-
-    /* Global positioning (in relation to the window) */
-    /*** Default (end-start) */
-    inset-block: auto var(--size-3);
-    inset-inline: 50% 0;
-    translate: -50% 0;
-
-    &.start-start,
-    &.start-center,
-    &.start-end {
-      inset-block: var(--size-3) auto;
-    }
-
-    /* TODO use @custom-media instead? */
-    @container (width > 480px) {
-      /* Default (end-start) */
-      inset-block: auto var(--size-7, 2rem);
-      inset-inline: var(--size-7, 2rem) auto;
-      translate: revert;
-      inline-size: fit-content;
-
-      &.end-start,
-      &.end-end,
-      &.start-start,
-      &.start-end {
-        translate: revert;
-      }
-
-      &.start-start {
-        inset-block: var(--size-7, 2rem) auto;
-        inset-inline: var(--size-7, 2rem) auto;
-      }
-      &.start-center {
-        inset-block: var(--size-7, 2rem) auto;
-        inset-inline: 50% 0;
-        translate: -50% 0;
-      }
-      &.start-end {
-        inset-block: var(--size-7, 2rem) auto;
-        inset-inline: auto var(--size-7, 2rem);
-      }
-      &.end-start {
-        inset-block-end: var(--size-7, 2rem);
-        inset-inline: var(--size-7, 2rem) auto;
-      }
-      &.end-center {
-        inset-block: auto var(--size-7, 2rem);
-        inset-inline: 50% 0;
-        translate: -50% 0;
-      }
-      &.end-end {
-        inset-block: auto var(--size-7, 2rem);
-        inset-inline: auto var(--size-7, 2rem);
-      }
-    }
-
-    /* Absolute positioning */
-    &.absolute {
-      position: absolute;
-    }
-
-    /* Actions */
-    .actions {
-      align-items: center;
-      display: flex;
-      flex-shrink: 0;
-      gap: var(--size-3);
-      padding-inline: 0;
-
-      button {
-        /* Inverse hover and active backgrounds */
-        &:where(:not([disabled])) {
-          &:where(:not(:active):hover) {
-            --_bg-color: light-dark(
-              color-mix(in oklch, white 40%, black),
-              color-mix(in oklch, white 85%, black)
-            );
-          }
-
-          &:where(:hover:active) {
-            --_bg-color: light-dark(
-              color-mix(in oklch, white 45%, black),
-              color-mix(in oklch, white 80%, black)
-            );
-          }
-        }
-      }
-
-      button:not(:has(svg)) {
-        border-radius: var(--border-radius);
-        font-size: inherit;
-        max-block-size: var(--size-6, 1.5rem);
-        padding: 1ex;
-      }
-
-      button:has(svg) {
-        color: inherit;
-        max-inline-size: var(--size-6, 1.75rem);
-        margin: var(--size-00);
-        padding: var(--size-1);
-      }
-    }
-
-    /* Animations */
-    opacity: 0;
-    transition: display 0.075s allow-discrete, overlay 0.075s allow-discrete,
-      opacity 0.075s var(--ease-out-1);
-
-    &:popover-open,
-    &:popover-open::backdrop,
-    &.visible {
-      opacity: 1;
-      transition: display 0.25s allow-discrete, overlay 0.25s allow-discrete,
-        opacity 0.25s var(--ease-out-1);
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-@layer components.root {
-  [aria-busy="true"]:not(
-      input,
-      select,
-      textarea,
-      html,
-      progress,
-      [aria-describedby]
-    ) {
-    position: relative;
-
-    &::before {
-      animation: spin 0.7s linear infinite;
-      border-color: transparent currentColor currentColor;
-      border-radius: 50%;
-      border-style: solid;
-      border-width: 3px;
-      content: "";
-      display: inline-block;
-      block-size: 1em;
-      opacity: 0.5;
-      vertical-align: -0.14em;
-      inline-size: 1em;
-    }
-
-    &:not(button.button):not(:empty) {
-      &::before {
-        margin-inline-end: 0.5em;
-      }
-    }
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-}

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

@@ -1,189 +0,0 @@
-@layer components.root {
-  :where(.switch) {
-    --_accent-color: var(--primary);
-    --_accent-contrast: var(--primary-contrast);
-
-    --_dot-bg-color: light-dark(var(--gray-11), var(--gray-14));
-    --_dot-inset: var(--size-1) auto auto var(--size-1);
-    --_dot-outline-size: 0;
-    --_dot-size: var(--size-3);
-
-    --_track-bg-color: light-dark(var(--gray-3), var(--gray-8));
-    --_track-height: var(--size-5);
-    --_track-width: var(--size-8);
-    --_transition-tf: var(--ease-4);
-    --_transition-time: 0.2s;
-
-    align-items: center;
-    color: var(--text-color-1);
-    display: inline-grid;
-    gap: 0 var(--size-2);
-    grid-auto-columns: auto;
-    grid-auto-flow: column;
-    inline-size: fit-content;
-
-    input[type="checkbox"][role="switch"] {
-      appearance: none;
-      block-size: var(--_track-height);
-      cursor: pointer;
-      inline-size: var(--_track-width);
-      margin: 0;
-      position: relative;
-
-      /* Track */
-      &::before {
-        background-color: var(--_track-bg-color);
-        block-size: var(--_track-height);
-        border: 1px solid var(--_dot-bg-color);
-        border-radius: 100vmax;
-        content: "";
-        inline-size: var(--_track-width);
-        inset: 0;
-        position: absolute;
-      }
-
-      &:focus-visible {
-        outline-offset: 2px;
-        outline: 2px solid currentColor;
-      }
-
-      /* Dot */
-      &::after {
-        background-color: var(--_dot-bg-color);
-        block-size: var(--_dot-size);
-        border-radius: 100vmax;
-        content: "";
-        inline-size: var(--_dot-size);
-        inset: var(--_dot-inset);
-        outline-offset: -1px;
-        outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
-        position: absolute;
-      }
-
-      /* Checked */
-      &:checked {
-        &::before {
-          background-color: var(--_accent-color);
-          border-color: var(--_accent-color);
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
-            border-color var(--_transition-time) var(--_transition-tf);
-        }
-
-        /* Dot */
-        &::after {
-          --_dot-bg-color: var(--_accent-contrast);
-          --_dot-outline-size: calc(var(--size-1) - 1px);
-
-          inset-inline-start: calc(
-            var(--_track-width) - var(--_dot-size) - var(--size-1)
-          );
-        }
-      }
-
-      /* Animation */
-      @media (prefers-reduced-motion: no-preference) {
-        /* Track */
-        &::before {
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
-            border-color var(--_transition-time) var(--_transition-tf);
-        }
-
-        /* Dot */
-        &::after {
-          transition: all var(--_transition-time) var(--_transition-tf);
-        }
-
-        &:active:after {
-          --_dot-outline-size: calc(var(--size-1) + 1px);
-        }
-
-        &:checked {
-          &:active:after {
-            --_dot-outline-size: calc(var(--size-1) + 1px);
-          }
-        }
-      }
-    }
-
-    /* Required dot */
-    &:has([required]:not(:checked)) {
-      .label:after {
-        color: var(--red);
-        content: "*";
-        inset: 0 -0.25ex auto auto;
-        position: absolute;
-      }
-    }
-
-    /* Disabled */
-    &:has([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.64;
-      user-select: none;
-
-      input {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Label */
-    .label {
-      grid-column: 2;
-      grid-row: 1;
-      min-width: 0;
-      padding-inline: 0 1ex;
-      position: relative;
-      user-select: none;
-    }
-
-    /* Supporting text */
-    .supporting-text {
-      color: var(--text-color-2);
-      font-size: var(--font-size-xs);
-      grid-column: 2;
-      grid-row: 2;
-      line-height: 1.5;
-      z-index: 1;
-    }
-
-    /* Size */
-    &.small {
-      --_dot-size: 0.75rem;
-      --_track-height: var(--size-4);
-      --_track-width: 2.5rem;
-    }
-
-    /* Stacked layout */
-    &.stack {
-      justify-items: center;
-      grid-auto-columns: unset;
-
-      .label {
-        grid-column: 1/-1;
-        grid-row: 2;
-        margin-block-start: var(--size-1);
-        padding-inline: 1ex;
-      }
-
-      .supporting-text {
-        grid-column: 1/-1;
-        grid-row: 3;
-      }
-    }
-
-    /* Validation */
-    &.error {
-      input {
-        outline: 2px solid var(--color-9);
-        border-radius: var(--radius-round);
-      }
-
-      .label,
-      .supporting-text {
-        color: var(--color-9);
-      }
-    }
-  }
-}

package/src/themes/theme-two/components/tab-buttons.css

@@ -1,120 +0,0 @@
-@layer components.root {
-  :where(nav.tabs) {
-    --_bg-color: transparent;
-
-    & > [role="tablist"] {
-      button {
-        outline-color: transparent;
-        outline-offset: -4px;
-
-        &[aria-selected="true"] {
-          &:focus-visible {
-            outline: 2px solid var(--text-color-1);
-          }
-        }
-      }
-    }
-
-    /* Underlined */
-    &.underlined {
-      /* Tab list */
-      & > [role="tablist"] {
-        border-bottom: 1px solid var(--border-color);
-
-        button {
-          --_ripple-color: light-dark(
-            color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
-            color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
-          );
-
-          background: var(--_bg-color) var(--ripple, none);
-          font-weight: 500;
-          line-height: var(--font-lineheight-4);
-          padding: var(--size-2) var(--size-3);
-
-          &:focus-visible {
-            border-radius: 0;
-          }
-
-          &[aria-selected="true"] {
-            border-block-end: 2px solid var(--primary);
-            color: var(--primary);
-          }
-
-          @media (prefers-reduced-motion: no-preference) {
-            transition: background-color 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);
-
-            /*** Ripple effect */
-            background-position: center;
-            transition: background var(--button-ripple-duration);
-            &:where(:not(:active):hover) {
-              --ripple: radial-gradient(
-                  circle,
-                  transparent 1%,
-                  var(--_ripple-color) 1%
-                )
-                center/15000%;
-            }
-
-            &:where(:hover:active) {
-              background-size: var(--button-ripple-size);
-              transition: background 0s;
-            }
-
-            &:hover {
-              background-color: light-dark(
-                oklch(from var(--primary) calc(l * 0.75) none h / 5%),
-                oklch(from var(--primary) calc(l * 1.25) none h / 5%)
-              );
-            }
-          }
-        }
-      }
-    }
-
-    /* Filled */
-    &.filled {
-      --_bg-color: var(--surface-default);
-      --_radius: var(--border-radius);
-      --_selected-bg: var(--surface-filled);
-
-      & > [role="tablist"] {
-        background-color: var(--_bg-color);
-        border: var(--border-width) solid var(--border-color);
-        border-radius: var(--_radius);
-        overflow: hidden;
-        padding: 0.792ex;
-        width: fit-content;
-
-        button {
-          background-color: var(--_bg-color);
-          border-radius: var(--_radius);
-          line-height: var(--font-lineheight-4);
-          padding-inline: var(--size-3);
-
-          &:hover {
-            background-color: oklch(from var(--_bg-color) calc(l * 1.25) c h);
-          }
-
-          &[aria-selected="true"] {
-            background-color: var(--_selected-bg);
-
-            &:hover {
-              background-color: oklch(
-                from var(--_selected-bg) calc(l * 1.25) c h
-              );
-            }
-          }
-
-          @media (prefers-reduced-motion: no-preference) {
-            transition: background-color 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);
-          }
-        }
-      }
-    }
-  }
-}

package/src/themes/theme-two/components/text-field.css

@@ -1,57 +0,0 @@
-@layer components.extended {
-  :where(
-      .field:has(
-          :where(
-              input[type="date"],
-              input[type="datetime-local"],
-              input[type="email"],
-              input[type="month"],
-              input[type="number"],
-              input[type="password"],
-              input[type="search"],
-              input[type="tel"],
-              input[type="text"],
-              input[type="time"],
-              input[type="url"],
-              input[type="week"]
-            )
-        )
-    ) {
-    /* Sizes */
-    &.small {
-      input {
-        padding-inline: var(--size-2);
-      }
-    }
-  }
-
-  /* Autosuggest */
-  :where(.field:has(input[list])) {
-    /* Hide native arrow */
-    input::-webkit-calendar-picker-indicator {
-      opacity: 0;
-      position: absolute;
-      cursor: pointer;
-      pointer-events: none;
-    }
-  }
-  :where(
-      .field:has(input[list]:placeholder-shown),
-      .field:has(input[list]):where(:focus-within, :hover)
-    ) {
-    /* Arrow */
-    &::after {
-      block-size: 0;
-      border-block-start: 5px solid;
-      border-inline: 5px solid transparent;
-      content: "";
-      display: inline-block;
-      flex-shrink: 0;
-      inline-size: 0;
-      inset: 50% var(--size-3) auto auto;
-      pointer-events: none;
-      position: absolute;
-      translate: 0 -50%;
-    }
-  }
-}