@cas-smartdesign/design-tokens 3.0.5 → 3.0.6

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.
@@ -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. */
@@ -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. */
@@ -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",
@@ -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>
@@ -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. */
@@ -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. */
@@ -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",
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. */
@@ -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.6",
4
4
  "description": "Design tokens for SmartDesign",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "files": [