@cas-smartdesign/design-tokens 3.0.1 → 3.0.3

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 +14 -14
  2. package/dist/dark/tokens.css +14 -14
  3. package/dist/dark/tokens.json +28 -28
  4. package/dist/docs/index.html +2 -2
  5. package/dist/light/_tokens.scss +2 -2
  6. package/dist/light/tokens.css +2 -2
  7. package/dist/light/tokens.json +4 -4
  8. package/dist/tokens.css +16 -16
  9. package/package.json +1 -1
package/dist/dark/_tokens.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  /** Default background color for “call-to-actions”; customisable; Action = do something */
5
5
  --color-bg-action-accent-default: var(--base-color-blue-500);
6
6
  /** Hover state for color/bg/action-accentDefault */
7
- --color-bg-action-accent-default-hover: var(--base-color-blue-600);
7
+ --color-bg-action-accent-default-hover: var(--base-color-blue-400);
8
8
  /** Pressed state for color/bg/action-accentDefault */
9
- --color-bg-action-accent-default-pressed: var(--base-color-blue-650);
9
+ --color-bg-action-accent-default-pressed: var(--base-color-blue-350);
10
10
  /** Another background color for less prominent actions; customisable; Action = do something */
11
11
  --color-bg-action-accent-weak: var(--base-color-blue-850);
12
12
  /** Hover state for color/bg/action-accentWeak */
@@ -18,7 +18,7 @@
18
18
  /** Hover state for color/bg/action-accentWeakest */
19
19
  --color-bg-action-accent-weakest-hover: var(--base-color-dark-blue-750);
20
20
  /** Pressed state for color/bg/action-accentWeakest */
21
- --color-bg-action-accent-weakest-pressed: var(--base-color-dark-blue-800);
21
+ --color-bg-action-accent-weakest-pressed: var(--base-color-dark-blue-700);
22
22
  /** Background color for interactive elements that have a destructive or caution-critical effect; Action = do something */
23
23
  --color-bg-action-danger-default: var(--base-color-red-800);
24
24
  /** Hover state for color/bg/action-dangerDefault */
@@ -60,7 +60,7 @@
60
60
  /** Second background color for components that allow selection; customizable; Selection = choose something */
61
61
  --color-bg-selection-accent-weak: var(--base-color-blue-800);
62
62
  /** Hover state for color/bg/selection-accentWeak */
63
- --color-bg-selection-accent-weak-hover: var(--base-color-blue-850);
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 */
65
65
  --color-bg-selection-neutral-default: var(--base-color-grey-700);
66
66
  /** Hover state for color/bg/selection-neutralDefault */
@@ -80,15 +80,15 @@
80
80
  /** Default border color for important actions; customisable; Action = do something */
81
81
  --color-border-action-accent-default: var(--base-color-blue-500);
82
82
  /** Hover state for color/border/action-accentDefault */
83
- --color-border-action-accent-default-hover: var(--base-color-blue-600);
83
+ --color-border-action-accent-default-hover: var(--base-color-blue-400);
84
84
  /** Pressed state for color/border/action-accentDefault */
85
- --color-border-action-accent-default-pressed: var(--base-color-blue-650);
85
+ --color-border-action-accent-default-pressed: var(--base-color-blue-350);
86
86
  /** border color for interactive elements that have a destructive or caution-critical effect; Action = do something */
87
87
  --color-border-action-danger-default: var(--base-color-red-400);
88
88
  /** Hover state for color/border/action-dangerDefault */
89
- --color-border-action-danger-default-hover: var(--base-color-red-500);
89
+ --color-border-action-danger-default-hover: var(--base-color-red-350);
90
90
  /** Pressed state for color/border/action-dangerDefault */
91
- --color-border-action-danger-default-pressed: var(--base-color-red-600);
91
+ --color-border-action-danger-default-pressed: var(--base-color-red-300);
92
92
  /** Default neutral border color for actions; Action = do something */
93
93
  --color-border-action-neutral-default: var(--base-color-grey-500);
94
94
  /** Hover state for color/border/action-neutralDefault */
@@ -138,21 +138,21 @@
138
138
  /** Default color for interactive text (hyperlinks) and other interactive foreground elements; customisable; Action = do something */
139
139
  --color-fg-action-accent-default: var(--base-color-blue-500);
140
140
  /** Hover state for color/fg/action-accentDefault */
141
- --color-fg-action-accent-default-hover: var(--base-color-blue-600);
141
+ --color-fg-action-accent-default-hover: var(--base-color-blue-400);
142
142
  /** Pressed state for color/fg/action-accentDefault */
143
- --color-fg-action-accent-default-pressed: var(--base-color-blue-700);
143
+ --color-fg-action-accent-default-pressed: var(--base-color-blue-350);
144
144
  /** Foreground color for interactive elements that have a destructive or caution-critical effect; Action = do something */
145
145
  --color-fg-action-danger-default: var(--base-color-red-400);
146
146
  /** Hover state for color/fg/action-dangerDefault */
147
- --color-fg-action-danger-default-hover: var(--base-color-red-500);
147
+ --color-fg-action-danger-default-hover: var(--base-color-red-350);
148
148
  /** Pressed state for color/fg/action-dangerDefault */
149
- --color-fg-action-danger-default-pressed: var(--base-color-red-600);
149
+ --color-fg-action-danger-default-pressed: var(--base-color-red-300);
150
150
  /** Default neutral foreground color for actions.; Action = do something */
151
151
  --color-fg-action-neutral-default: var(--base-color-white-opaque);
152
152
  /** Hover state for color/fg/action-neutralDefault */
153
- --color-fg-action-neutral-default-hover: var(--base-color-white-opaque);
153
+ --color-fg-action-neutral-default-hover: var(--base-color-grey-150);
154
154
  /** Pressed state for color/fg/action-neutralDefault */
155
- --color-fg-action-neutral-default-pressed: var(--base-color-white-opaque);
155
+ --color-fg-action-neutral-default-pressed: var(--base-color-grey-200);
156
156
  /** Interactive text with even lower prominence; Action = do something */
157
157
  --color-fg-action-neutral-weak: var(--base-color-grey-400);
158
158
  /** Hover state for color/fg/action-neutralWeak */
package/dist/dark/tokens.css CHANGED
@@ -4,9 +4,9 @@
4
4
  /** Default background color for “call-to-actions”; customisable; Action = do something */
5
5
  --color-bg-action-accent-default: var(--base-color-blue-500);
6
6
  /** Hover state for color/bg/action-accentDefault */
7
- --color-bg-action-accent-default-hover: var(--base-color-blue-600);
7
+ --color-bg-action-accent-default-hover: var(--base-color-blue-400);
8
8
  /** Pressed state for color/bg/action-accentDefault */
9
- --color-bg-action-accent-default-pressed: var(--base-color-blue-650);
9
+ --color-bg-action-accent-default-pressed: var(--base-color-blue-350);
10
10
  /** Another background color for less prominent actions; customisable; Action = do something */
11
11
  --color-bg-action-accent-weak: var(--base-color-blue-850);
12
12
  /** Hover state for color/bg/action-accentWeak */
@@ -18,7 +18,7 @@
18
18
  /** Hover state for color/bg/action-accentWeakest */
19
19
  --color-bg-action-accent-weakest-hover: var(--base-color-dark-blue-750);
20
20
  /** Pressed state for color/bg/action-accentWeakest */
21
- --color-bg-action-accent-weakest-pressed: var(--base-color-dark-blue-800);
21
+ --color-bg-action-accent-weakest-pressed: var(--base-color-dark-blue-700);
22
22
  /** Background color for interactive elements that have a destructive or caution-critical effect; Action = do something */
23
23
  --color-bg-action-danger-default: var(--base-color-red-800);
24
24
  /** Hover state for color/bg/action-dangerDefault */
@@ -60,7 +60,7 @@
60
60
  /** Second background color for components that allow selection; customizable; Selection = choose something */
61
61
  --color-bg-selection-accent-weak: var(--base-color-blue-800);
62
62
  /** Hover state for color/bg/selection-accentWeak */
63
- --color-bg-selection-accent-weak-hover: var(--base-color-blue-850);
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 */
65
65
  --color-bg-selection-neutral-default: var(--base-color-grey-700);
66
66
  /** Hover state for color/bg/selection-neutralDefault */
@@ -80,15 +80,15 @@
80
80
  /** Default border color for important actions; customisable; Action = do something */
81
81
  --color-border-action-accent-default: var(--base-color-blue-500);
82
82
  /** Hover state for color/border/action-accentDefault */
83
- --color-border-action-accent-default-hover: var(--base-color-blue-600);
83
+ --color-border-action-accent-default-hover: var(--base-color-blue-400);
84
84
  /** Pressed state for color/border/action-accentDefault */
85
- --color-border-action-accent-default-pressed: var(--base-color-blue-650);
85
+ --color-border-action-accent-default-pressed: var(--base-color-blue-350);
86
86
  /** border color for interactive elements that have a destructive or caution-critical effect; Action = do something */
87
87
  --color-border-action-danger-default: var(--base-color-red-400);
88
88
  /** Hover state for color/border/action-dangerDefault */
89
- --color-border-action-danger-default-hover: var(--base-color-red-500);
89
+ --color-border-action-danger-default-hover: var(--base-color-red-350);
90
90
  /** Pressed state for color/border/action-dangerDefault */
91
- --color-border-action-danger-default-pressed: var(--base-color-red-600);
91
+ --color-border-action-danger-default-pressed: var(--base-color-red-300);
92
92
  /** Default neutral border color for actions; Action = do something */
93
93
  --color-border-action-neutral-default: var(--base-color-grey-500);
94
94
  /** Hover state for color/border/action-neutralDefault */
@@ -138,21 +138,21 @@
138
138
  /** Default color for interactive text (hyperlinks) and other interactive foreground elements; customisable; Action = do something */
139
139
  --color-fg-action-accent-default: var(--base-color-blue-500);
140
140
  /** Hover state for color/fg/action-accentDefault */
141
- --color-fg-action-accent-default-hover: var(--base-color-blue-600);
141
+ --color-fg-action-accent-default-hover: var(--base-color-blue-400);
142
142
  /** Pressed state for color/fg/action-accentDefault */
143
- --color-fg-action-accent-default-pressed: var(--base-color-blue-700);
143
+ --color-fg-action-accent-default-pressed: var(--base-color-blue-350);
144
144
  /** Foreground color for interactive elements that have a destructive or caution-critical effect; Action = do something */
145
145
  --color-fg-action-danger-default: var(--base-color-red-400);
146
146
  /** Hover state for color/fg/action-dangerDefault */
147
- --color-fg-action-danger-default-hover: var(--base-color-red-500);
147
+ --color-fg-action-danger-default-hover: var(--base-color-red-350);
148
148
  /** Pressed state for color/fg/action-dangerDefault */
149
- --color-fg-action-danger-default-pressed: var(--base-color-red-600);
149
+ --color-fg-action-danger-default-pressed: var(--base-color-red-300);
150
150
  /** Default neutral foreground color for actions.; Action = do something */
151
151
  --color-fg-action-neutral-default: var(--base-color-white-opaque);
152
152
  /** Hover state for color/fg/action-neutralDefault */
153
- --color-fg-action-neutral-default-hover: var(--base-color-white-opaque);
153
+ --color-fg-action-neutral-default-hover: var(--base-color-grey-150);
154
154
  /** Pressed state for color/fg/action-neutralDefault */
155
- --color-fg-action-neutral-default-pressed: var(--base-color-white-opaque);
155
+ --color-fg-action-neutral-default-pressed: var(--base-color-grey-200);
156
156
  /** Interactive text with even lower prominence; Action = do something */
157
157
  --color-fg-action-neutral-weak: var(--base-color-grey-400);
158
158
  /** Hover state for color/fg/action-neutralWeak */
package/dist/dark/tokens.json CHANGED
@@ -43,12 +43,12 @@
43
43
  "key": "{color.bg.action-accentDefault-hover}",
44
44
  "$description": "Hover state for color/bg/action-accentDefault",
45
45
  "$type": "color",
46
- "$value": "#0a72bf",
46
+ "$value": "#4ab2ff",
47
47
  "isSource": true,
48
48
  "original": {
49
49
  "$description": "Hover state for color/bg/action-accentDefault",
50
50
  "$type": "color",
51
- "$value": "{base.color.blue.600}",
51
+ "$value": "{base.color.blue.400}",
52
52
  "key": "{color.bg.action-accentDefault-hover}"
53
53
  },
54
54
  "name": "ColorBgActionAccentDefaultHover",
@@ -62,12 +62,12 @@
62
62
  "key": "{color.bg.action-accentDefault-pressed}",
63
63
  "$description": "Pressed state for color/bg/action-accentDefault",
64
64
  "$type": "color",
65
- "$value": "#07568f",
65
+ "$value": "#77c5ff",
66
66
  "isSource": true,
67
67
  "original": {
68
68
  "$description": "Pressed state for color/bg/action-accentDefault",
69
69
  "$type": "color",
70
- "$value": "{base.color.blue.650}",
70
+ "$value": "{base.color.blue.350}",
71
71
  "key": "{color.bg.action-accentDefault-pressed}"
72
72
  },
73
73
  "name": "ColorBgActionAccentDefaultPressed",
@@ -176,12 +176,12 @@
176
176
  "key": "{color.bg.action-accentWeakest-pressed}",
177
177
  "$description": "Pressed state for color/bg/action-accentWeakest",
178
178
  "$type": "color",
179
- "$value": "#05182c",
179
+ "$value": "#082b4e",
180
180
  "isSource": true,
181
181
  "original": {
182
182
  "$description": "Pressed state for color/bg/action-accentWeakest",
183
183
  "$type": "color",
184
- "$value": "{base.color.darkBlue.800}",
184
+ "$value": "{base.color.darkBlue.700}",
185
185
  "key": "{color.bg.action-accentWeakest-pressed}"
186
186
  },
187
187
  "name": "ColorBgActionAccentWeakestPressed",
@@ -575,12 +575,12 @@
575
575
  "key": "{color.bg.selection-accentWeak-hover}",
576
576
  "$description": "Hover state for color/bg/selection-accentWeak",
577
577
  "$type": "color",
578
- "$value": "#021b2d",
578
+ "$value": "#043051",
579
579
  "isSource": true,
580
580
  "original": {
581
581
  "$description": "Hover state for color/bg/selection-accentWeak",
582
582
  "$type": "color",
583
- "$value": "{base.color.blue.850}",
583
+ "$value": "{base.color.blue.750}",
584
584
  "key": "{color.bg.selection-accentWeak-hover}"
585
585
  },
586
586
  "name": "ColorBgSelectionAccentWeakHover",
@@ -767,12 +767,12 @@
767
767
  "key": "{color.border.action-accentDefault-hover}",
768
768
  "$description": "Hover state for color/border/action-accentDefault",
769
769
  "$type": "color",
770
- "$value": "#0a72bf",
770
+ "$value": "#4ab2ff",
771
771
  "isSource": true,
772
772
  "original": {
773
773
  "$description": "Hover state for color/border/action-accentDefault",
774
774
  "$type": "color",
775
- "$value": "{base.color.blue.600}",
775
+ "$value": "{base.color.blue.400}",
776
776
  "key": "{color.border.action-accentDefault-hover}"
777
777
  },
778
778
  "name": "ColorBorderActionAccentDefaultHover",
@@ -786,12 +786,12 @@
786
786
  "key": "{color.border.action-accentDefault-pressed}",
787
787
  "$description": "Pressed state for color/border/action-accentDefault",
788
788
  "$type": "color",
789
- "$value": "#07568f",
789
+ "$value": "#77c5ff",
790
790
  "isSource": true,
791
791
  "original": {
792
792
  "$description": "Pressed state for color/border/action-accentDefault",
793
793
  "$type": "color",
794
- "$value": "{base.color.blue.650}",
794
+ "$value": "{base.color.blue.350}",
795
795
  "key": "{color.border.action-accentDefault-pressed}"
796
796
  },
797
797
  "name": "ColorBorderActionAccentDefaultPressed",
@@ -824,12 +824,12 @@
824
824
  "key": "{color.border.action-dangerDefault-hover}",
825
825
  "$description": "Hover state for color/border/action-dangerDefault",
826
826
  "$type": "color",
827
- "$value": "#e2001a",
827
+ "$value": "#ef707e",
828
828
  "isSource": true,
829
829
  "original": {
830
830
  "$description": "Hover state for color/border/action-dangerDefault",
831
831
  "$type": "color",
832
- "$value": "{base.color.red.500}",
832
+ "$value": "{base.color.red.350}",
833
833
  "key": "{color.border.action-dangerDefault-hover}"
834
834
  },
835
835
  "name": "ColorBorderActionDangerDefaultHover",
@@ -843,12 +843,12 @@
843
843
  "key": "{color.border.action-dangerDefault-pressed}",
844
844
  "$description": "Pressed state for color/border/action-dangerDefault",
845
845
  "$type": "color",
846
- "$value": "#a90014",
846
+ "$value": "#f3939e",
847
847
  "isSource": true,
848
848
  "original": {
849
849
  "$description": "Pressed state for color/border/action-dangerDefault",
850
850
  "$type": "color",
851
- "$value": "{base.color.red.600}",
851
+ "$value": "{base.color.red.300}",
852
852
  "key": "{color.border.action-dangerDefault-pressed}"
853
853
  },
854
854
  "name": "ColorBorderActionDangerDefaultPressed",
@@ -1320,12 +1320,12 @@
1320
1320
  "key": "{color.fg.action-accentDefault-hover}",
1321
1321
  "$description": "Hover state for color/fg/action-accentDefault",
1322
1322
  "$type": "color",
1323
- "$value": "#0a72bf",
1323
+ "$value": "#4ab2ff",
1324
1324
  "isSource": true,
1325
1325
  "original": {
1326
1326
  "$description": "Hover state for color/fg/action-accentDefault",
1327
1327
  "$type": "color",
1328
- "$value": "{base.color.blue.600}",
1328
+ "$value": "{base.color.blue.400}",
1329
1329
  "key": "{color.fg.action-accentDefault-hover}"
1330
1330
  },
1331
1331
  "name": "ColorFgActionAccentDefaultHover",
@@ -1339,12 +1339,12 @@
1339
1339
  "key": "{color.fg.action-accentDefault-pressed}",
1340
1340
  "$description": "Pressed state for color/fg/action-accentDefault",
1341
1341
  "$type": "color",
1342
- "$value": "#05406c",
1342
+ "$value": "#77c5ff",
1343
1343
  "isSource": true,
1344
1344
  "original": {
1345
1345
  "$description": "Pressed state for color/fg/action-accentDefault",
1346
1346
  "$type": "color",
1347
- "$value": "{base.color.blue.700}",
1347
+ "$value": "{base.color.blue.350}",
1348
1348
  "key": "{color.fg.action-accentDefault-pressed}"
1349
1349
  },
1350
1350
  "name": "ColorFgActionAccentDefaultPressed",
@@ -1377,12 +1377,12 @@
1377
1377
  "key": "{color.fg.action-dangerDefault-hover}",
1378
1378
  "$description": "Hover state for color/fg/action-dangerDefault",
1379
1379
  "$type": "color",
1380
- "$value": "#e2001a",
1380
+ "$value": "#ef707e",
1381
1381
  "isSource": true,
1382
1382
  "original": {
1383
1383
  "$description": "Hover state for color/fg/action-dangerDefault",
1384
1384
  "$type": "color",
1385
- "$value": "{base.color.red.500}",
1385
+ "$value": "{base.color.red.350}",
1386
1386
  "key": "{color.fg.action-dangerDefault-hover}"
1387
1387
  },
1388
1388
  "name": "ColorFgActionDangerDefaultHover",
@@ -1396,12 +1396,12 @@
1396
1396
  "key": "{color.fg.action-dangerDefault-pressed}",
1397
1397
  "$description": "Pressed state for color/fg/action-dangerDefault",
1398
1398
  "$type": "color",
1399
- "$value": "#a90014",
1399
+ "$value": "#f3939e",
1400
1400
  "isSource": true,
1401
1401
  "original": {
1402
1402
  "$description": "Pressed state for color/fg/action-dangerDefault",
1403
1403
  "$type": "color",
1404
- "$value": "{base.color.red.600}",
1404
+ "$value": "{base.color.red.300}",
1405
1405
  "key": "{color.fg.action-dangerDefault-pressed}"
1406
1406
  },
1407
1407
  "name": "ColorFgActionDangerDefaultPressed",
@@ -1434,12 +1434,12 @@
1434
1434
  "key": "{color.fg.action-neutralDefault-hover}",
1435
1435
  "$description": "Hover state for color/fg/action-neutralDefault",
1436
1436
  "$type": "color",
1437
- "$value": "#ffffff",
1437
+ "$value": "#ededed",
1438
1438
  "isSource": true,
1439
1439
  "original": {
1440
1440
  "$description": "Hover state for color/fg/action-neutralDefault",
1441
1441
  "$type": "color",
1442
- "$value": "{base.color.white.opaque}",
1442
+ "$value": "{base.color.grey.150}",
1443
1443
  "key": "{color.fg.action-neutralDefault-hover}"
1444
1444
  },
1445
1445
  "name": "ColorFgActionNeutralDefaultHover",
@@ -1453,12 +1453,12 @@
1453
1453
  "key": "{color.fg.action-neutralDefault-pressed}",
1454
1454
  "$description": "Pressed state for color/fg/action-neutralDefault",
1455
1455
  "$type": "color",
1456
- "$value": "#ffffff",
1456
+ "$value": "#e7e7e7",
1457
1457
  "isSource": true,
1458
1458
  "original": {
1459
1459
  "$description": "Pressed state for color/fg/action-neutralDefault",
1460
1460
  "$type": "color",
1461
- "$value": "{base.color.white.opaque}",
1461
+ "$value": "{base.color.grey.200}",
1462
1462
  "key": "{color.fg.action-neutralDefault-pressed}"
1463
1463
  },
1464
1464
  "name": "ColorFgActionNeutralDefaultPressed",
package/dist/docs/index.html CHANGED
@@ -1596,7 +1596,7 @@ e.g. the color green is mostly used to reinforce positive messaging. In a functi
1596
1596
  <div class="preview swatch" style="color: var(--color-fg-action-neutral-default-hover);">Lorem ipsum dolor sit amet</div>
1597
1597
  <div class="meta">
1598
1598
  <code>--color-fg-action-neutral-default-hover</code>
1599
- <code>#111111</code>
1599
+ <code>#1b1b1b</code>
1600
1600
  <span>Hover state for color/fg/action-neutralDefault</span>
1601
1601
  </div>
1602
1602
  </div>
@@ -1604,7 +1604,7 @@ e.g. the color green is mostly used to reinforce positive messaging. In a functi
1604
1604
  <div class="preview swatch" style="color: var(--color-fg-action-neutral-default-pressed);">Lorem ipsum dolor sit amet</div>
1605
1605
  <div class="meta">
1606
1606
  <code>--color-fg-action-neutral-default-pressed</code>
1607
- <code>#111111</code>
1607
+ <code>#242424</code>
1608
1608
  <span>Pressed state for color/fg/action-neutralDefault</span>
1609
1609
  </div>
1610
1610
  </div>
package/dist/light/_tokens.scss CHANGED
@@ -150,9 +150,9 @@
150
150
  /** Default neutral foreground color for actions.; Action = do something */
151
151
  --color-fg-action-neutral-default: var(--base-color-black-opaque);
152
152
  /** Hover state for color/fg/action-neutralDefault */
153
- --color-fg-action-neutral-default-hover: var(--base-color-black-opaque);
153
+ --color-fg-action-neutral-default-hover: var(--base-color-grey-850);
154
154
  /** Pressed state for color/fg/action-neutralDefault */
155
- --color-fg-action-neutral-default-pressed: var(--base-color-black-opaque);
155
+ --color-fg-action-neutral-default-pressed: var(--base-color-grey-800);
156
156
  /** Interactive text with even lower prominence; Action = do something */
157
157
  --color-fg-action-neutral-weak: var(--base-color-grey-600);
158
158
  /** Hover state for color/fg/action-neutralWeak */
package/dist/light/tokens.css CHANGED
@@ -150,9 +150,9 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
150
150
  /** Default neutral foreground color for actions.; Action = do something */
151
151
  --color-fg-action-neutral-default: var(--base-color-black-opaque);
152
152
  /** Hover state for color/fg/action-neutralDefault */
153
- --color-fg-action-neutral-default-hover: var(--base-color-black-opaque);
153
+ --color-fg-action-neutral-default-hover: var(--base-color-grey-850);
154
154
  /** Pressed state for color/fg/action-neutralDefault */
155
- --color-fg-action-neutral-default-pressed: var(--base-color-black-opaque);
155
+ --color-fg-action-neutral-default-pressed: var(--base-color-grey-800);
156
156
  /** Interactive text with even lower prominence; Action = do something */
157
157
  --color-fg-action-neutral-weak: var(--base-color-grey-600);
158
158
  /** Hover state for color/fg/action-neutralWeak */
package/dist/light/tokens.json CHANGED
@@ -1434,12 +1434,12 @@
1434
1434
  "key": "{color.fg.action-neutralDefault-hover}",
1435
1435
  "$description": "Hover state for color/fg/action-neutralDefault",
1436
1436
  "$type": "color",
1437
- "$value": "#111111",
1437
+ "$value": "#1b1b1b",
1438
1438
  "isSource": true,
1439
1439
  "original": {
1440
1440
  "$description": "Hover state for color/fg/action-neutralDefault",
1441
1441
  "$type": "color",
1442
- "$value": "{base.color.black.opaque}",
1442
+ "$value": "{base.color.grey.850}",
1443
1443
  "key": "{color.fg.action-neutralDefault-hover}"
1444
1444
  },
1445
1445
  "name": "ColorFgActionNeutralDefaultHover",
@@ -1453,12 +1453,12 @@
1453
1453
  "key": "{color.fg.action-neutralDefault-pressed}",
1454
1454
  "$description": "Pressed state for color/fg/action-neutralDefault",
1455
1455
  "$type": "color",
1456
- "$value": "#111111",
1456
+ "$value": "#242424",
1457
1457
  "isSource": true,
1458
1458
  "original": {
1459
1459
  "$description": "Pressed state for color/fg/action-neutralDefault",
1460
1460
  "$type": "color",
1461
- "$value": "{base.color.black.opaque}",
1461
+ "$value": "{base.color.grey.800}",
1462
1462
  "key": "{color.fg.action-neutralDefault-pressed}"
1463
1463
  },
1464
1464
  "name": "ColorFgActionNeutralDefaultPressed",
package/dist/tokens.css CHANGED
@@ -552,9 +552,9 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
552
552
  /** Default neutral foreground color for actions.; Action = do something */
553
553
  --color-fg-action-neutral-default: var(--base-color-black-opaque);
554
554
  /** Hover state for color/fg/action-neutralDefault */
555
- --color-fg-action-neutral-default-hover: var(--base-color-black-opaque);
555
+ --color-fg-action-neutral-default-hover: var(--base-color-grey-850);
556
556
  /** Pressed state for color/fg/action-neutralDefault */
557
- --color-fg-action-neutral-default-pressed: var(--base-color-black-opaque);
557
+ --color-fg-action-neutral-default-pressed: var(--base-color-grey-800);
558
558
  /** Interactive text with even lower prominence; Action = do something */
559
559
  --color-fg-action-neutral-weak: var(--base-color-grey-600);
560
560
  /** Hover state for color/fg/action-neutralWeak */
@@ -723,9 +723,9 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
723
723
  /** Default background color for “call-to-actions”; customisable; Action = do something */
724
724
  --color-bg-action-accent-default: var(--base-color-blue-500);
725
725
  /** Hover state for color/bg/action-accentDefault */
726
- --color-bg-action-accent-default-hover: var(--base-color-blue-600);
726
+ --color-bg-action-accent-default-hover: var(--base-color-blue-400);
727
727
  /** Pressed state for color/bg/action-accentDefault */
728
- --color-bg-action-accent-default-pressed: var(--base-color-blue-650);
728
+ --color-bg-action-accent-default-pressed: var(--base-color-blue-350);
729
729
  /** Another background color for less prominent actions; customisable; Action = do something */
730
730
  --color-bg-action-accent-weak: var(--base-color-blue-850);
731
731
  /** Hover state for color/bg/action-accentWeak */
@@ -737,7 +737,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
737
737
  /** Hover state for color/bg/action-accentWeakest */
738
738
  --color-bg-action-accent-weakest-hover: var(--base-color-dark-blue-750);
739
739
  /** Pressed state for color/bg/action-accentWeakest */
740
- --color-bg-action-accent-weakest-pressed: var(--base-color-dark-blue-800);
740
+ --color-bg-action-accent-weakest-pressed: var(--base-color-dark-blue-700);
741
741
  /** Background color for interactive elements that have a destructive or caution-critical effect; Action = do something */
742
742
  --color-bg-action-danger-default: var(--base-color-red-800);
743
743
  /** Hover state for color/bg/action-dangerDefault */
@@ -779,7 +779,7 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
779
779
  /** Second background color for components that allow selection; customizable; Selection = choose something */
780
780
  --color-bg-selection-accent-weak: var(--base-color-blue-800);
781
781
  /** Hover state for color/bg/selection-accentWeak */
782
- --color-bg-selection-accent-weak-hover: var(--base-color-blue-850);
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 */
784
784
  --color-bg-selection-neutral-default: var(--base-color-grey-700);
785
785
  /** Hover state for color/bg/selection-neutralDefault */
@@ -799,15 +799,15 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
799
799
  /** Default border color for important actions; customisable; Action = do something */
800
800
  --color-border-action-accent-default: var(--base-color-blue-500);
801
801
  /** Hover state for color/border/action-accentDefault */
802
- --color-border-action-accent-default-hover: var(--base-color-blue-600);
802
+ --color-border-action-accent-default-hover: var(--base-color-blue-400);
803
803
  /** Pressed state for color/border/action-accentDefault */
804
- --color-border-action-accent-default-pressed: var(--base-color-blue-650);
804
+ --color-border-action-accent-default-pressed: var(--base-color-blue-350);
805
805
  /** border color for interactive elements that have a destructive or caution-critical effect; Action = do something */
806
806
  --color-border-action-danger-default: var(--base-color-red-400);
807
807
  /** Hover state for color/border/action-dangerDefault */
808
- --color-border-action-danger-default-hover: var(--base-color-red-500);
808
+ --color-border-action-danger-default-hover: var(--base-color-red-350);
809
809
  /** Pressed state for color/border/action-dangerDefault */
810
- --color-border-action-danger-default-pressed: var(--base-color-red-600);
810
+ --color-border-action-danger-default-pressed: var(--base-color-red-300);
811
811
  /** Default neutral border color for actions; Action = do something */
812
812
  --color-border-action-neutral-default: var(--base-color-grey-500);
813
813
  /** Hover state for color/border/action-neutralDefault */
@@ -857,21 +857,21 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
857
857
  /** Default color for interactive text (hyperlinks) and other interactive foreground elements; customisable; Action = do something */
858
858
  --color-fg-action-accent-default: var(--base-color-blue-500);
859
859
  /** Hover state for color/fg/action-accentDefault */
860
- --color-fg-action-accent-default-hover: var(--base-color-blue-600);
860
+ --color-fg-action-accent-default-hover: var(--base-color-blue-400);
861
861
  /** Pressed state for color/fg/action-accentDefault */
862
- --color-fg-action-accent-default-pressed: var(--base-color-blue-700);
862
+ --color-fg-action-accent-default-pressed: var(--base-color-blue-350);
863
863
  /** Foreground color for interactive elements that have a destructive or caution-critical effect; Action = do something */
864
864
  --color-fg-action-danger-default: var(--base-color-red-400);
865
865
  /** Hover state for color/fg/action-dangerDefault */
866
- --color-fg-action-danger-default-hover: var(--base-color-red-500);
866
+ --color-fg-action-danger-default-hover: var(--base-color-red-350);
867
867
  /** Pressed state for color/fg/action-dangerDefault */
868
- --color-fg-action-danger-default-pressed: var(--base-color-red-600);
868
+ --color-fg-action-danger-default-pressed: var(--base-color-red-300);
869
869
  /** Default neutral foreground color for actions.; Action = do something */
870
870
  --color-fg-action-neutral-default: var(--base-color-white-opaque);
871
871
  /** Hover state for color/fg/action-neutralDefault */
872
- --color-fg-action-neutral-default-hover: var(--base-color-white-opaque);
872
+ --color-fg-action-neutral-default-hover: var(--base-color-grey-150);
873
873
  /** Pressed state for color/fg/action-neutralDefault */
874
- --color-fg-action-neutral-default-pressed: var(--base-color-white-opaque);
874
+ --color-fg-action-neutral-default-pressed: var(--base-color-grey-200);
875
875
  /** Interactive text with even lower prominence; Action = do something */
876
876
  --color-fg-action-neutral-weak: var(--base-color-grey-400);
877
877
  /** Hover state for color/fg/action-neutralWeak */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/design-tokens",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
4
4
  "description": "Design tokens for SmartDesign",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "files": [