@muraldevkit/ui-toolkit 4.64.0 → 4.66.0-dev-7XJy.1

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 (9) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/styles/MrlSkeletonText/module.scss +21 -13
  3. package/dist/styles/MrlText/variables.scss +15 -6
  4. package/dist/styles/MrlTextHeading/variables.scss +53 -27
  5. package/dist/styles.css +2 -2
  6. package/dist/utils/colors/colors.d.ts +35 -0
  7. package/dist/utils/colors/colors.test.d.ts +1 -0
  8. package/dist/utils/colors/index.d.ts +1 -0
  9. package/package.json +1 -2
package/dist/styles/MrlSkeletonText/module.scss CHANGED
@@ -1,24 +1,32 @@
1
1
 
2
2
  @use '../skeleton.mixins.scss' as *;
3
3
  $line: var(--mrl-spacing-03);
4
+ @mixin fit-to-line-height($line-height) {
5
+ height: $line;
6
+ margin-bottom: calc(#{$line-height} - #{$line});
7
+ margin-top: calc((#{$line-height} - #{$line}) / 2);
8
+ }
4
9
  .MrlSkeletonText {
5
10
  @include mrl-skeleton-base;
6
11
  @include mrl-skeleton-shimmer-effect;
7
12
  }
8
- $mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
9
- @each $size in $mrl-title-sizes {
10
- .MrlSkeletonText-#{$size} {
11
- $line-height: calc(
12
- var(--mrl-type-size-text-#{$size}) * var(--mrl-type-line-height-text-#{$size})
13
- );
14
- height: $line;
15
- margin-bottom: calc($line-height - $line);
16
- margin-top: calc(calc($line-height - $line) / 2);
17
- }
13
+ .MrlSkeletonText-large {
14
+ $line-height: calc(var(--mrl-type-size-text-large) * var(--mrl-type-line-height-text-large));
15
+ @include fit-to-line-height($line-height);
16
+ }
17
+ .MrlSkeletonText-small {
18
+ $line-height: calc(var(--mrl-type-size-text-small) * var(--mrl-type-line-height-text-small));
19
+ @include fit-to-line-height($line-height);
20
+ }
21
+ .MrlSkeletonText-xsmall {
22
+ $line-height: calc(var(--mrl-type-size-text-xsmall) * var(--mrl-type-line-height-text-xsmall));
23
+ @include fit-to-line-height($line-height);
24
+ }
25
+ .MrlSkeletonText-xxsmall {
26
+ $line-height: calc(var(--mrl-type-size-text-xxsmall) * var(--mrl-type-line-height-text-xxsmall));
27
+ @include fit-to-line-height($line-height);
18
28
  }
19
29
  .MrlSkeletonText-medium {
20
30
  $line-height: calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text));
21
- height: $line;
22
- margin-bottom: calc($line-height - $line);
23
- margin-top: calc(calc($line-height - $line) / 2);
31
+ @include fit-to-line-height($line-height);
24
32
  }
package/dist/styles/MrlText/variables.scss CHANGED
@@ -4,11 +4,20 @@
4
4
  --mrl-text-weight: var(--mrl-type-weight-text);
5
5
  --mrl-text-spacing: var(--mrl-type-spacing-text);
6
6
  --mrl-text-height: var(--mrl-type-line-height-text);
7
- $mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
8
- @each $size in $mrl-title-sizes {
9
- &.MrlText--#{$size} {
10
- --mrl-text-size: var(--mrl-type-size-text-#{$size});
11
- --mrl-text-height: var(--mrl-type-line-height-text-#{$size});
12
- }
7
+ &.MrlText--large {
8
+ --mrl-text-size: var(--mrl-type-size-text-large);
9
+ --mrl-text-height: var(--mrl-type-line-height-text-large);
10
+ }
11
+ &.MrlText--small {
12
+ --mrl-text-size: var(--mrl-type-size-text-small);
13
+ --mrl-text-height: var(--mrl-type-line-height-text-small);
14
+ }
15
+ &.MrlText--xsmall {
16
+ --mrl-text-size: var(--mrl-type-size-text-xsmall);
17
+ --mrl-text-height: var(--mrl-type-line-height-text-xsmall);
18
+ }
19
+ &.MrlText--xxsmall {
20
+ --mrl-text-size: var(--mrl-type-size-text-xxsmall);
21
+ --mrl-text-height: var(--mrl-type-line-height-text-xxsmall);
13
22
  }
14
23
  }
package/dist/styles/MrlTextHeading/variables.scss CHANGED
@@ -1,25 +1,42 @@
1
1
 
2
- $mrl-heading-use-cases: 'display', 'headline';
3
- $mrl-heading-sizes: 'large', 'small', 'xsmall';
4
- @each $use-case in $mrl-heading-use-cases {
5
- .MrlTextHeading-#{$use-case} {
6
- @if $use-case == 'display' {
7
- --mrl-heading-family: var(--mrl-heading-font-alt);
8
- } @else {
9
- --mrl-heading-family: var(--mrl-heading-font);
10
- }
11
- --mrl-heading-size: var(--mrl-type-size-#{$use-case});
12
- --mrl-heading-weight: var(--mrl-type-weight-#{$use-case});
13
- --mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case});
14
- --mrl-heading-height: var(--mrl-type-line-height-#{$use-case});
15
- }
16
- @each $size in $mrl-heading-sizes {
17
- .MrlTextHeading-#{$use-case}--#{$size} {
18
- --mrl-heading-size: var(--mrl-type-size-#{$use-case}-#{$size});
19
- --mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case}-#{$size});
20
- --mrl-heading-height: var(--mrl-type-line-height-#{$use-case}-#{$size});
21
- }
22
- }
2
+ .MrlTextHeading-display {
3
+ --mrl-heading-family: var(--mrl-heading-font-alt);
4
+ --mrl-heading-size: var(--mrl-type-size-display);
5
+ --mrl-heading-weight: var(--mrl-type-weight-display);
6
+ --mrl-heading-spacing: var(--mrl-type-spacing-display);
7
+ --mrl-heading-height: var(--mrl-type-line-height-display);
8
+ }
9
+ .MrlTextHeading-display--large {
10
+ --mrl-heading-size: var(--mrl-type-size-display-large);
11
+ --mrl-heading-spacing: var(--mrl-type-spacing-display-large);
12
+ --mrl-heading-height: var(--mrl-type-line-height-display-large);
13
+ }
14
+ .MrlTextHeading-display--small {
15
+ --mrl-heading-size: var(--mrl-type-size-display-small);
16
+ --mrl-heading-spacing: var(--mrl-type-spacing-display-small);
17
+ --mrl-heading-height: var(--mrl-type-line-height-display-small);
18
+ }
19
+ .MrlTextHeading-display--xsmall {
20
+ --mrl-heading-size: var(--mrl-type-size-display-xsmall);
21
+ --mrl-heading-spacing: var(--mrl-type-spacing-display-xsmall);
22
+ --mrl-heading-height: var(--mrl-type-line-height-display-xsmall);
23
+ }
24
+ .MrlTextHeading-headline {
25
+ --mrl-heading-family: var(--mrl-heading-font);
26
+ --mrl-heading-size: var(--mrl-type-size-headline);
27
+ --mrl-heading-weight: var(--mrl-type-weight-headline);
28
+ --mrl-heading-spacing: var(--mrl-type-spacing-headline);
29
+ --mrl-heading-height: var(--mrl-type-line-height-headline);
30
+ }
31
+ .MrlTextHeading-headline--large {
32
+ --mrl-heading-size: var(--mrl-type-size-headline-large);
33
+ --mrl-heading-spacing: var(--mrl-type-spacing-headline-large);
34
+ --mrl-heading-height: var(--mrl-type-line-height-headline-large);
35
+ }
36
+ .MrlTextHeading-headline--small {
37
+ --mrl-heading-size: var(--mrl-type-size-headline-small);
38
+ --mrl-heading-spacing: var(--mrl-type-spacing-headline-small);
39
+ --mrl-heading-height: var(--mrl-type-line-height-headline-small);
23
40
  }
24
41
  .MrlTextHeading-title {
25
42
  --mrl-heading-family: var(--mrl-heading-font);
@@ -28,12 +45,21 @@ $mrl-heading-sizes: 'large', 'small', 'xsmall';
28
45
  --mrl-heading-spacing: var(--mrl-type-spacing-text);
29
46
  --mrl-heading-height: var(--mrl-type-line-height-title);
30
47
  }
31
- $mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
32
- @each $size in $mrl-title-sizes {
33
- .MrlTextHeading-title--#{$size} {
34
- --mrl-heading-size: var(--mrl-type-size-text-#{$size});
35
- --mrl-heading-height: var(--mrl-type-line-height-title-#{$size});
36
- }
48
+ .MrlTextHeading-title--large {
49
+ --mrl-heading-size: var(--mrl-type-size-text-large);
50
+ --mrl-heading-height: var(--mrl-type-line-height-title-large);
51
+ }
52
+ .MrlTextHeading-title--small {
53
+ --mrl-heading-size: var(--mrl-type-size-text-small);
54
+ --mrl-heading-height: var(--mrl-type-line-height-title-small);
55
+ }
56
+ .MrlTextHeading-title--xsmall {
57
+ --mrl-heading-size: var(--mrl-type-size-text-xsmall);
58
+ --mrl-heading-height: var(--mrl-type-line-height-title-xsmall);
59
+ }
60
+ .MrlTextHeading-title--xxsmall {
61
+ --mrl-heading-size: var(--mrl-type-size-text-xxsmall);
62
+ --mrl-heading-height: var(--mrl-type-line-height-title-xxsmall);
37
63
  }
38
64
  .MrlTextHeading-title--secondary {
39
65
  --mrl-heading-weight: var(--mrl-type-weight-title-secondary);
package/dist/styles.css CHANGED
@@ -319,7 +319,7 @@
319
319
  .MrlSidebar--BgZ1u{align-items:stretch;margin-right:var(--mrl-spacing-05);width:calc(var(--mrl-spacing-14) + var(--mrl-spacing-08))}.MrlSidebar--mobile--ze4Hn{align-items:stretch;background:var(--mrl-color-background-page);border-radius:0 var(--mrl-radii-03) var(--mrl-radii-03) 0;bottom:0;left:calc((var(--mrl-spacing-14) + var(--mrl-spacing-08) + 2px)*-1);max-height:calc(100% - var(--mrl-spacing-03));overflow-y:auto;padding:4.5rem var(--mrl-space-inset-large) var(--mrl-space-inset-large);position:fixed;top:var(--mrl-spacing-03);transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1),left var(--mrl-duration-03) var(--mrl-timing-m1);z-index:2}@media(prefers-reduced-motion: reduce){.MrlSidebar--mobile--ze4Hn{transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1)}}.MrlSidebar--mobile--open--WpVyZ{left:0;opacity:1}.MrlSidebar--offset--PDTE_.MrlSidebar--mobile--ze4Hn,.MrlSidebar--offset--PDTE_.MrlSidebar-overlay--mWzx1{bottom:0}.MrlSidebar-menu--wFDdM.MrlSidebar-menu-trigger--pNEb8{left:var(--mrl-spacing-05);position:absolute;top:var(--mrl-spacing-05);width:50px;z-index:1}.MrlSidebar-menu-close--zZq68{position:fixed}.MrlSidebar-overlay--mWzx1{background-color:rgba(0,0,0,.56);inset:0 0 0 -10000px;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1);z-index:1}.MrlSidebar-overlay--visible--wjTzw{opacity:1;pointer-events:initial}.MrlSidebar-content--2VXk1{display:none}.MrlSidebar-content--visible--ZLFsB{display:block}
320
320
  .MrlErrorPage--qrFA2{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl{align-items:center;display:flex;justify-content:space-between;padding:var(--mrl-spacing-08) var(--mrl-spacing-07) var(--mrl-spacing-11) var(--mrl-spacing-07)}.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl .MrlSvgContainer{height:1.875rem;width:6.188rem}.MrlErrorPage--qrFA2 .MrlErrorPage-main--ANe1r{flex-grow:1;padding:0 var(--mrl-spacing-07) var(--mrl-spacing-08)}.MrlErrorPage--qrFA2 .MrlErrorPage-title--gBYGh{color:var(--mrl-color-text-heading);font-family:var(--mrl-heading-font-alt);padding-bottom:var(--mrl-spacing-07)}.MrlErrorPage--qrFA2 .MrlErrorPage-brand-colors--GMR4w{flex-grow:0;flex-shrink:0}@media(min-width: 52.125rem){.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl{padding:var(--mrl-spacing-08) var(--mrl-spacing-08) var(--mrl-spacing-11) var(--mrl-spacing-08)}.MrlErrorPage--qrFA2 .MrlErrorPage-main--ANe1r{margin:0 auto;max-width:33.75rem;padding:0 0 var(--mrl-spacing-08) 0}}
321
321
  .MrlText--qWcjF{--mrl-text-size: var(--mrl-type-size-text);--mrl-text-weight: var(--mrl-type-weight-text);--mrl-text-spacing: var(--mrl-type-spacing-text);--mrl-text-height: var(--mrl-type-line-height-text)}.MrlText--qWcjF.MrlText--large--Up17c{--mrl-text-size: var(--mrl-type-size-text-large);--mrl-text-height: var(--mrl-type-line-height-text-large)}.MrlText--qWcjF.MrlText--small--oJ2NK{--mrl-text-size: var(--mrl-type-size-text-small);--mrl-text-height: var(--mrl-type-line-height-text-small)}.MrlText--qWcjF.MrlText--xsmall--OjNGe{--mrl-text-size: var(--mrl-type-size-text-xsmall);--mrl-text-height: var(--mrl-type-line-height-text-xsmall)}.MrlText--qWcjF.MrlText--xxsmall--qfF1L{--mrl-text-size: var(--mrl-type-size-text-xxsmall);--mrl-text-height: var(--mrl-type-line-height-text-xxsmall)}.MrlText--qWcjF{font-family:var(--mrl-body-font);font-size:var(--mrl-text-size);font-weight:var(--mrl-text-weight);letter-spacing:var(--mrl-text-spacing);line-height:var(--mrl-text-height)}
322
- .MrlTextHeading-display--YPlsQ{--mrl-heading-family: var(--mrl-heading-font-alt);--mrl-heading-size: var(--mrl-type-size-display);--mrl-heading-weight: var(--mrl-type-weight-display);--mrl-heading-spacing: var(--mrl-type-spacing-display);--mrl-heading-height: var(--mrl-type-line-height-display)}.MrlTextHeading-display--large--OoGc4{--mrl-heading-size: var(--mrl-type-size-display-large);--mrl-heading-spacing: var(--mrl-type-spacing-display-large);--mrl-heading-height: var(--mrl-type-line-height-display-large)}.MrlTextHeading-display--small--gwHpu{--mrl-heading-size: var(--mrl-type-size-display-small);--mrl-heading-spacing: var(--mrl-type-spacing-display-small);--mrl-heading-height: var(--mrl-type-line-height-display-small)}.MrlTextHeading-display--xsmall--qgA98{--mrl-heading-size: var(--mrl-type-size-display-xsmall);--mrl-heading-spacing: var(--mrl-type-spacing-display-xsmall);--mrl-heading-height: var(--mrl-type-line-height-display-xsmall)}.MrlTextHeading-headline--paxPG{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-headline);--mrl-heading-weight: var(--mrl-type-weight-headline);--mrl-heading-spacing: var(--mrl-type-spacing-headline);--mrl-heading-height: var(--mrl-type-line-height-headline)}.MrlTextHeading-headline--large--edpNl{--mrl-heading-size: var(--mrl-type-size-headline-large);--mrl-heading-spacing: var(--mrl-type-spacing-headline-large);--mrl-heading-height: var(--mrl-type-line-height-headline-large)}.MrlTextHeading-headline--small--wvgZG{--mrl-heading-size: var(--mrl-type-size-headline-small);--mrl-heading-spacing: var(--mrl-type-spacing-headline-small);--mrl-heading-height: var(--mrl-type-line-height-headline-small)}.MrlTextHeading-headline--xsmall--kUBii{--mrl-heading-size: var(--mrl-type-size-headline-xsmall);--mrl-heading-spacing: var(--mrl-type-spacing-headline-xsmall);--mrl-heading-height: var(--mrl-type-line-height-headline-xsmall)}.MrlTextHeading-title--Wlh8i{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-text);--mrl-heading-weight: var(--mrl-type-weight-title);--mrl-heading-spacing: var(--mrl-type-spacing-text);--mrl-heading-height: var(--mrl-type-line-height-title)}.MrlTextHeading-title--large--VbutV{--mrl-heading-size: var(--mrl-type-size-text-large);--mrl-heading-height: var(--mrl-type-line-height-title-large)}.MrlTextHeading-title--small--BPZW2{--mrl-heading-size: var(--mrl-type-size-text-small);--mrl-heading-height: var(--mrl-type-line-height-title-small)}.MrlTextHeading-title--xsmall--MkPpJ{--mrl-heading-size: var(--mrl-type-size-text-xsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xsmall)}.MrlTextHeading-title--xxsmall--R9i95{--mrl-heading-size: var(--mrl-type-size-text-xxsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xxsmall)}.MrlTextHeading-title--secondary--VzSQc{--mrl-heading-weight: var(--mrl-type-weight-title-secondary)}.MrlTextHeading-display--YPlsQ{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-headline--paxPG{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-display--YPlsQ strong{font-weight:var(--mrl-font-weight-02)}.MrlTextHeading-title--Wlh8i{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}
322
+ .MrlTextHeading-display--YPlsQ{--mrl-heading-family: var(--mrl-heading-font-alt);--mrl-heading-size: var(--mrl-type-size-display);--mrl-heading-weight: var(--mrl-type-weight-display);--mrl-heading-spacing: var(--mrl-type-spacing-display);--mrl-heading-height: var(--mrl-type-line-height-display)}.MrlTextHeading-display--large--OoGc4{--mrl-heading-size: var(--mrl-type-size-display-large);--mrl-heading-spacing: var(--mrl-type-spacing-display-large);--mrl-heading-height: var(--mrl-type-line-height-display-large)}.MrlTextHeading-display--small--gwHpu{--mrl-heading-size: var(--mrl-type-size-display-small);--mrl-heading-spacing: var(--mrl-type-spacing-display-small);--mrl-heading-height: var(--mrl-type-line-height-display-small)}.MrlTextHeading-display--xsmall--qgA98{--mrl-heading-size: var(--mrl-type-size-display-xsmall);--mrl-heading-spacing: var(--mrl-type-spacing-display-xsmall);--mrl-heading-height: var(--mrl-type-line-height-display-xsmall)}.MrlTextHeading-headline--paxPG{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-headline);--mrl-heading-weight: var(--mrl-type-weight-headline);--mrl-heading-spacing: var(--mrl-type-spacing-headline);--mrl-heading-height: var(--mrl-type-line-height-headline)}.MrlTextHeading-headline--large--edpNl{--mrl-heading-size: var(--mrl-type-size-headline-large);--mrl-heading-spacing: var(--mrl-type-spacing-headline-large);--mrl-heading-height: var(--mrl-type-line-height-headline-large)}.MrlTextHeading-headline--small--wvgZG{--mrl-heading-size: var(--mrl-type-size-headline-small);--mrl-heading-spacing: var(--mrl-type-spacing-headline-small);--mrl-heading-height: var(--mrl-type-line-height-headline-small)}.MrlTextHeading-title--Wlh8i{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-text);--mrl-heading-weight: var(--mrl-type-weight-title);--mrl-heading-spacing: var(--mrl-type-spacing-text);--mrl-heading-height: var(--mrl-type-line-height-title)}.MrlTextHeading-title--large--VbutV{--mrl-heading-size: var(--mrl-type-size-text-large);--mrl-heading-height: var(--mrl-type-line-height-title-large)}.MrlTextHeading-title--small--BPZW2{--mrl-heading-size: var(--mrl-type-size-text-small);--mrl-heading-height: var(--mrl-type-line-height-title-small)}.MrlTextHeading-title--xsmall--MkPpJ{--mrl-heading-size: var(--mrl-type-size-text-xsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xsmall)}.MrlTextHeading-title--xxsmall--R9i95{--mrl-heading-size: var(--mrl-type-size-text-xxsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xxsmall)}.MrlTextHeading-title--secondary--VzSQc{--mrl-heading-weight: var(--mrl-type-weight-title-secondary)}.MrlTextHeading-display--YPlsQ{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-headline--paxPG{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-display--YPlsQ strong{font-weight:var(--mrl-font-weight-02)}.MrlTextHeading-title--Wlh8i{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}
323
323
  .MrlBrandColor-color-black--qezls{background-color:#000;grid-area:color-black}.MrlBrandColor-color-jade--FXR41{background-color:#00c27a;grid-area:color-jade}.MrlBrandColor-color-blue--QTrte{background-color:#5887ff;grid-area:color-blue}.MrlBrandColor-color-pink--ec2Rk{background-color:#fc83ff;grid-area:color-pink}.MrlBrandColor-color-red--m9sa2{background-color:#ff4b4b;grid-area:color-red}.MrlBrandColor-color-yellow--VsIdM{background-color:#fa0;grid-area:color-yellow}.MrlBrandColor-color-grape--FcHD9{background-color:#be53ff;grid-area:color-grape}.MrlBrandColor-color-sky--CTufh{background-color:#79c1ff;grid-area:color-sky}.MrlBrandColor-color-lemon--vKUgk{background-color:#ffe146;grid-area:color-lemon}.MrlBrandColor-color-lavander--jdxdU{background-color:#e6bfff;grid-area:color-lavander}.MrlBrandColors--cnjoA{display:grid;grid-template-columns:repeat(8, 1fr);grid-template-rows:1fr;height:15rem;width:100%}.MrlPattern-01--UGBWG{grid-template-areas:" color-blue color-blue color-pink color-pink color-pink color-pink color-pink color-pink"}.MrlPattern-02--ShfYW{grid-template-areas:" color-red color-red color-red color-red color-red color-grape color-grape color-grape"}.MrlPattern-03--L1EDT{grid-template-areas:" color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-jade"}.MrlPattern-04--bVc3U{grid-template-areas:" color-pink color-pink color-pink color-pink color-pink color-lemon color-lemon color-lemon"}.MrlPattern-05--DRK3W{grid-template-areas:" color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade"}.MrlPattern-06--zkwV6{grid-template-areas:" color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black"}@media(min-width: 37.5rem){.MrlBrandColors--cnjoA{grid-template-columns:repeat(32, 1fr)}.MrlPattern-01--UGBWG{grid-template-areas:" color-blue color-blue color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-red color-red color-red color-red color-red color-red color-black color-black color-black"}.MrlPattern-02--ShfYW{grid-template-areas:" color-blue color-blue color-blue color-black color-black color-black color-yellow color-red color-red color-red color-red color-red color-red color-red color-red color-red color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-jade color-jade color-jade color-jade color-jade color-jade"}.MrlPattern-03--L1EDT{grid-template-areas:" color-black color-black color-black color-lemon color-lemon color-red color-red color-red color-red color-red color-red color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-jade color-jade color-jade color-jade color-jade color-sky color-sky color-sky color-sky"}.MrlPattern-04--bVc3U{grid-template-areas:" color-jade color-jade color-sky color-sky color-sky color-sky color-sky color-sky color-black color-black color-black color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-lemon color-lemon color-lemon color-lemon color-lemon color-lemon color-lemon color-red color-red"}.MrlPattern-05--DRK3W{grid-template-areas:" color-lavander color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-blue color-blue color-blue color-blue color-blue color-blue color-blue color-red color-red"}.MrlPattern-06--zkwV6{grid-template-areas:" color-yellow color-yellow color-yellow color-yellow color-yellow color-lavander color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black color-black color-red color-sky color-sky color-sky color-sky color-sky color-sky color-sky color-sky"}}
324
324
  .mrl-u-focus-wrapper--sGwMW{position:relative}a.mrl-link--Xzu_x{--mrl-link-border-style: solid;--mrl-link-border-width: var(--mrl-line-width-border);--mrl-link-color: rgba(var(--mrl-gray-90), 1);--mrl-link-color-active: rgb(var(--mrl-blue-90));--mrl-link-color-hover: rgb(var(--mrl-blue-70));--mrl-link-font-weight: 700;--mrl-link-border-width-focus: var(--mrl-line-width-focus);--mrl-link-color-focus: var(--mrl-color-focus);--mrl-link-offset-focus: var(--mrl-space-offset-focus)}a.mrl-link--mono--LL0fI:hover{--mrl-link-color-hover: rgba(var(--mrl-gray-100), 1)}a.mrl-link--mono--LL0fI:active{--mrl-link-color-active: rgba(var(--mrl-black), 1)}a.mrl-link--inverse--bzMVs{--mrl-link-color: var(--mrl-color-text-inverse)}a.mrl-link--inverse--bzMVs:hover{--mrl-link-color-hover: var(--mrl-white-opacity-08)}a.mrl-link--inverse--bzMVs:active{--mrl-link-color-active: var(--mrl-white-opacity-06)}.mrl-link--Xzu_x{position:relative;align-items:center;color:var(--mrl-link-color);display:inline-flex;font-weight:var(--mrl-link-font-weight);text-decoration:none;transition:all var(--mrl-duration-03) var(--mrl-timing-m2);transition-property:border-color,color}.mrl-link--Xzu_x:focus-visible{outline:none}.mrl-link--Xzu_x:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:var(--mrl-timing-m3);border:0 solid rgba(0,0,0,0);border-radius:calc(
325
325
  var(--mrl-radii-02) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
@@ -502,7 +502,7 @@
502
502
  var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
503
503
  )*-1)}}.MrlSidebarNavItem--QDN9P>a:hover{background-color:rgba(var(--mrl-gray-20), 1)}.MrlSidebarNavItem--QDN9P>a:active{background-color:rgba(var(--mrl-gray-30), 1)}.MrlSidebarNavItem--QDN9P.hasIcon--TUNgW>a{padding:calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) calc(var(--mrl-spacing-01) + var(--mrl-spacing-03))}.MrlSidebarNavItem--QDN9P.MrlSidebarNavItem-selected--vA8rc a,.MrlSidebarNavItem--QDN9P.MrlSidebarNavItem-selected--vA8rc a:hover{background-color:var(--mrl-color-background-highlight-active);color:var(--mrl-color-text-inverse-active)}.MrlSidebarNavItem-icon--VIvzN{height:var(--mrl-spacing-06);margin-right:calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));width:var(--mrl-spacing-06)}
504
504
  @keyframes shimmer--eczHY{0%{background-position:right}100%{background-position:left}}.MrlSkeleton--L9ZOR{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeleton--L9ZOR::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--eczHY;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeleton--L9ZOR::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeleton-circle--V35an{border-radius:50%}
505
- @keyframes shimmer--n2jh9{0%{background-position:right}100%{background-position:left}}.MrlSkeletonText--aZt7x{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeletonText--aZt7x::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--n2jh9;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeletonText--aZt7x::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeletonText-large--hMKwp{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-large)*var(--mrl-type-line-height-text-large) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-large)*var(--mrl-type-line-height-text-large) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-small--c6iHj{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-small)*var(--mrl-type-line-height-text-small) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-small)*var(--mrl-type-line-height-text-small) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xsmall--_I_hY{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-xsmall)*var(--mrl-type-line-height-text-xsmall) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-xsmall)*var(--mrl-type-line-height-text-xsmall) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xxsmall--iasp3{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-xxsmall)*var(--mrl-type-line-height-text-xxsmall) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-xxsmall)*var(--mrl-type-line-height-text-xxsmall) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-medium--VD22L{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text)*var(--mrl-type-line-height-text) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text)*var(--mrl-type-line-height-text) - var(--mrl-spacing-03))/2)}
505
+ @keyframes shimmer--n2jh9{0%{background-position:right}100%{background-position:left}}.MrlSkeletonText--aZt7x{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeletonText--aZt7x::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--n2jh9;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeletonText--aZt7x::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeletonText-large--hMKwp{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text-large) * var(--mrl-type-line-height-text-large)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text-large) * var(--mrl-type-line-height-text-large)) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-small--c6iHj{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text-small) * var(--mrl-type-line-height-text-small)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text-small) * var(--mrl-type-line-height-text-small)) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xsmall--_I_hY{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text-xsmall) * var(--mrl-type-line-height-text-xsmall)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text-xsmall) * var(--mrl-type-line-height-text-xsmall)) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xxsmall--iasp3{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text-xxsmall) * var(--mrl-type-line-height-text-xxsmall)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text-xxsmall) * var(--mrl-type-line-height-text-xxsmall)) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-medium--VD22L{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text)) - var(--mrl-spacing-03))/2)}
506
506
  .mrl-empty--bBaPG{text-align:center}.mrl-empty-default--UfKTY{max-width:200px}.mrl-empty-large--jiZ0b{max-width:360px}.mrl-empty-text--EE6Hx{margin:var(--mrl-spacing-05) 0}.mrl-empty-text-large--tKa8r{margin:var(--mrl-spacing-06) 0}.mrl-empty-color-text-secondary--cR3LB{color:var(--mrl-color-text-secondary)}
507
507
  .mrl-u-focus-wrapper--U8AgI{position:relative}.MrlCallout--content--o1NZT{max-width:17.5rem}.MrlCallout--title--rEMq8{font-size:var(--mrl-font-size-03);margin-bottom:var(--mrl-spacing-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--eyebrow--zPSfr{font-size:var(--mrl-font-size-01);font-weight:var(--mrl-font-weight-04);margin-bottom:var(--mrl-spacing-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--description--s524D p{font-size:var(--mrl-font-size-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--image--F809e{margin-top:var(--mrl-spacing-05)}.MrlCallout--image--F809e img{height:auto;width:100%}.MrlCallout--footer--sjbLA{display:flex;justify-content:flex-start;margin-top:var(--mrl-spacing-05)}.MrlCallout--footer--sjbLA .mrlButton{margin-left:var(--mrl-spacing-03)}.MrlCallout--footer--sjbLA .mrlButton:first-child{margin-left:auto}.MrlCallout--O6y8L .mrlButton:focus-visible{position:relative}.MrlCallout--O6y8L .mrlButton:focus-visible:focus-visible{outline:none}.MrlCallout--O6y8L .mrlButton:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:var(--mrl-timing-m3);border:0 solid rgba(0,0,0,0);border-radius:calc(
508
508
  var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
package/dist/utils/colors/colors.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ type RgbTuple = [number, number, number];
2
+ /**
3
+ * Returns `true` when the input is a valid `#rgb` or `#rrggbb` CSS color string.
4
+ * @param {string} color CSS-like hex color string
5
+ * @returns {boolean} whether the string is a valid hex color
6
+ */
7
+ export declare const isValidHexColor: (color: string) => boolean;
8
+ /**
9
+ * Returns `true` when the input is a valid `rgb(r, g, b)` CSS color string.
10
+ * @param {string} color CSS-like rgb color string
11
+ * @returns {boolean} whether the string is a valid rgb color
12
+ */
13
+ export declare const isValidRgbString: (color: string) => boolean;
14
+ /**
15
+ * Returns `true` when the input is a valid `rgba(r, g, b, a)` CSS color string.
16
+ * @param {string} color CSS-like rgba color string
17
+ * @returns {boolean} whether the string is a valid rgba color
18
+ */
19
+ export declare const isValidRgbaString: (color: string) => boolean;
20
+ /**
21
+ * Converts a valid hex color string to its `[r, g, b]` tuple representation.
22
+ * @param {string} hexColor valid hex color string
23
+ * @returns {RgbTuple} rgb tuple representation of the color
24
+ */
25
+ export declare const hexToRgb: (hexColor: string) => RgbTuple;
26
+ /**
27
+ * Returns the preferred text token for a background color using the same luminance threshold
28
+ * and alpha handling as the previous `@tactivos/mural-shared` helper.
29
+ * @param {string} backgroundColor background color to evaluate
30
+ * @param {string} blackTextColor token returned for light/transparent backgrounds
31
+ * @param {string} whiteTextColor token returned for dark backgrounds
32
+ * @returns {string} selected text token
33
+ */
34
+ export declare const stickyTextColor: <T extends string>(backgroundColor: string, blackTextColor: T, whiteTextColor: T) => T;
35
+ export {};
package/dist/utils/colors/colors.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/utils/colors/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './colors';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "4.64.0",
3
+ "version": "4.66.0-dev-7XJy.1",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -41,7 +41,6 @@
41
41
  },
42
42
  "license": "https://www.mural.co/terms/developer-addendum",
43
43
  "peerDependencies": {
44
- "@tactivos/mural-shared": "2.8.0",
45
44
  "lottie-web": "^5.9.6"
46
45
  },
47
46
  "devDependencies": {