@sage/design-tokens 17.6.0 → 17.8.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 (16) hide show
  1. package/css/components/button.css +3 -3
  2. package/css/components/dataviz.css +1 -0
  3. package/css/global.css +6 -0
  4. package/js/common/components/dataviz.d.ts +3 -0
  5. package/js/common/components/dataviz.js +1 -0
  6. package/js/common/global.d.ts +8 -0
  7. package/js/common/global.js +6 -0
  8. package/js/es6/components/dataviz.d.ts +2 -0
  9. package/js/es6/components/dataviz.js +1 -0
  10. package/js/es6/global.d.ts +6 -0
  11. package/js/es6/global.js +6 -0
  12. package/json/components/dataviz.json +1 -0
  13. package/json/global.json +6 -0
  14. package/package.json +1 -1
  15. package/scss/components/dataviz.scss +1 -0
  16. package/scss/global.scss +6 -0
package/css/components/button.css CHANGED
@@ -50,7 +50,6 @@
50
50
  --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);
51
51
  --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);
52
52
  --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
53
- --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
54
53
  --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
55
54
  --button-typical-tertiary-border-active: var(--mode-color-action-main-active);
56
55
  --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);
@@ -61,12 +60,10 @@
61
60
  --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);
62
61
  --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);
63
62
  --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
64
- --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
65
63
  --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
66
64
  --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);
67
65
  --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);
68
66
  --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
69
- --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
70
67
  --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
71
68
  --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);
72
69
  --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);
@@ -92,6 +89,7 @@
92
89
  --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);
93
90
  --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);
94
91
  --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);
92
+ --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
95
93
  --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);
96
94
  --button-typical-tertiary-bg-default: var(--button-none);
97
95
  --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);
@@ -101,11 +99,13 @@
101
99
  --button-typical-tertiary-inverse-bg-default: var(--button-none);
102
100
  --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);
103
101
  --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);
102
+ --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
104
103
  --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);
105
104
  --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
106
105
  --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);
107
106
  --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);
108
107
  --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);
108
+ --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
109
109
  --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);
110
110
  --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
111
111
  --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);
package/css/components/dataviz.css CHANGED
@@ -35,6 +35,7 @@
35
35
  --dataviz-chart-donut-orange-pattern: var(--mode-color-colorcode-orange-deep);
36
36
  --dataviz-generic-label-alt: var(--mode-color-generic-txt-inverse-extreme);
37
37
  --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);
38
+ --dataviz-generic-pending-bg-default: var(--mode-color-generic-bg-nought);
38
39
  --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);
39
40
  --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);
40
41
  --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);
package/css/global.css CHANGED
@@ -14,6 +14,12 @@
14
14
  --global-borderwidth-l: 4px;
15
15
  --global-borderwidth-xl: 6px;
16
16
  --global-borderwidth-xxl: 8px;
17
+ --global-breakpoint-xs: 320px;
18
+ --global-breakpoint-s: 600px;
19
+ --global-breakpoint-m: 960px;
20
+ --global-breakpoint-l: 1260px;
21
+ --global-breakpoint-xl: 1600px;
22
+ --global-breakpoint-xxl: 1920px;
17
23
  --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
18
24
  --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
19
25
  --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
package/js/common/components/dataviz.d.ts CHANGED
@@ -69,6 +69,9 @@ declare const tokens: {
69
69
  generic: {
70
70
  "label-alt": DesignToken;
71
71
  "label-default": DesignToken;
72
+ pending: {
73
+ "bg-default": DesignToken;
74
+ };
72
75
  blue: {
73
76
  "bg-alt": DesignToken;
74
77
  "bg-default": DesignToken;
package/js/common/components/dataviz.js CHANGED
@@ -30,6 +30,7 @@ module.exports.datavizChartDonutOrangeBorder = "var(--mode-color-colorcode-orang
30
30
  module.exports.datavizChartDonutOrangePattern = "var(--mode-color-colorcode-orange-deep)";
31
31
  module.exports.datavizGenericLabelAlt = "var(--mode-color-generic-txt-inverse-extreme)";
32
32
  module.exports.datavizGenericLabelDefault = "var(--mode-color-generic-txt-extreme)";
33
+ module.exports.datavizGenericPendingBgDefault = "var(--mode-color-generic-bg-nought)";
33
34
  module.exports.datavizGenericBlueBgAlt = "var(--mode-color-colorcode-blue-deep)";
34
35
  module.exports.datavizGenericBlueBgDefault = "var(--mode-color-colorcode-blue-muted)";
35
36
  module.exports.datavizGenericBlueBorder = "var(--mode-color-colorcode-blue-deep)";
package/js/common/global.d.ts CHANGED
@@ -29,6 +29,14 @@ declare const tokens: {
29
29
  XL: DesignToken;
30
30
  XXL: DesignToken;
31
31
  };
32
+ breakpoint: {
33
+ XS: DesignToken;
34
+ S: DesignToken;
35
+ M: DesignToken;
36
+ L: DesignToken;
37
+ XL: DesignToken;
38
+ XXL: DesignToken;
39
+ };
32
40
  font: {
33
41
  fluid: {
34
42
  heading: {
package/js/common/global.js CHANGED
@@ -9,6 +9,12 @@ module.exports.globalBorderwidthM = "3px";
9
9
  module.exports.globalBorderwidthL = "4px";
10
10
  module.exports.globalBorderwidthXl = "6px";
11
11
  module.exports.globalBorderwidthXxl = "8px";
12
+ module.exports.globalBreakpointXs = "320px";
13
+ module.exports.globalBreakpointS = "600px";
14
+ module.exports.globalBreakpointM = "960px";
15
+ module.exports.globalBreakpointL = "1260px";
16
+ module.exports.globalBreakpointXl = "1600px";
17
+ module.exports.globalBreakpointXxl = "1920px";
12
18
  module.exports.globalFontFluidHeadingS = "[object Object]";
13
19
  module.exports.globalFontFluidHeadingM = "[object Object]";
14
20
  module.exports.globalFontFluidHeadingL = "[object Object]";
package/js/es6/components/dataviz.d.ts CHANGED
@@ -36,6 +36,8 @@ export const datavizChartDonutOrangePattern: string;
36
36
  export const datavizGenericLabelAlt: string;
37
37
  /** Accessible on colorpicker bg-default colors. */
38
38
  export const datavizGenericLabelDefault: string;
39
+ /** bg on all pending events */
40
+ export const datavizGenericPendingBgDefault: string;
39
41
  export const datavizGenericBlueBgAlt: string;
40
42
  export const datavizGenericBlueBgDefault: string;
41
43
  export const datavizGenericBlueBorder: string;
package/js/es6/components/dataviz.js CHANGED
@@ -30,6 +30,7 @@ export const datavizChartDonutOrangeBorder = "var(--mode-color-colorcode-orange-
30
30
  export const datavizChartDonutOrangePattern = "var(--mode-color-colorcode-orange-deep)";
31
31
  export const datavizGenericLabelAlt = "var(--mode-color-generic-txt-inverse-extreme)";
32
32
  export const datavizGenericLabelDefault = "var(--mode-color-generic-txt-extreme)";
33
+ export const datavizGenericPendingBgDefault = "var(--mode-color-generic-bg-nought)";
33
34
  export const datavizGenericBlueBgAlt = "var(--mode-color-colorcode-blue-deep)";
34
35
  export const datavizGenericBlueBgDefault = "var(--mode-color-colorcode-blue-muted)";
35
36
  export const datavizGenericBlueBorder = "var(--mode-color-colorcode-blue-deep)";
package/js/es6/global.d.ts CHANGED
@@ -18,6 +18,12 @@ export const globalBorderwidthL: string;
18
18
  /** Double Focus Border */
19
19
  export const globalBorderwidthXl: string;
20
20
  export const globalBorderwidthXxl: string;
21
+ export const globalBreakpointXs: string;
22
+ export const globalBreakpointS: string;
23
+ export const globalBreakpointM: string;
24
+ export const globalBreakpointL: string;
25
+ export const globalBreakpointXl: string;
26
+ export const globalBreakpointXxl: string;
21
27
  export const globalFontFluidHeadingS: {
22
28
  fontFamily: string;
23
29
  fontWeight: string;
package/js/es6/global.js CHANGED
@@ -13,6 +13,12 @@ export const globalBorderwidthM = "3px"; // Focus
13
13
  export const globalBorderwidthL = "4px"; // Focus underline. Dividing lines.
14
14
  export const globalBorderwidthXl = "6px"; // Double Focus Border
15
15
  export const globalBorderwidthXxl = "8px";
16
+ export const globalBreakpointXs = "320px";
17
+ export const globalBreakpointS = "600px";
18
+ export const globalBreakpointM = "960px";
19
+ export const globalBreakpointL = "1260px";
20
+ export const globalBreakpointXl = "1600px";
21
+ export const globalBreakpointXxl = "1920px";
16
22
  export const globalFontFluidHeadingS = {
17
23
  fontFamily: "Sage UI",
18
24
  fontWeight: "500",
package/json/components/dataviz.json CHANGED
@@ -27,6 +27,7 @@
27
27
  "datavizChartDonutOrangePattern": "var(--mode-color-colorcode-orange-deep)",
28
28
  "datavizGenericLabelAlt": "var(--mode-color-generic-txt-inverse-extreme)",
29
29
  "datavizGenericLabelDefault": "var(--mode-color-generic-txt-extreme)",
30
+ "datavizGenericPendingBgDefault": "var(--mode-color-generic-bg-nought)",
30
31
  "datavizGenericBlueBgAlt": "var(--mode-color-colorcode-blue-deep)",
31
32
  "datavizGenericBlueBgDefault": "var(--mode-color-colorcode-blue-muted)",
32
33
  "datavizGenericBlueBorder": "var(--mode-color-colorcode-blue-deep)",
package/json/global.json CHANGED
@@ -6,6 +6,12 @@
6
6
  "globalBorderwidthL": "4px",
7
7
  "globalBorderwidthXl": "6px",
8
8
  "globalBorderwidthXxl": "8px",
9
+ "globalBreakpointXs": "320px",
10
+ "globalBreakpointS": "600px",
11
+ "globalBreakpointM": "960px",
12
+ "globalBreakpointL": "1260px",
13
+ "globalBreakpointXl": "1600px",
14
+ "globalBreakpointXxl": "1920px",
9
15
  "globalFontFluidHeadingS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"},
10
16
  "globalFontFluidHeadingM": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)"},
11
17
  "globalFontFluidHeadingL": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)"},
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.6.0",
9
+ "version": "17.8.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/dataviz.scss CHANGED
@@ -31,6 +31,7 @@ $dataviz-chart-donut-orange-border: $mode-color-colorcode-orange-deep;
31
31
  $dataviz-chart-donut-orange-pattern: $mode-color-colorcode-orange-deep;
32
32
  $dataviz-generic-label-alt: $mode-color-generic-txt-inverse-extreme;
33
33
  $dataviz-generic-label-default: $mode-color-generic-txt-extreme;
34
+ $dataviz-generic-pending-bg-default: $mode-color-generic-bg-nought;
34
35
  $dataviz-generic-blue-bg-alt: $mode-color-colorcode-blue-deep;
35
36
  $dataviz-generic-blue-bg-default: $mode-color-colorcode-blue-muted;
36
37
  $dataviz-generic-blue-border: $mode-color-colorcode-blue-deep;
package/scss/global.scss CHANGED
@@ -10,6 +10,12 @@ $global-borderwidth-m: 3px;
10
10
  $global-borderwidth-l: 4px;
11
11
  $global-borderwidth-xl: 6px;
12
12
  $global-borderwidth-xxl: 8px;
13
+ $global-breakpoint-xs: 320px;
14
+ $global-breakpoint-s: 600px;
15
+ $global-breakpoint-m: 960px;
16
+ $global-breakpoint-l: 1260px;
17
+ $global-breakpoint-xl: 1600px;
18
+ $global-breakpoint-xxl: 1920px;
13
19
  $global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
14
20
  $global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
15
21
  $global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;