strapi-plugin-magic-mail 2.6.1 → 2.6.3

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.
@@ -25,14 +25,14 @@ const Title = styled__default.default(designSystem.Typography)`
25
25
  font-size: 2.5rem;
26
26
  font-weight: 700;
27
27
  margin-bottom: 8px;
28
- background: linear-gradient(135deg, #0EA5E9, #A855F7);
28
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9), var(--colors-secondary500, #A855F7));
29
29
  -webkit-background-clip: text;
30
30
  -webkit-text-fill-color: transparent;
31
31
  display: block;
32
32
  `;
33
33
  const Subtitle = styled__default.default(designSystem.Typography)`
34
34
  font-size: 1.125rem;
35
- color: ${(props) => props.theme.colors.neutral600};
35
+ color: var(--colors-neutral600);
36
36
  line-height: 1.6;
37
37
  display: block;
38
38
  `;
@@ -51,10 +51,10 @@ const TierWrapper = styled__default.default(designSystem.Box)`
51
51
  display: flex;
52
52
  `;
53
53
  const TierCard = styled__default.default(designSystem.Box)`
54
- background: ${(props) => props.theme.colors.neutral0};
54
+ background: ${(p) => p.theme.colors.neutral0};
55
55
  border-radius: 16px;
56
56
  padding: 32px;
57
- border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : props.theme.colors.neutral200};
57
+ border: 2px solid ${(props) => props.$featured ? "var(--colors-primary600, #0EA5E9)" : "rgba(128, 128, 128, 0.2)"};
58
58
  position: relative;
59
59
  transition: all 0.3s ease;
60
60
  box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
@@ -71,7 +71,7 @@ const PopularBadge = styled__default.default(designSystem.Badge)`
71
71
  position: absolute;
72
72
  top: -12px;
73
73
  right: 24px;
74
- background: linear-gradient(135deg, #0EA5E9, #0284C7);
74
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9), var(--colors-primary700, #0284C7));
75
75
  color: white;
76
76
  padding: 4px 16px;
77
77
  font-size: 12px;
@@ -104,7 +104,7 @@ const TierPrice = styled__default.default(designSystem.Typography)`
104
104
  margin-bottom: 4px;
105
105
  `;
106
106
  const TierDescription = styled__default.default(designSystem.Typography)`
107
- color: ${(props) => props.theme.colors.neutral600};
107
+ color: var(--colors-neutral600);
108
108
  margin-bottom: 24px;
109
109
  `;
110
110
  const FeatureList = styled__default.default(designSystem.Box)`
@@ -127,11 +127,11 @@ const FeatureIcon = styled__default.default(designSystem.Box)`
127
127
  margin-top: 2px;
128
128
 
129
129
  ${(props) => props.$included ? `
130
- background: #DCFCE7;
131
- svg { color: #16A34A; }
130
+ background: rgba(34, 197, 94, 0.15);
131
+ svg { color: var(--colors-success600, #16A34A); }
132
132
  ` : `
133
- background: #FEE2E2;
134
- svg { color: #DC2626; }
133
+ background: rgba(220, 38, 38, 0.12);
134
+ svg { color: var(--colors-danger600, #DC2626); }
135
135
  `}
136
136
  `;
137
137
  const UpgradeButton = styled__default.default(designSystem.Button)`
@@ -154,8 +154,8 @@ const CurrentPlanBadge = styled__default.default(designSystem.Badge)`
154
154
  display: flex;
155
155
  align-items: center;
156
156
  justify-content: center;
157
- background: ${(props) => props.theme.colors.neutral100};
158
- color: ${(props) => props.theme.colors.neutral600};
157
+ background: var(--colors-neutral100);
158
+ color: var(--colors-neutral600);
159
159
  font-weight: 600;
160
160
  font-size: 15px;
161
161
  `;
@@ -296,11 +296,11 @@ const LicensePage = () => {
296
296
  /* @__PURE__ */ jsxRuntime.jsx(TierName, { variant: "beta", children: tier.name }),
297
297
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "baseline", gap: 1, children: [
298
298
  /* @__PURE__ */ jsxRuntime.jsx(TierPrice, { variant: "alpha", children: tier.price }),
299
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
299
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "var(--colors-neutral600)" }, children: tier.period })
300
300
  ] }),
301
301
  /* @__PURE__ */ jsxRuntime.jsx(TierDescription, { variant: "omega", children: tier.description }),
302
302
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: {
303
- background: "#F9FAFB",
303
+ background: "var(--colors-neutral100, #F9FAFB)",
304
304
  borderRadius: "8px",
305
305
  padding: "12px",
306
306
  marginBottom: "20px"
@@ -329,7 +329,7 @@ const LicensePage = () => {
329
329
  variant: "omega",
330
330
  style: {
331
331
  fontSize: "14px",
332
- color: feature.included ? "#374151" : "#9CA3AF",
332
+ color: feature.included ? "var(--colors-neutral800)" : "var(--colors-neutral500)",
333
333
  textDecoration: feature.included ? "none" : "line-through"
334
334
  },
335
335
  children: feature.name
@@ -21,14 +21,14 @@ const Title = styled(Typography)`
21
21
  font-size: 2.5rem;
22
22
  font-weight: 700;
23
23
  margin-bottom: 8px;
24
- background: linear-gradient(135deg, #0EA5E9, #A855F7);
24
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9), var(--colors-secondary500, #A855F7));
25
25
  -webkit-background-clip: text;
26
26
  -webkit-text-fill-color: transparent;
27
27
  display: block;
28
28
  `;
29
29
  const Subtitle = styled(Typography)`
30
30
  font-size: 1.125rem;
31
- color: ${(props) => props.theme.colors.neutral600};
31
+ color: var(--colors-neutral600);
32
32
  line-height: 1.6;
33
33
  display: block;
34
34
  `;
@@ -47,10 +47,10 @@ const TierWrapper = styled(Box)`
47
47
  display: flex;
48
48
  `;
49
49
  const TierCard = styled(Box)`
50
- background: ${(props) => props.theme.colors.neutral0};
50
+ background: ${(p) => p.theme.colors.neutral0};
51
51
  border-radius: 16px;
52
52
  padding: 32px;
53
- border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : props.theme.colors.neutral200};
53
+ border: 2px solid ${(props) => props.$featured ? "var(--colors-primary600, #0EA5E9)" : "rgba(128, 128, 128, 0.2)"};
54
54
  position: relative;
55
55
  transition: all 0.3s ease;
56
56
  box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
@@ -67,7 +67,7 @@ const PopularBadge = styled(Badge)`
67
67
  position: absolute;
68
68
  top: -12px;
69
69
  right: 24px;
70
- background: linear-gradient(135deg, #0EA5E9, #0284C7);
70
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9), var(--colors-primary700, #0284C7));
71
71
  color: white;
72
72
  padding: 4px 16px;
73
73
  font-size: 12px;
@@ -100,7 +100,7 @@ const TierPrice = styled(Typography)`
100
100
  margin-bottom: 4px;
101
101
  `;
102
102
  const TierDescription = styled(Typography)`
103
- color: ${(props) => props.theme.colors.neutral600};
103
+ color: var(--colors-neutral600);
104
104
  margin-bottom: 24px;
105
105
  `;
106
106
  const FeatureList = styled(Box)`
@@ -123,11 +123,11 @@ const FeatureIcon = styled(Box)`
123
123
  margin-top: 2px;
124
124
 
125
125
  ${(props) => props.$included ? `
126
- background: #DCFCE7;
127
- svg { color: #16A34A; }
126
+ background: rgba(34, 197, 94, 0.15);
127
+ svg { color: var(--colors-success600, #16A34A); }
128
128
  ` : `
129
- background: #FEE2E2;
130
- svg { color: #DC2626; }
129
+ background: rgba(220, 38, 38, 0.12);
130
+ svg { color: var(--colors-danger600, #DC2626); }
131
131
  `}
132
132
  `;
133
133
  const UpgradeButton = styled(Button)`
@@ -150,8 +150,8 @@ const CurrentPlanBadge = styled(Badge)`
150
150
  display: flex;
151
151
  align-items: center;
152
152
  justify-content: center;
153
- background: ${(props) => props.theme.colors.neutral100};
154
- color: ${(props) => props.theme.colors.neutral600};
153
+ background: var(--colors-neutral100);
154
+ color: var(--colors-neutral600);
155
155
  font-weight: 600;
156
156
  font-size: 15px;
157
157
  `;
@@ -292,11 +292,11 @@ const LicensePage = () => {
292
292
  /* @__PURE__ */ jsx(TierName, { variant: "beta", children: tier.name }),
293
293
  /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 1, children: [
294
294
  /* @__PURE__ */ jsx(TierPrice, { variant: "alpha", children: tier.price }),
295
- /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
295
+ /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "var(--colors-neutral600)" }, children: tier.period })
296
296
  ] }),
297
297
  /* @__PURE__ */ jsx(TierDescription, { variant: "omega", children: tier.description }),
298
298
  /* @__PURE__ */ jsx(Box, { style: {
299
- background: "#F9FAFB",
299
+ background: "var(--colors-neutral100, #F9FAFB)",
300
300
  borderRadius: "8px",
301
301
  padding: "12px",
302
302
  marginBottom: "20px"
@@ -325,7 +325,7 @@ const LicensePage = () => {
325
325
  variant: "omega",
326
326
  style: {
327
327
  fontSize: "14px",
328
- color: feature.included ? "#374151" : "#9CA3AF",
328
+ color: feature.included ? "var(--colors-neutral800)" : "var(--colors-neutral500)",
329
329
  textDecoration: feature.included ? "none" : "line-through"
330
330
  },
331
331
  children: feature.name
@@ -4,7 +4,7 @@ import { Loader, Typography, Flex, Toggle, Box, Field, TextInput } from "@strapi
4
4
  import { useFetchClient, useNotification } from "@strapi/strapi/admin";
5
5
  import { ArrowPathIcon, LinkIcon, EyeIcon, EnvelopeIcon, UserIcon } from "@heroicons/react/24/outline";
6
6
  import styled, { css, keyframes } from "styled-components";
7
- import { T as TertiaryButton, G as GradientButton } from "./StyledButtons-nt2C730e.mjs";
7
+ import { T as TertiaryButton, G as GradientButton } from "./StyledButtons-CdOf4Sps.mjs";
8
8
  const fadeIn = keyframes`
9
9
  from { opacity: 0; transform: translateY(10px); }
10
10
  to { opacity: 1; transform: translateY(0); }
@@ -24,25 +24,25 @@ const PageHeader = styled(Flex)`
24
24
  const PageTitle = styled(Typography)`
25
25
  font-size: 28px;
26
26
  font-weight: 700;
27
- color: ${(props) => props.theme.colors.neutral800};
27
+ color: var(--colors-neutral800);
28
28
  display: block;
29
29
  `;
30
30
  const PageSubtitle = styled(Typography)`
31
31
  font-size: 14px;
32
- color: ${(props) => props.theme.colors.neutral600};
32
+ color: var(--colors-neutral600);
33
33
  display: block;
34
34
  `;
35
35
  const ActionBar = styled(Flex)`
36
36
  margin-bottom: 32px;
37
37
  padding: 16px 20px;
38
- background: ${(props) => props.theme.colors.neutral0};
39
- border: 1px solid ${(props) => props.theme.colors.neutral200};
38
+ background: ${(p) => p.theme.colors.neutral0};
39
+ border: 1px solid rgba(128, 128, 128, 0.2);
40
40
  border-radius: 8px;
41
41
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
42
42
  `;
43
43
  const SettingsSection = styled(Box)`
44
- background: ${(props) => props.theme.colors.neutral0};
45
- border: 1px solid ${(props) => props.theme.colors.neutral200};
44
+ background: ${(p) => p.theme.colors.neutral0};
45
+ border: 1px solid rgba(128, 128, 128, 0.2);
46
46
  border-radius: 12px;
47
47
  overflow: hidden;
48
48
  margin-bottom: 24px;
@@ -50,8 +50,8 @@ const SettingsSection = styled(Box)`
50
50
  `;
51
51
  const SectionHeader = styled(Flex)`
52
52
  padding: 20px 24px;
53
- background: ${(props) => props.theme.colors.neutral100};
54
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
53
+ background: var(--colors-neutral100);
54
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
55
55
  `;
56
56
  const SectionIcon = styled(Box)`
57
57
  width: 44px;
@@ -61,7 +61,7 @@ const SectionIcon = styled(Box)`
61
61
  align-items: center;
62
62
  justify-content: center;
63
63
  margin-right: 16px;
64
- background: ${(props) => props.bgColor || "#E0F2FE"};
64
+ background: ${(props) => props.bgColor || "rgba(14, 165, 233, 0.12)"};
65
65
  flex-shrink: 0;
66
66
  `;
67
67
  const SectionContent = styled(Box)`
@@ -69,7 +69,7 @@ const SectionContent = styled(Box)`
69
69
  `;
70
70
  const SettingRow = styled(Flex)`
71
71
  padding: 16px 0;
72
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
72
+ border-bottom: 1px solid rgba(128, 128, 128, 0.15);
73
73
 
74
74
  &:last-child {
75
75
  border-bottom: none;
@@ -90,12 +90,12 @@ const SettingInfo = styled(Flex)`
90
90
  const SettingLabel = styled(Typography)`
91
91
  font-size: 14px;
92
92
  font-weight: 600;
93
- color: ${(props) => props.theme.colors.neutral800};
93
+ color: var(--colors-neutral800);
94
94
  display: block;
95
95
  `;
96
96
  const SettingDescription = styled(Typography)`
97
97
  font-size: 13px;
98
- color: ${(props) => props.theme.colors.neutral500};
98
+ color: var(--colors-neutral500);
99
99
  line-height: 1.5;
100
100
  display: block;
101
101
  `;
@@ -112,15 +112,15 @@ const LoaderContainer = styled(Flex)`
112
112
  gap: 16px;
113
113
  `;
114
114
  const InfoBox = styled(Box)`
115
- background: #EFF6FF;
116
- border: 1px solid #BFDBFE;
115
+ background: rgba(14, 165, 233, 0.08);
116
+ border: 1px solid rgba(14, 165, 233, 0.3);
117
117
  border-radius: 8px;
118
118
  padding: 12px 16px;
119
119
  margin-top: 16px;
120
120
  `;
121
121
  const CodeSnippet = styled.code`
122
122
  background: #1E293B;
123
- color: #E2E8F0;
123
+ color: rgba(128, 128, 128, 0.3);
124
124
  padding: 2px 8px;
125
125
  border-radius: 4px;
126
126
  font-size: 12px;
@@ -225,7 +225,7 @@ const PluginSettingsPage = () => {
225
225
  ] }),
226
226
  /* @__PURE__ */ jsxs(SettingsSection, { children: [
227
227
  /* @__PURE__ */ jsxs(SectionHeader, { alignItems: "center", children: [
228
- /* @__PURE__ */ jsx(SectionIcon, { bgColor: "#DBEAFE", children: /* @__PURE__ */ jsx(LinkIcon, { style: { width: 22, height: 22, color: "#2563EB" } }) }),
228
+ /* @__PURE__ */ jsx(SectionIcon, { bgColor: "rgba(37, 99, 235, 0.15)", children: /* @__PURE__ */ jsx(LinkIcon, { style: { width: 22, height: 22, color: "var(--colors-primary600, #2563EB)" } }) }),
229
229
  /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
230
230
  /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: "Link Tracking" }),
231
231
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Track when recipients click links in your emails" })
@@ -273,7 +273,7 @@ const PluginSettingsPage = () => {
273
273
  ] }),
274
274
  /* @__PURE__ */ jsxs(SettingsSection, { children: [
275
275
  /* @__PURE__ */ jsxs(SectionHeader, { alignItems: "center", children: [
276
- /* @__PURE__ */ jsx(SectionIcon, { bgColor: "#DCFCE7", children: /* @__PURE__ */ jsx(EyeIcon, { style: { width: 22, height: 22, color: "#16A34A" } }) }),
276
+ /* @__PURE__ */ jsx(SectionIcon, { bgColor: "rgba(34, 197, 94, 0.15)", children: /* @__PURE__ */ jsx(EyeIcon, { style: { width: 22, height: 22, color: "var(--colors-success600, #16A34A)" } }) }),
277
277
  /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
278
278
  /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: "Open Tracking" }),
279
279
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Track when recipients open your emails" })
@@ -295,7 +295,7 @@ const PluginSettingsPage = () => {
295
295
  ] }),
296
296
  /* @__PURE__ */ jsxs(SettingsSection, { children: [
297
297
  /* @__PURE__ */ jsxs(SectionHeader, { alignItems: "center", children: [
298
- /* @__PURE__ */ jsx(SectionIcon, { bgColor: "#FEF3C7", children: /* @__PURE__ */ jsx(EnvelopeIcon, { style: { width: 22, height: 22, color: "#D97706" } }) }),
298
+ /* @__PURE__ */ jsx(SectionIcon, { bgColor: "rgba(245, 158, 11, 0.15)", children: /* @__PURE__ */ jsx(EnvelopeIcon, { style: { width: 22, height: 22, color: "var(--colors-warning600, #D97706)" } }) }),
299
299
  /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
300
300
  /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: "Unsubscribe Settings" }),
301
301
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "GDPR-compliant List-Unsubscribe headers" })
@@ -332,7 +332,7 @@ const PluginSettingsPage = () => {
332
332
  ] }),
333
333
  /* @__PURE__ */ jsxs(SettingsSection, { children: [
334
334
  /* @__PURE__ */ jsxs(SectionHeader, { alignItems: "center", children: [
335
- /* @__PURE__ */ jsx(SectionIcon, { bgColor: "#F3E8FF", children: /* @__PURE__ */ jsx(UserIcon, { style: { width: 22, height: 22, color: "#9333EA" } }) }),
335
+ /* @__PURE__ */ jsx(SectionIcon, { bgColor: "rgba(147, 51, 234, 0.12)", children: /* @__PURE__ */ jsx(UserIcon, { style: { width: 22, height: 22, color: "var(--colors-secondary600, #9333EA)" } }) }),
336
336
  /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
337
337
  /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: "Default Sender" }),
338
338
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Fallback sender information when not specified per email" })
@@ -6,7 +6,7 @@ const designSystem = require("@strapi/design-system");
6
6
  const admin = require("@strapi/strapi/admin");
7
7
  const outline = require("@heroicons/react/24/outline");
8
8
  const styled = require("styled-components");
9
- const StyledButtons = require("./StyledButtons-M7vUd2N4.js");
9
+ const StyledButtons = require("./StyledButtons-DVGuFoqy.js");
10
10
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
11
11
  const styled__default = /* @__PURE__ */ _interopDefault(styled);
12
12
  const fadeIn = styled.keyframes`
@@ -28,25 +28,25 @@ const PageHeader = styled__default.default(designSystem.Flex)`
28
28
  const PageTitle = styled__default.default(designSystem.Typography)`
29
29
  font-size: 28px;
30
30
  font-weight: 700;
31
- color: ${(props) => props.theme.colors.neutral800};
31
+ color: var(--colors-neutral800);
32
32
  display: block;
33
33
  `;
34
34
  const PageSubtitle = styled__default.default(designSystem.Typography)`
35
35
  font-size: 14px;
36
- color: ${(props) => props.theme.colors.neutral600};
36
+ color: var(--colors-neutral600);
37
37
  display: block;
38
38
  `;
39
39
  const ActionBar = styled__default.default(designSystem.Flex)`
40
40
  margin-bottom: 32px;
41
41
  padding: 16px 20px;
42
- background: ${(props) => props.theme.colors.neutral0};
43
- border: 1px solid ${(props) => props.theme.colors.neutral200};
42
+ background: ${(p) => p.theme.colors.neutral0};
43
+ border: 1px solid rgba(128, 128, 128, 0.2);
44
44
  border-radius: 8px;
45
45
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
46
46
  `;
47
47
  const SettingsSection = styled__default.default(designSystem.Box)`
48
- background: ${(props) => props.theme.colors.neutral0};
49
- border: 1px solid ${(props) => props.theme.colors.neutral200};
48
+ background: ${(p) => p.theme.colors.neutral0};
49
+ border: 1px solid rgba(128, 128, 128, 0.2);
50
50
  border-radius: 12px;
51
51
  overflow: hidden;
52
52
  margin-bottom: 24px;
@@ -54,8 +54,8 @@ const SettingsSection = styled__default.default(designSystem.Box)`
54
54
  `;
55
55
  const SectionHeader = styled__default.default(designSystem.Flex)`
56
56
  padding: 20px 24px;
57
- background: ${(props) => props.theme.colors.neutral100};
58
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
57
+ background: var(--colors-neutral100);
58
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
59
59
  `;
60
60
  const SectionIcon = styled__default.default(designSystem.Box)`
61
61
  width: 44px;
@@ -65,7 +65,7 @@ const SectionIcon = styled__default.default(designSystem.Box)`
65
65
  align-items: center;
66
66
  justify-content: center;
67
67
  margin-right: 16px;
68
- background: ${(props) => props.bgColor || "#E0F2FE"};
68
+ background: ${(props) => props.bgColor || "rgba(14, 165, 233, 0.12)"};
69
69
  flex-shrink: 0;
70
70
  `;
71
71
  const SectionContent = styled__default.default(designSystem.Box)`
@@ -73,7 +73,7 @@ const SectionContent = styled__default.default(designSystem.Box)`
73
73
  `;
74
74
  const SettingRow = styled__default.default(designSystem.Flex)`
75
75
  padding: 16px 0;
76
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
76
+ border-bottom: 1px solid rgba(128, 128, 128, 0.15);
77
77
 
78
78
  &:last-child {
79
79
  border-bottom: none;
@@ -94,12 +94,12 @@ const SettingInfo = styled__default.default(designSystem.Flex)`
94
94
  const SettingLabel = styled__default.default(designSystem.Typography)`
95
95
  font-size: 14px;
96
96
  font-weight: 600;
97
- color: ${(props) => props.theme.colors.neutral800};
97
+ color: var(--colors-neutral800);
98
98
  display: block;
99
99
  `;
100
100
  const SettingDescription = styled__default.default(designSystem.Typography)`
101
101
  font-size: 13px;
102
- color: ${(props) => props.theme.colors.neutral500};
102
+ color: var(--colors-neutral500);
103
103
  line-height: 1.5;
104
104
  display: block;
105
105
  `;
@@ -116,15 +116,15 @@ const LoaderContainer = styled__default.default(designSystem.Flex)`
116
116
  gap: 16px;
117
117
  `;
118
118
  const InfoBox = styled__default.default(designSystem.Box)`
119
- background: #EFF6FF;
120
- border: 1px solid #BFDBFE;
119
+ background: rgba(14, 165, 233, 0.08);
120
+ border: 1px solid rgba(14, 165, 233, 0.3);
121
121
  border-radius: 8px;
122
122
  padding: 12px 16px;
123
123
  margin-top: 16px;
124
124
  `;
125
125
  const CodeSnippet = styled__default.default.code`
126
126
  background: #1E293B;
127
- color: #E2E8F0;
127
+ color: rgba(128, 128, 128, 0.3);
128
128
  padding: 2px 8px;
129
129
  border-radius: 4px;
130
130
  font-size: 12px;
@@ -229,7 +229,7 @@ const PluginSettingsPage = () => {
229
229
  ] }),
230
230
  /* @__PURE__ */ jsxRuntime.jsxs(SettingsSection, { children: [
231
231
  /* @__PURE__ */ jsxRuntime.jsxs(SectionHeader, { alignItems: "center", children: [
232
- /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { bgColor: "#DBEAFE", children: /* @__PURE__ */ jsxRuntime.jsx(outline.LinkIcon, { style: { width: 22, height: 22, color: "#2563EB" } }) }),
232
+ /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { bgColor: "rgba(37, 99, 235, 0.15)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.LinkIcon, { style: { width: 22, height: 22, color: "var(--colors-primary600, #2563EB)" } }) }),
233
233
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
234
234
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Link Tracking" }),
235
235
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Track when recipients click links in your emails" })
@@ -277,7 +277,7 @@ const PluginSettingsPage = () => {
277
277
  ] }),
278
278
  /* @__PURE__ */ jsxRuntime.jsxs(SettingsSection, { children: [
279
279
  /* @__PURE__ */ jsxRuntime.jsxs(SectionHeader, { alignItems: "center", children: [
280
- /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { bgColor: "#DCFCE7", children: /* @__PURE__ */ jsxRuntime.jsx(outline.EyeIcon, { style: { width: 22, height: 22, color: "#16A34A" } }) }),
280
+ /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { bgColor: "rgba(34, 197, 94, 0.15)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.EyeIcon, { style: { width: 22, height: 22, color: "var(--colors-success600, #16A34A)" } }) }),
281
281
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
282
282
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Open Tracking" }),
283
283
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Track when recipients open your emails" })
@@ -299,7 +299,7 @@ const PluginSettingsPage = () => {
299
299
  ] }),
300
300
  /* @__PURE__ */ jsxRuntime.jsxs(SettingsSection, { children: [
301
301
  /* @__PURE__ */ jsxRuntime.jsxs(SectionHeader, { alignItems: "center", children: [
302
- /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { bgColor: "#FEF3C7", children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeIcon, { style: { width: 22, height: 22, color: "#D97706" } }) }),
302
+ /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { bgColor: "rgba(245, 158, 11, 0.15)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.EnvelopeIcon, { style: { width: 22, height: 22, color: "var(--colors-warning600, #D97706)" } }) }),
303
303
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
304
304
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Unsubscribe Settings" }),
305
305
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "GDPR-compliant List-Unsubscribe headers" })
@@ -336,7 +336,7 @@ const PluginSettingsPage = () => {
336
336
  ] }),
337
337
  /* @__PURE__ */ jsxRuntime.jsxs(SettingsSection, { children: [
338
338
  /* @__PURE__ */ jsxRuntime.jsxs(SectionHeader, { alignItems: "center", children: [
339
- /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { bgColor: "#F3E8FF", children: /* @__PURE__ */ jsxRuntime.jsx(outline.UserIcon, { style: { width: 22, height: 22, color: "#9333EA" } }) }),
339
+ /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { bgColor: "rgba(147, 51, 234, 0.12)", children: /* @__PURE__ */ jsxRuntime.jsx(outline.UserIcon, { style: { width: 22, height: 22, color: "var(--colors-secondary600, #9333EA)" } }) }),
340
340
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
341
341
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Default Sender" }),
342
342
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Fallback sender information when not specified per email" })
@@ -6,7 +6,7 @@ const designSystem = require("@strapi/design-system");
6
6
  const admin = require("@strapi/strapi/admin");
7
7
  const outline = require("@heroicons/react/24/outline");
8
8
  const styled = require("styled-components");
9
- const StyledButtons = require("./StyledButtons-M7vUd2N4.js");
9
+ const StyledButtons = require("./StyledButtons-DVGuFoqy.js");
10
10
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
11
11
  const styled__default = /* @__PURE__ */ _interopDefault(styled);
12
12
  const fadeIn = styled.keyframes`
@@ -26,12 +26,12 @@ const StickySaveBar = styled__default.default(designSystem.Box)`
26
26
  position: sticky;
27
27
  top: 0;
28
28
  z-index: 10;
29
- background: ${(props) => props.theme.colors.neutral0};
30
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
29
+ background: ${(p) => p.theme.colors.neutral0};
30
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
31
31
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
32
32
  `;
33
33
  const LicenseKeyBanner = styled__default.default(designSystem.Box)`
34
- background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
34
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
35
35
  border-radius: 12px;
36
36
  padding: 28px 32px;
37
37
  color: white;
@@ -4,7 +4,7 @@ import { Loader, Box, Alert, Flex, Typography, Badge, Accordion } from "@strapi/
4
4
  import { useFetchClient, useNotification } from "@strapi/strapi/admin";
5
5
  import { ArrowPathIcon, DocumentDuplicateIcon, ArrowDownTrayIcon, UserIcon, ShieldCheckIcon, SparklesIcon, ChartBarIcon } from "@heroicons/react/24/outline";
6
6
  import styled, { css, keyframes } from "styled-components";
7
- import { S as SecondaryButton, W as WhiteOutlineButton } from "./StyledButtons-nt2C730e.mjs";
7
+ import { S as SecondaryButton, W as WhiteOutlineButton } from "./StyledButtons-CdOf4Sps.mjs";
8
8
  const fadeIn = keyframes`
9
9
  from { opacity: 0; transform: translateY(10px); }
10
10
  to { opacity: 1; transform: translateY(0); }
@@ -22,12 +22,12 @@ const StickySaveBar = styled(Box)`
22
22
  position: sticky;
23
23
  top: 0;
24
24
  z-index: 10;
25
- background: ${(props) => props.theme.colors.neutral0};
26
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
25
+ background: ${(p) => p.theme.colors.neutral0};
26
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
27
27
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
28
28
  `;
29
29
  const LicenseKeyBanner = styled(Box)`
30
- background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
30
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
31
31
  border-radius: 12px;
32
32
  padding: 28px 32px;
33
33
  color: white;