@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/breadcrumb.css

@@ -0,0 +1,90 @@
+/* @auvyx/ui breadcrumb | order 5 */
+@layer components {
+  .breadcrumb > ol {
+      margin: 0;
+      display: flex;
+      list-style-type: none;
+      flex-wrap: wrap;
+      align-items: center;
+      padding: 0;
+      overflow-wrap: break-word;
+    }
+  .breadcrumb li {
+      display: inline-flex;
+      align-items: center;
+    }
+  .breadcrumb a {
+      border-radius: var(--radius-sm);
+      --tw-outline-style: none;
+      outline-style: none;
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+    }
+  .breadcrumb [aria-current='page'] {
+      cursor: default;
+    }
+  .breadcrumb li[aria-hidden='true'] {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  .breadcrumb li > span[aria-hidden='true'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  .breadcrumb [data-rtl-flip] {
+      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        rotate: 180deg;
+      }
+    }
+}
+
+@layer components {
+  .breadcrumb > ol {
+      gap: calc(var(--spacing) * 1.5);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+      @media (width >= 40rem) {
+        gap: calc(var(--spacing) * 2.5);
+      }
+    }
+  .breadcrumb li {
+      gap: calc(var(--spacing) * 1.5);
+    }
+  .breadcrumb a {
+      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-foreground);
+        }
+      }
+    }
+  .breadcrumb [aria-current='page'] {
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+      color: var(--color-foreground);
+    }
+  .breadcrumb li[aria-hidden='true'] > svg {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+  .breadcrumb li > span[aria-hidden='true'] {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+      &>svg {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+}

package/dist/ui/bubble.css

@@ -0,0 +1,171 @@
+/* @auvyx/ui bubble | order 45 */
+@layer components {
+  .bubble-group {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+    }
+  .bubble {
+      position: relative;
+      display: flex;
+      width: fit-content;
+      min-width: 0;
+      flex-direction: column;
+      &[data-align='end'] {
+        align-self: flex-end;
+      }
+      > :not(aside) {
+        width: fit-content;
+        max-width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        overflow-wrap: break-word;
+      }
+      > :is(button, a):not(aside) {
+        cursor: pointer;
+        text-align: start;
+        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+      > aside {
+        position: absolute;
+        z-index: 10;
+        display: flex;
+        width: fit-content;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+}
+
+@layer components {
+  .bubble-group {
+      gap: calc(var(--spacing) * 2);
+    }
+  .bubble {
+      max-width: 80%;
+      gap: var(--spacing);
+    }
+  .bubble[data-variant='ghost'] {
+      max-width: 100%;
+    }
+  .message[data-align='end'] .bubble {
+      align-self: flex-end;
+    }
+  .bubble > :not(aside) {
+      margin: 0;
+      border-radius: var(--auvyx-r-card);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: transparent;
+      background-color: var(--color-primary);
+      padding-inline: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-leading: var(--leading-relaxed);
+      line-height: var(--leading-relaxed);
+      color: var(--color-primary-foreground);
+    }
+  .bubble > :is(a, button):not(aside) {
+      --tw-outline-style: none;
+      outline-style: none;
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-primary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+          }
+        }
+      }
+      &:focus-visible {
+        border-color: var(--color-ring);
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+    }
+  .bubble[data-variant='secondary'] > :not(aside) {
+      background-color: var(--color-secondary);
+      color: var(--color-secondary-foreground);
+    }
+  .bubble[data-variant='muted'] > :not(aside) {
+      background-color: var(--color-muted);
+      color: var(--color-foreground);
+    }
+  .bubble[data-variant='tinted'] > :not(aside) {
+      color: var(--color-foreground);
+      background-color: oklch(from var(--primary) 0.93 calc(c * 0.4) h);
+    }
+  html.dark .bubble[data-variant='tinted'] > :not(aside) {
+      background-color: oklch(from var(--primary) 0.3 calc(c * 0.4) h);
+    }
+  .bubble[data-variant='outline'] > :not(aside) {
+      border-color: var(--color-border);
+      background-color: var(--color-background);
+      color: var(--color-foreground);
+    }
+  .bubble[data-variant='ghost'] > :not(aside) {
+      border-radius: 0;
+      --tw-border-style: none;
+      border-style: none;
+      background-color: transparent;
+      padding: 0;
+      color: var(--color-foreground);
+    }
+  .bubble[data-variant='destructive'] > :not(aside) {
+      background-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      }
+      color: var(--color-destructive);
+      &:is(html.dark *) {
+        background-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+    }
+  .bubble:is([data-variant='secondary'], [data-variant='muted'], [data-variant='outline'], [data-variant='ghost']) > :is(a, button):not(aside) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+    }
+  .bubble > aside {
+      inset-inline-end: calc(var(--spacing) * 3);
+      bottom: 0;
+      flex-shrink: 0;
+      --tw-translate-y: calc(3 / 4 * 100%);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      gap: var(--spacing);
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-muted);
+      padding-inline: calc(var(--spacing) * 1.5);
+      padding-block: calc(var(--spacing) * 0.5);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--color-card);
+    }
+  .bubble > aside[data-side='top'] {
+      top: 0;
+      bottom: auto;
+      --tw-translate-y: calc(calc(3 / 4 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  .bubble > aside[data-align='start'] {
+      inset-inline-start: calc(var(--spacing) * 3);
+      inset-inline-end: auto;
+    }
+}

package/dist/ui/button-group.css

@@ -0,0 +1,110 @@
+/* @auvyx/ui button-group | order 7 */
+@layer components {
+  .button-group {
+      isolation: isolate;
+      display: inline-flex;
+      width: fit-content;
+      align-items: stretch;
+      &:has(> :is(.dropdown-menu, .popover, .select) > [data-popover][aria-hidden='false']) {
+        position: relative;
+        z-index: 50;
+      }
+      > .input {
+        flex: 1;
+      }
+      > *:focus-visible, > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
+        position: relative;
+        z-index: 10;
+      }
+      > hr[role='separator'] {
+        position: relative;
+        margin-inline: 0;
+        margin-block: 1px;
+        height: auto;
+        width: 1px;
+        flex-shrink: 0;
+        align-self: stretch;
+        border-style: var(--tw-border-style);
+        border-width: 0px;
+      }
+      &:not([data-orientation='vertical']) {
+        > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
+          border-inline-start-style: var(--tw-border-style);
+          border-inline-start-width: 0px;
+        }
+        > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+        }
+      }
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+        > hr[role='separator'] {
+          margin-inline: 1px;
+          margin-block: 0;
+          height: 1px;
+          width: auto;
+        }
+        > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+          border-top-style: var(--tw-border-style);
+          border-top-width: 0px;
+        }
+        > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+          border-bottom-right-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+  .button-group > :is(span, label, output) {
+      display: flex;
+      align-items: center;
+      & svg {
+        pointer-events: none;
+      }
+    }
+}
+
+@layer components {
+  .button-group {
+      &:has(>.button-group) {
+        gap: calc(var(--spacing) * 2);
+      }
+    }
+  .button-group:not([data-orientation='vertical']) {
+      > :last-child, > :is(.dropdown-menu, .popover, .select):last-child > button {
+        border-start-end-radius: var(--radius-md) !important;
+        border-end-end-radius: var(--radius-md) !important;
+      }
+    }
+  .button-group[data-orientation='vertical'] {
+      > :last-child, > :is(.dropdown-menu, .popover, .select):last-child > button {
+        border-bottom-right-radius: var(--radius-md) !important;
+        border-bottom-left-radius: var(--radius-md) !important;
+      }
+    }
+  .button-group > :is(span, label, output) {
+      gap: calc(var(--spacing) * 2);
+      border-radius: var(--radius-md);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      background-color: var(--color-muted);
+      padding-inline: calc(var(--spacing) * 2.5);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .button-group > hr[role='separator'] {
+      background-color: var(--color-input);
+    }
+}

package/dist/ui/button.css

@@ -0,0 +1,328 @@
+/* @auvyx/ui button | order 6 */
+@layer components {
+  .btn {
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      --tw-outline-style: none;
+      outline-style: none;
+      -webkit-user-select: none;
+      user-select: none;
+      &:disabled {
+        pointer-events: none;
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+      & svg {
+        pointer-events: none;
+      }
+      & svg {
+        flex-shrink: 0;
+      }
+    }
+}
+
+@layer components {
+  .btn {
+      border-radius: var(--radius-md);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: transparent;
+      background-clip: padding-box;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      &:focus-visible {
+        border-color: var(--color-ring);
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+      &:active {
+        &:not(*[aria-haspopup]) {
+          --tw-translate-y: 1px;
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+      }
+      &[aria-invalid="true"] {
+        border-color: var(--color-destructive);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          border-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+          }
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          --tw-ring-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          }
+        }
+      }
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .btn:not([data-size]), .btn[data-size='default'] {
+      height: calc(var(--spacing) * 9);
+      gap: calc(var(--spacing) * 1.5);
+      padding-inline: calc(var(--spacing) * 2.5);
+      &:has(*:is([data-icon='inline-end'])) {
+        padding-right: calc(var(--spacing) * 2);
+      }
+      &:has(*:is([data-icon='inline-start'])) {
+        padding-left: calc(var(--spacing) * 2);
+      }
+    }
+  .btn[data-size='xs'] {
+      height: calc(var(--spacing) * 6);
+      gap: var(--spacing);
+      border-radius: min(var(--radius-md), 8px);
+      padding-inline: calc(var(--spacing) * 2);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      &:has(*:is([data-icon='inline-end'])) {
+        padding-right: calc(var(--spacing) * 1.5);
+      }
+      &:has(*:is([data-icon='inline-start'])) {
+        padding-left: calc(var(--spacing) * 1.5);
+      }
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 3);
+        height: calc(var(--spacing) * 3);
+      }
+    }
+  .btn[data-size='sm'] {
+      height: calc(var(--spacing) * 8);
+      gap: var(--spacing);
+      border-radius: min(var(--radius-md), 10px);
+      padding-inline: calc(var(--spacing) * 2.5);
+      &:has(*:is([data-icon='inline-end'])) {
+        padding-right: calc(var(--spacing) * 1.5);
+      }
+      &:has(*:is([data-icon='inline-start'])) {
+        padding-left: calc(var(--spacing) * 1.5);
+      }
+    }
+  .btn[data-size='lg'] {
+      height: calc(var(--spacing) * 10);
+      gap: calc(var(--spacing) * 1.5);
+      padding-inline: calc(var(--spacing) * 2.5);
+      &:has(*:is([data-icon='inline-end'])) {
+        padding-right: calc(var(--spacing) * 2);
+      }
+      &:has(*:is([data-icon='inline-start'])) {
+        padding-left: calc(var(--spacing) * 2);
+      }
+    }
+  .btn[data-size='icon'] {
+      width: calc(var(--spacing) * 9);
+      height: calc(var(--spacing) * 9);
+    }
+  .btn[data-size='icon-xs'] {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+      border-radius: min(var(--radius-md), 8px);
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 3);
+        height: calc(var(--spacing) * 3);
+      }
+    }
+  .btn[data-size='icon-sm'] {
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+      border-radius: min(var(--radius-md), 10px);
+    }
+  .btn[data-size='icon-lg'] {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+    }
+  .btn:not([data-variant]), .btn[data-variant='primary'] {
+      background-color: var(--color-primary);
+      color: var(--color-primary-foreground);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-primary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+          }
+        }
+      }
+    }
+  .btn[data-variant='secondary'] {
+      background-color: var(--color-secondary);
+      color: var(--color-secondary-foreground);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--secondary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklch,var(--secondary),var(--foreground) 5%);
+          }
+        }
+      }
+      &[aria-expanded="true"] {
+        background-color: var(--color-secondary);
+      }
+      &[aria-expanded="true"] {
+        color: var(--color-secondary-foreground);
+      }
+    }
+  .btn[data-variant='outline'] {
+      border-color: var(--color-border);
+      background-color: var(--color-background);
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-foreground);
+        }
+      }
+      &[aria-expanded="true"] {
+        background-color: var(--color-muted);
+      }
+      &[aria-expanded="true"] {
+        color: var(--color-foreground);
+      }
+      &:is(html.dark *) {
+        border-color: var(--color-input);
+      }
+      &:is(html.dark *) {
+        background-color: var(--color-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-input);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
+            }
+          }
+        }
+      }
+    }
+  .btn[data-variant='ghost'] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-foreground);
+        }
+      }
+      &[aria-expanded="true"] {
+        background-color: var(--color-muted);
+      }
+      &[aria-expanded="true"] {
+        color: var(--color-foreground);
+      }
+      &:is(html.dark *) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-muted);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+            }
+          }
+        }
+      }
+    }
+  .btn[data-variant='link'] {
+      color: var(--color-primary);
+      text-underline-offset: 4px;
+      &:hover {
+        @media (hover: hover) {
+          text-decoration-line: underline;
+        }
+      }
+    }
+  .btn[data-variant='destructive'] {
+      background-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      }
+      color: var(--color-destructive);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+          }
+        }
+      }
+      &:focus-visible {
+        border-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+        }
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        background-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-destructive);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
+            }
+          }
+        }
+      }
+      &:is(html.dark *) {
+        &:focus-visible {
+          --tw-ring-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          }
+        }
+      }
+    }
+}