kss-modern 0.0.34 → 0.0.36

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.
package/README.md CHANGED
@@ -1,15 +1,85 @@
1
- # styleguide-rewrite
1
+ # kss-modern
2
2
 
3
- To install dependencies:
3
+ A modern, KSS-compatible styleguide generator. Parses KSS comment blocks from CSS/SCSS files and generates a static, accessible styleguide with live component previews.
4
+
5
+ ## Features
6
+
7
+ - KSS-compatible comment parsing from CSS/SCSS files
8
+ - Live component previews with modifier variants
9
+ - Pug template support via worker thread pool
10
+ - Color palette and icon gallery documentation
11
+ - Figma embed integration with light/dark theme sync
12
+ - Accessibility auditing (axe-core) and HTML validation
13
+ - Markdown descriptions with custom components (alerts, accordions)
14
+ - Dark mode with three-way toggle (System/Light/Dark)
15
+ - Global search, keyboard navigation, and "Open in Editor" links
16
+ - Watch mode with smart rebuild (only on KSS comment changes)
17
+
18
+ ## Installation
4
19
 
5
20
  ```bash
6
- bun install
21
+ npm install kss-modern
7
22
  ```
8
23
 
9
- To run:
24
+ ## Quick Start
25
+
26
+ ```ts
27
+ import { buildStyleguide } from 'kss-modern'
28
+
29
+ await buildStyleguide({
30
+ mode: 'production',
31
+ outDir: './styleguide',
32
+ contentDir: './src/sass/',
33
+ projectTitle: 'My Design System',
34
+ theme: '#005075',
35
+ html: {
36
+ lang: 'en',
37
+ assets: {
38
+ css: [{ src: '/css/styles.css' }],
39
+ js: [],
40
+ },
41
+ },
42
+ })
43
+ ```
44
+
45
+ This scans all `.css` and `.scss` files in `contentDir` for KSS comment blocks and generates a complete static styleguide in `outDir`.
46
+
47
+ ## Documentation
48
+
49
+ - **[Setup Guide](docs/setup.md)** — Installation, configuration reference, watch mode, project structure, and API reference
50
+ - **[Usage Guide](docs/usage.md)** — Writing KSS comments, all available properties (markup, modifiers, colors, icons, Markdown, Figma, status, etc.), and styleguide UI features
51
+ - **[Changelog](CHANGELOG.md)** — Version history and release notes
52
+
53
+ ## Basic KSS Example
54
+
55
+ ```scss
56
+ /*
57
+ Button
58
+
59
+ A basic button component.
60
+
61
+ .btn--primary - Primary action button
62
+ .btn--outline - Outlined variant
63
+
64
+ Markup: <button class="btn {{modifier_class}}">Click me</button>
65
+
66
+ Styleguide 2.1
67
+ */
68
+
69
+ .btn { /* styles */ }
70
+ ```
71
+
72
+ ## Development
10
73
 
11
74
  ```bash
12
- bun run index.ts
75
+ bun install
76
+ bun run build # Build: Vite (client assets) then Unbuild (Node.js library)
77
+ bun run dev # Build + run dev server with Deno (watches test/ content)
78
+ bun run lint # ESLint
79
+ bun run test # Vitest unit + integration tests
80
+ bun run release # Lint + version bump via bumpp
13
81
  ```
14
82
 
15
- This project was created using `bun init` in bun v1.1.34. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
83
+ ## License
84
+
85
+ MIT
@@ -38,10 +38,6 @@ interface in2Section {
38
38
  fullpageFileName: string;
39
39
  }
40
40
 
41
- declare global {
42
- var isWatchMode: boolean;
43
- var styleguideConfiguration: StyleguideConfiguration;
44
- }
45
41
  interface StyleguideConfiguration {
46
42
  mode: 'development' | 'production';
47
43
  outDir: string;
@@ -38,10 +38,6 @@ interface in2Section {
38
38
  fullpageFileName: string;
39
39
  }
40
40
 
41
- declare global {
42
- var isWatchMode: boolean;
43
- var styleguideConfiguration: StyleguideConfiguration;
44
- }
45
41
  interface StyleguideConfiguration {
46
42
  mode: 'development' | 'production';
47
43
  outDir: string;