@kickstartds/ds-agency-premium 1.2.10--canary.168.f4de958.0 → 1.2.10--canary.171.76273d8.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 (15) hide show
  1. package/dist/components/hero/hero.css +39 -33
  2. package/dist/components/hero/index.js +1 -1
  3. package/dist/components/page-wrapper/tokens.css +40 -40
  4. package/dist/global.css +3 -3
  5. package/dist/static/tokens-business.css +1549 -0
  6. package/dist/static/tokens-google.css +1553 -0
  7. package/dist/static/tokens-ngo.css +1547 -0
  8. package/dist/static/tokens-telekom.css +1549 -0
  9. package/dist/static/tokens.css +1554 -0
  10. package/dist/tokens/tokens.css +40 -40
  11. package/dist/tokens/tokens.js +39 -39
  12. package/package.json +5 -4
  13. package/dist/tokens/themes.css +0 -4657
  14. package/dist/tokens/themes.css.d.ts +0 -0
  15. package/dist/tokens/themes.css.js +0 -1
package/dist/components/hero/hero.css CHANGED
@@ -1,93 +1,99 @@
1
- :root .c-visual.c-hero {
1
+ .dsa-hero {
2
+ --dsa-hero__subheadline--color: var(--dsa-headline__subheadline--color);
3
+ --dsa-hero__box--background-color: var(--ks-color-bg-alpha-2);
4
+ --dsa-hero__text--color: var(--ks-text-color-default);
5
+ --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
6
+ }
7
+
8
+ .l-container--visual {
9
+ /* stylelint-disable-next-line property-no-unknown */
10
+ container-name: visual;
11
+ }
12
+
13
+ .c-visual.dsa-hero {
2
14
  --c-visual_overlay--background-size: 100%;
3
- --c-visual--text-color-neutral: var(--ks-color-fg);
4
15
  --c-visual_overlay--background: transparent;
5
16
  }
6
- :root .c-visual.c-hero .c-visual__box {
7
- --c-visual_box--background: var(--ks-color-bg-alpha-2);
8
- --c-visual_box--color: var(--ks-color-fg);
17
+ .c-visual.dsa-hero .c-visual__box {
18
+ --c-visual_box--background: var(--dsa-hero__box--background-color, var(--ks-color-bg-alpha-2));
19
+ --c-visual_box--color: var(--dsa-hero__text--color, var(--ks-text-color-default));
9
20
  --c-visual_subheadline--color: var(--ks-text-color-primary);
10
21
  --c-visual_headline--color: var(--ks-color-fg);
11
22
  --c-visual_box--border-radius: var(--ks-border-radius-surface);
12
23
  --c-visual_box--padding: var(--ks-spacing-inset-squish-xl);
13
24
  }
14
- :root .c-visual.c-hero--highlight-text.c-visual .c-visual__box {
15
- --c-visual_text--font: var(--ks-font-copy-l);
25
+ .c-visual.dsa-hero--highlight-text.c-visual .c-visual__box {
26
+ --c-visual_text--font: var(--dsa-hero_highlight-text__box--font, var(--ks-font-copy-l));
16
27
  }
17
- :root .c-visual.c-hero--color-neutral.c-visual .c-visual__box {
18
- --c-visual_text--color: var(--c-visual--text-color-neutral);
19
- --c-visual_subheadline--color: var(--c-visual--text-color-neutral);
28
+ .c-visual.dsa-hero--color-neutral.c-visual .c-visual__box {
29
+ --c-visual_box--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
30
+ --c-visual_subheadline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
20
31
  }
21
32
  @container visual (min-width: 640px) {
22
- :root .c-visual.c-hero {
33
+ .c-visual.dsa-hero {
23
34
  --c-visual_overlay--background: radial-gradient(
24
35
  50% 125% at 100% 0%,
25
36
  var(--ks-color-primary-alpha-5) 0%,
26
37
  var(--ks-color-bg-alpha-5) 100%
27
38
  );
28
39
  }
29
- :root .c-visual.c-hero.c-hero--content-below {
40
+ .c-visual.dsa-hero.dsa-hero--content-below {
30
41
  --c-visual_overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
31
42
  }
32
- :root .c-visual.c-hero .c-visual__box {
43
+ .c-visual.dsa-hero .c-visual__box {
33
44
  --c-visual_box--max-width: 50rem;
34
45
  }
35
46
  }
36
47
 
37
- .l-container--visual {
38
- /* stylelint-disable-next-line property-no-unknown */
39
- container-name: visual;
40
- }
41
-
42
- .c-visual.c-hero .c-headline .c-headline__subheadline {
43
- color: var(--c-visual_subheadline--color);
48
+ .c-visual.dsa-hero .c-headline .c-headline__subheadline {
49
+ color: var(--dsa-visual__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-display)));
44
50
  }
45
- .c-visual.c-hero .c-button-group {
51
+ .c-visual.dsa-hero .c-button-group {
46
52
  --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
47
53
  --c-button-group--horizontal-gutter: var(--ks-spacing-inline-m);
48
54
  }
49
- .c-visual.c-hero.c-visual--full {
55
+ .c-visual.dsa-hero.c-visual--full {
50
56
  height: 100vh;
51
57
  }
52
- .c-visual.c-hero .c-visual__box {
58
+ .c-visual.dsa-hero .c-visual__box {
53
59
  max-width: var(--c-visual_box--max-width);
54
60
  padding: var(--c-visual_box--padding);
55
61
  }
56
- .c-visual.c-hero .c-visual__content--indent {
62
+ .c-visual.dsa-hero .c-visual__content--indent {
57
63
  max-width: var(--l-section--content-width-wide);
58
64
  }
59
65
  @container visual (min-width: 640px) {
60
- .c-visual.c-hero.c-hero--content-below .c-visual__media {
66
+ .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
61
67
  position: relative;
62
68
  }
63
- .c-visual.c-hero.c-hero--content-below .c-visual__media .c-visual__image {
69
+ .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media .c-visual__image {
64
70
  height: var(--c-visual--min-height);
65
71
  }
66
- .c-visual.c-hero.c-hero--content-below .c-visual__content {
72
+ .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
67
73
  padding: 0 var(--l-section--content-padding);
68
74
  margin-top: -10%;
69
75
  position: relative;
70
76
  }
71
- .c-visual.c-hero.c-hero--content-below .c-visual__content .c-visual__box {
77
+ .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
72
78
  --c-visual_box--max-width: var(--l-section--content-width-default);
73
79
  }
74
80
  @container visual (min-width: 640px) {
75
- .c-visual.c-hero.c-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
81
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
76
82
  height: fit-content;
77
83
  }
78
- .c-visual.c-hero.c-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img {
84
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img {
79
85
  object-fit: contain;
80
86
  height: auto;
81
87
  }
82
88
  }
83
- .c-visual.c-hero.c-hero--content-below.c-visual--full {
89
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full {
84
90
  height: fit-content;
85
91
  }
86
92
  @container visual (min-width: 640px) {
87
- .c-visual.c-hero.c-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
93
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
88
94
  height: fit-content;
89
95
  }
90
- .c-visual.c-hero.c-hero--content-below.c-visual--full .c-visual__media .c-visual__image img {
96
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image img {
91
97
  object-fit: cover;
92
98
  height: 100vh;
93
99
  }
package/dist/components/hero/index.js CHANGED
@@ -14,7 +14,7 @@ const Hero = ({ headline, sub, height, text, highlightText, textPosition = "cent
14
14
  // @ts-expect-error
15
15
  , {
16
16
  // @ts-expect-error
17
- value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { className: classnames(`c-hero c-hero--content-${textPosition}`, highlightText ? `c-hero--highlight-text` : "", colorNeutral ? `c-hero--color-neutral` : ""), height: height, overlay: overlay, box: {
17
+ value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : ""), height: height, overlay: overlay, box: {
18
18
  background: textbox === true ? "solid" : "transparent",
19
19
  enabled: true,
20
20
  vertical: textPosition === "below" ? "bottom" : "center",
package/dist/components/page-wrapper/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:02:46 GMT
3
+ * Generated on Wed, 28 Feb 2024 12:26:54 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8,29 +8,29 @@
8
8
  --ks-background-color-bold-base: var(--ks-color-primary-to-bg-6-base);
9
9
  --ks-background-color-bold-inverted-base: #c0b5ef;
10
10
  --ks-background-color-clear-base: var(--ks-color-transparent-base);
11
- --ks-background-color-clear-interactive-base: var(--ks-color-transparent-base);
12
- --ks-background-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8-base);
13
- --ks-background-color-clear-interactive-active-base: var(--ks-color-primary-alpha-7-base);
14
- --ks-background-color-clear-interactive-selected-base: var(--ks-color-primary-alpha-6-base);
11
+ --ks-background-color-clear-interactive-base: var(--ks-color-fg-alpha-8-base);
12
+ --ks-background-color-clear-interactive-hover-base: var(--ks-color-fg-alpha-7-base);
13
+ --ks-background-color-clear-interactive-active-base: var(--ks-color-fg-alpha-6-base);
14
+ --ks-background-color-clear-interactive-selected-base: var(--ks-color-fg-alpha-6-base);
15
15
  --ks-background-color-clear-inverted-base: var(--ks-color-transparent-base);
16
- --ks-background-color-clear-inverted-interactive-base: var(--ks-color-transparent-base);
17
- --ks-background-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7-base);
18
- --ks-background-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6-base);
19
- --ks-background-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5-base);
16
+ --ks-background-color-clear-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-8-base);
17
+ --ks-background-color-clear-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-7-base);
18
+ --ks-background-color-clear-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-6-base);
19
+ --ks-background-color-clear-inverted-interactive-selected-base: var(--ks-color-fg-inverted-alpha-6-base);
20
20
  --ks-background-color-default-base: var(--ks-color-bg-base);
21
21
  --ks-background-color-default-inverted-base: var(--ks-color-bg-inverted-base);
22
22
  --ks-background-color-interface-base: var(--ks-color-fg-alpha-8-base);
23
- --ks-background-color-interface-interactive-base: var(--ks-color-transparent-base);
24
- --ks-background-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-9-base);
25
- --ks-background-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-8-base);
26
- --ks-background-color-interface-interactive-active-base: var(--ks-color-fg-alpha-9-base);
27
- --ks-background-color-interface-interactive-selected-base: var(--ks-color-primary-inverted-base);
28
- --ks-background-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-9-base);
29
- --ks-background-color-interface-inverted-interactive-base: rgba(0,0,0,0);
30
- --ks-background-color-interface-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-9-base);
23
+ --ks-background-color-interface-interactive-base: var(--ks-color-fg-alpha-9-base);
24
+ --ks-background-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-5-base);
25
+ --ks-background-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-7-base);
26
+ --ks-background-color-interface-interactive-active-base: var(--ks-color-fg-alpha-6-base);
27
+ --ks-background-color-interface-interactive-selected-base: var(--ks-color-secondary-base);
28
+ --ks-background-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-8-base);
29
+ --ks-background-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-9-base);
30
+ --ks-background-color-interface-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-5-base);
31
31
  --ks-background-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-7-base);
32
- --ks-background-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-9-base);
33
- --ks-background-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-base);
32
+ --ks-background-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-6-base);
33
+ --ks-background-color-interface-inverted-interactive-selected-base: var(--ks-color-fg-inverted-alpha-6-base);
34
34
  --ks-background-color-primary-base: var(--ks-color-primary-base);
35
35
  --ks-background-color-primary-interactive-base: var(--ks-color-primary-base);
36
36
  --ks-background-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-2-base);
@@ -481,36 +481,36 @@
481
481
  --ks-spacing-inset-stretch-m: var(--ks-spacing-l) var(--ks-spacing-m);
482
482
  --ks-spacing-inset-stretch-l: var(--ks-spacing-xl) var(--ks-spacing-l);
483
483
  --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
484
- --ks-text-color-default-base: var(--ks-color-fg-alpha-3-base);
484
+ --ks-text-color-default-base: var(--ks-color-fg-base);
485
485
  --ks-text-color-default-interactive-base: var(--ks-color-link-base);
486
- --ks-text-color-default-interactive-hover-base: var(--ks-color-link-base);
487
- --ks-text-color-default-interactive-active-base: var(--ks-color-link-base);
488
- --ks-text-color-default-interactive-visited-base: var(--ks-color-link-base);
486
+ --ks-text-color-default-interactive-hover-base: var(--ks-color-fg-base);
487
+ --ks-text-color-default-interactive-active-base: var(--ks-color-fg-base);
488
+ --ks-text-color-default-interactive-visited-base: var(--ks-color-fg-base);
489
489
  --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-3-base);
490
490
  --ks-text-color-default-inverted-interactive-base: var(--ks-color-link-inverted-base);
491
- --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-base);
492
- --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-base);
493
- --ks-text-color-default-inverted-interactive-visited-base: var(--ks-color-link-inverted-base);
494
- --ks-text-color-interface-base: var(--ks-color-fg-alpha-2-base);
495
- --ks-text-color-interface-interactive-base: var(--ks-color-fg-base);
496
- --ks-text-color-interface-interactive-hover-base: #000;
497
- --ks-text-color-interface-interactive-active-base: #000;
498
- --ks-text-color-interface-interactive-visited-base: #000;
491
+ --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-fg-inverted-base);
492
+ --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-fg-inverted-base);
493
+ --ks-text-color-default-inverted-interactive-visited-base: var(--ks-color-fg-inverted-base);
494
+ --ks-text-color-interface-base: var(--ks-color-fg-alpha-3-base);
495
+ --ks-text-color-interface-interactive-base: var(--ks-color-fg-alpha-3-base);
496
+ --ks-text-color-interface-interactive-hover-base: var(--ks-color-fg-base);
497
+ --ks-text-color-interface-interactive-active-base: var(--ks-color-fg-base);
498
+ --ks-text-color-interface-interactive-visited-base: var(--ks-color-fg-base);
499
499
  --ks-text-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-2-base);
500
- --ks-text-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-base);
500
+ --ks-text-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-3-base);
501
501
  --ks-text-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-base);
502
502
  --ks-text-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-base);
503
503
  --ks-text-color-interface-inverted-interactive-visited-base: var(--ks-color-fg-inverted-base);
504
504
  --ks-text-color-primary-base: var(--ks-color-secondary-base);
505
- --ks-text-color-primary-interactive-base: var(--ks-color-primary-alpha-2-base);
506
- --ks-text-color-primary-interactive-hover-base: var(--ks-color-primary-alpha-2-base);
507
- --ks-text-color-primary-interactive-active-base: var(--ks-color-primary-alpha-2-base);
508
- --ks-text-color-primary-interactive-visited-base: var(--ks-color-primary-alpha-2-base);
505
+ --ks-text-color-primary-interactive-base: var(--ks-color-secondary-base);
506
+ --ks-text-color-primary-interactive-hover-base: var(--ks-color-secondary-alpha-2-base);
507
+ --ks-text-color-primary-interactive-active-base: var(--ks-color-secondary-alpha-2-base);
508
+ --ks-text-color-primary-interactive-visited-base: var(--ks-color-primary-alpha-3-base);
509
509
  --ks-text-color-primary-inverted-base: var(--ks-color-secondary-inverted-base);
510
- --ks-text-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted-alpha-2-base);
511
- --ks-text-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-2-base);
512
- --ks-text-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-2-base);
513
- --ks-text-color-primary-inverted-interactive-visited-base: var(--ks-color-primary-inverted-alpha-2-base);
510
+ --ks-text-color-primary-inverted-interactive-base: var(--ks-color-secondary-inverted-base);
511
+ --ks-text-color-primary-inverted-interactive-hover-base: var(--ks-color-secondary-inverted-alpha-2-base);
512
+ --ks-text-color-primary-inverted-interactive-active-base: var(--ks-color-secondary-inverted-alpha-2-base);
513
+ --ks-text-color-primary-inverted-interactive-visited-base: var(--ks-color-secondary-inverted-alpha-3-base);
514
514
  --ks-duration-immediate: 50ms;
515
515
  --ks-duration-fast: 100ms;
516
516
  --ks-duration-medium: 150ms;
package/dist/global.css CHANGED
@@ -437,21 +437,21 @@ article.c-post-teaser .c-teaser__topic {
437
437
  }
438
438
  @font-face {
439
439
  font-family: "NovelPro";
440
- src: url("static/fonts/lughausen/novelpro-regular.woff") format("woff");
440
+ src: url("static/fonts/business/novelpro-regular.woff") format("woff");
441
441
  font-weight: 400;
442
442
  font-style: normal;
443
443
  font-display: swap;
444
444
  }
445
445
  @font-face {
446
446
  font-family: "NovelSansPro";
447
- src: url("static/fonts/lughausen/novelsanspro-regular.woff") format("woff");
447
+ src: url("static/fonts/business/novelsanspro-regular.woff") format("woff");
448
448
  font-weight: 400;
449
449
  font-style: normal;
450
450
  font-display: swap;
451
451
  }
452
452
  @font-face {
453
453
  font-family: "NovelSansPro";
454
- src: url("static/fonts/lughausen/novelsanspro-bold.woff") format("woff");
454
+ src: url("static/fonts/business/novelsanspro-bold.woff") format("woff");
455
455
  font-weight: 700;
456
456
  font-style: normal;
457
457
  font-display: swap;