@deepfuture/dui-theme-default 0.0.1

package/components/menu-item.d.ts

@@ -0,0 +1 @@
+export declare const menuItemStyles: import("lit").CSSResult;

package/components/menu-item.js

@@ -0,0 +1,36 @@
+import { css } from "lit";
+export const menuItemStyles = css `
+  .Item {
+    --icon-size: var(--space-4);
+    --icon-color: var(--muted-foreground);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+    color: var(--popover-foreground);
+  }
+
+  .Item:hover,
+  :host([data-highlighted]) .Item {
+    --icon-color: var(--foreground);
+    background: var(--secondary);
+    color: var(--foreground);
+  }
+
+  :host([variant="danger"]) .Item {
+    --icon-color: var(--destructive);
+    color: var(--destructive);
+  }
+
+  :host([variant="danger"]) .Item:hover,
+  :host([variant="danger"][data-highlighted]) .Item {
+    --icon-color: var(--destructive-foreground);
+    background: var(--destructive);
+    color: var(--destructive-foreground);
+  }
+
+  :host([disabled]) .Item {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;

package/components/menu.d.ts

@@ -0,0 +1 @@
+export declare const menuStyles: import("lit").CSSResult;

package/components/menu.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const menuStyles = css ``;

package/components/menubar.d.ts

@@ -0,0 +1 @@
+export declare const menubarStyles: import("lit").CSSResult;

package/components/menubar.js

@@ -0,0 +1,10 @@
+import { css } from "lit";
+export const menubarStyles = css `
+  [part="root"] {
+    gap: var(--space-1);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--background);
+    padding: var(--space-1);
+  }
+`;

package/components/number-field.d.ts

@@ -0,0 +1 @@
+export declare const numberFieldStyles: import("lit").CSSResult;

package/components/number-field.js

@@ -0,0 +1,55 @@
+import { css } from "lit";
+export const numberFieldStyles = css `
+  [part="root"] {
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--background);
+    transition-property: border-color, box-shadow;
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="root"]:focus-within {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 var(--space-0_5) color-mix(in oklch, var(--ring) 25%, transparent);
+  }
+
+  [part="root"][data-disabled] {
+    opacity: 0.5;
+  }
+
+  [part="root"][data-invalid] {
+    border-color: var(--destructive);
+  }
+
+  [part="input"] {
+    height: var(--space-9);
+    width: var(--space-16);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    color: var(--foreground);
+  }
+
+  [part="decrement"],
+  [part="increment"] {
+    width: var(--space-8);
+    height: var(--space-8);
+    color: var(--muted-foreground);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-lg);
+    transition-property: background, color;
+    transition-duration: var(--duration-fast);
+  }
+
+  @media (hover: hover) {
+    [part="decrement"]:hover:not(:disabled),
+    [part="increment"]:hover:not(:disabled) {
+      background: var(--muted);
+      color: var(--foreground);
+    }
+  }
+
+  [part="decrement"]:disabled,
+  [part="increment"]:disabled {
+    opacity: 0.3;
+  }
+`;

package/components/page-inset.d.ts

@@ -0,0 +1 @@
+export declare const pageInsetStyles: import("lit").CSSResult;

package/components/page-inset.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const pageInsetStyles = css ``;

package/components/popover-popup.d.ts

@@ -0,0 +1 @@
+export declare const popoverPopupStyles: import("lit").CSSResult;

package/components/popover-popup.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const popoverPopupStyles = css ``;

package/components/popover.d.ts

@@ -0,0 +1 @@
+export declare const popoverStyles: import("lit").CSSResult;

package/components/popover.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const popoverStyles = css ``;

package/components/portal.d.ts

@@ -0,0 +1 @@
+export declare const portalStyles: import("lit").CSSResult;

package/components/portal.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const portalStyles = css ``;

package/components/preview-card-popup.d.ts

@@ -0,0 +1 @@
+export declare const previewCardPopupStyles: import("lit").CSSResult;

package/components/preview-card-popup.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const previewCardPopupStyles = css ``;

package/components/preview-card.d.ts

@@ -0,0 +1 @@
+export declare const previewCardStyles: import("lit").CSSResult;

package/components/preview-card.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const previewCardStyles = css ``;

package/components/progress.d.ts

@@ -0,0 +1 @@
+export declare const progressStyles: import("lit").CSSResult;

package/components/progress.js

@@ -0,0 +1,32 @@
+import { css } from "lit";
+export const progressStyles = css `
+  :host {
+    --progress-height: var(--space-2);
+  }
+
+  [part="track"] {
+    height: var(--progress-height);
+    background: var(--muted);
+    border-radius: var(--radius-full);
+  }
+
+  [part="indicator"] {
+    background: var(--primary);
+    border-radius: var(--radius-full);
+    transition: width var(--duration-normal) var(--ease-out-3);
+  }
+
+  [part="root"][data-indeterminate] [part="indicator"] {
+    width: 40% !important;
+    animation: progress-indeterminate 1.5s ease-in-out infinite;
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      left: -40%;
+    }
+    100% {
+      left: 100%;
+    }
+  }
+`;

package/components/radio-group.d.ts

@@ -0,0 +1 @@
+export declare const radioGroupStyles: import("lit").CSSResult;

package/components/radio-group.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const radioGroupStyles = css `
+  [part="root"] {
+    gap: var(--space-1);
+  }
+`;

package/components/radio.d.ts

@@ -0,0 +1 @@
+export declare const radioStyles: import("lit").CSSResult;

package/components/radio.js

@@ -0,0 +1,47 @@
+import { css } from "lit";
+export const radioStyles = css `
+  :host {
+    --radio-size: var(--space-4_5);
+    gap: var(--space-2);
+  }
+
+  [part="root"] {
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border-radius: 50%;
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="root"][data-unchecked] {
+    border: var(--border-width-thin) solid var(--input);
+    background: var(--input-bg);
+  }
+
+  [part="root"][data-checked] {
+    border: var(--border-width-thin) solid var(--primary);
+    background: var(--primary);
+  }
+
+  [part="root"][data-disabled] {
+    opacity: 0.5;
+  }
+
+  [part="root"]:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  [part="root"][data-invalid] {
+    border-color: color-mix(in oklch, var(--destructive) 70%, transparent);
+    background: color-mix(in oklch, var(--destructive) 15%, transparent);
+  }
+
+  [part="dot"] {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--primary-foreground);
+  }
+`;

package/components/scroll-area.d.ts

@@ -0,0 +1 @@
+export declare const scrollAreaStyles: import("lit").CSSResult;

package/components/scroll-area.js

@@ -0,0 +1,45 @@
+import { css } from "lit";
+export const scrollAreaStyles = css `
+  .ScrollFade {
+    box-shadow: var(--scroll-fade-offset-x, 0) var(--scroll-fade-offset-y, 0)
+      var(--scroll-fade-blur-radius, var(--space-3))
+      var(--scroll-fade-spread-radius, var(--space-2))
+      var(--scroll-fade-color, var(--background));
+    opacity: 0;
+    transition: opacity 150ms ease;
+
+    &[data-scrolled] {
+      opacity: 1;
+    }
+  }
+
+  .Scrollbar {
+    border-radius: var(--radius-sm, 0.375rem);
+    transition: opacity 150ms;
+  }
+
+  .Scrollbar[data-orientation="vertical"] {
+    width: 0.25rem;
+    margin: 0.1rem;
+  }
+
+  .Scrollbar[data-orientation="horizontal"] {
+    height: 0.25rem;
+    margin: 0.1rem;
+  }
+
+  .Thumb {
+    border-radius: inherit;
+    background: var(--scroll-area-thumb-color, var(--muted-foreground));
+    opacity: 0.5;
+    transition: opacity var(--duration-fast);
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    &:active {
+      opacity: 0.8;
+    }
+  }
+`;

package/components/select.d.ts

@@ -0,0 +1 @@
+export declare const selectStyles: import("lit").CSSResult;

package/components/select.js

@@ -0,0 +1,44 @@
+import { css } from "lit";
+export const selectStyles = css `
+  .Trigger {
+    height: var(--component-height-md);
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border: var(--border-width-thin) solid var(--input);
+    border-radius: var(--radius-md);
+    background: var(--input-bg);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-normal);
+    transition-duration: var(--duration-fast);
+  }
+
+  .Trigger:focus {
+    outline: none;
+  }
+
+  .Trigger:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  .Trigger[data-disabled] {
+    opacity: 0.5;
+  }
+
+  .Trigger[data-invalid] {
+    border-color: var(--destructive);
+  }
+
+  .Value[data-placeholder] {
+    color: var(--muted-foreground);
+  }
+
+  .Icon {
+    --icon-size: var(--space-4);
+    color: var(--foreground);
+  }
+`;

package/components/separator.d.ts

@@ -0,0 +1 @@
+export declare const separatorStyles: import("lit").CSSResult;

package/components/separator.js

@@ -0,0 +1,17 @@
+import { css } from "lit";
+export const separatorStyles = css `
+  [part="root"] {
+    border: none;
+  }
+
+  :host([orientation="horizontal"]) [part="root"] {
+    height: 0;
+    border-top: var(--border-width-thin) solid var(--border);
+  }
+
+  :host([orientation="vertical"]) [part="root"] {
+    width: 0;
+    height: 100%;
+    border-left: var(--border-width-thin) solid var(--border);
+  }
+`;

package/components/sidebar-content.d.ts

@@ -0,0 +1 @@
+export declare const sidebarContentStyles: import("lit").CSSResult;

package/components/sidebar-content.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const sidebarContentStyles = css ``;

package/components/sidebar-footer.d.ts

@@ -0,0 +1 @@
+export declare const sidebarFooterStyles: import("lit").CSSResult;

package/components/sidebar-footer.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const sidebarFooterStyles = css ``;

package/components/sidebar-group-label.d.ts

@@ -0,0 +1 @@
+export declare const sidebarGroupLabelStyles: import("lit").CSSResult;

package/components/sidebar-group-label.js

@@ -0,0 +1,19 @@
+import { css } from "lit";
+export const sidebarGroupLabelStyles = css `
+  :host {
+    margin-left: var(--sidebar-group-label-inset);
+    height: var(--component-height-sm);
+    color: var(--sidebar-muted-fg);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-snug);
+  }
+
+  :host([data-icon-collapsed]) {
+    margin-top: calc(-1 * var(--component-height-sm));
+    transition-property: margin-top, opacity;
+    transition-duration: var(--duration-normal);
+    transition-timing-function: var(--ease-out-3);
+  }
+`;

package/components/sidebar-group.d.ts

@@ -0,0 +1 @@
+export declare const sidebarGroupStyles: import("lit").CSSResult;

package/components/sidebar-group.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const sidebarGroupStyles = css `
+  :host {
+    padding: var(--sidebar-group-padding-y) 0;
+  }
+`;

package/components/sidebar-header.d.ts

@@ -0,0 +1 @@
+export declare const sidebarHeaderStyles: import("lit").CSSResult;

package/components/sidebar-header.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const sidebarHeaderStyles = css `
+  :host {
+    margin-bottom: var(--sidebar-header-content-gap);
+  }
+`;

package/components/sidebar-inset.d.ts

@@ -0,0 +1 @@
+export declare const sidebarInsetStyles: import("lit").CSSResult;

package/components/sidebar-inset.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const sidebarInsetStyles = css ``;

package/components/sidebar-menu-button.d.ts

@@ -0,0 +1 @@
+export declare const sidebarMenuButtonStyles: import("lit").CSSResult;

package/components/sidebar-menu-button.js

@@ -0,0 +1,82 @@
+import { css } from "lit";
+export const sidebarMenuButtonStyles = css `
+  :host {
+    --smb-height: var(--component-height-md);
+    --smb-padding-x: var(--sidebar-button-inset);
+    --smb-gap: var(--space-2);
+    --smb-icon-size: var(--space-4);
+    --smb-font-size: var(--font-size-sm);
+    --smb-radius: var(--radius-md);
+  }
+
+  :host([size="sm"]) {
+    --smb-height: var(--component-height-sm);
+    --smb-font-size: var(--font-size-xs);
+  }
+
+  :host([size="lg"]) {
+    --smb-height: var(--component-height-lg);
+    --smb-font-size: var(--font-size-sm);
+    --smb-gap: var(--space-2_5);
+  }
+
+  .Row {
+    height: var(--smb-height);
+    border-radius: var(--smb-radius);
+    margin: 0 var(--space-2);
+    transition-property: background;
+    transition-duration: var(--duration-faster);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  .Row:hover {
+    background: color-mix(
+      in oklch,
+      var(--sidebar-button-bg) 100%,
+      var(--foreground) 8%
+    );
+  }
+
+  .Row[data-active] {
+    background: color-mix(
+      in oklch,
+      var(--sidebar-button-bg) 100%,
+      var(--foreground) 12%
+    );
+  }
+
+  .Row[data-icon-collapsed] {
+    width: var(--sidebar-width-icon);
+    margin: 0 auto;
+  }
+
+  .Button {
+    gap: var(--smb-gap);
+    padding: 0 var(--smb-padding-x);
+    color: var(--sidebar-button-fg);
+    font-family: var(--font-sans);
+    font-size: var(--smb-font-size);
+    font-weight: var(--font-weight-normal);
+    letter-spacing: var(--letter-spacing-tight);
+    line-height: var(--line-height-snug);
+    --icon-size: var(--smb-icon-size);
+    --icon-color: var(--sidebar-muted-fg);
+  }
+
+  .Button:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--sidebar-ring);
+    border-radius: var(--smb-radius);
+  }
+
+  :host([disabled]) .Row {
+    opacity: 0.5;
+  }
+
+  :host([active]) .Button {
+    color: var(--sidebar-fg);
+    font-weight: var(--font-weight-medium);
+    --icon-color: var(--sidebar-fg);
+  }
+`;

package/components/sidebar-menu-item.d.ts

@@ -0,0 +1 @@
+export declare const sidebarMenuItemStyles: import("lit").CSSResult;

package/components/sidebar-menu-item.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const sidebarMenuItemStyles = css ``;

package/components/sidebar-menu.d.ts

@@ -0,0 +1 @@
+export declare const sidebarMenuStyles: import("lit").CSSResult;

package/components/sidebar-menu.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const sidebarMenuStyles = css `
+  .Menu {
+    gap: var(--space-px);
+  }
+`;

package/components/sidebar-provider.d.ts

@@ -0,0 +1 @@
+export declare const sidebarProviderStyles: import("lit").CSSResult;

package/components/sidebar-provider.js

@@ -0,0 +1,28 @@
+import { css } from "lit";
+export const sidebarProviderStyles = css `
+  :host {
+    --sidebar-width: var(--space-64);
+    --sidebar-width-mobile: var(--space-72);
+    --sidebar-width-icon: var(--space-12);
+    --sidebar-group-padding-y: var(--space-4);
+    --sidebar-group-label-inset: var(--space-6);
+    --sidebar-button-inset: var(--space-4);
+    --sidebar-header-content-gap: var(--space-4);
+    --sidebar-bg: color-mix(
+      in oklch,
+      var(--background) 97%,
+      var(--foreground)
+    );
+    --sidebar-fg: var(--card-foreground);
+    --sidebar-separator: color-mix(
+      in oklch,
+      var(--foreground) 10%,
+      oklch(0 0 0 / 0)
+    );
+    --sidebar-border: var(--border);
+    --sidebar-button-bg: oklch(0 0 0 / 0);
+    --sidebar-button-fg: var(--foreground);
+    --sidebar-muted-fg: var(--muted-foreground);
+    --sidebar-ring: var(--ring);
+  }
+`;

package/components/sidebar-separator.d.ts

@@ -0,0 +1 @@
+export declare const sidebarSeparatorStyles: import("lit").CSSResult;

package/components/sidebar-separator.js

@@ -0,0 +1,8 @@
+import { css } from "lit";
+export const sidebarSeparatorStyles = css `
+  .Separator {
+    height: var(--border-width-thin);
+    margin: var(--space-2) var(--space-2);
+    background: var(--sidebar-separator);
+  }
+`;

package/components/sidebar-trigger.d.ts

@@ -0,0 +1 @@
+export declare const sidebarTriggerStyles: import("lit").CSSResult;

package/components/sidebar-trigger.js

@@ -0,0 +1,8 @@
+import { css } from "lit";
+export const sidebarTriggerStyles = css `
+  dui-button {
+    --button-width: var(--button-height);
+    --button-padding-x: 0;
+    --button-gap: 0;
+  }
+`;

package/components/sidebar.d.ts

@@ -0,0 +1 @@
+export declare const sidebarStyles: import("lit").CSSResult;