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

13
src/styles/base.css Normal file
View File

@@ -0,0 +1,13 @@
html {
font-size: var(--font-size-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-geist-sans);
font-weight: var(--typo-weight-normal);
color: var(--color-text-primary);
background-color: var(--color-surface-base);
}

370
src/styles/foundation.css vendored Normal file
View File

@@ -0,0 +1,370 @@
/*
Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-style: solid; /* 2 */
border-width: 0; /* 2 */
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the system's `sans` font-family by default.
*/
html {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
line-height: 1.5; /* 1 */
text-size-adjust: 100%; /* 2 */
tab-size: 4; /* 3 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
border-top-width: 1px; /* 3 */
color: inherit; /* 2 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the system's `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; /* 1 */
font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
border-collapse: collapse; /* 3 */
border-color: inherit; /* 2 */
text-indent: 0; /* 1 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 2 */
padding: 0; /* 3 */
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
appearance: auto; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"] {
appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
font: inherit; /* 2 */
appearance: auto; /* 1 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
margin: 0;
padding: 0;
list-style: none;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/*
Make elements with the HTML hidden attribute stay hidden by default.
*/
[hidden] {
display: none;
}

7
src/styles/mixins/containers.css Normal file
View File

@@ -0,0 +1,7 @@
@define-mixin responsive-wrapper $vspacing: 0 $hspacing: var(--spacing-comfortable) {
@mixin mx auto;
max-width: clamp(60ch, 90vw, 90ch);
padding: $vspacing $hspacing;
font-size: var(--typo-size-responsive);
}

20
src/styles/mixins/grids.css Normal file
View File

@@ -0,0 +1,20 @@
@define-mixin grid-col $col $spacing {
display: grid;
grid-template-columns: repeat($col, minmax(0, 1fr));
gap: $spacing;
}
@define-mixin grid-rows $row $spacing {
display: grid;
grid-template-rows: repeat(1, minmax(0, 1fr));
gap: $spacing;
}
@define-mixin grid-col-span $span {
grid-column: span $span / span $span;
}
@define-mixin grid-row-span $span {
grid-row: span $span / span $span;
}

86
src/styles/mixins/spacing.css Normal file
View File

@@ -0,0 +1,86 @@
@∂efine-mixin m $spacing {
margin: $spacing;
}
@∂efine-mixin mt $spacing {
margin-top: $spacing;
}
@∂efine-mixin mb $spacing {
margin-bottom: $spacing;
}
@define-mixin ml $spacing {
margin-left: $spacing;
}
@define-mixin mr $spacing {
margin-right: $spacing;
}
@define-mixin my $spacing {
margin-block: $spacing;
}
@define-mixin mx $spacing {
margin-inline: $spacing;
}
@define-mixin ms $spacing {
margin-line-start: $spacing;
}
@define-mixin me $spacing {
margin-line-end: $spacing;
}
@define-mixin space-x $spacing $reverse: 0 {
& > :not(:last-child) {
margin-inline-start: calc($spacing * $reverse);
margin-inline-end: calc($spacing * (1 - $reverse));
}
}
@∂efine-mixin p $spacing {
padding: $spacing;
}
@∂efine-mixin pt $spacing {
padding-top: $spacing;
}
@∂efine-mixin pb $spacing {
padding-bottom: $spacing;
}
@define-mixin pl $spacing {
padding-left: $spacing;
}
@define-mixin pr $spacing {
padding-right: $spacing;
}
@define-mixin py $spacing {
padding-block: $spacing;
}
@define-mixin px $spacing {
padding-inline: $spacing;
}
@define-mixin ps $spacing {
padding-line-start: $spacing;
}
@define-mixin pe $spacing {
padding-line-end: $spacing;
}
@define-mixin space-y $spacing $reverse: 0 {
& > :not(:last-child) {
margin-block-start: calc($spacing * $reverse);
margin-block-end: calc($spacing * (1 - $reverse));
}
}

78
src/styles/mixins/typography.css Normal file
View File

@@ -0,0 +1,78 @@
@define-mixin text-8xl $leading: 1 {
font-size: var(--typo-size-8xl);
line-height: calc($leading * 1.0435);
letter-spacing: -0.0219em;
}
@define-mixin text-7xl $leading: 1 {
font-size: var(--typo-size-7xl);
line-height: calc($leading * 1.098);
letter-spacing: -0.0198em;
}
@define-mixin text-6xl $leading: 1 {
font-size: var(--typo-size-6xl);
line-height: calc($leading * 1.0864);
letter-spacing: -0.0172em;
}
@define-mixin text-5xl $leading:1 {
font-size: var(--typo-size-5xl);
line-height: calc($leading * 1.125);
letter-spacing: -0.0137em;
}
@define-mixin text-4xl $leading:1 {
font-size: var(--typo-size-4xl);
line-height: calc($leading * 1.1765);
letter-spacing: -0.0096em;
}
@define-mixin text-3xl $leading:1 {
font-size: var(--typo-size-3xl);
line-height: calc($leading * 1.2);
letter-spacing: -0.004em;
}
@define-mixin text-2xl $leading:1 {
font-size: var(--typo-size-2xl);
line-height: calc($leading * 1.25);
letter-spacing: 0.0025em;
}
@define-mixin text-xl {
font-size: var(--typo-size-xl);
line-height: calc($leading * 1.28);
letter-spacing: 0.0116em;
}
@define-mixin text-lg {
font-size: var(--typo-size-lg);
line-height: calc($leading * 1.4);
letter-spacing: 0.022em;
}
@define-mixin text-md {
font-size: var(--typo-size-md);
line-height: calc($leading * 1.5);
letter-spacing: 0.035em;
}
@define-mixin text-sm {
font-size: var(--typo-size-sm);
line-height: calc($leading * 1.5385);
letter-spacing: 0.05em;
}
@define-mixin text-xs {
font-size: var(--typo-size-xs);
line-height: calc($leading * 2);
letter-spacing: 0.074em;
}
@define-mixin text-2xs {
font-size: var(--typo-size-2xs);
line-height: calc($leading * 2);
letter-spacing: 0.1em;
}

0
src/styles/utilities.css Normal file
View File

5
src/styles/variables.css Normal file
View File

@@ -0,0 +1,5 @@
@import url('./variables/custom-media.css');
@import url('./variables/typography.css');
@import url('./variables/colors.css');
@import url('./variables/dimensions.css');
@import url('./variables/elements.css');

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;
}