@sage/design-tokens 18.11.1 → 18.12.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 (14) hide show
  1. package/css/components/button.css +1 -1
  2. package/css/components/input.css +11 -0
  3. package/css/light-all.css +12 -1
  4. package/js/common/components/button.js +1 -1
  5. package/js/common/components/input.d.ts +13 -0
  6. package/js/common/components/input.js +11 -0
  7. package/js/es6/components/button.js +1 -1
  8. package/js/es6/components/input.d.ts +11 -0
  9. package/js/es6/components/input.js +11 -0
  10. package/json/components/button.json +1 -1
  11. package/json/components/input.json +11 -0
  12. package/package.json +1 -1
  13. package/scss/components/button.scss +1 -1
  14. package/scss/components/input.scss +11 -0
package/css/components/button.css CHANGED
@@ -32,7 +32,7 @@
32
32
  --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);
33
33
  --button-typical-primary-label-active: var(--mode-color-action-main-with-active);
34
34
  --button-typical-primary-label-default: var(--mode-color-action-main-with-default);
35
- --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);
35
+ --button-typical-primary-label-hover: var(--mode-color-action-main-with-hover);
36
36
  --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);
37
37
  --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);
38
38
  --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);
package/css/components/input.css CHANGED
@@ -37,6 +37,14 @@
37
37
  --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);
38
38
  --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);
39
39
  --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);
40
+ --input-quickpick-bg-default: var(--mode-color-action-data-entry-default);
41
+ --input-quickpick-bg-hover: var(--mode-color-action-data-entry-hover-alt);
42
+ --input-quickpick-border-default: var(--mode-color-generic-bg-soft);
43
+ --input-quickpick-border-hover: var(--mode-color-action-data-entry-with-default);
44
+ --input-quickpick-icon-active: var(--mode-color-action-data-entry-with-active);
45
+ --input-quickpick-icon-hover: var(--mode-color-action-data-entry-with-hover);
46
+ --input-quickpick-txt-active: var(--mode-color-action-data-entry-with-active);
47
+ --input-quickpick-txt-hover: var(--mode-color-action-data-entry-with-hover);
40
48
  --input-switch-bg-active: var(--mode-color-action-grayscale-active);
41
49
  --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);
42
50
  --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);
@@ -58,6 +66,8 @@
58
66
  --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);
59
67
  --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);
60
68
  --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);
69
+ --input-quickpick-bg-active: var(--mode-color-action-grayscale-active-alt);
70
+ --input-quickpick-icon-default: var(--mode-color-generic-txt-soft);
61
71
  --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);
62
72
  --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);
63
73
  --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);
@@ -82,6 +92,7 @@
82
92
  --input-typical-txt-default: var(--mode-color-action-data-entry-txt);
83
93
  --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);
84
94
  --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);
95
+ --input-quickpick-txt-default: var(--mode-color-action-data-entry-txt);
85
96
  --input-switch-label-active: var(--mode-color-action-data-entry-txt);
86
97
  --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);
87
98
  }
package/css/light-all.css CHANGED
@@ -887,6 +887,14 @@
887
887
  --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);
888
888
  --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);
889
889
  --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);
890
+ --input-quickpick-bg-default: var(--mode-color-action-data-entry-default);
891
+ --input-quickpick-bg-hover: var(--mode-color-action-data-entry-hover-alt);
892
+ --input-quickpick-border-default: var(--mode-color-generic-bg-soft);
893
+ --input-quickpick-border-hover: var(--mode-color-action-data-entry-with-default);
894
+ --input-quickpick-icon-active: var(--mode-color-action-data-entry-with-active);
895
+ --input-quickpick-icon-hover: var(--mode-color-action-data-entry-with-hover);
896
+ --input-quickpick-txt-active: var(--mode-color-action-data-entry-with-active);
897
+ --input-quickpick-txt-hover: var(--mode-color-action-data-entry-with-hover);
890
898
  --input-switch-bg-active: var(--mode-color-action-grayscale-active);
891
899
  --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);
892
900
  --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);
@@ -908,6 +916,8 @@
908
916
  --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);
909
917
  --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);
910
918
  --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);
919
+ --input-quickpick-bg-active: var(--mode-color-action-grayscale-active-alt);
920
+ --input-quickpick-icon-default: var(--mode-color-generic-txt-soft);
911
921
  --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);
912
922
  --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);
913
923
  --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);
@@ -932,6 +942,7 @@
932
942
  --input-typical-txt-default: var(--mode-color-action-data-entry-txt);
933
943
  --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);
934
944
  --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);
945
+ --input-quickpick-txt-default: var(--mode-color-action-data-entry-txt);
935
946
  --input-switch-label-active: var(--mode-color-action-data-entry-txt);
936
947
  --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);
937
948
  --focus-bg: var(--mode-color-action-focus-with-default-alt);
@@ -1195,7 +1206,7 @@
1195
1206
  --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);
1196
1207
  --button-typical-primary-label-active: var(--mode-color-action-main-with-active);
1197
1208
  --button-typical-primary-label-default: var(--mode-color-action-main-with-default);
1198
- --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);
1209
+ --button-typical-primary-label-hover: var(--mode-color-action-main-with-hover);
1199
1210
  --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);
1200
1211
  --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);
1201
1212
  --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);
package/js/common/components/button.js CHANGED
@@ -34,7 +34,7 @@ module.exports.buttonTypicalPrimaryBgHover = "var(--mode-color-action-main-hover
34
34
  module.exports.buttonTypicalPrimaryLabelActive = "var(--mode-color-action-main-with-active)";
35
35
  module.exports.buttonTypicalPrimaryLabelDisabled = "var(--mode-color-action-inactive-txt-alt)";
36
36
  module.exports.buttonTypicalPrimaryLabelDefault = "var(--mode-color-action-main-with-default)";
37
- module.exports.buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-default)";
37
+ module.exports.buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-hover)";
38
38
  module.exports.buttonTypicalPrimaryInverseBgActive = "var(--mode-color-action-main-inverse-active)";
39
39
  module.exports.buttonTypicalPrimaryInverseBorderDefault = "var(--mode-color-action-main-inverse-with-default)";
40
40
  module.exports.buttonTypicalPrimaryInverseBgDisabled = "var(--mode-color-action-inactive-inverse-default)";
package/js/common/components/input.d.ts CHANGED
@@ -84,6 +84,19 @@ declare const tokens: {
84
84
  "txt-default": DesignToken;
85
85
  };
86
86
  };
87
+ quickpick: {
88
+ "bg-default": DesignToken;
89
+ "bg-hover": DesignToken;
90
+ "bg-active": DesignToken;
91
+ "border-default": DesignToken;
92
+ "border-hover": DesignToken;
93
+ "icon-active": DesignToken;
94
+ "icon-default": DesignToken;
95
+ "icon-hover": DesignToken;
96
+ "txt-active": DesignToken;
97
+ "txt-default": DesignToken;
98
+ "txt-hover": DesignToken;
99
+ };
87
100
  switch: {
88
101
  "bg-active": DesignToken;
89
102
  "bg-activateDisabled": DesignToken;
package/js/common/components/input.js CHANGED
@@ -54,6 +54,17 @@ module.exports.inputTypicalTxtReadOnly = "var(--mode-color-generic-txt-severe)";
54
54
  module.exports.inputTypicalInverseBgDefault = "var(--mode-color-action-data-entry-inverse-default)";
55
55
  module.exports.inputTypicalInverseBorderDefault = "var(--mode-color-action-data-entry-inverse-with-default)";
56
56
  module.exports.inputTypicalInverseTxtDefault = "var(--mode-color-action-data-entry-inverse-txt)";
57
+ module.exports.inputQuickpickBgDefault = "var(--mode-color-action-data-entry-default)";
58
+ module.exports.inputQuickpickBgHover = "var(--mode-color-action-data-entry-hover-alt)";
59
+ module.exports.inputQuickpickBgActive = "var(--mode-color-action-grayscale-active-alt)";
60
+ module.exports.inputQuickpickBorderDefault = "var(--mode-color-generic-bg-soft)";
61
+ module.exports.inputQuickpickBorderHover = "var(--mode-color-action-data-entry-with-default)";
62
+ module.exports.inputQuickpickIconActive = "var(--mode-color-action-data-entry-with-active)";
63
+ module.exports.inputQuickpickIconDefault = "var(--mode-color-generic-txt-soft)";
64
+ module.exports.inputQuickpickIconHover = "var(--mode-color-action-data-entry-with-hover)";
65
+ module.exports.inputQuickpickTxtActive = "var(--mode-color-action-data-entry-with-active)";
66
+ module.exports.inputQuickpickTxtDefault = "var(--mode-color-action-data-entry-txt)";
67
+ module.exports.inputQuickpickTxtHover = "var(--mode-color-action-data-entry-with-hover)";
57
68
  module.exports.inputSwitchBgActive = "var(--mode-color-action-grayscale-active)";
58
69
  module.exports.inputSwitchBgActivateDisabled = "var(--mode-color-action-inactive-default)";
59
70
  module.exports.inputSwitchBgDisabled = "var(--mode-color-action-inactive-default-alt)";
package/js/es6/components/button.js CHANGED
@@ -34,7 +34,7 @@ export const buttonTypicalPrimaryBgHover = "var(--mode-color-action-main-hover)"
34
34
  export const buttonTypicalPrimaryLabelActive = "var(--mode-color-action-main-with-active)";
35
35
  export const buttonTypicalPrimaryLabelDisabled = "var(--mode-color-action-inactive-txt-alt)";
36
36
  export const buttonTypicalPrimaryLabelDefault = "var(--mode-color-action-main-with-default)";
37
- export const buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-default)";
37
+ export const buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-hover)";
38
38
  export const buttonTypicalPrimaryInverseBgActive = "var(--mode-color-action-main-inverse-active)";
39
39
  export const buttonTypicalPrimaryInverseBorderDefault = "var(--mode-color-action-main-inverse-with-default)";
40
40
  export const buttonTypicalPrimaryInverseBgDisabled = "var(--mode-color-action-inactive-inverse-default)";
package/js/es6/components/input.d.ts CHANGED
@@ -69,6 +69,17 @@ export const inputTypicalTxtReadOnly: string;
69
69
  export const inputTypicalInverseBgDefault: string;
70
70
  export const inputTypicalInverseBorderDefault: string;
71
71
  export const inputTypicalInverseTxtDefault: string;
72
+ export const inputQuickpickBgDefault: string;
73
+ export const inputQuickpickBgHover: string;
74
+ export const inputQuickpickBgActive: string;
75
+ export const inputQuickpickBorderDefault: string;
76
+ export const inputQuickpickBorderHover: string;
77
+ export const inputQuickpickIconActive: string;
78
+ export const inputQuickpickIconDefault: string;
79
+ export const inputQuickpickIconHover: string;
80
+ export const inputQuickpickTxtActive: string;
81
+ export const inputQuickpickTxtDefault: string;
82
+ export const inputQuickpickTxtHover: string;
72
83
  /** background of switch in active state */
73
84
  export const inputSwitchBgActive: string;
74
85
  /** background of switch in active when disabled */
package/js/es6/components/input.js CHANGED
@@ -54,6 +54,17 @@ export const inputTypicalTxtReadOnly = "var(--mode-color-generic-txt-severe)";
54
54
  export const inputTypicalInverseBgDefault = "var(--mode-color-action-data-entry-inverse-default)";
55
55
  export const inputTypicalInverseBorderDefault = "var(--mode-color-action-data-entry-inverse-with-default)";
56
56
  export const inputTypicalInverseTxtDefault = "var(--mode-color-action-data-entry-inverse-txt)";
57
+ export const inputQuickpickBgDefault = "var(--mode-color-action-data-entry-default)";
58
+ export const inputQuickpickBgHover = "var(--mode-color-action-data-entry-hover-alt)";
59
+ export const inputQuickpickBgActive = "var(--mode-color-action-grayscale-active-alt)";
60
+ export const inputQuickpickBorderDefault = "var(--mode-color-generic-bg-soft)";
61
+ export const inputQuickpickBorderHover = "var(--mode-color-action-data-entry-with-default)";
62
+ export const inputQuickpickIconActive = "var(--mode-color-action-data-entry-with-active)";
63
+ export const inputQuickpickIconDefault = "var(--mode-color-generic-txt-soft)";
64
+ export const inputQuickpickIconHover = "var(--mode-color-action-data-entry-with-hover)";
65
+ export const inputQuickpickTxtActive = "var(--mode-color-action-data-entry-with-active)";
66
+ export const inputQuickpickTxtDefault = "var(--mode-color-action-data-entry-txt)";
67
+ export const inputQuickpickTxtHover = "var(--mode-color-action-data-entry-with-hover)";
57
68
  export const inputSwitchBgActive = "var(--mode-color-action-grayscale-active)";
58
69
  export const inputSwitchBgActivateDisabled = "var(--mode-color-action-inactive-default)";
59
70
  export const inputSwitchBgDisabled = "var(--mode-color-action-inactive-default-alt)";
package/json/components/button.json CHANGED
@@ -31,7 +31,7 @@
31
31
  "buttonTypicalPrimaryLabelActive": "var(--mode-color-action-main-with-active)",
32
32
  "buttonTypicalPrimaryLabelDisabled": "var(--mode-color-action-inactive-txt-alt)",
33
33
  "buttonTypicalPrimaryLabelDefault": "var(--mode-color-action-main-with-default)",
34
- "buttonTypicalPrimaryLabelHover": "var(--mode-color-action-main-with-default)",
34
+ "buttonTypicalPrimaryLabelHover": "var(--mode-color-action-main-with-hover)",
35
35
  "buttonTypicalPrimaryInverseBgActive": "var(--mode-color-action-main-inverse-active)",
36
36
  "buttonTypicalPrimaryInverseBorderDefault": "var(--mode-color-action-main-inverse-with-default)",
37
37
  "buttonTypicalPrimaryInverseBgDisabled": "var(--mode-color-action-inactive-inverse-default)",
package/json/components/input.json CHANGED
@@ -51,6 +51,17 @@
51
51
  "inputTypicalInverseBgDefault": "var(--mode-color-action-data-entry-inverse-default)",
52
52
  "inputTypicalInverseBorderDefault": "var(--mode-color-action-data-entry-inverse-with-default)",
53
53
  "inputTypicalInverseTxtDefault": "var(--mode-color-action-data-entry-inverse-txt)",
54
+ "inputQuickpickBgDefault": "var(--mode-color-action-data-entry-default)",
55
+ "inputQuickpickBgHover": "var(--mode-color-action-data-entry-hover-alt)",
56
+ "inputQuickpickBgActive": "var(--mode-color-action-grayscale-active-alt)",
57
+ "inputQuickpickBorderDefault": "var(--mode-color-generic-bg-soft)",
58
+ "inputQuickpickBorderHover": "var(--mode-color-action-data-entry-with-default)",
59
+ "inputQuickpickIconActive": "var(--mode-color-action-data-entry-with-active)",
60
+ "inputQuickpickIconDefault": "var(--mode-color-generic-txt-soft)",
61
+ "inputQuickpickIconHover": "var(--mode-color-action-data-entry-with-hover)",
62
+ "inputQuickpickTxtActive": "var(--mode-color-action-data-entry-with-active)",
63
+ "inputQuickpickTxtDefault": "var(--mode-color-action-data-entry-txt)",
64
+ "inputQuickpickTxtHover": "var(--mode-color-action-data-entry-with-hover)",
54
65
  "inputSwitchBgActive": "var(--mode-color-action-grayscale-active)",
55
66
  "inputSwitchBgActivateDisabled": "var(--mode-color-action-inactive-default)",
56
67
  "inputSwitchBgDisabled": "var(--mode-color-action-inactive-default-alt)",
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": "18.11.1",
9
+ "version": "18.12.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
@@ -28,7 +28,7 @@ $button-typical-primary-bg-default: $mode-color-action-main-default;
28
28
  $button-typical-primary-bg-hover: $mode-color-action-main-hover;
29
29
  $button-typical-primary-label-active: $mode-color-action-main-with-active;
30
30
  $button-typical-primary-label-default: $mode-color-action-main-with-default;
31
- $button-typical-primary-label-hover: $mode-color-action-main-with-default;
31
+ $button-typical-primary-label-hover: $mode-color-action-main-with-hover;
32
32
  $button-typical-primary-inverse-bg-active: $mode-color-action-main-inverse-active;
33
33
  $button-typical-primary-inverse-border-default: $mode-color-action-main-inverse-with-default;
34
34
  $button-typical-primary-inverse-bg-disabled: $mode-color-action-inactive-inverse-default;
package/scss/components/input.scss CHANGED
@@ -33,6 +33,14 @@ $input-typical-icon-alt-active: $mode-color-action-data-entry-with-active-alt;
33
33
  $input-typical-txt-hover: $mode-color-action-data-entry-with-hover;
34
34
  $input-typical-inverse-bg-default: $mode-color-action-data-entry-inverse-default;
35
35
  $input-typical-inverse-border-default: $mode-color-action-data-entry-inverse-with-default;
36
+ $input-quickpick-bg-default: $mode-color-action-data-entry-default;
37
+ $input-quickpick-bg-hover: $mode-color-action-data-entry-hover-alt;
38
+ $input-quickpick-border-default: $mode-color-generic-bg-soft;
39
+ $input-quickpick-border-hover: $mode-color-action-data-entry-with-default;
40
+ $input-quickpick-icon-active: $mode-color-action-data-entry-with-active;
41
+ $input-quickpick-icon-hover: $mode-color-action-data-entry-with-hover;
42
+ $input-quickpick-txt-active: $mode-color-action-data-entry-with-active;
43
+ $input-quickpick-txt-hover: $mode-color-action-data-entry-with-hover;
36
44
  $input-switch-bg-active: $mode-color-action-grayscale-active;
37
45
  $input-switch-bg-activate-disabled: $mode-color-action-inactive-default;
38
46
  $input-switch-bg-disabled: $mode-color-action-inactive-default-alt;
@@ -54,6 +62,8 @@ $input-validation-inverse-border-error: $mode-color-status-negative-inverse-defa
54
62
  $input-validation-inverse-bar-error: $mode-color-status-negative-inverse-default;
55
63
  $input-validation-inverse-label-error: $mode-color-status-negative-inverse-default;
56
64
  $input-typical-txt-read-only: $mode-color-generic-txt-severe;
65
+ $input-quickpick-bg-active: $mode-color-action-grayscale-active-alt;
66
+ $input-quickpick-icon-default: $mode-color-generic-txt-soft;
57
67
  $input-switch-fg-activate-disabled: $mode-color-action-inactive-txt-alt;
58
68
  $input-calendar-txt-alt: $mode-color-action-data-entry-txt-alt;
59
69
  $input-calendar-txt-disabled: $mode-color-action-inactive-txt;
@@ -78,5 +88,6 @@ $input-typical-txt-alt: $mode-color-action-data-entry-txt-alt;
78
88
  $input-typical-txt-default: $mode-color-action-data-entry-txt;
79
89
  $input-typical-txt-disabled: $mode-color-action-inactive-txt;
80
90
  $input-typical-inverse-txt-default: $mode-color-action-data-entry-inverse-txt;
91
+ $input-quickpick-txt-default: $mode-color-action-data-entry-txt;
81
92
  $input-switch-label-active: $mode-color-action-data-entry-txt;
82
93
  $input-switch-label-default: $mode-color-action-data-entry-txt-alt;