summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_headings.scss22
-rw-r--r--src/scopes/_implicit.scss15
-rw-r--r--src/scopes/_implicit.vars.scss8
-rw-r--r--src/scopes/_links.vars.scss3
-rw-r--r--src/scopes/_tables.scss57
-rw-r--r--src/scopes/_tables.vars.scss24
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));