@kickstartds/ds-agency-premium 1.2.10--canary.175.799b9aa.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.
@@ -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 .c-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
  }
@@ -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,
@@ -1,8 +1,16 @@
1
1
  .dsa-hero {
2
+ --dsa-hero__headline--color: var(--dsa-headline__headline--color);
2
3
  --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);
4
+ --dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
5
+ --dsa-hero_color-neutral__subheadline--color: var(--ks-text-color-default);
6
+ --dsa-hero__copy--color: var(--ks-text-color-default);
7
+ --dsa-hero__copy--font: var(--dsa-rich-text--font);
8
+ --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
5
9
  --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
10
+ --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
11
+ --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
12
+ --dsa-hero__texbox--background-color: var(--ks-color-bg-alpha-2);
13
+ --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
6
14
  }
7
15
 
8
16
  .l-container--visual {
@@ -15,19 +23,19 @@
15
23
  --c-visual_overlay--background: transparent;
16
24
  }
17
25
  .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));
20
- --c-visual_subheadline--color: var(--ks-text-color-primary);
21
- --c-visual_headline--color: var(--ks-color-fg);
22
- --c-visual_box--border-radius: var(--ks-border-radius-surface);
23
- --c-visual_box--padding: var(--ks-spacing-inset-squish-xl);
26
+ --c-visual_box--background: var(--dsa-hero__texbox--background-color, var(--ks-color-bg-alpha-2));
27
+ --c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
28
+ --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-surface));
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(--dsa-rich-text--font));
24
31
  }
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));
32
+ .c-visual.dsa-hero--highlight-text.c-visual {
33
+ --dsa-hero__copy--font: var(--dsa-hero_highlight-text__box--font, var(--ks-font-copy-l));
27
34
  }
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));
35
+ .c-visual.dsa-hero--color-neutral.c-visual {
36
+ --dsa-hero__copy--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
37
+ --dsa-hero__headline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
38
+ --dsa-hero__subheadline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
31
39
  }
32
40
  @container visual (min-width: 640px) {
33
41
  .c-visual.dsa-hero {
@@ -38,15 +46,21 @@
38
46
  );
39
47
  }
40
48
  .c-visual.dsa-hero.dsa-hero--content-below {
41
- --c-visual_overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
49
+ --c-visual_overlay--background: var(
50
+ --dsa-hero__overlay--background,
51
+ linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
52
+ );
42
53
  }
43
54
  .c-visual.dsa-hero .c-visual__box {
44
55
  --c-visual_box--max-width: 50rem;
45
56
  }
46
57
  }
47
58
 
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)));
59
+ .c-visual.dsa-hero .dsa-headline .dsa-headline__headline {
60
+ color: var(--dsa-hero__headline--color, var(--dsa-headline__headline--color, var(--ks-text-color-display)));
61
+ }
62
+ .c-visual.dsa-hero .dsa-headline .dsa-headline__subheadline {
63
+ color: var(--dsa-hero__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));
50
64
  }
51
65
  .c-visual.dsa-hero .c-button-group {
52
66
  --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
@@ -10,10 +10,10 @@
10
10
  display: flex;
11
11
  flex-direction: column;
12
12
  }
13
- .c-visual .c-headline {
13
+ .c-visual .dsa-headline {
14
14
  --c-headline--color: var(--ks-color-fg);
15
15
  }
16
- .c-visual .c-headline .c-headline__subheadline {
16
+ .c-visual .dsa-headline .dsa-headline__subheadline {
17
17
  --c-headline_subheadline--color: var(--ks-text-color-primary);
18
18
  }
19
19
  .c-visual.c-visual--full {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:58:50 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);
@@ -37,7 +37,7 @@
37
37
  --c-visual_text--color: var(--c-visual--text-color-neutral);
38
38
  --c-visual_subheadline--color: var(--c-visual--text-color-neutral);
39
39
  }
40
- .c-visual.c-video-curtain .c-headline .c-headline__subheadline {
40
+ .c-visual.c-video-curtain .dsa-headline .dsa-headline__subheadline {
41
41
  color: var(--c-visual_subheadline--color);
42
42
  }
43
43
  .c-visual.c-video-curtain.c-visual--full {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:58:54 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:35 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:59:04 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:44 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:58:57 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:38 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:59:00 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:41 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:58:50 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:31 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:58:50 GMT
3
+ * Generated on Wed, 28 Feb 2024 14:22:31 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 12:58:51 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.175.799b9aa.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": {