@scania/tegel-lite 0.1.0-beta.globals-test → 0.1.0-beta.globals-test-3
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.
- package/dist/components.css +8 -7
- package/dist/global.css +12 -1012
- package/dist/tl-header.css +5 -7
- package/dist/tl-side-menu.css +3 -0
- package/package.json +2 -2
package/dist/components.css
CHANGED
|
@@ -3262,6 +3262,11 @@ tds-footer {
|
|
|
3262
3262
|
}
|
|
3263
3263
|
|
|
3264
3264
|
.tl-header {
|
|
3265
|
+
/* Layout */
|
|
3266
|
+
--tds-header-height: 64px;
|
|
3267
|
+
--tds-header-list-item-md-height: 48px;
|
|
3268
|
+
/* App launcher dropdown background */
|
|
3269
|
+
--tds-header-app-launcher-menu-background: var(--header-app-launcher-menu-background);
|
|
3265
3270
|
/* Base text */
|
|
3266
3271
|
--header-nav-item: var(--component-header-color-foreground-strong);
|
|
3267
3272
|
/* Nav-item states */
|
|
@@ -3464,7 +3469,6 @@ tds-footer {
|
|
|
3464
3469
|
background-color: var(--component-header-color-background-pressed);
|
|
3465
3470
|
color: var(--header-nav-item-dropdown-opened);
|
|
3466
3471
|
position: relative;
|
|
3467
|
-
z-index: calc(var(--tds-z-index-header) + 1);
|
|
3468
3472
|
}
|
|
3469
3473
|
.tl-header__dropdown-wrapper--open:hover {
|
|
3470
3474
|
background-color: var(--component-header-color-background-pressed);
|
|
@@ -3511,7 +3515,6 @@ tds-footer {
|
|
|
3511
3515
|
background-color: var(--component-header-color-background-pressed);
|
|
3512
3516
|
color: var(--header-nav-item-dropdown-opened);
|
|
3513
3517
|
position: relative;
|
|
3514
|
-
z-index: calc(var(--tds-z-index-header) + 1);
|
|
3515
3518
|
}
|
|
3516
3519
|
.tl-header__dropdown-wrapper-user--open:hover {
|
|
3517
3520
|
background-color: var(--component-header-color-background-pressed);
|
|
@@ -3546,7 +3549,6 @@ tds-footer {
|
|
|
3546
3549
|
min-width: 190px;
|
|
3547
3550
|
max-height: calc(100vh - var(--tds-header-height));
|
|
3548
3551
|
overflow-y: auto;
|
|
3549
|
-
z-index: var(--tds-z-index-header);
|
|
3550
3552
|
}
|
|
3551
3553
|
.tl-header__dropdown-menu::-webkit-scrollbar {
|
|
3552
3554
|
width: var(--tl-scrollbar-width);
|
|
@@ -3596,7 +3598,6 @@ tds-footer {
|
|
|
3596
3598
|
min-width: 290px;
|
|
3597
3599
|
max-height: calc(100vh - var(--tds-header-height));
|
|
3598
3600
|
overflow-y: auto;
|
|
3599
|
-
z-index: var(--tds-z-index-header);
|
|
3600
3601
|
border-radius: 4px;
|
|
3601
3602
|
}
|
|
3602
3603
|
.tl-header__user-menu::-webkit-scrollbar {
|
|
@@ -3642,7 +3643,6 @@ tds-footer {
|
|
|
3642
3643
|
min-width: 320px;
|
|
3643
3644
|
max-height: calc(100vh - var(--tds-header-height));
|
|
3644
3645
|
overflow-y: auto;
|
|
3645
|
-
z-index: var(--tds-z-index-header);
|
|
3646
3646
|
}
|
|
3647
3647
|
.tl-header__launcher-menu::-webkit-scrollbar {
|
|
3648
3648
|
width: var(--tl-scrollbar-width);
|
|
@@ -3687,7 +3687,6 @@ tds-footer {
|
|
|
3687
3687
|
min-width: 320px;
|
|
3688
3688
|
max-height: calc(100vh - var(--tds-header-height));
|
|
3689
3689
|
overflow-y: auto;
|
|
3690
|
-
z-index: var(--tds-z-index-header);
|
|
3691
3690
|
border-radius: 4px;
|
|
3692
3691
|
}
|
|
3693
3692
|
.tl-header__launcher-menu-grid::-webkit-scrollbar {
|
|
@@ -3935,7 +3934,6 @@ tds-footer {
|
|
|
3935
3934
|
height: var(--tds-header-height);
|
|
3936
3935
|
background-color: var(--header-background);
|
|
3937
3936
|
width: 100%;
|
|
3938
|
-
z-index: var(--tds-z-index-header);
|
|
3939
3937
|
}
|
|
3940
3938
|
|
|
3941
3939
|
.tl-header__nav {
|
|
@@ -6162,6 +6160,9 @@ tds-footer {
|
|
|
6162
6160
|
--side-menu-subnav-background: var(--color-background-layer-01);
|
|
6163
6161
|
--side-menu-single-item-color: var(--color-foreground-text-strong);
|
|
6164
6162
|
--side-menu-bottom-menu-border-top: var(--component-side-menu-color-divider);
|
|
6163
|
+
--tds-header-app-launcher-menu-bg: var(--color-background-base);
|
|
6164
|
+
--tds-nav-item-border-color: var(--color-foreground-border-accent-focus);
|
|
6165
|
+
--tds-nav-dropdown-menu-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
|
|
6165
6166
|
--side-menu-dropdown-list-item-custom-background: var(--side-menu-background-cover);
|
|
6166
6167
|
--side-menu-dropdown-list-item-custom-background-hover: var(--side-menu-item-state-hover);
|
|
6167
6168
|
--side-menu-dropdown-list-item-custom-background-active: var(--side-menu-item-state-active);
|
package/dist/global.css
CHANGED
|
@@ -3,517 +3,6 @@
|
|
|
3
3
|
* It is a copy of the global.scss file in the core package, buwithout the web component styles.
|
|
4
4
|
* Once the Web Components imports are removed from the global.scss file, that file can be used for Tegel Lite as well.
|
|
5
5
|
*/
|
|
6
|
-
/* Multibrand tokens: Scania colors */
|
|
7
|
-
/* Tegel Color Primitives palette */
|
|
8
|
-
:root {
|
|
9
|
-
/* Neutral Solid */
|
|
10
|
-
--scania-neutral-solid-1000: rgba(0, 0, 0, 1);
|
|
11
|
-
--scania-neutral-solid-958: rgba(14, 16, 19, 1);
|
|
12
|
-
--scania-neutral-solid-928: rgba(21, 24, 29, 1);
|
|
13
|
-
--scania-neutral-solid-900: rgba(28, 34, 43, 1);
|
|
14
|
-
--scania-neutral-solid-868: rgba(36, 44, 55, 1);
|
|
15
|
-
--scania-neutral-solid-846: rgba(45, 54, 67, 1);
|
|
16
|
-
--scania-neutral-solid-800: rgba(58, 69, 84, 1);
|
|
17
|
-
--scania-neutral-solid-700: rgba(83, 95, 112, 1);
|
|
18
|
-
--scania-neutral-solid-600: rgba(117, 131, 152, 1);
|
|
19
|
-
--scania-neutral-solid-500: rgba(147, 161, 183, 1);
|
|
20
|
-
--scania-neutral-solid-400: rgba(181, 189, 204, 1);
|
|
21
|
-
--scania-neutral-solid-300: rgba(206, 210, 220, 1);
|
|
22
|
-
--scania-neutral-solid-200: rgba(222, 224, 230, 1);
|
|
23
|
-
--scania-neutral-solid-100: rgba(235, 236, 238, 1);
|
|
24
|
-
--scania-neutral-solid-50: rgba(243, 244, 247, 1);
|
|
25
|
-
--scania-neutral-solid-00: rgba(255, 255, 255, 1);
|
|
26
|
-
/* Neutral Transparent */
|
|
27
|
-
--scania-neutral-transparent-958: var(--scania-neutral-solid-958);
|
|
28
|
-
--scania-neutral-transparent-826: rgba(28, 39, 57, 0.86);
|
|
29
|
-
--scania-neutral-transparent-700: rgba(6, 23, 49, 0.69);
|
|
30
|
-
--scania-neutral-transparent-600: rgba(23, 50, 87, 0.6);
|
|
31
|
-
--scania-neutral-transparent-500: rgba(41, 68, 110, 0.5);
|
|
32
|
-
--scania-neutral-transparent-400: rgba(41, 65, 110, 0.35);
|
|
33
|
-
--scania-neutral-transparent-200: rgba(51, 64, 102, 0.17);
|
|
34
|
-
/* Neutral Transparent Inverse */
|
|
35
|
-
--scania-neutral-transparent-inverse-958: var(--scania-neutral-solid-50);
|
|
36
|
-
--scania-neutral-transparent-inverse-700: rgba(226, 235, 253, 0.8);
|
|
37
|
-
--scania-neutral-transparent-inverse-600: rgba(195, 213, 242, 0.75);
|
|
38
|
-
--scania-neutral-transparent-inverse-500: rgba(194, 218, 252, 0.6);
|
|
39
|
-
--scania-neutral-transparent-inverse-400: rgba(184, 212, 250, 0.45);
|
|
40
|
-
--scania-neutral-transparent-inverse-200: rgba(172, 204, 246, 0.34);
|
|
41
|
-
/* Blue Solid */
|
|
42
|
-
--scania-blue-900: rgba(0, 21, 51, 1);
|
|
43
|
-
--scania-blue-800: rgba(4, 30, 66, 1);
|
|
44
|
-
--scania-blue-700: rgba(15, 50, 99, 1);
|
|
45
|
-
--scania-blue-600: rgba(22, 65, 127, 1);
|
|
46
|
-
--scania-blue-500: rgba(32, 88, 168, 1);
|
|
47
|
-
--scania-blue-400: rgba(43, 112, 211, 1);
|
|
48
|
-
--scania-blue-300: rgba(74, 137, 243, 1);
|
|
49
|
-
--scania-blue-200: rgba(135, 175, 232, 1);
|
|
50
|
-
--scania-blue-100: rgba(186, 205, 232, 1);
|
|
51
|
-
--scania-blue-50: rgba(216, 221, 229, 1);
|
|
52
|
-
/* Extended Red Solid */
|
|
53
|
-
--scania-extended-red-900: rgba(53, 0, 4, 1);
|
|
54
|
-
--scania-extended-red-800: rgba(72, 0, 8, 1);
|
|
55
|
-
--scania-extended-red-700: rgba(108, 0, 17, 1);
|
|
56
|
-
--scania-extended-red-600: rgba(138, 0, 25, 1);
|
|
57
|
-
--scania-extended-red-500: rgba(182, 0, 36, 1);
|
|
58
|
-
--scania-extended-red-400: rgba(227, 3, 48, 1);
|
|
59
|
-
--scania-extended-red-300: rgba(255, 68, 79, 1);
|
|
60
|
-
--scania-extended-red-200: rgba(255, 141, 139, 1);
|
|
61
|
-
--scania-extended-red-100: rgba(255, 211, 210, 1);
|
|
62
|
-
--scania-extended-red-50: rgba(255, 223, 227, 1);
|
|
63
|
-
/* Extended Green Solid */
|
|
64
|
-
--scania-extended-green-900: rgba(0, 26, 18, 1);
|
|
65
|
-
--scania-extended-green-800: rgba(0, 37, 27, 1);
|
|
66
|
-
--scania-extended-green-700: rgba(0, 58, 45, 1);
|
|
67
|
-
--scania-extended-green-600: rgba(0, 76, 59, 1);
|
|
68
|
-
--scania-extended-green-500: rgba(0, 102, 80, 1);
|
|
69
|
-
--scania-extended-green-400: rgba(0, 129, 102, 1);
|
|
70
|
-
--scania-extended-green-300: rgba(0, 158, 126, 1);
|
|
71
|
-
--scania-extended-green-200: rgba(65, 194, 159, 1);
|
|
72
|
-
--scania-extended-green-100: rgba(164, 215, 196, 1);
|
|
73
|
-
--scania-extended-green-50: rgba(209, 224, 217, 1);
|
|
74
|
-
/* Extended Yellow Solid */
|
|
75
|
-
--scania-extended-yellow-900: rgba(29, 21, 0, 1);
|
|
76
|
-
--scania-extended-yellow-800: rgba(40, 30, 0, 1);
|
|
77
|
-
--scania-extended-yellow-700: rgba(63, 49, 0, 1);
|
|
78
|
-
--scania-extended-yellow-600: rgba(82, 64, 0, 1);
|
|
79
|
-
--scania-extended-yellow-500: rgba(110, 87, 0, 1);
|
|
80
|
-
--scania-extended-yellow-400: rgba(139, 110, 0, 1);
|
|
81
|
-
--scania-extended-yellow-300: rgba(169, 135, 0, 1);
|
|
82
|
-
--scania-extended-yellow-200: rgba(211, 169, 0, 1);
|
|
83
|
-
--scania-extended-yellow-100: rgba(241, 194, 27, 1);
|
|
84
|
-
--scania-extended-yellow-50: rgba(244, 219, 153, 1);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
/* Tegel Brand Usage Tokens */
|
|
88
|
-
/* Light mode tokens (applied to :root and .scania .tds-mode-light) */
|
|
89
|
-
:root,
|
|
90
|
-
.scania .tds-mode-light {
|
|
91
|
-
/* Foreground - Text */
|
|
92
|
-
--foreground-text-strong: var(--scania-neutral-transparent-958);
|
|
93
|
-
--foreground-text-defined: var(--scania-neutral-transparent-700);
|
|
94
|
-
--foreground-text-soft: var(--scania-neutral-transparent-600);
|
|
95
|
-
--foreground-text-subtle: var(--scania-neutral-transparent-500);
|
|
96
|
-
--foreground-text-disabled: var(--scania-neutral-transparent-400);
|
|
97
|
-
--foreground-text-supertype: var(--scania-blue-800);
|
|
98
|
-
/* Foreground - Text - Inverse */
|
|
99
|
-
--foreground-text-inverse-strong: var(--scania-neutral-transparent-inverse-958);
|
|
100
|
-
--foreground-text-inverse-defined: var(--scania-neutral-transparent-inverse-700);
|
|
101
|
-
--foreground-text-inverse-soft: var(--scania-neutral-transparent-inverse-600);
|
|
102
|
-
--foreground-text-inverse-subtle: var(--scania-neutral-transparent-inverse-500);
|
|
103
|
-
--foreground-text-inverse-disabled: var(--scania-neutral-transparent-inverse-400);
|
|
104
|
-
--foreground-text-inverse-supertype: var(--scania-neutral-solid-00);
|
|
105
|
-
/* Foreground - Text - Clickable */
|
|
106
|
-
--foreground-text-clickable-link: var(--scania-blue-400);
|
|
107
|
-
--foreground-text-clickable-link-visited: var(--scania-blue-700);
|
|
108
|
-
--foreground-text-clickable-link-brand: var(--scania-neutral-solid-00);
|
|
109
|
-
--foreground-text-clickable-link-brand-inverse: var(--scania-neutral-solid-958);
|
|
110
|
-
/* Foreground - Border */
|
|
111
|
-
--foreground-border-strong: var(--scania-neutral-transparent-958);
|
|
112
|
-
--foreground-border-defined: var(--scania-neutral-transparent-700);
|
|
113
|
-
--foreground-border-soft: var(--scania-neutral-transparent-600);
|
|
114
|
-
--foreground-border-subtle: var(--scania-neutral-transparent-500);
|
|
115
|
-
--foreground-border-disabled: var(--scania-neutral-transparent-400);
|
|
116
|
-
--foreground-border-discrete: var(--scania-neutral-transparent-200);
|
|
117
|
-
/* Foreground - Border - Inverse */
|
|
118
|
-
--foreground-border-inverse-strong: var(--scania-neutral-transparent-inverse-958);
|
|
119
|
-
--foreground-border-inverse-defined: var(--scania-neutral-transparent-inverse-700);
|
|
120
|
-
--foreground-border-inverse-soft: var(--scania-neutral-transparent-inverse-600);
|
|
121
|
-
--foreground-border-inverse-subtle: var(--scania-neutral-transparent-inverse-500);
|
|
122
|
-
--foreground-border-inverse-disabled: var(--scania-neutral-transparent-inverse-400);
|
|
123
|
-
--foreground-border-inverse-discrete: var(--scania-neutral-transparent-inverse-200);
|
|
124
|
-
/* Foreground - Border - Clickable */
|
|
125
|
-
--foreground-border-clickable-link: var(--scania-blue-400);
|
|
126
|
-
--foreground-border-clickable-focus: var(--scania-blue-400);
|
|
127
|
-
/* TODO: Migrate to unit tokens */
|
|
128
|
-
--foreground-border-clickable-focus-width: 2px;
|
|
129
|
-
/* Foreground - Elements - Transparent */
|
|
130
|
-
--foreground-elements-transparparent-strong: var(--scania-neutral-transparent-958);
|
|
131
|
-
--foreground-elements-transparparent-defined: var(--scania-neutral-transparent-700);
|
|
132
|
-
--foreground-elements-transparparent-soft: var(--scania-neutral-transparent-600);
|
|
133
|
-
--foreground-elements-transparparent-subtle: var(--scania-neutral-transparent-500);
|
|
134
|
-
--foreground-elements-transparparent-disabled: var(--scania-neutral-transparent-400);
|
|
135
|
-
--foreground-elements-transparparent-discrete: var(--scania-neutral-transparent-200);
|
|
136
|
-
--foreground-elements-transparparent-strong-inverse: var(
|
|
137
|
-
--scania-neutral-transparent-inverse-958
|
|
138
|
-
);
|
|
139
|
-
--foreground-elements-transparparent-defined-inverse: var(
|
|
140
|
-
--scania-neutral-transparent-inverse-700
|
|
141
|
-
);
|
|
142
|
-
--foreground-elements-transparparent-soft-inverse: var(--scania-neutral-transparent-inverse-600);
|
|
143
|
-
--foreground-elements-transparparent-subtle-inverse: var(
|
|
144
|
-
--scania-neutral-transparent-inverse-500
|
|
145
|
-
);
|
|
146
|
-
--foreground-elements-transparparent-disabled-inverse: var(
|
|
147
|
-
--scania-neutral-transparent-inverse-400
|
|
148
|
-
);
|
|
149
|
-
--foreground-elements-transparparent-discrete-inverse: var(
|
|
150
|
-
--scania-neutral-transparent-inverse-200
|
|
151
|
-
);
|
|
152
|
-
/* Foreground - Elements - Solid */
|
|
153
|
-
--foreground-elements-solid-1000: var(--scania-neutral-solid-958);
|
|
154
|
-
--foreground-elements-solid-900: var(--scania-neutral-solid-800);
|
|
155
|
-
--foreground-elements-solid-800: var(--scania-neutral-solid-700);
|
|
156
|
-
--foreground-elements-solid-700: var(--scania-neutral-solid-600);
|
|
157
|
-
--foreground-elements-solid-600: var(--scania-neutral-solid-500);
|
|
158
|
-
--foreground-elements-solid-500: var(--scania-neutral-solid-400);
|
|
159
|
-
--foreground-elements-solid-400: var(--scania-neutral-solid-300);
|
|
160
|
-
--foreground-elements-solid-300: var(--scania-neutral-solid-200);
|
|
161
|
-
--foreground-elements-solid-200: var(--scania-neutral-solid-100);
|
|
162
|
-
--foreground-elements-solid-100: var(--scania-neutral-solid-50);
|
|
163
|
-
/* Background - Elevation */
|
|
164
|
-
--background-elevation-base: var(--scania-neutral-solid-00);
|
|
165
|
-
--background-elevation-layer-01: var(--scania-neutral-solid-50);
|
|
166
|
-
--background-elevation-layer-02: var(--tds-grey-00);
|
|
167
|
-
--background-elevation-layer-03: var(--scania-neutral-solid-50);
|
|
168
|
-
--background-elevation-top: var(--scania-neutral-solid-00);
|
|
169
|
-
--background-elevation-scrim: rgb(0 0 0 / 38%);
|
|
170
|
-
--background-elevation-inverse: var(--scania-neutral-solid-1000);
|
|
171
|
-
--background-elevation-layer-01-inverse: var(--scania-neutral-solid-958);
|
|
172
|
-
--background-elevation-layer-02-inverse: var(--scania-neutral-solid-928);
|
|
173
|
-
--background-elevation-layer-03-inverse: var(--scania-neutral-solid-900);
|
|
174
|
-
--background-elevation-top-inverse: var(--scania-neutral-solid-900);
|
|
175
|
-
/* Background - Elements */
|
|
176
|
-
--background-elements-1000: var(--scania-neutral-solid-958);
|
|
177
|
-
--background-elements-900: var(--scania-neutral-solid-900);
|
|
178
|
-
--background-elements-800: var(--scania-neutral-solid-800);
|
|
179
|
-
--background-elements-700: var(--scania-neutral-solid-700);
|
|
180
|
-
--background-elements-600: var(--scania-neutral-solid-600);
|
|
181
|
-
--background-elements-500: var(--scania-neutral-solid-500);
|
|
182
|
-
--background-elements-400: var(--scania-neutral-solid-400);
|
|
183
|
-
--background-elements-300: var(--scania-neutral-solid-300);
|
|
184
|
-
--background-elements-200: var(--scania-neutral-solid-200);
|
|
185
|
-
--background-elements-100: var(--scania-neutral-solid-100);
|
|
186
|
-
/* Background - Clickable - Primary */
|
|
187
|
-
--background-clickable-primary-primary: var(--scania-blue-600);
|
|
188
|
-
--background-clickable-primary-primary-hover: var(--scania-blue-700);
|
|
189
|
-
--background-clickable-primary-pressed: var(--scania-blue-800);
|
|
190
|
-
--background-clickable-primary-focus: var(--scania-blue-700);
|
|
191
|
-
--background-clickable-primary-disabled: var(--scania-neutral-solid-50);
|
|
192
|
-
--background-clickable-primary-resting: var(--scania-neutral-solid-100);
|
|
193
|
-
/* Background - Clickable - Primary-Inverse */
|
|
194
|
-
--background-clickable-primary-inverse-primary: var(--scania-blue-400);
|
|
195
|
-
--background-clickable-primary-inverse-primary-hover: var(--scania-blue-500);
|
|
196
|
-
--background-clickable-primary-inverse-pressed: var(--scania-blue-300);
|
|
197
|
-
--background-clickable-primary-inverse-focus: var(--scania-blue-600);
|
|
198
|
-
--background-clickable-primary-inverse-disabled: var(--scania-neutral-solid-50);
|
|
199
|
-
--background-clickable-primary-inverse-resting: var(--scania-neutral-solid-100);
|
|
200
|
-
/* Background - Clickable - Danger */
|
|
201
|
-
--background-clickable-danger-danger: var(--scania-extended-red-400);
|
|
202
|
-
--background-clickable-danger-danger-hover: var(--scania-extended-red-600);
|
|
203
|
-
--background-clickable-danger-pressed: var(--scania-extended-red-700);
|
|
204
|
-
--background-clickable-danger-focus: var(--scania-extended-red-400);
|
|
205
|
-
--background-clickable-danger-disabled: var(--scania-neutral-solid-50);
|
|
206
|
-
--background-clickable-danger-resting: var(--scania-neutral-solid-100);
|
|
207
|
-
/* System - Info */
|
|
208
|
-
--system-info-strong: var(--scania-blue-800);
|
|
209
|
-
--system-info-default: var(--scania-blue-400);
|
|
210
|
-
--system-info-subtle: var(--scania-blue-50);
|
|
211
|
-
/* System - Success */
|
|
212
|
-
--system-success-strong: var(--scania-extended-green-700);
|
|
213
|
-
--system-success-default: var(--scania-extended-green-200);
|
|
214
|
-
--system-success-discrete: var(--scania-extended-green-50);
|
|
215
|
-
/* System - Warning */
|
|
216
|
-
--system-warning-strong: var(--scania-extended-yellow-800);
|
|
217
|
-
--system-warning-default: var(--scania-extended-yellow-100);
|
|
218
|
-
--system-warning-subtle: var(--tds-grey-00);
|
|
219
|
-
/* System - Danger */
|
|
220
|
-
--system-danger-strong: var(--scania-extended-red-800);
|
|
221
|
-
--system-danger-default: var(--scania-extended-red-400);
|
|
222
|
-
--system-danger-subtle-03: var(--scania-extended-red-50);
|
|
223
|
-
--system-danger-subtle-02: var(--scania-extended-red-50);
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
/* Dark mode tokens (applied to .tds-mode-dark and .scania .tds-mode-dark) */
|
|
227
|
-
.tds-mode-dark,
|
|
228
|
-
.scania .tds-mode-dark {
|
|
229
|
-
/* Foreground - Text */
|
|
230
|
-
--foreground-text-strong: var(--scania-neutral-transparent-inverse-958);
|
|
231
|
-
--foreground-text-defined: var(--scania-neutral-transparent-inverse-700);
|
|
232
|
-
--foreground-text-soft: var(--scania-neutral-transparent-inverse-600);
|
|
233
|
-
--foreground-text-subtle: var(--scania-neutral-transparent-inverse-500);
|
|
234
|
-
--foreground-text-disabled: var(--scania-neutral-transparent-inverse-400);
|
|
235
|
-
--foreground-text-supertype: var(--scania-neutral-solid-00);
|
|
236
|
-
/* Foreground - Text - Inverse */
|
|
237
|
-
--foreground-text-inverse-strong: var(--scania-neutral-transparent-958);
|
|
238
|
-
--foreground-text-inverse-defined: var(--scania-neutral-transparent-700);
|
|
239
|
-
--foreground-text-inverse-soft: var(--scania-neutral-transparent-600);
|
|
240
|
-
--foreground-text-inverse-subtle: var(--scania-neutral-transparent-500);
|
|
241
|
-
--foreground-text-inverse-disabled: var(--scania-neutral-transparent-400);
|
|
242
|
-
--foreground-text-inverse-supertype: var(--scania-blue-900);
|
|
243
|
-
/* Foreground - Text - Clickable */
|
|
244
|
-
--foreground-text-clickable-link: var(--scania-blue-300);
|
|
245
|
-
--foreground-text-clickable-link-visited: var(--scania-blue-100);
|
|
246
|
-
--foreground-text-clickable-link-brand: var(--scania-neutral-solid-00);
|
|
247
|
-
--foreground-text-clickable-link-brand-inverse: var(--scania-neutral-solid-00);
|
|
248
|
-
/* Foreground - Border */
|
|
249
|
-
--foreground-border-strong: var(--scania-neutral-transparent-inverse-958);
|
|
250
|
-
--foreground-border-defined: var(--scania-neutral-transparent-inverse-700);
|
|
251
|
-
--foreground-border-soft: var(--scania-neutral-transparent-inverse-600);
|
|
252
|
-
--foreground-border-subtle: var(--scania-neutral-transparent-inverse-500);
|
|
253
|
-
--foreground-border-disabled: var(--scania-neutral-transparent-inverse-400);
|
|
254
|
-
--foreground-border-discrete: var(--scania-neutral-transparent-inverse-200);
|
|
255
|
-
/* Foreground - Border - Inverse */
|
|
256
|
-
--foreground-border-inverse-strong: var(--scania-neutral-transparent-958);
|
|
257
|
-
--foreground-border-inverse-defined: var(--scania-neutral-transparent-700);
|
|
258
|
-
--foreground-border-inverse-soft: var(--scania-neutral-transparent-600);
|
|
259
|
-
--foreground-border-inverse-subtle: var(--scania-neutral-transparent-500);
|
|
260
|
-
--foreground-border-inverse-disabled: var(--scania-neutral-transparent-400);
|
|
261
|
-
--foreground-border-inverse-discrete: var(--scania-neutral-transparent-200);
|
|
262
|
-
/* Foreground - Border - Clickable */
|
|
263
|
-
--foreground-border-clickable-link: var(--scania-blue-300);
|
|
264
|
-
--foreground-border-clickable-focus: var(--scania-blue-300);
|
|
265
|
-
/* TODO: Migrate to unit tokens */
|
|
266
|
-
--foreground-border-clickable-focus-width: 2px;
|
|
267
|
-
/* Foreground - Elements - Transparent */
|
|
268
|
-
--foreground-elements-transparparent-strong: var(--scania-neutral-transparent-inverse-958);
|
|
269
|
-
--foreground-elements-transparparent-defined: var(--scania-neutral-transparent-inverse-700);
|
|
270
|
-
--foreground-elements-transparparent-soft: var(--scania-neutral-transparent-inverse-600);
|
|
271
|
-
--foreground-elements-transparparent-subtle: var(--scania-neutral-transparent-inverse-500);
|
|
272
|
-
--foreground-elements-transparparent-disabled: var(--scania-neutral-transparent-inverse-400);
|
|
273
|
-
--foreground-elements-transparparent-discrete: var(--scania-neutral-transparent-inverse-200);
|
|
274
|
-
--foreground-elements-transparparent-strong-inverse: var(--scania-neutral-transparent-958);
|
|
275
|
-
--foreground-elements-transparparent-defined-inverse: var(--scania-neutral-transparent-700);
|
|
276
|
-
--foreground-elements-transparparent-soft-inverse: var(--scania-neutral-transparent-600);
|
|
277
|
-
--foreground-elements-transparparent-subtle-inverse: var(--scania-neutral-transparent-500);
|
|
278
|
-
--foreground-elements-transparparent-disabled-inverse: var(--scania-neutral-transparent-400);
|
|
279
|
-
--foreground-elements-transparparent-discrete-inverse: var(--scania-neutral-transparent-200);
|
|
280
|
-
/* Foreground - Elements - Solid */
|
|
281
|
-
--foreground-elements-solid-1000: var(--scania-neutral-solid-50);
|
|
282
|
-
--foreground-elements-solid-900: var(--scania-neutral-solid-300);
|
|
283
|
-
--foreground-elements-solid-800: var(--scania-neutral-solid-500);
|
|
284
|
-
--foreground-elements-solid-700: var(--scania-neutral-solid-600);
|
|
285
|
-
--foreground-elements-solid-600: var(--scania-neutral-solid-700);
|
|
286
|
-
--foreground-elements-solid-500: var(--scania-neutral-solid-800);
|
|
287
|
-
--foreground-elements-solid-400: var(--scania-neutral-solid-868);
|
|
288
|
-
--foreground-elements-solid-300: var(--scania-neutral-solid-900);
|
|
289
|
-
--foreground-elements-solid-200: var(--scania-neutral-solid-928);
|
|
290
|
-
--foreground-elements-solid-100: var(--scania-neutral-solid-958);
|
|
291
|
-
/* Background - Elevation */
|
|
292
|
-
--background-elevation-base: var(--scania-neutral-solid-1000);
|
|
293
|
-
--background-elevation-layer-01: var(--scania-neutral-solid-928);
|
|
294
|
-
--background-elevation-layer-02: var(--tds-grey-950);
|
|
295
|
-
--background-elevation-layer-03: var(--scania-neutral-solid-900);
|
|
296
|
-
--background-elevation-top: var(--scania-neutral-solid-846);
|
|
297
|
-
--background-elevation-scrim: rgb(0 0 0 / 50%);
|
|
298
|
-
--background-elevation-inverse: var(--scania-neutral-solid-00);
|
|
299
|
-
--background-elevation-layer-01-inverse: var(--scania-neutral-solid-50);
|
|
300
|
-
--background-elevation-layer-02-inverse: var(--scania-neutral-solid-100);
|
|
301
|
-
--background-elevation-layer-03-inverse: var(--scania-neutral-solid-200);
|
|
302
|
-
--background-elevation-top-inverse: var(--scania-neutral-solid-200);
|
|
303
|
-
/* Background - Elements */
|
|
304
|
-
--background-elements-1000: var(--scania-neutral-solid-50);
|
|
305
|
-
--background-elements-900: var(--scania-neutral-solid-300);
|
|
306
|
-
--background-elements-800: var(--scania-neutral-solid-500);
|
|
307
|
-
--background-elements-700: var(--scania-neutral-solid-600);
|
|
308
|
-
--background-elements-600: var(--scania-neutral-solid-700);
|
|
309
|
-
--background-elements-500: var(--scania-neutral-solid-800);
|
|
310
|
-
--background-elements-400: var(--scania-neutral-solid-846);
|
|
311
|
-
--background-elements-300: var(--scania-neutral-solid-868);
|
|
312
|
-
--background-elements-200: var(--scania-neutral-solid-900);
|
|
313
|
-
--background-elements-100: var(--scania-neutral-solid-928);
|
|
314
|
-
/* Background - Clickable - Primary */
|
|
315
|
-
--background-clickable-primary-primary: var(--scania-blue-400);
|
|
316
|
-
--background-clickable-primary-primary-hover: var(--scania-blue-500);
|
|
317
|
-
--background-clickable-primary-pressed: var(--scania-blue-600);
|
|
318
|
-
--background-clickable-primary-focus: var(--scania-blue-500);
|
|
319
|
-
--background-clickable-primary-disabled: var(--scania-neutral-solid-868);
|
|
320
|
-
--background-clickable-primary-resting: var(--scania-neutral-solid-800);
|
|
321
|
-
/* Background - Clickable - Primary-Inverse */
|
|
322
|
-
--background-clickable-primary-inverse-primary: var(--scania-blue-600);
|
|
323
|
-
--background-clickable-primary-inverse-primary-hover: var(--scania-blue-500);
|
|
324
|
-
--background-clickable-primary-inverse-pressed: var(--scania-blue-700);
|
|
325
|
-
--background-clickable-primary-inverse-focus: var(--scania-blue-400);
|
|
326
|
-
--background-clickable-primary-inverse-disabled: var(--scania-neutral-solid-868);
|
|
327
|
-
--background-clickable-primary-inverse-resting: var(--scania-neutral-solid-800);
|
|
328
|
-
/* Background - Clickable - Danger */
|
|
329
|
-
--background-clickable-danger-danger: var(--scania-extended-red-400);
|
|
330
|
-
--background-clickable-danger-danger-hover: var(--scania-extended-red-600);
|
|
331
|
-
--background-clickable-danger-pressed: var(--scania-extended-red-700);
|
|
332
|
-
--background-clickable-danger-focus: var(--scania-extended-red-400);
|
|
333
|
-
--background-clickable-danger-disabled: var(--scania-neutral-solid-900);
|
|
334
|
-
--background-clickable-danger-resting: var(--scania-neutral-solid-900);
|
|
335
|
-
/* System - Info */
|
|
336
|
-
--system-info-strong: var(--scania-blue-50);
|
|
337
|
-
--system-info-default: var(--scania-blue-400);
|
|
338
|
-
--system-info-subtle: var(--scania-blue-700);
|
|
339
|
-
/* System - Success */
|
|
340
|
-
--system-success-strong: var(--scania-extended-green-50);
|
|
341
|
-
--system-success-default: var(--scania-extended-green-200);
|
|
342
|
-
--system-success-discrete: var(--scania-extended-green-700);
|
|
343
|
-
/* System - Warning */
|
|
344
|
-
--system-warning-strong: var(--scania-extended-yellow-50);
|
|
345
|
-
--system-warning-default: var(--scania-extended-yellow-100);
|
|
346
|
-
--system-warning-subtle: var(--tds-grey-850);
|
|
347
|
-
/* System - Danger */
|
|
348
|
-
--system-danger-strong: var(--scania-extended-red-50);
|
|
349
|
-
--system-danger-default: var(--scania-extended-red-400);
|
|
350
|
-
--system-danger-subtle-03: var(--scania-extended-red-900);
|
|
351
|
-
--system-danger-subtle-02: var(--scania-extended-red-900);
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
/* Multibrand tokens: Scania typography */
|
|
355
|
-
/* Scania Typography Usage Tokens */
|
|
356
|
-
:root,
|
|
357
|
-
.scania {
|
|
358
|
-
/* Font size tokens */
|
|
359
|
-
--super-type-01-font-size: 216px;
|
|
360
|
-
--super-type-02-font-size: 156px;
|
|
361
|
-
--super-type-03-font-size: 112px;
|
|
362
|
-
--expressive-headline-01-font-size: 80px;
|
|
363
|
-
--expressive-headline-02-font-size: 56px;
|
|
364
|
-
--headline-01-font-size: 40px;
|
|
365
|
-
--headline-02-font-size: 32px;
|
|
366
|
-
--headline-03-font-size: 24px;
|
|
367
|
-
--headline-04-font-size: 20px;
|
|
368
|
-
--headline-05-font-size: 16px;
|
|
369
|
-
--headline-06-font-size: 14px;
|
|
370
|
-
--headline-07-font-size: 14px;
|
|
371
|
-
--paragraph-01-font-size: 24px;
|
|
372
|
-
--paragraph-02-font-size: 20px;
|
|
373
|
-
--body-01-font-size: 16px;
|
|
374
|
-
--body-02-font-size: 14px;
|
|
375
|
-
--body-link-01-font-size: 16px;
|
|
376
|
-
--body-link-02-font-size: 14px;
|
|
377
|
-
--detail-01-font-size: 16px;
|
|
378
|
-
--detail-02-font-size: 14px;
|
|
379
|
-
--detail-03-font-size: 14px;
|
|
380
|
-
--detail-04-font-size: 12px;
|
|
381
|
-
--detail-05-font-size: 12px;
|
|
382
|
-
--detail-06-font-size: 10px;
|
|
383
|
-
--detail-07-font-size: 10px;
|
|
384
|
-
/* Line height tokens */
|
|
385
|
-
--super-type-01-line-height: 183px;
|
|
386
|
-
--super-type-02-line-height: 148px;
|
|
387
|
-
--super-type-03-line-height: 106px;
|
|
388
|
-
--expressive-headline-01-line-height: 80px;
|
|
389
|
-
--expressive-headline-02-line-height: 56px;
|
|
390
|
-
--headline-01-line-height: 40px;
|
|
391
|
-
--headline-02-line-height: 32px;
|
|
392
|
-
--headline-03-line-height: 24px;
|
|
393
|
-
--headline-04-line-height: 24px;
|
|
394
|
-
--headline-05-line-height: 24px;
|
|
395
|
-
--headline-06-line-height: 16px;
|
|
396
|
-
--headline-07-line-height: 16px;
|
|
397
|
-
--paragraph-01-line-height: 32px;
|
|
398
|
-
--paragraph-02-line-height: 24px;
|
|
399
|
-
--body-01-line-height: 24px;
|
|
400
|
-
--body-02-line-height: 20px;
|
|
401
|
-
--body-link-01-line-height: 24px;
|
|
402
|
-
--body-link-02-line-height: 20px;
|
|
403
|
-
--detail-01-line-height: 24px;
|
|
404
|
-
--detail-02-line-height: 16px;
|
|
405
|
-
--detail-03-line-height: 20px;
|
|
406
|
-
--detail-04-line-height: 16px;
|
|
407
|
-
--detail-05-line-height: 16px;
|
|
408
|
-
--detail-06-line-height: 16px;
|
|
409
|
-
--detail-07-line-height: 8px;
|
|
410
|
-
/* Font family tokens */
|
|
411
|
-
--super-type-01-font-family: 'Scania Sans Headline', arial, 'Helvetica Neue';
|
|
412
|
-
--super-type-02-font-family: 'Scania Sans Headline', arial, 'Helvetica Neue';
|
|
413
|
-
--super-type-03-font-family: 'Scania Sans Headline', arial, 'Helvetica Neue';
|
|
414
|
-
--expressive-headline-01-font-family: 'Scania Sans Headline', arial, 'Helvetica Neue';
|
|
415
|
-
--expressive-headline-02-font-family: 'Scania Sans Headline', arial, 'Helvetica Neue';
|
|
416
|
-
--headline-01-font-family: 'Scania Sans Headline', arial, 'Helvetica Neue';
|
|
417
|
-
--headline-02-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
418
|
-
--headline-03-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
419
|
-
--headline-04-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
420
|
-
--headline-05-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
421
|
-
--headline-06-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
422
|
-
--headline-07-font-family: 'Scania Sans Semi Condensed', arial, 'Helvetica Neue';
|
|
423
|
-
--paragraph-01-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
424
|
-
--paragraph-02-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
425
|
-
--body-01-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
426
|
-
--body-02-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
427
|
-
--body-link-01-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
428
|
-
--body-link-02-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
429
|
-
--detail-01-font-family: 'Scania Sans Semi Condensed', arial, 'Helvetica Neue';
|
|
430
|
-
--detail-02-font-family: 'Scania Sans Semi Condensed', arial, 'Helvetica Neue';
|
|
431
|
-
--detail-03-font-family: 'Scania Sans Semi Condensed', arial, 'Helvetica Neue';
|
|
432
|
-
--detail-04-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
433
|
-
--detail-05-font-family: 'Scania Sans Semi Condensed', arial, 'Helvetica Neue';
|
|
434
|
-
--detail-06-font-family: 'Scania Sans', arial, 'Helvetica Neue';
|
|
435
|
-
--detail-07-font-family: 'Scania Sans Semi Condensed', arial, 'Helvetica Neue';
|
|
436
|
-
/* Font weight tokens */
|
|
437
|
-
--super-type-01-font-weight: bold;
|
|
438
|
-
--super-type-02-font-weight: bold;
|
|
439
|
-
--super-type-03-font-weight: bold;
|
|
440
|
-
--expressive-headline-01-font-weight: bold;
|
|
441
|
-
--expressive-headline-02-font-weight: bold;
|
|
442
|
-
--headline-01-font-weight: bold;
|
|
443
|
-
--headline-02-font-weight: bold;
|
|
444
|
-
--headline-03-font-weight: bold;
|
|
445
|
-
--headline-04-font-weight: bold;
|
|
446
|
-
--headline-05-font-weight: bold;
|
|
447
|
-
--headline-06-font-weight: bold;
|
|
448
|
-
--headline-07-font-weight: bold;
|
|
449
|
-
--paragraph-01-font-weight: normal;
|
|
450
|
-
--paragraph-02-font-weight: normal;
|
|
451
|
-
--body-01-font-weight: normal;
|
|
452
|
-
--body-02-font-weight: normal;
|
|
453
|
-
--body-link-01-font-weight: normal;
|
|
454
|
-
--body-link-02-font-weight: normal;
|
|
455
|
-
--detail-01-font-weight: normal;
|
|
456
|
-
--detail-02-font-weight: normal;
|
|
457
|
-
--detail-03-font-weight: normal;
|
|
458
|
-
--detail-04-font-weight: bold;
|
|
459
|
-
--detail-05-font-weight: normal;
|
|
460
|
-
--detail-06-font-weight: bold;
|
|
461
|
-
--detail-07-font-weight: normal;
|
|
462
|
-
/* Letter spacing tokens */
|
|
463
|
-
--super-type-01-letter-spacing: 0;
|
|
464
|
-
--super-type-02-letter-spacing: 0;
|
|
465
|
-
--super-type-03-letter-spacing: 0;
|
|
466
|
-
--expressive-headline-01-letter-spacing: 0;
|
|
467
|
-
--expressive-headline-02-letter-spacing: 0;
|
|
468
|
-
--headline-01-letter-spacing: 0;
|
|
469
|
-
--headline-02-letter-spacing: -1.28px;
|
|
470
|
-
--headline-03-letter-spacing: -0.72px;
|
|
471
|
-
--headline-04-letter-spacing: -0.2px;
|
|
472
|
-
--headline-05-letter-spacing: -0.32px;
|
|
473
|
-
--headline-06-letter-spacing: -0.28px;
|
|
474
|
-
--headline-07-letter-spacing: -0.14px;
|
|
475
|
-
--paragraph-01-letter-spacing: -0.72px;
|
|
476
|
-
--paragraph-02-letter-spacing: -0.2px;
|
|
477
|
-
--body-01-letter-spacing: -0.32px;
|
|
478
|
-
--body-02-letter-spacing: -0.14px;
|
|
479
|
-
--body-link-01-letter-spacing: -0.32px;
|
|
480
|
-
--body-link-02-letter-spacing: -0.14px;
|
|
481
|
-
--detail-01-letter-spacing: -0.16px;
|
|
482
|
-
--detail-02-letter-spacing: -0.14px;
|
|
483
|
-
--detail-03-letter-spacing: -0.14px;
|
|
484
|
-
--detail-04-letter-spacing: 0.96px;
|
|
485
|
-
--detail-05-letter-spacing: 0;
|
|
486
|
-
--detail-06-letter-spacing: 0.8px;
|
|
487
|
-
--detail-07-letter-spacing: 0;
|
|
488
|
-
/* Text transform tokens */
|
|
489
|
-
--super-type-01-text-transform: uppercase;
|
|
490
|
-
--super-type-02-text-transform: uppercase;
|
|
491
|
-
--super-type-03-text-transform: uppercase;
|
|
492
|
-
--expressive-headline-01-text-transform: uppercase;
|
|
493
|
-
--expressive-headline-02-text-transform: uppercase;
|
|
494
|
-
--headline-01-text-transform: uppercase;
|
|
495
|
-
--headline-02-text-transform: none;
|
|
496
|
-
--headline-03-text-transform: none;
|
|
497
|
-
--headline-04-text-transform: none;
|
|
498
|
-
--headline-05-text-transform: none;
|
|
499
|
-
--headline-06-text-transform: none;
|
|
500
|
-
--headline-07-text-transform: none;
|
|
501
|
-
--paragraph-01-text-transform: none;
|
|
502
|
-
--paragraph-02-text-transform: none;
|
|
503
|
-
--body-01-text-transform: none;
|
|
504
|
-
--body-02-text-transform: none;
|
|
505
|
-
--body-link-01-text-transform: none;
|
|
506
|
-
--body-link-02-text-transform: none;
|
|
507
|
-
--detail-01-text-transform: none;
|
|
508
|
-
--detail-02-text-transform: none;
|
|
509
|
-
--detail-03-text-transform: none;
|
|
510
|
-
--detail-04-text-transform: uppercase;
|
|
511
|
-
--detail-05-text-transform: none;
|
|
512
|
-
--detail-06-text-transform: uppercase;
|
|
513
|
-
--detail-07-text-transform: none;
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
/* Multibrand tokens: Scania spacing */
|
|
517
6
|
:root {
|
|
518
7
|
--unit-2: 2px;
|
|
519
8
|
--unit-4: 4px;
|
|
@@ -537,23 +26,6 @@
|
|
|
537
26
|
--radius-full: 9999px;
|
|
538
27
|
}
|
|
539
28
|
|
|
540
|
-
:root,
|
|
541
|
-
.scania {
|
|
542
|
-
--radius-narrow: var(--unit-4);
|
|
543
|
-
--radius-soft: var(--unit-8);
|
|
544
|
-
--radius-rounded: var(--unit-32);
|
|
545
|
-
--radius-circle: 500px;
|
|
546
|
-
--radius-surface-clickable: var(--unit-4);
|
|
547
|
-
--radius-surface-field: var(--unit-4);
|
|
548
|
-
--radius-area-large: var(--unit-16);
|
|
549
|
-
--radius-area-small: var(--unit-2);
|
|
550
|
-
--space-tiny: var(--unit-4);
|
|
551
|
-
--space-small: var(--unit-16);
|
|
552
|
-
--space-medium: var(--unit-24);
|
|
553
|
-
--space-large: var(--unit-48);
|
|
554
|
-
--space-huge: var(--unit-80);
|
|
555
|
-
}
|
|
556
|
-
|
|
557
29
|
:root,
|
|
558
30
|
html {
|
|
559
31
|
/* ========================================================================
|
|
@@ -4835,478 +4307,6 @@ html {
|
|
|
4835
4307
|
width: 1856px;
|
|
4836
4308
|
}
|
|
4837
4309
|
}
|
|
4838
|
-
/* TODO: Add CY to all cyrilic fonts */
|
|
4839
|
-
@font-face {
|
|
4840
|
-
font-family: "Scania Sans";
|
|
4841
|
-
font-weight: bold;
|
|
4842
|
-
font-display: swap;
|
|
4843
|
-
unicode-range: U+0400-04FF;
|
|
4844
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCY-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff") format("woff");
|
|
4845
|
-
}
|
|
4846
|
-
@font-face {
|
|
4847
|
-
font-family: "Scania Sans";
|
|
4848
|
-
font-style: italic;
|
|
4849
|
-
font-display: swap;
|
|
4850
|
-
unicode-range: U+0400-04FF;
|
|
4851
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCY-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff") format("woff");
|
|
4852
|
-
}
|
|
4853
|
-
@font-face {
|
|
4854
|
-
font-family: "Scania Sans";
|
|
4855
|
-
unicode-range: U+0400-04FF;
|
|
4856
|
-
font-display: swap;
|
|
4857
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCY-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff") format("woff");
|
|
4858
|
-
}
|
|
4859
|
-
@font-face {
|
|
4860
|
-
font-family: "Scania Sans Condensed";
|
|
4861
|
-
font-weight: bold;
|
|
4862
|
-
font-display: swap;
|
|
4863
|
-
unicode-range: U+0400-04FF;
|
|
4864
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff");
|
|
4865
|
-
}
|
|
4866
|
-
@font-face {
|
|
4867
|
-
font-family: "Scania Sans Condensed";
|
|
4868
|
-
font-style: italic;
|
|
4869
|
-
font-display: swap;
|
|
4870
|
-
unicode-range: U+0400-04FF;
|
|
4871
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff");
|
|
4872
|
-
}
|
|
4873
|
-
@font-face {
|
|
4874
|
-
font-family: "Scania Sans Condensed";
|
|
4875
|
-
unicode-range: U+0400-04FF;
|
|
4876
|
-
font-display: swap;
|
|
4877
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff");
|
|
4878
|
-
}
|
|
4879
|
-
@font-face {
|
|
4880
|
-
font-family: "Scania Sans Headline";
|
|
4881
|
-
font-weight: bold;
|
|
4882
|
-
unicode-range: U+0400-04FF;
|
|
4883
|
-
font-display: swap;
|
|
4884
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff");
|
|
4885
|
-
}
|
|
4886
|
-
@font-face {
|
|
4887
|
-
font-family: "Scania Sans Headline";
|
|
4888
|
-
unicode-range: U+0400-04FF;
|
|
4889
|
-
font-display: swap;
|
|
4890
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff");
|
|
4891
|
-
}
|
|
4892
|
-
@font-face {
|
|
4893
|
-
font-family: "Scania Sans Semi Condensed";
|
|
4894
|
-
font-weight: bold;
|
|
4895
|
-
unicode-range: U+0400-04FF;
|
|
4896
|
-
font-display: swap;
|
|
4897
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff");
|
|
4898
|
-
}
|
|
4899
|
-
@font-face {
|
|
4900
|
-
font-family: "Scania Sans Semi Condensed";
|
|
4901
|
-
font-style: italic;
|
|
4902
|
-
unicode-range: U+0400-04FF;
|
|
4903
|
-
font-display: swap;
|
|
4904
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff");
|
|
4905
|
-
}
|
|
4906
|
-
@font-face {
|
|
4907
|
-
font-family: "Scania Sans Semi Condensed";
|
|
4908
|
-
unicode-range: U+0400-04FF;
|
|
4909
|
-
font-display: swap;
|
|
4910
|
-
src: url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff");
|
|
4911
|
-
}
|
|
4912
|
-
@font-face {
|
|
4913
|
-
font-family: "Scania Sans";
|
|
4914
|
-
font-weight: bold;
|
|
4915
|
-
font-display: swap;
|
|
4916
|
-
src: url("./assets/fonts/latin/ScaniaSans-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Bold.woff") format("woff");
|
|
4917
|
-
}
|
|
4918
|
-
@font-face {
|
|
4919
|
-
font-family: "Scania Sans";
|
|
4920
|
-
font-style: italic;
|
|
4921
|
-
font-display: swap;
|
|
4922
|
-
src: url("./assets/fonts/latin/ScaniaSans-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Italic.woff") format("woff");
|
|
4923
|
-
}
|
|
4924
|
-
@font-face {
|
|
4925
|
-
font-family: "Scania Sans";
|
|
4926
|
-
font-display: swap;
|
|
4927
|
-
src: url("./assets/fonts/latin/ScaniaSans-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Regular.woff") format("woff");
|
|
4928
|
-
}
|
|
4929
|
-
@font-face {
|
|
4930
|
-
font-family: "Scania Sans Condensed";
|
|
4931
|
-
font-weight: bold;
|
|
4932
|
-
font-display: swap;
|
|
4933
|
-
src: url("./assets/fonts/latin/ScaniaSansCondensed-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Bold.woff") format("woff");
|
|
4934
|
-
}
|
|
4935
|
-
@font-face {
|
|
4936
|
-
font-family: "Scania Sans Condensed";
|
|
4937
|
-
font-style: italic;
|
|
4938
|
-
font-display: swap;
|
|
4939
|
-
src: url("./assets/fonts/latin/ScaniaSansCondensed-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Italic.woff") format("woff");
|
|
4940
|
-
}
|
|
4941
|
-
@font-face {
|
|
4942
|
-
font-family: "Scania Sans Condensed";
|
|
4943
|
-
font-display: swap;
|
|
4944
|
-
src: url("./assets/fonts/latin/ScaniaSansCondensed-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Regular.woff") format("woff");
|
|
4945
|
-
}
|
|
4946
|
-
@font-face {
|
|
4947
|
-
font-family: "Scania Sans Headline";
|
|
4948
|
-
font-weight: bold;
|
|
4949
|
-
font-display: swap;
|
|
4950
|
-
src: url("./assets/fonts/latin/ScaniaSansHeadline-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Bold.woff") format("woff");
|
|
4951
|
-
}
|
|
4952
|
-
@font-face {
|
|
4953
|
-
font-family: "Scania Sans Headline";
|
|
4954
|
-
font-display: swap;
|
|
4955
|
-
src: url("./assets/fonts/latin/ScaniaSansHeadline-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Regular.woff") format("woff");
|
|
4956
|
-
}
|
|
4957
|
-
@font-face {
|
|
4958
|
-
font-family: "Scania Sans Semi Condensed";
|
|
4959
|
-
font-weight: bold;
|
|
4960
|
-
font-display: swap;
|
|
4961
|
-
src: url("./assets/fonts/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff");
|
|
4962
|
-
}
|
|
4963
|
-
@font-face {
|
|
4964
|
-
font-family: "Scania Sans Semi Condensed";
|
|
4965
|
-
font-style: italic;
|
|
4966
|
-
font-display: swap;
|
|
4967
|
-
src: url("./assets/fonts/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff");
|
|
4968
|
-
}
|
|
4969
|
-
@font-face {
|
|
4970
|
-
font-family: "Scania Sans Semi Condensed";
|
|
4971
|
-
font-display: swap;
|
|
4972
|
-
src: url("./assets/fonts/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff");
|
|
4973
|
-
}
|
|
4974
|
-
/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
|
|
4975
|
-
:root {
|
|
4976
|
-
/* FUNCTIONAL TYPOGRAPHY */
|
|
4977
|
-
--tds-headline-01: normal normal bold 40px/40px 'Scania Sans Headline', arial, helvetica,
|
|
4978
|
-
sans-serif;
|
|
4979
|
-
--tds-headline-01-ls: 0;
|
|
4980
|
-
--tds-headline-02: normal normal bold 32px/32px 'Scania Sans', arial, helvetica, sans-serif;
|
|
4981
|
-
--tds-headline-02-ls: -0.04em;
|
|
4982
|
-
--tds-headline-03: normal normal bold 24px/24px 'Scania Sans', arial, helvetica, sans-serif;
|
|
4983
|
-
--tds-headline-03-ls: -0.03em;
|
|
4984
|
-
--tds-headline-04: normal normal bold 20px/24px 'Scania Sans', arial, helvetica, sans-serif;
|
|
4985
|
-
--tds-headline-04-ls: -0.02em;
|
|
4986
|
-
--tds-headline-05: normal normal bold 16px/24px 'Scania Sans', arial, helvetica, sans-serif;
|
|
4987
|
-
--tds-headline-05-ls: -0.02em;
|
|
4988
|
-
--tds-headline-06: normal normal bold 14px/16px 'Scania Sans', arial, helvetica, sans-serif;
|
|
4989
|
-
--tds-headline-06-ls: -0.02em;
|
|
4990
|
-
--tds-headline-07: normal normal bold 14px/16px 'Scania Sans Semi Condensed', arial, helvetica,
|
|
4991
|
-
sans-serif;
|
|
4992
|
-
--tds-headline-07-ls: -0.01em;
|
|
4993
|
-
--tds-paragraph-01: normal normal normal 24px/32px 'Scania Sans', arial, helvetica, sans-serif;
|
|
4994
|
-
--tds-paragraph-01-ls: -0.03em;
|
|
4995
|
-
--tds-paragraph-02: normal normal normal 20px/24px 'Scania Sans', arial, helvetica, sans-serif;
|
|
4996
|
-
--tds-paragraph-02-ls: -0.01em;
|
|
4997
|
-
--tds-body-01: normal normal normal 16px/24px 'Scania Sans', arial, helvetica, sans-serif;
|
|
4998
|
-
--tds-body-01-ls: -0.02em;
|
|
4999
|
-
--tds-body-02: normal normal normal 14px/20px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5000
|
-
--tds-body-02-ls: -0.02em;
|
|
5001
|
-
--tds-detail-01: normal normal normal 16px/24px 'Scania Sans Semi Condensed',
|
|
5002
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5003
|
-
--tds-detail-01-ls: -0.01em;
|
|
5004
|
-
--tds-detail-02: normal normal normal 14px/16px 'Scania Sans Semi Condensed',
|
|
5005
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5006
|
-
--tds-detail-02-ls: -0.01em;
|
|
5007
|
-
--tds-detail-03: normal normal normal 14px/20px 'Scania Sans Semi Condensed',
|
|
5008
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5009
|
-
--tds-detail-03-ls: -0.01em;
|
|
5010
|
-
--tds-detail-04: normal normal bold 12px/16px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5011
|
-
--tds-detail-04-ls: 0.08em;
|
|
5012
|
-
--tds-detail-04-tt: uppercase;
|
|
5013
|
-
--tds-detail-05: normal normal normal 12px/16px 'Scania Sans Semi Condensed',
|
|
5014
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5015
|
-
--tds-detail-05-ls: 0;
|
|
5016
|
-
--tds-detail-06: normal normal bold 10px/16px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5017
|
-
--tds-detail-06-ls: 0.08em;
|
|
5018
|
-
--tds-detail-06-tt: uppercase;
|
|
5019
|
-
--tds-detail-07: normal normal normal 10px/8px 'Scania Sans Semi Condensed',
|
|
5020
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5021
|
-
--tds-detail-07-ls: 0;
|
|
5022
|
-
/* EXPRESSIVE TYPOGRAPHY */
|
|
5023
|
-
--tds-expressive-headline-01: normal normal bold 80px/80px 'Scania Sans Headline', arial,
|
|
5024
|
-
helvetica, sans-serif;
|
|
5025
|
-
--tds-expressive-headline-01-ls: 0;
|
|
5026
|
-
--tds-expressive-headline-02: normal normal bold 56px/56px 'Scania Sans Headline', arial,
|
|
5027
|
-
helvetica, sans-serif;
|
|
5028
|
-
--tds-expressive-headline-02-ls: 0;
|
|
5029
|
-
--tds-headline-ex-01: normal normal bold 40px/40px 'Scania Sans Headline', arial, helvetica,
|
|
5030
|
-
sans-serif;
|
|
5031
|
-
--tds-headline-ex-01-ls: 0;
|
|
5032
|
-
--tds-headline-ex-02: normal normal bold 32px/32px 'Scania Sans Headline', arial, helvetica,
|
|
5033
|
-
sans-serif;
|
|
5034
|
-
--tds-headline-ex-02-ls: -0.04em;
|
|
5035
|
-
--tds-headline-ex-03: normal normal bold 24px/24px 'Scania Sans Headline', arial, helvetica,
|
|
5036
|
-
sans-serif;
|
|
5037
|
-
--tds-headline-ex-03-ls: -0.03em;
|
|
5038
|
-
--tds-headline-ex-04: normal normal bold 20px/24px 'Scania Sans Headline', arial, helvetica,
|
|
5039
|
-
sans-serif;
|
|
5040
|
-
--tds-headline-ex-04-ls: -0.01em;
|
|
5041
|
-
--tds-headline-ex-05: normal normal bold 16px/24px 'Scania Sans Headline', arial, helvetica,
|
|
5042
|
-
sans-serif;
|
|
5043
|
-
--tds-headline-ex-05-ls: -0.02em;
|
|
5044
|
-
--tds-headline-ex-06: normal normal bold 14px/16px 'Scania Sans Headline', arial, helvetica,
|
|
5045
|
-
sans-serif;
|
|
5046
|
-
--tds-headline-ex-06-ls: -0.02em;
|
|
5047
|
-
--tds-headline-ex-07: normal normal bold 14px/16px 'Scania Sans Semi Condensed', arial, helvetica,
|
|
5048
|
-
sans-serif;
|
|
5049
|
-
--tds-headline-ex-07-ls: -0.01em;
|
|
5050
|
-
--tds-paragraph-ex-01: normal normal normal 24px/32px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5051
|
-
--tds-paragraph-ex-01-ls: -0.03em;
|
|
5052
|
-
--tds-paragraph-ex-02: normal normal normal 20px/24px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5053
|
-
--tds-paragraph-ex-02-ls: -0.01em;
|
|
5054
|
-
--tds-body-ex-01: normal normal normal 16px/24px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5055
|
-
--tds-body-ex-01-ls: -0.02em;
|
|
5056
|
-
--tds-body-ex-02: normal normal normal 14px/20px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5057
|
-
--tds-body-ex-02-ls: -0.01em;
|
|
5058
|
-
--tds-detail-ex-01: normal normal normal 16px/24px 'Scania Sans Semi Condensed',
|
|
5059
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5060
|
-
--tds-detail-ex-01-ls: -0.01em;
|
|
5061
|
-
--tds-detail-ex-02: normal normal normal 14px/16px 'Scania Sans Semi Condensed',
|
|
5062
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5063
|
-
--tds-detail-ex-02-ls: -0.01em;
|
|
5064
|
-
--tds-detail-ex-03: normal normal normal 14px/20px 'Scania Sans Semi Condensed',
|
|
5065
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5066
|
-
--tds-detail-ex-03-ls: -0.01em;
|
|
5067
|
-
--tds-detail-ex-04: normal normal bold 12px/16px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5068
|
-
--tds-detail-ex-04-ls: 0.08em;
|
|
5069
|
-
--tds-detail-ex-04-tt: uppercase;
|
|
5070
|
-
--tds-detail-ex-05: normal normal normal 12px/16px 'Scania Sans Semi Condensed',
|
|
5071
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5072
|
-
--tds-detail-ex-05-ls: 0;
|
|
5073
|
-
--tds-detail-ex-06: normal normal bold 10px/16px 'Scania Sans', arial, helvetica, sans-serif;
|
|
5074
|
-
--tds-detail-ex-06-ls: 0.08em;
|
|
5075
|
-
--tds-detail-ex-06-tt: uppercase;
|
|
5076
|
-
--tds-detail-ex-07: normal normal normal 10px/8px 'Scania Sans Semi Condensed',
|
|
5077
|
-
'Scania Sans Condensed', arial, helvetica, sans-serif;
|
|
5078
|
-
--tds-detail-ex-07-ls: 0;
|
|
5079
|
-
}
|
|
5080
|
-
|
|
5081
|
-
.tds-headline-01 {
|
|
5082
|
-
font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
|
|
5083
|
-
font-weight: bold;
|
|
5084
|
-
font-size: 40px;
|
|
5085
|
-
line-height: 1;
|
|
5086
|
-
letter-spacing: 0;
|
|
5087
|
-
}
|
|
5088
|
-
|
|
5089
|
-
.tds-headline-02 {
|
|
5090
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5091
|
-
font-weight: bold;
|
|
5092
|
-
font-size: 32px;
|
|
5093
|
-
line-height: 1;
|
|
5094
|
-
letter-spacing: -0.04em;
|
|
5095
|
-
}
|
|
5096
|
-
|
|
5097
|
-
.tds-headline-03 {
|
|
5098
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5099
|
-
font-weight: bold;
|
|
5100
|
-
font-size: 24px;
|
|
5101
|
-
line-height: 1;
|
|
5102
|
-
letter-spacing: -0.03em;
|
|
5103
|
-
}
|
|
5104
|
-
|
|
5105
|
-
.tds-headline-04 {
|
|
5106
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5107
|
-
font-weight: bold;
|
|
5108
|
-
font-size: 20px;
|
|
5109
|
-
line-height: 1.2;
|
|
5110
|
-
letter-spacing: -0.01em;
|
|
5111
|
-
}
|
|
5112
|
-
|
|
5113
|
-
.tds-headline-05 {
|
|
5114
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5115
|
-
font-weight: bold;
|
|
5116
|
-
font-size: 16px;
|
|
5117
|
-
line-height: 1.5;
|
|
5118
|
-
letter-spacing: -0.02em;
|
|
5119
|
-
}
|
|
5120
|
-
|
|
5121
|
-
.tds-headline-06 {
|
|
5122
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5123
|
-
font-weight: bold;
|
|
5124
|
-
font-size: 14px;
|
|
5125
|
-
line-height: 1.14;
|
|
5126
|
-
letter-spacing: -0.02em;
|
|
5127
|
-
}
|
|
5128
|
-
|
|
5129
|
-
.tds-headline-07 {
|
|
5130
|
-
font-family: "Scania Sans Semi Condensed", arial, helvetica, sans-serif;
|
|
5131
|
-
font-weight: bold;
|
|
5132
|
-
font-size: 14px;
|
|
5133
|
-
line-height: 1.14;
|
|
5134
|
-
letter-spacing: -0.01em;
|
|
5135
|
-
}
|
|
5136
|
-
|
|
5137
|
-
.tds-paragraph-01 {
|
|
5138
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5139
|
-
font-size: 24px;
|
|
5140
|
-
line-height: 1.33;
|
|
5141
|
-
letter-spacing: -0.03em;
|
|
5142
|
-
}
|
|
5143
|
-
|
|
5144
|
-
.tds-paragraph-02 {
|
|
5145
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5146
|
-
font-size: 20px;
|
|
5147
|
-
line-height: 1.2;
|
|
5148
|
-
letter-spacing: -0.01em;
|
|
5149
|
-
}
|
|
5150
|
-
|
|
5151
|
-
.tds-body-01 {
|
|
5152
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5153
|
-
font-size: 16px;
|
|
5154
|
-
line-height: 1.5;
|
|
5155
|
-
letter-spacing: -0.02em;
|
|
5156
|
-
}
|
|
5157
|
-
|
|
5158
|
-
.tds-body-02 {
|
|
5159
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5160
|
-
font-size: 14px;
|
|
5161
|
-
line-height: 1.43;
|
|
5162
|
-
letter-spacing: -0.01em;
|
|
5163
|
-
}
|
|
5164
|
-
|
|
5165
|
-
.tds-detail-01 {
|
|
5166
|
-
font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
|
|
5167
|
-
font-size: 16px;
|
|
5168
|
-
line-height: 1.5;
|
|
5169
|
-
letter-spacing: -0.01em;
|
|
5170
|
-
}
|
|
5171
|
-
|
|
5172
|
-
.tds-detail-02 {
|
|
5173
|
-
font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
|
|
5174
|
-
font-size: 14px;
|
|
5175
|
-
line-height: 1.14;
|
|
5176
|
-
letter-spacing: -0.01em;
|
|
5177
|
-
}
|
|
5178
|
-
|
|
5179
|
-
.tds-detail-03 {
|
|
5180
|
-
font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
|
|
5181
|
-
font-size: 14px;
|
|
5182
|
-
line-height: 1.43;
|
|
5183
|
-
letter-spacing: -0.01em;
|
|
5184
|
-
}
|
|
5185
|
-
|
|
5186
|
-
.tds-detail-04 {
|
|
5187
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5188
|
-
font-weight: bold;
|
|
5189
|
-
text-transform: uppercase;
|
|
5190
|
-
font-size: 12px;
|
|
5191
|
-
line-height: 1.33;
|
|
5192
|
-
letter-spacing: 0.08em;
|
|
5193
|
-
}
|
|
5194
|
-
|
|
5195
|
-
.tds-detail-05 {
|
|
5196
|
-
font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
|
|
5197
|
-
font-size: 12px;
|
|
5198
|
-
line-height: 1.33;
|
|
5199
|
-
letter-spacing: 0;
|
|
5200
|
-
}
|
|
5201
|
-
|
|
5202
|
-
.tds-detail-06 {
|
|
5203
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5204
|
-
font-weight: bold;
|
|
5205
|
-
text-transform: uppercase;
|
|
5206
|
-
font-size: 10px;
|
|
5207
|
-
line-height: 1.6;
|
|
5208
|
-
letter-spacing: 0.08em;
|
|
5209
|
-
}
|
|
5210
|
-
|
|
5211
|
-
.tds-detail-07 {
|
|
5212
|
-
font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
|
|
5213
|
-
font-size: 10px;
|
|
5214
|
-
line-height: 0.8;
|
|
5215
|
-
letter-spacing: 0;
|
|
5216
|
-
}
|
|
5217
|
-
|
|
5218
|
-
.tds-expressive-headline-01 {
|
|
5219
|
-
font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
|
|
5220
|
-
font-weight: bold;
|
|
5221
|
-
font-size: 80px;
|
|
5222
|
-
line-height: 1;
|
|
5223
|
-
letter-spacing: 0;
|
|
5224
|
-
}
|
|
5225
|
-
|
|
5226
|
-
.tds-expressive-headline-02 {
|
|
5227
|
-
font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
|
|
5228
|
-
font-weight: bold;
|
|
5229
|
-
font-size: 56px;
|
|
5230
|
-
line-height: 1;
|
|
5231
|
-
letter-spacing: 0;
|
|
5232
|
-
}
|
|
5233
|
-
|
|
5234
|
-
h1 {
|
|
5235
|
-
font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
|
|
5236
|
-
font-weight: bold;
|
|
5237
|
-
font-size: 40px;
|
|
5238
|
-
line-height: 1;
|
|
5239
|
-
letter-spacing: 0;
|
|
5240
|
-
}
|
|
5241
|
-
|
|
5242
|
-
h2 {
|
|
5243
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5244
|
-
font-weight: bold;
|
|
5245
|
-
font-size: 32px;
|
|
5246
|
-
line-height: 1;
|
|
5247
|
-
letter-spacing: -0.04em;
|
|
5248
|
-
}
|
|
5249
|
-
|
|
5250
|
-
h3 {
|
|
5251
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5252
|
-
font-weight: bold;
|
|
5253
|
-
font-size: 24px;
|
|
5254
|
-
line-height: 1;
|
|
5255
|
-
letter-spacing: -0.03em;
|
|
5256
|
-
}
|
|
5257
|
-
|
|
5258
|
-
h4 {
|
|
5259
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5260
|
-
font-weight: bold;
|
|
5261
|
-
font-size: 20px;
|
|
5262
|
-
line-height: 1.2;
|
|
5263
|
-
letter-spacing: -0.01em;
|
|
5264
|
-
}
|
|
5265
|
-
|
|
5266
|
-
h5 {
|
|
5267
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5268
|
-
font-weight: bold;
|
|
5269
|
-
font-size: 16px;
|
|
5270
|
-
line-height: 1.5;
|
|
5271
|
-
letter-spacing: -0.02em;
|
|
5272
|
-
}
|
|
5273
|
-
|
|
5274
|
-
h6 {
|
|
5275
|
-
font-family: "Scania Sans", arial, helvetica, sans-serif;
|
|
5276
|
-
font-weight: bold;
|
|
5277
|
-
font-size: 14px;
|
|
5278
|
-
line-height: 1.14;
|
|
5279
|
-
letter-spacing: -0.02em;
|
|
5280
|
-
}
|
|
5281
|
-
|
|
5282
|
-
.h7 {
|
|
5283
|
-
font-family: "Scania Sans Semi Condensed", arial, helvetica, sans-serif;
|
|
5284
|
-
font-weight: bold;
|
|
5285
|
-
font-size: 14px;
|
|
5286
|
-
line-height: 1.14;
|
|
5287
|
-
letter-spacing: -0.01em;
|
|
5288
|
-
}
|
|
5289
|
-
|
|
5290
|
-
:root,
|
|
5291
|
-
html {
|
|
5292
|
-
--tds-background-image-scania-wordmark-png-local: url(./assets/logos/scania/scania-wordmark.png);
|
|
5293
|
-
--tds-background-image-scania-wordmark-svg-local: url(./assets/logos/scania/scania-wordmark.svg);
|
|
5294
|
-
--tds-background-image-scania-wordmark-white-png-local: url(./assets/logos/scania/scania-wordmark-white.png);
|
|
5295
|
-
--tds-background-image-scania-wordmark-white-svg-local: url(./assets/logos/scania/scania-wordmark-white.svg);
|
|
5296
|
-
--tds-background-image-scania-symbol-png-local: url(./assets/logos/scania/scania-symbol.png);
|
|
5297
|
-
--tds-background-image-scania-symbol-svg-local: url(./assets/logos/scania/scania-symbol.svg);
|
|
5298
|
-
--tds-background-image-scania-logotype-png-local: url(./assets/logos/scania/scania-logotype.png);
|
|
5299
|
-
--tds-background-image-scania-logotype-svg-local: url(./assets/logos/scania/scania-logotype.svg);
|
|
5300
|
-
--tds-background-image-scania-wordmark-png: url(https://cdn.digitaldesign.scania.com/logotype/multibrand/scania/scania-wordmark.png);
|
|
5301
|
-
--tds-background-image-scania-wordmark-svg: url(https://cdn.digitaldesign.scania.com/logotype/multibrand/scania/scania-wordmark.svg);
|
|
5302
|
-
--tds-background-image-scania-wordmark-white-png: url(https://cdn.digitaldesign.scania.com/logotype/multibrand/scania/scania-wordmark-white.png);
|
|
5303
|
-
--tds-background-image-scania-wordmark-white-svg: url(https://cdn.digitaldesign.scania.com/logotype/multibrand/scania/scania-wordmark-white.svg);
|
|
5304
|
-
--tds-background-image-scania-symbol-png: url(https://cdn.digitaldesign.scania.com/logotype/multibrand/scania/scania-symbol.png);
|
|
5305
|
-
--tds-background-image-scania-symbol-svg: url(https://cdn.digitaldesign.scania.com/logotype/multibrand/scania/scania-symbol.svg);
|
|
5306
|
-
--tds-background-image-scania-logotype-png: url(https://cdn.digitaldesign.scania.com/logotype/multibrand/scania/scania-logotype.png);
|
|
5307
|
-
--tds-background-image-scania-logotype-svg: url(https://cdn.digitaldesign.scania.com/logotype/multibrand/scania/scania-logotype.svg);
|
|
5308
|
-
}
|
|
5309
|
-
|
|
5310
4310
|
/** The breakpoint at which the layout changes from fixed size to full-width. */
|
|
5311
4311
|
.tds-mode-light {
|
|
5312
4312
|
--tl-scrollbar-track-color: transparent;
|
|
@@ -5832,31 +4832,31 @@ body {
|
|
|
5832
4832
|
|
|
5833
4833
|
:root,
|
|
5834
4834
|
.tds-mode-light {
|
|
5835
|
-
color: var(--
|
|
5836
|
-
background-color: var(--
|
|
4835
|
+
color: var(--color-foreground-text-strong);
|
|
4836
|
+
background-color: var(--color-background-base);
|
|
5837
4837
|
}
|
|
5838
4838
|
:root.tds-mode-variant-primary, :root .tds-mode-variant-primary,
|
|
5839
4839
|
.tds-mode-light.tds-mode-variant-primary,
|
|
5840
4840
|
.tds-mode-light .tds-mode-variant-primary {
|
|
5841
|
-
color: var(--
|
|
5842
|
-
background-color: var(--
|
|
4841
|
+
color: var(--color-foreground-text-strong);
|
|
4842
|
+
background-color: var(--color-background-base);
|
|
5843
4843
|
}
|
|
5844
4844
|
:root.tds-mode-variant-secondary, :root .tds-mode-variant-secondary,
|
|
5845
4845
|
.tds-mode-light.tds-mode-variant-secondary,
|
|
5846
4846
|
.tds-mode-light .tds-mode-variant-secondary {
|
|
5847
|
-
color: var(--
|
|
5848
|
-
background-color: var(--
|
|
4847
|
+
color: var(--color-foreground-text-strong);
|
|
4848
|
+
background-color: var(--color-background-layer-01);
|
|
5849
4849
|
}
|
|
5850
4850
|
|
|
5851
4851
|
.tds-mode-dark {
|
|
5852
|
-
color: var(--
|
|
5853
|
-
background-color: var(--
|
|
4852
|
+
color: var(--color-foreground-text-strong);
|
|
4853
|
+
background-color: var(--color-background-base);
|
|
5854
4854
|
}
|
|
5855
4855
|
.tds-mode-dark.tds-mode-variant-primary, .tds-mode-dark .tds-mode-variant-primary {
|
|
5856
|
-
color: var(--
|
|
5857
|
-
background-color: var(--
|
|
4856
|
+
color: var(--color-foreground-text-strong);
|
|
4857
|
+
background-color: var(--color-background-base);
|
|
5858
4858
|
}
|
|
5859
4859
|
.tds-mode-dark.tds-mode-variant-secondary, .tds-mode-dark .tds-mode-variant-secondary {
|
|
5860
|
-
color: var(--
|
|
5861
|
-
background-color: var(--
|
|
4860
|
+
color: var(--color-foreground-text-strong);
|
|
4861
|
+
background-color: var(--color-background-layer-01);
|
|
5862
4862
|
}
|
package/dist/tl-header.css
CHANGED
|
@@ -106,6 +106,11 @@
|
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
.tl-header {
|
|
109
|
+
/* Layout */
|
|
110
|
+
--tds-header-height: 64px;
|
|
111
|
+
--tds-header-list-item-md-height: 48px;
|
|
112
|
+
/* App launcher dropdown background */
|
|
113
|
+
--tds-header-app-launcher-menu-background: var(--header-app-launcher-menu-background);
|
|
109
114
|
/* Base text */
|
|
110
115
|
--header-nav-item: var(--component-header-color-foreground-strong);
|
|
111
116
|
/* Nav-item states */
|
|
@@ -322,7 +327,6 @@ body {
|
|
|
322
327
|
background-color: var(--component-header-color-background-pressed);
|
|
323
328
|
color: var(--header-nav-item-dropdown-opened);
|
|
324
329
|
position: relative;
|
|
325
|
-
z-index: calc(var(--tds-z-index-header) + 1);
|
|
326
330
|
}
|
|
327
331
|
.tl-header__dropdown-wrapper--open:hover {
|
|
328
332
|
background-color: var(--component-header-color-background-pressed);
|
|
@@ -369,7 +373,6 @@ body {
|
|
|
369
373
|
background-color: var(--component-header-color-background-pressed);
|
|
370
374
|
color: var(--header-nav-item-dropdown-opened);
|
|
371
375
|
position: relative;
|
|
372
|
-
z-index: calc(var(--tds-z-index-header) + 1);
|
|
373
376
|
}
|
|
374
377
|
.tl-header__dropdown-wrapper-user--open:hover {
|
|
375
378
|
background-color: var(--component-header-color-background-pressed);
|
|
@@ -404,7 +407,6 @@ body {
|
|
|
404
407
|
min-width: 190px;
|
|
405
408
|
max-height: calc(100vh - var(--tds-header-height));
|
|
406
409
|
overflow-y: auto;
|
|
407
|
-
z-index: var(--tds-z-index-header);
|
|
408
410
|
}
|
|
409
411
|
.tl-header__dropdown-menu::-webkit-scrollbar {
|
|
410
412
|
width: var(--tl-scrollbar-width);
|
|
@@ -454,7 +456,6 @@ body {
|
|
|
454
456
|
min-width: 290px;
|
|
455
457
|
max-height: calc(100vh - var(--tds-header-height));
|
|
456
458
|
overflow-y: auto;
|
|
457
|
-
z-index: var(--tds-z-index-header);
|
|
458
459
|
border-radius: 4px;
|
|
459
460
|
}
|
|
460
461
|
.tl-header__user-menu::-webkit-scrollbar {
|
|
@@ -500,7 +501,6 @@ body {
|
|
|
500
501
|
min-width: 320px;
|
|
501
502
|
max-height: calc(100vh - var(--tds-header-height));
|
|
502
503
|
overflow-y: auto;
|
|
503
|
-
z-index: var(--tds-z-index-header);
|
|
504
504
|
}
|
|
505
505
|
.tl-header__launcher-menu::-webkit-scrollbar {
|
|
506
506
|
width: var(--tl-scrollbar-width);
|
|
@@ -545,7 +545,6 @@ body {
|
|
|
545
545
|
min-width: 320px;
|
|
546
546
|
max-height: calc(100vh - var(--tds-header-height));
|
|
547
547
|
overflow-y: auto;
|
|
548
|
-
z-index: var(--tds-z-index-header);
|
|
549
548
|
border-radius: 4px;
|
|
550
549
|
}
|
|
551
550
|
.tl-header__launcher-menu-grid::-webkit-scrollbar {
|
|
@@ -793,7 +792,6 @@ body {
|
|
|
793
792
|
height: var(--tds-header-height);
|
|
794
793
|
background-color: var(--header-background);
|
|
795
794
|
width: 100%;
|
|
796
|
-
z-index: var(--tds-z-index-header);
|
|
797
795
|
}
|
|
798
796
|
|
|
799
797
|
.tl-header__nav {
|
package/dist/tl-side-menu.css
CHANGED
|
@@ -93,6 +93,9 @@ body {
|
|
|
93
93
|
--side-menu-subnav-background: var(--color-background-layer-01);
|
|
94
94
|
--side-menu-single-item-color: var(--color-foreground-text-strong);
|
|
95
95
|
--side-menu-bottom-menu-border-top: var(--component-side-menu-color-divider);
|
|
96
|
+
--tds-header-app-launcher-menu-bg: var(--color-background-base);
|
|
97
|
+
--tds-nav-item-border-color: var(--color-foreground-border-accent-focus);
|
|
98
|
+
--tds-nav-dropdown-menu-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
|
|
96
99
|
--side-menu-dropdown-list-item-custom-background: var(--side-menu-background-cover);
|
|
97
100
|
--side-menu-dropdown-list-item-custom-background-hover: var(--side-menu-item-state-hover);
|
|
98
101
|
--side-menu-dropdown-list-item-custom-background-active: var(--side-menu-item-state-active);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scania/tegel-lite",
|
|
3
|
-
"version": "0.1.0-beta.globals-test",
|
|
3
|
+
"version": "0.1.0-beta.globals-test-3",
|
|
4
4
|
"description": "Styles-only library for Tegel Design System (Beta)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"test": "npx playwright test"
|
|
85
85
|
},
|
|
86
86
|
"devDependencies": {
|
|
87
|
-
"@playwright/test": "^1.
|
|
87
|
+
"@playwright/test": "^1.58.2",
|
|
88
88
|
"@types/node": "^24.3.1",
|
|
89
89
|
"serve": "^14.2.5"
|
|
90
90
|
},
|