feat: Implement foundational UI components (Button, Card) and layout components (Section, Container), updating design tokens, styling, and documentation.

2026-02-01 14:13:39 +01:00
parent f7ac3d6a99
commit 643231b7b0
12 changed files with 357 additions and 55 deletions
--- a/theme/stylesheet.css
+++ b/theme/stylesheet.css
@@ -1,37 +1,148 @@
 /*
 * Stylesheet
 *
- * Project-specific styles go here.
+ * Typography & structural rules only.
+ * NO component styles. NO layout sections.
 * This file is imported by globals.css.
 *
 * Structure:
- * 1. Component Styles
- * 2. Layout Styles
- * 3. Page-specific Styles
- * 4. Utility Classes
- * 5. Animations
+ * 1. Typography
+ * 2. Structural Rules
+ * 3. Utility Classes
+ * 4. Animations
 */

 /* ==========================================================================
-   1. Component Styles
+   1. Typography
   ========================================================================== */

-/* Components are added per project */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+}
+
+h5 {
+  font-size: var(--font-size-lg);
+}
+
+h6 {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+  line-height: var(--line-height-normal);
+}
+
+small {
+  font-size: var(--font-size-sm);
+}
+
+strong,
+b {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Prevent orphans and widows in text blocks */
+p,
+li,
+dd {
+  orphans: 2;
+  widows: 2;
+}
+
+/* Lists */
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+  padding-left: var(--spacing-lg);
+}
+
+li {
+  margin-bottom: var(--spacing-xs);
+}
+
+/* Blockquote */
+blockquote {
+  margin: 0 0 var(--spacing-md);
+  padding-left: var(--spacing-lg);
+  border-left: 3px solid var(--color-border);
+  font-style: italic;
+}
+
+/* Code */
+code {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+  overflow-x: auto;
+}
+
+pre code {
+  font-size: var(--font-size-sm);
+}

 /* ==========================================================================
-   2. Layout Styles
+   2. Structural Rules
   ========================================================================== */

-/* Layout styles are added per project */
+/* Focus styles for keyboard navigation */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

 /* ==========================================================================
-   3. Page-specific Styles
-   ========================================================================== */
-
-/* Page styles are added per project */
-
-/* ==========================================================================
-   4. Utility Classes
+   3. Utility Classes
   ========================================================================== */

 .visually-hidden {
@@ -47,7 +158,7 @@
 }

 /* ==========================================================================
-   5. Animations
+   4. Animations
   ========================================================================== */

 /* Animations are added per project */