@rimelight/ui 0.0.30 → 0.0.32

package/src/styles/index.css

@@ -2,6 +2,12 @@
 @import "@nuxt/ui";
 @import "./prism.css";
 
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
 /* Keyboard Component Styles */
 .keyboard-wrapper {
   display: flex;

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

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

package/src/themes/accordion.theme.ts

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

package/src/themes/alert.theme.ts

@@ -0,0 +1,56 @@
+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"],
+    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"
+    },
+    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" }
+      },
+      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+      hasIcon: {
+        true: { icon: "block" },
+        false: { icon: "hidden" }
+      },
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: `rl-color-${color} bg-[var(--rl-bg)] text-white border-transparent`
+        }
+      })),
+      ...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`
+        }
+      }))
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary",
+      hasIcon: false
+    }
+  })
+
+export default createAlertTheme()

package/src/themes/app.theme.ts

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

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

@@ -0,0 +1,11 @@
+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 default aspectRatioTheme

package/src/themes/audio.theme.ts

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

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

@@ -0,0 +1,10 @@
+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 default avatarGroupTheme

package/src/themes/avatar.theme.ts

@@ -0,0 +1,28 @@
+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" }
+    },
+    hasBadge: {
+      true: { badge: "block" },
+      false: { badge: "hidden" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    hasBadge: false
+  }
+})
+
+export default avatarTheme

package/src/themes/badge.theme.ts

@@ -0,0 +1,66 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createBadgeTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "inline-flex items-center gap-1.5 font-medium select-none overflow-hidden transition-all duration-150"
+    },
+    variants: {
+      variant: {
+        solid: { root: "border border-transparent text-white" },
+        outline: { root: "border" },
+        soft: { root: "border border-transparent" },
+        ghost: { root: "bg-transparent hover:bg-muted" }
+      },
+      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" }
+      },
+      shape: {
+        square: { root: "rounded-sm" },
+        rounded: { root: "rounded-md" },
+        pill: { root: "rounded-full" }
+      },
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: `rl-color-${color} bg-[var(--rl-bg)] text-white hover:bg-[var(--rl-bg-hover)]`
+        }
+      })),
+      ...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`
+        }
+      })),
+      ...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`
+        }
+      }))
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      shape: "pill"
+    }
+  })
+
+export default createBadgeTheme()

package/src/themes/banner.theme.ts

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

package/src/themes/breadcrumb.theme.ts

@@ -0,0 +1,15 @@
+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 default breadcrumbTheme

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

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

package/src/themes/button.theme.ts

@@ -1,190 +1,195 @@
-import { defineTheme } from "../utils/defineTheme"
-
-const defaultColors = [
-  "primary",
-  "secondary",
-  "info",
-  "success",
-  "warning",
-  "error",
-  "commentary",
-  "ideation",
-  "source"
-]
-
-export const createButtonTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "label", "leadingIcon", "trailingIcon"],
-    base: {
-      root: [
-        "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
-        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
-        "transition-all outline-none focus-visible:ring-3",
-        "disabled:pointer-events-none disabled:op-50",
-        "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
-      ],
-      label: "truncate",
-      leadingIcon: "shrink-0",
-      trailingIcon: "shrink-0"
-    },
-    variants: {
-      variant: {
-        solid: { root: "shadow-sm border border-transparent" },
-        outline: { root: "b shadow-sm border" },
-        soft: { root: "" },
-        subtle: { root: "" },
-        ghost: { root: "" },
-        link: { root: "p-0 h-auto no-underline" }
-      },
-      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-      size: {
-        xs: {
-          root: "h-7 px-2xs text-xs [&_svg]:size-3.5",
-          leadingIcon: "[&_svg]:size-3.5 [&_span]:size-3.5",
-          trailingIcon: "[&_svg]:size-3.5 [&_span]:size-3.5"
-        },
-        sm: {
-          root: "h-8 px-xs text-sm [&_svg]:size-4",
-          leadingIcon: "[&_svg]:size-4 [&_span]:size-4",
-          trailingIcon: "[&_svg]:size-4 [&_span]:size-4"
-        },
-        md: {
-          root: "h-9 px-sm text-sm [&_svg]:size-4",
-          leadingIcon: "[&_svg]:size-4 [&_span]:size-4",
-          trailingIcon: "[&_svg]:size-4 [&_span]:size-4"
-        },
-        lg: {
-          root: "h-10 px-md text-base [&_svg]:size-4.5",
-          leadingIcon: "[&_svg]:size-4.5 [&_span]:size-4.5",
-          trailingIcon: "[&_svg]:size-4.5 [&_span]:size-4.5"
-        },
-        xl: {
-          root: "h-11 px-lg text-base [&_svg]:size-5",
-          leadingIcon: "[&_svg]:size-5 [&_span]:size-5",
-          trailingIcon: "[&_svg]:size-5 [&_span]:size-5"
-        }
-      },
-      block: {
-        true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
-      },
-      square: {
-        true: { root: "" }
-      },
-      leading: { true: {} },
-      trailing: { true: {} },
-      loading: { true: {} },
-      active: {
-        true: { root: "" },
-        false: { root: "" }
-      }
-    },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root: `bg-${color}-500 text-white hover:bg-${color}-600 focus-visible:ring-${color}-500/50`
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root: `border-${color}-500/20 text-${color}-600 bg-${color}-500/5 hover:bg-${color}-500/10 hover:border-${color}-500/30 focus-visible:ring-${color}-500/40`
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20 focus-visible:ring-${color}-500/40`
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20 focus-visible:ring-${color}-500/40`
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "ghost" as const,
-        color,
-        classNames: {
-          root: `text-${color}-600 hover:bg-${color}-500/10 focus-visible:ring-${color}-500/40`
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "link" as const,
-        color,
-        classNames: {
-          root: `text-${color}-600 hover:underline hover:decoration-${color}-300`
-        }
-      })),
-      {
-        square: true,
-        size: "xs",
-        classNames: {
-          root: "p-1 w-7"
-        }
-      },
-      {
-        square: true,
-        size: "sm",
-        classNames: {
-          root: "p-1.5 w-8"
-        }
-      },
-      {
-        square: true,
-        size: "md",
-        classNames: {
-          root: "p-1.5 w-9"
-        }
-      },
-      {
-        square: true,
-        size: "lg",
-        classNames: {
-          root: "p-2 w-10"
-        }
-      },
-      {
-        square: true,
-        size: "xl",
-        classNames: {
-          root: "p-2 w-11"
-        }
-      },
-      {
-        loading: true,
-        leading: true,
-        classNames: {
-          leadingIcon: "animate-spin"
-        }
-      },
-      {
-        loading: true,
-        leading: false,
-        trailing: true,
-        classNames: {
-          trailingIcon: "animate-spin"
-        }
-      },
-      {
-        loading: true,
-        leading: false,
-        trailing: false,
-        classNames: {
-          trailingIcon: "animate-spin"
-        }
-      }
-    ],
-    defaultVariants: {
-      variant: "solid",
-      color: "primary",
-      size: "md"
-    }
-  })
-
-export default createButtonTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = [
+  "primary",
+  "secondary",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "commentary",
+  "ideation",
+  "source"
+]
+
+export const createButtonTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "label", "leadingIcon", "trailingIcon"],
+    base: {
+      root: [
+        "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "transition-all outline-none focus-visible:ring-3",
+        "disabled:pointer-events-none disabled:op-50",
+        "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
+      ],
+      label: "truncate",
+      leadingIcon: "shrink-0",
+      trailingIcon: "shrink-0"
+    },
+    variants: {
+      variant: {
+        solid: { root: "shadow-sm border border-transparent" },
+        outline: { root: "b shadow-sm border" },
+        soft: { root: "" },
+        subtle: { root: "" },
+        ghost: { root: "" },
+        link: { root: "p-0 h-auto no-underline" }
+      },
+      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+      size: {
+        xs: {
+          root: "h-7 px-2xs text-xs [&_svg]:size-3.5",
+          leadingIcon: "[&_svg]:size-3.5 [&_span]:size-3.5",
+          trailingIcon: "[&_svg]:size-3.5 [&_span]:size-3.5"
+        },
+        sm: {
+          root: "h-8 px-xs text-sm [&_svg]:size-4",
+          leadingIcon: "[&_svg]:size-4 [&_span]:size-4",
+          trailingIcon: "[&_svg]:size-4 [&_span]:size-4"
+        },
+        md: {
+          root: "h-9 px-sm text-sm [&_svg]:size-4",
+          leadingIcon: "[&_svg]:size-4 [&_span]:size-4",
+          trailingIcon: "[&_svg]:size-4 [&_span]:size-4"
+        },
+        lg: {
+          root: "h-10 px-md text-base [&_svg]:size-4.5",
+          leadingIcon: "[&_svg]:size-4.5 [&_span]:size-4.5",
+          trailingIcon: "[&_svg]:size-4.5 [&_span]:size-4.5"
+        },
+        xl: {
+          root: "h-11 px-lg text-base [&_svg]:size-5",
+          leadingIcon: "[&_svg]:size-5 [&_span]:size-5",
+          trailingIcon: "[&_svg]:size-5 [&_span]:size-5"
+        }
+      },
+      block: {
+        true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
+      },
+      square: {
+        true: { root: "" }
+      },
+      leading: { true: {} },
+      trailing: { true: {} },
+      loading: { true: {} },
+      active: {
+        true: { root: "" },
+        false: { root: "" }
+      },
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: `rl-color-${color} bg-[var(--rl-bg)] text-white hover:bg-[var(--rl-bg-hover)] focus-visible:ring-[var(--rl-ring)]/50`
+        }
+      })),
+      ...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 hover:bg-[var(--rl-bg)]/10 hover:border-[var(--rl-border)]/30 focus-visible:ring-[var(--rl-ring)]/40`
+        }
+      })),
+      ...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 focus-visible:ring-[var(--rl-ring)]/40`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root: `rl-color-${color} text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/20 focus-visible:ring-[var(--rl-ring)]/40`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "ghost" as const,
+        color,
+        classNames: {
+          root: `rl-color-${color} text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 focus-visible:ring-[var(--rl-ring)]/40`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "link" as const,
+        color,
+        classNames: {
+          root: `rl-color-${color} text-[var(--rl-text)] hover:underline hover:decoration-current`
+        }
+      })),
+      {
+        square: true,
+        size: "xs",
+        classNames: {
+          root: "p-1 w-7"
+        }
+      },
+      {
+        square: true,
+        size: "sm",
+        classNames: {
+          root: "p-1.5 w-8"
+        }
+      },
+      {
+        square: true,
+        size: "md",
+        classNames: {
+          root: "p-1.5 w-9"
+        }
+      },
+      {
+        square: true,
+        size: "lg",
+        classNames: {
+          root: "p-2 w-10"
+        }
+      },
+      {
+        square: true,
+        size: "xl",
+        classNames: {
+          root: "p-2 w-11"
+        }
+      },
+      {
+        loading: true,
+        leading: true,
+        classNames: {
+          leadingIcon: "animate-spin"
+        }
+      },
+      {
+        loading: true,
+        leading: false,
+        trailing: true,
+        classNames: {
+          trailingIcon: "animate-spin"
+        }
+      },
+      {
+        loading: true,
+        leading: false,
+        trailing: false,
+        classNames: {
+          trailingIcon: "animate-spin"
+        }
+      }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md"
+    }
+  })
+
+export default createButtonTheme()