@kickstartds/ds-agency-premium 1.2.10--canary.186.6a0656e.0 → 1.2.10--canary.193.61df4e9.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/testimonials/index.js +2 -2
  3. package/dist/components/testimonials/testimonials.css +32 -33
  4. package/dist/components/text/index.js +3 -3
  5. package/dist/components/text/text.css +4 -4
  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:48:22 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:35:26 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/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/text/index.js CHANGED
@@ -5,9 +5,9 @@ import { forwardRef, createContext, useContext } from 'react';
5
5
  import { RichText } from '@kickstartds/base/lib/rich-text';
6
6
 
7
7
  const TextContextDefault = forwardRef(({ text, layout = "singleColumn", align = "left", highlightText = false, ...rest }, ref) => {
8
- const layoutClass = `${layout === "multiColumn" ? "c-rich-text--columns" : ""}`;
9
- const highlightClass = `${highlightText ? "c-rich-text--highlight" : ""}`;
10
- const alignClass = `${align === "center" ? "c-rich-text--center" : ""}`;
8
+ const layoutClass = `${layout === "multiColumn" ? "dsa-text--columns" : ""}`;
9
+ const highlightClass = `${highlightText ? "dsa-text--highlight" : ""}`;
10
+ const alignClass = `${align === "center" ? "dsa-text--center" : ""}`;
11
11
  return (jsx(RichText, { ...rest, ref: ref, className: classnames("dsa-text", `${layoutClass}`, `${alignClass}`, `${highlightClass}`), text: text }));
12
12
  });
13
13
  const TextContext = createContext(TextContextDefault);
package/dist/components/text/text.css CHANGED
@@ -1,8 +1,8 @@
1
1
  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
2
2
  --dsa-text--font: var(--dsa-rich-text--font);
3
3
  --dsa-text--color: var(--dsa-rich-text--color);
4
- --dsa-text__highlight--color: var(--ks-text-color-default);
5
- --dsa-text__highlight--font: var(--ks-font-copy-l);
4
+ --dsa-text_highlight--color: var(--ks-text-color-default);
5
+ --dsa-text_highlight--font: var(--ks-font-copy-l);
6
6
  --dsa-text__col--width: 16em;
7
7
  --dsa-text__col--gap: var(--ks-spacing-inline-m);
8
8
  }
@@ -12,8 +12,8 @@
12
12
  color: var(--dsa-text--color, var(--dsa-rich-text--color), var(--ks-text-color-default));
13
13
  }
14
14
  .c-rich-text.dsa-text--highlight.c-rich-text {
15
- color: var(--dsa-text-highlight--color, var(--ks-text-color-primary));
16
- font: var(--dsa-text-highlight--font, var(--ks-font-copy-l));
15
+ color: var(--dsa-text_highlight--color, var(--ks-text-color-default));
16
+ font: var(--dsa-text_highlight--font, var(--ks-font-copy-l));
17
17
  }
18
18
  .c-rich-text.dsa-text--center.c-rich-text {
19
19
  text-align: center;
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:48:25 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:35:29 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:48:32 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:35:36 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:48:27 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:35:31 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:48:30 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:35:34 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:48:22 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:35:26 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:48:22 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:35:26 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:48:22 GMT
3
+ * Generated on Thu, 29 Feb 2024 08:35:27 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.186.6a0656e.0",
3
+ "version": "1.2.10--canary.193.61df4e9.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {