@sage/design-tokens 18.10.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 (9) hide show
  1. package/css/global.css +98 -91
  2. package/css/light-all.css +98 -91
  3. package/js/common/global.d.ts +9 -0
  4. package/js/common/global.js +98 -91
  5. package/js/es6/global.d.ts +9 -0
  6. package/js/es6/global.js +98 -91
  7. package/json/global.json +540 -91
  8. package/package.json +1 -1
  9. package/scss/global.scss +98 -91
package/scss/global.scss CHANGED
@@ -10,6 +10,12 @@ $global-breakpoint-m: 960px;
10
10
  $global-breakpoint-l: 1260px;
11
11
  $global-breakpoint-xl: 1600px;
12
12
  $global-breakpoint-xxl: 1920px;
13
+ $global-font-families-heading: Sage UI;
14
+ $global-font-families-subheading: Sage UI;
15
+ $global-font-families-body: Sage UI;
16
+ $global-font-families-component: Sage UI;
17
+ $global-font-families-sage-icons: sage-icons;
18
+ $global-font-families-other: Open Sans;
13
19
  $global-modifier-button-active: 0.30;
14
20
  $global-modifier-button-active-alt: 0.15;
15
21
  $global-modifier-button-hover: 0.15;
@@ -17,83 +23,84 @@ $global-modifier-button-hover-alt: 0.10;
17
23
  $global-modifier-input-disabled-fg: 0.3;
18
24
  $global-modifier-input-disabled-bg: 0.05;
19
25
  $global-radius-none: 0;
26
+ $global-radius-scale: 1;
20
27
  $global-radius-container-circle: 999px;
21
28
  $global-radius-action-circle: 999px;
22
29
  $global-depth-none: 0 0 0 0 rgba(0,0,0,0);
23
- $global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
24
- $global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
25
- $global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
26
- $global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;
27
- $global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;
28
- $global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;
29
- $global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
30
- $global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
31
- $global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
32
- $global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
33
- $global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
34
- $global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
35
- $global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
36
- $global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;
37
- $global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
38
- $global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
39
- $global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
40
- $global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;
41
- $global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
42
- $global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
43
- $global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
44
- $global-font-fluid-comp-icon-s: 20px sage-icons;
45
- $global-font-fluid-comp-icon-m: 20px sage-icons;
46
- $global-font-fluid-comp-icon-l: 20px sage-icons;
47
- $global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
48
- $global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
49
- $global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
50
- $global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
51
- $global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
52
- $global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
53
- $global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;
54
- $global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
55
- $global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
56
- $global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;
57
- $global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;
58
- $global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;
59
- $global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;
60
- $global-font-static-heading-s: 500 21px/1.25 Sage UI;
61
- $global-font-static-heading-m: 700 24px/1.25 Sage UI;
62
- $global-font-static-heading-l: 700 30px/1.25 Sage UI;
63
- $global-font-static-subheading-m: 500 16px/1.25 Sage UI;
64
- $global-font-static-subheading-l: 500 18px/1.25 Sage UI;
65
- $global-font-static-section-heading-s: 700 16px/1.25 Sage UI;
66
- $global-font-static-section-heading-m: 700 21px/1.25 Sage UI;
67
- $global-font-static-body-regular-s: 400 14px/1.5 Sage UI;
68
- $global-font-static-body-regular-m: 400 14px/1.5 Sage UI;
69
- $global-font-static-body-regular-l: 400 16px/1.5 Sage UI;
70
- $global-font-static-body-medium-s: 500 14px/1.5 Sage UI;
71
- $global-font-static-body-medium-m: 500 14px/1.5 Sage UI;
72
- $global-font-static-body-medium-l: 500 16px/1.5 Sage UI;
73
- $global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;
74
- $global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;
75
- $global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;
76
- $global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;
77
- $global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;
78
- $global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;
79
- $global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;
80
- $global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;
81
- $global-font-static-comp-icon-s: 20px sage-icons;
82
- $global-font-static-comp-icon-m: 20px sage-icons;
83
- $global-font-static-comp-icon-l: 20px sage-icons;
84
- $global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;
85
- $global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;
86
- $global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;
87
- $global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;
88
- $global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;
89
- $global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;
90
- $global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;
91
- $global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;
92
- $global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;
93
- $global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;
94
- $global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;
95
- $global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;
96
- $global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;
30
+ $global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 $global-font-families-heading;
31
+ $global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 $global-font-families-heading;
32
+ $global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 $global-font-families-heading;
33
+ $global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 $global-font-families-subheading;
34
+ $global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 $global-font-families-subheading;
35
+ $global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 $global-font-families-subheading;
36
+ $global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 $global-font-families-subheading;
37
+ $global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-body;
38
+ $global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 $global-font-families-body;
39
+ $global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 $global-font-families-body;
40
+ $global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-body;
41
+ $global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 $global-font-families-body;
42
+ $global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 $global-font-families-body;
43
+ $global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 $global-font-families-component;
44
+ $global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
45
+ $global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
46
+ $global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 $global-font-families-component;
47
+ $global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 $global-font-families-component;
48
+ $global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
49
+ $global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
50
+ $global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 $global-font-families-component;
51
+ $global-font-fluid-comp-icon-s: 20px $global-font-families-sage-icons;
52
+ $global-font-fluid-comp-icon-m: 20px $global-font-families-sage-icons;
53
+ $global-font-fluid-comp-icon-l: 20px $global-font-families-sage-icons;
54
+ $global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
55
+ $global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
56
+ $global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 $global-font-families-component;
57
+ $global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
58
+ $global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
59
+ $global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 $global-font-families-component;
60
+ $global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 $global-font-families-component;
61
+ $global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 $global-font-families-component;
62
+ $global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 $global-font-families-component;
63
+ $global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 $global-font-families-component;
64
+ $global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 $global-font-families-component;
65
+ $global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 $global-font-families-component;
66
+ $global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 $global-font-families-component;
67
+ $global-font-static-heading-s: 500 21px/1.25 $global-font-families-heading;
68
+ $global-font-static-heading-m: 700 24px/1.25 $global-font-families-heading;
69
+ $global-font-static-heading-l: 700 30px/1.25 $global-font-families-heading;
70
+ $global-font-static-subheading-m: 500 16px/1.25 $global-font-families-subheading;
71
+ $global-font-static-subheading-l: 500 18px/1.25 $global-font-families-subheading;
72
+ $global-font-static-section-heading-s: 700 16px/1.25 $global-font-families-subheading;
73
+ $global-font-static-section-heading-m: 700 21px/1.25 $global-font-families-subheading;
74
+ $global-font-static-body-regular-s: 400 14px/1.5 $global-font-families-body;
75
+ $global-font-static-body-regular-m: 400 14px/1.5 $global-font-families-body;
76
+ $global-font-static-body-regular-l: 400 16px/1.5 $global-font-families-body;
77
+ $global-font-static-body-medium-s: 500 14px/1.5 $global-font-families-body;
78
+ $global-font-static-body-medium-m: 500 14px/1.5 $global-font-families-body;
79
+ $global-font-static-body-medium-l: 500 16px/1.5 $global-font-families-body;
80
+ $global-font-static-comp-medium-xs: 500 13px/1.5 $global-font-families-component;
81
+ $global-font-static-comp-medium-s: 500 14px/1.5 $global-font-families-component;
82
+ $global-font-static-comp-medium-m: 500 14px/1.5 $global-font-families-component;
83
+ $global-font-static-comp-medium-l: 500 16px/1.5 $global-font-families-component;
84
+ $global-font-static-comp-regular-xs: 400 13px/1.5 $global-font-families-component;
85
+ $global-font-static-comp-regular-s: 400 14px/1.5 $global-font-families-component;
86
+ $global-font-static-comp-regular-m: 400 14px/1.5 $global-font-families-component;
87
+ $global-font-static-comp-regular-l: 400 16px/1.5 $global-font-families-component;
88
+ $global-font-static-comp-icon-s: 20px $global-font-families-sage-icons;
89
+ $global-font-static-comp-icon-m: 20px $global-font-families-sage-icons;
90
+ $global-font-static-comp-icon-l: 20px $global-font-families-sage-icons;
91
+ $global-font-static-comp-lined-regular-s: 400 14px/1.5 $global-font-families-component;
92
+ $global-font-static-comp-lined-regular-m: 400 14px/1.5 $global-font-families-component;
93
+ $global-font-static-comp-lined-regular-l: 400 16px/1.5 $global-font-families-component;
94
+ $global-font-static-comp-lined-medium-s: 500 14px/1.5 $global-font-families-component;
95
+ $global-font-static-comp-lined-medium-m: 500 14px/1.5 $global-font-families-component;
96
+ $global-font-static-comp-lined-medium-l: 500 16px/1.5 $global-font-families-component;
97
+ $global-font-static-comp-placeholder-xs: 500 12px/1.5 $global-font-families-component;
98
+ $global-font-static-comp-placeholder-s: 500 14px/1.5 $global-font-families-component;
99
+ $global-font-static-comp-placeholder-m: 500 18px/1.5 $global-font-families-component;
100
+ $global-font-static-comp-placeholder-ml: 500 24px/1.5 $global-font-families-component;
101
+ $global-font-static-comp-placeholder-l: 500 30px/1.5 $global-font-families-component;
102
+ $global-font-static-comp-placeholder-xl: 500 40px/1.5 $global-font-families-component;
103
+ $global-font-static-comp-placeholder-xxl: 500 52px/1.5 $global-font-families-component;
97
104
  $global-depth-lvl0: 0 0 1px 1px $mode-color-generic-depth-faint, 1px 2px 2px 0 $mode-color-generic-depth-soft;
98
105
  $global-depth-lvl1: 0 1px 2px 0 $mode-color-generic-depth-faint, 2px 2px 10px 0 $mode-color-generic-depth-soft;
99
106
  $global-depth-lvl2: 0 2px 3px 0 $mode-color-generic-depth-faint, 6px 6px 30px 0 $mode-color-generic-depth-delicate;
@@ -108,23 +115,23 @@ $global-borderwidth-m: 3px;
108
115
  $global-borderwidth-l: 4px;
109
116
  $global-borderwidth-xl: 6px;
110
117
  $global-borderwidth-xxl: 8px;
111
- $global-radius-container-3-xs: 1px;
112
- $global-radius-container-2-xs: 2px;
113
- $global-radius-container-xs: 4px;
114
- $global-radius-container-s: 6px;
115
- $global-radius-container-m: 8px;
116
- $global-radius-container-l: 16px;
117
- $global-radius-container-xl: 24px;
118
- $global-radius-container-2-xl: 32px;
119
- $global-radius-container-3-xl: 40px;
120
- $global-radius-container-4-xl: 80px;
121
- $global-radius-action-2-xs: 1px;
122
- $global-radius-action-xs: 2px;
123
- $global-radius-action-s: 4px;
124
- $global-radius-action-m: 8px;
125
- $global-radius-action-l: 16px;
126
- $global-radius-action-xl: 20px;
127
- $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);
128
135
  $global-size-none: 0px;
129
136
  $global-size-6-xs: 2px;
130
137
  $global-size-5-xs: 4px;