@descope/web-components-ui 1.0.275 → 1.0.277
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +42 -93
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +51 -92
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4447.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-text-field/textFieldMappings.js +27 -12
- 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: {
|
@@ -2789,17 +2723,27 @@ var button$1 = /*#__PURE__*/Object.freeze({
|
|
2789
2723
|
vars: vars$x
|
2790
2724
|
});
|
2791
2725
|
|
2792
|
-
const {
|
2793
|
-
|
2794
|
-
|
2795
|
-
|
2796
|
-
|
2797
|
-
|
2798
|
-
|
2799
|
-
|
2800
|
-
|
2801
|
-
|
2802
|
-
|
2726
|
+
const {
|
2727
|
+
host: host$g,
|
2728
|
+
label: label$9,
|
2729
|
+
placeholder: placeholder$3,
|
2730
|
+
requiredIndicator: requiredIndicator$b,
|
2731
|
+
inputField: inputField$6,
|
2732
|
+
input,
|
2733
|
+
helperText: helperText$9,
|
2734
|
+
errorMessage: errorMessage$b,
|
2735
|
+
disabledPlaceholder,
|
2736
|
+
} = {
|
2737
|
+
host: { selector: () => ':host' },
|
2738
|
+
label: { selector: '::part(label)' },
|
2739
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
2740
|
+
placeholder: { selector: '> input:placeholder-shown' },
|
2741
|
+
disabledPlaceholder: { selector: '> input:disabled::placeholder' },
|
2742
|
+
inputField: { selector: '::part(input-field)' },
|
2743
|
+
input: { selector: 'input' },
|
2744
|
+
helperText: { selector: '::part(helper-text)' },
|
2745
|
+
errorMessage: { selector: '::part(error-message)' },
|
2746
|
+
};
|
2803
2747
|
|
2804
2748
|
var textFieldMappings = {
|
2805
2749
|
// we apply font-size also on the host so we can set its width with em
|
@@ -2815,6 +2759,8 @@ var textFieldMappings = {
|
|
2815
2759
|
labelTextColor: [
|
2816
2760
|
{ ...label$9, property: 'color' },
|
2817
2761
|
{ ...requiredIndicator$b, property: 'color' },
|
2762
|
+
{ ...label$9, property: '-webkit-text-fill-color' },
|
2763
|
+
{ ...requiredIndicator$b, property: '-webkit-text-fill-color' },
|
2818
2764
|
],
|
2819
2765
|
errorMessageTextColor: { ...errorMessage$b, property: 'color' },
|
2820
2766
|
|
@@ -2841,7 +2787,10 @@ var textFieldMappings = {
|
|
2841
2787
|
|
2842
2788
|
inputTextAlign: { ...input, property: 'text-align' },
|
2843
2789
|
|
2844
|
-
inputPlaceholderColor:
|
2790
|
+
inputPlaceholderColor: [
|
2791
|
+
{ ...placeholder$3, property: 'color' },
|
2792
|
+
{ ...disabledPlaceholder, property: '-webkit-text-fill-color' },
|
2793
|
+
],
|
2845
2794
|
};
|
2846
2795
|
|
2847
2796
|
const useHostExternalPadding = (cssVarList) => `
|