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