@lumaui/angular 0.1.3 → 0.1.4

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 (2) hide show
  1. package/README.md +11 -117
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -9,52 +9,24 @@ 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**
13
-
14
- ## Customization
15
-
16
- All components are **fully customizable** through CSS custom properties (tokens). Override any design token in your CSS to match your brand:
17
-
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
- ```
33
-
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.
12
+ - Fully customizable via CSS tokens
35
13
 
36
14
  ## Prerequisites
37
15
 
38
- ### Install Tailwind CSS
39
-
40
- Before installing Luma UI, you need to set up Tailwind CSS v4 in your Angular project.
16
+ Tailwind CSS v4 must be installed in your Angular project.
41
17
 
42
18
  Follow the official guide: **[Tailwind CSS Angular Installation](https://tailwindcss.com/docs/installation/framework-guides/angular)**
43
19
 
44
20
  ## Installation
45
21
 
46
- After Tailwind CSS is configured, install Luma UI:
47
-
48
22
  ```bash
49
23
  npm install @lumaui/angular
50
24
  ```
51
25
 
52
- > **Note:** `@lumaui/tokens` and `@lumaui/core` are installed automatically as dependencies.
26
+ > `@lumaui/tokens` and `@lumaui/core` are installed automatically as dependencies.
53
27
 
54
28
  ## Setup
55
29
 
56
- ### Import Styles
57
-
58
30
  Add to your `styles.css`:
59
31
 
60
32
  ```css
@@ -67,109 +39,31 @@ Add to your `styles.css`:
67
39
 
68
40
  ## Usage
69
41
 
70
- ### Button
71
-
72
- ```typescript
73
- import { ButtonDirective } from '@lumaui/angular';
74
-
75
- @Component({
76
- imports: [ButtonDirective],
77
- template: `
78
- <button lumaButton lmVariant="primary" lmSize="md">Click me</button>
79
- `,
80
- })
81
- export class MyComponent {}
82
- ```
83
-
84
- **Variants:** `primary` | `outline` | `ghost` | `danger`
85
-
86
- **Sizes:** `sm` | `md` | `lg` | `full`
87
-
88
- **Inputs:**
89
-
90
- | Input | Type | Default | Description |
91
- | ------------ | ----------------------------------------------- | ----------- | --------------------- |
92
- | `lmVariant` | `'primary' \| 'outline' \| 'ghost' \| 'danger'` | `'primary'` | Visual style variant |
93
- | `lmSize` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Size variant |
94
- | `lmDisabled` | `boolean` | `false` | Disabled state |
95
- | `lmType` | `'button' \| 'submit' \| 'reset'` | `'button'` | Button type attribute |
96
-
97
- ### Card
98
-
99
42
  ```typescript
100
43
  import {
44
+ ButtonDirective,
101
45
  CardComponent,
102
- CardHeaderDirective,
103
46
  CardTitleDirective,
104
- CardDescriptionDirective,
105
- CardContentDirective,
106
47
  } from '@lumaui/angular';
107
48
 
108
49
  @Component({
109
- imports: [
110
- CardComponent,
111
- CardHeaderDirective,
112
- CardTitleDirective,
113
- CardDescriptionDirective,
114
- CardContentDirective,
115
- ],
50
+ imports: [ButtonDirective, CardComponent, CardTitleDirective],
116
51
  template: `
52
+ <button lumaButton lmVariant="primary" lmSize="md">Click me</button>
53
+
117
54
  <luma-card lmVariant="default">
118
- <div lumaCardHeader>
119
- <h3 lumaCardTitle lmSize="large">Card Title</h3>
120
- <p lumaCardDescription>Optional description</p>
121
- </div>
122
- <div lumaCardContent>Your content here</div>
55
+ <h3 lumaCardTitle>Card Title</h3>
123
56
  </luma-card>
124
57
  `,
125
58
  })
126
59
  export class MyComponent {}
127
60
  ```
128
61
 
129
- **Card Variants:** `default` | `shadow` | `nested` | `preview`
130
-
131
- ## Components Reference
132
-
133
- | Component | Selector | Description |
134
- | -------------------------- | ------------------------------------- | -------------------- |
135
- | `ButtonDirective` | `button[lumaButton]`, `a[lumaButton]` | Styled button/link |
136
- | `CardComponent` | `luma-card` | Card container |
137
- | `CardHeaderDirective` | `[lumaCardHeader]` | Card header section |
138
- | `CardTitleDirective` | `[lumaCardTitle]` | Card title |
139
- | `CardDescriptionDirective` | `[lumaCardDescription]` | Card description |
140
- | `CardContentDirective` | `[lumaCardContent]` | Card content section |
141
-
142
- ## Dark Theme
143
-
144
- Toggle dark theme by adding the `dark` class to your document:
145
-
146
- ```typescript
147
- // Enable dark theme
148
- document.documentElement.classList.add('dark');
149
-
150
- // Disable dark theme
151
- document.documentElement.classList.remove('dark');
152
- ```
153
-
154
- ## Input Naming Convention
155
-
156
- All Luma inputs use the `lm` prefix to avoid conflicts with native HTML attributes:
157
-
158
- | Input | Type | Default | Description |
159
- | ------------ | ------- | ---------- | --------------------- |
160
- | `lmVariant` | string | varies | Visual style variant |
161
- | `lmSize` | string | `'md'` | Size variant |
162
- | `lmDisabled` | boolean | `false` | Disabled state |
163
- | `lmType` | string | `'button'` | Button type attribute |
164
-
165
- ## Design Philosophy
62
+ ## Documentation
166
63
 
167
- Luma follows **Neo-Minimalism** principles:
64
+ For complete documentation, component reference, customization guide, and interactive examples:
168
65
 
169
- - **Visual Silence** - Elements don't compete for attention
170
- - **Functional Whitespace** - Space creates hierarchy
171
- - **Calm Interactions** - Gentle, natural feedback
172
- - **Silent Accessibility** - Accessibility is inherent, not an afterthought
66
+ **[Luma UI Documentation](https://lumaui.github.io/luma-ui/)**
173
67
 
174
68
  ## Browser Support
175
69
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lumaui/angular",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "Angular components for Luma UI - Neo-Minimal design system",
5
5
  "dependencies": {
6
6
  "@lumaui/core": "^0.1.2",
@@ -27,14 +27,14 @@
27
27
  ],
28
28
  "repository": {
29
29
  "type": "git",
30
- "url": "https://github.com/pureartisan/lumo.git",
30
+ "url": "git+https://github.com/lumaui/luma-ui.git",
31
31
  "directory": "packages/angular"
32
32
  },
33
33
  "license": "MIT",
34
34
  "author": "Luma UI Team",
35
- "homepage": "https://github.com/pureartisan/lumo#readme",
35
+ "homepage": "https://github.com/lumaui/luma-ui#readme",
36
36
  "bugs": {
37
- "url": "https://github.com/pureartisan/lumo/issues"
37
+ "url": "https://github.com/lumaui/luma-ui/issues"
38
38
  },
39
39
  "module": "fesm2022/lumaui-angular.mjs",
40
40
  "typings": "types/lumaui-angular.d.ts",