opui-css 2.2.3 → 2.3.0

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

@@ -0,0 +1,317 @@
+@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

@@ -0,0 +1,83 @@
+@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

@@ -0,0 +1,121 @@
+@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

@@ -0,0 +1,210 @@
+@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;
+      }
+    }
+  }
+}