@rimelight/ui 0.0.27 → 0.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [

package/src/components/astro/RLAButton.astro

@@ -2,10 +2,14 @@
 import { scv, cx } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { ComponentVariants, ComponentSlots } from "../../types"
-import buttonTheme from "../../themes/button.theme"
+import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
 
 const button = scv(buttonTheme)
-type ButtonVariants = ComponentVariants<typeof buttonTheme>
+type ButtonVariants = ComponentVariants<typeof buttonThemeDefault>
 
 export interface RLAButtonProps {
   variant?: ButtonVariants['variant'];

package/src/components/astro/RLAEmbedYoutube.astro

@@ -1,16 +1,17 @@
 ---
-const PLACEHOLDER_THUMBNAIL = "/assets/blog-placeholder-1.jpg";
-
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import embedYoutubeTheme from "../../themes/embedYoutube.theme"
+import type { RLAIconProps } from "./RLAIcon.astro"
+import { Image } from "astro:assets"
+
+const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";
 const YOUTUBE_EMBED_BASE = "https://www.youtube.com/embed/";
-
 const VALID_ID_PATTERN = /^[\w-]{11}$/;
-
 const KNOWN_PREFIXES = ["www.", "m.", "music.", "gaming."];
-
 const YOUTUBE_THUMB_BASE = "https://i3.ytimg.com/vi/";
-
 const MAXRES_THUMBNAIL = "maxresdefault.jpg";
-
 const DEFAULT_THUMBNAIL = "hqdefault.jpg";
 
 const thumbnailAvailabilityCache = new Map<string, boolean>();
@@ -109,44 +110,75 @@ function getYoutubeEmbedUrl(rawUrl: string): string | null {
   return id ? `${YOUTUBE_EMBED_BASE}${id}?autoplay=1` : null;
 }
 
-interface Props {
+const embedYoutube = scv(embedYoutubeTheme)
+type EmbedYoutubeVariants = ComponentVariants<typeof embedYoutubeTheme>
+
+export interface RLAEmbedYoutubeProps {
+  /**
+   * The URL of the YouTube video to embed.
+   */
   src: string;
+  /**
+    * The title of the video to display.
+    * @default "YouTube Video Player"
+    */
   title?: string;
-  class?: string;
+  /**
+   * The name of the icon to display in the play trigger overlay.
+   * @default "i-lucide-play"
+   */
+  icon?: RLAIconProps["name"];
+  ui?: ComponentSlots<typeof embedYoutubeTheme>;
+  class?: any;
+  [key: string]: unknown;
 }
 
-const { src, title = "YouTube video player", class: className } = Astro.props;
+const {
+  src,
+  title = "YouTube Video Player",
+  icon = "i-lucide-play",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RLAEmbedYoutubeProps;
+
+const classes = resolveClasses(embedYoutube, {
+  title: !!(Astro.slots.has("title") || Astro.props.title),
+  icon: !!(Astro.slots.has("icon") || Astro.props.icon),
+}, useUi("embedYoutube", uiProp), className);
 
 const embedUrl = getYoutubeEmbedUrl(src);
 const thumbnail = await getYoutubeThumbnail(src);
 const isPlayable = Boolean(embedUrl);
-const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable";
+const ariaLabel = isPlayable ? "Play YouTube Video" : "YouTube Video Unavailable";
 ---
 
-<div class:list={["relative aspect-video h-full w-full cursor-pointer overflow-hidden", className]} data-youtube-video>
+<div
+    class:list={[classes.root]}
+    {...rest}
+>
   <button
     type="button"
-    class="absolute inset-0 aspect-video h-full w-full overflow-hidden group"
     data-youtube-trigger
     aria-label={ariaLabel}
     data-embed-url={isPlayable ? embedUrl : undefined}
     disabled={!isPlayable}
     data-video-title={title}
+    class:list={[classes.trigger]}
   >
-    <img
+    <Image
+      layout="full-width"
       src={thumbnail}
-      class="h-full w-full object-cover"
       alt={title}
       width="1280"
       height="720"
       loading="lazy"
+      class:list={[classes.image]}
     />
 
-    <span class="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/30 transition-colors">
-      <svg class="h-20 w-20 text-white opacity-85 transition-all transform group-hover:opacity-100 group-hover:scale-110 duration-300" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M8 5v14l11-7z"/>
-      </svg>
-    </span>
+    <slot name="icon">
+      <span class:list={[classes.icon, icon]} aria-hidden="true" />
+    </slot>
   </button>
 </div>
 
@@ -167,7 +199,7 @@ const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable
       iframe.src = embedUrl;
       iframe.title = title;
       iframe.allow =
-        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
       iframe.allowFullscreen = true;
       iframe.loading = "lazy";
       iframe.referrerPolicy = "strict-origin-when-cross-origin";
@@ -176,7 +208,6 @@ const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable
       root.replaceChildren(iframe);
     };
 
-    // click and accessibility activation
     trigger.addEventListener("click", activate, { once: true });
     trigger.addEventListener("keydown", (event) => {
       if (event.key === "Enter" || event.key === " ") {
@@ -185,4 +216,4 @@ const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable
       }
     }, { once: true });
   })();
-</script>
+</script>

package/src/components/astro/RLASection.astro

@@ -104,23 +104,19 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
   <slot name="top" />
 
   <div
-    data-slot="container"
     class:list={[classes.container]}
   >
     {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
       <div
-        data-slot="wrapper"
         class:list={[classes.wrapper]}
       >
         {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description) && (
           <div
-            data-slot="header"
             class:list={[classes.header]}
           >
             <slot name="header">
               {(Astro.props.icon || Astro.slots.has("leading")) && (
                 <div
-                  data-slot="leading"
                   class:list={[classes.leading]}
                 >
                   <slot name="leading" {...{ ui: classes }}>
@@ -133,7 +129,6 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
               {(Astro.props.headline || Astro.slots.has("headline")) && (
                 <div
-                  data-slot="headline"
                   class:list={[classes.headline]}
                 >
                   <slot name="headline">
@@ -144,7 +139,6 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
               {(Astro.props.title || Astro.slots.has("title")) && (
                 <TitleTag
-                  data-slot="title"
                   class:list={[classes.title]}
                 >
                   <slot name="title">
@@ -155,7 +149,6 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
               {(Astro.props.description || Astro.slots.has("description")) && (
                 <div
-                  data-slot="description"
                   class:list={[classes.description]}
                 >
                   <slot name="description">
@@ -169,7 +162,6 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
         {Astro.slots.has("body") && (
           <div
-            data-slot="body"
             class:list={[classes.body]}
           >
             <slot name="body" />
@@ -178,13 +170,11 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
         {(Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
           <div
-            data-slot="footer"
             class:list={[classes.footer]}
           >
             <slot name="footer">
               {(Astro.props.links?.length || Astro.slots.has("links")) && (
                 <div
-                  data-slot="links"
                   class:list={[classes.links]}
                 >
                   {Astro.props.links?.map((link) => (

package/src/env.d.ts

@@ -9,7 +9,7 @@ declare module "virtual:nuxt-ui-plugins" {
 declare module "virtual:rimelight-ui" {
   import type { DefaultUIConfig } from "../themes"
 
-  export function getUIConfig(): DefaultUIConfig
+  export function getUIConfig(): DefaultUIConfig & { colors?: string[] }
 }
 
 interface StarlightAddonsConfig {

package/src/integrations/ui.ts

@@ -33,6 +33,10 @@ export interface UIOptions {
    * wins).
    */
   ui?: UIConfigOverrides
+  /**
+   * Custom color names to dynamically generate variants for.
+   */
+  colors?: string[]
 }
 
 /**
@@ -59,7 +63,9 @@ export interface UIOptions {
  */
 export function ui(options: UIOptions = {}): AstroIntegration[] {
   const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
-  const resolvedConfig = { ...resolvedUI, logos: options.logos ?? {} }
+  const coreColors = ["primary", "secondary", "info", "success", "warning", "error", "commentary", "ideation", "source"]
+  const mergedColors = [...new Set([...coreColors, ...(options.colors || [])])]
+  const resolvedConfig = { ...resolvedUI, logos: options.logos ?? {}, colors: mergedColors }
 
   const virtualModuleId = "virtual:rimelight-ui"
   const resolvedVirtualModuleId = "\0" + virtualModuleId

package/src/presets/index.ts

@@ -1,3 +1,5 @@
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
 import {
   definePreset,
   presetTypography,
@@ -7,9 +9,55 @@ import {
   transformerVariantGroup
 } from "unocss"
 
-export default definePreset(() => {
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const uiSrcGlob = join(__dirname, "../**/*.{js,ts,jsx,tsx,vue,svelte,astro}")
+const uiFilesystemGlob = join(__dirname, "../**/*")
+
+const createScale = (colorName: string) => ({
+  DEFAULT: `var(--${colorName})`,
+  foreground: `var(--${colorName}-foreground)`,
+  accent: `var(--${colorName}-accent)`,
+  "50": `var(--color-${colorName}-50)`,
+  "100": `var(--color-${colorName}-100)`,
+  "200": `var(--color-${colorName}-200)`,
+  "300": `var(--color-${colorName}-300)`,
+  "400": `var(--color-${colorName}-400)`,
+  "500": `var(--color-${colorName}-500)`,
+  "600": `var(--color-${colorName}-600)`,
+  "700": `var(--color-${colorName}-700)`,
+  "800": `var(--color-${colorName}-800)`,
+  "900": `var(--color-${colorName}-900)`,
+  "950": `var(--color-${colorName}-950)`
+})
+
+export interface RimelightPresetOptions {
+  colors?: string[]
+}
+
+export default definePreset((options?: RimelightPresetOptions) => {
+  const customColors = options?.colors || []
+  const coreColors = ["primary", "secondary", "info", "success", "warning", "error", "commentary", "ideation", "source"]
+  const allColors = [...new Set([...coreColors, ...customColors])]
+
+  const safelist = allColors.flatMap(color => [
+    `bg-${color}-500`,
+    `hover:bg-${color}-600`,
+    `focus-visible:ring-${color}-500/50`,
+    `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`,
+    `bg-${color}-500/10`,
+    `hover:bg-${color}-500/20`,
+    `hover:underline`,
+    `hover:decoration-${color}-300`
+  ])
+
   return {
     name: "rimelight-ui",
+    safelist,
     presets: [
       presetWind4(),
       presetTypography({
@@ -47,10 +95,11 @@ export default definePreset(() => {
         include: [
           /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
           "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
+          uiSrcGlob,
           "../ui/src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}"
         ]
       },
-      filesystem: ["../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
+      filesystem: [uiFilesystemGlob, "../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
     },
 
     shortcuts: {
@@ -94,16 +143,7 @@ export default definePreset(() => {
           DEFAULT: "var(--popover)",
           foreground: "var(--popover-foreground)"
         },
-        "primary": {
-          DEFAULT: "var(--primary)",
-          foreground: "var(--primary-foreground)",
-          accent: "var(--primary-accent)"
-        },
-        "secondary": {
-          DEFAULT: "var(--secondary)",
-          foreground: "var(--secondary-foreground)",
-          accent: "var(--secondary-accent)"
-        },
+        ...Object.fromEntries(allColors.map(color => [color, createScale(color)])),
         "muted": {
           DEFAULT: "var(--muted)",
           foreground: "var(--muted-foreground)"
@@ -112,34 +152,6 @@ export default definePreset(() => {
           DEFAULT: "var(--accent)",
           foreground: "var(--accent-foreground)"
         },
-        "info": {
-          DEFAULT: "var(--info)",
-          foreground: "var(--info-foreground)"
-        },
-        "success": {
-          DEFAULT: "var(--success)",
-          foreground: "var(--success-foreground)"
-        },
-        "warning": {
-          DEFAULT: "var(--warning)",
-          foreground: "var(--warning-foreground)"
-        },
-        "error": {
-          DEFAULT: "var(--error)",
-          foreground: "var(--error-foreground)"
-        },
-        "commentary": {
-          DEFAULT: "var(--commentary)",
-          foreground: "var(--commentary-foreground)"
-        },
-        "ideation": {
-          DEFAULT: "var(--ideation)",
-          foreground: "var(--ideation-foreground)"
-        },
-        "source": {
-          DEFAULT: "var(--source)",
-          foreground: "var(--source-foreground)"
-        },
         "border": "var(--border)",
         "input": "var(--input)",
         "outline": "var(--outline)",
@@ -209,159 +221,7 @@ export default definePreset(() => {
       }
     },
 
-    preflights: [
-      {
-        getCSS: () => `
-          :root {
-            --background: #ffffff;
-            --foreground: #030712;
-            --card: #ffffff;
-            --card-foreground: #030712;
-            --popover: #ffffff;
-            --popover-foreground: #030712;
-            --primary: #f97316;
-            --primary-foreground: #f9fafb;
-            --primary-accent: #ea580c;
-            --secondary: #8b5cf6;
-            --secondary-foreground: #f9fafb;
-            --secondary-accent: #7c3aed;
-            --muted: #f3f4f6;
-            --muted-foreground: #4b5563;
-            --accent: #f3f4f6;
-            --accent-foreground: #111827;
-            --info: #3b82f6;
-            --info-foreground: #ffffff;
-            --success: #22c55e;
-            --success-foreground: #ffffff;
-            --warning: #f59e0b;
-            --warning-foreground: #000000;
-            --error: #ef4444;
-            --error-foreground: #f9fafb;
-            --commentary: #ec4899;
-            --commentary-foreground: #f9fafb;
-            --ideation: #8b5cf6;
-            --ideation-foreground: #f9fafb;
-            --source: #38bdf8;
-            --source-foreground: #0f172a;
-            --border: #e5e7eb;
-            --input: #e5e7eb;
-            --outline: #9ca3af;
-            --ring: #9ca3af;
-            --radius: 0.625rem;
-            --sidebar: #f9fafb;
-            --sidebar-foreground: #030712;
-            --sidebar-primary: #1d4ed8;
-            --sidebar-primary-foreground: #f9fafb;
-            --sidebar-accent: #f3f4f6;
-            --sidebar-accent-foreground: #111827;
-            --sidebar-border: #e5e7eb;
-            --sidebar-ring: #9ca3af;
-            --chart-1: #3b82f6;
-            --chart-2: #6366f1;
-            --chart-3: #8b5cf6;
-            --chart-4: #a855f7;
-            --chart-5: #ec4899;
-            --destructive: #ef4444;
-            --color-surface: #ffffff;
-            --color-muted-strong: #e5e7eb;
-            --color-foreground-secondary: #4b5563;
-            --color-foreground-tertiary: #6b7280;
-            --color-placeholder: #9ca3af;
-            --color-input-border: #d1d5db;
-            --color-hover: #f3f4f6;
-            --color-destructive-subtle: #fef2f2;
-            --color-accent-subtle: #eff6ff;
-            --font-sans: "Noto Sans", sans-serif;
-            --font-serif: "Noto Serif", serif;
-            --font-mono: "Noto Sans Mono", monospace;
-          }
-
-          .dark {
-            --background: #030712;
-            --foreground: #f9fafb;
-            --card: #111827;
-            --card-foreground: #f9fafb;
-            --popover: #1f2937;
-            --popover-foreground: #f9fafb;
-            --primary: #f97316;
-            --primary-foreground: #f9fafb;
-            --primary-accent: #fb923c;
-            --secondary: #8b5cf6;
-            --secondary-foreground: #f9fafb;
-            --secondary-accent: #a78bfa;
-            --muted: #1f2937;
-            --muted-foreground: #9ca3af;
-            --accent: #374151;
-            --accent-foreground: #f3f4f6;
-            --info: #3b82f6;
-            --info-foreground: #ffffff;
-            --success: #22c55e;
-            --success-foreground: #ffffff;
-            --warning: #f59e0b;
-            --warning-foreground: #000000;
-            --error: #ef4444;
-            --error-foreground: #f9fafb;
-            --commentary: #f472b6;
-            --commentary-foreground: #0f172a;
-            --ideation: #a78bfa;
-            --ideation-foreground: #0f172a;
-            --source: #7dd3fc;
-            --source-foreground: #0f172a;
-            --border: rgba(249, 250, 251, 0.1);
-            --input: rgba(249, 250, 251, 0.15);
-            --outline: #6b7280;
-            --ring: #6b7280;
-            --sidebar: #111827;
-            --sidebar-foreground: #f9fafb;
-            --sidebar-primary: #1d4ed8;
-            --sidebar-primary-foreground: #f9fafb;
-            --sidebar-accent: #1f2937;
-            --sidebar-accent-foreground: #f3f4f6;
-            --sidebar-border: #1f2937;
-            --sidebar-ring: #6b7280;
-            --chart-1: #60a5fa;
-            --chart-2: #818cf8;
-            --chart-3: #a78bfa;
-            --chart-4: #c084fc;
-            --chart-5: #f472b6;
-            --destructive: #f87171;
-            --color-surface: #1f2937;
-            --color-muted-strong: #374151;
-            --color-foreground-secondary: #d1d5db;
-            --color-foreground-tertiary: #9ca3af;
-            --color-placeholder: #6b7280;
-            --color-input-border: #4b5563;
-            --color-hover: #374151;
-            --color-destructive-subtle: #451a1a;
-            --color-accent-subtle: #1e293b;
-          }
-
-          * {
-            border-color: var(--border);
-            outline-color: rgba(156, 163, 175, 0.5);
-          }
-
-          body {
-            background-color: var(--background);
-            color: var(--foreground);
-            font-family: var(--font-sans);
-          }
-
-          button {
-            cursor: pointer;
-          }
-
-          ::selection {
-            background-color: var(--primary);
-            color: var(--primary-foreground);
-          }
-
-          @view-transition {
-            navigation: auto;
-          }
-        `
-      }
-    ],
+    preflights: [],
 
     async configResolved(config) {
       if (process.env.NODE_ENV === "development" && !process.env.UNO_CONFIG_LOGGED) {

package/src/themes/button.theme.ts

@@ -1,6 +1,8 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default 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: [
@@ -16,23 +18,15 @@ export default defineTheme({
   },
   variants: {
     variant: {
-      solid: { root: "b shadow-xs" },
-      outline: { root: "b shadow-xs border" },
+      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" }
+      link: { root: "p-0 h-auto no-underline" }
     },
     color: {
-      primary: { root: "" },
-      secondary: { root: "" },
-      info: { root: "" },
-      success: { root: "" },
-      warning: { root: "" },
-      error: { root: "" },
-      commentary: { root: "" },
-      ideation: { root: "" },
-      source: { root: "" }
+      ...Object.fromEntries(colors.map(color => [color, { root: "" }]))
     },
     size: {
       xs: {
@@ -76,384 +70,48 @@ export default defineTheme({
     }
   },
   compoundVariants: [
-    {
-      variant: "solid",
-      color: "primary",
-      classNames: {
-        root: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50"
-      }
-    },
-    {
-      variant: "solid",
-      color: "secondary",
-      classNames: {
-        root: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50"
-      }
-    },
-    {
-      variant: "solid",
-      color: "info",
-      classNames: {
-        root: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50"
-      }
-    },
-    {
-      variant: "solid",
-      color: "success",
-      classNames: {
-        root: "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/50"
-      }
-    },
-    {
-      variant: "solid",
-      color: "warning",
-      classNames: {
-        root: "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/50"
-      }
-    },
-    {
-      variant: "solid",
-      color: "error",
-      classNames: {
-        root: "bg-error text-error-foreground hover:bg-error/90 focus-visible:ring-error/50"
-      }
-    },
-    {
-      variant: "solid",
-      color: "commentary",
-      classNames: {
-        root: "bg-commentary text-commentary-foreground hover:bg-commentary/90 focus-visible:ring-commentary/50"
-      }
-    },
-    {
-      variant: "solid",
-      color: "ideation",
-      classNames: {
-        root: "bg-ideation text-ideation-foreground hover:bg-ideation/90 focus-visible:ring-ideation/50"
-      }
-    },
-    {
-      variant: "solid",
-      color: "source",
-      classNames: {
-        root: "bg-source text-source-foreground hover:bg-source/90 focus-visible:ring-source/50"
-      }
-    },
-    {
-      variant: "outline",
-      color: "primary",
-      classNames: {
-        root: "border-primary/20 text-primary-600 bg-primary/5 hover:bg-primary/10 hover:border-primary/30 focus-visible:ring-primary/40"
-      }
-    },
-    {
-      variant: "outline",
-      color: "secondary",
-      classNames: {
-        root: "border-secondary/20 text-secondary-600 bg-secondary/5 hover:bg-secondary/10 hover:border-secondary/30 focus-visible:ring-secondary/40"
-      }
-    },
-    {
-      variant: "outline",
-      color: "info",
-      classNames: {
-        root: "border-info/20 text-info-600 bg-info/5 hover:bg-info/10 hover:border-info/30 focus-visible:ring-info/40"
-      }
-    },
-    {
-      variant: "outline",
-      color: "success",
-      classNames: {
-        root: "border-success/20 text-success-600 bg-success/5 hover:bg-success/10 hover:border-success/30 focus-visible:ring-success/40"
-      }
-    },
-    {
-      variant: "outline",
-      color: "warning",
-      classNames: {
-        root: "border-warning/20 text-warning-600 bg-warning/5 hover:bg-warning/10 hover:border-warning/30 focus-visible:ring-warning/40"
-      }
-    },
-    {
-      variant: "outline",
-      color: "error",
-      classNames: {
-        root: "border-error/20 text-error-600 bg-error/5 hover:bg-error/10 hover:border-error/30 focus-visible:ring-error/40"
-      }
-    },
-    {
-      variant: "outline",
-      color: "commentary",
-      classNames: {
-        root: "border-commentary/20 text-commentary-600 bg-commentary/5 hover:bg-commentary/10 hover:border-commentary/30 focus-visible:ring-commentary/40"
-      }
-    },
-    {
-      variant: "outline",
-      color: "ideation",
-      classNames: {
-        root: "border-ideation/20 text-ideation-600 bg-ideation/5 hover:bg-ideation/10 hover:border-ideation/30 focus-visible:ring-ideation/40"
-      }
-    },
-    {
-      variant: "outline",
-      color: "source",
-      classNames: {
-        root: "border-source/20 text-source-600 bg-source/5 hover:bg-source/10 hover:border-source/30 focus-visible:ring-source/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "primary",
-      classNames: {
-        root: "text-primary-600 bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "secondary",
-      classNames: {
-        root: "text-secondary-600 bg-secondary/10 hover:bg-secondary/20 focus-visible:ring-secondary/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "info",
-      classNames: {
-        root: "text-info-600 bg-info/10 hover:bg-info/20 focus-visible:ring-info/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "success",
-      classNames: {
-        root: "text-success-600 bg-success/10 hover:bg-success/20 focus-visible:ring-success/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "warning",
-      classNames: {
-        root: "text-warning-600 bg-warning/10 hover:bg-warning/20 focus-visible:ring-warning/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "error",
-      classNames: {
-        root: "text-error-600 bg-error/10 hover:bg-error/20 focus-visible:ring-error/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "commentary",
-      classNames: {
-        root: "text-commentary-600 bg-commentary/10 hover:bg-commentary/20 focus-visible:ring-commentary/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "ideation",
-      classNames: {
-        root: "text-ideation-600 bg-ideation/10 hover:bg-ideation/20 focus-visible:ring-ideation/40"
-      }
-    },
-    {
-      variant: "subtle",
-      color: "source",
-      classNames: {
-        root: "text-source-600 bg-source/10 hover:bg-source/20 focus-visible:ring-source/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "primary",
-      classNames: {
-        root: "text-primary-600 hover:bg-primary/10 focus-visible:ring-primary/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "secondary",
-      classNames: {
-        root: "text-secondary-600 hover:bg-secondary/10 focus-visible:ring-secondary/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "info",
-      classNames: {
-        root: "text-info-600 hover:bg-info/10 focus-visible:ring-info/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "success",
-      classNames: {
-        root: "text-success-600 hover:bg-success/10 focus-visible:ring-success/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "warning",
-      classNames: {
-        root: "text-warning-600 hover:bg-warning/10 focus-visible:ring-warning/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "error",
-      classNames: {
-        root: "text-error-600 hover:bg-error/10 focus-visible:ring-error/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "commentary",
-      classNames: {
-        root: "text-commentary-600 hover:bg-commentary/10 focus-visible:ring-commentary/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "ideation",
-      classNames: {
-        root: "text-ideation-600 hover:bg-ideation/10 hover:bg-ideation/20 focus-visible:ring-ideation/40"
-      }
-    },
-    {
-      variant: "ghost",
-      color: "source",
+    ...colors.map(color => ({
+      variant: "solid" as const,
+      color,
       classNames: {
-        root: "text-source-600 hover:bg-source/10 focus-visible:ring-source/40"
+        root: `bg-${color}-500 text-white hover:bg-${color}-600 focus-visible:ring-${color}-500/50`
       }
-    },
-    {
-      variant: "link",
-      color: "primary",
+    })),
+    ...colors.map(color => ({
+      variant: "outline" as const,
+      color,
       classNames: {
-        root: "text-primary-600 hover:underline hover:decoration-primary/30"
+        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`
       }
-    },
-    {
-      variant: "link",
-      color: "secondary",
+    })),
+    ...colors.map(color => ({
+      variant: "soft" as const,
+      color,
       classNames: {
-        root: "text-secondary-600 hover:underline hover:decoration-secondary/30"
+        root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20 focus-visible:ring-${color}-500/40`
       }
-    },
-    {
-      variant: "link",
-      color: "info",
+    })),
+    ...colors.map(color => ({
+      variant: "subtle" as const,
+      color,
       classNames: {
-        root: "text-info-600 hover:underline hover:decoration-info/30"
+        root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20 focus-visible:ring-${color}-500/40`
       }
-    },
-    {
-      variant: "link",
-      color: "success",
+    })),
+    ...colors.map(color => ({
+      variant: "ghost" as const,
+      color,
       classNames: {
-        root: "text-success-600 hover:underline hover:decoration-success/30"
+        root: `text-${color}-600 hover:bg-${color}-500/10 focus-visible:ring-${color}-500/40`
       }
-    },
-    {
-      variant: "link",
-      color: "warning",
+    })),
+    ...colors.map(color => ({
+      variant: "link" as const,
+      color,
       classNames: {
-        root: "text-warning-600 hover:underline hover:decoration-warning/30"
+        root: `text-${color}-600 hover:underline hover:decoration-${color}-300`
       }
-    },
-    {
-      variant: "link",
-      color: "error",
-      classNames: {
-        root: "text-error-600 hover:underline hover:decoration-error/30"
-      }
-    },
-    {
-      variant: "link",
-      color: "commentary",
-      classNames: {
-        root: "text-commentary-600 hover:underline hover:decoration-commentary/30"
-      }
-    },
-    {
-      variant: "link",
-      color: "ideation",
-      classNames: {
-        root: "text-ideation-600 hover:underline hover:decoration-ideation/30"
-      }
-    },
-    {
-      variant: "link",
-      color: "source",
-      classNames: {
-        root: "text-source-600 hover:underline hover:decoration-source/30"
-      }
-    },
-    {
-      variant: "soft",
-      color: "primary",
-      classNames: {
-        root: "text-primary-600 bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40"
-      }
-    },
-    {
-      variant: "soft",
-      color: "secondary",
-      classNames: {
-        root: "text-secondary-600 bg-secondary/10 hover:bg-secondary/20 focus-visible:ring-secondary/40"
-      }
-    },
-    {
-      variant: "soft",
-      color: "info",
-      classNames: {
-        root: "text-info-600 bg-info/10 hover:bg-info/20 focus-visible:ring-info/40"
-      }
-    },
-    {
-      variant: "soft",
-      color: "success",
-      classNames: {
-        root: "text-success-600 bg-success/10 hover:bg-success/20 focus-visible:ring-success/40"
-      }
-    },
-    {
-      variant: "soft",
-      color: "warning",
-      classNames: {
-        root: "text-warning-600 bg-warning/10 hover:bg-warning/20 focus-visible:ring-warning/40"
-      }
-    },
-    {
-      variant: "soft",
-      color: "error",
-      classNames: {
-        root: "text-error-600 bg-error/10 hover:bg-error/20 focus-visible:ring-error/40"
-      }
-    },
-    {
-      variant: "soft",
-      color: "commentary",
-      classNames: {
-        root: "text-commentary-600 bg-commentary/10 hover:bg-commentary/20 focus-visible:ring-commentary/40"
-      }
-    },
-    {
-      variant: "soft",
-      color: "ideation",
-      classNames: {
-        root: "text-ideation-600 bg-ideation/10 hover:bg-ideation/20 focus-visible:ring-ideation/40"
-      }
-    },
-    {
-      variant: "soft",
-      color: "source",
-      classNames: {
-        root: "text-source-600 bg-source/10 hover:bg-source/20 focus-visible:ring-source/40"
-      }
-    },
+    })),
     {
       square: true,
       size: "xs",
@@ -519,3 +177,5 @@ export default defineTheme({
     size: "md"
   }
 })
+
+export default createButtonTheme()

package/src/themes/embedYoutube.theme.ts

@@ -0,0 +1,19 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+    slots: [
+        "root",
+        "trigger",
+        "image",
+        "icon"
+    ],
+    base: {
+        root: "relative aspect-video h-full w-full cursor-pointer overflow-hidden",
+        trigger: "group absolute inset-0 aspect-video h-full w-full overflow-hidden",
+        image: "h-full w-full object-cover",
+        icon: "absolute inset-0 m-auto h-24 w-24 text-white opacity-75 transition-opacity group-hover:opacity-100"
+    },
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {}
+})