npm - @rokkit/themes - Versions diffs - 1.0.0-next.125 → 1.0.0-next.128 - Mend

@rokkit/themes 1.0.0-next.125 → 1.0.0-next.128

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/README.md +118 -9
package/build.mjs +237 -0
package/package.json +43 -28
package/src/base/breadcrumbs.css +46 -0
package/src/base/button.css +247 -0
package/src/base/card.css +36 -0
package/src/base/carousel.css +122 -12
package/src/base/connector.css +92 -0
package/src/base/display.css +91 -0
package/src/base/floating-action.css +388 -0
package/src/base/floating-navigation.css +381 -0
package/src/base/grid.css +93 -0
package/src/base/index.css +39 -0
package/src/base/input.css +198 -39
package/src/base/item.css +78 -0
package/src/base/list.css +179 -0
package/src/base/menu.css +274 -0
package/src/base/pill.css +57 -0
package/src/base/progress.css +28 -15
package/src/base/range.css +121 -0
package/src/base/rating.css +40 -0
package/src/base/reveal.css +37 -0
package/src/base/search-filter.css +132 -0
package/src/base/select.css +411 -0
package/src/base/shine.css +14 -0
package/src/base/stepper.css +140 -0
package/src/base/switch.css +152 -0
package/src/base/table.css +143 -33
package/src/base/tabs.css +171 -0
package/src/base/tilt.css +14 -0
package/src/base/timeline.css +84 -0
package/src/base/toggle.css +138 -0
package/src/base/toolbar.css +337 -0
package/src/base/tree.css +195 -11
package/src/base/upload-progress.css +155 -0
package/src/base/upload-target.css +67 -0
package/src/glass/button.css +152 -0
package/src/glass/floating-action.css +61 -0
package/src/glass/floating-navigation.css +74 -0
package/src/glass/index.css +23 -0
package/src/glass/input.css +124 -0
package/src/glass/list.css +122 -0
package/src/glass/menu.css +92 -0
package/src/glass/range.css +61 -0
package/src/glass/search-filter.css +49 -0
package/src/glass/select.css +178 -0
package/src/glass/switch.css +28 -0
package/src/glass/table.css +87 -0
package/src/glass/tabs.css +58 -0
package/src/glass/timeline.css +46 -0
package/src/glass/toggle.css +48 -0
package/src/glass/toolbar.css +84 -0
package/src/glass/tree.css +104 -0
package/src/index.css +18 -0
package/src/index.js +25 -2
package/src/material/button.css +153 -0
package/src/material/floating-action.css +60 -0
package/src/material/floating-navigation.css +74 -0
package/src/material/index.css +23 -0
package/src/material/input.css +118 -40
package/src/material/list.css +90 -64
package/src/material/menu.css +92 -0
package/src/material/range.css +62 -0
package/src/material/search-filter.css +49 -0
package/src/material/select.css +170 -0
package/src/material/switch.css +28 -0
package/src/material/table.css +87 -0
package/src/material/tabs.css +62 -0
package/src/material/timeline.css +46 -0
package/src/material/toggle.css +48 -0
package/src/material/toolbar.css +84 -0
package/src/material/tree.css +100 -0
package/src/minimal/button.css +152 -0
package/src/minimal/floating-action.css +59 -0
package/src/minimal/floating-navigation.css +70 -0
package/src/minimal/index.css +23 -0
package/src/minimal/input.css +81 -120
package/src/minimal/list.css +90 -104
package/src/minimal/menu.css +88 -0
package/src/minimal/range.css +61 -0
package/src/minimal/search-filter.css +49 -0
package/src/minimal/select.css +168 -0
package/src/minimal/switch.css +28 -0
package/src/minimal/table.css +87 -0
package/src/minimal/tabs.css +53 -31
package/src/minimal/timeline.css +45 -0
package/src/minimal/toggle.css +48 -0
package/src/minimal/toolbar.css +84 -0
package/src/minimal/tree.css +100 -0
package/src/rokkit/button.css +225 -0
package/src/rokkit/connector.css +11 -0
package/src/rokkit/floating-action.css +65 -0
package/src/rokkit/floating-navigation.css +83 -0
package/src/rokkit/grid.css +46 -0
package/src/rokkit/index.css +27 -0
package/src/rokkit/input.css +130 -0
package/src/rokkit/list.css +127 -0
package/src/rokkit/menu.css +93 -0
package/src/rokkit/range.css +62 -0
package/src/rokkit/search-filter.css +49 -0
package/src/rokkit/select.css +185 -0
package/src/rokkit/switch.css +28 -0
package/src/rokkit/table.css +68 -38
package/src/rokkit/tabs.css +82 -0
package/src/rokkit/timeline.css +46 -0
package/src/rokkit/toggle.css +36 -52
package/src/rokkit/toolbar.css +84 -0
package/src/rokkit/tree.css +123 -0
package/src/rokkit/upload-progress.css +102 -0
package/src/rokkit/upload-target.css +50 -0
package/src/base/alert.css +0 -30
package/src/base/animation.css +0 -37
package/src/base/atoms.css +0 -58
package/src/base/core.css +0 -107
package/src/base/layout.css +0 -65
package/src/base/molecules.css +0 -109
package/src/base/organisms.css +0 -66
package/src/base/scrollbar.css +0 -16
package/src/base/toggles.css +0 -17
package/src/base.css +0 -13
package/src/markdown.css +0 -955
package/src/material/base.css +0 -12
package/src/material/form.css +0 -30
package/src/material.css +0 -9
package/src/minimal/base.css +0 -8
package/src/minimal/form.css +0 -87
package/src/minimal.css +0 -11
package/src/mixins/mixins.scss +0 -66
package/src/mixins/palette.scss +0 -48
package/src/prism.css +0 -102
package/src/rokkit/alert.css +0 -4
package/src/rokkit/atoms.css +0 -52
package/src/rokkit/carousel.css +0 -19
package/src/rokkit/layout.css +0 -17
package/src/rokkit/molecules.css +0 -124
package/src/rokkit/organisms.css +0 -307
package/src/rokkit.css +0 -11

package/README.md CHANGED Viewed

@@ -1,13 +1,122 @@
-# Themes
+# @rokkit/themes
-Contains the following themes for use with `Rokkit` components.
+Theme styles for `@rokkit/ui` headless components.
-- Rokkit
-- Modern
-- Material
+## Architecture
-This package also includes some mixins which make it easy to implement `light` and `dark` modes.
+This package follows a **headless component + themed styles** pattern:
-- markdown.css: A customized variant of Github flavored markdown
-- prism.css: A variation of the prism syntax highlighting colors using CSS variables to support light and dark modes.
-- palette.css: Light and dark palettes using CSS variables.
+- **Components** (`@rokkit/ui`) - Provide structure, behavior, and accessibility via data attributes
+- **Themes** (`@rokkit/themes`) - Provide visual styling that targets those data attributes
+### Directory Structure
+```
+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)
+```
+## Usage
+### Full Theme (base + all themes)
+```ts
+import '@rokkit/themes'
+```
+### Base Only (for custom theming)
+```ts
+import '@rokkit/themes/base'
+```
+### Rokkit Theme Only
+```ts
+import '@rokkit/themes/rokkit'
+```
+### Individual Component Styles
+```ts
+import '@rokkit/themes/base/menu.css'
+import '@rokkit/themes/rokkit/menu.css'
+```
+## Data Attributes
+Components use semantic data attributes for styling hooks:
+### Common Attributes
+| Attribute       | Values           | Description    |
+| --------------- | ---------------- | -------------- |
+| `data-size`     | `sm`, `md`, `lg` | Size variant   |
+| `data-disabled` | `true`           | Disabled state |
+| `data-align`    | `left`, `right`  | Alignment      |
+### 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 |
+## Theme Scoping
+Rokkit is the default theme — its styles apply without any wrapper.
+Other themes are scoped with `data-style` to allow switching:
+```html
+<div data-style="minimal">
+  <!-- Components here use minimal theme -->
+</div>
+```
+For global application, set on the root element:
+```html
+<html data-style="material"></html>
+```
+## Creating Custom Themes
+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
+## CSS Custom Properties
+Themes use semantic CSS custom properties for consistency:
+```css
+/* Surface colors (backgrounds) */
+--surface-z0 through --surface-z10
+/* Text colors */
+--text-primary, --text-secondary, --text-muted
+/* Interactive colors */
+--primary, --primary-hover, --primary-active
+/* State colors */
+--success, --warning, --error, --info
+```

package/build.mjs ADDED Viewed

@@ -0,0 +1,237 @@
+/**
+ * @rokkit/themes — CSS Build Script
+ *
+ * Compiles theme CSS with UnoCSS, expanding @apply directives into real CSS
+ * (including correct dark mode sibling rules).
+ *
+ * Outputs separate files per theme:
+ *   dist/base.css    — structural styles + default CSS variable palette
+ *   dist/rokkit.css  — rokkit theme (gradients, glowing borders)
+ *   dist/minimal.css — minimal theme (clean, subtle)
+ *   dist/material.css — material theme (elevation, shadows)
+ *   dist/glass.css   — glass theme (blur, transparency)
+ *
+ * Post-processing: adds compound selector form so dark mode works when
+ * data-mode and data-style are on the SAME element (e.g. body):
+ *   Generated:  [data-mode="dark"] [data-style="rokkit"] [data-toggle]
+ *   Added also: [data-mode="dark"][data-style="rokkit"] [data-toggle]
+ */
+import { createGenerator, presetWind3, transformerDirectives } from 'unocss'
+import { Theme } from '@rokkit/core'
+import { readFileSync, writeFileSync, mkdirSync } from 'fs'
+import { resolve, dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+import MagicString from 'magic-string'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+// ─── UnoCSS config ────────────────────────────────────────────────────────────
+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()
+	}
+})
+// ─── CSS @import resolver ─────────────────────────────────────────────────────
+/**
+ * Recursively inlines local @import statements.
+ * 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)
+	})
+}
+// ─── UnoCSS @apply processor ─────────────────────────────────────────────────
+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()
+}
+// ─── Post-processing: fix dark mode selectors ─────────────────────────────────
+/**
+ * UnoCSS generates dark mode rules as descendant selectors:
+ *   [data-mode="dark"] [data-style="rokkit"] [data-component]
+ *
+ * This doesn't match when both data-mode and data-style are on the SAME element
+ * (e.g. <body data-mode="dark" data-style="rokkit">).
+ *
+ * For each such rule, we also add the compound selector form:
+ *   [data-mode="dark"][data-style="rokkit"] [data-component]
+ *
+ * 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
+}
+/**
+ * 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
+}
+// ─── Build ────────────────────────────────────────────────────────────────────
+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})`)
+}
+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.')
+}
+build().catch((err) => {
+	console.error('Build failed:', err)
+	process.exit(1)
+})

package/package.json CHANGED Viewed

@@ -1,37 +1,52 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.125",
-  "description": "Themes for use with rokkit components.",
-  "author": "Jerry Thomas <me@jerrythomas.name>",
-  "license": "MIT",
-  "module": "src/index.js",
-  "types": "dist/index.d.ts",
+  "version": "1.0.0-next.128",
+  "description": "Theme styles for @rokkit/ui components",
   "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "prepublishOnly": "tsc --project tsconfig.build.json",
-    "clean": "rm -rf dist",
-    "build": "bun clean && bun prepublishOnly"
+  "main": "./src/index.js",
+  "exports": {
+    ".": {
+      "style": "./src/index.css",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./styles": "./src/index.css",
+    "./dist": "./dist/index.css",
+    "./base.css": "./dist/base.css",
+    "./rokkit.css": "./dist/rokkit.css",
+    "./minimal.css": "./dist/minimal.css",
+    "./material.css": "./dist/material.css",
+    "./glass.css": "./dist/glass.css",
+    "./base": "./src/base/index.css",
+    "./base/*": "./src/base/*.css",
+    "./rokkit": "./src/rokkit/index.css",
+    "./rokkit/*": "./src/rokkit/*.css",
+    "./minimal": "./src/minimal/index.css",
+    "./minimal/*": "./src/minimal/*.css",
+    "./material": "./src/material/index.css",
+    "./material/*": "./src/material/*.css",
+    "./glass": "./src/glass/index.css",
+    "./glass/*": "./src/glass/*.css"
   },
   "files": [
-    "src"
+    "src",
+    "dist",
+    "build.mjs"
   ],
-  "exports": {
-    "./modern.css": "./src/modern.css",
-    "./material.css": "./src/material.css",
-    "./minimal.css": "./src/minimal.css",
-    "./rokkit.css": "./src/rokkit.css",
-    "./prism.css": "./src/prism.css",
-    "./palette.css": "./src/palette.css",
-    "./markdown.css": "./src/markdown.css",
-    "./package.json": "./src/package.json",
-    ".": {
-      "import": "./src/index.js"
-    }
+  "scripts": {
+    "build": "bun run build.mjs"
   },
   "dependencies": {
-    "@rokkit/core": "latest"
-  }
+    "@rokkit/core": "1.0.0-next.128"
+  },
+  "devDependencies": {
+    "magic-string": "^0.30.21",
+    "unocss": "^66.5.1"
+  },
+  "keywords": [
+    "themes",
+    "css",
+    "styles",
+    "ui"
+  ]
 }

package/src/base/breadcrumbs.css ADDED Viewed

@@ -0,0 +1,46 @@
+/* BreadCrumbs — base structural styles */
+[data-breadcrumbs] {
+	display: block;
+}
+[data-breadcrumb-list] {
+	display: flex;
+	align-items: center;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	gap: 0.25rem;
+}
+[data-breadcrumb-item] {
+	display: flex;
+	align-items: center;
+}
+[data-breadcrumb-separator] {
+	display: flex;
+	align-items: center;
+	opacity: 0.5;
+}
+[data-breadcrumb-link] {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0.25rem 0.5rem;
+	border-radius: 0.25rem;
+	font: inherit;
+	color: inherit;
+}
+[data-breadcrumb-current] {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	padding: 0.25rem 0.5rem;
+	font-weight: 600;
+}