dde5e77317
- Added new UI heading utility with specific styles in typography.css. - Updated typography tests to include new UI heading role and ensure proper size and styling. - Documented design system audit findings, focusing on accessibility improvements and component consistency. - Introduced CalendarExamples component to demonstrate calendar functionality with habit tracking. - Created a shared Field component for consistent labeling and hinting of form controls. - Implemented comprehensive accessibility tests for calendar and editor components, ensuring proper focus management and keyboard navigation. - Added structure tests for Field and Card components to verify correct ID generation and heading levels.
64 lines
1.6 KiB
CSS
64 lines
1.6 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-ui-heading: 1.125rem;
|
|
--text-ui-heading--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-ui-heading {
|
|
@apply text-ui-heading;
|
|
font-family: var(--ds-sans);
|
|
font-weight: 500;
|
|
letter-spacing: normal;
|
|
}
|
|
@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;
|
|
}
|