@descope/web-components-ui 1.0.274 → 1.0.275
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +81 -15
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +80 -24
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/helpers/themeHelpers/colorsHelpers.js +77 -11
- package/src/theme/globals.js +4 -5
package/dist/cjs/index.cjs.js
CHANGED
@@ -358,27 +358,93 @@ const createHelperVars = (theme, prefix) => {
|
|
358
358
|
return [res.theme, res.useVars, res.vars];
|
359
359
|
};
|
360
360
|
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
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'),
|
376
|
+
.mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
|
368
377
|
.saturate(1)
|
369
378
|
.hex();
|
370
379
|
};
|
371
380
|
|
372
|
-
const
|
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 (color.dark) return color.dark;
|
396
|
+
|
397
|
+
if (theme === 'dark') {
|
398
|
+
return isNearWhite(color)
|
399
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
400
|
+
: lighten(color, colorGaps.darkLight);
|
401
|
+
}
|
402
|
+
|
403
|
+
return isNearBlack(color)
|
404
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
405
|
+
: darken(color, colorGaps.darkLight);
|
406
|
+
};
|
407
|
+
|
408
|
+
const generateLightColor = (color, theme) => {
|
409
|
+
if (color.light) return color.light;
|
410
|
+
|
411
|
+
if (theme === 'dark') {
|
412
|
+
return isNearBlack(color)
|
413
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
414
|
+
: darken(color, colorGaps.darkLight);
|
415
|
+
}
|
416
|
+
|
417
|
+
return isNearWhite(color)
|
418
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
419
|
+
: lighten(color, colorGaps.darkLight);
|
420
|
+
};
|
421
|
+
|
422
|
+
const generateHighlightColor = (color, theme) => {
|
423
|
+
if (color.highlight) return color.highlight;
|
424
|
+
|
425
|
+
if (theme === 'dark') {
|
426
|
+
return isNearBlack(color)
|
427
|
+
? lighten(color, colorGaps.edgeColor.highlight)
|
428
|
+
: darken(color, colorGaps.highlight);
|
429
|
+
}
|
430
|
+
|
431
|
+
return isNearWhite(color)
|
432
|
+
? darken(color, colorGaps.edgeColor.highlight)
|
433
|
+
: lighten(color, colorGaps.highlight);
|
434
|
+
};
|
435
|
+
|
436
|
+
const genColor = (color, theme) => {
|
373
437
|
const mainColor = new Color(color.main || color);
|
374
438
|
|
375
|
-
|
439
|
+
const res = {
|
376
440
|
main: mainColor.hex(),
|
377
|
-
dark:
|
378
|
-
light:
|
379
|
-
highlight:
|
380
|
-
contrast: color.contrast ||
|
441
|
+
dark: generateDarkColor(mainColor, theme),
|
442
|
+
light: generateLightColor(mainColor, theme),
|
443
|
+
highlight: generateHighlightColor(mainColor, theme),
|
444
|
+
contrast: color.contrast || contrast(mainColor),
|
381
445
|
};
|
446
|
+
|
447
|
+
return res;
|
382
448
|
};
|
383
449
|
|
384
450
|
const genColors = (colors) => {
|
@@ -393,10 +459,10 @@ const genColors = (colors) => {
|
|
393
459
|
|
394
460
|
const direction = 'ltr';
|
395
461
|
|
396
|
-
const colors =
|
462
|
+
const colors = {
|
397
463
|
surface: {
|
398
|
-
main: '#ffffff',
|
399
464
|
dark: '#636c74',
|
465
|
+
main: '#ffffff',
|
400
466
|
light: '#cfd3d7',
|
401
467
|
highlight: '#f4f5f6',
|
402
468
|
contrast: '#181a1c',
|
@@ -409,8 +475,8 @@ const colors = genColors({
|
|
409
475
|
contrast: '#ffffff',
|
410
476
|
},
|
411
477
|
secondary: {
|
412
|
-
main: '#802ed6',
|
413
478
|
dark: '#6410bc',
|
479
|
+
main: '#802ed6',
|
414
480
|
light: '#be89f5',
|
415
481
|
highlight: '#ede7f6',
|
416
482
|
contrast: '#ffffff',
|
@@ -429,7 +495,7 @@ const colors = genColors({
|
|
429
495
|
highlight: '#fef1f1',
|
430
496
|
contrast: '#ffffff',
|
431
497
|
},
|
432
|
-
}
|
498
|
+
};
|
433
499
|
|
434
500
|
const fonts = {
|
435
501
|
font1: {
|