npm - @rokkit/themes - Versions diffs - 1.0.0-next.14 → 1.0.0-next.141 - Mend

@rokkit/themes 1.0.0-next.14 → 1.0.0-next.141

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 (125) hide show

package/LICENSE +1 -1
package/README.md +106 -9
package/build.mjs +235 -0
package/dist/base.css +4934 -0
package/dist/glass.css +1400 -0
package/dist/index.css +10991 -0
package/dist/material.css +1435 -0
package/dist/minimal.css +1389 -0
package/dist/rokkit.css +1829 -0
package/package.json +53 -52
package/src/base/breadcrumbs.css +47 -0
package/src/base/button.css +254 -0
package/src/base/card.css +36 -0
package/src/base/carousel.css +128 -0
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 +405 -0
package/src/base/graph-paper.css +83 -0
package/src/base/grid.css +93 -0
package/src/base/index.css +40 -0
package/src/base/input.css +238 -0
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 +34 -0
package/src/base/range.css +121 -0
package/src/base/rating.css +42 -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 +159 -0
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 +235 -0
package/src/base/upload-progress.css +155 -0
package/src/base/upload-target.css +67 -0
package/src/glass/button.css +153 -0
package/src/glass/card.css +66 -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 +126 -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 +110 -0
package/src/index.css +18 -0
package/src/index.js +25 -2
package/src/material/button.css +157 -0
package/src/material/card.css +61 -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 +159 -0
package/src/material/list.css +126 -0
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 +91 -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 +85 -0
package/src/material/tree.css +103 -0
package/src/minimal/button.css +155 -0
package/src/minimal/card.css +61 -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 +119 -0
package/src/minimal/list.css +126 -0
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 +170 -0
package/src/minimal/switch.css +28 -0
package/src/minimal/table.css +89 -0
package/src/minimal/tabs.css +68 -0
package/src/minimal/timeline.css +45 -0
package/src/minimal/toggle.css +48 -0
package/src/minimal/toolbar.css +85 -0
package/src/minimal/tree.css +106 -0
package/src/palette.css +7 -0
package/src/rokkit/button.css +254 -0
package/src/rokkit/card.css +64 -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 +134 -0
package/src/rokkit/list.css +132 -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 +190 -0
package/src/rokkit/switch.css +28 -0
package/src/rokkit/table.css +89 -0
package/src/rokkit/tabs.css +87 -0
package/src/rokkit/timeline.css +46 -0
package/src/rokkit/toggle.css +48 -0
package/src/rokkit/toolbar.css +84 -0
package/src/rokkit/tree.css +149 -0
package/src/rokkit/upload-progress.css +102 -0
package/src/rokkit/upload-target.css +50 -0
package/src/constants.js +0 -4
package/src/utils.js +0 -88

package/LICENSE CHANGED Viewed

@@ -1,6 +1,6 @@
 MIT License
-Copyright (c) 2022 Jerry Thomas
+Copyright (c) 2025 Jerry Thomas
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md CHANGED Viewed

@@ -1,13 +1,110 @@
-# Themes
+# @rokkit/themes
-Contains the following themes for use with `Rokkit` components.
+Pre-built CSS themes for `@rokkit/ui` components.
-- Rokkit
-- Modern
-- Material
+## Install
-This package also includes some mixins which make it easy to implement `light` and `dark` modes.
+```sh
+npm install @rokkit/themes
+# or
+bun add @rokkit/themes
+```
-- 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.
+## Overview
+`@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]`).
+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 bundle (base + all themes)
+```css
+@import '@rokkit/themes';
+```
+Or in JavaScript/TypeScript:
+```js
+import '@rokkit/themes'
+```
+### Single theme
+```css
+@import '@rokkit/themes/rokkit.css';
+/* or */
+@import '@rokkit/themes/minimal.css';
+/* or */
+@import '@rokkit/themes/material.css';
+/* or */
+@import '@rokkit/themes/glass.css';
+```
+### Base structural styles only
+```css
+@import '@rokkit/themes/base';
+```
+Useful when writing a fully custom theme — imports layout and positioning rules without any visual styling.
+### Individual component styles
+```css
+@import '@rokkit/themes/base/button.css';
+@import '@rokkit/themes/rokkit/button.css';
+```
+## Theme scoping
+The `rokkit` theme is the default and applies without any wrapper element.
+Other themes are scoped using the `data-style` attribute:
+```html
+<!-- Apply minimal theme to a section -->
+<div data-style="minimal">
+  <!-- @rokkit/ui components here use the minimal theme -->
+</div>
+<!-- Apply a theme globally -->
+<html data-style="material"></html>
+```
+Switching themes at runtime is a matter of updating the `data-style` attribute.
+## Custom themes
+To build your own theme:
+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.
+Component attribute hooks follow the pattern `[data-style='my-theme'] [data-button]`, `[data-style='my-theme'] [data-list-item]`, etc.
+## Architecture
+```
+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 ADDED Viewed

@@ -0,0 +1,235 @@
+/**
+ * @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)
+})