diff options
-rw-r--r-- | src/objects/_badge.vars.scss | 33 | ||||
-rw-r--r-- | src/objects/_button.vars.scss | 29 | ||||
-rw-r--r-- | src/objects/_card.scss | 2 | ||||
-rw-r--r-- | src/objects/_card.vars.scss | 2 | ||||
-rw-r--r-- | src/objects/_divider.vars.scss | 11 | ||||
-rw-r--r-- | src/objects/_menu.vars.scss | 2 | ||||
-rw-r--r-- | src/objects/_side-nav.vars.scss | 2 | ||||
-rw-r--r-- | src/objects/_status-indicator.vars.scss | 11 | ||||
-rw-r--r-- | src/scopes/_implicit.vars.scss | 2 | ||||
-rw-r--r-- | src/scopes/_tables.scss | 4 |
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); |