From dfaa3460512f63d592f97a8d22eba6bc0dabc108 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Thu, 21 May 2026 09:40:15 +0300 Subject: [PATCH] feat(ls): expand design-system tokens + utility classes Adds to ls.css: - Spacing scale (--space-1..16, 4px base) - Radius ladder (--r-xs/sm/md/xl in addition to existing lg/pill) - Semantic color aliases (--success/warning/danger/info -> existing brand) - Typography scale (--text-xs..3xl) + font-weight scale (--fw-*) - Motion tokens (--ease-out, --ease-spring, --duration-*) - Breakpoint documentation vars - Utility classes (.hidden, .p-*, .m-*, .gap-*, .flex, .grid, .text-*, .rounded-*) - Shared .ls-skeleton with shimmer animation All existing tokens preserved unchanged -- additions only. Co-Authored-By: Claude Sonnet 4.6 --- frontend/css/ls.css | 193 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 192 insertions(+), 1 deletion(-) diff --git a/frontend/css/ls.css b/frontend/css/ls.css index 92b7088..80113e9 100644 --- a/frontend/css/ls.css +++ b/frontend/css/ls.css @@ -23,9 +23,61 @@ --grad-1: linear-gradient(135deg, #06D6E0, #9B5DE5); - --r-lg: 20px; + /* Spacing scale (4px base) */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-10: 40px; + --space-12: 48px; + --space-16: 64px; + + /* Radius ladder */ + --r-xs: 4px; + --r-sm: 8px; + --r-md: 12px; + --r-lg: 20px; + --r-xl: 24px; --r-pill: 999px; + /* Semantic color aliases */ + --success: var(--green); + --warning: var(--amber); + --danger: var(--pink); + --info: var(--cyan); + + /* Typography scale */ + --text-xs: 0.72rem; + --text-sm: 0.82rem; + --text-base: 0.92rem; + --text-md: 1.02rem; + --text-lg: 1.18rem; + --text-xl: 1.5rem; + --text-2xl: 2rem; + --text-3xl: 2.6rem; + + /* Font-weight scale */ + --fw-regular: 400; + --fw-medium: 500; + --fw-semibold: 600; + --fw-bold: 700; + --fw-extrabold: 800; + + /* Motion */ + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --duration-fast: 0.12s; + --duration-base: 0.22s; + --duration-slow: 0.40s; + + /* Layout breakpoints (documentation only — CSS @media doesn't support var()) */ + --bp-mobile: 640px; + --bp-tablet: 1024px; + --bp-desktop: 1280px; + --blur: blur(20px); /* two-layer shadow: crisp + ambient */ --shadow: 0 2px 8px rgba(15,23,42,0.08), 0 8px 40px rgba(15,23,42,0.10); @@ -982,3 +1034,142 @@ body.no-gamification #tab-shop { display: none !important; } .filter-tabs { gap: 4px; } .filter-tab { padding: 6px 12px; font-size: 0.78rem; } } + +/* ══════════════════════════════════════════ + SKELETON SHIMMER +══════════════════════════════════════════ */ +@keyframes ls-shimmer-util { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} +.ls-skeleton { + background: linear-gradient(90deg, + rgba(15,23,42,0.04) 0%, + rgba(15,23,42,0.10) 50%, + rgba(15,23,42,0.04) 100% + ); + background-size: 200% 100%; + animation: ls-shimmer-util 1.6s infinite; + border-radius: var(--r-sm); +} +.ls-skeleton-line { height: 12px; margin: var(--space-2) 0; } +.ls-skeleton-card { aspect-ratio: 1; } +.ls-skeleton-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); } + +/* ── Utility Classes ── */ + +/* Visibility */ +.hidden { display: none !important; } +.invisible { visibility: hidden; } + +/* Padding */ +.p-0 { padding: 0; } +.p-1 { padding: var(--space-1); } +.p-2 { padding: var(--space-2); } +.p-3 { padding: var(--space-3); } +.p-4 { padding: var(--space-4); } +.p-5 { padding: var(--space-5); } +.p-6 { padding: var(--space-6); } + +.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } +.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } +.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } +.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } + +.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } +.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } +.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } +.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } + +/* Margin */ +.m-0 { margin: 0; } +.m-1 { margin: var(--space-1); } +.m-2 { margin: var(--space-2); } +.m-3 { margin: var(--space-3); } +.m-4 { margin: var(--space-4); } +.m-5 { margin: var(--space-5); } +.m-6 { margin: var(--space-6); } + +.mt-1 { margin-top: var(--space-1); } +.mt-2 { margin-top: var(--space-2); } +.mt-3 { margin-top: var(--space-3); } +.mt-4 { margin-top: var(--space-4); } +.mt-5 { margin-top: var(--space-5); } +.mt-6 { margin-top: var(--space-6); } + +.mb-1 { margin-bottom: var(--space-1); } +.mb-2 { margin-bottom: var(--space-2); } +.mb-3 { margin-bottom: var(--space-3); } +.mb-4 { margin-bottom: var(--space-4); } +.mb-5 { margin-bottom: var(--space-5); } +.mb-6 { margin-bottom: var(--space-6); } + +.ml-1 { margin-left: var(--space-1); } +.ml-2 { margin-left: var(--space-2); } +.ml-3 { margin-left: var(--space-3); } +.ml-4 { margin-left: var(--space-4); } +.ml-5 { margin-left: var(--space-5); } +.ml-6 { margin-left: var(--space-6); } + +.mr-1 { margin-right: var(--space-1); } +.mr-2 { margin-right: var(--space-2); } +.mr-3 { margin-right: var(--space-3); } +.mr-4 { margin-right: var(--space-4); } +.mr-5 { margin-right: var(--space-5); } +.mr-6 { margin-right: var(--space-6); } + +.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } +.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } +.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); } +.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); } +.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); } +.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); } +.mx-auto { margin-left: auto; margin-right: auto; } + +.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); } +.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } +.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } +.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } +.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); } +.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); } + +/* Gap */ +.gap-1 { gap: var(--space-1); } +.gap-2 { gap: var(--space-2); } +.gap-3 { gap: var(--space-3); } +.gap-4 { gap: var(--space-4); } +.gap-6 { gap: var(--space-6); } + +/* Flex / Grid */ +.flex { display: flex; } +.inline-flex { display: inline-flex; } +.grid { display: grid; } +.items-center { align-items: center; } +.items-start { align-items: flex-start; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.flex-col { flex-direction: column; } +.flex-1 { flex: 1; } +.flex-wrap { flex-wrap: wrap; } + +/* Text */ +.text-xs { font-size: var(--text-xs); } +.text-sm { font-size: var(--text-sm); } +.text-base { font-size: var(--text-base); } +.text-lg { font-size: var(--text-lg); } +.text-xl { font-size: var(--text-xl); } +.font-bold { font-weight: var(--fw-bold); } +.font-semibold{ font-weight: var(--fw-semibold); } +.text-muted { color: var(--text-3); } +.text-secondary { color: var(--text-2); } +.text-violet { color: var(--violet); } +.text-success { color: var(--success); } +.text-danger { color: var(--danger); } +.text-center { text-align: center; } +.text-right { text-align: right; } + +/* Radius */ +.rounded-sm { border-radius: var(--r-sm); } +.rounded-md { border-radius: var(--r-md); } +.rounded-lg { border-radius: var(--r-lg); } +.rounded-full { border-radius: var(--r-pill); }