@marioschmidt/design-system-tokens 1.0.23 → 1.0.24
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/android/brands/advertorial/sizeclass-compact/typography_styles.xml +430 -430
- package/dist/android/brands/advertorial/sizeclass-regular/typography_styles.xml +431 -431
- package/dist/android/brands/bild/sizeclass-compact/typography_styles.xml +436 -436
- package/dist/android/brands/bild/sizeclass-regular/typography_styles.xml +434 -434
- package/dist/android/brands/sportbild/sizeclass-compact/typography_styles.xml +442 -442
- package/dist/android/brands/sportbild/sizeclass-regular/typography_styles.xml +442 -442
- 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 +494 -494
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.css +773 -773
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
- package/dist/css/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
- package/dist/css/brands/advertorial/semantic/effects/effects-dark.css +23 -23
- package/dist/css/brands/advertorial/semantic/effects/effects-light.css +23 -23
- package/dist/css/brands/advertorial/semantic/typography/typography-lg.css +626 -626
- package/dist/css/brands/advertorial/semantic/typography/typography-md.css +627 -627
- package/dist/css/brands/advertorial/semantic/typography/typography-sm.css +624 -624
- package/dist/css/brands/advertorial/semantic/typography/typography-xs.css +624 -624
- 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 +140 -140
- package/dist/css/brands/bild/overrides/brandtokenmapping.css +494 -494
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-md-600px.css +773 -773
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
- package/dist/css/brands/bild/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
- package/dist/css/brands/bild/semantic/color/colormode-dark.css +385 -385
- package/dist/css/brands/bild/semantic/color/colormode-light.css +385 -385
- package/dist/css/brands/bild/semantic/effects/effects-dark.css +23 -23
- package/dist/css/brands/bild/semantic/effects/effects-light.css +23 -23
- package/dist/css/brands/bild/semantic/typography/typography-lg.css +637 -637
- package/dist/css/brands/bild/semantic/typography/typography-md.css +632 -632
- package/dist/css/brands/bild/semantic/typography/typography-sm.css +632 -632
- package/dist/css/brands/bild/semantic/typography/typography-xs.css +633 -633
- 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 +140 -140
- package/dist/css/brands/sportbild/overrides/brandtokenmapping.css +494 -494
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.css +773 -773
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.css +773 -773
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.css +773 -773
- package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.css +773 -773
- package/dist/css/brands/sportbild/semantic/color/colormode-dark.css +385 -385
- package/dist/css/brands/sportbild/semantic/color/colormode-light.css +385 -385
- package/dist/css/brands/sportbild/semantic/effects/effects-dark.css +23 -23
- package/dist/css/brands/sportbild/semantic/effects/effects-light.css +23 -23
- package/dist/css/brands/sportbild/semantic/typography/typography-lg.css +632 -632
- package/dist/css/brands/sportbild/semantic/typography/typography-md.css +631 -631
- package/dist/css/brands/sportbild/semantic/typography/typography-sm.css +631 -631
- package/dist/css/brands/sportbild/semantic/typography/typography-xs.css +631 -631
- package/dist/css/shared/colorprimitive.css +97 -97
- package/dist/css/shared/fontprimitive.css +22 -22
- package/dist/css/shared/sizeprimitive.css +1 -1
- package/dist/css/shared/spaceprimitive.css +1 -1
- package/dist/flutter/brands/advertorial/overrides/brandtokenmapping.dart +291 -291
- package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
- package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
- package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
- package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
- package/dist/flutter/brands/bild/overrides/brandcolormapping.dart +91 -91
- package/dist/flutter/brands/bild/overrides/brandtokenmapping.dart +291 -291
- package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
- package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
- package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
- package/dist/flutter/brands/bild/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
- package/dist/flutter/brands/bild/semantic/color/colormode-dark.dart +389 -389
- package/dist/flutter/brands/bild/semantic/color/colormode-light.dart +389 -389
- package/dist/flutter/brands/sportbild/overrides/brandcolormapping.dart +91 -91
- package/dist/flutter/brands/sportbild/overrides/brandtokenmapping.dart +291 -291
- package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.dart +635 -635
- package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.dart +635 -635
- package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.dart +635 -635
- package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.dart +635 -635
- package/dist/flutter/brands/sportbild/semantic/color/colormode-dark.dart +389 -389
- package/dist/flutter/brands/sportbild/semantic/color/colormode-light.dart +389 -389
- package/dist/flutter/shared/colorprimitive.dart +82 -82
- package/dist/flutter/shared/fontprimitive.dart +21 -21
- package/dist/ios/brands/advertorial/overrides/Brandtokenmapping.swift +291 -291
- package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
- package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointMd600px.swift +635 -635
- package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
- package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointXs320px.swift +635 -635
- package/dist/ios/brands/advertorial/sizeclass-compact/Typography.swift +200 -200
- package/dist/ios/brands/advertorial/sizeclass-regular/Typography.swift +200 -200
- package/dist/ios/brands/bild/overrides/Brandcolormapping.swift +91 -91
- package/dist/ios/brands/bild/overrides/Brandtokenmapping.swift +291 -291
- package/dist/ios/brands/bild/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
- package/dist/ios/brands/bild/semantic/breakpoints/BreakpointMd600px.swift +635 -635
- package/dist/ios/brands/bild/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
- package/dist/ios/brands/bild/semantic/breakpoints/BreakpointXs320px.swift +635 -635
- package/dist/ios/brands/bild/semantic/color/ColormodeDark.swift +389 -389
- package/dist/ios/brands/bild/semantic/color/ColormodeLight.swift +389 -389
- package/dist/ios/brands/bild/sizeclass-compact/Typography.swift +200 -200
- package/dist/ios/brands/bild/sizeclass-regular/Typography.swift +200 -200
- package/dist/ios/brands/sportbild/overrides/Brandcolormapping.swift +91 -91
- package/dist/ios/brands/sportbild/overrides/Brandtokenmapping.swift +291 -291
- package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointLg1024pxRegular.swift +635 -635
- package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointMd600px.swift +635 -635
- package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointSm390pxCompact.swift +635 -635
- package/dist/ios/brands/sportbild/semantic/breakpoints/BreakpointXs320px.swift +635 -635
- package/dist/ios/brands/sportbild/semantic/color/ColormodeDark.swift +389 -389
- package/dist/ios/brands/sportbild/semantic/color/ColormodeLight.swift +389 -389
- package/dist/ios/brands/sportbild/sizeclass-compact/Typography.swift +200 -200
- package/dist/ios/brands/sportbild/sizeclass-regular/Typography.swift +200 -200
- package/dist/ios/shared/Colorprimitive.swift +82 -82
- package/dist/ios/shared/Fontprimitive.swift +21 -21
- 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 +292 -292
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.js +636 -636
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
- package/dist/js/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
- package/dist/js/brands/advertorial/semantic/effects/effects-dark.js +13 -13
- package/dist/js/brands/advertorial/semantic/effects/effects-light.js +13 -13
- package/dist/js/brands/advertorial/semantic/typography/typography-lg.js +210 -210
- package/dist/js/brands/advertorial/semantic/typography/typography-md.js +210 -210
- package/dist/js/brands/advertorial/semantic/typography/typography-sm.js +210 -210
- package/dist/js/brands/advertorial/semantic/typography/typography-xs.js +210 -210
- 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 +92 -92
- package/dist/js/brands/bild/overrides/brandtokenmapping.js +292 -292
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-md-600px.js +636 -636
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
- package/dist/js/brands/bild/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
- package/dist/js/brands/bild/semantic/color/colormode-dark.js +390 -390
- package/dist/js/brands/bild/semantic/color/colormode-light.js +390 -390
- package/dist/js/brands/bild/semantic/effects/effects-dark.js +13 -13
- package/dist/js/brands/bild/semantic/effects/effects-light.js +13 -13
- package/dist/js/brands/bild/semantic/typography/typography-lg.js +210 -210
- package/dist/js/brands/bild/semantic/typography/typography-md.js +210 -210
- package/dist/js/brands/bild/semantic/typography/typography-sm.js +210 -210
- package/dist/js/brands/bild/semantic/typography/typography-xs.js +210 -210
- 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 +92 -92
- package/dist/js/brands/sportbild/overrides/brandtokenmapping.js +292 -292
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.js +636 -636
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.js +636 -636
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.js +636 -636
- package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.js +636 -636
- package/dist/js/brands/sportbild/semantic/color/colormode-dark.js +390 -390
- package/dist/js/brands/sportbild/semantic/color/colormode-light.js +390 -390
- package/dist/js/brands/sportbild/semantic/effects/effects-dark.js +13 -13
- package/dist/js/brands/sportbild/semantic/effects/effects-light.js +13 -13
- package/dist/js/brands/sportbild/semantic/typography/typography-lg.js +210 -210
- package/dist/js/brands/sportbild/semantic/typography/typography-md.js +210 -210
- package/dist/js/brands/sportbild/semantic/typography/typography-sm.js +210 -210
- package/dist/js/brands/sportbild/semantic/typography/typography-xs.js +210 -210
- package/dist/js/shared/colorprimitive.js +83 -83
- package/dist/js/shared/fontprimitive.js +22 -22
- 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 +292 -292
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
- package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
- package/dist/scss/brands/advertorial/semantic/effects/effects-dark.scss +13 -13
- package/dist/scss/brands/advertorial/semantic/effects/effects-light.scss +13 -13
- package/dist/scss/brands/advertorial/semantic/typography/typography-lg.scss +210 -210
- package/dist/scss/brands/advertorial/semantic/typography/typography-md.scss +210 -210
- package/dist/scss/brands/advertorial/semantic/typography/typography-sm.scss +210 -210
- package/dist/scss/brands/advertorial/semantic/typography/typography-xs.scss +210 -210
- 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 +92 -92
- package/dist/scss/brands/bild/overrides/brandtokenmapping.scss +292 -292
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
- package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
- package/dist/scss/brands/bild/semantic/color/colormode-dark.scss +390 -390
- package/dist/scss/brands/bild/semantic/color/colormode-light.scss +390 -390
- package/dist/scss/brands/bild/semantic/effects/effects-dark.scss +13 -13
- package/dist/scss/brands/bild/semantic/effects/effects-light.scss +13 -13
- package/dist/scss/brands/bild/semantic/typography/typography-lg.scss +210 -210
- package/dist/scss/brands/bild/semantic/typography/typography-md.scss +210 -210
- package/dist/scss/brands/bild/semantic/typography/typography-sm.scss +210 -210
- package/dist/scss/brands/bild/semantic/typography/typography-xs.scss +210 -210
- 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 +92 -92
- package/dist/scss/brands/sportbild/overrides/brandtokenmapping.scss +292 -292
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-lg-1024px-regular.scss +636 -636
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.scss +636 -636
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-sm-390px-compact.scss +636 -636
- package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.scss +636 -636
- package/dist/scss/brands/sportbild/semantic/color/colormode-dark.scss +390 -390
- package/dist/scss/brands/sportbild/semantic/color/colormode-light.scss +390 -390
- package/dist/scss/brands/sportbild/semantic/effects/effects-dark.scss +13 -13
- package/dist/scss/brands/sportbild/semantic/effects/effects-light.scss +13 -13
- package/dist/scss/brands/sportbild/semantic/typography/typography-lg.scss +210 -210
- package/dist/scss/brands/sportbild/semantic/typography/typography-md.scss +210 -210
- package/dist/scss/brands/sportbild/semantic/typography/typography-sm.scss +210 -210
- package/dist/scss/brands/sportbild/semantic/typography/typography-xs.scss +210 -210
- package/dist/scss/shared/colorprimitive.scss +83 -83
- package/dist/scss/shared/fontprimitive.scss +22 -22
- package/dist/scss/shared/sizeprimitive.scss +1 -1
- package/dist/scss/shared/spaceprimitive.scss +1 -1
- package/package.json +1 -1
|
@@ -1,99 +1,13 @@
|
|
|
1
1
|
//
|
|
2
2
|
// brandcolormapping.scss
|
|
3
|
-
// Generiert am: 2025-11-24T21:
|
|
3
|
+
// Generiert am: 2025-11-24T21:40:50.060Z
|
|
4
4
|
// Nicht manuell bearbeiten!
|
|
5
5
|
//
|
|
6
6
|
|
|
7
|
-
// ============================================
|
|
8
|
-
// COMPONENT
|
|
9
|
-
// ============================================
|
|
10
|
-
|
|
11
|
-
$chip-color-active: #DD0000;
|
|
12
|
-
|
|
13
|
-
// Component - Avatar
|
|
14
|
-
// 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045
|
|
15
|
-
$avatar-label-color: #232629;
|
|
16
|
-
// 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093
|
|
17
|
-
$avatar-label-color-dark: #FFFFFF;
|
|
18
|
-
// This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029
|
|
19
|
-
$avatar-label-color-hover: #DD0000;
|
|
20
|
-
|
|
21
|
-
// Component - BreakingNews
|
|
22
|
-
// This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015
|
|
23
|
-
$breaking-news-text-content-color: #FFFFFF;
|
|
24
|
-
// This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081
|
|
25
|
-
$breaking-news-surface-color: #232629;
|
|
26
|
-
// This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016
|
|
27
|
-
$breaking-news-title-surface-color: #FD8227;
|
|
28
|
-
// This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081
|
|
29
|
-
$breaking-news-top-title-text-color: #1C1C1C;
|
|
30
|
-
// This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode. Bild: 093 ; SpoBi: 081
|
|
31
|
-
$breaking-news-surface-color-dark: #E9ECEF;
|
|
32
|
-
// This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015
|
|
33
|
-
$breaking-news-text-content-color-dark: #232629;
|
|
34
|
-
// This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100
|
|
35
|
-
$breaking-news-bottom-title-text-color: #1C1C1C;
|
|
36
|
-
|
|
37
|
-
// Component - Button - PrimaryBrand
|
|
38
|
-
// Bild: 046 ; SpoBi: 029
|
|
39
|
-
$primary-brand-button-primary-bg-color-idle: #DD0000;
|
|
40
|
-
// This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038
|
|
41
|
-
$primary-brand-button-primary-bg-color-idle-dark: #DD0000;
|
|
42
|
-
// Bild: 035 ; SpoBi: 016
|
|
43
|
-
$primary-brand-button-primary-bg-color-hover: #AF0002;
|
|
44
|
-
// This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029
|
|
45
|
-
$primary-brand-button-primary-bg-color-hover-dark: #AF0002;
|
|
46
|
-
|
|
47
|
-
// Component - Button - PrimaryNeutral
|
|
48
|
-
// Bild & SpoBi: Tone 015
|
|
49
|
-
$primary-neutral-button-primary-bg-color-idle: #232629;
|
|
50
|
-
// Bild & SpoBi: Tone 035
|
|
51
|
-
$primary-neutral-button-primary-bg-color-hover: #4B525A;
|
|
52
|
-
// Bild & SpoBi: Tone 100
|
|
53
|
-
$primary-neutral-button-primary-bg-color-idle-dark: #FFFFFF;
|
|
54
|
-
// Bild: 093 ; SpoBi: 081
|
|
55
|
-
$primary-neutral-button-primary-bg-color-hover-dark: #E9ECEF;
|
|
56
|
-
|
|
57
|
-
// Component - Menu
|
|
58
|
-
// This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component.
|
|
59
|
-
$menu-link-lane-surface-color: #FFFFFF;
|
|
60
|
-
// This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component.
|
|
61
|
-
$menu-link-lane-label-color: #4B525A;
|
|
62
|
-
$menu-link-lane-label-color-dark: #8C9196;
|
|
63
|
-
// This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component on Dark mode.
|
|
64
|
-
$menu-link-lane-surface-color-dark: #232629;
|
|
65
|
-
$menu-link-color-border-active: #DD0000;
|
|
66
|
-
$menu-link-color-border-active-dark: #FFFFFF;
|
|
67
|
-
// This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component.
|
|
68
|
-
$menu-link-lane-label-color-active: #232629;
|
|
69
|
-
$app-top-bar-surface-color: #FFFFFF;
|
|
70
|
-
$app-top-bar-bg-color-dark: #343C41;
|
|
71
|
-
$app-bottom-tab-bar-bg-color: #FFFFFF;
|
|
72
|
-
$app-bottom-tab-bar-bg-dark: #343C41;
|
|
73
|
-
$app-top-bar-icon-color: #4B525A;
|
|
74
|
-
$app-top-bar-icon-color-dark: #8C9196;
|
|
75
|
-
$app-top-bar-text-color: #232629;
|
|
76
|
-
$app-top-bar-text-color-dark: #E9ECEF;
|
|
77
|
-
$app-tob-bar-tab-nav-bottom-border: #E9ECEF;
|
|
78
|
-
$app-tob-bar-tab-nav-bottom-border-dark: #4B525A;
|
|
79
|
-
$app-tob-bar-tab-nav-bottom-border-active: #DD0000;
|
|
80
|
-
$app-tob-bar-tab-nav-bottom-border-active-dark: #FFFFFF;
|
|
81
|
-
|
|
82
|
-
// Component - Teaser
|
|
83
|
-
$teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
|
|
84
|
-
$teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);
|
|
85
|
-
|
|
86
|
-
|
|
87
7
|
// ============================================
|
|
88
8
|
// GLOBAL
|
|
89
9
|
// ============================================
|
|
90
10
|
|
|
91
|
-
// Global - Attention
|
|
92
|
-
// Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers.
|
|
93
|
-
$accent-color-primary: #DD0000;
|
|
94
|
-
// Bild: 100 ; SpoBi: 098
|
|
95
|
-
$accent-color-primary-dark: #FFFFFF;
|
|
96
|
-
|
|
97
11
|
// Global - Core
|
|
98
12
|
// Bild: 046; SpoBi: 016 current css calls this variable main tenant color
|
|
99
13
|
$core-color-primary: #DD0000;
|
|
@@ -106,11 +20,11 @@ $core-color-tertiary: #232629;
|
|
|
106
20
|
// Bild&SpoBi: 100
|
|
107
21
|
$core-color-tertiary-dark: #FFFFFF;
|
|
108
22
|
|
|
109
|
-
// Global -
|
|
110
|
-
// Bild: 046 ; SpoBi:
|
|
111
|
-
$color-primary
|
|
112
|
-
// Bild:
|
|
113
|
-
$color-primary-
|
|
23
|
+
// Global - Attention
|
|
24
|
+
// Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers.
|
|
25
|
+
$accent-color-primary: #DD0000;
|
|
26
|
+
// Bild: 100 ; SpoBi: 098
|
|
27
|
+
$accent-color-primary-dark: #FFFFFF;
|
|
114
28
|
|
|
115
29
|
// Global - Surface
|
|
116
30
|
// Bild: 100 ; SpoBi: 100
|
|
@@ -130,6 +44,12 @@ $surface-color-quartenary: #CED4DA;
|
|
|
130
44
|
// Bild: 035 ; SpoBi: 035
|
|
131
45
|
$surface-color-quartenary-dark: #4B525A;
|
|
132
46
|
|
|
47
|
+
// Global - State
|
|
48
|
+
// Bild: 046 ; SpoBi: 029
|
|
49
|
+
$color-primary-active: #DD0000;
|
|
50
|
+
// Bild: 046 ; SpoBi: 098
|
|
51
|
+
$color-primary-active-dark: #DD0000;
|
|
52
|
+
|
|
133
53
|
// Global - Text
|
|
134
54
|
// Bild & SpoBi: Tone 015
|
|
135
55
|
$text-color-primary: #232629;
|
|
@@ -154,3 +74,83 @@ $kicker-bg-color-on-surface: #DD0000;
|
|
|
154
74
|
// Use this variable for the dark mode color of the background immediately around the kicker text element. Bild: 060 ; SpoBi: 060
|
|
155
75
|
$kicker-bg-color-on-surface-dark: #8C9196;
|
|
156
76
|
|
|
77
|
+
|
|
78
|
+
// ============================================
|
|
79
|
+
// COMPONENT
|
|
80
|
+
// ============================================
|
|
81
|
+
|
|
82
|
+
// Component - Button - PrimaryNeutral
|
|
83
|
+
// Bild & SpoBi: Tone 015
|
|
84
|
+
$primary-neutral-button-primary-bg-color-idle: #232629;
|
|
85
|
+
// Bild & SpoBi: Tone 035
|
|
86
|
+
$primary-neutral-button-primary-bg-color-hover: #4B525A;
|
|
87
|
+
// Bild & SpoBi: Tone 100
|
|
88
|
+
$primary-neutral-button-primary-bg-color-idle-dark: #FFFFFF;
|
|
89
|
+
// Bild: 093 ; SpoBi: 081
|
|
90
|
+
$primary-neutral-button-primary-bg-color-hover-dark: #E9ECEF;
|
|
91
|
+
|
|
92
|
+
// Component - Button - PrimaryBrand
|
|
93
|
+
// Bild: 046 ; SpoBi: 029
|
|
94
|
+
$primary-brand-button-primary-bg-color-idle: #DD0000;
|
|
95
|
+
// This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038
|
|
96
|
+
$primary-brand-button-primary-bg-color-idle-dark: #DD0000;
|
|
97
|
+
// Bild: 035 ; SpoBi: 016
|
|
98
|
+
$primary-brand-button-primary-bg-color-hover: #AF0002;
|
|
99
|
+
// This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029
|
|
100
|
+
$primary-brand-button-primary-bg-color-hover-dark: #AF0002;
|
|
101
|
+
|
|
102
|
+
// Component - BreakingNews
|
|
103
|
+
// This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015
|
|
104
|
+
$breaking-news-text-content-color: #FFFFFF;
|
|
105
|
+
// This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081
|
|
106
|
+
$breaking-news-surface-color: #232629;
|
|
107
|
+
// This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016
|
|
108
|
+
$breaking-news-title-surface-color: #FD8227;
|
|
109
|
+
// This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081
|
|
110
|
+
$breaking-news-top-title-text-color: #1C1C1C;
|
|
111
|
+
// This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode. Bild: 093 ; SpoBi: 081
|
|
112
|
+
$breaking-news-surface-color-dark: #E9ECEF;
|
|
113
|
+
// This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015
|
|
114
|
+
$breaking-news-text-content-color-dark: #232629;
|
|
115
|
+
// This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100
|
|
116
|
+
$breaking-news-bottom-title-text-color: #1C1C1C;
|
|
117
|
+
|
|
118
|
+
// Component - Teaser
|
|
119
|
+
$teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
|
|
120
|
+
$teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);
|
|
121
|
+
|
|
122
|
+
// Component - Menu
|
|
123
|
+
// This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component.
|
|
124
|
+
$menu-link-lane-surface-color: #FFFFFF;
|
|
125
|
+
// This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component.
|
|
126
|
+
$menu-link-lane-label-color: #4B525A;
|
|
127
|
+
$menu-link-lane-label-color-dark: #8C9196;
|
|
128
|
+
// This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component on Dark mode.
|
|
129
|
+
$menu-link-lane-surface-color-dark: #232629;
|
|
130
|
+
$menu-link-color-border-active: #DD0000;
|
|
131
|
+
$menu-link-color-border-active-dark: #FFFFFF;
|
|
132
|
+
// This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component.
|
|
133
|
+
$menu-link-lane-label-color-active: #232629;
|
|
134
|
+
$app-top-bar-surface-color: #FFFFFF;
|
|
135
|
+
$app-top-bar-bg-color-dark: #343C41;
|
|
136
|
+
$app-bottom-tab-bar-bg-color: #FFFFFF;
|
|
137
|
+
$app-bottom-tab-bar-bg-dark: #343C41;
|
|
138
|
+
$app-top-bar-icon-color: #4B525A;
|
|
139
|
+
$app-top-bar-icon-color-dark: #8C9196;
|
|
140
|
+
$app-top-bar-text-color: #232629;
|
|
141
|
+
$app-top-bar-text-color-dark: #E9ECEF;
|
|
142
|
+
$app-tob-bar-tab-nav-bottom-border: #E9ECEF;
|
|
143
|
+
$app-tob-bar-tab-nav-bottom-border-dark: #4B525A;
|
|
144
|
+
$app-tob-bar-tab-nav-bottom-border-active: #DD0000;
|
|
145
|
+
$app-tob-bar-tab-nav-bottom-border-active-dark: #FFFFFF;
|
|
146
|
+
|
|
147
|
+
// Component - Avatar
|
|
148
|
+
// 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045
|
|
149
|
+
$avatar-label-color: #232629;
|
|
150
|
+
// 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093
|
|
151
|
+
$avatar-label-color-dark: #FFFFFF;
|
|
152
|
+
// This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029
|
|
153
|
+
$avatar-label-color-hover: #DD0000;
|
|
154
|
+
|
|
155
|
+
$chip-color-active: #DD0000;
|
|
156
|
+
|