opui-css 2.4.0 → 3.0.0

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

@@ -0,0 +1,101 @@
+@layer components.root {
+  :where(.badge) {
+    --_bg-color: var(--primary);
+    --_border-color: var(--primary);
+    --_color: var(--gray-1);
+    --_inset-offset: 16px;
+    --_inset: auto auto calc(100% - var(--_inset-offset))
+      calc(100% - var(--_inset-offset));
+    --_translate: 0;
+
+    display: inline-flex;
+    position: relative;
+
+    &::after {
+      background-color: var(--_bg-color);
+      border: 2px solid var(--_border-color);
+      border-radius: 100vmax;
+      color: var(--_color);
+      content: attr(aria-label);
+      font-size: 12px;
+      font-weight: 500;
+      block-size: var(--size-4);
+      line-height: normal;
+      min-inline-size: var(--size-4, 1.125rem);
+      padding-inline: var(--size-1);
+      inset: var(--_inset);
+      position: absolute;
+      text-align: center;
+      translate: var(--_translate);
+      transition: opacity 0.2s var(--ease-out-1);
+      inline-size: max-content;
+    }
+
+    /* Alignment */
+    &.start-start {
+      --_inset: auto calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset)) auto;
+    }
+    &.start-end {
+      --_inset: auto auto calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset));
+    }
+    &.end-start {
+      --_inset: calc(100% - var(--_inset-offset))
+        calc(100% - var(--_inset-offset)) auto auto;
+    }
+    &.end-end {
+      --_inset: calc(100% - var(--_inset-offset)) auto auto
+        calc(100% - var(--_inset-offset));
+    }
+
+    /* Dot */
+    &.dot {
+      --_inset: 0 -1px auto auto;
+      &::after {
+        content: "";
+        min-inline-size: var(--size-2);
+        block-size: var(--size-2);
+        inline-size: var(--size-2);
+        padding: 0;
+      }
+    }
+
+    /* Visibility */
+    &.invisible {
+      &::after {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    /* Colors */
+    &.error,
+    &.good,
+    &.ok,
+    &.warning {
+      --_bg-color: var(--color-8);
+      --_border-color: var(--color-8);
+    }
+  }
+
+  [dir="rtl"] {
+    :where(.badge) {
+      --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
+
+      /* Alignment */
+      &.start-start {
+        --_inset: auto auto calc(100% - 16px) calc(100% - 16px);
+      }
+      &.start-end {
+        --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
+      }
+      &.end-start {
+        --_inset: calc(100% - 16px) auto auto calc(100% - 16px);
+      }
+      &.end-end {
+        --_inset: calc(100% - 16px) calc(100% - 16px) auto auto;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+@layer components.extended {
+  :where([role="group"].button-group) {
+    --_border-radius: var(--button-border-radius);
+
+    border-radius: var(--_border-radius);
+    display: inline-flex;
+    min-width: max-content;
+
+    button {
+      border-radius: 0;
+
+      svg {
+        max-inline-size: 0.7lh;
+      }
+
+      &:focus-visible {
+        outline-offset: -4px;
+      }
+
+      & + & {
+        border-inline-width: 1px;
+        margin-inline-start: -1px;
+      }
+
+      &:first-of-type {
+        border-bottom-left-radius: var(--_border-radius);
+        border-top-left-radius: var(--_border-radius);
+      }
+      &:last-of-type {
+        border-bottom-right-radius: var(--_border-radius);
+        border-top-right-radius: var(--_border-radius);
+      }
+
+      /* Variants */
+      &:where(.tonal, .filled) {
+        & + button {
+          border-inline-start-color: var(--color-7);
+        }
+
+        & + &[disabled] {
+          border-inline-start-color: color-mix(
+            in oklch,
+            var(--border-color) 90%,
+            white
+          );
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,217 @@
+@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;
+      }
+    }
+
+    /* 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)
+        );
+      }
+    }
+  }
+
+  /* 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-two/components/card.css

@@ -0,0 +1,82 @@
+@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-two/components/checkbox-radio.css

@@ -0,0 +1,123 @@
+@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-two/components/chip.css

@@ -0,0 +1,135 @@
+@layer components.root {
+  :where(.chip) {
+    --_bg-color: var(--surface-tonal);
+    --_border-color: var(--border-color);
+    --_color: var(--text-color-1);
+
+    align-items: center;
+    background: var(--_bg-color) var(--ripple, none);
+    border: 1px solid var(--_border-color);
+    border-radius: var(--radius-2, 0.5rem);
+    color: var(--_color);
+    display: inline-flex;
+    font-size: var(--font-size-0, 0.75rem);
+    gap: var(--size-1);
+    block-size: var(--size-7, 2rem);
+    padding-inline: var(--size-2);
+    text-decoration: none;
+
+    /* Variants */
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+      --_color: var(--text-color-1);
+    }
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_color: var(--text-color-1);
+    }
+
+    /* TODO: should this be out of the box? */
+    /* Colors */
+    /* &:hover {
+      --_bg-color: var(--color-11);
+      --_border-color: var(--color-11);
+      --_color: var(--text-color-1);
+    } */
+    /* &.red,
+    &.blue,
+    &.green,
+    &.orange,
+    &.primary {
+      --_bg-color: var(--color-5);
+      --_border-color: var(--color-7);
+      --_color: var(--text-color-1-contrast);
+
+      &:hover {
+        --_bg-color: var(--color-7);
+        --_border-color: var(--color-7);
+        --_color: var(--text-color-1-contrast);
+
+        &:active {
+          --_bg-color: var(--color-8);
+          --_border-color: var(--color-8);
+        }
+      }
+
+      &.outlined {
+        --_bg-color: var(--surface-tonal);
+        --_color: var(--text-color-1);
+        --_border-color: var(--color-9);
+
+        &:hover {
+          --_bg-color: var(--color-9);
+          --_border-color: var(--color-9);
+          --_color: var(--text-color-1);
+
+          &:active {
+            --_bg-color: var(--color-11);
+            --_border-color: var(--color-11);
+          }
+        }
+      }
+    } */
+
+    &:where(button, a):where(:not([disabled])) {
+      &:where(:not(:active)):hover {
+        --_bg-color: light-dark(
+          oklch(from var(--surface-tonal) calc(l * 0.98) c h),
+          oklch(from var(--surface-tonal) calc(l * 1.1) c h)
+        );
+      }
+    }
+
+    /* Icon */
+    &:has(svg:first-child) {
+      padding-inline: var(--size-1) var(--size-2);
+    }
+    &:has(svg:last-child) {
+      padding-inline: var(--size-2) var(--size-1);
+    }
+
+    &:has(svg) {
+      svg {
+        flex-shrink: 0;
+        inline-size: var(--size-3);
+      }
+    }
+
+    /* Sizes */
+    &.small {
+      block-size: var(--size-5);
+    }
+    &.multiline {
+      block-size: auto;
+    }
+
+    /* 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;
+      }
+    }
+
+    /* Disabled */
+    &:where([disabled]) {
+      opacity: 0.64;
+      --_text-color: color-mix(
+        in oklch,
+        var(--text-color-2) 50%,
+        var(--surface-default)
+      );
+      cursor: not-allowed;
+    }
+  }
+}