@descope/web-components-ui 1.0.287 → 1.0.288
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/cjs/index.cjs.js +71 -11
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +71 -11
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/helpers/themeHelpers/colorsHelpers.js +71 -11
package/dist/index.esm.js
CHANGED
@@ -9384,27 +9384,87 @@ const createHelperVars = (theme, prefix) => {
|
|
9384
9384
|
return [res.theme, res.useVars, res.vars];
|
9385
9385
|
};
|
9386
9386
|
|
9387
|
-
|
9388
|
-
|
9389
|
-
|
9390
|
-
|
9387
|
+
const colorGaps = {
|
9388
|
+
darkLight: 0.4,
|
9389
|
+
highlight: 0.8,
|
9390
|
+
contrast: 1,
|
9391
|
+
edgeColor: {
|
9392
|
+
darkLight: 0.25,
|
9393
|
+
highlight: 0.1,
|
9394
|
+
},
|
9395
|
+
};
|
9396
|
+
|
9397
|
+
const darken = (c, percentage) => c.darken(percentage).hex();
|
9398
|
+
|
9399
|
+
const contrast = (c) => {
|
9391
9400
|
const isDark = c.isDark();
|
9392
9401
|
return c
|
9393
|
-
.mix(Color(isDark ? 'white' : 'black'),
|
9402
|
+
.mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
|
9394
9403
|
.saturate(1)
|
9395
9404
|
.hex();
|
9396
9405
|
};
|
9397
9406
|
|
9398
|
-
const
|
9407
|
+
const lighten = (c, percentage) => {
|
9408
|
+
const isDark = c.lightness() < 0.5;
|
9409
|
+
|
9410
|
+
if (isDark) {
|
9411
|
+
return c.lightness(percentage * 100).hex();
|
9412
|
+
}
|
9413
|
+
|
9414
|
+
return c.lighten(percentage).hex();
|
9415
|
+
};
|
9416
|
+
|
9417
|
+
const isNearBlack = (color) => color.luminosity() < 0.01;
|
9418
|
+
const isNearWhite = (color) => color.luminosity() > 0.99;
|
9419
|
+
|
9420
|
+
const generateDarkColor = (color, theme) => {
|
9421
|
+
if (theme === 'dark') {
|
9422
|
+
return isNearWhite(color)
|
9423
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
9424
|
+
: lighten(color, colorGaps.darkLight);
|
9425
|
+
}
|
9426
|
+
|
9427
|
+
return isNearBlack(color)
|
9428
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
9429
|
+
: darken(color, colorGaps.darkLight);
|
9430
|
+
};
|
9431
|
+
|
9432
|
+
const generateLightColor = (color, theme) => {
|
9433
|
+
if (theme === 'dark') {
|
9434
|
+
return isNearBlack(color)
|
9435
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
9436
|
+
: darken(color, colorGaps.darkLight);
|
9437
|
+
}
|
9438
|
+
|
9439
|
+
return isNearWhite(color)
|
9440
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
9441
|
+
: lighten(color, colorGaps.darkLight);
|
9442
|
+
};
|
9443
|
+
|
9444
|
+
const generateHighlightColor = (color, theme) => {
|
9445
|
+
if (theme === 'dark') {
|
9446
|
+
return isNearBlack(color)
|
9447
|
+
? lighten(color, colorGaps.edgeColor.highlight)
|
9448
|
+
: darken(color, colorGaps.highlight);
|
9449
|
+
}
|
9450
|
+
|
9451
|
+
return isNearWhite(color)
|
9452
|
+
? darken(color, colorGaps.edgeColor.highlight)
|
9453
|
+
: lighten(color, colorGaps.highlight);
|
9454
|
+
};
|
9455
|
+
|
9456
|
+
const genColor = (color, theme) => {
|
9399
9457
|
const mainColor = new Color(color.main || color);
|
9400
9458
|
|
9401
|
-
|
9459
|
+
const res = {
|
9402
9460
|
main: mainColor.hex(),
|
9403
|
-
dark: color.dark ||
|
9404
|
-
light: color.light ||
|
9405
|
-
highlight: color.highlight ||
|
9406
|
-
contrast: color.contrast ||
|
9461
|
+
dark: color.dark || generateDarkColor(mainColor, theme),
|
9462
|
+
light: color.light || generateLightColor(mainColor, theme),
|
9463
|
+
highlight: color.highlight || generateHighlightColor(mainColor, theme),
|
9464
|
+
contrast: color.contrast || contrast(mainColor),
|
9407
9465
|
};
|
9466
|
+
|
9467
|
+
return res;
|
9408
9468
|
};
|
9409
9469
|
|
9410
9470
|
const genColors = (colors) => {
|