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 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
+192
-1
@@ -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); }
|
||||
|
||||
Reference in New Issue
Block a user