@mundogamernetwork/shared-ui 1.1.68 → 1.1.69

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 (9) hide show
  1. package/components/keys/KeyBrowser.vue +2 -2
  2. package/components/keys/KeyCampaignDashboardCard.vue +7 -7
  3. package/components/keys/KeyCampaignsCarousel.vue +2 -2
  4. package/package.json +1 -1
  5. package/pages/key-campaign/[slug].vue +1 -1
  6. package/pages/key-campaigns/[slug].vue +37 -37
  7. package/pages/key-campaigns/index.vue +22 -22
  8. package/pages/key-campaigns/redeem-key-approved.vue +8 -8
  9. package/pages/key-campaigns/redeem-key.vue +8 -8
package/components/keys/KeyBrowser.vue CHANGED
@@ -403,7 +403,7 @@ function statusColor(slug: string): string {
403
403
  &__login-btn {
404
404
  padding: 10px 24px;
405
405
  background: var(--accent, #00d4ff);
406
- color: #000;
406
+ color: var(--key-accent-ink, var(--accent-ink, #13161C));
407
407
  border: none;
408
408
  font-weight: 600;
409
409
  font-size: 0.9rem;
@@ -528,7 +528,7 @@ function statusColor(slug: string): string {
528
528
  &__request-btn {
529
529
  padding: 8px 16px;
530
530
  background: var(--accent, #00d4ff);
531
- color: #000;
531
+ color: var(--key-accent-ink, var(--accent-ink, #13161C));
532
532
  border: none;
533
533
  font-weight: 600;
534
534
  font-size: 0.85rem;
package/components/keys/KeyCampaignDashboardCard.vue CHANGED
@@ -262,8 +262,8 @@ const detailRoute = computed(() =>
262
262
  position: absolute;
263
263
  bottom: 6px;
264
264
  left: 6px;
265
- background: rgba(0, 0, 0, 0.75);
266
- color: #D297FF;
265
+ background: var(--overlay-dark-strong, rgba(0, 0, 0, 0.75));
266
+ color: var(--key-accent, var(--primary, #D297FF));
267
267
  font-size: 10px;
268
268
  font-weight: 700;
269
269
  padding: 3px 7px;
@@ -272,7 +272,7 @@ const detailRoute = computed(() =>
272
272
  gap: 4px;
273
273
  text-transform: uppercase;
274
274
 
275
- &.kc-card__exclusive-lock { color: #fff; }
275
+ &.kc-card__exclusive-lock { color: var(--card-article-title, #fff); }
276
276
  }
277
277
 
278
278
  &__early-access-badge {
@@ -300,7 +300,7 @@ const detailRoute = computed(() =>
300
300
  &__lock-overlay {
301
301
  position: absolute;
302
302
  inset: 0;
303
- background: rgba(0, 0, 0, 0.65);
303
+ background: var(--overlay-dark, rgba(0, 0, 0, 0.65));
304
304
  display: flex;
305
305
  flex-direction: column;
306
306
  align-items: center;
@@ -310,10 +310,10 @@ const detailRoute = computed(() =>
310
310
  text-align: center;
311
311
 
312
312
  i { font-size: 1.5rem; color: var(--primary); }
313
- .lock-label { font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; }
314
- .lock-countdown { font-size: 10px; color: rgba(255,255,255,0.7); }
313
+ .lock-label { font-size: 11px; font-weight: 700; color: var(--card-article-title, #fff); text-transform: uppercase; }
314
+ .lock-countdown { font-size: 10px; color: var(--secondary-info-fg, rgba(255,255,255,0.7)); }
315
315
 
316
- &--exclusive i { color: #D297FF; }
316
+ &--exclusive i { color: var(--key-accent, var(--primary, #D297FF)); }
317
317
  }
318
318
 
319
319
  &__meta-bar {
package/components/keys/KeyCampaignsCarousel.vue CHANGED
@@ -153,10 +153,10 @@ onMounted(async () => {
153
153
  display: flex;
154
154
  align-items: center;
155
155
  justify-content: center;
156
- background: rgba(0, 0, 0, 0.55);
156
+ background: var(--overlay-dark, rgba(0, 0, 0, 0.55));
157
157
  font-size: 11px;
158
158
  font-weight: 700;
159
- color: #fff;
159
+ color: var(--card-article-title, #fff);
160
160
  letter-spacing: 0.5px;
161
161
  text-transform: uppercase;
162
162
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mundogamernetwork/shared-ui",
3
- "version": "1.1.68",
3
+ "version": "1.1.69",
4
4
  "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
5
5
  "type": "module",
6
6
  "main": "./nuxt.config.ts",
package/pages/key-campaign/[slug].vue CHANGED
@@ -140,7 +140,7 @@ const restriction = computed(() => {
140
140
  padding: 4px 10px;
141
141
  font-size: 0.8rem;
142
142
  font-weight: 600;
143
- color: #d297ff;
143
+ color: var(--key-accent, var(--primary, #D297FF));
144
144
  border: 1px solid rgba(210, 151, 255, 0.35);
145
145
  background: rgba(210, 151, 255, 0.12);
146
146
  }
package/pages/key-campaigns/[slug].vue CHANGED
@@ -224,9 +224,9 @@ const restrictionBadges = computed(() => {
224
224
  // UserRequestsValidation inline state (ported from TV component)
225
225
  // ------------------------------------------------------------------
226
226
  type StatusConfig = {
227
- titleParts: { text: string; color?: "default" | "yellow" | "red" }[]
227
+ titleParts: { text: string; color?: "default" | "yellow" | "var(--danger, #e53935)" }[]
228
228
  obs: string
229
- obsColor?: "default" | "yellow" | "red"
229
+ obsColor?: "default" | "yellow" | "var(--danger, #e53935)"
230
230
  progress?: { percent: number; step: number; total: number; color?: "default" | "yellow" | "complete" }
231
231
  actions?: Array<{ type: string; disabled?: boolean }>
232
232
  canViewCode?: boolean
@@ -236,18 +236,18 @@ const statusConfigs: Record<string, StatusConfig> = {
236
236
  expired: {
237
237
  titleParts: [
238
238
  { text: "keys.campaigns.status_key.title_0" },
239
- { text: "keys.campaigns.status_key.title_span_0", color: "red" },
239
+ { text: "keys.campaigns.status_key.title_span_0", color: "var(--danger, #e53935)" },
240
240
  ],
241
241
  obs: "keys.campaigns.status_key.obs_0",
242
- obsColor: "red",
242
+ obsColor: "var(--danger, #e53935)",
243
243
  },
244
244
  exhausted: {
245
245
  titleParts: [
246
246
  { text: "keys.campaigns.status_key.title_exhausted" },
247
- { text: "keys.campaigns.status_key.title_span_exhausted", color: "red" },
247
+ { text: "keys.campaigns.status_key.title_span_exhausted", color: "var(--danger, #e53935)" },
248
248
  ],
249
249
  obs: "keys.campaigns.status_key.obs_exhausted",
250
- obsColor: "red",
250
+ obsColor: "var(--danger, #e53935)",
251
251
  },
252
252
  locked_exclusive: {
253
253
  titleParts: [
@@ -343,34 +343,34 @@ const statusConfigs: Record<string, StatusConfig> = {
343
343
  "6": {
344
344
  titleParts: [
345
345
  { text: "keys.campaigns.status_key.title_5" },
346
- { text: "keys.campaigns.status_key.title_span_5", color: "red" },
346
+ { text: "keys.campaigns.status_key.title_span_5", color: "var(--danger, #e53935)" },
347
347
  ],
348
348
  obs: "keys.campaigns.status_key.obs_5",
349
- obsColor: "red",
349
+ obsColor: "var(--danger, #e53935)",
350
350
  },
351
351
  "7": {
352
352
  titleParts: [
353
353
  { text: "keys.campaigns.status_key.title_6" },
354
- { text: "keys.campaigns.status_key.title_span_6", color: "red" },
354
+ { text: "keys.campaigns.status_key.title_span_6", color: "var(--danger, #e53935)" },
355
355
  ],
356
356
  obs: "keys.campaigns.status_key.obs_6",
357
- obsColor: "red",
357
+ obsColor: "var(--danger, #e53935)",
358
358
  },
359
359
  "8": {
360
360
  titleParts: [
361
361
  { text: "keys.campaigns.status_key.title_7" },
362
- { text: "keys.campaigns.status_key.title_span_7", color: "red" },
362
+ { text: "keys.campaigns.status_key.title_span_7", color: "var(--danger, #e53935)" },
363
363
  ],
364
364
  obs: "keys.campaigns.status_key.obs_7",
365
- obsColor: "red",
365
+ obsColor: "var(--danger, #e53935)",
366
366
  },
367
367
  "9": {
368
368
  titleParts: [
369
369
  { text: "keys.campaigns.status_key.title_8" },
370
- { text: "keys.campaigns.status_key.title_span_8", color: "red" },
370
+ { text: "keys.campaigns.status_key.title_span_8", color: "var(--danger, #e53935)" },
371
371
  ],
372
372
  obs: "keys.campaigns.status_key.obs_8",
373
- obsColor: "red",
373
+ obsColor: "var(--danger, #e53935)",
374
374
  },
375
375
  }
376
376
 
@@ -767,7 +767,7 @@ onMounted(async () => {
767
767
  justify-content: space-between;
768
768
 
769
769
  .btn {
770
- background: var(--key-accent, var(--primary, #D297FF));
770
+ background: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
771
771
  display: flex;
772
772
  height: 44px;
773
773
  padding: 0 14px;
@@ -793,7 +793,7 @@ onMounted(async () => {
793
793
  align-items: center;
794
794
  gap: 6px;
795
795
  font-size: 13px;
796
- color: var(--key-accent, var(--primary, #D297FF));
796
+ color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
797
797
  cursor: pointer;
798
798
  text-decoration: none;
799
799
  white-space: nowrap;
@@ -812,9 +812,9 @@ onMounted(async () => {
812
812
  font-size: 14px;
813
813
  font-weight: 600;
814
814
  color: var(--card-article-title);
815
- span { color: var(--key-accent, var(--primary, #D297FF)); }
816
- .yellow { color: #FFD600; }
817
- .red { color: #ff4800; }
815
+ span { color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); }
816
+ .yellow { color: var(--status-pending, #FFD600); }
817
+ .var(--danger, #e53935) { color: var(--danger, #e53935); }
818
818
  }
819
819
 
820
820
  .bar {
@@ -825,7 +825,7 @@ onMounted(async () => {
825
825
 
826
826
  .progress {
827
827
  height: 24px;
828
- background-color: var(--key-accent, var(--primary, #D297FF));
828
+ background-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
829
829
  span {
830
830
  position: absolute;
831
831
  right: 5px;
@@ -835,15 +835,15 @@ onMounted(async () => {
835
835
  }
836
836
  }
837
837
  .complete span { color: #272930; }
838
- .yellow { background-color: #FFD600; }
838
+ .yellow { background-color: var(--status-pending, #FFD600); }
839
839
  }
840
840
 
841
841
  .info {
842
842
  font-size: 12px;
843
843
  color: var(--secondary-info-fg);
844
- i { color: var(--key-accent, var(--primary, #D297FF)); }
845
- .yellow { color: #FFD600; }
846
- .red { color: #ff4800; }
844
+ i { color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); }
845
+ .yellow { color: var(--status-pending, #FFD600); }
846
+ .var(--danger, #e53935) { color: var(--danger, #e53935); }
847
847
  }
848
848
  }
849
849
 
@@ -888,9 +888,9 @@ onMounted(async () => {
888
888
  padding: 4px 10px;
889
889
  font-size: 12px;
890
890
  font-weight: 600;
891
- color: var(--key-accent, var(--primary, #D297FF));
892
- background: rgba(210, 151, 255, 0.12);
893
- border: 1px solid rgba(210, 151, 255, 0.35);
891
+ color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
892
+ background: var(--key-accent-subtle-bg, rgba(210, 151, 255, 0.12));
893
+ border: 1px solid var(--key-accent-subtle-border, rgba(210, 151, 255, 0.35));
894
894
  i { font-size: 13px; }
895
895
  }
896
896
  }
@@ -966,9 +966,9 @@ onMounted(async () => {
966
966
  height: 32px;
967
967
  font-size: 12px;
968
968
  font-weight: 400;
969
- span.active { color: #42FF00; }
970
- span.inactive { color: red; }
971
- span.ending { color: #ffa600; }
969
+ span.active { color: var(--success, #22c55e); }
970
+ span.inactive { color: var(--danger, #e53935); }
971
+ span.ending { color: var(--status-ending, #ffa600); }
972
972
  }
973
973
  }
974
974
  }
@@ -987,7 +987,7 @@ onMounted(async () => {
987
987
  gap: 6px;
988
988
  background-color: var(--button-secondary-default-bg);
989
989
  font-size: 28px;
990
- color: var(--key-accent, var(--primary, #D297FF));
990
+ color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
991
991
  font-weight: 700;
992
992
  width: -webkit-fill-available;
993
993
  span { font-size: 10px; color: var(--secondary-info-fg); font-weight: 400; }
@@ -1021,9 +1021,9 @@ onMounted(async () => {
1021
1021
  width: -webkit-fill-available;
1022
1022
  cursor: pointer;
1023
1023
  &:hover, &.active {
1024
- background-color: var(--key-accent, var(--primary, #D297FF));
1025
- color: #1C1C1C;
1026
- i { color: #1C1C1C; }
1024
+ background-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
1025
+ color: var(--key-accent-ink, #13161C);
1026
+ i { color: var(--key-accent-ink, #13161C); }
1027
1027
  }
1028
1028
  }
1029
1029
  .tag-bg {
@@ -1066,7 +1066,7 @@ onMounted(async () => {
1066
1066
  flex-shrink: 0;
1067
1067
  border-radius: 100%;
1068
1068
  text-align-last: center;
1069
- i { color: var(--key-accent, var(--primary, #D297FF)); }
1069
+ i { color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); }
1070
1070
  }
1071
1071
  .texts {
1072
1072
  display: flex;
@@ -1087,7 +1087,7 @@ onMounted(async () => {
1087
1087
  width: 100%;
1088
1088
  }
1089
1089
 
1090
- .reward span { color: var(--key-accent, var(--primary, #D297FF)); }
1090
+ .reward span { color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); }
1091
1091
 
1092
1092
  .data {
1093
1093
  display: flex;
@@ -1120,7 +1120,7 @@ onMounted(async () => {
1120
1120
  font-size: 12px;
1121
1121
  color: var(--secondary-info-fg);
1122
1122
  width: -webkit-fill-available;
1123
- span { font-size: 16px; color: var(--key-accent, var(--primary, #D297FF)); font-weight: 600; }
1123
+ span { font-size: 16px; color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); font-weight: 600; }
1124
1124
  }
1125
1125
  }
1126
1126
 
package/pages/key-campaigns/index.vue CHANGED
@@ -190,7 +190,7 @@
190
190
  <div class="days" v-else></div>
191
191
  <span>
192
192
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
193
- <path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="var(--key-accent, #D297FF)" />
193
+ <path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="var(--key-accent, var(--key-accent, var(--primary, #D297FF)))" />
194
194
  </svg>
195
195
  {{ card.type }}
196
196
  </span>
@@ -737,7 +737,7 @@ onUnmounted(() => {
737
737
  display: inline-block;
738
738
  width: 20px;
739
739
  height: 20px;
740
- border: 2px solid var(--key-accent, #d297ff);
740
+ border: 2px solid var(--key-accent, var(--key-accent, var(--primary, #D297FF)));
741
741
  border-radius: 50%;
742
742
  border-top-color: #fff;
743
743
  animation: spin 1s ease-in-out infinite;
@@ -775,7 +775,7 @@ onUnmounted(() => {
775
775
  position: absolute;
776
776
  bottom: 8px;
777
777
  right: 8px;
778
- background: var(--key-accent-dark, rgba(107, 21, 172, 0.9));
778
+ background: var(--key-accent-dark, var(--key-accent-bg, rgba(107, 21, 172, 0.9)));
779
779
  color: #fff;
780
780
  font-size: 12px;
781
781
  font-weight: 600;
@@ -790,7 +790,7 @@ onUnmounted(() => {
790
790
  position: absolute;
791
791
  top: 8px;
792
792
  left: 8px;
793
- background: rgba(234, 179, 8, 0.9);
793
+ background: var(--exclusive-badge-bg, rgba(234, 179, 8, 0.9));
794
794
  color: #000;
795
795
  font-size: 10px;
796
796
  font-weight: 700;
@@ -806,15 +806,15 @@ onUnmounted(() => {
806
806
  .level-badge {
807
807
  top: auto;
808
808
  bottom: 8px;
809
- background: rgba(210, 151, 255, 0.92);
810
- color: #1c1c1c;
809
+ background: var(--level-badge-bg, rgba(210, 151, 255, 0.92));
810
+ color: var(--key-accent-ink, #13161C);
811
811
  }
812
812
 
813
813
  .early-access-badge {
814
814
  position: absolute;
815
815
  top: 8px;
816
816
  left: 8px;
817
- background: var(--key-accent-dark, rgba(107, 21, 172, 0.9));
817
+ background: var(--key-accent-dark, var(--key-accent-bg, rgba(107, 21, 172, 0.9)));
818
818
  color: #fff;
819
819
  font-size: 10px;
820
820
  font-weight: 700;
@@ -827,13 +827,13 @@ onUnmounted(() => {
827
827
  i { font-size: 10px; }
828
828
  }
829
829
 
830
- .exclusive-lock { background: rgba(234, 179, 8, 0.6) !important; }
830
+ .exclusive-lock { background: var(--exclusive-lock-bg, rgba(234, 179, 8, 0.6)) !important; }
831
831
 
832
832
  .early-access-lock-overlay,
833
833
  .exclusive-lock-overlay {
834
834
  position: absolute;
835
835
  inset: 0;
836
- background: rgba(0, 0, 0, 0.72);
836
+ background: var(--overlay-dark-strong, rgba(0, 0, 0, 0.72));
837
837
  display: flex;
838
838
  flex-direction: column;
839
839
  align-items: center;
@@ -842,13 +842,13 @@ onUnmounted(() => {
842
842
  padding: 12px;
843
843
  text-align: center;
844
844
 
845
- i { font-size: 24px; color: var(--key-accent, #D297FF); }
845
+ i { font-size: 24px; color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
846
846
  .lock-label { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
847
- .lock-countdown { color: var(--key-accent, #D297FF); font-size: 12px; font-weight: 600; }
848
- .lock-cta { color: #EAB308; font-size: 11px; font-weight: 600; }
847
+ .lock-countdown { color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); font-size: 12px; font-weight: 600; }
848
+ .lock-cta { color: var(--exclusive-badge-color, #EAB308); font-size: 11px; font-weight: 600; }
849
849
  }
850
850
 
851
- .exclusive-lock-overlay i { color: #EAB308; }
851
+ .exclusive-lock-overlay i { color: var(--exclusive-badge-color, #EAB308); }
852
852
 
853
853
  .upgrade-btn {
854
854
  display: flex;
@@ -952,7 +952,7 @@ onUnmounted(() => {
952
952
  cursor: pointer;
953
953
  }
954
954
 
955
- span.active { background: var(--key-accent, #6b15ac); }
955
+ span.active { background: var(--key-accent, var(--key-accent, var(--primary, #6b15ac))); }
956
956
  }
957
957
  }
958
958
 
@@ -997,8 +997,8 @@ onUnmounted(() => {
997
997
  }
998
998
 
999
999
  .header-left .btn.tertiary.active {
1000
- background-color: var(--key-accent, #D297FF);
1001
- color: #1C1C1C;
1000
+ background-color: var(--key-accent, var(--key-accent, var(--primary, #D297FF)));
1001
+ color: var(--key-accent-ink, #13161C);
1002
1002
  }
1003
1003
 
1004
1004
  .platform-select {
@@ -1012,11 +1012,11 @@ onUnmounted(() => {
1012
1012
  cursor: pointer;
1013
1013
 
1014
1014
  option {
1015
- background: var(--bg-primary, #1c1c1c);
1015
+ background: var(--bg-primary, var(--key-accent-ink, #13161C));
1016
1016
  color: var(--title-fg);
1017
1017
  }
1018
1018
 
1019
- &:focus { outline: none; border-color: var(--key-accent, #D297FF); }
1019
+ &:focus { outline: none; border-color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
1020
1020
  }
1021
1021
 
1022
1022
  .filter-divider {
@@ -1078,7 +1078,7 @@ onUnmounted(() => {
1078
1078
 
1079
1079
  &:not(.unavailable):hover {
1080
1080
  transform: translateY(-4px);
1081
- box-shadow: 0 8px 24px rgba(107, 21, 172, 0.15);
1081
+ box-shadow: 0 8px 24px var(--key-accent-shadow, rgba(107, 21, 172, 0.15));
1082
1082
  }
1083
1083
 
1084
1084
  .card-header {
@@ -1116,7 +1116,7 @@ onUnmounted(() => {
1116
1116
  display: flex;
1117
1117
  align-items: center;
1118
1118
  gap: 4px;
1119
- span { color: var(--key-accent, #d297ff); font-size: 16px; font-weight: 600; }
1119
+ span { color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); font-size: 16px; font-weight: 600; }
1120
1120
  }
1121
1121
 
1122
1122
  span {
@@ -1168,7 +1168,7 @@ onUnmounted(() => {
1168
1168
  justify-content: center;
1169
1169
  cursor: pointer;
1170
1170
  flex-shrink: 0;
1171
- &:hover { border-color: var(--key-accent, #D297FF); color: var(--key-accent, #D297FF); }
1171
+ &:hover { border-color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
1172
1172
  i { font-size: 14px; }
1173
1173
  }
1174
1174
  }
@@ -1187,7 +1187,7 @@ onUnmounted(() => {
1187
1187
  font-size: 12px;
1188
1188
  color: var(--title-fg);
1189
1189
  font-weight: 400;
1190
- span { color: var(--key-accent, #d297ff); }
1190
+ span { color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
1191
1191
  }
1192
1192
  }
1193
1193
  }
package/pages/key-campaigns/redeem-key-approved.vue CHANGED
@@ -178,7 +178,7 @@ function goBack() {
178
178
  padding: 64px 0;
179
179
  text-align: center;
180
180
  color: var(--secondary-info-fg);
181
- &.error { color: #ff4800; }
181
+ &.error { color: var(--danger, #e53935); }
182
182
  }
183
183
 
184
184
  .skeleton {
@@ -195,7 +195,7 @@ function goBack() {
195
195
  display: flex;
196
196
  align-items: flex-start;
197
197
  gap: 14px;
198
- .title-icon { color: var(--key-accent, var(--primary, #D297FF)); margin-top: 2px; }
198
+ .title-icon { color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); margin-top: 2px; }
199
199
  h3 { font-size: 20px; font-weight: 700; color: var(--card-article-title); margin: 0 0 4px; }
200
200
  .campaign-name { font-size: 13px; color: var(--secondary-info-fg); margin: 0; }
201
201
  }
@@ -217,7 +217,7 @@ function goBack() {
217
217
  gap: 12px;
218
218
  padding: 24px;
219
219
  background: var(--bg-app-badge);
220
- border: 1px solid var(--key-accent, var(--primary, #D297FF));
220
+ border: 1px solid var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
221
221
  }
222
222
 
223
223
  .key-label {
@@ -252,11 +252,11 @@ function goBack() {
252
252
  font-size: 13px;
253
253
  font-weight: 600;
254
254
  background: transparent;
255
- border: 1px solid var(--key-accent, var(--primary, #D297FF));
256
- color: var(--key-accent, var(--primary, #D297FF));
255
+ border: 1px solid var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
256
+ color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
257
257
  cursor: pointer;
258
258
  transition: background 0.15s;
259
- &:hover { background: rgba(210, 151, 255, 0.1); }
259
+ &:hover { background: var(--key-accent-subtle-bg, rgba(210, 151, 255, 0.1)); }
260
260
  }
261
261
 
262
262
  .redeem-info {
@@ -265,7 +265,7 @@ function goBack() {
265
265
  margin: 0;
266
266
  }
267
267
 
268
- .req-error { font-size: 13px; color: #ff4800; }
268
+ .req-error { font-size: 13px; color: var(--danger, #e53935); }
269
269
 
270
270
  .info-grid {
271
271
  display: flex;
@@ -294,7 +294,7 @@ function goBack() {
294
294
  height: 44px;
295
295
  font-size: 14px;
296
296
  font-weight: 700;
297
- background: var(--key-accent, var(--primary, #D297FF));
297
+ background: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
298
298
  color: #fff;
299
299
  border: none;
300
300
  cursor: pointer;
package/pages/key-campaigns/redeem-key.vue CHANGED
@@ -222,7 +222,7 @@ function goBack() {
222
222
  text-align: center;
223
223
  color: var(--secondary-info-fg);
224
224
 
225
- &.error { color: #ff4800; }
225
+ &.error { color: var(--danger, #e53935); }
226
226
  &.success { color: #4caf50; font-size: 16px; }
227
227
  }
228
228
 
@@ -270,11 +270,11 @@ function goBack() {
270
270
  cursor: pointer;
271
271
  transition: border-color 0.15s, color 0.15s;
272
272
 
273
- &:hover { border-color: var(--key-accent, var(--primary, #D297FF)); color: var(--card-article-title); }
273
+ &:hover { border-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); color: var(--card-article-title); }
274
274
  &.selected {
275
- border-color: var(--key-accent, var(--primary, #D297FF));
276
- color: var(--key-accent, var(--primary, #D297FF));
277
- background: rgba(210, 151, 255, 0.08);
275
+ border-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
276
+ color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
277
+ background: var(--key-accent-subtle-bg, rgba(210, 151, 255, 0.08));
278
278
  }
279
279
  }
280
280
 
@@ -288,12 +288,12 @@ function goBack() {
288
288
  resize: vertical;
289
289
  outline: none;
290
290
  font-family: inherit;
291
- &:focus { border-color: var(--key-accent, var(--primary, #D297FF)); }
291
+ &:focus { border-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); }
292
292
  }
293
293
 
294
294
  .req-error {
295
295
  font-size: 13px;
296
- color: #ff4800;
296
+ color: var(--danger, #e53935);
297
297
  }
298
298
 
299
299
  .btn {
@@ -302,7 +302,7 @@ function goBack() {
302
302
  height: 44px;
303
303
  font-size: 14px;
304
304
  font-weight: 700;
305
- background: var(--key-accent, var(--primary, #D297FF));
305
+ background: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
306
306
  color: #fff;
307
307
  border: none;
308
308
  cursor: pointer;