@doku-com/tala 1.0.0-alpha.4 → 1.0.0-alpha.6

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 (14) hide show
  1. package/README.md +1 -1
  2. package/fesm2022/doku-com-tala.mjs +49 -34
  3. package/fesm2022/doku-com-tala.mjs.map +1 -1
  4. package/package.json +4 -4
  5. package/styles/_typography.scss +145 -279
  6. package/styles/index.scss +26 -4
  7. package/styles/tokens/_typography.scss +6 -0
  8. package/styles/tokens/_utility.scss +35 -0
  9. package/styles/tokens/index.scss +3 -0
  10. package/types/doku-com-tala.d.ts +20 -5
  11. package/styles/_radius.scss +0 -10
  12. package/styles/_shadow.scss +0 -7
  13. package/styles/_spacing.scss +0 -12
  14. /package/styles/{_color.scss → tokens/_color.scss} +0 -0
package/styles/_typography.scss CHANGED
@@ -1,312 +1,178 @@
1
- /* ═══════════════════════════════════════════════
2
- LOADING FONTS
3
- DIN Next LT Pro — headings (H1–H6)
4
- Inter — body, caption, label, doc
5
- JetBrains Mono — code
6
- ═══════════════════════════════════════════════ */
7
-
8
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
9
-
10
- @font-face {
11
- font-family: 'DIN Next LT Pro';
12
- font-style: normal;
13
- font-weight: 500;
14
- font-display: swap;
15
- src: url('../fonts/DINNextLTPro-Medium.woff2') format('woff2');
1
+ // ── Heading Scale ─────────────────────────────────────────────────────────────
2
+ // DIN Next LT Pro · H1–H6
3
+ // Styles applied to native h1–h6 elements; mirrored as .tala-h* classes
4
+ // for applying heading appearance to non-heading elements.
5
+
6
+ h1,
7
+ .tala-h1 {
8
+ font-family: var(--tala-ref-type-family-din);
9
+ font-size: 40px;
10
+ line-height: 44px;
11
+ font-weight: 700;
12
+ letter-spacing: -0.8px;
13
+ margin: 0;
16
14
  }
17
15
 
18
- @font-face {
19
- font-family: 'DIN Next LT Pro';
20
- font-style: normal;
16
+ h2,
17
+ .tala-h2 {
18
+ font-family: var(--tala-ref-type-family-din);
19
+ font-size: 36px;
20
+ line-height: 40px;
21
21
  font-weight: 700;
22
- font-display: swap;
23
- src: url('../fonts/DINNextLTPro-Bold.woff2') format('woff2');
22
+ letter-spacing: -0.7px;
23
+ margin: 0;
24
24
  }
25
25
 
26
- /* ═══════════════════════════════════════════════
27
- PRIMITIVE
28
- Raw scale values. Don't use directly in
29
- components — reference semantic tokens instead.
30
- ═══════════════════════════════════════════════ */
31
-
32
- :root {
33
- /* Font families */
34
- --font-family-din: 'DIN Next LT Pro', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
35
- --font-family-inter: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
36
- --font-family-jetbrains: 'JetBrains Mono', 'Courier New', monospace;
37
-
38
- /* Font size scale */
39
- --font-size-11: 11px;
40
- --font-size-12: 12px;
41
- --font-size-13: 13px;
42
- --font-size-14: 14px;
43
- --font-size-16: 16px;
44
- --font-size-18: 18px;
45
- --font-size-20: 20px;
46
- --font-size-24: 24px;
47
- --font-size-28: 28px;
48
- --font-size-30: 30px;
49
- --font-size-32: 32px;
50
- --font-size-36: 36px;
51
- --font-size-40: 40px;
52
-
53
- /* Line height scale */
54
- --line-height-14: 14px;
55
- --line-height-16: 16px;
56
- --line-height-18: 18px;
57
- --line-height-20: 20px;
58
- --line-height-24: 24px;
59
- --line-height-26: 26px;
60
- --line-height-30: 30px;
61
- --line-height-32: 32px;
62
- --line-height-34: 34px;
63
- --line-height-36: 36px;
64
- --line-height-40: 40px;
65
- --line-height-44: 44px;
66
-
67
- /* Font weights */
68
- --font-weight-regular: 400;
69
- --font-weight-medium: 500;
70
- --font-weight-semibold: 600;
71
- --font-weight-bold: 700;
72
-
73
- /* Letter spacings */
74
- --letter-spacing-normal: 0px;
75
- --letter-spacing-snug: -0.3px;
76
- --letter-spacing-tight: -0.7px;
77
- --letter-spacing-tighter: -0.8px;
26
+ h3,
27
+ .tala-h3 {
28
+ font-family: var(--tala-ref-type-family-din);
29
+ font-size: 32px;
30
+ line-height: 36px;
31
+ font-weight: 500;
32
+ letter-spacing: -0.3px;
33
+ margin: 0;
78
34
  }
79
35
 
80
- /* ═══════════════════════════════════════════════
81
- SEMANTIC
82
- Role-based tokens that give meaning to
83
- primitives. Use these in components.
84
- ═══════════════════════════════════════════════ */
85
-
86
- :root {
87
- /* Font families */
88
- --font-heading: var(--font-family-din);
89
- --font-body: var(--font-family-inter);
90
- --font-code: var(--font-family-jetbrains);
91
-
92
- /* ── Heading (DIN Next LT Pro) ── */
93
- --text-h1-size: var(--font-size-40);
94
- --text-h1-height: var(--line-height-44);
95
- --text-h1-spacing: var(--letter-spacing-tighter);
96
- --text-h1-weight: var(--font-weight-bold);
97
-
98
- --text-h2-size: var(--font-size-36);
99
- --text-h2-height: var(--line-height-40);
100
- --text-h2-spacing: var(--letter-spacing-tight);
101
- --text-h2-weight: var(--font-weight-bold);
102
-
103
- --text-h3-size: var(--font-size-32);
104
- --text-h3-height: var(--line-height-36);
105
- --text-h3-spacing: var(--letter-spacing-snug);
106
- --text-h3-weight: var(--font-weight-medium);
107
-
108
- --text-h4-size: var(--font-size-30);
109
- --text-h4-height: var(--line-height-34);
110
- --text-h4-spacing: var(--letter-spacing-snug);
111
- --text-h4-weight: var(--font-weight-medium);
112
-
113
- --text-h5-size: var(--font-size-24);
114
- --text-h5-height: var(--line-height-30);
115
- --text-h5-weight: var(--font-weight-medium);
116
-
117
- --text-h6-size: var(--font-size-20);
118
- --text-h6-height: var(--line-height-26);
119
- --text-h6-weight: var(--font-weight-medium);
120
-
121
- /* ── Body (Inter) ── */
122
- --text-body-large-size: var(--font-size-18);
123
- --text-body-large-height: var(--line-height-24);
36
+ h4,
37
+ .tala-h4 {
38
+ font-family: var(--tala-ref-type-family-din);
39
+ font-size: 30px;
40
+ line-height: 34px;
41
+ font-weight: 500;
42
+ letter-spacing: -0.3px;
43
+ margin: 0;
44
+ }
124
45
 
125
- --text-body-default-size: var(--font-size-16);
126
- --text-body-default-height: var(--line-height-20);
46
+ h5,
47
+ .tala-h5 {
48
+ font-family: var(--tala-ref-type-family-din);
49
+ font-size: 24px;
50
+ line-height: 30px;
51
+ font-weight: 500;
52
+ margin: 0;
53
+ }
127
54
 
128
- --text-body-small-size: var(--font-size-14);
129
- --text-body-small-height: var(--line-height-20);
55
+ h6,
56
+ .tala-h6 {
57
+ font-family: var(--tala-ref-type-family-din);
58
+ font-size: 20px;
59
+ line-height: 26px;
60
+ font-weight: 500;
61
+ margin: 0;
62
+ }
130
63
 
131
- /* ── Caption (Inter, 400) ── */
132
- --text-caption-large-size: var(--font-size-12);
133
- --text-caption-large-height: var(--line-height-16);
64
+ // ── Body Scale ────────────────────────────────────────────────────────────────
65
+ // Inter · Body Large / Default / Small
66
+ // Default weight is Regular (400). Apply modifier classes for heavier weights.
134
67
 
135
- --text-caption-small-size: var(--font-size-11);
136
- --text-caption-small-height: var(--line-height-14);
68
+ p,
69
+ .tala-body-default {
70
+ font-family: var(--tala-ref-type-family-inter);
71
+ font-size: 16px;
72
+ line-height: 20px;
73
+ font-weight: 400;
74
+ margin: 0;
75
+ }
137
76
 
138
- /* ── Label (Inter, 500) ── */
139
- --text-label-large-size: var(--font-size-14);
140
- --text-label-large-height: var(--line-height-20);
77
+ .tala-body-large {
78
+ font-family: var(--tala-ref-type-family-inter);
79
+ font-size: 18px;
80
+ line-height: 24px;
81
+ font-weight: 400;
82
+ margin: 0;
83
+ }
141
84
 
142
- --text-label-default-size: var(--font-size-13);
143
- --text-label-default-height: var(--line-height-18);
85
+ .tala-body-small {
86
+ font-family: var(--tala-ref-type-family-inter);
87
+ font-size: 14px;
88
+ line-height: 20px;
89
+ font-weight: 400;
90
+ margin: 0;
91
+ }
144
92
 
145
- --text-label-small-size: var(--font-size-12);
146
- --text-label-small-height: var(--line-height-16);
93
+ // Weight modifiers — apply alongside any body class
94
+ .tala-body-large--medium,
95
+ .tala-body-default--medium,
96
+ .tala-body-small--medium {
97
+ font-weight: 500;
98
+ }
147
99
 
148
- --text-label-xsmall-size: var(--font-size-11);
149
- --text-label-xsmall-height: var(--line-height-14);
100
+ .tala-body-large--semibold,
101
+ .tala-body-default--semibold,
102
+ .tala-body-small--semibold {
103
+ font-weight: 600;
104
+ }
150
105
 
151
- --text-label-sm-bold-size: var(--font-size-12);
152
- --text-label-sm-bold-height: var(--line-height-16);
106
+ .tala-body-large--bold,
107
+ .tala-body-default--bold,
108
+ .tala-body-small--bold {
109
+ font-weight: 700;
110
+ }
153
111
 
154
- /* ── Doc (Inter) ── */
155
- --text-doc-title-size: var(--font-size-28);
156
- --text-doc-title-height: var(--line-height-32);
157
- --text-doc-title-weight: var(--font-weight-bold);
112
+ // ── Caption Scale ─────────────────────────────────────────────────────────────
113
+ // Inter Regular · supplementary and fine-print text
158
114
 
159
- --text-doc-section-size: var(--font-size-11);
160
- --text-doc-section-height: var(--line-height-14);
161
- --text-doc-section-weight: var(--font-weight-semibold);
115
+ .tala-caption-large {
116
+ font-family: var(--tala-ref-type-family-inter);
117
+ font-size: 12px;
118
+ line-height: 16px;
119
+ font-weight: 400;
120
+ }
162
121
 
163
- /* ── Code (JetBrains Mono, 400) ── */
164
- --text-code-size: var(--font-size-13);
165
- --text-code-height: var(--line-height-20);
122
+ .tala-caption-small {
123
+ font-family: var(--tala-ref-type-family-inter);
124
+ font-size: 11px;
125
+ line-height: 14px;
126
+ font-weight: 400;
166
127
  }
167
128
 
168
- /* ═══════════════════════════════════════════════
169
- UTILITIES / DEFAULTS
170
- Helper classes and element defaults. Use utilities for one-off exceptions; use semantic tokens for
171
- components. Don't use primitives directly in components — reference semantic tokens instead.
172
- ═══════════════════════════════════════════════ */
129
+ // ── Label Scale ───────────────────────────────────────────────────────────────
130
+ // Inter Medium · interactive and UI labeling
131
+ // Base weight is Medium (500). Use --semibold modifier for extra emphasis.
173
132
 
174
- /* Heading */
175
- .text-h1,
176
- h1 {
177
- font-family: var(--font-heading);
178
- font-size: var(--text-h1-size);
179
- line-height: var(--text-h1-height);
180
- letter-spacing: var(--text-h1-spacing);
181
- font-weight: var(--text-h1-weight);
182
- }
183
- .text-h2,
184
- h2 {
185
- font-family: var(--font-heading);
186
- font-size: var(--text-h2-size);
187
- line-height: var(--text-h2-height);
188
- letter-spacing: var(--text-h2-spacing);
189
- font-weight: var(--text-h2-weight);
190
- }
191
- .text-h3,
192
- h3 {
193
- font-family: var(--font-heading);
194
- font-size: var(--text-h3-size);
195
- line-height: var(--text-h3-height);
196
- letter-spacing: var(--text-h3-spacing);
197
- font-weight: var(--text-h3-weight);
198
- }
199
- .text-h4,
200
- h4 {
201
- font-family: var(--font-heading);
202
- font-size: var(--text-h4-size);
203
- line-height: var(--text-h4-height);
204
- letter-spacing: var(--text-h4-spacing);
205
- font-weight: var(--text-h4-weight);
206
- }
207
- .text-h5,
208
- h5 {
209
- font-family: var(--font-heading);
210
- font-size: var(--text-h5-size);
211
- line-height: var(--text-h5-height);
212
- font-weight: var(--text-h5-weight);
213
- }
214
- .text-h6,
215
- h6 {
216
- font-family: var(--font-heading);
217
- font-size: var(--text-h6-size);
218
- line-height: var(--text-h6-height);
219
- font-weight: var(--text-h6-weight);
133
+ .tala-label-large {
134
+ font-family: var(--tala-ref-type-family-inter);
135
+ font-size: 14px;
136
+ line-height: 20px;
137
+ font-weight: 500;
220
138
  }
221
139
 
222
- /* Body */
223
- .text-body-large {
224
- font-family: var(--font-body);
225
- font-size: var(--text-body-large-size);
226
- line-height: var(--text-body-large-height);
227
- font-weight: var(--font-weight-regular);
228
- }
229
- .text-body-default,
230
- body {
231
- font-family: var(--font-body);
232
- font-size: var(--text-body-default-size);
233
- line-height: var(--text-body-default-height);
234
- font-weight: var(--font-weight-regular);
235
- }
236
- .text-body-small {
237
- font-family: var(--font-body);
238
- font-size: var(--text-body-small-size);
239
- line-height: var(--text-body-small-height);
240
- font-weight: var(--font-weight-regular);
140
+ .tala-label-default {
141
+ font-family: var(--tala-ref-type-family-inter);
142
+ font-size: 13px;
143
+ line-height: 18px;
144
+ font-weight: 500;
241
145
  }
242
146
 
243
- /* Caption */
244
- .text-caption-large {
245
- font-family: var(--font-body);
246
- font-size: var(--text-caption-large-size);
247
- line-height: var(--text-caption-large-height);
248
- font-weight: var(--font-weight-regular);
249
- }
250
- .text-caption-small,
251
- caption {
252
- font-family: var(--font-body);
253
- font-size: var(--text-caption-small-size);
254
- line-height: var(--text-caption-small-height);
255
- font-weight: var(--font-weight-regular);
147
+ .tala-label-small {
148
+ font-family: var(--tala-ref-type-family-inter);
149
+ font-size: 12px;
150
+ line-height: 16px;
151
+ font-weight: 500;
256
152
  }
257
153
 
258
- /* Label */
259
- .text-label-large {
260
- font-family: var(--font-body);
261
- font-size: var(--text-label-large-size);
262
- line-height: var(--text-label-large-height);
263
- font-weight: var(--font-weight-medium);
264
- }
265
- .text-label-default,
266
- label {
267
- font-family: var(--font-body);
268
- font-size: var(--text-label-default-size);
269
- line-height: var(--text-label-default-height);
270
- font-weight: var(--font-weight-medium);
271
- }
272
- .text-label-small {
273
- font-family: var(--font-body);
274
- font-size: var(--text-label-small-size);
275
- line-height: var(--text-label-small-height);
276
- font-weight: var(--font-weight-medium);
277
- }
278
- .text-label-xsmall {
279
- font-family: var(--font-body);
280
- font-size: var(--text-label-xsmall-size);
281
- line-height: var(--text-label-xsmall-height);
282
- font-weight: var(--font-weight-medium);
283
- }
284
- .text-label-sm-bold {
285
- font-family: var(--font-body);
286
- font-size: var(--text-label-sm-bold-size);
287
- line-height: var(--text-label-sm-bold-height);
288
- font-weight: var(--font-weight-semibold);
154
+ .tala-label-xsmall {
155
+ font-family: var(--tala-ref-type-family-inter);
156
+ font-size: 11px;
157
+ line-height: 14px;
158
+ font-weight: 500;
289
159
  }
290
160
 
291
- /* Doc */
292
- .text-doc-title {
293
- font-family: var(--font-body);
294
- font-size: var(--text-doc-title-size);
295
- line-height: var(--text-doc-title-height);
296
- font-weight: var(--text-doc-title-weight);
297
- }
298
- .text-doc-section {
299
- font-family: var(--font-body);
300
- font-size: var(--text-doc-section-size);
301
- line-height: var(--text-doc-section-height);
302
- font-weight: var(--text-doc-section-weight);
161
+ // Weight modifier — semibold variant (e.g. emphasis tags, status badges)
162
+ .tala-label-large--semibold,
163
+ .tala-label-default--semibold,
164
+ .tala-label-small--semibold,
165
+ .tala-label-xsmall--semibold {
166
+ font-weight: 600;
303
167
  }
304
168
 
305
- /* Code */
306
- .text-code,
307
- code {
308
- font-family: var(--font-code);
309
- font-size: var(--text-code-size);
310
- line-height: var(--text-code-height);
311
- font-weight: var(--font-weight-regular);
169
+ // ── Code ──────────────────────────────────────────────────────────────────────
170
+ // JetBrains Mono Regular · code blocks, API keys, technical strings
171
+
172
+ code,
173
+ .tala-code {
174
+ font-family: var(--tala-ref-type-family-jetbrains);
175
+ font-size: 13px;
176
+ line-height: 20px;
177
+ font-weight: 400;
312
178
  }
package/styles/index.scss CHANGED
@@ -1,6 +1,28 @@
1
+ @forward 'tokens';
1
2
  @forward 'reset';
2
- @forward 'color';
3
3
  @forward 'typography';
4
- @forward 'spacing';
5
- @forward 'radius';
6
- @forward 'shadow';
4
+
5
+ /* ═══════════════════════════════════════════════
6
+ LOADING FONTS
7
+ DIN Next LT Pro — headings (H1–H6)
8
+ Inter — body, caption, label, doc
9
+ JetBrains Mono — code
10
+ ═══════════════════════════════════════════════ */
11
+
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
13
+
14
+ @font-face {
15
+ font-family: 'DIN Next LT Pro';
16
+ font-style: normal;
17
+ font-weight: 500;
18
+ font-display: swap;
19
+ src: url('../fonts/DINNextLTPro-Medium.woff2') format('woff2');
20
+ }
21
+
22
+ @font-face {
23
+ font-family: 'DIN Next LT Pro';
24
+ font-style: normal;
25
+ font-weight: 700;
26
+ font-display: swap;
27
+ src: url('../fonts/DINNextLTPro-Bold.woff2') format('woff2');
28
+ }
package/styles/tokens/_typography.scss ADDED
@@ -0,0 +1,6 @@
1
+ :root {
2
+ --tala-ref-type-family-din:
3
+ 'DIN Next LT Pro', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
4
+ --tala-ref-type-family-inter: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
5
+ --tala-ref-type-family-jetbrains: 'JetBrains Mono', 'Courier New', monospace;
6
+ }
package/styles/tokens/_utility.scss ADDED
@@ -0,0 +1,35 @@
1
+ :root {
2
+ // Spacing
3
+ --tala-ref-space-1: 4px;
4
+ --tala-ref-space-2: 8px;
5
+ --tala-ref-space-3: 12px;
6
+ --tala-ref-space-4: 16px;
7
+ --tala-ref-space-5: 20px;
8
+ --tala-ref-space-6: 24px;
9
+ --tala-ref-space-8: 32px;
10
+ --tala-ref-space-10: 40px;
11
+ --tala-ref-space-12: 48px;
12
+ --tala-ref-space-16: 64px;
13
+
14
+ // Radius
15
+ --tala-ref-radius-none: 0px;
16
+ --tala-ref-radius-xs: 2px;
17
+ --tala-ref-radius-sm: 4px;
18
+ --tala-ref-radius-md: 6px;
19
+ --tala-ref-radius-lg: 8px;
20
+ --tala-ref-radius-xl: 12px;
21
+ --tala-ref-radius-2xl: 16px;
22
+ --tala-ref-radius-full: 9999px;
23
+
24
+ // Shadow
25
+ --tala-ref-shadow-xs: 0 1px 2px
26
+ color-mix(in srgb, var(--tala-ref-color-neutral-100) 5%, transparent);
27
+ --tala-ref-shadow-sm: 0 1px 3px
28
+ color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
29
+ --tala-ref-shadow-md: 0 4px 6px
30
+ color-mix(in srgb, var(--tala-ref-color-neutral-100) 7%, transparent);
31
+ --tala-ref-shadow-lg: 0 10px 15px
32
+ color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
33
+ --tala-ref-shadow-xl: 0 20px 25px
34
+ color-mix(in srgb, var(--tala-ref-color-neutral-100) 10%, transparent);
35
+ }
package/styles/tokens/index.scss ADDED
@@ -0,0 +1,3 @@
1
+ @forward 'color';
2
+ @forward 'typography';
3
+ @forward 'utility';
package/types/doku-com-tala.d.ts CHANGED
@@ -33,17 +33,18 @@ declare class TalaAvatarGroup {
33
33
 
34
34
  type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link';
35
35
  type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
36
+ type ButtonType = 'button' | 'submit' | 'reset';
36
37
  declare class TalaButton {
37
38
  readonly variant: _angular_core.InputSignal<ButtonVariant>;
38
39
  readonly size: _angular_core.InputSignal<ButtonSize>;
40
+ readonly type: _angular_core.InputSignal<ButtonType>;
39
41
  readonly disabled: _angular_core.InputSignal<boolean>;
40
42
  readonly loading: _angular_core.InputSignal<boolean>;
41
43
  readonly iconOnly: _angular_core.InputSignal<boolean>;
42
44
  protected readonly hostClasses: _angular_core.Signal<string>;
43
- protected _onClick(event: MouseEvent): void;
44
- protected _onKeydown(event: Event): void;
45
+ protected readonly innerClasses: _angular_core.Signal<string>;
45
46
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaButton, never>;
46
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "tala-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
47
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "tala-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
47
48
  }
48
49
 
49
50
  type InputSize = 'sm' | 'md' | 'lg';
@@ -139,5 +140,19 @@ declare class TalaSelect implements ControlValueAccessor {
139
140
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaSelect, "tala-select", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
140
141
  }
141
142
 
142
- export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect };
143
- export type { AvatarShape, AvatarSize, AvatarStatus, ButtonSize, ButtonVariant, InputSize, InputStatus, SelectOption, SelectSize, SelectStatus, SelectType };
143
+ type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'label' | 'caption' | 'code';
144
+ type TextSize = 'large' | 'medium' | 'small' | 'xsmall';
145
+ type TextWeight = 'medium' | 'semibold' | 'bold';
146
+ declare class TalaText {
147
+ readonly talaText: _angular_core.InputSignal<TextVariant>;
148
+ readonly size: _angular_core.InputSignal<TextSize>;
149
+ readonly weight: _angular_core.InputSignal<TextWeight | undefined>;
150
+ protected readonly classes: _angular_core.Signal<string>;
151
+ private readonly variantClass;
152
+ private readonly weightClass;
153
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaText, never>;
154
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TalaText, "[talaText]", never, { "talaText": { "alias": "talaText"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
155
+ }
156
+
157
+ export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect, TalaText };
158
+ export type { AvatarShape, AvatarSize, AvatarStatus, ButtonSize, ButtonType, ButtonVariant, InputSize, InputStatus, SelectOption, SelectSize, SelectStatus, SelectType, TextSize, TextVariant, TextWeight };
package/styles/_radius.scss DELETED
@@ -1,10 +0,0 @@
1
- :root {
2
- --radius-none: 0px;
3
- --radius-xs: 2px;
4
- --radius-sm: 4px;
5
- --radius-md: 6px;
6
- --radius-lg: 8px;
7
- --radius-xl: 12px;
8
- --radius-2xl: 16px;
9
- --radius-full: 9999px;
10
- }
package/styles/_shadow.scss DELETED
@@ -1,7 +0,0 @@
1
- :root {
2
- --shadow-xs: 0 1px 2px color-mix(in srgb, var(--tala-ref-color-neutral-100) 5%, transparent);
3
- --shadow-sm: 0 1px 3px color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
4
- --shadow-md: 0 4px 6px color-mix(in srgb, var(--tala-ref-color-neutral-100) 7%, transparent);
5
- --shadow-lg: 0 10px 15px color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
6
- --shadow-xl: 0 20px 25px color-mix(in srgb, var(--tala-ref-color-neutral-100) 10%, transparent);
7
- }
package/styles/_spacing.scss DELETED
@@ -1,12 +0,0 @@
1
- :root {
2
- --space-1: 4px;
3
- --space-2: 8px;
4
- --space-3: 12px;
5
- --space-4: 16px;
6
- --space-5: 20px;
7
- --space-6: 24px;
8
- --space-8: 32px;
9
- --space-10: 40px;
10
- --space-12: 48px;
11
- --space-16: 64px;
12
- }
/package/styles/{_color.scss → tokens/_color.scss} RENAMED
File without changes