opui-css 3.3.4 → 4.0.0

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

@@ -1,135 +0,0 @@
-@layer components.root {
-  :where([role="group"].toggle-button-group) {
-    --_border-radius: var(--button-border-radius);
-    --_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-two/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-two/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-two/theme.css

@@ -1,158 +0,0 @@
-/*
-  theme two theme setup
-*/
-@layer theme {
-  .light {
-    --color-scheme: light;
-  }
-  .dark {
-    --color-scheme: dark;
-  }
-
-  :where(html) {
-    color-scheme: var(--color-scheme, light dark);
-
-    --palette-hue: var(--oklch-orange);
-    --palette-hue-rotate-by: 0;
-    --palette-chroma: 0.89;
-
-    /* Primary */
-    --primary: var(--color-8);
-    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
-    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
-    --primary-contrast: var(--gray-1);
-
-    /* Text */
-    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
-    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
-    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
-    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
-
-    /* Surface */
-    --surface-default: light-dark(var(--gray-1), var(--gray-13));
-    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
-    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
-    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
-
-    /* Shadows */
-    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
-    --shadow-strength: light-dark(1%, 10%);
-    --inner-shadow-highlight: light-dark(
-      inset 0 -0.5px 0 0 #fff,
-      inset 0 0.5px 0 0 #0001,
-      inset 0 -0.5px 0 0 #fff1,
-      inset 0 0.5px 0 0 #0007
-    );
-
-    /* Typography */
-    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
-    --font-size-h2: var(--font-size-fluid-2, 2rem);
-    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
-    --font-size-h4: var(--font-size-3, 1.25rem);
-    --font-size-h5: var(--font-size-2, 1.1rem);
-    --font-size-h6: var(--font-size-fluid-0, 1rem);
-    --font-size-lg: var(--font-size-3, 1.25rem);
-    --font-size-md: var(--font-size-fluid-0, 1rem);
-    --font-size-sm: 0.875rem;
-    --font-size-xs: var(--font-size-0, 0.75rem);
-
-    /* Borders */
-    --border-color: light-dark(var(--gray-4), var(--gray-12));
-    --border-radius: var(--size-2);
-    --border-width: 1px;
-
-    /* Input Field */
-    --field-border-color: var(--border-color);
-    --field-border-radius: var(--size-2);
-    --field-border-width: 1px;
-    --field-size: 2.3lh;
-    --field-size-small: 1.9lh;
-
-    /* Button */
-    --button-border-radius: var(--size-2);
-  }
-
-  /* Highlight colors */
-  :where(.red, .error, del) {
-    --palette-hue: var(--oklch-red, 25);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.blue, .ok, abbr, dfn) {
-    --palette-hue: var(--oklch-blue, 210);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.green, .good, ins) {
-    --palette-hue: var(--oklch-green, 145);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-  :where(.orange, .warning) {
-    --palette-hue: var(--oklch-orange, 75);
-    --palette-chroma: 1;
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(html) {
-    --red: oklch(from var(--color-9) l 0.2 25);
-    --blue: oklch(from var(--color-9) l 0.2 210);
-    --green: oklch(from var(--color-9) l 0.2 145);
-    --orange: oklch(from var(--color-7) l 0.2 75);
-  }
-
-  /* Gray palette */
-  :where(html) {
-    --gray-chroma: 0.01;
-    --gray-lightness: 255;
-
-    --gray-1: oklch(
-      from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-2: oklch(
-      from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-3: oklch(
-      from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-4: oklch(
-      from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-5: oklch(
-      from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-6: oklch(
-      from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-7: oklch(
-      from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-8: oklch(
-      from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-9: oklch(
-      from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-10: oklch(
-      from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-11: oklch(
-      from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-12: oklch(
-      from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-13: oklch(
-      from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-14: oklch(
-      from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-15: oklch(
-      from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
-    );
-    --gray-16: oklch(
-      from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
-    );
-  }
-}