Barebone Baseline

2026-02-19 14:10:37 +01:00
parent c48218e225
commit 857467409d
35 changed files with 6879 additions and 141 deletions
--- a/src/styles/elements.css
+++ b/src/styles/elements.css
@@ -0,0 +1,132 @@
+:root {
+  /* === Heading Colors & Font Sizes === */
+  /* These remain variables because they reference semantic tokens */
+
+  --el-h1-color: var(--color-text-primary);
+  --el-h1-font-family: var(--font-display);
+  --el-h1-font-size: var(--typo-size-7xl);
+
+  --el-h2-color: var(--color-text-primary);
+  --el-h2-font-family: var(--font-header);
+  --el-h2-font-size: var(--typo-size-5xl);
+
+  --el-h3-color: var(--color-text-secondary);
+  --el-h3-font-family: var(--font-header);
+  --el-h3-font-size: var(--typo-size-4xl);
+
+  --el-h4-color: var(--color-text-secondary);
+  --el-h4-font-family: var(--font-header);
+  --el-h4-font-size: var(--typo-size-3xl);
+
+  --el-h5-color: var(--color-text-secondary);
+  --el-h5-font-family: var(--font-header);
+  --el-h5-font-size: var(--typo-size-2xl);
+
+  --el-h6-color: var(--color-text-secondary);
+  --el-h6-font-family: var(--font-header);
+  --el-h6-font-size: var(--typo-size-xl);
+
+  /* === Heading Vertical Spacing === */
+  --el-h1-vspace-base: calc(1em * 1.125);
+  --el-h1-vspace-top: calc(var(--el-h1-vspace-base) * var(--vspace-spacious));
+  --el-h1-vspace-bottom: calc(
+    var(--el-h1-vspace-base) * var(--vspace-comfortable)
+  );
+
+  --el-h2-vspace-base: calc(1em * 1.1765);
+  --el-h2-vspace-top: calc(var(--el-h2-vspace-base) * var(--vspace-snug));
+  --el-h2-vspace-bottom: calc(
+    var(--el-h2-vspace-base) * var(--vspace-compressed)
+  );
+
+  --el-h3-vspace-base: calc(1em * 1.2);
+  --el-h3-vspace-top: calc(var(--el-h3-vspace-base) * var(--vspace-cozy));
+  --el-h3-vspace-bottom: calc(var(--el-h3-vspace-base) * var(--vspace-snug));
+
+  --el-h4-vspace-base: calc(1em * 1.125);
+  --el-h4-vspace-top: calc(var(--el-h4-vspace-base) * var(--vspace-normal));
+  --el-h4-vspace-bottom: calc(var(--el-h4-vspace-base) * var(--vspace-tight));
+
+  --el-h5-vspace-base: calc(1em * 1.28);
+  --el-h5-vspace-top: calc(var(--el-h5-vspace-base) * var(--vspace-cozy));
+  --el-h5-vspace-bottom: calc(var(--el-h5-vspace-base) * var(--vspace-tight));
+
+  --el-h6-vspace-base: calc(1em * 1.4);
+  --el-h6-vspace-top: calc(var(--el-h6-vspace-base) * var(--vspace-snug));
+  --el-h6-vspace-bottom: calc(
+    var(--el-h6-vspace-base) * var(--vspace-compressed)
+  );
+
+  /* === Body Text === */
+  --el-p-color: var(--color-text-primary);
+  --el-p-font-family: var(--font-body);
+  --el-p-font-size: var(--typo-size-md);
+  --el-p-vspace-base: calc(1em * var(--typo-leading-normal));
+  --el-p-vspace-top: calc(var(--el-p-vspace-base) * var(--vspace-snug));
+  --el-p-vspace-bottom: calc(var(--el-p-vspace-base) * var(--vspace-snug));
+
+  /* === Blockquote === */
+  --el-blockquote-color: var(--color-text-tertiary);
+  --el-blockquote-font-family: var(--font-body);
+  --el-blockquote-font-size: var(--typo-size-md);
+  --el-blockquote-vspace-base: calc(1em * var(--typo-leading-comfortable));
+  --el-blockquote-vspace-top: calc(
+    var(--el-blockquote-vspace-base) * var(--vspace-snug)
+  );
+  --el-blockquote-vspace-bottom: calc(
+    var(--el-blockquote-vspace-base) * var(--vspace-snug)
+  );
+
+  /* === Pre / Code === */
+  --el-pre-color: var(--color-text-inverse);
+  --el-pre-background: var(--color-surface-inverse);
+  --el-pre-font-family: var(--font-mono);
+  --el-pre-font-size: var(--typo-size-sm);
+  --el-pre-vspace-base: calc(1em * 1.5385);
+  --el-pre-vspace-top: calc(var(--el-pre-vspace-base) * var(--vspace-normal));
+  --el-pre-vspace-bottom: calc(
+    var(--el-pre-vspace-base) * var(--vspace-normal)
+  );
+
+  /* === Lists === */
+  --el-list-color: var(--color-text-primary);
+  --el-list-font-size: var(--typo-size-md);
+  --el-list-vspace-base: calc(1em * var(--typo-leading-normal));
+  --el-list-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
+  --el-list-vspace-bottom: calc(
+    var(--el-list-vspace-base) * var(--vspace-snug)
+  );
+  --el-list-nested-vspace-top: calc(
+    var(--el-list-vspace-base) * var(--vspace-snug)
+  );
+  --el-list-nested-vspace-bottom: calc(
+    var(--el-list-vspace-base) * var(--vspace-snug)
+  );
+  --el-li-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
+  --el-li-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
+  --el-li-nested-vspace-top: calc(
+    var(--el-list-vspace-base) * var(--vspace-tight)
+  );
+  --el-li-nested-vspace-bottom: calc(
+    var(--el-list-vspace-base) * var(--vspace-tight)
+  );
+
+  /* === Table === */
+  --el-th-color: var(--color-text-inverse);
+  --el-th-background: var(--color-surface-inverse);
+  --el-th-font-family: var(--font-header);
+  --el-td-color: var(--color-text-primary);
+  --el-td-font-family: var(--font-mono);
+
+  /* === DL/DT/DD === */
+  --el-dt-color: var(--color-text-inverse);
+  --el-dt-background: var(--color-surface-inverse);
+  --el-dt-font-family: var(--font-header);
+  --el-dd-color: var(--color-text-primary);
+  --el-dd-font-family: var(--font-body);
+
+  /* === HR === */
+  --hr-color: var(--color-text-tertiary);
+  --hr-symbol-color: var(--color-text-tertiary);
+  --hr-symbol-background: var(--color-surface-base);
+}