diff options
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_headings.scss | 130 | ||||
-rw-r--r-- | src/scopes/_headings.vars.scss | 0 | ||||
-rw-r--r-- | src/scopes/_implicit.scss | 20 | ||||
-rw-r--r-- | src/scopes/_implicit.vars.scss | 11 |
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; | ||