etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: unify card styles across the project

Browse Source 
- Set --bento-radius to 16px (was 24px) for more modern look
- Unified .card, .bento-card and Card component to use same:
  - border-radius: var(--bento-radius)
  - border: border-dark-700/40
  - background: bg-dark-900/70
  - inset shadow for glass effect
- Reduced padding from 24px to 20px
This commit is contained in:
c0mrade
2026-02-01 22:07:54 +03:00
parent 2926a5a89c
commit 4a25d8df03
2 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/data-display/Card/Card.tsx
View File

@@ -10,7 +10,7 @@ const cardVariants = cva(
[ [
'relative overflow-hidden', 'relative overflow-hidden',
'border border-dark-700/40 bg-dark-900/70', 'border border-dark-700/40 bg-dark-900/70',
'rounded-linear-lg', 'rounded-[var(--bento-radius)]',
'transition-all duration-200', 'transition-all duration-200',
// GPU acceleration // GPU acceleration
'transform-gpu', 'transform-gpu',

25
src/styles/globals.css
View File

@@ -8,13 +8,13 @@
:root { :root {
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
/* Bento Design System */ /* Unified Card System */
--bento-radius: 24px; --bento-radius: 16px;
--bento-radius-lg: 32px; --bento-radius-lg: 20px;
--bento-gap: 16px; --bento-gap: 16px;
--bento-gap-lg: 24px; --bento-gap-lg: 24px;
--bento-padding: 24px; --bento-padding: 20px;
--bento-padding-lg: 32px; --bento-padding-lg: 24px;
/* Linear Design Tokens */ /* Linear Design Tokens */
--linear-radius: 8px; --linear-radius: 8px;
@@ -548,11 +548,12 @@
/* ========== DARK THEME COMPONENTS (default) ========== */ /* ========== DARK THEME COMPONENTS (default) ========== */
/* Cards - Dark (optimized for mobile) */ /* Cards - Dark (unified style) */
.card { .card {
@apply rounded-2xl border border-dark-800/50 bg-dark-900/70 p-5 transition-all duration-300 ease-smooth sm:p-6; @apply border border-dark-700/40 bg-dark-900/70 p-5 transition-all duration-200 sm:p-6;
/* GPU acceleration for smooth scroll */ border-radius: var(--bento-radius);
transform: translateZ(0); transform: translateZ(0);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
} }
/* Enable backdrop-blur only on desktop */ /* Enable backdrop-blur only on desktop */
@@ -563,11 +564,11 @@
} }
.card-hover { .card-hover {
@apply card cursor-pointer hover:scale-[1.01] hover:border-dark-700/50 hover:bg-dark-800/50 hover:shadow-card active:scale-[0.99]; @apply card cursor-pointer hover:border-dark-600/50 hover:bg-dark-800/60 active:scale-[0.98];
} }
.card-glow { .card-glow {
@apply card hover:scale-[1.01] hover:border-accent-500/30 hover:shadow-glow; @apply card cursor-pointer hover:border-accent-500/30 hover:shadow-glow;
} }
.card-animated { .card-animated {
@@ -760,8 +761,10 @@
/* Cards - Light */ /* Cards - Light */
.light .card { .light .card {
@apply rounded-2xl border border-champagne-300/50 bg-white/90 p-5 shadow-sm sm:p-6; @apply border-champagne-300/50 bg-white/90 p-5 shadow-sm sm:p-6;
border-radius: var(--bento-radius);
transform: translateZ(0); transform: translateZ(0);
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.03);
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {