@doku-com/tala 1.0.0-alpha.5 → 1.0.0-alpha.7

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 (16) hide show
  1. package/README.md +1 -1
  2. package/fesm2022/doku-com-tala.mjs +398 -138
  3. package/fesm2022/doku-com-tala.mjs.map +1 -1
  4. package/package.json +4 -4
  5. package/styles/_typography.scss +162 -277
  6. package/styles/index.scss +26 -4
  7. package/styles/tokens/_color.scss +135 -0
  8. package/styles/tokens/_typography.scss +6 -0
  9. package/styles/tokens/_utility.scss +35 -0
  10. package/styles/tokens/index.scss +3 -0
  11. package/types/doku-com-tala.d.ts +214 -46
  12. package/llms.txt +0 -244
  13. package/styles/_color.scss +0 -178
  14. package/styles/_radius.scss +0 -10
  15. package/styles/_shadow.scss +0 -7
  16. package/styles/_spacing.scss +0 -12
package/styles/_typography.scss CHANGED
@@ -1,312 +1,197 @@
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 / (Medium) 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
+ body,
69
+ p,
70
+ .tala-body-md {
71
+ font-family: var(--tala-ref-type-family-inter);
72
+ font-size: 16px;
73
+ line-height: 20px;
74
+ font-weight: 400;
75
+ margin: 0;
76
+ }
137
77
 
138
- /* ── Label (Inter, 500) ── */
139
- --text-label-large-size: var(--font-size-14);
140
- --text-label-large-height: var(--line-height-20);
78
+ .tala-body-lg {
79
+ font-family: var(--tala-ref-type-family-inter);
80
+ font-size: 18px;
81
+ line-height: 24px;
82
+ font-weight: 400;
83
+ margin: 0;
84
+ }
141
85
 
142
- --text-label-default-size: var(--font-size-13);
143
- --text-label-default-height: var(--line-height-18);
86
+ .tala-body-sm {
87
+ font-family: var(--tala-ref-type-family-inter);
88
+ font-size: 14px;
89
+ line-height: 20px;
90
+ font-weight: 400;
91
+ margin: 0;
92
+ }
144
93
 
145
- --text-label-small-size: var(--font-size-12);
146
- --text-label-small-height: var(--line-height-16);
94
+ // Weight modifiers — apply alongside any body class
95
+ .tala-body-lg--medium,
96
+ .tala-body-md--medium,
97
+ .tala-body-sm--medium {
98
+ font-weight: 500;
99
+ }
147
100
 
148
- --text-label-xsmall-size: var(--font-size-11);
149
- --text-label-xsmall-height: var(--line-height-14);
101
+ .tala-body-lg--semibold,
102
+ .tala-body-md--semibold,
103
+ .tala-body-sm--semibold {
104
+ font-weight: 600;
105
+ }
150
106
 
151
- --text-label-sm-bold-size: var(--font-size-12);
152
- --text-label-sm-bold-height: var(--line-height-16);
107
+ .tala-body-lg--bold,
108
+ .tala-body-md--bold,
109
+ .tala-body-sm--bold {
110
+ font-weight: 700;
111
+ }
153
112
 
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);
113
+ // ── Caption Scale ─────────────────────────────────────────────────────────────
114
+ // Inter Regular · supplementary and fine-print text
158
115
 
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);
116
+ .tala-caption-lg {
117
+ font-family: var(--tala-ref-type-family-inter);
118
+ font-size: 12px;
119
+ line-height: 16px;
120
+ font-weight: 400;
121
+ }
162
122
 
163
- /* ── Code (JetBrains Mono, 400) ── */
164
- --text-code-size: var(--font-size-13);
165
- --text-code-height: var(--line-height-20);
123
+ .tala-caption-sm {
124
+ font-family: var(--tala-ref-type-family-inter);
125
+ font-size: 11px;
126
+ line-height: 14px;
127
+ font-weight: 400;
166
128
  }
167
129
 
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
- ═══════════════════════════════════════════════ */
130
+ // ── Label Scale ───────────────────────────────────────────────────────────────
131
+ // Inter Medium · interactive and UI labeling
132
+ // Base weight is Medium (500). Use --semibold modifier for extra emphasis.
173
133
 
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);
134
+ .tala-label-lg {
135
+ font-family: var(--tala-ref-type-family-inter);
136
+ font-size: 14px;
137
+ line-height: 20px;
138
+ font-weight: 500;
220
139
  }
221
140
 
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);
141
+ .tala-label-md {
142
+ font-family: var(--tala-ref-type-family-inter);
143
+ font-size: 13px;
144
+ line-height: 18px;
145
+ font-weight: 500;
241
146
  }
242
147
 
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);
148
+ .tala-label-sm {
149
+ font-family: var(--tala-ref-type-family-inter);
150
+ font-size: 12px;
151
+ line-height: 16px;
152
+ font-weight: 500;
256
153
  }
257
154
 
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);
155
+ .tala-label-xs {
156
+ font-family: var(--tala-ref-type-family-inter);
157
+ font-size: 11px;
158
+ line-height: 14px;
159
+ font-weight: 500;
283
160
  }
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);
161
+
162
+ // Weight modifier — semibold variant (e.g. emphasis tags, status badges)
163
+ .tala-label-lg--semibold,
164
+ .tala-label-md--semibold,
165
+ .tala-label-sm--semibold,
166
+ .tala-label-xs--semibold {
167
+ font-weight: 600;
289
168
  }
290
169
 
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);
170
+ // ── Code ──────────────────────────────────────────────────────────────────────
171
+ // JetBrains Mono Regular · code blocks, API keys, technical strings
172
+
173
+ code,
174
+ .tala-code {
175
+ font-family: var(--tala-ref-type-family-jetbrains);
176
+ font-size: 13px;
177
+ line-height: 20px;
178
+ font-weight: 400;
297
179
  }
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);
180
+
181
+ // ── Doc ──────────────────────────────────────────────────────────────────────
182
+ // Inter Regular · documentation and reference text
183
+ .tala-doc-title {
184
+ font-family: var(--tala-ref-type-family-inter);
185
+ font-size: 28px;
186
+ line-height: 32px;
187
+ font-weight: 700;
188
+ margin: 0;
303
189
  }
304
190
 
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);
191
+ .tala-doc-section {
192
+ font-family: var(--tala-ref-type-family-inter);
193
+ font-size: 11px;
194
+ line-height: 14px;
195
+ font-weight: 600;
196
+ margin: 0;
312
197
  }
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/_color.scss ADDED
@@ -0,0 +1,135 @@
1
+ :root {
2
+ // ══════════════════════════════════════════════════════════════════════════════════════════════
3
+ // REFERENCE
4
+ // Raw palette values. Never use directly in components — use system tokens instead.
5
+ // ══════════════════════════════════════════════════════════════════════════════════════════════
6
+
7
+ --tala-ref-color-red-5: #fff0ef;
8
+ --tala-ref-color-red-10: #ffd6d5;
9
+ --tala-ref-color-red-20: #ff9b99;
10
+ --tala-ref-color-red-30: #f76b68;
11
+ --tala-ref-color-red-40: #ef4441;
12
+ --tala-ref-color-red-50: #e1261b;
13
+ --tala-ref-color-red-60: #c41e16;
14
+ --tala-ref-color-red-70: #a0170f;
15
+ --tala-ref-color-red-80: #7d110a;
16
+ --tala-ref-color-red-90: #5c0a06;
17
+ --tala-ref-color-red-100: #3a0604;
18
+
19
+ --tala-ref-color-neutral-0: #ffffff;
20
+ --tala-ref-color-neutral-5: #f7f7f8;
21
+ --tala-ref-color-neutral-10: #f0f0f2;
22
+ --tala-ref-color-neutral-20: #e2e2e6;
23
+ --tala-ref-color-neutral-30: #c8c8cf;
24
+ --tala-ref-color-neutral-40: #ababb5;
25
+ --tala-ref-color-neutral-50: #8e8e9a;
26
+ --tala-ref-color-neutral-60: #6e6e7c;
27
+ --tala-ref-color-neutral-70: #52525e;
28
+ --tala-ref-color-neutral-80: #363640;
29
+ --tala-ref-color-neutral-90: #1e1e26;
30
+ --tala-ref-color-neutral-100: #09090d;
31
+
32
+ --tala-ref-color-green-5: #f0fbf5;
33
+ --tala-ref-color-green-10: #d1f0e3;
34
+ --tala-ref-color-green-20: #a3dbca;
35
+ --tala-ref-color-green-30: #4bb98a;
36
+ --tala-ref-color-green-40: #23a470;
37
+ --tala-ref-color-green-50: #008856;
38
+ --tala-ref-color-green-60: #006b44;
39
+ --tala-ref-color-green-70: #015437;
40
+ --tala-ref-color-green-80: #003d28;
41
+ --tala-ref-color-green-90: #00261a;
42
+ --tala-ref-color-green-100: #00100c;
43
+
44
+ --tala-ref-color-amber-5: #fffbf0;
45
+ --tala-ref-color-amber-10: #fef3c7;
46
+ --tala-ref-color-amber-20: #fde68a;
47
+ --tala-ref-color-amber-30: #ffd24a;
48
+ --tala-ref-color-amber-40: #d97707;
49
+ --tala-ref-color-amber-50: #b4530a;
50
+ --tala-ref-color-amber-60: #92400f;
51
+ --tala-ref-color-amber-70: #783510;
52
+ --tala-ref-color-amber-80: #5e2a0c;
53
+ --tala-ref-color-amber-90: #451e08;
54
+ --tala-ref-color-amber-100: #2d1206;
55
+
56
+ --tala-ref-color-blue-5: #f0f6ff;
57
+ --tala-ref-color-blue-10: #dbeafe;
58
+ --tala-ref-color-blue-20: #c0dbfe;
59
+ --tala-ref-color-blue-30: #6aabfd;
60
+ --tala-ref-color-blue-40: #3b82f6;
61
+ --tala-ref-color-blue-50: #1e4ed8;
62
+ --tala-ref-color-blue-60: #1f40af;
63
+ --tala-ref-color-blue-70: #1e3b8a;
64
+ --tala-ref-color-blue-80: #1a3070;
65
+ --tala-ref-color-blue-90: #142558;
66
+ --tala-ref-color-blue-100: #0b1840;
67
+
68
+ // Miscellaneous
69
+ --tala-ref-color-misc-red-1: #b91c1b;
70
+ --tala-ref-color-misc-green-1: #005535;
71
+ --tala-ref-color-misc-amber-1: #734a01;
72
+ --tala-ref-color-misc-blue-1: #09469e;
73
+
74
+ // ══════════════════════════════════════════════════════════════════════════════════════════════
75
+ // SYSTEM
76
+ // Role-based tokens. Use these in components.
77
+ // Never reference primitives directly.
78
+ // ══════════════════════════════════════════════════════════════════════════════════════════════
79
+
80
+ --tala-sys-color-background-base: var(--tala-ref-color-neutral-0);
81
+ --tala-sys-color-background-subtle: var(--tala-ref-color-neutral-5);
82
+ --tala-sys-color-background-muted: var(--tala-ref-color-neutral-10);
83
+ --tala-sys-color-background-inverse: var(--tala-ref-color-neutral-100);
84
+
85
+ --tala-sys-color-surface-sunken: var(--tala-ref-color-neutral-5);
86
+ --tala-sys-color-surface-default: var(--tala-ref-color-neutral-0);
87
+ --tala-sys-color-surface-raised: var(--tala-ref-color-neutral-0);
88
+ --tala-sys-color-surface-overlay: var(--tala-ref-color-neutral-0);
89
+
90
+ --tala-sys-color-text-primary: var(--tala-ref-color-neutral-100);
91
+ --tala-sys-color-text-secondary: var(--tala-ref-color-neutral-70);
92
+ --tala-sys-color-text-tertiary: var(--tala-ref-color-neutral-50);
93
+ --tala-sys-color-text-disabled: var(--tala-ref-color-neutral-30);
94
+ --tala-sys-color-text-inverse: var(--tala-ref-color-neutral-0);
95
+ --tala-sys-color-text-placeholder: var(--tala-ref-color-neutral-40);
96
+ --tala-sys-color-text-link: var(--tala-ref-color-red-50);
97
+ --tala-sys-color-text-accent: var(--tala-ref-color-red-50);
98
+
99
+ --tala-sys-color-border-default: var(--tala-ref-color-neutral-20);
100
+ --tala-sys-color-border-strong: var(--tala-ref-color-neutral-30);
101
+ --tala-sys-color-border-focus: var(--tala-ref-color-neutral-100);
102
+ --tala-sys-color-border-danger: var(--tala-ref-color-red-50);
103
+ --tala-sys-color-border-error: var(--tala-ref-color-misc-red-1);
104
+
105
+ --tala-sys-color-action-primary-bg: var(--tala-ref-color-neutral-100);
106
+ --tala-sys-color-action-primary-fg: var(--tala-ref-color-neutral-0);
107
+ --tala-sys-color-action-secondary-bg: var(--tala-ref-color-neutral-0);
108
+ --tala-sys-color-action-secondary-border: var(--tala-ref-color-neutral-20);
109
+ --tala-sys-color-action-danger-bg: var(--tala-ref-color-misc-red-1);
110
+ --tala-sys-color-action-ghost-hover: var(--tala-ref-color-neutral-10);
111
+ --tala-sys-color-action-primary-text: var(--tala-ref-color-neutral-0);
112
+ --tala-sys-color-action-primary-hover: var(--tala-ref-color-neutral-90);
113
+ --tala-sys-color-action-secondary-text: var(--tala-ref-color-neutral-100);
114
+ --tala-sys-color-action-secondary-hover: var(--tala-ref-color-neutral-20);
115
+ --tala-sys-color-action-ghost-text: var(--tala-ref-color-neutral-100);
116
+ --tala-sys-color-action-danger-text: var(--tala-ref-color-neutral-0);
117
+ --tala-sys-color-action-accent-bg: var(--tala-ref-color-red-50);
118
+ --tala-sys-color-action-accent-text: var(--tala-ref-color-neutral-0);
119
+
120
+ --tala-sys-color-feedback-success-bg: var(--tala-ref-color-green-5);
121
+ --tala-sys-color-feedback-success-text: var(--tala-ref-color-misc-green-1);
122
+ --tala-sys-color-feedback-success-border: var(--tala-ref-color-green-30);
123
+ --tala-sys-color-feedback-warning-bg: var(--tala-ref-color-amber-5);
124
+ --tala-sys-color-feedback-warning-text: var(--tala-ref-color-misc-amber-1);
125
+ --tala-sys-color-feedback-warning-border: var(--tala-ref-color-amber-30);
126
+ --tala-sys-color-feedback-danger-bg: var(--tala-ref-color-red-5);
127
+ --tala-sys-color-feedback-danger-text: var(--tala-ref-color-red-70);
128
+ --tala-sys-color-feedback-danger-border: var(--tala-ref-color-red-30);
129
+ --tala-sys-color-feedback-info-bg: var(--tala-ref-color-blue-5);
130
+ --tala-sys-color-feedback-info-text: var(--tala-ref-color-misc-blue-1);
131
+ --tala-sys-color-feedback-info-border: var(--tala-ref-color-blue-30);
132
+ --tala-sys-color-feedback-neutral-bg: var(--tala-ref-color-neutral-5);
133
+ --tala-sys-color-feedback-neutral-text: var(--tala-ref-color-neutral-70);
134
+ --tala-sys-color-feedback-neutral-border: var(--tala-ref-color-neutral-30);
135
+ }
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
+ }