@rimelight/ui 0.0.32 → 0.0.34

package/src/styles/index.css

@@ -1,5 +1,3 @@
-@import "tailwindcss";
-@import "@nuxt/ui";
 @import "./prism.css";
 
 body {

package/src/themes/3d-hover.theme.ts

@@ -1,10 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const create3dHoverTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default create3dHoverTheme()

package/src/themes/accordion.theme.ts

@@ -1,10 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const createAccordionTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createAccordionTheme()

package/src/themes/alert.theme.ts

@@ -1,28 +1,55 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
 export const createAlertTheme = (colors: string[] = defaultColors) =>
   defineTheme({
-    slots: ["root", "icon", "content", "title", "description"],
+    slots: [
+      "root",
+      "wrapper",
+      "title",
+      "description",
+      "icon",
+      "avatar",
+      "avatarSize",
+      "actions",
+      "close"
+    ],
     base: {
-      root: "relative w-full rounded-lg border p-4 flex gap-3 text-sm transition-all shadow-sm",
-      icon: "shrink-0 size-5 text-current",
-      content: "flex flex-col gap-1 w-full",
-      title: "font-semibold leading-none tracking-tight text-foreground",
-      description: "text-xs opacity-90 leading-relaxed"
+      root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",
+      wrapper: "min-w-0 flex-1 flex flex-col",
+      title: "text-sm font-medium",
+      description: "text-sm opacity-90",
+      icon: "shrink-0 size-5",
+      avatar: "shrink-0",
+      avatarSize: "2xl",
+      actions: "flex flex-wrap gap-1.5 shrink-0",
+      close: "p-0"
     },
     variants: {
       variant: {
-        default: { root: "bg-background text-foreground border-border" },
-        destructive: { root: "bg-error-500/10 text-error-700 border-error-500/20 dark:text-error-400" },
-        outline: { root: "border bg-transparent" },
-        solid: { root: "border-transparent text-white" }
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" }
+      },
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+        neutral: { root: "" }
+      },
+      orientation: {
+        horizontal: {
+          root: "items-center",
+          actions: "items-center"
+        },
+        vertical: {
+          root: "items-start",
+          actions: "items-start mt-2.5"
+        }
       },
-      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-      hasIcon: {
-        true: { icon: "block" },
-        false: { icon: "hidden" }
+      title: {
+        true: {
+          description: "mt-1"
+        }
       },
       theme: {
         flat: { root: "rl-flat" },
@@ -35,21 +62,69 @@ export const createAlertTheme = (colors: string[] = defaultColors) =>
         variant: "solid" as const,
         color,
         classNames: {
-          root: `rl-color-${color} bg-[var(--rl-bg)] text-white border-transparent`
+          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
         }
       })),
       ...colors.map((color) => ({
         variant: "outline" as const,
         color,
         classNames: {
-          root: `rl-color-${color} border-[var(--rl-border)]/20 text-[var(--rl-text)] bg-[var(--rl-bg)]/5`
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
         }
-      }))
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+        }
+      })),
+      {
+        color: "neutral",
+        variant: "solid",
+        classNames: {
+          root: "text-inverted bg-inverted"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "outline",
+        classNames: {
+          root: "text-highlighted bg-default ring ring-inset ring-default"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "soft",
+        classNames: {
+          root: "text-highlighted bg-elevated/50"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "subtle",
+        classNames: {
+          root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
+        }
+      }
     ],
     defaultVariants: {
-      variant: "default",
       color: "primary",
-      hasIcon: false
+      variant: "solid",
+      orientation: "horizontal"
     }
   })
 

package/src/themes/app.theme.ts

@@ -1,10 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const createAppTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createAppTheme()

package/src/themes/aspect-ratio.theme.ts

@@ -1,11 +1,13 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const aspectRatioTheme = defineTheme({
-  slots: ["root", "content"],
-  base: {
-    root: "relative w-full overflow-hidden",
-    content: "absolute inset-0 h-full w-full object-cover"
-  }
-})
+export const createAspectRatioTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "content"],
+    base: {
+      root: "relative w-full overflow-hidden",
+      content: "absolute inset-0 h-full w-full object-cover"
+    }
+  })
 
-export default aspectRatioTheme
+export default createAspectRatioTheme()

package/src/themes/audio.theme.ts

@@ -1,10 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const createAudioTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createAudioTheme()

package/src/themes/avatar-group.theme.ts

@@ -1,10 +1,12 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const avatarGroupTheme = defineTheme({
-  slots: ["root"],
-  base: {
-    root: "flex -space-x-3 hover:space-x-0 transition-all duration-300 [&_[data-slot=root]]:ring-2 [&_[data-slot=root]]:ring-background [&_[data-slot=root]]:transition-all"
-  }
-})
+export const createAvatarGroupTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "flex -space-x-3 hover:space-x-0 transition-all duration-300 [&_[data-slot=root]]:ring-2 [&_[data-slot=root]]:ring-background [&_[data-slot=root]]:transition-all"
+    }
+  })
 
-export default avatarGroupTheme
+export default createAvatarGroupTheme()

package/src/themes/avatar.theme.ts

@@ -1,28 +1,84 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const avatarTheme = defineTheme({
-  slots: ["root", "image", "fallback", "badge"],
-  base: {
-    root: "relative flex shrink-0 overflow-hidden rounded-full select-none",
-    image: "aspect-square h-full w-full object-cover",
-    fallback: "flex h-full w-full items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground uppercase",
-    badge: "absolute bottom-0 right-0 block size-2.5 rounded-full ring-2 ring-background"
-  },
-  variants: {
-    size: {
-      sm: { root: "size-8", fallback: "text-xs" },
-      md: { root: "size-10", fallback: "text-sm" },
-      lg: { root: "size-12", fallback: "text-base" }
+export const createAvatarTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "image", "fallback", "icon", "badge"],
+    base: {
+      root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative",
+      image: "h-full w-full rounded-[inherit] object-cover",
+      fallback: "font-medium truncate",
+      icon: "shrink-0",
+      badge: "absolute rounded-full ring-2 ring-bg"
     },
-    hasBadge: {
-      true: { badge: "block" },
-      false: { badge: "hidden" }
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              root: `bg-${color}/10`,
+              fallback: `text-${color}`,
+              icon: `text-${color}`
+            }
+          ])
+        ),
+        neutral: {
+          root: "bg-elevated",
+          fallback: "text-muted",
+          icon: "text-muted"
+        }
+      },
+      size: {
+        "3xs": {
+          root: "size-4 text-[8px]",
+          badge: "size-1.5"
+        },
+        "2xs": {
+          root: "size-5 text-[10px]",
+          badge: "size-2"
+        },
+        "xs": {
+          root: "size-6 text-xs",
+          badge: "size-2"
+        },
+        "sm": {
+          root: "size-7 text-sm",
+          badge: "size-2.5"
+        },
+        "md": {
+          root: "size-8 text-base",
+          badge: "size-3"
+        },
+        "lg": {
+          root: "size-9 text-lg",
+          badge: "size-3"
+        },
+        "xl": {
+          root: "size-10 text-xl",
+          badge: "size-3.5"
+        },
+        "2xl": {
+          root: "size-11 text-[22px]",
+          badge: "size-4"
+        },
+        "3xl": {
+          root: "size-12 text-2xl",
+          badge: "size-4"
+        }
+      },
+      badgePosition: {
+        "top-right": { badge: "top-0 right-0" },
+        "bottom-right": { badge: "bottom-0 right-0" },
+        "top-left": { badge: "top-0 left-0" },
+        "bottom-left": { badge: "bottom-0 left-0" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "neutral",
+      badgePosition: "bottom-right"
     }
-  },
-  defaultVariants: {
-    size: "md",
-    hasBadge: false
-  }
-})
+  })
 
-export default avatarTheme
+export default createAvatarTheme()

package/src/themes/badge.theme.ts

@@ -1,31 +1,68 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
 export const createBadgeTheme = (colors: string[] = defaultColors) =>
   defineTheme({
-    slots: ["root"],
+    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
     base: {
-      root: "inline-flex items-center gap-1.5 font-medium select-none overflow-hidden transition-all duration-150"
+      root: "font-medium inline-flex items-center gap-1.5 transition-all duration-150 select-none",
+      label: "truncate",
+      leadingIcon: "shrink-0",
+      leadingAvatar: "shrink-0",
+      leadingAvatarSize: "",
+      trailingIcon: "shrink-0"
     },
     variants: {
       variant: {
-        solid: { root: "border border-transparent text-white" },
-        outline: { root: "border" },
-        soft: { root: "border border-transparent" },
-        ghost: { root: "bg-transparent hover:bg-muted" }
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" }
+      },
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+        neutral: { root: "" }
       },
-      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
       size: {
-        sm: { root: "px-2 py-0.5 text-2xs rounded-full h-5" },
-        md: { root: "px-2.5 py-0.5 text-xs rounded-full h-6" },
-        lg: { root: "px-3 py-1 text-sm rounded-full h-7" }
+        xs: {
+          root: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm",
+          leadingIcon: "size-3",
+          leadingAvatarSize: "3xs",
+          trailingIcon: "size-3"
+        },
+        sm: {
+          root: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm",
+          leadingIcon: "size-3",
+          leadingAvatarSize: "3xs",
+          trailingIcon: "size-3"
+        },
+        md: {
+          root: "text-xs px-2 py-1 gap-1 rounded-md",
+          leadingIcon: "size-4",
+          leadingAvatarSize: "3xs",
+          trailingIcon: "size-4"
+        },
+        lg: {
+          root: "text-sm px-2 py-1 gap-1.5 rounded-md",
+          leadingIcon: "size-5",
+          leadingAvatarSize: "2xs",
+          trailingIcon: "size-5"
+        },
+        xl: {
+          root: "text-base px-2.5 py-1 gap-1.5 rounded-md",
+          leadingIcon: "size-6",
+          leadingAvatarSize: "2xs",
+          trailingIcon: "size-6"
+        }
       },
       shape: {
         square: { root: "rounded-sm" },
         rounded: { root: "rounded-md" },
         pill: { root: "rounded-full" }
       },
+      square: {
+        true: { root: "" }
+      },
       theme: {
         flat: { root: "rl-flat" },
         light: { root: "rl-light" },
@@ -37,23 +74,89 @@ export const createBadgeTheme = (colors: string[] = defaultColors) =>
         variant: "solid" as const,
         color,
         classNames: {
-          root: `rl-color-${color} bg-[var(--rl-bg)] text-white hover:bg-[var(--rl-bg-hover)]`
+          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
         }
       })),
       ...colors.map((color) => ({
         variant: "outline" as const,
         color,
         classNames: {
-          root: `rl-color-${color} border-[var(--rl-border)]/20 text-[var(--rl-text)] bg-transparent hover:bg-[var(--rl-bg)]/5`
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/50"
         }
       })),
       ...colors.map((color) => ({
         variant: "soft" as const,
         color,
         classNames: {
-          root: `rl-color-${color} text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/20`
+          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
         }
-      }))
+      })),
+      {
+        color: "neutral",
+        variant: "solid",
+        classNames: {
+          root: "text-inverted bg-inverted"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "outline",
+        classNames: {
+          root: "ring ring-inset ring-accented text-default bg-default"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "soft",
+        classNames: {
+          root: "text-default bg-elevated"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "subtle",
+        classNames: {
+          root: "ring ring-inset ring-accented text-default bg-elevated"
+        }
+      },
+      {
+        size: "xs",
+        square: true,
+        classNames: { root: "p-0.5" }
+      },
+      {
+        size: "sm",
+        square: true,
+        classNames: { root: "p-1" }
+      },
+      {
+        size: "md",
+        square: true,
+        classNames: { root: "p-1" }
+      },
+      {
+        size: "lg",
+        square: true,
+        classNames: { root: "p-1" }
+      },
+      {
+        size: "xl",
+        square: true,
+        classNames: { root: "p-1" }
+      }
     ],
     defaultVariants: {
       variant: "solid",

package/src/themes/banner.theme.ts

@@ -1,10 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const createBannerTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createBannerTheme()

package/src/themes/breadcrumb.theme.ts

@@ -1,15 +1,17 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const breadcrumbTheme = defineTheme({
-  slots: ["root", "list", "item", "link", "separator", "page"],
-  base: {
-    root: "aria-label='breadcrumb'",
-    list: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-    item: "flex items-center gap-1.5",
-    link: "transition-colors hover:text-foreground cursor-pointer decoration-none text-current",
-    separator: "flex size-3.5 items-center justify-center [&_svg]:size-3.5 opacity-60",
-    page: "font-normal text-foreground"
-  }
-})
+export const createBreadcrumbTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "list", "item", "link", "separator", "page"],
+    base: {
+      root: "aria-label='breadcrumb'",
+      list: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      item: "flex items-center gap-1.5",
+      link: "transition-colors hover:text-foreground cursor-pointer decoration-none text-current",
+      separator: "flex size-3.5 items-center justify-center [&_svg]:size-3.5 opacity-60",
+      page: "font-normal text-foreground"
+    }
+  })
 
-export default breadcrumbTheme
+export default createBreadcrumbTheme()

package/src/themes/browser-mockup.theme.ts

@@ -1,10 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const createBrowserMockupTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createBrowserMockupTheme()