@cas-smartdesign/design-tokens 3.0.5 → 3.0.7

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/dark/_tokens.scss +3 -3
  2. package/dist/dark/tokens.css +3 -3
  3. package/dist/dark/tokens.json +6 -6
  4. package/dist/docs/index.html +4 -4
  5. package/dist/light/_tokens.scss +4 -4
  6. package/dist/light/tokens.css +4 -4
  7. package/dist/light/tokens.json +8 -8
  8. package/dist/tokens.css +7 -7
  9. package/package.json +1 -1
package/dist/dark/_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-grey-800);
42
42
  /** Hover state for color/bg/action-neutralWeakest */
43
- --color-bg-action-neutral-weakest-hover: var(--base-color-grey-750);
43
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
44
44
  /** Pressed state for color/bg/action-neutralWeakest */
45
45
  --color-bg-action-neutral-weakest-pressed: var(--base-color-grey-650);
46
46
  /** Background color for notification messages, not customizable. The color does not suggest interactivity. */
@@ -58,7 +58,7 @@
58
58
  /** Background color for components that allow selection; customizable; Selection = choose something */
59
59
  --color-bg-selection-accent-default: var(--base-color-blue-500);
60
60
  /** Second background color for components that allow selection; customizable; Selection = choose something */
61
- --color-bg-selection-accent-weak: var(--base-color-blue-800);
61
+ --color-bg-selection-accent-weak: var(--base-color-blue-700);
62
62
  /** Hover state for color/bg/selection-accentWeak */
63
63
  --color-bg-selection-accent-weak-hover: var(--base-color-blue-750);
64
64
  /** Third background color for components that allow selection; Selection = choose something */
@@ -118,7 +118,7 @@
118
118
  /** Border color for components that allow selection; customizable; Selection = choose something */
119
119
  --color-border-selection-accent-default: var(--base-color-blue-500);
120
120
  /** Second border color for components that allow selection; customizable; Selection = choose something */
121
- --color-border-selection-accent-weak: var(--base-color-blue-750);
121
+ --color-border-selection-accent-weak: var(--base-color-blue-700);
122
122
  /** Third border color for components that allow selectio; Selection = choose something */
123
123
  --color-border-selection-neutral-default: var(--base-color-grey-500);
124
124
  /** More contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
package/dist/dark/tokens.css 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-grey-800);
42
42
  /** Hover state for color/bg/action-neutralWeakest */
43
- --color-bg-action-neutral-weakest-hover: var(--base-color-grey-750);
43
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
44
44
  /** Pressed state for color/bg/action-neutralWeakest */
45
45
  --color-bg-action-neutral-weakest-pressed: var(--base-color-grey-650);
46
46
  /** Background color for notification messages, not customizable. The color does not suggest interactivity. */
@@ -58,7 +58,7 @@
58
58
  /** Background color for components that allow selection; customizable; Selection = choose something */
59
59
  --color-bg-selection-accent-default: var(--base-color-blue-500);
60
60
  /** Second background color for components that allow selection; customizable; Selection = choose something */
61
- --color-bg-selection-accent-weak: var(--base-color-blue-800);
61
+ --color-bg-selection-accent-weak: var(--base-color-blue-700);
62
62
  /** Hover state for color/bg/selection-accentWeak */
63
63
  --color-bg-selection-accent-weak-hover: var(--base-color-blue-750);
64
64
  /** Third background color for components that allow selection; Selection = choose something */
@@ -118,7 +118,7 @@
118
118
  /** Border color for components that allow selection; customizable; Selection = choose something */
119
119
  --color-border-selection-accent-default: var(--base-color-blue-500);
120
120
  /** Second border color for components that allow selection; customizable; Selection = choose something */
121
- --color-border-selection-accent-weak: var(--base-color-blue-750);
121
+ --color-border-selection-accent-weak: var(--base-color-blue-700);
122
122
  /** Third border color for components that allow selectio; Selection = choose something */
123
123
  --color-border-selection-neutral-default: var(--base-color-grey-500);
124
124
  /** More contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
package/dist/dark/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": "#303030",
388
+ "$value": "#414141",
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.750}",
393
+ "$value": "{base.color.grey.700}",
394
394
  "key": "{color.bg.action-neutralWeakest-hover}"
395
395
  },
396
396
  "name": "ColorBgActionNeutralWeakestHover",
@@ -556,12 +556,12 @@
556
556
  "key": "{color.bg.selection-accentWeak}",
557
557
  "$description": "Second background color for components that allow selection; customizable; Selection = choose something",
558
558
  "$type": "color",
559
- "$value": "#03243c",
559
+ "$value": "#05406c",
560
560
  "isSource": true,
561
561
  "original": {
562
562
  "$description": "Second background color for components that allow selection; customizable; Selection = choose something",
563
563
  "$type": "color",
564
- "$value": "{base.color.blue.800}",
564
+ "$value": "{base.color.blue.700}",
565
565
  "key": "{color.bg.selection-accentWeak}"
566
566
  },
567
567
  "name": "ColorBgSelectionAccentWeak",
@@ -1128,12 +1128,12 @@
1128
1128
  "key": "{color.border.selection-accentWeak}",
1129
1129
  "$description": "Second border color for components that allow selection; customizable; Selection = choose something",
1130
1130
  "$type": "color",
1131
- "$value": "#043051",
1131
+ "$value": "#05406c",
1132
1132
  "isSource": true,
1133
1133
  "original": {
1134
1134
  "$description": "Second border color for components that allow selection; customizable; Selection = choose something",
1135
1135
  "$type": "color",
1136
- "$value": "{base.color.blue.750}",
1136
+ "$value": "{base.color.blue.700}",
1137
1137
  "key": "{color.border.selection-accentWeak}"
1138
1138
  },
1139
1139
  "name": "ColorBorderSelectionAccentWeak",
package/dist/docs/index.html CHANGED
@@ -1687,7 +1687,7 @@ e.g. the color green is mostly used to reinforce positive messaging. In a functi
1687
1687
  <div class="preview swatch" style="color: var(--color-fg-warning);">Lorem ipsum dolor sit amet</div>
1688
1688
  <div class="meta">
1689
1689
  <code>--color-fg-warning</code>
1690
- <code>#bf8c0d</code>
1690
+ <code>#8f690a</code>
1691
1691
  <span>Text and other foreground elements with a lower warning level. The color does not suggest interactivity.</span>
1692
1692
  </div>
1693
1693
  </div>
@@ -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>#f1f1f1</code>
1895
+ <code>#e7e7e7</code>
1896
1896
  <span>Hover state for color/bg/action-neutralWeakest</span>
1897
1897
  </div>
1898
1898
  </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>#f1f1f1</code>
1991
+ <code>#ededed</code>
1992
1992
  <span>Hover state for color/bg/selection-neutralDefault</span>
1993
1993
  </div>
1994
1994
  </div>
@@ -2208,7 +2208,7 @@ Structural styles that define separation and boundaries between UI elements</p>
2208
2208
  <div class="preview swatch" style="border: 1px solid var(--color-border-on-translucent);"></div>
2209
2209
  <div class="meta">
2210
2210
  <code>--color-border-on-translucent</code>
2211
- <code>rgba(255, 255, 255, 0.1)</code>
2211
+ <code>rgba(255, 255, 255, 0.8)</code>
2212
2212
  <span>Used in the layout on a slightly translucent background color. The color does not suggest interactivity.</span>
2213
2213
  </div>
2214
2214
  </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-100);
43
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-200);
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. */
@@ -64,7 +64,7 @@
64
64
  /** Third background color for components that allow selection; Selection = choose something */
65
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-100);
67
+ --color-bg-selection-neutral-default-hover: var(--base-color-grey-150);
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. */
@@ -114,7 +114,7 @@
114
114
  /** Borders around elements using high-contrast colors for strong backgrounds. The color does not suggest interactivity. */
115
115
  --color-border-on-color: var(--base-color-white-opaque);
116
116
  /** Used in the layout on a slightly translucent background color. The color does not suggest interactivity. */
117
- --color-border-on-translucent: var(--base-color-white-100);
117
+ --color-border-on-translucent: var(--base-color-white-800);
118
118
  /** Border color for components that allow selection; customizable; Selection = choose something */
119
119
  --color-border-selection-accent-default: var(--base-color-dark-blue-500);
120
120
  /** Second border color for components that allow selection; customizable; Selection = choose something */
@@ -180,7 +180,7 @@
180
180
  /** Text and other foreground elements that indicate success. The color does not suggest interactivity. */
181
181
  --color-fg-success: var(--base-color-dark-green-600);
182
182
  /** Text and other foreground elements with a lower warning level. The color does not suggest interactivity. */
183
- --color-fg-warning: var(--base-color-yellow-600);
183
+ --color-fg-warning: var(--base-color-yellow-650);
184
184
  /** Text with lower contrast. The color does not suggest interactivity. */
185
185
  --color-fg-weak: var(--base-color-grey-650);
186
186
  /** Text with even lower contrast. 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-100);
43
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-200);
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. */
@@ -64,7 +64,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
64
64
  /** Third background color for components that allow selection; Selection = choose something */
65
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-100);
67
+ --color-bg-selection-neutral-default-hover: var(--base-color-grey-150);
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. */
@@ -114,7 +114,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
114
114
  /** Borders around elements using high-contrast colors for strong backgrounds. The color does not suggest interactivity. */
115
115
  --color-border-on-color: var(--base-color-white-opaque);
116
116
  /** Used in the layout on a slightly translucent background color. The color does not suggest interactivity. */
117
- --color-border-on-translucent: var(--base-color-white-100);
117
+ --color-border-on-translucent: var(--base-color-white-800);
118
118
  /** Border color for components that allow selection; customizable; Selection = choose something */
119
119
  --color-border-selection-accent-default: var(--base-color-dark-blue-500);
120
120
  /** Second border color for components that allow selection; customizable; Selection = choose something */
@@ -180,7 +180,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
180
180
  /** Text and other foreground elements that indicate success. The color does not suggest interactivity. */
181
181
  --color-fg-success: var(--base-color-dark-green-600);
182
182
  /** Text and other foreground elements with a lower warning level. The color does not suggest interactivity. */
183
- --color-fg-warning: var(--base-color-yellow-600);
183
+ --color-fg-warning: var(--base-color-yellow-650);
184
184
  /** Text with lower contrast. The color does not suggest interactivity. */
185
185
  --color-fg-weak: var(--base-color-grey-650);
186
186
  /** Text with even lower contrast. 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": "#f1f1f1",
388
+ "$value": "#e7e7e7",
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.100}",
393
+ "$value": "{base.color.grey.200}",
394
394
  "key": "{color.bg.action-neutralWeakest-hover}"
395
395
  },
396
396
  "name": "ColorBgActionNeutralWeakestHover",
@@ -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": "#f1f1f1",
616
+ "$value": "#ededed",
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.100}",
621
+ "$value": "{base.color.grey.150}",
622
622
  "key": "{color.bg.selection-neutralDefault-hover}"
623
623
  },
624
624
  "name": "ColorBgSelectionNeutralDefaultHover",
@@ -1090,12 +1090,12 @@
1090
1090
  "key": "{color.border.onTranslucent}",
1091
1091
  "$description": "Used in the layout on a slightly translucent background color. The color does not suggest interactivity.",
1092
1092
  "$type": "color",
1093
- "$value": "#ffffff1a",
1093
+ "$value": "#ffffffcc",
1094
1094
  "isSource": true,
1095
1095
  "original": {
1096
1096
  "$description": "Used in the layout on a slightly translucent background color. The color does not suggest interactivity.",
1097
1097
  "$type": "color",
1098
- "$value": "{base.color.white.100}",
1098
+ "$value": "{base.color.white.800}",
1099
1099
  "key": "{color.border.onTranslucent}"
1100
1100
  },
1101
1101
  "name": "ColorBorderOnTranslucent",
@@ -1719,12 +1719,12 @@
1719
1719
  "key": "{color.fg.warning}",
1720
1720
  "$description": "Text and other foreground elements with a lower warning level. The color does not suggest interactivity.",
1721
1721
  "$type": "color",
1722
- "$value": "#bf8c0d",
1722
+ "$value": "#8f690a",
1723
1723
  "isSource": true,
1724
1724
  "original": {
1725
1725
  "$description": "Text and other foreground elements with a lower warning level. The color does not suggest interactivity.",
1726
1726
  "$type": "color",
1727
- "$value": "{base.color.yellow.600}",
1727
+ "$value": "{base.color.yellow.650}",
1728
1728
  "key": "{color.fg.warning}"
1729
1729
  },
1730
1730
  "name": "ColorFgWarning",
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-100);
445
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-200);
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. */
@@ -466,7 +466,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
466
466
  /** Third background color for components that allow selection; Selection = choose something */
467
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-100);
469
+ --color-bg-selection-neutral-default-hover: var(--base-color-grey-150);
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. */
@@ -516,7 +516,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
516
516
  /** Borders around elements using high-contrast colors for strong backgrounds. The color does not suggest interactivity. */
517
517
  --color-border-on-color: var(--base-color-white-opaque);
518
518
  /** Used in the layout on a slightly translucent background color. The color does not suggest interactivity. */
519
- --color-border-on-translucent: var(--base-color-white-100);
519
+ --color-border-on-translucent: var(--base-color-white-800);
520
520
  /** Border color for components that allow selection; customizable; Selection = choose something */
521
521
  --color-border-selection-accent-default: var(--base-color-dark-blue-500);
522
522
  /** Second border color for components that allow selection; customizable; Selection = choose something */
@@ -582,7 +582,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
582
582
  /** Text and other foreground elements that indicate success. The color does not suggest interactivity. */
583
583
  --color-fg-success: var(--base-color-dark-green-600);
584
584
  /** Text and other foreground elements with a lower warning level. The color does not suggest interactivity. */
585
- --color-fg-warning: var(--base-color-yellow-600);
585
+ --color-fg-warning: var(--base-color-yellow-650);
586
586
  /** Text with lower contrast. The color does not suggest interactivity. */
587
587
  --color-fg-weak: var(--base-color-grey-650);
588
588
  /** Text with even lower contrast. The color does not suggest interactivity. */
@@ -759,7 +759,7 @@ 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-750);
762
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
763
763
  /** Pressed state for color/bg/action-neutralWeakest */
764
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. */
@@ -777,7 +777,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
777
777
  /** Background color for components that allow selection; customizable; Selection = choose something */
778
778
  --color-bg-selection-accent-default: var(--base-color-blue-500);
779
779
  /** Second background color for components that allow selection; customizable; Selection = choose something */
780
- --color-bg-selection-accent-weak: var(--base-color-blue-800);
780
+ --color-bg-selection-accent-weak: var(--base-color-blue-700);
781
781
  /** Hover state for color/bg/selection-accentWeak */
782
782
  --color-bg-selection-accent-weak-hover: var(--base-color-blue-750);
783
783
  /** Third background color for components that allow selection; Selection = choose something */
@@ -837,7 +837,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
837
837
  /** Border color for components that allow selection; customizable; Selection = choose something */
838
838
  --color-border-selection-accent-default: var(--base-color-blue-500);
839
839
  /** Second border color for components that allow selection; customizable; Selection = choose something */
840
- --color-border-selection-accent-weak: var(--base-color-blue-750);
840
+ --color-border-selection-accent-weak: var(--base-color-blue-700);
841
841
  /** Third border color for components that allow selectio; Selection = choose something */
842
842
  --color-border-selection-neutral-default: var(--base-color-grey-500);
843
843
  /** More contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/design-tokens",
3
- "version": "3.0.5",
3
+ "version": "3.0.7",
4
4
  "description": "Design tokens for SmartDesign",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "files": [