@rimelight/ui 0.0.30 → 0.0.32

package/src/integrations/ui.ts

@@ -1,142 +1,208 @@
-import type { AstroIntegration } from "astro"
-import UnoCSS from "unocss/astro"
-import vue from "@astrojs/vue"
-import uiPlugin from "@nuxt/ui/vite"
-import defu from "defu"
-import tailwindcss from "@tailwindcss/vite"
-import { defaultUIConfig } from "../themes"
-import type { ComponentTheme } from "../utils/defineTheme"
-
-/**
- * Shape of the `ui` config that can be passed to the integration.
- */
-export type UIConfigOverrides = Record<string, Partial<ComponentTheme>>
-
-export interface UIOptions {
-  /**
-   * Configuration for the Logo component variants.
-   */
-  logos?: Record<
-    string,
-    | string
-    | {
-        light?: string
-        dark?: string
-        color?: string
-        white?: string
-        black?: string
-        [key: string]: string | undefined
-      }
-  >
-  /**
-   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
-   * wins).
-   */
-  ui?: UIConfigOverrides
-  /**
-   * Custom color names to dynamically generate variants for.
-   */
-  colors?: string[]
-}
-
-/**
- * Astro integration for `@rimelight/ui`.
- *
- * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
- * to access the merged config.
- *
- * @example
- *   // astro.config.mjs
- *   import { ui } from "@rimelight/ui/integrations"
- *
- *   export default defineConfig({
- *     integrations: [
- *       ui({
- *         ui: {
- *           button: {
- *             defaultVariants: { variant: "primary" }
- *           }
- *         }
- *       })
- *     ]
- *   })
- */
-export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
-  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
-
-  function setViteConfig(updateConfig: (config: Record<string, unknown>) => void) {
-    updateConfig({
-      vite: {
-        optimizeDeps: {
-          exclude: [
-            "@rimelight/ui",
-            "@rimelight/ui/vue-plugin",
-            "@rimelight/ui/integrations/vue-entrypoint",
-            "@nuxt/ui"
-          ]
-        },
-        ssr: {
-          noExternal: ["@rimelight/ui", "@nuxt/ui"],
-          optimizeDeps: {
-            exclude: ["@rimelight/ui/vue-plugin", "@rimelight/ui/integrations/vue-entrypoint"]
-          }
-        },
-        plugins: [
-          uiPlugin({
-            router: false,
-            scanPackages: ["@rimelight/ui"]
-          }),
-          tailwindcss(),
-          {
-            name: "vite-plugin-rimelight-ui-config",
-            enforce: "pre",
-            resolveId(id: string) {
-              if (id === virtualModuleId) return resolvedVirtualModuleId
-              return null
-            },
-            load(id: string) {
-              if (id === resolvedVirtualModuleId) {
-                return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
-              }
-              return null
-            }
-          }
-        ]
-      }
-    })
-  }
-
-  const rimelightUIIntegration: AstroIntegration = {
-    name: "@rimelight/ui",
-    hooks: {
-      "astro:config:setup": ({ updateConfig, logger }) => {
-        logger.info("Initializing @rimelight/ui core")
-        setViteConfig(updateConfig)
-      }
-    }
-  }
-
-  return [
-    UnoCSS(),
-    vue({
-      appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
-    }),
-    rimelightUIIntegration
-  ]
-}
+import type { AstroIntegration } from "astro"
+import UnoCSS from "unocss/astro"
+import vue from "@astrojs/vue"
+import uiPlugin from "@nuxt/ui/vite"
+import defu from "defu"
+import tailwindcss from "@tailwindcss/vite"
+import { defaultUIConfig } from "../themes"
+import type { ComponentTheme } from "../utils/defineTheme"
+import rimelightUiPreset, { uiSrcGlob, uiFilesystemGlob } from "../presets"
+
+/**
+ * Shape of the `ui` config that can be passed to the integration.
+ */
+export type UIConfigOverrides = Record<string, Partial<ComponentTheme>>
+
+export interface UIOptions {
+  /**
+   * Configuration for the Logo component variants.
+   */
+  logos?: Record<
+    string,
+    | string
+    | {
+        light?: string
+        dark?: string
+        color?: string
+        white?: string
+        black?: string
+        [key: string]: string | undefined
+      }
+  >
+  /**
+   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
+   * wins).
+   */
+  ui?: UIConfigOverrides
+  /**
+   * Custom colors. Each color can be:
+   *
+   * - **Flat format**: `{ "500": "#7146ff", "600": "#6222ff" }` — used in all modes.
+   *   No mode-specific buckets needed.
+   *
+   * - **Mode format**: flat shades at root define the base; `light`, `dark`,
+   *   `flat` buckets layer on top:
+   *
+   *   ```ts
+   *   { "500": "base", light: { "600": "light-blue" }, dark: { "500": "dark-blue" } }
+   *   ```
+   *
+   *   Each shade falls back through: **mode bucket → flat → unthemed → light → dark**.
+   *   Defining a single source (e.g. only `dark`) propagates to all modes.
+   *
+   *   Use the `theme` prop on components to pin colors: `<Button theme="flat">` forces
+   *   the flat bucket regardless of current mode.
+   */
+  colors?: Record<string, Record<string, string> | { light?: Record<string, string>; dark?: Record<string, string>; flat?: Record<string, string> }>
+  /**
+   * When `true`, auto-generates missing `light`/`dark` mode buckets from flat color values
+   * using `color-mix(in oklch, ...)`. Explicitly provided buckets always take precedence.
+   * Defaults to `true`.
+   */
+  autogenerateColorModes?: boolean
+}
+
+/**
+ * Astro integration for `@rimelight/ui`.
+ *
+ * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
+ * to access the merged config.
+ *
+ * @example
+ *   // astro.config.mjs
+ *   import { ui } from "@rimelight/ui/integrations"
+ *
+ *   export default defineConfig({
+ *     integrations: [
+ *       ui({
+ *         ui: {
+ *           button: {
+ *             defaultVariants: { variant: "primary" }
+ *           }
+ *         }
+ *       })
+ *     ]
+ *   })
+ */
+export function ui(options: UIOptions = {}): AstroIntegration[] {
+  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
+  const coreColors = [
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "commentary",
+    "ideation",
+    "source"
+  ]
+  const userColors = options.colors ?? {}
+  const userColorNames = Object.keys(userColors)
+  const mergedColors = [...new Set([...coreColors, ...userColorNames])]
+  const resolvedConfig = {
+    ...resolvedUI,
+    logos: options.logos ?? {},
+    colors: mergedColors
+  }
+
+  const virtualModuleId = "virtual:rimelight-ui"
+  const resolvedVirtualModuleId = "\0" + virtualModuleId
+
+  function setViteConfig(updateConfig: (config: Record<string, unknown>) => void) {
+    updateConfig({
+      vite: {
+        optimizeDeps: {
+          exclude: [
+            "@rimelight/ui",
+            "@rimelight/ui/vue-plugin",
+            "@rimelight/ui/integrations/vue-entrypoint",
+            "@nuxt/ui"
+          ]
+        },
+        ssr: {
+          noExternal: ["@rimelight/ui", "@nuxt/ui"],
+          optimizeDeps: {
+            exclude: ["@rimelight/ui/vue-plugin", "@rimelight/ui/integrations/vue-entrypoint"]
+          }
+        },
+        plugins: [
+          uiPlugin({
+            router: false,
+            colorMode: false,
+            scanPackages: ["@rimelight/ui"]
+          }),
+          tailwindcss(),
+          {
+            name: "vite-plugin-rimelight-ui-config",
+            enforce: "pre",
+            resolveId(id: string) {
+              if (id === virtualModuleId) return resolvedVirtualModuleId
+              return null
+            },
+            load(id: string) {
+              if (id === resolvedVirtualModuleId) {
+                return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
+              }
+              return null
+            }
+          }
+        ]
+      }
+    })
+  }
+
+  const rimelightUIIntegration: AstroIntegration = {
+    name: "@rimelight/ui",
+    hooks: {
+      "astro:config:setup": ({ updateConfig, logger }) => {
+        logger.info("Initializing @rimelight/ui core")
+        setViteConfig(updateConfig)
+      }
+    }
+  }
+
+  return [
+    UnoCSS({
+      presets: [rimelightUiPreset({ colors: userColors, autogenerateColorModes: options.autogenerateColorModes })],
+      content: {
+        pipeline: {
+          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: [uiFilesystemGlob, "../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
+      },
+      shortcuts: {
+        "container": "mx-auto w-full max-w-90rem px-md",
+        "sr-only":
+          "absolute w-px h-px p-0 m-0 overflow-hidden clip-rect-1-1-1-1 whitespace-nowrap border-0"
+      },
+      rules: [
+        [
+          /^clip-rect-(\d+)-(\d+)-(\d+)-(\d+)$/,
+          ([, t, r, b, l]) => ({ clip: `rect(${t}px, ${r}px, ${b}px, ${l}px)` })
+        ]
+      ],
+      configResolved(config) {
+        if (process.env.NODE_ENV === "development" && !process.env.UNO_CONFIG_LOGGED) {
+          process.env.UNO_CONFIG_LOGGED = "true"
+          console.log(`[UnoCSS] Presets: ${config.presets.map((p) => p.name).join(", ")}`)
+          console.log(`[UnoCSS] Rules: ${config.rules.length}`)
+          console.log(`[UnoCSS] Shortcuts: ${Object.keys(config.shortcuts).length}`)
+          const ruleNames = config.rules.map((r) => (Array.isArray(r) ? r[0].toString() : "dynamic"))
+          const duplicates = ruleNames.filter((item, index) => ruleNames.indexOf(item) !== index)
+          const filtered = duplicates.filter((d) => d !== "/^(.+?)-(\\$.+)$/")
+          if (filtered.length > 0) console.warn(`[UnoCSS] Rule collisions: ${filtered.join(", ")}`)
+        }
+      }
+    }),
+    vue({
+      appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
+    }),
+    rimelightUIIntegration
+  ]
+}

package/src/presets/defaults.ts

@@ -0,0 +1,285 @@
+type ColorShades = Record<string, string>
+type ColorModeEntry = { light: ColorShades; dark: ColorShades }
+
+export const defaultColorScales: Record<string, ColorShades | ColorModeEntry> = {
+  neutral: {
+    light: {
+      "50": "oklch(98.5% 0 0)",
+      "100": "oklch(97% 0 0)",
+      "200": "oklch(92.2% 0 0)",
+      "300": "oklch(87% 0 0)",
+      "400": "oklch(70.8% 0 0)",
+      "500": "oklch(55.6% 0 0)",
+      "600": "oklch(43.9% 0 0)",
+      "700": "oklch(37.1% 0 0)",
+      "800": "oklch(26.9% 0 0)",
+      "900": "oklch(20.5% 0 0)",
+      "950": "oklch(14.5% 0 0)"
+    },
+    dark: {
+      "50": "oklch(14.5% 0 0)",
+      "100": "oklch(20% 0 0)",
+      "200": "oklch(28% 0 0)",
+      "300": "oklch(35% 0 0)",
+      "400": "oklch(44% 0 0)",
+      "500": "oklch(55% 0 0)",
+      "600": "oklch(62% 0 0)",
+      "700": "oklch(70% 0 0)",
+      "800": "oklch(78% 0 0)",
+      "900": "oklch(87% 0 0)",
+      "950": "oklch(95% 0 0)"
+    }
+  },
+  primary: {
+    light: {
+      "50": "#ffffff",
+      "100": "#cce0f7",
+      "200": "#99c1ef",
+      "300": "#66a2e7",
+      "400": "#3383df",
+      "500": "#0064d7",
+      "600": "#0050ac",
+      "700": "#003c81",
+      "800": "#002856",
+      "900": "#00142b",
+      "950": "#000000"
+    },
+    dark: {
+      "50": "oklch(0.15 0.04 260)",
+      "100": "oklch(0.20 0.07 260)",
+      "200": "oklch(0.27 0.11 260)",
+      "300": "oklch(0.35 0.15 260)",
+      "400": "oklch(0.44 0.19 260)",
+      "500": "oklch(0.53 0.21 260)",
+      "600": "oklch(0.61 0.19 260)",
+      "700": "oklch(0.69 0.15 260)",
+      "800": "oklch(0.77 0.10 260)",
+      "900": "oklch(0.86 0.06 260)",
+      "950": "oklch(0.93 0.02 260)"
+    }
+  },
+  secondary: {
+    light: {
+      "50": "oklch(98.7% 0.022 95.277)",
+      "100": "oklch(96.2% 0.059 95.617)",
+      "200": "oklch(92.4% 0.12 95.746)",
+      "300": "oklch(87.9% 0.169 91.605)",
+      "400": "oklch(82.8% 0.189 84.429)",
+      "500": "oklch(76.9% 0.188 70.08)",
+      "600": "oklch(66.6% 0.179 58.318)",
+      "700": "oklch(55.5% 0.163 48.998)",
+      "800": "oklch(47.3% 0.137 46.201)",
+      "900": "oklch(41.4% 0.112 45.904)",
+      "950": "oklch(27.9% 0.077 45.635)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.015 95)",
+      "100": "oklch(0.20 0.04 95)",
+      "200": "oklch(0.28 0.08 96)",
+      "300": "oklch(0.35 0.12 92)",
+      "400": "oklch(0.44 0.15 84)",
+      "500": "oklch(0.52 0.16 70)",
+      "600": "oklch(0.60 0.15 58)",
+      "700": "oklch(0.68 0.12 49)",
+      "800": "oklch(0.76 0.09 46)",
+      "900": "oklch(0.84 0.06 46)",
+      "950": "oklch(0.92 0.03 46)"
+    }
+  },
+  info: {
+    light: {
+      "50": "oklch(97% 0.014 254.604)",
+      "100": "oklch(93.2% 0.032 255.585)",
+      "200": "oklch(88.2% 0.059 254.128)",
+      "300": "oklch(80.9% 0.105 251.813)",
+      "400": "oklch(70.7% 0.165 254.624)",
+      "500": "oklch(62.3% 0.214 259.815)",
+      "600": "oklch(54.6% 0.245 262.881)",
+      "700": "oklch(48.8% 0.243 264.376)",
+      "800": "oklch(42.4% 0.199 265.638)",
+      "900": "oklch(37.9% 0.146 265.522)",
+      "950": "oklch(28.2% 0.091 267.935)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 255)",
+      "100": "oklch(0.20 0.025 256)",
+      "200": "oklch(0.28 0.04 254)",
+      "300": "oklch(0.35 0.07 252)",
+      "400": "oklch(0.44 0.12 255)",
+      "500": "oklch(0.52 0.17 260)",
+      "600": "oklch(0.60 0.20 263)",
+      "700": "oklch(0.68 0.18 264)",
+      "800": "oklch(0.76 0.13 266)",
+      "900": "oklch(0.84 0.08 266)",
+      "950": "oklch(0.92 0.04 268)"
+    }
+  },
+  success: {
+    light: {
+      "50": "oklch(98.2% 0.018 155.826)",
+      "100": "oklch(96.2% 0.044 156.743)",
+      "200": "oklch(92.5% 0.084 155.995)",
+      "300": "oklch(87.1% 0.15 154.449)",
+      "400": "oklch(79.2% 0.209 151.711)",
+      "500": "oklch(72.3% 0.219 149.579)",
+      "600": "oklch(62.7% 0.194 149.214)",
+      "700": "oklch(52.7% 0.154 150.069)",
+      "800": "oklch(44.8% 0.119 151.328)",
+      "900": "oklch(39.3% 0.095 152.535)",
+      "950": "oklch(26.6% 0.065 152.934)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 156)",
+      "100": "oklch(0.20 0.03 157)",
+      "200": "oklch(0.28 0.055 156)",
+      "300": "oklch(0.35 0.10 154)",
+      "400": "oklch(0.44 0.16 152)",
+      "500": "oklch(0.52 0.18 150)",
+      "600": "oklch(0.60 0.16 149)",
+      "700": "oklch(0.68 0.12 150)",
+      "800": "oklch(0.76 0.08 151)",
+      "900": "oklch(0.84 0.05 153)",
+      "950": "oklch(0.92 0.03 153)"
+    }
+  },
+  warning: {
+    light: {
+      "50": "oklch(98.7% 0.026 102.212)",
+      "100": "oklch(97.3% 0.071 103.193)",
+      "200": "oklch(94.5% 0.129 101.54)",
+      "300": "oklch(90.5% 0.182 98.111)",
+      "400": "oklch(85.2% 0.199 91.936)",
+      "500": "oklch(79.5% 0.184 86.047)",
+      "600": "oklch(68.1% 0.162 75.834)",
+      "700": "oklch(55.4% 0.135 66.442)",
+      "800": "oklch(47.6% 0.114 61.907)",
+      "900": "oklch(42.1% 0.095 57.708)",
+      "950": "oklch(28.6% 0.066 53.813)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.015 102)",
+      "100": "oklch(0.20 0.045 103)",
+      "200": "oklch(0.28 0.085 102)",
+      "300": "oklch(0.35 0.13 98)",
+      "400": "oklch(0.44 0.16 92)",
+      "500": "oklch(0.52 0.16 86)",
+      "600": "oklch(0.60 0.14 76)",
+      "700": "oklch(0.68 0.11 66)",
+      "800": "oklch(0.76 0.08 62)",
+      "900": "oklch(0.84 0.05 58)",
+      "950": "oklch(0.92 0.03 54)"
+    }
+  },
+  error: {
+    light: {
+      "50": "oklch(97.1% 0.013 17.38)",
+      "100": "oklch(93.6% 0.032 17.717)",
+      "200": "oklch(88.5% 0.062 18.334)",
+      "300": "oklch(80.8% 0.114 19.571)",
+      "400": "oklch(70.4% 0.191 22.216)",
+      "500": "oklch(63.7% 0.237 25.331)",
+      "600": "oklch(57.7% 0.245 27.325)",
+      "700": "oklch(50.5% 0.213 27.518)",
+      "800": "oklch(44.4% 0.177 26.899)",
+      "900": "oklch(39.6% 0.141 25.723)",
+      "950": "oklch(25.8% 0.092 26.042)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 17)",
+      "100": "oklch(0.20 0.02 18)",
+      "200": "oklch(0.28 0.04 18)",
+      "300": "oklch(0.35 0.075 20)",
+      "400": "oklch(0.44 0.14 22)",
+      "500": "oklch(0.52 0.19 25)",
+      "600": "oklch(0.60 0.20 27)",
+      "700": "oklch(0.68 0.17 28)",
+      "800": "oklch(0.76 0.12 27)",
+      "900": "oklch(0.84 0.08 26)",
+      "950": "oklch(0.92 0.04 26)"
+    }
+  },
+  commentary: {
+    light: {
+      "50": "oklch(97.7% 0.017 320.058)",
+      "100": "oklch(95.2% 0.037 318.852)",
+      "200": "oklch(90.3% 0.076 319.62)",
+      "300": "oklch(83.3% 0.145 321.434)",
+      "400": "oklch(74% 0.238 322.16)",
+      "500": "oklch(66.7% 0.295 322.15)",
+      "600": "oklch(59.1% 0.293 322.896)",
+      "700": "oklch(51.8% 0.253 323.949)",
+      "800": "oklch(45.2% 0.211 324.591)",
+      "900": "oklch(40.1% 0.17 325.612)",
+      "950": "oklch(29.3% 0.136 325.661)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 320)",
+      "100": "oklch(0.20 0.025 319)",
+      "200": "oklch(0.28 0.05 320)",
+      "300": "oklch(0.35 0.10 321)",
+      "400": "oklch(0.44 0.18 322)",
+      "500": "oklch(0.52 0.24 322)",
+      "600": "oklch(0.60 0.23 323)",
+      "700": "oklch(0.68 0.19 324)",
+      "800": "oklch(0.76 0.14 325)",
+      "900": "oklch(0.84 0.09 326)",
+      "950": "oklch(0.92 0.05 326)"
+    }
+  },
+  ideation: {
+    light: {
+      "50": "oklch(96.9% 0.016 293.756)",
+      "100": "oklch(94.3% 0.029 294.588)",
+      "200": "oklch(89.4% 0.057 293.283)",
+      "300": "oklch(81.1% 0.111 293.571)",
+      "400": "oklch(70.2% 0.183 293.541)",
+      "500": "oklch(60.6% 0.25 292.717)",
+      "600": "oklch(54.1% 0.281 293.009)",
+      "700": "oklch(49.1% 0.27 292.581)",
+      "800": "oklch(43.2% 0.232 292.759)",
+      "900": "oklch(38% 0.189 293.745)",
+      "950": "oklch(28.3% 0.141 291.089)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 294)",
+      "100": "oklch(0.20 0.02 295)",
+      "200": "oklch(0.28 0.04 293)",
+      "300": "oklch(0.35 0.075 294)",
+      "400": "oklch(0.44 0.14 294)",
+      "500": "oklch(0.52 0.20 293)",
+      "600": "oklch(0.60 0.22 293)",
+      "700": "oklch(0.68 0.20 293)",
+      "800": "oklch(0.76 0.15 293)",
+      "900": "oklch(0.84 0.10 294)",
+      "950": "oklch(0.92 0.05 291)"
+    }
+  },
+  source: {
+    light: {
+      "50": "oklch(98.4% 0.019 200.873)",
+      "100": "oklch(95.6% 0.045 203.388)",
+      "200": "oklch(91.7% 0.08 205.041)",
+      "300": "oklch(86.5% 0.127 207.078)",
+      "400": "oklch(78.9% 0.154 211.53)",
+      "500": "oklch(71.5% 0.143 215.221)",
+      "600": "oklch(60.9% 0.126 221.723)",
+      "700": "oklch(52% 0.105 223.128)",
+      "800": "oklch(45% 0.085 224.283)",
+      "900": "oklch(39.8% 0.07 227.392)",
+      "950": "oklch(30.2% 0.056 229.695)"
+    },
+    dark: {
+      "50": "oklch(0.15 0.01 201)",
+      "100": "oklch(0.20 0.03 203)",
+      "200": "oklch(0.28 0.055 205)",
+      "300": "oklch(0.35 0.09 207)",
+      "400": "oklch(0.44 0.12 212)",
+      "500": "oklch(0.52 0.12 215)",
+      "600": "oklch(0.60 0.10 222)",
+      "700": "oklch(0.68 0.08 223)",
+      "800": "oklch(0.76 0.055 224)",
+      "900": "oklch(0.84 0.04 227)",
+      "950": "oklch(0.92 0.025 230)"
+    }
+  }
+}