andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update button and badge styles for improved theming and consistency

Browse Source
This commit is contained in:
kayela
2026-01-13 23:51:13 -06:00
parent 21a269998d
commit 4cdccc0323
16 changed files with 92 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/styles/components.css
View File

@@ -9,31 +9,35 @@
}
.btn-primary {
@apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6;
@apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6 transition-transform;
}
.btn-secondary {
@apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6;
@apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-ghost {
@apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6;
@apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-outline {
@apply border border-primary border-2 bg-white text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50 px-6;
@apply border border-primary border-2 text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-accent {
@apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50 px-6;
@apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-destructive {
@apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50 px-6;
@apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-outline-destructive {
@apply border border-destructive border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50 px-6 transition-transform;
}
.btn-link {
@apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6;
@apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6 transition-transform;
}
.btn-sm {
@@ -52,26 +56,38 @@
@apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
}
.btn-util-green {
@apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white rounded-xl h-12 px-6;
@apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 transition-transform;
}
.btn-util-purple {
@apply bg-brand-purple hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6;
@apply bg-[var(--purple-lavender)] transition-transform hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
}
.btn-light-orange {
@apply bg-brand-light-orange hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6;
@apply bg-brand-light-orange hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
}
.btn-pink {
@apply bg-brand-pink hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6;
@apply bg-brand-pink hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
}
.btn-lavender {
@apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender
.btn-lavender {
@apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
}
.btn-light-lavender {
@apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender ;
}
/* Badges */
.badge {
@apply px-3 py-1 rounded-full text-sm font-medium ;
@apply px-3 py-1 rounded-full text-sm font-medium transition-transform;
}
.badge-green {
@apply bg-[var(--green-light)] text-white;
@apply bg-[var(--green-light)] text-white transition-transform;
}
/* Backgrounds */
.bg-light-lavender {
@apply bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] text-white bg-[var(--neutral-800)] transition-transform dark:bg-brand-lavender dark:text-brand-dark-lavender;
}
}