summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_headings.scss130
-rw-r--r--src/scopes/_headings.vars.scss0
-rw-r--r--src/scopes/_implicit.scss20
-rw-r--r--src/scopes/_implicit.vars.scss11
4 files changed, 62 insertions, 99 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index b4a16bd..2bf7b08 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,10 +1,19 @@
1@use 'include-media/dist/include-media' as media; 1@use 'sass:map';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
3@use '../mixins' as mx;
4@use '../props'; 3@use '../props';
5@use '../core.vars' as core; 4@use '../objects/heading.vars' as headings;
6 5
7@mixin styles { 6@mixin styles {
7 /* stylelint-disable-next-line scss/dollar-variable-pattern */
8 $-size-map: (
9 xs: h6,
10 sm: h5,
11 md: h4,
12 lg: h3,
13 xl: h2,
14 xxl: h1,
15 );
16
8 @include iro.bem-scope('headings') { 17 @include iro.bem-scope('headings') {
9 h1, 18 h1,
10 h2, 19 h2,
@@ -12,102 +21,45 @@
12 h4, 21 h4,
13 h5, 22 h5,
14 h6 { 23 h6 {
15 @include mx.set-font(--headline); 24 display: block;
16 25 margin-block-start: props.get(headings.$margin-bs);
17 display: block; 26 font-family: props.get(headings.$font-family);
18 text-transform: none; 27 font-weight: props.get(headings.$font-weight);
19 letter-spacing: normal; 28 font-feature-settings: props.get(headings.$feature-settings);
20 transform: translateX(-.06em); 29 line-height: props.get(headings.$line-height);
21 } 30 text-transform: none;
22 31 letter-spacing: normal;
23 32 transform: translateX(props.get(headings.$offset));
24 h1 {
25 @include mx.heading-strong(--xxl);
26 }
27
28 h2 {
29 @include mx.heading-strong(--xl);
30 }
31
32 h3 {
33 @include mx.heading-medium(--lg);
34 }
35
36 h4 {
37 @include mx.heading-medium(--md);
38 }
39
40 h5 {
41 @include mx.heading-faint(--sm);
42 }
43
44 h6 {
45 @include mx.heading-faint(--xs);
46 } 33 }
47 34
48 @include iro.bem-elem('highlight') { 35 @include iro.bem-elem('highlight') {
49 background-image: linear-gradient(to top, 36 background-image: linear-gradient(to top,
50 transparent .15em, 37 transparent .15em,
51 fn.foreign-color(--heading, --bg) .15em, 38 props.get(headings.$bg-color) .15em,
52 fn.foreign-color(--heading, --bg) .6em, 39 props.get(headings.$bg-color) .6em,
53 transparent .6em); 40 transparent .6em);
54 } 41 }
55 42
56 @include iro.bem-modifier('display') { 43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes {
57 h1, 44 #{map.get($-size-map, $mod)} {
58 h2, 45 font-family: props.get($font-family);
59 h3, 46 font-size: props.get($font-size);
60 h4, 47 font-weight: props.get($font-weight);
61 h5, 48 font-feature-settings: props.get($feature-settings);
62 h6 { 49 line-height: props.get($line-height);
63 @include mx.set-font(--headline); 50 letter-spacing: props.get($letter-spacing);
64 }
65
66 h1 {
67 @include mx.heading-strong(--display --xxl);
68
69 @include media.media('<=md') {
70 @include mx.heading-strong(--display-sm --xxl);
71 }
72 }
73
74 h2 {
75 @include mx.heading-strong(--display --xl);
76
77 @include media.media('<=md') {
78 @include mx.heading-strong(--display-sm --xl);
79 }
80 }
81
82 h3 {
83 @include mx.heading-strong(--display --lg);
84
85 @include media.media('<=md') {
86 @include mx.heading-strong(--display-sm --lg);
87 }
88 }
89
90 h4 {
91 @include mx.heading-strong(--display --md);
92
93 @include media.media('<=md') {
94 @include mx.heading-strong(--display-sm --md);
95 }
96 }
97
98 h5 {
99 @include mx.heading-medium(--display --sm);
100
101 @include media.media('<=md') {
102 @include mx.heading-medium(--display-sm --sm);
103 }
104 } 51 }
52 }
105 53
106 h6 { 54 @include iro.bem-modifier('display') {
107 @include mx.heading-faint(--display --xs); 55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes {
108 56 #{map.get($-size-map, $mod)} {
109 @include media.media('<=md') { 57 font-family: props.get($font-family);
110 @include mx.heading-faint(--display-sm --xs); 58 font-size: props.get($font-size);
59 font-weight: props.get($font-weight);
60 font-feature-settings: props.get($feature-settings);
61 line-height: props.get($line-height);
62 letter-spacing: props.get($letter-spacing);
111 } 63 }
112 } 64 }
113 } 65 }
diff --git a/src/scopes/_headings.vars.scss b/src/scopes/_headings.vars.scss
deleted file mode 100644
index e69de29..0000000
--- a/src/scopes/_headings.vars.scss
+++ /dev/null
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index ba34039..7909943 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -31,12 +31,10 @@
31 31
32 pre, 32 pre,
33 code { 33 code {
34 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; 34 font-family: props.get(vars.$code--font-family);
35 } 35 font-size: props.get(vars.$code--font-size);
36 36 font-feature-settings: props.get(vars.$code--feature-settings);
37 pre, 37 line-height: props.get(vars.$code--line-height);
38 code {
39 //@include mx.set-font(--mono, (--size: .93em));
40 } 38 }
41 39
42 pre { 40 pre {
@@ -55,9 +53,11 @@
55 h4, 53 h4,
56 h5, 54 h5,
57 h6 { 55 h6 {
58 //@include mx.heading-medium(--md); 56 margin-block: props.get(vars.$heading--margin-bs) 0;
59 57 font-family: props.get(vars.$heading--font-family);
60 margin-block: props.get(vars.$heading--margin-bs) 0; 58 font-weight: props.get(vars.$heading--font-weight);
59 font-feature-settings: props.get(vars.$heading--feature-settings);
60 line-height: props.get(vars.$heading--line-height);
61 61
62 & + & { 62 & + & {
63 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 63 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
@@ -77,7 +77,7 @@
77 } 77 }
78 78
79 small { 79 small {
80 font-size: props.get(core.$font-size--75); 80 font-size: props.get(vars.$small--font-size);
81 } 81 }
82 82
83 ul, 83 ul,
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 34979d9..80e2f67 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -3,5 +3,16 @@
3 3
4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default; 4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default;
5 5
6$small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default;
7
8$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default;
9$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default;
10$code--font-size: props.def(--s-implicit--code--font-size, .93em);
11$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default;
12
6$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; 13$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
7$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; 14$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
15$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default;
16$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--headline--line-height)) !default;
17$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default;
18$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 10:19:27 +0000