@kickstartds/ds-agency-premium 1.6.27 → 1.6.29
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.
- package/dist/components/cta/cta.css +0 -8
- package/dist/components/cta/index.js +2 -0
- package/dist/components/page-wrapper/tokens.css +29 -3
- package/dist/components/section/section.css +4 -0
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +29 -3
- package/dist/tokens/tokens.js +14 -2
- package/package.json +1 -1
|
@@ -18,8 +18,6 @@
|
|
|
18
18
|
.dsa-cta.c-storytelling {
|
|
19
19
|
--c-storytelling--padding-ratio: 2;
|
|
20
20
|
--c-storytelling--horizontal-padding: var(--dsa-content--spacing);
|
|
21
|
-
justify-content: center;
|
|
22
|
-
align-items: center;
|
|
23
21
|
padding: 0;
|
|
24
22
|
}
|
|
25
23
|
.dsa-cta.c-storytelling.dsa-cta--color-neutral {
|
|
@@ -41,12 +39,6 @@
|
|
|
41
39
|
.dsa-cta.c-storytelling.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
|
|
42
40
|
padding-left: var(--dsa-cta--horizontal-padding);
|
|
43
41
|
}
|
|
44
|
-
.dsa-cta.c-storytelling.dsa-cta--align-top {
|
|
45
|
-
align-items: flex-start;
|
|
46
|
-
}
|
|
47
|
-
.dsa-cta.c-storytelling.dsa-cta--align-bottom {
|
|
48
|
-
align-items: flex-end;
|
|
49
|
-
}
|
|
50
42
|
.dsa-cta.c-storytelling .c-storytelling__box {
|
|
51
43
|
width: 100%;
|
|
52
44
|
padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
|
|
@@ -18,9 +18,11 @@ const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, im
|
|
|
18
18
|
: ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: image?.padding === false, image: {
|
|
19
19
|
source: image?.src,
|
|
20
20
|
order: order,
|
|
21
|
+
vAlign: contentAlign,
|
|
21
22
|
}, box: {
|
|
22
23
|
text: text,
|
|
23
24
|
textAlign: textAlign,
|
|
25
|
+
vAlign: contentAlign,
|
|
24
26
|
link: {
|
|
25
27
|
// @ts-expect-error
|
|
26
28
|
buttons,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 29 Nov 2024 07:38:16 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, [ks-theme] {
|
|
6
6
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -744,42 +744,49 @@
|
|
|
744
744
|
--ks-spacing-xxs-bp-factor-tablet: 1.5006;
|
|
745
745
|
--ks-spacing-xxs-bp-factor-laptop: 1.8383;
|
|
746
746
|
--ks-spacing-xxs-bp-factor-desktop: 2.2519;
|
|
747
|
+
--ks-spacing-xxs-bp-factor-largescreen: 2.5;
|
|
747
748
|
--ks-spacing-xs: var(--ks-spacing-xs-base);
|
|
748
749
|
--ks-spacing-xs-base: 0.4309rem;
|
|
749
750
|
--ks-spacing-xs-bp-factor-phone: 1.225;
|
|
750
751
|
--ks-spacing-xs-bp-factor-tablet: 1.5006;
|
|
751
752
|
--ks-spacing-xs-bp-factor-laptop: 1.8383;
|
|
752
753
|
--ks-spacing-xs-bp-factor-desktop: 2.2519;
|
|
754
|
+
--ks-spacing-xs-bp-factor-largescreen: 2.5;
|
|
753
755
|
--ks-spacing-s: var(--ks-spacing-s-base);
|
|
754
756
|
--ks-spacing-s-base: 0.614rem;
|
|
755
757
|
--ks-spacing-s-bp-factor-phone: 1.225;
|
|
756
758
|
--ks-spacing-s-bp-factor-tablet: 1.5006;
|
|
757
759
|
--ks-spacing-s-bp-factor-laptop: 1.8383;
|
|
758
760
|
--ks-spacing-s-bp-factor-desktop: 2.2519;
|
|
761
|
+
--ks-spacing-s-bp-factor-largescreen: 2.5;
|
|
759
762
|
--ks-spacing-m: var(--ks-spacing-m-base);
|
|
760
763
|
--ks-spacing-m-base: 0.875rem;
|
|
761
764
|
--ks-spacing-m-bp-factor-phone: 1.225;
|
|
762
765
|
--ks-spacing-m-bp-factor-tablet: 1.5006;
|
|
763
766
|
--ks-spacing-m-bp-factor-laptop: 1.8383;
|
|
764
767
|
--ks-spacing-m-bp-factor-desktop: 2.2519;
|
|
768
|
+
--ks-spacing-m-bp-factor-largescreen: 2.5;
|
|
765
769
|
--ks-spacing-l: var(--ks-spacing-l-base);
|
|
766
770
|
--ks-spacing-l-base: 1.2469rem;
|
|
767
771
|
--ks-spacing-l-bp-factor-phone: 1.225;
|
|
768
772
|
--ks-spacing-l-bp-factor-tablet: 1.5006;
|
|
769
773
|
--ks-spacing-l-bp-factor-laptop: 1.8383;
|
|
770
774
|
--ks-spacing-l-bp-factor-desktop: 2.2519;
|
|
775
|
+
--ks-spacing-l-bp-factor-largescreen: 2.5;
|
|
771
776
|
--ks-spacing-xl: var(--ks-spacing-xl-base);
|
|
772
777
|
--ks-spacing-xl-base: 1.7768rem;
|
|
773
778
|
--ks-spacing-xl-bp-factor-phone: 1.225;
|
|
774
779
|
--ks-spacing-xl-bp-factor-tablet: 1.5006;
|
|
775
780
|
--ks-spacing-xl-bp-factor-laptop: 1.8383;
|
|
776
781
|
--ks-spacing-xl-bp-factor-desktop: 2.2519;
|
|
782
|
+
--ks-spacing-xl-bp-factor-largescreen: 2.5;
|
|
777
783
|
--ks-spacing-xxl: var(--ks-spacing-xxl-base);
|
|
778
784
|
--ks-spacing-xxl-base: 2.5319rem;
|
|
779
785
|
--ks-spacing-xxl-bp-factor-phone: 1.225;
|
|
780
786
|
--ks-spacing-xxl-bp-factor-tablet: 1.5006;
|
|
781
787
|
--ks-spacing-xxl-bp-factor-laptop: 1.8383;
|
|
782
788
|
--ks-spacing-xxl-bp-factor-desktop: 2.2519;
|
|
789
|
+
--ks-spacing-xxl-bp-factor-largescreen: 2.5;
|
|
783
790
|
--ks-spacing-stack-xs: var(--ks-spacing-xs);
|
|
784
791
|
--ks-spacing-stack-s: var(--ks-spacing-s);
|
|
785
792
|
--ks-spacing-stack-m: var(--ks-spacing-m);
|
|
@@ -937,9 +944,10 @@
|
|
|
937
944
|
--ks-font-weight-semi-bold: 600;
|
|
938
945
|
--ks-font-weight-bold: 700;
|
|
939
946
|
--ks-font-size-display-bp-factor-phone: 1.125;
|
|
940
|
-
--ks-font-size-display-bp-factor-tablet: 1.
|
|
947
|
+
--ks-font-size-display-bp-factor-tablet: 1.5;
|
|
941
948
|
--ks-font-size-display-bp-factor-laptop: 1.5;
|
|
942
949
|
--ks-font-size-display-bp-factor-desktop: 1.75;
|
|
950
|
+
--ks-font-size-display-bp-factor-largescreen: 2.25;
|
|
943
951
|
--ks-font-size-display-xxs-base: 0.68rem;
|
|
944
952
|
--ks-font-size-display-xs-base: 0.833rem;
|
|
945
953
|
--ks-font-size-display-s-base: 1.0204rem;
|
|
@@ -948,6 +956,7 @@
|
|
|
948
956
|
--ks-font-size-display-xl-base: 1.8758rem;
|
|
949
957
|
--ks-font-size-display-xxl-base: 2.2978rem;
|
|
950
958
|
--ks-font-size-copy-bp-factor-tablet: 1.125;
|
|
959
|
+
--ks-font-size-copy-bp-factor-largescreen: 1.35;
|
|
951
960
|
--ks-font-size-copy-xxs-base: 0.612rem;
|
|
952
961
|
--ks-font-size-copy-xs-base: 0.7497rem;
|
|
953
962
|
--ks-font-size-copy-s-base: 0.9184rem;
|
|
@@ -956,6 +965,7 @@
|
|
|
956
965
|
--ks-font-size-copy-xl-base: 1.6882rem;
|
|
957
966
|
--ks-font-size-copy-xxl-base: 2.068rem;
|
|
958
967
|
--ks-font-size-interface-bp-factor-tablet: 1.125;
|
|
968
|
+
--ks-font-size-interface-bp-factor-largescreen: 1.35;
|
|
959
969
|
--ks-font-size-interface-xxs-base: 0.544rem;
|
|
960
970
|
--ks-font-size-interface-xs-base: 0.6664rem;
|
|
961
971
|
--ks-font-size-interface-s-base: 0.8163rem;
|
|
@@ -964,6 +974,7 @@
|
|
|
964
974
|
--ks-font-size-interface-xl-base: 1.5006rem;
|
|
965
975
|
--ks-font-size-interface-xxl-base: 1.8383rem;
|
|
966
976
|
--ks-font-size-mono-bp-factor-tablet: 1.125;
|
|
977
|
+
--ks-font-size-mono-bp-factor-largescreen: 1.35;
|
|
967
978
|
--ks-font-size-mono-xxs-base: 0.612rem;
|
|
968
979
|
--ks-font-size-mono-xs-base: 0.7497rem;
|
|
969
980
|
--ks-font-size-mono-s-base: 0.9184rem;
|
|
@@ -1069,7 +1080,7 @@
|
|
|
1069
1080
|
--ks-spacing-inset: calc(var(--ks-spacing-inset-base) * var(--ks-spacing-inset-bp-factor, 1));
|
|
1070
1081
|
--ks-spacing-inset-squish: calc(var(--ks-spacing-inset-squish-base) * var(--ks-spacing-inset-squish-bp-factor, 1));
|
|
1071
1082
|
--ks-spacing-inset-stretch: calc(var(--ks-spacing-inset-stretch-base) * var(--ks-spacing-inset-stretch-bp-factor, 1));
|
|
1072
|
-
--ks-breakpoints: '{"phone":"36em","tablet":"48em","laptop":"62em","desktop":"75em"}';
|
|
1083
|
+
--ks-breakpoints: '{"phone":"36em","tablet":"48em","laptop":"62em","desktop":"75em","largescreen":"130em"}';
|
|
1073
1084
|
}
|
|
1074
1085
|
|
|
1075
1086
|
:root, [ks-theme], [ks-inverted=false] {
|
|
@@ -2729,4 +2740,19 @@
|
|
|
2729
2740
|
--ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-desktop);
|
|
2730
2741
|
--ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-desktop);
|
|
2731
2742
|
}
|
|
2743
|
+
}
|
|
2744
|
+
@media (min-width: 130em) {
|
|
2745
|
+
:root {
|
|
2746
|
+
--ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-largescreen);
|
|
2747
|
+
--ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-largescreen);
|
|
2748
|
+
--ks-font-size-interface-bp-factor: var(--ks-font-size-interface-bp-factor-largescreen);
|
|
2749
|
+
--ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-largescreen);
|
|
2750
|
+
--ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-largescreen);
|
|
2751
|
+
--ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-largescreen);
|
|
2752
|
+
--ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-largescreen);
|
|
2753
|
+
--ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-largescreen);
|
|
2754
|
+
--ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-largescreen);
|
|
2755
|
+
--ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-largescreen);
|
|
2756
|
+
--ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-largescreen);
|
|
2757
|
+
}
|
|
2732
2758
|
}
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
--dsa-section--gutter_default: var(--ks-spacing-m);
|
|
14
14
|
--dsa-section--gutter_large: var(--ks-spacing-xl);
|
|
15
15
|
--dsa-section__buttons--space-before: var(--ks-spacing-stack-m);
|
|
16
|
+
--dsa-section__content--max-width: 120em;
|
|
16
17
|
--dsa-section__content--width_narrow: 46.5rem;
|
|
17
18
|
--dsa-section__content--width_default: 62rem;
|
|
18
19
|
--dsa-section__content--width_wide: 75rem;
|
|
@@ -107,6 +108,9 @@
|
|
|
107
108
|
position: relative;
|
|
108
109
|
background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
|
|
109
110
|
}
|
|
111
|
+
.l-section.dsa-section .l-section__content {
|
|
112
|
+
max-width: var(--dsa-section__content--max-width, 120em);
|
|
113
|
+
}
|
|
110
114
|
.l-section.dsa-section.l-section--gutter-large {
|
|
111
115
|
--l-section--gutter: var(--dsa-section--gutter_large);
|
|
112
116
|
}
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 29 Nov 2024 07:38:18 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
|
|
2730
|
+
* Generated on Fri, 29 Nov 2024 07:38:22 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
|
|
5461
|
+
* Generated on Fri, 29 Nov 2024 07:38:20 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
|
|
8462
|
+
* Generated on Fri, 29 Nov 2024 07:38:24 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
|
|
3
|
+
* Generated on Fri, 29 Nov 2024 07:38:16 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root, [ks-theme] {
|
|
@@ -745,42 +745,49 @@
|
|
|
745
745
|
--ks-spacing-xxs-bp-factor-tablet: 1.5006;
|
|
746
746
|
--ks-spacing-xxs-bp-factor-laptop: 1.8383;
|
|
747
747
|
--ks-spacing-xxs-bp-factor-desktop: 2.2519;
|
|
748
|
+
--ks-spacing-xxs-bp-factor-largescreen: 2.5;
|
|
748
749
|
--ks-spacing-xs: var(--ks-spacing-xs-base);
|
|
749
750
|
--ks-spacing-xs-base: 0.4309rem;
|
|
750
751
|
--ks-spacing-xs-bp-factor-phone: 1.225;
|
|
751
752
|
--ks-spacing-xs-bp-factor-tablet: 1.5006;
|
|
752
753
|
--ks-spacing-xs-bp-factor-laptop: 1.8383;
|
|
753
754
|
--ks-spacing-xs-bp-factor-desktop: 2.2519;
|
|
755
|
+
--ks-spacing-xs-bp-factor-largescreen: 2.5;
|
|
754
756
|
--ks-spacing-s: var(--ks-spacing-s-base);
|
|
755
757
|
--ks-spacing-s-base: 0.614rem;
|
|
756
758
|
--ks-spacing-s-bp-factor-phone: 1.225;
|
|
757
759
|
--ks-spacing-s-bp-factor-tablet: 1.5006;
|
|
758
760
|
--ks-spacing-s-bp-factor-laptop: 1.8383;
|
|
759
761
|
--ks-spacing-s-bp-factor-desktop: 2.2519;
|
|
762
|
+
--ks-spacing-s-bp-factor-largescreen: 2.5;
|
|
760
763
|
--ks-spacing-m: var(--ks-spacing-m-base);
|
|
761
764
|
--ks-spacing-m-base: 0.875rem;
|
|
762
765
|
--ks-spacing-m-bp-factor-phone: 1.225;
|
|
763
766
|
--ks-spacing-m-bp-factor-tablet: 1.5006;
|
|
764
767
|
--ks-spacing-m-bp-factor-laptop: 1.8383;
|
|
765
768
|
--ks-spacing-m-bp-factor-desktop: 2.2519;
|
|
769
|
+
--ks-spacing-m-bp-factor-largescreen: 2.5;
|
|
766
770
|
--ks-spacing-l: var(--ks-spacing-l-base);
|
|
767
771
|
--ks-spacing-l-base: 1.2469rem;
|
|
768
772
|
--ks-spacing-l-bp-factor-phone: 1.225;
|
|
769
773
|
--ks-spacing-l-bp-factor-tablet: 1.5006;
|
|
770
774
|
--ks-spacing-l-bp-factor-laptop: 1.8383;
|
|
771
775
|
--ks-spacing-l-bp-factor-desktop: 2.2519;
|
|
776
|
+
--ks-spacing-l-bp-factor-largescreen: 2.5;
|
|
772
777
|
--ks-spacing-xl: var(--ks-spacing-xl-base);
|
|
773
778
|
--ks-spacing-xl-base: 1.7768rem;
|
|
774
779
|
--ks-spacing-xl-bp-factor-phone: 1.225;
|
|
775
780
|
--ks-spacing-xl-bp-factor-tablet: 1.5006;
|
|
776
781
|
--ks-spacing-xl-bp-factor-laptop: 1.8383;
|
|
777
782
|
--ks-spacing-xl-bp-factor-desktop: 2.2519;
|
|
783
|
+
--ks-spacing-xl-bp-factor-largescreen: 2.5;
|
|
778
784
|
--ks-spacing-xxl: var(--ks-spacing-xxl-base);
|
|
779
785
|
--ks-spacing-xxl-base: 2.5319rem;
|
|
780
786
|
--ks-spacing-xxl-bp-factor-phone: 1.225;
|
|
781
787
|
--ks-spacing-xxl-bp-factor-tablet: 1.5006;
|
|
782
788
|
--ks-spacing-xxl-bp-factor-laptop: 1.8383;
|
|
783
789
|
--ks-spacing-xxl-bp-factor-desktop: 2.2519;
|
|
790
|
+
--ks-spacing-xxl-bp-factor-largescreen: 2.5;
|
|
784
791
|
--ks-spacing-stack-xs: var(--ks-spacing-xs);
|
|
785
792
|
--ks-spacing-stack-s: var(--ks-spacing-s);
|
|
786
793
|
--ks-spacing-stack-m: var(--ks-spacing-m);
|
|
@@ -938,9 +945,10 @@
|
|
|
938
945
|
--ks-font-weight-semi-bold: 600;
|
|
939
946
|
--ks-font-weight-bold: 700;
|
|
940
947
|
--ks-font-size-display-bp-factor-phone: 1.125;
|
|
941
|
-
--ks-font-size-display-bp-factor-tablet: 1.
|
|
948
|
+
--ks-font-size-display-bp-factor-tablet: 1.5;
|
|
942
949
|
--ks-font-size-display-bp-factor-laptop: 1.5;
|
|
943
950
|
--ks-font-size-display-bp-factor-desktop: 1.75;
|
|
951
|
+
--ks-font-size-display-bp-factor-largescreen: 2.25;
|
|
944
952
|
--ks-font-size-display-xxs-base: 0.68rem;
|
|
945
953
|
--ks-font-size-display-xs-base: 0.833rem;
|
|
946
954
|
--ks-font-size-display-s-base: 1.0204rem;
|
|
@@ -949,6 +957,7 @@
|
|
|
949
957
|
--ks-font-size-display-xl-base: 1.8758rem;
|
|
950
958
|
--ks-font-size-display-xxl-base: 2.2978rem;
|
|
951
959
|
--ks-font-size-copy-bp-factor-tablet: 1.125;
|
|
960
|
+
--ks-font-size-copy-bp-factor-largescreen: 1.35;
|
|
952
961
|
--ks-font-size-copy-xxs-base: 0.612rem;
|
|
953
962
|
--ks-font-size-copy-xs-base: 0.7497rem;
|
|
954
963
|
--ks-font-size-copy-s-base: 0.9184rem;
|
|
@@ -957,6 +966,7 @@
|
|
|
957
966
|
--ks-font-size-copy-xl-base: 1.6882rem;
|
|
958
967
|
--ks-font-size-copy-xxl-base: 2.068rem;
|
|
959
968
|
--ks-font-size-interface-bp-factor-tablet: 1.125;
|
|
969
|
+
--ks-font-size-interface-bp-factor-largescreen: 1.35;
|
|
960
970
|
--ks-font-size-interface-xxs-base: 0.544rem;
|
|
961
971
|
--ks-font-size-interface-xs-base: 0.6664rem;
|
|
962
972
|
--ks-font-size-interface-s-base: 0.8163rem;
|
|
@@ -965,6 +975,7 @@
|
|
|
965
975
|
--ks-font-size-interface-xl-base: 1.5006rem;
|
|
966
976
|
--ks-font-size-interface-xxl-base: 1.8383rem;
|
|
967
977
|
--ks-font-size-mono-bp-factor-tablet: 1.125;
|
|
978
|
+
--ks-font-size-mono-bp-factor-largescreen: 1.35;
|
|
968
979
|
--ks-font-size-mono-xxs-base: 0.612rem;
|
|
969
980
|
--ks-font-size-mono-xs-base: 0.7497rem;
|
|
970
981
|
--ks-font-size-mono-s-base: 0.9184rem;
|
|
@@ -1070,7 +1081,7 @@
|
|
|
1070
1081
|
--ks-spacing-inset: calc(var(--ks-spacing-inset-base) * var(--ks-spacing-inset-bp-factor, 1));
|
|
1071
1082
|
--ks-spacing-inset-squish: calc(var(--ks-spacing-inset-squish-base) * var(--ks-spacing-inset-squish-bp-factor, 1));
|
|
1072
1083
|
--ks-spacing-inset-stretch: calc(var(--ks-spacing-inset-stretch-base) * var(--ks-spacing-inset-stretch-bp-factor, 1));
|
|
1073
|
-
--ks-breakpoints: '{"phone":"36em","tablet":"48em","laptop":"62em","desktop":"75em"}';
|
|
1084
|
+
--ks-breakpoints: '{"phone":"36em","tablet":"48em","laptop":"62em","desktop":"75em","largescreen":"130em"}';
|
|
1074
1085
|
}
|
|
1075
1086
|
:root, [ks-theme], [ks-inverted=false] {
|
|
1076
1087
|
--ks-background-color-accent: var(--ks-background-color-accent-base);
|
|
@@ -2727,4 +2738,19 @@
|
|
|
2727
2738
|
--ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-desktop);
|
|
2728
2739
|
--ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-desktop);
|
|
2729
2740
|
}
|
|
2741
|
+
}
|
|
2742
|
+
@media (min-width: 130em) {
|
|
2743
|
+
:root {
|
|
2744
|
+
--ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-largescreen);
|
|
2745
|
+
--ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-largescreen);
|
|
2746
|
+
--ks-font-size-interface-bp-factor: var(--ks-font-size-interface-bp-factor-largescreen);
|
|
2747
|
+
--ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-largescreen);
|
|
2748
|
+
--ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-largescreen);
|
|
2749
|
+
--ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-largescreen);
|
|
2750
|
+
--ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-largescreen);
|
|
2751
|
+
--ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-largescreen);
|
|
2752
|
+
--ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-largescreen);
|
|
2753
|
+
--ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-largescreen);
|
|
2754
|
+
--ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-largescreen);
|
|
2755
|
+
}
|
|
2730
2756
|
}
|
package/dist/tokens/tokens.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 29 Nov 2024 07:38:17 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const KsBackgroundColorAccentBase = "#230a2b";
|
|
@@ -272,6 +272,7 @@ export const KsBreakpointPhone = "36em";
|
|
|
272
272
|
export const KsBreakpointTablet = "48em";
|
|
273
273
|
export const KsBreakpointLaptop = "62em";
|
|
274
274
|
export const KsBreakpointDesktop = "75em";
|
|
275
|
+
export const KsBreakpointLargescreen = "130em";
|
|
275
276
|
export const KsColorFgBase = "#ffffff";
|
|
276
277
|
export const KsColorFgAlpha1Base = "rgba(255, 255, 255, 0.95)";
|
|
277
278
|
export const KsColorFgAlpha2Base = "rgba(255, 255, 255, 0.87)";
|
|
@@ -748,42 +749,49 @@ export const KsSpacingXxsBpFactorPhone = "1.225";
|
|
|
748
749
|
export const KsSpacingXxsBpFactorTablet = "1.5006";
|
|
749
750
|
export const KsSpacingXxsBpFactorLaptop = "1.8383";
|
|
750
751
|
export const KsSpacingXxsBpFactorDesktop = "2.2519";
|
|
752
|
+
export const KsSpacingXxsBpFactorLargescreen = "2.5";
|
|
751
753
|
export const KsSpacingXs = "0.4309rem";
|
|
752
754
|
export const KsSpacingXsBase = "0.4309rem";
|
|
753
755
|
export const KsSpacingXsBpFactorPhone = "1.225";
|
|
754
756
|
export const KsSpacingXsBpFactorTablet = "1.5006";
|
|
755
757
|
export const KsSpacingXsBpFactorLaptop = "1.8383";
|
|
756
758
|
export const KsSpacingXsBpFactorDesktop = "2.2519";
|
|
759
|
+
export const KsSpacingXsBpFactorLargescreen = "2.5";
|
|
757
760
|
export const KsSpacingS = "0.614rem";
|
|
758
761
|
export const KsSpacingSBase = "0.614rem";
|
|
759
762
|
export const KsSpacingSBpFactorPhone = "1.225";
|
|
760
763
|
export const KsSpacingSBpFactorTablet = "1.5006";
|
|
761
764
|
export const KsSpacingSBpFactorLaptop = "1.8383";
|
|
762
765
|
export const KsSpacingSBpFactorDesktop = "2.2519";
|
|
766
|
+
export const KsSpacingSBpFactorLargescreen = "2.5";
|
|
763
767
|
export const KsSpacingM = "0.875rem";
|
|
764
768
|
export const KsSpacingMBase = "0.875rem";
|
|
765
769
|
export const KsSpacingMBpFactorPhone = "1.225";
|
|
766
770
|
export const KsSpacingMBpFactorTablet = "1.5006";
|
|
767
771
|
export const KsSpacingMBpFactorLaptop = "1.8383";
|
|
768
772
|
export const KsSpacingMBpFactorDesktop = "2.2519";
|
|
773
|
+
export const KsSpacingMBpFactorLargescreen = "2.5";
|
|
769
774
|
export const KsSpacingL = "1.2469rem";
|
|
770
775
|
export const KsSpacingLBase = "1.2469rem";
|
|
771
776
|
export const KsSpacingLBpFactorPhone = "1.225";
|
|
772
777
|
export const KsSpacingLBpFactorTablet = "1.5006";
|
|
773
778
|
export const KsSpacingLBpFactorLaptop = "1.8383";
|
|
774
779
|
export const KsSpacingLBpFactorDesktop = "2.2519";
|
|
780
|
+
export const KsSpacingLBpFactorLargescreen = "2.5";
|
|
775
781
|
export const KsSpacingXl = "1.7768rem";
|
|
776
782
|
export const KsSpacingXlBase = "1.7768rem";
|
|
777
783
|
export const KsSpacingXlBpFactorPhone = "1.225";
|
|
778
784
|
export const KsSpacingXlBpFactorTablet = "1.5006";
|
|
779
785
|
export const KsSpacingXlBpFactorLaptop = "1.8383";
|
|
780
786
|
export const KsSpacingXlBpFactorDesktop = "2.2519";
|
|
787
|
+
export const KsSpacingXlBpFactorLargescreen = "2.5";
|
|
781
788
|
export const KsSpacingXxl = "2.5319rem";
|
|
782
789
|
export const KsSpacingXxlBase = "2.5319rem";
|
|
783
790
|
export const KsSpacingXxlBpFactorPhone = "1.225";
|
|
784
791
|
export const KsSpacingXxlBpFactorTablet = "1.5006";
|
|
785
792
|
export const KsSpacingXxlBpFactorLaptop = "1.8383";
|
|
786
793
|
export const KsSpacingXxlBpFactorDesktop = "2.2519";
|
|
794
|
+
export const KsSpacingXxlBpFactorLargescreen = "2.5";
|
|
787
795
|
export const KsSpacingStackXs = "0.4309rem";
|
|
788
796
|
export const KsSpacingStackS = "0.614rem";
|
|
789
797
|
export const KsSpacingStackM = "0.875rem";
|
|
@@ -941,9 +949,10 @@ export const KsFontWeightMedium = 500;
|
|
|
941
949
|
export const KsFontWeightSemiBold = 600;
|
|
942
950
|
export const KsFontWeightBold = 700;
|
|
943
951
|
export const KsFontSizeDisplayBpFactorPhone = 1.125;
|
|
944
|
-
export const KsFontSizeDisplayBpFactorTablet = 1.
|
|
952
|
+
export const KsFontSizeDisplayBpFactorTablet = 1.5;
|
|
945
953
|
export const KsFontSizeDisplayBpFactorLaptop = 1.5;
|
|
946
954
|
export const KsFontSizeDisplayBpFactorDesktop = 1.75;
|
|
955
|
+
export const KsFontSizeDisplayBpFactorLargescreen = 2.25;
|
|
947
956
|
export const KsFontSizeDisplayXxsBase = "0.68rem";
|
|
948
957
|
export const KsFontSizeDisplayXsBase = "0.833rem";
|
|
949
958
|
export const KsFontSizeDisplaySBase = "1.0204rem";
|
|
@@ -952,6 +961,7 @@ export const KsFontSizeDisplayLBase = "1.5313rem";
|
|
|
952
961
|
export const KsFontSizeDisplayXlBase = "1.8758rem";
|
|
953
962
|
export const KsFontSizeDisplayXxlBase = "2.2978rem";
|
|
954
963
|
export const KsFontSizeCopyBpFactorTablet = 1.125;
|
|
964
|
+
export const KsFontSizeCopyBpFactorLargescreen = 1.35;
|
|
955
965
|
export const KsFontSizeCopyXxsBase = "0.612rem";
|
|
956
966
|
export const KsFontSizeCopyXsBase = "0.7497rem";
|
|
957
967
|
export const KsFontSizeCopySBase = "0.9184rem";
|
|
@@ -960,6 +970,7 @@ export const KsFontSizeCopyLBase = "1.3781rem";
|
|
|
960
970
|
export const KsFontSizeCopyXlBase = "1.6882rem";
|
|
961
971
|
export const KsFontSizeCopyXxlBase = "2.068rem";
|
|
962
972
|
export const KsFontSizeInterfaceBpFactorTablet = 1.125;
|
|
973
|
+
export const KsFontSizeInterfaceBpFactorLargescreen = 1.35;
|
|
963
974
|
export const KsFontSizeInterfaceXxsBase = "0.544rem";
|
|
964
975
|
export const KsFontSizeInterfaceXsBase = "0.6664rem";
|
|
965
976
|
export const KsFontSizeInterfaceSBase = "0.8163rem";
|
|
@@ -968,6 +979,7 @@ export const KsFontSizeInterfaceLBase = "1.225rem";
|
|
|
968
979
|
export const KsFontSizeInterfaceXlBase = "1.5006rem";
|
|
969
980
|
export const KsFontSizeInterfaceXxlBase = "1.8383rem";
|
|
970
981
|
export const KsFontSizeMonoBpFactorTablet = 1.125;
|
|
982
|
+
export const KsFontSizeMonoBpFactorLargescreen = 1.35;
|
|
971
983
|
export const KsFontSizeMonoXxsBase = "0.612rem";
|
|
972
984
|
export const KsFontSizeMonoXsBase = "0.7497rem";
|
|
973
985
|
export const KsFontSizeMonoSBase = "0.9184rem";
|