Update app design tokens
This commit is contained in:
adilallo committed
1 parent
3fb5a389c7
commit
b723fc4a85
5 files changed
+373
-50
No files matched your search
@@ -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(
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -15,8 +15,14 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
|
||||
|
||||
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<HTMLDivElement>) => {
|
||||
@@ -42,16 +48,17 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
|
||||
);
|
||||
|
||||
// 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<RelatedArticlesProps>(
|
||||
[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<RelatedArticlesProps>(
|
||||
}, 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<RelatedArticlesProps>(
|
||||
}, 30); // 30ms intervals for smooth animation
|
||||
|
||||
return () => clearInterval(progressInterval);
|
||||
}, [currentIndex, filteredPosts.length, isMobile]);
|
||||
}, [currentIndex, filteredPosts.length, mounted, isMobile]);
|
||||
|
||||
return (
|
||||
<RelatedArticlesView
|
||||
filteredPosts={filteredPosts}
|
||||
slugOrder={slugOrder}
|
||||
isMobile={isMobile}
|
||||
isMobile={mounted && isMobile}
|
||||
transformStyle={transformStyle}
|
||||
getProgressStyle={getProgressStyle}
|
||||
onMouseDown={handleMouseDown}
|
||||
|
||||
@@ -50,7 +50,7 @@ export function RelatedArticlesView({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bars - only show on mobile */}
|
||||
{/* Progress bars - only show on mobile (after hydration) */}
|
||||
{isMobile && (
|
||||
<div className="flex justify-center gap-[var(--measures-spacing-008)] px-[var(--measures-spacing-064)]">
|
||||
{filteredPosts.map((relatedPost, index) => (
|
||||
|
||||
+316
-39
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user