From 1a44092232713ef2063815bb03aadbb543e88ff6 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 12 Jan 2023 17:46:05 +0100 Subject: Improved heading structure --- src/_declare-vars.scss | 15 +++++++++- src/_mixins.scss | 35 +++++++++++++++++++++-- src/objects/_heading.scss | 67 ++++++++++++++----------------------------- src/scopes/_headings.scss | 73 +++++++++++++++++++---------------------------- 4 files changed, 99 insertions(+), 91 deletions(-) (limited to 'src') diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 4a93dba..a36b17a 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -60,7 +60,7 @@ ), --headline: ( --family: ('Garet', fn.dim(--font --standard --family, null)), - --line-height: 1.2, + --line-height: 1.3, --weight: 700, --feature-settings: '\'ss02\'' 1, ), @@ -104,6 +104,19 @@ --heading: ( --margin-top: fn.dim(--size --700, null), --margin-top-sibling: fn.dim(--size --325, null), + + --lg: fn.dim(--font-size --400, null), + --md: fn.dim(--font-size --75, null), + --sm: fn.dim(--font-size --50, null), + + --display: ( + --xxl: fn.dim(--font-size --900, null), + --xl: fn.dim(--font-size --600, null), + --lg: fn.dim(--font-size --300, null), + --md: fn.dim(--font-size --150, null), + --sm: fn.dim(--font-size --75, null), + --xs: fn.dim(--font-size --50, null), + ) ), --list: ( diff --git a/src/_mixins.scss b/src/_mixins.scss index e8595f1..506b8ee 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -1,7 +1,7 @@ -@use 'functions'; +@use 'functions' as fn; @mixin set-font($basis, $values: ()) { - $values: functions.set-font($basis, $values); + $values: fn.set-font($basis, $values); @each $prop, $value in $values { @if $value != null { @@ -9,3 +9,34 @@ } } } + +@mixin heading-strong($size) { + color: fn.foreign-color(--heading, --strong); + font-size: $size; +} + +@mixin heading-medium($size) { + @include set-font(--standard, ( + --line-height: null, + --size: $size, + --weight: bold, + --transform: uppercase, + --spacing: 1px + )); + + transform: none; + color: fn.foreign-color(--heading, --strong); +} + +@mixin heading-faint($size) { + @include set-font(--standard, ( + --line-height: null, + --size: $size, + --weight: 500, + --transform: uppercase, + --spacing: 1px + )); + + transform: none; + color: fn.foreign-color(--heading, --light); +} diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 56d4987..b6ae3a4 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -26,65 +26,42 @@ } @include iro.bem-modifier('xxl') { - color: fn.color(--strong); - font-size: fn.global-dim(--font-size --400); + @include mx.heading-strong(fn.global-dim(--heading --lg)); } @include iro.bem-modifier('xl') { - color: fn.color(--strong); - font-size: fn.global-dim(--font-size --300); + @include mx.heading-medium(fn.global-dim(--heading --md)); } - @include iro.bem-modifier('lg') { - color: fn.color(--strong); - font-size: fn.global-dim(--font-size --200); - } - - @include iro.bem-modifier('md') { - color: fn.color(--strong); - font-size: fn.global-dim(--font-size --150); - } - - @include iro.bem-modifier('sm') { - @include mx.set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(--font-size --75), - --weight: bold, - --transform: uppercase, - --spacing: 1px - )); - - transform: none; - color: fn.color(--strong); - } - - @include iro.bem-modifier('xs') { - @include mx.set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(--font-size --50), - --weight: 500, - --transform: uppercase, - --spacing: 1px - )); - - transform: none; - color: fn.color(--light); + @include iro.bem-modifier('lg', 'md', 'sm', 'xs') { + @include mx.heading-faint(fn.global-dim(--heading --sm)); } @include iro.bem-modifier('display') { + @include mx.set-font(--headline); + @include iro.bem-modifier('xxl') { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --900); + @include mx.heading-strong(fn.global-dim(--heading --display --xxl)); } @include iro.bem-modifier('xl') { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --600); + @include mx.heading-strong(fn.global-dim(--heading --display --xl)); + } + + @include iro.bem-modifier('lg') { + @include mx.heading-strong(fn.global-dim(--heading --display --lg)); + } + + @include iro.bem-modifier('md') { + @include mx.heading-strong(fn.global-dim(--heading --display --md)); + } + + @include iro.bem-modifier('sm') { + @include mx.heading-medium(fn.global-dim(--heading --display --sm)); } - @include iro.bem-modifier('l') { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --300); + @include iro.bem-modifier('xs') { + @include mx.heading-faint(fn.global-dim(--heading --display --xs)); } } } diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index fc4991a..5b05b45 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -20,65 +20,52 @@ h1 { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --400); + @include mx.heading-strong(fn.global-dim(--heading --lg)); } h2 { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --300); - } - - h3 { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --200); - } - - h4 { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --150); - } - - h5 { - @include mx.set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(--font-size --75), - --weight: bold, - --transform: uppercase, - --spacing: 1px - )); - - transform: none; - color: fn.foreign-color(--heading, --strong); + @include mx.heading-medium(fn.global-dim(--heading --md)); } + h3, + h4, + h5, h6 { - @include mx.set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(--font-size --50), - --weight: 500, - --transform: uppercase, - --spacing: 1px - )); - - transform: none; - color: fn.foreign-color(--heading, --light); + @include mx.heading-faint(fn.global-dim(--heading --sm)); } @include iro.bem-modifier('display') { + h1, + h2, + h3, + h4, + h5, + h6 { + @include mx.set-font(--headline); + } + h1 { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --900); + @include mx.heading-strong(fn.global-dim(--heading --display --xxl)); } h2 { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --600); + @include mx.heading-strong(fn.global-dim(--heading --display --xl)); } h3 { - color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --300); + @include mx.heading-strong(fn.global-dim(--heading --display --lg)); + } + + h4 { + @include mx.heading-strong(fn.global-dim(--heading --display --md)); + } + + h5 { + @include mx.heading-medium(fn.global-dim(--heading --display --sm)); + } + + h6 { + @include mx.heading-faint(fn.global-dim(--heading --display --xs)); } } } -- cgit v1.2.3-54-g00ecf