diff options
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_headings.scss | 22 | ||||
-rw-r--r-- | src/scopes/_implicit.scss | 15 | ||||
-rw-r--r-- | src/scopes/_implicit.vars.scss | 8 | ||||
-rw-r--r-- | src/scopes/_links.vars.scss | 3 | ||||
-rw-r--r-- | src/scopes/_tables.scss | 57 | ||||
-rw-r--r-- | src/scopes/_tables.vars.scss | 24 |
6 files changed, 57 insertions, 72 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 2bf7b08..f6f62c3 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @use 'sass:map'; | 1 | @use 'sass:map'; |
2 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
3 | @use '../props'; | 3 | @use '../props'; |
4 | @use '../objects/heading.vars' as headings; | 4 | @use '../objects/heading.vars' as heading; |
5 | 5 | ||
6 | @mixin styles { | 6 | @mixin styles { |
7 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ | 7 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ |
@@ -22,25 +22,25 @@ | |||
22 | h5, | 22 | h5, |
23 | h6 { | 23 | h6 { |
24 | display: block; | 24 | display: block; |
25 | margin-block-start: props.get(headings.$margin-bs); | 25 | margin-block-start: props.get(heading.$margin-bs); |
26 | font-family: props.get(headings.$font-family); | 26 | font-family: props.get(heading.$font-family); |
27 | font-weight: props.get(headings.$font-weight); | 27 | font-weight: props.get(heading.$font-weight); |
28 | font-feature-settings: props.get(headings.$feature-settings); | 28 | font-feature-settings: props.get(heading.$feature-settings); |
29 | line-height: props.get(headings.$line-height); | 29 | line-height: props.get(heading.$line-height); |
30 | text-transform: none; | 30 | text-transform: none; |
31 | letter-spacing: normal; | 31 | letter-spacing: normal; |
32 | transform: translateX(props.get(headings.$offset)); | 32 | transform: translateX(props.get(heading.$offset)); |
33 | } | 33 | } |
34 | 34 | ||
35 | @include iro.bem-elem('highlight') { | 35 | @include iro.bem-elem('highlight') { |
36 | background-image: linear-gradient(to top, | 36 | background-image: linear-gradient(to top, |
37 | transparent .15em, | 37 | transparent .15em, |
38 | props.get(headings.$bg-color) .15em, | 38 | props.get(heading.$bg-color) .15em, |
39 | props.get(headings.$bg-color) .6em, | 39 | props.get(heading.$bg-color) .6em, |
40 | transparent .6em); | 40 | transparent .6em); |
41 | } | 41 | } |
42 | 42 | ||
43 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes { | 43 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { |
44 | #{map.get($-size-map, $mod)} { | 44 | #{map.get($-size-map, $mod)} { |
45 | font-family: props.get($font-family); | 45 | font-family: props.get($font-family); |
46 | font-size: props.get($font-size); | 46 | font-size: props.get($font-size); |
@@ -52,7 +52,7 @@ | |||
52 | } | 52 | } |
53 | 53 | ||
54 | @include iro.bem-modifier('display') { | 54 | @include iro.bem-modifier('display') { |
55 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes { | 55 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { |
56 | #{map.get($-size-map, $mod)} { | 56 | #{map.get($-size-map, $mod)} { |
57 | font-family: props.get($font-family); | 57 | font-family: props.get($font-family); |
58 | font-size: props.get($font-size); | 58 | font-size: props.get($font-size); |
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 7909943..4bb3482 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss | |||
@@ -21,12 +21,14 @@ | |||
21 | } | 21 | } |
22 | 22 | ||
23 | body { | 23 | body { |
24 | //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); | 24 | padding: 0; |
25 | 25 | margin: 0; | |
26 | padding: 0; | 26 | font-family: props.get(vars.$body--font-family); |
27 | margin: 0; | 27 | font-size: props.get(vars.$body--font-size); |
28 | color: props.get(core.$theme, --text); | 28 | font-feature-settings: props.get(vars.$body--feature-settings); |
29 | background-color: props.get(core.$theme, --bg-base); | 29 | line-height: props.get(vars.$body--line-height); |
30 | color: props.get(core.$theme, --text); | ||
31 | background-color: props.get(core.$theme, --bg-base); | ||
30 | } | 32 | } |
31 | 33 | ||
32 | pre, | 34 | pre, |
@@ -55,6 +57,7 @@ | |||
55 | h6 { | 57 | h6 { |
56 | margin-block: props.get(vars.$heading--margin-bs) 0; | 58 | margin-block: props.get(vars.$heading--margin-bs) 0; |
57 | font-family: props.get(vars.$heading--font-family); | 59 | font-family: props.get(vars.$heading--font-family); |
60 | font-size: props.get(vars.$heading--font-size); | ||
58 | font-weight: props.get(vars.$heading--font-weight); | 61 | font-weight: props.get(vars.$heading--font-weight); |
59 | font-feature-settings: props.get(vars.$heading--feature-settings); | 62 | font-feature-settings: props.get(vars.$heading--feature-settings); |
60 | line-height: props.get(vars.$heading--line-height); | 63 | line-height: props.get(vars.$heading--line-height); |
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index 80e2f67..f0eb45d 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss | |||
@@ -5,6 +5,11 @@ $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(c | |||
5 | 5 | ||
6 | $small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default; | 6 | $small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default; |
7 | 7 | ||
8 | $body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default; | ||
9 | $body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default; | ||
10 | $body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); | ||
11 | $body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
12 | |||
8 | $code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default; | 13 | $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; | 14 | $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); | 15 | $code--font-size: props.def(--s-implicit--code--font-size, .93em); |
@@ -13,6 +18,7 @@ $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.g | |||
13 | $heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; | 18 | $heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; |
14 | $heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; | 19 | $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; | 20 | $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; | 21 | $heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default; |
17 | $heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; | 22 | $heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; |
23 | $heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); | ||
18 | $heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | 24 | $heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; |
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss index 4bf80c0..4c6cc5d 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss | |||
@@ -1,4 +1,5 @@ | |||
1 | @use 'sass:map'; | 1 | @use 'sass:map'; |
2 | @use 'sass:string'; | ||
2 | @use '../props'; | 3 | @use '../props'; |
3 | @use '../core.vars' as core; | 4 | @use '../core.vars' as core; |
4 | 5 | ||
@@ -26,7 +27,7 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props. | |||
26 | 27 | ||
27 | $static-themes: props.def(--s-links); | 28 | $static-themes: props.def(--s-links); |
28 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | 29 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
29 | $link-theme: #{$theme}-static; | 30 | $link-theme: --static-#{string.slice($theme, 3)}; |
30 | 31 | ||
31 | $static-themes: props.merge($static-themes, ( | 32 | $static-themes: props.merge($static-themes, ( |
32 | $link-theme: ( | 33 | $link-theme: ( |
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index f722864..f285207 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss | |||
@@ -1,49 +1,44 @@ | |||
1 | @use 'sass:meta'; | 1 | @use 'sass:map'; |
2 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
3 | @use '../functions' as fn; | 3 | @use '../props'; |
4 | @use '../mixins' as mx; | 4 | @use '../objects/table.vars' as table; |
5 | 5 | ||
6 | @forward 'lists.vars'; | 6 | @forward 'tables.vars'; |
7 | @use 'lists.vars' as vars; | 7 | @use 'tables.vars' as vars; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include props.materialize(meta.module-variables('vars')); | ||
11 | |||
12 | @include iro.bem-scope('tables') { | 10 | @include iro.bem-scope('tables') { |
13 | table { | 11 | table { |
14 | margin-block-start: fn.dim(--margin-bs); | 12 | margin-block-start: props.get(vars.$margin-bs); |
15 | border-spacing: 0; | 13 | border-spacing: 0; |
16 | border-collapse: separate; | 14 | border-collapse: separate; |
17 | } | 15 | } |
18 | 16 | ||
19 | th { | 17 | th { |
20 | @include mx.set-font(--standard, ( | 18 | padding-block: props.get(table.$pad-b); |
21 | --line-height: null, | 19 | padding-inline: props.get(table.$pad-i); |
22 | --size: fn.global-dim(--font-size --50), | 20 | font-family: props.get(table.$heading--font-family); |
23 | --weight: bold, | 21 | font-size: props.get(table.$heading--font-size); |
24 | --transform: uppercase, | 22 | font-weight: props.get(table.$heading--font-weight); |
25 | --spacing: .5px | 23 | color: props.get(table.$heading-color); |
26 | )); | ||
27 | |||
28 | padding-block: fn.dim(--pad-b); | ||
29 | padding-inline: fn.dim(--pad-i); | ||
30 | color: fn.color(--heading); | ||
31 | text-align: start; | 24 | text-align: start; |
25 | text-transform: props.get(table.$heading--text-transform); | ||
26 | letter-spacing: props.get(table.$heading--letter-spacing); | ||
32 | } | 27 | } |
33 | 28 | ||
34 | td { | 29 | td { |
35 | padding-block: fn.dim(--pad-b); | 30 | padding-block: props.get(table.$pad-b); |
36 | padding-inline: fn.dim(--pad-i); | 31 | padding-inline: props.get(table.$pad-i); |
37 | border-color: fn.color(--border); | 32 | border-color: props.get(table.$border-color); |
38 | border-style: solid; | 33 | border-style: solid; |
39 | border-width: 0; | 34 | border-width: 0; |
40 | border-block-start-width: fn.dim(--border); | 35 | border-block-start-width: props.get(table.$border-width); |
41 | } | 36 | } |
42 | 37 | ||
43 | tr { | 38 | tr { |
44 | &:last-child { | 39 | &:last-child { |
45 | td { | 40 | td { |
46 | border-block-end-width: fn.dim(--border); | 41 | border-block-end-width: props.get(table.$border-width); |
47 | } | 42 | } |
48 | } | 43 | } |
49 | } | 44 | } |
@@ -63,14 +58,14 @@ | |||
63 | 58 | ||
64 | @include iro.bem-modifier('box') { | 59 | @include iro.bem-modifier('box') { |
65 | td { | 60 | td { |
66 | background-color: fn.color(--box --bg); | 61 | background-color: props.get(table.$box--bg-color); |
67 | 62 | ||
68 | &:first-child { | 63 | &:first-child { |
69 | border-inline-start-width: fn.dim(--border); | 64 | border-inline-start-width: props.get(table.$border-width); |
70 | } | 65 | } |
71 | 66 | ||
72 | &:last-child { | 67 | &:last-child { |
73 | border-inline-end-width: fn.dim(--border); | 68 | border-inline-end-width: props.get(table.$border-width); |
74 | } | 69 | } |
75 | } | 70 | } |
76 | 71 | ||
@@ -78,11 +73,11 @@ | |||
78 | &:first-child { | 73 | &:first-child { |
79 | td { | 74 | td { |
80 | &:first-child { | 75 | &:first-child { |
81 | border-start-start-radius: fn.dim(--rounding); | 76 | border-start-start-radius: props.get(table.$rounding); |
82 | } | 77 | } |
83 | 78 | ||
84 | &:last-child { | 79 | &:last-child { |
85 | border-start-end-radius: fn.dim(--rounding); | 80 | border-start-end-radius: props.get(table.$rounding); |
86 | } | 81 | } |
87 | } | 82 | } |
88 | } | 83 | } |
@@ -90,11 +85,11 @@ | |||
90 | &:last-child { | 85 | &:last-child { |
91 | td { | 86 | td { |
92 | &:first-child { | 87 | &:first-child { |
93 | border-end-start-radius: fn.dim(--rounding); | 88 | border-end-start-radius: props.get(table.$rounding); |
94 | } | 89 | } |
95 | 90 | ||
96 | &:last-child { | 91 | &:last-child { |
97 | border-end-end-radius: fn.dim(--rounding); | 92 | border-end-end-radius: props.get(table.$rounding); |
98 | } | 93 | } |
99 | } | 94 | } |
100 | } | 95 | } |
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss index cdaca64..17c9eb4 100644 --- a/src/scopes/_tables.vars.scss +++ b/src/scopes/_tables.vars.scss | |||
@@ -1,24 +1,4 @@ | |||
1 | @use '../props'; | 1 | @use '../props'; |
2 | @use '../core.vars' as core; | 2 | @use 'implicit.vars' as implicit; |
3 | 3 | ||
4 | $indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; | 4 | $margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; |
5 | $margin-bs: props.def(--s-lists--margin-bs, props.get(core.$paragraph--margin-bs)) !default; | ||
6 | |||
7 | $compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; | ||
8 | |||
9 | @include iro.props-store(( | ||
10 | --dims: ( | ||
11 | --pad-i: fn.foreign-dim(--table, --pad-i), | ||
12 | --pad-b: fn.foreign-dim(--table, --pad-b), | ||
13 | --rounding: fn.foreign-dim(--table, --rounding), | ||
14 | --border: fn.foreign-dim(--table, --border), | ||
15 | --margin-bs: fn.global-dim(--paragraph --margin-bs), | ||
16 | ), | ||
17 | --colors: ( | ||
18 | --border: fn.foreign-color(--table, --border), | ||
19 | --heading: fn.foreign-color(--table, --heading), | ||
20 | --box: ( | ||
21 | --bg: fn.foreign-color(--table, --box --bg), | ||
22 | ) | ||
23 | ) | ||
24 | )); | ||