@stackoverflow/stacks 2.0.0-rc.12 → 2.0.0-rc.13

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.
Files changed (11) hide show
  1. package/dist/css/stacks.css +41 -41
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/atomic/typography.less +2 -2
  4. package/lib/components/activity-indicator/activity-indicator.less +1 -1
  5. package/lib/components/label/label.less +1 -1
  6. package/lib/components/uploader/uploader.less +1 -1
  7. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +60 -60
  8. package/lib/exports/__snapshots__/color.less.test.ts.snap +36 -36
  9. package/lib/exports/color-mixins.less +15 -12
  10. package/lib/exports/mixins.less +30 -8
  11. package/package.json +1 -1
package/lib/atomic/typography.less CHANGED
@@ -56,7 +56,7 @@ p {
56
56
  }, @force-selector: true);
57
57
 
58
58
  .fs-category {
59
- font-weight: 600;
59
+ font-weight: 700;
60
60
  text-transform: uppercase;
61
61
 
62
62
  // If a top border is desired
@@ -89,7 +89,7 @@ p {
89
89
 
90
90
  // -- Font Weight
91
91
  .fw-normal { font-weight: 400 !important; }
92
- .fw-bold { font-weight: 600 !important; }
92
+ .fw-bold { font-weight: 700 !important; }
93
93
 
94
94
  // -- Font Styles
95
95
  .fs-normal { font-style: normal !important; }
package/lib/components/activity-indicator/activity-indicator.less CHANGED
@@ -44,7 +44,7 @@
44
44
  border-radius: 1000px;
45
45
  display: inline-block;
46
46
  font-size: var(--fs-fine);
47
- font-weight: 600;
47
+ font-weight: 700;
48
48
  line-height: 1.1; // Custom line-height to satisfy 1x screens
49
49
  min-width: var(--su-static12);
50
50
  min-height: var(--su-static12);
package/lib/components/label/label.less CHANGED
@@ -91,7 +91,7 @@
91
91
 
92
92
  color: var(--fc-medium);
93
93
  font-family: inherit;
94
- font-weight: 600;
94
+ font-weight: 700;
95
95
  padding: 0 var(--su2); // Helps the label visually line up with inputs
96
96
  }
97
97
 
package/lib/components/uploader/uploader.less CHANGED
@@ -180,7 +180,7 @@
180
180
  & &--previews-heading {
181
181
  color: var(--black-600);
182
182
  font-size: var(--fs-body2);
183
- font-weight: 600;
183
+ font-weight: 700;
184
184
  padding-bottom: var(--su8);
185
185
  }
186
186
 
package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap CHANGED
@@ -386,19 +386,19 @@ body .themed {
386
386
  --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
387
387
  --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
388
388
  --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
389
- --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 45 * 1%));
390
- --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 35 * 1%));
391
- --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 15 * 1%));
392
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 0 * 1%));
393
- --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -14 * 1%));
394
- --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -22 * 1%));
389
+ --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.9)) );
390
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.75)) );
391
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.5)) );
392
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
393
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.3)) );
394
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.6)) );
395
395
  --theme-primary-custom: var(--theme-primary-custom-400);
396
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
397
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
398
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
399
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
400
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
401
- --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
396
+ --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.9)) );
397
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.75)) );
398
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.5)) );
399
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
400
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.3)) );
401
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.6)) );
402
402
  --theme-secondary-custom: var(--theme-secondary-custom-400);
403
403
  --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
404
404
  color: var(--theme-body-font-color, var(--black-600));
@@ -411,12 +411,12 @@ exports[`color-mixins > theming > create-custom-theme-hsl-rgb-variables 1`] = `
411
411
  --theme-base-primary-color-h: 4;
412
412
  --theme-base-primary-color-s: 100%;
413
413
  --theme-base-primary-color-l: 50%;
414
- --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 45 * 1%));
415
- --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 35 * 1%));
416
- --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 15 * 1%));
417
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 0 * 1%));
418
- --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -14 * 1%));
419
- --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -22 * 1%));
414
+ --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.9)) );
415
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.75)) );
416
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.5)) );
417
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
418
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.3)) );
419
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.6)) );
420
420
  --theme-primary-custom: var(--theme-primary-custom-400);
421
421
  }
422
422
 
@@ -424,12 +424,12 @@ create-custom-theme-hsl-rgb-variables(#29ff53, secondary, base) {
424
424
  --theme-base-secondary-color-h: 131.77570093;
425
425
  --theme-base-secondary-color-s: 100%;
426
426
  --theme-base-secondary-color-l: 58.03921569%;
427
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
428
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
429
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
430
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
431
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
432
- --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
427
+ --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.9)) );
428
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.75)) );
429
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.5)) );
430
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
431
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.3)) );
432
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.6)) );
433
433
  --theme-secondary-custom: var(--theme-secondary-custom-400);
434
434
  --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
435
435
  }
@@ -438,12 +438,12 @@ create-custom-theme-hsl-rgb-variables(#1c091d, primary, dark) {
438
438
  --theme-dark-primary-color-h: 297;
439
439
  --theme-dark-primary-color-s: 52.63157895%;
440
440
  --theme-dark-primary-color-l: 7.45098039%;
441
- --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -15 * 1%), calc(var(--theme-dark-primary-color-l) + -36 * 1%));
442
- --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -9 * 1%), calc(var(--theme-dark-primary-color-l) + -26 * 1%));
443
- --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -5 * 1%), calc(var(--theme-dark-primary-color-l) + -10 * 1%));
444
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 0 * 1%));
445
- --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 15 * 1%));
446
- --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 23 * 1%));
441
+ --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.7)) );
442
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.5)) );
443
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.2)) );
444
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
445
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.5)) );
446
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.8)) );
447
447
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
448
448
  }
449
449
 
@@ -451,12 +451,12 @@ create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
451
451
  --theme-dark-secondary-color-h: 12.85714286;
452
452
  --theme-dark-secondary-color-s: 40.38461538%;
453
453
  --theme-dark-secondary-color-l: 20.39215686%;
454
- --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -15 * 1%), calc(var(--theme-dark-secondary-color-l) + -36 * 1%));
455
- --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -9 * 1%), calc(var(--theme-dark-secondary-color-l) + -26 * 1%));
456
- --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -5 * 1%), calc(var(--theme-dark-secondary-color-l) + -10 * 1%));
457
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 0 * 1%));
458
- --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 15 * 1%));
459
- --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 23 * 1%));
454
+ --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.7)) );
455
+ --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.5)) );
456
+ --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.2)) );
457
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
458
+ --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.5)) );
459
+ --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.8)) );
460
460
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
461
461
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
462
462
  }
@@ -465,43 +465,43 @@ create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
465
465
 
466
466
  exports[`color-mixins > theming > create-custom-theme-variables 1`] = `
467
467
  "create-custom-theme-variables(primary, base) {
468
- --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 45 * 1%));
469
- --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 35 * 1%));
470
- --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 15 * 1%));
471
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 0 * 1%));
472
- --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -14 * 1%));
473
- --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -22 * 1%));
468
+ --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.9)) );
469
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.75)) );
470
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.5)) );
471
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
472
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.3)) );
473
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.6)) );
474
474
  --theme-primary-custom: var(--theme-primary-custom-400);
475
475
  }
476
476
 
477
477
  create-custom-theme-variables(primary, dark) {
478
- --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -15 * 1%), calc(var(--theme-dark-primary-color-l) + -36 * 1%));
479
- --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -9 * 1%), calc(var(--theme-dark-primary-color-l) + -26 * 1%));
480
- --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -5 * 1%), calc(var(--theme-dark-primary-color-l) + -10 * 1%));
481
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 0 * 1%));
482
- --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 15 * 1%));
483
- --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 23 * 1%));
478
+ --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.7)) );
479
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.5)) );
480
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.2)) );
481
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
482
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.5)) );
483
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.8)) );
484
484
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
485
485
  }
486
486
 
487
487
  create-custom-theme-variables(secondary, base) {
488
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
489
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
490
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
491
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
492
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
493
- --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
488
+ --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.9)) );
489
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.75)) );
490
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.5)) );
491
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
492
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.3)) );
493
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.6)) );
494
494
  --theme-secondary-custom: var(--theme-secondary-custom-400);
495
495
  --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
496
496
  }
497
497
 
498
498
  create-custom-theme-variables(secondary, base) {
499
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
500
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
501
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
502
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
503
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
504
- --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
499
+ --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.9)) );
500
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.75)) );
501
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.5)) );
502
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
503
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.3)) );
504
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.6)) );
505
505
  --theme-secondary-custom: var(--theme-secondary-custom-400);
506
506
  --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
507
507
  }
package/lib/exports/__snapshots__/color.less.test.ts.snap CHANGED
@@ -174,19 +174,19 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
174
174
  --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
175
175
  --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
176
176
  --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
177
- --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 45 * 1%));
178
- --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 35 * 1%));
179
- --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 15 * 1%));
180
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 0 * 1%));
181
- --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -14 * 1%));
182
- --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -22 * 1%));
177
+ --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.9)) );
178
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.75)) );
179
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.5)) );
180
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
181
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.3)) );
182
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.6)) );
183
183
  --theme-primary-custom: var(--theme-primary-custom-400);
184
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
185
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
186
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
187
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
188
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
189
- --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
184
+ --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.9)) );
185
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.75)) );
186
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.5)) );
187
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
188
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.3)) );
189
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.6)) );
190
190
  --theme-secondary-custom: var(--theme-secondary-custom-400);
191
191
  --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
192
192
  color: var(--theme-body-font-color, var(--black-600));
@@ -301,19 +301,19 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
301
301
  --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
302
302
  --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
303
303
  --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
304
- --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -15 * 1%), calc(var(--theme-dark-primary-color-l) + -36 * 1%));
305
- --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -9 * 1%), calc(var(--theme-dark-primary-color-l) + -26 * 1%));
306
- --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -5 * 1%), calc(var(--theme-dark-primary-color-l) + -10 * 1%));
307
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 0 * 1%));
308
- --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 15 * 1%));
309
- --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 23 * 1%));
304
+ --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.7)) );
305
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.5)) );
306
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.2)) );
307
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
308
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.5)) );
309
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.8)) );
310
310
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
311
- --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -15 * 1%), calc(var(--theme-dark-secondary-color-l) + -36 * 1%));
312
- --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -9 * 1%), calc(var(--theme-dark-secondary-color-l) + -26 * 1%));
313
- --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -5 * 1%), calc(var(--theme-dark-secondary-color-l) + -10 * 1%));
314
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 0 * 1%));
315
- --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 15 * 1%));
316
- --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 23 * 1%));
311
+ --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.7)) );
312
+ --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.5)) );
313
+ --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.2)) );
314
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
315
+ --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.5)) );
316
+ --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.8)) );
317
317
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
318
318
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
319
319
  color: var(--theme-body-font-color, var(--black-600));
@@ -426,19 +426,19 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
426
426
  --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
427
427
  --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
428
428
  --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
429
- --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -15 * 1%), calc(var(--theme-dark-primary-color-l) + -36 * 1%));
430
- --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -9 * 1%), calc(var(--theme-dark-primary-color-l) + -26 * 1%));
431
- --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -5 * 1%), calc(var(--theme-dark-primary-color-l) + -10 * 1%));
432
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 0 * 1%));
433
- --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 15 * 1%));
434
- --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 23 * 1%));
429
+ --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.7)) );
430
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.5)) );
431
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.2)) );
432
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
433
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.5)) );
434
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.8)) );
435
435
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
436
- --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -15 * 1%), calc(var(--theme-dark-secondary-color-l) + -36 * 1%));
437
- --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -9 * 1%), calc(var(--theme-dark-secondary-color-l) + -26 * 1%));
438
- --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -5 * 1%), calc(var(--theme-dark-secondary-color-l) + -10 * 1%));
439
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 0 * 1%));
440
- --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 15 * 1%));
441
- --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 23 * 1%));
436
+ --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.7)) );
437
+ --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.5)) );
438
+ --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.2)) );
439
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
440
+ --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.5)) );
441
+ --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.8)) );
442
442
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
443
443
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
444
444
  color: var(--theme-body-font-color, var(--black-600));
package/lib/exports/color-mixins.less CHANGED
@@ -210,17 +210,20 @@
210
210
  .create-custom-theme-variables(@tier: primary, @modeCustom: base) {
211
211
  @valueVar: ~"theme-@{modeCustom}-@{tier}-color";
212
212
  @focusRingHSLVars: ~"var(--@{valueVar}-h), var(--@{valueVar}-s), var(--@{valueVar}-l)";
213
+ @varH: var(~"--@{valueVar}-h");
214
+ @varS: var(~"--@{valueVar}-s");
215
+ @varL: var(~"--@{valueVar}-l");
213
216
 
214
217
  // TODO verify color stops with design
215
218
  & when (@modeCustom = base) {
216
219
  @varBase: ~"--theme-@{tier}-custom";
217
220
 
218
- @{varBase}-100: .native-lightness(@valueVar, 45)[];
219
- @{varBase}-200: .native-lightness(@valueVar, 35)[];
220
- @{varBase}-300: .native-lightness(@valueVar, 15)[];
221
- @{varBase}-400: .native-lightness(@valueVar, 0)[];
222
- @{varBase}-500: .native-lightness(@valueVar, -14)[];
223
- @{varBase}-600: .native-lightness(@valueVar, -22)[];
221
+ @{varBase}-100: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .9) ~")";
222
+ @{varBase}-200: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .75) ~")";
223
+ @{varBase}-300: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .5) ~")";
224
+ @{varBase}-400: ~"hsl(@{varH}, @{varS}, @{varL})";
225
+ @{varBase}-500: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, -.3) ~")";
226
+ @{varBase}-600: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, -.6) ~")";
224
227
  @{varBase}: ~"var(@{varBase}-400)";
225
228
 
226
229
  & when (@tier = secondary) {
@@ -231,12 +234,12 @@
231
234
  & when (@modeCustom = dark) {
232
235
  @varBaseDark: ~"--theme-@{modeCustom}-@{tier}-custom";
233
236
 
234
- @{varBaseDark}-100: .native-saturation-lightness(@valueVar, -15, -36)[];
235
- @{varBaseDark}-200: .native-saturation-lightness(@valueVar, -9, -26)[];
236
- @{varBaseDark}-300: .native-saturation-lightness(@valueVar, -5, -10)[];
237
- @{varBaseDark}-400: .native-saturation-lightness(@valueVar, 0, 0)[];
238
- @{varBaseDark}-500: .native-lightness(@valueVar, 15)[];
239
- @{varBaseDark}-600: .native-lightness(@valueVar, 23)[];
237
+ @{varBaseDark}-100: ~"hsl(@{varH}, " .alter-hsl-var(@varS, -.6), .alter-hsl-var(@varL, -.7) ~")";
238
+ @{varBaseDark}-200: ~"hsl(@{varH}, " .alter-hsl-var(@varS, -.4), .alter-hsl-var(@varL, -.5) ~")";
239
+ @{varBaseDark}-300: ~"hsl(@{varH}, " .alter-hsl-var(@varS, -.3), .alter-hsl-var(@varL, -.2) ~")";
240
+ @{varBaseDark}-400: ~"hsl(@{varH}, @{varS}, @{varL})";
241
+ @{varBaseDark}-500: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .5) ~")";
242
+ @{varBaseDark}-600: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .8) ~")";
240
243
  @{varBaseDark}: ~"var(@{varBaseDark}-400)";
241
244
 
242
245
  & when (@tier = secondary) {
package/lib/exports/mixins.less CHANGED
@@ -138,20 +138,42 @@
138
138
  calc(var(~"--@{color-prefix}-l") + @amountPercentage));
139
139
  }
140
140
 
141
- // Alter the lightness of a color in the HSL color space
142
- .native-lightness(@color-prefix, @lMod: 0) {
143
- .native-saturation-lightness(@color-prefix, 0, @lMod);
141
+
142
+ .alter-hsl-var(@baseAmount, @change: 0%, @max: 100%) {
143
+ & when (@change > 0) {
144
+ calc(@baseAmount + ((@max - @baseAmount) * @change));
145
+ }
146
+ & when(@change < 0) {
147
+ calc(@baseAmount + (@baseAmount * @change));
148
+ }
144
149
  }
145
150
 
146
- .native-lightness-static(@color-prefix, @l: 0) {
147
- @result: hsl(var(~"--@{color-prefix}-h"), var(~"--@{color-prefix}-s"), calc(@l * 1%));
151
+
152
+ // Alter the lightness of a color in the HSL color space
153
+ .native-lightness(@color-prefix, @lMod: 0) {
154
+ @result: hsl(
155
+ var(~"--@{color-prefix}-h"),
156
+ var(~"--@{color-prefix}-s"),
157
+ calc(
158
+ var(~"--@{color-prefix}-l") +
159
+ ((100% - var(~"--@{color-prefix}-l")) * @lMod)
160
+ )
161
+ );
148
162
  }
149
163
 
150
164
  // Alter the saturation and lightness of a color in the HSL color space
151
165
  .native-saturation-lightness(@color-prefix, @sMod: 0, @lMod: 0) {
152
- @result: hsl(var(~"--@{color-prefix}-h"),
153
- calc(var(~"--@{color-prefix}-s") + @sMod * 1%),
154
- calc(var(~"--@{color-prefix}-l") + @lMod * 1%));
166
+ @result: hsl(
167
+ var(~"--@{color-prefix}-h"),
168
+ calc(
169
+ var(~"--@{color-prefix}-s") +
170
+ ((100% - var(~"--@{color-prefix}-s")) * @sMod)
171
+ ),
172
+ calc(
173
+ var(~"--@{color-prefix}-l") +
174
+ ((100% - var(~"--@{color-prefix}-l")) * @lMod)
175
+ )
176
+ );
155
177
  }
156
178
 
157
179
  // Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "type": "git",
6
6
  "url": "https://github.com/StackExchange/Stacks.git"
7
7
  },
8
- "version": "2.0.0-rc.12",
8
+ "version": "2.0.0-rc.13",
9
9
  "files": [
10
10
  "dist",
11
11
  "lib"