@marioschmidt/design-system-tokens 1.0.24 → 1.0.26
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/css/brands/advertorial/density/density-compact.css +1 -1
- package/dist/css/brands/advertorial/density/density-default.css +1 -1
- package/dist/css/brands/advertorial/density/density-spacious.css +1 -1
- package/dist/css/brands/advertorial/overrides/brandtokenmapping.css +1 -1
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1 -1
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.css +1 -1
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.css +1 -1
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.css +1 -1
- package/dist/css/brands/advertorial/semantic/effects/effects-dark.css +1 -1
- package/dist/css/brands/advertorial/semantic/effects/effects-light.css +1 -1
- package/dist/css/brands/advertorial/semantic/typography/typography-lg.css +1 -1
- package/dist/css/brands/advertorial/semantic/typography/typography-md.css +1 -1
- package/dist/css/brands/advertorial/semantic/typography/typography-sm.css +1 -1
- package/dist/css/brands/advertorial/semantic/typography/typography-xs.css +1 -1
- package/dist/css/brands/bild/density/density-compact.css +1 -1
- package/dist/css/brands/bild/density/density-default.css +1 -1
- package/dist/css/brands/bild/density/density-spacious.css +1 -1
- package/dist/css/brands/bild/overrides/brandcolormapping.css +1 -1
- package/dist/css/brands/bild/overrides/brandtokenmapping.css +1 -1
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1 -1
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-md-600px.css +1 -1
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.css +1 -1
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-xs-320px.css +1 -1
- package/dist/css/brands/bild/semantic/color/colormode-dark.css +1 -1
- package/dist/css/brands/bild/semantic/color/colormode-light.css +1 -1
- package/dist/css/brands/bild/semantic/effects/effects-dark.css +1 -1
- package/dist/css/brands/bild/semantic/effects/effects-light.css +1 -1
- package/dist/css/brands/bild/semantic/typography/typography-lg.css +1 -1
- package/dist/css/brands/bild/semantic/typography/typography-md.css +1 -1
- package/dist/css/brands/bild/semantic/typography/typography-sm.css +1 -1
- package/dist/css/brands/bild/semantic/typography/typography-xs.css +1 -1
- package/dist/css/brands/sportbild/density/density-compact.css +1 -1
- package/dist/css/brands/sportbild/density/density-default.css +1 -1
- package/dist/css/brands/sportbild/density/density-spacious.css +1 -1
- package/dist/css/brands/sportbild/overrides/brandcolormapping.css +1 -1
- package/dist/css/brands/sportbild/overrides/brandtokenmapping.css +1 -1
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +1 -1
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.css +1 -1
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.css +1 -1
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.css +1 -1
- package/dist/css/brands/sportbild/semantic/color/colormode-dark.css +1 -1
- package/dist/css/brands/sportbild/semantic/color/colormode-light.css +1 -1
- package/dist/css/brands/sportbild/semantic/effects/effects-dark.css +1 -1
- package/dist/css/brands/sportbild/semantic/effects/effects-light.css +1 -1
- package/dist/css/brands/sportbild/semantic/typography/typography-lg.css +1 -1
- package/dist/css/brands/sportbild/semantic/typography/typography-md.css +1 -1
- package/dist/css/brands/sportbild/semantic/typography/typography-sm.css +1 -1
- package/dist/css/brands/sportbild/semantic/typography/typography-xs.css +1 -1
- package/dist/css/shared/colorprimitive.css +1 -1
- package/dist/css/shared/fontprimitive.css +1 -1
- package/dist/css/shared/sizeprimitive.css +1 -1
- package/dist/css/shared/spaceprimitive.css +1 -1
- package/dist/flutter/brands/advertorial/semantic/effects/effects-dark.dart +186 -15
- package/dist/flutter/brands/advertorial/semantic/effects/effects-light.dart +186 -15
- package/dist/flutter/brands/advertorial/semantic/typography/typography-lg.dart +1060 -138
- package/dist/flutter/brands/advertorial/semantic/typography/typography-md.dart +1059 -137
- package/dist/flutter/brands/advertorial/semantic/typography/typography-sm.dart +1060 -138
- package/dist/flutter/brands/advertorial/semantic/typography/typography-xs.dart +1059 -137
- package/dist/flutter/brands/bild/semantic/effects/effects-dark.dart +186 -15
- package/dist/flutter/brands/bild/semantic/effects/effects-light.dart +186 -15
- package/dist/flutter/brands/bild/semantic/typography/typography-lg.dart +1060 -138
- package/dist/flutter/brands/bild/semantic/typography/typography-md.dart +1059 -137
- package/dist/flutter/brands/bild/semantic/typography/typography-sm.dart +1060 -138
- package/dist/flutter/brands/bild/semantic/typography/typography-xs.dart +1059 -137
- package/dist/flutter/brands/sportbild/semantic/effects/effects-dark.dart +186 -15
- package/dist/flutter/brands/sportbild/semantic/effects/effects-light.dart +186 -15
- package/dist/flutter/brands/sportbild/semantic/typography/typography-lg.dart +1060 -138
- package/dist/flutter/brands/sportbild/semantic/typography/typography-md.dart +1059 -137
- package/dist/flutter/brands/sportbild/semantic/typography/typography-sm.dart +1060 -138
- package/dist/flutter/brands/sportbild/semantic/typography/typography-xs.dart +1059 -137
- package/dist/ios/brands/advertorial/semantic/effects/EffectsDark.swift +48 -16
- package/dist/ios/brands/advertorial/semantic/effects/EffectsLight.swift +48 -16
- package/dist/ios/brands/bild/semantic/effects/EffectsDark.swift +48 -16
- package/dist/ios/brands/bild/semantic/effects/EffectsLight.swift +48 -16
- package/dist/ios/brands/sportbild/semantic/effects/EffectsDark.swift +48 -16
- package/dist/ios/brands/sportbild/semantic/effects/EffectsLight.swift +48 -16
- package/dist/js/brands/advertorial/density/density-compact.js +1 -1
- package/dist/js/brands/advertorial/density/density-default.js +1 -1
- package/dist/js/brands/advertorial/density/density-spacious.js +1 -1
- package/dist/js/brands/advertorial/overrides/brandtokenmapping.js +1 -1
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.js +1 -1
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.js +1 -1
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.js +1 -1
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.js +1 -1
- package/dist/js/brands/advertorial/semantic/effects/effects-dark.js +175 -15
- package/dist/js/brands/advertorial/semantic/effects/effects-light.js +175 -15
- package/dist/js/brands/advertorial/semantic/typography/typography-lg.js +753 -115
- package/dist/js/brands/advertorial/semantic/typography/typography-md.js +753 -115
- package/dist/js/brands/advertorial/semantic/typography/typography-sm.js +753 -115
- package/dist/js/brands/advertorial/semantic/typography/typography-xs.js +753 -115
- package/dist/js/brands/bild/density/density-compact.js +1 -1
- package/dist/js/brands/bild/density/density-default.js +1 -1
- package/dist/js/brands/bild/density/density-spacious.js +1 -1
- package/dist/js/brands/bild/overrides/brandcolormapping.js +1 -1
- package/dist/js/brands/bild/overrides/brandtokenmapping.js +1 -1
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +1 -1
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-md-600px.js +1 -1
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.js +1 -1
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-xs-320px.js +1 -1
- package/dist/js/brands/bild/semantic/color/colormode-dark.js +1 -1
- package/dist/js/brands/bild/semantic/color/colormode-light.js +1 -1
- package/dist/js/brands/bild/semantic/effects/effects-dark.js +175 -15
- package/dist/js/brands/bild/semantic/effects/effects-light.js +175 -15
- package/dist/js/brands/bild/semantic/typography/typography-lg.js +753 -115
- package/dist/js/brands/bild/semantic/typography/typography-md.js +753 -115
- package/dist/js/brands/bild/semantic/typography/typography-sm.js +753 -115
- package/dist/js/brands/bild/semantic/typography/typography-xs.js +753 -115
- package/dist/js/brands/sportbild/density/density-compact.js +1 -1
- package/dist/js/brands/sportbild/density/density-default.js +1 -1
- package/dist/js/brands/sportbild/density/density-spacious.js +1 -1
- package/dist/js/brands/sportbild/overrides/brandcolormapping.js +1 -1
- package/dist/js/brands/sportbild/overrides/brandtokenmapping.js +1 -1
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +1 -1
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.js +1 -1
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.js +1 -1
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.js +1 -1
- package/dist/js/brands/sportbild/semantic/color/colormode-dark.js +1 -1
- package/dist/js/brands/sportbild/semantic/color/colormode-light.js +1 -1
- package/dist/js/brands/sportbild/semantic/effects/effects-dark.js +175 -15
- package/dist/js/brands/sportbild/semantic/effects/effects-light.js +175 -15
- package/dist/js/brands/sportbild/semantic/typography/typography-lg.js +753 -115
- package/dist/js/brands/sportbild/semantic/typography/typography-md.js +753 -115
- package/dist/js/brands/sportbild/semantic/typography/typography-sm.js +753 -115
- package/dist/js/brands/sportbild/semantic/typography/typography-xs.js +753 -115
- package/dist/js/shared/colorprimitive.js +1 -1
- package/dist/js/shared/fontprimitive.js +1 -1
- package/dist/js/shared/sizeprimitive.js +1 -1
- package/dist/js/shared/spaceprimitive.js +1 -1
- package/dist/manifest.json +1 -1
- package/dist/scss/brands/advertorial/density/density-compact.scss +1 -1
- package/dist/scss/brands/advertorial/density/density-default.scss +1 -1
- package/dist/scss/brands/advertorial/density/density-spacious.scss +1 -1
- package/dist/scss/brands/advertorial/overrides/brandtokenmapping.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.scss +1 -1
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.scss +1 -1
- package/dist/scss/brands/bild/density/density-compact.scss +1 -1
- package/dist/scss/brands/bild/density/density-default.scss +1 -1
- package/dist/scss/brands/bild/density/density-spacious.scss +1 -1
- package/dist/scss/brands/bild/overrides/brandcolormapping.scss +1 -1
- package/dist/scss/brands/bild/overrides/brandtokenmapping.scss +1 -1
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +1 -1
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-md-600px.scss +1 -1
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +1 -1
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-xs-320px.scss +1 -1
- package/dist/scss/brands/bild/semantic/color/colormode-dark.scss +1 -1
- package/dist/scss/brands/bild/semantic/color/colormode-light.scss +1 -1
- package/dist/scss/brands/sportbild/density/density-compact.scss +1 -1
- package/dist/scss/brands/sportbild/density/density-default.scss +1 -1
- package/dist/scss/brands/sportbild/density/density-spacious.scss +1 -1
- package/dist/scss/brands/sportbild/overrides/brandcolormapping.scss +1 -1
- package/dist/scss/brands/sportbild/overrides/brandtokenmapping.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/color/colormode-dark.scss +1 -1
- package/dist/scss/brands/sportbild/semantic/color/colormode-light.scss +1 -1
- package/dist/scss/shared/colorprimitive.scss +1 -1
- package/dist/scss/shared/fontprimitive.scss +1 -1
- package/dist/scss/shared/sizeprimitive.scss +1 -1
- package/dist/scss/shared/spaceprimitive.scss +1 -1
- package/package.json +1 -1
- package/dist/android/res/values/brands/advertorial/semantic/effects/effects-dark.xml +0 -20
- package/dist/android/res/values/brands/advertorial/semantic/effects/effects-light.xml +0 -20
- package/dist/android/res/values/brands/bild/semantic/effects/effects-dark.xml +0 -20
- package/dist/android/res/values/brands/bild/semantic/effects/effects-light.xml +0 -20
- package/dist/android/res/values/brands/sportbild/semantic/effects/effects-dark.xml +0 -20
- package/dist/android/res/values/brands/sportbild/semantic/effects/effects-light.xml +0 -20
- package/dist/scss/brands/advertorial/semantic/effects/effects-dark.scss +0 -56
- package/dist/scss/brands/advertorial/semantic/effects/effects-light.scss +0 -56
- package/dist/scss/brands/advertorial/semantic/typography/typography-lg.scss +0 -459
- package/dist/scss/brands/advertorial/semantic/typography/typography-md.scss +0 -459
- package/dist/scss/brands/advertorial/semantic/typography/typography-sm.scss +0 -459
- package/dist/scss/brands/advertorial/semantic/typography/typography-xs.scss +0 -459
- package/dist/scss/brands/bild/semantic/effects/effects-dark.scss +0 -56
- package/dist/scss/brands/bild/semantic/effects/effects-light.scss +0 -56
- package/dist/scss/brands/bild/semantic/typography/typography-lg.scss +0 -459
- package/dist/scss/brands/bild/semantic/typography/typography-md.scss +0 -459
- package/dist/scss/brands/bild/semantic/typography/typography-sm.scss +0 -459
- package/dist/scss/brands/bild/semantic/typography/typography-xs.scss +0 -459
- package/dist/scss/brands/sportbild/semantic/effects/effects-dark.scss +0 -56
- package/dist/scss/brands/sportbild/semantic/effects/effects-light.scss +0 -56
- package/dist/scss/brands/sportbild/semantic/typography/typography-lg.scss +0 -459
- package/dist/scss/brands/sportbild/semantic/typography/typography-md.scss +0 -459
- package/dist/scss/brands/sportbild/semantic/typography/typography-sm.scss +0 -459
- package/dist/scss/brands/sportbild/semantic/typography/typography-xs.scss +0 -459
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
* Generiert am: 2025-11-
|
|
2
|
+
* Typography Tokens - Sportbild / xs
|
|
3
|
+
* Generiert am: 2025-11-25T08:28:22.821Z
|
|
4
4
|
* Nicht manuell bearbeiten!
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -9,11 +9,29 @@
|
|
|
9
9
|
// ============================================
|
|
10
10
|
|
|
11
11
|
/** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 40 - 40 - 72 - 120 */
|
|
12
|
-
export const display1 =
|
|
12
|
+
export const display1 = {
|
|
13
|
+
fontFamily: "AntennaCond",
|
|
14
|
+
fontWeight: 800,
|
|
15
|
+
fontSize: "38px",
|
|
16
|
+
lineHeight: "40px",
|
|
17
|
+
letterSpacing: "-0.5px",
|
|
18
|
+
};
|
|
13
19
|
/** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 36 - 36 - 42 - 64 */
|
|
14
|
-
export const display2 =
|
|
20
|
+
export const display2 = {
|
|
21
|
+
fontFamily: "AntennaCond",
|
|
22
|
+
fontWeight: 800,
|
|
23
|
+
fontSize: "34px",
|
|
24
|
+
lineHeight: "36px",
|
|
25
|
+
letterSpacing: "-0.5px",
|
|
26
|
+
};
|
|
15
27
|
/** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 28 - 28 - 32 - 40 */
|
|
16
|
-
export const display3 =
|
|
28
|
+
export const display3 = {
|
|
29
|
+
fontFamily: "AntennaCond",
|
|
30
|
+
fontWeight: 800,
|
|
31
|
+
fontSize: "27px",
|
|
32
|
+
lineHeight: "28px",
|
|
33
|
+
letterSpacing: "-0.5px",
|
|
34
|
+
};
|
|
17
35
|
|
|
18
36
|
|
|
19
37
|
// ============================================
|
|
@@ -21,13 +39,37 @@ export const display3 = "[object Object]";
|
|
|
21
39
|
// ============================================
|
|
22
40
|
|
|
23
41
|
/** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 48 - 48 - 72 - 100 */
|
|
24
|
-
export const headline1 =
|
|
42
|
+
export const headline1 = {
|
|
43
|
+
fontFamily: "AntennaExtraCond",
|
|
44
|
+
fontSize: "42px",
|
|
45
|
+
lineHeight: "42px",
|
|
46
|
+
letterSpacing: "0px",
|
|
47
|
+
fontStyle: "bold italic",
|
|
48
|
+
};
|
|
25
49
|
/** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's token for the font size parameter changes across device sizes as follows: 40 - 40 - 48 - 64 */
|
|
26
|
-
export const headline2 =
|
|
50
|
+
export const headline2 = {
|
|
51
|
+
fontFamily: "AntennaExtraCond",
|
|
52
|
+
fontSize: "42px",
|
|
53
|
+
lineHeight: "42px",
|
|
54
|
+
letterSpacing: "0px",
|
|
55
|
+
fontStyle: "bold italic",
|
|
56
|
+
};
|
|
27
57
|
/** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's font size parameter is controlled by the headline3FontSize token: 28 - 28 - 36 - 40 */
|
|
28
|
-
export const headline3 =
|
|
58
|
+
export const headline3 = {
|
|
59
|
+
fontFamily: "AntennaExtraCond",
|
|
60
|
+
fontSize: "30px",
|
|
61
|
+
lineHeight: "33px",
|
|
62
|
+
letterSpacing: "0px",
|
|
63
|
+
fontStyle: "bold italic",
|
|
64
|
+
};
|
|
29
65
|
/** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 22 - 22 - 26 - 32 */
|
|
30
|
-
export const headline4 =
|
|
66
|
+
export const headline4 = {
|
|
67
|
+
fontFamily: "AntennaExtraCond",
|
|
68
|
+
fontSize: "21px",
|
|
69
|
+
lineHeight: "21px",
|
|
70
|
+
letterSpacing: "0px",
|
|
71
|
+
fontStyle: "bold italic",
|
|
72
|
+
};
|
|
31
73
|
|
|
32
74
|
|
|
33
75
|
// ============================================
|
|
@@ -35,7 +77,13 @@ export const headline4 = "[object Object]";
|
|
|
35
77
|
// ============================================
|
|
36
78
|
|
|
37
79
|
/** This Subheadlines text style is used in articles. They are placed under the headline at the top of an article. Subheadlines can appear in some teasers also. Font size: 24 - 24 - 32 - 36 */
|
|
38
|
-
export const subheadline1 =
|
|
80
|
+
export const subheadline1 = {
|
|
81
|
+
fontFamily: "AntennaCond",
|
|
82
|
+
fontWeight: 700,
|
|
83
|
+
fontSize: "18px",
|
|
84
|
+
lineHeight: "23.399999618530273px",
|
|
85
|
+
letterSpacing: "0px",
|
|
86
|
+
};
|
|
39
87
|
|
|
40
88
|
|
|
41
89
|
// ============================================
|
|
@@ -43,13 +91,36 @@ export const subheadline1 = "[object Object]";
|
|
|
43
91
|
// ============================================
|
|
44
92
|
|
|
45
93
|
/** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 30 --//*//-- currently css uses kicker0 for the naming of this text style and sequence of font size changes */
|
|
46
|
-
export const kicker1 =
|
|
94
|
+
export const kicker1 = {
|
|
95
|
+
fontFamily: "AntennaExtraCond",
|
|
96
|
+
fontSize: "20px",
|
|
97
|
+
lineHeight: "22px",
|
|
98
|
+
letterSpacing: "0px",
|
|
99
|
+
fontStyle: "black italic",
|
|
100
|
+
};
|
|
47
101
|
/** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 24 --//*//-- currently css uses kicker1 for the naming of this text style and sequence of font size changes */
|
|
48
|
-
export const kicker2 =
|
|
102
|
+
export const kicker2 = {
|
|
103
|
+
fontFamily: "AntennaExtraCond",
|
|
104
|
+
fontSize: "16px",
|
|
105
|
+
lineHeight: "17.600000381469727px",
|
|
106
|
+
letterSpacing: "0px",
|
|
107
|
+
fontStyle: "black italic",
|
|
108
|
+
};
|
|
49
109
|
/** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 16 - 16 - 18 - 20 --//*//-- currently css uses kicker2 for the naming of this text style and sequence of font size changes */
|
|
50
|
-
export const kicker3 =
|
|
110
|
+
export const kicker3 = {
|
|
111
|
+
fontFamily: "AntennaExtraCond",
|
|
112
|
+
fontSize: "16px",
|
|
113
|
+
lineHeight: "17.600000381469727px",
|
|
114
|
+
fontStyle: "black italic",
|
|
115
|
+
};
|
|
51
116
|
/** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 14 - 14 - 16 - 16 --//*//-- currently css uses kicker3 for the naming of this text style and sequence of font size changes */
|
|
52
|
-
export const kicker4 =
|
|
117
|
+
export const kicker4 = {
|
|
118
|
+
fontFamily: "AntennaExtraCond",
|
|
119
|
+
fontSize: "14px",
|
|
120
|
+
lineHeight: "15.399999618530273px",
|
|
121
|
+
letterSpacing: "0px",
|
|
122
|
+
fontStyle: "black italic",
|
|
123
|
+
};
|
|
53
124
|
|
|
54
125
|
|
|
55
126
|
// ============================================
|
|
@@ -57,17 +128,43 @@ export const kicker4 = "[object Object]";
|
|
|
57
128
|
// ============================================
|
|
58
129
|
|
|
59
130
|
/** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
|
|
60
|
-
export const title1 =
|
|
131
|
+
export const title1 = {
|
|
132
|
+
fontFamily: "AntennaCond",
|
|
133
|
+
fontWeight: 800,
|
|
134
|
+
fontSize: "24px",
|
|
135
|
+
lineHeight: "26.399999618530273px",
|
|
136
|
+
letterSpacing: "0px",
|
|
137
|
+
};
|
|
61
138
|
/** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
|
|
62
|
-
export const title1uppercase =
|
|
139
|
+
export const title1uppercase = {
|
|
140
|
+
fontFamily: "AntennaCond",
|
|
141
|
+
fontWeight: 800,
|
|
142
|
+
fontSize: "24px",
|
|
143
|
+
lineHeight: "26.399999618530273px",
|
|
144
|
+
letterSpacing: "0px",
|
|
145
|
+
textTransform: "upper",
|
|
146
|
+
};
|
|
63
147
|
/** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability.
|
|
64
148
|
|
|
65
149
|
In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
|
|
66
|
-
export const title2 =
|
|
150
|
+
export const title2 = {
|
|
151
|
+
fontFamily: "AntennaCond",
|
|
152
|
+
fontWeight: 800,
|
|
153
|
+
fontSize: "16px",
|
|
154
|
+
lineHeight: "16.799999237060547px",
|
|
155
|
+
letterSpacing: "0px",
|
|
156
|
+
};
|
|
67
157
|
/** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability.
|
|
68
158
|
|
|
69
159
|
In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
|
|
70
|
-
export const title2uppercase =
|
|
160
|
+
export const title2uppercase = {
|
|
161
|
+
fontFamily: "AntennaCond",
|
|
162
|
+
fontWeight: 800,
|
|
163
|
+
fontSize: "16px",
|
|
164
|
+
lineHeight: "16.799999237060547px",
|
|
165
|
+
letterSpacing: "0px",
|
|
166
|
+
textTransform: "upper",
|
|
167
|
+
};
|
|
71
168
|
|
|
72
169
|
|
|
73
170
|
// ============================================
|
|
@@ -75,7 +172,13 @@ export const title2uppercase = "[object Object]";
|
|
|
75
172
|
// ============================================
|
|
76
173
|
|
|
77
174
|
/** Callouts highlight key information, quotes, or important notes inside content. They stand apart from body text to draw attention. There is overlap between this text style and the title text styles. Font size: 18 - 18 - 22 - 22 */
|
|
78
|
-
export const callout =
|
|
175
|
+
export const callout = {
|
|
176
|
+
fontFamily: "AntennaCond",
|
|
177
|
+
fontWeight: 800,
|
|
178
|
+
fontSize: "18px",
|
|
179
|
+
lineHeight: "23.399999618530273px",
|
|
180
|
+
letterSpacing: "0px",
|
|
181
|
+
};
|
|
79
182
|
|
|
80
183
|
|
|
81
184
|
// ============================================
|
|
@@ -83,13 +186,35 @@ export const callout = "[object Object]";
|
|
|
83
186
|
// ============================================
|
|
84
187
|
|
|
85
188
|
/** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
|
|
86
|
-
export const body =
|
|
189
|
+
export const body = {
|
|
190
|
+
fontFamily: "Inter",
|
|
191
|
+
fontWeight: 400,
|
|
192
|
+
fontSize: "17px",
|
|
193
|
+
lineHeight: "28.049999237060547px",
|
|
194
|
+
letterSpacing: "0px",
|
|
195
|
+
};
|
|
87
196
|
/** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
|
|
88
|
-
export const bodyitalic =
|
|
197
|
+
export const bodyitalic = {
|
|
198
|
+
fontFamily: "Inter",
|
|
199
|
+
fontSize: "17px",
|
|
200
|
+
lineHeight: "28.049999237060547px",
|
|
201
|
+
letterSpacing: "0px",
|
|
202
|
+
};
|
|
89
203
|
/** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
|
|
90
|
-
export const bodybold =
|
|
204
|
+
export const bodybold = {
|
|
205
|
+
fontFamily: "Inter",
|
|
206
|
+
fontWeight: 700,
|
|
207
|
+
fontSize: "17px",
|
|
208
|
+
lineHeight: "28.049999237060547px",
|
|
209
|
+
letterSpacing: "0px",
|
|
210
|
+
};
|
|
91
211
|
/** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
|
|
92
|
-
export const bodybolditalic =
|
|
212
|
+
export const bodybolditalic = {
|
|
213
|
+
fontFamily: "Inter",
|
|
214
|
+
fontSize: "17px",
|
|
215
|
+
lineHeight: "28.049999237060547px",
|
|
216
|
+
letterSpacing: "0px",
|
|
217
|
+
};
|
|
93
218
|
|
|
94
219
|
|
|
95
220
|
// ============================================
|
|
@@ -97,15 +222,49 @@ export const bodybolditalic = "[object Object]";
|
|
|
97
222
|
// ============================================
|
|
98
223
|
|
|
99
224
|
/** Use this text style for styling elements that are clickable text links inside body texts. This style is often found in article texts. Font size remains constant at 21 across device sizes. */
|
|
100
|
-
export const textlink =
|
|
225
|
+
export const textlink = {
|
|
226
|
+
fontFamily: "Inter",
|
|
227
|
+
fontWeight: 400,
|
|
228
|
+
fontSize: "17px",
|
|
229
|
+
lineHeight: "28.049999237060547px",
|
|
230
|
+
letterSpacing: "0px",
|
|
231
|
+
textDecoration: "underline",
|
|
232
|
+
};
|
|
101
233
|
/** Use this text style for styling elements that are clickable text links inside body texts that are using the italic style. This style is often found in article texts that need to show contrast for publications titles, specific words or names. Font size remains constant at 21 across device sizes. */
|
|
102
|
-
export const textlinkitalic =
|
|
234
|
+
export const textlinkitalic = {
|
|
235
|
+
fontFamily: "Inter",
|
|
236
|
+
fontSize: "17px",
|
|
237
|
+
lineHeight: "28.049999237060547px",
|
|
238
|
+
letterSpacing: "0px",
|
|
239
|
+
textDecoration: "underline",
|
|
240
|
+
};
|
|
103
241
|
/** Use this text style for styling elements that are clickable text links inside emphasized body texts that are using the bold or html strong style. This style is often found in article texts that need to show contrast for specific words or names. Font size remains constant at 21 across device sizes. */
|
|
104
|
-
export const textlinkbold =
|
|
242
|
+
export const textlinkbold = {
|
|
243
|
+
fontFamily: "Inter",
|
|
244
|
+
fontWeight: 700,
|
|
245
|
+
fontSize: "17px",
|
|
246
|
+
lineHeight: "28.049999237060547px",
|
|
247
|
+
letterSpacing: "0px",
|
|
248
|
+
textDecoration: "underline",
|
|
249
|
+
};
|
|
105
250
|
/** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
|
|
106
|
-
export const textlinkhover =
|
|
251
|
+
export const textlinkhover = {
|
|
252
|
+
fontFamily: "Inter",
|
|
253
|
+
fontWeight: 400,
|
|
254
|
+
fontSize: "17px",
|
|
255
|
+
lineHeight: "28.049999237060547px",
|
|
256
|
+
letterSpacing: "0px",
|
|
257
|
+
textDecoration: "underline",
|
|
258
|
+
};
|
|
107
259
|
/** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
|
|
108
|
-
export const textlinkboldhover =
|
|
260
|
+
export const textlinkboldhover = {
|
|
261
|
+
fontFamily: "Inter",
|
|
262
|
+
fontWeight: 700,
|
|
263
|
+
fontSize: "17px",
|
|
264
|
+
lineHeight: "28.049999237060547px",
|
|
265
|
+
letterSpacing: "0px",
|
|
266
|
+
textDecoration: "underline",
|
|
267
|
+
};
|
|
109
268
|
|
|
110
269
|
|
|
111
270
|
// ============================================
|
|
@@ -113,13 +272,37 @@ export const textlinkboldhover = "[object Object]";
|
|
|
113
272
|
// ============================================
|
|
114
273
|
|
|
115
274
|
/** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This specific style is commonly used on small two lines of text that are seen on standard teasers. The font size of this text style is similar to the label text style. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 16 - 16 - 16 - 18 */
|
|
116
|
-
export const footnote1 =
|
|
275
|
+
export const footnote1 = {
|
|
276
|
+
fontFamily: "Inter",
|
|
277
|
+
fontWeight: 400,
|
|
278
|
+
fontSize: "13px",
|
|
279
|
+
lineHeight: "17.030000686645508px",
|
|
280
|
+
letterSpacing: "0px",
|
|
281
|
+
};
|
|
117
282
|
/** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. 16 - 16 - 16 - 18 */
|
|
118
|
-
export const footnote1bold =
|
|
283
|
+
export const footnote1bold = {
|
|
284
|
+
fontFamily: "Inter",
|
|
285
|
+
fontWeight: 700,
|
|
286
|
+
fontSize: "13px",
|
|
287
|
+
lineHeight: "17.030000686645508px",
|
|
288
|
+
letterSpacing: "0px",
|
|
289
|
+
};
|
|
119
290
|
/** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
|
|
120
|
-
export const footnote2 =
|
|
291
|
+
export const footnote2 = {
|
|
292
|
+
fontFamily: "Inter",
|
|
293
|
+
fontWeight: 400,
|
|
294
|
+
fontSize: "10px",
|
|
295
|
+
lineHeight: "13px",
|
|
296
|
+
letterSpacing: "0px",
|
|
297
|
+
};
|
|
121
298
|
/** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
|
|
122
|
-
export const footnote2bold =
|
|
299
|
+
export const footnote2bold = {
|
|
300
|
+
fontFamily: "Inter",
|
|
301
|
+
fontWeight: 700,
|
|
302
|
+
fontSize: "10px",
|
|
303
|
+
lineHeight: "13px",
|
|
304
|
+
letterSpacing: "0px",
|
|
305
|
+
};
|
|
123
306
|
|
|
124
307
|
|
|
125
308
|
// ============================================
|
|
@@ -127,31 +310,114 @@ export const footnote2bold = "[object Object]";
|
|
|
127
310
|
// ============================================
|
|
128
311
|
|
|
129
312
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
|
|
130
|
-
export const label1 =
|
|
313
|
+
export const label1 = {
|
|
314
|
+
fontFamily: "AntennaExtraCond",
|
|
315
|
+
fontWeight: 400,
|
|
316
|
+
fontSize: "17px",
|
|
317
|
+
lineHeight: "20.399999618530273px",
|
|
318
|
+
letterSpacing: "0.25px",
|
|
319
|
+
};
|
|
131
320
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
|
|
132
|
-
export const label1bold =
|
|
321
|
+
export const label1bold = {
|
|
322
|
+
fontFamily: "AntennaExtraCond",
|
|
323
|
+
fontWeight: 700,
|
|
324
|
+
fontSize: "17px",
|
|
325
|
+
lineHeight: "20.399999618530273px",
|
|
326
|
+
letterSpacing: "0.25px",
|
|
327
|
+
};
|
|
133
328
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size changes across device sizes: 10 - 10 - 15 - 17 */
|
|
134
|
-
export const label1boldresp =
|
|
329
|
+
export const label1boldresp = {
|
|
330
|
+
fontFamily: "AntennaExtraCond",
|
|
331
|
+
fontWeight: 700,
|
|
332
|
+
fontSize: "10px",
|
|
333
|
+
lineHeight: "12px",
|
|
334
|
+
letterSpacing: "0.25px",
|
|
335
|
+
};
|
|
135
336
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
|
|
136
|
-
export const label1uppercasebold =
|
|
337
|
+
export const label1uppercasebold = {
|
|
338
|
+
fontFamily: "AntennaExtraCond",
|
|
339
|
+
fontWeight: 700,
|
|
340
|
+
fontSize: "17px",
|
|
341
|
+
lineHeight: "20.399999618530273px",
|
|
342
|
+
letterSpacing: "0.5px",
|
|
343
|
+
textTransform: "upper",
|
|
344
|
+
};
|
|
137
345
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
|
|
138
|
-
export const label2 =
|
|
346
|
+
export const label2 = {
|
|
347
|
+
fontFamily: "AntennaExtraCond",
|
|
348
|
+
fontWeight: 400,
|
|
349
|
+
fontSize: "15px",
|
|
350
|
+
lineHeight: "19.200000762939453px",
|
|
351
|
+
letterSpacing: "0.25px",
|
|
352
|
+
};
|
|
139
353
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
|
|
140
|
-
export const label2uppercase =
|
|
354
|
+
export const label2uppercase = {
|
|
355
|
+
fontFamily: "AntennaExtraCond",
|
|
356
|
+
fontWeight: 400,
|
|
357
|
+
fontSize: "15px",
|
|
358
|
+
lineHeight: "19.200000762939453px",
|
|
359
|
+
letterSpacing: "0.25px",
|
|
360
|
+
textTransform: "upper",
|
|
361
|
+
};
|
|
141
362
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
|
|
142
|
-
export const label2bold =
|
|
363
|
+
export const label2bold = {
|
|
364
|
+
fontFamily: "AntennaExtraCond",
|
|
365
|
+
fontWeight: 700,
|
|
366
|
+
fontSize: "15px",
|
|
367
|
+
lineHeight: "19.200000762939453px",
|
|
368
|
+
letterSpacing: "0.25px",
|
|
369
|
+
};
|
|
143
370
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This style used on special navi component simiiar to link lane menu items. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. The font size value remains constant at 15 across device sizes. */
|
|
144
|
-
export const label2uppercasebold =
|
|
371
|
+
export const label2uppercasebold = {
|
|
372
|
+
fontFamily: "AntennaExtraCond",
|
|
373
|
+
fontWeight: 700,
|
|
374
|
+
fontSize: "15px",
|
|
375
|
+
lineHeight: "19.200000762939453px",
|
|
376
|
+
letterSpacing: "0.25px",
|
|
377
|
+
textTransform: "upper",
|
|
378
|
+
};
|
|
145
379
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
|
|
146
|
-
export const label3 =
|
|
380
|
+
export const label3 = {
|
|
381
|
+
fontFamily: "AntennaExtraCond",
|
|
382
|
+
fontWeight: 400,
|
|
383
|
+
fontSize: "12px",
|
|
384
|
+
lineHeight: "14.399999618530273px",
|
|
385
|
+
letterSpacing: "0.25px",
|
|
386
|
+
};
|
|
147
387
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. Current online CSS .nav_btn--type-list & .nav_btn__text // --nav-btn */
|
|
148
|
-
export const label3uppercase =
|
|
388
|
+
export const label3uppercase = {
|
|
389
|
+
fontFamily: "AntennaExtraCond",
|
|
390
|
+
fontWeight: 400,
|
|
391
|
+
fontSize: "12px",
|
|
392
|
+
lineHeight: "14.399999618530273px",
|
|
393
|
+
letterSpacing: "0.5px",
|
|
394
|
+
textTransform: "upper",
|
|
395
|
+
};
|
|
149
396
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
|
|
150
|
-
export const label3bold =
|
|
397
|
+
export const label3bold = {
|
|
398
|
+
fontFamily: "AntennaExtraCond",
|
|
399
|
+
fontWeight: 700,
|
|
400
|
+
fontSize: "12px",
|
|
401
|
+
lineHeight: "14.399999618530273px",
|
|
402
|
+
letterSpacing: "0.25px",
|
|
403
|
+
};
|
|
151
404
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
|
|
152
|
-
export const label3uppercasebold =
|
|
405
|
+
export const label3uppercasebold = {
|
|
406
|
+
fontFamily: "AntennaExtraCond",
|
|
407
|
+
fontWeight: 700,
|
|
408
|
+
fontSize: "12px",
|
|
409
|
+
lineHeight: "14.399999618530273px",
|
|
410
|
+
letterSpacing: "0.5px",
|
|
411
|
+
textTransform: "upper",
|
|
412
|
+
};
|
|
153
413
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 8. */
|
|
154
|
-
export const label4 =
|
|
414
|
+
export const label4 = {
|
|
415
|
+
fontFamily: "AntennaExtraCond",
|
|
416
|
+
fontWeight: 400,
|
|
417
|
+
fontSize: "8px",
|
|
418
|
+
lineHeight: "10px",
|
|
419
|
+
letterSpacing: "0px",
|
|
420
|
+
};
|
|
155
421
|
|
|
156
422
|
|
|
157
423
|
// ============================================
|
|
@@ -159,7 +425,13 @@ export const label4 = "[object Object]";
|
|
|
159
425
|
// ============================================
|
|
160
426
|
|
|
161
427
|
/** Use this text style for sections of text that are inside a fieldset with a quotation given by a person in an interview or a section of text from a larger body of text that need to be emphasized. */
|
|
162
|
-
export const quote =
|
|
428
|
+
export const quote = {
|
|
429
|
+
fontFamily: "AntennaCond",
|
|
430
|
+
fontWeight: 800,
|
|
431
|
+
fontSize: "16px",
|
|
432
|
+
lineHeight: "20.799999237060547px",
|
|
433
|
+
letterSpacing: "0px",
|
|
434
|
+
};
|
|
163
435
|
|
|
164
436
|
|
|
165
437
|
// ============================================
|
|
@@ -167,7 +439,12 @@ export const quote = "[object Object]";
|
|
|
167
439
|
// ============================================
|
|
168
440
|
|
|
169
441
|
/** This text style is for use on accordion labels */
|
|
170
|
-
export const accordionlabel =
|
|
442
|
+
export const accordionlabel = {
|
|
443
|
+
fontFamily: "Inter",
|
|
444
|
+
fontWeight: 700,
|
|
445
|
+
fontSize: "17px",
|
|
446
|
+
letterSpacing: "0px",
|
|
447
|
+
};
|
|
171
448
|
|
|
172
449
|
|
|
173
450
|
// ============================================
|
|
@@ -175,15 +452,40 @@ export const accordionlabel = "[object Object]";
|
|
|
175
452
|
// ============================================
|
|
176
453
|
|
|
177
454
|
/** This text style contains the variables necessary for setting how the font parameters for the article kicker behaves across breakpoints. For font size, this component level token currently references the semantic level token kicker1FontSize. */
|
|
178
|
-
export const articlekicker =
|
|
455
|
+
export const articlekicker = {
|
|
456
|
+
fontFamily: "AntennaExtraCond",
|
|
457
|
+
fontSize: "20px",
|
|
458
|
+
lineHeight: "22px",
|
|
459
|
+
fontStyle: "black italic",
|
|
460
|
+
};
|
|
179
461
|
/** This text style is used on image captions that show up in article pages only. */
|
|
180
|
-
export const articleimagecaption =
|
|
462
|
+
export const articleimagecaption = {
|
|
463
|
+
fontFamily: "Inter",
|
|
464
|
+
fontWeight: 700,
|
|
465
|
+
fontSize: "13px",
|
|
466
|
+
lineHeight: "16.899999618530273px",
|
|
467
|
+
letterSpacing: "0px",
|
|
468
|
+
};
|
|
181
469
|
/** This component level text style is reserved for article page headline texts that show up at the top of article pages. This text style references the generic text styles headline1 and headline2 font size variables. 40 - 40 - 72 - 100 */
|
|
182
|
-
export const articleheadline =
|
|
470
|
+
export const articleheadline = {
|
|
471
|
+
fontFamily: "AntennaExtraCond",
|
|
472
|
+
fontSize: "42px",
|
|
473
|
+
lineHeight: "42px",
|
|
474
|
+
fontStyle: "bold italic",
|
|
475
|
+
};
|
|
183
476
|
/** This text style is used on short pieces of text that give information about where an image originated. It can also be used on short texts that give information about where a video originated. */
|
|
184
|
-
export const articlemetasource =
|
|
477
|
+
export const articlemetasource = {
|
|
478
|
+
fontFamily: "Inter",
|
|
479
|
+
fontWeight: 400,
|
|
480
|
+
fontSize: "13px",
|
|
481
|
+
lineHeight: "17px",
|
|
482
|
+
};
|
|
185
483
|
/** Use this text style for time and day text string that commonly shows up along with the article authors avatars. Font size: 12 - 12 - 14 - 16 */
|
|
186
|
-
export const articletimestamp =
|
|
484
|
+
export const articletimestamp = {
|
|
485
|
+
fontFamily: "AntennaCond",
|
|
486
|
+
fontWeight: 800,
|
|
487
|
+
fontSize: "12px",
|
|
488
|
+
};
|
|
187
489
|
|
|
188
490
|
|
|
189
491
|
// ============================================
|
|
@@ -191,7 +493,12 @@ export const articletimestamp = "[object Object]";
|
|
|
191
493
|
// ============================================
|
|
192
494
|
|
|
193
495
|
/** This text style is used on audio player labels for elapsed time, reproduction speed and short functionality description text. Font size: 16 - 16 - 16 - 18 */
|
|
194
|
-
export const audioplayerlabel =
|
|
496
|
+
export const audioplayerlabel = {
|
|
497
|
+
fontFamily: "AntennaExtraCond",
|
|
498
|
+
fontWeight: 700,
|
|
499
|
+
fontSize: "16px",
|
|
500
|
+
lineHeight: "16px",
|
|
501
|
+
};
|
|
195
502
|
|
|
196
503
|
|
|
197
504
|
// ============================================
|
|
@@ -199,17 +506,49 @@ export const audioplayerlabel = "[object Object]";
|
|
|
199
506
|
// ============================================
|
|
200
507
|
|
|
201
508
|
/** This text style is used for avatar on iOS & Android apps. 12 - 12 - 14 - 16 */
|
|
202
|
-
export const appavatar =
|
|
509
|
+
export const appavatar = {
|
|
510
|
+
fontFamily: "AntennaCond",
|
|
511
|
+
fontWeight: 800,
|
|
512
|
+
fontSize: "12px",
|
|
513
|
+
letterSpacing: "0px",
|
|
514
|
+
textTransform: "upper",
|
|
515
|
+
};
|
|
203
516
|
/** This text style is used on article page avatar name labels in their default state. Font size: 16 - 16 - 16 - 18
|
|
204
517
|
|
|
205
518
|
09-2025, on large devices this component uses the css var --footnote-font-size-lg at 1024px bp changes to --footnote-font-size-sm */
|
|
206
|
-
export const avatardefault =
|
|
519
|
+
export const avatardefault = {
|
|
520
|
+
fontFamily: "Inter",
|
|
521
|
+
fontWeight: 700,
|
|
522
|
+
fontSize: "13px",
|
|
523
|
+
lineHeight: "21px",
|
|
524
|
+
letterSpacing: "0px",
|
|
525
|
+
};
|
|
207
526
|
/** This text style is used on avatars that appear in article pages. Font size: 16 - 16 - 16 - 18 */
|
|
208
|
-
export const avatarhover =
|
|
527
|
+
export const avatarhover = {
|
|
528
|
+
fontFamily: "Inter",
|
|
529
|
+
fontWeight: 700,
|
|
530
|
+
fontSize: "13px",
|
|
531
|
+
lineHeight: "21px",
|
|
532
|
+
letterSpacing: "0px",
|
|
533
|
+
textDecoration: "underline",
|
|
534
|
+
};
|
|
209
535
|
/** This text style is used on avatars that show up on article pages. Some avatars have the individual's first and last name on a single line. The second line of the avatar label is then used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
|
|
210
|
-
export const avatarsecondaryinfo =
|
|
536
|
+
export const avatarsecondaryinfo = {
|
|
537
|
+
fontFamily: "Inter",
|
|
538
|
+
fontWeight: 400,
|
|
539
|
+
fontSize: "13px",
|
|
540
|
+
lineHeight: "21px",
|
|
541
|
+
letterSpacing: "0px",
|
|
542
|
+
};
|
|
211
543
|
/** This text style is used for the active state of the second line of avatar labels. This label text is used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
|
|
212
|
-
export const avatarsecondaryinfohover =
|
|
544
|
+
export const avatarsecondaryinfohover = {
|
|
545
|
+
fontFamily: "Inter",
|
|
546
|
+
fontWeight: 400,
|
|
547
|
+
fontSize: "13px",
|
|
548
|
+
lineHeight: "21px",
|
|
549
|
+
letterSpacing: "0px",
|
|
550
|
+
textDecoration: "underline",
|
|
551
|
+
};
|
|
213
552
|
|
|
214
553
|
|
|
215
554
|
// ============================================
|
|
@@ -217,9 +556,19 @@ export const avatarsecondaryinfohover = "[object Object]";
|
|
|
217
556
|
// ============================================
|
|
218
557
|
|
|
219
558
|
/** 14 - 14 - 16 - 16 -- This text style is specific to the video horizontal player's ad badge that shows up next to the yellow progress bar that plays during horizontal video advertisements. */
|
|
220
|
-
export const videoadbadge =
|
|
559
|
+
export const videoadbadge = {
|
|
560
|
+
fontFamily: "Gotham XNarrow",
|
|
561
|
+
fontWeight: 400,
|
|
562
|
+
fontSize: "14px",
|
|
563
|
+
textTransform: "upper",
|
|
564
|
+
};
|
|
221
565
|
/** This text style is used on horizontal video badges that contain either the video's total duration or a live status identifier. Font size: 16 - 16 - 18 - 18 */
|
|
222
|
-
export const videotimebadge =
|
|
566
|
+
export const videotimebadge = {
|
|
567
|
+
fontFamily: "Inter",
|
|
568
|
+
fontWeight: 400,
|
|
569
|
+
fontSize: "16px",
|
|
570
|
+
lineHeight: "21px",
|
|
571
|
+
};
|
|
223
572
|
|
|
224
573
|
|
|
225
574
|
// ============================================
|
|
@@ -227,11 +576,31 @@ export const videotimebadge = "[object Object]";
|
|
|
227
576
|
// ============================================
|
|
228
577
|
|
|
229
578
|
/** This text style is used for the last items in a breadcrumbs chain. It is commonly used in article pages and is a h1 in html. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
|
|
230
|
-
export const breadcrumb =
|
|
579
|
+
export const breadcrumb = {
|
|
580
|
+
fontFamily: "Inter",
|
|
581
|
+
fontWeight: 700,
|
|
582
|
+
fontSize: "14px",
|
|
583
|
+
lineHeight: "14px",
|
|
584
|
+
letterSpacing: "0px",
|
|
585
|
+
};
|
|
231
586
|
/** This text style is used for breadcrumb links that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
|
|
232
|
-
export const breadcrumblink =
|
|
587
|
+
export const breadcrumblink = {
|
|
588
|
+
fontFamily: "Inter",
|
|
589
|
+
fontWeight: 400,
|
|
590
|
+
fontSize: "14px",
|
|
591
|
+
lineHeight: "14px",
|
|
592
|
+
letterSpacing: "0px",
|
|
593
|
+
textDecoration: "underline",
|
|
594
|
+
};
|
|
233
595
|
/** This text style is used for the hover state of breadcrumbs that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
|
|
234
|
-
export const breadcrumblinkhover =
|
|
596
|
+
export const breadcrumblinkhover = {
|
|
597
|
+
fontFamily: "Inter",
|
|
598
|
+
fontWeight: 700,
|
|
599
|
+
fontSize: "14px",
|
|
600
|
+
lineHeight: "14px",
|
|
601
|
+
letterSpacing: "0px",
|
|
602
|
+
textDecoration: "underline",
|
|
603
|
+
};
|
|
235
604
|
|
|
236
605
|
|
|
237
606
|
// ============================================
|
|
@@ -239,11 +608,30 @@ export const breadcrumblinkhover = "[object Object]";
|
|
|
239
608
|
// ============================================
|
|
240
609
|
|
|
241
610
|
/** Use this text style on breaking news headlines that horizontally scroll in the breaking news animated strip. Font size constant 21. */
|
|
242
|
-
export const breakingnewstext =
|
|
611
|
+
export const breakingnewstext = {
|
|
612
|
+
fontFamily: "AntennaExtraCond",
|
|
613
|
+
fontWeight: 700,
|
|
614
|
+
fontSize: "21px",
|
|
615
|
+
lineHeight: "24px",
|
|
616
|
+
letterSpacing: "0px",
|
|
617
|
+
textTransform: "upper",
|
|
618
|
+
};
|
|
243
619
|
/** Use this text style on the upper title of the breaking news headline strip. Font size constant 13. */
|
|
244
|
-
export const breakingnewsuppertitle =
|
|
620
|
+
export const breakingnewsuppertitle = {
|
|
621
|
+
fontFamily: "AntennaCond",
|
|
622
|
+
fontWeight: 800,
|
|
623
|
+
fontSize: "13px",
|
|
624
|
+
lineHeight: "13px",
|
|
625
|
+
letterSpacing: "0px",
|
|
626
|
+
};
|
|
245
627
|
/** Use this font style on the breaking news badge's lower title. Font size constant 23. */
|
|
246
|
-
export const breakingnewslowertitle =
|
|
628
|
+
export const breakingnewslowertitle = {
|
|
629
|
+
fontFamily: "AntennaCond",
|
|
630
|
+
fontWeight: 800,
|
|
631
|
+
fontSize: "23px",
|
|
632
|
+
lineHeight: "21px",
|
|
633
|
+
letterSpacing: "0px",
|
|
634
|
+
};
|
|
247
635
|
|
|
248
636
|
|
|
249
637
|
// ============================================
|
|
@@ -251,9 +639,21 @@ export const breakingnewslowertitle = "[object Object]";
|
|
|
251
639
|
// ============================================
|
|
252
640
|
|
|
253
641
|
/** This text style is used on button labels. Its font size variable is currently in the Density collection. Font size changes across devices: 15 - 17 - 19 Current online CSS .btn--narrow & .btn */
|
|
254
|
-
export const buttonlabel =
|
|
642
|
+
export const buttonlabel = {
|
|
643
|
+
fontFamily: "AntennaExtraCond",
|
|
644
|
+
fontSize: "15px",
|
|
645
|
+
lineHeight: "15px",
|
|
646
|
+
letterSpacing: "0.5px",
|
|
647
|
+
fontStyle: "bold italic",
|
|
648
|
+
textTransform: "upper",
|
|
649
|
+
};
|
|
255
650
|
/** This text style is used on buttons that are commonly used inside of a container for advertizers and partners. This text is used in buttons that open links to external content. Font size: 16 - 16 - 16 - 18 */
|
|
256
|
-
export const partnerlinkbuttonlabel =
|
|
651
|
+
export const partnerlinkbuttonlabel = {
|
|
652
|
+
fontFamily: "AntennaExtraCond",
|
|
653
|
+
fontWeight: 400,
|
|
654
|
+
fontSize: "16px",
|
|
655
|
+
lineHeight: "16px",
|
|
656
|
+
};
|
|
257
657
|
|
|
258
658
|
|
|
259
659
|
// ============================================
|
|
@@ -261,7 +661,11 @@ export const partnerlinkbuttonlabel = "[object Object]";
|
|
|
261
661
|
// ============================================
|
|
262
662
|
|
|
263
663
|
/** This text style is used on the chips component. They are commonly used for filtering parameters. font size: 16 - 16 - 16 - 18 */
|
|
264
|
-
export const chipslabel =
|
|
664
|
+
export const chipslabel = {
|
|
665
|
+
fontFamily: "Inter",
|
|
666
|
+
fontWeight: 700,
|
|
667
|
+
fontSize: "16px",
|
|
668
|
+
};
|
|
265
669
|
|
|
266
670
|
|
|
267
671
|
// ============================================
|
|
@@ -269,13 +673,32 @@ export const chipslabel = "[object Object]";
|
|
|
269
673
|
// ============================================
|
|
270
674
|
|
|
271
675
|
/** This text style is used for link texts contained inside cards that commonly show up at the bottom of pages in footers. This link text style's font size parameter uses the label2 font size variable. */
|
|
272
|
-
export const footercardlink =
|
|
676
|
+
export const footercardlink = {
|
|
677
|
+
fontFamily: "Gotham XNarrow",
|
|
678
|
+
fontWeight: 400,
|
|
679
|
+
fontSize: "15px",
|
|
680
|
+
textDecoration: "underline",
|
|
681
|
+
};
|
|
273
682
|
/** This text style is found on footers that separate links with a vertical bar. Font size remains constant at 20 px across devices. */
|
|
274
|
-
export const footerlinkseparator =
|
|
683
|
+
export const footerlinkseparator = {
|
|
684
|
+
fontFamily: "Gotham XNarrow",
|
|
685
|
+
fontWeight: 400,
|
|
686
|
+
};
|
|
275
687
|
/** This text style is used in footer links that show up at the bottom of content pages. Font size constant at 11px. */
|
|
276
|
-
export const footerlinks =
|
|
688
|
+
export const footerlinks = {
|
|
689
|
+
fontFamily: "Inter",
|
|
690
|
+
fontWeight: 700,
|
|
691
|
+
fontSize: "11px",
|
|
692
|
+
lineHeight: "14px",
|
|
693
|
+
letterSpacing: "0px",
|
|
694
|
+
};
|
|
277
695
|
/** User data and offer pages use this text style on footer links. Font size remains constant at 18px. */
|
|
278
|
-
export const footerlinkuserOfferpages =
|
|
696
|
+
export const footerlinkuserOfferpages = {
|
|
697
|
+
fontFamily: "Inter",
|
|
698
|
+
fontWeight: 400,
|
|
699
|
+
fontSize: "18px",
|
|
700
|
+
lineHeight: "26px",
|
|
701
|
+
};
|
|
279
702
|
|
|
280
703
|
|
|
281
704
|
// ============================================
|
|
@@ -283,7 +706,12 @@ export const footerlinkuserOfferpages = "[object Object]";
|
|
|
283
706
|
// ============================================
|
|
284
707
|
|
|
285
708
|
/** This text style is used in dropdowns and other text input fields such as date inputs, search input fields and other inputs for text found in forms for example. Font size references a variable from the density collection. 15 - 17 - 19 */
|
|
286
|
-
export const textinputfieldlabel =
|
|
709
|
+
export const textinputfieldlabel = {
|
|
710
|
+
fontFamily: "Inter",
|
|
711
|
+
fontWeight: 400,
|
|
712
|
+
fontSize: "16px",
|
|
713
|
+
lineHeight: "16px",
|
|
714
|
+
};
|
|
287
715
|
|
|
288
716
|
|
|
289
717
|
// ============================================
|
|
@@ -291,9 +719,20 @@ export const textinputfieldlabel = "[object Object]";
|
|
|
291
719
|
// ============================================
|
|
292
720
|
|
|
293
721
|
/** This text style is used on live ticker headlines. The font size changes between device sizes. 22 - 22 - 32 -32 */
|
|
294
|
-
export const livetickerheadline =
|
|
722
|
+
export const livetickerheadline = {
|
|
723
|
+
fontFamily: "AntennaExtraCond",
|
|
724
|
+
fontWeight: 600,
|
|
725
|
+
fontSize: "22px",
|
|
726
|
+
lineHeight: "22px",
|
|
727
|
+
letterSpacing: "0px",
|
|
728
|
+
};
|
|
295
729
|
/** Use this text style on the live ticker time stamps. 14 - 14 - 16 - 16 */
|
|
296
|
-
export const livetickertimestamp =
|
|
730
|
+
export const livetickertimestamp = {
|
|
731
|
+
fontFamily: "Gotham XNarrow",
|
|
732
|
+
fontWeight: 700,
|
|
733
|
+
fontSize: "14px",
|
|
734
|
+
lineHeight: "14px",
|
|
735
|
+
};
|
|
297
736
|
|
|
298
737
|
|
|
299
738
|
// ============================================
|
|
@@ -301,11 +740,26 @@ export const livetickertimestamp = "[object Object]";
|
|
|
301
740
|
// ============================================
|
|
302
741
|
|
|
303
742
|
/** This text style is used on controller labels of the podcast media player. Font size: 16 - 16 - 16 - 18 */
|
|
304
|
-
export const podcastplayerlabel =
|
|
743
|
+
export const podcastplayerlabel = {
|
|
744
|
+
fontFamily: "AntennaExtraCond",
|
|
745
|
+
fontWeight: 400,
|
|
746
|
+
fontSize: "16px",
|
|
747
|
+
lineHeight: "16px",
|
|
748
|
+
};
|
|
305
749
|
/** 14 - 14 - 16 - 16 -- This text style is specific to the video horizontal player's ad badge that shows up next to the yellow progress bar that plays during the video advertisement. */
|
|
306
|
-
export const videoadtime =
|
|
750
|
+
export const videoadtime = {
|
|
751
|
+
fontFamily: "Gotham",
|
|
752
|
+
fontWeight: 800,
|
|
753
|
+
fontSize: "14px",
|
|
754
|
+
textTransform: "upper",
|
|
755
|
+
};
|
|
307
756
|
/** Use this text style on video player time badges that display elapsed, total or live information text labels. This text style references the label2 font size variable. 15px constant */
|
|
308
|
-
export const videoplayertime =
|
|
757
|
+
export const videoplayertime = {
|
|
758
|
+
fontFamily: "AntennaCond",
|
|
759
|
+
fontWeight: 800,
|
|
760
|
+
fontSize: "14px",
|
|
761
|
+
textTransform: "upper",
|
|
762
|
+
};
|
|
309
763
|
|
|
310
764
|
|
|
311
765
|
// ============================================
|
|
@@ -313,13 +767,40 @@ export const videoplayertime = "[object Object]";
|
|
|
313
767
|
// ============================================
|
|
314
768
|
|
|
315
769
|
/** This text style is used on a small title that is placed above tab elements that are seen on iOS and Android top menu bar. */
|
|
316
|
-
export const apptopbarstagetitle =
|
|
770
|
+
export const apptopbarstagetitle = {
|
|
771
|
+
fontFamily: "AntennaCond",
|
|
772
|
+
fontWeight: 800,
|
|
773
|
+
fontSize: "12px",
|
|
774
|
+
lineHeight: "14px",
|
|
775
|
+
letterSpacing: "0px",
|
|
776
|
+
};
|
|
317
777
|
/** iOS and Android apps currently have a top bar with tabs that when selected display different content within the main view of the device. This text style is used for a title text that provides information for the user to situate where they are within the app's content possibilities. */
|
|
318
|
-
export const apptopbartabstitle =
|
|
778
|
+
export const apptopbartabstitle = {
|
|
779
|
+
fontFamily: "AntennaCond",
|
|
780
|
+
fontWeight: 800,
|
|
781
|
+
fontSize: "12px",
|
|
782
|
+
lineHeight: "14px",
|
|
783
|
+
letterSpacing: "0px",
|
|
784
|
+
textTransform: "upper",
|
|
785
|
+
};
|
|
319
786
|
/** Used on menu link lane items and on mobile side menu drawer. Current online CSS naming: --nav-btn */
|
|
320
|
-
export const menuitemlabel =
|
|
787
|
+
export const menuitemlabel = {
|
|
788
|
+
fontFamily: "AntennaExtraCond",
|
|
789
|
+
fontSize: "18px",
|
|
790
|
+
lineHeight: "18px",
|
|
791
|
+
letterSpacing: "0px",
|
|
792
|
+
fontStyle: "black italic",
|
|
793
|
+
textTransform: "upper",
|
|
794
|
+
};
|
|
321
795
|
/** Use this tokenized font style for menu items with icons that are more important than the menu link lane items. Current online CSS: .nav_btn--type-util */
|
|
322
|
-
export const menuitemutillabel =
|
|
796
|
+
export const menuitemutillabel = {
|
|
797
|
+
fontFamily: "AntennaExtraCond",
|
|
798
|
+
fontSize: "12px",
|
|
799
|
+
lineHeight: "12px",
|
|
800
|
+
letterSpacing: "0px",
|
|
801
|
+
fontStyle: "black italic",
|
|
802
|
+
textTransform: "upper",
|
|
803
|
+
};
|
|
323
804
|
|
|
324
805
|
|
|
325
806
|
// ============================================
|
|
@@ -327,11 +808,29 @@ export const menuitemutillabel = "[object Object]";
|
|
|
327
808
|
// ============================================
|
|
328
809
|
|
|
329
810
|
/** The vertical newsticker component has timestamps that use this text style. 16 - 16 - 16 - 18 */
|
|
330
|
-
export const newstickertimestamp =
|
|
811
|
+
export const newstickertimestamp = {
|
|
812
|
+
fontFamily: "AntennaExtraCond",
|
|
813
|
+
fontWeight: 700,
|
|
814
|
+
fontSize: "16px",
|
|
815
|
+
lineHeight: "20.799999237060547px",
|
|
816
|
+
letterSpacing: "0px",
|
|
817
|
+
};
|
|
331
818
|
/** This text style is a component level option for the newsticker kicker. Currently the newsticker kicker uses the semantic text style kicker3. This text style references the semantic one. */
|
|
332
|
-
export const newstickerkicker =
|
|
819
|
+
export const newstickerkicker = {
|
|
820
|
+
fontFamily: "AntennaExtraCond",
|
|
821
|
+
fontWeight: 700,
|
|
822
|
+
fontSize: "16px",
|
|
823
|
+
lineHeight: "17.600000381469727px",
|
|
824
|
+
letterSpacing: "0px",
|
|
825
|
+
};
|
|
333
826
|
/** This text style is used on NewsTicker Headlines. It references the semantic level text style headline3. 28 - 28 - 36 - 40 */
|
|
334
|
-
export const newstickerheadline =
|
|
827
|
+
export const newstickerheadline = {
|
|
828
|
+
fontFamily: "AntennaExtraCond",
|
|
829
|
+
fontSize: "30px",
|
|
830
|
+
lineHeight: "33px",
|
|
831
|
+
letterSpacing: "0px",
|
|
832
|
+
fontStyle: "bold italic",
|
|
833
|
+
};
|
|
335
834
|
|
|
336
835
|
|
|
337
836
|
// ============================================
|
|
@@ -339,7 +838,14 @@ export const newstickerheadline = "[object Object]";
|
|
|
339
838
|
// ============================================
|
|
340
839
|
|
|
341
840
|
/** This component level text style stores the variables for the pagination component's active state (label1 with red accent color underline). Its size remains constant at 17px across device sizes. */
|
|
342
|
-
export const numberedpaginationactive =
|
|
841
|
+
export const numberedpaginationactive = {
|
|
842
|
+
fontFamily: "AntennaExtraCond",
|
|
843
|
+
fontWeight: 700,
|
|
844
|
+
fontSize: "17px",
|
|
845
|
+
lineHeight: "20.399999618530273px",
|
|
846
|
+
letterSpacing: "0.25px",
|
|
847
|
+
textDecoration: "underline",
|
|
848
|
+
};
|
|
343
849
|
|
|
344
850
|
|
|
345
851
|
// ============================================
|
|
@@ -347,9 +853,21 @@ export const numberedpaginationactive = "[object Object]";
|
|
|
347
853
|
// ============================================
|
|
348
854
|
|
|
349
855
|
/** This text style is used for the paywall price tag text. */
|
|
350
|
-
export const paywallcardpricetag =
|
|
856
|
+
export const paywallcardpricetag = {
|
|
857
|
+
fontFamily: "AntennaCond",
|
|
858
|
+
fontWeight: 800,
|
|
859
|
+
fontSize: "64px",
|
|
860
|
+
lineHeight: "64px",
|
|
861
|
+
letterSpacing: "-0.5px",
|
|
862
|
+
};
|
|
351
863
|
/** This text style is used on the paywall card under the price value. */
|
|
352
|
-
export const paywallcardnote =
|
|
864
|
+
export const paywallcardnote = {
|
|
865
|
+
fontFamily: "AntennaCond",
|
|
866
|
+
fontWeight: 800,
|
|
867
|
+
fontSize: "40px",
|
|
868
|
+
lineHeight: "40px",
|
|
869
|
+
letterSpacing: "-0.5px",
|
|
870
|
+
};
|
|
353
871
|
|
|
354
872
|
|
|
355
873
|
// ============================================
|
|
@@ -357,7 +875,13 @@ export const paywallcardnote = "[object Object]";
|
|
|
357
875
|
// ============================================
|
|
358
876
|
|
|
359
877
|
/** Used on menu link lane items and on mobile side menu drawer. */
|
|
360
|
-
export const specianaviitemlabel =
|
|
878
|
+
export const specianaviitemlabel = {
|
|
879
|
+
fontFamily: "AntennaExtraCond",
|
|
880
|
+
fontSize: "18px",
|
|
881
|
+
lineHeight: "18px",
|
|
882
|
+
letterSpacing: "0px",
|
|
883
|
+
fontStyle: "black italic",
|
|
884
|
+
};
|
|
361
885
|
|
|
362
886
|
|
|
363
887
|
// ============================================
|
|
@@ -365,11 +889,28 @@ export const specianaviitemlabel = "[object Object]";
|
|
|
365
889
|
// ============================================
|
|
366
890
|
|
|
367
891
|
/** This text style stores variables for the tab component. Tabs are similar to submenus and special navigation elements but tabs do not link to other URLs. */
|
|
368
|
-
export const tablabel =
|
|
892
|
+
export const tablabel = {
|
|
893
|
+
fontFamily: "Gotham XNarrow",
|
|
894
|
+
fontWeight: 700,
|
|
895
|
+
fontSize: "16px",
|
|
896
|
+
textTransform: "upper",
|
|
897
|
+
};
|
|
369
898
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
|
|
370
|
-
export const appbottombarlabeldefault =
|
|
899
|
+
export const appbottombarlabeldefault = {
|
|
900
|
+
fontFamily: "Inter",
|
|
901
|
+
fontWeight: 400,
|
|
902
|
+
fontSize: "11px",
|
|
903
|
+
lineHeight: "14.399999618530273px",
|
|
904
|
+
letterSpacing: "0px",
|
|
905
|
+
};
|
|
371
906
|
/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
|
|
372
|
-
export const appbottombarlabelactive =
|
|
907
|
+
export const appbottombarlabelactive = {
|
|
908
|
+
fontFamily: "Inter",
|
|
909
|
+
fontWeight: 700,
|
|
910
|
+
fontSize: "11px",
|
|
911
|
+
lineHeight: "14.399999618530273px",
|
|
912
|
+
letterSpacing: "0px",
|
|
913
|
+
};
|
|
373
914
|
|
|
374
915
|
|
|
375
916
|
// ============================================
|
|
@@ -377,9 +918,21 @@ export const appbottombarlabelactive = "[object Object]";
|
|
|
377
918
|
// ============================================
|
|
378
919
|
|
|
379
920
|
/** 16 - 16 - 22 - 24 | This text style currently uses two different semantic styles within it, the kicker3 for XS & S, and kicker2 for MD & LG */
|
|
380
|
-
export const ateaserkicker =
|
|
921
|
+
export const ateaserkicker = {
|
|
922
|
+
fontFamily: "AntennaExtraCond",
|
|
923
|
+
fontSize: "16px",
|
|
924
|
+
lineHeight: "16px",
|
|
925
|
+
letterSpacing: "0px",
|
|
926
|
+
fontStyle: "black italic",
|
|
927
|
+
};
|
|
381
928
|
/** This text style references the semantic text styles headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
|
|
382
|
-
export const ateaserheadline =
|
|
929
|
+
export const ateaserheadline = {
|
|
930
|
+
fontFamily: "AntennaExtraCond",
|
|
931
|
+
fontSize: "30px",
|
|
932
|
+
lineHeight: "30px",
|
|
933
|
+
letterSpacing: "0px",
|
|
934
|
+
fontStyle: "bold italic",
|
|
935
|
+
};
|
|
383
936
|
|
|
384
937
|
|
|
385
938
|
// ============================================
|
|
@@ -387,10 +940,22 @@ export const ateaserheadline = "[object Object]";
|
|
|
387
940
|
// ============================================
|
|
388
941
|
|
|
389
942
|
/** This component level text style references size variables for the semantic level. Specifically kicker4. 14 - 14 - 16 - 16 */
|
|
390
|
-
export const mqteaserkicker =
|
|
943
|
+
export const mqteaserkicker = {
|
|
944
|
+
fontFamily: "AntennaExtraCond",
|
|
945
|
+
fontSize: "14px",
|
|
946
|
+
lineHeight: "15.399999618530273px",
|
|
947
|
+
letterSpacing: "0px",
|
|
948
|
+
fontStyle: "black italic",
|
|
949
|
+
};
|
|
391
950
|
/** This component level text style references the semantic level text sizes of headline3 and headline4.
|
|
392
951
|
XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
|
|
393
|
-
export const mqteaserheadline =
|
|
952
|
+
export const mqteaserheadline = {
|
|
953
|
+
fontFamily: "AntennaExtraCond",
|
|
954
|
+
fontSize: "21px",
|
|
955
|
+
lineHeight: "23.100000381469727px",
|
|
956
|
+
letterSpacing: "0px",
|
|
957
|
+
fontStyle: "bold italic",
|
|
958
|
+
};
|
|
394
959
|
|
|
395
960
|
|
|
396
961
|
// ============================================
|
|
@@ -398,7 +963,13 @@ export const mqteaserheadline = "[object Object]";
|
|
|
398
963
|
// ============================================
|
|
399
964
|
|
|
400
965
|
/** This component level text style is used on the quad teaser headline. Its font size parameter references the semantic level variable headline1. 48 - 48 - 72 - 100 */
|
|
401
|
-
export const qteaserheadline =
|
|
966
|
+
export const qteaserheadline = {
|
|
967
|
+
fontFamily: "AntennaExtraCond",
|
|
968
|
+
fontSize: "42px",
|
|
969
|
+
lineHeight: "42px",
|
|
970
|
+
letterSpacing: "0px",
|
|
971
|
+
fontStyle: "bold italic",
|
|
972
|
+
};
|
|
402
973
|
|
|
403
974
|
|
|
404
975
|
// ============================================
|
|
@@ -406,7 +977,13 @@ export const qteaserheadline = "[object Object]";
|
|
|
406
977
|
// ============================================
|
|
407
978
|
|
|
408
979
|
/** Standard teasers typography changes more than other teasers. On desktop they have a kicker, a headline and a short text. On mobile devices the short text is eliminated and the headline gains weight at device widths 600px. Then at small mobile sizes the weight drops once again. */
|
|
409
|
-
export const stdteaserheadline =
|
|
980
|
+
export const stdteaserheadline = {
|
|
981
|
+
fontFamily: "AntennaExtraCond",
|
|
982
|
+
fontSize: "21px",
|
|
983
|
+
lineHeight: "23.100000381469727px",
|
|
984
|
+
letterSpacing: "0px",
|
|
985
|
+
fontStyle: "bold italic",
|
|
986
|
+
};
|
|
410
987
|
|
|
411
988
|
|
|
412
989
|
// ============================================
|
|
@@ -414,26 +991,60 @@ export const stdteaserheadline = "[object Object]";
|
|
|
414
991
|
// ============================================
|
|
415
992
|
|
|
416
993
|
/** This text style is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
|
|
417
|
-
export const apptoogleitemlabel =
|
|
994
|
+
export const apptoogleitemlabel = {
|
|
995
|
+
fontFamily: "AntennaCond",
|
|
996
|
+
fontWeight: 800,
|
|
997
|
+
fontSize: "14px",
|
|
998
|
+
lineHeight: "14.100000381469727px",
|
|
999
|
+
letterSpacing: "0px",
|
|
1000
|
+
textTransform: "upper",
|
|
1001
|
+
};
|
|
418
1002
|
|
|
419
1003
|
|
|
420
1004
|
// ============================================
|
|
421
1005
|
// .DSDOCSSTYLES
|
|
422
1006
|
// ============================================
|
|
423
1007
|
|
|
424
|
-
export const pageheaderdescription =
|
|
1008
|
+
export const pageheaderdescription = {
|
|
1009
|
+
fontFamily: "Inter",
|
|
1010
|
+
fontWeight: 700,
|
|
1011
|
+
letterSpacing: "0px",
|
|
1012
|
+
};
|
|
425
1013
|
/** This text style is only used on the design system's documentation for code syntax snippets. */
|
|
426
|
-
export const codesnippets =
|
|
1014
|
+
export const codesnippets = {
|
|
1015
|
+
fontFamily: "Source Code Pro",
|
|
1016
|
+
fontSize: "10px",
|
|
1017
|
+
lineHeight: "13px",
|
|
1018
|
+
letterSpacing: "0px",
|
|
1019
|
+
};
|
|
427
1020
|
/** This text style is only used for mockup pages of the design system website. */
|
|
428
|
-
export const bilddesignsidemenu =
|
|
1021
|
+
export const bilddesignsidemenu = {
|
|
1022
|
+
fontFamily: "Gotham XNarrow",
|
|
1023
|
+
fontWeight: 400,
|
|
1024
|
+
};
|
|
429
1025
|
/** This text style is only used for mockup pages of the design system website. */
|
|
430
|
-
export const bilddesignsidemenuactive =
|
|
1026
|
+
export const bilddesignsidemenuactive = {
|
|
1027
|
+
fontFamily: "Gotham XNarrow",
|
|
1028
|
+
fontWeight: 400,
|
|
1029
|
+
textDecoration: "underline",
|
|
1030
|
+
};
|
|
431
1031
|
/** This text style is only used for mockup pages of the design system website. */
|
|
432
|
-
export const bilddesignsidemenuhover =
|
|
1032
|
+
export const bilddesignsidemenuhover = {
|
|
1033
|
+
fontFamily: "Gotham XNarrow",
|
|
1034
|
+
fontWeight: 600,
|
|
1035
|
+
};
|
|
433
1036
|
/** This text style is only used for mockups the vertical video component teaser headlines. */
|
|
434
|
-
export const verticalvideosmockheadlines =
|
|
1037
|
+
export const verticalvideosmockheadlines = {
|
|
1038
|
+
fontFamily: "Gotham Condensed",
|
|
1039
|
+
fontWeight: 600,
|
|
1040
|
+
fontSize: "22px",
|
|
1041
|
+
lineHeight: "22px",
|
|
1042
|
+
textDecoration: "underline",
|
|
1043
|
+
};
|
|
435
1044
|
/** This text style is used on documentation pages that contain some token information. */
|
|
436
|
-
export const tokenspecl =
|
|
1045
|
+
export const tokenspecl = {
|
|
1046
|
+
fontFamily: "Source Code Pro",
|
|
1047
|
+
};
|
|
437
1048
|
|
|
438
1049
|
|
|
439
1050
|
// ============================================
|
|
@@ -441,19 +1052,46 @@ export const tokenspecl = "[object Object]";
|
|
|
441
1052
|
// ============================================
|
|
442
1053
|
|
|
443
1054
|
/** This text style is only used for audit pages of the design system. */
|
|
444
|
-
export const specsxs =
|
|
1055
|
+
export const specsxs = {
|
|
1056
|
+
fontFamily: "Gotham",
|
|
1057
|
+
fontWeight: 400,
|
|
1058
|
+
};
|
|
445
1059
|
/** This text style is only used for audit pages of the design system. */
|
|
446
|
-
export const specss =
|
|
1060
|
+
export const specss = {
|
|
1061
|
+
fontFamily: "Gotham",
|
|
1062
|
+
};
|
|
447
1063
|
/** This text style is only used for audit pages of the design system. */
|
|
448
|
-
export const specsms =
|
|
1064
|
+
export const specsms = {
|
|
1065
|
+
fontFamily: "Gotham",
|
|
1066
|
+
};
|
|
449
1067
|
/** This text style is only used for audit pages of the design system. */
|
|
450
|
-
export const specsm =
|
|
1068
|
+
export const specsm = {
|
|
1069
|
+
fontFamily: "Gotham",
|
|
1070
|
+
};
|
|
451
1071
|
/** This text style is only used for audit pages of the design system. */
|
|
452
|
-
export const specsml =
|
|
1072
|
+
export const specsml = {
|
|
1073
|
+
fontFamily: "Gotham",
|
|
1074
|
+
fontWeight: 400,
|
|
1075
|
+
fontSize: "64px",
|
|
1076
|
+
lineHeight: "80px",
|
|
1077
|
+
textDecoration: "underline",
|
|
1078
|
+
};
|
|
453
1079
|
/** This text style is only used for audit pages of the design system. */
|
|
454
|
-
export const specsl =
|
|
1080
|
+
export const specsl = {
|
|
1081
|
+
fontFamily: "Gotham",
|
|
1082
|
+
fontWeight: 400,
|
|
1083
|
+
textDecoration: "underline",
|
|
1084
|
+
};
|
|
455
1085
|
/** This text style is only used for audit pages of the design system. */
|
|
456
|
-
export const specsxl =
|
|
1086
|
+
export const specsxl = {
|
|
1087
|
+
fontFamily: "Gotham",
|
|
1088
|
+
fontWeight: 600,
|
|
1089
|
+
textDecoration: "underline",
|
|
1090
|
+
};
|
|
457
1091
|
/** This text style is only used for audit pages of the design system. */
|
|
458
|
-
export const specsxxl =
|
|
1092
|
+
export const specsxxl = {
|
|
1093
|
+
fontFamily: "Gotham",
|
|
1094
|
+
fontWeight: 600,
|
|
1095
|
+
textDecoration: "underline",
|
|
1096
|
+
};
|
|
459
1097
|
|