etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 10:27:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tokens): extract subscription urgent + critical semantic colors

Browse Source 
The #FFB800 (23 hits) and #FF3B5C (11 hits) raw hex literals across
Subscription / SubscriptionPurchase / TrialOfferCard / useTrafficZone
all represent the same semantic: 'expiring soon' and 'expired'.
Distinct from warning-500 (#f59e0b) and error-500 (#ef4444) — the
subscription timeline needs a sharper, hotter signal than the
system-wide warning/error roles.

Add two semantic tokens:
  --color-urgent-400:   255, 184, 0    (#FFB800)
  --color-critical-500: 255, 59, 92    (#FF3B5C)

Exposed via Tailwind as urgent.400 / critical.500. Sweep all
single-and double-quoted hex literals to rgb(var(--color-...))
form so style attrs, SVG stroke=, and ternary string values all
resolve through CSS vars (auto-respects future light-theme
variants).

Left as-is: 4 hex appearances inside gradient pair strings —
linear-gradient(135deg, #FFB800, #FF8C00) — where the partner
color (#FF8C00 / #FF6B35) isn't in the token set. Partial-replace
inside gradient strings would just add noise; full extraction of
the orange-ramp companion is out of scope for this pass.
This commit is contained in:
c0mrade
2026-05-26 20:20:05 +03:00
parent eaaf5cfebb
commit cef675825b
8 changed files with 67 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/SubscriptionPurchase.tsx
View File

@@ -477,7 +477,7 @@ export default function SubscriptionPurchase() {
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="#FFB800"
stroke="rgb(var(--color-urgent-400))"
strokeWidth="1.5"
aria-hidden="true"
>
@@ -489,7 +489,10 @@ export default function SubscriptionPurchase() {
</svg>
</div>
<div>
<div className="text-sm font-semibold" style={{ color: '#FFB800' }}>
<div
className="text-sm font-semibold"
style={{ color: 'rgb(var(--color-urgent-400))' }}
>
{t('subscription.trialUpgrade.title')}
</div>
<div className="mt-1 text-[12px] text-dark-50/40">
@@ -522,7 +525,7 @@ export default function SubscriptionPurchase() {
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="#FF3B5C"
stroke="rgb(var(--color-critical-500))"
strokeWidth="1.5"
aria-hidden="true"
>
@@ -534,7 +537,10 @@ export default function SubscriptionPurchase() {
</svg>
</div>
<div>
<div className="text-sm font-semibold" style={{ color: '#FF3B5C' }}>
<div
className="text-sm font-semibold"
style={{ color: 'rgb(var(--color-critical-500))' }}
>
{t('subscription.expiredBanner.title')}
</div>
<div className="mt-1 text-[12px] text-dark-50/40">