@rokkit/themes 1.0.0-next.133 → 1.0.0-next.136

package/README.md

@@ -1,122 +1,110 @@
 # @rokkit/themes
 
-Theme styles for `@rokkit/ui` headless components.
+Pre-built CSS themes for `@rokkit/ui` components.
 
-## Architecture
+## Install
 
-This package follows a **headless component + themed styles** pattern:
+```sh
+npm install @rokkit/themes
+# or
+bun add @rokkit/themes
+```
 
-- **Components** (`@rokkit/ui`) - Provide structure, behavior, and accessibility via data attributes
-- **Themes** (`@rokkit/themes`) - Provide visual styling that targets those data attributes
+## Overview
 
-### Directory Structure
+`@rokkit/themes` provides visual styles for `@rokkit/ui` components. Components in `@rokkit/ui` are unstyled by default — themes layer on top without requiring changes to component markup. Styles target semantic `data-*` attributes that components emit (e.g. `[data-button]`, `[data-list-item]`).
 
-```
-src/
-├── base/           # Structural styles (layout, positioning)
-│   ├── index.css   # All base styles
-│   └── menu.css    # Menu structural styles
-├── rokkit/         # Default theme (gradients + borders)
-│   ├── index.css   # All rokkit theme styles
-│   └── menu.css    # Menu themed styles
-├── minimal/        # Clean + subtle theme
-├── material/       # Elevation + shadows theme
-├── glass/          # Blur + transparency theme
-└── index.css       # Main entry (imports base + all themes)
-```
+Available themes:
+
+| Theme      | Description                                                          |
+| ---------- | -------------------------------------------------------------------- |
+| `rokkit`   | Default — gradients and glowing borders                              |
+| `minimal`  | Clean and subtle                                                     |
+| `material` | Elevation and shadows                                                |
+| `glass`    | Blur and transparency                                                |
+| `base`     | Structural styles only (layout and positioning, no visual treatment) |
 
 ## Usage
 
-### Full Theme (base + all themes)
+### Full bundle (base + all themes)
 
-```ts
-import '@rokkit/themes'
+```css
+@import '@rokkit/themes';
 ```
 
-### Base Only (for custom theming)
+Or in JavaScript/TypeScript:
 
-```ts
-import '@rokkit/themes/base'
+```js
+import '@rokkit/themes'
 ```
 
-### Rokkit Theme Only
+### Single theme
 
-```ts
-import '@rokkit/themes/rokkit'
+```css
+@import '@rokkit/themes/rokkit.css';
+/* or */
+@import '@rokkit/themes/minimal.css';
+/* or */
+@import '@rokkit/themes/material.css';
+/* or */
+@import '@rokkit/themes/glass.css';
 ```
 
-### Individual Component Styles
+### Base structural styles only
 
-```ts
-import '@rokkit/themes/base/menu.css'
-import '@rokkit/themes/rokkit/menu.css'
+```css
+@import '@rokkit/themes/base';
 ```
 
-## Data Attributes
-
-Components use semantic data attributes for styling hooks:
-
-### Common Attributes
+Useful when writing a fully custom theme — imports layout and positioning rules without any visual styling.
 
-| Attribute       | Values           | Description    |
-| --------------- | ---------------- | -------------- |
-| `data-size`     | `sm`, `md`, `lg` | Size variant   |
-| `data-disabled` | `true`           | Disabled state |
-| `data-align`    | `left`, `right`  | Alignment      |
+### Individual component styles
 
-### Menu-Specific Attributes
-
-| Attribute               | Description             |
-| ----------------------- | ----------------------- |
-| `data-menu`             | Menu container          |
-| `data-menu-trigger`     | Trigger button          |
-| `data-menu-dropdown`    | Dropdown panel          |
-| `data-menu-item`        | Menu item               |
-| `data-menu-item-custom` | Custom snippet wrapper  |
-| `data-menu-group`       | Group container         |
-| `data-menu-group-label` | Group header            |
-| `data-menu-divider`     | Divider line            |
-| `data-menu-open`        | Open state on container |
+```css
+@import '@rokkit/themes/base/button.css';
+@import '@rokkit/themes/rokkit/button.css';
+```
 
-## Theme Scoping
+## Theme scoping
 
-Rokkit is the default theme — its styles apply without any wrapper.
+The `rokkit` theme is the default and applies without any wrapper element.
 
-Other themes are scoped with `data-style` to allow switching:
+Other themes are scoped using the `data-style` attribute:
 
 ```html
+<!-- Apply minimal theme to a section -->
 <div data-style="minimal">
-  <!-- Components here use minimal theme -->
+  <!-- @rokkit/ui components here use the minimal theme -->
 </div>
-```
 
-For global application, set on the root element:
-
-```html
+<!-- Apply a theme globally -->
 <html data-style="material"></html>
 ```
 
-## Creating Custom Themes
+Switching themes at runtime is a matter of updating the `data-style` attribute.
 
-1. Copy `src/rokkit/` to `src/my-theme/`
-2. Modify styles using same data attribute selectors
-3. Wrap selectors with `[data-style='my-theme']` scope
-4. Import your theme alongside or instead of rokkit
+## Custom themes
 
-## CSS Custom Properties
+To build your own theme:
 
-Themes use semantic CSS custom properties for consistency:
+1. Import `@rokkit/themes/base` for structural styles.
+2. Write CSS targeting the same `data-*` attribute selectors used by the built-in themes.
+3. Scope your selectors with `[data-style='my-theme']` to enable runtime switching.
 
-```css
-/* Surface colors (backgrounds) */
---surface-z0 through --surface-z10
+Component attribute hooks follow the pattern `[data-style='my-theme'] [data-button]`, `[data-style='my-theme'] [data-list-item]`, etc.
 
-/* Text colors */
---text-primary, --text-secondary, --text-muted
-
-/* Interactive colors */
---primary, --primary-hover, --primary-active
+## Architecture
 
-/* State colors */
---success, --warning, --error, --info
 ```
+src/
+  base/       -- Structural styles (layout, spacing, positioning)
+  rokkit/     -- Default theme (gradients + borders)
+  minimal/    -- Clean + subtle theme
+  material/   -- Elevation + shadows theme
+  glass/      -- Blur + transparency theme
+  index.css   -- Full bundle entry point
+```
+
+---
+
+Part of [Rokkit](https://github.com/jerrythomas/rokkit) — a Svelte 5 component library and design system.

package/build.mjs

@@ -31,36 +31,36 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 const theme = new Theme()
 
 const uno = await createGenerator({
-	presets: [
-		presetWind3({
-			dark: {
-				light: '[data-mode="light"]',
-				dark: '[data-mode="dark"]'
-			}
-		})
-	],
-	shortcuts: [
-		['skin-default', theme.getPalette()],
-		...theme.getShortcuts('surface'),
-		...theme.getShortcuts('primary'),
-		...theme.getShortcuts('secondary'),
-		...theme.getShortcuts('accent'),
-		...theme.getShortcuts('success'),
-		...theme.getShortcuts('warning'),
-		...theme.getShortcuts('danger'),
-		...theme.getShortcuts('error'),
-		...theme.getShortcuts('info'),
-		['text-on-primary', 'text-surface-50'],
-		['text-on-secondary', 'text-surface-50'],
-		['text-on-info', 'text-surface-50'],
-		['text-on-success', 'text-surface-50'],
-		['text-on-warning', 'text-surface-50'],
-		['text-on-error', 'text-surface-50'],
-		['text-on-surface', 'text-surface-50']
-	],
-	theme: {
-		colors: theme.getColorRules()
-	}
+  presets: [
+    presetWind3({
+      dark: {
+        light: '[data-mode="light"]',
+        dark: '[data-mode="dark"]'
+      }
+    })
+  ],
+  shortcuts: [
+    ['skin-default', theme.getPalette()],
+    ...theme.getShortcuts('surface'),
+    ...theme.getShortcuts('primary'),
+    ...theme.getShortcuts('secondary'),
+    ...theme.getShortcuts('accent'),
+    ...theme.getShortcuts('success'),
+    ...theme.getShortcuts('warning'),
+    ...theme.getShortcuts('danger'),
+    ...theme.getShortcuts('error'),
+    ...theme.getShortcuts('info'),
+    ['text-on-primary', 'text-surface-50'],
+    ['text-on-secondary', 'text-surface-50'],
+    ['text-on-info', 'text-surface-50'],
+    ['text-on-success', 'text-surface-50'],
+    ['text-on-warning', 'text-surface-50'],
+    ['text-on-error', 'text-surface-50'],
+    ['text-on-surface', 'text-surface-50']
+  ],
+  theme: {
+    colors: theme.getColorRules()
+  }
 })
 
 // ─── CSS @import resolver ─────────────────────────────────────────────────────
@@ -70,17 +70,17 @@ const uno = await createGenerator({
  * External imports (http, @, ~) are left unchanged.
  */
 function resolveImports(filePath, seen = new Set()) {
-	if (seen.has(filePath)) return ''
-	seen.add(filePath)
-
-	const content = readFileSync(filePath, 'utf-8')
-	return content.replace(/@import\s+['"]([^'"]+)['"]\s*;/g, (match, importPath) => {
-		if (importPath.startsWith('http') || importPath.startsWith('@') || importPath.startsWith('~')) {
-			return match
-		}
-		const resolvedPath = resolve(dirname(filePath), importPath)
-		return resolveImports(resolvedPath, seen)
-	})
+  if (seen.has(filePath)) return ''
+  seen.add(filePath)
+
+  const content = readFileSync(filePath, 'utf-8')
+  return content.replace(/@import\s+['"]([^'"]+)['"]\s*;/g, (match, importPath) => {
+    if (importPath.startsWith('http') || importPath.startsWith('@') || importPath.startsWith('~')) {
+      return match
+    }
+    const resolvedPath = resolve(dirname(filePath), importPath)
+    return resolveImports(resolvedPath, seen)
+  })
 }
 
 // ─── UnoCSS @apply processor ─────────────────────────────────────────────────
@@ -88,13 +88,13 @@ function resolveImports(filePath, seen = new Set()) {
 const transformer = transformerDirectives()
 
 async function processCSS(content, filename) {
-	const s = new MagicString(content)
-	await transformer.transform(s, filename, {
-		uno,
-		tokens: new Set(),
-		generate: async (tokens) => uno.generate(tokens, { preflights: false })
-	})
-	return s.toString()
+  const s = new MagicString(content)
+  await transformer.transform(s, filename, {
+    uno,
+    tokens: new Set(),
+    generate: async (tokens) => uno.generate(tokens, { preflights: false })
+  })
+  return s.toString()
 }
 
 // ─── Post-processing: fix dark mode selectors ─────────────────────────────────
@@ -112,77 +112,77 @@ async function processCSS(content, filename) {
  * Both forms are emitted so either usage pattern works.
  */
 function fixModeSelectors(css) {
-	const modePattern = /\[data-mode="(?:dark|light)"\] \[data-style="[^"]+"\]/
-
-	let result = ''
-	let i = 0
-
-	while (i < css.length) {
-		// Find next { (opening of a declarations block)
-		const braceOpen = css.indexOf('{', i)
-		if (braceOpen === -1) {
-			result += css.slice(i)
-			break
-		}
-
-		const selectorText = css.slice(i, braceOpen)
-
-		// Only expand selectors that contain the problematic pattern
-		if (modePattern.test(selectorText)) {
-			// Split on comma, but only top-level commas (not inside :not(), :is(), etc.)
-			const parts = splitTopLevelSelectors(selectorText)
-			const expanded = []
-
-			for (const part of parts) {
-				const m = part.match(/^(\s*)(\[data-mode="(?:dark|light)"\]) (\[data-style="[^"]+"\])(.*)$/)
-				if (m) {
-					const [, ws, modeSelector, styleSelector, rest] = m
-					// Compound form: [data-mode="X"][data-style="Y"]rest (same-element match)
-					expanded.push(`${ws}${modeSelector}${styleSelector}${rest}`)
-				}
-				// Always include original descendant form
-				expanded.push(part)
-			}
-
-			result += expanded.join(',') + '{'
-		} else {
-			result += selectorText + '{'
-		}
-
-		// Find the matching closing brace, handling nesting
-		let depth = 1
-		let j = braceOpen + 1
-		while (j < css.length && depth > 0) {
-			if (css[j] === '{') depth++
-			else if (css[j] === '}') depth--
-			j++
-		}
-
-		result += css.slice(braceOpen + 1, j)
-		i = j
-	}
-
-	return result
+  const modePattern = /\[data-mode="(?:dark|light)"\] \[data-style="[^"]+"\]/
+
+  let result = ''
+  let i = 0
+
+  while (i < css.length) {
+    // Find next { (opening of a declarations block)
+    const braceOpen = css.indexOf('{', i)
+    if (braceOpen === -1) {
+      result += css.slice(i)
+      break
+    }
+
+    const selectorText = css.slice(i, braceOpen)
+
+    // Only expand selectors that contain the problematic pattern
+    if (modePattern.test(selectorText)) {
+      // Split on comma, but only top-level commas (not inside :not(), :is(), etc.)
+      const parts = splitTopLevelSelectors(selectorText)
+      const expanded = []
+
+      for (const part of parts) {
+        const m = part.match(/^(\s*)(\[data-mode="(?:dark|light)"\]) (\[data-style="[^"]+"\])(.*)$/)
+        if (m) {
+          const [, ws, modeSelector, styleSelector, rest] = m
+          // Compound form: [data-mode="X"][data-style="Y"]rest (same-element match)
+          expanded.push(`${ws}${modeSelector}${styleSelector}${rest}`)
+        }
+        // Always include original descendant form
+        expanded.push(part)
+      }
+
+      result += expanded.join(',') + '{'
+    } else {
+      result += selectorText + '{'
+    }
+
+    // Find the matching closing brace, handling nesting
+    let depth = 1
+    let j = braceOpen + 1
+    while (j < css.length && depth > 0) {
+      if (css[j] === '{') depth++
+      else if (css[j] === '}') depth--
+      j++
+    }
+
+    result += css.slice(braceOpen + 1, j)
+    i = j
+  }
+
+  return result
 }
 
 /**
  * Split a selector list by top-level commas only (not inside parentheses).
  */
 function splitTopLevelSelectors(text) {
-	const parts = []
-	let depth = 0
-	let start = 0
-
-	for (let i = 0; i < text.length; i++) {
-		if (text[i] === '(') depth++
-		else if (text[i] === ')') depth--
-		else if (text[i] === ',' && depth === 0) {
-			parts.push(text.slice(start, i))
-			start = i + 1
-		}
-	}
-	parts.push(text.slice(start))
-	return parts
+  const parts = []
+  let depth = 0
+  let start = 0
+
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '(') depth++
+    else if (text[i] === ')') depth--
+    else if (text[i] === ',' && depth === 0) {
+      parts.push(text.slice(start, i))
+      start = i + 1
+    }
+  }
+  parts.push(text.slice(start))
+  return parts
 }
 
 // ─── Build ────────────────────────────────────────────────────────────────────
@@ -191,47 +191,45 @@ const srcDir = join(__dirname, 'src')
 const distDir = join(__dirname, 'dist')
 
 async function buildFile(inputPath, outputName, label) {
-	const fullCSS = resolveImports(inputPath)
-	const compiled = await processCSS(fullCSS, outputName)
-	const fixed = fixModeSelectors(compiled)
-	writeFileSync(join(distDir, outputName), fixed, 'utf-8')
-	console.log(`✓ dist/${outputName} (${label})`)
+  const fullCSS = resolveImports(inputPath)
+  const compiled = await processCSS(fullCSS, outputName)
+  const fixed = fixModeSelectors(compiled)
+  writeFileSync(join(distDir, outputName), fixed, 'utf-8')
+  console.log(`✓ dist/${outputName} (${label})`)
 }
 
 async function build() {
-	mkdirSync(distDir, { recursive: true })
-
-	// base.css: structural styles + palette CSS variable defaults
-	const paletteCSS = readFileSync(join(srcDir, 'palette.css'), 'utf-8')
-	const compiledPalette = await processCSS(paletteCSS, 'palette.css')
-	const baseCSS = resolveImports(join(srcDir, 'base', 'index.css'))
-	const compiledBase = await processCSS(baseCSS, 'base.css')
-	const baseFull = fixModeSelectors(compiledPalette + '\n' + compiledBase)
-	writeFileSync(join(distDir, 'base.css'), baseFull, 'utf-8')
-	console.log('✓ dist/base.css (structural styles + palette defaults)')
-
-	// Per-theme files
-	for (const [name, label] of [
-		['rokkit', 'gradients + glowing borders'],
-		['minimal', 'clean + subtle'],
-		['material', 'elevation + shadows'],
-		['glass', 'blur + transparency']
-	]) {
-		await buildFile(join(srcDir, name, 'index.css'), `${name}.css`, label)
-	}
-
-	// Full bundle: base + all themes
-	const allThemes = ['base', 'rokkit', 'minimal', 'material', 'glass']
-	const bundleParts = allThemes.map((name) =>
-		readFileSync(join(distDir, `${name}.css`), 'utf-8')
-	)
-	writeFileSync(join(distDir, 'index.css'), bundleParts.join('\n'), 'utf-8')
-	console.log('✓ dist/index.css (full bundle)')
-
-	console.log('\n@rokkit/themes build complete.')
+  mkdirSync(distDir, { recursive: true })
+
+  // base.css: structural styles + palette CSS variable defaults
+  const paletteCSS = readFileSync(join(srcDir, 'palette.css'), 'utf-8')
+  const compiledPalette = await processCSS(paletteCSS, 'palette.css')
+  const baseCSS = resolveImports(join(srcDir, 'base', 'index.css'))
+  const compiledBase = await processCSS(baseCSS, 'base.css')
+  const baseFull = fixModeSelectors(compiledPalette + '\n' + compiledBase)
+  writeFileSync(join(distDir, 'base.css'), baseFull, 'utf-8')
+  console.log('✓ dist/base.css (structural styles + palette defaults)')
+
+  // Per-theme files
+  for (const [name, label] of [
+    ['rokkit', 'gradients + glowing borders'],
+    ['minimal', 'clean + subtle'],
+    ['material', 'elevation + shadows'],
+    ['glass', 'blur + transparency']
+  ]) {
+    await buildFile(join(srcDir, name, 'index.css'), `${name}.css`, label)
+  }
+
+  // Full bundle: base + all themes
+  const allThemes = ['base', 'rokkit', 'minimal', 'material', 'glass']
+  const bundleParts = allThemes.map((name) => readFileSync(join(distDir, `${name}.css`), 'utf-8'))
+  writeFileSync(join(distDir, 'index.css'), bundleParts.join('\n'), 'utf-8')
+  console.log('✓ dist/index.css (full bundle)')
+
+  console.log('\n@rokkit/themes build complete.')
 }
 
 build().catch((err) => {
-	console.error('Build failed:', err)
-	process.exit(1)
+  console.error('Build failed:', err)
+  process.exit(1)
 })