@kickstartds/ds-agency-premium 1.6.71--canary.1923.e6c7ef3.0 → 1.6.71--canary.1933.9f7ec0c.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 (47) hide show
  1. package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-d62a0a9a.d.ts} +2 -2
  2. package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-c760fd2a.d.ts} +1 -1
  3. package/dist/PageProps-aa29c554.d.ts +1 -1
  4. package/dist/{SectionProps-21d04028.d.ts → SectionProps-2fd5dbde.d.ts} +1 -1
  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-post/index.d.ts +1 -1
  9. package/dist/components/blog-teaser/index.d.ts +1 -1
  10. package/dist/components/cta/cta.css +1 -1
  11. package/dist/components/footer/footer.css +1 -1
  12. package/dist/components/headline/headline.css +43 -1
  13. package/dist/components/hero/hero.css +12 -1
  14. package/dist/components/index/index.d.ts +2 -2
  15. package/dist/components/page/page.schema.dereffed.json +3 -1
  16. package/dist/components/page-wrapper/tokens.css +7 -7
  17. package/dist/components/section/index.d.ts +1 -1
  18. package/dist/components/section/section.css +20 -19
  19. package/dist/components/section/section.schema.dereffed.json +3 -1
  20. package/dist/components/section/section.schema.json +1 -1
  21. package/dist/components/stats/stats.css +1 -1
  22. package/dist/components/teaser-card/teaser-card.css +6 -7
  23. package/dist/global.css +2 -2
  24. package/dist/static/guenther/brands/cadillac.png +0 -0
  25. package/dist/static/guenther/brands/corvette.png +0 -0
  26. package/dist/static/guenther/brands/infiniti.png +0 -0
  27. package/dist/static/guenther/brands/isuzu.png +0 -0
  28. package/dist/static/guenther/brands/kia.png +0 -0
  29. package/dist/static/guenther/brands/maserati.png +0 -0
  30. package/dist/static/guenther/brands/micro.png +0 -0
  31. package/dist/static/guenther/brands/msg.png +0 -0
  32. package/dist/static/guenther/brands/nissan.png +0 -0
  33. package/dist/static/guenther/brands/saab.png +0 -0
  34. package/dist/static/guenther/brands/subaru.png +0 -0
  35. package/dist/static/guenther/car-1.webp +0 -0
  36. package/dist/static/guenther/car-2.webp +0 -0
  37. package/dist/static/guenther/car-cutout-1.avif +0 -0
  38. package/dist/static/guenther/car-cutout-2.avif +0 -0
  39. package/dist/static/guenther/car-cutout-3.png +0 -0
  40. package/dist/static/guenther/car-red.png +0 -0
  41. package/dist/static/guenther/car-store.png +0 -0
  42. package/dist/static/guenther/header-2.png +0 -0
  43. package/dist/tokens/themes.css +4 -4
  44. package/dist/tokens/tokens.css +7 -7
  45. package/dist/tokens/tokens.js +7 -7
  46. package/package.json +1 -1
  47. /package/dist/{BlogTeaserProps-f5855e93.d.ts → BlogTeaserProps-d62a0a9a.d.ts} +0 -0
@@ -3,8 +3,8 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-21d04028.js";
7
- import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
6
+ import { SectionProps } from "./SectionProps-2fd5dbde.js";
7
+ import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
8
8
  import { CtaProps } from "./CtaProps-789f8508.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
10
10
  /**
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
8
- import { SectionProps } from "./SectionProps-21d04028.js";
8
+ import { SectionProps } from "./SectionProps-2fd5dbde.js";
9
9
  import { CtaProps } from "./CtaProps-789f8508.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-21d04028.js";
6
+ import { SectionProps } from "./SectionProps-2fd5dbde.js";
7
7
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
8
8
  /**
9
9
  * Collection of sections (with their contents) to render on the page
@@ -28,7 +28,7 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
28
28
  /**
29
29
  * Style of background
30
30
  */
31
- type Style = "default" | "framed" | "deko";
31
+ type Style = "default" | "framed" | "shine-left" | "shine-right" | "carbon";
32
32
  /**
33
33
  * Color of background
34
34
  */
@@ -39,7 +39,9 @@
39
39
  "enum": [
40
40
  "default",
41
41
  "framed",
42
- "deko"
42
+ "shine-left",
43
+ "shine-right",
44
+ "carbon"
43
45
  ],
44
46
  "default": "default"
45
47
  },
@@ -1,4 +1,4 @@
1
- import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
1
+ import { BlogOverviewProps } from "../../BlogOverviewProps-d62a0a9a.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
4
4
  export type { BlogOverviewProps };
@@ -323,7 +323,9 @@
323
323
  "enum": [
324
324
  "default",
325
325
  "framed",
326
- "deko"
326
+ "shine-left",
327
+ "shine-right",
328
+ "carbon"
327
329
  ],
328
330
  "default": "default"
329
331
  },
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-c760fd2a.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export type { BlogPostProps };
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes } from "react";
3
- import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
3
+ import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
4
4
  declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
@@ -24,7 +24,7 @@
24
24
  gap: var(--dsa-cta--gap, var(--ks-spacing-inline-m));
25
25
  border-radius: var(--dsa-cta--border-radius, var(--ks-border-radius-surface));
26
26
  }
27
- .dsa-cta.c-storytelling:not(.dsa-cta--no-padding) {
27
+ .dsa-cta.c-storytelling.dsa-cta--no-padding {
28
28
  overflow: hidden;
29
29
  }
30
30
  .dsa-cta.c-storytelling.dsa-cta--color-neutral {
@@ -1,6 +1,6 @@
1
1
  .dsa-footer {
2
2
  --dsa-footer--background-color: var(--ks-background-color-default);
3
- --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
3
+ --dsa-footer--border-top: none;
4
4
  --dsa-footer--max-width: var(--dsa-content--width_wide);
5
5
  --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
6
6
  --dsa-footer__byline--font: var(--ks-font-copy-xs);
@@ -2,7 +2,7 @@
2
2
  --dsa-headline--color: var(--ks-text-color-display);
3
3
  --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
4
4
  --dsa-headline--text-transform: none;
5
- --dsa-headline--gap: 0.35em;
5
+ --dsa-headline--gap: 0.5em;
6
6
  --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
7
7
  --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
8
8
  --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
@@ -64,6 +64,48 @@
64
64
  --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
65
65
  --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
66
66
  }
67
+ .dsa-headline--h1 .dsa-headline__headline:not(:last-child),
68
+ .dsa-headline--h1 .dsa-headline__headline:only-child {
69
+ display: flex;
70
+ flex-direction: column;
71
+ }
72
+ .dsa-headline--h1 .dsa-headline__headline:not(:last-child):after,
73
+ .dsa-headline--h1 .dsa-headline__headline:only-child:after {
74
+ content: "";
75
+ font-size: inherit;
76
+ background-color: var(--ks-color-primary);
77
+ height: 3px;
78
+ width: 17%;
79
+ min-width: 5rem;
80
+ max-width: 10rem;
81
+ margin-top: var(--dsa-headline--gap);
82
+ }
83
+ .dsa-headline--h1 .dsa-headline__headline:not(:first-child) {
84
+ display: flex;
85
+ flex-direction: column;
86
+ }
87
+ .dsa-headline--h1 .dsa-headline__headline:not(:first-child):before {
88
+ content: "";
89
+ font-size: inherit;
90
+ background-color: var(--ks-color-primary);
91
+ height: 3px;
92
+ width: 30%;
93
+ min-width: 3rem;
94
+ max-width: 4rem;
95
+ margin-bottom: var(--dsa-headline--gap);
96
+ }
97
+ .dsa-headline--h1.dsa-headline--align-center .dsa-headline__headline,
98
+ .dsa-headline--h1.dsa-headline--align-center .dsa-headline__subheadline {
99
+ align-items: center;
100
+ }
101
+ .dsa-headline--h1.dsa-headline--align-left .dsa-headline__headline,
102
+ .dsa-headline--h1.dsa-headline--align-left .dsa-headline__subheadline {
103
+ align-items: flex-start;
104
+ }
105
+ .dsa-headline--h1.dsa-headline--align-right .dsa-headline__headline,
106
+ .dsa-headline--h1.dsa-headline--align-right .dsa-headline__subheadline {
107
+ align-items: flex-end;
108
+ }
67
109
  .dsa-headline--h2 {
68
110
  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
69
111
  --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
@@ -32,6 +32,11 @@
32
32
  var(--ks-color-primary-alpha-5) 0%,
33
33
  var(--ks-color-bg-alpha-4) 100%
34
34
  );
35
+ --dsa-hero_corner__overlay--background: linear-gradient(
36
+ 40deg,
37
+ var(--ks-background-color-default) 15%,
38
+ transparent 50%
39
+ );
35
40
  --dsa-hero_offset__textbox--max-width: var(--dsa-content--width_default);
36
41
  --dsa-hero_offset__textbox--offset: -10%;
37
42
  --dsa-hero_offset__overlay--background: linear-gradient(
@@ -62,7 +67,7 @@
62
67
  :root .dsa-hero,
63
68
  [ks-inverted=true] .dsa-hero,
64
69
  [ks-inverted=false] .dsa-hero {
65
- --dsa-hero--min-height: 34rem;
70
+ --dsa-hero--min-height: 42rem;
66
71
  --dsa-hero--min-height_small: 20rem;
67
72
  --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
68
73
  }
@@ -128,6 +133,12 @@
128
133
  .c-visual.dsa-hero .dsa-headline .dsa-headline__subheadline {
129
134
  color: var(--dsa-hero__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));
130
135
  }
136
+ .c-visual.dsa-hero--content-corner {
137
+ --c-visual_overlay--background: var(
138
+ --dsa-hero_corner__overlay--background,
139
+ linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
140
+ );
141
+ }
131
142
  .c-visual.dsa-hero .c-button-group {
132
143
  --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
133
144
  --c-button-group--horizontal-gutter: var(--ks-spacing-inline-m);
@@ -29,8 +29,8 @@ interface SettingsProps {
29
29
  seo: SeoProps;
30
30
  iconSprite?: IconSprite;
31
31
  }
32
- export * from "../../BlogPostProps-6b3cff22.js";
33
- export * from "../../BlogOverviewProps-9f207f1c.js";
32
+ export * from "../../BlogPostProps-c760fd2a.js";
33
+ export * from "../../BlogOverviewProps-d62a0a9a.js";
34
34
  export * from "../../PageProps-aa29c554.js";
35
35
  export { IconSprite, SettingsProps };
36
36
  export * from "../../EventDetailProps-42a7eebe.js";
@@ -39,7 +39,9 @@
39
39
  "enum": [
40
40
  "default",
41
41
  "framed",
42
- "deko"
42
+ "shine-left",
43
+ "shine-right",
44
+ "carbon"
43
45
  ],
44
46
  "default": "default"
45
47
  },
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 29 Jul 2025 11:28:06 GMT
3
+ * Generated on Thu, 31 Jul 2025 13:53:26 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
7
- --ks-background-color-accent-inverted-base: var(--ks-color-primary-inverted-to-bg-8-base);
8
- --ks-background-color-bold-base: var(--ks-color-primary-to-bg-8-base);
9
- --ks-background-color-bold-inverted-base: var(--ks-color-primary-inverted-to-bg-6-base);
7
+ --ks-background-color-accent-inverted-base: var(--ks-color-fg-inverted-to-bg-9-base);
8
+ --ks-background-color-bold-base: var(--ks-color-fg-to-bg-8-base);
9
+ --ks-background-color-bold-inverted-base: var(--ks-color-fg-inverted-to-bg-8-base);
10
10
  --ks-background-color-clear-base: var(--ks-color-transparent-base);
11
11
  --ks-background-color-clear-interactive-base: var(--ks-color-transparent-base);
12
12
  --ks-background-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8-base);
@@ -732,7 +732,7 @@
732
732
  --ks-spacing-inset-stretch-m: var(--ks-spacing-l) var(--ks-spacing-m);
733
733
  --ks-spacing-inset-stretch-l: var(--ks-spacing-xl) var(--ks-spacing-l);
734
734
  --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
735
- --ks-text-color-default-base: var(--ks-color-fg-alpha-3-base);
735
+ --ks-text-color-default-base: var(--ks-color-fg-alpha-2-base);
736
736
  --ks-text-color-default-interactive-base: var(--ks-color-link-base);
737
737
  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-alpha-4-base);
738
738
  --ks-text-color-default-interactive-active-base: var(--ks-color-link-base);
@@ -742,12 +742,12 @@
742
742
  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-alpha-4-base);
743
743
  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-base);
744
744
  --ks-text-color-default-inverted-interactive-selected-base: var(--ks-color-link-inverted-base);
745
- --ks-text-color-copy-base: var(--ks-color-fg-alpha-3-base);
745
+ --ks-text-color-copy-base: var(--ks-color-fg-alpha-2-base);
746
746
  --ks-text-color-copy-interactive-base: var(--ks-color-link-base);
747
747
  --ks-text-color-copy-interactive-hover-base: var(--ks-color-link-to-fg-2-base);
748
748
  --ks-text-color-copy-interactive-active-base: var(--ks-color-link-to-fg-3-base);
749
749
  --ks-text-color-copy-interactive-selected-base: var(--ks-color-link-to-fg-3-base);
750
- --ks-text-color-copy-inverted-base: var(--ks-color-fg-inverted-alpha-3-base);
750
+ --ks-text-color-copy-inverted-base: var(--ks-color-fg-inverted-alpha-2-base);
751
751
  --ks-text-color-copy-inverted-interactive-base: var(--ks-color-link-inverted-base);
752
752
  --ks-text-color-copy-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-2-base);
753
753
  --ks-text-color-copy-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-2-base);
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes, FC, PropsWithChildren } from "react";
3
- import { SectionProps } from "../../SectionProps-21d04028.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>>;
@@ -26,18 +26,10 @@
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%
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%
40
- );
29
+ --dsa-section--transition_to-default: linear-gradient(transparent, var(--ks-background-color-default));
30
+ --dsa-section--transition_to-accent: linear-gradient(transparent, var(--ks-background-color-accent));
31
+ --dsa-section--transition_to-bold: linear-gradient(transparent, var(--ks-background-color-bold));
32
+ --dsa-section--transition_to-inverted: linear-gradient(transparent, var(--ks-background-color-default-inverted));
41
33
  --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
42
34
  --dsa-section__slider-arrow--size: 2rem;
43
35
  --dsa-section__slider-arrow--padding: 0.5em;
@@ -81,8 +73,9 @@
81
73
  }
82
74
 
83
75
  .l-section.dsa-section {
76
+ --dsa-section--background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
84
77
  background-image: var(--dsa-section--background-image);
85
- background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
78
+ background-color: var(--dsa-section--background-color, var(--ks-color-bg));
86
79
  position: relative;
87
80
  }
88
81
  .l-section.dsa-section .l-section__container {
@@ -98,10 +91,10 @@
98
91
  --l-section--gutter: var(--dsa-section--gutter_none);
99
92
  }
100
93
  .l-section.dsa-section.l-section--accent {
101
- background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
94
+ --dsa-section--background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
102
95
  }
103
96
  .l-section.dsa-section.l-section--bold {
104
- background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
97
+ --dsa-section--background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
105
98
  }
106
99
  .l-section.dsa-section.dsa-section--transition-to-accent {
107
100
  background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
@@ -132,11 +125,19 @@
132
125
  background-color: var(--ks-background-color-default);
133
126
  border-radius: var(--ks-border-radius-surface);
134
127
  }
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%));
128
+ .l-section.dsa-section-style--shine-left {
129
+ background-image: var(--dsa-section_shine--background-image, radial-gradient(70% 150% at 20% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg-inverted-alpha-8)));
137
130
  }
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%));
131
+ .l-section.dsa-section-style--shine-left[ks-inverted=true] {
132
+ background-image: var(--dsa-section_shine--background-image, radial-gradient(70% 150% at 20% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg)));
133
+ }
134
+ .l-section.dsa-section-style--shine-right {
135
+ background-image: var(--dsa-section_shine--background-image, radial-gradient(70% 150% at 80% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg)));
136
+ }
137
+ .l-section.dsa-section-style--carbon {
138
+ 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 !important;
139
+ background-color: var(--dsa-section--background-color) !important;
140
+ background-size: 16px 16px !important;
140
141
  }
141
142
  .l-section.dsa-section--spotlight {
142
143
  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": {
@@ -3,7 +3,7 @@
3
3
  --dsa-stats--gap-horizontal: var(--ks-spacing-inline-m);
4
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;
6
+ --dsa-stats__icon--size: 4em;
7
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);
@@ -14,13 +14,13 @@
14
14
  --dsa-teaser-card__image--transform_hover: scale(1.1);
15
15
  --dsa-teaser-card__image--transition: transform var(--ks-transition-fade);
16
16
  --dsa-teaser-card__topic--color: var(--dsa-topic--color);
17
- --dsa-teaser-card__label--font: var(--ks-font-interface-s);
17
+ --dsa-teaser-card__label--font: var(--ks-font-interface-xs);
18
18
  --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
19
- --dsa-teaser-card__label--color: var(--ks-text-color-primary);
20
- --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);
21
21
  --dsa-teaser-card__label--padding: 0.5em 1em;
22
22
  --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
23
- --dsa-teaser-card__label--border: 1px solid var(--ks-border-color-interface);
23
+ --dsa-teaser-card__label--border: 0;
24
24
  --dsa-teaser-card__button--font: var(--ks-font-interface-m);
25
25
  --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
26
26
  --dsa-teaser-card__topic--font: var(--ks-font-display-m);
@@ -121,13 +121,12 @@
121
121
  .dsa-teaser-card .dsa-teaser-card__label {
122
122
  position: absolute;
123
123
  z-index: 1;
124
- top: 0;
125
- right: 0;
124
+ top: var(--ks-spacing-inset-xs);
125
+ right: var(--ks-spacing-inset-xs);
126
126
  border-radius: var(--dsa-teaser-card__label--border-radius);
127
127
  border: var(--dsa-teaser-card__label--border, 0);
128
128
  pointer-events: initial;
129
129
  padding: var(--dsa-teaser-card__label--padding);
130
- transform: translate(0.5em, -50%);
131
130
  font: var(--dsa-teaser-card__label--font);
132
131
  text-align: center;
133
132
  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: 4.5rem;
343
+ --dsa-logo--height: 3.5rem;
344
344
  }
345
345
  }
346
346
 
Binary file
Binary file
Binary file
Binary file
Binary file
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 29 Jul 2025 11:28:08 GMT
3
+ * Generated on Thu, 31 Jul 2025 13:53:29 GMT
4
4
  */
5
5
  :root [ks-theme=business] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
2727
2727
  }
2728
2728
  /**
2729
2729
  * Do not edit directly
2730
- * Generated on Tue, 29 Jul 2025 11:28:13 GMT
2730
+ * Generated on Thu, 31 Jul 2025 13:53:34 GMT
2731
2731
  */
2732
2732
  :root [ks-theme=google] {
2733
2733
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
5458
5458
  }
5459
5459
  /**
5460
5460
  * Do not edit directly
5461
- * Generated on Tue, 29 Jul 2025 11:28:11 GMT
5461
+ * Generated on Thu, 31 Jul 2025 13:53:31 GMT
5462
5462
  */
5463
5463
  :root [ks-theme=ngo] {
5464
5464
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
8459
8459
  }
8460
8460
  /**
8461
8461
  * Do not edit directly
8462
- * Generated on Tue, 29 Jul 2025 11:28:15 GMT
8462
+ * Generated on Thu, 31 Jul 2025 13:53:36 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -1,13 +1,13 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 29 Jul 2025 11:28:06 GMT
3
+ * Generated on Thu, 31 Jul 2025 13:53:26 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
7
7
  --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
8
- --ks-background-color-accent-inverted-base: var(--ks-color-primary-inverted-to-bg-8-base);
9
- --ks-background-color-bold-base: var(--ks-color-primary-to-bg-8-base);
10
- --ks-background-color-bold-inverted-base: var(--ks-color-primary-inverted-to-bg-6-base);
8
+ --ks-background-color-accent-inverted-base: var(--ks-color-fg-inverted-to-bg-9-base);
9
+ --ks-background-color-bold-base: var(--ks-color-fg-to-bg-8-base);
10
+ --ks-background-color-bold-inverted-base: var(--ks-color-fg-inverted-to-bg-8-base);
11
11
  --ks-background-color-clear-base: var(--ks-color-transparent-base);
12
12
  --ks-background-color-clear-interactive-base: var(--ks-color-transparent-base);
13
13
  --ks-background-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8-base);
@@ -733,7 +733,7 @@
733
733
  --ks-spacing-inset-stretch-m: var(--ks-spacing-l) var(--ks-spacing-m);
734
734
  --ks-spacing-inset-stretch-l: var(--ks-spacing-xl) var(--ks-spacing-l);
735
735
  --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
736
- --ks-text-color-default-base: var(--ks-color-fg-alpha-3-base);
736
+ --ks-text-color-default-base: var(--ks-color-fg-alpha-2-base);
737
737
  --ks-text-color-default-interactive-base: var(--ks-color-link-base);
738
738
  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-alpha-4-base);
739
739
  --ks-text-color-default-interactive-active-base: var(--ks-color-link-base);
@@ -743,12 +743,12 @@
743
743
  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-alpha-4-base);
744
744
  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-base);
745
745
  --ks-text-color-default-inverted-interactive-selected-base: var(--ks-color-link-inverted-base);
746
- --ks-text-color-copy-base: var(--ks-color-fg-alpha-3-base);
746
+ --ks-text-color-copy-base: var(--ks-color-fg-alpha-2-base);
747
747
  --ks-text-color-copy-interactive-base: var(--ks-color-link-base);
748
748
  --ks-text-color-copy-interactive-hover-base: var(--ks-color-link-to-fg-2-base);
749
749
  --ks-text-color-copy-interactive-active-base: var(--ks-color-link-to-fg-3-base);
750
750
  --ks-text-color-copy-interactive-selected-base: var(--ks-color-link-to-fg-3-base);
751
- --ks-text-color-copy-inverted-base: var(--ks-color-fg-inverted-alpha-3-base);
751
+ --ks-text-color-copy-inverted-base: var(--ks-color-fg-inverted-alpha-2-base);
752
752
  --ks-text-color-copy-inverted-interactive-base: var(--ks-color-link-inverted-base);
753
753
  --ks-text-color-copy-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-2-base);
754
754
  --ks-text-color-copy-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-2-base);
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 29 Jul 2025 11:28:06 GMT
3
+ * Generated on Thu, 31 Jul 2025 13:53:27 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#f2f2f2";
7
- export const KsBackgroundColorAccentInvertedBase = "#351f22";
8
- export const KsBackgroundColorBoldBase = "#f7dee4";
9
- export const KsBackgroundColorBoldInvertedBase = "#5d1c26";
7
+ export const KsBackgroundColorAccentInvertedBase = "#2b2b2b";
8
+ export const KsBackgroundColorBoldBase = "#dedede";
9
+ export const KsBackgroundColorBoldInvertedBase = "#3d3d3d";
10
10
  export const KsBackgroundColorClearBase = "rgba(0, 0, 0, 0)";
11
11
  export const KsBackgroundColorClearInteractiveBase = "rgba(0, 0, 0, 0)";
12
12
  export const KsBackgroundColorClearInteractiveHoverBase = "rgba(195, 0, 47, 0.13)";
@@ -737,7 +737,7 @@ export const KsSpacingInsetStretchS = "0.875rem 0.6364rem";
737
737
  export const KsSpacingInsetStretchM = "1.2031rem 0.875rem";
738
738
  export const KsSpacingInsetStretchL = "1.6543rem 1.2031rem";
739
739
  export const KsSpacingInsetStretchXl = "2.2747rem 1.6543rem";
740
- export const KsTextColorDefaultBase = "rgba(0, 0, 0, 0.76)";
740
+ export const KsTextColorDefaultBase = "rgba(0, 0, 0, 0.87)";
741
741
  export const KsTextColorDefaultInteractiveBase = "#c3002f";
742
742
  export const KsTextColorDefaultInteractiveHoverBase = "rgba(195, 0, 47, 0.63)";
743
743
  export const KsTextColorDefaultInteractiveActiveBase = "#c3002f";
@@ -747,12 +747,12 @@ export const KsTextColorDefaultInvertedInteractiveBase = "#c3002f";
747
747
  export const KsTextColorDefaultInvertedInteractiveHoverBase = "rgba(195, 0, 47, 0.63)";
748
748
  export const KsTextColorDefaultInvertedInteractiveActiveBase = "#c3002f";
749
749
  export const KsTextColorDefaultInvertedInteractiveSelectedBase = "#c3002f";
750
- export const KsTextColorCopyBase = "rgba(0, 0, 0, 0.76)";
750
+ export const KsTextColorCopyBase = "rgba(0, 0, 0, 0.87)";
751
751
  export const KsTextColorCopyInteractiveBase = "#c3002f";
752
752
  export const KsTextColorCopyInteractiveHoverBase = "#aa0029";
753
753
  export const KsTextColorCopyInteractiveActiveBase = "#940024";
754
754
  export const KsTextColorCopyInteractiveSelectedBase = "#940024";
755
- export const KsTextColorCopyInvertedBase = "rgba(255, 255, 255, 0.76)";
755
+ export const KsTextColorCopyInvertedBase = "rgba(255, 255, 255, 0.87)";
756
756
  export const KsTextColorCopyInvertedInteractiveBase = "#c3002f";
757
757
  export const KsTextColorCopyInvertedInteractiveHoverBase = "#cb214a";
758
758
  export const KsTextColorCopyInvertedInteractiveActiveBase = "#cb214a";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.6.71--canary.1923.e6c7ef3.0",
3
+ "version": "1.6.71--canary.1933.9f7ec0c.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {