@sage/design-tokens 18.9.1 → 18.11.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 (9) hide show
  1. package/css/global.css +84 -76
  2. package/css/light-all.css +84 -76
  3. package/js/common/global.d.ts +10 -0
  4. package/js/common/global.js +84 -76
  5. package/js/es6/global.d.ts +20 -2
  6. package/js/es6/global.js +84 -76
  7. package/json/global.json +526 -76
  8. package/package.json +1 -1
  9. package/scss/global.scss +84 -76
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,90 +27,92 @@
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: 1px;
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);
104
111
  --global-depth-lvl3: 0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint);
105
112
  --global-depth-sticky-b: 0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft);
106
- --global-depth-sticky-l: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
107
- --global-depth-sticky-r: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
113
+ --global-depth-sticky-l: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
114
+ --global-depth-sticky-r: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
115
+ --global-depth-sticky-t: inset 0 8px 4px -4px var(--mode-color-generic-depth-faint);
108
116
  --global-borderwidth-xs: 1px;
109
117
  --global-borderwidth-s: 2px;
110
118
  --global-borderwidth-m: 3px;
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,90 +23,92 @@
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: 1px;
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);
100
107
  --global-depth-lvl3: 0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint);
101
108
  --global-depth-sticky-b: 0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft);
102
- --global-depth-sticky-l: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
103
- --global-depth-sticky-r: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
109
+ --global-depth-sticky-l: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
110
+ --global-depth-sticky-r: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
111
+ --global-depth-sticky-t: inset 0 8px 4px -4px var(--mode-color-generic-depth-faint);
104
112
  --global-borderwidth-xs: 1px;
105
113
  --global-borderwidth-s: 2px;
106
114
  --global-borderwidth-m: 3px;
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;
@@ -224,6 +233,7 @@ declare const tokens: {
224
233
  stickyB: DesignToken;
225
234
  stickyL: DesignToken;
226
235
  stickyR: DesignToken;
236
+ stickyT: DesignToken;
227
237
  };
228
238
  size: {
229
239
  none: DesignToken;