@kickstartds/ds-agency-premium 1.2.10--canary.178.33c3c92.0 → 1.2.10--canary.181.46699f2.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 (12) hide show
  1. package/dist/components/cta/cta.css +74 -49
  2. package/dist/components/cta/index.js +2 -2
  3. package/dist/components/hero/hero.css +2 -2
  4. package/dist/components/page-wrapper/tokens.css +1 -1
  5. package/dist/static/tokens-business.css +1 -1
  6. package/dist/static/tokens-google.css +1 -1
  7. package/dist/static/tokens-ngo.css +1 -1
  8. package/dist/static/tokens-telekom.css +1 -1
  9. package/dist/static/tokens.css +1 -1
  10. package/dist/tokens/tokens.css +1 -1
  11. package/dist/tokens/tokens.js +1 -1
  12. package/package.json +1 -1
package/dist/components/cta/cta.css CHANGED
@@ -1,100 +1,125 @@
1
- .c-cta.c-storytelling {
2
- --c-storytelling--text-color-neutral: var(--ks-color-fg);
3
- --c-storytelling--vertical-padding: var(--l-section--space-default);
4
- --c-storytelling--horizontal-padding: var(--l-section--content-padding);
5
- }
6
- .c-cta.c-storytelling .c-storytelling__box:only-child {
7
- --c-storytelling--horizontal-padding: var(--l-section--content-padding);
8
- }
9
- .c-cta.c-storytelling--color-neutral.c-storytelling .c-storytelling__box {
10
- --c-storytelling_text--color: var(--c-storytelling--text-color-neutral);
11
- --c-storytelling_subheadline--color: var(--c-storytelling--text-color-neutral);
1
+ .dsa-cta {
2
+ --dsa-cta--vertical-padding: var(--l-section--space-default);
3
+ --dsa-cta--horizontal-padding: var(--l-section--content-padding);
4
+ --dsa-cta__copy--font: var(--dsa-rich-text--font);
5
+ --dsa-cta__copy--color: var(--ks-text-color-default);
6
+ --dsa-cta__headline--color: var(--dsa-headline--color);
7
+ --dsa-cta__headline--font: var(--dsa-headline_h2--font);
8
+ --dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
9
+ --dsa-cta__subheadline--font: var(--dsa-headline-font-copy-xs);
10
+ --dsa-cta_color-neutral__headline--color: var(--ks-text-color-default);
11
+ --dsa-cta_color-neutral__subheadline--color: var(--ks-text-color-default);
12
+ --dsa-cta_color-neutral__copy--color: var(--ks-text-color-default);
13
+ --dsa-cta_highlight-text__headline--font: var(--dsa-headline_h1--font);
14
+ --dsa-cta_highlight-text__subheadline--font: var(--dsa-headline_h1__subheadline--font);
15
+ --dsa-cta_highlight-text__copy--font: var(--ks-font-copy-l);
12
16
  }
13
17
 
14
18
  @media (min-width: 640px) {
15
- .c-header--floating + .l-container--storytelling .c-storytelling.c-cta,
16
- .c-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.c-cta {
17
- padding-top: calc(var(--g-header-height) + var(--c-storytelling--horizontal-padding));
19
+ .c-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
20
+ .c-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
21
+ padding-top: calc(var(--g-header-height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
18
22
  z-index: 1;
19
23
  }
20
24
  }
21
25
 
22
- .c-storytelling.c-cta {
26
+ .c-storytelling.dsa-cta {
23
27
  --c-storytelling--padding-ratio: 2;
24
28
  justify-content: center;
25
29
  align-items: center;
26
30
  padding: 0;
27
31
  }
28
- .c-storytelling.c-cta--color-neutral.c-storytelling {
29
- --c-rich-text--color: var(--c-storytelling--text-color-neutral);
32
+ .c-storytelling.dsa-cta--color-neutral {
33
+ --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
34
+ --dsa-cta__headline--color: var(--dsa-cta_color-neutral__headline--color, var(--ks-text-color-default));
35
+ --dsa-cta__subheadline--color: var(--dsa-cta_color-neutral__subheadline--color, var(--ks-text-color-default));
30
36
  }
31
- .c-storytelling.c-cta--color-neutral.c-storytelling .dsa-headline__subheadline {
32
- --c-headline_subheadline--color: var(--c-storytelling--text-color-neutral);
37
+ .c-storytelling.dsa-cta--highlight-text {
38
+ --dsa-cta__copy--font: var(--dsa-cta_highlight-text__copy--font, var(--ks-text-font-default));
39
+ --dsa-cta__headline--font: var(--dsa-cta_highlight-text__headline--font, var(--ks-text-font-default));
40
+ --dsa-cta__subheadline--font: var(--dsa-cta_highlight-text__subheadline--font, var(--ks-text-font-default));
33
41
  }
34
- .c-storytelling.c-cta.c-storytelling--full {
42
+ .c-storytelling.dsa-cta.c-storytelling--full {
35
43
  --c-storytelling--padding-ratio: 1;
36
44
  }
37
- .c-storytelling.c-cta.c-cta--align-top {
45
+ .c-storytelling.dsa-cta.dsa-cta--align-top {
38
46
  align-items: flex-start;
39
47
  }
40
- .c-storytelling.c-cta.c-cta--align-bottom {
48
+ .c-storytelling.dsa-cta.dsa-cta--align-bottom {
41
49
  align-items: flex-end;
42
50
  }
43
- .c-storytelling.c-cta.c-cta--highlight-text .c-storytelling__text {
51
+ .c-storytelling.dsa-cta.dsa-cta--highlight-text .c-storytelling__text {
44
52
  font: var(--ks-font-copy-l);
45
53
  color: var(--ks-color-fg);
46
54
  }
47
- .c-storytelling.c-cta .c-storytelling__box {
55
+ .c-storytelling.dsa-cta .c-storytelling__box {
48
56
  width: 100%;
49
- padding: var(--c-storytelling--vertical-padding) var(--c-storytelling--horizontal-padding);
57
+ padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
50
58
  }
51
59
  @container storytelling (max-width: 640px) {
52
- .c-storytelling.c-cta .c-storytelling__box {
53
- padding-top: calc(var(--c-storytelling--vertical-padding) / var(--c-storytelling--padding-ratio));
60
+ .c-storytelling.dsa-cta .c-storytelling__box {
61
+ padding-top: calc(var(--dsa-cta--vertical-padding, var(--l-section--space-default)) / var(--c-storytelling--padding-ratio));
54
62
  }
55
- .c-storytelling.c-cta .c-storytelling__box:only-child {
56
- padding-top: var(--c-storytelling--vertical-padding);
63
+ .c-storytelling.dsa-cta .c-storytelling__box:only-child {
64
+ padding-top: var(--dsa-cta--vertical-padding, var(--l-section--space-default));
57
65
  }
58
66
  }
59
- .c-storytelling.c-cta .c-storytelling__box:only-child {
60
- padding: var(--c-storytelling--vertical-padding) var(--c-storytelling--horizontal-padding);
67
+ .c-storytelling.dsa-cta .c-storytelling__box:only-child {
68
+ padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
61
69
  }
62
- .c-storytelling.c-cta .c-storytelling__box__content {
70
+ .c-storytelling.dsa-cta .c-storytelling__box__content {
63
71
  max-width: 100%;
64
72
  }
65
- .c-storytelling.c-cta .c-storytelling__image {
73
+ .c-storytelling.dsa-cta .c-storytelling__box .dsa-headline__headline {
74
+ font: var(--dsa-cta__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
75
+ color: var(--dsa-cta__headline--color, var(--ks-text-color-display));
76
+ font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
77
+ }
78
+ .c-storytelling.dsa-cta .c-storytelling__box .dsa-headline__subheadline {
79
+ font: var(--dsa-cta__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
80
+ color: var(--dsa-cta__subheadline--color, var(--ks-text-color-primary));
81
+ font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
82
+ }
83
+ .c-storytelling.dsa-cta .c-storytelling__box .c-rich-text {
84
+ font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
85
+ color: var(--dsa-cta__copy--color, var(--das-rich-text--color, var(--ks-text-color-copy)));
86
+ }
87
+ .c-storytelling.dsa-cta .c-storytelling__box:only-child {
88
+ --dsa-cta--horizontal-padding: var(--l-section--content-padding);
89
+ }
90
+ .c-storytelling.dsa-cta .c-storytelling__image {
66
91
  margin: 0;
67
92
  }
68
93
  @container storytelling (min-width: 640px) {
69
- .c-storytelling.c-cta.c-storytelling--order-desktop-image-last .c-storytelling__image {
70
- padding-left: calc(var(--c-storytelling--horizontal-padding) / var(--c-storytelling--padding-ratio));
94
+ .c-storytelling.dsa-cta.c-storytelling--order-desktop-image-last .c-storytelling__image {
95
+ padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
71
96
  }
72
- .c-storytelling.c-cta.c-storytelling--order-desktop-image-last .c-storytelling__box {
73
- padding-right: calc(var(--c-storytelling--horizontal-padding) / var(--c-storytelling--padding-ratio));
97
+ .c-storytelling.dsa-cta.c-storytelling--order-desktop-image-last .c-storytelling__box {
98
+ padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
74
99
  }
75
- .c-storytelling.c-cta .c-storytelling__box {
76
- padding-left: calc(var(--c-storytelling--horizontal-padding) / var(--c-storytelling--padding-ratio));
100
+ .c-storytelling.dsa-cta .c-storytelling__box {
101
+ padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
77
102
  }
78
- .c-storytelling.c-cta .c-storytelling__box__content--center .c-button-group {
103
+ .c-storytelling.dsa-cta .c-storytelling__box__content--center .c-button-group {
79
104
  justify-content: center;
80
105
  }
81
- .c-storytelling.c-cta .c-storytelling__box:only-child {
106
+ .c-storytelling.dsa-cta .c-storytelling__box:only-child {
82
107
  width: 100%;
83
108
  max-width: calc(var(--l-section--content-width-default) - var(--l-section--content-padding) * var(--c-storytelling--padding-ratio));
84
109
  }
85
- .c-storytelling.c-cta > .c-storytelling__image {
86
- padding: var(--c-storytelling--vertical-padding) var(--c-storytelling--horizontal-padding);
87
- padding-right: calc(var(--c-storytelling--horizontal-padding) / var(--c-storytelling--padding-ratio));
110
+ .c-storytelling.dsa-cta > .c-storytelling__image {
111
+ padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
112
+ padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
88
113
  }
89
- .c-storytelling.c-cta.c-storytelling--full > .c-storytelling__image {
114
+ .c-storytelling.dsa-cta.c-storytelling--full > .c-storytelling__image {
90
115
  padding: 0;
91
116
  }
92
- .c-storytelling.c-cta > .c-storytelling__image,
93
- .c-storytelling.c-cta > .c-storytelling__box {
117
+ .c-storytelling.dsa-cta > .c-storytelling__image,
118
+ .c-storytelling.dsa-cta > .c-storytelling__box {
94
119
  max-width: calc(var(--l-section--content-width-wide) / 2);
95
120
  }
96
- .c-storytelling.c-cta.c-cta--full-width > .c-storytelling__image,
97
- .c-storytelling.c-cta.c-cta--full-width > .c-storytelling__box {
121
+ .c-storytelling.dsa-cta.dsa-cta--full-width > .c-storytelling__image,
122
+ .c-storytelling.dsa-cta.dsa-cta--full-width > .c-storytelling__box {
98
123
  max-width: 100%;
99
124
  }
100
125
  }
package/dist/components/cta/index.js CHANGED
@@ -13,8 +13,8 @@ const Cta = ({ headline, highlightText = false, sub, image, text, textAlign, bac
13
13
  // @ts-expect-error
14
14
  , {
15
15
  // @ts-expect-error
16
- value: ButtonGroup, children: jsx(Storytelling, { className: classnames("c-cta", fullWidth ? `c-cta--full-width` : "", highlightText ? `c-cta--highlight-text` : "", colorNeutral ? `c-cta--color-neutral` : "", contentAlign && contentAlign !== "center"
17
- ? `c-cta--align-${contentAlign}`
16
+ value: ButtonGroup, children: jsx(Storytelling, { className: classnames("dsa-cta", fullWidth ? `dsa-cta--full-width` : "", highlightText ? `dsa-cta--highlight-text` : "", colorNeutral ? `dsa-cta--color-neutral` : "", contentAlign && contentAlign !== "center"
17
+ ? `dsa-cta--align-${contentAlign}`
18
18
  : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: image?.padding === false, image: {
19
19
  source: image?.src,
20
20
  order: order,
package/dist/components/hero/hero.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
5
5
  --dsa-hero_color-neutral__subheadline--color: var(--ks-text-color-default);
6
6
  --dsa-hero__copy--color: var(--ks-text-color-default);
7
- --dsa-hero__copy--font: var(--ks-font-copy-m);
7
+ --dsa-hero__copy--font: var(--dsa-rich-text--font);
8
8
  --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
9
9
  --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
10
10
  --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
@@ -27,7 +27,7 @@
27
27
  --c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
28
28
  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-surface));
29
29
  --c-visual_box--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
30
- --c-visual_text--font: var(--dsa-hero__copy--font, var(--ks-font-copy-m));
30
+ --c-visual_text--font: var(--dsa-hero__copy--font, var(--dsa-rich-text--font));
31
31
  }
32
32
  .c-visual.dsa-hero--highlight-text.c-visual {
33
33
  --dsa-hero__copy--font: var(--dsa-hero_highlight-text__box--font, var(--ks-font-copy-l));
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 13:06:34 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:31 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
package/dist/static/tokens-business.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 13:06:37 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:35 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
package/dist/static/tokens-google.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 13:06:46 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:44 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
package/dist/static/tokens-ngo.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 13:06:40 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:38 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
package/dist/static/tokens-telekom.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 13:06:43 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:41 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
package/dist/static/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 13:06:34 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:31 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
package/dist/tokens/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 13:06:34 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:31 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
package/dist/tokens/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 13:06:35 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:32 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#100e36";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.2.10--canary.178.33c3c92.0",
3
+ "version": "1.2.10--canary.181.46699f2.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {