@sage/design-tokens 18.11.0 → 18.11.1

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 (7) hide show
  1. package/css/global.css +18 -18
  2. package/css/light-all.css +18 -18
  3. package/js/common/global.js +18 -18
  4. package/js/es6/global.js +18 -18
  5. package/json/global.json +18 -18
  6. package/package.json +1 -1
  7. package/scss/global.scss +18 -18
package/css/global.css CHANGED
@@ -27,7 +27,7 @@
27
27
  --global-modifier-input-disabled-fg: 0.3;
28
28
  --global-modifier-input-disabled-bg: 0.05;
29
29
  --global-radius-none: 0;
30
- --global-radius-scale: 1px;
30
+ --global-radius-scale: 1;
31
31
  --global-radius-container-circle: 999px;
32
32
  --global-radius-action-circle: 999px;
33
33
  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
@@ -119,23 +119,23 @@
119
119
  --global-borderwidth-l: 4px;
120
120
  --global-borderwidth-xl: 6px;
121
121
  --global-borderwidth-xxl: 8px;
122
- --global-radius-container-3-xs: 1px;
123
- --global-radius-container-2-xs: 2px;
124
- --global-radius-container-xs: 4px;
125
- --global-radius-container-s: 6px;
126
- --global-radius-container-m: 8px;
127
- --global-radius-container-l: 16px;
128
- --global-radius-container-xl: 24px;
129
- --global-radius-container-2-xl: 32px;
130
- --global-radius-container-3-xl: 40px;
131
- --global-radius-container-4-xl: 80px;
132
- --global-radius-action-2-xs: 1px;
133
- --global-radius-action-xs: 2px;
134
- --global-radius-action-s: 4px;
135
- --global-radius-action-m: 8px;
136
- --global-radius-action-l: 16px;
137
- --global-radius-action-xl: 20px;
138
- --global-radius-action-2-xl: 24px;
122
+ --global-radius-container-3-xs: calc(1px * var(--global-radius-scale));
123
+ --global-radius-container-2-xs: calc(2px * var(--global-radius-scale));
124
+ --global-radius-container-xs: calc(4px * var(--global-radius-scale));
125
+ --global-radius-container-s: calc(6px * var(--global-radius-scale));
126
+ --global-radius-container-m: calc(8px * var(--global-radius-scale));
127
+ --global-radius-container-l: calc(16px * var(--global-radius-scale));
128
+ --global-radius-container-xl: calc(24px * var(--global-radius-scale));
129
+ --global-radius-container-2-xl: calc(32px * var(--global-radius-scale));
130
+ --global-radius-container-3-xl: calc(40px * var(--global-radius-scale));
131
+ --global-radius-container-4-xl: calc(80px * var(--global-radius-scale));
132
+ --global-radius-action-2-xs: calc(1px * var(--global-radius-scale));
133
+ --global-radius-action-xs: calc(2px * var(--global-radius-scale));
134
+ --global-radius-action-s: calc(4px * var(--global-radius-scale));
135
+ --global-radius-action-m: calc(8px * var(--global-radius-scale));
136
+ --global-radius-action-l: calc(16px * var(--global-radius-scale));
137
+ --global-radius-action-xl: calc(20px * var(--global-radius-scale));
138
+ --global-radius-action-2-xl: calc(24px * var(--global-radius-scale));
139
139
  --global-size-none: 0px;
140
140
  --global-size-6-xs: 2px;
141
141
  --global-size-5-xs: 4px;
package/css/light-all.css CHANGED
@@ -23,7 +23,7 @@
23
23
  --global-modifier-input-disabled-fg: 0.3;
24
24
  --global-modifier-input-disabled-bg: 0.05;
25
25
  --global-radius-none: 0;
26
- --global-radius-scale: 1px;
26
+ --global-radius-scale: 1;
27
27
  --global-radius-container-circle: 999px;
28
28
  --global-radius-action-circle: 999px;
29
29
  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
@@ -115,23 +115,23 @@
115
115
  --global-borderwidth-l: 4px;
116
116
  --global-borderwidth-xl: 6px;
117
117
  --global-borderwidth-xxl: 8px;
118
- --global-radius-container-3-xs: 1px;
119
- --global-radius-container-2-xs: 2px;
120
- --global-radius-container-xs: 4px;
121
- --global-radius-container-s: 6px;
122
- --global-radius-container-m: 8px;
123
- --global-radius-container-l: 16px;
124
- --global-radius-container-xl: 24px;
125
- --global-radius-container-2-xl: 32px;
126
- --global-radius-container-3-xl: 40px;
127
- --global-radius-container-4-xl: 80px;
128
- --global-radius-action-2-xs: 1px;
129
- --global-radius-action-xs: 2px;
130
- --global-radius-action-s: 4px;
131
- --global-radius-action-m: 8px;
132
- --global-radius-action-l: 16px;
133
- --global-radius-action-xl: 20px;
134
- --global-radius-action-2-xl: 24px;
118
+ --global-radius-container-3-xs: calc(1px * var(--global-radius-scale));
119
+ --global-radius-container-2-xs: calc(2px * var(--global-radius-scale));
120
+ --global-radius-container-xs: calc(4px * var(--global-radius-scale));
121
+ --global-radius-container-s: calc(6px * var(--global-radius-scale));
122
+ --global-radius-container-m: calc(8px * var(--global-radius-scale));
123
+ --global-radius-container-l: calc(16px * var(--global-radius-scale));
124
+ --global-radius-container-xl: calc(24px * var(--global-radius-scale));
125
+ --global-radius-container-2-xl: calc(32px * var(--global-radius-scale));
126
+ --global-radius-container-3-xl: calc(40px * var(--global-radius-scale));
127
+ --global-radius-container-4-xl: calc(80px * var(--global-radius-scale));
128
+ --global-radius-action-2-xs: calc(1px * var(--global-radius-scale));
129
+ --global-radius-action-xs: calc(2px * var(--global-radius-scale));
130
+ --global-radius-action-s: calc(4px * var(--global-radius-scale));
131
+ --global-radius-action-m: calc(8px * var(--global-radius-scale));
132
+ --global-radius-action-l: calc(16px * var(--global-radius-scale));
133
+ --global-radius-action-xl: calc(20px * var(--global-radius-scale));
134
+ --global-radius-action-2-xl: calc(24px * var(--global-radius-scale));
135
135
  --global-size-none: 0px;
136
136
  --global-size-6-xs: 2px;
137
137
  --global-size-5-xs: 4px;
package/js/common/global.js CHANGED
@@ -102,25 +102,25 @@ module.exports.globalModifierButtonHoverAlt = "0.10";
102
102
  module.exports.globalModifierInputDisabledFg = "0.3";
103
103
  module.exports.globalModifierInputDisabledBg = "0.05";
104
104
  module.exports.globalRadiusNone = "0";
105
- module.exports.globalRadiusScale = "1px";
106
- module.exports.globalRadiusContainer3Xs = "1px";
107
- module.exports.globalRadiusContainer2Xs = "2px";
108
- module.exports.globalRadiusContainerXs = "4px";
109
- module.exports.globalRadiusContainerS = "6px";
110
- module.exports.globalRadiusContainerM = "8px";
111
- module.exports.globalRadiusContainerL = "16px";
112
- module.exports.globalRadiusContainerXl = "24px";
113
- module.exports.globalRadiusContainer2Xl = "32px";
114
- module.exports.globalRadiusContainer3Xl = "40px";
115
- module.exports.globalRadiusContainer4Xl = "80px";
105
+ module.exports.globalRadiusScale = "1";
106
+ module.exports.globalRadiusContainer3Xs = "calc(1px * var(--global-radius-scale))";
107
+ module.exports.globalRadiusContainer2Xs = "calc(2px * var(--global-radius-scale))";
108
+ module.exports.globalRadiusContainerXs = "calc(4px * var(--global-radius-scale))";
109
+ module.exports.globalRadiusContainerS = "calc(6px * var(--global-radius-scale))";
110
+ module.exports.globalRadiusContainerM = "calc(8px * var(--global-radius-scale))";
111
+ module.exports.globalRadiusContainerL = "calc(16px * var(--global-radius-scale))";
112
+ module.exports.globalRadiusContainerXl = "calc(24px * var(--global-radius-scale))";
113
+ module.exports.globalRadiusContainer2Xl = "calc(32px * var(--global-radius-scale))";
114
+ module.exports.globalRadiusContainer3Xl = "calc(40px * var(--global-radius-scale))";
115
+ module.exports.globalRadiusContainer4Xl = "calc(80px * var(--global-radius-scale))";
116
116
  module.exports.globalRadiusContainerCircle = "999px";
117
- module.exports.globalRadiusAction2Xs = "1px";
118
- module.exports.globalRadiusActionXs = "2px";
119
- module.exports.globalRadiusActionS = "4px";
120
- module.exports.globalRadiusActionM = "8px";
121
- module.exports.globalRadiusActionL = "16px";
122
- module.exports.globalRadiusActionXl = "20px";
123
- module.exports.globalRadiusAction2Xl = "24px";
117
+ module.exports.globalRadiusAction2Xs = "calc(1px * var(--global-radius-scale))";
118
+ module.exports.globalRadiusActionXs = "calc(2px * var(--global-radius-scale))";
119
+ module.exports.globalRadiusActionS = "calc(4px * var(--global-radius-scale))";
120
+ module.exports.globalRadiusActionM = "calc(8px * var(--global-radius-scale))";
121
+ module.exports.globalRadiusActionL = "calc(16px * var(--global-radius-scale))";
122
+ module.exports.globalRadiusActionXl = "calc(20px * var(--global-radius-scale))";
123
+ module.exports.globalRadiusAction2Xl = "calc(24px * var(--global-radius-scale))";
124
124
  module.exports.globalRadiusActionCircle = "999px";
125
125
  module.exports.globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
126
126
  module.exports.globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";
package/js/es6/global.js CHANGED
@@ -102,25 +102,25 @@ export const globalModifierButtonHoverAlt = "0.10";
102
102
  export const globalModifierInputDisabledFg = "0.3";
103
103
  export const globalModifierInputDisabledBg = "0.05";
104
104
  export const globalRadiusNone = "0";
105
- export const globalRadiusScale = "1px";
106
- export const globalRadiusContainer3Xs = "1px";
107
- export const globalRadiusContainer2Xs = "2px";
108
- export const globalRadiusContainerXs = "4px";
109
- export const globalRadiusContainerS = "6px";
110
- export const globalRadiusContainerM = "8px";
111
- export const globalRadiusContainerL = "16px";
112
- export const globalRadiusContainerXl = "24px";
113
- export const globalRadiusContainer2Xl = "32px";
114
- export const globalRadiusContainer3Xl = "40px";
115
- export const globalRadiusContainer4Xl = "80px";
105
+ export const globalRadiusScale = "1";
106
+ export const globalRadiusContainer3Xs = "calc(1px * var(--global-radius-scale))";
107
+ export const globalRadiusContainer2Xs = "calc(2px * var(--global-radius-scale))";
108
+ export const globalRadiusContainerXs = "calc(4px * var(--global-radius-scale))";
109
+ export const globalRadiusContainerS = "calc(6px * var(--global-radius-scale))";
110
+ export const globalRadiusContainerM = "calc(8px * var(--global-radius-scale))";
111
+ export const globalRadiusContainerL = "calc(16px * var(--global-radius-scale))";
112
+ export const globalRadiusContainerXl = "calc(24px * var(--global-radius-scale))";
113
+ export const globalRadiusContainer2Xl = "calc(32px * var(--global-radius-scale))";
114
+ export const globalRadiusContainer3Xl = "calc(40px * var(--global-radius-scale))";
115
+ export const globalRadiusContainer4Xl = "calc(80px * var(--global-radius-scale))";
116
116
  export const globalRadiusContainerCircle = "999px";
117
- export const globalRadiusAction2Xs = "1px";
118
- export const globalRadiusActionXs = "2px";
119
- export const globalRadiusActionS = "4px";
120
- export const globalRadiusActionM = "8px";
121
- export const globalRadiusActionL = "16px";
122
- export const globalRadiusActionXl = "20px";
123
- export const globalRadiusAction2Xl = "24px";
117
+ export const globalRadiusAction2Xs = "calc(1px * var(--global-radius-scale))";
118
+ export const globalRadiusActionXs = "calc(2px * var(--global-radius-scale))";
119
+ export const globalRadiusActionS = "calc(4px * var(--global-radius-scale))";
120
+ export const globalRadiusActionM = "calc(8px * var(--global-radius-scale))";
121
+ export const globalRadiusActionL = "calc(16px * var(--global-radius-scale))";
122
+ export const globalRadiusActionXl = "calc(20px * var(--global-radius-scale))";
123
+ export const globalRadiusAction2Xl = "calc(24px * var(--global-radius-scale))";
124
124
  export const globalRadiusActionCircle = "999px";
125
125
  export const globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
126
126
  export const globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";
package/json/global.json CHANGED
@@ -541,25 +541,25 @@
541
541
  "globalModifierInputDisabledFg": "0.3",
542
542
  "globalModifierInputDisabledBg": "0.05",
543
543
  "globalRadiusNone": "0",
544
- "globalRadiusScale": "1px",
545
- "globalRadiusContainer3Xs": "1px",
546
- "globalRadiusContainer2Xs": "2px",
547
- "globalRadiusContainerXs": "4px",
548
- "globalRadiusContainerS": "6px",
549
- "globalRadiusContainerM": "8px",
550
- "globalRadiusContainerL": "16px",
551
- "globalRadiusContainerXl": "24px",
552
- "globalRadiusContainer2Xl": "32px",
553
- "globalRadiusContainer3Xl": "40px",
554
- "globalRadiusContainer4Xl": "80px",
544
+ "globalRadiusScale": "1",
545
+ "globalRadiusContainer3Xs": "calc(1px * var(--global-radius-scale))",
546
+ "globalRadiusContainer2Xs": "calc(2px * var(--global-radius-scale))",
547
+ "globalRadiusContainerXs": "calc(4px * var(--global-radius-scale))",
548
+ "globalRadiusContainerS": "calc(6px * var(--global-radius-scale))",
549
+ "globalRadiusContainerM": "calc(8px * var(--global-radius-scale))",
550
+ "globalRadiusContainerL": "calc(16px * var(--global-radius-scale))",
551
+ "globalRadiusContainerXl": "calc(24px * var(--global-radius-scale))",
552
+ "globalRadiusContainer2Xl": "calc(32px * var(--global-radius-scale))",
553
+ "globalRadiusContainer3Xl": "calc(40px * var(--global-radius-scale))",
554
+ "globalRadiusContainer4Xl": "calc(80px * var(--global-radius-scale))",
555
555
  "globalRadiusContainerCircle": "999px",
556
- "globalRadiusAction2Xs": "1px",
557
- "globalRadiusActionXs": "2px",
558
- "globalRadiusActionS": "4px",
559
- "globalRadiusActionM": "8px",
560
- "globalRadiusActionL": "16px",
561
- "globalRadiusActionXl": "20px",
562
- "globalRadiusAction2Xl": "24px",
556
+ "globalRadiusAction2Xs": "calc(1px * var(--global-radius-scale))",
557
+ "globalRadiusActionXs": "calc(2px * var(--global-radius-scale))",
558
+ "globalRadiusActionS": "calc(4px * var(--global-radius-scale))",
559
+ "globalRadiusActionM": "calc(8px * var(--global-radius-scale))",
560
+ "globalRadiusActionL": "calc(16px * var(--global-radius-scale))",
561
+ "globalRadiusActionXl": "calc(20px * var(--global-radius-scale))",
562
+ "globalRadiusAction2Xl": "calc(24px * var(--global-radius-scale))",
563
563
  "globalRadiusActionCircle": "999px",
564
564
  "globalDepthNone": "0 0 0 0 rgba(0,0,0,0)",
565
565
  "globalDepthLvl0": "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)",
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.0",
9
+ "version": "18.11.1",
10
10
  "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
11
11
  "tags": [
12
12
  "design tokens",
package/scss/global.scss CHANGED
@@ -23,7 +23,7 @@ $global-modifier-button-hover-alt: 0.10;
23
23
  $global-modifier-input-disabled-fg: 0.3;
24
24
  $global-modifier-input-disabled-bg: 0.05;
25
25
  $global-radius-none: 0;
26
- $global-radius-scale: 1px;
26
+ $global-radius-scale: 1;
27
27
  $global-radius-container-circle: 999px;
28
28
  $global-radius-action-circle: 999px;
29
29
  $global-depth-none: 0 0 0 0 rgba(0,0,0,0);
@@ -115,23 +115,23 @@ $global-borderwidth-m: 3px;
115
115
  $global-borderwidth-l: 4px;
116
116
  $global-borderwidth-xl: 6px;
117
117
  $global-borderwidth-xxl: 8px;
118
- $global-radius-container-3-xs: 1px;
119
- $global-radius-container-2-xs: 2px;
120
- $global-radius-container-xs: 4px;
121
- $global-radius-container-s: 6px;
122
- $global-radius-container-m: 8px;
123
- $global-radius-container-l: 16px;
124
- $global-radius-container-xl: 24px;
125
- $global-radius-container-2-xl: 32px;
126
- $global-radius-container-3-xl: 40px;
127
- $global-radius-container-4-xl: 80px;
128
- $global-radius-action-2-xs: 1px;
129
- $global-radius-action-xs: 2px;
130
- $global-radius-action-s: 4px;
131
- $global-radius-action-m: 8px;
132
- $global-radius-action-l: 16px;
133
- $global-radius-action-xl: 20px;
134
- $global-radius-action-2-xl: 24px;
118
+ $global-radius-container-3-xs: calc(1px * $global-radius-scale);
119
+ $global-radius-container-2-xs: calc(2px * $global-radius-scale);
120
+ $global-radius-container-xs: calc(4px * $global-radius-scale);
121
+ $global-radius-container-s: calc(6px * $global-radius-scale);
122
+ $global-radius-container-m: calc(8px * $global-radius-scale);
123
+ $global-radius-container-l: calc(16px * $global-radius-scale);
124
+ $global-radius-container-xl: calc(24px * $global-radius-scale);
125
+ $global-radius-container-2-xl: calc(32px * $global-radius-scale);
126
+ $global-radius-container-3-xl: calc(40px * $global-radius-scale);
127
+ $global-radius-container-4-xl: calc(80px * $global-radius-scale);
128
+ $global-radius-action-2-xs: calc(1px * $global-radius-scale);
129
+ $global-radius-action-xs: calc(2px * $global-radius-scale);
130
+ $global-radius-action-s: calc(4px * $global-radius-scale);
131
+ $global-radius-action-m: calc(8px * $global-radius-scale);
132
+ $global-radius-action-l: calc(16px * $global-radius-scale);
133
+ $global-radius-action-xl: calc(20px * $global-radius-scale);
134
+ $global-radius-action-2-xl: calc(24px * $global-radius-scale);
135
135
  $global-size-none: 0px;
136
136
  $global-size-6-xs: 2px;
137
137
  $global-size-5-xs: 4px;