From b723fc4a856f108727738895db588f2ec973ba83 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Sat, 31 Jan 2026 16:58:26 -0700 Subject: [PATCH] Update app design tokens --- app/blog/[slug]/page.tsx | 1 + app/blog/blog.css | 38 ++ .../RelatedArticles.container.tsx | 27 +- .../RelatedArticles/RelatedArticles.view.tsx | 2 +- app/tailwind.css | 355 ++++++++++++++++-- 5 files changed, 373 insertions(+), 50 deletions(-) create mode 100644 app/blog/blog.css diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx index ca857d7..82d3263 100644 --- a/app/blog/[slug]/page.tsx +++ b/app/blog/[slug]/page.tsx @@ -10,6 +10,7 @@ import { logger } from "../../../lib/logger"; import ContentBanner from "../../components/ContentBanner"; import AskOrganizer from "../../components/AskOrganizer"; import { getAssetPath, ASSETS } from "../../../lib/assetUtils"; +import "../blog.css"; // Code split RelatedArticles - blog-specific, below the fold const RelatedArticles = dynamic( diff --git a/app/blog/blog.css b/app/blog/blog.css new file mode 100644 index 0000000..60e5fad --- /dev/null +++ b/app/blog/blog.css @@ -0,0 +1,38 @@ +/* Blog post body styling with semantic spacing */ +.post-body p { + /* Scales with font size - uses logical properties for better writing mode support */ + margin-block: 1em; +} + +/* Extra blank lines from markdown -> visible gaps that scale with font size */ +.post-body .md-gap { + /* Each "extra blank line" is one em; scales with font size */ + block-size: calc(1em * var(--gap, 1)); + margin: 0; /* no extra margins around the gap */ + line-height: 1; /* prevent tall line-height from compounding */ +} + +/* Heading rhythm for better typography */ +.post-body h1 { + margin-block: 1.5em 0.6em; +} +.post-body h2 { + margin-block: 1.4em 0.6em; +} +.post-body h3 { + margin-block: 1.2em 0.5em; +} +.post-body h4 { + margin-block: 1.1em 0.5em; +} +.post-body h5 { + margin-block: 1em 0.4em; +} +.post-body h6 { + margin-block: 1em 0.4em; +} + +/* Ensure line breaks are visible */ +.post-body br { + display: block; +} diff --git a/app/components/RelatedArticles/RelatedArticles.container.tsx b/app/components/RelatedArticles/RelatedArticles.container.tsx index b0fe4bd..abbe0d8 100644 --- a/app/components/RelatedArticles/RelatedArticles.container.tsx +++ b/app/components/RelatedArticles/RelatedArticles.container.tsx @@ -15,8 +15,14 @@ const RelatedArticlesContainer = memo( const [currentIndex, setCurrentIndex] = useState(0); const [progress, setProgress] = useState(0); + const [mounted, setMounted] = useState(false); const isMobile = useIsMobile(); + // Ensure hydration matches server render + useEffect(() => { + setMounted(true); + }, []); + // Memoize the mouse down handler to prevent unnecessary re-renders const handleMouseDown = useCallback( (e: React.MouseEvent) => { @@ -42,16 +48,17 @@ const RelatedArticlesContainer = memo( ); // Memoize transform style to prevent unnecessary recalculations + // Use mounted state to prevent hydration mismatch const transformStyle = useMemo( () => ({ - transform: isMobile + transform: mounted && isMobile ? `translateX(calc(50% - 130px - ${currentIndex * 260}px))` : "none", - scrollBehavior: (!isMobile + scrollBehavior: (mounted && !isMobile ? "smooth" : "auto") as React.CSSProperties["scrollBehavior"], }), - [isMobile, currentIndex], + [mounted, isMobile, currentIndex], ); // Memoize progress bar style calculation @@ -67,9 +74,9 @@ const RelatedArticlesContainer = memo( [currentIndex, progress], ); - // Auto-advance every 3 seconds (only on mobile) + // Auto-advance every 3 seconds (only on mobile, after mount) useEffect(() => { - if (filteredPosts.length <= 1 || !isMobile) return; + if (filteredPosts.length <= 1 || !mounted || !isMobile) return; const interval = setInterval(() => { setProgress(0); @@ -77,11 +84,11 @@ const RelatedArticlesContainer = memo( }, 3000); return () => clearInterval(interval); - }, [filteredPosts.length, isMobile]); + }, [filteredPosts.length, mounted, isMobile]); - // Progress animation (only on mobile) + // Progress animation (only on mobile, after mount) useEffect(() => { - if (filteredPosts.length <= 1 || !isMobile) return; + if (filteredPosts.length <= 1 || !mounted || !isMobile) return; const progressInterval = setInterval(() => { setProgress((prev) => { @@ -93,13 +100,13 @@ const RelatedArticlesContainer = memo( }, 30); // 30ms intervals for smooth animation return () => clearInterval(progressInterval); - }, [currentIndex, filteredPosts.length, isMobile]); + }, [currentIndex, filteredPosts.length, mounted, isMobile]); return ( - {/* Progress bars - only show on mobile */} + {/* Progress bars - only show on mobile (after hydration) */} {isMobile && (
{filteredPosts.map((relatedPost, index) => ( diff --git a/app/tailwind.css b/app/tailwind.css index b342fb7..9952f8e 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -41,6 +41,17 @@ var(--font-space-grotesk), ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; + /* Typography weight tokens */ + --typography-thin: 100; + --typography-extralight: 200; + --typography-light: 300; + --typography-regular: 400; + --typography-medium: 500; + --typography-semibold: 600; + --typography-bold: 700; + --typography-extrabold: 800; + --typography-black: 900; + /* Dimension */ --spacing-scale-000: 0px; --spacing-scale-001: 1px; @@ -52,8 +63,11 @@ --spacing-scale-008: 8px; --spacing-scale-010: 10px; --spacing-scale-012: 12px; + --spacing-scale-014: 14px; --spacing-scale-016: 16px; + --spacing-scale-018: 18px; --spacing-scale-020: 20px; + --spacing-scale-022: 22px; --spacing-scale-024: 24px; --spacing-scale-032: 32px; --spacing-scale-040: 40px; @@ -68,11 +82,56 @@ --spacing-scale-260: 260px; --spacing-scale-290: 290px; + /* Negative spacing scales */ + --spacing-scale--004: -4px; + --spacing-scale--008: -8px; + --spacing-scale--012: -12px; + --spacing-scale--016: -16px; + --spacing-scale--024: -24px; + + /* Scale aliases for measures compatibility */ + --scale-000: var(--spacing-scale-000); + --scale-001: var(--spacing-scale-001); + --scale-002: var(--spacing-scale-002); + --scale-003: var(--spacing-scale-003); + --scale-004: var(--spacing-scale-004); + --scale-005: var(--spacing-scale-005); + --scale-006: var(--spacing-scale-006); + --scale-008: var(--spacing-scale-008); + --scale-010: var(--spacing-scale-010); + --scale-012: var(--spacing-scale-012); + --scale-014: var(--spacing-scale-014); + --scale-016: var(--spacing-scale-016); + --scale-018: var(--spacing-scale-018); + --scale-020: var(--spacing-scale-020); + --scale-022: var(--spacing-scale-022); + --scale-024: var(--spacing-scale-024); + --scale-032: var(--spacing-scale-032); + --scale-040: var(--spacing-scale-040); + --scale-048: var(--spacing-scale-048); + --scale-056: var(--spacing-scale-056); + --scale-060: var(--spacing-scale-060); + --scale-064: var(--spacing-scale-064); + --scale-076: var(--spacing-scale-076); + --scale-096: var(--spacing-scale-096); + --scale-120: var(--spacing-scale-120); + --scale-160: var(--spacing-scale-160); + --scale-260: var(--spacing-scale-260); + --scale-290: var(--spacing-scale-290); + --scale--004: var(--spacing-scale--004); + --scale--008: var(--spacing-scale--008); + --scale--012: var(--spacing-scale--012); + --scale--016: var(--spacing-scale--016); + --scale--024: var(--spacing-scale--024); + --spacing-measures-sizing-008: var(--spacing-scale-008); --spacing-measures-sizing-010: var(--spacing-scale-010); --spacing-measures-sizing-012: var(--spacing-scale-012); + --spacing-measures-sizing-014: var(--spacing-scale-014); --spacing-measures-sizing-016: var(--spacing-scale-016); + --spacing-measures-sizing-018: var(--spacing-scale-018); --spacing-measures-sizing-020: var(--spacing-scale-020); + --spacing-measures-sizing-022: var(--spacing-scale-022); --spacing-measures-sizing-024: var(--spacing-scale-024); --spacing-measures-sizing-032: var(--spacing-scale-032); --spacing-measures-sizing-040: var(--spacing-scale-040); @@ -93,8 +152,11 @@ --spacing-measures-spacing-008: var(--spacing-scale-008); --spacing-measures-spacing-010: var(--spacing-scale-010); --spacing-measures-spacing-012: var(--spacing-scale-012); + --spacing-measures-spacing-014: var(--spacing-scale-014); --spacing-measures-spacing-016: var(--spacing-scale-016); + --spacing-measures-spacing-018: var(--spacing-scale-018); --spacing-measures-spacing-020: var(--spacing-scale-020); + --spacing-measures-spacing-022: var(--spacing-scale-022); --spacing-measures-spacing-024: var(--spacing-scale-024); --spacing-measures-spacing-032: var(--spacing-scale-032); --spacing-measures-spacing-040: var(--spacing-scale-040); @@ -136,8 +198,11 @@ --measures-sizing-008: var(--spacing-measures-sizing-008); --measures-sizing-010: var(--spacing-measures-sizing-010); --measures-sizing-012: var(--spacing-measures-sizing-012); + --measures-sizing-014: var(--spacing-measures-sizing-014); --measures-sizing-016: var(--spacing-measures-sizing-016); + --measures-sizing-018: var(--spacing-measures-sizing-018); --measures-sizing-020: var(--spacing-measures-sizing-020); + --measures-sizing-022: var(--spacing-measures-sizing-022); --measures-sizing-024: var(--spacing-measures-sizing-024); --measures-sizing-032: var(--spacing-measures-sizing-032); --measures-sizing-040: var(--spacing-measures-sizing-040); @@ -156,8 +221,11 @@ --measures-spacing-008: var(--spacing-measures-spacing-008); --measures-spacing-010: var(--spacing-measures-spacing-010); --measures-spacing-012: var(--spacing-measures-spacing-012); + --measures-spacing-014: var(--spacing-measures-spacing-014); --measures-spacing-016: var(--spacing-measures-spacing-016); + --measures-spacing-018: var(--spacing-measures-spacing-018); --measures-spacing-020: var(--spacing-measures-spacing-020); + --measures-spacing-022: var(--spacing-measures-spacing-022); --measures-spacing-024: var(--spacing-measures-spacing-024); --measures-spacing-032: var(--spacing-measures-spacing-032); --measures-spacing-040: var(--spacing-measures-spacing-040); @@ -171,6 +239,84 @@ --measures-spacing-160: var(--spacing-measures-spacing-160); --measures-spacing-260: var(--spacing-measures-spacing-260); + /* Negative spacing aliases */ + --measures-spacing--004: var(--spacing-scale--004); + --measures-spacing--008: var(--spacing-scale--008); + --measures-spacing--012: var(--spacing-scale--012); + --measures-spacing--016: var(--spacing-scale--016); + --measures-spacing--024: var(--spacing-scale--024); + + /* Semantic space tokens */ + --space-0: var(--spacing-scale-000); + --space-025: var(--spacing-scale-001); + --space-050: var(--spacing-scale-002); + --space-100: var(--spacing-scale-004); + --space-150: var(--spacing-scale-006); + --space-200: var(--spacing-scale-008); + --space-250: var(--spacing-scale-010); + --space-300: var(--spacing-scale-012); + --space-400: var(--spacing-scale-016); + --space-500: var(--spacing-scale-020); + --space-600: var(--spacing-scale-024); + --space-800: var(--spacing-scale-032); + --space-1000: var(--spacing-scale-040); + --space-1200: var(--spacing-scale-048); + --space-1400: var(--spacing-scale-056); + --space-1500: var(--spacing-scale-060); + --space-1800: var(--spacing-scale-064); + --space-2100: var(--spacing-scale-076); + --space-2400: var(--spacing-scale-096); + --space-3000: var(--spacing-scale-120); + --space-4000: var(--spacing-scale-160); + --space-6500: var(--spacing-scale-260); + + /* Semantic negative space tokens */ + --space-negative-100: var(--spacing-scale--004); + --space-negative-200: var(--spacing-scale--008); + --space-negative-300: var(--spacing-scale--012); + --space-negative-400: var(--spacing-scale--016); + --space-negative-600: var(--spacing-scale--024); + + /* Semantic radius tokens */ + --radius-0: var(--spacing-scale-000); + --radius-100: var(--spacing-scale-004); + --radius-200: var(--spacing-scale-008); + --radius-300: var(--spacing-scale-012); + --radius-400: var(--spacing-scale-016); + --radius-500: var(--spacing-scale-020); + --radius-full: 9999px; + + /* Semantic sizing tokens */ + --sizing-200: var(--spacing-scale-008); + --sizing-250: var(--spacing-scale-010); + --sizing-300: var(--spacing-scale-012); + --sizing-350: var(--spacing-scale-014); + --sizing-400: var(--spacing-scale-016); + --sizing-500: var(--spacing-scale-020); + --sizing-600: var(--spacing-scale-024); + --sizing-800: var(--spacing-scale-032); + --sizing-1000: var(--spacing-scale-040); + --sizing-1200: var(--spacing-scale-048); + --sizing-1400: var(--spacing-scale-056); + --sizing-1500: var(--spacing-scale-060); + --sizing-1600: var(--spacing-scale-064); + --sizing-2400: var(--spacing-scale-096); + --sizing-3000: var(--spacing-scale-120); + --sizing-6500: var(--spacing-scale-260); + + /* Semantic border tokens */ + --border-x-small: var(--spacing-scale-001); + --border-small: var(--spacing-scale-002); + --border-medium: var(--spacing-scale-004); + --border-large: var(--spacing-scale-008); + + /* Semantic icon tokens */ + --icon-xsmall: var(--spacing-scale-012); + --icon-small: var(--spacing-scale-016); + --icon-medium: var(--spacing-scale-024); + --icon-large: var(--spacing-scale-032); + --icon-xlarge: var(--spacing-scale-040); + /* Grays & alpha */ --color-gray-000: #ffffff; --color-gray-050: #f6f6f6; @@ -345,6 +491,21 @@ --color-border-default-utility-positive: var(--color-kiwi-kiwi300); --color-border-default-utility-warning: var(--color-yellow-yellow300); + /* Theme-dark aliases for utility tokens */ + --color-border-default-negative-primary: var(--color-border-default-utility-negative); + --color-border-default-warning-primary: var(--color-border-default-utility-warning); + --color-border-default-positive-primary: var(--color-border-default-utility-positive); + + /* Theme-light variants */ + --color-border-default-negative-primary-light: var(--color-red-red300); + --color-border-default-warning-primary-light: var(--color-yellow-yellow600); + --color-border-default-positive-primary-light: var(--color-kiwi-kiwi400); + --color-border-default-brand-accent-light: var(--color-yellow-yellow600); + --color-border-default-brand-primary-light: var(--color-yellow-yellow800); + --color-border-default-primary-light: var(--color-gray-000); + --color-border-default-secondary-light: var(--color-gray-100); + --color-border-default-tertiary-light: var(--color-gray-300); + --color-border-inverse-brand-accent: var(--color-yellow-yellow50); --color-border-inverse-brand-primary: var(--color-yellow-yellow800); --color-border-inverse-brand-secondary: var(--color-rust-rust800); @@ -356,6 +517,26 @@ --color-border-inverse-utility-positive: var(--color-kiwi-kiwi400); --color-border-inverse-utility-warning: var(--color-yellow-yellow400); + /* Theme-dark invert aliases (mapping to inverse) */ + --color-border-invert-primary: var(--color-border-inverse-primary); + --color-border-invert-secondary: var(--color-border-inverse-secondary); + --color-border-invert-tertiary: var(--color-border-inverse-tertiary); + --color-border-invert-brand-primary: var(--color-yellow-yellow800); + --color-border-invert-brand-accent: var(--color-yellow-yellow600); + --color-border-invert-positive-primary: var(--color-kiwi-kiwi500); + --color-border-invert-warning-primary: var(--color-yellow-yellow600); + --color-border-invert-negative-primary: var(--color-red-red300); + + /* Theme-light invert variants */ + --color-border-invert-primary-light: var(--color-gray-900); + --color-border-invert-secondary-light: var(--color-gray-800); + --color-border-invert-tertiary-light: var(--color-gray-600); + --color-border-invert-brand-primary-light: var(--color-yellow-yellow100); + --color-border-invert-brand-accent-light: var(--color-yellow-yellow300); + --color-border-invert-positive-primary-light: var(--color-kiwi-kiwi300); + --color-border-invert-warning-primary-light: var(--color-yellow-yellow300); + --color-border-invert-negative-primary-light: var(--color-red-red300); + /* Content */ --color-content-brand-darker-accent-2: var(--color-yellow-yellow200); --color-content-brand-kiwi: var(--color-kiwi-kiwi600); @@ -371,6 +552,13 @@ --color-content-default-brand-accent: var(--color-opacity-700); --color-content-default-brand-primary: var(--color-yellow-yellow50); --color-content-default-brand-secondary: var(--color-rust-rust400); + --color-content-default-brand-lime: var(--color-lime-lime200); + --color-content-default-brand-rust: var(--color-rust-rust150); + --color-content-default-brand-royal: var(--color-royal-blue-royal-blue200); + --color-content-default-brand-red: var(--color-red-red100); + --color-content-default-brand-teal: var(--color-teal-teal200); + --color-content-default-brand-kiwi: var(--color-kiwi-kiwi100); + --color-content-default-brand-lavender: var(--color-lavender-lavender150); --color-content-default-primary: var(--color-gray-000); --color-content-default-secondary: var(--color-gray-200); --color-content-default-tertiary: var(--color-gray-300); @@ -379,6 +567,28 @@ --color-content-default-utility-positive: var(--color-lime-lime400); --color-content-default-utility-warning: var(--color-yellow-yellow500); + /* Theme-dark aliases for utility tokens */ + --color-content-default-negative-primary: var(--color-content-default-utility-negative); + --color-content-default-warning-primary: var(--color-content-default-utility-warning); + --color-content-default-positive-primary: var(--color-content-default-utility-positive); + + /* Theme-light variants */ + --color-content-default-negative-primary-light: var(--color-red-red500); + --color-content-default-warning-primary-light: var(--color-yellow-yellow600); + --color-content-default-positive-primary-light: var(--color-kiwi-kiwi700); + --color-content-default-brand-primary-light: var(--color-yellow-yellow900); + --color-content-default-brand-secondary-light: var(--color-yellow-yellow600); + --color-content-default-primary-light: var(--color-gray-1000); + --color-content-default-secondary-light: var(--color-gray-800); + --color-content-default-tertiary-light: var(--color-gray-700); + --color-content-default-brand-lime-light: var(--color-lime-lime600); + --color-content-default-brand-rust-light: var(--color-rust-rust500); + --color-content-default-brand-royal-light: var(--color-royal-blue-royal-blue1000); + --color-content-default-brand-red-light: var(--color-red-red500); + --color-content-default-brand-teal-light: var(--color-teal-teal500); + --color-content-default-brand-kiwi-light: var(--color-kiwi-kiwi600); + --color-content-default-brand-lavender-light: var(--color-lavender-lavender500); + --color-content-inverse-brand-accent: var(--color-yellow-yellow700); --color-content-inverse-brand-primary: var(--color-yellow-yellow900); --color-content-inverse-brand-secondary: var(--color-rust-rust800); @@ -391,6 +601,40 @@ --color-content-inverse-utility-positive: var(--color-kiwi-kiwi300); --color-content-inverse-utility-warning: var(--color-yellow-yellow300); + /* Theme-dark invert aliases (mapping to inverse) */ + --color-content-invert-primary: var(--color-content-inverse-primary); + --color-content-invert-secondary: var(--color-content-inverse-secondary); + --color-content-invert-tertiary: var(--color-content-inverse-tertiary); + --color-content-invert-brand-primary: var(--color-yellow-yellow900); + --color-content-invert-brand-secondary: var(--color-yellow-yellow600); + --color-content-invert-brand-lime: var(--color-lime-lime600); + --color-content-invert-brand-royal: var(--color-royal-blue-royal-blue1000); + --color-content-invert-brand-teal: var(--color-teal-teal500); + --color-content-invert-brand-rust: var(--color-rust-rust500); + --color-content-invert-brand-lavender: var(--color-lavender-lavender500); + --color-content-invert-brand-kiwi: var(--color-kiwi-kiwi600); + --color-content-invert-brand-red: var(--color-red-red500); + --color-content-invert-positive-primary: var(--color-kiwi-kiwi700); + --color-content-invert-warning-primary: var(--color-yellow-yellow600); + --color-content-invert-negative-primary: var(--color-red-red500); + + /* Theme-light invert variants */ + --color-content-invert-primary-light: var(--color-gray-000); + --color-content-invert-secondary-light: var(--color-gray-200); + --color-content-invert-tertiary-light: var(--color-gray-300); + --color-content-invert-brand-primary-light: var(--color-yellow-yellow50); + --color-content-invert-brand-secondary-light: var(--color-yellow-yellow200); + --color-content-invert-brand-lime-light: var(--color-lime-lime200); + --color-content-invert-brand-royal-light: var(--color-royal-blue-royal-blue200); + --color-content-invert-brand-teal-light: var(--color-teal-teal200); + --color-content-invert-brand-rust-light: var(--color-rust-rust150); + --color-content-invert-brand-lavender-light: var(--color-lavender-lavender150); + --color-content-invert-brand-kiwi-light: var(--color-kiwi-kiwi100); + --color-content-invert-brand-red-light: var(--color-red-red100); + --color-content-invert-positive-primary-light: var(--color-kiwi-kiwi300); + --color-content-invert-warning-primary-light: var(--color-yellow-yellow300); + --color-content-invert-negative-primary-light: var(--color-red-red300); + /* Surface */ --color-surface-default-brand-red: var(--color-red-red100); --color-surface-default-brand-darker-accent: var(--color-yellow-yellow200); @@ -399,10 +643,23 @@ --color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100); --color-surface-default-brand-lime: var(--color-lime-lime100); --color-surface-default-brand-primary: var(--color-yellow-yellow100); + --color-surface-default-brand-secondary: var(--color-yellow-yellow800); --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50); --color-surface-default-brand-rust: var(--color-rust-rust100); --color-surface-default-brand-teal: var(--color-teal-teal50); + /* Theme-dark brand token variants */ + --color-surface-default-brand-royal-dark: var(--color-royal-blue-royal-blue800); + --color-surface-default-brand-lime-dark: var(--color-lime-lime800); + --color-surface-default-brand-rust-dark: var(--color-rust-rust700); + --color-surface-default-brand-red-dark: var(--color-red-red700); + --color-surface-default-brand-kiwi-dark: var(--color-kiwi-kiwi700); + --color-surface-default-brand-lavender-dark: var(--color-lavender-lavender700); + --color-surface-default-brand-teal-dark: var(--color-teal-teal700); + --color-surface-default-positive-secondary: var(--color-kiwi-kiwi1000); + --color-surface-default-warning-secondary: var(--color-yellow-yellow1000); + --color-surface-default-negative-secondary: var(--color-red-red1000); + --color-surface-default-primary: var(--color-gray-1000); --color-surface-default-secondary: var(--color-gray-900); --color-surface-default-semi-opaque: var(--color-opacity-050); @@ -414,6 +671,24 @@ --color-surface-default-utility-positive: var(--color-kiwi-kiwi500); --color-surface-default-utility-warning: var(--color-yellow-yellow500); + /* Theme-dark aliases for utility tokens */ + --color-surface-default-negative-primary: var(--color-surface-default-utility-negative); + --color-surface-default-warning-primary: var(--color-surface-default-utility-warning); + --color-surface-default-positive-primary: var(--color-surface-default-utility-positive); + + /* Theme-light variants */ + --color-surface-default-negative-primary-light: var(--color-red-red200); + --color-surface-default-warning-primary-light: var(--color-yellow-yellow300); + --color-surface-default-positive-primary-light: var(--color-kiwi-kiwi300); + --color-surface-default-brand-primary-light: var(--color-yellow-yellow50); + --color-surface-default-primary-light: var(--color-gray-000); + --color-surface-default-secondary-light: var(--color-gray-100); + --color-surface-default-tertiary-light: var(--color-gray-200); + --color-surface-default-brand-secondary-light: var(--color-yellow-yellow200); + --color-surface-default-positive-secondary-light: var(--color-kiwi-kiwi0); + --color-surface-default-warning-secondary-light: var(--color-yellow-yellow0); + --color-surface-default-negative-secondary-light: var(--color-red-red0); + --color-surface-inverse-brand-accent: var(--color-yellow-yellow100); --color-surface-inverse-brand-primary: var(--color-yellow-yellow50); --color-surface-inverse-brand-secondary: var(--color-rust-rust300); @@ -425,6 +700,47 @@ --color-surface-inverse-utility-positive: var(--color-kiwi-kiwi300); --color-surface-inverse-utility-warning: var(--color-yellow-yellow300); + /* Theme-dark invert aliases (mapping to inverse) */ + --color-surface-invert-primary: var(--color-surface-inverse-primary); + --color-surface-invert-secondary: var(--color-surface-inverse-secondary); + --color-surface-invert-tertiary: var(--color-surface-inverse-tertiary); + --color-surface-invert-brand-primary: var(--color-surface-inverse-brand-primary); + --color-surface-invert-brand-secondary: var(--color-surface-inverse-brand-secondary); + --color-surface-invert-brand-accent: var(--color-surface-inverse-brand-accent); + --color-surface-invert-brand-lime: var(--color-lime-lime100); + --color-surface-invert-brand-royal: var(--color-royal-blue-royal-blue50); + --color-surface-invert-brand-teal: var(--color-teal-teal50); + --color-surface-invert-brand-rust: var(--color-rust-rust100); + --color-surface-invert-brand-lavender: var(--color-lavender-lavender150); + --color-surface-invert-brand-kiwi: var(--color-kiwi-kiwi200); + --color-surface-invert-brand-red: var(--color-red-red100); + --color-surface-invert-negative-primary: var(--color-red-red200); + --color-surface-invert-negative-secondary: var(--color-red-red0); + --color-surface-invert-warning-primary: var(--color-yellow-yellow300); + --color-surface-invert-warning-secondary: var(--color-yellow-yellow0); + --color-surface-invert-positive-primary: var(--color-kiwi-kiwi300); + --color-surface-invert-positive-secondary: var(--color-kiwi-kiwi0); + + /* Theme-light invert variants */ + --color-surface-invert-primary-light: var(--color-gray-1000); + --color-surface-invert-secondary-light: var(--color-gray-900); + --color-surface-invert-tertiary-light: var(--color-gray-800); + --color-surface-invert-brand-primary-light: var(--color-yellow-yellow1000); + --color-surface-invert-brand-secondary-light: var(--color-yellow-yellow800); + --color-surface-invert-brand-lime-light: var(--color-lime-lime800); + --color-surface-invert-brand-royal-light: var(--color-royal-blue-royal-blue800); + --color-surface-invert-brand-teal-light: var(--color-teal-teal700); + --color-surface-invert-brand-rust-light: var(--color-rust-rust700); + --color-surface-invert-brand-lavender-light: var(--color-lavender-lavender700); + --color-surface-invert-brand-kiwi-light: var(--color-kiwi-kiwi700); + --color-surface-invert-brand-red-light: var(--color-red-red700); + --color-surface-invert-negative-primary-light: var(--color-red-red400); + --color-surface-invert-negative-secondary-light: var(--color-red-red1000); + --color-surface-invert-warning-primary-light: var(--color-yellow-yellow500); + --color-surface-invert-warning-secondary-light: var(--color-yellow-yellow1000); + --color-surface-invert-positive-primary-light: var(--color-kiwi-kiwi500); + --color-surface-invert-positive-secondary-light: var(--color-kiwi-kiwi1000); + /* Color */ --color-config-europe-morning-magenta: oklch(66.27% 0.264 321.73); /* white */ @@ -1083,43 +1399,4 @@ text-indent: 0px; margin-bottom: 0px; } - - /* Blog post body styling with semantic spacing */ - .post-body p { - /* Scales with font size - uses logical properties for better writing mode support */ - margin-block: 1em; - } - - /* Extra blank lines from markdown -> visible gaps that scale with font size */ - .post-body .md-gap { - /* Each "extra blank line" is one em; scales with font size */ - block-size: calc(1em * var(--gap, 1)); - margin: 0; /* no extra margins around the gap */ - line-height: 1; /* prevent tall line-height from compounding */ - } - - /* Heading rhythm for better typography */ - .post-body h1 { - margin-block: 1.5em 0.6em; - } - .post-body h2 { - margin-block: 1.4em 0.6em; - } - .post-body h3 { - margin-block: 1.2em 0.5em; - } - .post-body h4 { - margin-block: 1.1em 0.5em; - } - .post-body h5 { - margin-block: 1em 0.4em; - } - .post-body h6 { - margin-block: 1em 0.4em; - } - - /* Ensure line breaks are visible */ - .post-body br { - display: block; - } }