@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.
- package/README.md +1 -1
- package/fesm2022/doku-com-tala.mjs +398 -138
- package/fesm2022/doku-com-tala.mjs.map +1 -1
- package/package.json +4 -4
- package/styles/_typography.scss +162 -277
- package/styles/index.scss +26 -4
- package/styles/tokens/_color.scss +135 -0
- package/styles/tokens/_typography.scss +6 -0
- package/styles/tokens/_utility.scss +35 -0
- package/styles/tokens/index.scss +3 -0
- package/types/doku-com-tala.d.ts +214 -46
- package/llms.txt +0 -244
- package/styles/_color.scss +0 -178
- package/styles/_radius.scss +0 -10
- package/styles/_shadow.scss +0 -7
- package/styles/_spacing.scss +0 -12
package/styles/_color.scss
DELETED
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* ═══════════════════════════════════════════════
|
|
3
|
-
REFERENCE
|
|
4
|
-
Raw palette values. Never use directly in
|
|
5
|
-
components — use system tokens instead.
|
|
6
|
-
═══════════════════════════════════════════════ */
|
|
7
|
-
|
|
8
|
-
/* Red */
|
|
9
|
-
--tala-ref-color-red-5: #fff0f0;
|
|
10
|
-
--tala-ref-color-red-10: #ffd6d5;
|
|
11
|
-
--tala-ref-color-red-20: #ff9b99;
|
|
12
|
-
--tala-ref-color-red-30: #f76b68;
|
|
13
|
-
--tala-ref-color-red-40: #ef4340;
|
|
14
|
-
--tala-ref-color-red-50: #e1251b;
|
|
15
|
-
--tala-ref-color-red-60: #c41e15;
|
|
16
|
-
--tala-ref-color-red-65: #b91c1c;
|
|
17
|
-
--tala-ref-color-red-70: #a0170f;
|
|
18
|
-
--tala-ref-color-red-80: #7d110a;
|
|
19
|
-
--tala-ref-color-red-90: #5c0b06;
|
|
20
|
-
--tala-ref-color-red-100: #3a0603;
|
|
21
|
-
|
|
22
|
-
/* Neutral */
|
|
23
|
-
--tala-ref-color-neutral-0: #ffffff;
|
|
24
|
-
--tala-ref-color-neutral-5: #f7f7f8;
|
|
25
|
-
--tala-ref-color-neutral-10: #f0f0f2;
|
|
26
|
-
--tala-ref-color-neutral-20: #e2e2e6;
|
|
27
|
-
--tala-ref-color-neutral-30: #c8c8cf;
|
|
28
|
-
--tala-ref-color-neutral-40: #ababb5;
|
|
29
|
-
--tala-ref-color-neutral-50: #8e8e9a;
|
|
30
|
-
--tala-ref-color-neutral-60: #6e6e7c;
|
|
31
|
-
--tala-ref-color-neutral-70: #52525e;
|
|
32
|
-
--tala-ref-color-neutral-80: #363640;
|
|
33
|
-
--tala-ref-color-neutral-90: #1e1e26;
|
|
34
|
-
--tala-ref-color-neutral-100: #09090d;
|
|
35
|
-
|
|
36
|
-
/* Green */
|
|
37
|
-
--tala-ref-color-green-5: #f0fbf6;
|
|
38
|
-
--tala-ref-color-green-10: #d1f0e3;
|
|
39
|
-
--tala-ref-color-green-20: #a3dbca;
|
|
40
|
-
--tala-ref-color-green-30: #4ab98a;
|
|
41
|
-
--tala-ref-color-green-40: #22a470;
|
|
42
|
-
--tala-ref-color-green-50: #008856;
|
|
43
|
-
--tala-ref-color-green-60: #006b44;
|
|
44
|
-
--tala-ref-color-green-65: #005535;
|
|
45
|
-
--tala-ref-color-green-70: #005436;
|
|
46
|
-
--tala-ref-color-green-80: #003d28;
|
|
47
|
-
--tala-ref-color-green-90: #00261a;
|
|
48
|
-
--tala-ref-color-green-100: #00100c;
|
|
49
|
-
|
|
50
|
-
/* Amber */
|
|
51
|
-
--tala-ref-color-amber-5: #fffbf0;
|
|
52
|
-
--tala-ref-color-amber-10: #fef3c7;
|
|
53
|
-
--tala-ref-color-amber-20: #fde68a;
|
|
54
|
-
--tala-ref-color-amber-30: #ffd24a;
|
|
55
|
-
--tala-ref-color-amber-40: #d97706;
|
|
56
|
-
--tala-ref-color-amber-50: #b45309;
|
|
57
|
-
--tala-ref-color-amber-60: #92400e;
|
|
58
|
-
--tala-ref-color-amber-65: #734a00;
|
|
59
|
-
--tala-ref-color-amber-70: #78350f;
|
|
60
|
-
--tala-ref-color-amber-80: #5e2a0c;
|
|
61
|
-
--tala-ref-color-amber-90: #451e08;
|
|
62
|
-
--tala-ref-color-amber-100: #2d1206;
|
|
63
|
-
|
|
64
|
-
/* Blue */
|
|
65
|
-
--tala-ref-color-blue-5: #f0f6ff;
|
|
66
|
-
--tala-ref-color-blue-10: #dbeafe;
|
|
67
|
-
--tala-ref-color-blue-20: #bfdbfe;
|
|
68
|
-
--tala-ref-color-blue-30: #6aabfd;
|
|
69
|
-
--tala-ref-color-blue-40: #3b82f6;
|
|
70
|
-
--tala-ref-color-blue-50: #1d4ed8;
|
|
71
|
-
--tala-ref-color-blue-60: #1e40af;
|
|
72
|
-
--tala-ref-color-blue-65: #07469e;
|
|
73
|
-
--tala-ref-color-blue-70: #1e3a8a;
|
|
74
|
-
--tala-ref-color-blue-80: #1a3070;
|
|
75
|
-
--tala-ref-color-blue-90: #142558;
|
|
76
|
-
--tala-ref-color-blue-100: #0c1840;
|
|
77
|
-
|
|
78
|
-
/* ═══════════════════════════════════════════════
|
|
79
|
-
SYSTEM
|
|
80
|
-
Role-based tokens. Use these in components.
|
|
81
|
-
Never reference primitives directly.
|
|
82
|
-
═══════════════════════════════════════════════ */
|
|
83
|
-
|
|
84
|
-
/* ── Surface ──────────────────────────────────────────────────────────────
|
|
85
|
-
Background layers that establish visual depth.
|
|
86
|
-
Use to differentiate page regions — not for interactive or status color.
|
|
87
|
-
sunken → recessed areas like inputs or code blocks
|
|
88
|
-
default → base page and standard cards
|
|
89
|
-
raised → cards or panels that sit above the page
|
|
90
|
-
overlay → modals, drawers, and popovers
|
|
91
|
-
inverse → dark/inverted sections
|
|
92
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
93
|
-
--tala-sys-color-surface-sunken: var(--tala-ref-color-neutral-5);
|
|
94
|
-
--tala-sys-color-surface-default: var(--tala-ref-color-neutral-0);
|
|
95
|
-
--tala-sys-color-surface-raised: var(--tala-ref-color-neutral-0);
|
|
96
|
-
--tala-sys-color-surface-overlay: var(--tala-ref-color-neutral-0);
|
|
97
|
-
--tala-sys-color-surface-inverse: var(--tala-ref-color-neutral-100);
|
|
98
|
-
|
|
99
|
-
/* ── Text ──────────────────────────────────────────────────────────────────
|
|
100
|
-
Controls text legibility and visual hierarchy.
|
|
101
|
-
Use the hierarchy variants (primary → tertiary) to guide reading order,
|
|
102
|
-
not to convey status or meaning.
|
|
103
|
-
primary → main body copy and headings
|
|
104
|
-
secondary → supporting labels, captions, and metadata
|
|
105
|
-
tertiary → de-emphasized hints or supplemental info
|
|
106
|
-
disabled → non-interactive / unavailable text
|
|
107
|
-
inverse → text on dark or inverse surfaces
|
|
108
|
-
placeholder → input placeholder copy
|
|
109
|
-
link → interactive inline links
|
|
110
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
111
|
-
--tala-sys-color-text-primary: var(--tala-ref-color-neutral-100);
|
|
112
|
-
--tala-sys-color-text-secondary: var(--tala-ref-color-neutral-70);
|
|
113
|
-
--tala-sys-color-text-tertiary: var(--tala-ref-color-neutral-50);
|
|
114
|
-
--tala-sys-color-text-disabled: var(--tala-ref-color-neutral-30);
|
|
115
|
-
--tala-sys-color-text-inverse: var(--tala-ref-color-neutral-0);
|
|
116
|
-
--tala-sys-color-text-placeholder: var(--tala-ref-color-neutral-40);
|
|
117
|
-
--tala-sys-color-text-link: var(--tala-ref-color-red-50);
|
|
118
|
-
|
|
119
|
-
/* ── Outline ───────────────────────────────────────────────────────────────
|
|
120
|
-
Borders and dividers that separate or define elements.
|
|
121
|
-
Do not use for status — use feedback tokens for that.
|
|
122
|
-
default → subtle dividers and input borders at rest
|
|
123
|
-
strong → more prominent borders needing higher contrast
|
|
124
|
-
focus → keyboard focus ring on interactive elements
|
|
125
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
126
|
-
--tala-sys-color-outline-default: var(--tala-ref-color-neutral-20);
|
|
127
|
-
--tala-sys-color-outline-strong: var(--tala-ref-color-neutral-30);
|
|
128
|
-
--tala-sys-color-outline-focus: var(--tala-ref-color-neutral-100);
|
|
129
|
-
|
|
130
|
-
/* ── Brand ─────────────────────────────────────────────────────────────────
|
|
131
|
-
Primary brand identity color for interactive elements.
|
|
132
|
-
Use for CTAs, primary buttons, and key accents.
|
|
133
|
-
on-brand → content (icon/text) placed on top of a brand-colored surface
|
|
134
|
-
hover → brand color on pointer hover
|
|
135
|
-
subtle → light tinted surface for brand-adjacent areas
|
|
136
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
137
|
-
--tala-sys-color-brand: var(--tala-ref-color-red-50);
|
|
138
|
-
--tala-sys-color-on-brand: var(--tala-ref-color-neutral-0);
|
|
139
|
-
--tala-sys-color-brand-hover: var(--tala-ref-color-red-60);
|
|
140
|
-
--tala-sys-color-brand-subtle: var(--tala-ref-color-red-5);
|
|
141
|
-
|
|
142
|
-
/* ── Error ─────────────────────────────────────────────────────────────────
|
|
143
|
-
Destructive interactive states for clickable elements.
|
|
144
|
-
Use on buttons, icons, or controls that perform a destructive action.
|
|
145
|
-
Do NOT use for read-only status — use error feedback tokens instead.
|
|
146
|
-
on-error → content (icon/text) placed on top of an error-colored surface
|
|
147
|
-
hover → error color on pointer hover
|
|
148
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
149
|
-
--tala-sys-color-error: var(--tala-ref-color-red-65);
|
|
150
|
-
--tala-sys-color-on-error: var(--tala-ref-color-neutral-0);
|
|
151
|
-
--tala-sys-color-error-hover: var(--tala-ref-color-red-70);
|
|
152
|
-
|
|
153
|
-
/* ── Feedback ──────────────────────────────────────────────────────────────
|
|
154
|
-
Read-only status communication for non-interactive display components
|
|
155
|
-
such as alerts, banners, badges, and toasts.
|
|
156
|
-
Each status provides a surface/text/outline triad for composing these
|
|
157
|
-
components — do NOT use for interactive or clickable elements.
|
|
158
|
-
success → positive outcome or completion
|
|
159
|
-
warning → potential issue requiring attention
|
|
160
|
-
error → failure or blocking problem
|
|
161
|
-
info → neutral informational message
|
|
162
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
163
|
-
--tala-sys-color-success-surface: var(--tala-ref-color-green-5);
|
|
164
|
-
--tala-sys-color-success-text: var(--tala-ref-color-green-65);
|
|
165
|
-
--tala-sys-color-success-outline: var(--tala-ref-color-green-30);
|
|
166
|
-
|
|
167
|
-
--tala-sys-color-warning-surface: var(--tala-ref-color-amber-5);
|
|
168
|
-
--tala-sys-color-warning-text: var(--tala-ref-color-amber-65);
|
|
169
|
-
--tala-sys-color-warning-outline: var(--tala-ref-color-amber-30);
|
|
170
|
-
|
|
171
|
-
--tala-sys-color-error-surface: var(--tala-ref-color-red-5);
|
|
172
|
-
--tala-sys-color-error-text: var(--tala-ref-color-red-70);
|
|
173
|
-
--tala-sys-color-error-outline: var(--tala-ref-color-red-30);
|
|
174
|
-
|
|
175
|
-
--tala-sys-color-info-surface: var(--tala-ref-color-blue-5);
|
|
176
|
-
--tala-sys-color-info-text: var(--tala-ref-color-blue-65);
|
|
177
|
-
--tala-sys-color-info-outline: var(--tala-ref-color-blue-30);
|
|
178
|
-
}
|
package/styles/_radius.scss
DELETED
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
|
-
}
|