mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
d526d095de
Все вхождения #3EDBB0, #2BC49A и rgba(62,219,176,...) заменены на CSS-переменные --color-accent-400/500 из системы тем. Затронутые компоненты: - TrialOfferCard: кнопка, бордер, свечение, иконка - Subscription: лейблы, иконки, кнопки паузы/копирования - SubscriptionCardActive: бордер карточки, бейдж статуса - SubscriptionPurchase: градиент триал-блока - PurchaseCTAButton: градиент кнопки, иконка - TrafficProgressBar: цвета прогресс-бара - StatsGrid: убрана зависимость от useTrafficZone, используется accent напрямую - trafficZone.ts: добавлены mainVar/mainVarRaw для CSS-переменных - tailwind.config.js: trialGlow keyframes на accent цвет
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
export type TrafficZone = 'normal' | 'warning' | 'danger' | 'critical';
|
|
|
|
export type TrafficColorKey = 'accent' | 'warning' | 'error';
|
|
|
|
interface TrafficZoneResult {
|
|
zone: TrafficZone;
|
|
textClass: string;
|
|
dotClass: string;
|
|
glowColor: string;
|
|
labelKey: string;
|
|
gradientFrom: string;
|
|
gradientTo: string;
|
|
/** CSS variable for the main zone color: `rgb(var(--color-accent-400))` */
|
|
mainVar: string;
|
|
/** Raw CSS variable reference for opacity manipulation: `var(--color-accent-400)` */
|
|
mainVarRaw: string;
|
|
/** Key into ThemeColors for resolving mainHex at runtime */
|
|
colorKey: TrafficColorKey;
|
|
}
|
|
|
|
const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
|
|
normal: {
|
|
textClass: 'text-accent-400',
|
|
dotClass: 'bg-accent-400',
|
|
glowColor: 'rgba(var(--color-accent-500), 0.5)',
|
|
labelKey: 'dashboard.zone.normal',
|
|
gradientFrom: 'rgb(var(--color-accent-500))',
|
|
gradientTo: 'rgb(var(--color-accent-400))',
|
|
mainVar: 'rgb(var(--color-accent-400))',
|
|
mainVarRaw: 'var(--color-accent-400)',
|
|
colorKey: 'accent',
|
|
},
|
|
warning: {
|
|
textClass: 'text-warning-400',
|
|
dotClass: 'bg-warning-400',
|
|
glowColor: 'rgba(var(--color-warning-500), 0.5)',
|
|
labelKey: 'dashboard.zone.warning',
|
|
gradientFrom: 'rgb(var(--color-warning-500))',
|
|
gradientTo: 'rgb(var(--color-warning-400))',
|
|
mainVar: 'rgb(var(--color-warning-400))',
|
|
mainVarRaw: 'var(--color-warning-400)',
|
|
colorKey: 'warning',
|
|
},
|
|
danger: {
|
|
textClass: 'text-warning-300',
|
|
dotClass: 'bg-warning-300',
|
|
glowColor: 'rgba(var(--color-warning-400), 0.5)',
|
|
labelKey: 'dashboard.zone.danger',
|
|
gradientFrom: 'rgb(var(--color-warning-600))',
|
|
gradientTo: 'rgb(var(--color-warning-400))',
|
|
mainVar: 'rgb(var(--color-warning-400))',
|
|
mainVarRaw: 'var(--color-warning-400)',
|
|
colorKey: 'warning',
|
|
},
|
|
critical: {
|
|
textClass: 'text-error-400',
|
|
dotClass: 'bg-error-400',
|
|
glowColor: 'rgba(var(--color-error-500), 0.5)',
|
|
labelKey: 'dashboard.zone.critical',
|
|
gradientFrom: 'rgb(var(--color-error-500))',
|
|
gradientTo: 'rgb(var(--color-error-400))',
|
|
mainVar: 'rgb(var(--color-error-400))',
|
|
mainVarRaw: 'var(--color-error-400)',
|
|
colorKey: 'error',
|
|
},
|
|
};
|
|
|
|
export function getTrafficZone(percent: number): TrafficZoneResult {
|
|
let zone: TrafficZone;
|
|
if (percent >= 90) zone = 'critical';
|
|
else if (percent >= 75) zone = 'danger';
|
|
else if (percent >= 50) zone = 'warning';
|
|
else zone = 'normal';
|
|
|
|
return { zone, ...ZONES[zone] };
|
|
}
|