@rafael_dias/akoma 0.4.0 → 0.7.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 (16) hide show
  1. package/README.md +26 -4
  2. package/content/README.md +2 -0
  3. package/content/colors.md +56 -0
  4. package/content/decisions.md +3 -3
  5. package/content/icons.md +76 -0
  6. package/content/implementation.md +1 -1
  7. package/content/moods.md +12 -0
  8. package/dist/akoma.cjs +1 -1
  9. package/dist/akoma.css +1 -1
  10. package/dist/akoma.js +437 -231
  11. package/dist/index.d.ts +162 -12
  12. package/package.json +5 -2
  13. package/src/styles/accent-palettes.css +194 -0
  14. package/src/styles/index.css +1 -0
  15. package/src/styles/motion.css +8 -0
  16. package/src/styles/tokens.css +14 -42
package/src/styles/tokens.css CHANGED
@@ -57,11 +57,6 @@
57
57
  --border: rgba(41, 49, 45, 0.1);
58
58
  --border-strong: rgba(41, 49, 45, 0.18);
59
59
 
60
- --accent: #6658b8;
61
- --accent-hover: #5548a3;
62
- --accent-soft: #ece9f8;
63
- --accent-contrast: #ffffff;
64
-
65
60
  --cat-1: #5d8ca8;
66
61
  --cat-2: #8a72b4;
67
62
  --cat-3: #b98136;
@@ -98,7 +93,7 @@
98
93
  --field-bg-hover: var(--bg-muted);
99
94
  --field-border: transparent;
100
95
  --control-border: var(--border-strong);
101
- --focus-ring: 0 0 0 3px rgba(102, 88, 184, 0.14);
96
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
102
97
  --button-shadow: none;
103
98
 
104
99
  --nav-glass: rgba(255, 254, 250, 0.9);
@@ -107,7 +102,6 @@
107
102
  --toast-bg: #29312d;
108
103
  --toast-fg: #fffefa;
109
104
 
110
- --orb-1: rgba(102, 88, 184, 0.13);
111
105
  --orb-2: rgba(86, 130, 105, 0.12);
112
106
  --orb-3: rgba(221, 168, 94, 0.12);
113
107
 
@@ -127,10 +121,6 @@
127
121
  --text-inverse: #fffefa;
128
122
  --border: rgba(41, 49, 45, 0.1);
129
123
  --border-strong: rgba(41, 49, 45, 0.18);
130
- --accent: #6658b8;
131
- --accent-hover: #5548a3;
132
- --accent-soft: #ece9f8;
133
- --accent-contrast: #ffffff;
134
124
  --shadow-sm: none;
135
125
  --shadow-md: none;
136
126
  --radius-sm: 8px;
@@ -147,7 +137,7 @@
147
137
  --field-bg: var(--bg-soft);
148
138
  --field-bg-hover: var(--bg-muted);
149
139
  --field-border: transparent;
150
- --focus-ring: 0 0 0 3px rgba(102, 88, 184, 0.14);
140
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
151
141
  --button-shadow: none;
152
142
  }
153
143
 
@@ -155,11 +145,11 @@
155
145
  * More controlled radii and visible structure suit finance and B2B contexts.
156
146
  */
157
147
  [data-mood='site'] {
158
- --bg: #f6f7f3;
148
+ --bg: #f8f8f7;
159
149
  --bg-elevated: #ffffff;
160
- --bg-soft: #edf0ea;
161
- --bg-muted: #dfe4dc;
162
- --bg-tinted: #e8f0eb;
150
+ --bg-soft: #f2f2f0;
151
+ --bg-muted: #e9e9e6;
152
+ --bg-tinted: #f4f5f4;
163
153
 
164
154
  --text: #213129;
165
155
  --text-secondary: #5b6a62;
@@ -169,11 +159,6 @@
169
159
  --border: rgba(33, 49, 41, 0.11);
170
160
  --border-strong: rgba(33, 49, 41, 0.2);
171
161
 
172
- --accent: #2e684f;
173
- --accent-hover: #245640;
174
- --accent-soft: #e2eee7;
175
- --accent-contrast: #ffffff;
176
-
177
162
  --cat-1: #4f7f9b;
178
163
  --cat-2: #76639b;
179
164
  --cat-3: #9a702d;
@@ -210,7 +195,7 @@
210
195
  --field-bg-hover: var(--bg-elevated);
211
196
  --field-border: var(--border-strong);
212
197
  --control-border: var(--border-strong);
213
- --focus-ring: 0 0 0 3px rgba(46, 104, 79, 0.12);
198
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
214
199
  --button-shadow: none;
215
200
 
216
201
  --nav-glass: rgba(255, 255, 255, 0.92);
@@ -219,7 +204,6 @@
219
204
  --toast-bg: #213129;
220
205
  --toast-fg: #ffffff;
221
206
 
222
- --orb-1: rgba(46, 104, 79, 0.1);
223
207
  --orb-2: rgba(79, 127, 155, 0.08);
224
208
  --orb-3: rgba(154, 112, 45, 0.07);
225
209
 
@@ -243,11 +227,6 @@
243
227
  --border: rgba(255, 255, 255, 0.07);
244
228
  --border-strong: rgba(255, 255, 255, 0.14);
245
229
 
246
- --accent: #a99ee8;
247
- --accent-hover: #bbb2f0;
248
- --accent-soft: #39354f;
249
- --accent-contrast: #211d38;
250
-
251
230
  --success: #78b997;
252
231
  --success-soft: #283e32;
253
232
  --warning: #d4ad61;
@@ -263,7 +242,7 @@
263
242
  --card-shadow: none;
264
243
  --field-border: rgba(255, 255, 255, 0.1);
265
244
  --control-border: rgba(255, 255, 255, 0.14);
266
- --focus-ring: 0 0 0 3px rgba(169, 158, 232, 0.16);
245
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
267
246
  --button-shadow: none;
268
247
 
269
248
  --nav-glass: rgba(39, 44, 41, 0.92);
@@ -272,7 +251,6 @@
272
251
  --toast-bg: #f3f1ec;
273
252
  --toast-fg: #202421;
274
253
 
275
- --orb-1: rgba(169, 158, 232, 0.11);
276
254
  --orb-2: rgba(120, 185, 151, 0.09);
277
255
  --orb-3: rgba(212, 173, 97, 0.08);
278
256
 
@@ -281,22 +259,17 @@
281
259
 
282
260
  /* Site dark — deep green-charcoal, restrained and high-confidence. */
283
261
  [data-mood='site'][data-theme='dark'] {
284
- --bg: #19211d;
285
- --bg-elevated: #232d28;
286
- --bg-soft: #2b3731;
287
- --bg-muted: #35433b;
288
- --bg-tinted: #263b31;
262
+ --bg: #1c1f1e;
263
+ --bg-elevated: #262928;
264
+ --bg-soft: #2f3331;
265
+ --bg-muted: #393e3b;
266
+ --bg-tinted: #252928;
289
267
 
290
268
  --text: #f0f3f0;
291
269
  --text-secondary: #abb7b0;
292
270
  --text-tertiary: #77867d;
293
271
  --text-inverse: #17201b;
294
272
 
295
- --accent: #82b99d;
296
- --accent-hover: #96c6ae;
297
- --accent-soft: #294438;
298
- --accent-contrast: #13241c;
299
-
300
273
  --success: #76b792;
301
274
  --success-soft: #274236;
302
275
  --warning: #d0ab62;
@@ -312,7 +285,7 @@
312
285
  --card-shadow: none;
313
286
  --field-border: rgba(255, 255, 255, 0.13);
314
287
  --control-border: rgba(255, 255, 255, 0.14);
315
- --focus-ring: 0 0 0 3px rgba(130, 185, 157, 0.14);
288
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
316
289
  --button-shadow: none;
317
290
 
318
291
  --nav-glass: rgba(35, 45, 40, 0.92);
@@ -321,7 +294,6 @@
321
294
  --toast-bg: #f0f3f0;
322
295
  --toast-fg: #17201b;
323
296
 
324
- --orb-1: rgba(130, 185, 157, 0.09);
325
297
  --orb-2: rgba(132, 173, 196, 0.07);
326
298
  --orb-3: rgba(208, 171, 98, 0.06);
327
299