@descope/web-components-ui 1.0.287 → 1.0.288

Sign up to get free protection for your applications and to get access to all the features.
@@ -358,27 +358,87 @@ const createHelperVars = (theme, prefix) => {
358
358
  return [res.theme, res.useVars, res.vars];
359
359
  };
360
360
 
361
- // TODO: fix generated colors strategy
362
- const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
363
- const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
364
- const genContrast = (c, percentage = 0.9) => {
361
+ const colorGaps = {
362
+ darkLight: 0.4,
363
+ highlight: 0.8,
364
+ contrast: 1,
365
+ edgeColor: {
366
+ darkLight: 0.25,
367
+ highlight: 0.1,
368
+ },
369
+ };
370
+
371
+ const darken = (c, percentage) => c.darken(percentage).hex();
372
+
373
+ const contrast = (c) => {
365
374
  const isDark = c.isDark();
366
375
  return c
367
- .mix(Color(isDark ? 'white' : 'black'), percentage)
376
+ .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
368
377
  .saturate(1)
369
378
  .hex();
370
379
  };
371
380
 
372
- const genColor = (color) => {
381
+ const lighten = (c, percentage) => {
382
+ const isDark = c.lightness() < 0.5;
383
+
384
+ if (isDark) {
385
+ return c.lightness(percentage * 100).hex();
386
+ }
387
+
388
+ return c.lighten(percentage).hex();
389
+ };
390
+
391
+ const isNearBlack = (color) => color.luminosity() < 0.01;
392
+ const isNearWhite = (color) => color.luminosity() > 0.99;
393
+
394
+ const generateDarkColor = (color, theme) => {
395
+ if (theme === 'dark') {
396
+ return isNearWhite(color)
397
+ ? darken(color, colorGaps.edgeColor.darkLight)
398
+ : lighten(color, colorGaps.darkLight);
399
+ }
400
+
401
+ return isNearBlack(color)
402
+ ? lighten(color, colorGaps.edgeColor.darkLight)
403
+ : darken(color, colorGaps.darkLight);
404
+ };
405
+
406
+ const generateLightColor = (color, theme) => {
407
+ if (theme === 'dark') {
408
+ return isNearBlack(color)
409
+ ? lighten(color, colorGaps.edgeColor.darkLight)
410
+ : darken(color, colorGaps.darkLight);
411
+ }
412
+
413
+ return isNearWhite(color)
414
+ ? darken(color, colorGaps.edgeColor.darkLight)
415
+ : lighten(color, colorGaps.darkLight);
416
+ };
417
+
418
+ const generateHighlightColor = (color, theme) => {
419
+ if (theme === 'dark') {
420
+ return isNearBlack(color)
421
+ ? lighten(color, colorGaps.edgeColor.highlight)
422
+ : darken(color, colorGaps.highlight);
423
+ }
424
+
425
+ return isNearWhite(color)
426
+ ? darken(color, colorGaps.edgeColor.highlight)
427
+ : lighten(color, colorGaps.highlight);
428
+ };
429
+
430
+ const genColor = (color, theme) => {
373
431
  const mainColor = new Color(color.main || color);
374
432
 
375
- return {
433
+ const res = {
376
434
  main: mainColor.hex(),
377
- dark: color.dark || genDark(mainColor),
378
- light: color.light || genLight(mainColor),
379
- highlight: color.highlight || genLight(mainColor),
380
- contrast: color.contrast || genContrast(mainColor),
435
+ dark: color.dark || generateDarkColor(mainColor, theme),
436
+ light: color.light || generateLightColor(mainColor, theme),
437
+ highlight: color.highlight || generateHighlightColor(mainColor, theme),
438
+ contrast: color.contrast || contrast(mainColor),
381
439
  };
440
+
441
+ return res;
382
442
  };
383
443
 
384
444
  const genColors = (colors) => {