opui-css 3.3.5 → 4.0.0

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

@@ -1,281 +0,0 @@
-@layer components.root {
-  :where(.button) {
-    --_bg-color: transparent;
-    --_border-color: transparent;
-    --_border-radius: var(--button-border-radius);
-    --_font-size: initial;
-    --_min-height: 2.375rem;
-    --_text-color: var(--primary);
-
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    align-items: center;
-    background: var(--_bg-color) var(--ripple, none);
-    border-radius: var(--_border-radius);
-    border: var(--border-size-1) solid var(--_border-color);
-    color: var(--_text-color);
-    display: inline-flex;
-    font-size: var(--_font-size);
-    font-weight: 700;
-    gap: var(--size-2);
-    justify-content: center;
-    min-block-size: var(--_min-height);
-    padding-block: 0.5ex;
-    padding-inline: 1.5ex;
-    text-align: center;
-    text-decoration: none;
-
-    user-select: none;
-
-    &:where([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.64;
-    }
-
-    @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);
-
-      /* 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;
-        }
-      }
-    }
-
-    /* Element states */
-    &:where(:not([disabled])) {
-      &:where(:not(:active):hover) {
-        --_bg-color: light-dark(
-          oklch(from var(--primary) l 0.01 h / 20%),
-          oklch(from var(--primary) l 0.01 h / 40%)
-        );
-      }
-
-      &:where(:hover:active) {
-        --_bg-color: light-dark(
-          oklch(from var(--primary) l 0.06 h / 30%),
-          oklch(from var(--primary) l 0.06 h / 40%)
-        );
-      }
-    }
-
-    /* Disabled */
-    &:where([disabled]) {
-      --_text-color: color-mix(
-        in oklch,
-        var(--text-color-2) 50%,
-        var(--surface-default)
-      );
-    }
-
-    /* Icon */
-    &:where(:has(svg), &.icon-only) {
-      gap: 1ex;
-
-      svg {
-        max-block-size: 0.7lh;
-        color: currentColor;
-      }
-    }
-
-    /* Keyboard input */
-    :is(kbd) {
-      background-color: inherit;
-      border-color: currentColor;
-      color: inherit;
-      font-size: 0.85em;
-      line-height: 1.2;
-    }
-
-    /* Sizes */
-    &.small {
-      --_min-height: 1.875rem;
-      padding-block: 0;
-      padding-inline: 1ex;
-    }
-
-    &.large {
-      --_min-height: 2.875rem;
-      padding-inline: 4ex;
-    }
-
-    /* Variants */
-    &.outlined {
-      --_bg-color: var(--surface-default);
-      --_border-color: var(--color-8);
-      --_text-color: var(--color-8);
-
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --_bg-color: var(--color-10);
-          --_border-color: var(--color-10);
-          --_text-color: var(--color-1);
-        }
-
-        &:where(:active) {
-          --_bg-color: var(--color-9);
-          --_border-color: var(--color-9);
-          --_text-color: var(--color-1);
-        }
-      }
-
-      &:where([disabled]) {
-        --_bg-color: var(--surface-default);
-        --_border-color: color-mix(
-          in oklch,
-          var(--text-color-2) 20%,
-          var(--surface-default)
-        );
-        --_text-color: color-mix(
-          in oklch,
-          var(--text-color-2) 40%,
-          var(--surface-default)
-        );
-      }
-    }
-    &.tonal {
-      --_bg-color: var(--color-6);
-      --_text-color: var(--color-16);
-
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --_bg-color: var(--color-9);
-          --_border-color: var(--color-9);
-        }
-
-        &:where(:active) {
-          --_bg-color: var(--color-7);
-          --_border-color: var(--color-7);
-        }
-      }
-
-      &:where([disabled]) {
-        --_bg-color: color-mix(
-          in oklch,
-          var(--text-color-2) 8%,
-          var(--surface-default)
-        );
-        --_text-color: color-mix(
-          in oklch,
-          var(--text-color-2) 70%,
-          var(--surface-default)
-        );
-      }
-    }
-    &.filled {
-      --_bg-color: var(--color-8);
-      --_text-color: var(--color-1);
-
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --_bg-color: var(--color-10);
-          --_border-color: var(--color-10);
-        }
-
-        &:where(:active) {
-          --_bg-color: var(--color-9);
-          --_border-color: var(--color-9);
-        }
-      }
-
-      &:where([disabled]) {
-        --_bg-color: color-mix(
-          in oklch,
-          var(--text-color-2) 20%,
-          var(--surface-default)
-        );
-        --_text-color: color-mix(
-          in oklch,
-          var(--text-color-2) 70%,
-          var(--surface-default)
-        );
-      }
-    }
-    &.elevated {
-      --_bg-color: light-dark(
-        color-mix(in oklch, var(--gray-2) 97%, var(--color-16)),
-        color-mix(in oklch, var(--gray-13) 97%, var(--color-1))
-      );
-      --_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))
-      );
-      --_text-color: var(--color-8);
-
-      box-shadow:
-        0px 3px 1px -2px oklch(0 0 0 / 20%),
-        0px 2px 2px 0px oklch(0 0 0 / 14%),
-        0px 1px 5px 0px oklch(0 0 0 / 12%);
-
-      &:where(:not([disabled])) {
-        &:where(:not(:active):hover) {
-          --ripple: radial-gradient(
-              circle,
-              transparent 1%,
-              var(--_ripple-color) 1%
-            )
-            center/15000%;
-
-          --_bg-color: light-dark(
-            color-mix(in oklch, var(--gray-2) 93%, var(--color-8)),
-            color-mix(in oklch, var(--gray-13) 93%, var(--color-8))
-          );
-        }
-
-        &:where(:hover:active) {
-          --_bg-color: light-dark(
-            color-mix(in oklch, var(--gray-2) 91%, var(--color-8)),
-            color-mix(in oklch, var(--gray-13) 91%, var(--color-8))
-          );
-        }
-      }
-
-      &:where([disabled]) {
-        --_bg-color: color-mix(
-          in oklch,
-          var(--text-color-2) 8%,
-          var(--surface-elevated)
-        );
-        --_text-color: color-mix(
-          in oklch,
-          var(--text-color-2) 70%,
-          var(--surface-elevated)
-        );
-      }
-    }
-  }
-
-  /* file input */
-  :where(input[type="file"]) {
-    align-self: flex-start;
-    border-radius: var(--radius-2);
-    border: var(--border-size-1) solid var(--surface-filled);
-    box-shadow: var(--inner-shadow-4);
-    color: var(--text-color-2-contrast);
-    cursor: initial;
-    max-inline-size: 100%;
-    padding: 0;
-  }
-
-  :where(input[type="file"])::-webkit-file-upload-button,
-  :where(input[type="file"])::file-selector-button {
-    cursor: pointer;
-    margin-inline-end: var(--size-relative-6);
-  }
-}

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

@@ -1,82 +0,0 @@
-@layer components.root {
-  :where(.card) {
-    --_bg-color: transparent;
-    --_border-color: transparent;
-    --_border-width: 0;
-    --_shadow: none;
-
-    background-color: var(--_bg-color);
-    border-color: var(--_border-color);
-    border-radius: var(--border-radius, 0.25rem);
-    border-style: solid;
-    border-width: var(--_border-width);
-    box-shadow: var(--_shadow);
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-3);
-    overflow: hidden;
-    padding-inline: 0;
-
-    /* Variants */
-    &.text {
-      --_bg-color: transparent;
-      --_border-color: transparent;
-      --_border-width: 0;
-      --_shadow: none;
-      padding-inline: 0;
-    }
-
-    &.tonal {
-      --_bg-color: var(--surface-tonal);
-      --_border-width: 1px;
-    }
-
-    &.elevated {
-      --_bg-color: var(--surface-elevated);
-      --_border-color: transparent;
-      --_border-width: 0;
-      --_shadow: var(--shadow-3);
-
-      /* Adjust shadow in dark mode */
-      @container style(--color-scheme: dark) {
-        --_shadow: var(--shadow-4);
-      }
-    }
-
-    &.outlined {
-      --_bg-color: var(--surface-default);
-      --_border-color: var(--border-color);
-      --_border-width: 1px;
-    }
-
-    & > :where(hgroup, .content) {
-      padding-inline: var(--size-3);
-    }
-
-    & > hgroup {
-      padding-block: var(--size-3) 0;
-
-      /* Top paragraph */
-      & > p:first-of-type:first-child {
-        line-height: 1.3;
-      }
-
-      /* Bottom paragraph */
-      & > p:last-of-type:last-child:not(:first-child) {
-        font-size: var(--font-size-1, 1rem);
-      }
-    }
-
-    & > .content:where(:only-child, :first-child) {
-      padding-block: var(--size-3) var(--size-4);
-    }
-
-    & > .actions {
-      display: flex;
-      gap: var(--size-1);
-      margin-block: var(--size-2) 0;
-      padding-block-end: var(--size-1);
-      padding-inline: var(--size-1) var(--size-3);
-    }
-  }
-}

package/src/themes/theme-one/components/checkbox-radio.css

@@ -1,123 +0,0 @@
-@layer components.root {
-  label:where(.checkbox, .radio) {
-    align-items: center;
-    color: var(--text-color-1);
-    cursor: pointer;
-    display: inline-grid;
-    gap: 0 var(--size-2);
-    grid-auto-columns: auto;
-    grid-auto-flow: column;
-    inline-size: fit-content;
-    line-height: 1.5;
-    transform: translateZ(0);
-    user-select: none;
-
-    /* Disabled */
-    &:has([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.64;
-      user-select: none;
-
-      input {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Required dot */
-    &:has([required]:not([type="checkbox"]:checked)) {
-      .label:after {
-        color: var(--red);
-        content: "*";
-        inset: 0 -0.25ex auto auto;
-        position: absolute;
-      }
-    }
-
-    /* Label */
-    .label {
-      grid-column: 2;
-      grid-row: 1;
-      position: relative;
-      padding-inline: 0 1ex;
-    }
-
-    /* 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;
-    }
-
-    /* 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;
-
-        /* Required dot */
-        &::after {
-          inset: 0 -0.25ex auto auto;
-        }
-      }
-
-      .supporting-text {
-        grid-column: 1/-1;
-        grid-row: 3;
-      }
-    }
-
-    /* Input */
-    input {
-      aspect-ratio: 1;
-      block-size: 1.125rem;
-      cursor: pointer;
-      inline-size: 1.125rem;
-
-      &::before {
-        --highlight-size: 175%;
-      }
-    }
-
-    /* Sizes */
-    &.small {
-      input {
-        block-size: var(--size-3);
-        inline-size: var(--size-3);
-      }
-    }
-
-    &.large {
-      input {
-        block-size: var(--size-4);
-        inline-size: var(--size-4);
-      }
-    }
-
-    /* Validation */
-    &.error {
-      input[type="checkbox"] {
-        accent-color: var(--color-9);
-
-        & ~ :where(.label, .supporting-text) {
-          color: var(--color-9);
-        }
-      }
-    }
-
-    /* Touch devices */
-    @media (pointer: coarse) {
-      input {
-        block-size: var(--size-4);
-        inline-size: var(--size-4);
-      }
-    }
-  }
-}

package/src/themes/theme-one/components/definition-list.css

@@ -1,68 +0,0 @@
-@layer components.root {
-  :where(.definition-list) {
-    --_border-style: solid;
-    --_border-width: 1px;
-
-    display: grid;
-    gap: var(--size-3);
-    padding: 0;
-
-    &.dotted {
-      --_border-style: dotted;
-      --_border-width: 2px;
-    }
-
-    li {
-      display: grid;
-      margin: 0;
-      padding: 0;
-
-      .term {
-        display: block;
-        font-weight: 700;
-        overflow: hidden;
-        position: relative;
-      }
-
-      hr {
-        display: none;
-        margin: 0;
-      }
-    }
-
-    @container (width > 45ch) {
-      gap: var(--size-1);
-
-      li {
-        align-items: baseline;
-        display: grid;
-        gap: var(--size-1);
-        grid-template-columns: 1fr auto;
-
-        &:has(hr) {
-          grid-template-columns: auto 1fr auto;
-        }
-
-        hr {
-          background-color: transparent;
-          border-block-end: var(--_border-width) var(--_border-style)
-            var(--border-color);
-          block-size: 2px;
-          display: block;
-        }
-
-        .term {
-          inline-size: max-content;
-
-          &::after {
-            display: inline-block;
-          }
-        }
-        .description {
-          color: var(--text-color-2);
-          text-align: end;
-        }
-      }
-    }
-  }
-}

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

@@ -1,59 +0,0 @@
-@layer components.extended {
-  :where(dialog) {
-    margin-block-start: 15%; /* vertical alignment */
-    padding-block: 0;
-    pointer-events: none;
-
-    &::backdrop {
-      background-color: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(5px);
-
-      @media (prefers-reduced-motion: reduce) {
-        backdrop-filter: none;
-      }
-    }
-
-    &:not([open]) {
-      display: none;
-    }
-
-    &[open] {
-      pointer-events: all;
-    }
-
-    .actions {
-      justify-content: end;
-      padding-inline: var(--size-3) var(--size-1);
-    }
-
-    /* Animation */
-    /* There's no close animation, intentionally */
-    opacity: 0;
-
-    &[open] {
-      opacity: 1;
-      transition: display 0.2s allow-discrete,
-        margin-block-start 0.3s var(--ease-1), overlay 0.2s allow-discrete,
-        opacity 0.2s var(--ease-out-1);
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-      margin-block-start: 17%;
-      &[open] {
-        margin-block-start: 15%;
-
-        @starting-style {
-          margin-block-start: 17%;
-        }
-      }
-    }
-  }
-
-  :where(html:has(dialog[open])) {
-    overflow: hidden;
-  }
-}

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

@@ -1,7 +0,0 @@
-@layer components.root {
-  :where(hr) {
-    background-color: var(--border-color);
-    block-size: var(--border-size-1);
-    margin-block: var(--size-fluid-3);
-  }
-}

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

@@ -1,83 +0,0 @@
-@layer components.extended {
-  /* Common styling for checkbox, radio and switch groups */
-  :where(fieldset.field-group) {
-    border: 0;
-    border-radius: 0;
-    gap: 0;
-    padding: 0;
-    z-index: 1;
-
-    legend {
-      color: var(--text-color-2);
-      padding: 0 1ex 0 0;
-    }
-
-    /* Disabled */
-    &[disabled] {
-      cursor: not-allowed;
-      opacity: 0.64;
-      user-select: none;
-
-      input {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Validation */
-    &.error {
-      legend,
-      .supporting-text {
-        color: var(--color-9);
-      }
-    }
-
-    /* Required */
-    &:has([required]) {
-      &:not(:has(input:where([type="radio"], [type="checkbox"]):checked)) {
-        legend {
-          position: relative;
-
-          &::after {
-            color: var(--red);
-            content: "*";
-            inset: 0 -0.25ex auto auto;
-            position: absolute;
-          }
-        }
-      }
-    }
-    :where(.radio, .checkbox, .switch) .label:after {
-      display: none;
-    }
-
-    /* Supporting text */
-    .supporting-text {
-      color: var(--text-color-2);
-      font-size: var(--font-size-xs);
-      line-height: 1.5;
-      z-index: 1;
-    }
-
-    /* Fields */
-    .fields {
-      display: flex;
-      flex-direction: column;
-      gap: var(--size-2);
-
-      * ~ & {
-        padding: var(--size-2) 0;
-      }
-    }
-
-    :last-child {
-      padding-block-end: 0;
-    }
-
-    /* Directions */
-    &.row {
-      .fields {
-        flex-direction: row;
-      }
-    }
-  }
-}