summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-01-12 17:46:05 +0100
committerVolpeon <git@volpeon.ink>2023-01-12 17:46:05 +0100
commit1a44092232713ef2063815bb03aadbb543e88ff6 (patch)
tree1c6fd540a808ed6054579202c8db246b855d6347
parentUpdate (diff)
downloadiro-design-1a44092232713ef2063815bb03aadbb543e88ff6.tar.gz
iro-design-1a44092232713ef2063815bb03aadbb543e88ff6.tar.bz2
iro-design-1a44092232713ef2063815bb03aadbb543e88ff6.zip
Improved heading structure
Diffstat
-rw-r--r--src/_declare-vars.scss15
-rw-r--r--src/_mixins.scss35
-rw-r--r--src/objects/_heading.scss67
-rw-r--r--src/scopes/_headings.scss73
4 files changed, 99 insertions, 91 deletions
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 @@
60 ), 60 ),
61 --headline: ( 61 --headline: (
62 --family: ('Garet', fn.dim(--font --standard --family, null)), 62 --family: ('Garet', fn.dim(--font --standard --family, null)),
63 --line-height: 1.2, 63 --line-height: 1.3,
64 --weight: 700, 64 --weight: 700,
65 --feature-settings: '\'ss02\'' 1, 65 --feature-settings: '\'ss02\'' 1,
66 ), 66 ),
@@ -104,6 +104,19 @@
104 --heading: ( 104 --heading: (
105 --margin-top: fn.dim(--size --700, null), 105 --margin-top: fn.dim(--size --700, null),
106 --margin-top-sibling: fn.dim(--size --325, null), 106 --margin-top-sibling: fn.dim(--size --325, null),
107
108 --lg: fn.dim(--font-size --400, null),
109 --md: fn.dim(--font-size --75, null),
110 --sm: fn.dim(--font-size --50, null),
111
112 --display: (
113 --xxl: fn.dim(--font-size --900, null),
114 --xl: fn.dim(--font-size --600, null),
115 --lg: fn.dim(--font-size --300, null),
116 --md: fn.dim(--font-size --150, null),
117 --sm: fn.dim(--font-size --75, null),
118 --xs: fn.dim(--font-size --50, null),
119 )
107 ), 120 ),
108 121
109 --list: ( 122 --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 @@
1@use 'functions'; 1@use 'functions' as fn;
2 2
3@mixin set-font($basis, $values: ()) { 3@mixin set-font($basis, $values: ()) {
4 $values: functions.set-font($basis, $values); 4 $values: fn.set-font($basis, $values);
5 5
6 @each $prop, $value in $values { 6 @each $prop, $value in $values {
7 @if $value != null { 7 @if $value != null {
@@ -9,3 +9,34 @@
9 } 9 }
10 } 10 }
11} 11}
12
13@mixin heading-strong($size) {
14 color: fn.foreign-color(--heading, --strong);
15 font-size: $size;
16}
17
18@mixin heading-medium($size) {
19 @include set-font(--standard, (
20 --line-height: null,
21 --size: $size,
22 --weight: bold,
23 --transform: uppercase,
24 --spacing: 1px
25 ));
26
27 transform: none;
28 color: fn.foreign-color(--heading, --strong);
29}
30
31@mixin heading-faint($size) {
32 @include set-font(--standard, (
33 --line-height: null,
34 --size: $size,
35 --weight: 500,
36 --transform: uppercase,
37 --spacing: 1px
38 ));
39
40 transform: none;
41 color: fn.foreign-color(--heading, --light);
42}
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 @@
26 } 26 }
27 27
28 @include iro.bem-modifier('xxl') { 28 @include iro.bem-modifier('xxl') {
29 color: fn.color(--strong); 29 @include mx.heading-strong(fn.global-dim(--heading --lg));
30 font-size: fn.global-dim(--font-size --400);
31 } 30 }
32 31
33 @include iro.bem-modifier('xl') { 32 @include iro.bem-modifier('xl') {
34 color: fn.color(--strong); 33 @include mx.heading-medium(fn.global-dim(--heading --md));
35 font-size: fn.global-dim(--font-size --300);
36 } 34 }
37 35
38 @include iro.bem-modifier('lg') { 36 @include iro.bem-modifier('lg', 'md', 'sm', 'xs') {
39 color: fn.color(--strong); 37 @include mx.heading-faint(fn.global-dim(--heading --sm));
40 font-size: fn.global-dim(--font-size --200);
41 }
42
43 @include iro.bem-modifier('md') {
44 color: fn.color(--strong);
45 font-size: fn.global-dim(--font-size --150);
46 }
47
48 @include iro.bem-modifier('sm') {
49 @include mx.set-font(--standard, (
50 --line-height: null,
51 --size: fn.global-dim(--font-size --75),
52 --weight: bold,
53 --transform: uppercase,
54 --spacing: 1px
55 ));
56
57 transform: none;
58 color: fn.color(--strong);
59 }
60
61 @include iro.bem-modifier('xs') {
62 @include mx.set-font(--standard, (
63 --line-height: null,
64 --size: fn.global-dim(--font-size --50),
65 --weight: 500,
66 --transform: uppercase,
67 --spacing: 1px
68 ));
69
70 transform: none;
71 color: fn.color(--light);
72 } 38 }
73 39
74 @include iro.bem-modifier('display') { 40 @include iro.bem-modifier('display') {
41 @include mx.set-font(--headline);
42
75 @include iro.bem-modifier('xxl') { 43 @include iro.bem-modifier('xxl') {
76 color: fn.foreign-color(--heading, --strong); 44 @include mx.heading-strong(fn.global-dim(--heading --display --xxl));
77 font-size: fn.global-dim(--font-size --900);
78 } 45 }
79 46
80 @include iro.bem-modifier('xl') { 47 @include iro.bem-modifier('xl') {
81 color: fn.foreign-color(--heading, --strong); 48 @include mx.heading-strong(fn.global-dim(--heading --display --xl));
82 font-size: fn.global-dim(--font-size --600); 49 }
50
51 @include iro.bem-modifier('lg') {
52 @include mx.heading-strong(fn.global-dim(--heading --display --lg));
53 }
54
55 @include iro.bem-modifier('md') {
56 @include mx.heading-strong(fn.global-dim(--heading --display --md));
57 }
58
59 @include iro.bem-modifier('sm') {
60 @include mx.heading-medium(fn.global-dim(--heading --display --sm));
83 } 61 }
84 62
85 @include iro.bem-modifier('l') { 63 @include iro.bem-modifier('xs') {
86 color: fn.foreign-color(--heading, --strong); 64 @include mx.heading-faint(fn.global-dim(--heading --display --xs));
87 font-size: fn.global-dim(--font-size --300);
88 } 65 }
89 } 66 }
90 } 67 }
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 @@
20 20
21 21
22 h1 { 22 h1 {
23 color: fn.foreign-color(--heading, --strong); 23 @include mx.heading-strong(fn.global-dim(--heading --lg));
24 font-size: fn.global-dim(--font-size --400);
25 } 24 }
26 25
27 h2 { 26 h2 {
28 color: fn.foreign-color(--heading, --strong); 27 @include mx.heading-medium(fn.global-dim(--heading --md));
29 font-size: fn.global-dim(--font-size --300);
30 }
31
32 h3 {
33 color: fn.foreign-color(--heading, --strong);
34 font-size: fn.global-dim(--font-size --200);
35 }
36
37 h4 {
38 color: fn.foreign-color(--heading, --strong);
39 font-size: fn.global-dim(--font-size --150);
40 }
41
42 h5 {
43 @include mx.set-font(--standard, (
44 --line-height: null,
45 --size: fn.global-dim(--font-size --75),
46 --weight: bold,
47 --transform: uppercase,
48 --spacing: 1px
49 ));
50
51 transform: none;
52 color: fn.foreign-color(--heading, --strong);
53 } 28 }
54 29
30 h3,
31 h4,
32 h5,
55 h6 { 33 h6 {
56 @include mx.set-font(--standard, ( 34 @include mx.heading-faint(fn.global-dim(--heading --sm));
57 --line-height: null,
58 --size: fn.global-dim(--font-size --50),
59 --weight: 500,
60 --transform: uppercase,
61 --spacing: 1px
62 ));
63
64 transform: none;
65 color: fn.foreign-color(--heading, --light);
66 } 35 }
67 36
68 @include iro.bem-modifier('display') { 37 @include iro.bem-modifier('display') {
38 h1,
39 h2,
40 h3,
41 h4,
42 h5,
43 h6 {
44 @include mx.set-font(--headline);
45 }
46
69 h1 { 47 h1 {
70 color: fn.foreign-color(--heading, --strong); 48 @include mx.heading-strong(fn.global-dim(--heading --display --xxl));
71 font-size: fn.global-dim(--font-size --900);
72 } 49 }
73 50
74 h2 { 51 h2 {
75 color: fn.foreign-color(--heading, --strong); 52 @include mx.heading-strong(fn.global-dim(--heading --display --xl));
76 font-size: fn.global-dim(--font-size --600);
77 } 53 }
78 54
79 h3 { 55 h3 {
80 color: fn.foreign-color(--heading, --strong); 56 @include mx.heading-strong(fn.global-dim(--heading --display --lg));
81 font-size: fn.global-dim(--font-size --300); 57 }
58
59 h4 {
60 @include mx.heading-strong(fn.global-dim(--heading --display --md));
61 }
62
63 h5 {
64 @include mx.heading-medium(fn.global-dim(--heading --display --sm));
65 }
66
67 h6 {
68 @include mx.heading-faint(fn.global-dim(--heading --display --xs));
82 } 69 }
83 } 70 }
84 } 71 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 06:36:12 +0000