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