@doku-com/tala 1.0.0-alpha.1 → 1.0.0-alpha.2
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/llms.txt +241 -0
- package/package.json +1 -1
package/llms.txt
ADDED
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
# @doku-com/tala
|
|
2
|
+
|
|
3
|
+
Angular UI component library by DOKU. Provides accessible, themeable standalone components built with Angular signals and OnPush change detection.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @doku-com/tala
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Add global styles to your `angular.json`:
|
|
12
|
+
|
|
13
|
+
```json
|
|
14
|
+
"styles": ["node_modules/@doku-com/tala/styles/index.scss"]
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Or import in your global stylesheet:
|
|
18
|
+
|
|
19
|
+
```scss
|
|
20
|
+
@use '@doku-com/tala';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Design Tokens
|
|
26
|
+
|
|
27
|
+
All tokens are CSS custom properties. Apply via `var(--token-name)`.
|
|
28
|
+
|
|
29
|
+
### Colors
|
|
30
|
+
|
|
31
|
+
Background:
|
|
32
|
+
- `--color-background-base` — main page background
|
|
33
|
+
- `--color-background-subtle` — slightly elevated background
|
|
34
|
+
- `--color-background-muted` — muted background
|
|
35
|
+
- `--color-background-inverse` — inverse/dark background
|
|
36
|
+
|
|
37
|
+
Surface:
|
|
38
|
+
- `--color-surface-default` — default surface (cards, panels)
|
|
39
|
+
- `--color-surface-raised` — elevated surface
|
|
40
|
+
- `--color-surface-overlay` — overlay/modal surface
|
|
41
|
+
- `--color-surface-sunken` — recessed/inset surface
|
|
42
|
+
|
|
43
|
+
Border:
|
|
44
|
+
- `--color-border-default`
|
|
45
|
+
- `--color-border-strong`
|
|
46
|
+
- `--color-border-focus`
|
|
47
|
+
- `--color-border-danger`
|
|
48
|
+
|
|
49
|
+
Text:
|
|
50
|
+
- `--color-text-primary`
|
|
51
|
+
- `--color-text-secondary`
|
|
52
|
+
- `--color-text-tertiary`
|
|
53
|
+
- `--color-text-disabled`
|
|
54
|
+
- `--color-text-inverse`
|
|
55
|
+
- `--color-text-accent`
|
|
56
|
+
- `--color-text-link`
|
|
57
|
+
- `--color-text-placeholder`
|
|
58
|
+
|
|
59
|
+
Status:
|
|
60
|
+
- `--color-status-success-{bg|text|border}`
|
|
61
|
+
- `--color-status-warning-{bg|text|border}`
|
|
62
|
+
- `--color-status-danger-{bg|text|border}`
|
|
63
|
+
- `--color-status-info-{bg|text|border}`
|
|
64
|
+
- `--color-status-neutral-{bg|text|border}`
|
|
65
|
+
|
|
66
|
+
### Spacing
|
|
67
|
+
|
|
68
|
+
- `--space-1: 4px`
|
|
69
|
+
- `--space-2: 8px`
|
|
70
|
+
- `--space-3: 12px`
|
|
71
|
+
- `--space-4: 16px`
|
|
72
|
+
- `--space-5: 20px`
|
|
73
|
+
- `--space-6: 24px`
|
|
74
|
+
- `--space-8: 32px`
|
|
75
|
+
- `--space-10: 40px`
|
|
76
|
+
- `--space-12: 48px`
|
|
77
|
+
- `--space-16: 64px`
|
|
78
|
+
|
|
79
|
+
### Typography
|
|
80
|
+
|
|
81
|
+
Font families:
|
|
82
|
+
- `--font-family-din` — DIN Next LT Pro (headings)
|
|
83
|
+
- `--font-family-inter` — Inter (body)
|
|
84
|
+
- `--font-family-jetbrains` — JetBrains Mono (code)
|
|
85
|
+
|
|
86
|
+
Font weights:
|
|
87
|
+
- `--font-weight-regular: 400`
|
|
88
|
+
- `--font-weight-medium: 500`
|
|
89
|
+
- `--font-weight-semibold: 600`
|
|
90
|
+
- `--font-weight-bold: 700`
|
|
91
|
+
|
|
92
|
+
Font sizes: `--font-size-11` through `--font-size-40` (px values)
|
|
93
|
+
|
|
94
|
+
### Border Radius
|
|
95
|
+
|
|
96
|
+
- `--radius-none: 0px`
|
|
97
|
+
- `--radius-xs: 2px`
|
|
98
|
+
- `--radius-sm: 4px`
|
|
99
|
+
- `--radius-md: 6px`
|
|
100
|
+
- `--radius-lg: 8px`
|
|
101
|
+
- `--radius-xl: 12px`
|
|
102
|
+
- `--radius-2xl: 16px`
|
|
103
|
+
- `--radius-full: 9999px`
|
|
104
|
+
|
|
105
|
+
### Shadows
|
|
106
|
+
|
|
107
|
+
- `--shadow-xs` — subtle, for tight UI elements
|
|
108
|
+
- `--shadow-sm` — small elevation
|
|
109
|
+
- `--shadow-md` — medium elevation (cards)
|
|
110
|
+
- `--shadow-lg` — large elevation (dropdowns)
|
|
111
|
+
- `--shadow-xl` — extra large (modals, dialogs)
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## Components
|
|
116
|
+
|
|
117
|
+
### TalaButton
|
|
118
|
+
|
|
119
|
+
Selector: `tala-button`
|
|
120
|
+
Import: `import { TalaButton } from '@doku-com/tala'`
|
|
121
|
+
|
|
122
|
+
Inputs:
|
|
123
|
+
- `variant: ButtonVariant` — default: `'primary'`
|
|
124
|
+
- `size: ButtonSize` — default: `'md'`
|
|
125
|
+
- `disabled: boolean` — default: `false`
|
|
126
|
+
- `loading: boolean` — default: `false`
|
|
127
|
+
- `iconOnly: boolean` — default: `false`
|
|
128
|
+
|
|
129
|
+
Types:
|
|
130
|
+
- `ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link'`
|
|
131
|
+
- `ButtonSize = 'xs' | 'sm' | 'md' | 'lg'`
|
|
132
|
+
|
|
133
|
+
Size heights: xs=24px, sm=32px, md=40px, lg=48px
|
|
134
|
+
|
|
135
|
+
Notes:
|
|
136
|
+
- Content is projected via `<ng-content>`
|
|
137
|
+
- Keyboard accessible: Enter and Space trigger click
|
|
138
|
+
- Click events are suppressed when `disabled` or `loading` is true
|
|
139
|
+
|
|
140
|
+
Example:
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<tala-button>Submit</tala-button>
|
|
144
|
+
<tala-button variant="secondary" size="sm">Cancel</tala-button>
|
|
145
|
+
<tala-button variant="danger" [disabled]="true">Delete</tala-button>
|
|
146
|
+
<tala-button [loading]="isSaving">Save</tala-button>
|
|
147
|
+
<tala-button [iconOnly]="true"><svg><!-- icon --></svg></tala-button>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
```typescript
|
|
151
|
+
import { TalaButton } from '@doku-com/tala';
|
|
152
|
+
|
|
153
|
+
@Component({
|
|
154
|
+
imports: [TalaButton],
|
|
155
|
+
template: `<tala-button [variant]="v" [loading]="loading">Submit</tala-button>`,
|
|
156
|
+
})
|
|
157
|
+
export class MyComponent {
|
|
158
|
+
v = 'primary';
|
|
159
|
+
loading = false;
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
### TalaAvatar
|
|
166
|
+
|
|
167
|
+
Selector: `tala-avatar`
|
|
168
|
+
Import: `import { TalaAvatar } from '@doku-com/tala'`
|
|
169
|
+
|
|
170
|
+
Inputs:
|
|
171
|
+
- `name: string` — default: `''` — used for initials and background color
|
|
172
|
+
- `src: string` — default: `''` — image URL; when set, shows image instead of initials
|
|
173
|
+
- `size: AvatarSize` — default: `'md'`
|
|
174
|
+
- `shape: AvatarShape` — default: `'circle'`
|
|
175
|
+
- `status: AvatarStatus` — default: `'none'`
|
|
176
|
+
- `badgeCount: number` — default: `0` — shows `99+` when value exceeds 99
|
|
177
|
+
|
|
178
|
+
Types:
|
|
179
|
+
- `AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
|
|
180
|
+
- `AvatarShape = 'circle' | 'square'`
|
|
181
|
+
- `AvatarStatus = 'none' | 'online' | 'busy' | 'away' | 'offline'`
|
|
182
|
+
|
|
183
|
+
Size dimensions: xs=24px, sm=32px, md=40px, lg=48px, xl=64px
|
|
184
|
+
|
|
185
|
+
Notes:
|
|
186
|
+
- Background color is auto-derived from the `name` value via hashing
|
|
187
|
+
- `aria-label` is auto-generated from name, status, and badgeCount
|
|
188
|
+
- Role is set to `img`
|
|
189
|
+
|
|
190
|
+
Example:
|
|
191
|
+
|
|
192
|
+
```html
|
|
193
|
+
<tala-avatar name="John Doe" />
|
|
194
|
+
<tala-avatar name="Jane Smith" src="https://example.com/jane.jpg" />
|
|
195
|
+
<tala-avatar name="Alice" size="lg" shape="square" status="online" />
|
|
196
|
+
<tala-avatar name="Bob" [badgeCount]="5" />
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
---
|
|
200
|
+
|
|
201
|
+
### TalaAvatarGroup
|
|
202
|
+
|
|
203
|
+
Selector: `tala-avatar-group`
|
|
204
|
+
Import: `import { TalaAvatarGroup } from '@doku-com/tala'`
|
|
205
|
+
|
|
206
|
+
Inputs:
|
|
207
|
+
- `size: AvatarSize` — default: `'md'`
|
|
208
|
+
|
|
209
|
+
Notes:
|
|
210
|
+
- Wraps multiple `TalaAvatar` components for a stacked/grouped layout
|
|
211
|
+
- Set matching `size` on both the group and each child avatar
|
|
212
|
+
- Role is set to `group`
|
|
213
|
+
|
|
214
|
+
Example:
|
|
215
|
+
|
|
216
|
+
```html
|
|
217
|
+
<tala-avatar-group size="md">
|
|
218
|
+
<tala-avatar name="Alice Smith" size="md" />
|
|
219
|
+
<tala-avatar name="Bob Jones" size="md" />
|
|
220
|
+
<tala-avatar name="Carol Lee" size="md" />
|
|
221
|
+
</tala-avatar-group>
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
```typescript
|
|
225
|
+
import { TalaAvatar, TalaAvatarGroup } from '@doku-com/tala';
|
|
226
|
+
|
|
227
|
+
@Component({
|
|
228
|
+
imports: [TalaAvatar, TalaAvatarGroup],
|
|
229
|
+
template: `
|
|
230
|
+
<tala-avatar-group [size]="size">
|
|
231
|
+
@for (user of users; track user.id) {
|
|
232
|
+
<tala-avatar [name]="user.name" [src]="user.avatar" [size]="size" />
|
|
233
|
+
}
|
|
234
|
+
</tala-avatar-group>
|
|
235
|
+
`,
|
|
236
|
+
})
|
|
237
|
+
export class MyComponent {
|
|
238
|
+
size = 'md' as const;
|
|
239
|
+
users = [{ id: 1, name: 'Alice', avatar: '' }];
|
|
240
|
+
}
|
|
241
|
+
```
|