@kickstartds/ds-agency-premium 1.6.68--canary.44.1636.0 → 1.6.68--canary.44.1642.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 (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/nav-flyout/nav-flyout.css +7 -1
  4. package/dist/components/nav-topbar/nav-topbar.css +4 -0
  5. package/dist/components/page-wrapper/tokens.css +2 -2
  6. package/dist/global.css +78 -38
  7. package/dist/tokens/themes.css +4 -4
  8. package/dist/tokens/tokens.css +2 -2
  9. package/dist/tokens/tokens.js +2 -2
  10. package/package.json +1 -1
  11. /package/dist/{BlogPostProps-d9decb7c.d.ts → BlogPostProps-6b3cff22.d.ts} +0 -0
package/dist/components/blog-post/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export type { BlogPostProps };
package/dist/components/index/index.d.ts CHANGED
@@ -29,7 +29,7 @@ interface SettingsProps {
29
29
  seo: SeoProps;
30
30
  iconSprite?: IconSprite;
31
31
  }
32
- export * from "../../BlogPostProps-d9decb7c.js";
32
+ export * from "../../BlogPostProps-6b3cff22.js";
33
33
  export * from "../../BlogOverviewProps-9f207f1c.js";
34
34
  export * from "../../PageProps-aa29c554.js";
35
35
  export { IconSprite, SettingsProps };
package/dist/components/nav-flyout/nav-flyout.css CHANGED
@@ -21,9 +21,12 @@
21
21
  --dsa-nav-flyout__label--text-decoration: none;
22
22
  --dsa-nav-flyout__label--text-decoration_hover: none;
23
23
  --dsa-nav-flyout__label_dimmed--opacity: 0.8;
24
+ --dsa-nav-flyout__label--transition: var(--ks-transition-hover);
25
+ --dsa-nav-flyout__label--transition-property: background-color, color, opacity;
24
26
  --dsa-nav-flyout__sublist--padding: 0.25em 0 0.5em 0.75em;
25
27
  --dsa-nav-flyout__sublist__label--color: var(--ks-color-fg);
26
- --dsa-nav-flyout__sublist__label--font: var(--ks-font-interface-m);
28
+ --dsa-nav-flyout__sublist__label--font: var(--ks-font-interface-l);
29
+ --dsa-nav-flyout__sublist__label--font-family: var(--ks-font-family-display);
27
30
  --dsa-nav-flyout__sublist__label--font-weight: var(--ks-font-weight-semi-bold);
28
31
  --dsa-nav-flyout__sublist__label--padding: 0.25em 0;
29
32
  }
@@ -92,6 +95,8 @@
92
95
  height: 100%;
93
96
  align-items: center;
94
97
  padding: var(--dsa-nav-flyout__label--padding);
98
+ transition: var(--dsa-nav-flyout__label--transition);
99
+ transition-property: var(--dsa-nav-flyout__label--transition-property);
95
100
  }
96
101
  .dsa-nav-flyout .dsa-nav-flyout__label:hover, .dsa-nav-flyout .dsa-nav-flyout__label:focus, .dsa-nav-flyout .dsa-nav-flyout__label:active {
97
102
  color: var(--dsa-nav-flyout__label--color_hover);
@@ -101,6 +106,7 @@
101
106
  .dsa-nav-flyout .dsa-nav-flyout__sublist {
102
107
  padding: var(--dsa-nav-flyout__sublist--padding);
103
108
  font: var(--dsa-nav-flyout__sublist__label--font);
109
+ font-family: var(--dsa-nav-flyout__label--font-family);
104
110
  font-weight: var(--dsa-nav-flyout__sublist__label--font-weight);
105
111
  }
106
112
  .dsa-nav-flyout .dsa-nav-flyout__sublist .dsa-nav-flyout__label {
package/dist/components/nav-topbar/nav-topbar.css CHANGED
@@ -13,6 +13,8 @@
13
13
  --dsa-nav-topbar__label--text-decoration: none;
14
14
  --dsa-nav-topbar__label--text-decoration_hover: none;
15
15
  --dsa-nav-topbar__label_dimmed--opacity: 1;
16
+ --dsa-nav-topbar__label--transition: var(--ks-transition-hover);
17
+ --dsa-nav-topbar__label--transition-property: background-color, color, opacity;
16
18
  --dsa-nav-topbar__label__icon--size: 1.5em;
17
19
  --dsa-nav-topbar_floating__label_dimmed--opacity: 0.85;
18
20
  --dsa-nav-topbar_floating__label--color: var(--ks-color-fg);
@@ -80,6 +82,8 @@
80
82
  align-items: center;
81
83
  padding: var(--dsa-nav-topbar__label--padding);
82
84
  text-decoration: var(--dsa-nav-topbar__label--text-decoration);
85
+ transition: var(--dsa-nav-topbar__label--transition);
86
+ transition-property: var(--dsa-nav-topbar__label--transition-property);
83
87
  }
84
88
  .dsa-nav-topbar .dsa-nav-topbar__label:hover, .dsa-nav-topbar .dsa-nav-topbar__label:focus, .dsa-nav-topbar .dsa-nav-topbar__label:active {
85
89
  color: var(--dsa-nav-topbar__label--color_hover);
package/dist/components/page-wrapper/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 27 May 2025 07:30:53 GMT
3
+ * Generated on Fri, 30 May 2025 10:50:02 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
@@ -121,7 +121,7 @@
121
121
  --ks-border-color-interface-interactive-base: var(--ks-color-fg-alpha-7-base);
122
122
  --ks-border-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-8-base);
123
123
  --ks-border-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-5-base);
124
- --ks-border-color-interface-interactive-active-base: var(--ks-color-fg-alpha-5-base);
124
+ --ks-border-color-interface-interactive-active-base: var(--ks-color-primary-base);
125
125
  --ks-border-color-interface-interactive-selected-base: var(--ks-color-primary-base);
126
126
  --ks-border-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-8-base);
127
127
  --ks-border-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-7-base);
package/dist/global.css CHANGED
@@ -441,84 +441,124 @@ h3 {
441
441
  }
442
442
 
443
443
  .c-form-check {
444
- --dsa-form-check--border: var(--ks-border-width-default) solid;
445
- --dsa-form-check--border-color: var(--ks-border-color-interface-interactive);
446
- --dsa-form-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
447
- --dsa-form-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
448
- --dsa-form-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
449
- --dsa-form-check--background: var(--ks-background-color-interface-interactive);
450
- --dsa-form-check--background_checked: var(--ks-color-secondary);
451
- --dsa-form-check--shadow_focus: 0 0 4px 0;
452
- --dsa-form-check__checkmark--color: var(--dsa-text-color-on-primary);
444
+ --dsa-check--background: transparent;
445
+ --dsa-check--background_checked: var(--ks-color-primary);
446
+ --dsa-check--background_active: transparent;
447
+ --dsa-check--border: var(--ks-border-width-) solid;
448
+ --dsa-check--border-color: var(--ks-border-color-interface-interactive);
449
+ --dsa-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
450
+ --dsa-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
451
+ --dsa-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
452
+ --dsa-check--size: 1.125em;
453
+ --dsa-check--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
454
+ --dsa-check_box--border-radius: min(var(--ks-border-radius-control), calc(var(--dsa-check--size) / 4));
455
+ --dsa-check_radio--border-radius: var(--ks-border-radius-circle);
456
+ --dsa-check_radio__checkmark--size: calc(var(--dsa-check--size) * 0.5);
457
+ --dsa-check__checkmark--color: var(--dsa-text-color-on-primary);
458
+ --dsa-check__label--font: var(--ks-font-interface-s);
459
+ --dsa-check__label--font-weight: var(--ks-font-weight-regular);
460
+ --dsa-check__label--color: var(--ks-text-color-interface);
453
461
  }
454
462
 
455
463
  .c-form-field {
456
- --dsa-form-field--color: var(--ks-text-color-interface);
457
- --dsa-form-field--border: var(--ks-border-width-default) solid;
458
- --dsa-form-field--border-color: var(--ks-border-color-interface-interactive);
459
- --dsa-form-field--border-color_hover: var(--ks-border-color-interface-interactive-hover);
460
- --dsa-form-field--border-color_focus: var(--ks-border-color-interface-interactive-active);
461
- --dsa-form-field--background: var(--ks-background-color-interface-interactive);
462
- --dsa-form-field--shadow_focus: 0 0 4px 0;
463
- --dsa-form-field__placeholder--color: var(--ks-color-fg-alpha-5);
464
+ --dsa-input--color: var(--ks-text-color-interface);
465
+ --dsa-input--border: var(--ks-border-width-default) solid;
466
+ --dsa-input--border-color: var(--ks-border-color-interface-interactive);
467
+ --dsa-input--border-color_hover: var(--ks-border-color-interface-interactive-hover);
468
+ --dsa-input--border-color_focus: var(--ks-border-color-interface-interactive-active);
469
+ --dsa-input--border-color_active: var(--ks-border-color-interface-interactive-active);
470
+ --dsa-input__label--color: var(--ks-text-color-interface);
471
+ --dsa-input__label--font: var(--ks-font-interface-s);
472
+ --dsa-input__label--font-weight: var(--ks-font-weight-regular);
473
+ --dsa-input--font: var(--ks-font-interface-s);
474
+ --dsa-input--background: transparent;
475
+ --dsa-input--background_focus: transparent;
476
+ --dsa-input--padding: 0.4rem 0.75rem 0.35rem;
477
+ --dsa-input--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
478
+ --dsa-input__placeholder--color: var(--ks-color-fg-alpha-5);
464
479
  }
465
480
 
466
481
  :root .c-form-check, [ks-inverted] .c-form-check, [ks-theme] .c-form-check {
467
- --c-form-check_box--size: var(--dsa-form-check--size, 1rem);
468
- --c-form-check_box--border: var(--dsa-form-check--border, var(--ks-border-width-default)) solid;
469
- --c-form-check_box--border-color: var(--dsa-form-check--border-color, var(--ks-border-color-interface-interactive));
482
+ --c-form-check_box--size: var(--dsa-check--size, 1.125em);
483
+ --c-form-check_box--border: var(--dsa-check--border, var(--ks-border-width-default) solid);
484
+ --c-form-check_box--border-color: var(--dsa-check--border-color, var(--ks-border-color-interface-interactive));
470
485
  --c-form-check_box-hover--border-color: var(
471
- --dsa-form-check--border-color_hover,
486
+ --dsa-check--border-color_hover,
472
487
  var(--ks-border-color-interface-interactive-hover)
473
488
  );
474
489
  --c-form-check_box-focus--border-color: var(
475
- --dsa-form-check--border-color_focus,
490
+ --dsa-check--border-color_focus,
476
491
  var(--ks-border-color-interface-interactive-active)
477
492
  );
478
493
  --c-form-check_box-checked--border-color: var(
479
- --dsa-form-check--border-color_checked,
494
+ --dsa-check--border-color_checked,
480
495
  var(--ks-border-color-interface-interactive-selected)
481
496
  );
482
- --c-form-check_box--background: var(--dsa-form-check--background, var(--ks-background-color-interface-interactive));
497
+ --c-form-check_box--background: var(--dsa-check--background, var(--ks-background-color-interface-interactive));
483
498
  --c-form-check_box-checked--background: var(
484
- --dsa-form-check--background_checked,
499
+ --dsa-check--background_checked,
485
500
  var(--ks-background-color-interface-interactive-selected)
486
501
  );
487
- --c-form-check_box-focus--shadow: var(--dsa-form-check--shadow_focus, 0 0 4px 0);
488
- --c-form-check_checkmark--color: var(--dsa-form-check__checkmark--color, var(--dsa-text-color-on-primary));
502
+ --c-form-check_checkmark--color: var(--dsa-check__checkmark--color, var(--dsa-text-color-on-primary));
503
+ --c-form-check_box--border-radius: var(--dsa-check--border-radius, 2px);
504
+ --c-form-check_box-focus--shadow: var(--dsa-check--shadow_focus, 0 0 4px 0);
505
+ --c-form-check_checkmark--size: var(--dsa-check_radio__checkmark--size, calc(var(--swo-check--size) * 0.5));
506
+ font: var(--dsa-check__label--font, var(--ks-font-interface-s));
507
+ font-weight: var(--dsa-check__label--font-weight, var(--ks-font-weight-regular));
508
+ color: var(--dsa-check__label--color, var(--ks-text-color-interface-interactive-default));
509
+ }
510
+ :root .c-form-check--checkbox, [ks-inverted] .c-form-check--checkbox, [ks-theme] .c-form-check--checkbox {
511
+ --c-form-check_box--border-radius: var(
512
+ --dsa-check_box--border-radius,
513
+ min(4px, calc(var(--dsa-check--size) / 4))
514
+ );
515
+ }
516
+ :root .c-form-check--radio, [ks-inverted] .c-form-check--radio, [ks-theme] .c-form-check--radio {
517
+ --c-form-check_box--border-radius: var(--dsa-check_radio--border-radius, var(--ks-border-radius-circle));
489
518
  }
490
519
  :root .c-form-field, [ks-inverted] .c-form-field, [ks-theme] .c-form-field {
491
- --c-form-field--border: var(--dsa-form-field--border, var(--ks-border-width-default)) solid;
492
- --c-form-field--border-color: var(--dsa-form-field--border-color, var(--ks-border-color-interface-interactive));
520
+ --c-form-field--border: var(--dsa-input--border, var(--ks-border-width-default) solid);
521
+ --c-form-field--border-color: var(--dsa-input--border-color, var(--ks-border-color-interface-interactive));
493
522
  --c-form-field-hover--border-color: var(
494
- --dsa-form-field--border-color_hover,
523
+ --dsa-input--border-color_hover,
495
524
  var(--ks-border-color-interface-interactive-hover)
496
525
  );
497
526
  --c-form-field-focus--border-color: var(
498
- --dsa-form-field--border-color_focus,
527
+ --dsa-input--border-color_focus,
499
528
  var(--ks-border-color-interface-interactive-active)
500
529
  );
501
- --c-form-field--background: var(--dsa-form-field--background, var(--ks-background-color-interface-interactive));
502
- --c-form-field_focus--shadow: var(--dsa-form-field--shadow_focus, 0 0 4px 0);
530
+ --c-form-field--background: var(--dsa-input--background, var(--ks-background-color-interface-interactive));
531
+ --c-form-field_focus--shadow: var(--dsa-input--shadow_focus, 0 0 4px 0);
503
532
  --c-form-field--background-disabled: var(
504
533
  --ks-background-color-interface-interactive-disabled,
505
534
  var(--ks-background-color-interface-interactive-disabled)
506
535
  );
507
- --c-form-field--color: var(--dsa-form-field--color, var(--ks-text-color-interface));
536
+ --c-form-field--color: var(--dsa-input--color, var(--ks-text-color-interface));
508
537
  --c-form-field_hover--border-color: var(
509
- --dsa-form-field--border-color_hover,
538
+ --dsa-input--border-color_hover,
510
539
  var(--ks-border-color-interface-interactive-hover)
511
540
  );
512
541
  --c-form-field_focus--border-color: var(
513
- --dsa-form-field--border-color_active,
542
+ --dsa-input--border-color_active,
514
543
  var(--ks-border-color-interface-interactive-active)
515
544
  );
516
- --c-form-field_focus--shadow: 0 0 4px -1px;
517
545
  --c-form-field_icon--size: calc(var(--ks-line-height-interface-m) * 0.75em);
518
546
  --c-form-field_icon--color: var(--ks-color-fg-alpha-3);
547
+ --c-form-field_label--color: var(--dsa-input__label--color, var(--ks-text-color-interface));
548
+ }
549
+ :root .c-form-field__input, [ks-inverted] .c-form-field__input, [ks-theme] .c-form-field__input {
550
+ font: var(--dsa-input--font, var(--ks-font-interface-m));
551
+ padding: var(--dsa-input--padding, 0.4rem 0.75rem 0.35rem);
519
552
  }
520
553
  :root .c-form-field__input::placeholder, [ks-inverted] .c-form-field__input::placeholder, [ks-theme] .c-form-field__input::placeholder {
521
- color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
554
+ color: var(--dsa-input__placeholder--color, var(--ks-color-fg-alpha-5));
555
+ }
556
+ :root .c-form-field__input:focus, [ks-inverted] .c-form-field__input:focus, [ks-theme] .c-form-field__input:focus {
557
+ background-color: var(--dsa-input--background_focus, var(--ks-background-color-interface-interactive-active));
558
+ }
559
+ :root .c-form-field__label, [ks-inverted] .c-form-field__label, [ks-theme] .c-form-field__label {
560
+ font: var(--dsa-input__label--font, var(--ks-font-interface-s));
561
+ font-weight: var(--dsa-input__label--font-weight, var(--ks-font-weight-regular));
522
562
  }
523
563
 
524
564
  :root {
package/dist/tokens/themes.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 27 May 2025 07:30:56 GMT
3
+ * Generated on Fri, 30 May 2025 10:50:05 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 Tue, 27 May 2025 07:31:00 GMT
2730
+ * Generated on Fri, 30 May 2025 10:50:09 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 Tue, 27 May 2025 07:30:58 GMT
5461
+ * Generated on Fri, 30 May 2025 10:50:07 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 Tue, 27 May 2025 07:31:02 GMT
8462
+ * Generated on Fri, 30 May 2025 10:50:11 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 Tue, 27 May 2025 07:30:53 GMT
3
+ * Generated on Fri, 30 May 2025 10:50:02 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -122,7 +122,7 @@
122
122
  --ks-border-color-interface-interactive-base: var(--ks-color-fg-alpha-7-base);
123
123
  --ks-border-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-8-base);
124
124
  --ks-border-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-5-base);
125
- --ks-border-color-interface-interactive-active-base: var(--ks-color-fg-alpha-5-base);
125
+ --ks-border-color-interface-interactive-active-base: var(--ks-color-primary-base);
126
126
  --ks-border-color-interface-interactive-selected-base: var(--ks-color-primary-base);
127
127
  --ks-border-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-8-base);
128
128
  --ks-border-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-7-base);
package/dist/tokens/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 27 May 2025 07:30:54 GMT
3
+ * Generated on Fri, 30 May 2025 10:50:03 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#f3f3f4";
@@ -121,7 +121,7 @@ export const KsBorderColorInterfaceBase = "rgba(48, 101, 192, 0.13)";
121
121
  export const KsBorderColorInterfaceInteractiveBase = "rgba(6, 8, 31, 0.24)";
122
122
  export const KsBorderColorInterfaceInteractiveDisabledBase = "rgba(6, 8, 31, 0.13)";
123
123
  export const KsBorderColorInterfaceInteractiveHoverBase = "rgba(6, 8, 31, 0.5)";
124
- export const KsBorderColorInterfaceInteractiveActiveBase = "rgba(6, 8, 31, 0.5)";
124
+ export const KsBorderColorInterfaceInteractiveActiveBase = "#3065c0";
125
125
  export const KsBorderColorInterfaceInteractiveSelectedBase = "#3065c0";
126
126
  export const KsBorderColorInterfaceInvertedBase = "rgba(255, 255, 255, 0.13)";
127
127
  export const KsBorderColorInterfaceInvertedInteractiveBase = "rgba(255, 255, 255, 0.24)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.6.68--canary.44.1636.0",
3
+ "version": "1.6.68--canary.44.1642.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {