@rafael_dias/akoma 0.3.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 (17) hide show
  1. package/README.md +59 -7
  2. package/content/README.md +30 -0
  3. package/content/colors.md +56 -0
  4. package/content/decisions.md +45 -0
  5. package/content/icons.md +76 -0
  6. package/content/implementation.md +33 -0
  7. package/content/moods.md +43 -0
  8. package/content/philosophy.md +43 -0
  9. package/dist/akoma.cjs +1 -1
  10. package/dist/akoma.css +1 -1
  11. package/dist/akoma.js +606 -126
  12. package/dist/index.d.ts +336 -0
  13. package/package.json +12 -6
  14. package/src/styles/accent-palettes.css +194 -0
  15. package/src/styles/index.css +1 -0
  16. package/src/styles/motion.css +8 -0
  17. package/src/styles/tokens.css +65 -92
package/src/styles/tokens.css CHANGED
@@ -54,13 +54,8 @@
54
54
  --text-tertiary: #929b95;
55
55
  --text-inverse: #fffefa;
56
56
 
57
- --border: rgba(41, 49, 45, 0.07);
58
- --border-strong: rgba(41, 49, 45, 0.14);
59
-
60
- --accent: #6658b8;
61
- --accent-hover: #5548a3;
62
- --accent-soft: #ece9f8;
63
- --accent-contrast: #ffffff;
57
+ --border: rgba(41, 49, 45, 0.1);
58
+ --border-strong: rgba(41, 49, 45, 0.18);
64
59
 
65
60
  --cat-1: #5d8ca8;
66
61
  --cat-2: #8a72b4;
@@ -78,28 +73,28 @@
78
73
  --info: #426f8e;
79
74
  --info-soft: #e6f0f6;
80
75
 
81
- --shadow-sm: 0 1px 2px rgba(49, 44, 35, 0.04), 0 8px 22px rgba(49, 44, 35, 0.055);
82
- --shadow-md: 0 2px 4px rgba(49, 44, 35, 0.04), 0 18px 44px rgba(49, 44, 35, 0.09);
83
- --shadow-nav: 0 -8px 32px rgba(49, 44, 35, 0.07);
76
+ --shadow-sm: none;
77
+ --shadow-md: none;
78
+ --shadow-nav: 0 -1px 0 var(--border);
84
79
 
85
- --radius-sm: 12px;
86
- --radius-md: 18px;
87
- --radius-lg: 28px;
80
+ --radius-sm: 8px;
81
+ --radius-md: 10px;
82
+ --radius-lg: 14px;
88
83
  --button-radius: var(--radius-full);
89
- --card-radius: 24px;
90
- --field-radius: 16px;
84
+ --card-radius: 10px;
85
+ --field-radius: 12px;
91
86
  --chip-radius: var(--radius-full);
92
87
  --badge-radius: var(--radius-full);
93
88
 
94
- --card-bg: var(--bg-elevated);
95
- --card-border: transparent;
96
- --card-shadow: var(--shadow-sm);
89
+ --card-bg: var(--bg);
90
+ --card-border: var(--border-strong);
91
+ --card-shadow: none;
97
92
  --field-bg: var(--bg-soft);
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 4px rgba(102, 88, 184, 0.15);
102
- --button-shadow: 0 6px 18px rgba(102, 88, 184, 0.2);
96
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
97
+ --button-shadow: none;
103
98
 
104
99
  --nav-glass: rgba(255, 254, 250, 0.9);
105
100
  --fill-strong: #29312d;
@@ -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
 
@@ -125,54 +119,45 @@
125
119
  --text-secondary: #65706a;
126
120
  --text-tertiary: #929b95;
127
121
  --text-inverse: #fffefa;
128
- --border: rgba(41, 49, 45, 0.07);
129
- --border-strong: rgba(41, 49, 45, 0.14);
130
- --accent: #6658b8;
131
- --accent-hover: #5548a3;
132
- --accent-soft: #ece9f8;
133
- --accent-contrast: #ffffff;
134
- --shadow-sm: 0 1px 2px rgba(49, 44, 35, 0.04), 0 8px 22px rgba(49, 44, 35, 0.055);
135
- --shadow-md: 0 2px 4px rgba(49, 44, 35, 0.04), 0 18px 44px rgba(49, 44, 35, 0.09);
136
- --radius-sm: 12px;
137
- --radius-md: 18px;
138
- --radius-lg: 28px;
122
+ --border: rgba(41, 49, 45, 0.1);
123
+ --border-strong: rgba(41, 49, 45, 0.18);
124
+ --shadow-sm: none;
125
+ --shadow-md: none;
126
+ --radius-sm: 8px;
127
+ --radius-md: 10px;
128
+ --radius-lg: 14px;
139
129
  --button-radius: var(--radius-full);
140
- --card-radius: 24px;
141
- --field-radius: 16px;
130
+ --card-radius: 10px;
131
+ --field-radius: 12px;
142
132
  --chip-radius: var(--radius-full);
143
133
  --badge-radius: var(--radius-full);
144
- --card-bg: var(--bg-elevated);
145
- --card-border: transparent;
146
- --card-shadow: var(--shadow-sm);
134
+ --card-bg: var(--bg);
135
+ --card-border: var(--border-strong);
136
+ --card-shadow: none;
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 4px rgba(102, 88, 184, 0.15);
151
- --button-shadow: 0 6px 18px rgba(102, 88, 184, 0.2);
140
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
141
+ --button-shadow: none;
152
142
  }
153
143
 
154
144
  /* Site expression — mineral white + confident evergreen.
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;
166
156
  --text-tertiary: #8b978f;
167
157
  --text-inverse: #ffffff;
168
158
 
169
- --border: rgba(33, 49, 41, 0.08);
170
- --border-strong: rgba(33, 49, 41, 0.16);
171
-
172
- --accent: #2e684f;
173
- --accent-hover: #245640;
174
- --accent-soft: #e2eee7;
175
- --accent-contrast: #ffffff;
159
+ --border: rgba(33, 49, 41, 0.11);
160
+ --border-strong: rgba(33, 49, 41, 0.2);
176
161
 
177
162
  --cat-1: #4f7f9b;
178
163
  --cat-2: #76639b;
@@ -190,28 +175,28 @@
190
175
  --info: #386984;
191
176
  --info-soft: #e3eef4;
192
177
 
193
- --shadow-sm: 0 1px 2px rgba(28, 48, 38, 0.035), 0 5px 16px rgba(28, 48, 38, 0.045);
194
- --shadow-md: 0 2px 4px rgba(28, 48, 38, 0.04), 0 14px 36px rgba(28, 48, 38, 0.075);
195
- --shadow-nav: 0 -6px 28px rgba(28, 48, 38, 0.055);
178
+ --shadow-sm: none;
179
+ --shadow-md: none;
180
+ --shadow-nav: 0 -1px 0 var(--border);
196
181
 
197
- --radius-sm: 8px;
198
- --radius-md: 12px;
199
- --radius-lg: 18px;
200
- --button-radius: 10px;
201
- --card-radius: 16px;
182
+ --radius-sm: 6px;
183
+ --radius-md: 8px;
184
+ --radius-lg: 12px;
185
+ --button-radius: 8px;
186
+ --card-radius: 8px;
202
187
  --field-radius: 10px;
203
188
  --chip-radius: 10px;
204
189
  --badge-radius: 8px;
205
190
 
206
- --card-bg: var(--bg-elevated);
207
- --card-border: var(--border);
208
- --card-shadow: 0 1px 2px rgba(28, 48, 38, 0.025), 0 8px 24px rgba(28, 48, 38, 0.04);
191
+ --card-bg: var(--bg);
192
+ --card-border: var(--border-strong);
193
+ --card-shadow: none;
209
194
  --field-bg: var(--bg-elevated);
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 4px rgba(46, 104, 79, 0.13);
214
- --button-shadow: 0 4px 12px rgba(46, 104, 79, 0.16);
198
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
199
+ --button-shadow: none;
215
200
 
216
201
  --nav-glass: rgba(255, 255, 255, 0.92);
217
202
  --fill-strong: #213129;
@@ -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;
@@ -257,13 +236,14 @@
257
236
  --info: #86afc8;
258
237
  --info-soft: #293b46;
259
238
 
260
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16), 0 8px 22px rgba(0, 0, 0, 0.14);
261
- --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.18), 0 18px 44px rgba(0, 0, 0, 0.24);
262
- --card-border: rgba(255, 255, 255, 0.04);
239
+ --shadow-sm: none;
240
+ --shadow-md: none;
241
+ --card-border: rgba(255, 255, 255, 0.1);
242
+ --card-shadow: none;
263
243
  --field-border: rgba(255, 255, 255, 0.1);
264
244
  --control-border: rgba(255, 255, 255, 0.14);
265
- --focus-ring: 0 0 0 4px rgba(169, 158, 232, 0.18);
266
- --button-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
245
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
246
+ --button-shadow: none;
267
247
 
268
248
  --nav-glass: rgba(39, 44, 41, 0.92);
269
249
  --fill-strong: #f3f1ec;
@@ -271,7 +251,6 @@
271
251
  --toast-bg: #f3f1ec;
272
252
  --toast-fg: #202421;
273
253
 
274
- --orb-1: rgba(169, 158, 232, 0.11);
275
254
  --orb-2: rgba(120, 185, 151, 0.09);
276
255
  --orb-3: rgba(212, 173, 97, 0.08);
277
256
 
@@ -280,22 +259,17 @@
280
259
 
281
260
  /* Site dark — deep green-charcoal, restrained and high-confidence. */
282
261
  [data-mood='site'][data-theme='dark'] {
283
- --bg: #19211d;
284
- --bg-elevated: #232d28;
285
- --bg-soft: #2b3731;
286
- --bg-muted: #35433b;
287
- --bg-tinted: #263b31;
262
+ --bg: #1c1f1e;
263
+ --bg-elevated: #262928;
264
+ --bg-soft: #2f3331;
265
+ --bg-muted: #393e3b;
266
+ --bg-tinted: #252928;
288
267
 
289
268
  --text: #f0f3f0;
290
269
  --text-secondary: #abb7b0;
291
270
  --text-tertiary: #77867d;
292
271
  --text-inverse: #17201b;
293
272
 
294
- --accent: #82b99d;
295
- --accent-hover: #96c6ae;
296
- --accent-soft: #294438;
297
- --accent-contrast: #13241c;
298
-
299
273
  --success: #76b792;
300
274
  --success-soft: #274236;
301
275
  --warning: #d0ab62;
@@ -305,14 +279,14 @@
305
279
  --info: #84adc4;
306
280
  --info-soft: #293d47;
307
281
 
308
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 18px rgba(0, 0, 0, 0.13);
309
- --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.22);
310
- --card-border: rgba(255, 255, 255, 0.065);
311
- --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12);
282
+ --shadow-sm: none;
283
+ --shadow-md: none;
284
+ --card-border: rgba(255, 255, 255, 0.1);
285
+ --card-shadow: none;
312
286
  --field-border: rgba(255, 255, 255, 0.13);
313
287
  --control-border: rgba(255, 255, 255, 0.14);
314
- --focus-ring: 0 0 0 4px rgba(130, 185, 157, 0.16);
315
- --button-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
288
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
289
+ --button-shadow: none;
316
290
 
317
291
  --nav-glass: rgba(35, 45, 40, 0.92);
318
292
  --fill-strong: #f0f3f0;
@@ -320,7 +294,6 @@
320
294
  --toast-bg: #f0f3f0;
321
295
  --toast-fg: #17201b;
322
296
 
323
- --orb-1: rgba(130, 185, 157, 0.09);
324
297
  --orb-2: rgba(132, 173, 196, 0.07);
325
298
  --orb-3: rgba(208, 171, 98, 0.06);
326
299