@cas-smartdesign/design-tokens 3.0.1 → 3.0.2
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 +2 -2
- package/dist/dark/tokens.css +2 -2
- package/dist/dark/tokens.json +4 -4
- package/dist/docs/index.html +2 -2
- package/dist/light/_tokens.scss +2 -2
- package/dist/light/tokens.css +2 -2
- package/dist/light/tokens.json +4 -4
- package/dist/tokens.css +4 -4
- package/package.json +1 -1
package/dist/dark/_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-white-opaque);
|
|
152
152
|
/** Hover state for color/fg/action-neutralDefault */
|
|
153
|
-
--color-fg-action-neutral-default-hover: var(--base-color-
|
|
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-
|
|
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
|
@@ -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-white-opaque);
|
|
152
152
|
/** Hover state for color/fg/action-neutralDefault */
|
|
153
|
-
--color-fg-action-neutral-default-hover: var(--base-color-
|
|
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-
|
|
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
|
@@ -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": "#
|
|
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.
|
|
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": "#
|
|
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.
|
|
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>#
|
|
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>#
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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": "#
|
|
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.
|
|
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": "#
|
|
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.
|
|
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-
|
|
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-
|
|
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 */
|
|
@@ -869,9 +869,9 @@ body:not([sd-color-scheme]), [sd-color-scheme="light dark"]:not(.prefers-dark),
|
|
|
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-
|
|
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-
|
|
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 */
|