@revenuecat/purchases-ui-js 0.0.20 → 0.0.21

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 (19) hide show
  1. package/dist/components/button/ButtonNode.stories.svelte +3 -3
  2. package/dist/components/footer/Footer.stories.svelte +2 -2
  3. package/dist/components/image/Image.stories.svelte +2 -2
  4. package/dist/components/image/Image.svelte +5 -4
  5. package/dist/components/package/Package.stories.svelte +2 -2
  6. package/dist/components/paywall/Paywall.svelte +3 -1
  7. package/dist/components/paywall/Paywall.svelte.d.ts +3 -2
  8. package/dist/components/paywall/paywall-utils.d.ts +1 -1
  9. package/dist/components/paywall/paywall-utils.js +2 -1
  10. package/dist/components/purchase-button/PurchaseButton.stories.svelte +3 -2
  11. package/dist/components/stack/Stack.stories.svelte +31 -26
  12. package/dist/components/text/TextNode.stories.svelte +6 -5
  13. package/dist/components/text/text-utils.js +3 -2
  14. package/dist/components/timeline/Timeline.stories.svelte +2 -1
  15. package/dist/stories/meta-templates.js +7 -3
  16. package/dist/utils/constants.d.ts +4 -0
  17. package/dist/utils/constants.js +3 -0
  18. package/dist/utils/style-utils.js +9 -8
  19. package/package.json +26 -26
package/dist/components/button/ButtonNode.stories.svelte CHANGED
@@ -7,7 +7,7 @@
7
7
  SupportedActions,
8
8
  } from "../../data/entities";
9
9
  import type { PurchaseState } from "../../data/state";
10
- import type { ColorMode } from "../../types";
10
+ import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR } from "../../utils/constants";
11
11
 
12
12
  const onAction = (action: SupportedActions) => {
13
13
  alert(action.type);
@@ -51,7 +51,7 @@
51
51
  const purchaseState: PurchaseState = {
52
52
  locale: "en_US",
53
53
  defaultLocale: "en_US",
54
- colorMode: "light" as ColorMode,
54
+ colorMode: DEFAULT_COLOR_MODE,
55
55
  };
56
56
 
57
57
  export const labelsData = {
@@ -76,7 +76,7 @@
76
76
  light: { type: "hex", value: "transparent" },
77
77
  },
78
78
  color: {
79
- dark: { type: "hex", value: "#000000" },
79
+ dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
80
80
  light: { type: "hex", value: "#ffffff" },
81
81
  },
82
82
  font_size: "body_m",
package/dist/components/footer/Footer.stories.svelte CHANGED
@@ -1,12 +1,12 @@
1
1
  <script module lang="ts">
2
2
  import { defineMeta } from "@storybook/addon-svelte-csf";
3
3
  import Footer from "./Footer.svelte";
4
- import type { ColorMode } from "../../types";
4
+ import { DEFAULT_COLOR_MODE } from "../../utils/constants";
5
5
 
6
6
  const purchaseState = {
7
7
  locale: "en_US",
8
8
  defaultLocale: "en_US",
9
- colorMode: "light" as ColorMode,
9
+ colorMode: DEFAULT_COLOR_MODE,
10
10
  };
11
11
 
12
12
  const { Story } = defineMeta({
package/dist/components/image/Image.stories.svelte CHANGED
@@ -2,10 +2,10 @@
2
2
  import { defineMeta } from "@storybook/addon-svelte-csf";
3
3
  import Image from "./Image.svelte";
4
4
  import type { PurchaseState } from "../../data/state";
5
- import type { ColorMode } from "../../types";
5
+ import { DEFAULT_COLOR_MODE } from "../../utils/constants";
6
6
 
7
7
  const purchaseState: PurchaseState = {
8
- colorMode: "light" as ColorMode,
8
+ colorMode: DEFAULT_COLOR_MODE,
9
9
  locale: "en_US",
10
10
  defaultLocale: "en_US",
11
11
  };
package/dist/components/image/Image.svelte CHANGED
@@ -1,6 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { getImageComponentStyles } from "./image-utils";
3
3
  import type { ImageProps } from "../../data/entities";
4
+ import { DEFAULT_COLOR_MODE } from "../../utils/constants";
4
5
 
5
6
  const { id, source, purchaseState, ...restProps }: ImageProps = $props();
6
7
 
@@ -29,7 +30,7 @@
29
30
  if (source[colorMode]?.original) {
30
31
  return source[colorMode].original;
31
32
  } else {
32
- return source["light"].original as string;
33
+ return source[DEFAULT_COLOR_MODE]?.original as string;
33
34
  }
34
35
  });
35
36
  </script>
@@ -71,7 +72,7 @@
71
72
  x2={linearGradientAngle.x2}
72
73
  y2={linearGradientAngle.y2}
73
74
  >
74
- {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.["light"]?.points || [] as stop}
75
+ {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.points || [] as stop}
75
76
  <stop
76
77
  offset={`${stop.percent}%`}
77
78
  style={`stop-color: ${stop.color}`}
@@ -87,7 +88,7 @@
87
88
  fx="50%"
88
89
  fy="50%"
89
90
  >
90
- {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.["light"]?.points || [] as stop}
91
+ {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.points || [] as stop}
91
92
  <stop
92
93
  offset={`${stop.percent}%`}
93
94
  style={`stop-color: ${stop.color}`}
@@ -100,7 +101,7 @@
100
101
  offset="0%"
101
102
  style={`stop-color: ${
102
103
  restProps.color_overlay[purchaseState.colorMode]?.value ||
103
- restProps.color_overlay?.["light"]?.value
104
+ restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.value
104
105
  }`}
105
106
  />
106
107
  </linearGradient>
package/dist/components/package/Package.stories.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
  import Package from "./Package.svelte";
4
4
  import type { Extra, SupportedActions } from "../../data/entities";
5
5
  import type { PurchaseState } from "../../data/state";
6
- import type { ColorMode } from "../../types";
6
+ import { DEFAULT_COLOR_MODE } from "../../utils/constants";
7
7
 
8
8
  const onAction = (action: SupportedActions, data?: Extra) => {
9
9
  alert(`${action.type} ${JSON.stringify(data)}`);
@@ -34,7 +34,7 @@
34
34
  },
35
35
  };
36
36
  const purchaseState: PurchaseState = {
37
- colorMode: "light" as ColorMode,
37
+ colorMode: DEFAULT_COLOR_MODE,
38
38
  locale: "en_US",
39
39
  defaultLocale: "en_US",
40
40
  };
package/dist/components/paywall/Paywall.svelte CHANGED
@@ -21,6 +21,7 @@
21
21
  import { prefersDarkMode } from "../../stores/theme";
22
22
  import type { ColorMode } from "../../types";
23
23
  import Footer from "../footer/Footer.svelte";
24
+ import { DEFAULT_COLOR_MODE } from "../../utils/constants";
24
25
 
25
26
  interface Props {
26
27
  paywallData: PaywallData;
@@ -53,7 +54,8 @@
53
54
  locale: selectedLocale || paywallData.default_locale,
54
55
  defaultLocale: paywallData.default_locale,
55
56
  variablesPerPackage,
56
- colorMode: preferredColorMode || ($prefersDarkMode ? "dark" : "light"),
57
+ colorMode:
58
+ preferredColorMode || ($prefersDarkMode ? "dark" : DEFAULT_COLOR_MODE),
57
59
  });
58
60
 
59
61
  let variableDictionary = $state(
package/dist/components/paywall/Paywall.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { PaywallData } from "../../data/entities";
2
2
  import { type VariableDictionary } from "../../utils/variable-utils";
3
3
  import type { ColorMode } from "../../types";
4
- declare const Paywall: import("svelte").Component<{
4
+ interface Props {
5
5
  paywallData: PaywallData;
6
6
  onPurchaseClicked?: (selectedPackageId: string) => void;
7
7
  onBackClicked?: () => void;
@@ -12,6 +12,7 @@ declare const Paywall: import("svelte").Component<{
12
12
  variablesPerPackage?: Record<string, VariableDictionary>;
13
13
  preferredColorMode?: ColorMode;
14
14
  onError?: (error: unknown) => void;
15
- }, {}, "">;
15
+ }
16
+ declare const Paywall: import("svelte").Component<Props, {}, "">;
16
17
  type Paywall = ReturnType<typeof Paywall>;
17
18
  export default Paywall;
package/dist/components/paywall/paywall-utils.d.ts CHANGED
@@ -4,4 +4,4 @@ export declare function getBackgroundStyles({ background, colorMode, }: {
4
4
  background?: BaseNodeBackgroundType;
5
5
  colorMode: ColorMode;
6
6
  }): string;
7
- export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string;
7
+ export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string | undefined;
package/dist/components/paywall/paywall-utils.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { DEFAULT_COLOR_MODE } from "../../utils/constants";
1
2
  import { getColor, prefixObject, stringifyStyles, } from "../../utils/style-utils";
2
3
  export function getBackgroundStyles({ background, colorMode, }) {
3
4
  const styles = { "--background": "initial" };
@@ -19,5 +20,5 @@ export function getBackgroundImageSource(paywallData, colorMode) {
19
20
  const backgroundObject = paywallData.components_config.base
20
21
  .background;
21
22
  return (backgroundObject.value[colorMode]?.original ||
22
- backgroundObject.value["light"]?.original);
23
+ backgroundObject.value[DEFAULT_COLOR_MODE]?.original);
23
24
  }
package/dist/components/purchase-button/PurchaseButton.stories.svelte CHANGED
@@ -2,8 +2,9 @@
2
2
  import { defineMeta } from "@storybook/addon-svelte-csf";
3
3
  import PurchaseButton from "./PurchaseButton.svelte";
4
4
  import type { PurchaseState } from "../../data/state";
5
- import type { ColorMode, DimensionType } from "../../types";
5
+ import type { DimensionType } from "../../types";
6
6
  import type { SupportedActions } from "../../data/entities";
7
+ import { DEFAULT_COLOR_MODE } from "../../utils/constants";
7
8
 
8
9
  const onAction = (action: SupportedActions) => {
9
10
  alert(action.type);
@@ -33,7 +34,7 @@
33
34
  },
34
35
  };
35
36
  const purchaseState: PurchaseState = {
36
- colorMode: "light" as ColorMode,
37
+ colorMode: DEFAULT_COLOR_MODE,
37
38
  locale: "en_US",
38
39
  defaultLocale: "en_US",
39
40
  };
package/dist/components/stack/Stack.stories.svelte CHANGED
@@ -12,6 +12,11 @@
12
12
  import { labelsData as labels } from "../../stories/fixtures";
13
13
  import type { PurchaseState } from "../../data/state";
14
14
  import type { PaywallComponent } from "../../data/entities";
15
+ import {
16
+ DEFAULT_BACKGROUND_COLOR,
17
+ DEFAULT_COLOR_MODE,
18
+ DEFAULT_TEXT_COLOR,
19
+ } from "../../utils/constants";
15
20
 
16
21
  const { Story } = defineMeta({
17
22
  title: "Components/Stack",
@@ -35,7 +40,7 @@
35
40
  const purchaseState: PurchaseState = {
36
41
  locale: "en_US",
37
42
  defaultLocale: "en_US",
38
- colorMode: "light",
43
+ colorMode: DEFAULT_COLOR_MODE,
39
44
  };
40
45
 
41
46
  const components: PaywallComponent[] = [
@@ -379,7 +384,7 @@
379
384
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
380
385
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
381
386
  text_lid: "badge",
382
- color: { light: { type: "hex", value: "#000000" } },
387
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
383
388
  font_weight: "bold",
384
389
  font_size: "body_s",
385
390
  horizontal_alignment: "center",
@@ -422,7 +427,7 @@
422
427
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
423
428
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
424
429
  text_lid: "badge",
425
- color: { light: { type: "hex", value: "#000000" } },
430
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
426
431
  font_weight: "bold",
427
432
  font_size: "body_s",
428
433
  horizontal_alignment: "center",
@@ -465,7 +470,7 @@
465
470
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
466
471
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
467
472
  text_lid: "badge",
468
- color: { light: { type: "hex", value: "#000000" } },
473
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
469
474
  font_weight: "bold",
470
475
  font_size: "body_s",
471
476
  horizontal_alignment: "center",
@@ -508,7 +513,7 @@
508
513
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
509
514
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
510
515
  text_lid: "badge",
511
- color: { light: { type: "hex", value: "#000000" } },
516
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
512
517
  font_weight: "bold",
513
518
  font_size: "body_s",
514
519
  horizontal_alignment: "center",
@@ -551,7 +556,7 @@
551
556
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
552
557
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
553
558
  text_lid: "badge",
554
- color: { light: { type: "hex", value: "#000000" } },
559
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
555
560
  font_weight: "bold",
556
561
  font_size: "body_s",
557
562
  horizontal_alignment: "center",
@@ -594,7 +599,7 @@
594
599
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
595
600
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
596
601
  text_lid: "badge",
597
- color: { light: { type: "hex", value: "#000000" } },
602
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
598
603
  font_weight: "bold",
599
604
  font_size: "body_s",
600
605
  horizontal_alignment: "center",
@@ -637,7 +642,7 @@
637
642
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
638
643
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
639
644
  text_lid: "badge",
640
- color: { light: { type: "hex", value: "#000000" } },
645
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
641
646
  font_weight: "bold",
642
647
  font_size: "body_s",
643
648
  horizontal_alignment: "center",
@@ -680,7 +685,7 @@
680
685
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
681
686
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
682
687
  text_lid: "badge",
683
- color: { light: { type: "hex", value: "#000000" } },
688
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
684
689
  font_weight: "bold",
685
690
  font_size: "body_s",
686
691
  horizontal_alignment: "center",
@@ -775,7 +780,7 @@
775
780
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
776
781
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
777
782
  text_lid: "badge",
778
- color: { light: { type: "hex", value: "#000000" } },
783
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
779
784
  font_weight: "bold",
780
785
  font_size: "body_s",
781
786
  horizontal_alignment: "center",
@@ -818,7 +823,7 @@
818
823
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
819
824
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
820
825
  text_lid: "badge",
821
- color: { light: { type: "hex", value: "#000000" } },
826
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
822
827
  font_weight: "bold",
823
828
  font_size: "body_s",
824
829
  horizontal_alignment: "center",
@@ -861,7 +866,7 @@
861
866
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
862
867
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
863
868
  text_lid: "badge",
864
- color: { light: { type: "hex", value: "#000000" } },
869
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
865
870
  font_weight: "bold",
866
871
  font_size: "body_s",
867
872
  horizontal_alignment: "center",
@@ -904,7 +909,7 @@
904
909
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
905
910
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
906
911
  text_lid: "badge",
907
- color: { light: { type: "hex", value: "#000000" } },
912
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
908
913
  font_weight: "bold",
909
914
  font_size: "body_s",
910
915
  horizontal_alignment: "center",
@@ -947,7 +952,7 @@
947
952
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
948
953
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
949
954
  text_lid: "badge",
950
- color: { light: { type: "hex", value: "#000000" } },
955
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
951
956
  font_weight: "bold",
952
957
  font_size: "body_s",
953
958
  horizontal_alignment: "center",
@@ -990,7 +995,7 @@
990
995
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
991
996
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
992
997
  text_lid: "badge",
993
- color: { light: { type: "hex", value: "#000000" } },
998
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
994
999
  font_weight: "bold",
995
1000
  font_size: "body_s",
996
1001
  horizontal_alignment: "center",
@@ -1036,8 +1041,8 @@
1036
1041
  distribution: "space_around",
1037
1042
  },
1038
1043
  background_color: {
1039
- light: { type: "hex", value: "#FFFFFF" },
1040
- dark: { type: "hex", value: "#FFFFFF" },
1044
+ light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
1045
+ dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
1041
1046
  },
1042
1047
  components,
1043
1048
  labels,
@@ -1082,7 +1087,7 @@
1082
1087
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1083
1088
  margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
1084
1089
  text_lid: "badge",
1085
- color: { light: { type: "hex", value: "#000000" } },
1090
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1086
1091
  font_weight: "bold",
1087
1092
  font_size: "body_s",
1088
1093
  horizontal_alignment: "center",
@@ -1104,8 +1109,8 @@
1104
1109
  distribution: "space_around",
1105
1110
  },
1106
1111
  background_color: {
1107
- light: { type: "hex", value: "#FFFFFF" },
1108
- dark: { type: "hex", value: "#FFFFFF" },
1112
+ light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
1113
+ dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
1109
1114
  },
1110
1115
  components,
1111
1116
  labels,
@@ -1150,7 +1155,7 @@
1150
1155
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1151
1156
  margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
1152
1157
  text_lid: "badge",
1153
- color: { light: { type: "hex", value: "#000000" } },
1158
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1154
1159
  font_weight: "bold",
1155
1160
  font_size: "body_s",
1156
1161
  horizontal_alignment: "center",
@@ -1171,7 +1176,7 @@
1171
1176
  alignment: "center",
1172
1177
  },
1173
1178
  background_color: {
1174
- light: { type: "hex", value: "#FFFFFF" },
1179
+ light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
1175
1180
  },
1176
1181
  components: [
1177
1182
  {
@@ -1231,7 +1236,7 @@
1231
1236
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1232
1237
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
1233
1238
  text_lid: "badge",
1234
- color: { light: { type: "hex", value: "#000000" } },
1239
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1235
1240
  font_weight: "bold",
1236
1241
  font_size: "body_s",
1237
1242
  horizontal_alignment: "center",
@@ -1290,7 +1295,7 @@
1290
1295
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1291
1296
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
1292
1297
  text_lid: "badge",
1293
- color: { light: { type: "hex", value: "#000000" } },
1298
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1294
1299
  font_weight: "bold",
1295
1300
  font_size: "body_s",
1296
1301
  horizontal_alignment: "center",
@@ -1349,7 +1354,7 @@
1349
1354
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1350
1355
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
1351
1356
  text_lid: "badge",
1352
- color: { light: { type: "hex", value: "#000000" } },
1357
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1353
1358
  font_weight: "bold",
1354
1359
  font_size: "body_s",
1355
1360
  horizontal_alignment: "center",
@@ -1408,7 +1413,7 @@
1408
1413
  padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
1409
1414
  margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
1410
1415
  text_lid: "badge",
1411
- color: { light: { type: "hex", value: "#000000" } },
1416
+ color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
1412
1417
  font_weight: "bold",
1413
1418
  font_size: "body_s",
1414
1419
  horizontal_alignment: "center",
package/dist/components/text/TextNode.stories.svelte CHANGED
@@ -10,6 +10,7 @@
10
10
  horizontalAlignmentStoryMeta,
11
11
  } from "../../stories/meta-templates";
12
12
  import type { VariableDictionary } from "../../utils/variable-utils";
13
+ import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR } from "../../utils/constants";
13
14
 
14
15
  /*
15
16
  * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
@@ -52,7 +53,7 @@
52
53
  purchaseState: {
53
54
  locale: "en_US",
54
55
  defaultLocale: "en_US",
55
- colorMode: "light",
56
+ colorMode: DEFAULT_COLOR_MODE,
56
57
  },
57
58
  },
58
59
  });
@@ -157,8 +158,8 @@
157
158
  },
158
159
  },
159
160
  background_color: {
160
- dark: { type: "hex", value: "#000000" },
161
- light: { type: "hex", value: "#000000" },
161
+ dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
162
+ light: { type: "hex", value: DEFAULT_TEXT_COLOR },
162
163
  },
163
164
  name: "hello world!",
164
165
  }}
@@ -212,8 +213,8 @@
212
213
  },
213
214
  },
214
215
  background_color: {
215
- dark: { type: "hex", value: "#000000" },
216
- light: { type: "hex", value: "#000000" },
216
+ dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
217
+ light: { type: "hex", value: DEFAULT_TEXT_COLOR },
217
218
  },
218
219
  name: "hello world!",
219
220
  }}
package/dist/components/text/text-utils.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
2
+ import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../../utils/constants";
2
3
  export const defaultColor = {
3
- light: { type: "hex", value: "#000000" },
4
+ light: { type: "hex", value: DEFAULT_TEXT_COLOR },
4
5
  };
5
6
  export const defaultBackgroundColor = {
6
- light: { type: "hex", value: "#FFFFFF" },
7
+ light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
7
8
  };
8
9
  /**
9
10
  * Generates comprehensive styles for text components by combining text, component and size styles
package/dist/components/timeline/Timeline.stories.svelte CHANGED
@@ -4,6 +4,7 @@
4
4
  import type { PurchaseState } from "../../data/state";
5
5
  import { defaultColor } from "../text/text-utils";
6
6
  import { type TimelineProps } from "../../data/entities";
7
+ import { DEFAULT_COLOR_MODE } from "../../utils/constants";
7
8
 
8
9
  const { Story } = defineMeta({
9
10
  title: "Components/Timeline",
@@ -15,7 +16,7 @@
15
16
  const purchaseState: PurchaseState = {
16
17
  locale: "en_US",
17
18
  defaultLocale: "en_US",
18
- colorMode: "light",
19
+ colorMode: DEFAULT_COLOR_MODE,
19
20
  };
20
21
 
21
22
  const labels = {
package/dist/stories/meta-templates.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../utils/constants";
1
2
  export const getSpacingStoryMeta = (description) => ({
2
3
  description,
3
4
  control: { type: "object" },
@@ -18,7 +19,10 @@ export const getColorStoryMeta = (description) => ({
18
19
  dark: { type: "color" },
19
20
  },
20
21
  },
21
- defaultValue: { dark: "#FFFFFF", light: "#FFFFFF" },
22
+ defaultValue: {
23
+ dark: DEFAULT_BACKGROUND_COLOR,
24
+ light: DEFAULT_BACKGROUND_COLOR,
25
+ },
22
26
  table: {
23
27
  type: {
24
28
  summary: "object",
@@ -99,7 +103,7 @@ export const shadowStoryMeta = {
99
103
  x: 0,
100
104
  y: 0,
101
105
  radius: 0,
102
- color: { dark: "#000000", light: "#000000" },
106
+ color: { dark: DEFAULT_TEXT_COLOR, light: DEFAULT_TEXT_COLOR },
103
107
  },
104
108
  table: {
105
109
  type: {
@@ -119,7 +123,7 @@ export const borderStoryMeta = {
119
123
  },
120
124
  defaultValue: {
121
125
  width: 0,
122
- color: { dark: "#000000", light: "#000000" },
126
+ color: { dark: DEFAULT_TEXT_COLOR, light: DEFAULT_TEXT_COLOR },
123
127
  },
124
128
  description: "Border properties including width, color, style, and radius",
125
129
  };
package/dist/utils/constants.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { ColorMode } from "../types";
2
+ export declare const DEFAULT_COLOR_MODE: ColorMode;
3
+ export declare const DEFAULT_TEXT_COLOR = "#000000";
4
+ export declare const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
package/dist/utils/constants.js ADDED
@@ -0,0 +1,3 @@
1
+ export const DEFAULT_COLOR_MODE = "light";
2
+ export const DEFAULT_TEXT_COLOR = "#000000";
3
+ export const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
package/dist/utils/style-utils.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR, } from "./constants.js";
1
2
  import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, TextAlignments, } from "../types.js";
2
3
  /**
3
4
  * Generates CSS spacing styles for margin or padding
@@ -35,10 +36,10 @@ export function getTextComponentTag(fontSize) {
35
36
  * @param params - Object containing color map, mode and fallback color
36
37
  * @returns Color value as string
37
38
  */
38
- export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
39
+ export function getColor({ colorMap, colorMode = DEFAULT_COLOR_MODE, fallback = "FFFFFF", }) {
39
40
  if (!colorMap)
40
41
  return fallback;
41
- const color = colorMap[colorMode] || colorMap["light"];
42
+ const color = colorMap[colorMode] || colorMap[DEFAULT_COLOR_MODE];
42
43
  let colorPoints = "";
43
44
  switch (color.type) {
44
45
  case "hex":
@@ -64,7 +65,7 @@ export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }
64
65
  * @param colorMode - Color mode (light/dark)
65
66
  * @returns CSS border style string
66
67
  */
67
- export function getBorderStyle(border, colorMode = "light") {
68
+ export function getBorderStyle(border, colorMode = DEFAULT_COLOR_MODE) {
68
69
  if (!border)
69
70
  return "";
70
71
  const color = getColor({ colorMap: border.color, colorMode });
@@ -88,7 +89,7 @@ export function getCornerRadiusStyle(corners) {
88
89
  * @param params - Component style configuration object
89
90
  * @returns CSS style object with component styles
90
91
  */
91
- export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = "light", shape, shadow, }) {
92
+ export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = DEFAULT_COLOR_MODE, shape, shadow, }) {
92
93
  const stylesObject = {
93
94
  "--margin-block-start": "0px",
94
95
  "--margin-inline-end": "0px",
@@ -124,7 +125,7 @@ export function getComponentStyles({ background_color, border, margin, padding,
124
125
  stylesObject["--text-color"] = getColor({
125
126
  colorMap: color,
126
127
  colorMode,
127
- fallback: "#000000",
128
+ fallback: DEFAULT_TEXT_COLOR,
128
129
  });
129
130
  }
130
131
  if (border) {
@@ -143,7 +144,7 @@ export function getComponentStyles({ background_color, border, margin, padding,
143
144
  }
144
145
  if (shadow) {
145
146
  stylesObject["--shadow"] = `${shadow.x}px ${shadow.y}px ${shadow.radius}px
146
- ${getColor({ colorMap: shadow.color, colorMode, fallback: "#000000" })}`;
147
+ ${getColor({ colorMap: shadow.color, colorMode, fallback: DEFAULT_TEXT_COLOR })}`;
147
148
  }
148
149
  return stylesObject;
149
150
  }
@@ -256,7 +257,7 @@ export function getDimensionStyle(dimension) {
256
257
  * @param colorMode - The currently selected ColorMode (dark/light)
257
258
  * @returns CSS style object with text formatting properties
258
259
  */
259
- export function getTextStyles(props, colorMode = "light") {
260
+ export function getTextStyles(props, colorMode = DEFAULT_COLOR_MODE) {
260
261
  const { font_size, horizontal_alignment, font_weight, font_name, color } = props;
261
262
  const styles = {
262
263
  "--text-align": "initial",
@@ -404,7 +405,7 @@ export function getLinearGradientAngle(props) {
404
405
  return { x1: "0%", y1: "0%", x2: "0%", y2: "0%" };
405
406
  }
406
407
  const { color_overlay: colorOverlay } = props;
407
- const angle = colorOverlay?.["light"]?.degrees || 0;
408
+ const angle = colorOverlay?.[DEFAULT_COLOR_MODE]?.degrees || 0;
408
409
  const x1 = "50%";
409
410
  const y1 = "0%";
410
411
  const x2 = `${Math.round(50 + Math.sin(((angle + 90) * Math.PI) / 90) * 50)}%`;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@revenuecat/purchases-ui-js",
3
3
  "description": "Web components for Paywalls. Powered by RevenueCat",
4
4
  "private": false,
5
- "version": "0.0.20",
5
+ "version": "0.0.21",
6
6
  "author": {
7
7
  "name": "RevenueCat, Inc."
8
8
  },
@@ -61,37 +61,37 @@
61
61
  "svelte": "^5.3.0"
62
62
  },
63
63
  "devDependencies": {
64
- "@chromatic-com/storybook": "^3.2.2",
65
- "@eslint/js": "^9.16.0",
66
- "@storybook/addon-essentials": "^8.4.7",
67
- "@storybook/addon-interactions": "^8.4.7",
68
- "@storybook/addon-links": "^8.4.7",
64
+ "@chromatic-com/storybook": "^3.2.3",
65
+ "@eslint/js": "^9.18.0",
66
+ "@storybook/addon-essentials": "^8.5.0",
67
+ "@storybook/addon-interactions": "^8.5.0",
68
+ "@storybook/addon-links": "^8.5.0",
69
69
  "@storybook/addon-svelte-csf": "^5.0.0-next.14",
70
- "@storybook/blocks": "^8.4.7",
71
- "@storybook/svelte": "^8.4.7",
72
- "@storybook/sveltekit": "^8.4.7",
73
- "@storybook/test": "^8.4.7",
74
- "@sveltejs/adapter-node": "^5.2.9",
75
- "@sveltejs/kit": "^2.9.0",
70
+ "@storybook/blocks": "^8.5.0",
71
+ "@storybook/svelte": "^8.5.0",
72
+ "@storybook/sveltekit": "^8.5.0",
73
+ "@storybook/test": "^8.5.0",
74
+ "@sveltejs/adapter-node": "^5.2.11",
75
+ "@sveltejs/kit": "^2.15.3",
76
76
  "@sveltejs/package": "^2.3.7",
77
- "@sveltejs/vite-plugin-svelte": "^5.0.2",
78
- "@typescript-eslint/parser": "^8.17.0",
79
- "chromatic": "^11.20.0",
80
- "eslint": "^9.16.0",
77
+ "@sveltejs/vite-plugin-svelte": "^5.0.3",
78
+ "@typescript-eslint/parser": "^8.20.0",
79
+ "chromatic": "^11.24.0",
80
+ "eslint": "^9.18.0",
81
81
  "eslint-plugin-svelte": "^2.46.1",
82
- "globals": "^15.13.0",
82
+ "globals": "^15.14.0",
83
83
  "husky": "^9.1.7",
84
- "jsdom": "^25.0.1",
85
- "lint-staged": "^15.2.10",
84
+ "jsdom": "^26.0.0",
85
+ "lint-staged": "^15.3.0",
86
86
  "prettier": "^3.4.2",
87
- "prettier-plugin-svelte": "^3.3.2",
87
+ "prettier-plugin-svelte": "^3.3.3",
88
88
  "publint": "^0.2.12",
89
- "storybook": "^8.4.7",
90
- "svelte": "^5.9.1",
91
- "svelte-check": "^4.1.1",
92
- "typescript": "^5.7.2",
93
- "typescript-eslint": "^8.17.0",
94
- "vite": "^6.0.3",
89
+ "storybook": "^8.5.0",
90
+ "svelte": "^5.18.0",
91
+ "svelte-check": "^4.1.4",
92
+ "typescript": "^5.7.3",
93
+ "typescript-eslint": "^8.20.0",
94
+ "vite": "^6.0.7",
95
95
  "vitest": "^2.1.8"
96
96
  },
97
97
  "lint-staged": {