@rimelight/ui 0.0.27 → 0.0.29

package/src/components/vue/RLVButton.vue

@@ -2,72 +2,10 @@
 import { computed, useSlots } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { ButtonProps } from "../../types/components/button"
 import buttonTheme from "../../themes/button.theme"
 
 const button = scv(buttonTheme)
-type ButtonVariants = ComponentVariants<typeof buttonTheme>
-
-export interface RLVButtonProps {
-  /**
-   * The visual style variant of the button
-   */
-  variant?: ButtonVariants["variant"]
-  /**
-   * The color scheme applied to the button
-   */
-  color?: ButtonVariants["color"]
-  /**
-   * The size scale of the button
-   */
-  size?: ButtonVariants["size"]
-  /**
-   * When provided, renders the button as an anchor link
-   */
-  href?: string
-  /**
-   * The text label displayed inside the button
-   */
-  label?: string
-  /**
-   * Icon name displayed before the label
-   */
-  leadingIcon?: string
-  /**
-   * Icon name displayed after the label
-   */
-  trailingIcon?: string
-  /**
-   * Shows a loading spinner animation
-   */
-  loading?: boolean
-  /**
-   * Renders a square button with equal padding
-   */
-  square?: boolean
-  /**
-   * Makes the button stretch to full width
-   */
-  block?: boolean
-  /**
-   * Applies active state styling
-   */
-  active?: boolean
-  /**
-   * Color used when button is in active state
-   */
-  activeColor?: ButtonVariants["color"]
-  /**
-   * Variant used when button is in active state
-   */
-  activeVariant?: ButtonVariants["variant"]
-  /**
-   * Component-specific CSS class overrides
-   */
-  ui?: ComponentSlots<typeof buttonTheme>
-  class?: any
-  [key: string]: unknown
-}
 
 const {
   variant = "solid",
@@ -85,7 +23,7 @@ const {
   activeVariant,
   ui: uiProp,
   class: className
-} = defineProps<RLVButtonProps>()
+} = defineProps<ButtonProps>()
 
 const slots = useSlots()
 

package/src/components/vue/RLVFooter.vue

@@ -2,19 +2,12 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { FooterProps } from "../../types/components/footer"
 import footerTheme from "../../themes/footer.theme"
 
 const footer = scv(footerTheme)
-type FooterVariants = ComponentVariants<typeof footerTheme>
 
-export interface RLVFooterProps {
-  contain?: FooterVariants["contain"]
-  ui?: ComponentSlots<typeof footerTheme>
-  class?: any
-}
-
-const { contain = false, ui: uiProp, class: className } = defineProps<RLVFooterProps>()
+const { contain = false, ui: uiProp, class: className } = defineProps<FooterProps>()
 
 defineSlots<{
   left(props: {}): any

package/src/components/vue/RLVHeader.vue

@@ -2,22 +2,11 @@
 import { computed, onMounted, onUnmounted, ref } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { HeaderProps } from "../../types/components/header"
 import headerTheme from "../../themes/header.theme"
 import { getHeaderStack } from "../../utils/headerStack"
 
 const header = scv(headerTheme)
-type HeaderVariants = ComponentVariants<typeof headerTheme>
-
-export interface RLVHeaderProps {
-  contain?: HeaderVariants["contain"]
-  sticky?: HeaderVariants["sticky"]
-  fixed?: HeaderVariants["fixed"]
-  stackIndex?: number
-  hideOnScroll?: boolean
-  ui?: ComponentSlots<typeof headerTheme>
-  class?: any
-}
 
 const {
   contain = true,
@@ -27,7 +16,7 @@ const {
   hideOnScroll = false,
   ui: uiProp,
   class: className
-} = defineProps<RLVHeaderProps>()
+} = defineProps<HeaderProps>()
 
 defineSlots<{
   left(props: {}): any

package/src/components/vue/RLVIcon.vue

@@ -2,20 +2,12 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { IconProps } from "../../types/components/icon"
 import iconTheme from "../../themes/icon.theme"
 
 const icon = scv(iconTheme)
-type IconVariants = ComponentVariants<typeof iconTheme>
 
-export interface RLVIconProps {
-  name: string
-  size?: IconVariants["size"]
-  ui?: ComponentSlots<typeof iconTheme>
-  class?: any
-}
-
-const { name, size = "md", ui: uiProp, class: className } = defineProps<RLVIconProps>()
+const { name, size = "md", ui: uiProp, class: className } = defineProps<IconProps>()
 
 const resolvedClasses = computed(() =>
   resolveClasses(icon, { size }, useUi("icon", uiProp), className)

package/src/components/vue/RLVLogo.vue

@@ -2,34 +2,26 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentSlots } from "../../types"
+import type { LogoProps } from "../../types/components/logo"
 import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
 const logo = scv(logoTheme)
 
-export interface RLVLogoProps {
-  variant?: string
-  mode?: "color" | "white" | "black"
-  href?: string
-  alt?: string
-  ui?: ComponentSlots<typeof logoTheme>
-  class?: any
-  [key: string]: unknown
-}
-
-const props = withDefaults(defineProps<RLVLogoProps>(), {
-  variant: "logomark",
-  href: "/"
-})
+const {
+  variant = "logomark",
+  mode,
+  href = "/",
+  alt,
+  ui: uiProp,
+  class: className
+} = defineProps<LogoProps>()
 
 defineSlots<{
   default(props: {}): any
 }>()
 
-const resolvedClasses = computed(() =>
-  resolveClasses(logo, {}, useUi("logo", props.ui), props.class)
-)
+const resolvedClasses = computed(() => resolveClasses(logo, {}, useUi("logo", uiProp), className))
 
 const logoSrc = computed<string | null>(() => {
   const globalConfig = getUIConfig()
@@ -37,9 +29,9 @@ const logoSrc = computed<string | null>(() => {
   let src: any = null
 
   if (rcLogos && typeof rcLogos === "object") {
-    src = rcLogos[props.variant]
+    src = rcLogos[variant]
     if (src && typeof src === "object") {
-      src = src[props.mode || "color"] || src.black || src.color
+      src = src[mode || "color"] || src.black || src.color
     }
   }
 
@@ -55,7 +47,7 @@ const isIcon = computed(() => {
   return src.includes(":") || src.startsWith("i-")
 })
 
-const Tag = computed(() => (props.href ? "a" : "div"))
+const Tag = computed(() => (href ? "a" : "div"))
 </script>
 
 <template>

package/src/components/vue/RLVPlaceholder.vue

@@ -2,18 +2,12 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentSlots } from "../../types"
+import type { PlaceholderProps } from "../../types/components/placeholder"
 import placeholderTheme from "../../themes/placeholder.theme"
 
 const placeholder = scv(placeholderTheme)
 
-export interface RLVPlaceholderProps {
-  ui?: ComponentSlots<typeof placeholderTheme>
-  class?: any
-  [key: string]: unknown
-}
-
-const { ui: uiProp, class: className } = defineProps<RLVPlaceholderProps>()
+const { ui: uiProp, class: className } = defineProps<PlaceholderProps>()
 
 defineSlots<{
   /**

package/src/components/vue/RLVScrollToTop.vue

@@ -1,23 +1,12 @@
 <script setup lang="ts">
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { ScrollToTopProps } from "../../types/components/scroll-to-top"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 import { useScrollToTop } from "../../composables/useScrollToTop"
 import { computed } from "vue"
 
 const scrollToTop = scv(scrollToTopTheme)
-type ScrollToTopVariants = ComponentVariants<typeof scrollToTopTheme>
-
-export interface RLVScrollToTopProps {
-  color?: ScrollToTopVariants["color"]
-  progressWidth?: number
-  duration?: number
-  threshold?: number
-  showProgress?: boolean
-  ui?: ComponentSlots<typeof scrollToTopTheme>
-  class?: any
-}
 
 const {
   color = "primary",
@@ -27,7 +16,7 @@ const {
   showProgress = false,
   ui: uiProp,
   class: className
-} = defineProps<RLVScrollToTopProps>()
+} = defineProps<ScrollToTopProps>()
 
 const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
 

package/src/components/vue/RLVSection.vue

@@ -2,29 +2,12 @@
 import { computed, useSlots } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { SectionProps } from "../../types/components/section"
 import sectionTheme from "../../themes/section.theme"
-import type { RLVButtonProps } from "./RLVButton.vue"
 import RLVIcon from "./RLVIcon.vue"
 import RLVButton from "./RLVButton.vue"
 
 const section = scv(sectionTheme)
-type SectionVariants = ComponentVariants<typeof sectionTheme>
-
-export interface RLVSectionProps {
-  as?: any
-  variant?: SectionVariants["variant"]
-  headline?: string
-  icon?: string
-  title?: string
-  description?: string
-  links?: RLVButtonProps[]
-  orientation?: SectionVariants["orientation"]
-  reverse?: boolean
-  ctaVariant?: SectionVariants["ctaVariant"]
-  ui?: ComponentSlots<typeof sectionTheme>
-  class?: any
-}
 
 const {
   as = "div",
@@ -38,7 +21,7 @@ const {
   title,
   description,
   links
-} = defineProps<RLVSectionProps>()
+} = defineProps<SectionProps>()
 
 const slots = useSlots()
 

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,19 @@ 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,65 @@ 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 +105,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 +153,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 +162,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 +231,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) {