bfa54851c2
- Added typography and design system styles to globals.css. - Removed deprecated home.css and landing.css files. - Introduced DiscordSignInButton component for Discord authentication. - Created Card and CardGrid components for structured content display. - Implemented ContainerShowcase to demonstrate card usage and layout. - Added DesignSystemTabs for navigation between design system sections. - Established typography.css for consistent text styling across components. - Added tests for typography styles to ensure compliance with design standards.
56 lines
1.4 KiB
CSS
56 lines
1.4 KiB
CSS
/* Fixed rem steps respect browser text-size preferences. No viewport-based type.
|
|
Use these utilities directly in JSX or @apply them in shared components. */
|
|
@theme {
|
|
--text-copy: 1rem;
|
|
--text-copy--line-height: 1.5;
|
|
--text-caption: 0.875rem;
|
|
--text-caption--line-height: 1.5;
|
|
--text-lead: 1.25rem;
|
|
--text-lead--line-height: 1.5;
|
|
--text-title: 2rem;
|
|
--text-title--line-height: 1.25;
|
|
--text-section: 3rem;
|
|
--text-section--line-height: 1.125;
|
|
--text-display: 4.5rem;
|
|
--text-display--line-height: 1.125;
|
|
}
|
|
|
|
@utility type-body { @apply text-copy; }
|
|
@utility type-small { @apply text-caption; }
|
|
@utility type-label {
|
|
@apply text-caption;
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
@utility type-eyebrow {
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
@utility type-lead { @apply text-lead; }
|
|
@utility type-title {
|
|
@apply text-title;
|
|
font-family: var(--ds-serif);
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
@utility type-section {
|
|
@apply text-section;
|
|
font-family: var(--ds-serif);
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
@media (max-width: 40rem) { font-size: 2.25rem; line-height: 1.25; }
|
|
}
|
|
@utility type-display {
|
|
@apply text-display;
|
|
font-family: var(--ds-serif);
|
|
font-weight: 400;
|
|
letter-spacing: -0.025em;
|
|
@media (max-width: 40rem) { font-size: 3rem; line-height: 1.125; }
|
|
}
|
|
@utility type-control {
|
|
font-size: 1.5rem;
|
|
line-height: 1.25;
|
|
}
|