opui-css 3.3.5 → 4.0.1

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

@@ -1,92 +0,0 @@
-@layer components.root {
-  :where(table) {
-    border-collapse: collapse;
-    display: block;
-    margin: var(--size-3) 0;
-    max-inline-size: 100%;
-    position: relative;
-
-    /* Rows */
-    tr {
-      background-color: var(--surface-default);
-      border-top: 1px solid var(--border-color);
-
-      &:hover {
-        background-color: oklch(from var(--surface-filled) l c h / 75%);
-      }
-    }
-
-    /* Cells */
-    th,
-    td {
-      border: 1px solid var(--border-color);
-      padding: var(--size-1) var(--size-2);
-    }
-
-    th {
-      background-color: var(--surface-filled);
-      color: var(--text-color-1);
-      font-size: var(--font-size-sm, 0.75rem);
-      font-weight: 600;
-      text-align: start;
-    }
-
-    td {
-      font-size: var(--font-size-sm, 0.75rem);
-    }
-
-    /* Caption */
-    caption {
-      caption-side: bottom;
-      color: var(--text-color-2);
-      font-size: var(--font-size-sm, 0.75rem);
-      padding: var(--size-2) 0;
-      text-align: start;
-    }
-
-    /* Footer */
-    tfoot {
-      border-top: 2px solid var(--border-color);
-
-      tr {
-        background-color: var(--surface-filled);
-      }
-
-      td {
-        color: var(--text-color-1);
-        font-weight: 600;
-      }
-    }
-
-    /* Column group */
-    colgroup col {
-      border: none;
-    }
-
-    @container (width < 60ch) {
-      th,
-      td {
-        padding: var(--size-1) 0.875rem;
-      }
-    }
-
-    /* Dense */
-    &.dense {
-      th,
-      td {
-        padding: var(--size-1) var(--size-2);
-      }
-
-      caption {
-        padding: var(--size-1) 0;
-      }
-
-      @container (width < 60ch) {
-        th,
-        td {
-          padding: var(--size-1) var(--size-2);
-        }
-      }
-    }
-  }
-}

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

@@ -1,57 +0,0 @@
-@layer components.extended {
-  :where(
-      .field:has(
-          :where(
-              input[type="date"],
-              input[type="datetime-local"],
-              input[type="email"],
-              input[type="month"],
-              input[type="number"],
-              input[type="password"],
-              input[type="search"],
-              input[type="tel"],
-              input[type="text"],
-              input[type="time"],
-              input[type="url"],
-              input[type="week"]
-            )
-        )
-    ) {
-    /* Sizes */
-    &.small {
-      input {
-        padding-inline: var(--size-2);
-      }
-    }
-  }
-
-  /* Autosuggest */
-  :where(.field:has(input[list])) {
-    /* Hide native arrow */
-    input::-webkit-calendar-picker-indicator {
-      opacity: 0;
-      position: absolute;
-      cursor: pointer;
-      pointer-events: none;
-    }
-  }
-  :where(
-      .field:has(input[list]:placeholder-shown),
-      .field:has(input[list]):where(:focus-within, :hover)
-    ) {
-    /* Arrow */
-    &::after {
-      block-size: 0;
-      border-block-start: 5px solid;
-      border-inline: 5px solid transparent;
-      content: "";
-      display: inline-block;
-      flex-shrink: 0;
-      inline-size: 0;
-      inset: 50% var(--size-3) auto auto;
-      pointer-events: none;
-      position: absolute;
-      translate: 0 -50%;
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-@layer components.extended {
-  :where(.field:has(textarea)) {
-    textarea {
-      block-size: auto;
-      field-sizing: content;
-      min-block-size: 5rem;
-      resize: vertical;
-    }
-
-    /* Size */
-    &.small {
-      textarea {
-        min-block-size: var(--_height);
-      }
-    }
-
-    /* Auto-fit */
-    &.auto-fit {
-      textarea {
-        min-block-size: var(--_height);
-        resize: both;
-      }
-    }
-  }
-}

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

@@ -1,135 +0,0 @@
-@layer components.root {
-  :where([role="group"].toggle-button-group) {
-    --_border-radius: var(--radius-round);
-    --_button-padding-inline: clamp(var(--size-2), 3cqi, var(--size-4));
-    --_max-width: auto;
-    --_icon-size: var(--size-4);
-
-    background-color: var(--surface-default);
-    border: 1px solid var(--border-color);
-    border-radius: var(--_border-radius);
-    display: flex;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    max-inline-size: var(--_max-width);
-    min-inline-size: max-content;
-    overflow: clip;
-
-    /* Size */
-    &.small {
-      button {
-        min-block-size: 2.1875rem; /* 35px */
-      }
-    }
-
-    &.x-small {
-      button {
-        min-block-size: var(--size-6); /* 30px */
-      }
-    }
-
-    &.fullwidth {
-      inline-size: 100%;
-    }
-
-    /* Button */
-    button {
-      --_bg-color: transparent;
-
-      align-items: center;
-      background: var(--_bg-color) var(--ripple, none);
-      border-radius: 0;
-      border-inline: 1px solid var(--border-color);
-      border-inline-start-width: 0;
-      color: var(--text-color-1);
-      display: inline-flex;
-      flex: auto;
-      gap: 1ex;
-      justify-content: center;
-      min-block-size: 2.5rem; /* 40px */
-      min-inline-size: 5ex;
-      outline-offset: calc(-1 * var(--size-2));
-      padding: 0 var(--_button-padding-inline);
-      position: relative;
-      user-select: none;
-
-      @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);
-      }
-
-      /* Element states */
-      &:hover {
-        --_bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
-      }
-
-      &:focus-visible {
-        outline-offset: -6px;
-      }
-
-      /* Disabled */
-      &[disabled] {
-        border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
-        cursor: not-allowed;
-        color: color-mix(in oklch, var(--text-color-1) 30%, transparent);
-      }
-
-      &[disabled] + &:not([disabled]):not(:last-of-type) {
-        border-inline-end-width: 1px;
-      }
-
-      /* Assign border radius for outline */
-      &: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);
-      }
-
-      &:last-of-type {
-        border-inline-end-width: 0;
-      }
-
-      /* 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;
-        }
-      }
-
-      /* Icons */
-      svg {
-        inline-size: var(--_icon-size);
-        inset-inline-start: calc(var(--_button-padding-inline));
-
-        & + svg {
-          max-block-size: var(--size-5);
-          max-inline-size: var(--size-7);
-        }
-      }
-
-      /* Selected */
-      &.selected {
-        --_bg-color: oklch(from var(--primary) l c h / 25%);
-
-        /* Checkmark */
-        svg:first-of-type {
-          margin-block-end: -3px;
-        }
-      }
-    }
-  }
-}

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

@@ -1,94 +0,0 @@
-@layer components.root {
-  :where(.tooltip) {
-    background-color: var(--surface-tonal);
-    border-radius: var(--radius-2);
-    font-size: var(--font-size-xs);
-    margin: var(--size-1);
-    opacity: 1;
-    padding: 0 var(--size-2);
-    position: absolute;
-    position-area: block-start;
-    position-try-fallbacks: flip-block;
-    /* position-try-order: most-height; */
-    view-transition-name: vt-tooltip;
-    z-index: 1;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:where([class^="top"], [class^="bottom"]) {
-      background-color: red;
-      position-try-order: most-height;
-    }
-
-    &:where([class^="left"], [class^="right"]) {
-      background-color: red;
-      position-try-order: most-width;
-    }
-
-    &.top {
-      position-area: block-start;
-    }
-    &.top-start {
-      position-area: block-start span-inline-start;
-    }
-    &.top-end {
-      position-area: block-start span-inline-end;
-    }
-    &.right {
-      position-area: inline-end;
-    }
-    &.right-start {
-      position-area: inline-end span-block-start;
-    }
-    &.right-end {
-      position-area: inline-end span-block-end;
-    }
-    &.bottom {
-      position-area: block-end;
-    }
-    &.bottom-start {
-      position-area: block-end span-inline-start;
-    }
-    &.bottom-end {
-      position-area: block-end span-inline-end;
-    }
-    &.left {
-      position-area: inline-start;
-    }
-    &.left-start {
-      position-area: inline-start span-block-start;
-    }
-    &.left-end {
-      position-area: inline-start span-block-end;
-    }
-
-    /* Swap it around for rtl */
-    :dir(rtl) {
-      &.right {
-        position-area: inline-start;
-      }
-      &.right-start {
-        position-area: inline-start span-block-start;
-      }
-      &.right-end {
-        position-area: inline-start span-block-end;
-      }
-      &.left {
-        position-area: inline-end;
-      }
-      &.left-start {
-        position-area: inline-end span-block-start;
-      }
-      &.left-end {
-        position-area: inline-end span-block-end;
-      }
-    }
-  }
-
-  ::view-transition-old(vt-tooltip),
-  ::view-transition-new(vt-tooltip) {
-    height: 100%;
-  }
-}

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

@@ -1,209 +0,0 @@
-@layer components.root {
-  /* Base typography */
-  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
-    color: var(--text-color-1);
-    font-weight: 700;
-    text-wrap: pretty;
-  }
-
-  :where(h1, .h1) {
-    font-size: var(--font-size-h1, var(--font-size-7));
-    letter-spacing: -0.02em;
-    line-height: 1.15;
-  }
-
-  :where(h2, .h2) {
-    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
-    letter-spacing: -0.02em;
-    line-height: 1.2;
-  }
-
-  :where(h3, .h3) {
-    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
-    letter-spacing: -0.01em;
-    line-height: 1.167;
-  }
-
-  :where(h4, .h4) {
-    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
-    letter-spacing: -0.01em;
-    line-height: 1.235;
-  }
-
-  :where(h5, .h5) {
-    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
-    line-height: 1.334;
-  }
-
-  :where(h6, .h6) {
-    font-size: var(--font-size-h6, var(--font-size-1, 1rem));
-    line-height: 1;
-  }
-
-  :where(hgroup) {
-    & > :where(p, .p) {
-      margin: 0;
-    }
-
-    & > :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
-      margin-block-end: 0.4em;
-    }
-
-    /* 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;
-    }
-  }
-
-  /** 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;
-  }
-
-  :where(p, .p) {
-    text-wrap: pretty;
-
-    &.small {
-      font-size: var(--font-size-md);
-    }
-    &.large {
-      font-size: var(--font-size-lg);
-    }
-  }
-
-  /* Inline text elements */
-  :where(ins, u, abbr, dfn) {
-    text-decoration: underline;
-    text-underline-offset: 1px;
-
-    @supports (-moz-appearance: none) {
-      text-underline-offset: 2px;
-    }
-  }
-
-  :where(abbr, dfn) {
-    font-style: normal;
-    text-decoration: var(--color-9) underline dotted;
-
-    &[title] {
-      cursor: help;
-      text-underline-offset: 1px;
-    }
-
-    @supports (-moz-appearance: none) {
-      text-underline-offset: 2px;
-    }
-  }
-
-  :where(sup) {
-    font-size: 0.5em;
-  }
-
-  :where(del, ins) {
-    color: var(--color-9);
-  }
-
-  :where(small) {
-    font-size: max(0.5em, var(--font-size-0, 0.75rem));
-    max-inline-size: var(--size-content-1);
-  }
-
-  :where(cite) {
-    font-style: italic;
-  }
-
-  /* Blockquote */
-  :where(blockquote) {
-    border-inline-start-width: var(--border-size-3);
-    display: grid;
-    gap: var(--size-3);
-    padding-block: var(--size-3);
-    padding-inline: var(--size-4);
-
-    :first-child {
-      margin-block-start: 0;
-    }
-
-    :last-child {
-      margin-block-end: 0;
-    }
-
-    footer {
-      color: var(--text-color-2);
-    }
-  }
-
-  /* Code */
-  :where(pre) {
-    border-radius: 0.375rem;
-    direction: ltr;
-    font-size: 0.875rem;
-    line-height: 1.7142857;
-    margin-block: 1.7142857em;
-    max-inline-size: max-content;
-    min-inline-size: 0;
-    padding-block: 0.8571429em;
-    padding-inline: 1.1428571em;
-    white-space: pre;
-    writing-mode: lr;
-  }
-
-  :where(code, kbd, samp, pre) {
-    font-family: var(--font-mono);
-  }
-
-  :where(code) {
-    background-color: oklch(00 0 0 /18%);
-    border-radius: var(--border-size-3);
-    font-size: 0.9em;
-    padding: 0.2ex 0.5ex;
-  }
-
-  :where(kbd, var) {
-    background-color: var(--text-color-2);
-    border-color: var(--text-color-2);
-    border-radius: var(--border-radius, var(--radius-2));
-    border-width: var(--border-size-1);
-    color: var(--text-color-2-contrast);
-    padding: calc(var(--size-1) / 2) var(--size-1);
-  }
-
-  :where(:not(pre) code, kbd) {
-    word-break: break-word;
-  }
-
-  :where(:not(pre) code) {
-    border-radius: var(--border-radius, var(--radius-2));
-    padding: var(--size-1) var(--size-2);
-    writing-mode: lr;
-  }
-
-  :where(mark) {
-    border-radius: var(--border-radius, 0);
-    box-decoration-break: clone;
-    padding: calc(var(--size-1) / 2) var(--size-1);
-    vertical-align: baseline;
-  }
-
-  /* Misc */
-  :where(dt) {
-    font-weight: 700;
-  }
-
-  :where(figure) {
-    & > :where(figcaption) {
-      font-size: var(--font-size-1, 1rem);
-      text-wrap: balance;
-    }
-  }
-}

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

@@ -1,37 +0,0 @@
-/*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
-*/
-
-/*** Root components (no dependencies)  */
-@import "./components/button.css";
-@import "./components/icon-button.css";
-@import "./components/tab-buttons.css";
-@import "./components/toggle-button-group.css";
-@import "./components/avatar.css";
-@import "./components/badge.css";
-@import "./components/card.css";
-@import "./components/chip.css";
-@import "./components/definition-list.css";
-@import "./components/divider.css";
-@import "./components/link.css";
-@import "./components/table.css";
-@import "./components/progress.css";
-@import "./components/spinner.css";
-@import "./components/checkbox-radio.css";
-@import "./components/switch.css";
-@import "./components/range.css";
-@import "./components/typography.css";
-
-/*** Extended components (has dependencies) */
-@import "./components/button-group.css";
-@import "./components/accordion.css";
-@import "./components/list.css";
-@import "./components/alert.css";
-@import "./components/dialog.css";
-@import "./components/snackbar.css";
-@import "./components/field-group.css";
-@import "./components/field.css";
-@import "./components/select.css";
-@import "./components/text-field.css";
-@import "./components/textarea.css";
-@import "./components/rich-text.css";

package/src/themes/theme-one/imports.css

@@ -1,16 +0,0 @@
-@layer openprops, normalize, theme, components.root, components.extended, utils;
-
-/* Open Props */
-@import "../../open-props.css";
-
-/* Normalize */
-@import "../../core/normalize.css";
-
-/* Theme */
-@import "./theme.css";
-
-/* Components */
-@import "./components.css";
-
-/* Utils */
-@import "../../core/utils.css";