@cas-smartdesign/design-tokens 3.0.4 → 3.0.5
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/dark/_tokens.scss +78 -78
- package/dist/dark/tokens.css +78 -78
- package/dist/dark/tokens.json +156 -156
- package/dist/docs/index.html +3 -3
- package/dist/light/_tokens.scss +3 -3
- package/dist/light/tokens.css +3 -3
- package/dist/light/tokens.json +6 -6
- package/dist/tokens.css +81 -81
- package/package.json +1 -1
package/dist/docs/index.html
CHANGED
|
@@ -1892,7 +1892,7 @@ Foundation surface styles that define the visual base behind all content</p>
|
|
|
1892
1892
|
<div class="preview swatch" style="background: var(--color-bg-action-neutral-weakest-hover);"></div>
|
|
1893
1893
|
<div class="meta">
|
|
1894
1894
|
<code>--color-bg-action-neutral-weakest-hover</code>
|
|
1895
|
-
<code>#
|
|
1895
|
+
<code>#f1f1f1</code>
|
|
1896
1896
|
<span>Hover state for color/bg/action-neutralWeakest</span>
|
|
1897
1897
|
</div>
|
|
1898
1898
|
</div>
|
|
@@ -1980,7 +1980,7 @@ Foundation surface styles that define the visual base behind all content</p>
|
|
|
1980
1980
|
<div class="preview swatch" style="background: var(--color-bg-selection-neutral-default);"></div>
|
|
1981
1981
|
<div class="meta">
|
|
1982
1982
|
<code>--color-bg-selection-neutral-default</code>
|
|
1983
|
-
<code>#
|
|
1983
|
+
<code>#e7e7e7</code>
|
|
1984
1984
|
<span>Third background color for components that allow selection; Selection = choose something</span>
|
|
1985
1985
|
</div>
|
|
1986
1986
|
</div>
|
|
@@ -1988,7 +1988,7 @@ Foundation surface styles that define the visual base behind all content</p>
|
|
|
1988
1988
|
<div class="preview swatch" style="background: var(--color-bg-selection-neutral-default-hover);"></div>
|
|
1989
1989
|
<div class="meta">
|
|
1990
1990
|
<code>--color-bg-selection-neutral-default-hover</code>
|
|
1991
|
-
<code>#
|
|
1991
|
+
<code>#f1f1f1</code>
|
|
1992
1992
|
<span>Hover state for color/bg/selection-neutralDefault</span>
|
|
1993
1993
|
</div>
|
|
1994
1994
|
</div>
|
package/dist/light/_tokens.scss
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
/** Another background color for less prominent actions; Action = do something */
|
|
41
41
|
--color-bg-action-neutral-weakest: var(--base-color-white-opaque);
|
|
42
42
|
/** Hover state for color/bg/action-neutralWeakest */
|
|
43
|
-
--color-bg-action-neutral-weakest-hover: var(--base-color-grey-
|
|
43
|
+
--color-bg-action-neutral-weakest-hover: var(--base-color-grey-100);
|
|
44
44
|
/** Pressed state for color/bg/action-neutralWeakest */
|
|
45
45
|
--color-bg-action-neutral-weakest-pressed: var(--base-color-grey-250);
|
|
46
46
|
/** Background color for notification messages, not customizable. The color does not suggest interactivity. */
|
|
@@ -62,9 +62,9 @@
|
|
|
62
62
|
/** Hover state for color/bg/selection-accentWeak */
|
|
63
63
|
--color-bg-selection-accent-weak-hover: var(--base-color-dark-blue-100);
|
|
64
64
|
/** Third background color for components that allow selection; Selection = choose something */
|
|
65
|
-
--color-bg-selection-neutral-default: var(--base-color-grey-
|
|
65
|
+
--color-bg-selection-neutral-default: var(--base-color-grey-200);
|
|
66
66
|
/** Hover state for color/bg/selection-neutralDefault */
|
|
67
|
-
--color-bg-selection-neutral-default-hover: var(--base-color-grey-
|
|
67
|
+
--color-bg-selection-neutral-default-hover: var(--base-color-grey-100);
|
|
68
68
|
/** Fourth background color for components that allow selection; Selection = choose something */
|
|
69
69
|
--color-bg-selection-neutral-weakest: var(--base-color-white-opaque);
|
|
70
70
|
/** Background color for success messages. The color does not suggest interactivity. */
|
package/dist/light/tokens.css
CHANGED
|
@@ -40,7 +40,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
|
|
|
40
40
|
/** Another background color for less prominent actions; Action = do something */
|
|
41
41
|
--color-bg-action-neutral-weakest: var(--base-color-white-opaque);
|
|
42
42
|
/** Hover state for color/bg/action-neutralWeakest */
|
|
43
|
-
--color-bg-action-neutral-weakest-hover: var(--base-color-grey-
|
|
43
|
+
--color-bg-action-neutral-weakest-hover: var(--base-color-grey-100);
|
|
44
44
|
/** Pressed state for color/bg/action-neutralWeakest */
|
|
45
45
|
--color-bg-action-neutral-weakest-pressed: var(--base-color-grey-250);
|
|
46
46
|
/** Background color for notification messages, not customizable. The color does not suggest interactivity. */
|
|
@@ -62,9 +62,9 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
|
|
|
62
62
|
/** Hover state for color/bg/selection-accentWeak */
|
|
63
63
|
--color-bg-selection-accent-weak-hover: var(--base-color-dark-blue-100);
|
|
64
64
|
/** Third background color for components that allow selection; Selection = choose something */
|
|
65
|
-
--color-bg-selection-neutral-default: var(--base-color-grey-
|
|
65
|
+
--color-bg-selection-neutral-default: var(--base-color-grey-200);
|
|
66
66
|
/** Hover state for color/bg/selection-neutralDefault */
|
|
67
|
-
--color-bg-selection-neutral-default-hover: var(--base-color-grey-
|
|
67
|
+
--color-bg-selection-neutral-default-hover: var(--base-color-grey-100);
|
|
68
68
|
/** Fourth background color for components that allow selection; Selection = choose something */
|
|
69
69
|
--color-bg-selection-neutral-weakest: var(--base-color-white-opaque);
|
|
70
70
|
/** Background color for success messages. The color does not suggest interactivity. */
|
package/dist/light/tokens.json
CHANGED
|
@@ -385,12 +385,12 @@
|
|
|
385
385
|
"key": "{color.bg.action-neutralWeakest-hover}",
|
|
386
386
|
"$description": "Hover state for color/bg/action-neutralWeakest",
|
|
387
387
|
"$type": "color",
|
|
388
|
-
"$value": "#
|
|
388
|
+
"$value": "#f1f1f1",
|
|
389
389
|
"isSource": true,
|
|
390
390
|
"original": {
|
|
391
391
|
"$description": "Hover state for color/bg/action-neutralWeakest",
|
|
392
392
|
"$type": "color",
|
|
393
|
-
"$value": "{base.color.grey.
|
|
393
|
+
"$value": "{base.color.grey.100}",
|
|
394
394
|
"key": "{color.bg.action-neutralWeakest-hover}"
|
|
395
395
|
},
|
|
396
396
|
"name": "ColorBgActionNeutralWeakestHover",
|
|
@@ -594,12 +594,12 @@
|
|
|
594
594
|
"key": "{color.bg.selection-neutralDefault}",
|
|
595
595
|
"$description": "Third background color for components that allow selection; Selection = choose something",
|
|
596
596
|
"$type": "color",
|
|
597
|
-
"$value": "#
|
|
597
|
+
"$value": "#e7e7e7",
|
|
598
598
|
"isSource": true,
|
|
599
599
|
"original": {
|
|
600
600
|
"$description": "Third background color for components that allow selection; Selection = choose something",
|
|
601
601
|
"$type": "color",
|
|
602
|
-
"$value": "{base.color.grey.
|
|
602
|
+
"$value": "{base.color.grey.200}",
|
|
603
603
|
"key": "{color.bg.selection-neutralDefault}"
|
|
604
604
|
},
|
|
605
605
|
"name": "ColorBgSelectionNeutralDefault",
|
|
@@ -613,12 +613,12 @@
|
|
|
613
613
|
"key": "{color.bg.selection-neutralDefault-hover}",
|
|
614
614
|
"$description": "Hover state for color/bg/selection-neutralDefault",
|
|
615
615
|
"$type": "color",
|
|
616
|
-
"$value": "#
|
|
616
|
+
"$value": "#f1f1f1",
|
|
617
617
|
"isSource": true,
|
|
618
618
|
"original": {
|
|
619
619
|
"$description": "Hover state for color/bg/selection-neutralDefault",
|
|
620
620
|
"$type": "color",
|
|
621
|
-
"$value": "{base.color.grey.
|
|
621
|
+
"$value": "{base.color.grey.100}",
|
|
622
622
|
"key": "{color.bg.selection-neutralDefault-hover}"
|
|
623
623
|
},
|
|
624
624
|
"name": "ColorBgSelectionNeutralDefaultHover",
|
package/dist/tokens.css
CHANGED
|
@@ -442,7 +442,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
|
|
|
442
442
|
/** Another background color for less prominent actions; Action = do something */
|
|
443
443
|
--color-bg-action-neutral-weakest: var(--base-color-white-opaque);
|
|
444
444
|
/** Hover state for color/bg/action-neutralWeakest */
|
|
445
|
-
--color-bg-action-neutral-weakest-hover: var(--base-color-grey-
|
|
445
|
+
--color-bg-action-neutral-weakest-hover: var(--base-color-grey-100);
|
|
446
446
|
/** Pressed state for color/bg/action-neutralWeakest */
|
|
447
447
|
--color-bg-action-neutral-weakest-pressed: var(--base-color-grey-250);
|
|
448
448
|
/** Background color for notification messages, not customizable. The color does not suggest interactivity. */
|
|
@@ -464,9 +464,9 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
|
|
|
464
464
|
/** Hover state for color/bg/selection-accentWeak */
|
|
465
465
|
--color-bg-selection-accent-weak-hover: var(--base-color-dark-blue-100);
|
|
466
466
|
/** Third background color for components that allow selection; Selection = choose something */
|
|
467
|
-
--color-bg-selection-neutral-default: var(--base-color-grey-
|
|
467
|
+
--color-bg-selection-neutral-default: var(--base-color-grey-200);
|
|
468
468
|
/** Hover state for color/bg/selection-neutralDefault */
|
|
469
|
-
--color-bg-selection-neutral-default-hover: var(--base-color-grey-
|
|
469
|
+
--color-bg-selection-neutral-default-hover: var(--base-color-grey-100);
|
|
470
470
|
/** Fourth background color for components that allow selection; Selection = choose something */
|
|
471
471
|
--color-bg-selection-neutral-weakest: var(--base-color-white-opaque);
|
|
472
472
|
/** Background color for success messages. The color does not suggest interactivity. */
|
|
@@ -759,9 +759,9 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
|
|
|
759
759
|
/** Another background color for less prominent actions; Action = do something */
|
|
760
760
|
--color-bg-action-neutral-weakest: var(--base-color-grey-800);
|
|
761
761
|
/** Hover state for color/bg/action-neutralWeakest */
|
|
762
|
-
--color-bg-action-neutral-weakest-hover: var(--base-color-grey-
|
|
762
|
+
--color-bg-action-neutral-weakest-hover: var(--base-color-grey-750);
|
|
763
763
|
/** Pressed state for color/bg/action-neutralWeakest */
|
|
764
|
-
--color-bg-action-neutral-weakest-pressed: var(--base-color-grey-
|
|
764
|
+
--color-bg-action-neutral-weakest-pressed: var(--base-color-grey-650);
|
|
765
765
|
/** Background color for notification messages, not customizable. The color does not suggest interactivity. */
|
|
766
766
|
--color-bg-assistive: var(--base-color-blue-750);
|
|
767
767
|
/** Brand-based background color, primarily for the header area. The color does not suggest interactivity. */
|
|
@@ -926,58 +926,58 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
|
|
|
926
926
|
--color-rainbow-blue-strong10: var(--base-color-blue-400);
|
|
927
927
|
--color-rainbow-blue-strong20: var(--base-color-blue-350);
|
|
928
928
|
--color-rainbow-blue-strong30: var(--base-color-blue-200);
|
|
929
|
-
--color-rainbow-blue-weak10: var(--base-color-blue-
|
|
930
|
-
--color-rainbow-blue-weak20: var(--base-color-blue-
|
|
931
|
-
--color-rainbow-blue-weak30: var(--base-color-blue-
|
|
932
|
-
--color-rainbow-blue-weak40: var(--base-color-blue-
|
|
933
|
-
--color-rainbow-brown-default: var(--base-color-brown-
|
|
934
|
-
--color-rainbow-brown-strong10: var(--base-color-brown-
|
|
935
|
-
--color-rainbow-brown-strong20: var(--base-color-brown-
|
|
936
|
-
--color-rainbow-brown-strong30: var(--base-color-brown-
|
|
937
|
-
--color-rainbow-brown-weak10: var(--base-color-brown-
|
|
938
|
-
--color-rainbow-brown-weak20: var(--base-color-brown-
|
|
939
|
-
--color-rainbow-brown-weak30: var(--base-color-brown-
|
|
940
|
-
--color-rainbow-brown-weak40: var(--base-color-brown-
|
|
941
|
-
--color-rainbow-cyan-default: var(--base-color-cyan-
|
|
942
|
-
--color-rainbow-cyan-strong10: var(--base-color-cyan-
|
|
943
|
-
--color-rainbow-cyan-strong20: var(--base-color-cyan-
|
|
944
|
-
--color-rainbow-cyan-strong30: var(--base-color-cyan-
|
|
945
|
-
--color-rainbow-cyan-weak10: var(--base-color-cyan-
|
|
946
|
-
--color-rainbow-cyan-weak20: var(--base-color-cyan-
|
|
947
|
-
--color-rainbow-cyan-weak30: var(--base-color-cyan-
|
|
948
|
-
--color-rainbow-cyan-weak40: var(--base-color-cyan-
|
|
949
|
-
--color-rainbow-dark-blue-default: var(--base-color-dark-blue-
|
|
950
|
-
--color-rainbow-dark-blue-strong10: var(--base-color-dark-blue-
|
|
951
|
-
--color-rainbow-dark-blue-strong20: var(--base-color-dark-blue-
|
|
952
|
-
--color-rainbow-dark-blue-strong30: var(--base-color-dark-blue-
|
|
953
|
-
--color-rainbow-dark-blue-weak10: var(--base-color-dark-blue-
|
|
954
|
-
--color-rainbow-dark-blue-weak20: var(--base-color-dark-blue-
|
|
955
|
-
--color-rainbow-dark-blue-weak30: var(--base-color-dark-blue-
|
|
956
|
-
--color-rainbow-dark-blue-weak40: var(--base-color-dark-blue-
|
|
957
|
-
--color-rainbow-dark-green-default: var(--base-color-dark-green-
|
|
958
|
-
--color-rainbow-dark-green-strong10: var(--base-color-dark-green-
|
|
959
|
-
--color-rainbow-dark-green-strong20: var(--base-color-dark-green-
|
|
960
|
-
--color-rainbow-dark-green-strong30: var(--base-color-dark-green-
|
|
961
|
-
--color-rainbow-dark-green-weak10: var(--base-color-dark-green-
|
|
962
|
-
--color-rainbow-dark-green-weak20: var(--base-color-dark-green-
|
|
963
|
-
--color-rainbow-dark-green-weak30: var(--base-color-dark-green-
|
|
964
|
-
--color-rainbow-dark-green-weak40: var(--base-color-dark-green-
|
|
929
|
+
--color-rainbow-blue-weak10: var(--base-color-blue-600);
|
|
930
|
+
--color-rainbow-blue-weak20: var(--base-color-blue-650);
|
|
931
|
+
--color-rainbow-blue-weak30: var(--base-color-blue-700);
|
|
932
|
+
--color-rainbow-blue-weak40: var(--base-color-blue-750);
|
|
933
|
+
--color-rainbow-brown-default: var(--base-color-brown-350);
|
|
934
|
+
--color-rainbow-brown-strong10: var(--base-color-brown-300);
|
|
935
|
+
--color-rainbow-brown-strong20: var(--base-color-brown-250);
|
|
936
|
+
--color-rainbow-brown-strong30: var(--base-color-brown-100);
|
|
937
|
+
--color-rainbow-brown-weak10: var(--base-color-brown-400);
|
|
938
|
+
--color-rainbow-brown-weak20: var(--base-color-brown-500);
|
|
939
|
+
--color-rainbow-brown-weak30: var(--base-color-brown-600);
|
|
940
|
+
--color-rainbow-brown-weak40: var(--base-color-brown-650);
|
|
941
|
+
--color-rainbow-cyan-default: var(--base-color-cyan-400);
|
|
942
|
+
--color-rainbow-cyan-strong10: var(--base-color-cyan-350);
|
|
943
|
+
--color-rainbow-cyan-strong20: var(--base-color-cyan-300);
|
|
944
|
+
--color-rainbow-cyan-strong30: var(--base-color-cyan-150);
|
|
945
|
+
--color-rainbow-cyan-weak10: var(--base-color-cyan-500);
|
|
946
|
+
--color-rainbow-cyan-weak20: var(--base-color-cyan-600);
|
|
947
|
+
--color-rainbow-cyan-weak30: var(--base-color-cyan-650);
|
|
948
|
+
--color-rainbow-cyan-weak40: var(--base-color-cyan-700);
|
|
949
|
+
--color-rainbow-dark-blue-default: var(--base-color-dark-blue-350);
|
|
950
|
+
--color-rainbow-dark-blue-strong10: var(--base-color-dark-blue-300);
|
|
951
|
+
--color-rainbow-dark-blue-strong20: var(--base-color-dark-blue-250);
|
|
952
|
+
--color-rainbow-dark-blue-strong30: var(--base-color-dark-blue-100);
|
|
953
|
+
--color-rainbow-dark-blue-weak10: var(--base-color-dark-blue-400);
|
|
954
|
+
--color-rainbow-dark-blue-weak20: var(--base-color-dark-blue-500);
|
|
955
|
+
--color-rainbow-dark-blue-weak30: var(--base-color-dark-blue-600);
|
|
956
|
+
--color-rainbow-dark-blue-weak40: var(--base-color-dark-blue-650);
|
|
957
|
+
--color-rainbow-dark-green-default: var(--base-color-dark-green-400);
|
|
958
|
+
--color-rainbow-dark-green-strong10: var(--base-color-dark-green-350);
|
|
959
|
+
--color-rainbow-dark-green-strong20: var(--base-color-dark-green-300);
|
|
960
|
+
--color-rainbow-dark-green-strong30: var(--base-color-dark-green-150);
|
|
961
|
+
--color-rainbow-dark-green-weak10: var(--base-color-dark-green-500);
|
|
962
|
+
--color-rainbow-dark-green-weak20: var(--base-color-dark-green-600);
|
|
963
|
+
--color-rainbow-dark-green-weak30: var(--base-color-dark-green-650);
|
|
964
|
+
--color-rainbow-dark-green-weak40: var(--base-color-dark-green-700);
|
|
965
965
|
--color-rainbow-green-default: var(--base-color-green-500);
|
|
966
966
|
--color-rainbow-green-strong10: var(--base-color-green-400);
|
|
967
967
|
--color-rainbow-green-strong20: var(--base-color-green-350);
|
|
968
968
|
--color-rainbow-green-strong30: var(--base-color-green-200);
|
|
969
|
-
--color-rainbow-green-weak10: var(--base-color-green-
|
|
970
|
-
--color-rainbow-green-weak20: var(--base-color-green-
|
|
971
|
-
--color-rainbow-green-weak30: var(--base-color-green-
|
|
972
|
-
--color-rainbow-green-weak40: var(--base-color-green-
|
|
969
|
+
--color-rainbow-green-weak10: var(--base-color-green-600);
|
|
970
|
+
--color-rainbow-green-weak20: var(--base-color-green-650);
|
|
971
|
+
--color-rainbow-green-weak30: var(--base-color-green-700);
|
|
972
|
+
--color-rainbow-green-weak40: var(--base-color-green-750);
|
|
973
973
|
--color-rainbow-grey-default: var(--base-color-grey-500);
|
|
974
974
|
--color-rainbow-grey-strong10: var(--base-color-grey-400);
|
|
975
975
|
--color-rainbow-grey-strong20: var(--base-color-grey-350);
|
|
976
976
|
--color-rainbow-grey-strong30: var(--base-color-grey-200);
|
|
977
|
-
--color-rainbow-grey-weak10: var(--base-color-grey-
|
|
978
|
-
--color-rainbow-grey-weak20: var(--base-color-grey-
|
|
979
|
-
--color-rainbow-grey-weak30: var(--base-color-grey-
|
|
980
|
-
--color-rainbow-grey-weak40: var(--base-color-grey-
|
|
977
|
+
--color-rainbow-grey-weak10: var(--base-color-grey-600);
|
|
978
|
+
--color-rainbow-grey-weak20: var(--base-color-grey-650);
|
|
979
|
+
--color-rainbow-grey-weak30: var(--base-color-grey-700);
|
|
980
|
+
--color-rainbow-grey-weak40: var(--base-color-grey-750);
|
|
981
981
|
/** Strong contrasting neutral color, mostly for outlines. Intended for special cases, that do not justify an extra semantic token, e.g. for outlining the selected app tile. */
|
|
982
982
|
--color-rainbow-mono-strong: var(--base-color-white-opaque);
|
|
983
983
|
/** Weak contrasting neutral color, mostly for border. Camouflage with bg/default. Intended for special cases, that do not justify an extra semantic token, e.g. for separating a foreground element from its background. */
|
|
@@ -986,44 +986,44 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
|
|
|
986
986
|
--color-rainbow-orange-strong10: var(--base-color-orange-400);
|
|
987
987
|
--color-rainbow-orange-strong20: var(--base-color-orange-350);
|
|
988
988
|
--color-rainbow-orange-strong30: var(--base-color-orange-200);
|
|
989
|
-
--color-rainbow-orange-weak10: var(--base-color-orange-
|
|
990
|
-
--color-rainbow-orange-weak20: var(--base-color-orange-
|
|
991
|
-
--color-rainbow-orange-weak30: var(--base-color-orange-
|
|
992
|
-
--color-rainbow-orange-weak40: var(--base-color-orange-
|
|
993
|
-
--color-rainbow-pink-default: var(--base-color-pink-
|
|
994
|
-
--color-rainbow-pink-strong10: var(--base-color-pink-
|
|
995
|
-
--color-rainbow-pink-strong20: var(--base-color-pink-
|
|
996
|
-
--color-rainbow-pink-strong30: var(--base-color-pink-
|
|
997
|
-
--color-rainbow-pink-weak10: var(--base-color-pink-
|
|
998
|
-
--color-rainbow-pink-weak20: var(--base-color-pink-
|
|
999
|
-
--color-rainbow-pink-weak30: var(--base-color-pink-
|
|
1000
|
-
--color-rainbow-pink-weak40: var(--base-color-pink-
|
|
1001
|
-
--color-rainbow-purple-default: var(--base-color-purple-
|
|
1002
|
-
--color-rainbow-purple-strong10: var(--base-color-purple-
|
|
1003
|
-
--color-rainbow-purple-strong20: var(--base-color-purple-
|
|
1004
|
-
--color-rainbow-purple-strong30: var(--base-color-purple-
|
|
1005
|
-
--color-rainbow-purple-weak10: var(--base-color-purple-
|
|
1006
|
-
--color-rainbow-purple-weak20: var(--base-color-purple-
|
|
1007
|
-
--color-rainbow-purple-weak30: var(--base-color-purple-
|
|
1008
|
-
--color-rainbow-purple-weak40: var(--base-color-purple-
|
|
1009
|
-
--color-rainbow-red-default: var(--base-color-red-
|
|
1010
|
-
--color-rainbow-red-strong10: var(--base-color-red-
|
|
1011
|
-
--color-rainbow-red-strong20: var(--base-color-red-
|
|
1012
|
-
--color-rainbow-red-strong30: var(--base-color-red-
|
|
1013
|
-
--color-rainbow-red-weak10: var(--base-color-red-
|
|
1014
|
-
--color-rainbow-red-weak20: var(--base-color-red-
|
|
1015
|
-
--color-rainbow-red-weak30: var(--base-color-red-
|
|
1016
|
-
--color-rainbow-red-weak40: var(--base-color-red-
|
|
989
|
+
--color-rainbow-orange-weak10: var(--base-color-orange-600);
|
|
990
|
+
--color-rainbow-orange-weak20: var(--base-color-orange-650);
|
|
991
|
+
--color-rainbow-orange-weak30: var(--base-color-orange-700);
|
|
992
|
+
--color-rainbow-orange-weak40: var(--base-color-orange-750);
|
|
993
|
+
--color-rainbow-pink-default: var(--base-color-pink-350);
|
|
994
|
+
--color-rainbow-pink-strong10: var(--base-color-pink-300);
|
|
995
|
+
--color-rainbow-pink-strong20: var(--base-color-pink-250);
|
|
996
|
+
--color-rainbow-pink-strong30: var(--base-color-pink-100);
|
|
997
|
+
--color-rainbow-pink-weak10: var(--base-color-pink-400);
|
|
998
|
+
--color-rainbow-pink-weak20: var(--base-color-pink-500);
|
|
999
|
+
--color-rainbow-pink-weak30: var(--base-color-pink-600);
|
|
1000
|
+
--color-rainbow-pink-weak40: var(--base-color-pink-650);
|
|
1001
|
+
--color-rainbow-purple-default: var(--base-color-purple-350);
|
|
1002
|
+
--color-rainbow-purple-strong10: var(--base-color-purple-300);
|
|
1003
|
+
--color-rainbow-purple-strong20: var(--base-color-purple-250);
|
|
1004
|
+
--color-rainbow-purple-strong30: var(--base-color-purple-100);
|
|
1005
|
+
--color-rainbow-purple-weak10: var(--base-color-purple-400);
|
|
1006
|
+
--color-rainbow-purple-weak20: var(--base-color-purple-500);
|
|
1007
|
+
--color-rainbow-purple-weak30: var(--base-color-purple-600);
|
|
1008
|
+
--color-rainbow-purple-weak40: var(--base-color-purple-650);
|
|
1009
|
+
--color-rainbow-red-default: var(--base-color-red-400);
|
|
1010
|
+
--color-rainbow-red-strong10: var(--base-color-red-350);
|
|
1011
|
+
--color-rainbow-red-strong20: var(--base-color-red-300);
|
|
1012
|
+
--color-rainbow-red-strong30: var(--base-color-red-150);
|
|
1013
|
+
--color-rainbow-red-weak10: var(--base-color-red-500);
|
|
1014
|
+
--color-rainbow-red-weak20: var(--base-color-red-600);
|
|
1015
|
+
--color-rainbow-red-weak30: var(--base-color-red-650);
|
|
1016
|
+
--color-rainbow-red-weak40: var(--base-color-red-700);
|
|
1017
1017
|
/** On dark backgrounds. For the foreground and the border, which are placed on a colored background that does not change with the design options. The selection is based on contrast. */
|
|
1018
1018
|
--color-rainbow-white: var(--base-color-white-opaque);
|
|
1019
1019
|
--color-rainbow-yellow-default: var(--base-color-yellow-500);
|
|
1020
1020
|
--color-rainbow-yellow-strong10: var(--base-color-yellow-400);
|
|
1021
1021
|
--color-rainbow-yellow-strong20: var(--base-color-yellow-350);
|
|
1022
1022
|
--color-rainbow-yellow-strong30: var(--base-color-yellow-200);
|
|
1023
|
-
--color-rainbow-yellow-weak10: var(--base-color-yellow-
|
|
1024
|
-
--color-rainbow-yellow-weak20: var(--base-color-yellow-
|
|
1025
|
-
--color-rainbow-yellow-weak30: var(--base-color-yellow-
|
|
1026
|
-
--color-rainbow-yellow-weak40: var(--base-color-yellow-
|
|
1023
|
+
--color-rainbow-yellow-weak10: var(--base-color-yellow-600);
|
|
1024
|
+
--color-rainbow-yellow-weak20: var(--base-color-yellow-650);
|
|
1025
|
+
--color-rainbow-yellow-weak30: var(--base-color-yellow-700);
|
|
1026
|
+
--color-rainbow-yellow-weak40: var(--base-color-yellow-750);
|
|
1027
1027
|
--color-rainbow-ai-default: linear-gradient(90deg, var(--color-rainbow-ai-default-gradient-start) 0%, var(--color-rainbow-ai-default-gradient-end) 100%);
|
|
1028
1028
|
--color-rainbow-ai-strong10: linear-gradient(90deg, var(--color-rainbow-ai-strong10-gradient-start) 0%, var(--color-rainbow-ai-strong10-gradient-end) 100%);
|
|
1029
1029
|
--color-rainbow-ai-strong20: linear-gradient(90deg, var(--color-rainbow-ai-strong20-gradient-start) 0%, var(--color-rainbow-ai-strong20-gradient-end) 100%);
|