@sage/design-tokens 17.0.2 → 17.1.0

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 (26) hide show
  1. package/css/components/profile.css +20 -0
  2. package/css/dark.css +1 -0
  3. package/css/light.css +1 -0
  4. package/js/common/components/profile.d.ts +42 -0
  5. package/js/common/components/profile.js +20 -0
  6. package/js/common/dark.d.ts +1 -0
  7. package/js/common/dark.js +1 -0
  8. package/js/common/light.d.ts +1 -0
  9. package/js/common/light.js +1 -0
  10. package/js/es6/components/profile.d.ts +21 -0
  11. package/js/es6/components/profile.js +20 -0
  12. package/js/es6/dark.d.ts +2 -0
  13. package/js/es6/dark.js +1 -0
  14. package/js/es6/light.d.ts +2 -0
  15. package/js/es6/light.js +1 -0
  16. package/json/components/profile.json +20 -0
  17. package/json/dark.json +1 -0
  18. package/json/light.json +1 -0
  19. package/package.json +1 -1
  20. package/scss/components/button.scss +3 -3
  21. package/scss/components/link.scss +1 -1
  22. package/scss/components/message.scss +2 -2
  23. package/scss/components/pill.scss +2 -2
  24. package/scss/components/profile.scss +20 -0
  25. package/scss/dark.scss +1 -0
  26. package/scss/light.scss +1 -0
package/css/components/profile.css CHANGED
@@ -12,6 +12,26 @@
12
12
  --profile-size-outside-xxl: 128px;
13
13
  --profile-bg-def: var(--mode-color-generic-bg-nought);
14
14
  --profile-border-default: var(--mode-color-generic-fg-moderate);
15
+ --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);
16
+ --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);
17
+ --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);
18
+ --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);
19
+ --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);
20
+ --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);
21
+ --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);
22
+ --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);
23
+ --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);
24
+ --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);
25
+ --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);
26
+ --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);
27
+ --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);
28
+ --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);
29
+ --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);
30
+ --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);
31
+ --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);
32
+ --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);
33
+ --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);
34
+ --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);
15
35
  --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);
16
36
  --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);
17
37
  --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);
package/css/dark.css CHANGED
@@ -255,6 +255,7 @@
255
255
  --mode-color-status-custom-orange-default-alt: #1d0300;
256
256
  --mode-color-status-custom-orange-hover: #e5631c;
257
257
  --mode-color-status-custom-orange-hover-alt: #360900;
258
+ --mode-color-status-custom-orange-txt: #e24300;
258
259
  --mode-color-status-custom-red-default: #f50059;
259
260
  --mode-color-status-custom-red-default-alt: #1e0005;
260
261
  --mode-color-status-custom-red-hover: #ff3e6a;
package/css/light.css CHANGED
@@ -255,6 +255,7 @@
255
255
  --mode-color-status-custom-orange-default-alt: #fff7eb;
256
256
  --mode-color-status-custom-orange-hover: #b33400;
257
257
  --mode-color-status-custom-orange-hover-alt: #ffeaca;
258
+ --mode-color-status-custom-orange-txt: #b33400;
258
259
  --mode-color-status-custom-red-default: #db004e;
259
260
  --mode-color-status-custom-red-default-alt: #fff5f6;
260
261
  --mode-color-status-custom-red-hover: #c40044;
package/js/common/components/profile.d.ts CHANGED
@@ -44,6 +44,48 @@ declare const tokens: {
44
44
  "bg-def": DesignToken;
45
45
  "border-default": DesignToken;
46
46
  "label-default": DesignToken;
47
+ swatches: {
48
+ blue: {
49
+ "bg-default": DesignToken;
50
+ "label-default": DesignToken;
51
+ };
52
+ teal: {
53
+ "bg-default": DesignToken;
54
+ "label-default": DesignToken;
55
+ };
56
+ green: {
57
+ "bg-default": DesignToken;
58
+ "label-default": DesignToken;
59
+ };
60
+ lime: {
61
+ "bg-default": DesignToken;
62
+ "label-default": DesignToken;
63
+ };
64
+ orange: {
65
+ "bg-default": DesignToken;
66
+ "label-default": DesignToken;
67
+ };
68
+ red: {
69
+ "bg-default": DesignToken;
70
+ "label-default": DesignToken;
71
+ };
72
+ pink: {
73
+ "bg-default": DesignToken;
74
+ "label-default": DesignToken;
75
+ };
76
+ purple: {
77
+ "bg-default": DesignToken;
78
+ "label-default": DesignToken;
79
+ };
80
+ slate: {
81
+ "bg-default": DesignToken;
82
+ "label-default": DesignToken;
83
+ };
84
+ gray: {
85
+ "bg-default": DesignToken;
86
+ "label-default": DesignToken;
87
+ };
88
+ };
47
89
  font: {
48
90
  initials: {
49
91
  XS: DesignToken;
package/js/common/components/profile.js CHANGED
@@ -20,6 +20,26 @@ module.exports.profileBgAlt = "var(--mode-color-generic-txt-severe)";
20
20
  module.exports.profileBgDef = "var(--mode-color-generic-bg-nought)";
21
21
  module.exports.profileBorderDefault = "var(--mode-color-generic-fg-moderate)";
22
22
  module.exports.profileLabelDefault = "var(--mode-color-generic-txt-severe)";
23
+ module.exports.profileSwatchesBlueBgDefault = "var(--mode-color-status-custom-blue-default-alt)";
24
+ module.exports.profileSwatchesBlueLabelDefault = "var(--mode-color-status-custom-blue-default)";
25
+ module.exports.profileSwatchesTealBgDefault = "var(--mode-color-status-custom-teal-default-alt)";
26
+ module.exports.profileSwatchesTealLabelDefault = "var(--mode-color-status-custom-teal-default)";
27
+ module.exports.profileSwatchesGreenBgDefault = "var(--mode-color-status-custom-green-default-alt)";
28
+ module.exports.profileSwatchesGreenLabelDefault = "var(--mode-color-status-custom-green-default)";
29
+ module.exports.profileSwatchesLimeBgDefault = "var(--mode-color-status-custom-lime-default-alt)";
30
+ module.exports.profileSwatchesLimeLabelDefault = "var(--mode-color-status-custom-lime-default)";
31
+ module.exports.profileSwatchesOrangeBgDefault = "var(--mode-color-status-custom-orange-default-alt)";
32
+ module.exports.profileSwatchesOrangeLabelDefault = "var(--mode-color-status-custom-orange-txt)";
33
+ module.exports.profileSwatchesRedBgDefault = "var(--mode-color-status-custom-red-default-alt)";
34
+ module.exports.profileSwatchesRedLabelDefault = "var(--mode-color-status-custom-red-default)";
35
+ module.exports.profileSwatchesPinkBgDefault = "var(--mode-color-status-custom-pink-default-alt)";
36
+ module.exports.profileSwatchesPinkLabelDefault = "var(--mode-color-status-custom-pink-default)";
37
+ module.exports.profileSwatchesPurpleBgDefault = "var(--mode-color-status-custom-purple-default-alt)";
38
+ module.exports.profileSwatchesPurpleLabelDefault = "var(--mode-color-status-custom-purple-default)";
39
+ module.exports.profileSwatchesSlateBgDefault = "var(--mode-color-status-custom-slate-default-alt)";
40
+ module.exports.profileSwatchesSlateLabelDefault = "var(--mode-color-status-custom-slate-default)";
41
+ module.exports.profileSwatchesGrayBgDefault = "var(--mode-color-status-custom-gray-default-alt)";
42
+ module.exports.profileSwatchesGrayLabelDefault = "var(--mode-color-status-custom-gray-default)";
23
43
  module.exports.profileFontInitialsXs = "var(--global-font-static-comp-placeholder-xs)";
24
44
  module.exports.profileFontInitialsS = "var(--global-font-static-comp-placeholder-s)";
25
45
  module.exports.profileFontInitialsM = "var(--global-font-static-comp-placeholder-m)";
package/js/common/dark.d.ts CHANGED
@@ -384,6 +384,7 @@ declare const tokens: {
384
384
  defaultAlt: DesignToken;
385
385
  hover: DesignToken;
386
386
  hoverAlt: DesignToken;
387
+ txt: DesignToken;
387
388
  };
388
389
  red: {
389
390
  default: DesignToken;
package/js/common/dark.js CHANGED
@@ -250,6 +250,7 @@ module.exports.modeColorStatusCustomOrangeDefault = "#e24300";
250
250
  module.exports.modeColorStatusCustomOrangeDefaultAlt = "#1d0300";
251
251
  module.exports.modeColorStatusCustomOrangeHover = "#e5631c";
252
252
  module.exports.modeColorStatusCustomOrangeHoverAlt = "#360900";
253
+ module.exports.modeColorStatusCustomOrangeTxt = "#e24300";
253
254
  module.exports.modeColorStatusCustomRedDefault = "#f50059";
254
255
  module.exports.modeColorStatusCustomRedDefaultAlt = "#1e0005";
255
256
  module.exports.modeColorStatusCustomRedHover = "#ff3e6a";
package/js/common/light.d.ts CHANGED
@@ -384,6 +384,7 @@ declare const tokens: {
384
384
  defaultAlt: DesignToken;
385
385
  hover: DesignToken;
386
386
  hoverAlt: DesignToken;
387
+ txt: DesignToken;
387
388
  };
388
389
  red: {
389
390
  default: DesignToken;
package/js/common/light.js CHANGED
@@ -250,6 +250,7 @@ module.exports.modeColorStatusCustomOrangeDefault = "#d64309";
250
250
  module.exports.modeColorStatusCustomOrangeDefaultAlt = "#fff7eb";
251
251
  module.exports.modeColorStatusCustomOrangeHover = "#b33400";
252
252
  module.exports.modeColorStatusCustomOrangeHoverAlt = "#ffeaca";
253
+ module.exports.modeColorStatusCustomOrangeTxt = "#b33400";
253
254
  module.exports.modeColorStatusCustomRedDefault = "#db004e";
254
255
  module.exports.modeColorStatusCustomRedDefaultAlt = "#fff5f6";
255
256
  module.exports.modeColorStatusCustomRedHover = "#c40044";
package/js/es6/components/profile.d.ts CHANGED
@@ -39,6 +39,27 @@ export const profileBgAlt: string;
39
39
  export const profileBgDef: string;
40
40
  export const profileBorderDefault: string;
41
41
  export const profileLabelDefault: string;
42
+ export const profileSwatchesBlueBgDefault: string;
43
+ export const profileSwatchesBlueLabelDefault: string;
44
+ export const profileSwatchesTealBgDefault: string;
45
+ export const profileSwatchesTealLabelDefault: string;
46
+ export const profileSwatchesGreenBgDefault: string;
47
+ export const profileSwatchesGreenLabelDefault: string;
48
+ export const profileSwatchesLimeBgDefault: string;
49
+ export const profileSwatchesLimeLabelDefault: string;
50
+ export const profileSwatchesOrangeBgDefault: string;
51
+ /** */
52
+ export const profileSwatchesOrangeLabelDefault: string;
53
+ export const profileSwatchesRedBgDefault: string;
54
+ export const profileSwatchesRedLabelDefault: string;
55
+ export const profileSwatchesPinkBgDefault: string;
56
+ export const profileSwatchesPinkLabelDefault: string;
57
+ export const profileSwatchesPurpleBgDefault: string;
58
+ export const profileSwatchesPurpleLabelDefault: string;
59
+ export const profileSwatchesSlateBgDefault: string;
60
+ export const profileSwatchesSlateLabelDefault: string;
61
+ export const profileSwatchesGrayBgDefault: string;
62
+ export const profileSwatchesGrayLabelDefault: string;
42
63
  export const profileFontInitialsXs: {
43
64
  fontFamily: string;
44
65
  fontWeight: string;
package/js/es6/components/profile.js CHANGED
@@ -20,6 +20,26 @@ export const profileBgAlt = "var(--mode-color-generic-txt-severe)";
20
20
  export const profileBgDef = "var(--mode-color-generic-bg-nought)";
21
21
  export const profileBorderDefault = "var(--mode-color-generic-fg-moderate)";
22
22
  export const profileLabelDefault = "var(--mode-color-generic-txt-severe)";
23
+ export const profileSwatchesBlueBgDefault = "var(--mode-color-status-custom-blue-default-alt)";
24
+ export const profileSwatchesBlueLabelDefault = "var(--mode-color-status-custom-blue-default)";
25
+ export const profileSwatchesTealBgDefault = "var(--mode-color-status-custom-teal-default-alt)";
26
+ export const profileSwatchesTealLabelDefault = "var(--mode-color-status-custom-teal-default)";
27
+ export const profileSwatchesGreenBgDefault = "var(--mode-color-status-custom-green-default-alt)";
28
+ export const profileSwatchesGreenLabelDefault = "var(--mode-color-status-custom-green-default)";
29
+ export const profileSwatchesLimeBgDefault = "var(--mode-color-status-custom-lime-default-alt)";
30
+ export const profileSwatchesLimeLabelDefault = "var(--mode-color-status-custom-lime-default)";
31
+ export const profileSwatchesOrangeBgDefault = "var(--mode-color-status-custom-orange-default-alt)";
32
+ export const profileSwatchesOrangeLabelDefault = "var(--mode-color-status-custom-orange-txt)";
33
+ export const profileSwatchesRedBgDefault = "var(--mode-color-status-custom-red-default-alt)";
34
+ export const profileSwatchesRedLabelDefault = "var(--mode-color-status-custom-red-default)";
35
+ export const profileSwatchesPinkBgDefault = "var(--mode-color-status-custom-pink-default-alt)";
36
+ export const profileSwatchesPinkLabelDefault = "var(--mode-color-status-custom-pink-default)";
37
+ export const profileSwatchesPurpleBgDefault = "var(--mode-color-status-custom-purple-default-alt)";
38
+ export const profileSwatchesPurpleLabelDefault = "var(--mode-color-status-custom-purple-default)";
39
+ export const profileSwatchesSlateBgDefault = "var(--mode-color-status-custom-slate-default-alt)";
40
+ export const profileSwatchesSlateLabelDefault = "var(--mode-color-status-custom-slate-default)";
41
+ export const profileSwatchesGrayBgDefault = "var(--mode-color-status-custom-gray-default-alt)";
42
+ export const profileSwatchesGrayLabelDefault = "var(--mode-color-status-custom-gray-default)";
23
43
  export const profileFontInitialsXs = "var(--global-font-static-comp-placeholder-xs)";
24
44
  export const profileFontInitialsS = "var(--global-font-static-comp-placeholder-s)";
25
45
  export const profileFontInitialsM = "var(--global-font-static-comp-placeholder-m)";
package/js/es6/dark.d.ts CHANGED
@@ -361,6 +361,8 @@ export const modeColorStatusCustomOrangeDefaultAlt: string;
361
361
  export const modeColorStatusCustomOrangeHover: string;
362
362
  /** used on pill hover states */
363
363
  export const modeColorStatusCustomOrangeHoverAlt: string;
364
+ /** used in portrait */
365
+ export const modeColorStatusCustomOrangeTxt: string;
364
366
  /** For pills. Not accessible with white txt. */
365
367
  export const modeColorStatusCustomRedDefault: string;
366
368
  /** Pill bg */
package/js/es6/dark.js CHANGED
@@ -261,6 +261,7 @@ export const modeColorStatusCustomOrangeDefault = "#e24300"; // For pills. Not a
261
261
  export const modeColorStatusCustomOrangeDefaultAlt = "#1d0300"; // Pill bg
262
262
  export const modeColorStatusCustomOrangeHover = "#e5631c"; // used on pill hover states
263
263
  export const modeColorStatusCustomOrangeHoverAlt = "#360900"; // used on pill hover states
264
+ export const modeColorStatusCustomOrangeTxt = "#e24300"; // used in portrait
264
265
  export const modeColorStatusCustomRedDefault = "#f50059"; // For pills. Not accessible with white txt.
265
266
  export const modeColorStatusCustomRedDefaultAlt = "#1e0005"; // Pill bg
266
267
  export const modeColorStatusCustomRedHover = "#ff3e6a"; // used on pill hover states
package/js/es6/light.d.ts CHANGED
@@ -362,6 +362,8 @@ export const modeColorStatusCustomOrangeDefaultAlt: string;
362
362
  export const modeColorStatusCustomOrangeHover: string;
363
363
  /** used on pill hover states */
364
364
  export const modeColorStatusCustomOrangeHoverAlt: string;
365
+ /** used in portrait */
366
+ export const modeColorStatusCustomOrangeTxt: string;
365
367
  export const modeColorStatusCustomRedDefault: string;
366
368
  /** Pill bg */
367
369
  export const modeColorStatusCustomRedDefaultAlt: string;
package/js/es6/light.js CHANGED
@@ -261,6 +261,7 @@ export const modeColorStatusCustomOrangeDefault = "#d64309";
261
261
  export const modeColorStatusCustomOrangeDefaultAlt = "#fff7eb"; // Pill bg
262
262
  export const modeColorStatusCustomOrangeHover = "#b33400"; // used on pill hover states
263
263
  export const modeColorStatusCustomOrangeHoverAlt = "#ffeaca"; // used on pill hover states
264
+ export const modeColorStatusCustomOrangeTxt = "#b33400"; // used in portrait
264
265
  export const modeColorStatusCustomRedDefault = "#db004e";
265
266
  export const modeColorStatusCustomRedDefaultAlt = "#fff5f6"; // Pill bg
266
267
  export const modeColorStatusCustomRedHover = "#c40044"; // used on pill hover states
package/json/components/profile.json CHANGED
@@ -17,6 +17,26 @@
17
17
  "profileBgDef": "var(--mode-color-generic-bg-nought)",
18
18
  "profileBorderDefault": "var(--mode-color-generic-fg-moderate)",
19
19
  "profileLabelDefault": "var(--mode-color-generic-txt-severe)",
20
+ "profileSwatchesBlueBgDefault": "var(--mode-color-status-custom-blue-default-alt)",
21
+ "profileSwatchesBlueLabelDefault": "var(--mode-color-status-custom-blue-default)",
22
+ "profileSwatchesTealBgDefault": "var(--mode-color-status-custom-teal-default-alt)",
23
+ "profileSwatchesTealLabelDefault": "var(--mode-color-status-custom-teal-default)",
24
+ "profileSwatchesGreenBgDefault": "var(--mode-color-status-custom-green-default-alt)",
25
+ "profileSwatchesGreenLabelDefault": "var(--mode-color-status-custom-green-default)",
26
+ "profileSwatchesLimeBgDefault": "var(--mode-color-status-custom-lime-default-alt)",
27
+ "profileSwatchesLimeLabelDefault": "var(--mode-color-status-custom-lime-default)",
28
+ "profileSwatchesOrangeBgDefault": "var(--mode-color-status-custom-orange-default-alt)",
29
+ "profileSwatchesOrangeLabelDefault": "var(--mode-color-status-custom-orange-txt)",
30
+ "profileSwatchesRedBgDefault": "var(--mode-color-status-custom-red-default-alt)",
31
+ "profileSwatchesRedLabelDefault": "var(--mode-color-status-custom-red-default)",
32
+ "profileSwatchesPinkBgDefault": "var(--mode-color-status-custom-pink-default-alt)",
33
+ "profileSwatchesPinkLabelDefault": "var(--mode-color-status-custom-pink-default)",
34
+ "profileSwatchesPurpleBgDefault": "var(--mode-color-status-custom-purple-default-alt)",
35
+ "profileSwatchesPurpleLabelDefault": "var(--mode-color-status-custom-purple-default)",
36
+ "profileSwatchesSlateBgDefault": "var(--mode-color-status-custom-slate-default-alt)",
37
+ "profileSwatchesSlateLabelDefault": "var(--mode-color-status-custom-slate-default)",
38
+ "profileSwatchesGrayBgDefault": "var(--mode-color-status-custom-gray-default-alt)",
39
+ "profileSwatchesGrayLabelDefault": "var(--mode-color-status-custom-gray-default)",
20
40
  "profileFontInitialsXs": "var(--global-font-static-comp-placeholder-xs)",
21
41
  "profileFontInitialsS": "var(--global-font-static-comp-placeholder-s)",
22
42
  "profileFontInitialsM": "var(--global-font-static-comp-placeholder-m)",
package/json/dark.json CHANGED
@@ -247,6 +247,7 @@
247
247
  "modeColorStatusCustomOrangeDefaultAlt": "#1d0300",
248
248
  "modeColorStatusCustomOrangeHover": "#e5631c",
249
249
  "modeColorStatusCustomOrangeHoverAlt": "#360900",
250
+ "modeColorStatusCustomOrangeTxt": "#e24300",
250
251
  "modeColorStatusCustomRedDefault": "#f50059",
251
252
  "modeColorStatusCustomRedDefaultAlt": "#1e0005",
252
253
  "modeColorStatusCustomRedHover": "#ff3e6a",
package/json/light.json CHANGED
@@ -247,6 +247,7 @@
247
247
  "modeColorStatusCustomOrangeDefaultAlt": "#fff7eb",
248
248
  "modeColorStatusCustomOrangeHover": "#b33400",
249
249
  "modeColorStatusCustomOrangeHoverAlt": "#ffeaca",
250
+ "modeColorStatusCustomOrangeTxt": "#b33400",
250
251
  "modeColorStatusCustomRedDefault": "#db004e",
251
252
  "modeColorStatusCustomRedDefaultAlt": "#fff5f6",
252
253
  "modeColorStatusCustomRedHover": "#c40044",
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  },
7
7
  "description": "Design tokens for the Sage Design System.",
8
8
  "author": "The Sage Group plc",
9
- "version": "17.0.2",
9
+ "version": "17.1.0",
10
10
  "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
11
11
  "tags": [
12
12
  "design tokens",
package/scss/components/button.scss CHANGED
@@ -46,6 +46,7 @@ $button-typical-secondary-inverse-border-active: $mode-color-action-main-inverse
46
46
  $button-typical-secondary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
47
47
  $button-typical-secondary-inverse-border-hover: $mode-color-action-main-inverse-hover;
48
48
  $button-typical-secondary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
49
+ $button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
49
50
  $button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
50
51
  $button-typical-tertiary-border-active: $mode-color-action-main-active;
51
52
  $button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
@@ -56,10 +57,12 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
56
57
  $button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
57
58
  $button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
58
59
  $button-typical-tertiary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
60
+ $button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
59
61
  $button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
60
62
  $button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
61
63
  $button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
62
64
  $button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
65
+ $button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
63
66
  $button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
64
67
  $button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
65
68
  $button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
@@ -85,7 +88,6 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
85
88
  $button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
86
89
  $button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
87
90
  $button-typical-secondary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
88
- $button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
89
91
  $button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
90
92
  $button-typical-tertiary-bg-default: $button-none;
91
93
  $button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
@@ -95,13 +97,11 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
95
97
  $button-typical-tertiary-inverse-bg-default: $button-none;
96
98
  $button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
97
99
  $button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
98
- $button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
99
100
  $button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
100
101
  $button-typical-subtle-bg-hover: $mode-color-action-grayscale-hover-alt;
101
102
  $button-typical-subtle-label-default: $mode-color-action-grayscale-default;
102
103
  $button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
103
104
  $button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
104
- $button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
105
105
  $button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
106
106
  $button-typical-toggle-bg-hover: $mode-color-action-grayscale-hover-alt;
107
107
  $button-typical-toggle-border-default: $mode-color-action-grayscale-default;
package/scss/components/link.scss CHANGED
@@ -12,6 +12,6 @@ $link-typical-label-hover: $mode-color-action-main-hover-alt2;
12
12
  $link-typical-inverse-label-default: $mode-color-action-main-inverse-default-alt2;
13
13
  $link-typical-inverse-label-hover: $mode-color-action-main-inverse-hover-alt2;
14
14
  $link-subtle-label-hover: $mode-color-action-grayscale-active;
15
+ $link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
15
16
  $link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
16
17
  $link-subtle-label-default: $mode-color-action-grayscale-default;
17
- $link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
package/scss/components/message.scss CHANGED
@@ -7,9 +7,7 @@ $message-none: $mode-color-none;
7
7
  $message-contextual-bg: $mode-color-generic-bg-nought;
8
8
  $message-contextual-icon: $mode-color-generic-bg-nought;
9
9
  $message-contextual-icon-alt: $mode-color-status-neutral-default;
10
- $message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
11
10
  $message-contextual-ai-bg-alt: $mode-color-status-neutral-default-alt;
12
- $message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
13
11
  $message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
14
12
  $message-contextual-error-bg-default: $mode-color-status-negative-default;
15
13
  $message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
@@ -37,6 +35,8 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
37
35
  $message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
38
36
  $message-global-warning-icon: $mode-color-status-warning-default;
39
37
  $message-contextual-txt: $mode-color-status-txt-with-hover-alt;
38
+ $message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
39
+ $message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
40
40
  $message-contextual-callout-icon: $mode-color-status-txt-with-default-alt;
41
41
  $message-global-label-default: $mode-color-status-txt-with-default-alt;
42
42
  $message-global-callout-icon: $mode-color-status-txt-with-default-alt;
package/scss/components/pill.scss CHANGED
@@ -118,10 +118,10 @@ $pill-generic-label-default: $mode-color-status-txt-with-default;
118
118
  $pill-generic-label-hover: $mode-color-status-txt-with-hover;
119
119
  $pill-generic-inverse-label-default: $mode-color-status-txt-inverse-with-default;
120
120
  $pill-generic-inverse-label-hover: $mode-color-status-txt-inverse-with-hover;
121
- $pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
122
- $pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
123
121
  $pill-readonly-bg-default: $mode-color-status-inactive-default;
124
122
  $pill-readonly-border-default: $mode-color-status-inactive-default;
125
123
  $pill-readonly-label: $mode-color-generic-txt-soft;
126
124
  $pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
127
125
  $pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
126
+ $pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
127
+ $pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
package/scss/components/profile.scss CHANGED
@@ -8,6 +8,26 @@ $profile-size-outside-xl: 104px;
8
8
  $profile-size-outside-xxl: 128px;
9
9
  $profile-bg-def: $mode-color-generic-bg-nought;
10
10
  $profile-border-default: $mode-color-generic-fg-moderate;
11
+ $profile-swatches-blue-bg-default: $mode-color-status-custom-blue-default-alt;
12
+ $profile-swatches-blue-label-default: $mode-color-status-custom-blue-default;
13
+ $profile-swatches-teal-bg-default: $mode-color-status-custom-teal-default-alt;
14
+ $profile-swatches-teal-label-default: $mode-color-status-custom-teal-default;
15
+ $profile-swatches-green-bg-default: $mode-color-status-custom-green-default-alt;
16
+ $profile-swatches-green-label-default: $mode-color-status-custom-green-default;
17
+ $profile-swatches-lime-bg-default: $mode-color-status-custom-lime-default-alt;
18
+ $profile-swatches-lime-label-default: $mode-color-status-custom-lime-default;
19
+ $profile-swatches-orange-bg-default: $mode-color-status-custom-orange-default-alt;
20
+ $profile-swatches-orange-label-default: $mode-color-status-custom-orange-txt;
21
+ $profile-swatches-red-bg-default: $mode-color-status-custom-red-default-alt;
22
+ $profile-swatches-red-label-default: $mode-color-status-custom-red-default;
23
+ $profile-swatches-pink-bg-default: $mode-color-status-custom-pink-default-alt;
24
+ $profile-swatches-pink-label-default: $mode-color-status-custom-pink-default;
25
+ $profile-swatches-purple-bg-default: $mode-color-status-custom-purple-default-alt;
26
+ $profile-swatches-purple-label-default: $mode-color-status-custom-purple-default;
27
+ $profile-swatches-slate-bg-default: $mode-color-status-custom-slate-default-alt;
28
+ $profile-swatches-slate-label-default: $mode-color-status-custom-slate-default;
29
+ $profile-swatches-gray-bg-default: $mode-color-status-custom-gray-default-alt;
30
+ $profile-swatches-gray-label-default: $mode-color-status-custom-gray-default;
11
31
  $profile-font-initials-xs: $global-font-static-comp-placeholder-xs;
12
32
  $profile-font-initials-s: $global-font-static-comp-placeholder-s;
13
33
  $profile-font-initials-m: $global-font-static-comp-placeholder-m;
package/scss/dark.scss CHANGED
@@ -251,6 +251,7 @@ $mode-color-status-custom-orange-default: #e24300;
251
251
  $mode-color-status-custom-orange-default-alt: #1d0300;
252
252
  $mode-color-status-custom-orange-hover: #e5631c;
253
253
  $mode-color-status-custom-orange-hover-alt: #360900;
254
+ $mode-color-status-custom-orange-txt: #e24300;
254
255
  $mode-color-status-custom-red-default: #f50059;
255
256
  $mode-color-status-custom-red-default-alt: #1e0005;
256
257
  $mode-color-status-custom-red-hover: #ff3e6a;
package/scss/light.scss CHANGED
@@ -251,6 +251,7 @@ $mode-color-status-custom-orange-default: #d64309;
251
251
  $mode-color-status-custom-orange-default-alt: #fff7eb;
252
252
  $mode-color-status-custom-orange-hover: #b33400;
253
253
  $mode-color-status-custom-orange-hover-alt: #ffeaca;
254
+ $mode-color-status-custom-orange-txt: #b33400;
254
255
  $mode-color-status-custom-red-default: #db004e;
255
256
  $mode-color-status-custom-red-default-alt: #fff5f6;
256
257
  $mode-color-status-custom-red-hover: #c40044;