summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_badge.vars.scss33
-rw-r--r--src/objects/_button.vars.scss29
-rw-r--r--src/objects/_card.scss2
-rw-r--r--src/objects/_card.vars.scss2
-rw-r--r--src/objects/_divider.vars.scss11
-rw-r--r--src/objects/_menu.vars.scss2
-rw-r--r--src/objects/_side-nav.vars.scss2
-rw-r--r--src/objects/_status-indicator.vars.scss11
-rw-r--r--src/scopes/_implicit.vars.scss2
-rw-r--r--src/scopes/_tables.scss4
10 files changed, 58 insertions, 40 deletions
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index 4941ccf..5629a9c 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -119,36 +119,41 @@ $static-themes: props.def(--o-badge);
119 )); 119 ));
120} 120}
121 121
122$themes-config: accent positive negative warning !default; 122$themes-config: (
123 accent: --accent,
124 positive: --positive,
125 negative: --negative,
126 warning: --warning,
127) !default;
123 128
124$themes: props.def(--o-badge); 129$themes: props.def(--o-badge);
125 130
126@each $theme in $themes-config { 131@each $theme, $key in $themes-config {
127 $themes: props.merge($themes, ( 132 $themes: props.merge($themes, (
128 --#{$theme}: ( 133 --#{$theme}: (
129 --bg: props.get(core.$theme, --#{$theme}-static, --900), 134 --bg: props.get(core.$theme, #{$key}-static, --900),
130 --label: props.get(core.$theme, --#{$theme}-static, --900-text), 135 --label: props.get(core.$theme, #{$key}-static, --900-text),
131 136
132 --hover: ( 137 --hover: (
133 --bg: props.get(core.$theme, --#{$theme}-static, --1000), 138 --bg: props.get(core.$theme, #{$key}-static, --1000),
134 --label: props.get(core.$theme, --#{$theme}-static, --1000-text), 139 --label: props.get(core.$theme, #{$key}-static, --1000-text),
135 ), 140 ),
136 141
137 --active: ( 142 --active: (
138 --bg: props.get(core.$theme, --#{$theme}-static, --1100), 143 --bg: props.get(core.$theme, #{$key}-static, --1100),
139 --label: props.get(core.$theme, --#{$theme}-static, --1000-text), 144 --label: props.get(core.$theme, #{$key}-static, --1000-text),
140 ), 145 ),
141 146
142 --quiet: ( 147 --quiet: (
143 --bg: props.get(core.$theme, --#{$theme}, --200), 148 --bg: props.get(core.$theme, $key, --200),
144 --label: props.get(core.$theme, --#{$theme}, --1100), 149 --label: props.get(core.$theme, $key, --1100),
145 --hover: ( 150 --hover: (
146 --bg: props.get(core.$theme, --#{$theme}, --300), 151 --bg: props.get(core.$theme, $key, --300),
147 --label: props.get(core.$theme, --#{$theme}, --1200), 152 --label: props.get(core.$theme, $key, --1200),
148 ), 153 ),
149 --active: ( 154 --active: (
150 --bg: props.get(core.$theme, --#{$theme}, --400), 155 --bg: props.get(core.$theme, $key, --400),
151 --label: props.get(core.$theme, --#{$theme}, --1300), 156 --label: props.get(core.$theme, $key, --1300),
152 ), 157 ),
153 ) 158 )
154 ) 159 )
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index cc82d46..b3eb2b5 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -60,9 +60,9 @@ $default-theme: props.def(--o-button, (
60 ), 60 ),
61 61
62 --key-focus: ( 62 --key-focus: (
63 --label: props.get(core.$theme, --focus --text), 63 --label: props.get(core.$theme, --focus, --text),
64 --border: props.get(core.$theme, --focus --border), 64 --border: props.get(core.$theme, --focus, --border),
65 --outline: props.get(core.$theme, --focus --outline), 65 --outline: props.get(core.$theme, --focus, --outline),
66 ), 66 ),
67 67
68 --primary: ( 68 --primary: (
@@ -139,26 +139,29 @@ $static-themes: props.def(--o-button);
139 )); 139 ));
140} 140}
141 141
142$themes-config: accent negative !default; 142$themes-config: (
143 accent: --accent,
144 negative: --negative,
145) !default;
143 146
144$themes: props.def(--o-button); 147$themes: props.def(--o-button);
145 148
146@each $theme in $themes-config { 149@each $theme, $key in $themes-config {
147 $themes: props.merge($themes, ( 150 $themes: props.merge($themes, (
148 --#{$theme}: ( 151 --#{$theme}: (
149 --bg: props.get(core.$theme, --#{$theme}-static, --900), 152 --bg: props.get(core.$theme, #{$key}-static, --900),
150 --label: props.get(core.$theme, --#{$theme}-static, --900-text), 153 --label: props.get(core.$theme, #{$key}-static, --900-text),
151 --outline-border: props.get(core.$theme, --#{$theme}, --900), 154 --outline-border: props.get(core.$theme, $key, --900),
152 --outline-label: props.get(core.$theme, --#{$theme}, --1000), 155 --outline-label: props.get(core.$theme, $key, --1000),
153 156
154 --hover: ( 157 --hover: (
155 --bg: props.get(core.$theme, --#{$theme}-static, --1000), 158 --bg: props.get(core.$theme, #{$key}-static, --1000),
156 --label: props.get(core.$theme, --#{$theme}-static, --1000-text), 159 --label: props.get(core.$theme, #{$key}-static, --1000-text),
157 ), 160 ),
158 161
159 --active: ( 162 --active: (
160 --bg: props.get(core.$theme, --#{$theme}-static, --1100), 163 --bg: props.get(core.$theme, #{$key}-static, --1100),
161 --label: props.get(core.$theme, --#{$theme}-static, --1100-text), 164 --label: props.get(core.$theme, #{$key}-static, --1100-text),
162 ), 165 ),
163 ) 166 )
164 )); 167 ));
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 25e68d2..205bb33 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -121,7 +121,7 @@
121 0 121 0
122 0 122 0
123 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 123 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
124 props.get(vars.$key-focus--outline-width); 124 props.get(vars.$key-focus--outline-color);
125 opacity: 1; 125 opacity: 1;
126 } 126 }
127 } 127 }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index bf5f6db..c0f10b7 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -8,7 +8,7 @@ $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; 8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
9$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; 9$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default;
10 10
11$hover--offset-b: props.def(--o-card--rounding, calc(-1 * props.get(core.$size--65))) !default; 11$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
12 12
13$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 13$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 14$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 4a55f36..9927a41 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -46,15 +46,18 @@ $static-themes: props.def(--o-divider);
46 )); 46 ));
47} 47}
48 48
49$themes-config: accent negative !default; 49$themes-config: (
50 accent: --accent,
51 negative: --negative,
52) !default;
50 53
51$themes: props.def(--o-divider); 54$themes: props.def(--o-divider);
52 55
53@each $theme in $themes-config { 56@each $theme, $key in $themes-config {
54 $themes: props.merge($themes, ( 57 $themes: props.merge($themes, (
55 --#{$theme}: ( 58 --#{$theme}: (
56 --bg: props.get(core.$theme, --#{$theme}, --800), 59 --bg: props.get(core.$theme, $key, --800),
57 --label: props.get(core.$theme, --#{$theme}, --1000), 60 --label: props.get(core.$theme, $key, --1000),
58 ) 61 )
59 )); 62 ));
60} 63}
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss
index 74a9f8a..95cf4f3 100644
--- a/src/objects/_menu.vars.scss
+++ b/src/objects/_menu.vars.scss
@@ -8,7 +8,7 @@ $separator-width: props.def(--o-menu--separator-width, props.get(core.$size--1
8 8
9$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; 9$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; 10$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default;
11$item--rounding: props.def(--o-menu--item--pad-b, props.get(core.$rounding)) !default; 11$item--rounding: props.def(--o-menu--item--rounding, 0em) !default;
12 12
13$item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 13$item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 14$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index 08516a6..f7dda4c 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -3,7 +3,7 @@
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; 5$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default;
6$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$size--50)) !default; 6$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$font-size--50)) !default;
7$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; 7$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default;
8 8
9$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; 9$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index d83194f..9f828b4 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -8,14 +8,19 @@ $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !defaul
8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; 8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default;
9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; 9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default;
10 10
11$themes-config: map.keys(map.get(config.$themes, config.$theme-default, light, --palettes)) !default; 11$themes-config: (
12 accent: --accent,
13 positive: --positive,
14 negative: --negative,
15 warning: --warning,
16) !default;
12 17
13$themes: props.def(--o-status-indicator); 18$themes: props.def(--o-status-indicator);
14 19
15@each $theme in $themes-config { 20@each $theme, $key in $themes-config {
16 @if $theme != --base { 21 @if $theme != --base {
17 $themes: props.merge($themes, ( 22 $themes: props.merge($themes, (
18 $theme: props.get(core.$theme, $theme, --700), 23 --#{$theme}: props.get(core.$theme, $key, --700),
19 )); 24 ));
20 } 25 }
21} 26}
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 7390672..c3d0120 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -3,7 +3,7 @@
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; 6$small--font-size: props.def(--s-implicit--small--font-size, 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; 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; 9$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index f285207..b76baa3 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,4 +1,4 @@
1@use 'sass:map'; 1@use 'sass:meta';
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/table.vars' as table; 4@use '../objects/table.vars' as table;
@@ -7,6 +7,8 @@
7@use 'tables.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
10 @include iro.bem-scope('tables') { 12 @include iro.bem-scope('tables') {
11 table { 13 table {
12 margin-block-start: props.get(vars.$margin-bs); 14 margin-block-start: props.get(vars.$margin-bs);