@fastwork/xosmoz-theme 0.39.0 → 0.41.0

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 CHANGED
@@ -78,7 +78,7 @@ Surface and layout colors that adapt between light and dark themes.
78
78
 
79
79
  ### Semantic Colors
80
80
 
81
- Six semantic categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`.
81
+ Eight semantic categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`, `orange`, `purple`.
82
82
 
83
83
  Each category follows the same token structure — replace `{name}` with the category:
84
84
 
@@ -116,16 +116,13 @@ Each category follows the same token structure — replace `{name}` with the cat
116
116
 
117
117
  ### Raw Color Palettes
118
118
 
119
- 10-step scales (100–1000) for each palette. Available palettes: `fastwork`, `gray`, `green`, `mint`, `amber`, `red`, `orange`, `purple`, `cyan`, `black-alpha`, `white-alpha`.
119
+ Single base color per palette. Available palettes: `fastwork`, `gray`, `green`, `yellow`, `red`, `orange`, `purple`, `cyan`.
120
120
 
121
121
  ```css
122
- --xz-color-{palette}-100 /* lightest */
123
- --xz-color-{palette}-200
124
- /* ... */
125
- --xz-color-{palette}-1000 /* darkest */
122
+ --xz-color-{palette} /* palette base color */
126
123
  ```
127
124
 
128
- Alpha palettes (`black-alpha`, `white-alpha`) use opacity steps from 0.1 to 1.0.
125
+ Each palette color is defined using OKLCH
129
126
 
130
127
  ### Typography
131
128
 
@@ -220,13 +217,14 @@ Usage: `font: var(--xz-font-heading1);`
220
217
  import { lightTheme, darkTheme, themes, getTheme, getThemeNames } from '@fastwork/xosmoz-theme';
221
218
 
222
219
  // Access raw palette colors
223
- lightTheme.colors.fastwork[600] // 'oklch(0.613 0.233 260.608)'
224
- lightTheme.colors.gray[300] // 'oklch(0.792 0.006 264.532)'
220
+ lightTheme.palette.fastwork.value // 'oklch(0.57 0.237 260.608)'
225
221
 
226
222
  // Access semantic colors
227
223
  lightTheme.colors.primary.bg[100] // solid fill color
228
224
  lightTheme.colors.primary.fg[100] // 'oklch(1 0 0 / 0.95)' — white for text on solid bg
229
225
  lightTheme.colors.primary.text[100] // colored text
226
+ lightTheme.colors.orange.bg[100] // orange solid fill
227
+ lightTheme.colors.purple.soft[100] // purple tinted background
230
228
 
231
229
  // Access base tokens
232
230
  lightTheme.colors.surface[200] // card background
@@ -67,120 +67,31 @@ class XzRoleColor {
67
67
  /// Palette colors — theme-independent. Access directly: XzPalette.fastwork.shade600
68
68
  abstract class XzPalette {
69
69
  static const fastwork = XzColorSwatch({
70
- 100: Color(0xFFE6F0FF),
71
- 200: Color(0xFFBDD6FF),
72
- 300: Color(0xFF94BCFF),
73
- 400: Color(0xFF6BA1FF),
74
- 500: Color(0xFF508FFF),
75
- 600: Color(0xFF2F7CFF),
76
- 700: Color(0xFF0B53C5),
77
- 800: Color(0xFF053F9A),
78
- 900: Color(0xFF042D72),
79
- 1000: Color(0xFF021B4A),
70
+
80
71
  });
81
72
 
82
73
  static const gray = XzColorSwatch({
83
- 100: Color(0xFFEFEFEF),
84
- 200: Color(0xFFD3D5D6),
85
- 300: Color(0xFFB9BBBF),
86
- 400: Color(0xFF9FA3A9),
87
- 500: Color(0xFF8A94A3),
88
- 600: Color(0xFF798598),
89
- 700: Color(0xFF4F5D72),
90
- 800: Color(0xFF3E4856),
91
- 900: Color(0xFF2B333E),
92
- 1000: Color(0xFF191F28),
93
- });
94
74
 
95
- static const green = XzColorSwatch({
96
- 100: Color(0xFFE5F4E5),
97
- 200: Color(0xFFB9E1B9),
98
- 300: Color(0xFF84D08D),
99
- 400: Color(0xFF47BF55),
100
- 500: Color(0xFF00B231),
101
- 600: Color(0xFF00A01F),
102
- 700: Color(0xFF007113),
103
- 800: Color(0xFF00570C),
104
- 900: Color(0xFF003F06),
105
- 1000: Color(0xFF002703),
106
75
  });
107
76
 
108
- static const mint = XzColorSwatch({
109
- 100: Color(0xFFE0F5EB),
110
- 200: Color(0xFFAAE4C9),
111
- 300: Color(0xFF65D4A8),
112
- 400: Color(0xFF00BF8B),
113
- 500: Color(0xFF00AE7E),
114
- 600: Color(0xFF009C6D),
115
- 700: Color(0xFF006F43),
116
- 800: Color(0xFF005630),
117
- 900: Color(0xFF003E21),
118
- 1000: Color(0xFF002614),
119
- });
77
+ static const green = XzColorSwatch({
120
78
 
121
- static const amber = XzColorSwatch({
122
- 100: Color(0xFFF5EEDC),
123
- 200: Color(0xFFE7D3A1),
124
- 300: Color(0xFFDBB758),
125
- 400: Color(0xFFCA9B00),
126
- 500: Color(0xFFBA8B00),
127
- 600: Color(0xFFAD7900),
128
- 700: Color(0xFF844E00),
129
- 800: Color(0xFF673B00),
130
- 900: Color(0xFF4A2A00),
131
- 1000: Color(0xFF2D1A00),
132
79
  });
133
80
 
134
81
  static const red = XzColorSwatch({
135
- 100: Color(0xFFFFE9E5),
136
- 200: Color(0xFFFFC4BA),
137
- 300: Color(0xFFFF9D8C),
138
- 400: Color(0xFFFF6E5A),
139
- 500: Color(0xFFFF4733),
140
- 600: Color(0xFFF02816),
141
- 700: Color(0xFFAE0D00),
142
- 800: Color(0xFF880700),
143
- 900: Color(0xFF640400),
144
- 1000: Color(0xFF410200),
82
+
145
83
  });
146
84
 
147
85
  static const orange = XzColorSwatch({
148
- 100: Color(0xFFFAECDD),
149
- 200: Color(0xFFF3CDA4),
150
- 300: Color(0xFFEFAB61),
151
- 400: Color(0xFFE58900),
152
- 500: Color(0xFFD57900),
153
- 600: Color(0xFFFFB504),
154
- 700: Color(0xFF914300),
155
- 800: Color(0xFF742F00),
156
- 900: Color(0xFF552100),
157
- 1000: Color(0xFF341500),
86
+
158
87
  });
159
88
 
160
89
  static const purple = XzColorSwatch({
161
- 100: Color(0xFFF1EBFE),
162
- 200: Color(0xFFDBCBFC),
163
- 300: Color(0xFFC6A9FE),
164
- 400: Color(0xFFAF88FF),
165
- 500: Color(0xFFA171FF),
166
- 600: Color(0xFF9059FF),
167
- 700: Color(0xFF673ABA),
168
- 800: Color(0xFF502A91),
169
- 900: Color(0xFF3A1D6B),
170
- 1000: Color(0xFF231045),
90
+
171
91
  });
172
92
 
173
93
  static const cyan = XzColorSwatch({
174
- 100: Color(0xFFDEF3FC),
175
- 200: Color(0xFF9FE2EE),
176
- 300: Color(0xFF42D0E6),
177
- 400: Color(0xFF00B7CD),
178
- 500: Color(0xFF00A6BA),
179
- 600: Color(0xFF0094AA),
180
- 700: Color(0xFF00677E),
181
- 800: Color(0xFF004F63),
182
- 900: Color(0xFF003948),
183
- 1000: Color(0xFF00232C),
94
+
184
95
  });
185
96
 
186
97
  }
@@ -255,7 +166,7 @@ class XzColors {
255
166
  text: XzBaseScale({
256
167
  100: Color(0xFF18181B),
257
168
  200: Color(0xB318181B),
258
- 300: Color(0x8018181B),
169
+ 300: Color(0x9918181B),
259
170
  }),
260
171
  line: XzBaseScale({
261
172
  100: Color(0xF2E9EDF4),
@@ -264,107 +175,67 @@ class XzColors {
264
175
  }),
265
176
  primary: XzRoleColor(
266
177
  soft: {
267
- 100: Color(0x1A2F7CFF),
268
- 200: Color(0x292F7CFF),
269
- },
270
- line: {
271
- 100: Color(0xFFC6DBFF),
272
- 200: Color(0xFF97BEFF),
273
- 300: Color(0xFF7AABFF),
178
+ 100: Color(0x1A0669FF),
179
+ 200: Color(0x290669FF),
274
180
  },
275
181
  bg: {
276
- 100: Color(0xFF2F7CFF),
277
- 200: Color(0xFF176FFF),
182
+ 100: Color(0xFF0669FF),
183
+ 200: Color(0xFF0061EF),
278
184
  },
279
185
  fg: {
280
- 100: Color(0xF2FFFFFF),
281
- },
282
- text: {
283
- 100: Color(0xFF2F7CFF),
186
+ 100: Color(0xFFFFFFFF),
284
187
  },
285
188
  ),
286
189
  danger: XzRoleColor(
287
190
  soft: {
288
- 100: Color(0x1AF02816),
289
- 200: Color(0x29F02816),
290
- },
291
- line: {
292
- 100: Color(0xFFFDCDC6),
293
- 200: Color(0xFFFEA092),
294
- 300: Color(0xFFFC8372),
191
+ 100: Color(0x1AE32A20),
192
+ 200: Color(0x29E32A20),
295
193
  },
296
194
  bg: {
297
- 100: Color(0xFFF02816),
298
- 200: Color(0xFFE51401),
195
+ 100: Color(0xFFE32A20),
196
+ 200: Color(0xFFD81912),
299
197
  },
300
198
  fg: {
301
- 100: Color(0xF2FFFFFF),
302
- },
303
- text: {
304
- 100: Color(0xFFF02816),
199
+ 100: Color(0xFFFFFFFF),
305
200
  },
306
201
  ),
307
202
  success: XzRoleColor(
308
203
  soft: {
309
- 100: Color(0x1A00A01F),
310
- 200: Color(0x2900A01F),
311
- },
312
- line: {
313
- 100: Color(0xFFC2E5C5),
314
- 200: Color(0xFF8CD08E),
315
- 300: Color(0xFF69C46C),
204
+ 100: Color(0x1A15C02D),
205
+ 200: Color(0x2915C02D),
316
206
  },
317
207
  bg: {
318
- 100: Color(0xFF00A01F),
319
- 200: Color(0xFF00961C),
208
+ 100: Color(0xFF15C02D),
209
+ 200: Color(0xFF00B625),
320
210
  },
321
211
  fg: {
322
- 100: Color(0xF2FFFFFF),
323
- },
324
- text: {
325
- 100: Color(0xFF00A01F),
212
+ 100: Color(0xF2000000),
326
213
  },
327
214
  ),
328
215
  warning: XzRoleColor(
329
216
  soft: {
330
- 100: Color(0x1AAD7900),
331
- 200: Color(0x29AD7900),
332
- },
333
- line: {
334
- 100: Color(0xFFEED7B2),
335
- 200: Color(0xFFE4B463),
336
- 300: Color(0xFFDD9E16),
217
+ 100: Color(0x1AFFB508),
218
+ 200: Color(0x29FFB508),
337
219
  },
338
220
  bg: {
339
- 100: Color(0xFFAD7900),
340
- 200: Color(0xFFA17100),
221
+ 100: Color(0xFFFFB508),
222
+ 200: Color(0xFFF3AC00),
341
223
  },
342
224
  fg: {
343
- 100: Color(0xF2FFFFFF),
344
- },
345
- text: {
346
- 100: Color(0xFFAD7900),
225
+ 100: Color(0xF2000000),
347
226
  },
348
227
  ),
349
228
  info: XzRoleColor(
350
229
  soft: {
351
- 100: Color(0x1A0094AA),
352
- 200: Color(0x290094AA),
353
- },
354
- line: {
355
- 100: Color(0xFFADE5F4),
356
- 200: Color(0xFF4CD0EA),
357
- 300: Color(0xFF00C0DC),
230
+ 100: Color(0x1A00CAE7),
231
+ 200: Color(0x2900CAE7),
358
232
  },
359
233
  bg: {
360
- 100: Color(0xFF0094AA),
361
- 200: Color(0xFF008A9F),
234
+ 100: Color(0xFF00CAE7),
235
+ 200: Color(0xFF00C0DB),
362
236
  },
363
237
  fg: {
364
- 100: Color(0xF2FFFFFF),
365
- },
366
- text: {
367
- 100: Color(0xFF0094AA),
238
+ 100: Color(0xF2000000),
368
239
  },
369
240
  ),
370
241
  neutral: XzRoleColor(
@@ -372,11 +243,6 @@ class XzColors {
372
243
  100: Color(0x1A798598),
373
244
  200: Color(0x29798598),
374
245
  },
375
- line: {
376
- 100: Color(0xFFD6DAE2),
377
- 200: Color(0xFFB6BDC9),
378
- 300: Color(0xFFA3ACBA),
379
- },
380
246
  bg: {
381
247
  100: Color(0xFF798598),
382
248
  200: Color(0xFF707C8F),
@@ -384,9 +250,6 @@ class XzColors {
384
250
  fg: {
385
251
  100: Color(0xFFFFFFFF),
386
252
  },
387
- text: {
388
- 100: Color(0xFF798598),
389
- },
390
253
  ),
391
254
  );
392
255
 
@@ -412,8 +275,8 @@ class XzColors {
412
275
  }),
413
276
  text: XzBaseScale({
414
277
  100: Color(0xFFEEF2F9),
415
- 200: Color(0x99EEF2F9),
416
- 300: Color(0x80EEF2F9),
278
+ 200: Color(0xA6EEF2F9),
279
+ 300: Color(0x8CEEF2F9),
417
280
  }),
418
281
  line: XzBaseScale({
419
282
  100: Color(0xF23E424D),
@@ -422,107 +285,67 @@ class XzColors {
422
285
  }),
423
286
  primary: XzRoleColor(
424
287
  soft: {
425
- 100: Color(0x1A2F7CFF),
426
- 200: Color(0x292F7CFF),
427
- },
428
- line: {
429
- 100: Color(0xFF2C4169),
430
- 200: Color(0xFF2C549C),
431
- 300: Color(0xFF2B5FBD),
288
+ 100: Color(0x1A0669FF),
289
+ 200: Color(0x290669FF),
432
290
  },
433
291
  bg: {
434
- 100: Color(0xFF2F7CFF),
435
- 200: Color(0xFF4F8FFF),
292
+ 100: Color(0xFF0669FF),
293
+ 200: Color(0xFF347EFF),
436
294
  },
437
295
  fg: {
438
- 100: Color(0xF2FFFFFF),
439
- },
440
- text: {
441
- 100: Color(0xFF85B2FF),
296
+ 100: Color(0xFFFFFFFF),
442
297
  },
443
298
  ),
444
299
  danger: XzRoleColor(
445
300
  soft: {
446
- 100: Color(0x1AF02816),
447
- 200: Color(0x29F02816),
448
- },
449
- line: {
450
- 100: Color(0xFF5A3638),
451
- 200: Color(0xFF8B3A35),
452
- 300: Color(0xFFA83931),
301
+ 100: Color(0x1AE32A20),
302
+ 200: Color(0x29E32A20),
453
303
  },
454
304
  bg: {
455
- 100: Color(0xFFF02816),
456
- 200: Color(0xFFFF4632),
305
+ 100: Color(0xFFE32A20),
306
+ 200: Color(0xFFF64032),
457
307
  },
458
308
  fg: {
459
- 100: Color(0xF2FFFFFF),
460
- },
461
- text: {
462
- 100: Color(0xFFFF8D7B),
309
+ 100: Color(0xFFFFFFFF),
463
310
  },
464
311
  ),
465
312
  success: XzRoleColor(
466
313
  soft: {
467
- 100: Color(0x1A00A01F),
468
- 200: Color(0x2900A01F),
469
- },
470
- line: {
471
- 100: Color(0xFF294A37),
472
- 200: Color(0xFF1F6731),
473
- 300: Color(0xFF0E7929),
314
+ 100: Color(0x1A15C02D),
315
+ 200: Color(0x2915C02D),
474
316
  },
475
317
  bg: {
476
- 100: Color(0xFF00A01F),
477
- 200: Color(0xFF00B224),
318
+ 100: Color(0xFF15C02D),
319
+ 200: Color(0xFF35D141),
478
320
  },
479
321
  fg: {
480
- 100: Color(0xF2FFFFFF),
481
- },
482
- text: {
483
- 100: Color(0xFF2CD53D),
322
+ 100: Color(0xF2000000),
484
323
  },
485
324
  ),
486
325
  warning: XzRoleColor(
487
326
  soft: {
488
- 100: Color(0x1AFFB504),
489
- 200: Color(0x29FFB504),
490
- },
491
- line: {
492
- 100: Color(0xFF594E3F),
493
- 200: Color(0xFF8D6F3F),
494
- 300: Color(0xFFAE843B),
327
+ 100: Color(0x1AFFB508),
328
+ 200: Color(0x29FFB508),
495
329
  },
496
330
  bg: {
497
- 100: Color(0xFFFFB504),
331
+ 100: Color(0xFFFFB508),
498
332
  200: Color(0xFFFFCC76),
499
333
  },
500
334
  fg: {
501
- 100: Color(0xF2FFFFFF),
502
- },
503
- text: {
504
- 100: Color(0xFFFFF4E4),
335
+ 100: Color(0xF2000000),
505
336
  },
506
337
  ),
507
338
  info: XzRoleColor(
508
339
  soft: {
509
- 100: Color(0x1A0094AA),
510
- 200: Color(0x290094AA),
511
- },
512
- line: {
513
- 100: Color(0xFF07495C),
514
- 200: Color(0xFF006274),
515
- 300: Color(0xFF007184),
340
+ 100: Color(0x1A00CAE7),
341
+ 200: Color(0x2900CAE7),
516
342
  },
517
343
  bg: {
518
- 100: Color(0xFF0094AA),
519
- 200: Color(0xFF00A5BD),
344
+ 100: Color(0xFF00CAE7),
345
+ 200: Color(0xFF31DBF8),
520
346
  },
521
347
  fg: {
522
- 100: Color(0xF2FFFFFF),
523
- },
524
- text: {
525
- 100: Color(0xFF00C7E4),
348
+ 100: Color(0xF2000000),
526
349
  },
527
350
  ),
528
351
  neutral: XzRoleColor(
@@ -530,11 +353,6 @@ class XzColors {
530
353
  100: Color(0x1A798598),
531
354
  200: Color(0x29798598),
532
355
  },
533
- line: {
534
- 100: Color(0xFF3C424E),
535
- 200: Color(0xFF505766),
536
- 300: Color(0xFF5C6575),
537
- },
538
356
  bg: {
539
357
  100: Color(0xFF798598),
540
358
  200: Color(0xFF8894A7),
@@ -542,9 +360,6 @@ class XzColors {
542
360
  fg: {
543
361
  100: Color(0xFFFFFFFF),
544
362
  },
545
- text: {
546
- 100: Color(0xFFA6B3C7),
547
- },
548
363
  ),
549
364
  );
550
365
 
Binary file