opui-css 2.3.0 → 2.4.0

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

@@ -1,317 +0,0 @@
-@layer components.extended {
-  /*
-Lists meant to be used stand-alone or as part of Select elements
-
-  Intended use-case:
-  - ul.list > li
-  - .select > .list > option
-*/
-  :where(.list) {
-    --_bg-color: light-dark(var(--gray-1), var(--gray-15));
-
-    background-color: var(--_bg-color);
-    list-style: none;
-    padding: var(--size-2) 0;
-
-    @media (pointer: coarse) {
-      &,
-      * {
-        user-select: none;
-      }
-    }
-
-    /* Borders on all list items */
-    &.bordered {
-      :where(li + li, option + option) {
-        margin-block-start: var(--size-3);
-        &::before {
-          block-size: 1px;
-          border-block-start: 1px solid var(--border-color);
-          content: "";
-          display: block;
-          inline-size: 100%;
-          inset: calc(-1 * var(--size-2)) 0 auto 0;
-          position: absolute;
-          visibility: visible; /* override select > option:before style */
-        }
-      }
-    }
-
-    /* Dense - less gaps and spacing */
-    &.dense {
-      :where(li, option) {
-        gap: var(--size-2);
-        min-block-size: var(--size-7);
-        padding: var(--size-1) var(--size-2);
-
-        &.border-top {
-          margin-block-start: var(--size-2);
-          &::before {
-            inset: calc(-1 * var(--size-1)) 0 auto 0;
-          }
-        }
-
-        /* Clickable list item */
-        &:has(> a, > button, > label) {
-          min-block-size: auto;
-          padding: 0;
-        }
-
-        & > :where(a, button, label) {
-          gap: var(--size-2);
-          min-block-size: var(--size-7);
-          padding: var(--size-1) var(--size-2);
-        }
-
-        /* Checkbox / Radio */
-        & > label {
-          .end {
-            padding-inline-end: 0.125rem;
-          }
-        }
-
-        /* Leading and trailing content */
-        .start,
-        .end {
-          .avatar {
-            max-inline-size: var(--size-6);
-          }
-
-          .icon-button,
-          svg {
-            max-inline-size: var(--size-4);
-          }
-
-          .checkbox,
-          .radio {
-            max-inline-size: var(--size-3);
-          }
-        }
-      }
-    }
-
-    /* Gutterless */
-    &.gutterless {
-      :where(li, option) {
-        padding-inline: 0;
-
-        & > :where(a, button, label) {
-          padding-inline: 0;
-        }
-      }
-    }
-
-    /* List item */
-    :where(li, option, [role="group"] > label) {
-      align-items: center;
-      background: var(--_bg-color) var(--ripple, none);
-      display: flex;
-      font-size: var(--font-size-sm);
-      gap: var(--size-3);
-      isolation: isolate;
-      min-block-size: 40px;
-      padding: var(--size-2) var(--size-3);
-      position: relative;
-
-      &::before {
-        display: none; /* removing checkmark from option */
-      }
-
-      * {
-        font-size: inherit;
-      }
-
-      /* Clickable list item */
-      &:has(> a, > button, > label) {
-        background: transparent;
-        display: block;
-        min-block-size: auto;
-        padding: 0;
-      }
-
-      /* Select option */
-      &:where(option) {
-        align-items: center;
-        background-color: var(--_bg-color);
-        color: inherit;
-        cursor: pointer;
-        display: flex;
-        gap: var(--size-3);
-        inline-size: 100%;
-        margin: 0;
-        min-block-size: 40px;
-        padding: var(--size-2) var(--size-3);
-        text-align: start;
-        text-decoration: none;
-        z-index: 0;
-
-        &:hover {
-          background-color: light-dark(var(--gray-2), var(--gray-14));
-        }
-
-        &:checked {
-          background-color: oklch(from var(--primary) l c h / 30%);
-        }
-      }
-
-      & > a,
-      & > button,
-      & > label {
-        align-items: center;
-        background: var(--_bg-color) var(--ripple, none);
-        color: inherit;
-        cursor: pointer;
-        display: flex;
-        gap: var(--size-3);
-        inline-size: 100%;
-        margin: 0;
-        min-block-size: 40px;
-        outline-offset: -3px;
-        padding: var(--size-2) var(--size-3);
-        text-align: start;
-        text-decoration: none;
-        z-index: 0;
-
-        /*** Ripple effect */
-        background-position: center;
-        transition: background var(--button-ripple-duration);
-        &:where(:not(:active):hover) {
-          --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
-            center/15000%;
-        }
-
-        &:where(:hover:active) {
-          background-size: var(--button-ripple-size);
-          transition: background 0s;
-        }
-
-        &:hover {
-          background-color: light-dark(var(--gray-2), var(--gray-14));
-        }
-
-        /*** Remove ripple effect when trailing button is clicked */
-        &:has(.end:hover) {
-          &:where(:not(:active):hover) {
-            --ripple: none;
-          }
-        }
-      }
-
-      /* Checkbox / Radio / Switch */
-      & > label {
-        .end {
-          padding-inline-end: var(--size-1);
-        }
-
-        &:where(.checkbox, .radio) {
-          inline-size: 100%;
-        }
-
-        &.switch {
-          --_dot-size: 0.75rem;
-          --_track-height: var(--size-4);
-          --_track-width: 2.5rem;
-        }
-      }
-
-      /* Video */
-      &:has(video) {
-        padding: 0.75rem var(--size-3) 0.75rem 0;
-      }
-
-      /* Border between list items */
-      &.border-top {
-        margin-block-start: var(--size-3);
-        &::before {
-          block-size: 1px;
-          border-block-start: 1px solid var(--border-color);
-          content: "";
-          display: block;
-          inline-size: 100%;
-          inset: calc(-1 * var(--size-2)) 0 auto 0;
-          position: absolute;
-        }
-      }
-
-      /* Text */
-      .text {
-        flex: 1;
-        line-height: 1.6;
-
-        :where(h1, h2, h3, h4, h5, h6, p, span) {
-          color: inherit;
-          font-weight: 400;
-        }
-
-        p + p {
-          font-size: var(--font-size-xs);
-        }
-      }
-
-      /* Leading content */
-      .start {
-        align-self: center;
-        align-items: center;
-        display: grid;
-        z-index: 1;
-
-        &:has(svg) {
-          max-inline-size: var(--size-5);
-        }
-
-        svg {
-          padding-block-start: 0.125rem;
-        }
-
-        img {
-          aspect-ratio: 1;
-          inline-size: 56px;
-          object-fit: cover;
-        }
-
-        video {
-          aspect-ratio: 16/9;
-          block-size: 64px;
-          object-fit: cover;
-        }
-      }
-
-      /* Trailing content */
-      .end {
-        align-items: center;
-        display: flex;
-        font-size: var(--font-size-xs);
-        text-align: end;
-        z-index: 1;
-
-        &:not(:has(a, button, input)) {
-          pointer-events: none;
-        }
-
-        kbd {
-          background-color: transparent;
-          border: 0;
-          color: inherit;
-          opacity: 0.6;
-        }
-
-        svg {
-          max-inline-size: var(--size-5);
-          inline-size: 100%;
-        }
-      }
-
-      /* Inset */
-      &.inset {
-        .text {
-          padding-inline-start: calc(var(--size-5) + var(--size-3));
-        }
-
-        /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
-        .start {
-          display: none;
-        }
-      }
-    }
-  }
-}

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

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