diff options
Diffstat (limited to 'src/objects')
55 files changed, 3197 insertions, 2362 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 7fe9d44..1dd4b84 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
| @@ -1,292 +1,130 @@ | |||
| 1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'sass:map'; |
| 3 | @use '../functions' as fn; | 3 | @use 'sass:meta'; |
| 4 | @use 'sass:string'; | ||
| 5 | @use 'iro-sass/src/bem'; | ||
| 6 | @use 'iro-sass/src/props'; | ||
| 7 | @use '../props' as *; | ||
| 4 | 8 | ||
| 5 | $sizes: 'sm' 'lg' 'xl' !default; | 9 | @forward 'action-button.vars'; |
| 6 | $static-themes: 'black' 'white' !default; | 10 | @use 'action-button.vars' as vars; |
| 7 | 11 | ||
| 8 | @mixin static-theme($theme: ()) { | 12 | @mixin -apply-theme($theme, $key: ()) { |
| 9 | border-color: fn.color(list.join($theme, --disabled --border)); | 13 | color: props.get($theme, list.join($key, --disabled --label-color)...); |
| 10 | background-color: fn.color(list.join($theme, --disabled --bg)); | 14 | background-color: props.get($theme, list.join($key, --disabled --bg-color)...); |
| 11 | color: fn.color(list.join($theme, --disabled --label)); | 15 | border-color: props.get($theme, list.join($key, --disabled --border-color)...); |
| 12 | 16 | ||
| 13 | &::after { | 17 | &::after { |
| 14 | outline-color: fn.color(list.join($theme, --key-focus --border)); | 18 | outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); |
| 15 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); | 19 | box-shadow: |
| 20 | 0 | ||
| 21 | 0 | ||
| 22 | 0 | ||
| 23 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 24 | props.get($theme, list.join($key, --key-focus --outline-color)...); | ||
| 16 | } | 25 | } |
| 17 | 26 | ||
| 18 | &:link, | 27 | &:link, |
| 19 | &:visited, | 28 | &:visited, |
| 20 | &:enabled { | 29 | &:enabled { |
| 21 | border-color: fn.color(list.join($theme, --border)); | 30 | color: props.get($theme, list.join($key, --label-color)...); |
| 22 | background-color: fn.color(list.join($theme, --bg)); | 31 | background-color: props.get($theme, list.join($key, --bg-color)...); |
| 23 | color: fn.color(list.join($theme, --label)); | 32 | border-color: props.get($theme, list.join($key, --border-color)...); |
| 24 | 33 | ||
| 25 | &:hover, | 34 | &:hover, |
| 26 | &:focus-visible { | 35 | &:focus-visible { |
| 27 | border-color: fn.color(list.join($theme, --hover --border)); | 36 | color: props.get($theme, list.join($key, --hover --label-color)...); |
| 28 | background-color: fn.color(list.join($theme, --hover --bg)); | 37 | background-color: props.get($theme, list.join($key, --hover --bg-color)...); |
| 29 | color: fn.color(list.join($theme, --hover --label)); | 38 | border-color: props.get($theme, list.join($key, --hover --border-color)...); |
| 30 | } | 39 | } |
| 31 | 40 | ||
| 32 | &:active { | 41 | &:active { |
| 33 | border-color: fn.color(list.join($theme, --active --border)); | 42 | color: props.get($theme, list.join($key, --active --label-color)...); |
| 34 | background-color: fn.color(list.join($theme, --active --bg)); | 43 | background-color: props.get($theme, list.join($key, --active --bg-color)...); |
| 35 | color: fn.color(list.join($theme, --active --label)); | 44 | border-color: props.get($theme, list.join($key, --active --border-color)...); |
| 36 | } | 45 | } |
| 37 | } | 46 | } |
| 38 | 47 | ||
| 39 | @include iro.bem-modifier('quiet') { | 48 | @include bem.modifier('quiet') { |
| 40 | border-color: transparent; | 49 | color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); |
| 41 | background-color: transparent; | 50 | background-color: transparent; |
| 42 | color: fn.color(list.join($theme, --quiet --disabled --label)); | 51 | border-color: transparent; |
| 43 | 52 | ||
| 44 | &:link, | 53 | &:link, |
| 45 | &:visited, | 54 | &:visited, |
| 46 | &:enabled { | 55 | &:enabled { |
| 47 | border-color: transparent; | 56 | color: props.get($theme, list.join($key, --quiet --label-color)...); |
| 48 | background-color: transparent; | 57 | background-color: transparent; |
| 49 | color: fn.color(list.join($theme, --quiet --label)); | 58 | border-color: transparent; |
| 50 | 59 | ||
| 51 | &:hover, | 60 | &:hover, |
| 52 | &:focus-visible { | 61 | &:focus-visible { |
| 62 | color: props.get($theme, list.join($key, --quiet --hover --label-color)...); | ||
| 63 | background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); | ||
| 53 | border-color: transparent; | 64 | border-color: transparent; |
| 54 | background-color: fn.color(list.join($theme, --quiet --hover --bg)); | ||
| 55 | color: fn.color(list.join($theme, --quiet --hover --label)); | ||
| 56 | } | 65 | } |
| 57 | 66 | ||
| 58 | &:active { | 67 | &:active { |
| 68 | color: props.get($theme, list.join($key, --quiet --active --label-color)...); | ||
| 69 | background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); | ||
| 59 | border-color: transparent; | 70 | border-color: transparent; |
| 60 | background-color: fn.color(list.join($theme, --quiet --active --bg)); | ||
| 61 | color: fn.color(list.join($theme, --quiet --active --label)); | ||
| 62 | } | 71 | } |
| 63 | } | 72 | } |
| 64 | } | 73 | } |
| 65 | 74 | ||
| 66 | @include iro.bem-is('selected') { | 75 | @include bem.is('selected') { |
| 67 | border-color: fn.color(list.join($theme, --selected --disabled --border)); | 76 | color: props.get($theme, list.join($key, --selected --disabled --label-color)...); |
| 68 | background-color: fn.color(list.join($theme, --selected --disabled --bg)); | 77 | background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); |
| 69 | color: fn.color(list.join($theme, --selected --disabled --label)); | 78 | border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); |
| 70 | 79 | ||
| 71 | &:link, | 80 | &:link, |
| 72 | &:visited, | 81 | &:visited, |
| 73 | &:enabled { | 82 | &:enabled { |
| 74 | border-color: fn.color(list.join($theme, --selected --border)); | 83 | color: props.get($theme, list.join($key, --selected --label-color)...); |
| 75 | background-color: fn.color(list.join($theme, --selected --bg)); | 84 | background-color: props.get($theme, list.join($key, --selected --bg-color)...); |
| 76 | color: fn.color(list.join($theme, --selected --label)); | 85 | border-color: props.get($theme, list.join($key, --selected --border-color)...); |
| 77 | 86 | ||
| 78 | &:hover, | 87 | &:hover, |
| 79 | &:focus-visible { | 88 | &:focus-visible { |
| 80 | border-color: fn.color(list.join($theme, --selected --hover --border)); | 89 | color: props.get($theme, list.join($key, --selected --hover --label-color)...); |
| 81 | background-color: fn.color(list.join($theme, --selected --hover --bg)); | 90 | background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); |
| 82 | color: fn.color(list.join($theme, --selected --hover --label)); | 91 | border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); |
| 83 | } | 92 | } |
| 84 | 93 | ||
| 85 | &:active { | 94 | &:active { |
| 86 | border-color: fn.color(list.join($theme, --selected --active --border)); | 95 | color: props.get($theme, list.join($key, --selected --active --label-color)...); |
| 87 | background-color: fn.color(list.join($theme, --selected --active --bg)); | 96 | background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); |
| 88 | color: fn.color(list.join($theme, --selected --active --label)); | 97 | border-color: props.get($theme, list.join($key, --selected --active --border-color)...); |
| 89 | } | 98 | } |
| 90 | } | 99 | } |
| 91 | } | 100 | } |
| 92 | } | 101 | } |
| 93 | 102 | ||
| 94 | @include iro.props-namespace('action-button') { | 103 | @mixin styles { |
| 95 | @include iro.props-store(( | 104 | @include materialize-at-root(meta.module-variables('vars')); |
| 96 | --dims: ( | ||
| 97 | --line-height: 1.4, | ||
| 98 | --pad-i: fn.global-dim(--size --150), | ||
| 99 | --pad-i-pill: fn.global-dim(--size --200), | ||
| 100 | --pad-b: fn.global-dim(--size --85), | ||
| 101 | --border: fn.global-dim(--border --thin), | ||
| 102 | --rounding: fn.global-dim(--rounding), | ||
| 103 | --font-size: fn.global-dim(--font-size --100), | ||
| 104 | |||
| 105 | --sm: ( | ||
| 106 | --pad-i: fn.global-dim(--size --100), | ||
| 107 | --pad-i-pill: fn.global-dim(--size --150), | ||
| 108 | --pad-b: fn.global-dim(--size --40), | ||
| 109 | --font-size: fn.global-dim(--font-size --75), | ||
| 110 | ), | ||
| 111 | --lg: ( | ||
| 112 | --pad-i: fn.global-dim(--size --175), | ||
| 113 | --pad-i-pill: fn.global-dim(--size --225), | ||
| 114 | --pad-b: fn.global-dim(--size --115), | ||
| 115 | --font-size: fn.global-dim(--font-size --150), | ||
| 116 | ), | ||
| 117 | --xl: ( | ||
| 118 | --pad-i: fn.global-dim(--size --225), | ||
| 119 | --pad-i-pill: fn.global-dim(--size --300), | ||
| 120 | --pad-b: fn.global-dim(--size --150), | ||
| 121 | --font-size: fn.global-dim(--font-size --200), | ||
| 122 | ), | ||
| 123 | |||
| 124 | --key-focus: ( | ||
| 125 | --border: fn.global-dim(--key-focus --border), | ||
| 126 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 127 | --outline: fn.global-dim(--key-focus --outline), | ||
| 128 | ), | ||
| 129 | ), | ||
| 130 | --colors: ( | ||
| 131 | --bg: fn.global-color(--base --75), | ||
| 132 | --label: fn.global-color(--text), | ||
| 133 | --border: fn.global-color(--border-strong), | ||
| 134 | |||
| 135 | --hover: ( | ||
| 136 | --bg: fn.global-color(--border-mute), | ||
| 137 | --label: fn.global-color(--heading), | ||
| 138 | --border: fn.global-color(--text-mute-more), | ||
| 139 | ), | ||
| 140 | --active: ( | ||
| 141 | --bg: fn.global-color(--border), | ||
| 142 | --label: fn.global-color(--heading), | ||
| 143 | --border: fn.global-color(--text-mute), | ||
| 144 | ), | ||
| 145 | --disabled: ( | ||
| 146 | --bg: fn.global-color(--bg-l1), | ||
| 147 | --label: fn.global-color(--border-strong), | ||
| 148 | --border: fn.global-color(--border), | ||
| 149 | ), | ||
| 150 | --key-focus: ( | ||
| 151 | --border: fn.global-color(--focus --border), | ||
| 152 | --outline: fn.global-color(--focus --outline), | ||
| 153 | ), | ||
| 154 | |||
| 155 | --selected: ( | ||
| 156 | --bg: fn.global-color(--text-mute), | ||
| 157 | --label: fn.global-color(--base --50), | ||
| 158 | --border: fn.global-color(--text-mute), | ||
| 159 | |||
| 160 | --hover: ( | ||
| 161 | --bg: fn.global-color(--text), | ||
| 162 | --label: fn.global-color(--base --50), | ||
| 163 | --border: fn.global-color(--text), | ||
| 164 | ), | ||
| 165 | --active: ( | ||
| 166 | --bg: fn.global-color(--heading), | ||
| 167 | --label: fn.global-color(--base --50), | ||
| 168 | --border: fn.global-color(--heading), | ||
| 169 | ), | ||
| 170 | --disabled: ( | ||
| 171 | --bg: fn.global-color(--border-mute), | ||
| 172 | --label: fn.global-color(--border-strong), | ||
| 173 | --border: fn.global-color(--border-mute), | ||
| 174 | ), | ||
| 175 | ), | ||
| 176 | |||
| 177 | --quiet: ( | ||
| 178 | --label: fn.global-color(--text), | ||
| 179 | |||
| 180 | --hover: ( | ||
| 181 | --bg: fn.global-color(--border-mute), | ||
| 182 | --label: fn.global-color(--heading), | ||
| 183 | ), | ||
| 184 | --active: ( | ||
| 185 | --bg: fn.global-color(--border), | ||
| 186 | --label: fn.global-color(--heading), | ||
| 187 | ), | ||
| 188 | --disabled: ( | ||
| 189 | --label: fn.global-color(--border-strong), | ||
| 190 | ), | ||
| 191 | ), | ||
| 192 | ), | ||
| 193 | )); | ||
| 194 | 105 | ||
| 195 | @each $theme in $static-themes { | 106 | @include bem.object('action-button') { |
| 196 | @include iro.props-store(( | ||
| 197 | --colors: ( | ||
| 198 | --static-#{$theme}: ( | ||
| 199 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
| 200 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 201 | --border: fn.global-color(--#{$theme}-transparent --400), | ||
| 202 | |||
| 203 | --hover: ( | ||
| 204 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 205 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 206 | --border: fn.global-color(--#{$theme}-transparent --500), | ||
| 207 | ), | ||
| 208 | --active: ( | ||
| 209 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
| 210 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 211 | --border: fn.global-color(--#{$theme}-transparent --600), | ||
| 212 | ), | ||
| 213 | --disabled: ( | ||
| 214 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
| 215 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 216 | --border: fn.global-color(--#{$theme}-transparent --300), | ||
| 217 | ), | ||
| 218 | --key-focus: ( | ||
| 219 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 220 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 221 | ), | ||
| 222 | |||
| 223 | --selected: ( | ||
| 224 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
| 225 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 226 | --border: fn.global-color(--#{$theme}-transparent --100), | ||
| 227 | |||
| 228 | --hover: ( | ||
| 229 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 230 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 231 | --border: fn.global-color(--#{$theme}-transparent --100), | ||
| 232 | ), | ||
| 233 | --active: ( | ||
| 234 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 235 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 236 | --border: fn.global-color(--#{$theme}-transparent --100), | ||
| 237 | ), | ||
| 238 | --disabled: ( | ||
| 239 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
| 240 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 241 | --border: fn.global-color(--#{$theme}-transparent --100), | ||
| 242 | ), | ||
| 243 | ), | ||
| 244 | |||
| 245 | --quiet: ( | ||
| 246 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 247 | |||
| 248 | --hover: ( | ||
| 249 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 250 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 251 | ), | ||
| 252 | --active: ( | ||
| 253 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
| 254 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 255 | ), | ||
| 256 | --disabled: ( | ||
| 257 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 258 | ), | ||
| 259 | ), | ||
| 260 | ), | ||
| 261 | ) | ||
| 262 | )); | ||
| 263 | } | ||
| 264 | |||
| 265 | @include iro.bem-object(iro.props-namespace()) { | ||
| 266 | display: inline-block; | ||
| 267 | position: relative; | 107 | position: relative; |
| 268 | padding-block: fn.dim(--pad-b); | 108 | display: inline-block; |
| 269 | padding-inline: fn.dim(--pad-i); | 109 | padding-block: props.get(vars.$pad-b); |
| 270 | border: fn.dim(--border) solid fn.color(--disabled --border); | 110 | padding-inline: props.get(vars.$pad-i); |
| 271 | border-radius: fn.dim(--rounding); | 111 | line-height: props.get(vars.$line-height); |
| 272 | background-color: fn.color(--disabled --bg); | ||
| 273 | color: fn.color(--disabled --label); | ||
| 274 | line-height: fn.dim(--line-height); | ||
| 275 | text-align: center; | 112 | text-align: center; |
| 276 | text-decoration: none; | 113 | text-decoration: none; |
| 277 | text-overflow: ellipsis; | 114 | text-overflow: ellipsis; |
| 278 | white-space: nowrap; | 115 | white-space: nowrap; |
| 116 | border: props.get(vars.$border-width) solid transparent; | ||
| 117 | border-radius: props.get(vars.$rounding); | ||
| 279 | 118 | ||
| 280 | &::after { | 119 | &::after { |
| 281 | content: ''; | ||
| 282 | display: none; | ||
| 283 | position: absolute; | 120 | position: absolute; |
| 121 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); | ||
| 284 | z-index: 1; | 122 | z-index: 1; |
| 285 | inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | 123 | display: none; |
| 286 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
| 287 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 288 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 289 | pointer-events: none; | 124 | pointer-events: none; |
| 125 | content: ''; | ||
| 126 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 127 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
| 290 | } | 128 | } |
| 291 | 129 | ||
| 292 | &:link, | 130 | &:link, |
| @@ -299,16 +137,20 @@ $static-themes: 'black' 'white' !default; | |||
| 299 | } | 137 | } |
| 300 | } | 138 | } |
| 301 | 139 | ||
| 302 | @include static-theme; | 140 | @include bem.elem('label') { |
| 141 | margin-inline: props.get(vars.$pad-i-label); | ||
| 142 | } | ||
| 143 | |||
| 144 | @include -apply-theme(vars.$default-theme); | ||
| 303 | 145 | ||
| 304 | @each $theme in $static-themes { | 146 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 305 | @include iro.bem-modifier(static-#{$theme}) { | 147 | @include bem.modifier(string.slice($theme, 3)) { |
| 306 | @include static-theme(--static-#{$theme}); | 148 | @include -apply-theme(vars.$themes, $theme); |
| 307 | } | 149 | } |
| 308 | } | 150 | } |
| 309 | 151 | ||
| 310 | @include iro.bem-modifier('pill') { | 152 | @include bem.modifier('pill') { |
| 311 | padding-inline: fn.dim(--pad-i-pill); | 153 | padding-inline: props.get(vars.$pad-i-pill); |
| 312 | border-radius: 100em; | 154 | border-radius: 100em; |
| 313 | 155 | ||
| 314 | &::after { | 156 | &::after { |
| @@ -316,26 +158,54 @@ $static-themes: 'black' 'white' !default; | |||
| 316 | } | 158 | } |
| 317 | } | 159 | } |
| 318 | 160 | ||
| 319 | @each $size in $sizes { | 161 | @include bem.modifier('icon') { |
| 320 | @include iro.bem-modifier($size) { | 162 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); |
| 321 | padding-block: fn.dim(--#{$size} --pad-b); | 163 | padding-inline: 0; |
| 322 | padding-inline: fn.dim(--#{$size} --pad-i); | 164 | } |
| 323 | font-size: fn.dim(--#{$size} --font-size); | 165 | |
| 166 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
| 167 | @include bem.modifier($mod) { | ||
| 168 | padding-block: props.get($pad-b); | ||
| 169 | padding-inline: props.get($pad-i); | ||
| 170 | font-size: props.get($font-size); | ||
| 171 | |||
| 172 | @include bem.elem('label') { | ||
| 173 | margin-inline: props.get($pad-i-label); | ||
| 174 | } | ||
| 324 | 175 | ||
| 325 | @include iro.bem-modifier('pill') { | 176 | @include bem.modifier('pill') { |
| 326 | padding-inline: fn.dim(--#{$size} --pad-i-pill); | 177 | padding-inline: props.get($pad-i-pill); |
| 178 | } | ||
| 179 | |||
| 180 | @include bem.modifier('icon') { | ||
| 181 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); | ||
| 182 | padding-inline: 0; | ||
| 327 | } | 183 | } |
| 328 | } | 184 | } |
| 329 | } | 185 | } |
| 330 | 186 | ||
| 331 | @include iro.bem-modifier('icon') { | 187 | @include bem.modifier('align-block') { |
| 332 | inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); | 188 | margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); |
| 333 | padding-inline: 0; | ||
| 334 | 189 | ||
| 335 | @each $size in $sizes { | 190 | @include bem.modifier('pill') { |
| 336 | @include iro.bem-modifier($size) { | 191 | margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); |
| 337 | inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b)); | 192 | } |
| 338 | padding-inline: 0; | 193 | |
| 194 | @include bem.modifier('icon') { | ||
| 195 | margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
| 196 | } | ||
| 197 | |||
| 198 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
| 199 | @include bem.modifier($mod) { | ||
| 200 | margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); | ||
| 201 | |||
| 202 | @include bem.modifier('pill') { | ||
| 203 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); | ||
| 204 | } | ||
| 205 | |||
| 206 | @include bem.modifier('icon') { | ||
| 207 | margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
| 208 | } | ||
| 339 | } | 209 | } |
| 340 | } | 210 | } |
| 341 | } | 211 | } |
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss new file mode 100644 index 0000000..8c3d510 --- /dev/null +++ b/src/objects/_action-button.vars.scss | |||
| @@ -0,0 +1,193 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $line-height: props.def(--o-action-button--line-height, 1.4) !default; | ||
| 7 | $pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default; | ||
| 8 | $pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default; | ||
| 9 | $pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default; | ||
| 10 | $pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; | ||
| 11 | $border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; | ||
| 12 | $rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; | ||
| 13 | $font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; | ||
| 14 | |||
| 15 | $pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default; | ||
| 16 | $pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
| 17 | $pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default; | ||
| 18 | $pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; | ||
| 19 | $font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 20 | |||
| 21 | $pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default; | ||
| 22 | $pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default; | ||
| 23 | $pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default; | ||
| 24 | $pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; | ||
| 25 | $font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; | ||
| 26 | |||
| 27 | $pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default; | ||
| 28 | $pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default; | ||
| 29 | $pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default; | ||
| 30 | $pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; | ||
| 31 | $font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; | ||
| 32 | |||
| 33 | $key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 34 | $key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 35 | $key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 36 | |||
| 37 | $fixed-sizes: ( | ||
| 38 | 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, | ||
| 39 | 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, | ||
| 40 | 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, | ||
| 41 | ) !default; | ||
| 42 | |||
| 43 | $themes: props.def(--o-action-button, (), 'color'); | ||
| 44 | |||
| 45 | $default-theme-override: () !default; | ||
| 46 | $default-theme: map.deep-merge(( | ||
| 47 | --bg-color: props.get(core.$theme, --base, --75), | ||
| 48 | --label-color: props.get(core.$theme, --text), | ||
| 49 | --border-color: props.get(core.$theme, --border-strong), | ||
| 50 | |||
| 51 | --hover: ( | ||
| 52 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 53 | --label-color: props.get(core.$theme, --heading), | ||
| 54 | --border-color: props.get(core.$theme, --text-mute-more), | ||
| 55 | ), | ||
| 56 | |||
| 57 | --active: ( | ||
| 58 | --bg-color: props.get(core.$theme, --border), | ||
| 59 | --label-color: props.get(core.$theme, --heading), | ||
| 60 | --border-color: props.get(core.$theme, --text-mute), | ||
| 61 | ), | ||
| 62 | |||
| 63 | --disabled: ( | ||
| 64 | --bg-color: props.get(core.$theme, --bg-l1), | ||
| 65 | --label-color: props.get(core.$theme, --border-strong), | ||
| 66 | --border-color: props.get(core.$theme, --border), | ||
| 67 | ), | ||
| 68 | |||
| 69 | --key-focus: ( | ||
| 70 | --border-color: props.get(core.$theme, --focus, --border), | ||
| 71 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
| 72 | ), | ||
| 73 | |||
| 74 | --selected: ( | ||
| 75 | --bg-color: props.get(core.$theme, --heading), | ||
| 76 | --label-color: props.get(core.$theme, --base, --50), | ||
| 77 | --border-color: props.get(core.$theme, --heading), | ||
| 78 | |||
| 79 | --hover: ( | ||
| 80 | --bg-color: props.get(core.$theme, --text), | ||
| 81 | --label-color: props.get(core.$theme, --base, --50), | ||
| 82 | --border-color: props.get(core.$theme, --text), | ||
| 83 | ), | ||
| 84 | |||
| 85 | --active: ( | ||
| 86 | --bg-color: props.get(core.$theme, --text-mute), | ||
| 87 | --label-color: props.get(core.$theme, --base, --50), | ||
| 88 | --border-color: props.get(core.$theme, --text-mute), | ||
| 89 | ), | ||
| 90 | |||
| 91 | --disabled: ( | ||
| 92 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 93 | --label-color: props.get(core.$theme, --border-strong), | ||
| 94 | --border-color: props.get(core.$theme, --border-mute), | ||
| 95 | ), | ||
| 96 | ), | ||
| 97 | |||
| 98 | --quiet: ( | ||
| 99 | --label-color: props.get(core.$theme, --text), | ||
| 100 | |||
| 101 | --hover: ( | ||
| 102 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 103 | --label-color: props.get(core.$theme, --heading), | ||
| 104 | ), | ||
| 105 | |||
| 106 | --active: ( | ||
| 107 | --bg-color: props.get(core.$theme, --border), | ||
| 108 | --label-color: props.get(core.$theme, --heading), | ||
| 109 | ), | ||
| 110 | |||
| 111 | --disabled: ( | ||
| 112 | --label-color: props.get(core.$theme, --border-strong), | ||
| 113 | ), | ||
| 114 | ), | ||
| 115 | ), $default-theme-override) !default; | ||
| 116 | $default-theme: props.def(--o-action-button, $default-theme, 'color'); | ||
| 117 | |||
| 118 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 119 | $button-theme: --static-#{string.slice($theme, 3)}; | ||
| 120 | |||
| 121 | $themes: props.merge($themes, ( | ||
| 122 | $button-theme: ( | ||
| 123 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 124 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 125 | --border-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 126 | |||
| 127 | --hover: ( | ||
| 128 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 129 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 130 | --border-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 131 | ), | ||
| 132 | |||
| 133 | --active: ( | ||
| 134 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 135 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 136 | --border-color: props.get(core.$transparent-colors, $theme, --600), | ||
| 137 | ), | ||
| 138 | |||
| 139 | --disabled: ( | ||
| 140 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 141 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 142 | --border-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 143 | ), | ||
| 144 | |||
| 145 | --key-focus: ( | ||
| 146 | --border-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 147 | --outline-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 148 | ), | ||
| 149 | |||
| 150 | --selected: ( | ||
| 151 | --bg-color: props.get(core.$transparent-colors, $theme, --800), | ||
| 152 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 153 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 154 | |||
| 155 | --hover: ( | ||
| 156 | --bg-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 157 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 158 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 159 | ), | ||
| 160 | |||
| 161 | --active: ( | ||
| 162 | --bg-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 163 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 164 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 165 | ), | ||
| 166 | |||
| 167 | --disabled: ( | ||
| 168 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 169 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 170 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 171 | ), | ||
| 172 | ), | ||
| 173 | |||
| 174 | --quiet: ( | ||
| 175 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 176 | |||
| 177 | --hover: ( | ||
| 178 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 179 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 180 | ), | ||
| 181 | |||
| 182 | --active: ( | ||
| 183 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 184 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 185 | ), | ||
| 186 | |||
| 187 | --disabled: ( | ||
| 188 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 189 | ), | ||
| 190 | ), | ||
| 191 | ) | ||
| 192 | )); | ||
| 193 | } | ||
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index 067c00c..825f7ce 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss | |||
| @@ -1,42 +1,25 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use '../functions' as fn; | 2 | @use 'sass:meta'; |
| 3 | @use 'iro-sass/src/bem'; | ||
| 4 | @use 'iro-sass/src/props'; | ||
| 5 | @use '../props' as *; | ||
| 3 | 6 | ||
| 4 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | 7 | @forward 'alert.vars'; |
| 8 | @use 'alert.vars' as vars; | ||
| 5 | 9 | ||
| 6 | @include iro.props-namespace('alert') { | 10 | @mixin styles { |
| 7 | @include iro.props-store(( | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --border: fn.global-dim(--border --medium), | ||
| 10 | --pad-i: fn.global-dim(--size --250), | ||
| 11 | --pad-b: fn.global-dim(--size --200), | ||
| 12 | --rounding: fn.global-dim(--rounding), | ||
| 13 | ), | ||
| 14 | --colors: ( | ||
| 15 | --bg: fn.global-color(--bg-l2), | ||
| 16 | --border: fn.global-color(--text-mute-more), | ||
| 17 | ), | ||
| 18 | )); | ||
| 19 | 12 | ||
| 20 | @each $theme in $themes { | 13 | @include bem.object('alert') { |
| 21 | @include iro.props-store(( | 14 | padding-block: props.get(vars.$pad-b); |
| 22 | --colors: ( | 15 | padding-inline: props.get(vars.$pad-i); |
| 23 | --#{$theme}: ( | 16 | background-color: props.get(vars.$bg-color); |
| 24 | --border: fn.global-color(--#{$theme} --700), | 17 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); |
| 25 | ), | 18 | border-radius: props.get(vars.$rounding); |
| 26 | ), | ||
| 27 | )); | ||
| 28 | } | ||
| 29 | |||
| 30 | @include iro.bem-object(iro.props-namespace()) { | ||
| 31 | padding-block: fn.dim(--pad-b); | ||
| 32 | padding-inline: fn.dim(--pad-i); | ||
| 33 | border: fn.dim(--border) solid fn.color(--border); | ||
| 34 | border-radius: fn.dim(--rounding); | ||
| 35 | background-color: fn.color(--bg); | ||
| 36 | 19 | ||
| 37 | @each $theme in $themes { | 20 | @each $mod, $theme in vars.$themes-config { |
| 38 | @include iro.bem-modifier($theme) { | 21 | @include bem.modifier($mod) { |
| 39 | border-color: fn.color(--#{$theme} --border); | 22 | border-color: props.get(vars.$themes, $theme, --border-color); |
| 40 | } | 23 | } |
| 41 | } | 24 | } |
| 42 | } | 25 | } |
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss new file mode 100644 index 0000000..53c9e68 --- /dev/null +++ b/src/objects/_alert.vars.scss | |||
| @@ -0,0 +1,27 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default; | ||
| 5 | $pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; | ||
| 6 | $pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; | ||
| 7 | $rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; | ||
| 8 | |||
| 9 | $bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | ||
| 10 | $border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 11 | |||
| 12 | $themes-config: ( | ||
| 13 | accent: --accent, | ||
| 14 | positive: --positive, | ||
| 15 | negative: --negative, | ||
| 16 | warning: --warning, | ||
| 17 | ) !default; | ||
| 18 | |||
| 19 | $themes: props.def(--o-alert, (), 'color'); | ||
| 20 | |||
| 21 | @each $theme, $key in $themes-config { | ||
| 22 | $themes: props.merge($themes, ( | ||
| 23 | $key: ( | ||
| 24 | --border-color: props.get(core.$theme, $key, --700), | ||
| 25 | ) | ||
| 26 | )); | ||
| 27 | } | ||
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 19bff10..81396e3 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss | |||
| @@ -1,159 +1,118 @@ | |||
| 1 | @use 'sass:list'; | 1 | @use 'sass:meta'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use '../functions' as fn; | 3 | @use 'iro-sass/src/props'; |
| 4 | 4 | @use '../props' as *; | |
| 5 | $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | 5 | |
| 6 | 6 | @forward 'avatar.vars'; | |
| 7 | @mixin status($size: ()) { | 7 | @use 'avatar.vars' as vars; |
| 8 | @include iro.bem-elem('status') { | 8 | |
| 9 | inline-size: fn.dim(list.join($size, --indicator-size)); | 9 | @mixin status($indicator-size) { |
| 10 | block-size: fn.dim(list.join($size, --indicator-size)); | 10 | @include bem.elem('status') { |
| 11 | 11 | inline-size: props.get($indicator-size); | |
| 12 | @include iro.bem-next-elem('content') { | 12 | block-size: props.get($indicator-size); |
| 13 | mask-image: radial-gradient( | 13 | |
| 14 | circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at | 14 | @include bem.sibling-elem('content') { |
| 15 | calc(100% - .5 * fn.dim(list.join($size, --indicator-size))) | 15 | mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at |
| 16 | calc(100% - .5 * fn.dim(list.join($size, --indicator-size))), | 16 | calc(100% - .5 * props.get($indicator-size)) |
| 17 | transparent 95%, | 17 | calc(100% - .5 * props.get($indicator-size)), |
| 18 | #fff | 18 | transparent 95%, |
| 19 | ); | 19 | #fff); |
| 20 | } | 20 | } |
| 21 | } | 21 | } |
| 22 | } | 22 | } |
| 23 | 23 | ||
| 24 | @include iro.props-namespace('avatar') { | 24 | @mixin styles { |
| 25 | @include iro.props-store(( | 25 | @include materialize-at-root(meta.module-variables('vars')); |
| 26 | --dims: ( | 26 | |
| 27 | --size: fn.global-dim(--size --500), | 27 | @include bem.object('avatar') { |
| 28 | --font-size: fn.global-dim(--font-size --100), | ||
| 29 | --indicator-size: fn.global-dim(--size --150), | ||
| 30 | --indicator-spacing: fn.global-dim(--size --40), | ||
| 31 | --rounding: 25%, | ||
| 32 | |||
| 33 | --xxxl: ( | ||
| 34 | --size: fn.global-dim(--size --1600), | ||
| 35 | --font-size: fn.global-dim(--font-size --800), | ||
| 36 | --indicator-size: fn.global-dim(--size --400), | ||
| 37 | ), | ||
| 38 | --xxl: ( | ||
| 39 | --size: fn.global-dim(--size --1200), | ||
| 40 | --font-size: fn.global-dim(--font-size --600), | ||
| 41 | --indicator-size: fn.global-dim(--size --300), | ||
| 42 | ), | ||
| 43 | --xl: ( | ||
| 44 | --size: fn.global-dim(--size --800), | ||
| 45 | --font-size: fn.global-dim(--font-size --300), | ||
| 46 | --indicator-size: fn.global-dim(--size --225), | ||
| 47 | ), | ||
| 48 | --lg: ( | ||
| 49 | --size: fn.global-dim(--size --650), | ||
| 50 | --font-size: fn.global-dim(--font-size --200), | ||
| 51 | --indicator-size: fn.global-dim(--size --175), | ||
| 52 | ), | ||
| 53 | --sm: ( | ||
| 54 | --size: fn.global-dim(--size --375), | ||
| 55 | --font-size: fn.global-dim(--font-size --75), | ||
| 56 | --indicator-size: fn.global-dim(--size --125), | ||
| 57 | ), | ||
| 58 | --xs: ( | ||
| 59 | --size: fn.global-dim(--size --250), | ||
| 60 | --font-size: fn.global-dim(--font-size --50), | ||
| 61 | --indicator-size: fn.global-dim(--size --100), | ||
| 62 | ), | ||
| 63 | |||
| 64 | --key-focus: ( | ||
| 65 | --border: fn.global-dim(--key-focus --border), | ||
| 66 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 67 | --outline: fn.global-dim(--key-focus --outline), | ||
| 68 | ), | ||
| 69 | ), | ||
| 70 | --colors: ( | ||
| 71 | --h: 354, | ||
| 72 | --s: 44%, | ||
| 73 | --l: 45%, | ||
| 74 | |||
| 75 | --key-focus: ( | ||
| 76 | --border: fn.global-color(--focus --border), | ||
| 77 | --outline: fn.global-color(--focus --outline), | ||
| 78 | ), | ||
| 79 | ), | ||
| 80 | )); | ||
| 81 | |||
| 82 | @include iro.bem-object(iro.props-namespace()) { | ||
| 83 | display: inline-block; | ||
| 84 | position: relative; | 28 | position: relative; |
| 85 | border-radius: fn.dim(--rounding); | 29 | display: inline-block; |
| 86 | font-size: fn.dim(--font-size); | 30 | font-size: props.get(vars.$font-size); |
| 87 | font-style: normal; | 31 | font-style: normal; |
| 88 | vertical-align: .05em; | 32 | vertical-align: .05em; |
| 33 | border-radius: props.get(vars.$rounding); | ||
| 89 | 34 | ||
| 90 | &::after { | 35 | &::after { |
| 91 | content: ''; | ||
| 92 | display: none; | ||
| 93 | position: absolute; | 36 | position: absolute; |
| 37 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 94 | z-index: 1; | 38 | z-index: 1; |
| 95 | inset: calc(-1 * fn.dim(--key-focus --border-offset)); | 39 | display: none; |
| 96 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
| 97 | border-radius: fn.dim(--rounding); | ||
| 98 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 99 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 100 | pointer-events: none; | 40 | pointer-events: none; |
| 41 | content: ''; | ||
| 42 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 43 | border-radius: props.get(vars.$rounding); | ||
| 44 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
| 45 | box-shadow: | ||
| 46 | 0 | ||
| 47 | 0 | ||
| 48 | 0 | ||
| 49 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 50 | props.get(vars.$key-focus--outline-color); | ||
| 101 | } | 51 | } |
| 102 | 52 | ||
| 103 | @include iro.bem-elem('status') { | 53 | @include bem.elem('status') { |
| 104 | position: absolute; | 54 | position: absolute; |
| 105 | inset-inline-end: 0; | ||
| 106 | inset-block-end: 0; | 55 | inset-block-end: 0; |
| 56 | inset-inline-end: 0; | ||
| 107 | } | 57 | } |
| 108 | 58 | ||
| 109 | @include status; | 59 | @include status(vars.$indicator-size); |
| 110 | 60 | ||
| 111 | @include iro.bem-elem('content') { | 61 | @include bem.elem('content') { |
| 112 | display: block; | 62 | display: block; |
| 113 | inline-size: fn.dim(--size); | 63 | inline-size: props.get(vars.$size); |
| 114 | block-size: fn.dim(--size); | 64 | block-size: props.get(vars.$size); |
| 115 | border-radius: fn.dim(--rounding); | 65 | line-height: props.get(vars.$size); |
| 116 | line-height: fn.dim(--size); | ||
| 117 | text-align: center; | 66 | text-align: center; |
| 118 | object-fit: cover; | 67 | object-fit: cover; |
| 119 | object-position: center center; | 68 | object-position: center center; |
| 69 | border-radius: props.get(vars.$rounding); | ||
| 120 | } | 70 | } |
| 121 | 71 | ||
| 122 | @include iro.bem-modifier('circle') { | 72 | @include bem.modifier('circle') { |
| 123 | border-radius: 100%; | 73 | border-radius: 100%; |
| 124 | 74 | ||
| 125 | &::after { | 75 | &::after { |
| 126 | border-radius: 100%; | 76 | border-radius: 100%; |
| 127 | } | 77 | } |
| 128 | 78 | ||
| 129 | @include iro.bem-elem('content') { | 79 | @include bem.elem('content') { |
| 130 | border-radius: 100%; | 80 | border-radius: 100%; |
| 131 | } | 81 | } |
| 132 | } | 82 | } |
| 133 | 83 | ||
| 134 | @include iro.bem-modifier('placeholder') { | 84 | @include bem.modifier('placeholder') { |
| 135 | @include iro.bem-elem('content') { | 85 | @include bem.elem('content') { |
| 136 | background-color: hsl(0, 0%, fn.color(--l)); | 86 | background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); |
| 137 | } | 87 | } |
| 138 | } | 88 | } |
| 139 | 89 | ||
| 140 | @include iro.bem-modifier('colored') { | 90 | @include bem.modifier('colored') { |
| 141 | @include iro.bem-elem('content') { | 91 | @include bem.elem('content') { |
| 142 | background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); | ||
| 143 | color: #fff; | 92 | color: #fff; |
| 93 | background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); | ||
| 94 | } | ||
| 95 | } | ||
| 96 | |||
| 97 | @include bem.modifier('colored-gradient') { | ||
| 98 | @include bem.elem('content') { | ||
| 99 | color: #fff; | ||
| 100 | background: linear-gradient(props.get(vars.$bg-angle), | ||
| 101 | hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), | ||
| 102 | hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); | ||
| 144 | } | 103 | } |
| 145 | } | 104 | } |
| 146 | 105 | ||
| 147 | @each $size in $sizes { | 106 | @each $mod, $size, $font-size, $indicator-size in vars.$sizes { |
| 148 | @include iro.bem-modifier($size) { | 107 | @include bem.modifier($mod) { |
| 149 | font-size: fn.dim(--#{$size} --font-size); | 108 | font-size: props.get($font-size); |
| 150 | 109 | ||
| 151 | @include status(--#{$size}); | 110 | @include status($indicator-size); |
| 152 | 111 | ||
| 153 | @include iro.bem-elem('content') { | 112 | @include bem.elem('content') { |
| 154 | inline-size: fn.dim(--#{$size} --size); | 113 | inline-size: props.get($size); |
| 155 | block-size: fn.dim(--#{$size} --size); | 114 | block-size: props.get($size); |
| 156 | line-height: fn.dim(--#{$size} --size); | 115 | line-height: props.get($size); |
| 157 | } | 116 | } |
| 158 | } | 117 | } |
| 159 | } | 118 | } |
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss new file mode 100644 index 0000000..9986de5 --- /dev/null +++ b/src/objects/_avatar.vars.scss | |||
| @@ -0,0 +1,58 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $size: props.def(--o-avatar--size, props.get(core.$size--500)) !default; | ||
| 5 | $font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default; | ||
| 6 | $indicator-size: props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default; | ||
| 7 | $indicator-spacing: props.def(--o-avatar--indicator-spacing, props.get(core.$size--40)) !default; | ||
| 8 | $rounding: props.def(--o-avatar--rounding, 25%) !default; | ||
| 9 | |||
| 10 | $size--xxxl: props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default; | ||
| 11 | $font-size--xxxl: props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default; | ||
| 12 | $indicator-size--xxxl: props.def(--o-avatar--xxxl--indicator-size, props.get(core.$size--400)) !default; | ||
| 13 | |||
| 14 | $size--xxl: props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default; | ||
| 15 | $font-size--xxl: props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default; | ||
| 16 | $indicator-size--xxl: props.def(--o-avatar--xxl--indicator-size, props.get(core.$size--300)) !default; | ||
| 17 | |||
| 18 | $size--xl: props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default; | ||
| 19 | $font-size--xl: props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default; | ||
| 20 | $indicator-size--xl: props.def(--o-avatar--xl--indicator-size, props.get(core.$size--225)) !default; | ||
| 21 | |||
| 22 | $size--lg: props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default; | ||
| 23 | $font-size--lg: props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default; | ||
| 24 | $indicator-size--lg: props.def(--o-avatar--lg--indicator-size, props.get(core.$size--175)) !default; | ||
| 25 | |||
| 26 | $size--sm: props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default; | ||
| 27 | $font-size--sm: props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 28 | $indicator-size--sm: props.def(--o-avatar--sm--indicator-size, props.get(core.$size--125)) !default; | ||
| 29 | |||
| 30 | $size--xs: props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default; | ||
| 31 | $font-size--xs: props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default; | ||
| 32 | $indicator-size--xs: props.def(--o-avatar--xs--indicator-size, props.get(core.$size--100)) !default; | ||
| 33 | |||
| 34 | $key-focus--border-width: props.def(--o-avatar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 35 | $key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 36 | $key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 37 | |||
| 38 | $bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default; | ||
| 39 | $bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default; | ||
| 40 | $bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default; | ||
| 41 | |||
| 42 | $bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default; | ||
| 43 | $bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default; | ||
| 44 | $bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default; | ||
| 45 | |||
| 46 | $bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default; | ||
| 47 | |||
| 48 | $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 49 | $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 50 | |||
| 51 | $sizes: ( | ||
| 52 | 'xs' $size--xs $font-size--xs $indicator-size--xs, | ||
| 53 | 'sm' $size--sm $font-size--sm $indicator-size--sm, | ||
| 54 | 'lg' $size--lg $font-size--lg $indicator-size--lg, | ||
| 55 | 'xl' $size--xl $font-size--xl $indicator-size--xl, | ||
| 56 | 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, | ||
| 57 | 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, | ||
| 58 | ) !default; | ||
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index d0eaf52..9cc9e2e 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss | |||
| @@ -1,26 +1,23 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('backdrop') { | 6 | @forward 'backdrop.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'backdrop.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --z-index: 10000, | ||
| 8 | --blur: 2em, | ||
| 9 | ), | ||
| 10 | --colors: ( | ||
| 11 | --bg: rgba(#000, .75), | ||
| 12 | ), | ||
| 13 | )); | ||
| 14 | 8 | ||
| 15 | @include iro.bem-object(iro.props-namespace()) { | 9 | @mixin styles { |
| 16 | display: flex; | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 11 | |||
| 12 | @include bem.object('backdrop') { | ||
| 17 | position: fixed; | 13 | position: fixed; |
| 18 | z-index: fn.dim(--z-index); | ||
| 19 | inset: 0; | 14 | inset: 0; |
| 15 | z-index: props.get(vars.$z-index); | ||
| 20 | box-sizing: border-box; | 16 | box-sizing: border-box; |
| 17 | display: flex; | ||
| 21 | flex-direction: column; | 18 | flex-direction: column; |
| 22 | overflow: auto; | 19 | overflow: auto; |
| 23 | background-color: fn.color(--bg); | 20 | background-color: props.get(vars.$bg-color); |
| 24 | backdrop-filter: blur(fn.dim(--blur)); | 21 | backdrop-filter: blur(props.get(vars.$blur)); |
| 25 | } | 22 | } |
| 26 | } | 23 | } |
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss new file mode 100644 index 0000000..8bae733 --- /dev/null +++ b/src/objects/_backdrop.vars.scss | |||
| @@ -0,0 +1,6 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $z-index: props.def(--o-backdrop--z-index, 10000) !default; | ||
| 5 | $blur: props.def(--o-backdrop--blur, 2em) !default; | ||
| 6 | $bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600), 'color') !default; | ||
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 4e1662f..9f3e307 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
| @@ -1,298 +1,142 @@ | |||
| 1 | @use 'sass:list'; | ||
| 2 | @use 'sass:map'; | ||
| 3 | @use 'sass:meta'; | ||
| 1 | @use 'sass:string'; | 4 | @use 'sass:string'; |
| 2 | @use 'iro-sass/src/index' as iro; | 5 | @use 'iro-sass/src/bem'; |
| 3 | @use '../functions' as fn; | 6 | @use 'iro-sass/src/props'; |
| 7 | @use '../props' as *; | ||
| 8 | @use '../core.vars' as core; | ||
| 4 | 9 | ||
| 5 | $sizes: 'sm' 'lg' 'xl' !default; | 10 | @forward 'badge.vars'; |
| 6 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | 11 | @use 'badge.vars' as vars; |
| 7 | $static-themes: 'black' 'white' !default; | ||
| 8 | 12 | ||
| 9 | @mixin theme($theme) { | 13 | @mixin -apply-theme($theme, $key: (), $static: false) { |
| 10 | background-color: fn.color(--#{$theme} --bg); | 14 | color: props.get($theme, list.join($key, --label)...); |
| 11 | color: fn.color(--#{$theme} --label); | 15 | background-color: props.get($theme, list.join($key, --bg)...); |
| 12 | 16 | ||
| 13 | &:link, | 17 | &:link, |
| 14 | &:visited, | 18 | &:visited, |
| 15 | &:enabled { | 19 | &:enabled { |
| 16 | &:hover, | 20 | &:hover, |
| 17 | &:focus-visible { | 21 | &:focus-visible { |
| 18 | background-color: fn.color(--#{$theme} --hover --bg); | 22 | color: props.get($theme, list.join($key, --hover --label)...); |
| 19 | color: fn.color(--#{$theme} --hover --label); | 23 | background-color: props.get($theme, list.join($key, --hover --bg)...); |
| 20 | } | 24 | } |
| 21 | 25 | ||
| 22 | &:active { | 26 | &:active { |
| 23 | background-color: fn.color(--#{$theme} --active --bg); | 27 | color: props.get($theme, list.join($key, --active --label)...); |
| 24 | color: fn.color(--#{$theme} --active --label); | 28 | background-color: props.get($theme, list.join($key, --active --bg)...); |
| 25 | } | 29 | } |
| 26 | } | 30 | } |
| 27 | 31 | ||
| 28 | @include iro.bem-modifier('quiet') { | 32 | @include bem.modifier('quiet') { |
| 29 | background-color: fn.color(--#{$theme}-quiet --bg); | 33 | color: props.get($theme, list.join($key, --quiet --label)...); |
| 30 | color: fn.color(--#{$theme}-quiet --label); | 34 | background-color: props.get($theme, list.join($key, --quiet --bg)...); |
| 31 | 35 | ||
| 32 | &:link, | 36 | &:link, |
| 33 | &:visited, | 37 | &:visited, |
| 34 | &:enabled { | 38 | &:enabled { |
| 35 | &:hover, | 39 | &:hover, |
| 36 | &:focus-visible { | 40 | &:focus-visible { |
| 37 | background-color: fn.color(--#{$theme}-quiet --hover --bg); | 41 | color: props.get($theme, list.join($key, --quiet --hover --label)...); |
| 38 | color: fn.color(--#{$theme}-quiet --hover --label); | 42 | background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); |
| 39 | } | 43 | } |
| 40 | 44 | ||
| 41 | &:active { | 45 | &:active { |
| 42 | background-color: fn.color(--#{$theme}-quiet --active --bg); | 46 | color: props.get($theme, list.join($key, --quiet --active --label)...); |
| 43 | color: fn.color(--#{$theme}-quiet --active --label); | 47 | background-color: props.get($theme, list.join($key, --quiet --active --bg)...); |
| 44 | } | 48 | } |
| 45 | } | 49 | } |
| 46 | } | 50 | } |
| 47 | 51 | ||
| 48 | @if string.slice($theme, 1, 7) == 'static-' { | 52 | @if $static { |
| 49 | &::after { | 53 | &::after { |
| 50 | outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); | 54 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); |
| 51 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); | 55 | box-shadow: |
| 56 | 0 | ||
| 57 | 0 | ||
| 58 | 0 | ||
| 59 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 60 | props.get($theme, list.join($key, --key-focus --outline)...); | ||
| 52 | } | 61 | } |
| 53 | } | 62 | } |
| 54 | } | 63 | } |
| 55 | 64 | ||
| 56 | @include iro.props-namespace('badge') { | 65 | @mixin styles { |
| 57 | @include iro.props-store(( | 66 | @include materialize-at-root(meta.module-variables('vars')); |
| 58 | --dims: ( | ||
| 59 | --pad-b: fn.global-dim(--size --50), | ||
| 60 | --pad-i: fn.global-dim(--size --100), | ||
| 61 | --pad-i-pill: fn.global-dim(--size --150), | ||
| 62 | --pad-i-label: fn.global-dim(--size --50), | ||
| 63 | --rounding: fn.global-dim(--rounding), | ||
| 64 | --font-size: fn.global-dim(--font-size --75), | ||
| 65 | 67 | ||
| 66 | --sm: ( | 68 | @include bem.object('badge') { |
| 67 | --pad-b: fn.global-dim(--size --25), | ||
| 68 | --pad-i: fn.global-dim(--size --75), | ||
| 69 | --pad-i-pill: fn.global-dim(--size --125), | ||
| 70 | --pad-i-label: fn.global-dim(--size --25), | ||
| 71 | --font-size: fn.global-dim(--font-size --50), | ||
| 72 | ), | ||
| 73 | --lg: ( | ||
| 74 | --pad-b: fn.global-dim(--size --75), | ||
| 75 | --pad-i: fn.global-dim(--size --125), | ||
| 76 | --pad-i-pill: fn.global-dim(--size --175), | ||
| 77 | --pad-i-label: fn.global-dim(--size --50), | ||
| 78 | --font-size: fn.global-dim(--font-size --100), | ||
| 79 | ), | ||
| 80 | --xl: ( | ||
| 81 | --pad-b: fn.global-dim(--size --100), | ||
| 82 | --pad-i: fn.global-dim(--size --150), | ||
| 83 | --pad-i-pill: fn.global-dim(--size --225), | ||
| 84 | --pad-i-label: fn.global-dim(--size --75), | ||
| 85 | --font-size: fn.global-dim(--font-size --150), | ||
| 86 | ), | ||
| 87 | |||
| 88 | --key-focus: ( | ||
| 89 | --border: fn.global-dim(--key-focus --border), | ||
| 90 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 91 | --outline: fn.global-dim(--key-focus --outline), | ||
| 92 | ), | ||
| 93 | ), | ||
| 94 | --colors: ( | ||
| 95 | --bg: fn.global-color(--text-mute), | ||
| 96 | --label: fn.global-color(--bg-l2), | ||
| 97 | --hover: ( | ||
| 98 | --bg: fn.global-color(--text), | ||
| 99 | ), | ||
| 100 | --active: ( | ||
| 101 | --bg: fn.global-color(--heading), | ||
| 102 | ), | ||
| 103 | --key-focus: ( | ||
| 104 | --label: fn.global-color(--focus --text), | ||
| 105 | --border: fn.global-color(--focus --border), | ||
| 106 | --outline: fn.global-color(--focus --outline), | ||
| 107 | ), | ||
| 108 | |||
| 109 | --quiet: ( | ||
| 110 | --bg: fn.global-color(--border-mute), | ||
| 111 | --label: fn.global-color(--heading), | ||
| 112 | --hover: ( | ||
| 113 | --bg: fn.global-color(--border), | ||
| 114 | ), | ||
| 115 | --active: ( | ||
| 116 | --bg: fn.global-color(--border-strong), | ||
| 117 | ), | ||
| 118 | ), | ||
| 119 | ), | ||
| 120 | )); | ||
| 121 | |||
| 122 | @each $theme in $themes { | ||
| 123 | @include iro.props-store(( | ||
| 124 | --colors: ( | ||
| 125 | --#{$theme}: ( | ||
| 126 | --bg: fn.global-color(--#{$theme}-static --900), | ||
| 127 | --label: fn.global-color(--#{$theme}-static --900-text), | ||
| 128 | --hover: ( | ||
| 129 | --bg: fn.global-color(--#{$theme}-static --1000), | ||
| 130 | --label: fn.global-color(--#{$theme}-static --1000-text), | ||
| 131 | ), | ||
| 132 | --active: ( | ||
| 133 | --bg: fn.global-color(--#{$theme}-static --1100), | ||
| 134 | --label: fn.global-color(--#{$theme}-static --1000-text), | ||
| 135 | ), | ||
| 136 | ), | ||
| 137 | |||
| 138 | --#{$theme}-quiet: ( | ||
| 139 | --bg: fn.global-color(--#{$theme} --200), | ||
| 140 | --label: fn.global-color(--#{$theme} --1100), | ||
| 141 | --hover: ( | ||
| 142 | --bg: fn.global-color(--#{$theme} --300), | ||
| 143 | --label: fn.global-color(--#{$theme} --1200), | ||
| 144 | ), | ||
| 145 | --active: ( | ||
| 146 | --bg: fn.global-color(--#{$theme} --400), | ||
| 147 | --label: fn.global-color(--#{$theme} --1300), | ||
| 148 | ), | ||
| 149 | ) | ||
| 150 | ), | ||
| 151 | )); | ||
| 152 | } | ||
| 153 | |||
| 154 | @each $theme in $static-themes { | ||
| 155 | @include iro.props-store(( | ||
| 156 | --colors: ( | ||
| 157 | --static-#{$theme}: ( | ||
| 158 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
| 159 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 160 | --hover: ( | ||
| 161 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 162 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 163 | ), | ||
| 164 | --active: ( | ||
| 165 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 166 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 167 | ), | ||
| 168 | --key-focus: ( | ||
| 169 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
| 170 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 171 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 172 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 173 | ), | ||
| 174 | ), | ||
| 175 | |||
| 176 | --static-#{$theme}-quiet: ( | ||
| 177 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
| 178 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 179 | --hover: ( | ||
| 180 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 181 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 182 | ), | ||
| 183 | --active: ( | ||
| 184 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
| 185 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 186 | ), | ||
| 187 | ) | ||
| 188 | ) | ||
| 189 | )); | ||
| 190 | } | ||
| 191 | |||
| 192 | @include iro.bem-object(iro.props-namespace()) { | ||
| 193 | display: inline-block; | ||
| 194 | position: relative; | 69 | position: relative; |
| 195 | padding-block: fn.dim(--pad-b); | 70 | display: inline-block; |
| 196 | padding-inline: fn.dim(--pad-i); | 71 | padding-block: props.get(vars.$pad-b); |
| 197 | border-radius: fn.dim(--rounding); | 72 | padding-inline: props.get(vars.$pad-i); |
| 198 | background-color: fn.color(--bg); | 73 | font-size: props.get(vars.$font-size); |
| 199 | background-clip: padding-box; | 74 | line-height: props.get(core.$font--standard--line-height); |
| 200 | color: fn.color(--label); | ||
| 201 | font-size: fn.dim(--font-size); | ||
| 202 | line-height: fn.global-dim(--font --standard --line-height); | ||
| 203 | text-align: center; | 75 | text-align: center; |
| 204 | text-decoration: none; | 76 | text-decoration: none; |
| 77 | background-clip: padding-box; | ||
| 78 | border-radius: props.get(vars.$rounding); | ||
| 205 | 79 | ||
| 206 | &::after { | 80 | &::after { |
| 207 | content: ''; | ||
| 208 | display: none; | ||
| 209 | position: absolute; | 81 | position: absolute; |
| 82 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 210 | z-index: 1; | 83 | z-index: 1; |
| 211 | inset: calc(-1 * fn.dim(--key-focus --border-offset)); | 84 | display: none; |
| 212 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
| 213 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 214 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 215 | pointer-events: none; | 85 | pointer-events: none; |
| 86 | content: ''; | ||
| 87 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 88 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
| 216 | } | 89 | } |
| 217 | 90 | ||
| 218 | &:link, | 91 | &:link, |
| 219 | &:visited, | 92 | &:visited, |
| 220 | &:enabled { | 93 | &:enabled { |
| 221 | &:hover, | ||
| 222 | &:focus-visible { | 94 | &:focus-visible { |
| 223 | background-color: fn.color(--hover --bg); | 95 | &::after { |
| 224 | } | 96 | display: block; |
| 225 | 97 | } | |
| 226 | &:active { | ||
| 227 | background-color: fn.color(--active --bg); | ||
| 228 | } | 98 | } |
| 229 | } | 99 | } |
| 230 | 100 | ||
| 231 | @include iro.bem-elem('label') { | 101 | @include bem.elem('label') { |
| 232 | margin-inline: fn.dim(--pad-i-label); | 102 | margin-inline: props.get(vars.$pad-i-label); |
| 233 | } | 103 | } |
| 234 | 104 | ||
| 235 | @include iro.bem-modifier('quiet') { | 105 | @include -apply-theme(vars.$default-theme, $static: true); |
| 236 | background-color: fn.color(--quiet --bg); | ||
| 237 | color: fn.color(--quiet --label); | ||
| 238 | 106 | ||
| 239 | &:link, | 107 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 240 | &:visited, | 108 | @include bem.modifier(string.slice($theme, 3)) { |
| 241 | &:enabled { | 109 | @include -apply-theme(vars.$themes, $theme); |
| 242 | &:hover, | ||
| 243 | &:focus-visible { | ||
| 244 | background-color: fn.color(--quiet --hover --bg); | ||
| 245 | } | ||
| 246 | |||
| 247 | &:active { | ||
| 248 | background-color: fn.color(--quiet --active --bg); | ||
| 249 | } | ||
| 250 | } | ||
| 251 | } | ||
| 252 | |||
| 253 | @each $theme in $themes { | ||
| 254 | @include iro.bem-modifier($theme) { | ||
| 255 | @include theme($theme); | ||
| 256 | } | 110 | } |
| 257 | } | 111 | } |
| 258 | 112 | ||
| 259 | &:link, | 113 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
| 260 | &:visited, | 114 | @include bem.modifier(string.slice($theme, 3)) { |
| 261 | &:enabled { | 115 | @include -apply-theme(vars.$static-themes, $theme, true); |
| 262 | &:focus-visible { | ||
| 263 | &::after { | ||
| 264 | display: block; | ||
| 265 | } | ||
| 266 | } | 116 | } |
| 267 | } | 117 | } |
| 268 | 118 | ||
| 269 | @each $theme in $static-themes { | 119 | @include bem.modifier('pill') { |
| 270 | @include iro.bem-modifier(static-#{$theme}) { | 120 | padding-inline: props.get(vars.$pad-i-pill); |
| 271 | @include theme(static-#{$theme}); | ||
| 272 | } | ||
| 273 | } | ||
| 274 | |||
| 275 | @include iro.bem-modifier('pill') { | ||
| 276 | padding-inline: fn.dim(--pad-i-pill); | ||
| 277 | border-radius: 10em; | 121 | border-radius: 10em; |
| 278 | 122 | ||
| 279 | &::after { | 123 | &::after { |
| 280 | border-radius: 10em; | 124 | border-radius: 10em; |
| 281 | } | 125 | } |
| 282 | } | 126 | } |
| 283 | |||
| 284 | @each $size in $sizes { | ||
| 285 | @include iro.bem-modifier($size) { | ||
| 286 | padding-block: fn.dim(--#{$size} --pad-b); | ||
| 287 | padding-inline: fn.dim(--#{$size} --pad-i); | ||
| 288 | font-size: fn.dim(--#{$size} --font-size); | ||
| 289 | 127 | ||
| 290 | @include iro.bem-elem('label') { | 128 | @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { |
| 291 | margin-inline: fn.dim(--#{$size} --pad-i-label); | 129 | @include bem.modifier($mod) { |
| 130 | padding-block: props.get($pad-b); | ||
| 131 | padding-inline: props.get($pad-i); | ||
| 132 | font-size: props.get($font-size); | ||
| 133 | |||
| 134 | @include bem.elem('label') { | ||
| 135 | margin-inline: props.get($pad-i-label); | ||
| 292 | } | 136 | } |
| 293 | 137 | ||
| 294 | @include iro.bem-modifier('pill') { | 138 | @include bem.modifier('pill') { |
| 295 | padding-inline: fn.dim(--#{$size} --pad-i-pill); | 139 | padding-inline: props.get($pad-i-pill); |
| 296 | } | 140 | } |
| 297 | } | 141 | } |
| 298 | } | 142 | } |
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss new file mode 100644 index 0000000..ff07148 --- /dev/null +++ b/src/objects/_badge.vars.scss | |||
| @@ -0,0 +1,161 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default; | ||
| 7 | $pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default; | ||
| 8 | $pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default; | ||
| 9 | $pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default; | ||
| 10 | $rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default; | ||
| 11 | $font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default; | ||
| 12 | |||
| 13 | $pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default; | ||
| 14 | $pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default; | ||
| 15 | $pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default; | ||
| 16 | $pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
| 17 | $font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default; | ||
| 18 | |||
| 19 | $pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default; | ||
| 20 | $pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default; | ||
| 21 | $pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default; | ||
| 22 | $pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default; | ||
| 23 | $font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default; | ||
| 24 | |||
| 25 | $pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default; | ||
| 26 | $pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default; | ||
| 27 | $pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default; | ||
| 28 | $pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default; | ||
| 29 | $font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default; | ||
| 30 | |||
| 31 | $key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 32 | $key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 33 | $key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 34 | |||
| 35 | $sizes: ( | ||
| 36 | 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm, | ||
| 37 | 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg, | ||
| 38 | 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, | ||
| 39 | ) !default; | ||
| 40 | |||
| 41 | $default-theme-override: () !default; | ||
| 42 | $default-theme: props.def(--o-badge, ( | ||
| 43 | --bg: props.get(core.$theme, --heading), | ||
| 44 | --label: props.get(core.$theme, --bg-l2), | ||
| 45 | |||
| 46 | --hover: ( | ||
| 47 | --bg: props.get(core.$theme, --text), | ||
| 48 | --label: props.get(core.$theme, --bg-l2), | ||
| 49 | ), | ||
| 50 | |||
| 51 | --active: ( | ||
| 52 | --bg: props.get(core.$theme, --text-mute), | ||
| 53 | --label: props.get(core.$theme, --bg-l2), | ||
| 54 | ), | ||
| 55 | |||
| 56 | --key-focus: ( | ||
| 57 | --label: props.get(core.$theme, --focus, --text), | ||
| 58 | --border: props.get(core.$theme, --focus, --border), | ||
| 59 | --outline: props.get(core.$theme, --focus, --outline), | ||
| 60 | ), | ||
| 61 | |||
| 62 | --quiet: ( | ||
| 63 | --bg: props.get(core.$theme, --border-mute), | ||
| 64 | --label: props.get(core.$theme, --heading), | ||
| 65 | |||
| 66 | --hover: ( | ||
| 67 | --bg: props.get(core.$theme, --border), | ||
| 68 | --label: props.get(core.$theme, --heading), | ||
| 69 | ), | ||
| 70 | |||
| 71 | --active: ( | ||
| 72 | --bg: props.get(core.$theme, --border-strong), | ||
| 73 | --label: props.get(core.$theme, --heading), | ||
| 74 | ), | ||
| 75 | ) | ||
| 76 | ), 'color') !default; | ||
| 77 | $default-theme: props.merge($default-theme, $default-theme-override); | ||
| 78 | |||
| 79 | $static-themes: props.def(--o-badge, (), 'color'); | ||
| 80 | |||
| 81 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 82 | $badge-theme: --static-#{string.slice($theme, 3)}; | ||
| 83 | |||
| 84 | $static-themes: props.merge($static-themes, ( | ||
| 85 | $badge-theme: ( | ||
| 86 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
| 87 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 88 | |||
| 89 | --hover: ( | ||
| 90 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 91 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 92 | ), | ||
| 93 | |||
| 94 | --active: ( | ||
| 95 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 96 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 97 | ), | ||
| 98 | |||
| 99 | --key-focus: ( | ||
| 100 | --bg: props.get(core.$transparent-colors, $theme, --100), | ||
| 101 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 102 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 103 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
| 104 | ), | ||
| 105 | |||
| 106 | --quiet: ( | ||
| 107 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
| 108 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 109 | --hover: ( | ||
| 110 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
| 111 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 112 | ), | ||
| 113 | --active: ( | ||
| 114 | --bg: props.get(core.$transparent-colors, $theme, --400), | ||
| 115 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 116 | ), | ||
| 117 | ) | ||
| 118 | ) | ||
| 119 | )); | ||
| 120 | } | ||
| 121 | |||
| 122 | $themes-config: ( | ||
| 123 | accent: --accent, | ||
| 124 | positive: --positive, | ||
| 125 | negative: --negative, | ||
| 126 | warning: --warning, | ||
| 127 | ) !default; | ||
| 128 | |||
| 129 | $themes: props.def(--o-badge, (), 'color'); | ||
| 130 | |||
| 131 | @each $theme, $key in $themes-config { | ||
| 132 | $themes: props.merge($themes, ( | ||
| 133 | --#{$theme}: ( | ||
| 134 | --bg: props.get(core.$theme, #{$key}-static, --900), | ||
| 135 | --label: props.get(core.$theme, #{$key}-static, --900-text), | ||
| 136 | |||
| 137 | --hover: ( | ||
| 138 | --bg: props.get(core.$theme, #{$key}-static, --1000), | ||
| 139 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 140 | ), | ||
| 141 | |||
| 142 | --active: ( | ||
| 143 | --bg: props.get(core.$theme, #{$key}-static, --1100), | ||
| 144 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 145 | ), | ||
| 146 | |||
| 147 | --quiet: ( | ||
| 148 | --bg: props.get(core.$theme, $key, --200), | ||
| 149 | --label: props.get(core.$theme, $key, --1100), | ||
| 150 | --hover: ( | ||
| 151 | --bg: props.get(core.$theme, $key, --300), | ||
| 152 | --label: props.get(core.$theme, $key, --1200), | ||
| 153 | ), | ||
| 154 | --active: ( | ||
| 155 | --bg: props.get(core.$theme, $key, --400), | ||
| 156 | --label: props.get(core.$theme, $key, --1300), | ||
| 157 | ), | ||
| 158 | ) | ||
| 159 | ) | ||
| 160 | )); | ||
| 161 | } | ||
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 3ef4813..aaf55b5 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
| @@ -1,27 +1,31 @@ | |||
| 1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'sass:map'; |
| 3 | @use '../functions' as fn; | 3 | @use 'sass:meta'; |
| 4 | 4 | @use 'sass:string'; | |
| 5 | $sizes: 'sm' 'lg' 'xl' !default; | 5 | @use 'iro-sass/src/bem'; |
| 6 | $themes: 'accent' 'negative' !default; | 6 | @use 'iro-sass/src/props'; |
| 7 | $static-themes: 'black' 'white' !default; | 7 | @use '../props' as *; |
| 8 | 8 | @use '../core.vars' as core; | |
| 9 | @mixin theme($theme: ()) { | 9 | |
| 10 | @forward 'button.vars'; | ||
| 11 | @use 'button.vars' as vars; | ||
| 12 | |||
| 13 | @mixin -apply-theme($theme, $key: ()) { | ||
| 10 | &:link, | 14 | &:link, |
| 11 | &:visited, | 15 | &:visited, |
| 12 | &:enabled { | 16 | &:enabled { |
| 17 | color: props.get($theme, list.join($key, --label)...); | ||
| 18 | background-color: props.get($theme, list.join($key, --bg)...); | ||
| 13 | border-color: transparent; | 19 | border-color: transparent; |
| 14 | background-color: fn.color(list.join($theme, --bg)); | ||
| 15 | color: fn.color(list.join($theme, --label)); | ||
| 16 | } | 20 | } |
| 17 | 21 | ||
| 18 | @include iro.bem-modifier('outline') { | 22 | @include bem.modifier('outline') { |
| 19 | &:link, | 23 | &:link, |
| 20 | &:visited, | 24 | &:visited, |
| 21 | &:enabled { | 25 | &:enabled { |
| 22 | border-color: fn.color(list.join($theme, --outline-border)); | 26 | color: props.get($theme, list.join($key, --outline-label)...); |
| 23 | background-color: transparent; | 27 | background-color: transparent; |
| 24 | color: fn.color(list.join($theme, --outline-label)); | 28 | border-color: props.get($theme, list.join($key, --outline-border)...); |
| 25 | } | 29 | } |
| 26 | } | 30 | } |
| 27 | 31 | ||
| @@ -30,217 +34,71 @@ $static-themes: 'black' 'white' !default; | |||
| 30 | &:enabled { | 34 | &:enabled { |
| 31 | &:hover, | 35 | &:hover, |
| 32 | &:focus-visible { | 36 | &:focus-visible { |
| 37 | color: props.get($theme, list.join($key, --hover --label)...); | ||
| 38 | background-color: props.get($theme, list.join($key, --hover --bg)...); | ||
| 33 | border-color: transparent; | 39 | border-color: transparent; |
| 34 | background-color: fn.color(list.join($theme, --hover --bg)); | ||
| 35 | color: fn.color(list.join($theme, --hover --label)); | ||
| 36 | } | 40 | } |
| 37 | 41 | ||
| 38 | &:active { | 42 | &:active { |
| 43 | color: props.get($theme, list.join($key, --active --label)...); | ||
| 44 | background-color: props.get($theme, list.join($key, --active --bg)...); | ||
| 39 | border-color: transparent; | 45 | border-color: transparent; |
| 40 | background-color: fn.color(list.join($theme, --active --bg)); | ||
| 41 | color: fn.color(list.join($theme, --active --label)); | ||
| 42 | } | 46 | } |
| 43 | } | 47 | } |
| 44 | } | 48 | } |
| 45 | 49 | ||
| 46 | @mixin static-theme($theme: ()) { | 50 | @mixin -apply-static-theme($theme, $key: ()) { |
| 51 | color: props.get($theme, list.join($key, --disabled --label)...); | ||
| 52 | background-color: props.get($theme, list.join($key, --disabled --bg)...); | ||
| 47 | border-color: transparent; | 53 | border-color: transparent; |
| 48 | background-color: fn.color(list.join($theme, --disabled --bg)); | ||
| 49 | color: fn.color(list.join($theme, --disabled --label)); | ||
| 50 | 54 | ||
| 51 | &::after { | 55 | &::after { |
| 52 | outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); | 56 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); |
| 53 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); | 57 | box-shadow: |
| 58 | 0 | ||
| 59 | 0 | ||
| 60 | 0 | ||
| 61 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 62 | props.get($theme, list.join($key, --key-focus --outline)...); | ||
| 54 | } | 63 | } |
| 55 | 64 | ||
| 56 | @include iro.bem-modifier('outline') { | 65 | @include bem.modifier('outline') { |
| 57 | border-color: fn.color(list.join($theme, --disabled --outline-border)); | ||
| 58 | background-color: transparent; | 66 | background-color: transparent; |
| 67 | border-color: props.get($theme, list.join($key, --disabled --outline-border)...); | ||
| 59 | } | 68 | } |
| 60 | 69 | ||
| 61 | @include theme($theme); | 70 | @include -apply-theme($theme, $key); |
| 62 | 71 | ||
| 63 | @include iro.bem-modifier('primary') { | 72 | @include bem.modifier('primary') { |
| 64 | @include theme(list.join($theme, --primary)); | 73 | @include -apply-theme($theme, list.join($key, --primary)); |
| 65 | } | 74 | } |
| 66 | } | 75 | } |
| 67 | 76 | ||
| 68 | @include iro.props-namespace('button') { | 77 | @mixin styles { |
| 69 | @include iro.props-store(( | 78 | @include materialize-at-root(meta.module-variables('vars')); |
| 70 | --dims: ( | ||
| 71 | --line-height: 1.4, | ||
| 72 | --pad-i: fn.global-dim(--size --200), | ||
| 73 | --pad-i-label: fn.global-dim(--size --75), | ||
| 74 | --pad-b: fn.global-dim(--size --65), | ||
| 75 | --border: fn.global-dim(--border --medium), | ||
| 76 | --rounding: 10em, | ||
| 77 | --font-size: fn.global-dim(--font-size --100), | ||
| 78 | |||
| 79 | --sm: ( | ||
| 80 | --pad-i: fn.global-dim(--size --150), | ||
| 81 | --pad-i-label: fn.global-dim(--size --50), | ||
| 82 | --pad-b: fn.global-dim(--size --25), | ||
| 83 | --font-size: fn.global-dim(--font-size --75), | ||
| 84 | ), | ||
| 85 | --lg: ( | ||
| 86 | --pad-i: fn.global-dim(--size --250), | ||
| 87 | --pad-i-label: fn.global-dim(--size --100), | ||
| 88 | --pad-b: fn.global-dim(--size --100), | ||
| 89 | --font-size: fn.global-dim(--font-size --150), | ||
| 90 | ), | ||
| 91 | --xl: ( | ||
| 92 | --pad-i: fn.global-dim(--size --300), | ||
| 93 | --pad-i-label: fn.global-dim(--size --150), | ||
| 94 | --pad-b: fn.global-dim(--size --150), | ||
| 95 | --font-size: fn.global-dim(--font-size --200), | ||
| 96 | ), | ||
| 97 | |||
| 98 | --key-focus: ( | ||
| 99 | --border: fn.global-dim(--key-focus --border), | ||
| 100 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 101 | --outline: fn.global-dim(--key-focus --outline), | ||
| 102 | ), | ||
| 103 | ), | ||
| 104 | --colors: ( | ||
| 105 | --bg: fn.global-color(--border-mute), | ||
| 106 | --label: fn.global-color(--text), | ||
| 107 | --outline-border: fn.global-color(--border), | ||
| 108 | --outline-label: fn.global-color(--text), | ||
| 109 | |||
| 110 | --hover: ( | ||
| 111 | --bg: fn.global-color(--border), | ||
| 112 | --label: fn.global-color(--heading), | ||
| 113 | ), | ||
| 114 | --active: ( | ||
| 115 | --bg: fn.global-color(--border-strong), | ||
| 116 | --label: fn.global-color(--heading), | ||
| 117 | ), | ||
| 118 | --disabled: ( | ||
| 119 | --bg: fn.global-color(--border-mute), | ||
| 120 | --outline-border: fn.global-color(--border), | ||
| 121 | --label: fn.global-color(--text-disabled), | ||
| 122 | ), | ||
| 123 | --key-focus: ( | ||
| 124 | --label: fn.global-color(--focus --text), | ||
| 125 | --border: fn.global-color(--focus --border), | ||
| 126 | --outline: fn.global-color(--focus --outline), | ||
| 127 | ), | ||
| 128 | |||
| 129 | --primary: ( | ||
| 130 | --bg: fn.global-color(--base --800), | ||
| 131 | --label: fn.global-color(--base --800-text), | ||
| 132 | --outline-border: fn.global-color(--base --800), | ||
| 133 | --outline-label: fn.global-color(--text), | ||
| 134 | |||
| 135 | --hover: ( | ||
| 136 | --bg: fn.global-color(--base --900), | ||
| 137 | --label: fn.global-color(--base --900-text), | ||
| 138 | ), | ||
| 139 | --active: ( | ||
| 140 | --bg: fn.global-color(--base --900), | ||
| 141 | --label: fn.global-color(--base --900-text), | ||
| 142 | ), | ||
| 143 | ), | ||
| 144 | ), | ||
| 145 | )); | ||
| 146 | |||
| 147 | @each $theme in $themes { | ||
| 148 | @include iro.props-store(( | ||
| 149 | --colors: ( | ||
| 150 | --#{$theme}: ( | ||
| 151 | --bg: fn.global-color(--#{$theme}-static --900), | ||
| 152 | --label: fn.global-color(--#{$theme}-static --900-text), | ||
| 153 | --outline-border: fn.global-color(--#{$theme} --900), | ||
| 154 | --outline-label: fn.global-color(--#{$theme} --1000), | ||
| 155 | 79 | ||
| 156 | --hover: ( | 80 | @include bem.object('button') { |
| 157 | --bg: fn.global-color(--#{$theme}-static --1000), | ||
| 158 | --label: fn.global-color(--#{$theme}-static --1000-text), | ||
| 159 | ), | ||
| 160 | --active: ( | ||
| 161 | --bg: fn.global-color(--#{$theme}-static --1100), | ||
| 162 | --label: fn.global-color(--#{$theme}-static --1100-text), | ||
| 163 | ), | ||
| 164 | ), | ||
| 165 | ), | ||
| 166 | )); | ||
| 167 | } | ||
| 168 | |||
| 169 | @each $theme in $static-themes { | ||
| 170 | @include iro.props-store(( | ||
| 171 | --colors: ( | ||
| 172 | --static-#{$theme}: ( | ||
| 173 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
| 174 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 175 | --outline-border: fn.global-color(--#{$theme}-transparent --300), | ||
| 176 | --outline-label: fn.global-color(--#{$theme}-transparent --900), | ||
| 177 | |||
| 178 | --hover: ( | ||
| 179 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 180 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 181 | ), | ||
| 182 | --active: ( | ||
| 183 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
| 184 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 185 | ), | ||
| 186 | --disabled: ( | ||
| 187 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
| 188 | --outline-border: fn.global-color(--#{$theme}-transparent --300), | ||
| 189 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 190 | ), | ||
| 191 | --key-focus: ( | ||
| 192 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
| 193 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 194 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 195 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 196 | ), | ||
| 197 | |||
| 198 | --primary: ( | ||
| 199 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
| 200 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 201 | --outline-border: fn.global-color(--#{$theme}-transparent --800), | ||
| 202 | --outline-label: fn.global-color(--#{$theme}-transparent --900), | ||
| 203 | |||
| 204 | --hover: ( | ||
| 205 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 206 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 207 | ), | ||
| 208 | --active: ( | ||
| 209 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
| 210 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
| 211 | ), | ||
| 212 | ), | ||
| 213 | ), | ||
| 214 | ), | ||
| 215 | )); | ||
| 216 | } | ||
| 217 | |||
| 218 | @include iro.bem-object(iro.props-namespace()) { | ||
| 219 | display: inline-block; | ||
| 220 | position: relative; | 81 | position: relative; |
| 221 | padding-block: fn.dim(--pad-b); | 82 | display: inline-block; |
| 222 | padding-inline: fn.dim(--pad-i); | 83 | padding-block: props.get(vars.$pad-b); |
| 223 | border: fn.dim(--border) solid transparent; | 84 | padding-inline: props.get(vars.$pad-i); |
| 224 | border-radius: fn.dim(--rounding); | 85 | font-size: props.get(vars.$font-size); |
| 225 | border-color: fn.color(--disabled --bg); | ||
| 226 | background-color: fn.color(--disabled --bg); | ||
| 227 | color: fn.color(--disabled --label); | ||
| 228 | font-size: fn.dim(--font-size); | ||
| 229 | font-weight: 500; | 86 | font-weight: 500; |
| 230 | line-height: fn.dim(--line-height); | 87 | line-height: props.get(vars.$line-height); |
| 231 | text-align: center; | 88 | text-align: center; |
| 232 | text-decoration: none; | 89 | text-decoration: none; |
| 90 | border: props.get(vars.$border-width) solid transparent; | ||
| 91 | border-radius: props.get(vars.$rounding); | ||
| 233 | 92 | ||
| 234 | &::after { | 93 | &::after { |
| 235 | content: ''; | ||
| 236 | display: none; | ||
| 237 | position: absolute; | 94 | position: absolute; |
| 95 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); | ||
| 238 | z-index: 1; | 96 | z-index: 1; |
| 239 | inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | 97 | display: none; |
| 240 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
| 241 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 242 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 243 | pointer-events: none; | 98 | pointer-events: none; |
| 99 | content: ''; | ||
| 100 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 101 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
| 244 | } | 102 | } |
| 245 | 103 | ||
| 246 | &:link, | 104 | &:link, |
| @@ -253,47 +111,46 @@ $static-themes: 'black' 'white' !default; | |||
| 253 | } | 111 | } |
| 254 | } | 112 | } |
| 255 | 113 | ||
| 256 | @include iro.bem-elem('label') { | 114 | @include bem.elem('label') { |
| 257 | margin-inline: fn.dim(--pad-i-label); | 115 | margin-inline: props.get(vars.$pad-i-label); |
| 258 | } | 116 | } |
| 259 | 117 | ||
| 260 | @include iro.bem-modifier('block') { | 118 | @include bem.modifier('block') { |
| 261 | display: block; | 119 | display: block; |
| 262 | } | 120 | } |
| 263 | 121 | ||
| 264 | @include iro.bem-modifier('outline') { | 122 | @include bem.modifier('outline') { |
| 265 | border-color: fn.color(--disabled --outline-border); | ||
| 266 | background-color: transparent; | 123 | background-color: transparent; |
| 267 | } | 124 | } |
| 268 | 125 | ||
| 269 | @each $size in $sizes { | 126 | @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { |
| 270 | @include iro.bem-modifier($size) { | 127 | @include bem.modifier($mod) { |
| 271 | padding-block: fn.dim(--#{$size} --pad-b); | 128 | padding-block: props.get($pad-b); |
| 272 | padding-inline: fn.dim(--#{$size} --pad-i); | 129 | padding-inline: props.get($pad-i); |
| 273 | font-size: fn.dim(--#{$size} --font-size); | 130 | font-size: props.get($font-size); |
| 274 | 131 | ||
| 275 | @include iro.bem-elem('label') { | 132 | @include bem.elem('label') { |
| 276 | margin-inline: fn.dim(--#{$size} --pad-i-label); | 133 | margin-inline: props.get($pad-i-label); |
| 277 | } | 134 | } |
| 278 | } | 135 | } |
| 279 | } | 136 | } |
| 280 | 137 | ||
| 281 | @include static-theme; | 138 | @include -apply-static-theme(vars.$default-theme); |
| 282 | 139 | ||
| 283 | @each $theme in $themes { | 140 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 284 | @include iro.bem-modifier($theme) { | 141 | @include bem.modifier(string.slice($theme, 3)) { |
| 285 | @include theme(--#{$theme}); | 142 | @include -apply-theme(vars.$themes, $theme); |
| 286 | } | 143 | } |
| 287 | } | 144 | } |
| 288 | 145 | ||
| 289 | @each $theme in $static-themes { | 146 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
| 290 | @include iro.bem-modifier(static-#{$theme}) { | 147 | @include bem.modifier(string.slice($theme, 3)) { |
| 291 | @include static-theme(--static-#{$theme}); | 148 | @include -apply-static-theme(vars.$static-themes, $theme); |
| 292 | } | 149 | } |
| 293 | } | 150 | } |
| 294 | 151 | ||
| 295 | @include iro.bem-modifier('round') { | 152 | @include bem.modifier('round') { |
| 296 | inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); | 153 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); |
| 297 | padding-inline: 0; | 154 | padding-inline: 0; |
| 298 | border-radius: 100em; | 155 | border-radius: 100em; |
| 299 | } | 156 | } |
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss new file mode 100644 index 0000000..4f7b552 --- /dev/null +++ b/src/objects/_button.vars.scss | |||
| @@ -0,0 +1,168 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $line-height: props.def(--o-button--line-height, 1.4) !default; | ||
| 7 | $pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; | ||
| 8 | $pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; | ||
| 9 | $pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default; | ||
| 10 | $border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default; | ||
| 11 | $rounding: props.def(--o-button--rounding, 10em) !default; | ||
| 12 | $font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; | ||
| 13 | |||
| 14 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; | ||
| 15 | $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
| 16 | $pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; | ||
| 17 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 18 | |||
| 19 | $pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; | ||
| 20 | $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; | ||
| 21 | $pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; | ||
| 22 | $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; | ||
| 23 | |||
| 24 | $pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; | ||
| 25 | $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; | ||
| 26 | $pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; | ||
| 27 | $font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; | ||
| 28 | |||
| 29 | $key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 30 | $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 31 | $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 32 | |||
| 33 | $sizes: ( | ||
| 34 | 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, | ||
| 35 | 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, | ||
| 36 | 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, | ||
| 37 | ) !default; | ||
| 38 | |||
| 39 | $default-theme-override: () !default; | ||
| 40 | $default-theme: props.def(--o-button, ( | ||
| 41 | --bg: props.get(core.$theme, --border-mute), | ||
| 42 | --label: props.get(core.$theme, --text), | ||
| 43 | --outline-border: props.get(core.$theme, --border), | ||
| 44 | --outline-label: props.get(core.$theme, --text), | ||
| 45 | |||
| 46 | --hover: ( | ||
| 47 | --bg: props.get(core.$theme, --border), | ||
| 48 | --label: props.get(core.$theme, --heading), | ||
| 49 | ), | ||
| 50 | |||
| 51 | --active: ( | ||
| 52 | --bg: props.get(core.$theme, --border-strong), | ||
| 53 | --label: props.get(core.$theme, --heading), | ||
| 54 | ), | ||
| 55 | |||
| 56 | --disabled: ( | ||
| 57 | --bg: props.get(core.$theme, --border-mute), | ||
| 58 | --outline-border: props.get(core.$theme, --border), | ||
| 59 | --label: props.get(core.$theme, --text-disabled), | ||
| 60 | ), | ||
| 61 | |||
| 62 | --key-focus: ( | ||
| 63 | --label: props.get(core.$theme, --focus, --text), | ||
| 64 | --border: props.get(core.$theme, --focus, --border), | ||
| 65 | --outline: props.get(core.$theme, --focus, --outline), | ||
| 66 | ), | ||
| 67 | |||
| 68 | --primary: ( | ||
| 69 | --bg: props.get(core.$theme, --base, --900), | ||
| 70 | --label: props.get(core.$theme, --base, --900-text), | ||
| 71 | --outline-border: props.get(core.$theme, --base, --900), | ||
| 72 | --outline-label: props.get(core.$theme, --text), | ||
| 73 | |||
| 74 | --hover: ( | ||
| 75 | --bg: props.get(core.$theme, --base, --800), | ||
| 76 | --label: props.get(core.$theme, --base, --800-text), | ||
| 77 | ), | ||
| 78 | |||
| 79 | --active: ( | ||
| 80 | --bg: props.get(core.$theme, --base, --700), | ||
| 81 | --label: props.get(core.$theme, --base, --700-text), | ||
| 82 | ), | ||
| 83 | ), | ||
| 84 | ), 'color') !default; | ||
| 85 | $default-theme: props.merge($default-theme, $default-theme-override); | ||
| 86 | |||
| 87 | $static-themes: props.def(--o-button, (), 'color'); | ||
| 88 | |||
| 89 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 90 | $button-theme: --static-#{string.slice($theme, 3)}; | ||
| 91 | |||
| 92 | $static-themes: props.merge($static-themes, ( | ||
| 93 | $button-theme: ( | ||
| 94 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
| 95 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 96 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | ||
| 97 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | ||
| 98 | |||
| 99 | --hover: ( | ||
| 100 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
| 101 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 102 | ), | ||
| 103 | |||
| 104 | --active: ( | ||
| 105 | --bg: props.get(core.$transparent-colors, $theme, --400), | ||
| 106 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 107 | ), | ||
| 108 | |||
| 109 | --disabled: ( | ||
| 110 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
| 111 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | ||
| 112 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
| 113 | ), | ||
| 114 | |||
| 115 | --key-focus: ( | ||
| 116 | --bg: props.get(core.$transparent-colors, $theme, --100), | ||
| 117 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 118 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 119 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
| 120 | ), | ||
| 121 | |||
| 122 | --primary: ( | ||
| 123 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
| 124 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 125 | --outline-border: props.get(core.$transparent-colors, $theme, --800), | ||
| 126 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | ||
| 127 | |||
| 128 | --hover: ( | ||
| 129 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 130 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 131 | ), | ||
| 132 | |||
| 133 | --active: ( | ||
| 134 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 135 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 136 | ), | ||
| 137 | ) | ||
| 138 | ) | ||
| 139 | )); | ||
| 140 | } | ||
| 141 | |||
| 142 | $themes-config: ( | ||
| 143 | accent: --accent, | ||
| 144 | negative: --negative, | ||
| 145 | ) !default; | ||
| 146 | |||
| 147 | $themes: props.def(--o-button, (), 'color'); | ||
| 148 | |||
| 149 | @each $theme, $key in $themes-config { | ||
| 150 | $themes: props.merge($themes, ( | ||
| 151 | --#{$theme}: ( | ||
| 152 | --bg: props.get(core.$theme, #{$key}-static, --900), | ||
| 153 | --label: props.get(core.$theme, #{$key}-static, --900-text), | ||
| 154 | --outline-border: props.get(core.$theme, $key, --900), | ||
| 155 | --outline-label: props.get(core.$theme, $key, --1000), | ||
| 156 | |||
| 157 | --hover: ( | ||
| 158 | --bg: props.get(core.$theme, #{$key}-static, --1000), | ||
| 159 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 160 | ), | ||
| 161 | |||
| 162 | --active: ( | ||
| 163 | --bg: props.get(core.$theme, #{$key}-static, --1100), | ||
| 164 | --label: props.get(core.$theme, #{$key}-static, --1100-text), | ||
| 165 | ), | ||
| 166 | ) | ||
| 167 | )); | ||
| 168 | } | ||
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index f56a96c..c87e676 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
| @@ -1,132 +1,170 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | 3 | @use 'iro-sass/src/props'; | |
| 4 | @include iro.props-namespace('card') { | 4 | @use '../props' as *; |
| 5 | @include iro.props-store(( | 5 | @use 'avatar.vars' as avatar; |
| 6 | --dims: ( | 6 | |
| 7 | --border: fn.global-dim(--border --thin), | 7 | @forward 'card.vars'; |
| 8 | --divider: fn.global-dim(--border --thin), | 8 | @use 'card.vars' as vars; |
| 9 | --pad-i: fn.global-dim(--size --300), | 9 | |
| 10 | --pad-b: fn.global-dim(--size --250), | 10 | @mixin styles { |
| 11 | --spacing: fn.global-dim(--size --200), | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | --rounding: fn.global-dim(--rounding), | 12 | |
| 13 | 13 | @include bem.object('card') { | |
| 14 | --key-focus: ( | 14 | position: relative; |
| 15 | --border: fn.global-dim(--key-focus --border), | 15 | display: flex; |
| 16 | --border-offset: fn.global-dim(--key-focus --border-offset), | 16 | flex-direction: column; |
| 17 | --outline: fn.global-dim(--key-focus --outline), | 17 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
| 18 | ), | 18 | background-color: props.get(vars.$bg-color); |
| 19 | ), | 19 | background-clip: content-box; |
| 20 | --colors: ( | 20 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
| 21 | --bg: fn.global-color(--bg-l2), | 21 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); |
| 22 | --border: fn.global-color(--border-mute), | 22 | transition: transform .2s; |
| 23 | --divider: fn.global-color(--border-mute), | 23 | |
| 24 | 24 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | |
| 25 | --hover: ( | ||
| 26 | --border: fn.global-color(--border), | ||
| 27 | ), | ||
| 28 | |||
| 29 | --key-focus: ( | ||
| 30 | --label: fn.global-color(--focus --text), | ||
| 31 | --border: fn.global-color(--focus --border), | ||
| 32 | --outline: fn.global-color(--focus --outline), | ||
| 33 | ), | ||
| 34 | |||
| 35 | --quiet: ( | ||
| 36 | --image: fn.global-color(--bg-base), | ||
| 37 | |||
| 38 | --hover: ( | ||
| 39 | --image: fn.global-color(--border), | ||
| 40 | ), | ||
| 41 | ) | ||
| 42 | ), | ||
| 43 | )); | ||
| 44 | |||
| 45 | @include iro.bem-object(iro.props-namespace()) { | ||
| 46 | display: block; | ||
| 47 | border: fn.dim(--border) solid fn.color(--border); | ||
| 48 | border-radius: fn.dim(--rounding); | ||
| 49 | background-color: fn.color(--bg); | ||
| 50 | |||
| 51 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | ||
| 52 | &:hover, | 25 | &:hover, |
| 53 | &:focus-visible, | 26 | &:active, |
| 54 | &:active { | 27 | &:focus-visible { |
| 55 | border-color: fn.color(--hover --border); | 28 | transform: translateY(props.get(vars.$hover--offset-b)); |
| 29 | |||
| 30 | @include bem.elem('body') { | ||
| 31 | @include bem.modifier('hidden') { | ||
| 32 | visibility: visible; | ||
| 33 | opacity: 1; | ||
| 34 | transition: | ||
| 35 | opacity .2s ease, | ||
| 36 | visibility .2s linear; | ||
| 37 | } | ||
| 38 | } | ||
| 56 | } | 39 | } |
| 57 | 40 | ||
| 58 | &:focus-visible { | 41 | &:focus-visible { |
| 59 | border-color: fn.color(--key-focus --border); | 42 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 60 | outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border)); | 43 | box-shadow: |
| 61 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 44 | 0 |
| 45 | 0 | ||
| 46 | 0 | ||
| 47 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 48 | props.get(vars.$key-focus--outline-color); | ||
| 62 | } | 49 | } |
| 63 | } | 50 | } |
| 64 | 51 | ||
| 65 | @include iro.bem-elem('avatar') { | 52 | @include bem.elem('avatar') { |
| 66 | margin-block-start: fn.dim(--pad-b); | 53 | margin-block-start: props.get(vars.$pad-b); |
| 67 | margin-inline-start: fn.dim(--pad-i); | 54 | margin-inline-start: props.get(vars.$pad-i); |
| 68 | } | 55 | } |
| 69 | 56 | ||
| 70 | @include iro.bem-elem('image') { | 57 | @include bem.elem('image') { |
| 71 | display: block; | 58 | position: relative; |
| 72 | inline-size: 100%; | 59 | display: block; |
| 73 | object-fit: cover; | 60 | flex: 0 0 auto; |
| 61 | inline-size: 100%; | ||
| 62 | overflow: hidden; | ||
| 63 | object-fit: cover; | ||
| 64 | transition: background-color .2s, transform .2s, opacity .2s; | ||
| 74 | 65 | ||
| 75 | &:first-child { | 66 | &:first-child { |
| 76 | border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 67 | border-start-start-radius: props.get(vars.$rounding); |
| 77 | border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 68 | border-start-end-radius: props.get(vars.$rounding); |
| 78 | } | 69 | } |
| 79 | 70 | ||
| 80 | &:last-child { | 71 | &:last-child { |
| 81 | border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 72 | border-end-start-radius: props.get(vars.$rounding); |
| 82 | border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 73 | border-end-end-radius: props.get(vars.$rounding); |
| 83 | } | 74 | } |
| 84 | 75 | ||
| 85 | @include iro.bem-next-elem('avatar') { | 76 | @include bem.next-elem('avatar') { |
| 86 | margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); | 77 | margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); |
| 87 | } | 78 | } |
| 88 | } | 79 | } |
| 89 | 80 | ||
| 90 | @include iro.bem-elem('body') { | 81 | @include bem.elem('image-img') { |
| 91 | padding-block: fn.dim(--pad-b); | 82 | display: block; |
| 92 | padding-inline: fn.dim(--pad-i); | 83 | inline-size: 100%; |
| 84 | object-fit: cover; | ||
| 85 | } | ||
| 86 | |||
| 87 | @include bem.elem('image-overlay') { | ||
| 88 | position: absolute; | ||
| 89 | inset-block-end: 0; | ||
| 90 | inset-inline: 0; | ||
| 91 | z-index: 5; | ||
| 92 | padding-block: props.get(vars.$image-overlay--pad-b); | ||
| 93 | padding-inline: props.get(vars.$image-overlay--pad-i); | ||
| 94 | } | ||
| 95 | |||
| 96 | @include bem.elem('body') { | ||
| 97 | flex: 1 0 auto; | ||
| 98 | padding-block: props.get(vars.$pad-b); | ||
| 99 | padding-inline: props.get(vars.$pad-i); | ||
| 93 | 100 | ||
| 94 | &::before { | 101 | &::before { |
| 95 | content: ''; | ||
| 96 | display: block; | 102 | display: block; |
| 97 | margin-block: -100em 100em; | 103 | margin-block: -100em 100em; |
| 104 | content: ''; | ||
| 105 | } | ||
| 106 | |||
| 107 | @include bem.modifier('hidden') { | ||
| 108 | position: absolute; | ||
| 109 | inset-block-end: 0; | ||
| 110 | inset-inline: 0; | ||
| 111 | z-index: 10; | ||
| 112 | visibility: hidden; | ||
| 113 | background-color: props.get(vars.$bg-color); | ||
| 114 | //border-end-start-radius: props.get(vars.$rounding); | ||
| 115 | //border-end-end-radius: props.get(vars.$rounding); | ||
| 116 | opacity: 0; | ||
| 117 | transition: | ||
| 118 | opacity .2s ease, | ||
| 119 | visibility 0s .2s linear; | ||
| 120 | |||
| 121 | @include bem.next-elem('image') { | ||
| 122 | border-start-start-radius: props.get(vars.$rounding); | ||
| 123 | border-start-end-radius: props.get(vars.$rounding); | ||
| 124 | } | ||
| 98 | } | 125 | } |
| 99 | } | 126 | } |
| 100 | 127 | ||
| 101 | @include iro.bem-elem('content') { | 128 | @include bem.elem('content') { |
| 102 | margin-block-start: fn.dim(--spacing); | 129 | margin-block-start: props.get(vars.$spacing); |
| 103 | } | 130 | } |
| 104 | 131 | ||
| 105 | @include iro.bem-elem('footer') { | 132 | @include bem.elem('footer') { |
| 106 | padding-block: 0 fn.dim(--pad-b); | 133 | flex: 0 0 auto; |
| 107 | padding-inline: fn.dim(--pad-i); | 134 | padding-block: 0 props.get(vars.$pad-b); |
| 108 | margin-block-start: calc(-1 * fn.dim(--pad-b)); | 135 | padding-inline: props.get(vars.$pad-i); |
| 136 | margin-block-start: calc(-1 * props.get(vars.$pad-b)); | ||
| 109 | 137 | ||
| 110 | &::before { | 138 | &::before { |
| 111 | content: ''; | ||
| 112 | display: block; | 139 | display: block; |
| 113 | block-size: fn.dim(--divider); | 140 | block-size: props.get(vars.$divider-width); |
| 114 | margin-block: fn.dim(--spacing); | 141 | margin-block: props.get(vars.$spacing); |
| 115 | background-color: fn.color(--divider); | 142 | content: ''; |
| 143 | background-color: props.get(vars.$divider-width); | ||
| 116 | } | 144 | } |
| 117 | } | 145 | } |
| 118 | 146 | ||
| 119 | @include iro.bem-modifier('quiet') { | 147 | @include bem.modifier('quiet') { |
| 120 | position: relative; | 148 | margin-inline: 0; |
| 121 | border: 0; | ||
| 122 | background-color: transparent; | 149 | background-color: transparent; |
| 150 | border: 0; | ||
| 123 | 151 | ||
| 124 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 152 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
| 125 | &:hover, | 153 | &:hover, |
| 126 | &:active { | 154 | &:active, |
| 127 | @include iro.bem-elem('image') { | 155 | &:focus-visible { |
| 156 | transform: none; | ||
| 157 | |||
| 158 | @include bem.elem('image') { | ||
| 159 | background-color: props.get(vars.$quiet--hover--image-color); | ||
| 128 | opacity: .75; | 160 | opacity: .75; |
| 129 | background-color: fn.color(--quiet --hover --image); | 161 | transform: translateY(props.get(vars.$hover--offset-b)); |
| 162 | } | ||
| 163 | |||
| 164 | @include bem.elem('body') { | ||
| 165 | @include bem.modifier('hidden') { | ||
| 166 | transform: translateY(props.get(vars.$hover--offset-b)); | ||
| 167 | } | ||
| 130 | } | 168 | } |
| 131 | } | 169 | } |
| 132 | 170 | ||
| @@ -134,32 +172,72 @@ | |||
| 134 | outline: none; | 172 | outline: none; |
| 135 | box-shadow: none; | 173 | box-shadow: none; |
| 136 | 174 | ||
| 137 | @include iro.bem-elem('image') { | 175 | @include bem.elem('image') { |
| 138 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 176 | background-color: props.get(vars.$quiet--hover--image-color); |
| 177 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
| 178 | box-shadow: | ||
| 179 | 0 | ||
| 180 | 0 | ||
| 181 | 0 | ||
| 182 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 183 | props.get(vars.$key-focus--outline-color); | ||
| 139 | opacity: 1; | 184 | opacity: 1; |
| 140 | background-color: fn.color(--quiet --hover --image); | ||
| 141 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 142 | } | 185 | } |
| 143 | } | 186 | } |
| 144 | } | 187 | } |
| 145 | 188 | ||
| 146 | @include iro.bem-elem('image') { | 189 | @include bem.elem('image') { |
| 147 | position: relative; | 190 | position: relative; |
| 148 | margin: calc(-1 * fn.dim(--key-focus --border)); | 191 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
| 149 | border: fn.dim(--key-focus --border-offset) solid transparent; | 192 | background-color: props.get(vars.$quiet--image-color); |
| 150 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
| 151 | background-color: fn.color(--quiet --image); | ||
| 152 | background-clip: padding-box; | 193 | background-clip: padding-box; |
| 194 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 195 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 153 | } | 196 | } |
| 154 | 197 | ||
| 155 | @include iro.bem-elem('body') { | 198 | @include bem.elem('body') { |
| 156 | padding: 0; | 199 | padding: 0; |
| 157 | padding-block-start: fn.dim(--spacing); | 200 | padding-block-start: props.get(vars.$spacing); |
| 201 | |||
| 202 | @include bem.modifier('hidden') { | ||
| 203 | padding-block: props.get(vars.$pad-b); | ||
| 204 | padding-inline: props.get(vars.$pad-i); | ||
| 205 | } | ||
| 158 | } | 206 | } |
| 159 | 207 | ||
| 160 | @include iro.bem-elem('footer') { | 208 | @include bem.elem('footer') { |
| 161 | padding-inline: 0; | 209 | padding-inline: 0; |
| 162 | } | 210 | } |
| 163 | } | 211 | } |
| 212 | |||
| 213 | @include bem.modifier('horizontal') { | ||
| 214 | flex-direction: row; | ||
| 215 | align-items: center; | ||
| 216 | |||
| 217 | @include bem.elem('image') { | ||
| 218 | align-self: stretch; | ||
| 219 | inline-size: auto; | ||
| 220 | |||
| 221 | &:first-child { | ||
| 222 | border-start-end-radius: 0; | ||
| 223 | border-end-start-radius: props.get(vars.$rounding); | ||
| 224 | } | ||
| 225 | |||
| 226 | &:last-child { | ||
| 227 | border-start-end-radius: props.get(vars.$rounding); | ||
| 228 | border-end-start-radius: 0; | ||
| 229 | } | ||
| 230 | } | ||
| 231 | |||
| 232 | @include bem.elem('body') { | ||
| 233 | flex: 0 0 auto; | ||
| 234 | |||
| 235 | @include bem.modifier('main') { | ||
| 236 | flex-shrink: 1; | ||
| 237 | inline-size: 100%; | ||
| 238 | min-inline-size: 0; | ||
| 239 | } | ||
| 240 | } | ||
| 241 | } | ||
| 164 | } | 242 | } |
| 165 | } | 243 | } |
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss new file mode 100644 index 0000000..8adbcde --- /dev/null +++ b/src/objects/_card.vars.scss | |||
| @@ -0,0 +1,27 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; | ||
| 6 | $pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; | ||
| 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; | ||
| 9 | $rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; | ||
| 10 | $image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default; | ||
| 11 | $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default; | ||
| 12 | |||
| 13 | $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; | ||
| 14 | |||
| 15 | $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 16 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 17 | $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 18 | |||
| 19 | $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | ||
| 20 | $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 21 | |||
| 22 | $key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 23 | $key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 24 | $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 25 | |||
| 26 | $quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; | ||
| 27 | $quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; | ||
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 8527948..82dd596 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss | |||
| @@ -1,165 +1,130 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/functions' as fn; | ||
| 4 | @use 'iro-sass/src/props'; | ||
| 5 | @use '../props' as *; | ||
| 6 | @use '../core.vars' as core; | ||
| 3 | 7 | ||
| 4 | @include iro.props-namespace('checkbox') { | 8 | @forward 'checkbox.vars'; |
| 5 | @include iro.props-store(( | 9 | @use 'checkbox.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --size: fn.global-dim(--size --175), | ||
| 8 | --label-gap: fn.global-dim(--size --125), | ||
| 9 | --border: fn.global-dim(--border --medium), | ||
| 10 | --pad-i: fn.global-dim(--size --65), | ||
| 11 | --pad-b: fn.global-dim(--size --65), | ||
| 12 | --rounding: fn.global-dim(--rounding), | ||
| 13 | --spacing-sibling: fn.global-dim(--size --300), | ||
| 14 | 10 | ||
| 15 | --key-focus: ( | 11 | @mixin styles { |
| 16 | --border: fn.global-dim(--key-focus --border), | 12 | @include materialize-at-root(meta.module-variables('vars')); |
| 17 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 18 | --outline: fn.global-dim(--key-focus --outline), | ||
| 19 | ), | ||
| 20 | ), | ||
| 21 | --colors: ( | ||
| 22 | --box-border: fn.global-color(--text-mute-more), | ||
| 23 | --box-bg: fn.global-color(--base --75), | ||
| 24 | |||
| 25 | --hover: ( | ||
| 26 | --label: fn.global-color(--heading), | ||
| 27 | --box-border: fn.global-color(--text-mute), | ||
| 28 | ), | ||
| 29 | --accent: ( | ||
| 30 | --box-border: fn.global-color(--accent --900), | ||
| 31 | |||
| 32 | --hover: ( | ||
| 33 | --box-border: fn.global-color(--accent --1000), | ||
| 34 | ), | ||
| 35 | ), | ||
| 36 | --disabled: ( | ||
| 37 | --label: fn.global-color(--text-disabled), | ||
| 38 | --box-border: fn.global-color(--border-strong), | ||
| 39 | --box-bg: fn.global-color(--base --75), | ||
| 40 | ), | ||
| 41 | --key-focus: ( | ||
| 42 | --label: fn.global-color(--focus --text), | ||
| 43 | --border: fn.global-color(--focus --border), | ||
| 44 | --outline: fn.global-color(--focus --outline), | ||
| 45 | ), | ||
| 46 | ), | ||
| 47 | )); | ||
| 48 | 13 | ||
| 49 | @include iro.bem-object(iro.props-namespace()) { | 14 | @include bem.object('checkbox') { |
| 50 | display: inline-block; | ||
| 51 | position: relative; | 15 | position: relative; |
| 16 | display: inline-block; | ||
| 17 | padding-block: props.get(vars.$pad-b); | ||
| 18 | padding-inline: props.get(vars.$pad-i); | ||
| 52 | margin-inline: | 19 | margin-inline: |
| 53 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) | 20 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
| 54 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset)); | 21 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); |
| 55 | padding-block: fn.dim(--pad-b); | ||
| 56 | padding-inline: fn.dim(--pad-i); | ||
| 57 | 22 | ||
| 58 | @include iro.bem-elem('box') { | 23 | @include bem.elem('box') { |
| 59 | display: inline-block; | ||
| 60 | position: relative; | 24 | position: relative; |
| 25 | display: inline-block; | ||
| 61 | flex: 0 0 auto; | 26 | flex: 0 0 auto; |
| 62 | inline-size: fn.dim(--size); | 27 | inline-size: props.get(vars.$size); |
| 63 | block-size: fn.dim(--size); | 28 | block-size: props.get(vars.$size); |
| 64 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset)); | 29 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); |
| 65 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
| 66 | border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset)); | ||
| 67 | background-color: fn.color(--box-border); | ||
| 68 | background-clip: padding-box; | ||
| 69 | vertical-align: top; | 30 | vertical-align: top; |
| 31 | background-color: props.get(vars.$box-border-color); | ||
| 32 | background-clip: padding-box; | ||
| 33 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 34 | border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); | ||
| 70 | 35 | ||
| 71 | &::before, | 36 | &::before, |
| 72 | &::after { | 37 | &::after { |
| 73 | content: ''; | ||
| 74 | display: block; | ||
| 75 | position: absolute; | 38 | position: absolute; |
| 39 | display: block; | ||
| 40 | content: ''; | ||
| 76 | } | 41 | } |
| 77 | 42 | ||
| 78 | &::before { | 43 | &::before { |
| 44 | inset-block-start: props.get(vars.$border-width); | ||
| 45 | inset-inline-start: props.get(vars.$border-width); | ||
| 79 | z-index: 2; | 46 | z-index: 2; |
| 80 | inset-block-start: fn.dim(--border); | 47 | inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); |
| 81 | inset-inline-start: fn.dim(--border); | 48 | block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); |
| 82 | inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); | 49 | background-color: props.get(vars.$box-bg-color); |
| 83 | block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); | ||
| 84 | transition: transform .2s ease; | 50 | transition: transform .2s ease; |
| 85 | background-color: fn.color(--box-bg); | ||
| 86 | } | 51 | } |
| 87 | 52 | ||
| 88 | &::after { | 53 | &::after { |
| 54 | inset-block-start: calc(.5 * props.get(vars.$size) - 1px); | ||
| 55 | inset-inline-start: calc(1.5 * props.get(vars.$border-width)); | ||
| 89 | z-index: 3; | 56 | z-index: 3; |
| 90 | inset-block-start: calc(.5 * fn.dim(--size) - 1px); | ||
| 91 | inset-inline-start: calc(1.5 * fn.dim(--border)); | ||
| 92 | box-sizing: border-box; | 57 | box-sizing: border-box; |
| 93 | inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); | 58 | inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); |
| 94 | block-size: 0; | 59 | block-size: 0; |
| 95 | transform: scale(0); | 60 | border-color: props.get(vars.$box-bg-color); |
| 61 | border-style: solid; | ||
| 62 | border-radius: 2px; | ||
| 96 | transition: transform .2s ease; | 63 | transition: transform .2s ease; |
| 64 | transform: scale(0); | ||
| 97 | border-block-width: 0 2px; | 65 | border-block-width: 0 2px; |
| 98 | border-inline-width: 0 2px; | 66 | border-inline-width: 0 2px; |
| 99 | border-style: solid; | ||
| 100 | border-radius: 2px; | ||
| 101 | border-color: fn.color(--box-bg); | ||
| 102 | } | 67 | } |
| 103 | } | 68 | } |
| 104 | 69 | ||
| 105 | @include iro.bem-elem('check-icon') { | 70 | @include bem.elem('check-icon') { |
| 106 | display: block; | ||
| 107 | position: absolute; | 71 | position: absolute; |
| 72 | inset-block-start: calc(1 * props.get(vars.$border-width)); | ||
| 73 | inset-inline-start: calc(1 * props.get(vars.$border-width)); | ||
| 108 | z-index: 2; | 74 | z-index: 2; |
| 109 | inset-block-start: calc(1 * fn.dim(--border)); | 75 | display: block; |
| 110 | inset-inline-start: calc(1 * fn.dim(--border)); | 76 | inline-size: calc(100% - 2 * props.get(vars.$border-width)); |
| 111 | inline-size: calc(100% - 2 * fn.dim(--border)); | 77 | block-size: calc(100% - 2 * props.get(vars.$border-width)); |
| 112 | block-size: calc(100% - 2 * fn.dim(--border)); | ||
| 113 | margin: 0; | 78 | margin: 0; |
| 79 | color: props.get(vars.$box-bg-color); | ||
| 80 | stroke-width: fn.px-to-rem(3px); | ||
| 81 | transition: transform .2s ease; | ||
| 114 | transform: scale(0); | 82 | transform: scale(0); |
| 115 | transform-origin: 40% 90%; | 83 | transform-origin: 40% 90%; |
| 116 | transition: transform .2s ease; | ||
| 117 | stroke-width: iro.fn-px-to-rem(3px); | ||
| 118 | color: fn.color(--box-bg); | ||
| 119 | } | 84 | } |
| 120 | 85 | ||
| 121 | @include iro.bem-elem('label') { | 86 | @include bem.elem('label') { |
| 122 | margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); | 87 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); |
| 123 | } | 88 | } |
| 124 | 89 | ||
| 125 | @include iro.bem-elem('native') { | 90 | @include bem.elem('native') { |
| 126 | appearance: none; | ||
| 127 | position: absolute; | 91 | position: absolute; |
| 128 | z-index: -1; | ||
| 129 | inset-block-start: 0; | 92 | inset-block-start: 0; |
| 130 | inset-inline-start: 0; | 93 | inset-inline-start: 0; |
| 94 | z-index: -1; | ||
| 131 | inline-size: 100%; | 95 | inline-size: 100%; |
| 132 | block-size: 100%; | 96 | block-size: 100%; |
| 133 | margin: 0; | ||
| 134 | padding: 0; | 97 | padding: 0; |
| 98 | margin: 0; | ||
| 135 | overflow: hidden; | 99 | overflow: hidden; |
| 136 | border-radius: fn.dim(--rounding); | 100 | appearance: none; |
| 101 | border-radius: props.get(vars.$rounding); | ||
| 137 | 102 | ||
| 138 | &:hover, | 103 | &:hover, |
| 139 | &:focus-visible { | 104 | &:focus-visible { |
| 140 | @include iro.bem-sibling-elem('label') { | 105 | @include bem.sibling-elem('label') { |
| 141 | color: fn.color(--hover --label); | 106 | color: props.get(vars.$hover--label-color); |
| 142 | } | 107 | } |
| 143 | 108 | ||
| 144 | @include iro.bem-sibling-elem('box') { | 109 | @include bem.sibling-elem('box') { |
| 145 | background-color: fn.color(--hover --box-border); | 110 | background-color: props.get(vars.$hover--box-border-color); |
| 146 | } | 111 | } |
| 147 | } | 112 | } |
| 148 | 113 | ||
| 149 | &:checked { | 114 | &:checked { |
| 150 | @include iro.bem-sibling-elem('box') { | 115 | @include bem.sibling-elem('box') { |
| 151 | &::before { | 116 | &::before { |
| 152 | transform: scale(0); | 117 | transform: scale(0); |
| 153 | } | 118 | } |
| 154 | 119 | ||
| 155 | @include iro.bem-elem('check-icon') { | 120 | @include bem.elem('check-icon') { |
| 156 | transform: scale(1); | 121 | transform: scale(1); |
| 157 | } | 122 | } |
| 158 | } | 123 | } |
| 159 | } | 124 | } |
| 160 | 125 | ||
| 161 | &:indeterminate { | 126 | &:indeterminate { |
| 162 | @include iro.bem-sibling-elem('box') { | 127 | @include bem.sibling-elem('box') { |
| 163 | &::before { | 128 | &::before { |
| 164 | transform: scale(0); | 129 | transform: scale(0); |
| 165 | } | 130 | } |
| @@ -168,90 +133,95 @@ | |||
| 168 | transform: scale(1); | 133 | transform: scale(1); |
| 169 | } | 134 | } |
| 170 | 135 | ||
| 171 | @include iro.bem-elem('check-icon') { | 136 | @include bem.elem('check-icon') { |
| 172 | transform: scale(0); | 137 | transform: scale(0); |
| 173 | } | 138 | } |
| 174 | } | 139 | } |
| 175 | } | 140 | } |
| 176 | 141 | ||
| 177 | &:disabled { | 142 | &:disabled { |
| 178 | @include iro.bem-sibling-elem('label') { | 143 | @include bem.sibling-elem('label') { |
| 179 | color: fn.color(--disabled --label); | 144 | color: props.get(vars.$disabled--label-color); |
| 180 | } | 145 | } |
| 181 | 146 | ||
| 182 | @include iro.bem-sibling-elem('box') { | 147 | @include bem.sibling-elem('box') { |
| 183 | background-color: fn.color(--disabled --box-border); | 148 | background-color: props.get(vars.$disabled--box-border-color); |
| 184 | 149 | ||
| 185 | &::before { | 150 | &::before { |
| 186 | background-color: fn.color(--disabled --box-bg); | 151 | background-color: props.get(vars.$disabled--box-bg-color); |
| 187 | } | 152 | } |
| 188 | } | 153 | } |
| 189 | } | 154 | } |
| 190 | 155 | ||
| 191 | &:focus-visible { | 156 | &:focus-visible { |
| 192 | @include iro.bem-sibling-elem('label') { | 157 | @include bem.sibling-elem('label') { |
| 193 | color: fn.color(--key-focus --label); | 158 | color: props.get(vars.$key-focus--label-color); |
| 194 | } | 159 | } |
| 195 | 160 | ||
| 196 | @include iro.bem-sibling-elem('box') { | 161 | @include bem.sibling-elem('box') { |
| 197 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 162 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 198 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 163 | box-shadow: |
| 164 | 0 | ||
| 165 | 0 | ||
| 166 | 0 | ||
| 167 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 168 | props.get(vars.$key-focus--outline-color); | ||
| 199 | } | 169 | } |
| 200 | } | 170 | } |
| 201 | } | 171 | } |
| 202 | 172 | ||
| 203 | @include iro.bem-modifier('standalone') { | 173 | @include bem.modifier('standalone') { |
| 204 | @include iro.bem-elem('box') { | 174 | @include bem.elem('box') { |
| 205 | margin-block-start: 0; | 175 | margin-block-start: 0; |
| 206 | } | 176 | } |
| 207 | } | 177 | } |
| 208 | 178 | ||
| 209 | @include iro.bem-modifier('accent') { | 179 | @include bem.modifier('accent') { |
| 210 | @include iro.bem-elem('native') { | 180 | @include bem.elem('native') { |
| 211 | &:checked { | 181 | &:checked { |
| 212 | @include iro.bem-sibling-elem('box') { | 182 | @include bem.sibling-elem('box') { |
| 213 | background-color: fn.color(--accent --box-border); | 183 | background-color: props.get(vars.$accent--box-border-color); |
| 214 | } | 184 | } |
| 215 | 185 | ||
| 216 | &:hover, | 186 | &:hover, |
| 217 | &:focus-visible { | 187 | &:focus-visible { |
| 218 | @include iro.bem-sibling-elem('box') { | 188 | @include bem.sibling-elem('box') { |
| 219 | background-color: fn.color(--accent --hover --box-border); | 189 | background-color: props.get(vars.$accent--hover--box-border-color); |
| 220 | } | 190 | } |
| 221 | } | 191 | } |
| 222 | } | 192 | } |
| 223 | 193 | ||
| 224 | &:indeterminate { | 194 | &:indeterminate { |
| 225 | @include iro.bem-sibling-elem('box') { | 195 | @include bem.sibling-elem('box') { |
| 226 | background-color: fn.color(--accent --box-border); | 196 | background-color: props.get(vars.$accent--box-border-color); |
| 227 | } | 197 | } |
| 228 | 198 | ||
| 229 | &:hover, | 199 | &:hover, |
| 230 | &:focus-visible { | 200 | &:focus-visible { |
| 231 | @include iro.bem-sibling-elem('box') { | 201 | @include bem.sibling-elem('box') { |
| 232 | background-color: fn.color(--accent --hover --box-border); | 202 | background-color: props.get(vars.$accent--hover--box-border-color); |
| 233 | } | 203 | } |
| 234 | } | 204 | } |
| 235 | } | 205 | } |
| 236 | 206 | ||
| 237 | &:disabled { | 207 | &:disabled { |
| 238 | @include iro.bem-sibling-elem('box') { | 208 | @include bem.sibling-elem('box') { |
| 239 | background-color: fn.color(--disabled --box-border); | 209 | background-color: props.get(vars.$disabled--box-border-color); |
| 240 | 210 | ||
| 241 | &::before { | 211 | &::before { |
| 242 | background-color: fn.color(--disabled --box-bg); | 212 | background-color: props.get(vars.$disabled--box-bg-color); |
| 243 | } | 213 | } |
| 244 | } | 214 | } |
| 245 | 215 | ||
| 246 | &:checked { | 216 | &:checked { |
| 247 | @include iro.bem-sibling-elem('box') { | 217 | @include bem.sibling-elem('box') { |
| 248 | background-color: fn.color(--disabled --box-border); | 218 | background-color: props.get(vars.$disabled--box-border-color); |
| 249 | } | 219 | } |
| 250 | } | 220 | } |
| 251 | 221 | ||
| 252 | &:indeterminate { | 222 | &:indeterminate { |
| 253 | @include iro.bem-sibling-elem('box') { | 223 | @include bem.sibling-elem('box') { |
| 254 | background-color: fn.color(--disabled --box-border); | 224 | background-color: props.get(vars.$disabled--box-border-color); |
| 255 | } | 225 | } |
| 256 | } | 226 | } |
| 257 | } | 227 | } |
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss new file mode 100644 index 0000000..aee26e6 --- /dev/null +++ b/src/objects/_checkbox.vars.scss | |||
| @@ -0,0 +1,32 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default; | ||
| 6 | $label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default; | ||
| 7 | $border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; | ||
| 8 | $pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; | ||
| 9 | $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; | ||
| 10 | $rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; | ||
| 11 | $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; | ||
| 12 | |||
| 13 | $key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 18 | $box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; | ||
| 19 | |||
| 20 | $hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 21 | $hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 22 | |||
| 23 | $accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default; | ||
| 24 | $accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; | ||
| 25 | |||
| 26 | $disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 27 | $disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 28 | $disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; | ||
| 29 | |||
| 30 | $key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 31 | $key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 32 | $key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index d1e2897..4ed8092 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss | |||
| @@ -1,115 +1,69 @@ | |||
| 1 | @use 'sass:map'; | 1 | @use 'sass:map'; |
| 2 | @use 'iro-sass/src/index' as iro; | 2 | @use 'sass:meta'; |
| 3 | @use '../functions' as fn; | 3 | @use 'sass:string'; |
| 4 | @use '../config'; | 4 | @use 'iro-sass/src/bem'; |
| 5 | 5 | @use 'iro-sass/src/props'; | |
| 6 | $static-themes: 'black' 'white' !default; | 6 | @use '../props' as *; |
| 7 | 7 | @use '../core.vars' as core; | |
| 8 | @include iro.props-namespace('divider') { | 8 | |
| 9 | @include iro.props-store(( | 9 | @forward 'divider.vars'; |
| 10 | --dims: ( | 10 | @use 'divider.vars' as vars; |
| 11 | --margin-b: fn.global-dim(--size --85), | 11 | |
| 12 | 12 | @mixin styles { | |
| 13 | --strong: ( | 13 | @include materialize-at-root(meta.module-variables('vars')); |
| 14 | --border: fn.global-dim(--border --thick), | 14 | |
| 15 | --label-font-size: fn.global-dim(--font-size --100), | 15 | @include bem.object('divider') { |
| 16 | ), | 16 | display: flex; |
| 17 | --medium: ( | 17 | flex: 0 0 auto; |
| 18 | --border: fn.global-dim(--border --medium), | 18 | flex-direction: row; |
| 19 | --label-font-size: fn.global-dim(--font-size --75), | 19 | align-items: center; |
| 20 | ), | 20 | block-size: 1em; |
| 21 | --faint: ( | 21 | margin-block: props.get(vars.$margin-b); |
| 22 | --border: fn.global-dim(--border --thin), | 22 | font-size: props.get(vars.$strong--label-font-size); |
| 23 | --label-font-size: fn.global-dim(--font-size --50), | 23 | font-weight: 700; |
| 24 | ), | 24 | line-height: 1; |
| 25 | ), | 25 | color: props.get(vars.$strong--label-color); |
| 26 | --colors: ( | 26 | text-transform: uppercase; |
| 27 | --strong: ( | 27 | letter-spacing: .5px; |
| 28 | --bg: fn.global-color(--text), | 28 | background-color: transparent; |
| 29 | --label: fn.global-color(--text), | ||
| 30 | ), | ||
| 31 | --medium: ( | ||
| 32 | --bg: fn.global-color(--border), | ||
| 33 | --label: fn.global-color(--text-mute), | ||
| 34 | ), | ||
| 35 | --faint: ( | ||
| 36 | --bg: fn.global-color(--border), | ||
| 37 | --label: fn.global-color(--text-mute-more), | ||
| 38 | ), | ||
| 39 | ), | ||
| 40 | )); | ||
| 41 | |||
| 42 | @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) { | ||
| 43 | @if $color != '--base' { | ||
| 44 | @include iro.props-store(( | ||
| 45 | --colors: ( | ||
| 46 | $color: ( | ||
| 47 | --bg: fn.global-color($color --800), | ||
| 48 | --label: fn.global-color($color --1000), | ||
| 49 | ) | ||
| 50 | ), | ||
| 51 | )); | ||
| 52 | } | ||
| 53 | } | ||
| 54 | |||
| 55 | @each $theme in $static-themes { | ||
| 56 | @include iro.props-store(( | ||
| 57 | --colors: ( | ||
| 58 | --static-#{$theme}: ( | ||
| 59 | --strong: ( | ||
| 60 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
| 61 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
| 62 | ), | ||
| 63 | --medium: ( | ||
| 64 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 65 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 66 | ), | ||
| 67 | --faint: ( | ||
| 68 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
| 69 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
| 70 | ), | ||
| 71 | ) | ||
| 72 | ), | ||
| 73 | )); | ||
| 74 | } | ||
| 75 | |||
| 76 | @include iro.bem-object(iro.props-namespace()) { | ||
| 77 | display: flex; | ||
| 78 | flex: 0 0 auto; | ||
| 79 | flex-direction: row; | ||
| 80 | align-items: center; | ||
| 81 | block-size: 1em; | ||
| 82 | margin-block: fn.dim(--margin-b); | ||
| 83 | color: fn.color(--strong --label); | ||
| 84 | font-size: fn.dim(--strong --label-font-size); | ||
| 85 | font-weight: 700; | ||
| 86 | letter-spacing: .5px; | ||
| 87 | line-height: 1; | ||
| 88 | text-transform: uppercase; | ||
| 89 | 29 | ||
| 90 | &::before, | 30 | &::before, |
| 91 | &::after { | 31 | &::after { |
| 92 | content: ''; | ||
| 93 | flex: 1 1 auto; | 32 | flex: 1 1 auto; |
| 94 | inline-size: 100%; | 33 | inline-size: 100%; |
| 95 | block-size: fn.dim(--strong --border); | 34 | block-size: props.get(vars.$strong--border-width); |
| 96 | background-color: fn.color(--strong --bg); | 35 | content: ''; |
| 36 | background-color: props.get(vars.$strong--bg-color); | ||
| 97 | } | 37 | } |
| 98 | 38 | ||
| 99 | &::before { | 39 | &::before { |
| 100 | display: block; | 40 | display: block; |
| 101 | } | 41 | } |
| 102 | 42 | ||
| 103 | @include iro.bem-elem('label') { | 43 | @include bem.elem('label') { |
| 104 | flex: 0 0 auto; | 44 | flex: 0 0 auto; |
| 105 | } | 45 | } |
| 106 | 46 | ||
| 107 | @include iro.bem-modifier('vertical') { | 47 | @include bem.modifier('vertical') { |
| 108 | align-self: stretch; | 48 | align-self: stretch; |
| 109 | inline-size: 1px; | 49 | inline-size: props.get(vars.$vertical--border-width); |
| 110 | block-size: auto; | 50 | block-size: auto; |
| 111 | margin-block: 0; | 51 | margin-block: 0; |
| 112 | background-color: fn.color(--faint --bg); | 52 | background-color: props.get(vars.$strong--bg-color); |
| 53 | |||
| 54 | &::before, | ||
| 55 | &::after { | ||
| 56 | display: none; | ||
| 57 | } | ||
| 58 | } | ||
| 59 | |||
| 60 | @include bem.modifier('dot') { | ||
| 61 | align-self: center; | ||
| 62 | inline-size: props.get(vars.$dot--size); | ||
| 63 | block-size: props.get(vars.$dot--size); | ||
| 64 | margin-block: 0; | ||
| 65 | background-color: props.get(vars.$strong--bg-color); | ||
| 66 | border-radius: props.get(vars.$dot--size); | ||
| 113 | 67 | ||
| 114 | &::before, | 68 | &::before, |
| 115 | &::after { | 69 | &::after { |
| @@ -117,31 +71,47 @@ $static-themes: 'black' 'white' !default; | |||
| 117 | } | 71 | } |
| 118 | } | 72 | } |
| 119 | 73 | ||
| 120 | @include iro.bem-modifier('medium') { | 74 | @include bem.modifier('medium') { |
| 121 | color: fn.color(--medium --label); | 75 | font-size: props.get(vars.$medium--label-font-size); |
| 122 | font-size: fn.dim(--medium --label-font-size); | ||
| 123 | font-weight: 500; | 76 | font-weight: 500; |
| 77 | color: props.get(vars.$medium--label-color); | ||
| 124 | 78 | ||
| 125 | &::before, | 79 | &::before, |
| 126 | &::after { | 80 | &::after { |
| 127 | block-size: fn.dim(--medium --border); | 81 | block-size: props.get(vars.$medium--border-width); |
| 128 | background-color: fn.color(--medium --bg); | 82 | background-color: props.get(vars.$medium--bg-color); |
| 83 | } | ||
| 84 | |||
| 85 | @include bem.modifier('vertical') { | ||
| 86 | background-color: props.get(vars.$medium--bg-color); | ||
| 87 | } | ||
| 88 | |||
| 89 | @include bem.modifier('dot') { | ||
| 90 | background-color: props.get(vars.$medium--bg-color); | ||
| 129 | } | 91 | } |
| 130 | } | 92 | } |
| 131 | 93 | ||
| 132 | @include iro.bem-modifier('faint') { | 94 | @include bem.modifier('faint') { |
| 133 | color: fn.color(--faint --label); | 95 | font-size: props.get(vars.$faint--label-font-size); |
| 134 | font-size: fn.dim(--faint --label-font-size); | ||
| 135 | font-weight: 500; | 96 | font-weight: 500; |
| 97 | color: props.get(vars.$faint--label-color); | ||
| 136 | 98 | ||
| 137 | &::before, | 99 | &::before, |
| 138 | &::after { | 100 | &::after { |
| 139 | block-size: fn.dim(--faint --border); | 101 | block-size: props.get(vars.$faint--border-width); |
| 140 | background-color: fn.color(--faint --bg); | 102 | background-color: props.get(vars.$faint--bg-color); |
| 103 | } | ||
| 104 | |||
| 105 | @include bem.modifier('vertical') { | ||
| 106 | background-color: props.get(vars.$vertical--faint--bg-color); | ||
| 107 | } | ||
| 108 | |||
| 109 | @include bem.modifier('dot') { | ||
| 110 | background-color: props.get(vars.$dot--faint--bg-color); | ||
| 141 | } | 111 | } |
| 142 | } | 112 | } |
| 143 | 113 | ||
| 144 | @include iro.bem-modifier('labelled') { | 114 | @include bem.modifier('labelled') { |
| 145 | &::before { | 115 | &::before { |
| 146 | margin-inline-end: 1em; | 116 | margin-inline-end: 1em; |
| 147 | } | 117 | } |
| @@ -152,49 +122,49 @@ $static-themes: 'black' 'white' !default; | |||
| 152 | } | 122 | } |
| 153 | } | 123 | } |
| 154 | 124 | ||
| 155 | @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { | 125 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 156 | @include iro.bem-modifier($color) { | 126 | @include bem.modifier(string.slice($theme, 3)) { |
| 157 | &::before, | 127 | &::before, |
| 158 | &::after { | 128 | &::after { |
| 159 | background-color: fn.color(--#{$color} --bg); | 129 | background-color: props.get(vars.$themes, $theme, --bg); |
| 160 | } | 130 | } |
| 161 | 131 | ||
| 162 | @include iro.bem-elem('label') { | 132 | @include bem.elem('label') { |
| 163 | color: fn.color(--#{$color} --label); | 133 | color: props.get(vars.$themes, $theme, --label); |
| 164 | } | 134 | } |
| 165 | } | 135 | } |
| 166 | } | 136 | } |
| 167 | 137 | ||
| 168 | @each $theme in $static-themes { | 138 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
| 169 | @include iro.bem-modifier(static-#{$theme}) { | 139 | @include bem.modifier(string.slice($theme, 3)) { |
| 170 | &::before, | 140 | &::before, |
| 171 | &::after { | 141 | &::after { |
| 172 | background-color: fn.color(--static-#{$theme} --strong --bg); | 142 | background-color: props.get(vars.$static-themes, $theme, --strong, --bg); |
| 173 | } | 143 | } |
| 174 | 144 | ||
| 175 | @include iro.bem-elem('label') { | 145 | @include bem.elem('label') { |
| 176 | color: fn.color(--static-#{$theme} --strong --label); | 146 | color: props.get(vars.$static-themes, $theme, --strong, --label); |
| 177 | } | 147 | } |
| 178 | 148 | ||
| 179 | @include iro.bem-modifier('medium') { | 149 | @include bem.modifier('medium') { |
| 180 | &::before, | 150 | &::before, |
| 181 | &::after { | 151 | &::after { |
| 182 | background-color: fn.color(--static-#{$theme} --medium --bg); | 152 | background-color: props.get(vars.$static-themes, $theme, --medium, --bg); |
| 183 | } | 153 | } |
| 184 | 154 | ||
| 185 | @include iro.bem-elem('label') { | 155 | @include bem.elem('label') { |
| 186 | color: fn.color(--static-#{$theme} --medium --label); | 156 | color: props.get(vars.$static-themes, $theme, --medium, --label); |
| 187 | } | 157 | } |
| 188 | } | 158 | } |
| 189 | 159 | ||
| 190 | @include iro.bem-modifier('faint') { | 160 | @include bem.modifier('faint') { |
| 191 | &::before, | 161 | &::before, |
| 192 | &::after { | 162 | &::after { |
| 193 | background-color: fn.color(--static-#{$theme} --faint --bg); | 163 | background-color: props.get(vars.$static-themes, $theme, --faint, --bg); |
| 194 | } | 164 | } |
| 195 | 165 | ||
| 196 | @include iro.bem-elem('label') { | 166 | @include bem.elem('label') { |
| 197 | color: fn.color(--static-#{$theme} --faint --label); | 167 | color: props.get(vars.$static-themes, $theme, --faint, --label); |
| 198 | } | 168 | } |
| 199 | } | 169 | } |
| 200 | } | 170 | } |
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss new file mode 100644 index 0000000..5cd68c1 --- /dev/null +++ b/src/objects/_divider.vars.scss | |||
| @@ -0,0 +1,69 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; | ||
| 7 | $vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; | ||
| 8 | $dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; | ||
| 9 | |||
| 10 | $strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; | ||
| 11 | $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; | ||
| 12 | |||
| 13 | $medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; | ||
| 14 | $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; | ||
| 15 | |||
| 16 | $faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; | ||
| 17 | $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; | ||
| 18 | |||
| 19 | $strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default; | ||
| 20 | $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default; | ||
| 21 | |||
| 22 | $medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 23 | $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 24 | |||
| 25 | $faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 26 | $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 27 | |||
| 28 | $vertical--faint--bg-color: props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 29 | |||
| 30 | $dot--faint--bg-color: props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 31 | |||
| 32 | $static-themes: props.def(--o-divider, (), 'color'); | ||
| 33 | |||
| 34 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 35 | $button-theme: --static-#{string.slice($theme, 3)}; | ||
| 36 | |||
| 37 | $static-themes: props.merge($static-themes, ( | ||
| 38 | $button-theme: ( | ||
| 39 | --strong: ( | ||
| 40 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
| 41 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
| 42 | ), | ||
| 43 | --medium: ( | ||
| 44 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
| 45 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
| 46 | ), | ||
| 47 | --faint: ( | ||
| 48 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
| 49 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
| 50 | ), | ||
| 51 | ) | ||
| 52 | )); | ||
| 53 | } | ||
| 54 | |||
| 55 | $themes-config: ( | ||
| 56 | accent: --accent, | ||
| 57 | negative: --negative, | ||
| 58 | ) !default; | ||
| 59 | |||
| 60 | $themes: props.def(--o-divider, (), 'color'); | ||
| 61 | |||
| 62 | @each $theme, $key in $themes-config { | ||
| 63 | $themes: props.merge($themes, ( | ||
| 64 | --#{$theme}: ( | ||
| 65 | --bg: props.get(core.$theme, $key, --800), | ||
| 66 | --label: props.get(core.$theme, $key, --1000), | ||
| 67 | ) | ||
| 68 | )); | ||
| 69 | } | ||
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index d8d1289..ce2dfa7 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss | |||
| @@ -1,72 +1,49 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'sass:math'; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../props' as *; | ||
| 5 | @use 'icon.vars' as icon; | ||
| 4 | 6 | ||
| 5 | @use 'icon'; | 7 | @forward 'emoji.vars'; |
| 8 | @use 'emoji.vars' as vars; | ||
| 6 | 9 | ||
| 7 | @include iro.props-namespace('emoji') { | 10 | @mixin styles { |
| 8 | @include iro.props-store(( | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 9 | --dims: ( | ||
| 10 | --size: calc(1 / 14 * 18em), | ||
| 11 | --pad: .3em, | ||
| 12 | --rounding: fn.global-dim(--rounding), | ||
| 13 | --zoom: 3, | ||
| 14 | --valign: -.25em, | ||
| 15 | 12 | ||
| 16 | --125: ( | 13 | @include bem.object('emoji') { |
| 17 | --size: calc(1 / 14 * 23em), | ||
| 18 | --valign: -.45em, | ||
| 19 | ), | ||
| 20 | |||
| 21 | --150: ( | ||
| 22 | --size: calc(1 / 14 * 28em), | ||
| 23 | --valign: -.65em, | ||
| 24 | ), | ||
| 25 | |||
| 26 | --200: ( | ||
| 27 | --size: calc(1 / 14 * 38em), | ||
| 28 | --valign: -1em, | ||
| 29 | ) | ||
| 30 | ), | ||
| 31 | --colors: ( | ||
| 32 | --bg: fn.global-color(--border-mute), | ||
| 33 | ) | ||
| 34 | )); | ||
| 35 | |||
| 36 | @include iro.bem-object(iro.props-namespace()) { | ||
| 37 | display: inline-block; | ||
| 38 | position: relative; | 14 | position: relative; |
| 39 | inline-size: calc(fn.dim(--size)); | 15 | display: inline-block; |
| 40 | block-size: calc(fn.dim(--size)); | 16 | inline-size: calc(props.get(vars.$size)); |
| 41 | margin: calc(-1 * fn.dim(--pad)); | 17 | block-size: calc(props.get(vars.$size)); |
| 42 | padding: calc(fn.dim(--pad)); | 18 | padding: calc(props.get(vars.$pad)); |
| 43 | vertical-align: fn.dim(--valign); | 19 | margin: calc(-1 * props.get(vars.$pad)); |
| 20 | vertical-align: props.get(vars.$valign); | ||
| 44 | object-fit: contain; | 21 | object-fit: contain; |
| 45 | 22 | ||
| 46 | @include iro.bem-modifier('icon') { | 23 | @include bem.modifier('icon') { |
| 47 | margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size))); | 24 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); |
| 48 | vertical-align: fn.foreign-dim(--icon, --valign); | 25 | vertical-align: props.get(icon.$valign); |
| 49 | } | 26 | } |
| 50 | 27 | ||
| 51 | @each $size in '125' '150' '200' { | 28 | @each $mod, $size, $valign in vars.$sizes { |
| 52 | @include iro.bem-modifier($size) { | 29 | @include bem.modifier($mod) { |
| 53 | inline-size: fn.dim(--#{$size} --size); | 30 | inline-size: props.get($size); |
| 54 | block-size: fn.dim(--#{$size} --size); | 31 | block-size: props.get($size); |
| 55 | vertical-align: fn.dim(--#{$size} --valign); | 32 | vertical-align: props.get($valign); |
| 56 | 33 | ||
| 57 | @include iro.bem-modifier('icon') { | 34 | @include bem.modifier('icon') { |
| 58 | margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size))); | 35 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); |
| 59 | } | 36 | } |
| 60 | } | 37 | } |
| 61 | } | 38 | } |
| 62 | 39 | ||
| 63 | @include iro.bem-modifier('zoomable') { | 40 | @include bem.modifier('zoomable') { |
| 41 | border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); | ||
| 64 | transition: transform .2s ease, background-color .2s ease; | 42 | transition: transform .2s ease, background-color .2s ease; |
| 65 | border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom)); | ||
| 66 | 43 | ||
| 67 | &:hover { | 44 | &:hover { |
| 68 | transform: scale(fn.dim(--zoom)); | 45 | background-color: props.get(vars.$bg-color); |
| 69 | background-color: fn.color(--bg); | 46 | transform: scale(props.get(vars.$zoom)); |
| 70 | } | 47 | } |
| 71 | } | 48 | } |
| 72 | } | 49 | } |
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss new file mode 100644 index 0000000..fbfb935 --- /dev/null +++ b/src/objects/_emoji.vars.scss | |||
| @@ -0,0 +1,26 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; | ||
| 6 | $pad: props.def(--o-emoji--pad, .3em) !default; | ||
| 7 | $rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default; | ||
| 8 | $zoom: props.def(--o-emoji--zoom, 3) !default; | ||
| 9 | $valign: props.def(--o-emoji--valign, -.25em) !default; | ||
| 10 | |||
| 11 | $size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default; | ||
| 12 | $valign--125: props.def(--o-emoji--125--valign, -.45em) !default; | ||
| 13 | |||
| 14 | $size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default; | ||
| 15 | $valign--150: props.def(--o-emoji--150--valign, -.65em) !default; | ||
| 16 | |||
| 17 | $size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; | ||
| 18 | $valign--200: props.def(--o-emoji--200--valign, -1em) !default; | ||
| 19 | |||
| 20 | $sizes: ( | ||
| 21 | '125' $size--125 $valign--125, | ||
| 22 | '150' $size--150 $valign--150, | ||
| 23 | '200' $size--200 $valign--200, | ||
| 24 | ) !default; | ||
| 25 | |||
| 26 | $bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 1518ea6..564ab2b 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
| @@ -1,84 +1,74 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 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 { |
| 21 | display: block; | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 22 | 11 | ||
| 23 | @include iro.bem-elem('label') { | 12 | @include bem.object('field-label') { |
| 13 | @include bem.elem('label') { | ||
| 24 | display: block; | 14 | display: block; |
| 25 | flex: 0 0 auto; | 15 | flex: 0 0 auto; |
| 26 | padding-inline-end: fn.dim(--spacing-i); | 16 | padding-inline-end: props.get(vars.$spacing-i); |
| 27 | color: fn.color(--label); | 17 | font-size: props.get(vars.$label-font-size); |
| 28 | font-size: fn.dim(--label-font-size); | ||
| 29 | font-weight: 400; | 18 | font-weight: 400; |
| 30 | line-height: 1.3; | 19 | line-height: 1.3; |
| 20 | color: props.get(vars.$label-color); | ||
| 31 | 21 | ||
| 32 | @include iro.bem-next-elem('content') { | 22 | @include bem.next-elem('content') { |
| 33 | margin-block-start: fn.dim(--spacing-b); | 23 | margin-block-start: props.get(vars.$spacing-b); |
| 34 | } | 24 | } |
| 35 | } | 25 | } |
| 36 | 26 | ||
| 37 | @include iro.bem-elem('content') { | 27 | @include bem.elem('content') { |
| 38 | display: block; | 28 | display: block; |
| 39 | flex: 1 1 auto; | 29 | flex: 1 1 auto; |
| 40 | } | 30 | } |
| 41 | 31 | ||
| 42 | @include iro.bem-elem('hint') { | 32 | @include bem.elem('hint') { |
| 43 | display: block; | 33 | display: block; |
| 44 | margin-block-start: fn.dim(--spacing-b); | 34 | margin-block-start: props.get(vars.$spacing-b); |
| 45 | color: fn.color(--hint); | 35 | font-size: props.get(vars.$hint-font-size); |
| 46 | font-size: fn.dim(--hint-font-size); | 36 | color: props.get(vars.$hint-color); |
| 47 | } | 37 | } |
| 48 | 38 | ||
| 49 | @include iro.bem-is('invalid') { | 39 | @include bem.is('invalid') { |
| 50 | @include iro.bem-elem('hint') { | 40 | @include bem.elem('hint') { |
| 51 | color: fn.color(--error-hint); | 41 | color: props.get(vars.$error-hint-color); |
| 52 | } | 42 | } |
| 53 | } | 43 | } |
| 54 | 44 | ||
| 55 | @include iro.bem-is('disabled') { | 45 | @include bem.is('disabled') { |
| 56 | @include iro.bem-elem('label', 'hint') { | 46 | @include bem.elem('label', 'hint') { |
| 57 | color: fn.color(--disabled); | 47 | color: props.get(vars.$disabled-color); |
| 58 | } | 48 | } |
| 59 | } | 49 | } |
| 60 | 50 | ||
| 61 | @include iro.bem-modifier('align-start', 'align-end') { | 51 | @include bem.modifier('align-start', 'align-end') { |
| 62 | display: flex; | 52 | display: flex; |
| 63 | align-items: baseline; | 53 | align-items: baseline; |
| 64 | 54 | ||
| 65 | @include iro.bem-elem('label') { | 55 | @include bem.elem('label') { |
| 66 | display: inline-block; | 56 | display: inline-block; |
| 67 | 57 | ||
| 68 | @include iro.bem-next-elem('content') { | 58 | @include bem.next-elem('content') { |
| 69 | margin-block-start: 0; | 59 | margin-block-start: 0; |
| 70 | } | 60 | } |
| 71 | } | 61 | } |
| 72 | } | 62 | } |
| 73 | 63 | ||
| 74 | @include iro.bem-modifier('align-start') { | 64 | @include bem.modifier('align-start') { |
| 75 | @include iro.bem-elem('label') { | 65 | @include bem.elem('label') { |
| 76 | text-align: start; | 66 | text-align: start; |
| 77 | } | 67 | } |
| 78 | } | 68 | } |
| 79 | 69 | ||
| 80 | @include iro.bem-modifier('align-end') { | 70 | @include bem.modifier('align-end') { |
| 81 | @include iro.bem-elem('label') { | 71 | @include bem.elem('label') { |
| 82 | text-align: end; | 72 | text-align: end; |
| 83 | } | 73 | } |
| 84 | } | 74 | } |
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss new file mode 100644 index 0000000..844a10b --- /dev/null +++ b/src/objects/_field-label.vars.scss | |||
| @@ -0,0 +1,12 @@ | |||
| 1 | @use 'iro-sass/src/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), 'color') !default; | ||
| 10 | $hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 11 | $error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default; | ||
| 12 | $disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss new file mode 100644 index 0000000..38837be --- /dev/null +++ b/src/objects/_figure.scss | |||
| @@ -0,0 +1,26 @@ | |||
| 1 | @use 'sass:meta'; | ||
| 2 | @use 'iro-sass/src/bem'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | |||
| 6 | @forward 'figure.vars'; | ||
| 7 | @use 'figure.vars' as vars; | ||
| 8 | |||
| 9 | @mixin styles { | ||
| 10 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 11 | |||
| 12 | @include bem.object('figure') { | ||
| 13 | @include bem.elem('caption') { | ||
| 14 | padding-block: props.get(vars.$pad-b); | ||
| 15 | font-size: props.get(vars.$font-size); | ||
| 16 | color: props.get(vars.$text-color); | ||
| 17 | border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); | ||
| 18 | |||
| 19 | &::before { | ||
| 20 | display: block; | ||
| 21 | margin-block: -100em 100em; | ||
| 22 | content: ''; | ||
| 23 | } | ||
| 24 | } | ||
| 25 | } | ||
| 26 | } | ||
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss new file mode 100644 index 0000000..78f5d15 --- /dev/null +++ b/src/objects/_figure.vars.scss | |||
| @@ -0,0 +1,9 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default; | ||
| 5 | $border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default; | ||
| 6 | $font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default; | ||
| 7 | |||
| 8 | $text-color: props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 9 | $border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default; | ||
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 7990a6b..bdc7027 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
| @@ -1,116 +1,58 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use '../mixins' as mx; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../config'; | 4 | @use '../props' as *; |
| 5 | @use 'include-media/dist/include-media' as media; | 5 | |
| 6 | 6 | @forward 'heading.vars'; | |
| 7 | $sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; | 7 | @use 'heading.vars' as vars; |
| 8 | 8 | ||
| 9 | @include iro.props-namespace('heading') { | 9 | @mixin styles { |
| 10 | @include iro.props-store(( | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 11 | --dims: ( | 11 | |
| 12 | --offset: -.02em, | 12 | @include bem.object('heading') { |
| 13 | ), | 13 | display: block; |
| 14 | --colors: ( | 14 | margin-block-start: props.get(vars.$margin-bs); |
| 15 | --bg: fn.global-color(--base --50), | 15 | font-family: props.get(vars.$font-family); |
| 16 | ), | 16 | font-weight: props.get(vars.$font-weight); |
| 17 | )); | 17 | font-feature-settings: props.get(vars.$feature-settings); |
| 18 | 18 | line-height: props.get(vars.$line-height); | |
| 19 | @include iro.bem-object(iro.props-namespace()) { | 19 | color: props.get(vars.$text-color); |
| 20 | @include mx.set-font(--headline); | 20 | text-transform: none; |
| 21 | 21 | letter-spacing: normal; | |
| 22 | display: block; | ||
| 23 | margin-block-start: fn.global-dim(--heading --margin-bs); | ||
| 24 | transform: translateX(fn.dim(--offset)); | ||
| 25 | letter-spacing: normal; | ||
| 26 | text-transform: none; | ||
| 27 | 22 | ||
| 28 | & + & { | 23 | & + & { |
| 29 | margin-block-start: fn.global-dim(--heading --margin-bs-sibling); | 24 | margin-block-start: props.get(vars.$margin-bs-sibling); |
| 30 | } | ||
| 31 | |||
| 32 | @include iro.bem-elem('highlight') { | ||
| 33 | background-image: linear-gradient( | ||
| 34 | to top, | ||
| 35 | transparent .05em, | ||
| 36 | fn.color(--bg) .05em, | ||
| 37 | fn.color(--bg) .5em, | ||
| 38 | transparent .5em | ||
| 39 | ); | ||
| 40 | } | ||
| 41 | |||
| 42 | @include iro.bem-modifier('xxl') { | ||
| 43 | @include mx.heading-strong(--xxl); | ||
| 44 | } | ||
| 45 | |||
| 46 | @include iro.bem-modifier('xl') { | ||
| 47 | @include mx.heading-strong(--xl); | ||
| 48 | } | ||
| 49 | |||
| 50 | @include iro.bem-modifier('lg') { | ||
| 51 | @include mx.heading-medium(--lg); | ||
| 52 | } | ||
| 53 | |||
| 54 | @include iro.bem-modifier('md') { | ||
| 55 | @include mx.heading-medium(--md); | ||
| 56 | } | ||
| 57 | |||
| 58 | @include iro.bem-modifier('sm') { | ||
| 59 | @include mx.heading-faint(--sm); | ||
| 60 | } | 25 | } |
| 61 | 26 | ||
| 62 | @include iro.bem-modifier('xs') { | 27 | @include bem.elem('highlight') { |
| 63 | @include mx.heading-faint(--xs); | 28 | background-image: linear-gradient(to top, |
| 29 | transparent .05em, | ||
| 30 | props.get(vars.$bg-color) .05em, | ||
| 31 | props.get(vars.$bg-color) .5em, | ||
| 32 | transparent .5em); | ||
| 64 | } | 33 | } |
| 65 | 34 | ||
| 66 | @include iro.bem-modifier('display') { | 35 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { |
| 67 | @include mx.set-font(--headline); | 36 | @include bem.modifier($mod) { |
| 68 | 37 | font-family: props.get($font-family); | |
| 69 | @include iro.bem-modifier('xxl') { | 38 | font-size: props.get($font-size); |
| 70 | @include mx.heading-strong(--display --xxl); | 39 | font-weight: props.get($font-weight); |
| 71 | 40 | font-feature-settings: props.get($feature-settings); | |
| 72 | @include media.media('<=md') { | 41 | line-height: props.get($line-height); |
| 73 | @include mx.heading-strong(--display-sm --xxl); | 42 | letter-spacing: props.get($letter-spacing); |
| 74 | } | ||
| 75 | } | ||
| 76 | |||
| 77 | @include iro.bem-modifier('xl') { | ||
| 78 | @include mx.heading-strong(--display --xl); | ||
| 79 | |||
| 80 | @include media.media('<=md') { | ||
| 81 | @include mx.heading-strong(--display-sm --xl); | ||
| 82 | } | ||
| 83 | } | ||
| 84 | |||
| 85 | @include iro.bem-modifier('lg') { | ||
| 86 | @include mx.heading-strong(--display --lg); | ||
| 87 | |||
| 88 | @include media.media('<=md') { | ||
| 89 | @include mx.heading-strong(--display-sm --lg); | ||
| 90 | } | ||
| 91 | } | ||
| 92 | |||
| 93 | @include iro.bem-modifier('md') { | ||
| 94 | @include mx.heading-strong(--display --md); | ||
| 95 | |||
| 96 | @include media.media('<=md') { | ||
| 97 | @include mx.heading-strong(--display-sm --md); | ||
| 98 | } | ||
| 99 | } | 43 | } |
| 100 | 44 | } | |
| 101 | @include iro.bem-modifier('sm') { | ||
| 102 | @include mx.heading-medium(--display --sm); | ||
| 103 | |||
| 104 | @include media.media('<=md') { | ||
| 105 | @include mx.heading-medium(--display-sm --sm); | ||
| 106 | } | ||
| 107 | } | ||
| 108 | |||
| 109 | @include iro.bem-modifier('xs') { | ||
| 110 | @include mx.heading-faint(--display --xs); | ||
| 111 | 45 | ||
| 112 | @include media.media('<=md') { | 46 | @include bem.modifier('display') { |
| 113 | @include mx.heading-faint(--display-sm --xs); | 47 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { |
| 48 | @include bem.modifier($mod) { | ||
| 49 | font-family: props.get($font-family); | ||
| 50 | font-size: props.get($font-size); | ||
| 51 | font-weight: props.get($font-weight); | ||
| 52 | font-feature-settings: props.get($feature-settings); | ||
| 53 | line-height: props.get($line-height); | ||
| 54 | letter-spacing: props.get($letter-spacing); | ||
| 55 | transform: translateX(props.get(vars.$offset)); | ||
| 114 | } | 56 | } |
| 115 | } | 57 | } |
| 116 | } | 58 | } |
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss new file mode 100644 index 0000000..90278c8 --- /dev/null +++ b/src/objects/_heading.vars.scss | |||
| @@ -0,0 +1,123 @@ | |||
| 1 | @use 'iro-sass/src/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 | $text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 9 | $bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 10 | |||
| 11 | $font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default; | ||
| 12 | $line-height: props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 13 | $font-weight: props.def(--o-heading--font-weight, bold) !default; | ||
| 14 | $feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 15 | |||
| 16 | $font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default; | ||
| 17 | $line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 18 | $font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; | ||
| 19 | $font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 20 | $letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; | ||
| 21 | $feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 22 | |||
| 23 | $font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default; | ||
| 24 | $line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 25 | $font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; | ||
| 26 | $font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 27 | $letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; | ||
| 28 | $feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 29 | |||
| 30 | $font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; | ||
| 31 | $line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 32 | $font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; | ||
| 33 | $font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; | ||
| 34 | $letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; | ||
| 35 | $feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 36 | |||
| 37 | $font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; | ||
| 38 | $line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 39 | $font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; | ||
| 40 | $font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; | ||
| 41 | $letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; | ||
| 42 | $feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 43 | |||
| 44 | $font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; | ||
| 45 | $line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 46 | $font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 47 | $font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; | ||
| 48 | $letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; | ||
| 49 | $feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 50 | |||
| 51 | $font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; | ||
| 52 | $line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 53 | $font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; | ||
| 54 | $font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; | ||
| 55 | $letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; | ||
| 56 | $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 57 | |||
| 58 | $sizes: ( | ||
| 59 | 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, | ||
| 60 | 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, | ||
| 61 | 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, | ||
| 62 | 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, | ||
| 63 | 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, | ||
| 64 | 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, | ||
| 65 | ) !default; | ||
| 66 | |||
| 67 | $display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; | ||
| 68 | $display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 69 | $display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default; | ||
| 70 | $display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 71 | $display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; | ||
| 72 | $display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 73 | |||
| 74 | $display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default; | ||
| 75 | $display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 76 | $display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default; | ||
| 77 | $display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 78 | $display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; | ||
| 79 | $display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 80 | |||
| 81 | $display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default; | ||
| 82 | $display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 83 | $display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default; | ||
| 84 | $display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 85 | $display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default; | ||
| 86 | $display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 87 | |||
| 88 | $display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default; | ||
| 89 | $display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default; | ||
| 90 | $display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default; | ||
| 91 | $display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default; | ||
| 92 | $display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; | ||
| 93 | $display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; | ||
| 94 | |||
| 95 | $display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; | ||
| 96 | $display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 97 | $display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 98 | $display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; | ||
| 99 | $display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; | ||
| 100 | $display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 101 | |||
| 102 | $display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; | ||
| 103 | $display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; | ||
| 104 | $display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; | ||
| 105 | $display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; | ||
| 106 | $display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; | ||
| 107 | $display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | ||
| 108 | |||
| 109 | $display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default; | ||
| 110 | $display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default; | ||
| 111 | $display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default; | ||
| 112 | $display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default; | ||
| 113 | $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default; | ||
| 114 | $display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; | ||
| 115 | |||
| 116 | $display--sizes: ( | ||
| 117 | '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, | ||
| 118 | '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, | ||
| 119 | '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, | ||
| 120 | '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, | ||
| 121 | '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, | ||
| 122 | '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, | ||
| 123 | ) !default; | ||
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 1491dd9..187938e 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss | |||
| @@ -1,25 +1,24 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('icon') { | 6 | @forward 'icon.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'icon.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --stroke: 1.5px, | ||
| 8 | --size: calc(1 / 14 * 16em), | ||
| 9 | --valign: -.2em, | ||
| 10 | ) | ||
| 11 | )); | ||
| 12 | 8 | ||
| 13 | @include iro.bem-object(iro.props-namespace()) { | 9 | @mixin styles { |
| 10 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 11 | |||
| 12 | @include bem.object('icon') { | ||
| 14 | display: inline; | 13 | display: inline; |
| 15 | inline-size: fn.dim(--size); | 14 | inline-size: props.get(vars.$size); |
| 16 | block-size: fn.dim(--size); | 15 | block-size: props.get(vars.$size); |
| 17 | stroke-width: fn.dim(--stroke); | 16 | vertical-align: props.get(vars.$valign); |
| 18 | stroke-linecap: round; | 17 | stroke-linecap: round; |
| 19 | stroke-linejoin: round; | 18 | stroke-linejoin: round; |
| 20 | vertical-align: fn.dim(--valign); | 19 | stroke-width: props.get(vars.$stroke-width); |
| 21 | 20 | ||
| 22 | @include iro.bem-modifier('block') { | 21 | @include bem.modifier('block') { |
| 23 | display: block; | 22 | display: block; |
| 24 | } | 23 | } |
| 25 | } | 24 | } |
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss new file mode 100644 index 0000000..ff1541d --- /dev/null +++ b/src/objects/_icon.vars.scss | |||
| @@ -0,0 +1,5 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | |||
| 3 | $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default; | ||
| 4 | $size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; | ||
| 5 | $valign: props.def(--o-icon--valign, -.18em) !default; | ||
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 8ad8584..b62c353 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
| @@ -1,313 +1,135 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use '../functions' as fn; | 2 | @use 'sass:meta'; |
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 3 | 7 | ||
| 4 | @use 'action-button'; | 8 | @forward 'lightbox.vars'; |
| 9 | @use 'lightbox.vars' as vars; | ||
| 5 | 10 | ||
| 6 | $static-themes: 'black' 'white' !default; | 11 | @mixin styles { |
| 12 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 7 | 13 | ||
| 8 | @include iro.props-namespace('lightbox') { | 14 | @include bem.object('lightbox') { |
| 9 | @include iro.props-store(( | 15 | flex: 1 1 auto; |
| 10 | --dims: ( | 16 | min-block-size: 0; |
| 11 | --pad: fn.global-dim(--size --150), | ||
| 12 | 17 | ||
| 13 | --thumbnail: ( | 18 | @include bem.elem('header') { |
| 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 | |||
| 98 | @include iro.bem-object(iro.props-namespace()) { | ||
| 99 | display: grid; | ||
| 100 | grid-template-rows: auto minmax(0, 1fr) auto auto; | ||
| 101 | grid-template-columns: auto minmax(0, 1fr) auto; | ||
| 102 | grid-template-areas: | ||
| 103 | 'header header header' | ||
| 104 | 'prev content next' | ||
| 105 | 'thumbnails thumbnails thumbnails' | ||
| 106 | 'footer footer footer'; | ||
| 107 | box-sizing: border-box; | ||
| 108 | min-block-size: 0; | ||
| 109 | flex: 1 1 auto; | ||
| 110 | |||
| 111 | @include iro.bem-elem('header') { | ||
| 112 | grid-area: header; | ||
| 113 | display: flex; | 19 | display: flex; |
| 20 | grid-area: header; | ||
| 114 | align-items: flex-start; | 21 | align-items: flex-start; |
| 115 | padding-block-start: fn.dim(--pad); | 22 | padding-block-start: props.get(vars.$pad); |
| 116 | padding-inline: fn.dim(--pad); | 23 | padding-inline: props.get(vars.$pad); |
| 117 | } | 24 | } |
| 118 | 25 | ||
| 119 | @include iro.bem-elem('img') { | 26 | @include bem.elem('img') { |
| 120 | display: none; | ||
| 121 | box-sizing: border-box; | 27 | box-sizing: border-box; |
| 28 | display: block; | ||
| 122 | grid-area: content; | 29 | grid-area: content; |
| 123 | max-inline-size: 100%; | ||
| 124 | max-block-size: 100%; | ||
| 125 | place-self: center; | 30 | place-self: center; |
| 126 | padding: fn.dim(--pad); | 31 | inline-size: auto; |
| 127 | 32 | max-inline-size: 100%; | |
| 128 | @include iro.bem-sibling-elem('img') { | 33 | block-size: auto; |
| 129 | @include iro.bem-modifier('default') { | 34 | max-block-size: props.get(vars.$image--max-height); |
| 130 | display: block; | 35 | padding: props.get(vars.$pad); |
| 131 | 36 | margin-inline: auto; | |
| 132 | @include iro.bem-next-elem('nav-btn') { | 37 | border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); |
| 133 | display: block; | ||
| 134 | |||
| 135 | @include iro.bem-next-elem('nav-btn') { | ||
| 136 | display: block; | ||
| 137 | } | ||
| 138 | } | ||
| 139 | } | ||
| 140 | } | ||
| 141 | |||
| 142 | @include iro.bem-multi('&:target', 'is' 'visible') { | ||
| 143 | display: block; | ||
| 144 | |||
| 145 | @include iro.bem-next-elem('nav-btn') { | ||
| 146 | display: block; | ||
| 147 | |||
| 148 | @include iro.bem-next-elem('nav-btn') { | ||
| 149 | display: block; | ||
| 150 | } | ||
| 151 | } | ||
| 152 | |||
| 153 | @include iro.bem-sibling-elem('img') { | ||
| 154 | @include iro.bem-modifier('default') { | ||
| 155 | display: none; | ||
| 156 | |||
| 157 | @include iro.bem-next-elem('nav-btn') { | ||
| 158 | display: none; | ||
| 159 | |||
| 160 | @include iro.bem-next-elem('nav-btn') { | ||
| 161 | display: none; | ||
| 162 | } | ||
| 163 | } | ||
| 164 | } | ||
| 165 | } | ||
| 166 | } | ||
| 167 | } | 38 | } |
| 168 | 39 | ||
| 169 | @include iro.bem-elem('thumbnails') { | 40 | @include bem.elem('thumbnails') { |
| 41 | display: none; | ||
| 170 | grid-area: thumbnails; | 42 | grid-area: thumbnails; |
| 171 | display: flex; | 43 | gap: props.get(vars.$thumbnails--spacing); |
| 172 | gap: fn.dim(--thumbnail --spacing); | 44 | padding: props.get(vars.$pad); |
| 173 | padding: fn.dim(--pad); | 45 | margin-block-start: calc(-1 * props.get(vars.$pad)); |
| 174 | margin-block-start: calc(-1 * fn.dim(--pad)); | ||
| 175 | overflow: auto; | 46 | overflow: auto; |
| 176 | } | 47 | } |
| 177 | 48 | ||
| 178 | @include iro.bem-elem('footer') { | 49 | @include bem.elem('close-btn') { |
| 179 | grid-area: footer; | 50 | display: none; |
| 180 | display: flex; | ||
| 181 | align-items: flex-start; | ||
| 182 | padding-block: 0 fn.dim(--pad); | ||
| 183 | padding-inline: fn.dim(--pad); | ||
| 184 | } | ||
| 185 | |||
| 186 | @include iro.bem-elem('thumbnail') { | ||
| 187 | position: relative; | ||
| 188 | flex: 0 0 auto; | ||
| 189 | inline-size: fn.dim(--thumbnail --size); | ||
| 190 | block-size: fn.dim(--thumbnail --size); | ||
| 191 | overflow: hidden; | ||
| 192 | border-radius: fn.dim(--thumbnail --rounding); | ||
| 193 | outline: fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border); | ||
| 194 | outline-offset: calc(-1 * fn.dim(--thumbnail --border)); | ||
| 195 | opacity: .75; | ||
| 196 | |||
| 197 | &:hover, | ||
| 198 | &:active, | ||
| 199 | &:focus-visible { | ||
| 200 | outline-color: fn.color(--thumbnail --hover --border); | ||
| 201 | opacity: 1; | ||
| 202 | } | ||
| 203 | |||
| 204 | @include iro.bem-is('selected') { | ||
| 205 | $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border)); | ||
| 206 | |||
| 207 | margin: $focus-border-offset; | ||
| 208 | border: fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border); | ||
| 209 | border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); | ||
| 210 | outline: none; | ||
| 211 | opacity: 1; | ||
| 212 | } | ||
| 213 | |||
| 214 | &:focus-visible { | ||
| 215 | $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset)); | ||
| 216 | |||
| 217 | margin: $focus-border-offset; | ||
| 218 | border: fn.dim(--thumbnail --key-focus --border-offset) solid transparent; | ||
| 219 | border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); | ||
| 220 | outline: fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border); | ||
| 221 | outline-offset: 0; | ||
| 222 | box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline); | ||
| 223 | } | ||
| 224 | } | ||
| 225 | |||
| 226 | @include iro.bem-elem('thumbnail-img') { | ||
| 227 | display: block; | ||
| 228 | position: absolute; | ||
| 229 | inset-block-start: 0; | ||
| 230 | inset-inline-start: 0; | ||
| 231 | inline-size: 100%; | ||
| 232 | block-size: 100%; | ||
| 233 | object-fit: cover; | ||
| 234 | object-position: center center; | ||
| 235 | } | ||
| 236 | |||
| 237 | @include iro.bem-elem('thumbnail-icon') { | ||
| 238 | position: absolute; | ||
| 239 | inset-block-start: 50%; | ||
| 240 | inset-inline-start: 50%; | ||
| 241 | transform: translate(-50%, -50%); | ||
| 242 | } | ||
| 243 | |||
| 244 | @include iro.bem-elem('close-btn') { | ||
| 245 | flex: 0 0 auto; | 51 | flex: 0 0 auto; |
| 246 | margin-block-start: calc(-.5 * fn.dim(--pad)); | 52 | margin-block-start: calc(-.5 * props.get(vars.$pad)); |
| 247 | margin-inline: auto calc(-.5 * fn.dim(--pad)); | 53 | margin-inline: auto calc(-.5 * props.get(vars.$pad)); |
| 248 | font-size: fn.dim(--close-button --font-size); | 54 | font-size: props.get(vars.$close-button--font-size); |
| 249 | } | 55 | } |
| 250 | 56 | ||
| 251 | @include iro.bem-elem('nav-btn') { | 57 | @include bem.elem('nav-btn') { |
| 252 | display: none; | ||
| 253 | position: relative; | 58 | position: relative; |
| 59 | display: none; | ||
| 254 | align-self: center; | 60 | align-self: center; |
| 255 | overflow: visible; | 61 | overflow: visible; |
| 256 | font-size: fn.dim(--nav-button --font-size); | 62 | font-size: props.get(vars.$nav-button--font-size); |
| 257 | 63 | ||
| 258 | &::before { | 64 | &::before { |
| 259 | content: ''; | ||
| 260 | display: block; | ||
| 261 | position: absolute; | 65 | position: absolute; |
| 262 | inset-block-start: 50%; | 66 | inset-block-start: 50%; |
| 263 | inline-size: fn.dim(--nav-button --width); | 67 | display: block; |
| 264 | block-size: fn.dim(--nav-button --height); | 68 | inline-size: props.get(vars.$nav-button--inline-size); |
| 69 | block-size: props.get(vars.$nav-button--block-size); | ||
| 70 | content: ''; | ||
| 265 | transform: translateY(-50%); | 71 | transform: translateY(-50%); |
| 266 | } | 72 | } |
| 267 | 73 | ||
| 268 | @include iro.bem-modifier('prev') { | 74 | @include bem.modifier('prev') { |
| 269 | grid-area: prev; | 75 | grid-area: prev; |
| 270 | margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad)); | 76 | margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); |
| 271 | 77 | ||
| 272 | &::before { | 78 | &::before { |
| 273 | inset-inline-start: 0; | 79 | inset-inline-start: 0; |
| 274 | } | 80 | } |
| 275 | } | 81 | } |
| 276 | 82 | ||
| 277 | @include iro.bem-modifier('next') { | 83 | @include bem.modifier('next') { |
| 278 | grid-area: next; | 84 | grid-area: next; |
| 279 | margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad)); | 85 | margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); |
| 280 | 86 | ||
| 281 | &::before { | 87 | &::before { |
| 282 | inset-inline-end: 0; | 88 | inset-inline-end: 0; |
| 283 | } | 89 | } |
| 284 | } | 90 | } |
| 285 | } | 91 | } |
| 286 | |||
| 287 | @each $theme in $static-themes { | ||
| 288 | @include iro.bem-modifier(static-#{$theme}) { | ||
| 289 | color: fn.color(--static-#{$theme} --text); | ||
| 290 | 92 | ||
| 291 | @include iro.bem-elem('thumbnail') { | 93 | @include bem.modifier('interactive') { |
| 292 | outline-color: fn.color(--static-#{$theme} --thumbnail --border); | 94 | display: grid; |
| 95 | grid-template-areas: | ||
| 96 | 'header header header' | ||
| 97 | 'prev content next' | ||
| 98 | 'thumbnails thumbnails thumbnails'; | ||
| 99 | grid-template-rows: auto minmax(0, 1fr) auto auto; | ||
| 100 | grid-template-columns: auto minmax(0, 1fr) auto; | ||
| 101 | |||
| 102 | @include bem.modifier('fullscreen') { | ||
| 103 | block-size: props.get(vars.$fullscreen--height); | ||
| 104 | } | ||
| 293 | 105 | ||
| 294 | &:hover, | 106 | @include bem.elem('img') { |
| 295 | &:active, | 107 | display: none; |
| 296 | &:focus-visible { | 108 | max-block-size: 100%; |
| 297 | outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border); | 109 | margin-inline: 0; |
| 298 | } | ||
| 299 | |||
| 300 | @include iro.bem-is('selected') { | ||
| 301 | border-color: fn.color(--static-#{$theme} --thumbnail --selected --border); | ||
| 302 | } | ||
| 303 | 110 | ||
| 304 | &:focus-visible { | 111 | @include bem.multi('&:target', 'is' 'visible') { |
| 305 | border-color: transparent; | 112 | display: block; |
| 306 | outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border); | ||
| 307 | box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline); | ||
| 308 | } | ||
| 309 | } | 113 | } |
| 310 | } | 114 | } |
| 115 | |||
| 116 | @include bem.elem('thumbnails') { | ||
| 117 | display: flex; | ||
| 118 | } | ||
| 119 | |||
| 120 | @include bem.elem('close-btn') { | ||
| 121 | display: block; | ||
| 122 | } | ||
| 123 | |||
| 124 | @include bem.elem('nav-btn') { | ||
| 125 | display: block; | ||
| 126 | } | ||
| 127 | } | ||
| 128 | |||
| 129 | @each $theme in map.keys(props.get(vars.$static-themes)) { | ||
| 130 | @include bem.modifier(string.slice($theme, 3)) { | ||
| 131 | color: props.get(vars.$static-themes, $theme, --text); | ||
| 132 | } | ||
| 311 | } | 133 | } |
| 312 | } | 134 | } |
| 313 | } | 135 | } |
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss new file mode 100644 index 0000000..cc926e4 --- /dev/null +++ b/src/objects/_lightbox.vars.scss | |||
| @@ -0,0 +1,33 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; | ||
| 7 | $fullscreen--height: props.def(--o-lightbox--fullscreen--height, 100vh) !default; | ||
| 8 | |||
| 9 | $image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default; | ||
| 10 | $image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default; | ||
| 11 | |||
| 12 | $close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; | ||
| 13 | |||
| 14 | $nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default; | ||
| 15 | $nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; | ||
| 16 | $nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; | ||
| 17 | |||
| 18 | $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; | ||
| 19 | $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; | ||
| 20 | |||
| 21 | $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !default; | ||
| 22 | |||
| 23 | $static-themes: props.def(--o-lightbox, (), 'color'); | ||
| 24 | |||
| 25 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 26 | $lightbox-theme: --static-#{string.slice($theme, 3)}; | ||
| 27 | |||
| 28 | $static-themes: props.merge($static-themes, ( | ||
| 29 | $lightbox-theme: ( | ||
| 30 | --text: props.get(core.$transparent-colors, $theme, --800), | ||
| 31 | ) | ||
| 32 | )); | ||
| 33 | } | ||
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 0f691a2..4d31874 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
| @@ -1,137 +1,102 @@ | |||
| 1 | /* stylelint-disable length-zero-no-unit */ | 1 | @use 'sass:meta'; |
| 2 | 2 | @use 'iro-sass/src/bem'; | |
| 3 | @use 'iro-sass/src/index' as iro; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../functions' as fn; | 4 | @use '../props' as *; |
| 5 | 5 | @use 'icon.vars' as icon; | |
| 6 | @use './icon'; | 6 | |
| 7 | 7 | @forward 'menu.vars'; | |
| 8 | @include iro.props-namespace('menu') { | 8 | @use 'menu.vars' as vars; |
| 9 | @include iro.props-store(( | 9 | |
| 10 | --dims: ( | 10 | @mixin styles { |
| 11 | --spacing: 0em, | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | --header: ( | 12 | |
| 13 | --font-size: fn.global-dim(--font-size --50), | 13 | @include bem.object('menu') { |
| 14 | ), | ||
| 15 | --separator: fn.global-dim(--size --100), | ||
| 16 | --item: ( | ||
| 17 | --pad-i: fn.global-dim(--size --150), | ||
| 18 | --pad-b: fn.global-dim(--size --100), | ||
| 19 | --rounding: 0em, | ||
| 20 | |||
| 21 | --key-focus: ( | ||
| 22 | --border: fn.global-dim(--key-focus --border), | ||
| 23 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 24 | --outline: fn.global-dim(--key-focus --outline), | ||
| 25 | ), | ||
| 26 | ), | ||
| 27 | ), | ||
| 28 | --colors: ( | ||
| 29 | --separator: fn.global-color(--border), | ||
| 30 | --header: ( | ||
| 31 | --label: fn.global-color(--heading), | ||
| 32 | ), | ||
| 33 | --item: ( | ||
| 34 | --hover: ( | ||
| 35 | --bg: fn.global-color(--border-mute), | ||
| 36 | --label: fn.global-color(--heading), | ||
| 37 | ), | ||
| 38 | --active: ( | ||
| 39 | --bg: fn.global-color(--border), | ||
| 40 | --label: fn.global-color(--heading), | ||
| 41 | ), | ||
| 42 | --disabled: ( | ||
| 43 | --label: fn.global-color(--text-disabled), | ||
| 44 | ), | ||
| 45 | --key-focus: ( | ||
| 46 | --border: fn.global-color(--focus --border), | ||
| 47 | --outline: fn.global-color(--focus --outline), | ||
| 48 | ), | ||
| 49 | ), | ||
| 50 | ), | ||
| 51 | )); | ||
| 52 | |||
| 53 | @include iro.bem-object(iro.props-namespace()) { | ||
| 54 | display: flex; | 14 | display: flex; |
| 55 | flex-direction: column; | 15 | flex-direction: column; |
| 56 | gap: fn.dim(--spacing); | 16 | gap: props.get(vars.$spacing); |
| 57 | 17 | ||
| 58 | @include iro.bem-elem('header') { | 18 | @include bem.elem('header') { |
| 59 | padding-block: fn.dim(--item --pad-b); | 19 | padding-block: props.get(vars.$item--pad-b); |
| 60 | padding-inline: fn.dim(--item --pad-i); | 20 | padding-inline: props.get(vars.$item--pad-i); |
| 61 | color: fn.color(--header --label); | 21 | font-size: props.get(vars.$header--font-size); |
| 62 | font-size: fn.dim(--header --font-size); | ||
| 63 | font-weight: 500; | 22 | font-weight: 500; |
| 64 | letter-spacing: .5px; | 23 | color: props.get(vars.$header--label-color); |
| 65 | text-transform: uppercase; | 24 | text-transform: uppercase; |
| 25 | letter-spacing: .5px; | ||
| 66 | 26 | ||
| 67 | @include iro.bem-next-twin-elem { | 27 | @include bem.next-twin-elem { |
| 68 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 28 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); |
| 69 | } | 29 | } |
| 70 | } | 30 | } |
| 71 | 31 | ||
| 72 | @include iro.bem-elem('item') { | 32 | @include bem.elem('item') { |
| 73 | padding-block: fn.dim(--item --pad-b); | 33 | padding-block: props.get(vars.$item--pad-b); |
| 74 | padding-inline: fn.dim(--item --pad-i); | 34 | padding-inline: props.get(vars.$item--pad-i); |
| 75 | margin: calc(-1 * fn.dim(--item --key-focus --outline)); | 35 | margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); |
| 76 | border: fn.dim(--item --key-focus --outline) solid transparent; | 36 | color: props.get(vars.$item--disabled--label-color); |
| 77 | border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline)); | ||
| 78 | color: fn.color(--item --disabled --label); | ||
| 79 | background-clip: padding-box; | 37 | background-clip: padding-box; |
| 38 | border: props.get(vars.$item--key-focus--outline-width) solid transparent; | ||
| 39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); | ||
| 80 | 40 | ||
| 81 | &:link, | 41 | &:link, |
| 82 | &:visited, | 42 | &:visited, |
| 83 | &:enabled { | 43 | &:enabled { |
| 84 | color: currentColor; | 44 | color: currentColor; |
| 85 | 45 | ||
| 86 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { | 46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { |
| 87 | background-color: fn.color(--item --hover --bg); | 47 | color: props.get(vars.$item--hover--label-color); |
| 88 | color: fn.color(--item --hover --label); | 48 | background-color: props.get(vars.$item--hover--bg-color); |
| 89 | } | 49 | } |
| 90 | 50 | ||
| 91 | &:active { | 51 | &:active { |
| 92 | background-color: fn.color(--item --active --bg); | 52 | color: props.get(vars.$item--active--label-color); |
| 93 | color: fn.color(--item --active --label); | 53 | background-color: props.get(vars.$item--active--bg-color); |
| 94 | } | 54 | } |
| 95 | 55 | ||
| 96 | &:focus-visible { | 56 | &:focus-visible { |
| 97 | outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); | 57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
| 98 | box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); | 58 | box-shadow: |
| 59 | 0 | ||
| 60 | 0 | ||
| 61 | 0 | ||
| 62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | ||
| 63 | props.get(vars.$item--key-focus--outline-color); | ||
| 99 | } | 64 | } |
| 100 | } | 65 | } |
| 101 | 66 | ||
| 102 | @include iro.bem-next-elem('header') { | 67 | @include bem.next-elem('header') { |
| 103 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 68 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); |
| 104 | } | 69 | } |
| 105 | } | 70 | } |
| 106 | 71 | ||
| 107 | @include iro.bem-elem('header') { | 72 | @include bem.elem('header') { |
| 108 | &:link, | 73 | &:link, |
| 109 | &:visited, | 74 | &:visited, |
| 110 | &:enabled { | 75 | &:enabled { |
| 111 | color: fn.color(--header --label); | 76 | color: props.get(vars.$header--label-color); |
| 112 | } | 77 | } |
| 113 | } | 78 | } |
| 114 | 79 | ||
| 115 | @include iro.bem-elem('separator') { | 80 | @include bem.elem('separator') { |
| 116 | block-size: 1px; | 81 | block-size: 1px; |
| 117 | margin-block: fn.dim(--separator); | 82 | margin-block: props.get(vars.$separator-width); |
| 118 | margin-inline: fn.dim(--item --pad-i); | 83 | margin-inline: props.get(vars.$item--pad-i); |
| 119 | background-color: fn.color(--separator); | 84 | background-color: props.get(vars.$separator-color); |
| 120 | } | 85 | } |
| 121 | 86 | ||
| 122 | @include iro.bem-elem('slot') { | 87 | @include bem.elem('slot') { |
| 123 | padding-block: fn.dim(--item --pad-b); | 88 | padding-block: props.get(vars.$item--pad-b); |
| 124 | padding-inline: fn.dim(--item --pad-i); | 89 | padding-inline: props.get(vars.$item--pad-i); |
| 125 | } | 90 | } |
| 126 | 91 | ||
| 127 | @include iro.bem-elem('icon-slot') { | 92 | @include bem.elem('icon-slot') { |
| 128 | display: flex; | 93 | display: flex; |
| 129 | justify-content: center; | 94 | justify-content: center; |
| 130 | inline-size: fn.foreign-dim(--icon, --size); | 95 | inline-size: props.get(icon.$size); |
| 131 | } | 96 | } |
| 132 | 97 | ||
| 133 | @include iro.bem-modifier('pull') { | 98 | @include bem.modifier('pull') { |
| 134 | margin: calc(-1 * fn.dim(--item --pad-i)); | 99 | margin: calc(-1 * props.get(vars.$item--pad-i)); |
| 135 | } | 100 | } |
| 136 | } | 101 | } |
| 137 | } | 102 | } |
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss new file mode 100644 index 0000000..d242a1f --- /dev/null +++ b/src/objects/_menu.vars.scss | |||
| @@ -0,0 +1,29 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $spacing: props.def(--o-menu--spacing, 0em) !default; | ||
| 6 | $header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default; | ||
| 7 | $separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default; | ||
| 8 | |||
| 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; | ||
| 11 | $item--rounding: props.def(--o-menu--item--rounding, 0em) !default; | ||
| 12 | |||
| 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; | ||
| 15 | $item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border), 'color') !default; | ||
| 18 | $header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 19 | |||
| 20 | $item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 21 | $item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 22 | |||
| 23 | $item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 24 | $item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 25 | |||
| 26 | $item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 27 | |||
| 28 | $item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 29 | $item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss new file mode 100644 index 0000000..59d4c51 --- /dev/null +++ b/src/objects/_navbar.scss | |||
| @@ -0,0 +1,191 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 7 | |||
| 8 | @forward 'navbar.vars'; | ||
| 9 | @use 'navbar.vars' as vars; | ||
| 10 | |||
| 11 | @mixin styles { | ||
| 12 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 13 | |||
| 14 | @include bem.object('navbar') { | ||
| 15 | display: flex; | ||
| 16 | block-size: props.get(vars.$block-size); | ||
| 17 | |||
| 18 | @include bem.elem('item-content-text') { | ||
| 19 | margin-inline: props.get(vars.$item--pad-i-label); | ||
| 20 | } | ||
| 21 | |||
| 22 | @include bem.elem('item-content') { | ||
| 23 | position: relative; | ||
| 24 | padding-block: props.get(vars.$item--pad-b); | ||
| 25 | padding-inline: props.get(vars.$item--pad-i); | ||
| 26 | font-size: props.get(vars.$item--font-size); | ||
| 27 | color: currentColor; | ||
| 28 | white-space: nowrap; | ||
| 29 | border-radius: 100em; | ||
| 30 | |||
| 31 | &::after { | ||
| 32 | position: absolute; | ||
| 33 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 34 | z-index: -10; | ||
| 35 | display: block; | ||
| 36 | pointer-events: none; | ||
| 37 | visibility: hidden; | ||
| 38 | content: ''; | ||
| 39 | border-radius: 100em; | ||
| 40 | outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); | ||
| 41 | box-shadow: | ||
| 42 | 0 | ||
| 43 | 0 | ||
| 44 | 0 | ||
| 45 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 46 | props.get(vars.$default-theme, --key-focus, --outline); | ||
| 47 | } | ||
| 48 | } | ||
| 49 | |||
| 50 | @include bem.elem('item') { | ||
| 51 | display: flex; | ||
| 52 | flex-direction: column; | ||
| 53 | align-items: center; | ||
| 54 | justify-content: center; | ||
| 55 | inline-size: 100%; | ||
| 56 | padding-inline: calc(.5 * props.get(vars.$spacing)); | ||
| 57 | font-weight: 500; | ||
| 58 | color: props.get(vars.$default-theme, --disabled, --label-color); | ||
| 59 | |||
| 60 | &:link, | ||
| 61 | &:visited, | ||
| 62 | &:enabled { | ||
| 63 | color: props.get(vars.$default-theme, --label-color); | ||
| 64 | |||
| 65 | &:hover, | ||
| 66 | &:focus-visible { | ||
| 67 | color: props.get(vars.$default-theme, --hover, --label-color); | ||
| 68 | |||
| 69 | @include bem.elem('item-content') { | ||
| 70 | background-color: props.get(vars.$default-theme, --hover, --bg-color); | ||
| 71 | } | ||
| 72 | } | ||
| 73 | |||
| 74 | &:focus-visible { | ||
| 75 | @include bem.elem('item-content') { | ||
| 76 | &::after { | ||
| 77 | visibility: visible; | ||
| 78 | } | ||
| 79 | } | ||
| 80 | } | ||
| 81 | |||
| 82 | &:active { | ||
| 83 | color: props.get(vars.$default-theme, --active, --label-color); | ||
| 84 | |||
| 85 | @include bem.elem('item-content') { | ||
| 86 | background-color: props.get(vars.$default-theme, --active, --bg-color); | ||
| 87 | } | ||
| 88 | } | ||
| 89 | } | ||
| 90 | |||
| 91 | @include bem.is('selected') { | ||
| 92 | font-weight: bold; | ||
| 93 | color: props.get(vars.$default-theme, --selected, --disabled, --label-color); | ||
| 94 | |||
| 95 | @include bem.elem('item-content') { | ||
| 96 | background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); | ||
| 97 | } | ||
| 98 | |||
| 99 | &:link, | ||
| 100 | &:visited, | ||
| 101 | &:enabled { | ||
| 102 | color: props.get(vars.$default-theme, --selected, --label-color); | ||
| 103 | |||
| 104 | @include bem.elem('item-content') { | ||
| 105 | background-color: props.get(vars.$default-theme, --selected, --bg-color); | ||
| 106 | } | ||
| 107 | |||
| 108 | &:hover, | ||
| 109 | &:focus-visible { | ||
| 110 | color: props.get(vars.$default-theme, --selected, --hover, --label-color); | ||
| 111 | |||
| 112 | @include bem.elem('item-content') { | ||
| 113 | background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); | ||
| 114 | } | ||
| 115 | } | ||
| 116 | |||
| 117 | &:active { | ||
| 118 | color: props.get(vars.$default-theme, --selected, --active, --label-color); | ||
| 119 | |||
| 120 | @include bem.elem('item-content') { | ||
| 121 | background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); | ||
| 122 | } | ||
| 123 | } | ||
| 124 | } | ||
| 125 | } | ||
| 126 | } | ||
| 127 | |||
| 128 | @include bem.modifier('hide-unselected') { | ||
| 129 | @include bem.elem('item') { | ||
| 130 | display: none; | ||
| 131 | |||
| 132 | @include bem.is('selected') { | ||
| 133 | display: flex; | ||
| 134 | } | ||
| 135 | } | ||
| 136 | } | ||
| 137 | |||
| 138 | @include bem.modifier('adapt') { | ||
| 139 | gap: props.get(vars.$spacing); | ||
| 140 | block-size: 100%; | ||
| 141 | |||
| 142 | @include bem.elem('item') { | ||
| 143 | padding-inline: 0; | ||
| 144 | } | ||
| 145 | } | ||
| 146 | |||
| 147 | |||
| 148 | @include bem.modifier('align-block') { | ||
| 149 | margin-inline: calc(-1 * props.get(vars.$item--pad-i)); | ||
| 150 | } | ||
| 151 | |||
| 152 | @include bem.modifier('quiet') { | ||
| 153 | @include bem.elem('item') { | ||
| 154 | @include bem.is('selected') { | ||
| 155 | color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); | ||
| 156 | |||
| 157 | @include bem.elem('item-content') { | ||
| 158 | background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); | ||
| 159 | } | ||
| 160 | |||
| 161 | &:link, | ||
| 162 | &:visited, | ||
| 163 | &:enabled { | ||
| 164 | color: props.get(vars.$default-theme, --quiet, --selected, --label-color); | ||
| 165 | |||
| 166 | @include bem.elem('item-content') { | ||
| 167 | background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); | ||
| 168 | } | ||
| 169 | |||
| 170 | &:hover, | ||
| 171 | &:focus-visible { | ||
| 172 | color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); | ||
| 173 | |||
| 174 | @include bem.elem('item-content') { | ||
| 175 | background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); | ||
| 176 | } | ||
| 177 | } | ||
| 178 | |||
| 179 | &:active { | ||
| 180 | color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); | ||
| 181 | |||
| 182 | @include bem.elem('item-content') { | ||
| 183 | background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); | ||
| 184 | } | ||
| 185 | } | ||
| 186 | } | ||
| 187 | } | ||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | } | ||
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss new file mode 100644 index 0000000..fcdac80 --- /dev/null +++ b/src/objects/_navbar.vars.scss | |||
| @@ -0,0 +1,84 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default; | ||
| 7 | $spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default; | ||
| 8 | |||
| 9 | $item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; | ||
| 10 | $item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default; | ||
| 11 | $item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default; | ||
| 12 | $item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; | ||
| 13 | |||
| 14 | $key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 15 | $key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 16 | $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 17 | |||
| 18 | $default-theme-override: () !default; | ||
| 19 | $default-theme: map.deep-merge(( | ||
| 20 | --label-color: props.get(core.$theme, --text), | ||
| 21 | |||
| 22 | --hover: ( | ||
| 23 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 24 | --label-color: props.get(core.$theme, --heading), | ||
| 25 | ), | ||
| 26 | |||
| 27 | --active: ( | ||
| 28 | --bg-color: props.get(core.$theme, --border), | ||
| 29 | --label-color: props.get(core.$theme, --heading), | ||
| 30 | ), | ||
| 31 | |||
| 32 | --disabled: ( | ||
| 33 | --label-color: props.get(core.$theme, --border-strong), | ||
| 34 | ), | ||
| 35 | |||
| 36 | --key-focus: ( | ||
| 37 | --label: props.get(core.$theme, --focus, --text), | ||
| 38 | --border: props.get(core.$theme, --focus, --border), | ||
| 39 | --outline: props.get(core.$theme, --focus, --outline), | ||
| 40 | ), | ||
| 41 | |||
| 42 | --selected: ( | ||
| 43 | --bg-color: props.get(core.$theme, --heading), | ||
| 44 | --label-color: props.get(core.$theme, --base, --50), | ||
| 45 | |||
| 46 | --hover: ( | ||
| 47 | --bg-color: props.get(core.$theme, --text), | ||
| 48 | --label-color: props.get(core.$theme, --base, --50), | ||
| 49 | ), | ||
| 50 | |||
| 51 | --active: ( | ||
| 52 | --bg-color: props.get(core.$theme, --text-mute), | ||
| 53 | --label-color: props.get(core.$theme, --base, --50), | ||
| 54 | ), | ||
| 55 | |||
| 56 | --disabled: ( | ||
| 57 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 58 | --label-color: props.get(core.$theme, --border-strong), | ||
| 59 | ), | ||
| 60 | ), | ||
| 61 | |||
| 62 | --quiet: ( | ||
| 63 | --selected: ( | ||
| 64 | --bg-color: props.get(core.$theme, --accent, --200), | ||
| 65 | --label-color: props.get(core.$theme, --accent, --1100), | ||
| 66 | |||
| 67 | --hover: ( | ||
| 68 | --bg-color: props.get(core.$theme, --accent, --300), | ||
| 69 | --label-color: props.get(core.$theme, --accent, --1200), | ||
| 70 | ), | ||
| 71 | |||
| 72 | --active: ( | ||
| 73 | --bg-color: props.get(core.$theme, --accent, --400), | ||
| 74 | --label-color: props.get(core.$theme, --accent, --1300), | ||
| 75 | ), | ||
| 76 | |||
| 77 | --disabled: ( | ||
| 78 | --bg-color: props.get(core.$theme, --accent, --200), | ||
| 79 | --label-color: props.get(core.$theme, --accent, --800), | ||
| 80 | ), | ||
| 81 | ) | ||
| 82 | ) | ||
| 83 | ), $default-theme-override) !default; | ||
| 84 | $default-theme: props.def(--o-navbar, $default-theme, 'color'); | ||
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index 19f282f..8a6cdb2 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss | |||
| @@ -1,57 +1,58 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:list'; | 1 | @use 'sass:list'; |
| 2 | @use 'sass:map'; | ||
| 3 | @use 'sass:string'; | 3 | @use 'sass:string'; |
| 4 | @use 'iro-sass/src/index' as iro; | 4 | @use 'iro-sass/src/bem'; |
| 5 | @use '../functions' as fn; | ||
| 6 | @use '../config'; | 5 | @use '../config'; |
| 6 | @use 'iro-sass/src/props'; | ||
| 7 | @use '../core.vars' as core; | ||
| 7 | 8 | ||
| 8 | @include iro.props-namespace('palette') { | 9 | @mixin styles { |
| 9 | @include iro.bem-object(iro.props-namespace()) { | 10 | @include bem.object('palette') { |
| 10 | display: flex; | 11 | display: flex; |
| 11 | block-size: 3em; | 12 | block-size: 3em; |
| 12 | 13 | ||
| 13 | @include iro.bem-elem('item') { | 14 | @include bem.elem('item') { |
| 14 | flex: 1 1 auto; | 15 | flex: 1 1 auto; |
| 15 | 16 | ||
| 16 | $palette: map.get(config.$themes, config.$theme-default, --palettes, --base); | 17 | $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); |
| 17 | $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); | 18 | $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); |
| 18 | 19 | ||
| 19 | @for $i from 1 through list.length($contrasts) { | 20 | @for $i from 1 through list.length($levels) { |
| 20 | $key: list.nth(map.keys($contrasts), $i); | 21 | $key: list.nth(map.keys($levels), $i); |
| 21 | 22 | ||
| 22 | &:nth-child(#{$i}) { | 23 | &:nth-child(#{$i}) { |
| 23 | background-color: fn.global-color(--base $key); | 24 | background-color: props.get(core.$theme, --base, $key); |
| 24 | } | 25 | } |
| 25 | } | 26 | } |
| 26 | } | 27 | } |
| 27 | 28 | ||
| 28 | @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) { | 29 | @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { |
| 29 | $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); | 30 | $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); |
| 30 | 31 | ||
| 31 | @include iro.bem-modifier(string.slice($palette-name, 3)) { | 32 | @include bem.modifier(string.slice($palette-name, 3)) { |
| 32 | @include iro.bem-elem('item') { | 33 | @include bem.elem('item') { |
| 33 | @for $i from 1 through list.length($contrasts) { | 34 | @for $i from 1 through list.length($levels) { |
| 34 | $key: list.nth(map.keys($contrasts), $i); | 35 | $key: list.nth(map.keys($levels), $i); |
| 35 | 36 | ||
| 36 | &:nth-child(#{$i}) { | 37 | &:nth-child(#{$i}) { |
| 37 | background-color: fn.global-color($palette-name $key); | 38 | background-color: props.get(core.$theme, $palette-name, $key); |
| 38 | } | 39 | } |
| 39 | } | 40 | } |
| 40 | } | 41 | } |
| 41 | } | 42 | } |
| 42 | } | 43 | } |
| 43 | 44 | ||
| 44 | @include iro.bem-modifier('static') { | 45 | @include bem.modifier('static') { |
| 45 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { | 46 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { |
| 46 | $contrasts: map.get(config.$static-colors, --contrasts); | 47 | $levels: map.get(config.$static-colors, --levels); |
| 47 | 48 | ||
| 48 | @include iro.bem-modifier(string.slice($palette-name, 3)) { | 49 | @include bem.modifier(string.slice($palette-name, 3)) { |
| 49 | @include iro.bem-elem('item') { | 50 | @include bem.elem('item') { |
| 50 | @for $i from 1 through list.length($contrasts) { | 51 | @for $i from 1 through list.length($levels) { |
| 51 | $key: list.nth(map.keys($contrasts), $i); | 52 | $key: list.nth(map.keys($levels), $i); |
| 52 | 53 | ||
| 53 | &:nth-child(#{$i}) { | 54 | &:nth-child(#{$i}) { |
| 54 | background-color: fn.global-color(#{$palette-name}-static $key); | 55 | background-color: props.get(core.$theme, #{$palette-name}-static, $key); |
| 55 | } | 56 | } |
| 56 | } | 57 | } |
| 57 | } | 58 | } |
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss new file mode 100644 index 0000000..e148f21 --- /dev/null +++ b/src/objects/_placeholders.scss | |||
| @@ -0,0 +1,22 @@ | |||
| 1 | @use 'sass:meta'; | ||
| 2 | @use 'iro-sass/src/bem'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | |||
| 6 | @forward 'placeholders.vars'; | ||
| 7 | @use 'placeholders.vars' as vars; | ||
| 8 | |||
| 9 | @mixin styles { | ||
| 10 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 11 | |||
| 12 | @include bem.object('placeholders') { | ||
| 13 | @include bem.elem('placeholder') { | ||
| 14 | display: inline-block; | ||
| 15 | min-block-size: props.get(vars.$min-block-size); | ||
| 16 | vertical-align: middle; | ||
| 17 | background-color: currentColor; | ||
| 18 | border-radius: props.get(vars.$rounding); | ||
| 19 | opacity: props.get(vars.$opacity); | ||
| 20 | } | ||
| 21 | } | ||
| 22 | } | ||
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss new file mode 100644 index 0000000..a2e41e2 --- /dev/null +++ b/src/objects/_placeholders.vars.scss | |||
| @@ -0,0 +1,6 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default; | ||
| 5 | $rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default; | ||
| 6 | $opacity: props.def(--o-placeholder--opacity, .5) !default; | ||
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 5ad58ec..3fe6310 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss | |||
| @@ -1,50 +1,38 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @include iro.props-namespace('popover') { | 6 | @forward 'popover.vars'; |
| 5 | @include iro.props-store(( | 7 | @use 'popover.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --z-index: 10000, | ||
| 8 | --pad-i: 0, | ||
| 9 | --pad-b: fn.global-dim(--size --85), | ||
| 10 | --separator: fn.global-dim(--size --85), | ||
| 11 | --rounding: fn.global-dim(--rounding), | ||
| 12 | --border: fn.global-dim(--border --thin), | ||
| 13 | ), | ||
| 14 | --colors: ( | ||
| 15 | --bg: fn.global-color(--bg-l2), | ||
| 16 | --border: fn.global-color(--border), | ||
| 17 | --filter: drop-shadow( | ||
| 18 | fn.global-dim(--shadow --x) | ||
| 19 | fn.global-dim(--shadow --y) | ||
| 20 | fn.global-dim(--shadow --blur) | ||
| 21 | fn.global-color(--shadow) | ||
| 22 | ), | ||
| 23 | ), | ||
| 24 | )); | ||
| 25 | 8 | ||
| 26 | @include iro.bem-object(iro.props-namespace()) { | 9 | @mixin styles { |
| 27 | position: absolute; | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 28 | z-index: fn.dim(--z-index); | 11 | |
| 12 | @include bem.object('popover') { | ||
| 13 | position: fixed; | ||
| 29 | inset-block-start: 0; | 14 | inset-block-start: 0; |
| 30 | inset-inline-start: 0; | 15 | inset-inline-start: 0; |
| 31 | padding-block: fn.dim(--pad-b); | 16 | z-index: props.get(vars.$z-index); |
| 32 | padding-inline: fn.dim(--pad-i); | 17 | padding-block: props.get(vars.$pad-b); |
| 18 | padding-inline: props.get(vars.$pad-i); | ||
| 19 | margin: 0; | ||
| 20 | color: currentColor; | ||
| 21 | background-color: props.get(vars.$bg-color); | ||
| 22 | filter: props.get(vars.$filter); | ||
| 23 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | ||
| 24 | border-radius: props.get(vars.$rounding); | ||
| 33 | transform: translate(var(--x), var(--y)); | 25 | transform: translate(var(--x), var(--y)); |
| 34 | border: fn.dim(--border) solid fn.color(--border); | ||
| 35 | border-radius: fn.dim(--rounding); | ||
| 36 | background-color: fn.color(--bg); | ||
| 37 | filter: fn.color(--filter); | ||
| 38 | 26 | ||
| 39 | @include iro.bem-modifier('up-left') { | 27 | @include bem.modifier('up-left') { |
| 40 | transform: translate(var(--x), calc(var(--y) - 100%)); | 28 | transform: translate(var(--x), calc(var(--y) - 100%)); |
| 41 | } | 29 | } |
| 42 | 30 | ||
| 43 | @include iro.bem-modifier('up-right') { | 31 | @include bem.modifier('up-right') { |
| 44 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); | 32 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); |
| 45 | } | 33 | } |
| 46 | 34 | ||
| 47 | @include iro.bem-modifier('down-right') { | 35 | @include bem.modifier('down-right') { |
| 48 | transform: translate(calc(var(--x) - 100%), var(--y)); | 36 | transform: translate(calc(var(--x) - 100%), var(--y)); |
| 49 | } | 37 | } |
| 50 | } | 38 | } |
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss new file mode 100644 index 0000000..b76112e --- /dev/null +++ b/src/objects/_popover.vars.scss | |||
| @@ -0,0 +1,14 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $z-index: props.def(--o-popover--z-index, 11000) !default; | ||
| 6 | $pad-i: props.def(--o-popover--pad-i, 0) !default; | ||
| 7 | $pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default; | ||
| 8 | $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default; | ||
| 9 | $rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; | ||
| 10 | $border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; | ||
| 11 | |||
| 12 | $bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | ||
| 13 | $border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !default; | ||
| 14 | $filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow)), 'color') !default; | ||
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 9fa937d..aef6b92 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
| @@ -1,116 +1,80 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | @use '../core.vars' as core; | ||
| 3 | 6 | ||
| 4 | @include iro.props-namespace('radio') { | 7 | @forward 'radio.vars'; |
| 5 | @include iro.props-store(( | 8 | @use 'radio.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --diameter: fn.global-dim(--size --200), | ||
| 8 | --label-gap: fn.global-dim(--size --125), | ||
| 9 | --border: fn.global-dim(--border --medium), | ||
| 10 | --pad-i: fn.global-dim(--size --65), | ||
| 11 | --pad-b: fn.global-dim(--size --65), | ||
| 12 | --rounding: fn.global-dim(--rounding), | ||
| 13 | --spacing-sibling: fn.global-dim(--size --300), | ||
| 14 | 9 | ||
| 15 | --key-focus: ( | 10 | @mixin styles { |
| 16 | --border: fn.global-dim(--key-focus --border), | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 17 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 18 | --outline: fn.global-dim(--key-focus --outline), | ||
| 19 | ), | ||
| 20 | ), | ||
| 21 | --colors: ( | ||
| 22 | --circle-border: fn.global-color(--text-mute-more), | ||
| 23 | --circle-bg: fn.global-color(--base --75), | ||
| 24 | |||
| 25 | --hover: ( | ||
| 26 | --label: fn.global-color(--heading), | ||
| 27 | --circle-border: fn.global-color(--text-mute), | ||
| 28 | ), | ||
| 29 | --accent: ( | ||
| 30 | --circle-border: fn.global-color(--accent --900), | ||
| 31 | |||
| 32 | --hover: ( | ||
| 33 | --circle-border: fn.global-color(--accent --1000), | ||
| 34 | ), | ||
| 35 | ), | ||
| 36 | --disabled: ( | ||
| 37 | --label: fn.global-color(--text-disabled), | ||
| 38 | --circle-border: fn.global-color(--border-strong), | ||
| 39 | --circle-bg: fn.global-color(--base --75), | ||
| 40 | ), | ||
| 41 | --key-focus: ( | ||
| 42 | --label: fn.global-color(--focus --text), | ||
| 43 | --border: fn.global-color(--focus --border), | ||
| 44 | --outline: fn.global-color(--focus --outline), | ||
| 45 | ), | ||
| 46 | ), | ||
| 47 | )); | ||
| 48 | 12 | ||
| 49 | @include iro.bem-object(iro.props-namespace()) { | 13 | @include bem.object('radio') { |
| 50 | display: inline-block; | ||
| 51 | position: relative; | 14 | position: relative; |
| 15 | display: inline-block; | ||
| 16 | padding-block: props.get(vars.$pad-b); | ||
| 17 | padding-inline: props.get(vars.$pad-i); | ||
| 52 | margin-inline: | 18 | margin-inline: |
| 53 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) | 19 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
| 54 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); | 20 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); |
| 55 | padding-block: fn.dim(--pad-b); | ||
| 56 | padding-inline: fn.dim(--pad-i); | ||
| 57 | 21 | ||
| 58 | @include iro.bem-elem('circle') { | 22 | @include bem.elem('circle') { |
| 59 | display: inline-block; | 23 | display: inline-block; |
| 60 | flex: 0 0 auto; | 24 | flex: 0 0 auto; |
| 61 | inline-size: fn.dim(--diameter); | 25 | inline-size: props.get(vars.$diameter); |
| 62 | block-size: fn.dim(--diameter); | 26 | block-size: props.get(vars.$diameter); |
| 63 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset)); | 27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); |
| 64 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
| 65 | border-radius: 2em; | ||
| 66 | background-color: fn.color(--circle-border); | ||
| 67 | background-clip: padding-box; | ||
| 68 | vertical-align: top; | 28 | vertical-align: top; |
| 29 | background-color: props.get(vars.$circle-border-color); | ||
| 30 | background-clip: padding-box; | ||
| 31 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 32 | border-radius: 2em; | ||
| 69 | 33 | ||
| 70 | &::after { | 34 | &::after { |
| 71 | content: ''; | ||
| 72 | display: block; | ||
| 73 | position: relative; | 35 | position: relative; |
| 74 | inset-block-start: fn.dim(--border); | 36 | inset-block-start: props.get(vars.$border-width); |
| 75 | inset-inline-start: fn.dim(--border); | 37 | inset-inline-start: props.get(vars.$border-width); |
| 76 | inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); | 38 | display: block; |
| 77 | block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); | 39 | inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); |
| 40 | block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); | ||
| 41 | content: ''; | ||
| 42 | background-color: props.get(vars.$circle-bg-color); | ||
| 43 | border-radius: props.get(vars.$diameter); | ||
| 78 | transition: transform .2s ease; | 44 | transition: transform .2s ease; |
| 79 | border-radius: fn.dim(--diameter); | ||
| 80 | background-color: fn.color(--circle-bg); | ||
| 81 | } | 45 | } |
| 82 | } | 46 | } |
| 83 | 47 | ||
| 84 | @include iro.bem-elem('label') { | 48 | @include bem.elem('label') { |
| 85 | margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); | 49 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); |
| 86 | } | 50 | } |
| 87 | 51 | ||
| 88 | @include iro.bem-elem('native') { | 52 | @include bem.elem('native') { |
| 89 | appearance: none; | ||
| 90 | position: absolute; | 53 | position: absolute; |
| 91 | z-index: -1; | ||
| 92 | inset-block-start: 0; | 54 | inset-block-start: 0; |
| 93 | inset-inline-start: 0; | 55 | inset-inline-start: 0; |
| 56 | z-index: -1; | ||
| 94 | inline-size: 100%; | 57 | inline-size: 100%; |
| 95 | block-size: 100%; | 58 | block-size: 100%; |
| 96 | margin: 0; | ||
| 97 | padding: 0; | 59 | padding: 0; |
| 60 | margin: 0; | ||
| 98 | overflow: hidden; | 61 | overflow: hidden; |
| 99 | border-radius: fn.dim(--rounding); | 62 | appearance: none; |
| 63 | border-radius: props.get(vars.$rounding); | ||
| 100 | 64 | ||
| 101 | &:hover, | 65 | &:hover, |
| 102 | &:focus-visible { | 66 | &:focus-visible { |
| 103 | @include iro.bem-sibling-elem('label') { | 67 | @include bem.sibling-elem('label') { |
| 104 | color: fn.color(--hover --label); | 68 | color: props.get(vars.$hover--label-color); |
| 105 | } | 69 | } |
| 106 | 70 | ||
| 107 | @include iro.bem-sibling-elem('circle') { | 71 | @include bem.sibling-elem('circle') { |
| 108 | background-color: fn.color(--hover --circle-border); | 72 | background-color: props.get(vars.$hover--circle-border-color); |
| 109 | } | 73 | } |
| 110 | } | 74 | } |
| 111 | 75 | ||
| 112 | &:checked { | 76 | &:checked { |
| 113 | @include iro.bem-sibling-elem('circle') { | 77 | @include bem.sibling-elem('circle') { |
| 114 | &::after { | 78 | &::after { |
| 115 | transform: scale(.44); | 79 | transform: scale(.44); |
| 116 | } | 80 | } |
| @@ -118,64 +82,69 @@ | |||
| 118 | } | 82 | } |
| 119 | 83 | ||
| 120 | &:disabled { | 84 | &:disabled { |
| 121 | @include iro.bem-sibling-elem('label') { | 85 | @include bem.sibling-elem('label') { |
| 122 | color: fn.color(--disabled --label); | 86 | color: props.get(vars.$disabled--label-color); |
| 123 | } | 87 | } |
| 124 | 88 | ||
| 125 | @include iro.bem-sibling-elem('circle') { | 89 | @include bem.sibling-elem('circle') { |
| 126 | background-color: fn.color(--disabled --circle-border); | 90 | background-color: props.get(vars.$disabled--circle-border-color); |
| 127 | 91 | ||
| 128 | &::after { | 92 | &::after { |
| 129 | background-color: fn.color(--disabled --circle-bg); | 93 | background-color: props.get(vars.$disabled--circle-bg-color); |
| 130 | } | 94 | } |
| 131 | } | 95 | } |
| 132 | } | 96 | } |
| 133 | 97 | ||
| 134 | &:focus-visible { | 98 | &:focus-visible { |
| 135 | @include iro.bem-sibling-elem('label') { | 99 | @include bem.sibling-elem('label') { |
| 136 | color: fn.color(--key-focus --label); | 100 | color: props.get(vars.$key-focus--label-color); |
| 137 | } | 101 | } |
| 138 | 102 | ||
| 139 | @include iro.bem-sibling-elem('circle') { | 103 | @include bem.sibling-elem('circle') { |
| 140 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 104 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 141 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 105 | box-shadow: |
| 106 | 0 | ||
| 107 | 0 | ||
| 108 | 0 | ||
| 109 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 110 | props.get(vars.$key-focus--outline-color); | ||
| 142 | } | 111 | } |
| 143 | } | 112 | } |
| 144 | } | 113 | } |
| 145 | 114 | ||
| 146 | @include iro.bem-modifier('standalone') { | 115 | @include bem.modifier('standalone') { |
| 147 | @include iro.bem-elem('circle') { | 116 | @include bem.elem('circle') { |
| 148 | margin-block-start: 0; | 117 | margin-block-start: 0; |
| 149 | } | 118 | } |
| 150 | } | 119 | } |
| 151 | 120 | ||
| 152 | @include iro.bem-modifier('accent') { | 121 | @include bem.modifier('accent') { |
| 153 | @include iro.bem-elem('native') { | 122 | @include bem.elem('native') { |
| 154 | &:checked { | 123 | &:checked { |
| 155 | @include iro.bem-sibling-elem('circle') { | 124 | @include bem.sibling-elem('circle') { |
| 156 | background-color: fn.color(--accent --circle-border); | 125 | background-color: props.get(vars.$accent--circle-border-color); |
| 157 | } | 126 | } |
| 158 | 127 | ||
| 159 | &:hover, | 128 | &:hover, |
| 160 | &:focus-visible { | 129 | &:focus-visible { |
| 161 | @include iro.bem-sibling-elem('circle') { | 130 | @include bem.sibling-elem('circle') { |
| 162 | background-color: fn.color(--accent --hover --circle-border); | 131 | background-color: props.get(vars.$accent--hover--circle-border-color); |
| 163 | } | 132 | } |
| 164 | } | 133 | } |
| 165 | } | 134 | } |
| 166 | 135 | ||
| 167 | &:disabled { | 136 | &:disabled { |
| 168 | @include iro.bem-sibling-elem('circle') { | 137 | @include bem.sibling-elem('circle') { |
| 169 | background-color: fn.color(--disabled --circle-border); | 138 | background-color: props.get(vars.$disabled--circle-border-color); |
| 170 | 139 | ||
| 171 | &::after { | 140 | &::after { |
| 172 | background-color: fn.color(--disabled --circle-bg); | 141 | background-color: props.get(vars.$disabled--circle-bg-color); |
| 173 | } | 142 | } |
| 174 | } | 143 | } |
| 175 | 144 | ||
| 176 | &:checked { | 145 | &:checked { |
| 177 | @include iro.bem-sibling-elem('circle') { | 146 | @include bem.sibling-elem('circle') { |
| 178 | background-color: fn.color(--disabled --circle-border); | 147 | background-color: props.get(vars.$disabled--circle-border-color); |
| 179 | } | 148 | } |
| 180 | } | 149 | } |
| 181 | } | 150 | } |
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss new file mode 100644 index 0000000..51ea581 --- /dev/null +++ b/src/objects/_radio.vars.scss | |||
| @@ -0,0 +1,33 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; | ||
| 6 | $label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default; | ||
| 7 | $border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; | ||
| 8 | $pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; | ||
| 9 | $pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; | ||
| 10 | $rounding: props.def(--o-radio--rounding, props.get(core.$rounding)) !default; | ||
| 11 | $spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; | ||
| 12 | |||
| 13 | $key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 18 | $circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; | ||
| 19 | |||
| 20 | $hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 21 | $hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 22 | |||
| 23 | $accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; | ||
| 24 | |||
| 25 | $accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; | ||
| 26 | |||
| 27 | $disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 28 | $disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 29 | $disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; | ||
| 30 | |||
| 31 | $key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 32 | $key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 33 | $key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 8e4e131..6c60777 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss | |||
| @@ -1,122 +1,90 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | @use 'icon.vars' as icon; | ||
| 3 | 6 | ||
| 4 | @use './icon'; | 7 | @forward 'side-nav.vars'; |
| 8 | @use 'side-nav.vars' as vars; | ||
| 5 | 9 | ||
| 6 | @include iro.props-namespace('side-nav') { | 10 | @mixin styles { |
| 7 | @include iro.props-store(( | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --spacing: fn.global-dim(--size --50), | ||
| 10 | --header: ( | ||
| 11 | --font-size: fn.global-dim(--font-size --50), | ||
| 12 | ), | ||
| 13 | --separator: fn.global-dim(--size --200), | ||
| 14 | --item: ( | ||
| 15 | --pad-i: fn.global-dim(--size --150), | ||
| 16 | --pad-b: fn.global-dim(--size --100), | ||
| 17 | --rounding: fn.global-dim(--rounding), | ||
| 18 | |||
| 19 | --key-focus: ( | ||
| 20 | --border: fn.global-dim(--key-focus --border), | ||
| 21 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 22 | --outline: fn.global-dim(--key-focus --outline), | ||
| 23 | ), | ||
| 24 | ), | ||
| 25 | ), | ||
| 26 | --colors: ( | ||
| 27 | --header: ( | ||
| 28 | --label: fn.global-color(--text-mute-more), | ||
| 29 | ), | ||
| 30 | --item: ( | ||
| 31 | --hover: ( | ||
| 32 | --bg: fn.global-color(--border-mute), | ||
| 33 | --label: fn.global-color(--heading), | ||
| 34 | ), | ||
| 35 | --active: ( | ||
| 36 | --bg: fn.global-color(--border), | ||
| 37 | --label: fn.global-color(--heading), | ||
| 38 | ), | ||
| 39 | --disabled: ( | ||
| 40 | --label: fn.global-color(--text-disabled), | ||
| 41 | ), | ||
| 42 | --key-focus: ( | ||
| 43 | --border: fn.global-color(--focus --border), | ||
| 44 | --outline: fn.global-color(--focus --outline), | ||
| 45 | ), | ||
| 46 | ), | ||
| 47 | ), | ||
| 48 | )); | ||
| 49 | 12 | ||
| 50 | @include iro.bem-object(iro.props-namespace()) { | 13 | @include bem.object('side-nav') { |
| 51 | display: flex; | 14 | display: flex; |
| 52 | flex-direction: column; | 15 | flex-direction: column; |
| 53 | gap: fn.dim(--spacing); | 16 | gap: props.get(vars.$spacing); |
| 54 | 17 | ||
| 55 | @include iro.bem-elem('header') { | 18 | @include bem.elem('header') { |
| 56 | padding-block: fn.dim(--item --pad-b); | 19 | padding-block: props.get(vars.$item--pad-b); |
| 57 | padding-inline: fn.dim(--item --pad-i); | 20 | padding-inline: props.get(vars.$item--pad-i); |
| 58 | color: fn.color(--header --label); | 21 | font-size: props.get(vars.$header--font-size); |
| 59 | font-size: fn.dim(--header --font-size); | ||
| 60 | font-weight: 500; | 22 | font-weight: 500; |
| 61 | letter-spacing: .5px; | 23 | color: props.get(vars.$header--label-color); |
| 62 | text-transform: uppercase; | 24 | text-transform: uppercase; |
| 25 | letter-spacing: .5px; | ||
| 63 | 26 | ||
| 64 | @include iro.bem-next-twin-elem { | 27 | @include bem.next-twin-elem { |
| 65 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 28 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
| 66 | } | 29 | } |
| 67 | } | 30 | } |
| 68 | 31 | ||
| 69 | @include iro.bem-elem('item') { | 32 | @include bem.elem('item') { |
| 70 | padding-block: fn.dim(--item --pad-b); | 33 | padding-block: props.get(vars.$item--pad-b); |
| 71 | padding-inline: fn.dim(--item --pad-i); | 34 | padding-inline: props.get(vars.$item--pad-i); |
| 72 | margin: calc(-1 * fn.dim(--item --key-focus --border-offset)); | 35 | margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); |
| 73 | border: fn.dim(--item --key-focus --border-offset) solid transparent; | 36 | color: props.get(vars.$item--disabled--label-color); |
| 74 | border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset)); | ||
| 75 | color: fn.color(--item --disabled --label); | ||
| 76 | background-clip: padding-box; | 37 | background-clip: padding-box; |
| 38 | border: props.get(vars.$item--key-focus--border-offset) solid transparent; | ||
| 39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); | ||
| 77 | 40 | ||
| 78 | &:link, | 41 | &:link, |
| 79 | &:visited, | 42 | &:visited, |
| 80 | &:enabled { | 43 | &:enabled { |
| 81 | color: currentColor; | 44 | color: currentColor; |
| 82 | 45 | ||
| 83 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { | 46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { |
| 84 | background-color: fn.color(--item --hover --bg); | 47 | color: props.get(vars.$item--hover--label-color); |
| 85 | color: fn.color(--item --hover --label); | 48 | background-color: props.get(vars.$item--hover--bg-color); |
| 86 | } | 49 | } |
| 87 | 50 | ||
| 88 | &:active { | 51 | &:active { |
| 89 | background-color: fn.color(--item --active --bg); | 52 | color: props.get(vars.$item--active--label-color); |
| 90 | color: fn.color(--item --active --label); | 53 | background-color: props.get(vars.$item--active--bg-color); |
| 91 | } | 54 | } |
| 92 | 55 | ||
| 93 | &:focus-visible { | 56 | &:focus-visible { |
| 94 | outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); | 57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
| 95 | box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); | 58 | box-shadow: |
| 59 | 0 | ||
| 60 | 0 | ||
| 61 | 0 | ||
| 62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | ||
| 63 | props.get(vars.$item--key-focus--outline-color); | ||
| 96 | } | 64 | } |
| 97 | } | 65 | } |
| 98 | 66 | ||
| 99 | @include iro.bem-next-elem('header') { | 67 | @include bem.next-elem('header') { |
| 100 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 68 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
| 101 | } | 69 | } |
| 102 | } | 70 | } |
| 103 | 71 | ||
| 104 | @include iro.bem-elem('header') { | 72 | @include bem.elem('header') { |
| 105 | &:link, | 73 | &:link, |
| 106 | &:visited, | 74 | &:visited, |
| 107 | &:enabled { | 75 | &:enabled { |
| 108 | color: fn.color(--header --label); | 76 | color: props.get(vars.$header--label-color); |
| 109 | } | 77 | } |
| 110 | } | 78 | } |
| 111 | 79 | ||
| 112 | @include iro.bem-elem('separator') { | 80 | @include bem.elem('separator') { |
| 113 | block-size: fn.dim(--separator); | 81 | block-size: props.get(vars.$separator); |
| 114 | } | 82 | } |
| 115 | 83 | ||
| 116 | @include iro.bem-elem('icon-slot') { | 84 | @include bem.elem('icon-slot') { |
| 117 | display: flex; | 85 | display: flex; |
| 118 | justify-content: center; | 86 | justify-content: center; |
| 119 | inline-size: fn.foreign-dim(--icon, --size); | 87 | inline-size: props.get(icon.$size); |
| 120 | } | 88 | } |
| 121 | } | 89 | } |
| 122 | } | 90 | } |
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss new file mode 100644 index 0000000..122dba6 --- /dev/null +++ b/src/objects/_side-nav.vars.scss | |||
| @@ -0,0 +1,28 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 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.$font-size--50)) !default; | ||
| 7 | $separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; | ||
| 8 | |||
| 9 | $item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; | ||
| 10 | $item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; | ||
| 11 | $item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default; | ||
| 12 | |||
| 13 | $item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 18 | |||
| 19 | $item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 20 | $item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 21 | |||
| 22 | $item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 23 | $item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 24 | |||
| 25 | $item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 26 | |||
| 27 | $item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 28 | $item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index 416e65e..1fcdf02 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss | |||
| @@ -1,38 +1,26 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:map'; |
| 2 | @use '../functions' as fn; | 2 | @use 'sass:meta'; |
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 3 | 7 | ||
| 4 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | 8 | @forward 'status-indicator.vars'; |
| 9 | @use 'status-indicator.vars' as vars; | ||
| 5 | 10 | ||
| 6 | @include iro.props-namespace('status-indicator') { | 11 | @mixin styles { |
| 7 | @include iro.props-store(( | 12 | @include materialize-at-root(meta.module-variables('vars')); |
| 8 | --dims: ( | ||
| 9 | --size: fn.global-dim(--size --125), | ||
| 10 | ), | ||
| 11 | --colors: ( | ||
| 12 | --default: fn.global-color(--border-strong), | ||
| 13 | --primary: fn.global-color(--text), | ||
| 14 | ), | ||
| 15 | )); | ||
| 16 | 13 | ||
| 17 | @each $theme in $themes { | 14 | @include bem.object('status-indicator') { |
| 18 | @include iro.props-store(( | ||
| 19 | --colors: ( | ||
| 20 | --#{$theme}: fn.global-color(--#{$theme} --700), | ||
| 21 | ), | ||
| 22 | )); | ||
| 23 | } | ||
| 24 | |||
| 25 | @include iro.bem-object(iro.props-namespace()) { | ||
| 26 | display: inline-block; | 15 | display: inline-block; |
| 27 | inline-size: fn.dim(--size); | 16 | inline-size: props.get(vars.$size); |
| 28 | block-size: fn.dim(--size); | 17 | block-size: props.get(vars.$size); |
| 18 | background-color: props.get(vars.$default); | ||
| 29 | border-radius: 10em; | 19 | border-radius: 10em; |
| 30 | background-color: fn.color(--default); | ||
| 31 | vertical-align: middle; | ||
| 32 | 20 | ||
| 33 | @each $theme in $themes { | 21 | @each $theme in map.keys(props.get(vars.$themes)) { |
| 34 | @include iro.bem-is($theme) { | 22 | @include bem.is(string.slice($theme, 3)) { |
| 35 | background-color: fn.color(--#{$theme}); | 23 | background-color: props.get(vars.$themes, $theme); |
| 36 | } | 24 | } |
| 37 | } | 25 | } |
| 38 | } | 26 | } |
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss new file mode 100644 index 0000000..6289145 --- /dev/null +++ b/src/objects/_status-indicator.vars.scss | |||
| @@ -0,0 +1,26 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../config'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; | ||
| 7 | |||
| 8 | $default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 9 | $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; | ||
| 10 | |||
| 11 | $themes-config: ( | ||
| 12 | accent: --accent, | ||
| 13 | positive: --positive, | ||
| 14 | negative: --negative, | ||
| 15 | warning: --warning, | ||
| 16 | ) !default; | ||
| 17 | |||
| 18 | $themes: props.def(--o-status-indicator, (), 'color'); | ||
| 19 | |||
| 20 | @each $theme, $key in $themes-config { | ||
| 21 | @if $theme != --base { | ||
| 22 | $themes: props.merge($themes, ( | ||
| 23 | --#{$theme}: props.get(core.$theme, $key, --700), | ||
| 24 | )); | ||
| 25 | } | ||
| 26 | } | ||
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index e1f1132..8612d31 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss | |||
| @@ -1,217 +1,183 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 5 | @use '../core.vars' as core; | ||
| 3 | 6 | ||
| 4 | @include iro.props-namespace('switch') { | 7 | @forward 'switch.vars'; |
| 5 | @include iro.props-store(( | 8 | @use 'switch.vars' as vars; |
| 6 | --dims: ( | ||
| 7 | --width: fn.global-dim(--size --350), | ||
| 8 | --height: fn.global-dim(--size --200), | ||
| 9 | --label-gap: fn.global-dim(--size --125), | ||
| 10 | --border: fn.global-dim(--border --medium), | ||
| 11 | --pad-i: fn.global-dim(--size --65), | ||
| 12 | --pad-b: fn.global-dim(--size --65), | ||
| 13 | --rounding: fn.global-dim(--rounding), | ||
| 14 | --spacing-sibling: fn.global-dim(--size --300), | ||
| 15 | 9 | ||
| 16 | --key-focus: ( | 10 | @mixin styles { |
| 17 | --border: fn.global-dim(--key-focus --border), | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 18 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 19 | --outline: fn.global-dim(--key-focus --outline), | ||
| 20 | ), | ||
| 21 | ), | ||
| 22 | --colors: ( | ||
| 23 | --track-bg: fn.global-color(--border), | ||
| 24 | --handle-border: fn.global-color(--text-mute-more), | ||
| 25 | --handle-bg: fn.global-color(--base --50), | ||
| 26 | |||
| 27 | --hover: ( | ||
| 28 | --label: fn.global-color(--heading), | ||
| 29 | --handle-border: fn.global-color(--text-mute), | ||
| 30 | ), | ||
| 31 | --accent: ( | ||
| 32 | --handle-border: fn.global-color(--accent --900), | ||
| 33 | |||
| 34 | --hover: ( | ||
| 35 | --handle-border: fn.global-color(--accent --1000), | ||
| 36 | ), | ||
| 37 | ), | ||
| 38 | --disabled: ( | ||
| 39 | --label: fn.global-color(--text-disabled), | ||
| 40 | --track-bg: fn.global-color(--border), | ||
| 41 | --handle-border: fn.global-color(--border-strong), | ||
| 42 | --handle-bg: fn.global-color(--base --50), | ||
| 43 | ), | ||
| 44 | --key-focus: ( | ||
| 45 | --label: fn.global-color(--focus --text), | ||
| 46 | --border: fn.global-color(--focus --border), | ||
| 47 | --outline: fn.global-color(--focus --outline), | ||
| 48 | ), | ||
| 49 | ), | ||
| 50 | )); | ||
| 51 | 12 | ||
| 52 | @include iro.bem-object(iro.props-namespace()) { | 13 | @include bem.object('switch') { |
| 53 | display: inline-block; | ||
| 54 | position: relative; | 14 | position: relative; |
| 15 | display: inline-block; | ||
| 16 | padding-block: props.get(vars.$pad-b); | ||
| 17 | padding-inline: props.get(vars.$pad-i); | ||
| 55 | margin-inline: | 18 | margin-inline: |
| 56 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) | 19 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
| 57 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); | 20 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); |
| 58 | padding-inline: fn.dim(--pad-i); | ||
| 59 | padding-block: fn.dim(--pad-b); | ||
| 60 | 21 | ||
| 61 | @include iro.bem-elem('indicator') { | 22 | @include bem.elem('indicator') { |
| 62 | display: inline-block; | 23 | display: inline-block; |
| 63 | flex: 0 0 auto; | 24 | flex: 0 0 auto; |
| 64 | inline-size: fn.dim(--width); | 25 | inline-size: props.get(vars.$inline-size); |
| 65 | block-size: fn.dim(--height); | 26 | block-size: props.get(vars.$block-size); |
| 66 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset)); | 27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); |
| 67 | transition: background-color .2s ease; | ||
| 68 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
| 69 | border-radius: 2em; | ||
| 70 | background-color: fn.color(--track-bg); | ||
| 71 | background-clip: padding-box; | ||
| 72 | vertical-align: top; | 28 | vertical-align: top; |
| 29 | background-color: props.get(vars.$track-bg-color); | ||
| 30 | background-clip: padding-box; | ||
| 31 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 32 | border-radius: 2em; | ||
| 33 | transition: background-color .2s ease; | ||
| 73 | 34 | ||
| 74 | &::after { | 35 | &::after { |
| 75 | content: ''; | ||
| 76 | display: block; | 36 | display: block; |
| 77 | inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); | 37 | inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); |
| 78 | block-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); | 38 | block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); |
| 39 | content: ''; | ||
| 40 | background-color: props.get(vars.$handle-bg-color); | ||
| 41 | border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); | ||
| 42 | border-radius: props.get(vars.$inline-size); | ||
| 79 | transition: transform .2s ease; | 43 | transition: transform .2s ease; |
| 80 | border: fn.dim(--border) solid fn.color(--handle-border); | ||
| 81 | border-radius: fn.dim(--width); | ||
| 82 | background-color: fn.color(--handle-bg); | ||
| 83 | } | 44 | } |
| 84 | } | 45 | } |
| 85 | 46 | ||
| 86 | @include iro.bem-elem('label') { | 47 | @include bem.elem('label') { |
| 87 | margin-inline-start: fn.dim(--label-gap); | 48 | margin-inline-start: props.get(vars.$label-gap); |
| 88 | } | 49 | } |
| 89 | 50 | ||
| 90 | @include iro.bem-elem('native') { | 51 | @include bem.elem('native') { |
| 91 | appearance: none; | ||
| 92 | position: absolute; | 52 | position: absolute; |
| 93 | z-index: -1; | ||
| 94 | inset-block-start: 0; | 53 | inset-block-start: 0; |
| 95 | inset-inline-start: 0; | 54 | inset-inline-start: 0; |
| 55 | z-index: -1; | ||
| 96 | inline-size: 100%; | 56 | inline-size: 100%; |
| 97 | block-size: 100%; | 57 | block-size: 100%; |
| 98 | margin: 0; | ||
| 99 | padding: 0; | 58 | padding: 0; |
| 59 | margin: 0; | ||
| 100 | overflow: hidden; | 60 | overflow: hidden; |
| 101 | border-radius: fn.dim(--rounding); | 61 | appearance: none; |
| 62 | border-radius: props.get(vars.$rounding); | ||
| 102 | 63 | ||
| 103 | &:hover, | 64 | &:hover, |
| 104 | &:focus-visible { | 65 | &:focus-visible { |
| 105 | @include iro.bem-sibling-elem('label') { | 66 | @include bem.sibling-elem('label') { |
| 106 | color: fn.color(--hover --label); | 67 | color: props.get(vars.$hover--label-color); |
| 107 | } | 68 | } |
| 108 | 69 | ||
| 109 | @include iro.bem-sibling-elem('indicator') { | 70 | @include bem.sibling-elem('indicator') { |
| 110 | &::after { | 71 | &::after { |
| 111 | border-color: fn.color(--hover --handle-border); | 72 | border-color: props.get(vars.$hover--handle-border-color); |
| 112 | } | 73 | } |
| 113 | } | 74 | } |
| 114 | } | 75 | } |
| 115 | 76 | ||
| 116 | &:checked { | 77 | &:checked { |
| 117 | @include iro.bem-sibling-elem('indicator') { | 78 | @include bem.sibling-elem('indicator') { |
| 118 | background-color: fn.color(--handle-border); | 79 | background-color: props.get(vars.$handle-border-color); |
| 119 | 80 | ||
| 120 | &::after { | 81 | &::after { |
| 121 | transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); | 82 | border-color: props.get(vars.$handle-border-color); |
| 122 | border-color: fn.color(--handle-border); | 83 | transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); |
| 123 | } | 84 | } |
| 124 | } | 85 | } |
| 125 | 86 | ||
| 126 | &:hover, | 87 | &:hover, |
| 127 | &:focus-visible { | 88 | &:focus-visible { |
| 128 | @include iro.bem-sibling-elem('indicator') { | 89 | @include bem.sibling-elem('indicator') { |
| 129 | background-color: fn.color(--hover --handle-border); | 90 | background-color: props.get(vars.$hover--handle-border-color); |
| 130 | 91 | ||
| 131 | &::after { | 92 | &::after { |
| 132 | border-color: fn.color(--hover --handle-border); | 93 | border-color: props.get(vars.$hover--handle-border-color); |
| 133 | } | 94 | } |
| 134 | } | 95 | } |
| 135 | } | 96 | } |
| 136 | } | 97 | } |
| 137 | 98 | ||
| 138 | &:disabled { | 99 | &:disabled { |
| 139 | @include iro.bem-sibling-elem('label') { | 100 | @include bem.sibling-elem('label') { |
| 140 | color: fn.color(--disabled --label); | 101 | color: props.get(vars.$disabled--label-color); |
| 141 | } | 102 | } |
| 142 | 103 | ||
| 143 | @include iro.bem-sibling-elem('indicator') { | 104 | @include bem.sibling-elem('indicator') { |
| 144 | background-color: fn.color(--disabled --track-bg); | 105 | background-color: props.get(vars.$disabled--track-bg-color); |
| 145 | 106 | ||
| 146 | &::after { | 107 | &::after { |
| 147 | border-color: fn.color(--disabled --handle-border); | 108 | background-color: props.get(vars.$disabled--handle-bg-color); |
| 148 | background-color: fn.color(--disabled --handle-bg); | 109 | border-color: props.get(vars.$disabled--handle-border-color); |
| 149 | } | 110 | } |
| 150 | } | 111 | } |
| 151 | 112 | ||
| 152 | &:checked { | 113 | &:checked { |
| 153 | @include iro.bem-sibling-elem('indicator') { | 114 | @include bem.sibling-elem('indicator') { |
| 154 | background-color: fn.color(--disabled --handle-border); | 115 | background-color: props.get(vars.$disabled--handle-border-color); |
| 155 | 116 | ||
| 156 | &::after { | 117 | &::after { |
| 157 | border-color: fn.color(--disabled --handle-border); | 118 | border-color: props.get(vars.$disabled--handle-border-color); |
| 158 | } | 119 | } |
| 159 | } | 120 | } |
| 160 | } | 121 | } |
| 161 | } | 122 | } |
| 162 | 123 | ||
| 163 | &:focus-visible { | 124 | &:focus-visible { |
| 164 | @include iro.bem-sibling-elem('label') { | 125 | @include bem.sibling-elem('label') { |
| 165 | color: fn.color(--key-focus --label); | 126 | color: props.get(vars.$key-focus--label-color); |
| 166 | } | 127 | } |
| 167 | 128 | ||
| 168 | @include iro.bem-sibling-elem('indicator') { | 129 | @include bem.sibling-elem('indicator') { |
| 169 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 130 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 170 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 131 | box-shadow: |
| 132 | 0 | ||
| 133 | 0 | ||
| 134 | 0 | ||
| 135 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 136 | props.get(vars.$key-focus--outline-color); | ||
| 171 | } | 137 | } |
| 172 | } | 138 | } |
| 173 | } | 139 | } |
| 174 | 140 | ||
| 175 | @include iro.bem-modifier('standalone') { | 141 | @include bem.modifier('standalone') { |
| 176 | @include iro.bem-elem('indicator') { | 142 | @include bem.elem('indicator') { |
| 177 | margin-block-start: 0; | 143 | margin-block-start: 0; |
| 178 | } | 144 | } |
| 179 | } | 145 | } |
| 180 | 146 | ||
| 181 | @include iro.bem-modifier('accent') { | 147 | @include bem.modifier('accent') { |
| 182 | @include iro.bem-elem('native') { | 148 | @include bem.elem('native') { |
| 183 | &:checked { | 149 | &:checked { |
| 184 | @include iro.bem-sibling-elem('indicator') { | 150 | @include bem.sibling-elem('indicator') { |
| 185 | background-color: fn.color(--accent --handle-border); | 151 | background-color: props.get(vars.$accent--handle-border-color); |
| 186 | 152 | ||
| 187 | &::after { | 153 | &::after { |
| 188 | border-color: fn.color(--accent --handle-border); | 154 | border-color: props.get(vars.$accent--handle-border-color); |
| 189 | } | 155 | } |
| 190 | } | 156 | } |
| 191 | 157 | ||
| 192 | &:hover, | 158 | &:hover, |
| 193 | &:focus-visible { | 159 | &:focus-visible { |
| 194 | @include iro.bem-sibling-elem('indicator') { | 160 | @include bem.sibling-elem('indicator') { |
| 195 | background-color: fn.color(--accent --hover --handle-border); | 161 | background-color: props.get(vars.$accent--hover--handle-border-color); |
| 196 | 162 | ||
| 197 | &::after { | 163 | &::after { |
| 198 | border-color: fn.color(--accent --hover --handle-border); | 164 | border-color: props.get(vars.$accent--hover--handle-border-color); |
| 199 | } | 165 | } |
| 200 | } | 166 | } |
| 201 | } | 167 | } |
| 202 | } | 168 | } |
| 203 | 169 | ||
| 204 | &:disabled { | 170 | &:disabled { |
| 205 | @include iro.bem-sibling-elem('label') { | 171 | @include bem.sibling-elem('label') { |
| 206 | color: fn.color(--disabled --label); | 172 | color: props.get(vars.$disabled--label-color); |
| 207 | } | 173 | } |
| 208 | 174 | ||
| 209 | &:checked { | 175 | &:checked { |
| 210 | @include iro.bem-sibling-elem('indicator') { | 176 | @include bem.sibling-elem('indicator') { |
| 211 | background-color: fn.color(--disabled --handle-border); | 177 | background-color: props.get(vars.$disabled--handle-border-color); |
| 212 | 178 | ||
| 213 | &::after { | 179 | &::after { |
| 214 | border-color: fn.color(--disabled --handle-border); | 180 | border-color: props.get(vars.$disabled--handle-border-color); |
| 215 | } | 181 | } |
| 216 | } | 182 | } |
| 217 | } | 183 | } |
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss new file mode 100644 index 0000000..85596af --- /dev/null +++ b/src/objects/_switch.vars.scss | |||
| @@ -0,0 +1,37 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; | ||
| 6 | $block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default; | ||
| 7 | $label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default; | ||
| 8 | $border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; | ||
| 9 | $pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; | ||
| 10 | $pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; | ||
| 11 | $rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default; | ||
| 12 | $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; | ||
| 13 | |||
| 14 | $key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 15 | $key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 16 | $key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 17 | |||
| 18 | $track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 19 | $handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 20 | $handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 21 | |||
| 22 | $hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 23 | $hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 24 | |||
| 25 | $accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; | ||
| 26 | |||
| 27 | $accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; | ||
| 28 | |||
| 29 | $disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 30 | $disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 31 | $disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 32 | $disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 33 | |||
| 34 | $key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 35 | $key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 36 | $key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 37 | |||
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss new file mode 100644 index 0000000..131c832 --- /dev/null +++ b/src/objects/_tabbar.scss | |||
| @@ -0,0 +1,113 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 7 | |||
| 8 | @forward 'tabbar.vars'; | ||
| 9 | @use 'tabbar.vars' as vars; | ||
| 10 | |||
| 11 | @mixin styles { | ||
| 12 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 13 | |||
| 14 | @include bem.object('tabbar') { | ||
| 15 | min-inline-size: 0; | ||
| 16 | block-size: props.get(vars.$block-size); | ||
| 17 | overflow: hidden; | ||
| 18 | |||
| 19 | &::after { | ||
| 20 | display: block; | ||
| 21 | block-size: props.get(vars.$indicator--width); | ||
| 22 | margin-block-start: calc(-1 * props.get(vars.$indicator--width)); | ||
| 23 | content: ''; | ||
| 24 | background-color: props.get(vars.$railing--bg-color); | ||
| 25 | } | ||
| 26 | |||
| 27 | @include bem.elem('tabs') { | ||
| 28 | display: flex; | ||
| 29 | block-size: 100%; | ||
| 30 | margin-inline: calc(-.5 * props.get(vars.$spacing)); | ||
| 31 | overflow-inline: auto; | ||
| 32 | } | ||
| 33 | |||
| 34 | @include bem.modifier('quiet') { | ||
| 35 | box-shadow: none; | ||
| 36 | } | ||
| 37 | |||
| 38 | @include bem.modifier('adapt') { | ||
| 39 | block-size: 100%; | ||
| 40 | } | ||
| 41 | |||
| 42 | @include bem.elem('tab') { | ||
| 43 | position: relative; | ||
| 44 | display: flex; | ||
| 45 | align-items: center; | ||
| 46 | padding-inline: calc(.5 * props.get(vars.$spacing)); | ||
| 47 | color: props.get(vars.$tab--text-color); | ||
| 48 | white-space: nowrap; | ||
| 49 | |||
| 50 | &::before { | ||
| 51 | position: absolute; | ||
| 52 | inset-block-start: 50%; | ||
| 53 | inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); | ||
| 54 | z-index: -10; | ||
| 55 | block-size: 1.5em; | ||
| 56 | content: ''; | ||
| 57 | border-radius: props.get(vars.$rounding); | ||
| 58 | transform: translateY(-50%); | ||
| 59 | } | ||
| 60 | |||
| 61 | &::after { | ||
| 62 | position: absolute; | ||
| 63 | inset-block-end: 0; | ||
| 64 | inset-inline: calc(.5 * props.get(vars.$spacing)); | ||
| 65 | z-index: 10; | ||
| 66 | display: none; | ||
| 67 | block-size: props.get(vars.$indicator--width); | ||
| 68 | content: ''; | ||
| 69 | background-color: props.get(vars.$tab--selected--text-color); | ||
| 70 | } | ||
| 71 | |||
| 72 | &:link, | ||
| 73 | &:visited { | ||
| 74 | &:hover, | ||
| 75 | &:active, | ||
| 76 | &:focus-visible { | ||
| 77 | color: props.get(vars.$tab--selected--text-color); | ||
| 78 | } | ||
| 79 | |||
| 80 | &:focus-visible { | ||
| 81 | &::before { | ||
| 82 | color: props.get(vars.$key-focus--text-color); | ||
| 83 | text-decoration: none; | ||
| 84 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
| 85 | box-shadow: 0 0 0 | ||
| 86 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
| 87 | props.get(vars.$key-focus--outline-color); | ||
| 88 | } | ||
| 89 | } | ||
| 90 | } | ||
| 91 | |||
| 92 | @include bem.is('selected') { | ||
| 93 | color: props.get(vars.$tab--selected--text-color); | ||
| 94 | |||
| 95 | &::after { | ||
| 96 | display: block; | ||
| 97 | } | ||
| 98 | } | ||
| 99 | } | ||
| 100 | |||
| 101 | @include bem.modifier('accent') { | ||
| 102 | @include bem.elem('tab') { | ||
| 103 | &::after { | ||
| 104 | background-color: props.get(vars.$tab--accent--text-color); | ||
| 105 | } | ||
| 106 | |||
| 107 | @include bem.is('selected') { | ||
| 108 | color: props.get(vars.$tab--accent--text-color); | ||
| 109 | } | ||
| 110 | } | ||
| 111 | } | ||
| 112 | } | ||
| 113 | } | ||
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss new file mode 100644 index 0000000..f4486d6 --- /dev/null +++ b/src/objects/_tabbar.vars.scss | |||
| @@ -0,0 +1,25 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; | ||
| 7 | $rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default; | ||
| 8 | $spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; | ||
| 9 | $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; | ||
| 10 | |||
| 11 | $indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; | ||
| 12 | |||
| 13 | $key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $tab--text-color: props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
| 18 | $tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 19 | $tab--accent--text-color: props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; | ||
| 20 | |||
| 21 | $railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 22 | |||
| 23 | $key-focus--text-color: props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
| 24 | $key-focus--border-color: props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 25 | $key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 2c9f65b..2b63737 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss | |||
| @@ -1,78 +1,57 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use '../mixins' as mx; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../props' as *; | ||
| 4 | 5 | ||
| 5 | @include iro.props-namespace('table') { | 6 | @forward 'table.vars'; |
| 6 | @include iro.props-store(( | 7 | @use 'table.vars' as vars; |
| 7 | --dims: ( | ||
| 8 | --pad-i: fn.global-dim(--size --175), | ||
| 9 | --pad-b: fn.global-dim(--size --125), | ||
| 10 | --rounding: fn.global-dim(--rounding), | ||
| 11 | --border: fn.global-dim(--border --thin), | ||
| 12 | 8 | ||
| 13 | --sm: ( | 9 | @mixin styles { |
| 14 | --pad-b: fn.global-dim(--size --75), | 10 | @include materialize-at-root(meta.module-variables('vars')); |
| 15 | ) | ||
| 16 | ), | ||
| 17 | --colors: ( | ||
| 18 | --border: fn.global-color(--border), | ||
| 19 | --heading: fn.global-color(--heading), | ||
| 20 | --hover: fn.global-color(--border-mute), | ||
| 21 | --active: fn.global-color(--border), | ||
| 22 | --box: ( | ||
| 23 | --bg: fn.global-color(--base --50), | ||
| 24 | --hover: fn.global-color(--bg-base), | ||
| 25 | --active: fn.global-color(--border-mute), | ||
| 26 | ) | ||
| 27 | ) | ||
| 28 | )); | ||
| 29 | 11 | ||
| 30 | @include iro.bem-object(iro.props-namespace()) { | 12 | @include bem.object('table') { |
| 31 | border-spacing: 0; | 13 | border-spacing: 0; |
| 32 | border-collapse: separate; | 14 | border-collapse: separate; |
| 33 | 15 | ||
| 34 | @include iro.bem-modifier('fixed') { | 16 | @include bem.modifier('fixed') { |
| 35 | table-layout: fixed; | 17 | table-layout: fixed; |
| 36 | } | 18 | } |
| 37 | 19 | ||
| 38 | @include iro.bem-elem('head-cell') { | 20 | @include bem.elem('head-cell') { |
| 39 | @include mx.set-font(--standard, ( | 21 | padding-block: props.get(vars.$pad-b); |
| 40 | --line-height: null, | 22 | padding-inline: props.get(vars.$pad-i); |
| 41 | --size: fn.global-dim(--font-size --50), | 23 | font-family: props.get(vars.$heading--font-family); |
| 42 | --weight: bold, | 24 | font-size: props.get(vars.$heading--font-size); |
| 43 | --transform: uppercase, | 25 | font-weight: props.get(vars.$heading--font-weight); |
| 44 | --spacing: .5px | 26 | color: props.get(vars.$heading-color); |
| 45 | )); | ||
| 46 | |||
| 47 | padding-inline: fn.dim(--pad-i); | ||
| 48 | padding-block: fn.dim(--pad-b); | ||
| 49 | color: fn.color(--heading); | ||
| 50 | text-align: start; | 27 | text-align: start; |
| 28 | text-transform: props.get(vars.$heading--text-transform); | ||
| 29 | letter-spacing: props.get(vars.$heading--letter-spacing); | ||
| 51 | } | 30 | } |
| 52 | 31 | ||
| 53 | @include iro.bem-elem('cell') { | 32 | @include bem.elem('cell') { |
| 54 | padding-inline: fn.dim(--pad-i); | 33 | padding-block: props.get(vars.$pad-b); |
| 55 | padding-block: fn.dim(--pad-b); | 34 | padding-inline: props.get(vars.$pad-i); |
| 56 | border-width: 0; | 35 | border-color: props.get(vars.$border-color); |
| 57 | border-block-start-width: fn.dim(--border); | ||
| 58 | border-style: solid; | 36 | border-style: solid; |
| 59 | border-color: fn.color(--border); | 37 | border-width: 0; |
| 38 | border-block-start-width: props.get(vars.$border-width); | ||
| 60 | 39 | ||
| 61 | @include iro.bem-modifier('divider') { | 40 | @include bem.modifier('divider') { |
| 62 | border-inline-end-width: fn.dim(--border); | 41 | border-inline-end-width: props.get(vars.$border-width); |
| 63 | } | 42 | } |
| 64 | } | 43 | } |
| 65 | 44 | ||
| 66 | @include iro.bem-elem('row') { | 45 | @include bem.elem('row') { |
| 67 | &:last-child { | 46 | &:last-child { |
| 68 | @include iro.bem-elem('cell') { | 47 | @include bem.elem('cell') { |
| 69 | border-block-end-width: fn.dim(--border); | 48 | border-block-end-width: props.get(vars.$border-width); |
| 70 | } | 49 | } |
| 71 | } | 50 | } |
| 72 | } | 51 | } |
| 73 | 52 | ||
| 74 | @include iro.bem-modifier('flush') { | 53 | @include bem.modifier('flush') { |
| 75 | @include iro.bem-elem('head-cell', 'cell') { | 54 | @include bem.elem('head-cell', 'cell') { |
| 76 | &:first-child { | 55 | &:first-child { |
| 77 | padding-inline-start: 0; | 56 | padding-inline-start: 0; |
| 78 | } | 57 | } |
| @@ -83,85 +62,85 @@ | |||
| 83 | } | 62 | } |
| 84 | } | 63 | } |
| 85 | 64 | ||
| 86 | @include iro.bem-modifier('box') { | 65 | @include bem.modifier('box') { |
| 87 | @include iro.bem-elem('cell') { | 66 | @include bem.elem('cell') { |
| 88 | background-color: fn.color(--box --bg); | 67 | background-color: props.get(vars.$box--bg-color); |
| 89 | 68 | ||
| 90 | &:first-child { | 69 | &:first-child { |
| 91 | border-inline-start-width: fn.dim(--border); | 70 | border-inline-start-width: props.get(vars.$border-width); |
| 92 | } | 71 | } |
| 93 | 72 | ||
| 94 | &:last-child { | 73 | &:last-child { |
| 95 | border-inline-end-width: fn.dim(--border); | 74 | border-inline-end-width: props.get(vars.$border-width); |
| 96 | } | 75 | } |
| 97 | } | 76 | } |
| 98 | 77 | ||
| 99 | @include iro.bem-elem('row') { | 78 | @include bem.elem('row') { |
| 100 | &:first-child { | 79 | &:first-child { |
| 101 | @include iro.bem-elem('cell') { | 80 | @include bem.elem('cell') { |
| 102 | &:first-child { | 81 | &:first-child { |
| 103 | border-start-start-radius: fn.dim(--rounding); | 82 | border-start-start-radius: props.get(vars.$rounding); |
| 104 | } | 83 | } |
| 105 | 84 | ||
| 106 | &:last-child { | 85 | &:last-child { |
| 107 | border-start-end-radius: fn.dim(--rounding); | 86 | border-start-end-radius: props.get(vars.$rounding); |
| 108 | } | 87 | } |
| 109 | } | 88 | } |
| 110 | } | 89 | } |
| 111 | 90 | ||
| 112 | &:last-child { | 91 | &:last-child { |
| 113 | @include iro.bem-elem('cell') { | 92 | @include bem.elem('cell') { |
| 114 | &:first-child { | 93 | &:first-child { |
| 115 | border-end-start-radius: fn.dim(--rounding); | 94 | border-end-start-radius: props.get(vars.$rounding); |
| 116 | } | 95 | } |
| 117 | 96 | ||
| 118 | &:last-child { | 97 | &:last-child { |
| 119 | border-end-end-radius: fn.dim(--rounding); | 98 | border-end-end-radius: props.get(vars.$rounding); |
| 120 | } | 99 | } |
| 121 | } | 100 | } |
| 122 | } | 101 | } |
| 123 | } | 102 | } |
| 124 | } | 103 | } |
| 125 | 104 | ||
| 126 | @include iro.bem-modifier('interactive') { | 105 | @include bem.modifier('interactive') { |
| 127 | @include iro.bem-elem('row') { | 106 | @include bem.elem('row') { |
| 128 | @include iro.bem-elem('cell') { | 107 | @include bem.elem('cell') { |
| 129 | cursor: pointer; | 108 | cursor: pointer; |
| 130 | } | 109 | } |
| 131 | 110 | ||
| 132 | &:hover { | 111 | &:hover { |
| 133 | @include iro.bem-elem('cell') { | 112 | @include bem.elem('cell') { |
| 134 | background-color: fn.color(--hover); | 113 | background-color: props.get(vars.$hover--bg-color); |
| 135 | } | 114 | } |
| 136 | } | 115 | } |
| 137 | 116 | ||
| 138 | &:active { | 117 | &:active { |
| 139 | @include iro.bem-elem('cell') { | 118 | @include bem.elem('cell') { |
| 140 | background-color: fn.color(--active); | 119 | background-color: props.get(vars.$active--bg-color); |
| 141 | } | 120 | } |
| 142 | } | 121 | } |
| 143 | } | 122 | } |
| 144 | 123 | ||
| 145 | @include iro.bem-modifier('box') { | 124 | @include bem.modifier('box') { |
| 146 | @include iro.bem-elem('row') { | 125 | @include bem.elem('row') { |
| 147 | &:hover { | 126 | &:hover { |
| 148 | @include iro.bem-elem('cell') { | 127 | @include bem.elem('cell') { |
| 149 | background-color: fn.color(--box --hover); | 128 | background-color: props.get(vars.$box--hover--bg-color); |
| 150 | } | 129 | } |
| 151 | } | 130 | } |
| 152 | 131 | ||
| 153 | &:active { | 132 | &:active { |
| 154 | @include iro.bem-elem('cell') { | 133 | @include bem.elem('cell') { |
| 155 | background-color: fn.color(--box --active); | 134 | background-color: props.get(vars.$box--active--bg-color); |
| 156 | } | 135 | } |
| 157 | } | 136 | } |
| 158 | } | 137 | } |
| 159 | } | 138 | } |
| 160 | } | 139 | } |
| 161 | 140 | ||
| 162 | @include iro.bem-modifier('sm') { | 141 | @include bem.modifier('sm') { |
| 163 | @include iro.bem-elem('head-cell', 'cell') { | 142 | @include bem.elem('head-cell', 'cell') { |
| 164 | padding-block: fn.dim(--sm --pad-b); | 143 | padding-block: props.get(vars.$pad-b--sm); |
| 165 | } | 144 | } |
| 166 | } | 145 | } |
| 167 | } | 146 | } |
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss new file mode 100644 index 0000000..d1d53d7 --- /dev/null +++ b/src/objects/_table.vars.scss | |||
| @@ -0,0 +1,25 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; | ||
| 6 | $pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; | ||
| 7 | $rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default; | ||
| 8 | $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; | ||
| 9 | |||
| 10 | $heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; | ||
| 11 | $heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default; | ||
| 12 | $heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default; | ||
| 13 | $heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default; | ||
| 14 | $heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default; | ||
| 15 | |||
| 16 | $pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default; | ||
| 17 | |||
| 18 | $border-color: props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default; | ||
| 19 | $heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 20 | $hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 21 | $active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default; | ||
| 22 | |||
| 23 | $box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 24 | $box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default; | ||
| 25 | $box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 6611ea6..6c0e7d2 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
| @@ -1,210 +1,162 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'sass:meta'; |
| 2 | @use '../functions' as fn; | 2 | @use 'iro-sass/src/bem'; |
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../props' as *; | ||
| 3 | 5 | ||
| 4 | @mixin invalid { | 6 | @forward 'text-field.vars'; |
| 5 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); | 7 | @use 'text-field.vars' as vars; |
| 8 | |||
| 9 | @mixin -invalid { | ||
| 10 | $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); | ||
| 6 | 11 | ||
| 7 | @include iro.bem-sibling-elem('bg') { | 12 | @include bem.sibling-elem('bg') { |
| 8 | inset-block: $focus-border-offset; | 13 | inset-block: $focus-border-offset; |
| 9 | inset-inline: $focus-border-offset; | 14 | inset-inline: $focus-border-offset; |
| 10 | border: fn.dim(--focus --border) solid fn.color(--error --border); | 15 | border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); |
| 11 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); | 16 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
| 12 | } | 17 | } |
| 13 | 18 | ||
| 14 | &:hover { | 19 | &:hover { |
| 15 | @include iro.bem-sibling-elem('bg') { | 20 | @include bem.sibling-elem('bg') { |
| 16 | border-color: fn.color(--error --hover --border); | 21 | border-color: props.get(vars.$error--hover--border-color); |
| 17 | } | 22 | } |
| 18 | } | 23 | } |
| 19 | 24 | ||
| 20 | &:focus { | 25 | &:focus { |
| 21 | @include iro.bem-sibling-elem('bg') { | 26 | @include bem.sibling-elem('bg') { |
| 22 | border-color: fn.color(--error --focus --border); | 27 | border-color: props.get(vars.$error--focus--border-color); |
| 23 | } | 28 | } |
| 24 | } | 29 | } |
| 25 | } | 30 | } |
| 26 | 31 | ||
| 27 | @mixin keyboard-focus { | 32 | @mixin -keyboard-focus { |
| 28 | @include iro.bem-sibling-elem('bg') { | 33 | @include bem.sibling-elem('bg') { |
| 29 | border-color: fn.color(--key-focus --border); | 34 | border-color: props.get(vars.$key-focus--border-color); |
| 30 | outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border); | 35 | outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); |
| 31 | //outline-offset: fn.dim(--focus --border); | 36 | //outline-offset: props.get(vars.$focus --border); |
| 32 | } | 37 | } |
| 33 | } | 38 | } |
| 34 | 39 | ||
| 35 | @include iro.props-namespace('text-field') { | 40 | @mixin styles { |
| 36 | @include iro.props-store(( | 41 | @include materialize-at-root(meta.module-variables('vars')); |
| 37 | --dims: ( | 42 | |
| 38 | --line-height: 1.4, | 43 | @include bem.object('text-field') { |
| 39 | --pad-i: fn.global-dim(--size --125), | 44 | $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); |
| 40 | --pad-b: fn.global-dim(--size --125), | ||
| 41 | --border: fn.global-dim(--border --thin), | ||
| 42 | --rounding: fn.global-dim(--rounding), | ||
| 43 | |||
| 44 | --extended: ( | ||
| 45 | --pad: fn.global-dim(--size --50), | ||
| 46 | ), | ||
| 47 | |||
| 48 | --focus: ( | ||
| 49 | --border: fn.global-dim(--border --medium), | ||
| 50 | ), | ||
| 51 | |||
| 52 | --key-focus: ( | ||
| 53 | --border: fn.global-dim(--key-focus --outline), | ||
| 54 | ), | ||
| 55 | ), | ||
| 56 | --colors: ( | ||
| 57 | --bg: fn.global-color(--base --50), | ||
| 58 | --placeholder: fn.global-color(--text-mute-more), | ||
| 59 | --text: fn.global-color(--text), | ||
| 60 | --border: fn.global-color(--border-strong), | ||
| 61 | |||
| 62 | --hover: ( | ||
| 63 | --border: fn.global-color(--text-mute-more), | ||
| 64 | ), | ||
| 65 | --focus: ( | ||
| 66 | --border: fn.global-color(--focus --border), | ||
| 67 | ), | ||
| 68 | --key-focus: ( | ||
| 69 | --border: fn.global-color(--focus --border), | ||
| 70 | --outline: fn.global-color(--focus --outline), | ||
| 71 | ), | ||
| 72 | --error: ( | ||
| 73 | --border: fn.global-color(--negative --700), | ||
| 74 | |||
| 75 | --hover: ( | ||
| 76 | --border: fn.global-color(--negative --900), | ||
| 77 | ), | ||
| 78 | --focus: ( | ||
| 79 | --border: fn.global-color(--negative --900), | ||
| 80 | ), | ||
| 81 | ), | ||
| 82 | --disabled: ( | ||
| 83 | --bg: fn.global-color(--border-mute), | ||
| 84 | --placeholder: fn.global-color(--text-disabled), | ||
| 85 | --text: fn.global-color(--text-disabled), | ||
| 86 | --border: fn.global-color(--border-mute), | ||
| 87 | ), | ||
| 88 | ), | ||
| 89 | )); | ||
| 90 | |||
| 91 | @include iro.bem-object(iro.props-namespace()) { | ||
| 92 | $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); | ||
| 93 | 45 | ||
| 94 | position: relative; | 46 | position: relative; |
| 95 | min-inline-size: 0; | 47 | min-inline-size: 0; |
| 96 | border-radius: fn.dim(--rounding); | 48 | background-color: props.get(vars.$bg-color); |
| 97 | background-color: fn.color(--bg); | 49 | border-radius: props.get(vars.$rounding); |
| 98 | 50 | ||
| 99 | @include iro.bem-elem('bg') { | 51 | @include bem.elem('bg') { |
| 100 | display: block; | ||
| 101 | position: absolute; | 52 | position: absolute; |
| 102 | inset-block: 0; | 53 | inset-block: 0; |
| 103 | inset-inline: 0; | 54 | inset-inline: 0; |
| 104 | border: fn.dim(--border) solid fn.color(--border); | 55 | display: block; |
| 105 | border-radius: fn.dim(--rounding); | ||
| 106 | pointer-events: none; | 56 | pointer-events: none; |
| 57 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | ||
| 58 | border-radius: props.get(vars.$rounding); | ||
| 107 | } | 59 | } |
| 108 | 60 | ||
| 109 | @include iro.bem-elem('native') { | 61 | @include bem.elem('native') { |
| 110 | box-sizing: border-box; | 62 | box-sizing: border-box; |
| 111 | inline-size: 100%; | 63 | inline-size: 100%; |
| 112 | padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); | 64 | padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); |
| 113 | padding-inline: fn.dim(--pad-i); | 65 | padding-inline: props.get(vars.$pad-i); |
| 114 | border: 1px solid transparent; | ||
| 115 | background-color: transparent; | ||
| 116 | color: fn.color(--text); | ||
| 117 | font: inherit; | 66 | font: inherit; |
| 118 | line-height: fn.dim(--line-height); | 67 | line-height: props.get(vars.$line-height); |
| 119 | resize: none; | 68 | color: props.get(vars.$text-color); |
| 120 | appearance: none; | 69 | appearance: none; |
| 70 | resize: none; | ||
| 71 | background-color: transparent; | ||
| 72 | border: 1px solid transparent; | ||
| 121 | 73 | ||
| 122 | &::placeholder { | 74 | &::placeholder { |
| 123 | opacity: 1; | ||
| 124 | color: fn.color(--placeholder); | ||
| 125 | font-style: italic; | 75 | font-style: italic; |
| 76 | color: props.get(vars.$placeholder-color); | ||
| 77 | opacity: 1; | ||
| 126 | } | 78 | } |
| 127 | 79 | ||
| 128 | &:hover { | 80 | &:hover { |
| 129 | @include iro.bem-sibling-elem('bg') { | 81 | @include bem.sibling-elem('bg') { |
| 130 | border-color: fn.color(--hover --border); | 82 | border-color: props.get(vars.$hover--border-color); |
| 131 | } | 83 | } |
| 132 | } | 84 | } |
| 133 | 85 | ||
| 134 | &:focus { | 86 | &:focus { |
| 135 | outline: 0; | 87 | outline: 0; |
| 136 | 88 | ||
| 137 | @include iro.bem-sibling-elem('bg') { | 89 | @include bem.sibling-elem('bg') { |
| 138 | inset-block: $focus-border-offset; | 90 | inset-block: $focus-border-offset; |
| 139 | inset-inline: $focus-border-offset; | 91 | inset-inline: $focus-border-offset; |
| 140 | border: fn.dim(--focus --border) solid fn.color(--focus --border); | 92 | border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); |
| 141 | border-radius: calc(fn.dim(--rounding) - $focus-border-offset); | 93 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
| 142 | } | 94 | } |
| 143 | } | 95 | } |
| 144 | 96 | ||
| 145 | &:invalid { | 97 | &:invalid { |
| 146 | @include invalid; | 98 | @include -invalid; |
| 147 | } | 99 | } |
| 148 | 100 | ||
| 149 | &:focus-visible, | 101 | &:focus-visible, |
| 150 | &:invalid:focus-visible { | 102 | &:invalid:focus-visible { |
| 151 | @include keyboard-focus; | 103 | @include -keyboard-focus; |
| 152 | } | 104 | } |
| 153 | } | 105 | } |
| 154 | 106 | ||
| 155 | @include iro.bem-modifier('extended') { | 107 | @include bem.modifier('extended') { |
| 156 | padding: fn.dim(--extended --pad); | 108 | padding: props.get(vars.$extended--pad); |
| 157 | 109 | ||
| 158 | @include iro.bem-multi('&', 'elem' 'bg') { | 110 | @include bem.multi('&', 'elem' 'bg') { |
| 159 | border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); | 111 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); |
| 160 | } | 112 | } |
| 161 | 113 | ||
| 162 | @include iro.bem-elem('native') { | 114 | @include bem.elem('native') { |
| 163 | &:focus { | 115 | &:focus { |
| 164 | @include iro.bem-sibling-elem('bg') { | 116 | @include bem.sibling-elem('bg') { |
| 165 | border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); | 117 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); |
| 166 | } | 118 | } |
| 167 | } | 119 | } |
| 168 | } | 120 | } |
| 169 | } | 121 | } |
| 170 | 122 | ||
| 171 | @include iro.bem-is('invalid') { | 123 | @include bem.is('invalid') { |
| 172 | @include iro.bem-elem('native') { | 124 | @include bem.elem('native') { |
| 173 | @include invalid; | 125 | @include -invalid; |
| 174 | 126 | ||
| 175 | &:focus-visible { | 127 | &:focus-visible { |
| 176 | @include keyboard-focus; | 128 | @include -keyboard-focus; |
| 177 | } | 129 | } |
| 178 | } | 130 | } |
| 179 | } | 131 | } |
| 180 | 132 | ||
| 181 | @include iro.bem-is('disabled') { | 133 | @include bem.is('disabled') { |
| 182 | background-color: fn.color(--disabled --bg); | 134 | background-color: props.get(vars.$disabled--bg-color); |
| 183 | 135 | ||
| 184 | @include iro.bem-elem('native') { | 136 | @include bem.elem('native') { |
| 185 | color: fn.color(--disabled --text); | 137 | color: props.get(vars.$disabled--text-color); |
| 186 | 138 | ||
| 187 | &::placeholder { | 139 | &::placeholder { |
| 188 | color: fn.color(--disabled --placeholder); | 140 | color: props.get(vars.$disabled--placeholder-color); |
| 189 | } | 141 | } |
| 190 | } | 142 | } |
| 191 | 143 | ||
| 192 | @include iro.bem-elem('bg') { | 144 | @include bem.elem('bg') { |
| 193 | border-color: fn.color(--disabled --border); | 145 | border-color: props.get(vars.$disabled--border-color); |
| 194 | } | 146 | } |
| 195 | 147 | ||
| 196 | @include iro.bem-is('invalid') { | 148 | @include bem.is('invalid') { |
| 197 | @include iro.bem-elem('native') { | 149 | @include bem.elem('native') { |
| 198 | @include iro.bem-sibling-elem('bg') { | 150 | @include bem.sibling-elem('bg') { |
| 199 | border-color: fn.color(--disabled --border); | 151 | border-color: props.get(vars.$disabled--border-color); |
| 200 | } | 152 | } |
| 201 | } | 153 | } |
| 202 | } | 154 | } |
| 203 | 155 | ||
| 204 | @include iro.bem-elem('native') { | 156 | @include bem.elem('native') { |
| 205 | &:invalid { | 157 | &:invalid { |
| 206 | @include iro.bem-sibling-elem('bg') { | 158 | @include bem.sibling-elem('bg') { |
| 207 | border-color: fn.color(--disabled --border); | 159 | border-color: props.get(vars.$disabled--border-color); |
| 208 | } | 160 | } |
| 209 | } | 161 | } |
| 210 | } | 162 | } |
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss new file mode 100644 index 0000000..833eacb --- /dev/null +++ b/src/objects/_text-field.vars.scss | |||
| @@ -0,0 +1,38 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'iro-sass/src/props'; | ||
| 3 | @use '../core.vars' as core; | ||
| 4 | |||
| 5 | $line-height: props.def(--o-text-field--line-height, 1.4) !default; | ||
| 6 | $pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; | ||
| 7 | $pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; | ||
| 8 | $border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; | ||
| 9 | $rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default; | ||
| 10 | |||
| 11 | $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; | ||
| 12 | |||
| 13 | $focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default; | ||
| 14 | |||
| 15 | $key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default; | ||
| 18 | $placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 19 | $text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default; | ||
| 20 | $border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 21 | |||
| 22 | $hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 23 | |||
| 24 | $focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 25 | |||
| 26 | $key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 27 | $key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 28 | |||
| 29 | $error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default; | ||
| 30 | |||
| 31 | $error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default; | ||
| 32 | |||
| 33 | $error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default; | ||
| 34 | |||
| 35 | $disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
| 36 | $disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 37 | $disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
| 38 | $disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss new file mode 100644 index 0000000..73a8cb0 --- /dev/null +++ b/src/objects/_thumbnail.scss | |||
| @@ -0,0 +1,104 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:meta'; | ||
| 3 | @use 'sass:string'; | ||
| 4 | @use 'iro-sass/src/bem'; | ||
| 5 | @use 'iro-sass/src/props'; | ||
| 6 | @use '../props' as *; | ||
| 7 | |||
| 8 | @forward 'thumbnail.vars'; | ||
| 9 | @use 'thumbnail.vars' as vars; | ||
| 10 | |||
| 11 | @mixin styles { | ||
| 12 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 13 | |||
| 14 | @include bem.object('thumbnail') { | ||
| 15 | position: relative; | ||
| 16 | display: block; | ||
| 17 | flex: 0 0 auto; | ||
| 18 | inline-size: props.get(vars.$size); | ||
| 19 | block-size: props.get(vars.$size); | ||
| 20 | overflow: hidden; | ||
| 21 | border-radius: props.get(vars.$rounding); | ||
| 22 | outline: props.get(vars.$border-color) solid props.get(vars.$border-width); | ||
| 23 | outline-offset: calc(-1 * props.get(vars.$border-width)); | ||
| 24 | opacity: .75; | ||
| 25 | |||
| 26 | &:hover, | ||
| 27 | &:active, | ||
| 28 | &:focus-visible { | ||
| 29 | outline-color: props.get(vars.$hover--border-color); | ||
| 30 | opacity: 1; | ||
| 31 | } | ||
| 32 | |||
| 33 | @include bem.is('selected') { | ||
| 34 | $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); | ||
| 35 | |||
| 36 | margin: $focus-border-offset; | ||
| 37 | border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); | ||
| 38 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | ||
| 39 | outline: none; | ||
| 40 | opacity: 1; | ||
| 41 | } | ||
| 42 | |||
| 43 | @include bem.elem('image') { | ||
| 44 | position: absolute; | ||
| 45 | inset-block-start: 0; | ||
| 46 | inset-inline-start: 0; | ||
| 47 | display: block; | ||
| 48 | inline-size: 100%; | ||
| 49 | block-size: 100%; | ||
| 50 | object-fit: cover; | ||
| 51 | object-position: center center; | ||
| 52 | } | ||
| 53 | |||
| 54 | @include bem.elem('icon') { | ||
| 55 | position: absolute; | ||
| 56 | inset-block-start: 50%; | ||
| 57 | inset-inline-start: 50%; | ||
| 58 | transform: translate(-50%, -50%); | ||
| 59 | } | ||
| 60 | |||
| 61 | &:focus-visible { | ||
| 62 | $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 63 | |||
| 64 | margin: $focus-border-offset; | ||
| 65 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
| 66 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | ||
| 67 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
| 68 | outline-offset: 0; | ||
| 69 | box-shadow: | ||
| 70 | 0 | ||
| 71 | 0 | ||
| 72 | 0 | ||
| 73 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) | ||
| 74 | props.get(vars.$key-focus--outline-color); | ||
| 75 | } | ||
| 76 | |||
| 77 | @each $theme in map.keys(props.get(vars.$static-themes)) { | ||
| 78 | @include bem.modifier(string.slice($theme, 3)) { | ||
| 79 | outline-color: props.get(vars.$static-themes, $theme, --border); | ||
| 80 | |||
| 81 | &:hover, | ||
| 82 | &:active, | ||
| 83 | &:focus-visible { | ||
| 84 | outline-color: props.get(vars.$static-themes, $theme, --hover, --border); | ||
| 85 | } | ||
| 86 | |||
| 87 | @include bem.is('selected') { | ||
| 88 | border-color: props.get(vars.$static-themes, $theme, --selected, --border); | ||
| 89 | } | ||
| 90 | |||
| 91 | &:focus-visible { | ||
| 92 | border-color: transparent; | ||
| 93 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); | ||
| 94 | box-shadow: | ||
| 95 | 0 | ||
| 96 | 0 | ||
| 97 | 0 | ||
| 98 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) | ||
| 99 | props.get(vars.$static-themes, $theme, --key-focus, --outline); | ||
| 100 | } | ||
| 101 | } | ||
| 102 | } | ||
| 103 | } | ||
| 104 | } | ||
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss new file mode 100644 index 0000000..ba8cebe --- /dev/null +++ b/src/objects/_thumbnail.vars.scss | |||
| @@ -0,0 +1,51 @@ | |||
| 1 | @use 'sass:map'; | ||
| 2 | @use 'sass:string'; | ||
| 3 | @use 'iro-sass/src/props'; | ||
| 4 | @use '../core.vars' as core; | ||
| 5 | |||
| 6 | $size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; | ||
| 7 | $rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default; | ||
| 8 | $spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; | ||
| 9 | $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; | ||
| 10 | |||
| 11 | $selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; | ||
| 12 | |||
| 13 | $key-focus--border-width: props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 14 | $key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 15 | $key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 16 | |||
| 17 | $border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
| 18 | |||
| 19 | $hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
| 20 | |||
| 21 | $selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; | ||
| 22 | |||
| 23 | $key-focus--border-color: props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
| 24 | $key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
| 25 | |||
| 26 | $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default; | ||
| 27 | |||
| 28 | $static-themes: props.def(--o-thumbnail, (), 'color'); | ||
| 29 | |||
| 30 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 31 | $thumbnail-theme: --static-#{string.slice($theme, 3)}; | ||
| 32 | |||
| 33 | $static-themes: props.merge($static-themes, ( | ||
| 34 | $thumbnail-theme: ( | ||
| 35 | --border: props.get(core.$transparent-colors, $theme, --400), | ||
| 36 | |||
| 37 | --hover: ( | ||
| 38 | --border: props.get(core.$transparent-colors, $theme, --500), | ||
| 39 | ), | ||
| 40 | |||
| 41 | --selected: ( | ||
| 42 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 43 | ), | ||
| 44 | |||
| 45 | --key-focus: ( | ||
| 46 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 47 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
| 48 | ), | ||
| 49 | ) | ||
| 50 | )); | ||
| 51 | } | ||