@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.
- package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-d62a0a9a.d.ts} +2 -2
- package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-c760fd2a.d.ts} +1 -1
- package/dist/PageProps-aa29c554.d.ts +1 -1
- package/dist/{SectionProps-21d04028.d.ts → SectionProps-2fd5dbde.d.ts} +1 -1
- package/dist/components/blog-overview/blog-overview.schema.dereffed.json +3 -1
- package/dist/components/blog-overview/index.d.ts +1 -1
- package/dist/components/blog-post/blog-post.schema.dereffed.json +3 -1
- package/dist/components/blog-post/index.d.ts +1 -1
- package/dist/components/blog-teaser/index.d.ts +1 -1
- package/dist/components/cta/cta.css +1 -1
- package/dist/components/footer/footer.css +1 -1
- package/dist/components/headline/headline.css +43 -1
- package/dist/components/hero/hero.css +12 -1
- package/dist/components/index/index.d.ts +2 -2
- package/dist/components/page/page.schema.dereffed.json +3 -1
- package/dist/components/page-wrapper/tokens.css +7 -7
- package/dist/components/section/index.d.ts +1 -1
- package/dist/components/section/section.css +20 -19
- package/dist/components/section/section.schema.dereffed.json +3 -1
- package/dist/components/section/section.schema.json +1 -1
- package/dist/components/stats/stats.css +1 -1
- package/dist/components/teaser-card/teaser-card.css +6 -7
- package/dist/global.css +2 -2
- package/dist/static/guenther/brands/cadillac.png +0 -0
- package/dist/static/guenther/brands/corvette.png +0 -0
- package/dist/static/guenther/brands/infiniti.png +0 -0
- package/dist/static/guenther/brands/isuzu.png +0 -0
- package/dist/static/guenther/brands/kia.png +0 -0
- package/dist/static/guenther/brands/maserati.png +0 -0
- package/dist/static/guenther/brands/micro.png +0 -0
- package/dist/static/guenther/brands/msg.png +0 -0
- package/dist/static/guenther/brands/nissan.png +0 -0
- package/dist/static/guenther/brands/saab.png +0 -0
- package/dist/static/guenther/brands/subaru.png +0 -0
- package/dist/static/guenther/car-1.webp +0 -0
- package/dist/static/guenther/car-2.webp +0 -0
- package/dist/static/guenther/car-cutout-1.avif +0 -0
- package/dist/static/guenther/car-cutout-2.avif +0 -0
- package/dist/static/guenther/car-cutout-3.png +0 -0
- package/dist/static/guenther/car-red.png +0 -0
- package/dist/static/guenther/car-store.png +0 -0
- package/dist/static/guenther/header-2.png +0 -0
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +7 -7
- package/dist/tokens/tokens.js +7 -7
- package/package.json +1 -1
- /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-
|
|
7
|
-
import { BlogTeaserProps } from "./BlogTeaserProps-
|
|
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-
|
|
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-
|
|
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" | "
|
|
31
|
+
type Style = "default" | "framed" | "shine-left" | "shine-right" | "carbon";
|
|
32
32
|
/**
|
|
33
33
|
* Color of background
|
|
34
34
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BlogOverviewProps } from "../../BlogOverviewProps-
|
|
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 };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BlogPostProps } from "../../BlogPostProps-
|
|
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-
|
|
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
|
|
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:
|
|
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.
|
|
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:
|
|
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-
|
|
33
|
-
export * from "../../BlogOverviewProps-
|
|
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";
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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-
|
|
8
|
-
--ks-background-color-bold-base: var(--ks-color-
|
|
9
|
-
--ks-background-color-bold-inverted-base: var(--ks-color-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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-
|
|
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--
|
|
136
|
-
background-image: var(--dsa-
|
|
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--
|
|
139
|
-
background-image: var(--dsa-
|
|
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;
|
|
@@ -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:
|
|
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-
|
|
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(--
|
|
20
|
-
--dsa-teaser-card__label--background-color: var(--ks-background-color-
|
|
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:
|
|
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:
|
|
125
|
-
right:
|
|
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:
|
|
343
|
+
--dsa-logo--height: 3.5rem;
|
|
344
344
|
}
|
|
345
345
|
}
|
|
346
346
|
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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
|
|
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
|
|
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
|
|
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);
|
package/dist/tokens/tokens.css
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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-
|
|
9
|
-
--ks-background-color-bold-base: var(--ks-color-
|
|
10
|
-
--ks-background-color-bold-inverted-base: var(--ks-color-
|
|
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-
|
|
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-
|
|
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-
|
|
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);
|
package/dist/tokens/tokens.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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 = "#
|
|
8
|
-
export const KsBackgroundColorBoldBase = "#
|
|
9
|
-
export const KsBackgroundColorBoldInvertedBase = "#
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
File without changes
|