opui-css 3.3.4 → 4.0.0

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

@@ -1,210 +0,0 @@
-@layer components.extended {
-  @scope (.rich-text) to (.not-rich-text) {
-    a {
-      color: var(--primary);
-      cursor: pointer;
-      font-size: inherit;
-      font-weight: 700;
-      line-height: inherit;
-      text-decoration: underline;
-      text-decoration-color: var(--primary);
-      text-underline-offset: 2px;
-
-      &[href] {
-        &:hover,
-        &:focus-visible {
-          color: var(--primary-light);
-        }
-      }
-    }
-
-    /* Blockquote */
-    blockquote {
-      font-size: inherit;
-      line-height: inherit;
-      :first-child {
-        margin-block-start: 0;
-      }
-
-      :last-child {
-        margin-block-end: 0;
-      }
-    }
-
-    /* Text */
-    p {
-      font-size: inherit;
-      line-height: inherit;
-      margin-block: 1.25em;
-    }
-
-    :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
-      color: var(--text-color-1);
-
-      & + *:not(&) {
-        margin-block-start: 0;
-      }
-    }
-
-    h1,
-    .h1 {
-      font-size: var(--font-size-h1, var(--font-size-7));
-      letter-spacing: -0.02em;
-      line-height: 1.1111111;
-      margin-block: 0 0.8888889em;
-    }
-
-    h2,
-    .h2 {
-      font-size: var(--font-size-h2, var(--font-size-5, 2rem));
-      letter-spacing: -0.02em;
-      line-height: 1.3333333;
-      margin-block: 2em 1em;
-    }
-
-    h3,
-    .h3 {
-      font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
-      letter-spacing: -0.01em;
-      line-height: 1.6;
-      margin-block: 1.6em 0.6em;
-    }
-
-    h4,
-    .h4 {
-      font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
-      letter-spacing: -0.01em;
-      line-height: 1.5;
-      margin-block: 1.5em 0.5em;
-    }
-
-    h5,
-    .h5 {
-      font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
-      line-height: 1;
-      margin-block: 0 var(--size-1);
-    }
-
-    h6,
-    .h6 {
-      font-size: var(--font-size-h6, var(--font-size-1, 1rem));
-      line-height: 1;
-      margin-block: 0 var(--size-1);
-    }
-
-    /** Overline */
-    :where(.overline, hgroup > :where(p, .p):first-of-type:first-child) {
-      color: light-dark(
-        oklch(from var(--text-color-2) calc(l * 1.25) c h),
-        oklch(from var(--text-color-2) calc(l * 0.75) c h)
-      );
-      font-size: var(--font-size-xs);
-      font-weight: 500;
-      letter-spacing: 0.06em;
-      line-height: 2.5;
-      text-transform: uppercase;
-    }
-
-    hgroup {
-      & > p {
-        margin: 0;
-      }
-
-      & > :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
-        margin-block-end: 0.4em;
-      }
-
-      & + * {
-        margin-block-start: 3em;
-      }
-
-      /* The second p element */
-      & > :where(p, .p):last-of-type:last-child:not(:first-child) {
-        color: oklch(from currentColor l c h / 75%);
-        font-size: var(--font-size-lg);
-        line-height: 1.6;
-      }
-    }
-
-    /* Lists */
-    ul:not([class]) {
-      list-style-type: disc;
-    }
-
-    ol:not([class]) {
-      list-style-type: decimal;
-    }
-
-    :where(ul, ol):not([class]) {
-      display: grid;
-      font-size: inherit;
-      gap: 0.5em;
-      line-height: inherit;
-      margin-block-start: 1.25em;
-      margin-block-end: 1.25em;
-      padding-inline-start: 1.625em;
-
-      li {
-        padding-inline-start: 0.375em;
-      }
-    }
-
-    /* Nested lists */
-    :where(ul ul),
-    :where(ul ol),
-    :where(ol ul),
-    :where(ol ol) {
-      margin-block-start: 0.75em;
-      margin-block-end: 0.75em;
-    }
-
-    /* Description lists */
-    :where(dl) {
-      font-size: inherit;
-      line-height: inherit;
-      margin-block-start: 1.25em;
-      margin-block-end: 1.25em;
-
-      dt {
-        margin-block-start: 1.25em;
-      }
-
-      dd {
-        margin-block-start: 0.5em;
-        padding-inline-start: 1.625em;
-      }
-    }
-
-    /* Figures */
-    figure {
-      margin-block: 2em;
-
-      & > * {
-        margin-block: 0;
-      }
-
-      & figcaption {
-        font-size: 0.875em;
-        line-height: 1.4285714;
-        margin-block-start: 0.8571429em;
-      }
-    }
-
-    /* Remove top margin from first child */
-    & > :first-child {
-      margin-block-start: 0;
-    }
-
-    /* Remove bottom margin from last child */
-    & > :last-child {
-      margin-block-end: 0;
-    }
-
-    /* Horizontal rules */
-    hr {
-      & + * {
-        margin-block-start: 0;
-      }
-    }
-  }
-}

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/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/table.css

@@ -1,99 +0,0 @@
-@layer components.root {
-  :where(table) {
-    border-collapse: collapse;
-    display: block;
-    margin: var(--size-3) 0;
-    max-inline-size: 100%;
-    position: relative;
-
-    /* Rows */
-    tr {
-      background-color: var(--surface-default);
-      border-top: 1px solid var(--border-color);
-
-      &:hover {
-        background-color: oklch(from var(--surface-filled) l c h / 75%);
-      }
-    }
-
-    /* Cells */
-    th,
-    td {
-      border: 1px solid var(--border-color);
-      padding: var(--size-1) var(--size-2);
-    }
-
-    th {
-      background-color: var(--surface-filled);
-      color: var(--text-color-1);
-      font-size: var(--font-size-sm, 0.75rem);
-      font-weight: 600;
-      text-align: start;
-    }
-
-    td {
-      font-size: var(--font-size-sm, 0.75rem);
-    }
-
-    /* Caption */
-    caption {
-      caption-side: bottom;
-      color: var(--text-color-2);
-      font-size: var(--font-size-sm, 0.75rem);
-      padding: var(--size-2) 0;
-      text-align: start;
-    }
-
-    /* Header */
-    thead {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    }
-
-    /* Footer */
-    tfoot {
-      border-top: 2px solid var(--border-color);
-
-      tr {
-        background-color: var(--surface-filled);
-      }
-
-      td {
-        color: var(--text-color-1);
-        font-weight: 600;
-      }
-    }
-
-    /* Column group */
-    colgroup col {
-      border: none;
-    }
-
-    @container (width < 60ch) {
-      th,
-      td {
-        padding: var(--size-1) 0.875rem;
-      }
-    }
-
-    /* Dense */
-    &.dense {
-      th,
-      td {
-        padding: var(--size-1) var(--size-2);
-      }
-
-      caption {
-        padding: var(--size-1) 0;
-      }
-
-      @container (width < 60ch) {
-        th,
-        td {
-          padding: var(--size-1) var(--size-2);
-        }
-      }
-    }
-  }
-}

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%;
-    }
-  }
-}