opui-css 3.3.5 → 4.0.0

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

@@ -1,281 +0,0 @@
-@layer components.extended {
-  /*
-- Common styling for input, textarea and select
-- Form related styles such as: label, supporting text, error handling
-*/
-  :where(.field) {
-    --_accent-color: var(--primary);
-    --_bg-color: var(--surface-default);
-    --_border-color: var(--field-border-color);
-    --_field-padding-block: 0.75rem;
-    --_field-padding-inline: var(--size-2);
-    --_filled-border-color: var(--text-color-1);
-    --_height: var(--field-size);
-    --_label-color: var(--text-color-2);
-    --_supporting-text-color: var(--text-color-2);
-
-    display: grid;
-    position: relative;
-
-    /* Input/Select base */
-    :where(& input, & textarea, & select) {
-      background-color: var(--_bg-color);
-      block-size: var(--_height);
-      border-radius: var(--field-border-radius);
-      border: var(--field-border-width) solid var(--_border-color);
-      color: var(--text-color-1);
-      font-family: var(--font-sans);
-      font-size: var(--font-size-1);
-      grid-column: 1/-1;
-      grid-row: 2;
-      inline-size: 100%;
-      line-height: var(--font-lineheight-1);
-      min-inline-size: 0;
-      padding: var(--_field-padding-block) var(--_field-padding-inline);
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-          padding-block 0.2s var(--ease-3);
-      }
-    }
-
-    /* Required/Invalid */
-    &:has(
-        :not(:placeholder-shown):invalid,
-        :where(
-            :placeholder-shown,
-            option[value=""]:not(:checked),
-            option:checked:not([value=""])
-          ):required
-      ) {
-      .label:after {
-        color: var(--red);
-        content: "*";
-        margin: -0.25em auto auto 0.25em;
-      }
-    }
-
-    /* File */
-    &:has(input[type="file"]) {
-      cursor: pointer;
-
-      input {
-        align-self: flex-start;
-        block-size: var(--_height);
-        box-shadow: none;
-        color: var(--text-color-1);
-        cursor: inherit;
-        max-inline-size: 100%;
-        padding: 0;
-        transition: font-size 0.2s var(--ease-3);
-
-        &::-webkit-file-upload-button,
-        &::file-selector-button {
-          background-color: var(--surface-tonal);
-          border: none;
-          block-size: calc(100% - var(--size-2) * 2);
-          border-radius: var(--field-border-radius);
-          cursor: pointer;
-          margin-inline-end: 1ex;
-          margin-block-start: var(--size-2);
-          margin-inline-start: var(--size-2);
-        }
-      }
-
-      /* Variants */
-      &.filled {
-        input {
-          &::-webkit-file-upload-button,
-          &::file-selector-button {
-            background-color: var(--surface-default);
-            block-size: calc(100% - var(--size-2) * 2);
-            border-radius: var(--field-border-radius);
-            cursor: pointer;
-            margin-block-start: var(--size-2);
-          }
-        }
-      }
-
-      /* Sizes */
-      &.small {
-        input {
-          font-size: var(--font-size-sm);
-          &::-webkit-file-upload-button,
-          &::file-selector-button {
-            block-size: calc(100% - var(--size-2));
-            margin-block-start: var(--size-1);
-          }
-        }
-      }
-    }
-
-    /* Autosuggest */
-    &:has(input[list]) {
-      .label {
-        /* Make sure chevron is visible */
-        inline-size: calc(100% - var(--size-6));
-      }
-    }
-
-    /* Select */
-    &:has(select) {
-      .label {
-        /* Make sure chevron is visible */
-        inline-size: calc(100% - var(--size-6));
-      }
-    }
-
-    /* Experimental Select */
-    &:has(select button) {
-      select {
-        padding: 0;
-
-        button {
-          outline: 0;
-          padding: var(--_field-padding-block) var(--size-8)
-            var(--_field-padding-block) var(--_field-padding-inline);
-        }
-      }
-    }
-
-    /* Non-experimental Select */
-    &:has(select):not(:has(button)) {
-      select {
-        padding: var(--_field-padding-block) var(--size-8)
-          var(--_field-padding-block) var(--_field-padding-inline);
-      }
-    }
-
-    /* Input - color */
-    &:has(input[type="color"]) {
-      input {
-        appearance: none;
-        background: none;
-        block-size: var(--_height);
-        inline-size: var(--_height);
-        overflow: hidden;
-        padding: 0;
-
-        &::-webkit-color-swatch {
-          border: none;
-        }
-
-        &::-webkit-color-swatch-wrapper {
-          padding: 0;
-        }
-      }
-    }
-
-    /* Element states */
-    &:hover {
-      &:not(.error) {
-        :where(input, textarea, select) {
-          --_border-color: var(--text-color-1);
-        }
-      }
-    }
-
-    &:focus-within {
-      & input,
-      & textarea,
-      & select {
-        border-color: var(--_accent-color);
-        outline-offset: -2px;
-        outline: 2px solid var(--_accent-color);
-      }
-    }
-
-    /* Label */
-    .label {
-      font-size: var(--font-size-sm);
-      grid-column: 1/-1;
-      grid-row: 1;
-    }
-
-    /* Supporting text */
-    .supporting-text {
-      color: var(--_supporting-text-color);
-      font-size: var(--font-size-xs);
-      grid-column: 1/-1;
-      grid-row: 3;
-      line-height: 1.5;
-    }
-
-    /* Auto-fit */
-    &.auto-fit {
-      inline-size: auto;
-
-      :where(& input, & textarea) {
-        field-sizing: content;
-        inline-size: auto;
-      }
-    }
-
-    /* Validation */
-    &.error {
-      --_accent-color: var(--color-9);
-      --_border-color: var(--color-9);
-      --_filled-border-color: var(--color-9);
-      --_label-color: var(--color-9);
-      --_supporting-text-color: var(--color-9);
-    }
-
-    /*
-  * Variant: Filled
-  */
-    &.filled {
-      --_bg-color: var(--surface-tonal);
-
-      &:not(:has([disabled], :has(input[type="color"]))) {
-        /* Hover */
-        &:hover {
-          --_bg-color: light-dark(
-            oklch(from var(--surface-tonal) calc(l * 0.93) c h),
-            oklch(from var(--surface-tonal) calc(l * 1.1) c h)
-          );
-        }
-      }
-    }
-
-    /* Disabled */
-    &:where(:has([disabled])) {
-      &::before {
-        display: none;
-      }
-      :where(input, textarea, select) {
-        cursor: not-allowed;
-        opacity: 0.7;
-
-        * {
-          pointer-events: none;
-        }
-      }
-    }
-
-    /* Read-only */
-    &:where(:has([readonly])) {
-      &::before {
-        display: none;
-      }
-      :where(input, textarea, select) {
-        cursor: not-allowed;
-
-        * {
-          pointer-events: none;
-        }
-      }
-    }
-
-    /* Sizes */
-    &.small {
-      --_field-padding-block: var(--size-2);
-      --_height: var(--field-size-small);
-
-      &:has(input[type="color"]) {
-        .label {
-          line-height: 1.5;
-        }
-      }
-    }
-  }
-}

package/src/themes/theme-two/components/icon-button.css

@@ -1,40 +0,0 @@
-@layer components.root {
-  :where(.icon-button) {
-    --_text-color: inherit;
-
-    align-items: center;
-    aspect-ratio: 1;
-    background-color: transparent;
-    border: 0;
-    border-radius: var(--radius-round);
-    display: inline-flex;
-    inline-size: var(--size-6);
-    justify-content: center;
-    padding: 0;
-    transform-style: preserve-3d;
-
-    &:where([disabled]) {
-      color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
-      cursor: not-allowed;
-      opacity: 0.64;
-    }
-
-    svg {
-      max-inline-size: var(--size-5);
-      pointer-events: none;
-    }
-
-    /* Ripple effect, utils.css */
-    &::before {
-      --highlight-size: 130%;
-    }
-
-    /* Size */
-    &.small {
-      inline-size: var(--size-4);
-      svg {
-        max-inline-size: var(--size-4);
-      }
-    }
-  }
-}

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

@@ -1,83 +0,0 @@
-@layer components.root {
-  :where(progress) {
-    --_accent-color: var(--primary);
-    --_bg-color: var(--surface-tonal);
-
-    appearance: none;
-    background-color: var(--_bg-color);
-    border-radius: var(--border-radius, 0.25rem);
-    border: 0;
-    display: inline-block;
-    block-size: var(--size-1);
-    overflow: hidden;
-    position: relative;
-    vertical-align: baseline;
-    inline-size: 100%;
-
-    &::-webkit-progress-bar {
-      border-radius: var(--border-radius, 0.25rem);
-      background: none;
-    }
-
-    &[value]::-webkit-progress-value {
-      background-color: var(--_accent-color);
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: inline-size 0.2s
-          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
-      }
-    }
-
-    &::-moz-progress-bar {
-      background-color: var(--_accent-color);
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    progress:indeterminate {
-      background-color: var(--_bg-color);
-
-      &::after {
-        animation: indeterminate 2s linear infinite;
-        background-color: var(--_accent-color);
-        content: "";
-        inset: 0 auto 0 0;
-        position: absolute;
-        will-change: inset-inline-start, inset-inline-end;
-      }
-
-      &[value]::-webkit-progress-value {
-        background-color: transparent;
-      }
-
-      &::-moz-progress-bar {
-        background-color: transparent;
-      }
-    }
-
-    [dir="rtl"] {
-      :where(progress):indeterminate {
-        animation-direction: reverse;
-
-        &::after {
-          animation-direction: reverse;
-        }
-      }
-    }
-  }
-
-  @keyframes indeterminate {
-    0% {
-      left: -200%;
-      right: 100%;
-    }
-    60% {
-      left: 107%;
-      right: -8%;
-    }
-    100% {
-      left: 107%;
-      right: -8%;
-    }
-  }
-}

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

@@ -1,121 +0,0 @@
-@layer components.root {
-  :where(.range > input[type="range"]) {
-    --thumb-bg: var(--primary);
-    --thumb-highlight-color: oklch(from var(--primary) 70% 100% h / 20%);
-    --thumb-highlight-size: 0px;
-    --thumb-offset: -1ex;
-    --thumb-size: 3ex;
-    --track-color: var(--field-border-color);
-    --track-fill: 0%;
-    --track-height: 1ex;
-
-    appearance: none;
-    background: transparent;
-    display: block;
-    inline-size: 100%;
-    margin: 1ex 0 3ex;
-    outline-offset: 1ex;
-
-    @media (hover: none) {
-      --thumb-offset: -14px;
-      --thumb-size: 30px;
-    }
-
-    /* Track */
-    &::-webkit-slider-runnable-track {
-      appearance: none;
-      background: linear-gradient(
-          to right,
-          transparent var(--track-fill),
-          var(--track-color) 0%
-        ),
-        var(--primary);
-      block-size: var(--track-height);
-      border-radius: 5ex;
-      box-shadow: var(--inner-shadow-1);
-    }
-
-    &::-moz-range-track {
-      appearance: none;
-      background: linear-gradient(
-          to right,
-          transparent var(--track-fill),
-          var(--track-color) 0%
-        ),
-        var(--primary);
-      block-size: var(--track-height);
-      border-radius: 5ex;
-      box-shadow: var(--inner-shadow-2);
-    }
-
-    /* Ring */
-    &::-webkit-slider-thumb {
-      appearance: none;
-      background: var(--thumb-bg);
-      block-size: var(--thumb-size);
-      border-radius: 50%;
-      border: 3px solid var(--surface-default);
-      box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
-      cursor: ew-resize;
-      inline-size: var(--thumb-size);
-      margin-block-start: var(--thumb-offset);
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: box-shadow 0.1s ease;
-      }
-
-      .fieldset-item:focus-within & {
-        border-color: var(--gray-14);
-      }
-    }
-
-    &::-moz-range-thumb {
-      appearance: none;
-      background: var(--thumb-bg);
-      block-size: var(--thumb-size);
-      border-radius: 50%;
-      border: 3px solid var(--primary);
-      box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
-      cursor: ew-resize;
-      inline-size: var(--thumb-size);
-      margin-block-start: var(--thumb-offset);
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: box-shadow 0.1s ease;
-      }
-
-      .fieldset-item:focus-within & {
-        border-color: var(--gray-14);
-      }
-    }
-
-    /* Element state */
-    &:not([disabled]) {
-      &:hover {
-        --thumb-highlight-size: var(--size-1);
-      }
-
-      &:active {
-        --thumb-highlight-size: var(--size-2);
-        --track-color: light-dark(
-          oklch(from var(--field-border-color) calc(l * 0.9) c h),
-          oklch(from var(--field-border-color) calc(l * 1.1) c h)
-        );
-      }
-    }
-
-    &[disabled] {
-      --thumb-bg: oklch(from var(--text-color-1) l c h / 50%);
-      --track-color: var(--field-border-color);
-
-      cursor: not-allowed;
-
-      &::-webkit-slider-thumb {
-        cursor: not-allowed;
-      }
-      &::-moz-range-thumb {
-        cursor: not-allowed;
-      }
-    }
-  }
-}