@repobit/dex-system-design 0.23.95 → 0.23.96

package/src/blog/src/tokens/blog.js

@@ -0,0 +1,406 @@
+/** Blog-specific tokens — source of truth. Run npm run build:tokens to sync tokens.css */
+export const blogVars = `
+/* ================================
+     BLOG — LAYOUT
+     ================================ */
+
+--layout-content-max-width: var(--content-width-max);
+--layout-article-max-width: 45rem;
+--layout-article-inline-padding: var(--spacing-24);
+--layout-page-max-width: var(--layout-content-max-width);
+--layout-page-gap: var(--spacing-32);
+--layout-page-main-ratio: 3fr;
+--layout-page-sidebar-ratio: 1fr;
+--layout-article-toc-width: 13rem;
+--layout-article-toc-gap: var(--spacing-32);
+--layout-section-gap: var(--spacing-64);
+
+--layout-awards-section-background: var(--color-surface-brand);
+--layout-awards-banner-max-width: 37.5rem;
+--layout-awards-cluster-max-width: 49.5625rem;
+--layout-awards-intro-max-width: 39.4375rem;
+--layout-awards-content-max-width: 53.0625rem;
+--layout-ensemble-inline-padding: var(--spacing-24);
+
+/* ================================
+     BLOG — PROSE / ARTICLE
+     ================================ */
+
+--blog-prose-max-width: var(--content-width-readable);
+--blog-prose-fontSize: var(--typography-body-regular-fontSize);
+--blog-prose-lineHeight: var(--typography-body-regular-lineHeight);
+--blog-prose-color: var(--color-text-primary);
+--blog-prose-paragraph-spacing: var(--spacing-24);
+--blog-prose-heading-spacing-top: var(--spacing-48);
+--blog-prose-heading-spacing-bottom: var(--spacing-16);
+--blog-prose-list-spacing: var(--spacing-8);
+--blog-prose-list-indent: var(--spacing-24);
+
+--blog-prose-subhead-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-prose-subhead-fontSize: var(--typography-fontSize-2xl);
+--blog-prose-subhead-fontWeight: var(--typography-fontWeight-semibold);
+--blog-prose-subhead-lineHeight: var(--typography-lineHeight-snug);
+--blog-prose-subhead-color: var(--blog-prose-color);
+--blog-prose-subhead-spacing-top: var(--spacing-32);
+--blog-prose-subhead-spacing-bottom: var(--spacing-8);
+
+--blog-related-label-fontFamily: var(--typography-fontFamily-sans);
+--blog-related-label-fontSize: var(--blog-prose-fontSize);
+--blog-related-label-fontWeight: var(--typography-body-regular-fontWeight);
+--blog-related-label-fontStyle: italic;
+--blog-related-label-lineHeight: var(--blog-prose-lineHeight);
+--blog-related-label-color: var(--blog-prose-color);
+--blog-related-label-spacing-top: var(--spacing-32);
+
+/* Hero abstract accent — left bar only (not used by body quotes) */
+--blog-accent-border-width: var(--border-width-2);
+--blog-accent-border-color: var(--color-blue-500);
+--blog-accent-padding: var(--spacing-24);
+
+/* Body quote — tinted panel + oversized opening mark */
+--blog-quote-background: var(--color-blue-50);
+--blog-quote-borderRadius: var(--radius-2xl);
+--blog-quote-padding-block: var(--spacing-24);
+--blog-quote-padding-inline: var(--spacing-24);
+--blog-quote-padding-inline-start: var(--spacing-16);
+--blog-quote-mark-gap: var(--spacing-4);
+--blog-quote-mark-fontSize: 4rem;
+--blog-quote-mark-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-quote-mark-fontWeight: var(--typography-fontWeight-semibold);
+--blog-quote-mark-color: var(--color-blue-200);
+--blog-quote-mark-offset-top: -0.05em;
+--blog-quote-mark-lineHeight: 0.85;
+--blog-quote-fontSize: var(--typography-fontSize-xl);
+--blog-quote-lineHeight: var(--typography-lineHeight-relaxed);
+--blog-quote-color: var(--color-text-primary);
+--blog-quote-fontStyle: italic;
+--blog-quote-attribution-fontSize: var(--typography-fontSize-sm);
+--blog-quote-attribution-color: var(--color-text-muted);
+
+--blog-pullquote-fontSize: var(--typography-fontSize-2xl);
+--blog-pullquote-fontWeight: var(--typography-fontWeight-medium);
+--blog-pullquote-lineHeight: var(--typography-lineHeight-snug);
+--blog-pullquote-color: var(--color-text-primary);
+
+--blog-code-block-background: var(--color-neutral-50);
+--blog-code-block-color: var(--color-text-primary);
+--blog-code-block-fontFamily: var(--typography-code-block-fontFamily);
+--blog-code-block-fontSize: var(--typography-code-block-fontSize);
+--blog-code-block-fontWeight: var(--typography-code-block-fontWeight);
+--blog-code-block-lineHeight: var(--typography-code-block-lineHeight);
+--blog-code-block-padding: var(--spacing-24);
+--blog-code-block-borderRadius: var(--radius-2xl);
+--blog-code-block-selection-background: var(--color-neutral-100);
+
+/* ================================
+     BLOG — META & BYLINE
+     ================================ */
+
+--blog-meta-fontSize: var(--typography-fontSize-sm);
+--blog-meta-fontWeight: var(--typography-fontWeight-normal);
+--blog-meta-color: var(--color-text-muted);
+--blog-meta-gap: var(--spacing-8);
+--blog-meta-separator-fontSize: var(--typography-fontSize-base);
+--blog-meta-separator-color: var(--color-text-muted);
+--blog-meta-separator-fontWeight: var(--typography-fontWeight-semibold);
+
+--blog-byline-fontSize: var(--typography-fontSize-sm);
+--blog-byline-color: var(--color-text-secondary);
+--blog-byline-gap: var(--spacing-12);
+--blog-byline-avatar-size: var(--dimension-40px);
+
+--blog-date-color: var(--color-text-muted);
+--blog-reading-time-color: var(--color-text-muted);
+
+/* ================================
+     BLOG — AUTHORS (HERO)
+     ================================ */
+
+--blog-authors-label-fontSize: var(--typography-fontSize-sm);
+--blog-authors-label-fontWeight: var(--typography-fontWeight-medium);
+--blog-authors-label-color: var(--color-text-primary);
+--blog-authors-gap: var(--spacing-8);
+--blog-authors-pill-gap: var(--spacing-8);
+
+--blog-hero-divider-width: var(--border-width-1);
+--blog-hero-divider-color: var(--color-border-subtle);
+
+/* ================================
+     BLOG — TAGS & CHIPS
+     ================================ */
+
+--blog-tag-padding: var(--spacing-4) var(--spacing-8);
+--blog-tag-fontSize: var(--typography-label-default-fontSize);
+--blog-tag-fontWeight: var(--typography-label-default-fontWeight);
+--blog-tag-lineHeight: var(--dimension-20px);
+--blog-tag-borderRadius: var(--radius-full);
+--blog-tag-border-width: var(--border-width-1);
+--blog-tag-gap: var(--spacing-8);
+
+--blog-tag-default-background: var(--color-surface-subtle);
+--blog-tag-default-color: var(--color-text-secondary);
+--blog-tag-default-border-color: var(--color-border-subtle);
+
+--blog-tag-brand-background: var(--color-blue-100);
+--blog-tag-brand-color: var(--color-blue-800);
+--blog-tag-brand-border-color: var(--color-blue-100);
+
+--blog-tag-brand-hover-background: var(--color-blue-200);
+--blog-tag-brand-hover-color: var(--color-blue-800);
+
+--blog-tag-hover-background: var(--color-neutral-100);
+--blog-tag-hover-color: var(--color-text-primary);
+
+/* ================================
+     BLOG — CARDS
+     ================================ */
+
+--blog-card-padding: var(--spacing-24);
+--blog-card-gap: var(--spacing-16);
+--blog-card-borderRadius: var(--radius-lg);
+--blog-card-border-color: var(--color-border-subtle);
+--blog-card-background: var(--color-surface);
+--blog-card-shadow: var(--shadow-sm);
+--blog-card-shadow-hover: var(--shadow-md);
+--blog-card-title-fontSize: var(--typography-fontSize-xl);
+--blog-card-title-fontWeight: var(--typography-fontWeight-semibold);
+--blog-card-title-fontFamily: var(--typography-heading-h5-fontFamily);
+--blog-card-excerpt-color: var(--color-text-secondary);
+--blog-card-image-aspect-ratio: 16 / 9;
+
+/* ================================
+     BLOG — KEY TAKEAWAYS
+     ================================ */
+
+--blog-takeaways-borderRadius: var(--radius-2xl);
+--blog-takeaways-border-width: var(--border-width-1);
+--blog-takeaways-border-color: var(--blog-card-border-color);
+--blog-takeaways-background: var(--blog-card-background);
+--blog-takeaways-padding-inline: var(--spacing-24);
+--blog-takeaways-header-padding-block: var(--spacing-20);
+--blog-takeaways-header-padding-bottom: var(--spacing-20);
+--blog-takeaways-body-padding-top: var(--spacing-16);
+--blog-takeaways-body-padding-bottom: var(--spacing-24);
+--blog-takeaways-divider-width: var(--border-width-1);
+--blog-takeaways-divider-color: var(--color-border-subtle);
+--blog-takeaways-title-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-takeaways-title-fontSize: var(--typography-fontSize-base);
+--blog-takeaways-title-fontWeight: var(--typography-fontWeight-bold);
+--blog-takeaways-title-lineHeight: var(--typography-lineHeight-normal);
+--blog-takeaways-title-color: var(--color-text-primary);
+--blog-takeaways-item-fontSize: var(--blog-prose-fontSize);
+--blog-takeaways-item-fontWeight: var(--typography-fontWeight-normal);
+--blog-takeaways-item-lineHeight: var(--typography-lineHeight-relaxed);
+--blog-takeaways-item-color: var(--blog-prose-color);
+--blog-takeaways-item-gap: var(--spacing-12);
+--blog-takeaways-list-indent: var(--spacing-16);
+--blog-takeaways-bullet-gap: var(--spacing-4);
+
+/* ================================
+     BLOG — TABLE OF CONTENTS
+     ================================ */
+
+--blog-toc-borderRadius: var(--blog-takeaways-borderRadius);
+--blog-toc-border-width: var(--blog-takeaways-border-width);
+--blog-toc-border-color: var(--blog-takeaways-border-color);
+--blog-toc-background: var(--blog-takeaways-background);
+--blog-toc-link-fontSize: var(--blog-nav-link-fontSize);
+--blog-toc-link-fontWeight: var(--blog-nav-link-fontWeight);
+--blog-toc-link-lineHeight: var(--typography-lineHeight-normal);
+--blog-toc-link-color: var(--blog-nav-link-color);
+--blog-toc-link-hover-color: var(--blog-nav-link-hover-color);
+--blog-toc-item-gap: var(--spacing-8);
+--blog-toc-sticky-offset: var(--spacing-24);
+--blog-toc-marker-size: var(--spacing-8);
+--blog-toc-marker-gap: var(--spacing-8);
+--blog-toc-marker-offset-top: 0.65em;
+--blog-toc-marker-color: var(--color-blue-500);
+--blog-toc-link-active-color: var(--color-blue-600);
+--blog-toc-scroll-offset: var(--spacing-48);
+--blog-toc-reading-line-offset: var(--spacing-128);
+--blog-toc-toggle-size: var(--spacing-32);
+--blog-toc-toggle-fontSize: var(--typography-fontSize-2xl);
+--blog-toc-toggle-color: var(--color-blue-500);
+--blog-toc-toggle-hover-color: var(--color-blue-600);
+
+/* ================================
+     BLOG — REPORT PROMO
+     Sidebar lead magnet — aliases only; styles use shared core/blog tokens.
+     ================================ */
+
+--blog-report-promo-background: var(--color-blue-100);
+--blog-report-promo-borderRadius: var(--blog-takeaways-borderRadius);
+--blog-report-promo-border-width: var(--blog-newsletter-border-width);
+--blog-report-promo-border-color: var(--blog-newsletter-border-color);
+--blog-report-promo-max-width: 40rem;
+--blog-report-promo-padding: var(--spacing-24);
+--blog-report-promo-gap: var(--spacing-24);
+--blog-report-promo-media-max-height: 16rem;
+--blog-report-promo-media-width-desktop: 13.25rem;
+--blog-report-promo-image-width-desktop: 26.5625rem;
+--blog-report-promo-media-aspect-ratio: 490 / 157;
+--blog-report-promo-image-crop-offset: -70%;
+--blog-report-promo-image-height-ratio: 492 / 157;
+--blog-report-promo-title-fontSize: var(--typography-fontSize-xl);
+--blog-report-promo-title-fontWeight: var(--typography-fontWeight-semibold);
+--blog-report-promo-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-report-promo-title-color: var(--color-text-primary);
+--blog-report-promo-description-fontSize: var(--typography-fontSize-base);
+--blog-report-promo-description-lineHeight: var(--typography-lineHeight-normal);
+--blog-report-promo-description-color: var(--color-text-muted);
+--blog-report-promo-body-gap: var(--spacing-8);
+--blog-report-promo-cta-spacing-top: var(--spacing-4);
+
+/* ================================
+     BLOG — RELATED ARTICLES
+     ================================ */
+
+--blog-related-title-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-related-title-fontSize: var(--typography-fontSize-2xl);
+--blog-related-title-fontWeight: var(--typography-fontWeight-bold);
+--blog-related-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-related-title-color: var(--color-text-primary);
+--blog-related-title-spacing-bottom: var(--spacing-24);
+--blog-related-grid-gap: var(--spacing-24);
+--blog-related-grid-gap-mobile: var(--spacing-32);
+--blog-related-card-body-gap: var(--spacing-12);
+--blog-related-card-image-gap: var(--spacing-12);
+--blog-related-card-divider-color: var(--color-border-subtle);
+--blog-related-card-divider-width: var(--border-width-1);
+--blog-related-card-image-aspect-ratio-mobile: 2 / 1;
+--blog-related-mobile-preview-count: 2;
+--blog-related-see-all-fontFamily: var(--typography-fontFamily-sans);
+--blog-related-see-all-fontSize: var(--typography-fontSize-base);
+--blog-related-see-all-fontWeight: var(--typography-fontWeight-medium);
+--blog-related-see-all-color: var(--color-blue-500);
+--blog-related-see-all-hover-color: var(--color-blue-700);
+--blog-related-see-all-spacing-top: var(--spacing-8);
+--blog-related-see-all-underline-offset: 0.15em;
+--blog-related-card-title-fontFamily: var(--blog-card-title-fontFamily);
+--blog-related-card-title-fontSize: var(--blog-card-title-fontSize);
+--blog-related-card-title-fontWeight: var(--blog-card-title-fontWeight);
+--blog-related-card-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-related-card-title-color: var(--color-text-primary);
+--blog-related-card-excerpt-fontSize: var(--typography-fontSize-sm);
+--blog-related-card-excerpt-color: var(--blog-card-excerpt-color);
+--blog-related-card-meta-fontSize: var(--blog-meta-fontSize);
+--blog-related-card-image-aspect-ratio: var(--blog-card-image-aspect-ratio);
+--blog-related-card-image-borderRadius: var(--radius-xl);
+--blog-related-card-tag-inset: var(--spacing-12);
+--blog-related-card-tag-background: var(--blog-tag-brand-background);
+--blog-related-card-tag-color: var(--blog-tag-brand-color);
+--blog-related-card-tag-border-color: var(--blog-tag-brand-border-color);
+
+/* ================================
+     BLOG — MOST POPULAR
+     ================================ */
+
+--blog-popular-title-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-popular-title-fontSize: var(--typography-fontSize-2xl);
+--blog-popular-title-fontWeight: var(--typography-fontWeight-semibold);
+--blog-popular-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-popular-title-color: var(--color-text-primary);
+--blog-popular-title-spacing-bottom: var(--spacing-24);
+--blog-popular-item-gap: var(--spacing-24);
+--blog-popular-item-inner-gap: var(--spacing-12);
+--blog-popular-thumb-width: 5rem;
+--blog-popular-thumb-aspect-ratio: var(--blog-card-image-aspect-ratio);
+--blog-popular-thumb-borderRadius: var(--radius-lg);
+--blog-popular-thumb-background: var(--blog-content-image-background);
+--blog-popular-item-title-fontFamily: var(--typography-fontFamily-sans);
+--blog-popular-item-title-fontSize: var(--typography-fontSize-sm);
+--blog-popular-item-title-fontWeight: var(--typography-fontWeight-medium);
+--blog-popular-item-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-popular-item-title-color: var(--color-blue-500);
+--blog-popular-item-date-fontSize: var(--typography-fontSize-xs);
+--blog-popular-item-date-color: var(--color-text-muted);
+--blog-popular-link-hover-color: var(--color-text-link-hover);
+
+/* ================================
+     BLOG — HERO
+     ================================ */
+
+--blog-hero-min-height: 24rem;
+--blog-hero-padding: var(--spacing-64) var(--spacing-24);
+--blog-hero-background: var(--color-surface-brand);
+--blog-hero-title-fontSize: var(--typography-display-md-fontSize);
+--blog-hero-title-fontWeight: var(--typography-fontWeight-semibold);
+--blog-hero-title-lineHeight: var(--typography-display-md-lineHeight);
+--blog-hero-title-fontFamily: var(--typography-display-md-fontFamily);
+--blog-hero-title-color: var(--color-blue-500);
+--blog-hero-subtitle-color: var(--blog-prose-color);
+--blog-hero-subtitle-fontSize: var(--typography-body-lead-fontSize);
+--blog-hero-subtitle-fontFamily: var(--typography-body-lead-fontFamily);
+--blog-hero-subtitle-fontStyle: normal;
+--blog-hero-abstract-border-width: var(--blog-accent-border-width);
+--blog-hero-abstract-border-color: var(--blog-accent-border-color);
+--blog-hero-abstract-padding: var(--spacing-16);
+--blog-abstract-spacing-after-last: var(--spacing-24);
+--blog-hero-abstract-to-featured-gap: var(--spacing-24);
+--blog-hero-featured-borderRadius: var(--radius-2xl);
+--blog-hero-featured-aspect-ratio: 16 / 9;
+--blog-hero-featured-background: var(--color-neutral-50);
+
+/* ================================
+     BLOG — CONTENT IMAGES
+     ================================ */
+
+--blog-content-image-borderRadius: var(--blog-hero-featured-borderRadius);
+--blog-content-image-background: var(--color-neutral-100);
+
+--blog-standout-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-standout-fontSize: var(--typography-fontSize-xl);
+--blog-standout-fontWeight: var(--typography-fontWeight-bold);
+--blog-standout-fontStyle: italic;
+--blog-standout-lineHeight: var(--typography-lineHeight-snug);
+--blog-standout-color: var(--color-text-primary);
+
+/* ================================
+     BLOG — NAVIGATION
+     ================================ */
+
+--blog-nav-height: 4rem;
+--blog-nav-padding: 0 var(--spacing-24);
+--blog-nav-background: var(--color-surface);
+--blog-nav-border-color: var(--color-border-subtle);
+--blog-nav-link-color: var(--color-text-primary);
+--blog-nav-link-hover-color: var(--color-text-link);
+--blog-nav-link-fontSize: var(--typography-fontSize-sm);
+--blog-nav-link-fontWeight: var(--typography-fontWeight-medium);
+
+/* ================================
+     BLOG — NEWSLETTER SIGNUP
+     ================================ */
+
+--blog-newsletter-padding: var(--spacing-32);
+--blog-newsletter-gap: var(--spacing-24);
+--blog-newsletter-borderRadius: var(--radius-2xl);
+--blog-newsletter-border-width: var(--border-width-1);
+--blog-newsletter-border-color: var(--blog-card-border-color);
+--blog-newsletter-background: var(--blog-card-background);
+--blog-newsletter-icon-size: var(--icon-2xl-size);
+--blog-newsletter-icon-color: var(--color-blue-500);
+--blog-newsletter-heading-fontFamily: var(--typography-fontFamily-sans);
+--blog-newsletter-heading-fontSize: var(--typography-fontSize-xl);
+--blog-newsletter-heading-fontWeight: var(--typography-fontWeight-normal);
+--blog-newsletter-heading-lineHeight: var(--typography-lineHeight-snug);
+--blog-newsletter-heading-color: var(--color-text-primary);
+--blog-newsletter-heading-max-width: 28rem;
+--blog-newsletter-heading-emphasis-fontStyle: italic;
+--blog-newsletter-description-fontFamily: var(--typography-fontFamily-sans);
+--blog-newsletter-description-fontSize: var(--typography-fontSize-sm);
+--blog-newsletter-description-fontWeight: var(--typography-fontWeight-normal);
+--blog-newsletter-description-lineHeight: var(--typography-lineHeight-normal);
+--blog-newsletter-description-color: var(--color-text-muted);
+--blog-newsletter-description-max-width: 28rem;
+--blog-newsletter-form-max-width: 32rem;
+--blog-newsletter-form-gap: var(--spacing-12);
+--blog-newsletter-disclaimer-fontFamily: var(--typography-fontFamily-sans);
+--blog-newsletter-disclaimer-fontSize: var(--typography-fontSize-xs);
+--blog-newsletter-disclaimer-fontWeight: var(--typography-fontWeight-normal);
+--blog-newsletter-disclaimer-lineHeight: var(--typography-lineHeight-normal);
+--blog-newsletter-disclaimer-color: var(--color-text-muted);
+--blog-newsletter-disclaimer-max-width: 28rem;
+--blog-newsletter-spacing-top: var(--spacing-48);
+--blog-newsletter-spacing-bottom: var(--spacing-32);
+`;