@kickstartds/ds-agency-premium 1.2.10--canary.181.46699f2.0 → 1.2.10--canary.186.6a0656e.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 (16) hide show
  1. package/dist/components/logo/index.js +1 -1
  2. package/dist/components/logos/index.js +1 -1
  3. package/dist/components/logos/logos.css +64 -52
  4. package/dist/components/mosaic/index.js +1 -1
  5. package/dist/components/mosaic/mosaic.css +22 -32
  6. package/dist/components/page-wrapper/tokens.css +1 -1
  7. package/dist/components/stats/index.js +1 -1
  8. package/dist/components/stats/stats.css +37 -22
  9. package/dist/static/tokens-business.css +1 -1
  10. package/dist/static/tokens-google.css +1 -1
  11. package/dist/static/tokens-ngo.css +1 -1
  12. package/dist/static/tokens-telekom.css +1 -1
  13. package/dist/static/tokens.css +1 -1
  14. package/dist/tokens/tokens.css +1 -1
  15. package/dist/tokens/tokens.js +1 -1
  16. package/package.json +1 -1
package/dist/components/logo/index.js CHANGED
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef, createContext, useContext } from 'react';
3
3
  import { Picture } from '@kickstartds/base/lib/picture';
4
4
 
5
- const LogoContextDefault = forwardRef(({ src, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "c-logos__logo", children: jsx(Picture, { src: src }) })));
5
+ const LogoContextDefault = forwardRef(({ src, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "dsa-logos__logo", children: jsx(Picture, { src: src }) })));
6
6
  const LogoContext = createContext(LogoContextDefault);
7
7
  const Logo = forwardRef((props, ref) => {
8
8
  const Component = useContext(LogoContext);
package/dist/components/logos/index.js CHANGED
@@ -6,7 +6,7 @@ import { Button } from '@kickstartds/base/lib/button';
6
6
  import { Link } from '@kickstartds/base/lib/link';
7
7
 
8
8
  const Logos = ({ items = [], tagline, align, cta, logosPerRow = "6", }) => {
9
- return (jsx(Fragment, { children: jsxs("div", { className: classnames(`c-logos c-logos--align-${align}`), children: [jsx("div", { className: "c-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`c-logo-tiles--cols-${logosPerRow}`), logos: items }), cta?.toggle ? (jsxs("div", { className: "c-logos__cta", children: [jsxs("div", { className: "c-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "c-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }));
9
+ return (jsx(Fragment, { children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: items }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }));
10
10
  };
11
11
 
12
12
  export { Logos };
package/dist/components/logos/logos.css CHANGED
@@ -1,91 +1,103 @@
1
- .c-logos .c-logo-tiles {
2
- --c-logo-tiles--cols: 2;
3
- --c-logo-tiles--gutter: 2em;
1
+ .l-container--logos {
2
+ /* stylelint-disable-next-line property-no-unknown */
3
+ container-name: logos;
4
4
  }
5
- @container logo-tiles (min-width: 420px) {
6
- .c-logos .c-logo-tiles {
7
- --c-logo-tiles--cols: 3;
8
- --c-logo-tiles--gutter: 2em;
9
- }
10
- .c-logos .c-logo-tiles--cols-2 {
11
- --c-logo-tiles--cols: 2;
12
- }
13
- }
14
- @container logo-tiles (min-width: 640px) {
15
- .c-logos .c-logo-tiles--cols-2 {
16
- --c-logo-tiles--cols: 2;
17
- }
18
- .c-logos .c-logo-tiles--cols-3 {
19
- --c-logo-tiles--cols: 3;
20
- }
21
- .c-logos .c-logo-tiles--cols-4 {
22
- --c-logo-tiles--cols: 4;
23
- }
24
- .c-logos .c-logo-tiles--cols-5 {
25
- --c-logo-tiles--cols: 5;
26
- }
27
- .c-logos .c-logo-tiles--cols-6 {
28
- --c-logo-tiles--cols: 6;
29
- }
30
- .c-logos .c-logo-tiles--cols-7 {
31
- --c-logo-tiles--cols: 7;
32
- }
33
- .c-logos .c-logo-tiles--cols-8 {
34
- --c-logo-tiles--cols: 8;
35
- }
5
+
6
+ .dsa-logos {
7
+ --dsa-logos-gap: var(--ks-spacing-stack-m);
8
+ --dsa-logos-tagline--font: var(--dsa-headline_h3--font);
9
+ --dsa-logos-tagline--font-weight: var(--dsa-headline--font-weight);
10
+ --dsa-logos-tagline--color: var(--dsa-headline--color);
11
+ --dsa-logos__grid--gap-horizontal: var(--ks-spacing-inline-l);
12
+ --dsa-logos__grid--gap-vertical: var(--ks-spacing-stack-s);
13
+ --dsa-logos__grid_mobile--cols: 2;
14
+ --dsa-logos__grid_tablet--cols: 3;
36
15
  }
37
16
 
38
- .c-logos {
17
+ .dsa-logos {
39
18
  display: flex;
40
19
  flex-direction: column;
41
- gap: var(--ks-spacing-stack-m);
20
+ gap: var(--dsa-logos-gap, var(--ks-spacing-stack-m));
42
21
  }
43
- .c-logos__tagline {
44
- font: var(--ks-font-display-m);
22
+ .dsa-logos__tagline {
23
+ font: var(--dsa-logos-tagline--font, var(--ks-font-display-m));
24
+ font-weight: var(--dsa-logos-tagline--font-weight, var(--dsa-headline--font-weight));
45
25
  max-width: var(--l-section--content-width-narrow);
46
- color: var(--ks-color-fg);
26
+ color: var(--dsa-logos-tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
47
27
  width: 100%;
48
28
  }
49
- .c-logos__cta {
29
+ .dsa-logos__cta {
50
30
  display: flex;
51
31
  flex-direction: column;
52
32
  gap: var(--ks-spacing-stack-m);
53
33
  }
54
- .c-logos__cta .c-button {
34
+ .dsa-logos__cta .c-button {
55
35
  width: fit-content;
56
36
  }
57
- .c-logos__cta__text {
37
+ .dsa-logos__cta__text {
58
38
  color: var(--ks-text-color-default);
59
39
  max-width: var(--l-section--content-width-narrow);
60
40
  }
61
- .c-logos__cta__text, .c-logos__cta__link {
41
+ .dsa-logos__cta__text, .dsa-logos__cta__link {
62
42
  font: var(--ks-font-copy-m);
63
43
  }
64
- .c-logos--align-left .c-logo-tiles {
44
+ .dsa-logos--align-left .dsa-logo-tiles {
65
45
  justify-content: start;
66
46
  }
67
- .c-logos--align-center .c-logos__cta {
47
+ .dsa-logos--align-center .dsa-logos__cta {
68
48
  align-items: center;
69
49
  }
70
- .c-logos--align-center .c-logos__cta__text,
71
- .c-logos--align-center .c-logos__tagline {
50
+ .dsa-logos--align-center .dsa-logos__cta__text,
51
+ .dsa-logos--align-center .dsa-logos__tagline {
72
52
  text-align: center;
73
53
  margin: auto;
74
54
  }
75
- .c-logos .c-logo-tiles {
76
- gap: calc(var(--c-logo-tiles--gutter) / 2) var(--c-logo-tiles--gutter);
55
+ .dsa-logos .dsa-logo-tiles {
56
+ --dsa-logo-tiles--cols: var(--dsa-logos__grid_mobile--cols, 2);
57
+ gap: var(--dsa-logos__grid--gap-horizontal) var(--dsa-logos__grid--gap-horizontal);
77
58
  margin: 0;
78
59
  }
79
- .c-logos .c-logo-tiles__col {
60
+ @container logo-tiles (min-width: 420px) {
61
+ .dsa-logos .dsa-logo-tiles {
62
+ --dsa-logo-tiles--cols: var(--dsa-logos__grid_tablet--cols, 3);
63
+ }
64
+ .dsa-logos .dsa-logo-tiles--cols-2 {
65
+ --dsa-logo-tiles--cols: 2;
66
+ }
67
+ }
68
+ @container logo-tiles (min-width: 640px) {
69
+ .dsa-logos .dsa-logo-tiles--cols-2 {
70
+ --dsa-logo-tiles--cols: 2;
71
+ }
72
+ .dsa-logos .dsa-logo-tiles--cols-3 {
73
+ --dsa-logo-tiles--cols: 3;
74
+ }
75
+ .dsa-logos .dsa-logo-tiles--cols-4 {
76
+ --dsa-logo-tiles--cols: 4;
77
+ }
78
+ .dsa-logos .dsa-logo-tiles--cols-5 {
79
+ --dsa-logo-tiles--cols: 5;
80
+ }
81
+ .dsa-logos .dsa-logo-tiles--cols-6 {
82
+ --dsa-logo-tiles--cols: 6;
83
+ }
84
+ .dsa-logos .dsa-logo-tiles--cols-7 {
85
+ --dsa-logo-tiles--cols: 7;
86
+ }
87
+ .dsa-logos .dsa-logo-tiles--cols-8 {
88
+ --dsa-logo-tiles--cols: 8;
89
+ }
90
+ }
91
+ .dsa-logos .dsa-logo-tiles .c-logo-tiles__col {
80
92
  margin: 0;
81
93
  aspect-ratio: 16/9;
82
94
  display: flex;
83
95
  justify-content: center;
84
96
  align-items: center;
85
97
  }
86
- .c-logos .c-logo-tiles__col::after {
98
+ .dsa-logos .dsa-logo-tiles .c-logo-tiles__col::after {
87
99
  content: none;
88
100
  }
89
- .c-logos .c-logo-tiles img {
101
+ .dsa-logos .dsa-logo-tiles img {
90
102
  position: relative;
91
103
  }
package/dist/components/mosaic/index.js CHANGED
@@ -2,7 +2,7 @@ import "./mosaic.css";
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import { Storytelling } from '@kickstartds/content/lib/storytelling';
4
4
 
5
- const Mosaic = ({ layout, largeHeadlines, tiles }) => (jsx("div", { className: "c-mosaic", children: tiles.map((tile, index) => (jsx(Storytelling, { full: true, backgroundColor: tile.backgroundColor, backgroundImage: tile.backgroundImage, box: {
5
+ const Mosaic = ({ layout, largeHeadlines, tiles }) => (jsx("div", { className: "dsa-mosaic", children: tiles.map((tile, index) => (jsx(Storytelling, { full: true, backgroundColor: tile.backgroundColor, backgroundImage: tile.backgroundImage, box: {
6
6
  headline: {
7
7
  text: tile?.headline,
8
8
  sub: tile?.sub,
package/dist/components/mosaic/mosaic.css CHANGED
@@ -1,35 +1,25 @@
1
- .c-header--spacer + .l-container {
2
- position: relative;
3
- }
4
- .c-header--spacer + .l-container .c-visual {
5
- margin-top: calc(var(--g-header-height) * -1);
6
- z-index: 1;
1
+ .dsa-mosaic {
2
+ --dsa-mosaic--vertical-padding: var(--l-section--space-default);
3
+ --dsa-mosaic--horizontal-padding: var(--l-section--content-padding);
4
+ --dsa-mosaic__copy--font: var(--dsa-rich-text--font);
5
+ --dsa-mosaic__copy--color: var(--ks-text-color-default);
6
+ --dsa-mosaic__headline--color: var(--dsa-headline--color);
7
+ --dsa-mosaic__headline--font: var(--dsa-headline_h2--font);
8
+ --dsa-mosaic__subheadline--color: var(--dsa-headline__subheadline--color);
9
+ --dsa-mosaic__subheadline--font: var(--dsa-headline-font-copy-xs);
7
10
  }
8
11
 
9
- .c-visual {
10
- display: flex;
11
- flex-direction: column;
12
- }
13
- .c-visual .dsa-headline {
14
- --c-headline--color: var(--ks-color-fg);
15
- }
16
- .c-visual .dsa-headline .dsa-headline__subheadline {
17
- --c-headline_subheadline--color: var(--ks-text-color-primary);
18
- }
19
- .c-visual.c-visual--full {
20
- height: 100%;
21
- }
22
- .c-visual .c-visual__box {
23
- max-width: 100%;
24
- }
25
- @container visual (min-width: 640px) {
26
- .c-visual.c-visual--full {
27
- height: 100vh;
28
- }
29
- .c-visual .c-visual__box {
30
- max-width: var(--c-visual_box--max-width);
31
- }
32
- }
33
- .c-visual .c-visual__content--indent {
34
- max-width: var(--l-section--content-width-wide);
12
+ .dsa-mosaic .dsa-headline__headline {
13
+ font: var(--dsa-mosaic__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
14
+ color: var(--dsa-mosaic__headline--color, var(--ks-text-color-display));
15
+ font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
16
+ }
17
+ .dsa-mosaic .dsa-headline__subheadline {
18
+ font: var(--dsa-mosaic__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
19
+ color: var(--dsa-mosaic__subheadline--color, var(--ks-text-color-primary));
20
+ font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
21
+ }
22
+ .dsa-mosaic .c-rich-text {
23
+ font: var(--dsa-mosaic__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
24
+ color: var(--dsa-mosaic__copy--color, var(--das-rich-text--color, var(--ks-text-color-copy)));
35
25
  }
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 14:22:31 GMT
3
+ * Generated on Thu, 29 Feb 2024 07:48:22 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/static/tokens-business.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 28 Feb 2024 14:22:35 GMT
3
+ * Generated on Thu, 29 Feb 2024 07:48:25 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 14:22:44 GMT
3
+ * Generated on Thu, 29 Feb 2024 07:48:32 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 14:22:38 GMT
3
+ * Generated on Thu, 29 Feb 2024 07:48:27 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 14:22:41 GMT
3
+ * Generated on Thu, 29 Feb 2024 07:48:30 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 14:22:31 GMT
3
+ * Generated on Thu, 29 Feb 2024 07:48:22 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 14:22:31 GMT
3
+ * Generated on Thu, 29 Feb 2024 07:48:22 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 14:22:32 GMT
3
+ * Generated on Thu, 29 Feb 2024 07:48:22 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.181.46699f2.0",
3
+ "version": "1.2.10--canary.186.6a0656e.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {