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

Refactored primitives & content.css

Browse Source
This commit is contained in:
Dave
2026-03-03 13:58:20 +01:00
parent b8544011d4
commit ea0f471fd3
26 changed files with 1357 additions and 1310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/styles/mixins/borders.css
View File

@@ -53,3 +53,8 @@
@define-mixin circle {
border-radius: 50%;
}
@define-mixin focus-ring $width: 2px, $color: var(--color-focus-ring), $offset: 2px {
outline: $width solid $color;
outline-offset: $offset;
}

112
src/styles/mixins/colors.css Normal file
View File

@@ -0,0 +1,112 @@
:root {
/* == Neutrals == */
--color-palette-black-ink: oklch(21.9% 0.006 285.911deg);
--color-palette-charcoal: oklch(26.6% 0.008 240.166deg);
--color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg);
--color-palette-carbon: oklch(39.8% 0 89.876deg);
--color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg);
--color-palette-stone: oklch(64.3% 0.005 91.471deg);
--color-palette-silver: oklch(72.9% 0.001 17.185deg);
--color-palette-light-silver: oklch(82.6% 0.002 247.844deg);
--color-palette-pale-gray: oklch(91.3% 0.004 91.449deg);
--color-palette-very-pale-gray: oklch(94.3% 0 89.876deg);
--color-palette-off-white: oklch(98.1% 0.003 247.858deg);
--color-palette-ice-blue: oklch(99.9% 0.001 197.139deg);
/* == Accents == */
--color-palette-lava: oklch(63.6% 0.193 17.075deg);
--color-palette-cerise: oklch(60.7% 0.23 18.554deg);
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
--color-palette-bright-canary: oklch(89% 0.157 97.726deg);
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
--color-palette-electric-blue: oklch(90.8% 0.128 188.419deg);
/* === Semantic Colors === */
/* == Primary / Secondary / Tertiary == */
--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);
--color-secondary: var(--color-palette-lime-green);
--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
);
--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 == */
--color-text-primary: var(--color-palette-black-ink);
--color-text-secondary: var(--color-palette-charcoal);
--color-text-tertiary: var(--color-palette-charcoal-gray);
--color-text-quarternary: var(--color-palette-carbon);
--color-text-inverse: var(--color-palette-ice-blue);
--color-text-disabled: var(--color-palette-cloud-gray);
/* == Surfaces == */
--color-surface-base: var(--color-palette-ice-blue);
--color-surface-elevated-1: var(--color-palette-off-white);
--color-surface-elevated-2: var(--color-palette-very-pale-gray);
--color-surface-elevated-3: var(--color-palette-pale-gray);
--color-surface-elevated-4: var(--color-palette-light-silver);
--color-surface-inverse: var(--color-palette-black-ink);
/* == Borders == */
--color-border-subtle: var(--color-palette-silver);
--color-border-normal: var(--color-palette-stone);
--color-border-strong: var(--color-palette-charcoal-gray);
/* == States == */
--color-state-error: var(--color-palette-cerise);
--color-state-warning: var(--color-palette-persimmon);
--color-state-success: var(--color-palette-lime-green);
--color-state-info: var(--color-palette-royal-blue);
/* == Links == */
--color-text-link: var(--color-text-tertiary);
--color-text-link-hover: var(--color-secondary);
--color-text-link-visited: var(--color-palette-fuchsia);
/* == Focus == */
--color-focus-ring: var(--color-primary);
/* == Overlays == */
--color-overlay-light: oklch(0% 0 0deg / 10%);
--color-overlay-medium: oklch(0% 0 0deg / 30%);
--color-overlay-heavy: oklch(0% 0 0deg / 60%);
/* == Shadows == */
--color-shadow: oklch(0% 0 0deg / 10%);
--color-shadow-strong: oklch(0% 0 0deg / 25%);
/* == Utility == */
--color-highlight: var(--color-tertiary-surface);
--color-highlight-strong: var(--color-tertiary);
--color-skeleton-base: var(--color-surface-elevated-2);
--color-skeleton-shimmer: var(--color-surface-elevated-1);
}
.dark {
--color-text-primary: var(--color-palette-ice-blue);
--color-text-secondary: var(--color-palette-pale-gray);
--color-text-tertiary: var(--color-palette-light-silver);
--color-text-quarternary: var(--color-palette-silver);
--color-text-inverse: var(--color-palette-black-ink);
--color-text-disabled: var(--color-palette-cloud-gray);
--color-surface-base: var(--color-palette-black-ink);
--color-surface-elevated-1: var(--color-palette-charcoal);
--color-surface-elevated-2: var(--color-palette-charcoal-gray);
--color-surface-elevated-3: var(--color-palette-carbon);
--color-surface-elevated-4: var(--color-palette-cloud-gray);
--color-surface-inverse: var(--color-palette-ice-blue);
--color-border-subtle: var(--color-palette-charcoal-gray);
--color-border-normal: var(--color-palette-carbon);
--color-border-strong: var(--color-palette-silver);
}

26
src/styles/mixins/containers.css
View File

@@ -1,26 +0,0 @@
@define-mixin responsive-wrapper $vspacing: 0, $hspacing: var(--spacing-cozy),
$fontSize: var(--typo-size-responsive) {
@mixin mx auto;
max-width: clamp(60ch, 90vw, 90ch);
padding: $vspacing $hspacing;
font-family: var(--font-body);
font-size: $fontSize;
}
@define-mixin layout-wrapper {
@mixin mx auto;
@mixin px var(--spacing-comfortable);
width: 100%;
max-width: var(--ui-layout-width);
@media screen and (--max-layout) {
@mixin px var(--spacing-comfortable);
}
}
@define-mixin position $position: absolute, $inset-values {
position: $position;
inset: $inset-values;
}

16
src/styles/mixins/helpers.css Normal file
View File

@@ -0,0 +1,16 @@
@define-mixin layout-wrapper {
@mixin mx auto;
@mixin px var(--layout-page-margin);
width: 100%;
max-width: var(--layout-max-width);
@media screen and (--bp-desktop) {
@mixin px var(--scape-0);
}
}
@define-mixin position $position: absolute, $inset-values {
position: $position;
inset: $inset-values;
}

227
src/styles/mixins/typography.css
View File

@@ -1,73 +1,198 @@
@define-mixin heading-1 {
@mixin mt var(--el-h1-vspace-top);
@mixin mb var(--el-h1-vspace-bottom);
@mixin pb var(--spacing-snug);
font-family: var(--el-h1-font-family);
font-size: var(--el-h1-font-size);
@define-mixin typo_display-1 {
font-family: var(--font-display);
font-size: var(--type-10);
font-weight: 400;
line-height: var(--el-h1-leading);
color: var(--el-h1-color);
text-transform: uppercase;
letter-spacing: -0.0137em;
line-height: var(--leading-10);
text-transform: none;
letter-spacing: var(--tracking-10);
}
@define-mixin heading-2 {
@mixin mt var(--el-h2-vspace-top);
@mixin mb var(--el-h2-vspace-bottom);
@define-mixin typo_display-2 {
font-family: var(--font-display);
font-size: var(--type-9);
font-weight: 400;
line-height: var(--leading-9);
text-transform: none;
letter-spacing: var(--tracking-9);
}
font-family: var(--el-h2-font-family);
font-size: var(--el-h2-font-size);
@define-mixin typo_heading-1 {
font-family: var(--font-header);
font-size: var(--type-8);
font-weight: 900;
line-height: var(--el-h2-leading);
line-height: var(--leading-8);
text-transform: uppercase;
letter-spacing: -0.0096em;
letter-spacing: var(--tracking-8);
}
@define-mixin heading-3 {
@mixin mt var(--el-h3-vspace-top);
@mixin mb var(--el-h3-vspace-bottom);
font-family: var(--el-h3-font-family);
font-size: var(--el-h3-font-size);
@define-mixin typo_heading-2 {
font-family: var(--font-header);
font-size: var(--type-7);
font-weight: 800;
line-height: var(--el-h3-leading);
line-height: var(--leading-7);
text-transform: uppercase;
letter-spacing: -0.004em;
letter-spacing: var(--tracking-7);
}
@define-mixin heading-4 {
@mixin mt var(--el-h4-vspace-top);
@mixin mb var(--el-h4-vspace-bottom);
font-family: var(--el-h4-font-family);
font-size: var(--el-h4-font-size);
@define-mixin typo_heading-3 {
font-family: var(--font-header);
font-size: var(--type-6);
font-weight: 800;
line-height: var(--el-h4-leading);
line-height: var(--leading-6);
text-transform: uppercase;
letter-spacing: 0.0025em;
letter-spacing: var(--tracking-6);
}
@define-mixin heading-5 {
@mixin mt var(--el-h5-vspace-top);
@mixin mb var(--el-h5-vspace-bottom);
font-family: var(--el-h5-font-family);
font-size: var(--el-h5-font-size);
@define-mixin typo_heading-4 {
font-family: var(--font-header);
font-size: var(--type-5);
font-weight: 800;
line-height: var(--el-h5-leading);
line-height: var(--leading-5);
text-transform: uppercase;
letter-spacing: 0.05em;
letter-spacing: var(--tracking-5);
}
@define-mixin heading-6 {
@mixin mt var(--el-h6-vspace-top);
@mixin mb var(--el-h6-vspace-bottom);
font-family: var(--el-h6-font-family);
font-size: var(--el-h6-font-size);
font-weight: 900;
line-height: var(--el-h6-leading);
@define-mixin typo_heading-5 {
font-family: var(--font-header);
font-size: var(--type-4);
font-weight: 700;
line-height: var(--leading-4);
text-transform: uppercase;
letter-spacing: 0.035em;
letter-spacing: var(--tracking-4);
}
@define-mixin typo_heading-6 {
font-family: var(--font-header);
font-size: var(--type-3);
font-weight: 700;
line-height: var(--leading-3);
text-transform: uppercase;
letter-spacing: var(--tracking-3);
}
@define-mixin typo_body-large {
font-family: var(--font-body);
font-size: var(--type-2);
font-weight: 400;
line-height: var(--leading-2);
text-transform: none;
letter-spacing: var(--tracking-2);
}
@define-mixin typo_body-alt {
font-family: var(--font-body);
font-size: var(--type-1);
font-weight: 400;
line-height: var(--leading-1);
text-transform: none;
letter-spacing: var(--tracking-1);
}
@define-mixin typo_body {
font-family: var(--font-body);
font-size: var(--type-0);
font-weight: 400;
line-height: var(--leading-0);
text-transform: none;
letter-spacing: var(--tracking-0);
}
@define-mixin typo_body-small {
font-family: var(--font-body);
font-size: var(--type--1);
font-weight: 400;
line-height: var(--leading--1);
text-transform: none;
letter-spacing: var(--tracking--1);
}
@define-mixin typo_label {
font-family: var(--font-header);
font-size: var(--type--2);
font-weight: 700;
line-height: var(--leading--2);
text-transform: none;
letter-spacing: var(--tracking--2);
}
@define-mixin typo_fine {
font-family: var(--font-body);
font-size: var(--type--3);
font-weight: 400;
line-height: var(--leading--3);
text-transform: none;
letter-spacing: var(--tracking--3);
}
@define-mixin typo_code {
font-family: var(--font-mono);
font-size: var(--type--1);
font-weight: 400;
line-height: var(--leading--1);
text-transform: none;
letter-spacing: var(--tracking-0);
}
@define-mixin typo_table-header {
font-family: var(--font-header);
font-size: var(--type--1);
font-weight: 700;
line-height: var(--leading-0);
text-transform: uppercase;
letter-spacing: var(--tracking-0);
}
@define-mixin typo_table-data {
font-family: var(--font-mono);
font-size: var(--type--1);
font-weight: 400;
line-height: var(--leading--1);
text-transform: none;
letter-spacing: var(--tracking-0);
}
@define-mixin typo_definition-header {
font-family: var(--font-header);
font-size: var(--type--0);
font-weight: 700;
line-height: var(--leading-0);
text-transform: uppercase;
letter-spacing: var(--tracking-0);
}
@define-mixin typo_definition-data {
font-family: var(--font-mono);
font-size: var(--type--1);
font-weight: 400;
line-height: var(--leading--1);
text-transform: none;
letter-spacing: var(--tracking-0);
}
@define-mixin typo_subtitle {
font-family: var(--font-header);
font-size: var(--type-0);
font-weight: 300;
line-height: var(--leading-0);
text-transform: uppercase;
letter-spacing: 0.0875em;
}
@define-mixin typo_meta-label {
font-family: var(--font-header);
font-size: var(--type--2);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--size-1);
leading: var(--leading--3);
}
@define-mixin typo_meta-data {
font-family: var(--font-mono);
font-size: var(--type-0);
text-transform: uppercase;
letter-spacing: var(--size--3);
leading: var(--leading-0);
}