diff options
author | Volpeon <git@volpeon.ink> | 2024-10-19 10:34:53 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-19 10:34:53 +0200 |
commit | 50d24a41b5656cdaf31468b28d08da765ca95763 (patch) | |
tree | 9ca25c56dc66a02bf2ff498ed4669a097e9a9815 /src | |
parent | Update (diff) | |
download | iro-design-50d24a41b5656cdaf31468b28d08da765ca95763.tar.gz iro-design-50d24a41b5656cdaf31468b28d08da765ca95763.tar.bz2 iro-design-50d24a41b5656cdaf31468b28d08da765ca95763.zip |
Update
Diffstat (limited to 'src')
-rw-r--r-- | src/_core.vars.scss | 20 | ||||
-rw-r--r-- | src/_iro-design.scss | 4 | ||||
-rw-r--r-- | src/_props.scss | 10 | ||||
-rw-r--r-- | src/objects/_field-label.scss | 44 | ||||
-rw-r--r-- | src/objects/_field-label.vars.scss | 12 | ||||
-rw-r--r-- | src/objects/_heading.scss | 138 | ||||
-rw-r--r-- | src/objects/_heading.vars.scss | 122 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 89 | ||||
-rw-r--r-- | src/objects/_lightbox.vars.scss | 70 | ||||
-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 |
13 files changed, 337 insertions, 333 deletions
diff --git a/src/_core.vars.scss b/src/_core.vars.scss index cc11b89..abaf879 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss | |||
@@ -66,6 +66,7 @@ $font--headline--feature-settings: props.def(--font--headline--feature-settings, | |||
66 | 66 | ||
67 | $font--mono--family: props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default; | 67 | $font--mono--family: props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default; |
68 | $font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default; | 68 | $font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default; |
69 | $font--mono--feature-settings: props.def(--font--mono--feature-settings, ('\'calt\'' 0, '\'dlig\' 1', '\'ss09\' 1')) !default; | ||
69 | 70 | ||
70 | $font-size--50: props.def(--font-size--50, iro.fn-px-to-rem(12px)) !default; | 71 | $font-size--50: props.def(--font-size--50, iro.fn-px-to-rem(12px)) !default; |
71 | $font-size--75: props.def(--font-size--75 , iro.fn-px-to-rem(13px)) !default; | 72 | $font-size--75: props.def(--font-size--75 , iro.fn-px-to-rem(13px)) !default; |
@@ -96,25 +97,6 @@ $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($bord | |||
96 | $key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; | 97 | $key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; |
97 | $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; | 98 | $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; |
98 | 99 | ||
99 | $heading--xxl: props.def(--heading--xxl, props.get($font-size--300)) !default; | ||
100 | $heading--xl: props.def(--heading--xl, props.get($font-size--200)) !default; | ||
101 | $heading--lg: props.def(--heading--lg, props.get($font-size--150)) !default; | ||
102 | $heading--md: props.def(--heading--md, props.get($font-size--100)) !default; | ||
103 | $heading--sm: props.def(--heading--sm, props.get($font-size--75)) !default; | ||
104 | $heading--xs: props.def(--heading--xs, props.get($font-size--50)) !default; | ||
105 | $heading--display--xxl: props.def(--heading--display--xxl, props.get($font-size--1100)) !default; | ||
106 | $heading--display--xl: props.def(--heading--display--xl, props.get($font-size--700)) !default; | ||
107 | $heading--display--lg: props.def(--heading--display--lg, props.get($font-size--300)) !default; | ||
108 | $heading--display--md: props.def(--heading--display--md, props.get($font-size--150)) !default; | ||
109 | $heading--display--sm: props.def(--heading--display--sm, props.get($font-size--75)) !default; | ||
110 | $heading--display--xs: props.def(--heading--display--xs, props.get($font-size--50)) !default; | ||
111 | $heading--display-sm--xxl: props.def(--heading--display-sm--xxl, props.get($font-size--900)) !default; | ||
112 | $heading--display-sm--xl: props.def(--heading--display-sm--xl, props.get($font-size--600)) !default; | ||
113 | $heading--display-sm--lg: props.def(--heading--display-sm--lg, props.get($font-size--200)) !default; | ||
114 | $heading--display-sm--md: props.def(--heading--display-sm--md, props.get($font-size--100)) !default; | ||
115 | $heading--display-sm--sm: props.def(--heading--display-sm--sm, props.get($font-size--75)) !default; | ||
116 | $heading--display-sm--xs: props.def(--heading--display-sm--xs, props.get($font-size--50)) !default; | ||
117 | |||
118 | $list--indent: props.def(--list--indent, props.get($size--400)) !default; | 100 | $list--indent: props.def(--list--indent, props.get($size--400)) !default; |
119 | $list--compact-indent: props.def(--list--indent, props.get($size--250)) !default; | 101 | $list--compact-indent: props.def(--list--indent, props.get($size--250)) !default; |
120 | 102 | ||
diff --git a/src/_iro-design.scss b/src/_iro-design.scss index 6cda866..3abe3fa 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss | |||
@@ -32,7 +32,7 @@ $breakpoints: ( | |||
32 | @forward 'scopes/implicit' as s-implicit--*; | 32 | @forward 'scopes/implicit' as s-implicit--*; |
33 | @forward 'scopes/blockquotes' as s-blockquotes--*; | 33 | @forward 'scopes/blockquotes' as s-blockquotes--*; |
34 | @forward 'scopes/code' as s-code--*; | 34 | @forward 'scopes/code' as s-code--*; |
35 | //@use 'scopes/headings' as s-headings--*; | 35 | @forward 'scopes/headings' as s-headings--*; |
36 | @forward 'scopes/links' as s-links--*; | 36 | @forward 'scopes/links' as s-links--*; |
37 | @forward 'scopes/lists' as s-lists--*; | 37 | @forward 'scopes/lists' as s-lists--*; |
38 | //@use 'scopes/tables' as s-tables--*; | 38 | //@use 'scopes/tables' as s-tables--*; |
@@ -47,4 +47,6 @@ $breakpoints: ( | |||
47 | @forward 'objects/checkbox' as o-checkbox--*; | 47 | @forward 'objects/checkbox' as o-checkbox--*; |
48 | @forward 'objects/divider' as o-divider--*; | 48 | @forward 'objects/divider' as o-divider--*; |
49 | @forward 'objects/emoji' as o-emoji--*; | 49 | @forward 'objects/emoji' as o-emoji--*; |
50 | @forward 'objects/field-label' as o-field-label--*; | ||
51 | @forward 'objects/heading' as o-heading--*; | ||
50 | @forward 'objects/icon' as o-icon--*; | 52 | @forward 'objects/icon' as o-icon--*; |
diff --git a/src/_props.scss b/src/_props.scss index ac1dfd5..1a0f7d0 100644 --- a/src/_props.scss +++ b/src/_props.scss | |||
@@ -13,7 +13,7 @@ | |||
13 | } | 13 | } |
14 | 14 | ||
15 | :root { | 15 | :root { |
16 | @include iro.props-materialize($ref); | 16 | @include iro.props-materialize($ref, null); |
17 | 17 | ||
18 | @each $breakpoint in map.keys(media.$breakpoints) { | 18 | @each $breakpoint in map.keys(media.$breakpoints) { |
19 | @include media.media('<=#{$breakpoint}') { | 19 | @include media.media('<=#{$breakpoint}') { |
@@ -29,7 +29,13 @@ | |||
29 | @each $theme-name in map.keys(themes.$themes) { | 29 | @each $theme-name in map.keys(themes.$themes) { |
30 | @if $theme-name != themes.$theme-default { | 30 | @if $theme-name != themes.$theme-default { |
31 | @include iro.bem-theme($theme-name) { | 31 | @include iro.bem-theme($theme-name) { |
32 | @include iro.props-materialize($ref); | 32 | @include iro.props-materialize($ref, null); |
33 | |||
34 | @each $breakpoint in map.keys(media.$breakpoints) { | ||
35 | @include media.media('<=#{$breakpoint}') { | ||
36 | @include iro.props-materialize($ref, $breakpoint); | ||
37 | } | ||
38 | } | ||
33 | 39 | ||
34 | @media (prefers-color-scheme: dark) { | 40 | @media (prefers-color-scheme: dark) { |
35 | @include iro.props-materialize($ref, 'dark'); | 41 | @include iro.props-materialize($ref, 'dark'); |
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index ba3841a..467d30a 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
@@ -1,36 +1,28 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
4 | @use 'icon.vars' as icon; | ||
3 | 5 | ||
4 | @include iro.props-namespace('field-label') { | 6 | @forward 'field-label.vars'; |
5 | @include iro.props-store(( | 7 | @use 'field-label.vars' as vars; |
6 | --dims: ( | ||
7 | --spacing-i: fn.global-dim(--size --150), | ||
8 | --spacing-b: fn.global-dim(--size --85), | ||
9 | --label-font-size: fn.global-dim(--font-size --75), | ||
10 | --hint-font-size: fn.global-dim(--font-size --75), | ||
11 | ), | ||
12 | --colors: ( | ||
13 | --label: fn.global-color(--text-mute), | ||
14 | --hint: fn.global-color(--text-mute), | ||
15 | --error-hint: fn.global-color(--negative --900), | ||
16 | --disabled: fn.global-color(--text-disabled), | ||
17 | ), | ||
18 | )); | ||
19 | 8 | ||
20 | @include iro.bem-object(iro.props-namespace()) { | 9 | @mixin styles { |
10 | @include props.materialize(meta.module-variables('vars')); | ||
11 | |||
12 | @include iro.bem-object('field-label') { | ||
21 | display: block; | 13 | display: block; |
22 | 14 | ||
23 | @include iro.bem-elem('label') { | 15 | @include iro.bem-elem('label') { |
24 | display: block; | 16 | display: block; |
25 | flex: 0 0 auto; | 17 | flex: 0 0 auto; |
26 | padding-inline-end: fn.dim(--spacing-i); | 18 | padding-inline-end: props.get(vars.$spacing-i); |
27 | font-size: fn.dim(--label-font-size); | 19 | font-size: props.get(vars.$label-font-size); |
28 | font-weight: 400; | 20 | font-weight: 400; |
29 | line-height: 1.3; | 21 | line-height: 1.3; |
30 | color: fn.color(--label); | 22 | color: props.get(vars.$label-color); |
31 | 23 | ||
32 | @include iro.bem-next-elem('content') { | 24 | @include iro.bem-next-elem('content') { |
33 | margin-block-start: fn.dim(--spacing-b); | 25 | margin-block-start: props.get(vars.$spacing-b); |
34 | } | 26 | } |
35 | } | 27 | } |
36 | 28 | ||
@@ -41,20 +33,20 @@ | |||
41 | 33 | ||
42 | @include iro.bem-elem('hint') { | 34 | @include iro.bem-elem('hint') { |
43 | display: block; | 35 | display: block; |
44 | margin-block-start: fn.dim(--spacing-b); | 36 | margin-block-start: props.get(vars.$spacing-b); |
45 | font-size: fn.dim(--hint-font-size); | 37 | font-size: props.get(vars.$hint-font-size); |
46 | color: fn.color(--hint); | 38 | color: props.get(vars.$hint-color); |
47 | } | 39 | } |
48 | 40 | ||
49 | @include iro.bem-is('invalid') { | 41 | @include iro.bem-is('invalid') { |
50 | @include iro.bem-elem('hint') { | 42 | @include iro.bem-elem('hint') { |
51 | color: fn.color(--error-hint); | 43 | color: props.get(vars.$error-hint-color); |
52 | } | 44 | } |
53 | } | 45 | } |
54 | 46 | ||
55 | @include iro.bem-is('disabled') { | 47 | @include iro.bem-is('disabled') { |
56 | @include iro.bem-elem('label', 'hint') { | 48 | @include iro.bem-elem('label', 'hint') { |
57 | color: fn.color(--disabled); | 49 | color: props.get(vars.$disabled-color); |
58 | } | 50 | } |
59 | } | 51 | } |
60 | 52 | ||
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss new file mode 100644 index 0000000..699836e --- /dev/null +++ b/src/objects/_field-label.vars.scss | |||
@@ -0,0 +1,12 @@ | |||
1 | @use '../props'; | ||
2 | @use '../core.vars' as core; | ||
3 | |||
4 | $spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; | ||
5 | $spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default; | ||
6 | $label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default; | ||
7 | $hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default; | ||
8 | |||
9 | $label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute)) !default; | ||
10 | $hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute)) !default; | ||
11 | $error-hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --negative, --900)) !default; | ||
12 | $disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled)) !default; | ||
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 8ed3b17..b1abdf5 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
@@ -1,114 +1,56 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
3 | @use '../mixins' as mx; | ||
4 | @use '../config'; | ||
5 | @use 'include-media/dist/include-media' as media; | ||
6 | 4 | ||
7 | $sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; | 5 | @forward 'heading.vars'; |
6 | @use 'heading.vars' as vars; | ||
8 | 7 | ||
9 | @include iro.props-namespace('heading') { | 8 | @mixin styles { |
10 | @include iro.props-store(( | 9 | @include props.materialize(meta.module-variables('vars')); |
11 | --dims: ( | ||
12 | --offset: -.02em, | ||
13 | ), | ||
14 | --colors: ( | ||
15 | --bg: fn.global-color(--base --50), | ||
16 | ), | ||
17 | )); | ||
18 | 10 | ||
19 | @include iro.bem-object(iro.props-namespace()) { | 11 | @include iro.bem-object('heading') { |
20 | @include mx.set-font(--headline); | 12 | display: block; |
21 | 13 | margin-block-start: props.get(vars.$margin-bs); | |
22 | display: block; | 14 | font-family: props.get(vars.$font-family); |
23 | margin-block-start: fn.global-dim(--heading --margin-bs); | 15 | font-weight: props.get(vars.$font-weight); |
24 | text-transform: none; | 16 | font-feature-settings: props.get(vars.$feature-settings); |
25 | letter-spacing: normal; | 17 | line-height: props.get(vars.$line-height); |
26 | transform: translateX(fn.dim(--offset)); | 18 | text-transform: none; |
19 | letter-spacing: normal; | ||
20 | transform: translateX(props.get(vars.$offset)); | ||
27 | 21 | ||
28 | & + & { | 22 | & + & { |
29 | margin-block-start: fn.global-dim(--heading --margin-bs-sibling); | 23 | margin-block-start: props.get(vars.$margin-bs-sibling); |
30 | } | 24 | } |
31 | 25 | ||
32 | @include iro.bem-elem('highlight') { | 26 | @include iro.bem-elem('highlight') { |
33 | background-image: linear-gradient(to top, | 27 | background-image: linear-gradient(to top, |
34 | transparent .05em, | 28 | transparent .05em, |
35 | fn.color(--bg) .05em, | 29 | props.get(vars.$bg-color) .05em, |
36 | fn.color(--bg) .5em, | 30 | props.get(vars.$bg-color) .5em, |
37 | transparent .5em); | 31 | transparent .5em); |
38 | } | 32 | } |
39 | 33 | ||
40 | @include iro.bem-modifier('xxl') { | 34 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { |
41 | @include mx.heading-strong(--xxl); | 35 | @include iro.bem-modifier($mod) { |
42 | } | 36 | font-family: props.get($font-family); |
43 | 37 | font-size: props.get($font-size); | |
44 | @include iro.bem-modifier('xl') { | 38 | font-weight: props.get($font-weight); |
45 | @include mx.heading-strong(--xl); | 39 | font-feature-settings: props.get($feature-settings); |
46 | } | 40 | line-height: props.get($line-height); |
47 | 41 | letter-spacing: props.get($letter-spacing); | |
48 | @include iro.bem-modifier('lg') { | 42 | } |
49 | @include mx.heading-medium(--lg); | ||
50 | } | ||
51 | |||
52 | @include iro.bem-modifier('md') { | ||
53 | @include mx.heading-medium(--md); | ||
54 | } | ||
55 | |||
56 | @include iro.bem-modifier('sm') { | ||
57 | @include mx.heading-faint(--sm); | ||
58 | } | ||
59 | |||
60 | @include iro.bem-modifier('xs') { | ||
61 | @include mx.heading-faint(--xs); | ||
62 | } | 43 | } |
63 | 44 | ||
64 | @include iro.bem-modifier('display') { | 45 | @include iro.bem-modifier('display') { |
65 | @include mx.set-font(--headline); | 46 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { |
66 | 47 | @include iro.bem-modifier($mod) { | |
67 | @include iro.bem-modifier('xxl') { | 48 | font-family: props.get($font-family); |
68 | @include mx.heading-strong(--display --xxl); | 49 | font-size: props.get($font-size); |
69 | 50 | font-weight: props.get($font-weight); | |
70 | @include media.media('<=md') { | 51 | font-feature-settings: props.get($feature-settings); |
71 | @include mx.heading-strong(--display-sm --xxl); | 52 | line-height: props.get($line-height); |
72 | } | 53 | letter-spacing: props.get($letter-spacing); |
73 | } | ||
74 | |||
75 | @include iro.bem-modifier('xl') { | ||
76 | @include mx.heading-strong(--display --xl); | ||
77 | |||
78 | @include media.media('<=md') { | ||
79 | @include mx.heading-strong(--display-sm --xl); | ||
80 | } | ||
81 | } | ||
82 | |||
83 | @include iro.bem-modifier('lg') { | ||
84 | @include mx.heading-strong(--display --lg); | ||
85 | |||
86 | @include media.media('<=md') { | ||
87 | @include mx.heading-strong(--display-sm --lg); | ||
88 | } | ||
89 | } | ||
90 | |||
91 | @include iro.bem-modifier('md') { | ||
92 | @include mx.heading-strong(--display --md); | ||
93 | |||
94 | @include media.media('<=md') { | ||
95 | @include mx.heading-strong(--display-sm --md); | ||
96 | } | ||
97 | } | ||
98 | |||
99 | @include iro.bem-modifier('sm') { | ||
100 | @include mx.heading-medium(--display --sm); | ||
101 | |||
102 | @include media.media('<=md') { | ||
103 | @include mx.heading-medium(--display-sm --sm); | ||
104 | } | ||
105 | } | ||
106 | |||
107 | @include iro.bem-modifier('xs') { | ||
108 | @include mx.heading-faint(--display --xs); | ||
109 | |||
110 | @include media.media('<=md') { | ||
111 | @include mx.heading-faint(--display-sm --xs); | ||
112 | } | 54 | } |
113 | } | 55 | } |
114 | } | 56 | } |
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss new file mode 100644 index 0000000..31a2406 --- /dev/null +++ b/src/objects/_heading.vars.scss | |||
@@ -0,0 +1,122 @@ | |||
1 | @use '../props'; | ||
2 | @use '../core.vars' as core; | ||
3 | |||
4 | $offset: props.def(--o-heading--offset, -.02em) !default; | ||
5 | $margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; | ||
6 | $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; | ||
7 | |||
8 | $bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50)) !default; | ||
9 | |||
10 | $font-family: props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default; | ||
11 | $line-height: props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default; | ||
12 | $font-weight: props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default; | ||
13 | $feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
14 | |||
15 | $font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default; | ||
16 | $line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
17 | $font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; | ||
18 | $font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
19 | $letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; | ||
20 | $feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
21 | |||
22 | $font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default; | ||
23 | $line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
24 | $font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; | ||
25 | $font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
26 | $letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; | ||
27 | $feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
28 | |||
29 | $font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; | ||
30 | $line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; | ||
31 | $font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; | ||
32 | $font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; | ||
33 | $letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; | ||
34 | $feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
35 | |||
36 | $font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; | ||
37 | $line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; | ||
38 | $font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; | ||
39 | $font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; | ||
40 | $letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; | ||
41 | $feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
42 | |||
43 | $font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; | ||
44 | $line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; | ||
45 | $font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; | ||
46 | $font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; | ||
47 | $letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; | ||
48 | $feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
49 | |||
50 | $font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; | ||
51 | $line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; | ||
52 | $font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; | ||
53 | $font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; | ||
54 | $letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; | ||
55 | $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
56 | |||
57 | $sizes: ( | ||
58 | 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, | ||
59 | 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, | ||
60 | 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, | ||
61 | 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, | ||
62 | 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, | ||
63 | 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, | ||
64 | ) !default; | ||
65 | |||
66 | $display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; | ||
67 | $display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
68 | $display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default; | ||
69 | $display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
70 | $display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; | ||
71 | $display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
72 | |||
73 | $display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default; | ||
74 | $display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
75 | $display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default; | ||
76 | $display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
77 | $display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; | ||
78 | $display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
79 | |||
80 | $display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default; | ||
81 | $display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default; | ||
82 | $display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default; | ||
83 | $display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default; | ||
84 | $display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default; | ||
85 | $display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
86 | |||
87 | $display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default; | ||
88 | $display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default; | ||
89 | $display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default; | ||
90 | $display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default; | ||
91 | $display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; | ||
92 | $display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
93 | |||
94 | $display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; | ||
95 | $display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; | ||
96 | $display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; | ||
97 | $display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; | ||
98 | $display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; | ||
99 | $display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
100 | |||
101 | $display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; | ||
102 | $display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; | ||
103 | $display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; | ||
104 | $display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; | ||
105 | $display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; | ||
106 | $display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
107 | |||
108 | $display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default; | ||
109 | $display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default; | ||
110 | $display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default; | ||
111 | $display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default; | ||
112 | $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default; | ||
113 | $display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; | ||
114 | |||
115 | $display--sizes: ( | ||
116 | 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs, | ||
117 | 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm, | ||
118 | 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md, | ||
119 | 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg, | ||
120 | 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl, | ||
121 | 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl, | ||
122 | ) !default; | ||
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index edbc62a..740f4e5 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
@@ -6,94 +6,7 @@ | |||
6 | $static-themes: 'black' 'white' !default; | 6 | $static-themes: 'black' 'white' !default; |
7 | 7 | ||
8 | @include iro.props-namespace('lightbox') { | 8 | @include iro.props-namespace('lightbox') { |
9 | @include iro.props-store(( | 9 | |
10 | --dims: ( | ||
11 | --pad: fn.global-dim(--size --150), | ||
12 | |||
13 | --thumbnail: ( | ||
14 | --size: fn.global-dim(--size --700), | ||
15 | --rounding: fn.global-dim(--rounding), | ||
16 | --spacing: fn.global-dim(--size --100), | ||
17 | --border: fn.global-dim(--border --thin), | ||
18 | |||
19 | --selected: ( | ||
20 | --border: fn.global-dim(--border --medium), | ||
21 | ), | ||
22 | |||
23 | --key-focus: ( | ||
24 | --border: fn.global-dim(--key-focus --border), | ||
25 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
26 | --outline: fn.global-dim(--key-focus --outline), | ||
27 | ), | ||
28 | ), | ||
29 | |||
30 | --close-button: ( | ||
31 | --font-size: fn.global-dim(--font-size --200), | ||
32 | ), | ||
33 | |||
34 | --nav-button: ( | ||
35 | --width: fn.global-dim(--size --2000), | ||
36 | --height: fn.global-dim(--size --3800), | ||
37 | --font-size: fn.global-dim(--font-size --200), | ||
38 | ), | ||
39 | ), | ||
40 | --colors: ( | ||
41 | --thumbnail: ( | ||
42 | --border: fn.global-color(--border-strong), | ||
43 | |||
44 | --hover: ( | ||
45 | --border: fn.global-color(--text-mute-more), | ||
46 | ), | ||
47 | |||
48 | --selected: ( | ||
49 | --border: fn.global-color(--heading), | ||
50 | ), | ||
51 | |||
52 | --key-focus: ( | ||
53 | --border: fn.global-color(--focus --border), | ||
54 | --outline: fn.global-color(--focus --outline), | ||
55 | ), | ||
56 | ), | ||
57 | ), | ||
58 | )); | ||
59 | |||
60 | @each $theme in $static-themes { | ||
61 | @include iro.props-store(( | ||
62 | --colors: ( | ||
63 | --static-#{$theme}: ( | ||
64 | --text: fn.global-color(--white-transparent --800), | ||
65 | --thumbnail: ( | ||
66 | --border: fn.global-color(--white-transparent --400), | ||
67 | |||
68 | --hover: ( | ||
69 | --border: fn.global-color(--white-transparent --500), | ||
70 | ), | ||
71 | |||
72 | --selected: ( | ||
73 | --border: fn.global-color(--white-transparent --900), | ||
74 | ), | ||
75 | |||
76 | --key-focus: ( | ||
77 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
78 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
79 | ), | ||
80 | ), | ||
81 | ) | ||
82 | ) | ||
83 | )); | ||
84 | } | ||
85 | |||
86 | @include iro.props-store(( | ||
87 | --dims: ( | ||
88 | --thumbnail: ( | ||
89 | --size: fn.global-dim(--size --600), | ||
90 | ), | ||
91 | --nav-button: ( | ||
92 | --width: fn.global-dim(--size --2500), | ||
93 | --height: fn.global-dim(--size --2500), | ||
94 | ), | ||
95 | ), | ||
96 | ), 'md'); | ||
97 | 10 | ||
98 | @include iro.bem-object(iro.props-namespace()) { | 11 | @include iro.bem-object(iro.props-namespace()) { |
99 | box-sizing: border-box; | 12 | box-sizing: border-box; |
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss new file mode 100644 index 0000000..1538cae --- /dev/null +++ b/src/objects/_lightbox.vars.scss | |||
@@ -0,0 +1,70 @@ | |||
1 | @use '../props'; | ||
2 | @use '../core.vars' as core; | ||
3 | |||
4 | $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; | ||
5 | |||
6 | $thumbnail--size: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--700)) !default; | ||
7 | $thumbnail--rounding: props.def(--o-lightbox--thumbnail--rounding, props.get(core.$rounding)) !default; | ||
8 | $thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default; | ||
9 | $thumbnail--border-width: props.def(--o-lightbox--thumbnail--border-width, props.get(core.$border-width--thin)) !default; | ||
10 | |||
11 | $thumbnail--selected--border-width: props.def(--o-lightbox--thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; | ||
12 | |||
13 | $thumbnail--key-focus--border-width: props.def(--o-lightbox--thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $thumbnail--key-focus--border-offset: props.def(--o-lightbox--thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $thumbnail--key-focus--outline-width: props.def(--o-lightbox--thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; | ||
18 | |||
19 | $nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default; | ||
20 | $nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; | ||
21 | $nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; | ||
22 | |||
23 | $thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong)) !default; | ||
24 | |||
25 | $thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more)) !default; | ||
26 | |||
27 | $thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading)) !default; | ||
28 | |||
29 | $thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | ||
30 | $thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | ||
31 | |||
32 | |||
33 | |||
34 | @each $theme in $static-themes { | ||
35 | @include iro.props-store(( | ||
36 | --colors: ( | ||
37 | --static-#{$theme}: ( | ||
38 | --text: fn.global-color(--white-transparent --800), | ||
39 | --thumbnail: ( | ||
40 | --border: fn.global-color(--white-transparent --400), | ||
41 | |||
42 | --hover: ( | ||
43 | --border: fn.global-color(--white-transparent --500), | ||
44 | ), | ||
45 | |||
46 | --selected: ( | ||
47 | --border: fn.global-color(--white-transparent --900), | ||
48 | ), | ||
49 | |||
50 | --key-focus: ( | ||
51 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
52 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
53 | ), | ||
54 | ), | ||
55 | ) | ||
56 | ) | ||
57 | )); | ||
58 | } | ||
59 | |||
60 | @include iro.props-store(( | ||
61 | --dims: ( | ||
62 | --thumbnail: ( | ||
63 | --size: fn.global-dim(--size --600), | ||
64 | ), | ||
65 | --nav-button: ( | ||
66 | --width: fn.global-dim(--size --2500), | ||
67 | --height: fn.global-dim(--size --2500), | ||
68 | ), | ||
69 | ), | ||
70 | ), 'md'); | ||
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; | ||