dave-dmg/blog_bricked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added base styles, variables, and mixins

Browse Source
This commit is contained in:
Dave
2025-09-16 14:03:23 +02:00
parent a4b8163056
commit 5816ede3ca
131 changed files with 3276 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/styles/variables/colors.css Normal file
View File

@@ -0,0 +1,156 @@
:root {
/* === Default Palette === */
/* == Blacks, Grays & Off-Whites == */
--color-palette-woodsmoke: oklch(15.5% 0.009 274.276deg); /* Woodsmoke: #0B0C10 */
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg); /* Shark: #1A1A1D */
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg); /* Shark2: #222629 */
--color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg); /* Bright Gray: #313745 */
--color-palette-slate-gray: oklch(33.3% 0 89.876deg); /* Mineshaft: #363636 */
--color-palette-gunmetal: oklch(41.1% 0.008 248.035deg); /* Abbey2: #474B4F */
--color-palette-carbon: oklch(39.8% 0 89.876deg); /* Tundora: #474747 */
--color-palette-steel-gray: oklch(42.5% 0.003 286.26deg); /* Abbey: #4e4e50 */
--color-palette-dusty-black: oklch(43.7% 0.013 17.672deg); /* DonJuan: #594F4F */
--color-palette-stone: oklch(64.3% 0.005 91.471deg); /* Natural Gray: #8E8D8A */
--color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg); /* Nevada: #6B6E70 */
--color-palette-silver: oklch(72.9% 0.001 17.185deg); /* Silver Chalice: #A8A7A7 */
--color-palette-light-silver: oklch(82.6% 0.002 247.844deg); /* Silversand: #C5C6C7 */
--color-palette-pale-gray: oklch(91.3% 0.004 91.449deg); /* Westar: #E3E2DF */
--color-palette-pale-stone: oklch(89.7% 0.004 106.481deg); /* Quillgray: #DDDDDA */
--color-palette-very-pale-gray: oklch(94.3% 0 89.876deg); /* Gallery: #ECECEC */
--color-palette-off-white: oklch(98.1% 0.003 247.858deg); /* Catskill White: #F7F9fB */
--color-palette-cat-squeeze: oklch(98.3% 0.004 236.496deg); /* Cat Squeeze: #F7FAFC */
/* == Reds == */
--color-palette-oxblood: oklch(30.5% 0.122 12.109deg); /* Bordeaux: #5D001E */
--color-palette-deep-maroon: oklch(37.6% 0.109 11.682deg); /* Crown of Thorns: #6F2232 */
--color-palette-crimson: oklch(43.2% 0.169 7.14deg); /* Monarch: #950740 */
--color-palette-cherry-red: oklch(45.4% 0.168 1.454deg); /* Disco: #9A1750 */
--color-palette-ruby: oklch(52.1% 0.206 15.782deg); /* Shiraz: #C3073F */
--color-palette-red-clay: oklch(65.1% 0.178 27.507deg); /* Burnt Sienna: #E85A4F */
--color-palette-lava: oklch(63.6% 0.193 17.075deg); /* Mandy: #E84A5F */
--color-palette-vivid-scarlet: oklch(66.6% 0.221 15.669deg); /* Radical Red: #FE4365 */
/* == Pinks & Magentas == */
--color-palette-heliotrope: oklch(68.3% 0.217 353.666deg); /* Heliotrope: #F74FA3 */
--color-palette-hot-pink: oklch(65.4% 0.2 6.69deg); /* French Rose: #EE4C7C */
--color-palette-cerise: oklch(60.7% 0.23 18.554deg); /* Amaranth: #EC2049 */
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg); /* Hibiscus: #A7226E */
--color-palette-dusty-rose: oklch(63.2% 0.11 2.384deg); /* Turkish Rose: #C06C84 */
--color-palette-berry: oklch(60.8% 0.159 2.621deg); /* Mulberry: #CC527A */
--color-palette-petal-pink: oklch(80.5% 0.063 1.992deg); /* Rose Fog: #E3AFBC */
--color-palette-coral-pink: oklch(71.2% 0.162 15.607deg); /* Froly: #F67280 */
--color-palette-sweet-pink: oklch(79.2% 0.114 21.911deg); /* Sweet Pink: #FC9D9A */
/* == Oranges & Browns == */
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg); /* Flamingo: #F26B38 */
--color-palette-terracotta: oklch(71.3% 0.131 27.646deg); /* Apricot: #E98074 */
--color-palette-tan: oklch(82.7% 0.047 76.752deg); /* Akaroa: #D8C3A5 */
--color-palette-peach: oklch(88.5% 0.072 57.746deg); /* Flesh: #FECEAB */
--color-palette-pastel-orange: oklch(82.1% 0.092 42.408deg); /* Rosebud: #F8B195 */
--color-palette-light-apricot: oklch(87.8% 0.066 57.778deg); /* Vivid Tangerine: #F9CDAD */
--color-palette-bone-white: oklch(92.7% 0.015 94.206deg); /* Satin Linen: #EAE7DC */
/* == Yellows == */
--color-palette-ripe-lemon: oklch(83.9% 0.167 91.469deg); /* Ripe Lemon: #F2C51D */
--color-palette-bright-canary: oklch(89% 0.157 97.726deg); /* Energy Yellow: #F7DB4F */
--color-palette-pale-lemon: oklch(95.6% 0.104 121.573deg); /* Mimosa: #E5FCAD */
/* == Greens == */
--color-palette-forest-green: oklch(58.1% 0.127 130.001deg); /* Crete: #61892F */
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg); /* Atlantis: #86C232 */
--color-palette-electric-green: oklch(87.7% 0.227 137.099deg); /* Screaming Green: #87f74f */
--color-palette-sage: oklch(75.1% 0.056 144.175deg); /* Norway: #87f74f */
--color-palette-mint-green: oklch(84.8% 0.098 151.333deg); /* Chinook: #9de0ad */
--color-palette-olive-drab: oklch(82.5% 0.042 107.285deg); /* Olive Drap: #C8C8A9 */
--color-palette-seafoam: oklch(71.6% 0.056 165.214deg); /* Acapulco: #83AF9B */
/* == Blues & Teals == */
--color-palette-dark-navy: oklch(27.3% 0.024 253.693deg); /* Ebony Clay: #1F2833 */
--color-palette-deep-teal: oklch(32.4% 0.018 225.132deg); /* Outer Space: #2A363B */
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg); /* Ming: #355C7D */
--color-palette-sky-blue: oklch(76.3% 0.129 233.891deg); /* Picton Blue: #4FBFF7 */
--color-palette-slate-blue: oklch(55.1% 0.043 210.602deg); /* Cutty Sark: #547980 */
--color-palette-turquoise: oklch(61.5% 0.091 198.865deg); /* Lochinvar: #2F9599 */
--color-palette-aqua: oklch(68.6% 0.095 190.758deg); /* Keppel: #45ADA8 */
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg); /* Aquamarine: #66FCF1 */
--color-palette-powder-blue: oklch(88.2% 0.062 187.276deg); /* Powder Blue: #a9e6df */
--color-palette-ice-blue: oklch(99.9% 0.001 197.139deg); /* Twilight Blue: #feffff */
/* === Semantic Colors === */
/* == Primary Colors == */
--color-primary: var(--color-palette-lava);
--color-primary-surface: oklch(from var(--color-primary) calc(l + 0.1) c h);
--color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
/* == Secondary Colors == */
--color-secondary: var(--color-palette-electric-blue);
--color-secondary-surface: oklch(from var(--color-secondary) calc(l + 0.1) c h);
--color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);
/* == Tertiary Colors == */
--color-tertiary: var(--color-palette-bright-canary);
--color-tertiary-surface: oklch(from var(--color-tertiary) calc(l + 0.1) c h);
--color-tertiary-emphasis: oklch(from var(--color-tertiary) calc(l - 0.15) c h);
/* == Text Base Colors == */
--color-text-primary: var(--color-palette-black-ink); /* Main Body Texts, headlines */
--color-text-secondary: var(--color-palette-charcoal); /* Subheading, Secondary Info */
--color-text-tertiary: var(--color-palette-charcoal-gray); /* Captions, Meta Text */
--color-text-quarternary: var(--color-palette-carbon); /* Placeholder Text */
--color-text-inverse: var(--color-palette-ice-blue); /* Text on dark backgrounds */
--color-text-disabled: var(--color-palette-cloud-gray); /* Disabled form labels, inactive text */
/* == Surface Base Colors == */
--color-surface-base: var(--color-palette-ice-blue); /* Main page background */
--color-surface-elevated-1: var(--color-palette-off-white); /* Cards, Panels */
--color-surface-elevated-2: var(--color-palette-very-pale-gray); /* Modals, Dropdowns */
--color-surface-elevated-3: var(--color-palette-pale-gray); /* Tooltips, popovers */
--color-surface-elevated-4: var(--color-palette-light-silver); /* Highest Elevation */
--color-surface-inverse: var(--color-palette-black-ink); /* Darkest Surface for Contrast */
/* == Border Base Colors == */
--color-border-subtle: var(--color-palette-silver); /* Subtle Dividers, Card Borders */
--color-border-normal: var(--color-palette-stone); /* Standard Borders, form fields */
--color-border-strong: var(--color-palette-charcoal-gray); /* Emphasized Borders */
/* == State Colors == */
--color-state-error: var(--color-palette-cerise); /* Error Text, Container, icons */
--color-state-warning: var(--color-palette-persimmon); /* Warning Text, Container, Icons */
--color-state-success: var(--color-palette-lime-green); /* Success Text, Container, Icons */
--color-state-info: var(--color-palette-royal-blue); /* Info Text, Container, Icons */
/* == Link Colors == */
--color-text-link: var(--color-text-tertiary);
--color-text-link-hover: var(--color-secondary);
--color-text-link-visited: var(--color-palette-fuchsia);
/* == Focus States == */
--color-focus-ring: var(--color-primary);
--color-focus-ring-offset: var(--color-primary);
--color-focus-indicator: var(--color-primary-emphasis)
/* == Overlays == */;
--color-utility-overlay-light: oklch(0% 0 0deg / 10%); /* Light overlays */
--color-utility-overlay-medium: oklch(0% 0 0deg / 30%); /* Medium overlays */
--color-utility-overlay-heavy: oklch(0% 0 0deg / 60%); /* Heavy overlays, modal backdrops */
--color-surface-overlay: var(--color-utility-overlay-medium); /* Modal overlays, backdrop */
--color-surface-backdrop: var(--color-utility-overlay-heavy); /* Full screen overlays */
/* == Loading/Skeleton == */
--color-utility-skeleton-base: var(--color-surface-elevated-2); /* Skeleton loader base */
--color-utility-skeleton-shimmer: var(--color-surface-elevated-1); /* Skeleton shimmer effect */
/* == Dividers == */
--color-utility-divider: var(--color-border-subtle); /* Section dividers, HR elements */
--color-utility-divider-strong: var(--color-border-normal); /* Emphasized dividers */
/* == Shadows == */
--color-utility-shadow: oklch(0% 0 0deg / 10%); /* Drop shadows */
--color-utility-shadow-strong: oklch(0% 0 0deg / 25%); /* Strong shadows */
/* == Highlights == */
--color-utility-highlight: var(--color-tertiary-surface); /* Text highlighting, search results */
--color-utility-highlight-strong: var(--color-tertiary); /* Strong highlighting */
}

5
src/styles/variables/custom-media.css Normal file
View File

@@ -0,0 +1,5 @@
@custom-media --bp-mobile (width < 48rem);
@custom-media --bp-tablet (width >= 48rem) and (width < 80rem);
@custom-media --bp-tablet-up (width >= 48rem);
@custom-media --bp-tablet-down (width < 80rem);
@custom-media --bp-desktop (width >= 80rem);

93
src/styles/variables/dimensions.css Normal file
View File

@@ -0,0 +1,93 @@
:root {
/* === DIMENSIONS === */
/* == Base Size Units == */
--size-0: 0;
--size-px: 1px;
--size-05: 0.125rem;
--size-1: 0.25rem;
--size-2: 0.5rem;
--size-3: 0.75rem;
--size-4: 1rem;
--size-5: 1.25rem;
--size-6: 1.5rem;
--size-8: 2rem;
--size-10: 2.5rem;
--size-12: 3rem;
--size-16: 4rem;
--size-20: 5rem;
--size-24: 6rem;
--size-32: 8rem;
--size-40: 10rem;
--size-48: 12rem;
--size-64: 16rem;
--size-80: 20rem;
--size-96: 24rem;
--size-128: 32rem;
--size-160: 40rem;
--size-192: 48rem;
--size-256: 64rem;
--size-320: 80rem;
--size-384: 96rem;
--size-360: 90rem;
--size-400: 100rem;
--size-480: 120rem;
/* == Flexible Dimensions == */
--dim-full: 100%;
--dim-1-2: 50%;
--dim-1-3: 33.3333%;
--dim-2-3: 66.6667%;
--dim-1-4: 25%;
--dim-2-4: var(--dim-1-2);
--dim-3-4: 75%;
--dim-1-5: 20%;
--dim-2-5: 40%;
--dim-3-5: 60%;
--dim-4-5: 80%;
--dim-1-6: 16.6667%;
--dim-2-6: var(--dim-1-3);
--dim-3-6: var(--dim-1-2);
--dim-4-6: var(--dim-2-3);
--dim-5-6: 83.3333%;
--dim-1-8: 12.5%;
--dim-2-8: var(--dim-1-4);
--dim-3-8: 37.5%;
--dim-4-8: var(--dim-1-2);
--dim-5-8: 62.5%;
--dim-6-8: var(--dim-3-4);
--dim-7-8: 87.5%;
--dim-1-10: 10%;
--dim-2-10: var(--dim-1-5);
--dim-3-10: 30%;
--dim-4-10: var(--dim-2-5);
--dim-5-10: var(--dim-1-2);
--dim-6-10: var(--dim-3-5);
--dim-7-10: 70%;
--dim-8-10: var(--dim-4-5);
--dim-9-10: 90%;
--dim-1-12: 8.3333%;
--dim-2-12: var(--dim-1-6);
--dim-3-12: var(--dim-1-4);
--dim-4-12: var(--dim-1-3);
--dim-5-12: 41.6667%;
--dim-6-12: var(--dim-1-2);
--dim-7-12: 58.3333%;
--dim-8-12: var(--dim-2-3);
--dim-9-12: var(--dim-3-4);
--dim-10-12: 83.3333%;
--dim-11-12: 91.6667%;
/* == Semantic Spacing == */;
--spacing-none: var(--size-0);
--spacing-hairline: var(--size-px);
--spacing-tight: var(--size-1);
--spacing-snug: var(--size-2);
--spacing-cozy: var(--size-4);
--spacing-comfortable: var(--size-6);
--spacing-relaxed: var(--size-8);
--spacing-spacious: var(--size-12);
--spacing-generous: var(--size-16);
--spacing-luxurious: var(--size-24);
--spacing-expansive: var(--size-32);
}

255
src/styles/variables/elements.css Normal file
View File

@@ -0,0 +1,255 @@
:root {
/* === H1 VARIABLES === */
--el-h1-color: var(--color-text-primary);
--el-h1-font-family: var(--font-display);
--el-h1-font-size: var(--typo-size-7xl);
--el-h1-font-weight: var(--typo-weight-black);
--el-h1-letter-spacing: -0.0137em;
--el-h1-line-height: 1.125;
--el-h1-text-transform: uppercase;
--el-h1-vspace-base: calc(1em * var(--el-h1-line-height));
--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));
/* === H2 VARIABLES === */
--el-h2-color: var(--color-text-primary);
--el-h2-font-family: var(--font-heading);
--el-h2-font-size: var(--typo-size-5xl);
--el-h2-font-weight: var(--typo-weight-black);
--el-h2-letter-spacing: -0.0096em;;
--el-h2-line-height: 1.1765;
--el-h2-text-transform: uppercase;
--el-h2-vspace-base: calc(1em * var(--el-h2-line-height));
--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));
/* === H3 VARIABLES === */
--el-h3-color: var(--color-text-secondary);
--el-h3-font-family: var(--font-heading);
--el-h3-font-size: var(--typo-size-4xl);
--el-h3-font-weight: var(--typo-weight-extrabold);
--el-h3-letter-spacing: -0.004em;
--el-h3-line-height: 1.2;
--el-h3-text-transform: uppercase;
--el-h3-vspace-base: calc(1em * var(--el-h3-line-height));
--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));
/* === H4 VARIABLES === */
--el-h4-color: var(--color-text-secondary);
--el-h4-font-family: var(--font-heading);
--el-h4-font-size: var(--typo-size-3xl);
--el-h4-font-weight: var(--typo-weight-extrabold);
--el-h4-letter-spacing: 0.0025em;
--el-h4-line-height: 1.125;
--el-h4-text-transform: uppercase;
--el-h4-vspace-base: calc(1em * var(--el-h4-line-height));
--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));
/* === H5 VARIABLES === */
--el-h5-color: var(--color-text-secondary);
--el-h5-font-family: var(--font-heading);
--el-h5-font-size: var(--typo-size-2xl);
--el-h5-font-weight: var(--typo-weight-extrabold);
--el-h5-letter-spacing: 0.05em;
--el-h5-line-height: 1.28;
--el-h5-text-transform: uppercase;
--el-h5-vspace-base: calc(1em * var(--el-h5-line-height));
--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));
/* === H6 VARIABLES === */
--el-h6-color: var(--color-text-secondary);
--el-h6-font-family: var(--font-heading);
--el-h6-font-size: var(--typo-size-xl);
--el-h6-font-weight: var(--typo-weight-black);
--el-h6-letter-spacing: 0.035em;
--el-h6-line-height: 1.4;
--el-h6-text-transform: uppercase;
--el-h6-vspace-base: calc(1em * var(--el-h6-line-height));
--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));
/* === PARAGRAPH VARIABLES === */
--el-p-color: var(--color-text-primary);
--el-p-font-family: var(--font-body);
--el-p-font-size: var(--typo-size-md);
--el-p-font-weight: var(--typo-weight-regular);
--el-p-line-height: var(--typo-leading-normal);
--el-p-text-align: justify;
--el-p-vspace-base: calc(1em * var(--el-p-line-height));
--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 VARIABLES === */
--el-blockquote-color: var(--color-text-tertiary);
--el-border-color: var(--color-text-tertiary);
--el-blockquote-font-family: var(--font-body);
--el-blockquote-font-size: var(--typo-size-md);
--el-blockquote-font-style: var(--typo-weight-regular);
--el-blockquote-font-weight: var(--typo-weight-medium);
--el-blockquote-line-height: var(--typo-leading-comfortable);
--el-blockquote-vspace-base: calc(1em * var(--el-blockquote-line-height));
--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 VARIABLES === */
--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-line-height: 1.5385;
--el-pre-vspace-base: calc(1em * var(--el-pre-line-height));
--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));
/* === CODE VARIABLES === */
--el-code-color: var(--color-text-inverse);
--el-code-background: var(--color-surface-inverse);
--el-code-font-family: var(--font-mono);
--el-code-font-size: var(--typo-size-sm);
/* === List Variables (For UL/OL) === */
--el-list-color: var(--color-text-primary);
--el-list-line-height: var(--typo-leading-normal);
--el-list-font-size: var(--typo-size-md);
--el-list-vspace-base: calc(1em * var(--el-list-line-height));
--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));
/* === UL VARIABLES === */
--el-ul-indent-l1: var(--spacing-cozy);
--el-ul-indent-l2: var(--spacing-cozy);
--el-ul-indent-l3: var(--spacing-cozy);
--el-ul-indent-l4: var(--spacing-cozy);
--el-ul-item-padding: var(--spacing-cozy);
--el-ul-symbol-l1: '⯃';
--el-ul-symbol-l1-color: var(--color-text-primary);
--el-ul-symbol-l2: '⯁';
--el-ul-symbol-l2-color: var(--color-text-primary);
--el-ul-symbol-l3: '⯆';
--el-ul-symbol-l3-color: var(--color-text-primary);
--el-ul-symbol-l4: '⯀';
--el-ul-symbol-l4-color: var(--color-text-primary);
/* === OL VARIABLES === */
--el-ol-indent-l1: var(--spacing-cozy);
--el-ol-item-indent-l1: 1.5em;
--el-ol-indent-l2: var(--spacing-cozy);
--el-ol-item-indent-l2: 0.825em;
--el-ol-indent-l3: var(--spacing-cozy);
--el-ol-item-indent-l3: 0;
--el-ol-indent-l4: var(--spacing-cozy);
--el-ol-item-indent-l4: 0;
--el-ol-item-padding: var(--spacing-cozy);
--el-ol-line-height: var(--typo-leading-normal);
--el-ol-marker-color-l1: var(--color-text-primary);
--el-ol-prefix-l1: '';
--el-ol-style-l1: decimal-leading-zero;
--el-ol-suffix-l1: '.)';
--el-ol-marker-color-l2: var(--color-text-primary);
--el-ol-prefix-l2: '';
--el-ol-style-l2: lower-alpha;
--el-ol-suffix-l2: '.)';
--el-ol-marker-color-l3: var(--color-text-primary);
--el-ol-prefix-l3: '';
--el-ol-style-l3: upper-roman;
--el-ol-suffix-l3: '.)';
--el-ol-marker-color-l4: var(--color-text-primary);
--el-ol-prefix-l4: '';
--el-ol-style-l4: lower-greek;
--el-ol-suffix-l4: '.)';
/* === DL VARIABLES === */
--el-dl-font-size: var(--typo-size-md);
--el-dl-line-height: var(--typo-leading-normal);
--el-dl-vspace-base: calc(1em * var(--el-dl-line-height));
--el-dl-vspace-top: calc(var(--el-dl-vspace-base) * var(--vspace-snug));
--el-dl-vspace-bottom: calc(var(--el-dl-vspace-base) * var(--vspace-compressed));
/* === DT VARIABLES === */
--el-dt-color: var(--color-text-inverse);
--el-dt-background: var(--color-surface-inverse);
--el-dt-font-family: var(--font-heading);
--el-dt-font-size: var(--typo-size-lg);
--el-dt-font-weight: var(--typo-weight-bold);
--el-dt-line-height: 1.4;
--el-dt-text-transform: uppercase;
--el-dt-letter-spacing: 0.035em;
--el-dt-padding: var(--spacing-snug);
--el-dt-vspace-base: calc(1em * var(--el-dt-line-height));
--el-dt-vspace-top: calc(var(--el-dt-vspace-base) * var(--vspace-snug));
--el-dt-vspace-bottom: calc(var(--el-dt-vspace-base) * var(--vspace-compressed));
/* === DD VARIABLES === */
--el-dd-color: var(--color-text-primary);
--el-dd-font-family: var(--font-body);
--el-dd-font-size: var(--typo-size-md);
--el-dd-line-height: var(--typo-leading-normal);
--el-dd-indent: 0 var(--spacing-comfortable);
--el-dd-vspace-base: calc(1em * var(--el-dd-line-height));
--el-dd-vspace-top: calc(var(--el-dd-vspace-base) * var(--vspace-compressed));
--el-dd-vspace-bottom: calc(var(--el-dd-vspace-base) * var(--vspace-tight));
/* === TABLE VARIABLES === */
--el-table-font-size: var(--typo-size-sm);
--el-table-line-height: 1.2;
--el-table-border: var(--size-2) solid var(--color-text-primary);
--el-table-vspace-top: var(--spacing-tight);
--el-table-vspace-bottom: var(--spacing-tight);
/* === TH VARIABLES === */
--el-th-color: var(--color-text-inverse);
--el-th-background: var(--color-surface-inverse);
--el-th-font-family: var(--font-heading);
--el-th-font-size: var(--typo-size-sm);
--el-th-font-weight: var(--typo-weight-black);
--el-th-text-transform: uppercase;
--el-th-line-height: var(--el-table-line-height);
--el-th-padding: 0 var(--spacing-snug) var(--spacing-snug);
/* === TD VARIABLES === */
--el-td-color: var(--color-text-primary);
--el-td-font-family: var(--font-mono);
--el-td-font-size: var(--typo-size-sm);
--el-td-line-height: var(--el-table-line-height);
--el-td-padding: var(--spacing-snug);
--el-td-border: var(--size-1) solid var(--color-text-secondary);
/* === CAPTION VARIABLES === */
--el-caption-color: var(--color-text-tertiary);
--el-caption-font-family: var(--font-body);
--el-caption-font-size: var(--typo-size-sm);
--el-caption-font-style: italic;
--el-caption-text-align: center;
/* === FIGCAPTION VARIABLES === */
--el-figcaption-color: var(--color-text-tertiary);
--el-figcaption-font-family: var(--font-body);
--el-figcaption-font-size: var(--typo-size-xs);
--el-figcaption-font-style: italic;
--el-figcaption-text-align: center;
/* === SMALL VARIABLES === */
--el-small-color: var(--color-text-tertiary);
--el-small-font-family: var(--font-body);
--el-small-font-size: var(--typo-size-xs);
/* HR */
--hr-height: var(--size-3);
--hr-margin: var(--spacing-relaxed) 0;
--hr-color: var(--color-text-tertiary);
--hr-symbol-content: "▼";
--hr-symbol-size: var(--typo-size-4xl);
--hr-symbol-space: 0 0.25em;
--hr-symbol-line-height: var(--typo-leading-compressed);
--hr-symbol-color: var(--color-text-tertiary);
--hr-symbol-background: var(--color-surface-base);
}

71
src/styles/variables/typography.css Normal file
View File

@@ -0,0 +1,71 @@
:root {
/* === TYPOGRAPHY === */
/* == Font Families == */
--font-header: var(--font-geist-sans);
--font-display: var(--font-blaka);
--font-body: var(--font-iosevka-slab);
--font-mono: var(--font-iosevka-mono);
/* == Font Sizes == */
--typo-size-responsive: clamp(1rem, 2.5vw, 1.25rem);
--typo-size-base: 16px;
--typo-size-8xl: 8em;
--typo-size-7xl: 6.375em;
--typo-size-6xl: 5.0625em;
--typo-size-5xl: 4em;
--typo-size-4xl: 3.1875em;
--typo-size-3xl: 2.5em;
--typo-size-2xl: 2em;
--typo-size-xl: 1.5625em;
--typo-size-lg: 1.25em;
--typo-size-md: 1em;
--typo-size-sm: 0.8125em;
--typo-size-xs: 0.625em;
--typo-size-2xs: 0.5em;
/* == Font Weights == */
--typo-weight-thin: 100;
--typo-weight-extralight: 200;
--typo-weight-light: 300;
--typo-weight-normal: 400;
--typo-weight-medium: 500;
--typo-weight-semibold: 600;
--typo-weight-bold: 700;
--typo-weight-extrabold: 800;
--typo-weight-black: 900;
/* == Letter Spacing == */
--typo-spacing-tightest: -0.05em;
--typo-spacing-tighter: -0.025em;
--typo-spacing-tight: -0.0125em;
--typo-spacing-normal: 0em;
--typo-spacing-relaxed: 0.025em;
--typo-spacing-comfortable: 0.05em;
--typo-spacing-loose: 0.1em;
--typo-spacing-looser: 0.15em;
--typo-spacing-loosest: 0.2em;
/* == Line Height == */
--typo-leading-compressed: 1.0;
--typo-leading-tight: 1.125;
--typo-leading-snug: 1.25;
--typo-leading-cozy: 1.375;
--typo-leading-normal: 1.5;
--typo-leading-relaxed: 1.625;
--typo-leading-comfortable: 1.75;
--typo-leading-loose: 1.875;
--typo-leading-spacious: 2.0;
/* == Vertical Spacing == */
--vspace-compressed: 0.25;
--vspace-tight: 0.5;
--vspace-snug: 0.75;
--vspace-cozy: 1;
--vspace-normal: 1.25;
--vspace-relaxed: 1.5;
--vspace-comfortable: 1.75;
--vspace-loose: 2;
--vspace-spacious: 2.5;
}