@aakaar/dictionary 0.0.2 → 0.0.4
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/dist/index.cjs +494 -52
- package/dist/index.d.cts +58 -3
- package/dist/index.d.ts +58 -3
- package/dist/index.js +498 -56
- package/dist/index.mjs +7576 -0
- package/package.json +8 -1
package/dist/index.cjs
CHANGED
|
@@ -79,41 +79,6 @@ var transformCase = (text, target) => {
|
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
81
|
|
|
82
|
-
// src/lib/css/colors.ts
|
|
83
|
-
var import_material_color_utilities = require("@material/material-color-utilities");
|
|
84
|
-
var import_colorjs = __toESM(require("colorjs.io"), 1);
|
|
85
|
-
var theme = (color) => (0, import_material_color_utilities.themeFromSourceColor)((0, import_material_color_utilities.argbFromHex)(color));
|
|
86
|
-
var transformHexToOkLch = (color) => {
|
|
87
|
-
const oklchColor = new import_colorjs.default(color).to("oklch");
|
|
88
|
-
return oklchColor.toString({ precision: 2 });
|
|
89
|
-
};
|
|
90
|
-
var transformColorToToken = (name, color) => {
|
|
91
|
-
return {
|
|
92
|
-
name: `color-${name}`,
|
|
93
|
-
value: transformHexToOkLch((0, import_material_color_utilities.hexFromArgb)(color))
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
|
-
var lightTokens = (theme2) => Object.entries(theme2.schemes.light.toJSON()).map(
|
|
97
|
-
([colorName, colorValue]) => transformColorToToken(colorName, colorValue)
|
|
98
|
-
);
|
|
99
|
-
var darkTokens = (theme2) => Object.entries(theme2.schemes.dark.toJSON()).map(
|
|
100
|
-
([colorName, colorValue]) => transformColorToToken(colorName, colorValue)
|
|
101
|
-
);
|
|
102
|
-
var lightDarkTokens = (theme2) => {
|
|
103
|
-
const light = lightTokens(theme2);
|
|
104
|
-
const dark = darkTokens(theme2);
|
|
105
|
-
return light.map((lightToken, index) => ({
|
|
106
|
-
name: lightToken.name,
|
|
107
|
-
value: `light-dark(${lightToken.value}, ${dark[index].value})`
|
|
108
|
-
}));
|
|
109
|
-
};
|
|
110
|
-
var primaryPaletteTokens = (theme2) => {
|
|
111
|
-
const tones = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 100];
|
|
112
|
-
return tones.map(
|
|
113
|
-
(tone) => transformColorToToken(`primary${tone}`, theme2.palettes.primary.tone(tone))
|
|
114
|
-
);
|
|
115
|
-
};
|
|
116
|
-
|
|
117
82
|
// src/lib/css/shadow.ts
|
|
118
83
|
var transformShadowToToken = (name, size, value) => {
|
|
119
84
|
return {
|
|
@@ -242,6 +207,490 @@ var radiusTokens = [
|
|
|
242
207
|
}
|
|
243
208
|
];
|
|
244
209
|
|
|
210
|
+
// src/lib/css/strategy/harmony/harmony-colors.ts
|
|
211
|
+
var import_colorjs = __toESM(require("colorjs.io"), 1);
|
|
212
|
+
var theme = (color) => {
|
|
213
|
+
const sourceColor = new import_colorjs.default(color);
|
|
214
|
+
return sourceColor;
|
|
215
|
+
};
|
|
216
|
+
var transformHexToOkLch = (color) => {
|
|
217
|
+
if (color.startsWith("light-dark(")) {
|
|
218
|
+
return color;
|
|
219
|
+
}
|
|
220
|
+
const oklchColor = new import_colorjs.default(color).to("oklch");
|
|
221
|
+
return oklchColor.toString({ precision: 3 });
|
|
222
|
+
};
|
|
223
|
+
var transformColorToToken = (name, color) => {
|
|
224
|
+
return {
|
|
225
|
+
name: `color-${name}`,
|
|
226
|
+
value: transformHexToOkLch(color)
|
|
227
|
+
};
|
|
228
|
+
};
|
|
229
|
+
var generateHarmoniousHue = (baseHue, harmonyType, index = 0) => {
|
|
230
|
+
switch (harmonyType) {
|
|
231
|
+
case "analogous":
|
|
232
|
+
return (baseHue + index * 30 + 360) % 360;
|
|
233
|
+
case "complementary":
|
|
234
|
+
return (baseHue + 180) % 360;
|
|
235
|
+
case "triadic":
|
|
236
|
+
return (baseHue + index * 120) % 360;
|
|
237
|
+
case "split-complementary":
|
|
238
|
+
return index === 0 ? (baseHue + 150) % 360 : (baseHue + 210) % 360;
|
|
239
|
+
default:
|
|
240
|
+
return baseHue;
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
var optimizeLightnessForContrast = (lightness, chroma, isLight) => {
|
|
244
|
+
if (isLight) {
|
|
245
|
+
return Math.max(0.25, Math.min(0.65, lightness - chroma * 0.3));
|
|
246
|
+
}
|
|
247
|
+
return Math.max(0.35, Math.min(0.8, lightness + chroma * 0.4));
|
|
248
|
+
};
|
|
249
|
+
var generateOptimalChroma = (baseChroma, purpose) => {
|
|
250
|
+
const chromaMap = {
|
|
251
|
+
primary: Math.max(0.15, Math.min(0.37, baseChroma)),
|
|
252
|
+
secondary: Math.max(0.12, Math.min(0.32, baseChroma * 0.85)),
|
|
253
|
+
tertiary: Math.max(0.1, Math.min(0.28, baseChroma * 0.75)),
|
|
254
|
+
neutral: Math.max(5e-3, Math.min(0.04, baseChroma * 0.2))
|
|
255
|
+
};
|
|
256
|
+
return chromaMap[purpose];
|
|
257
|
+
};
|
|
258
|
+
var harmonyLightDarkTokens = (sourceColor) => {
|
|
259
|
+
const baseColor = sourceColor;
|
|
260
|
+
const baseOklch = baseColor.to("oklch");
|
|
261
|
+
const baseHue = Number.isNaN(baseOklch.h) ? 240 : baseOklch.h;
|
|
262
|
+
const baseChroma = Math.max(baseOklch.c, 0.1);
|
|
263
|
+
const baseLightness = baseOklch.l;
|
|
264
|
+
const primaryChroma = generateOptimalChroma(baseChroma, "primary");
|
|
265
|
+
const primaryLightLightness = optimizeLightnessForContrast(
|
|
266
|
+
baseLightness,
|
|
267
|
+
primaryChroma,
|
|
268
|
+
true
|
|
269
|
+
);
|
|
270
|
+
const primaryDarkLightness = optimizeLightnessForContrast(
|
|
271
|
+
baseLightness,
|
|
272
|
+
primaryChroma,
|
|
273
|
+
false
|
|
274
|
+
);
|
|
275
|
+
let lightPrimary = new import_colorjs.default("oklch", [
|
|
276
|
+
primaryLightLightness,
|
|
277
|
+
primaryChroma,
|
|
278
|
+
baseHue
|
|
279
|
+
]);
|
|
280
|
+
let darkPrimary = new import_colorjs.default("oklch", [
|
|
281
|
+
primaryDarkLightness,
|
|
282
|
+
primaryChroma,
|
|
283
|
+
baseHue
|
|
284
|
+
]);
|
|
285
|
+
if (lightPrimary.to("oklch").l > 0.8 || lightPrimary.to("oklch").c < 0.08) {
|
|
286
|
+
lightPrimary = new import_colorjs.default("oklch", [0.5, 0.2, 240]);
|
|
287
|
+
darkPrimary = new import_colorjs.default("oklch", [0.7, 0.2, 240]);
|
|
288
|
+
}
|
|
289
|
+
const secondaryHue = generateHarmoniousHue(baseHue, "analogous", 1);
|
|
290
|
+
const secondaryChroma = generateOptimalChroma(baseChroma, "secondary");
|
|
291
|
+
const lightSecondary = new import_colorjs.default("oklch", [
|
|
292
|
+
optimizeLightnessForContrast(baseLightness, secondaryChroma, true),
|
|
293
|
+
secondaryChroma,
|
|
294
|
+
secondaryHue
|
|
295
|
+
]);
|
|
296
|
+
const darkSecondary = new import_colorjs.default("oklch", [
|
|
297
|
+
optimizeLightnessForContrast(baseLightness, secondaryChroma, false),
|
|
298
|
+
secondaryChroma,
|
|
299
|
+
secondaryHue
|
|
300
|
+
]);
|
|
301
|
+
const tertiaryHue = generateHarmoniousHue(baseHue, "analogous", -1);
|
|
302
|
+
const tertiaryChroma = generateOptimalChroma(baseChroma, "tertiary");
|
|
303
|
+
const lightTertiary = new import_colorjs.default("oklch", [
|
|
304
|
+
optimizeLightnessForContrast(baseLightness, tertiaryChroma, true),
|
|
305
|
+
tertiaryChroma,
|
|
306
|
+
tertiaryHue
|
|
307
|
+
]);
|
|
308
|
+
const darkTertiary = new import_colorjs.default("oklch", [
|
|
309
|
+
optimizeLightnessForContrast(baseLightness, tertiaryChroma, false),
|
|
310
|
+
tertiaryChroma,
|
|
311
|
+
tertiaryHue
|
|
312
|
+
]);
|
|
313
|
+
const errorChroma = Math.max(0.18, Math.min(0.35, baseChroma));
|
|
314
|
+
const lightError = new import_colorjs.default("oklch", [0.55, errorChroma, 25]);
|
|
315
|
+
const darkError = new import_colorjs.default("oklch", [0.75, errorChroma, 25]);
|
|
316
|
+
const neutralChroma = generateOptimalChroma(baseChroma, "neutral");
|
|
317
|
+
const lightBackground = new import_colorjs.default("oklch", [
|
|
318
|
+
0.99,
|
|
319
|
+
neutralChroma * 0.5,
|
|
320
|
+
baseHue
|
|
321
|
+
]);
|
|
322
|
+
const darkBackground = new import_colorjs.default("oklch", [
|
|
323
|
+
0.08,
|
|
324
|
+
neutralChroma * 1.5,
|
|
325
|
+
baseHue
|
|
326
|
+
]);
|
|
327
|
+
const lightSurface = new import_colorjs.default("oklch", [0.98, neutralChroma * 0.8, baseHue]);
|
|
328
|
+
const darkSurface = new import_colorjs.default("oklch", [0.11, neutralChroma * 1.2, baseHue]);
|
|
329
|
+
const lightPrimaryContainer = new import_colorjs.default("oklch", [
|
|
330
|
+
0.95,
|
|
331
|
+
primaryChroma * 0.3,
|
|
332
|
+
baseHue
|
|
333
|
+
]);
|
|
334
|
+
const darkPrimaryContainer = new import_colorjs.default("oklch", [
|
|
335
|
+
0.2,
|
|
336
|
+
primaryChroma * 0.8,
|
|
337
|
+
baseHue
|
|
338
|
+
]);
|
|
339
|
+
const lightSecondaryContainer = new import_colorjs.default("oklch", [
|
|
340
|
+
0.94,
|
|
341
|
+
secondaryChroma * 0.25,
|
|
342
|
+
secondaryHue
|
|
343
|
+
]);
|
|
344
|
+
const darkSecondaryContainer = new import_colorjs.default("oklch", [
|
|
345
|
+
0.18,
|
|
346
|
+
secondaryChroma * 0.75,
|
|
347
|
+
secondaryHue
|
|
348
|
+
]);
|
|
349
|
+
const lightTertiaryContainer = new import_colorjs.default("oklch", [
|
|
350
|
+
0.93,
|
|
351
|
+
tertiaryChroma * 0.2,
|
|
352
|
+
tertiaryHue
|
|
353
|
+
]);
|
|
354
|
+
const darkTertiaryContainer = new import_colorjs.default("oklch", [
|
|
355
|
+
0.16,
|
|
356
|
+
tertiaryChroma * 0.7,
|
|
357
|
+
tertiaryHue
|
|
358
|
+
]);
|
|
359
|
+
const lightErrorContainer = new import_colorjs.default("oklch", [
|
|
360
|
+
0.96,
|
|
361
|
+
errorChroma * 0.15,
|
|
362
|
+
25
|
|
363
|
+
]);
|
|
364
|
+
const darkErrorContainer = new import_colorjs.default("oklch", [0.22, errorChroma * 0.6, 25]);
|
|
365
|
+
const lightSurfaceVariant = new import_colorjs.default("oklch", [
|
|
366
|
+
0.96,
|
|
367
|
+
neutralChroma * 1.2,
|
|
368
|
+
baseHue
|
|
369
|
+
]);
|
|
370
|
+
const darkSurfaceVariant = new import_colorjs.default("oklch", [
|
|
371
|
+
0.18,
|
|
372
|
+
neutralChroma * 2,
|
|
373
|
+
baseHue
|
|
374
|
+
]);
|
|
375
|
+
const lightOutline = new import_colorjs.default("oklch", [0.72, neutralChroma * 3, baseHue]);
|
|
376
|
+
const darkOutline = new import_colorjs.default("oklch", [0.68, neutralChroma * 3, baseHue]);
|
|
377
|
+
const lightOutlineVariant = new import_colorjs.default("oklch", [
|
|
378
|
+
0.88,
|
|
379
|
+
neutralChroma * 2,
|
|
380
|
+
baseHue
|
|
381
|
+
]);
|
|
382
|
+
const darkOutlineVariant = new import_colorjs.default("oklch", [
|
|
383
|
+
0.35,
|
|
384
|
+
neutralChroma * 2,
|
|
385
|
+
baseHue
|
|
386
|
+
]);
|
|
387
|
+
const lightInverseSurface = new import_colorjs.default("oklch", [
|
|
388
|
+
0.15,
|
|
389
|
+
neutralChroma * 1.5,
|
|
390
|
+
baseHue
|
|
391
|
+
]);
|
|
392
|
+
const darkInverseSurface = new import_colorjs.default("oklch", [
|
|
393
|
+
0.92,
|
|
394
|
+
neutralChroma * 0.8,
|
|
395
|
+
baseHue
|
|
396
|
+
]);
|
|
397
|
+
const lightInversePrimary = new import_colorjs.default("oklch", [
|
|
398
|
+
0.85,
|
|
399
|
+
primaryChroma * 0.6,
|
|
400
|
+
baseHue
|
|
401
|
+
]);
|
|
402
|
+
const darkInversePrimary = new import_colorjs.default("oklch", [
|
|
403
|
+
0.45,
|
|
404
|
+
primaryChroma * 0.9,
|
|
405
|
+
baseHue
|
|
406
|
+
]);
|
|
407
|
+
const generateContrastingOnColor = (lightBg, darkBg) => {
|
|
408
|
+
const lightBgL = lightBg.to("oklch").l;
|
|
409
|
+
const darkBgL = darkBg.to("oklch").l;
|
|
410
|
+
const lightForeground = lightBgL > 0.6 ? "#000000" : "#ffffff";
|
|
411
|
+
const darkForeground = darkBgL > 0.6 ? "#000000" : "#ffffff";
|
|
412
|
+
return `light-dark(${lightForeground}, ${darkForeground})`;
|
|
413
|
+
};
|
|
414
|
+
return {
|
|
415
|
+
// Primary colors - the main brand color with enhanced contrast
|
|
416
|
+
primary: transformColorToToken(
|
|
417
|
+
"primary",
|
|
418
|
+
`light-dark(${lightPrimary.toString({ format: "hex" })}, ${darkPrimary.toString({ format: "hex" })})`
|
|
419
|
+
),
|
|
420
|
+
onPrimary: transformColorToToken(
|
|
421
|
+
"onPrimary",
|
|
422
|
+
generateContrastingOnColor(lightPrimary, darkPrimary)
|
|
423
|
+
),
|
|
424
|
+
primaryContainer: transformColorToToken(
|
|
425
|
+
"primaryContainer",
|
|
426
|
+
`light-dark(${lightPrimaryContainer.toString({ format: "hex" })}, ${darkPrimaryContainer.toString({ format: "hex" })})`
|
|
427
|
+
),
|
|
428
|
+
onPrimaryContainer: transformColorToToken(
|
|
429
|
+
"onPrimaryContainer",
|
|
430
|
+
generateContrastingOnColor(lightPrimaryContainer, darkPrimaryContainer)
|
|
431
|
+
),
|
|
432
|
+
// Secondary colors - harmonious supporting accent
|
|
433
|
+
secondary: transformColorToToken(
|
|
434
|
+
"secondary",
|
|
435
|
+
`light-dark(${lightSecondary.toString({ format: "hex" })}, ${darkSecondary.toString({ format: "hex" })})`
|
|
436
|
+
),
|
|
437
|
+
onSecondary: transformColorToToken(
|
|
438
|
+
"onSecondary",
|
|
439
|
+
generateContrastingOnColor(lightSecondary, darkSecondary)
|
|
440
|
+
),
|
|
441
|
+
secondaryContainer: transformColorToToken(
|
|
442
|
+
"secondaryContainer",
|
|
443
|
+
`light-dark(${lightSecondaryContainer.toString({ format: "hex" })}, ${darkSecondaryContainer.toString({ format: "hex" })})`
|
|
444
|
+
),
|
|
445
|
+
onSecondaryContainer: transformColorToToken(
|
|
446
|
+
"onSecondaryContainer",
|
|
447
|
+
generateContrastingOnColor(
|
|
448
|
+
lightSecondaryContainer,
|
|
449
|
+
darkSecondaryContainer
|
|
450
|
+
)
|
|
451
|
+
),
|
|
452
|
+
// Tertiary colors - split-complementary accent
|
|
453
|
+
tertiary: transformColorToToken(
|
|
454
|
+
"tertiary",
|
|
455
|
+
`light-dark(${lightTertiary.toString({ format: "hex" })}, ${darkTertiary.toString({ format: "hex" })})`
|
|
456
|
+
),
|
|
457
|
+
onTertiary: transformColorToToken(
|
|
458
|
+
"onTertiary",
|
|
459
|
+
generateContrastingOnColor(lightTertiary, darkTertiary)
|
|
460
|
+
),
|
|
461
|
+
tertiaryContainer: transformColorToToken(
|
|
462
|
+
"tertiaryContainer",
|
|
463
|
+
`light-dark(${lightTertiaryContainer.toString({ format: "hex" })}, ${darkTertiaryContainer.toString({ format: "hex" })})`
|
|
464
|
+
),
|
|
465
|
+
onTertiaryContainer: transformColorToToken(
|
|
466
|
+
"onTertiaryContainer",
|
|
467
|
+
generateContrastingOnColor(lightTertiaryContainer, darkTertiaryContainer)
|
|
468
|
+
),
|
|
469
|
+
// Error colors - accessibility optimized
|
|
470
|
+
error: transformColorToToken(
|
|
471
|
+
"error",
|
|
472
|
+
`light-dark(${lightError.toString({ format: "hex" })}, ${darkError.toString({ format: "hex" })})`
|
|
473
|
+
),
|
|
474
|
+
onError: transformColorToToken(
|
|
475
|
+
"onError",
|
|
476
|
+
generateContrastingOnColor(lightError, darkError)
|
|
477
|
+
),
|
|
478
|
+
errorContainer: transformColorToToken(
|
|
479
|
+
"errorContainer",
|
|
480
|
+
`light-dark(${lightErrorContainer.toString({ format: "hex" })}, ${darkErrorContainer.toString({ format: "hex" })})`
|
|
481
|
+
),
|
|
482
|
+
onErrorContainer: transformColorToToken(
|
|
483
|
+
"onErrorContainer",
|
|
484
|
+
generateContrastingOnColor(lightErrorContainer, darkErrorContainer)
|
|
485
|
+
),
|
|
486
|
+
// Background and surface colors with subtle tinting
|
|
487
|
+
background: transformColorToToken(
|
|
488
|
+
"background",
|
|
489
|
+
`light-dark(${lightBackground.toString({ format: "hex" })}, ${darkBackground.toString({ format: "hex" })})`
|
|
490
|
+
),
|
|
491
|
+
onBackground: transformColorToToken(
|
|
492
|
+
"onBackground",
|
|
493
|
+
generateContrastingOnColor(lightBackground, darkBackground)
|
|
494
|
+
),
|
|
495
|
+
surface: transformColorToToken(
|
|
496
|
+
"surface",
|
|
497
|
+
`light-dark(${lightSurface.toString({ format: "hex" })}, ${darkSurface.toString({ format: "hex" })})`
|
|
498
|
+
),
|
|
499
|
+
onSurface: transformColorToToken(
|
|
500
|
+
"onSurface",
|
|
501
|
+
generateContrastingOnColor(lightSurface, darkSurface)
|
|
502
|
+
),
|
|
503
|
+
surfaceVariant: transformColorToToken(
|
|
504
|
+
"surfaceVariant",
|
|
505
|
+
`light-dark(${lightSurfaceVariant.toString({ format: "hex" })}, ${darkSurfaceVariant.toString({ format: "hex" })})`
|
|
506
|
+
),
|
|
507
|
+
onSurfaceVariant: transformColorToToken(
|
|
508
|
+
"onSurfaceVariant",
|
|
509
|
+
generateContrastingOnColor(lightSurfaceVariant, darkSurfaceVariant)
|
|
510
|
+
),
|
|
511
|
+
// Outline colors with enhanced visibility
|
|
512
|
+
outline: transformColorToToken(
|
|
513
|
+
"outline",
|
|
514
|
+
`light-dark(${lightOutline.toString({ format: "hex" })}, ${darkOutline.toString({ format: "hex" })})`
|
|
515
|
+
),
|
|
516
|
+
outlineVariant: transformColorToToken(
|
|
517
|
+
"outlineVariant",
|
|
518
|
+
`light-dark(${lightOutlineVariant.toString({ format: "hex" })}, ${darkOutlineVariant.toString({ format: "hex" })})`
|
|
519
|
+
),
|
|
520
|
+
// Shadow and scrim - optimized for depth perception
|
|
521
|
+
shadow: transformColorToToken(
|
|
522
|
+
"shadow",
|
|
523
|
+
"light-dark(oklch(0 0 0 / 0.2), oklch(0 0 0 / 0.4))"
|
|
524
|
+
),
|
|
525
|
+
scrim: transformColorToToken(
|
|
526
|
+
"scrim",
|
|
527
|
+
"light-dark(oklch(0 0 0 / 0.4), oklch(0 0 0 / 0.6))"
|
|
528
|
+
),
|
|
529
|
+
// Inverse colors with proper contrast
|
|
530
|
+
inverseSurface: transformColorToToken(
|
|
531
|
+
"inverseSurface",
|
|
532
|
+
`light-dark(${lightInverseSurface.toString({ format: "hex" })}, ${darkInverseSurface.toString({ format: "hex" })})`
|
|
533
|
+
),
|
|
534
|
+
inverseOnSurface: transformColorToToken(
|
|
535
|
+
"inverseOnSurface",
|
|
536
|
+
generateContrastingOnColor(lightInverseSurface, darkInverseSurface)
|
|
537
|
+
),
|
|
538
|
+
inversePrimary: transformColorToToken(
|
|
539
|
+
"inversePrimary",
|
|
540
|
+
`light-dark(${lightInversePrimary.toString({ format: "hex" })}, ${darkInversePrimary.toString({ format: "hex" })})`
|
|
541
|
+
)
|
|
542
|
+
};
|
|
543
|
+
};
|
|
544
|
+
var harmonyPrimaryPaletteTokens = (sourceColor) => {
|
|
545
|
+
const tones = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 100];
|
|
546
|
+
const sourceOklch = sourceColor.to("oklch");
|
|
547
|
+
const baseHue = Number.isNaN(sourceOklch.h) ? 240 : sourceOklch.h;
|
|
548
|
+
const baseChroma = Math.max(sourceOklch.c, 0.1);
|
|
549
|
+
const generateToneColor = (tone) => {
|
|
550
|
+
let lightness;
|
|
551
|
+
let chroma;
|
|
552
|
+
if (tone === 0) {
|
|
553
|
+
lightness = 0;
|
|
554
|
+
chroma = 0;
|
|
555
|
+
} else if (tone === 100) {
|
|
556
|
+
lightness = 1;
|
|
557
|
+
chroma = 0;
|
|
558
|
+
} else {
|
|
559
|
+
lightness = (tone / 100) ** 0.8;
|
|
560
|
+
const chromaMultiplier = tone < 20 || tone > 90 ? 0.3 + 0.7 * Math.sin(tone / 100 * Math.PI) : 0.8 + 0.2 * Math.sin(tone / 100 * Math.PI);
|
|
561
|
+
chroma = baseChroma * chromaMultiplier;
|
|
562
|
+
}
|
|
563
|
+
const color = new import_colorjs.default("oklch", [lightness, chroma, baseHue]);
|
|
564
|
+
return color.toString({ format: "hex" });
|
|
565
|
+
};
|
|
566
|
+
return Object.fromEntries(
|
|
567
|
+
tones.map((tone) => [
|
|
568
|
+
`primary${tone}`,
|
|
569
|
+
transformColorToToken(`primary${tone}`, generateToneColor(tone))
|
|
570
|
+
])
|
|
571
|
+
);
|
|
572
|
+
};
|
|
573
|
+
var harmonyBlackAndWhiteTokens = (sourceColor) => {
|
|
574
|
+
let baseHue = 0;
|
|
575
|
+
if (sourceColor) {
|
|
576
|
+
const sourceOklch = sourceColor.to("oklch");
|
|
577
|
+
baseHue = Number.isNaN(sourceOklch.h) ? 0 : sourceOklch.h;
|
|
578
|
+
}
|
|
579
|
+
const enhancedWhite = new import_colorjs.default("oklch", [0.99, 2e-3, baseHue]);
|
|
580
|
+
const enhancedBlack = new import_colorjs.default("oklch", [0.05, 5e-3, baseHue]);
|
|
581
|
+
return {
|
|
582
|
+
white: {
|
|
583
|
+
name: "white",
|
|
584
|
+
value: transformHexToOkLch(
|
|
585
|
+
`light-dark(${enhancedWhite.toString({ format: "hex" })}, ${enhancedWhite.toString({ format: "hex" })})`
|
|
586
|
+
)
|
|
587
|
+
},
|
|
588
|
+
black: {
|
|
589
|
+
name: "black",
|
|
590
|
+
value: transformHexToOkLch(
|
|
591
|
+
`light-dark(${enhancedBlack.toString({ format: "hex" })}, ${enhancedBlack.toString({ format: "hex" })})`
|
|
592
|
+
)
|
|
593
|
+
}
|
|
594
|
+
};
|
|
595
|
+
};
|
|
596
|
+
|
|
597
|
+
// src/lib/css/strategy/harmony/index.ts
|
|
598
|
+
var harmonyColorStrategy = (color) => {
|
|
599
|
+
const sourceColor = theme(color);
|
|
600
|
+
return {
|
|
601
|
+
primaryPalette: harmonyPrimaryPaletteTokens(sourceColor),
|
|
602
|
+
lightDark: harmonyLightDarkTokens(sourceColor),
|
|
603
|
+
blackAndWhite: harmonyBlackAndWhiteTokens(sourceColor)
|
|
604
|
+
};
|
|
605
|
+
};
|
|
606
|
+
|
|
607
|
+
// src/lib/css/strategy/material/material-colors.ts
|
|
608
|
+
var import_material_color_utilities = require("@material/material-color-utilities");
|
|
609
|
+
var import_colorjs2 = __toESM(require("colorjs.io"), 1);
|
|
610
|
+
var theme2 = (color) => (0, import_material_color_utilities.themeFromSourceColor)((0, import_material_color_utilities.argbFromHex)(color));
|
|
611
|
+
var transformHexToOkLch2 = (color) => {
|
|
612
|
+
const oklchColor = new import_colorjs2.default(color).to("oklch");
|
|
613
|
+
return oklchColor.toString({ precision: 2 });
|
|
614
|
+
};
|
|
615
|
+
var transformColorToToken2 = (name, color) => {
|
|
616
|
+
return {
|
|
617
|
+
name: `color-${name}`,
|
|
618
|
+
value: transformHexToOkLch2((0, import_material_color_utilities.hexFromArgb)(color))
|
|
619
|
+
};
|
|
620
|
+
};
|
|
621
|
+
var lightDarkTokens = (theme3) => {
|
|
622
|
+
const light = Object.fromEntries(
|
|
623
|
+
Object.entries(theme3.schemes.light.toJSON()).map(([key, value]) => [
|
|
624
|
+
key,
|
|
625
|
+
transformHexToOkLch2((0, import_material_color_utilities.hexFromArgb)(value))
|
|
626
|
+
])
|
|
627
|
+
);
|
|
628
|
+
const dark = Object.fromEntries(
|
|
629
|
+
Object.entries(theme3.schemes.dark.toJSON()).map(([key, value]) => [
|
|
630
|
+
key,
|
|
631
|
+
transformHexToOkLch2((0, import_material_color_utilities.hexFromArgb)(value))
|
|
632
|
+
])
|
|
633
|
+
);
|
|
634
|
+
return Object.entries(light).reduce((acc, [colorName, lightToken]) => {
|
|
635
|
+
const darkToken = dark[colorName];
|
|
636
|
+
if (darkToken) {
|
|
637
|
+
acc[colorName] = {
|
|
638
|
+
name: `color-${colorName}`,
|
|
639
|
+
value: `light-dark(${lightToken}, ${darkToken})`
|
|
640
|
+
};
|
|
641
|
+
}
|
|
642
|
+
return acc;
|
|
643
|
+
}, {});
|
|
644
|
+
};
|
|
645
|
+
var primaryPaletteTokens = (theme3) => {
|
|
646
|
+
const tones = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 100];
|
|
647
|
+
return Object.fromEntries(
|
|
648
|
+
tones.map((tone) => [
|
|
649
|
+
`primary${tone}`,
|
|
650
|
+
transformColorToToken2(
|
|
651
|
+
`primary${tone}`,
|
|
652
|
+
theme3.palettes.primary.tone(tone)
|
|
653
|
+
)
|
|
654
|
+
])
|
|
655
|
+
);
|
|
656
|
+
};
|
|
657
|
+
var blackAndWhiteTokens = () => {
|
|
658
|
+
return {
|
|
659
|
+
white: {
|
|
660
|
+
name: "white",
|
|
661
|
+
value: "#fff"
|
|
662
|
+
},
|
|
663
|
+
black: {
|
|
664
|
+
name: "black",
|
|
665
|
+
value: "#000"
|
|
666
|
+
}
|
|
667
|
+
};
|
|
668
|
+
};
|
|
669
|
+
|
|
670
|
+
// src/lib/css/strategy/material/index.ts
|
|
671
|
+
var materialColorStrategy = (color) => {
|
|
672
|
+
const generatedTheme = theme2(color);
|
|
673
|
+
return {
|
|
674
|
+
primaryPalette: primaryPaletteTokens(generatedTheme),
|
|
675
|
+
lightDark: lightDarkTokens(generatedTheme),
|
|
676
|
+
blackAndWhite: blackAndWhiteTokens()
|
|
677
|
+
};
|
|
678
|
+
};
|
|
679
|
+
|
|
680
|
+
// src/lib/css/strategy/index.ts
|
|
681
|
+
var colorStrategy = (strategy, color) => {
|
|
682
|
+
switch (strategy) {
|
|
683
|
+
case "material": {
|
|
684
|
+
return materialColorStrategy(color);
|
|
685
|
+
}
|
|
686
|
+
case "harmony": {
|
|
687
|
+
return harmonyColorStrategy(color);
|
|
688
|
+
}
|
|
689
|
+
default:
|
|
690
|
+
throw new Error(`Unknown color strategy: ${strategy}`);
|
|
691
|
+
}
|
|
692
|
+
};
|
|
693
|
+
|
|
245
694
|
// src/lib/css/index.ts
|
|
246
695
|
var transformTokenToCssObject = (token) => {
|
|
247
696
|
const name = `--${transformCase(token.name, "KEBAB" /* KEBAB */)}`;
|
|
@@ -262,18 +711,8 @@ var buildForCategory = (category, tokens) => {
|
|
|
262
711
|
}
|
|
263
712
|
return output;
|
|
264
713
|
};
|
|
265
|
-
var
|
|
266
|
-
|
|
267
|
-
name: "white",
|
|
268
|
-
value: "#fff"
|
|
269
|
-
},
|
|
270
|
-
{
|
|
271
|
-
name: "black",
|
|
272
|
-
value: "#000"
|
|
273
|
-
}
|
|
274
|
-
];
|
|
275
|
-
var buildCategoryDesignTokens = (color) => {
|
|
276
|
-
const generatedTheme = theme(color);
|
|
714
|
+
var buildCategoryDesignTokens = (color, strategy = "harmony") => {
|
|
715
|
+
const strategyResult = colorStrategy(strategy, color);
|
|
277
716
|
return [
|
|
278
717
|
{
|
|
279
718
|
category: "Reset Colors",
|
|
@@ -286,11 +725,13 @@ var buildCategoryDesignTokens = (color) => {
|
|
|
286
725
|
},
|
|
287
726
|
{
|
|
288
727
|
category: "Primary Colors",
|
|
289
|
-
tokens:
|
|
728
|
+
tokens: Object.values(strategyResult.primaryPalette).concat(
|
|
729
|
+
Object.values(strategyResult.blackAndWhite)
|
|
730
|
+
)
|
|
290
731
|
},
|
|
291
732
|
{
|
|
292
|
-
category: "
|
|
293
|
-
tokens:
|
|
733
|
+
category: "Palette Colors",
|
|
734
|
+
tokens: Object.values(strategyResult.lightDark)
|
|
294
735
|
},
|
|
295
736
|
{
|
|
296
737
|
category: "Scale",
|
|
@@ -335,9 +776,10 @@ var buildCategoryDesignTokens = (color) => {
|
|
|
335
776
|
}
|
|
336
777
|
];
|
|
337
778
|
};
|
|
338
|
-
var runCss = (color) => {
|
|
339
|
-
const categoryTokens = buildCategoryDesignTokens(color);
|
|
779
|
+
var runCss = (color, strategy = "harmony") => {
|
|
780
|
+
const categoryTokens = buildCategoryDesignTokens(color, strategy);
|
|
340
781
|
const output = [];
|
|
782
|
+
output.push(`/* Aakaar Design Tokens: Source: ${color} */`);
|
|
341
783
|
output.push("@theme {");
|
|
342
784
|
for (const category of categoryTokens) {
|
|
343
785
|
output.push(...buildForCategory(category.category, category.tokens));
|
package/dist/index.d.cts
CHANGED
|
@@ -24,10 +24,65 @@ type CategoryDesignTokens = {
|
|
|
24
24
|
category: string;
|
|
25
25
|
tokens: DesignToken[];
|
|
26
26
|
};
|
|
27
|
+
type PrimaryPalette = {
|
|
28
|
+
primary0: DesignToken;
|
|
29
|
+
primary10: DesignToken;
|
|
30
|
+
primary20: DesignToken;
|
|
31
|
+
primary30: DesignToken;
|
|
32
|
+
primary40: DesignToken;
|
|
33
|
+
primary50: DesignToken;
|
|
34
|
+
primary60: DesignToken;
|
|
35
|
+
primary70: DesignToken;
|
|
36
|
+
primary80: DesignToken;
|
|
37
|
+
primary90: DesignToken;
|
|
38
|
+
primary95: DesignToken;
|
|
39
|
+
primary100: DesignToken;
|
|
40
|
+
};
|
|
41
|
+
type AakaarColorScheme = {
|
|
42
|
+
primary: DesignToken;
|
|
43
|
+
onPrimary: DesignToken;
|
|
44
|
+
primaryContainer: DesignToken;
|
|
45
|
+
onPrimaryContainer: DesignToken;
|
|
46
|
+
secondary: DesignToken;
|
|
47
|
+
onSecondary: DesignToken;
|
|
48
|
+
secondaryContainer: DesignToken;
|
|
49
|
+
onSecondaryContainer: DesignToken;
|
|
50
|
+
tertiary: DesignToken;
|
|
51
|
+
onTertiary: DesignToken;
|
|
52
|
+
tertiaryContainer: DesignToken;
|
|
53
|
+
onTertiaryContainer: DesignToken;
|
|
54
|
+
error: DesignToken;
|
|
55
|
+
onError: DesignToken;
|
|
56
|
+
errorContainer: DesignToken;
|
|
57
|
+
onErrorContainer: DesignToken;
|
|
58
|
+
background: DesignToken;
|
|
59
|
+
onBackground: DesignToken;
|
|
60
|
+
surface: DesignToken;
|
|
61
|
+
onSurface: DesignToken;
|
|
62
|
+
surfaceVariant: DesignToken;
|
|
63
|
+
onSurfaceVariant: DesignToken;
|
|
64
|
+
outline: DesignToken;
|
|
65
|
+
outlineVariant: DesignToken;
|
|
66
|
+
shadow: DesignToken;
|
|
67
|
+
scrim: DesignToken;
|
|
68
|
+
inverseSurface: DesignToken;
|
|
69
|
+
inverseOnSurface: DesignToken;
|
|
70
|
+
inversePrimary: DesignToken;
|
|
71
|
+
};
|
|
72
|
+
type BlackAndWhiteScheme = {
|
|
73
|
+
white: DesignToken;
|
|
74
|
+
black: DesignToken;
|
|
75
|
+
};
|
|
76
|
+
type ColorStrategyOutput = {
|
|
77
|
+
primaryPalette: PrimaryPalette;
|
|
78
|
+
lightDark: AakaarColorScheme;
|
|
79
|
+
blackAndWhite: BlackAndWhiteScheme;
|
|
80
|
+
};
|
|
81
|
+
type ColorStrategy = "material" | "harmony";
|
|
27
82
|
|
|
28
83
|
declare const transformTokenToCssObject: (token: DesignToken) => CssObject;
|
|
29
84
|
declare const transformTokenToCSSVariable: (colorToken: DesignToken) => string;
|
|
30
|
-
declare const buildCategoryDesignTokens: (color: string) => CategoryDesignTokens[];
|
|
31
|
-
declare const runCss: (color: string) => string;
|
|
85
|
+
declare const buildCategoryDesignTokens: (color: string, strategy?: ColorStrategy) => CategoryDesignTokens[];
|
|
86
|
+
declare const runCss: (color: string, strategy?: ColorStrategy) => string;
|
|
32
87
|
|
|
33
|
-
export { type CategoryDesignTokens, type CssObject, type DesignToken, Size, VariableCase, buildCategoryDesignTokens, runCss, transformTokenToCSSVariable, transformTokenToCssObject };
|
|
88
|
+
export { type AakaarColorScheme, type BlackAndWhiteScheme, type CategoryDesignTokens, type ColorStrategy, type ColorStrategyOutput, type CssObject, type DesignToken, type PrimaryPalette, Size, VariableCase, buildCategoryDesignTokens, runCss, transformTokenToCSSVariable, transformTokenToCssObject };
|