opui-css 3.3.4 → 4.0.0

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

@@ -1,163 +0,0 @@
-/*
-  theme one 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-teal);
-    --palette-hue-rotate-by: 5;
-    --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-1);
-    --border-width: 1px;
-
-    /* Input Field */
-    --field-border-color: var(--border-color);
-    --field-border-radius: var(--size-1);
-    --field-border-width: 1px;
-    --field-size: 2.3lh;
-    --field-size-small: 1.9lh;
-
-    /* Button */
-    --button-border-radius: var(--radius-round);
-    /* Ripple effect */
-    @media (prefers-reduced-motion: no-preference) {
-      --button-ripple-size: 100%;
-      --button-ripple-duration: 0.5s;
-    }
-  }
-
-  /* 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)
-    );
-  }
-}

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

@@ -1,172 +0,0 @@
-@layer components.extended {
-  :where(details) {
-    --_accordion-transition-time: 0.2s;
-    --_bg-color: transparent;
-    --_margin-inline: var(--size-1);
-    --_shadow: none;
-
-    background-color: var(--_bg-color);
-    box-shadow: var(--_shadow);
-    border-radius: var(--border-radius, 4px);
-    display: block;
-    margin-inline: var(--_margin-inline);
-    transition: all var(--_accordion-transition-time) ease-out;
-
-    /* Accordion animation */
-    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
-    @media (prefers-reduced-motion: no-preference) {
-      interpolate-size: allow-keywords;
-    }
-
-    &::details-content {
-      block-size: 0;
-      opacity: 0;
-      overflow-y: clip;
-      transition:
-        content-visibility var(--_accordion-transition-time) allow-discrete,
-        opacity var(--_accordion-transition-time),
-        block-size var(--_accordion-transition-time);
-    }
-
-    &[open]::details-content {
-      block-size: auto;
-      opacity: 1;
-    }
-    /***/
-
-    & > summary {
-      background-color: inherit;
-      cursor: pointer;
-      font-weight: 700;
-      padding-block: var(--size-3);
-      user-select: none;
-    }
-
-    /* Custom arrow */
-    /* summary {
-      align-items: center;
-      background-color: inherit;
-      cursor: pointer;
-      display: flex;
-      justify-content: space-between;
-      list-style: none;
-      padding-block: var(--size-3);
-      user-select: none;
-
-      &::marker,
-      &::-webkit-details-marker {
-        display: none;
-      }
-
-      svg {
-        transition: rotate 0.2s ease-out;
-      }
-    }
-
-    &[open] > summary svg {
-      rotate: 180deg;
-    } */
-
-    & > .content {
-      margin-block-start: 0;
-      padding-block: var(--size-2) var(--size-3);
-    }
-
-    & > .actions {
-      display: flex;
-      gap: var(--size-1);
-      justify-content: end;
-      margin-block-start: var(--size-3);
-      padding-block-end: var(--size-1);
-      padding-inline: var(--size-3) var(--size-1);
-    }
-
-    /* Variants */
-    &.card,
-    &.text {
-      --_bg-color: transparent;
-      --_margin-inline: var(--size-1);
-    }
-
-    &.elevated {
-      --_bg-color: var(--surface-elevated);
-      --_margin-inline: 0;
-      --_shadow: var(--shadow-2);
-    }
-
-    &.outlined {
-      --_bg-color: var(--surface-default);
-      --_margin-inline: 0;
-      border: 1px solid var(--border-color);
-    }
-
-    &.tonal {
-      --_bg-color: var(--surface-tonal);
-      --_margin-inline: 0;
-    }
-
-    &:where(.elevated, .outlined, .tonal) > * {
-      padding-inline: var(--size-3);
-    }
-  }
-
-  /* Accordion group  */
-  :where(.card:has(details)) {
-    --_gutter-color: var(--border-color);
-
-    display: block;
-
-    & > .content {
-      margin-block: 0;
-      padding: 0;
-    }
-
-    &.card,
-    &.text {
-      &:not(.tonal, .outlined, .elevated) {
-        summary {
-          padding-inline: 0;
-        }
-      }
-    }
-
-    & > details {
-      --_margin-inline: 0;
-
-      border: 0;
-      box-shadow: none;
-
-      & > * {
-        padding-inline: var(--size-3);
-      }
-
-      /* Border between accordion items */
-      & + & {
-        summary {
-          border-radius: 0;
-          border-block-start: 1px solid var(--_gutter-color);
-        }
-      }
-
-      /* First item */
-      &:first-of-type {
-        border-start-start-radius: var(--border-radius, 0.25rem);
-        border-start-end-radius: var(--border-radius, 0.25rem);
-        summary {
-          border-start-start-radius: var(--border-radius, 0.25rem);
-          border-start-end-radius: var(--border-radius, 0.25rem);
-        }
-      }
-
-      /* Last item */
-      &:last-of-type {
-        border-end-start-radius: var(--border-radius, 0.25rem);
-        border-end-end-radius: var(--border-radius, 0.25rem);
-        summary {
-          border-end-start-radius: var(--border-radius, 0.25rem);
-          border-end-end-radius: var(--border-radius, 0.25rem);
-        }
-      }
-    }
-  }
-}

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

@@ -1,85 +0,0 @@
-@layer components.extended {
-  :where(.alert) {
-    --_bg-color: var(--surface-tonal);
-    --_border-color: var(--surface-tonal);
-    --_color: var(--text-color-1);
-
-    &.outlined {
-      --_bg-color: var(--surface-default);
-      --_border-color: var(--border-color);
-      --_color: var(--text-color-1);
-    }
-
-    background-color: var(--_bg-color);
-    border: 1px solid var(--_border-color);
-    border-radius: var(--border-radius);
-    color: var(--_color);
-    padding: var(--size-3);
-
-    & > .content {
-      display: grid;
-      gap: var(--size-2);
-      font-size: var(--font-size-sm);
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: inherit;
-        font-size: var(--font-size-md);
-        font-weight: 600;
-
-        * {
-          font-size: inherit;
-        }
-      }
-    }
-
-    /* Colors */
-    &.error,
-    &.ok,
-    &.warning {
-      --_bg-color: var(--color-4);
-      --_border-color: var(--color-9);
-      --_color: var(--color-15);
-
-      &.outlined {
-        --_bg-color: var(--surface-default);
-        --_border-color: var(--color-9);
-        --_color: light-dark(var(--color-15), var(--color-1));
-      }
-
-      svg {
-        margin-block-start: 0.15rem;
-        stroke: var(--color-9);
-      }
-    }
-
-    /* Links
-    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
-    */
-    &:not(.outlined) {
-      a[href] {
-        color: inherit;
-
-        &:hover {
-          color: var(--primary);
-        }
-      }
-    }
-
-    /* Icon */
-    &:has(svg) {
-      display: grid;
-      gap: var(--size-3);
-      grid-template-columns: var(--size-4) 1fr;
-
-      svg {
-        margin-block-start: 0.15rem;
-        stroke: currentColor;
-      }
-    }
-  }
-}

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

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

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