@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/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
- // TODO: fix generated colors strategy
9388
- const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
9389
- const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
9390
- const genContrast = (c, percentage = 0.9) => {
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'), percentage)
9402
+ .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
9394
9403
  .saturate(1)
9395
9404
  .hex();
9396
9405
  };
9397
9406
 
9398
- const genColor = (color) => {
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
- return {
9459
+ const res = {
9402
9460
  main: mainColor.hex(),
9403
- dark: color.dark || genDark(mainColor),
9404
- light: color.light || genLight(mainColor),
9405
- highlight: color.highlight || genLight(mainColor),
9406
- contrast: color.contrast || genContrast(mainColor),
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) => {