@kickstartds/ds-agency-premium 1.3.3 → 1.3.4

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 (11) hide show
  1. package/dist/components/blog-post/index.d.ts +1 -1
  2. package/dist/components/index/index.d.ts +1 -1
  3. package/dist/components/page-wrapper/tokens.css +1 -1
  4. package/dist/components/section/index.js +3 -3
  5. package/dist/components/section/js/spotlight.client.js +4 -4
  6. package/dist/components/section/section.css +134 -62
  7. package/dist/tokens/themes.css +4 -4
  8. package/dist/tokens/tokens.css +1 -1
  9. package/dist/tokens/tokens.js +1 -1
  10. package/package.json +1 -1
  11. /package/dist/{BlogPostProps-e1cbd5d3.d.ts → BlogPostProps-0910f130.d.ts} +0 -0
package/dist/components/blog-post/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { BlogPostProps } from "../../BlogPostProps-e1cbd5d3.js";
2
+ import { BlogPostProps } from "../../BlogPostProps-0910f130.js";
3
3
  declare const BlogPost: {
4
4
  ({ head, content, aside, cta }: BlogPostProps): import("react/jsx-runtime").JSX.Element;
5
5
  displayName: string;
package/dist/components/index/index.d.ts CHANGED
@@ -45,6 +45,6 @@ interface SettingsProps {
45
45
  */
46
46
  seo: SeoProps;
47
47
  }
48
- export * from "../../BlogPostProps-e1cbd5d3.js";
48
+ export * from "../../BlogPostProps-0910f130.js";
49
49
  export * from "../../BlogOverviewProps-f385fc47.js";
50
50
  export { Sections, PageProps, SettingsProps };
package/dist/components/page-wrapper/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Apr 2024 13:36:55 GMT
3
+ * Generated on Thu, 18 Apr 2024 13:49:20 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/section/index.js CHANGED
@@ -16,8 +16,8 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
16
16
  spotlight,
17
17
  content?.mode === "slider",
18
18
  ]);
19
- return (jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames(style !== "default" &&
20
- `l-section-style--${style === "verticalGradient"
19
+ return (jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
20
+ `dsa-section-style--${style === "verticalGradient"
21
21
  ? "vertical-gradient"
22
22
  : style === "horizontalGradient"
23
23
  ? "horizontal-gradient"
@@ -29,7 +29,7 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
29
29
  ? "symmetric-glow"
30
30
  : style === "anchorGlow"
31
31
  ? "anchor-glow"
32
- : style}`, headerSpacing && "l-section--header-spacing", spotlight && "l-section--spotlight", className), background: backgroundColor, content: content, headline: {
32
+ : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
33
33
  ...headlineRest,
34
34
  spaceAfter: "large",
35
35
  // @ts-expect-error
package/dist/components/section/js/spotlight.client.js CHANGED
@@ -1,12 +1,12 @@
1
1
  function onMousemove(event) {
2
- this.style.setProperty("--l-section--spotlight-top", `${event.clientY - this.getBoundingClientRect().top}px`);
3
- this.style.setProperty("--l-section--spotlight-left", `${event.clientX - this.getBoundingClientRect().left}px`);
2
+ this.style.setProperty("--dsa-section__spotlight--top", `${event.clientY - this.getBoundingClientRect().top}px`);
3
+ this.style.setProperty("--dsa-section__spotlight--left", `${event.clientX - this.getBoundingClientRect().left}px`);
4
4
  }
5
5
  const initSpotlight = (element) => {
6
6
  element.addEventListener("mousemove", onMousemove, { passive: true });
7
7
  return () => {
8
- element.style.removeProperty("--l-section--spotlight-top");
9
- element.style.removeProperty("--l-section--spotlight-left");
8
+ element.style.removeProperty("--dsa-section__spotlight--top");
9
+ element.style.removeProperty("--dsa-section__spotlight--left");
10
10
  element.removeEventListener("mousemove", onMousemove, { passive: true });
11
11
  };
12
12
  };
package/dist/components/section/section.css CHANGED
@@ -1,91 +1,166 @@
1
- .l-section {
2
- --l-section--background-color: var(--ks-background-color-default);
3
- --l-section--tile-width-control: 14rem;
4
- --l-section--tile-width-card: 20rem;
5
- --l-section--tile-width-narrow: var(--l-section--content-width-narrow);
6
- --l-section--tile-width-medium: var(--l-section--content-width-default);
7
- --l-section--tile-width-wide: var(--l-section--content-width-wide);
8
- --l-section_slider-arrow--color: var(--ks-text-color-interface-interactive);
9
- }
10
- .l-section--accent {
11
- --l-section--background-color: var(--ks-background-color-accent);
12
- }
13
- .l-section--bold {
14
- --l-section--background-color: var(--ks-background-color-bold);
15
- }
16
- .l-section-style--stagelights {
17
- --l-section--background-image: radial-gradient(
1
+ .dsa-section {
2
+ --dsa-section__col--min-width: var(--dsa-section_tile-width--default);
3
+ --dsa-section__col--max-width: 1fr;
4
+ --dsa-section__col--repeat: auto-fit;
5
+ --dsa-section--space_default: var(--ks-spacing-xxl);
6
+ --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
7
+ --dsa-section__tile--width_smallest: 14rem;
8
+ --dsa-section__tile--width_default: 18rem;
9
+ --dsa-section__tile--width_medium: var(--l-section--content-width-narrow);
10
+ --dsa-section__tile--width_large: var(--l-section--content-width-default);
11
+ --dsa-section__tile--width_largest: var(--l-section--content-width-wide);
12
+ --dsa-section--gutter_small: var(--ks-spacing-xs);
13
+ --dsa-section--gutter_default: var(--ks-spacing-m);
14
+ --dsa-section--gutter_large: var(--ks-spacing-xl);
15
+ --dsa-section__buttons--space-before: var(--ks-spacing-stack-m);
16
+ --dsa-section__content--width_narrow: 46.5rem;
17
+ --dsa-section__content--width_default: 62rem;
18
+ --dsa-section__content--width_wide: 75rem;
19
+ --dsa-section__content--width_max: 120rem;
20
+ --dsa-section__content--width_full: 120rem;
21
+ --dsa-section--background-color_default: var(--ks-color-bg);
22
+ --dsa-section--background-color_bold: var(--ks-background-color-bold);
23
+ --dsa-section--background-color_accent: var(--ks-background-color-accent);
24
+ --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
25
+ --dsa-section__slider-arrow--background-color: transparent;
26
+ --dsa-section__slider-arrow--size: 2rem;
27
+ --dsa-section__slider-arrow--padding: 0.5em;
28
+ --dsa-section__slider-arrow--opacity: 0.6;
29
+ --dsa-section__slider-arrow--opacity_hover: 1;
30
+ --dsa-section__slider-arrow--opacity_disabled: 0.3;
31
+ --dsa-section__slider-arrow--background: transparent;
32
+ --dsa-section_stagelights--background-image: radial-gradient(
18
33
  50% 150% at 100% -50%,
19
34
  var(--ks-color-primary-inverted-alpha-3) 0%,
20
35
  transparent 100%
21
36
  ),
22
37
  radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%);
23
- }
24
- .l-section-style--anchor-glow {
25
- --l-section--background-image: radial-gradient(
38
+ --dsa-section_anchor-glow--background-image: radial-gradient(
26
39
  50% 50% at 50% 100%,
27
40
  var(--ks-color-secondary-alpha-5) 0%,
28
41
  transparent 100%
29
42
  );
30
- }
31
- .l-section-style--symmetric-glow {
32
- --l-section--background-image: radial-gradient(
43
+ --dsa-section_symmetric-glow--background-image: radial-gradient(
33
44
  20% 50% at 100% 50%,
34
45
  var(--ks-color-primary-alpha-5) 0%,
35
46
  transparent 100%
36
47
  ),
37
48
  radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%);
38
- }
39
- .l-section-style--accent-transition {
40
- --l-section--background-image: linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%);
41
- }
42
- .l-section-style--bold-transition {
43
- --l-section--background-image: linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%);
44
- }
45
- .l-section-style--vertical-gradient {
46
- --l-section--background-image: linear-gradient(
49
+ --dsa-section_accent-transition--background-image: linear-gradient(
50
+ 180deg,
51
+ transparent 0%,
52
+ var(--ks-background-color-accent) 100%
53
+ );
54
+ --dsa-section_bold-transition--background-image: linear-gradient(
55
+ 180deg,
56
+ transparent 0%,
57
+ var(--ks-background-color-bold) 100%
58
+ );
59
+ --dsa-section_vertical-gradient--background-image: linear-gradient(
47
60
  0deg,
48
61
  var(--ks-color-primary-alpha-5) 0%,
49
62
  var(--ks-color-secondary-alpha-5) 100%
50
63
  );
51
- }
52
- .l-section-style--horizontal-gradient {
53
- --l-section--background-image: linear-gradient(
64
+ --dsa-section_horizontal-gradient--background-image: linear-gradient(
54
65
  90deg,
55
66
  var(--ks-color-primary-alpha-5) 0%,
56
67
  var(--ks-color-secondary-alpha-5) 100%
57
68
  );
58
- }
59
- .l-section--spotlight {
60
- --l-section--spotlight-left: 0;
61
- --l-section--spotlight-top: 0;
62
- --l-section--spotlight-color: var(--ks-color-primary-alpha-5);
63
- }
64
- .l-section__content {
65
- --l-section_tile-width--default: 20rem;
69
+ --dsa-section__spotlight--left: 50%;
70
+ --dsa-section__spotlight--top: 50%;
71
+ --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
66
72
  }
67
73
 
68
- :root .l-section {
69
- background-image: var(--l-section--background-image);
70
- background-color: var(--l-section--background-color);
74
+ .l-section.dsa-section {
75
+ --l-section--gutter: var(--dsa-section--gutter_default);
76
+ --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
77
+ --l-section_col--max-width: var(--dsa-section__col--min-width, 1fr);
78
+ --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
79
+ --l-section_tile-width--smallest: var(--dsa-section__tile--width_smallest, 14rem);
80
+ --l-section_tile-width--default: var(--dsa-section__tile--width_default, 18rem);
81
+ --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--l-section--content-width-narrow));
82
+ --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--l-section--content-width-default));
83
+ --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--l-section--content-width-wide));
84
+ --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, 46.5rem);
85
+ --l-section--content-width-default: var(--dsa-section__content--width_default, 62rem);
86
+ --l-section--content-width-wide: var(--dsa-section__content--width_wide, 75rem);
87
+ --l-section--content-width-max: var(--dsa-section__content--width_max, 120rem);
88
+ --l-section--content-width-full: var(--dsa-section__content--width_full, 120rem);
89
+ --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
90
+ --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
91
+ --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
92
+ --l-section--background-bold: var(
93
+ --dsa-section--background-color_bold,
94
+ var(--ks-background-color-primary)
95
+ );
96
+ --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
97
+ --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
98
+ --l-section--gutter-small: var(--dsa-section--gutter_small, var(--ks-spacing-xs));
99
+ --l-section--gutter-default: var(--dsa-section--gutter_default, var(--ks-spacing-m));
100
+ --l-section--gutter-large: var(--dsa-section--gutter_large, var(--ks-spacing-xl));
101
+ --l-section_slider-arrow--size: var(--dsa-section__slider-arrow--size, 2.5rem);
102
+ --l-section_slider-arrow--padding: var(--dsa-section__slider-arrow--padding, var(--ks-spacing-xs));
103
+ --l-section_slider-arrow--color: var(--dsa-section__slider-arrow--color, var(--ks-text-color-interface-interactive));
104
+ --l-section_slider-arrow--opacity: var(--dsa-section__slider-arrow--opacity, 0.6);
105
+ --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opcaity_hover, 0.9);
106
+ --l-section_slider-arrow--opacity_disabled: var(--dsa-section__slider-arrow--opacity_disabled, 0.3);
107
+ --l-section_slider-arrow--background: var(--dsa-section__slider-arrow--background, transparent);
108
+ background-image: var(--dsa-section--background-image);
71
109
  position: relative;
110
+ background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
111
+ }
112
+ .l-section.dsa-section.l-section--gutter-large {
113
+ --l-section--gutter: var(--dsa-section--gutter_large);
72
114
  }
73
- :root .l-section--header-spacing {
74
- padding-top: calc(var(--dsa-header--height) + var(--l-section--space-default));
115
+ .l-section.dsa-section.l-section--gutter-small {
116
+ --l-section--gutter: var(--dsa-section--gutter_small);
75
117
  }
76
- :root .l-section--header-spacing.l-section--space-before-none {
118
+ .l-section.dsa-section.l-section--gutter-none {
119
+ --l-section--gutter: var(--dsa-section--gutter_none);
120
+ }
121
+ .l-section.dsa-section.l-section--accent {
122
+ background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
123
+ }
124
+ .l-section.dsa-section.l-section--bold {
125
+ background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
126
+ }
127
+ .l-section.dsa-section--header-spacing {
128
+ padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space_default));
129
+ }
130
+ .l-section.dsa-section--header-spacing.l-section--space-before-none {
77
131
  padding-top: var(--dsa-header--height);
78
132
  }
79
- :root .l-section--header-spacing.l-section--space-before-small {
80
- padding-top: calc(var(--dsa-header--height) + var(--l-section--space-small));
133
+ .l-section.dsa-section--header-spacing.l-section--space-before-small {
134
+ padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
135
+ }
136
+ .l-section.dsa-section-style--stagelights {
137
+ background-image: var(--dsa-section_stagelights--background-image), radial-gradient(50% 150% at 100% -50%, var(--ks-color-primary-inverted-alpha-3) 0%, transparent 100%), radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%);
138
+ }
139
+ .l-section.dsa-section-style--anchor-glow {
140
+ background-image: var(--dsa-section_anchor-glow--background-image, radial-gradient(50% 50% at 50% 100%, var(--ks-color-secondary-alpha-5) 0%, transparent 100%));
81
141
  }
82
- :root .l-section--spotlight {
142
+ .l-section.dsa-section-style--symmetric-glow {
143
+ background-image: var(--dsa-section_symmetric-glow--background-image, radial-gradient(20% 50% at 100% 50%, var(--ks-color-primary-alpha-5) 0%, transparent 100%), radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%));
144
+ }
145
+ .l-section.dsa-section-style--accent-transition {
146
+ background-image: var(--dsa-section_accent-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
147
+ }
148
+ .l-section.dsa-section-style--bold-transition {
149
+ background-image: var(--dsa-section_bold-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
150
+ }
151
+ .l-section.dsa-section-style--vertical-gradient {
152
+ background-image: var(--dsa-section_vertical-gradient--background-image, linear-gradient(0deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
153
+ }
154
+ .l-section.dsa-section-style--horizontal-gradient {
155
+ background-image: var(--dsa-section_horizontal-gradient--background-image, linear-gradient(90deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
156
+ }
157
+ .l-section.dsa-section--spotlight {
83
158
  position: relative;
84
159
  }
85
- :root .l-section--spotlight:hover::before {
160
+ .l-section.dsa-section--spotlight:hover::before {
86
161
  opacity: 1;
87
162
  }
88
- :root .l-section--spotlight::before {
163
+ .l-section.dsa-section--spotlight::before {
89
164
  transition: opacity var(--ks-transition-fade);
90
165
  opacity: 0;
91
166
  top: 0;
@@ -94,17 +169,14 @@
94
169
  width: 100%;
95
170
  height: 100%;
96
171
  position: absolute;
97
- background-image: radial-gradient(650px circle at var(--l-section--spotlight-left) var(--l-section--spotlight-top), var(--l-section--spotlight-color), transparent 80%);
172
+ background-image: radial-gradient(650px circle at var(--dsa-section__spotlight--left) var(--dsa-section__spotlight--top), var(--dsa-section__spotlight--color), transparent 80%);
98
173
  }
99
- :root .l-section .l-section__content {
100
- --l-section_buttons--space-before: var(
101
- --dsa-section__buttons--space-before,
102
- var(--l-section--gutter)
103
- );
174
+ .l-section.dsa-section .l-section__content {
175
+ --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
104
176
  }
105
- :root .l-section .l-section__content--slider {
177
+ .l-section.dsa-section .l-section__content--slider {
106
178
  padding: var(--ks-spacing-s) 0;
107
179
  }
108
- :root .l-section .l-section__content--slider:after {
180
+ .l-section.dsa-section .l-section__content--slider:after {
109
181
  min-width: calc(50vw - var(--dsa-section_col--min-width) / 2 - var(--dsa-section--gutter) * 1.25);
110
182
  }
package/dist/tokens/themes.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Apr 2024 13:36:58 GMT
3
+ * Generated on Thu, 18 Apr 2024 13:49:23 GMT
4
4
  */
5
5
  :root [ks-theme=business] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
2727
2727
  }
2728
2728
  /**
2729
2729
  * Do not edit directly
2730
- * Generated on Thu, 18 Apr 2024 13:37:02 GMT
2730
+ * Generated on Thu, 18 Apr 2024 13:49:27 GMT
2731
2731
  */
2732
2732
  :root [ks-theme=google] {
2733
2733
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
5458
5458
  }
5459
5459
  /**
5460
5460
  * Do not edit directly
5461
- * Generated on Thu, 18 Apr 2024 13:37:00 GMT
5461
+ * Generated on Thu, 18 Apr 2024 13:49:25 GMT
5462
5462
  */
5463
5463
  :root [ks-theme=ngo] {
5464
5464
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
8459
8459
  }
8460
8460
  /**
8461
8461
  * Do not edit directly
8462
- * Generated on Thu, 18 Apr 2024 13:37:04 GMT
8462
+ * Generated on Thu, 18 Apr 2024 13:49:29 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
package/dist/tokens/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 18 Apr 2024 13:36:55 GMT
3
+ * Generated on Thu, 18 Apr 2024 13:49:20 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, 18 Apr 2024 13:36:56 GMT
3
+ * Generated on Thu, 18 Apr 2024 13:49:21 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#230a2b";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.3.3",
3
+ "version": "1.3.4",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {