@lumaui/angular 0.4.0 → 0.4.1
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 +30 -9
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -27,26 +27,47 @@ npm install @lumaui/angular
|
|
|
27
27
|
|
|
28
28
|
## Setup
|
|
29
29
|
|
|
30
|
-
**IMPORTANT:** Luma tokens files do NOT import Tailwind CSS. Your project MUST import Tailwind separately.
|
|
31
|
-
|
|
32
30
|
Add to your `styles.css`:
|
|
33
31
|
|
|
34
32
|
```css
|
|
35
|
-
/*
|
|
36
|
-
@import '
|
|
33
|
+
/* Import Luma design tokens (light theme + component classes) */
|
|
34
|
+
@import '@lumaui/tokens/build/luma.css';
|
|
37
35
|
|
|
38
|
-
/*
|
|
39
|
-
@import '@lumaui/tokens/build/luma.css';
|
|
40
|
-
@import '@lumaui/tokens/build/luma-dark.css'; /* Dark theme */
|
|
36
|
+
/* Optional: Dark theme support */
|
|
37
|
+
@import '@lumaui/tokens/build/luma-dark.css';
|
|
41
38
|
```
|
|
42
39
|
|
|
40
|
+
**That's it!** The `luma.css` file includes everything needed:
|
|
41
|
+
|
|
42
|
+
- ✅ Tailwind CSS v4 base
|
|
43
|
+
- ✅ Design tokens (@theme block with 45 tokens)
|
|
44
|
+
- ✅ Component class manifest (@source directive)
|
|
45
|
+
- ✅ Automatic class discovery (99 component classes)
|
|
46
|
+
|
|
43
47
|
**Alternative (convenience bundle):**
|
|
44
48
|
|
|
45
49
|
```css
|
|
46
|
-
|
|
47
|
-
@import '@lumaui/tokens/build/luma-complete.css';
|
|
50
|
+
/* Single import for both light and dark themes */
|
|
51
|
+
@import '@lumaui/tokens/build/luma-complete.css';
|
|
48
52
|
```
|
|
49
53
|
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
**Verify it works:**
|
|
57
|
+
|
|
58
|
+
After setting up, check your compiled CSS includes component classes:
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
# Build your Angular app
|
|
62
|
+
ng build
|
|
63
|
+
|
|
64
|
+
# Check for Luma component classes in output
|
|
65
|
+
grep -o "bg-primary" dist/your-app/browser/styles*.css
|
|
66
|
+
# Expected: Multiple matches (bg-primary, hover:bg-primary/90, etc.)
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
If you see the classes, setup is correct! ✅
|
|
70
|
+
|
|
50
71
|
## Usage
|
|
51
72
|
|
|
52
73
|
```typescript
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lumaui/angular",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "Angular components for Luma UI - Neo-Minimal design system",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@lumaui/core": "^0.4.
|
|
7
|
-
"@lumaui/tokens": "^0.4.
|
|
6
|
+
"@lumaui/core": "^0.4.1",
|
|
7
|
+
"@lumaui/tokens": "^0.4.1",
|
|
8
8
|
"tslib": "^2.3.0"
|
|
9
9
|
},
|
|
10
10
|
"peerDependencies": {
|