@lumaui/angular 0.1.2 → 0.1.3
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 +34 -28
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -9,56 +9,62 @@ Angular components for **Luma UI** - a Neo-Minimal design system built with calm
|
|
|
9
9
|
- Type-safe variants with class-variance-authority
|
|
10
10
|
- Angular 19+ standalone components
|
|
11
11
|
- Tailwind CSS v4 compatible
|
|
12
|
+
- **Fully customizable via CSS tokens**
|
|
12
13
|
|
|
13
|
-
##
|
|
14
|
+
## Customization
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
npm install @lumaui/angular
|
|
17
|
-
```
|
|
16
|
+
All components are **fully customizable** through CSS custom properties (tokens). Override any design token in your CSS to match your brand:
|
|
18
17
|
|
|
19
|
-
|
|
18
|
+
```css
|
|
19
|
+
:root {
|
|
20
|
+
/* Customize button colors */
|
|
21
|
+
--luma-button-primary-bg: oklch(0.6 0.15 250);
|
|
22
|
+
--luma-button-primary-bg-hover: oklch(0.55 0.14 250);
|
|
23
|
+
|
|
24
|
+
/* Customize card styles */
|
|
25
|
+
--luma-card-background: oklch(0.98 0 0);
|
|
26
|
+
--luma-card-radius: 16px;
|
|
27
|
+
|
|
28
|
+
/* Customize spacing and typography */
|
|
29
|
+
--luma-button-padding-x-md: 1.5rem;
|
|
30
|
+
--luma-button-padding-y-md: 0.75rem;
|
|
31
|
+
}
|
|
32
|
+
```
|
|
20
33
|
|
|
21
|
-
|
|
34
|
+
This token-based architecture means you can adapt every aspect of the design system - colors, spacing, borders, shadows, and more - without modifying component code.
|
|
22
35
|
|
|
23
|
-
|
|
36
|
+
## Prerequisites
|
|
24
37
|
|
|
25
|
-
|
|
26
|
-
npm install class-variance-authority
|
|
27
|
-
```
|
|
38
|
+
### Install Tailwind CSS
|
|
28
39
|
|
|
29
|
-
|
|
40
|
+
Before installing Luma UI, you need to set up Tailwind CSS v4 in your Angular project.
|
|
30
41
|
|
|
31
|
-
|
|
42
|
+
Follow the official guide: **[Tailwind CSS Angular Installation](https://tailwindcss.com/docs/installation/framework-guides/angular)**
|
|
32
43
|
|
|
33
|
-
|
|
44
|
+
## Installation
|
|
34
45
|
|
|
35
|
-
|
|
46
|
+
After Tailwind CSS is configured, install Luma UI:
|
|
36
47
|
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
plugins: {
|
|
40
|
-
'@tailwindcss/postcss': {},
|
|
41
|
-
},
|
|
42
|
-
};
|
|
48
|
+
```bash
|
|
49
|
+
npm install @lumaui/angular
|
|
43
50
|
```
|
|
44
51
|
|
|
45
|
-
|
|
52
|
+
> **Note:** `@lumaui/tokens` and `@lumaui/core` are installed automatically as dependencies.
|
|
53
|
+
|
|
54
|
+
## Setup
|
|
55
|
+
|
|
56
|
+
### Import Styles
|
|
46
57
|
|
|
47
58
|
Add to your `styles.css`:
|
|
48
59
|
|
|
49
60
|
```css
|
|
50
61
|
@import 'tailwindcss';
|
|
51
|
-
@import '@lumaui/tokens
|
|
62
|
+
@import '@lumaui/tokens';
|
|
52
63
|
|
|
53
64
|
/* Optional: Dark theme support */
|
|
54
|
-
@import '@lumaui/tokens/
|
|
55
|
-
|
|
56
|
-
/* If automatic content detection doesn't pick up node_modules, add: */
|
|
57
|
-
@source "../node_modules/@lumaui";
|
|
65
|
+
@import '@lumaui/tokens/dark.css';
|
|
58
66
|
```
|
|
59
67
|
|
|
60
|
-
> **Note:** Tailwind v4 uses CSS-based configuration instead of `tailwind.config.js`. The `@source` directive is only needed if Luma classes aren't being detected automatically.
|
|
61
|
-
|
|
62
68
|
## Usage
|
|
63
69
|
|
|
64
70
|
### Button
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lumaui/angular",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Angular components for Luma UI - Neo-Minimal design system",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@lumaui/core": "^0.1.2",
|
|
7
|
-
"@lumaui/tokens": "^0.1.
|
|
7
|
+
"@lumaui/tokens": "^0.1.2",
|
|
8
8
|
"tslib": "^2.3.0"
|
|
9
9
|
},
|
|
10
10
|
"peerDependencies": {
|