@kickstartds/ds-agency-premium 1.2.10--canary.183.909265f.0 → 1.2.10--canary.189.8b5031c.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/page-wrapper/tokens.css +1 -1
  2. package/dist/components/stats/index.js +1 -1
  3. package/dist/components/stats/stats.css +37 -22
  4. package/dist/components/testimonials/index.js +2 -2
  5. package/dist/components/testimonials/testimonials.css +32 -33
  6. package/dist/components/video-curtain/index.js +1 -1
  7. package/dist/components/video-curtain/video-curtain.css +60 -22
  8. package/dist/static/tokens-business.css +1 -1
  9. package/dist/static/tokens-google.css +1 -1
  10. package/dist/static/tokens-ngo.css +1 -1
  11. package/dist/static/tokens-telekom.css +1 -1
  12. package/dist/static/tokens.css +1 -1
  13. package/dist/tokens/tokens.css +1 -1
  14. package/dist/tokens/tokens.js +1 -1
  15. package/package.json +1 -1
package/dist/components/page-wrapper/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Feb 2024 07:35:16 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:12:33 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/components/stats/index.js CHANGED
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import { CountUp } from '@kickstartds/content/lib/count-up';
4
4
 
5
5
  const Stats = ({ items = [], }) => {
6
- return (jsx("div", { className: "c-stats", children: items.map((item, index) => (jsx(CountUp, { className: "c-stats__item", to: item.number, icon: {
6
+ return (jsx("div", { className: "dsa-stats", children: items.map((item, index) => (jsx(CountUp, { className: "dsa-stats__item", to: item.number, icon: {
7
7
  icon: item?.icon,
8
8
  }, text: item?.description, topic: item.title }, index))) }));
9
9
  };
package/dist/components/stats/stats.css CHANGED
@@ -1,48 +1,63 @@
1
- .c-stats {
2
- --c-stats-icon--size: 5em;
1
+ .dsa-stats {
2
+ --dsa-stats--gap-vertical: var(--ks-spacing-stack-l);
3
+ --dsa-stats--gap-horizontal: var(--ks-spacing-inline-m);
4
+ --dsa-stats__item--gap: var(--ks-spacing-stack-xs);
5
+ --dsa-stats__icon--color: var(--ks-text-color-primary);
6
+ --dsa-stats__icon--size: 5em;
7
+ --dsa-stats__number--font: var(--ks-font-display-xl);
8
+ --dsa-stats__number--font-weight: var(--ks-font-weight-semi-bold);
9
+ --dsa-stats__number--backgroud: linear-gradient(
10
+ 135deg,
11
+ var(--ks-color-primary-base) 0%,
12
+ var(--ks-color-secondary-base) 100%
13
+ );
14
+ --dsa-stats__topic__font: var(--ks-font-interface-xl);
15
+ --dsa-stats__topic--color: var(--ks-text-color-display);
16
+ --dsa-stats__copy--font: var(--ks-font-copy-s);
17
+ --dsa-stats__copy--color: var(--ks-text-color-default);
3
18
  }
4
19
 
5
- .c-stats {
20
+ .dsa-stats {
6
21
  display: flex;
7
22
  justify-content: center;
8
- gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-m);
23
+ gap: var(--dsa-stats--gap-vertical, var(--ks-spacing-stack-l)) var(--dsa-stats--gap-horizontal, var(--ks-spacing-inline-m));
9
24
  flex-wrap: wrap;
10
25
  align-items: center;
11
26
  }
12
- .c-stats .l-container--rich-text {
27
+ .dsa-stats .l-container--rich-text {
13
28
  width: 100%;
14
29
  }
15
- .c-stats__item.c-count-up {
30
+ .dsa-stats__item.c-count-up {
16
31
  flex: 1 1;
17
32
  flex-basis: 200px;
18
33
  display: flex;
19
34
  flex-direction: column;
20
35
  align-items: center;
21
- gap: var(--ks-spacing-stack-xs);
36
+ gap: var(--dsa-stats__item--gap, var(--ks-spacing-stack-xs));
22
37
  max-width: 400px;
23
38
  }
24
- .c-stats__item.c-count-up > * {
39
+ .dsa-stats__item.c-count-up > * {
25
40
  margin: 0;
26
41
  }
27
- .c-stats .c-count-up__number {
28
- background: linear-gradient(135deg, var(--ks-color-primary-base) 0%, var(--ks-color-secondary-base) 100%);
42
+ .dsa-stats .c-count-up__number {
43
+ background: var(--dsa-stats__number--backgroud, linear-gradient(135deg, var(--ks-color-primary-base) 0%, var(--ks-color-secondary-base) 100%));
29
44
  -webkit-background-clip: text;
30
45
  -webkit-text-fill-color: transparent;
31
- font: var(--ks-font-display-xl);
32
- font-weight: var(--ks-font-weight-semi-bold);
46
+ font: var(--dsa-stats__number--font, var(--ks-font-display-xl));
47
+ font-weight: var(--dsa-stats__number--font-weight, var(--ks-font-weight-semi-bold));
33
48
  }
34
- .c-stats .c-count-up__icon {
35
- color: var(--ks-text-color-primary);
36
- width: var(--c-stats-icon--size);
37
- height: var(--c-stats-icon--size);
49
+ .dsa-stats .c-count-up__icon {
50
+ color: var(--dsa-stats__icon--color, var(--ks-text-color-primary));
51
+ width: var(--dsa-stats__icon--size, 5rem);
52
+ height: var(--dsa-stats__icon--size, 5rem);
38
53
  }
39
- .c-stats .c-count-up__topic {
40
- color: var(--ks-color-fg);
41
- font: var(--ks-font-interface-xl);
54
+ .dsa-stats .c-count-up__topic {
55
+ color: var(--dsa-stats__topic--color, var(--ks-text-color-display));
56
+ font: var(--dsa-stats__topic__font, var(--ks-font-interface-xl));
42
57
  text-align: center;
43
58
  }
44
- .c-stats .c-count-up__text {
45
- color: var(--ks-text-color-default);
46
- font: var(--ks-font-copy-s);
59
+ .dsa-stats .c-count-up__text {
60
+ color: var(--dsa-stats__copy--color, var(--ks-text-color-default));
61
+ font: var(--dsa-stats__copy--font, var(--ks-font-copy-s));
47
62
  text-align: center;
48
63
  }
package/dist/components/testimonials/index.js CHANGED
@@ -6,10 +6,10 @@ import '@kickstartds/content/lib/slider';
6
6
 
7
7
  const ConditionalSlider = ({ layout, children, arrows, nav, ...props }) => {
8
8
  if (layout === "slider") {
9
- return (jsx(Slider, { className: "c-testimonials c-testimonials--slider", arrows: arrows, nav: nav, ...props, children: children }));
9
+ return (jsx(Slider, { className: "dsa-testimonials dsa-testimonials--slider", arrows: arrows, nav: nav, ...props, children: children }));
10
10
  }
11
11
  else {
12
- return (jsx("div", { className: "c-testimonials c-testimonials--list", ...props, children: children }));
12
+ return (jsx("div", { className: "dsa-testimonials dsa-testimonials--list", ...props, children: children }));
13
13
  }
14
14
  };
15
15
  const Testimonials = ({ items, layout = "slider", ...props }) => {
package/dist/components/testimonials/testimonials.css CHANGED
@@ -1,63 +1,62 @@
1
- .c-testimonials .c-quote {
2
- --c-quote_text--font: var(--ks-font-copy-l);
3
- --c-quote_source--color: var(--ks-color-fg);
4
- --c-quote_source--font: var(--ks-font-copy-m);
5
- --c-quote_content--padding-left: var(--ks-spacing-xl);
6
- --c-quote_icon--font-family: var(--ks-font-family-copy);
7
- --c-quote_icon--font-size: 3em;
8
- --c-quote_icon--color: var(--ks-text-color-primary);
9
- --c-quote_byline--font: var(--ks-font-copy-m);
10
- --c-quote_byline--font-weight: var(--ks-font-weight-regular);
11
- --c-quote_byline--color: var(--ks-text-color-default);
12
- --c-quote_content--padding-left: var(--ks-spacing-xl);
1
+ .dsa-testimonials {
2
+ --dsa-testimonial__list--gap: var(--ks-spacing-stack-xl);
13
3
  }
14
4
  @container quote (min-width: 640px) {
15
- .c-testimonials .c-quote {
16
- --c-quote_image--max-width: 40%;
5
+ .dsa-testimonials {
6
+ --dsa-testimonial__image--max-width: 40%;
17
7
  }
18
8
  }
19
9
  @container quote (min-width: 960px) {
20
- .c-testimonials .c-quote {
10
+ .dsa-testimonials {
21
11
  --c-quote_content--padding-left: var(--ks-spacing-l);
22
12
  }
23
13
  }
24
- .c-testimonials .c-slider-main {
14
+
15
+ .dsa-testimonials .c-quote {
16
+ --c-quote_source--font: var(--dsa-testimonial__source--font, var(--ks-font-copy-m));
17
+ --c-quote_icon--font-family: var(--dsa-testimonial__icon--font-family, var(--ks-font-family-copy));
18
+ --c-quote_icon--font-size: var(--dsa-testimonial__icon--font-size, 3em);
19
+ --c-quote_icon--color: var(--dsa-testimonial__icon--color, var(--ks-text-color-primary));
20
+ --c-quote_byline--font: var(--dsa-testimonial__byline--font, var(--ks-font-copy-m));
21
+ --c-quote_byline--font-weight: var(--dsa-testimonial__byline--font-weight, var(--ks-font-weight-regular));
22
+ --c-quote_image--max-width: var(--dsa-testimonial__image--max-width, 40%);
23
+ }
24
+ .dsa-testimonials .c-slider-main {
25
25
  --c-slider_bullet--outline-color-active: var(--ks-text-color-primary);
26
26
  --c-slider_bullet--size: 1rem;
27
27
  }
28
-
29
- .c-testimonials--list {
28
+ .dsa-testimonials--list {
30
29
  display: flex;
31
30
  flex-direction: column;
32
- gap: var(--ks-spacing-stack-xl);
31
+ gap: var(--dsa-testimonial__list--gap, var(--ks-spacing-stack-xl));
33
32
  }
34
- .c-testimonials .c-quote__source {
35
- color: var(--c-quote_source--color);
33
+ .dsa-testimonials .c-quote__source {
34
+ color: var(--dsa-testimonial__source--color, var(--ks-text-color-default));
36
35
  }
37
- .c-testimonials .c-quote__byline {
38
- color: var(--c-quote_byline--color);
36
+ .dsa-testimonials .c-quote__byline {
37
+ color: var(--dsa-testimonial__byline--color, var(--ks-text-color-copy));
39
38
  }
40
- .c-testimonials .c-quote__text {
41
- margin-bottom: var(--ks-spacing-stack-s);
39
+ .dsa-testimonials .c-quote__text {
40
+ margin-bottom: var(--testimonials__copy--margin-bottom, var(--ks-spacing-stack-s));
42
41
  }
43
- .c-testimonials .c-quote--reverse {
42
+ .dsa-testimonials .c-quote--reverse {
44
43
  flex-direction: row-reverse;
45
44
  }
46
- .c-testimonials .c-quote--reverse .c-quote__content {
47
- padding-right: var(--c-quote_content--padding-left);
45
+ .dsa-testimonials .c-quote--reverse .c-quote__content {
46
+ padding-right: var(--dsa-testimonial--padding-left, var(--ks-spacing-xl));
48
47
  padding-left: unset;
49
48
  }
50
- .c-testimonials .c-quote--reverse .c-quote__content:before {
49
+ .dsa-testimonials .c-quote--reverse .c-quote__content:before {
51
50
  right: var(--c-quote_icon--left, calc(var(--c-quote_content--padding-left) / -2));
52
51
  top: 0;
53
52
  left: unset;
54
53
  }
55
- .c-testimonials .c-quote .c-quote__content {
56
- font: var(--c-quote_text--font);
54
+ .dsa-testimonials .c-quote .c-quote__content {
55
+ font: var(--dsa-testimonial__copy--font, var(--ks-font-copy-l));
57
56
  }
58
- .c-testimonials .c-quote .c-quote__content::before {
57
+ .dsa-testimonials .c-quote .c-quote__content::before {
59
58
  line-height: 0.7;
60
59
  }
61
- .c-testimonials .c-slider .c-slider-nav {
60
+ .dsa-testimonials .c-slider .c-slider-nav {
62
61
  margin-top: var(--ks-spacing-stack-s);
63
62
  }
package/dist/components/video-curtain/index.js CHANGED
@@ -14,7 +14,7 @@ const VideoCurtain = ({ headline, sub, text, highlightText, colorNeutral, textPo
14
14
  // @ts-expect-error
15
15
  , {
16
16
  // @ts-expect-error
17
- value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { skipButton: true, className: classnames(`c-video-curtain`, highlightText ? `c-video-curtain--highlight-text` : "", colorNeutral ? `c-video-curtain--color-neutral` : ""), height: "fullScreen", inbox: true, box: {
17
+ value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { skipButton: true, className: classnames(`dsa-video-curtain`, highlightText ? `dsa-video-curtain--highlight-text` : "", colorNeutral ? `dsa-video-curtain--color-neutral` : ""), height: "fullScreen", inbox: true, box: {
18
18
  background: "transparent",
19
19
  enabled: true,
20
20
  vertical: "center",
package/dist/components/video-curtain/video-curtain.css CHANGED
@@ -1,4 +1,28 @@
1
- :root .c-visual.c-video-curtain {
1
+ .dsa-video-curtain {
2
+ --dsa-video-curtain__headline--color: var(--dsa-headline__headline--color);
3
+ --dsa-video-curtain__subheadline--color: var(--dsa-headline__subheadline--color);
4
+ --dsa-video-curtain_color-neutral__headline--color: var(--ks-text-color-default);
5
+ --dsa-video-curtain_color-neutral__subheadline--color: var(--ks-text-color-default);
6
+ --dsa-video-curtain__copy--color: var(--ks-text-color-default);
7
+ --dsa-video-curtain__copy--font: var(--dsa-rich-text--font);
8
+ --dsa-video-curtain_highlight-text__copy--font: var(--ks-font-copy-l);
9
+ --dsa-video-curtain_color-neutral__copy--color: var(--ks-text-color-default);
10
+ --dsa-video-curtain__textbox--border-radius: var(--ks-border-radius-surface);
11
+ --dsa-video-curtain__textbox--padding: var(--ks-spacing-inset-squish-xl);
12
+ --dsa-video-curtain__texbox--background-color: var(--ks-color-bg-alpha-2);
13
+ --dsa-video-curtain__overlay--background: linear-gradient(
14
+ 0deg,
15
+ var(--ks-background-color-default) 15%,
16
+ transparent 50%
17
+ );
18
+ }
19
+
20
+ .l-container--visual {
21
+ /* stylelint-disable-next-line property-no-unknown */
22
+ container-name: visual;
23
+ }
24
+
25
+ .c-visual.dsa-video-curtain {
2
26
  --c-visual_overlay--background: radial-gradient(
3
27
  50% 126.2% at 100% 0%,
4
28
  var(--ks-color-primary-alpha-5) 0%,
@@ -6,46 +30,60 @@
6
30
  );
7
31
  --c-visual_overlay--background-size: 100%;
8
32
  }
9
- :root .c-visual.c-video-curtain--highlight-text .c-visual__box {
33
+ .c-visual.dsa-video-curtain--highlight-text .c-visual__box {
10
34
  --c-visual_text--font: var(--ks-font-copy-l);
11
35
  }
12
- :root .c-visual.c-video-curtain .c-visual__box {
36
+ .c-visual.dsa-video-curtain .c-visual__box {
13
37
  --c-visual_box--background: var(--ks-background-color-default);
14
38
  --c-visual_box--color: var(--ks-color-fg);
15
39
  --c-visual_subheadline--color: var(--ks-text-color-primary);
16
40
  --c-visual_headline--color: var(--ks-color-fg);
17
41
  }
18
42
  @container visual (min-width: 640px) {
19
- :root .c-visual.c-video-curtain .c-visual__box {
43
+ .c-visual.dsa-video-curtain .c-visual__box {
20
44
  --c-visual_box--max-width: 50rem;
21
45
  }
22
46
  }
23
47
 
24
- .l-container--visual {
25
- /* stylelint-disable-next-line property-no-unknown */
26
- container-name: visual;
48
+ .c-visual.dsa-video-curtain {
49
+ --c-visual_overlay--background-size: 100%;
50
+ }
51
+ .c-visual.dsa-video-curtain .c-visual__box {
52
+ --c-visual_box--background: var(--dsa-video-curtain__texbox--background-color, var(--ks-color-bg-alpha-2));
53
+ --c-visual_box--color: var(--dsa-video-curtain__copy--color, var(--ks-text-color-default));
54
+ --c-visual_box--border-radius: var(--dsa-video-curtain__textbox--border-radius, var(--ks-border-radius-surface));
55
+ --c-visual_box--padding: var(--dsa-video-curtain__textbox--padding, var(--ks-spacing-inset-squish-xl));
56
+ --c-visual_text--font: var(--dsa-video-curtain__copy--font, var(--dsa-rich-text--font));
57
+ }
58
+ .c-visual.dsa-video-curtain--highlight-text.c-visual {
59
+ --dsa-video-curtain__copy--font: var(--dsa-video-curtain_highlight-text__box--font, var(--ks-font-copy-l));
60
+ }
61
+ .c-visual.dsa-video-curtain--color-neutral.c-visual {
62
+ --dsa-video-curtain__copy--color: var(--dsa-video-curtain_color-neutral__copy--color, var(--ks-text-color-default));
63
+ --dsa-video-curtain__headline--color: var(
64
+ --dsa-video-curtain_color-neutral__copy--color,
65
+ var(--ks-text-color-default)
66
+ );
67
+ --dsa-video-curtain__subheadline--color: var(
68
+ --dsa-video-curtain_color-neutral__copy--color,
69
+ var(--ks-text-color-default)
70
+ );
27
71
  }
28
72
 
29
- .c-visual.c-video-curtain {
30
- --c-visual--text-color-neutral: var(--ks-color-fg);
73
+ .c-visual.dsa-video-curtain .dsa-headline .dsa-headline__headline {
74
+ color: var(--dsa-video-curtain__headline--color, var(--dsa-headline__headline--color, var(--ks-text-color-display)));
75
+ }
76
+ .c-visual.dsa-video-curtain .dsa-headline .dsa-headline__subheadline {
77
+ color: var(--dsa-video-curtain__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));
31
78
  }
32
- .c-visual.c-video-curtain .c-button-group {
79
+ .c-visual.dsa-video-curtain .c-button-group {
33
80
  --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
34
81
  --c-button-group--horizontal-gutter: var(--ks-spacing-inline-m);
35
82
  }
36
- .c-visual.c-video-curtain--color-neutral.c-visual .c-visual__box {
37
- --c-visual_text--color: var(--c-visual--text-color-neutral);
38
- --c-visual_subheadline--color: var(--c-visual--text-color-neutral);
39
- }
40
- .c-visual.c-video-curtain .dsa-headline .dsa-headline__subheadline {
41
- color: var(--c-visual_subheadline--color);
42
- }
43
- .c-visual.c-video-curtain.c-visual--full {
83
+ .c-visual.dsa-video-curtain.c-visual--full {
44
84
  height: 100vh;
45
85
  }
46
- .c-visual.c-video-curtain .c-visual__box {
86
+ .c-visual.dsa-video-curtain .c-visual__box {
47
87
  max-width: var(--c-visual_box--max-width);
48
- }
49
- .c-visual.c-video-curtain .c-visual__content--indent {
50
- max-width: var(--l-section--content-width-wide);
88
+ padding: var(--c-visual_box--padding);
51
89
  }
package/dist/static/tokens-business.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Feb 2024 07:35:19 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:12: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 Thu, 29 Feb 2024 07:35:27 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:12:43 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 Thu, 29 Feb 2024 07:35:22 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:12: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 Thu, 29 Feb 2024 07:35:24 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:12:40 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 Thu, 29 Feb 2024 07:35:16 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:12:33 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 Thu, 29 Feb 2024 07:35:16 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:12:33 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 Thu, 29 Feb 2024 07:35:16 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:12:33 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.183.909265f.0",
3
+ "version": "1.2.10--canary.189.8b5031c.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {