@kickstartds/ds-agency-premium 1.6.71--canary.45.1950.0 → 1.6.71--canary.1954.71f9342.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/dist/{BlogOverviewProps-21d04028.d.ts → BlogOverviewProps-9f207f1c.d.ts} +2 -2
  2. package/dist/BlogPostProps-c760fd2a.d.ts +1 -1
  3. package/dist/{PageProps-21d04028.d.ts → PageProps-aa29c554.d.ts} +1 -1
  4. package/dist/{SectionProps-00ddee3a.d.ts → SectionProps-2fd5dbde.d.ts} +2 -2
  5. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +3 -1
  6. package/dist/components/blog-overview/index.d.ts +1 -1
  7. package/dist/components/blog-post/blog-post.schema.dereffed.json +3 -1
  8. package/dist/components/blog-teaser/index.d.ts +1 -1
  9. package/dist/components/button/button.css +2 -2
  10. package/dist/components/footer/footer.css +3 -3
  11. package/dist/components/footer/footer.schema.dereffed.json +20 -12
  12. package/dist/components/header/header.schema.dereffed.json +20 -12
  13. package/dist/components/headline/headline.css +44 -2
  14. package/dist/components/hero/hero.css +22 -0
  15. package/dist/components/image-story/index.d.ts +1 -1
  16. package/dist/components/index/index.d.ts +2 -2
  17. package/dist/components/nav-dropdown/nav-dropdown.css +3 -3
  18. package/dist/components/nav-flyout/nav-flyout.schema.dereffed.json +20 -12
  19. package/dist/components/nav-main/nav-main.schema.dereffed.json +20 -12
  20. package/dist/components/nav-main/nav-main.schema.json +20 -12
  21. package/dist/components/nav-topbar/nav-topbar.css +3 -3
  22. package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json +20 -12
  23. package/dist/components/page/index.d.ts +1 -1
  24. package/dist/components/page/page.schema.dereffed.json +3 -1
  25. package/dist/components/page-wrapper/index.js +6 -0
  26. package/dist/components/page-wrapper/tokens.css +251 -251
  27. package/dist/components/presets.json +42 -26
  28. package/dist/components/section/index.d.ts +1 -1
  29. package/dist/components/section/index.js +3 -1
  30. package/dist/components/section/section.css +60 -19
  31. package/dist/components/section/section.schema.dereffed.json +3 -1
  32. package/dist/components/section/section.schema.json +1 -1
  33. package/dist/components/settings/settings.schema.dereffed.json +40 -24
  34. package/dist/components/split-even/index.d.ts +1 -1
  35. package/dist/components/split-weighted/index.d.ts +1 -1
  36. package/dist/components/stats/stats.css +4 -4
  37. package/dist/components/teaser-card/teaser-card.css +9 -11
  38. package/dist/global.css +2 -2
  39. package/dist/static/favicon/android-chrome-192x192.png +0 -0
  40. package/dist/static/favicon/android-chrome-512x512.png +0 -0
  41. package/dist/static/favicon/apple-touch-icon.png +0 -0
  42. package/dist/static/favicon/favicon-16x16.png +0 -0
  43. package/dist/static/favicon/favicon-32x32.png +0 -0
  44. package/dist/static/favicon/favicon.ico +0 -0
  45. package/dist/static/favicon/site.webmanifest +1 -19
  46. package/dist/static/guenther/brands/cadillac.png +0 -0
  47. package/dist/static/guenther/brands/corvette.png +0 -0
  48. package/dist/static/guenther/brands/infiniti.png +0 -0
  49. package/dist/static/guenther/brands/isuzu.png +0 -0
  50. package/dist/static/guenther/brands/kia.png +0 -0
  51. package/dist/static/guenther/brands/maserati.png +0 -0
  52. package/dist/static/guenther/brands/micro.png +0 -0
  53. package/dist/static/guenther/brands/msg.png +0 -0
  54. package/dist/static/guenther/brands/nissan.png +0 -0
  55. package/dist/static/guenther/brands/saab.png +0 -0
  56. package/dist/static/guenther/brands/subaru.png +0 -0
  57. package/dist/static/guenther/car-1.webp +0 -0
  58. package/dist/static/guenther/car-2.webp +0 -0
  59. package/dist/static/guenther/car-cutout-1.avif +0 -0
  60. package/dist/static/guenther/car-cutout-2.avif +0 -0
  61. package/dist/static/guenther/car-cutout-3.png +0 -0
  62. package/dist/static/guenther/car-red.png +0 -0
  63. package/dist/static/guenther/car-store.png +0 -0
  64. package/dist/static/guenther/car-yellow.webp +0 -0
  65. package/dist/static/guenther/contact.jpg +0 -0
  66. package/dist/static/guenther/header-2.png +0 -0
  67. package/dist/static/guenther/header.jpg +0 -0
  68. package/dist/static/guenther/header.png +0 -0
  69. package/dist/static/guenther/kia-header.webp +0 -0
  70. package/dist/static/guenther/visual.png +0 -0
  71. package/dist/static/logo-inverted.svg +27 -12
  72. package/dist/static/logo.svg +27 -12
  73. package/dist/tokens/IconSprite.js +6 -0
  74. package/dist/tokens/icon-sprite.html +2 -0
  75. package/dist/tokens/themes.css +4 -4
  76. package/dist/tokens/tokens.css +251 -251
  77. package/dist/tokens/tokens.js +377 -376
  78. package/package.json +1 -1
  79. package/dist/static/favicon/browserconfig.xml +0 -9
  80. package/dist/static/favicon/favicon-192-192.png +0 -20
  81. package/dist/static/favicon/mstile-144x144.png +0 -0
  82. package/dist/static/favicon/mstile-150x150.png +0 -0
  83. package/dist/static/favicon/mstile-310x150.png +0 -0
  84. package/dist/static/favicon/mstile-310x310.png +0 -0
  85. package/dist/static/favicon/mstile-70x70.png +0 -0
  86. package/dist/static/favicon/safari-pinned-tab.svg +0 -30
  87. /package/dist/{BlogTeaserProps-f5855e93.d.ts → BlogTeaserProps-d62a0a9a.d.ts} +0 -0
  88. /package/dist/{ImageStoryProps-00ddee3a.d.ts → ImageStoryProps-e853e1e7.d.ts} +0 -0
@@ -2692,7 +2692,7 @@
2692
2692
  "id": "layout-footer--footer",
2693
2693
  "group": "Layout/Footer",
2694
2694
  "name": "Footer",
2695
- "code": "<Footer\n byline=\"© 2024 systemics Inc. All rights reserved.\"\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n inverted: false,\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'Navigation Item',\n url: '#'\n },\n {\n items: [\n {\n label: 'Level 2 Item',\n url: '#'\n },\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'An Item with a longer Label',\n url: '#'\n },\n {\n label: 'And One last one',\n url: '#'\n }\n ],\n label: 'Dropdown',\n url: '#'\n },\n {\n label: 'One more Item',\n url: '#'\n },\n {\n label: 'Last Item',\n url: '#'\n }\n ]}\n/>",
2695
+ "code": "<Footer\n byline=\"© 2024 systemics Inc. All rights reserved.\"\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n inverted: false,\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Fahrzeugsuche',\n url: '#'\n },\n {\n items: [\n {\n label: 'Nissan',\n url: '#'\n },\n {\n active: true,\n label: 'Kia',\n url: '#'\n },\n {\n label: 'Maserati',\n url: '#'\n },\n {\n label: 'Corvette',\n url: '#'\n }\n ],\n label: 'Marken',\n url: '#'\n },\n {\n label: 'Standorte',\n url: '#'\n },\n {\n label: 'Bonusprogramm',\n url: '#'\n },\n {\n label: 'News',\n url: '#'\n },\n {\n label: 'Jobs',\n url: '#'\n },\n {\n label: 'Kontakt',\n url: '#'\n }\n ]}\n/>",
2696
2696
  "args": {
2697
2697
  "logo": {
2698
2698
  "src": "/logo.svg",
@@ -2708,43 +2708,51 @@
2708
2708
  "navItems": [
2709
2709
  {
2710
2710
  "url": "#",
2711
- "label": "Active Item",
2711
+ "label": "Fahrzeugsuche",
2712
2712
  "active": true
2713
2713
  },
2714
2714
  {
2715
2715
  "url": "#",
2716
- "label": "Navigation Item"
2717
- },
2718
- {
2719
- "url": "#",
2720
- "label": "Dropdown",
2716
+ "label": "Marken",
2721
2717
  "items": [
2722
2718
  {
2723
2719
  "url": "#",
2724
- "label": "Level 2 Item"
2720
+ "label": "Nissan"
2725
2721
  },
2726
2722
  {
2727
2723
  "url": "#",
2728
- "label": "Active Item",
2724
+ "label": "Kia",
2729
2725
  "active": true
2730
2726
  },
2731
2727
  {
2732
2728
  "url": "#",
2733
- "label": "An Item with a longer Label"
2729
+ "label": "Maserati"
2734
2730
  },
2735
2731
  {
2736
2732
  "url": "#",
2737
- "label": "And One last one"
2733
+ "label": "Corvette"
2738
2734
  }
2739
2735
  ]
2740
2736
  },
2741
2737
  {
2742
2738
  "url": "#",
2743
- "label": "One more Item"
2739
+ "label": "Standorte"
2740
+ },
2741
+ {
2742
+ "url": "#",
2743
+ "label": "Bonusprogramm"
2744
+ },
2745
+ {
2746
+ "url": "#",
2747
+ "label": "News"
2748
+ },
2749
+ {
2750
+ "url": "#",
2751
+ "label": "Jobs"
2744
2752
  },
2745
2753
  {
2746
2754
  "url": "#",
2747
- "label": "Last Item"
2755
+ "label": "Kontakt"
2748
2756
  }
2749
2757
  ]
2750
2758
  },
@@ -2925,7 +2933,7 @@
2925
2933
  "id": "layout-header--header",
2926
2934
  "group": "Layout/Header",
2927
2935
  "name": "Header",
2928
- "code": "<Header\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'Navigation Item',\n url: '#'\n },\n {\n items: [\n {\n label: 'Level 2 Item',\n url: '#'\n },\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'An Item with a longer Label',\n url: '#'\n },\n {\n label: 'And One last one',\n url: '#'\n }\n ],\n label: 'Dropdown',\n url: '#'\n },\n {\n label: 'One more Item',\n url: '#'\n },\n {\n label: 'Last Item',\n url: '#'\n }\n ]}\n/>",
2936
+ "code": "<Header\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Fahrzeugsuche',\n url: '#'\n },\n {\n items: [\n {\n label: 'Nissan',\n url: '#'\n },\n {\n active: true,\n label: 'Kia',\n url: '#'\n },\n {\n label: 'Maserati',\n url: '#'\n },\n {\n label: 'Corvette',\n url: '#'\n }\n ],\n label: 'Marken',\n url: '#'\n },\n {\n label: 'Standorte',\n url: '#'\n },\n {\n label: 'Bonusprogramm',\n url: '#'\n },\n {\n label: 'News',\n url: '#'\n },\n {\n label: 'Jobs',\n url: '#'\n },\n {\n label: 'Kontakt',\n url: '#'\n }\n ]}\n/>",
2929
2937
  "args": {
2930
2938
  "logo": {
2931
2939
  "src": "/logo.svg",
@@ -2942,43 +2950,51 @@
2942
2950
  "navItems": [
2943
2951
  {
2944
2952
  "url": "#",
2945
- "label": "Active Item",
2953
+ "label": "Fahrzeugsuche",
2946
2954
  "active": true
2947
2955
  },
2948
2956
  {
2949
2957
  "url": "#",
2950
- "label": "Navigation Item"
2951
- },
2952
- {
2953
- "url": "#",
2954
- "label": "Dropdown",
2958
+ "label": "Marken",
2955
2959
  "items": [
2956
2960
  {
2957
2961
  "url": "#",
2958
- "label": "Level 2 Item"
2962
+ "label": "Nissan"
2959
2963
  },
2960
2964
  {
2961
2965
  "url": "#",
2962
- "label": "Active Item",
2966
+ "label": "Kia",
2963
2967
  "active": true
2964
2968
  },
2965
2969
  {
2966
2970
  "url": "#",
2967
- "label": "An Item with a longer Label"
2971
+ "label": "Maserati"
2968
2972
  },
2969
2973
  {
2970
2974
  "url": "#",
2971
- "label": "And One last one"
2975
+ "label": "Corvette"
2972
2976
  }
2973
2977
  ]
2974
2978
  },
2975
2979
  {
2976
2980
  "url": "#",
2977
- "label": "One more Item"
2981
+ "label": "Standorte"
2982
+ },
2983
+ {
2984
+ "url": "#",
2985
+ "label": "Bonusprogramm"
2986
+ },
2987
+ {
2988
+ "url": "#",
2989
+ "label": "News"
2990
+ },
2991
+ {
2992
+ "url": "#",
2993
+ "label": "Jobs"
2978
2994
  },
2979
2995
  {
2980
2996
  "url": "#",
2981
- "label": "Last Item"
2997
+ "label": "Kontakt"
2982
2998
  }
2983
2999
  ]
2984
3000
  },
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes, FC, PropsWithChildren } from "react";
3
- import { SectionProps } from "../../SectionProps-00ddee3a.js";
3
+ import { SectionProps } from "../../SectionProps-2fd5dbde.js";
4
4
  declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -42,7 +42,9 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
42
42
  spotlight,
43
43
  content?.mode === "slider",
44
44
  ]);
45
- return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style && style !== "default" && `dsa-section-style--${style}`, transition &&
45
+ return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
46
+ style !== "default" &&
47
+ `dsa-section--style dsa-section--style-${style}`, transition &&
46
48
  transition !== "none" &&
47
49
  `dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
48
50
  ? "default"
@@ -26,18 +26,20 @@
26
26
  --dsa-section--background-color_default: var(--ks-background-color-default);
27
27
  --dsa-section--background-color_accent: var(--ks-background-color-accent);
28
28
  --dsa-section--background-color_bold: var(--ks-background-color-bold);
29
- --dsa-section--transition_to-default: linear-gradient(
30
- 178deg,
31
- transparent 75%,
32
- var(--ks-background-color-default) 75%
29
+ --dsa-section_shine-left--background-image: radial-gradient(
30
+ 80% 150% at 20% 50%,
31
+ var(--ks-color-fg-inverted),
32
+ var(--ks-color-bg-inverted-alpha-8)
33
33
  );
34
- --dsa-section--transition_to-accent: linear-gradient(178deg, transparent 75%, var(--ks-background-color-accent) 75%);
35
- --dsa-section--transition_to-bold: linear-gradient(178deg, transparent 75%, var(--ks-background-color-bold) 75%);
36
- --dsa-section--transition_to-inverted: linear-gradient(
37
- 178deg,
38
- transparent 75%,
39
- var(--ks-background-color-default-inverted) 75%
34
+ --dsa-section_shine-right--background-image: radial-gradient(
35
+ 80% 150% at 80% 50%,
36
+ var(--ks-color-fg-inverted),
37
+ var(--ks-color-bg-inverted-alpha-8)
40
38
  );
39
+ --dsa-section--transition_to-default: linear-gradient(transparent, var(--ks-background-color-default));
40
+ --dsa-section--transition_to-accent: linear-gradient(transparent, var(--ks-background-color-accent));
41
+ --dsa-section--transition_to-bold: linear-gradient(transparent, var(--ks-background-color-bold));
42
+ --dsa-section--transition_to-inverted: linear-gradient(transparent, var(--ks-background-color-default-inverted));
41
43
  --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
42
44
  --dsa-section__slider-arrow--size: 2rem;
43
45
  --dsa-section__slider-arrow--padding: 0.5em;
@@ -49,6 +51,18 @@
49
51
  --dsa-section__spotlight--blur: 0%;
50
52
  --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
51
53
  }
54
+ .dsa-section[ks-inverted=true] {
55
+ --dsa-section_shine-left--background-image: radial-gradient(
56
+ 70% 150% at 20% 50%,
57
+ var(--ks-color-fg-inverted-alpha-8-base),
58
+ var(--ks-color-bg)
59
+ );
60
+ --dsa-section_shine-right--background-image: radial-gradient(
61
+ 70% 150% at 80% 50%,
62
+ var(--ks-color-fg-inverted-alpha-87-base),
63
+ var(--ks-color-bg)
64
+ );
65
+ }
52
66
 
53
67
  .l-section.dsa-section {
54
68
  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
@@ -81,11 +95,14 @@
81
95
  }
82
96
 
83
97
  .l-section.dsa-section {
98
+ --dsa-section--background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
84
99
  background-image: var(--dsa-section--background-image);
85
- background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
100
+ background-color: var(--dsa-section--background-color, var(--ks-color-bg));
86
101
  position: relative;
87
102
  }
88
103
  .l-section.dsa-section .l-section__container {
104
+ position: relative;
105
+ z-index: 2;
89
106
  font: var(--ks-font-copy-m);
90
107
  }
91
108
  .l-section.dsa-section.l-section--gutter-large {
@@ -98,10 +115,10 @@
98
115
  --l-section--gutter: var(--dsa-section--gutter_none);
99
116
  }
100
117
  .l-section.dsa-section.l-section--accent {
101
- background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
118
+ --dsa-section--background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
102
119
  }
103
120
  .l-section.dsa-section.l-section--bold {
104
- background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
121
+ --dsa-section--background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
105
122
  }
106
123
  .l-section.dsa-section.dsa-section--transition-to-accent {
107
124
  background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
@@ -124,19 +141,43 @@
124
141
  .l-section.dsa-section--header-spacing.l-section--space-before-small {
125
142
  padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
126
143
  }
127
- .l-section.dsa-section-style--framed {
144
+ .l-section.dsa-section--style::before {
145
+ content: "";
146
+ position: absolute;
147
+ top: 0;
148
+ left: 0;
149
+ width: 100%;
150
+ height: 100%;
151
+ z-index: 0;
152
+ }
153
+ .l-section.dsa-section--style-framed {
128
154
  background-color: var(--ks-background-color-accent);
129
155
  }
130
- .l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
156
+ .l-section.dsa-section--style-framed .l-section__container--content .l-section__content {
131
157
  padding: var(--dsa-section--space_default);
132
158
  background-color: var(--ks-background-color-default);
133
159
  border-radius: var(--ks-border-radius-surface);
134
160
  }
135
- .l-section.dsa-section-style--deko {
136
- background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
161
+ .l-section.dsa-section--style-shine-left::before {
162
+ background-image: var(--dsa-section_shine-left--background-image, radial-gradient(70% 150% at 20% 50%, var(--ks-color-fg-inverted), var(--ks-color-bg-inverted-alpha-7)));
163
+ }
164
+ .l-section.dsa-section--style-shine-right::before {
165
+ background-image: var(--dsa-section_shine-right--background-image, radial-gradient(70% 150% at 80% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg)));
137
166
  }
138
- .l-section.dsa-section-style--colorful {
139
- background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
167
+ .l-section.dsa-section--style-carbon::before {
168
+ background: radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 0 0, radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 8px 8px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 0 1px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 8px 9px;
169
+ background-size: 16px 16px;
170
+ z-index: 1;
171
+ }
172
+ .l-section.dsa-section--style-carbon::after {
173
+ content: "";
174
+ position: absolute;
175
+ top: 0;
176
+ left: 0;
177
+ width: 100%;
178
+ height: 100%;
179
+ z-index: 0;
180
+ background: radial-gradient(100% 100% at 50% 50%, var(--ks-color-bg), var(--ks-color-bg-to-fg-1));
140
181
  }
141
182
  .l-section.dsa-section--spotlight {
142
183
  position: relative;
@@ -25,7 +25,9 @@
25
25
  "enum": [
26
26
  "default",
27
27
  "framed",
28
- "deko"
28
+ "shine-left",
29
+ "shine-right",
30
+ "carbon"
29
31
  ],
30
32
  "default": "default"
31
33
  },
@@ -16,7 +16,7 @@
16
16
  "type": "string",
17
17
  "title": "Style",
18
18
  "description": "Style of background",
19
- "enum": ["default", "framed", "deko"],
19
+ "enum": ["default", "framed", "shine-left", "shine-right", "carbon"],
20
20
  "default": "default"
21
21
  },
22
22
  "backgroundColor": {
@@ -132,43 +132,51 @@
132
132
  "examples": [
133
133
  [
134
134
  {
135
- "label": "Active Item",
135
+ "label": "Fahrzeugsuche",
136
136
  "url": "#",
137
137
  "active": true
138
138
  },
139
139
  {
140
- "label": "Navigation Item",
141
- "url": "#"
142
- },
143
- {
144
- "label": "Dropdown",
140
+ "label": "Marken",
145
141
  "url": "#",
146
142
  "items": [
147
143
  {
148
- "label": "Level 2 Item",
144
+ "label": "Nissan",
149
145
  "url": "#"
150
146
  },
151
147
  {
152
- "label": "Active Item",
148
+ "label": "Kia",
153
149
  "active": true,
154
150
  "url": "#"
155
151
  },
156
152
  {
157
- "label": "An Item with a longer Label",
153
+ "label": "Maserati",
158
154
  "url": "#"
159
155
  },
160
156
  {
161
- "label": "And One last one",
157
+ "label": "Corvette",
162
158
  "url": "#"
163
159
  }
164
160
  ]
165
161
  },
166
162
  {
167
- "label": "One more Item",
163
+ "label": "Standorte",
164
+ "url": "#"
165
+ },
166
+ {
167
+ "label": "Bonusprogramm",
168
+ "url": "#"
169
+ },
170
+ {
171
+ "label": "News",
172
+ "url": "#"
173
+ },
174
+ {
175
+ "label": "Jobs",
168
176
  "url": "#"
169
177
  },
170
178
  {
171
- "label": "Last Item",
179
+ "label": "Kontakt",
172
180
  "url": "#"
173
181
  }
174
182
  ]
@@ -286,43 +294,51 @@
286
294
  "examples": [
287
295
  [
288
296
  {
289
- "label": "Active Item",
297
+ "label": "Fahrzeugsuche",
290
298
  "url": "#",
291
299
  "active": true
292
300
  },
293
301
  {
294
- "label": "Navigation Item",
295
- "url": "#"
296
- },
297
- {
298
- "label": "Dropdown",
302
+ "label": "Marken",
299
303
  "url": "#",
300
304
  "items": [
301
305
  {
302
- "label": "Level 2 Item",
306
+ "label": "Nissan",
303
307
  "url": "#"
304
308
  },
305
309
  {
306
- "label": "Active Item",
310
+ "label": "Kia",
307
311
  "active": true,
308
312
  "url": "#"
309
313
  },
310
314
  {
311
- "label": "An Item with a longer Label",
315
+ "label": "Maserati",
312
316
  "url": "#"
313
317
  },
314
318
  {
315
- "label": "And One last one",
319
+ "label": "Corvette",
316
320
  "url": "#"
317
321
  }
318
322
  ]
319
323
  },
320
324
  {
321
- "label": "One more Item",
325
+ "label": "Standorte",
326
+ "url": "#"
327
+ },
328
+ {
329
+ "label": "Bonusprogramm",
330
+ "url": "#"
331
+ },
332
+ {
333
+ "label": "News",
334
+ "url": "#"
335
+ },
336
+ {
337
+ "label": "Jobs",
322
338
  "url": "#"
323
339
  },
324
340
  {
325
- "label": "Last Item",
341
+ "label": "Kontakt",
326
342
  "url": "#"
327
343
  }
328
344
  ]
@@ -13,7 +13,7 @@ import { FeaturesProps } from "../../FeaturesProps-a9041d97.js";
13
13
  import { GalleryProps } from "../../GalleryProps-76e7de44.js";
14
14
  import { HeroProps } from "../../HeroProps-fec6b267.js";
15
15
  import { HtmlProps } from "../../HtmlProps-9d091769.js";
16
- import { ImageStoryProps } from "../../ImageStoryProps-00ddee3a.js";
16
+ import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
17
17
  import { ImageTextProps } from "../../ImageTextProps-9286cca4.js";
18
18
  import { LogosProps } from "../../LogosProps-f9474fe2.js";
19
19
  import { MosaicProps } from "../../MosaicProps-d52c7151.js";
@@ -13,7 +13,7 @@ import { FeaturesProps } from "../../FeaturesProps-a9041d97.js";
13
13
  import { GalleryProps } from "../../GalleryProps-76e7de44.js";
14
14
  import { HeroProps } from "../../HeroProps-fec6b267.js";
15
15
  import { HtmlProps } from "../../HtmlProps-9d091769.js";
16
- import { ImageStoryProps } from "../../ImageStoryProps-00ddee3a.js";
16
+ import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
17
17
  import { ImageTextProps } from "../../ImageTextProps-9286cca4.js";
18
18
  import { LogosProps } from "../../LogosProps-f9474fe2.js";
19
19
  import { MosaicProps } from "../../MosaicProps-d52c7151.js";
@@ -1,15 +1,15 @@
1
1
  .dsa-stats {
2
2
  --dsa-stats--gap-vertical: var(--ks-spacing-stack-l);
3
3
  --dsa-stats--gap-horizontal: var(--ks-spacing-inline-m);
4
- --dsa-stats__item--gap: var(--ks-spacing-stack-xs);
4
+ --dsa-stats__item--gap: var(--ks-spacing-stack-s);
5
5
  --dsa-stats__icon--color: var(--ks-text-color-primary);
6
- --dsa-stats__icon--size: 5em;
7
- --dsa-stats__number--font: var(--ks-font-display-xl);
6
+ --dsa-stats__icon--size: 4em;
7
+ --dsa-stats__number--font: var(--ks-font-display-xxl);
8
8
  --dsa-stats__number--font-weight: var(--ks-font-weight-semi-bold);
9
9
  --dsa-stats__number--background: var(--dsa-typo--highlight);
10
10
  --dsa-stats__topic__font: var(--ks-font-interface-xl);
11
11
  --dsa-stats__topic--color: var(--ks-text-color-display);
12
- --dsa-stats__copy--font: var(--ks-font-copy-s);
12
+ --dsa-stats__copy--font: var(--ks-font-copy-m);
13
13
  --dsa-stats__copy--color: var(--ks-text-color-default);
14
14
  }
15
15
 
@@ -8,20 +8,19 @@
8
8
  --dsa-teaser-card--border-width: var(--ks-border-width-default);
9
9
  --dsa-teaser-card--border-color: var(--ks-border-color-card-interactive);
10
10
  --dsa-teaser-card--border-color_hover: var(--ks-border-color-card-interactive-hover);
11
- --dsa-teaser-card--border-radius: var(--ks-border-radius-card) var(--ks-border-radius-card)
12
- var(--ks-border-radius-card) calc(var(--ks-border-radius-card) * 3);
11
+ --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
13
12
  --dsa-teaser-card--shadow: none;
14
13
  --dsa-teaser-card--shadow_hover: none;
15
- --dsa-teaser-card__image--transform_hover: scale(1.05);
16
- --dsa-teaser-card__image--transition: transform var(--ks-transition-hover);
14
+ --dsa-teaser-card__image--transform_hover: scale(1.1);
15
+ --dsa-teaser-card__image--transition: transform var(--ks-transition-fade);
17
16
  --dsa-teaser-card__topic--color: var(--dsa-topic--color);
18
- --dsa-teaser-card__label--font: var(--ks-font-interface-s);
17
+ --dsa-teaser-card__label--font: var(--ks-font-interface-xs);
19
18
  --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
20
- --dsa-teaser-card__label--color: var(--ks-text-color-primary);
21
- --dsa-teaser-card__label--background-color: var(--ks-background-color-bold);
19
+ --dsa-teaser-card__label--color: var(--dsa-text-color-on-primary);
20
+ --dsa-teaser-card__label--background-color: var(--ks-background-color-primary);
22
21
  --dsa-teaser-card__label--padding: 0.5em 1em;
23
22
  --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
24
- --dsa-teaser-card__label--border: 1px solid var(--ks-border-color-interface);
23
+ --dsa-teaser-card__label--border: 0;
25
24
  --dsa-teaser-card__button--font: var(--ks-font-interface-m);
26
25
  --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
27
26
  --dsa-teaser-card__topic--font: var(--ks-font-display-m);
@@ -124,13 +123,12 @@
124
123
  .dsa-teaser-card .dsa-teaser-card__label {
125
124
  position: absolute;
126
125
  z-index: 1;
127
- top: 0;
128
- right: 0;
126
+ top: var(--ks-spacing-inset-xs);
127
+ right: var(--ks-spacing-inset-xs);
129
128
  border-radius: var(--dsa-teaser-card__label--border-radius);
130
129
  border: var(--dsa-teaser-card__label--border, 0);
131
130
  pointer-events: initial;
132
131
  padding: var(--dsa-teaser-card__label--padding);
133
- transform: translate(0.5em, -50%);
134
132
  font: var(--dsa-teaser-card__label--font);
135
133
  text-align: center;
136
134
  font-weight: var(--dsa-teaser-card__label--font-weight);
package/dist/global.css CHANGED
@@ -312,7 +312,7 @@ h3 {
312
312
  --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
313
313
  --dsa-link--text-decoration: none;
314
314
  --dsa-link--text-decoration_hover: none;
315
- --dsa-typo--highlight: var(--ks-color-primary);
315
+ --dsa-typo--highlight: var(--ks-text-color-primary);
316
316
  --dsa-content--horizontal-spacing: var(--ks-spacing-inset-l);
317
317
  --dsa-content--vertical-spacing: var(--ks-spacing-xxl);
318
318
  --dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
@@ -340,7 +340,7 @@ h3 {
340
340
  }
341
341
  @media (min-width: 62em) {
342
342
  :root, [ks-inverted], [ks-theme] {
343
- --dsa-logo--height: 2.5rem;
343
+ --dsa-logo--height: 3.5rem;
344
344
  }
345
345
  }
346
346
 
Binary file
@@ -1,19 +1 @@
1
- {
2
- "name": "",
3
- "short_name": "",
4
- "icons": [
5
- {
6
- "src": "/android-chrome-192x192.png",
7
- "sizes": "192x192",
8
- "type": "image/png"
9
- },
10
- {
11
- "src": "/android-chrome-512x512.png",
12
- "sizes": "512x512",
13
- "type": "image/png"
14
- }
15
- ],
16
- "theme_color": "#ffffff",
17
- "background_color": "#ffffff",
18
- "display": "standalone"
19
- }
1
+ {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
Binary file
Binary file
Binary file
Binary file