diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/_iro-design.scss | 2 | ||||
| -rw-r--r-- | src/layouts/_button-group.scss | 16 | ||||
| -rw-r--r-- | src/objects/_action-button.scss | 256 | ||||
| -rw-r--r-- | src/objects/_action-button.vars.scss | 359 | ||||
| -rw-r--r-- | src/objects/_badge.scss | 144 | ||||
| -rw-r--r-- | src/objects/_badge.vars.scss | 161 | ||||
| -rw-r--r-- | src/objects/_button.scss | 226 | ||||
| -rw-r--r-- | src/objects/_button.vars.scss | 353 |
8 files changed, 442 insertions, 1075 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss index bad29c5..ede8d34 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss | |||
| @@ -44,11 +44,9 @@ $breakpoints: ( | |||
| 44 | @forward 'scopes/lists' as s-lists--*; | 44 | @forward 'scopes/lists' as s-lists--*; |
| 45 | @forward 'scopes/tables' as s-tables--*; | 45 | @forward 'scopes/tables' as s-tables--*; |
| 46 | 46 | ||
| 47 | @forward 'objects/action-button' as o-action-button--*; | ||
| 48 | @forward 'objects/alert' as o-alert--*; | 47 | @forward 'objects/alert' as o-alert--*; |
| 49 | @forward 'objects/avatar' as o-avatar--*; | 48 | @forward 'objects/avatar' as o-avatar--*; |
| 50 | @forward 'objects/backdrop' as o-backdrop--*; | 49 | @forward 'objects/backdrop' as o-backdrop--*; |
| 51 | @forward 'objects/badge' as o-badge--*; | ||
| 52 | @forward 'objects/button' as o-button--*; | 50 | @forward 'objects/button' as o-button--*; |
| 53 | @forward 'objects/card' as o-card--*; | 51 | @forward 'objects/card' as o-card--*; |
| 54 | @forward 'objects/checkbox' as o-checkbox--*; | 52 | @forward 'objects/checkbox' as o-checkbox--*; |
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss index b0a3c8e..6c874e1 100644 --- a/src/layouts/_button-group.scss +++ b/src/layouts/_button-group.scss | |||
| @@ -5,7 +5,7 @@ | |||
| 5 | 5 | ||
| 6 | @forward 'button-group.vars'; | 6 | @forward 'button-group.vars'; |
| 7 | @use 'button-group.vars' as vars; | 7 | @use 'button-group.vars' as vars; |
| 8 | @use '../objects/action-button.vars' as action-button; | 8 | @use '../objects/button.vars' as button; |
| 9 | 9 | ||
| 10 | @mixin styles { | 10 | @mixin styles { |
| 11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| @@ -22,26 +22,26 @@ | |||
| 22 | } | 22 | } |
| 23 | 23 | ||
| 24 | @include bem.modifier('align-block') { | 24 | @include bem.modifier('align-block') { |
| 25 | margin-inline: calc(-1 * props.get(action-button.$pad-i) - props.get(action-button.$border-width)); | 25 | margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); |
| 26 | 26 | ||
| 27 | @include bem.modifier('pill') { | 27 | @include bem.modifier('pill') { |
| 28 | margin-inline: calc(-1 * props.get(action-button.$pad-i-pill) - props.get(action-button.$border-width)); | 28 | margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)); |
| 29 | } | 29 | } |
| 30 | 30 | ||
| 31 | @include bem.modifier('icon') { | 31 | @include bem.modifier('icon') { |
| 32 | margin-inline: calc(-1 * props.get(action-button.$pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1)); | 32 | margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); |
| 33 | } | 33 | } |
| 34 | 34 | ||
| 35 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in action-button.$fixed-sizes { | 35 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes { |
| 36 | @include bem.modifier('action-#{$mod}') { | 36 | @include bem.modifier('action-#{$mod}') { |
| 37 | margin-inline: calc(-1 * props.get($pad-i) - props.get(action-button.$border-width)); | 37 | margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width)); |
| 38 | 38 | ||
| 39 | @include bem.modifier('pill') { | 39 | @include bem.modifier('pill') { |
| 40 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(action-button.$border-width)); | 40 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width)); |
| 41 | } | 41 | } |
| 42 | 42 | ||
| 43 | @include bem.modifier('icon') { | 43 | @include bem.modifier('icon') { |
| 44 | margin-inline: calc(-1 * props.get($pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1)); | 44 | margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); |
| 45 | } | 45 | } |
| 46 | } | 46 | } |
| 47 | } | 47 | } |
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss deleted file mode 100644 index c997679..0000000 --- a/src/objects/_action-button.scss +++ /dev/null | |||
| @@ -1,256 +0,0 @@ | |||
| 1 | @use 'sass:list'; | ||
| 2 | @use 'sass:map'; | ||
| 3 | @use 'sass:meta'; | ||
| 4 | @use 'sass:string'; | ||
| 5 | @use 'iro-sass/src/bem'; | ||
| 6 | @use 'iro-sass/src/props'; | ||
| 7 | @use '../props' as *; | ||
| 8 | |||
| 9 | @forward 'action-button.vars'; | ||
| 10 | @use 'action-button.vars' as vars; | ||
| 11 | |||
| 12 | @mixin -apply-theme($theme, $key: ()) { | ||
| 13 | color: props.get($theme, list.join($key, --disabled --label-color)...); | ||
| 14 | background-color: props.get($theme, list.join($key, --disabled --bg-color)...); | ||
| 15 | border-color: props.get($theme, list.join($key, --disabled --border-color)...); | ||
| 16 | |||
| 17 | &::after { | ||
| 18 | outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); | ||
| 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)...); | ||
| 25 | } | ||
| 26 | |||
| 27 | &:link, | ||
| 28 | &:visited, | ||
| 29 | &:enabled { | ||
| 30 | color: props.get($theme, list.join($key, --label-color)...); | ||
| 31 | background-color: props.get($theme, list.join($key, --bg-color)...); | ||
| 32 | border-color: props.get($theme, list.join($key, --border-color)...); | ||
| 33 | box-shadow: | ||
| 34 | props.get(vars.$shadow-x) | ||
| 35 | props.get(vars.$shadow-y) | ||
| 36 | props.get(vars.$shadow-blur) | ||
| 37 | props.get(vars.$shadow-grow) | ||
| 38 | props.get($theme, list.join($key, --shadow-color)...); | ||
| 39 | |||
| 40 | &:hover, | ||
| 41 | &:focus-visible { | ||
| 42 | color: props.get($theme, list.join($key, --hover --label-color)...); | ||
| 43 | background-color: props.get($theme, list.join($key, --hover --bg-color)...); | ||
| 44 | border-color: props.get($theme, list.join($key, --hover --border-color)...); | ||
| 45 | } | ||
| 46 | |||
| 47 | &:active { | ||
| 48 | color: props.get($theme, list.join($key, --active --label-color)...); | ||
| 49 | background-color: props.get($theme, list.join($key, --active --bg-color)...); | ||
| 50 | border-color: props.get($theme, list.join($key, --active --border-color)...); | ||
| 51 | box-shadow: none; | ||
| 52 | } | ||
| 53 | } | ||
| 54 | |||
| 55 | @include bem.modifier('static') { | ||
| 56 | color: props.get($theme, list.join($key, --static --label-color)...); | ||
| 57 | background-color: props.get($theme, list.join($key, --static --bg-color)...); | ||
| 58 | border-color: props.get($theme, list.join($key, --static --border-color)...); | ||
| 59 | box-shadow: none; | ||
| 60 | |||
| 61 | &:link, | ||
| 62 | &:visited, | ||
| 63 | &:enabled { | ||
| 64 | color: props.get($theme, list.join($key, --static --label-color)...); | ||
| 65 | background-color: props.get($theme, list.join($key, --static --bg-color)...); | ||
| 66 | border-color: props.get($theme, list.join($key, --static --border-color)...); | ||
| 67 | box-shadow: none; | ||
| 68 | |||
| 69 | &:hover, | ||
| 70 | &:focus-visible { | ||
| 71 | color: props.get($theme, list.join($key, --static --hover --label-color)...); | ||
| 72 | background-color: props.get($theme, list.join($key, --static --hover --bg-color)...); | ||
| 73 | border-color: props.get($theme, list.join($key, --static --hover --border-color)...); | ||
| 74 | } | ||
| 75 | |||
| 76 | &:active { | ||
| 77 | color: props.get($theme, list.join($key, --static --active --label-color)...); | ||
| 78 | background-color: props.get($theme, list.join($key, --static --active --bg-color)...); | ||
| 79 | border-color: props.get($theme, list.join($key, --static --active --border-color)...); | ||
| 80 | } | ||
| 81 | } | ||
| 82 | } | ||
| 83 | |||
| 84 | @include bem.modifier('quiet') { | ||
| 85 | color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); | ||
| 86 | background-color: transparent; | ||
| 87 | border-color: transparent; | ||
| 88 | |||
| 89 | &:link, | ||
| 90 | &:visited, | ||
| 91 | &:enabled { | ||
| 92 | color: props.get($theme, list.join($key, --quiet --label-color)...); | ||
| 93 | background-color: transparent; | ||
| 94 | border-color: transparent; | ||
| 95 | box-shadow: none; | ||
| 96 | |||
| 97 | &:hover, | ||
| 98 | &:focus-visible { | ||
| 99 | color: props.get($theme, list.join($key, --quiet --hover --label-color)...); | ||
| 100 | background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); | ||
| 101 | border-color: transparent; | ||
| 102 | } | ||
| 103 | |||
| 104 | &:active { | ||
| 105 | color: props.get($theme, list.join($key, --quiet --active --label-color)...); | ||
| 106 | background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); | ||
| 107 | border-color: transparent; | ||
| 108 | } | ||
| 109 | } | ||
| 110 | } | ||
| 111 | |||
| 112 | @include bem.is('selected') { | ||
| 113 | color: props.get($theme, list.join($key, --selected --disabled --label-color)...); | ||
| 114 | background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); | ||
| 115 | border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); | ||
| 116 | |||
| 117 | @include bem.modifier('static') { | ||
| 118 | color: props.get($theme, list.join($key, --selected --label-color)...); | ||
| 119 | background-color: props.get($theme, list.join($key, --selected --bg-color)...); | ||
| 120 | border-color: props.get($theme, list.join($key, --selected --border-color)...); | ||
| 121 | } | ||
| 122 | |||
| 123 | &:link, | ||
| 124 | &:visited, | ||
| 125 | &:enabled { | ||
| 126 | color: props.get($theme, list.join($key, --selected --label-color)...); | ||
| 127 | background-color: props.get($theme, list.join($key, --selected --bg-color)...); | ||
| 128 | border-color: props.get($theme, list.join($key, --selected --border-color)...); | ||
| 129 | |||
| 130 | &:hover, | ||
| 131 | &:focus-visible { | ||
| 132 | color: props.get($theme, list.join($key, --selected --hover --label-color)...); | ||
| 133 | background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); | ||
| 134 | border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); | ||
| 135 | } | ||
| 136 | |||
| 137 | &:active { | ||
| 138 | color: props.get($theme, list.join($key, --selected --active --label-color)...); | ||
| 139 | background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); | ||
| 140 | border-color: props.get($theme, list.join($key, --selected --active --border-color)...); | ||
| 141 | } | ||
| 142 | } | ||
| 143 | } | ||
| 144 | } | ||
| 145 | |||
| 146 | @mixin styles { | ||
| 147 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 148 | |||
| 149 | @include bem.object('action-button') { | ||
| 150 | position: relative; | ||
| 151 | display: inline-block; | ||
| 152 | padding-block: props.get(vars.$pad-b); | ||
| 153 | padding-inline: props.get(vars.$pad-i); | ||
| 154 | line-height: props.get(vars.$line-height); | ||
| 155 | text-align: center; | ||
| 156 | text-decoration: none; | ||
| 157 | text-overflow: ellipsis; | ||
| 158 | white-space: nowrap; | ||
| 159 | border: props.get(vars.$border-width) solid transparent; | ||
| 160 | border-radius: props.get(vars.$rounding); | ||
| 161 | |||
| 162 | &::after { | ||
| 163 | position: absolute; | ||
| 164 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); | ||
| 165 | z-index: 1; | ||
| 166 | display: none; | ||
| 167 | pointer-events: none; | ||
| 168 | content: ''; | ||
| 169 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
| 170 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
| 171 | } | ||
| 172 | |||
| 173 | &:link, | ||
| 174 | &:visited, | ||
| 175 | &:enabled { | ||
| 176 | &:focus-visible { | ||
| 177 | &::after { | ||
| 178 | display: block; | ||
| 179 | } | ||
| 180 | } | ||
| 181 | } | ||
| 182 | |||
| 183 | @include bem.elem('label') { | ||
| 184 | margin-inline: props.get(vars.$pad-i-label); | ||
| 185 | } | ||
| 186 | |||
| 187 | @include -apply-theme(vars.$default-theme); | ||
| 188 | |||
| 189 | @each $theme in map.keys(props.get(vars.$themes)) { | ||
| 190 | @include bem.modifier(string.slice($theme, 3)) { | ||
| 191 | @include -apply-theme(vars.$themes, $theme); | ||
| 192 | } | ||
| 193 | } | ||
| 194 | |||
| 195 | @include bem.modifier('pill') { | ||
| 196 | padding-inline: props.get(vars.$pad-i-pill); | ||
| 197 | border-radius: 100em; | ||
| 198 | |||
| 199 | &::after { | ||
| 200 | border-radius: 100em; | ||
| 201 | } | ||
| 202 | } | ||
| 203 | |||
| 204 | @include bem.modifier('icon') { | ||
| 205 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); | ||
| 206 | padding-inline: 0; | ||
| 207 | } | ||
| 208 | |||
| 209 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
| 210 | @include bem.modifier($mod) { | ||
| 211 | padding-block: props.get($pad-b); | ||
| 212 | padding-inline: props.get($pad-i); | ||
| 213 | font-size: props.get($font-size); | ||
| 214 | |||
| 215 | @include bem.elem('label') { | ||
| 216 | margin-inline: props.get($pad-i-label); | ||
| 217 | } | ||
| 218 | |||
| 219 | @include bem.modifier('pill') { | ||
| 220 | padding-inline: props.get($pad-i-pill); | ||
| 221 | } | ||
| 222 | |||
| 223 | @include bem.modifier('icon') { | ||
| 224 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); | ||
| 225 | padding-inline: 0; | ||
| 226 | } | ||
| 227 | } | ||
| 228 | } | ||
| 229 | |||
| 230 | @include bem.modifier('align-block') { | ||
| 231 | margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); | ||
| 232 | |||
| 233 | @include bem.modifier('pill') { | ||
| 234 | margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); | ||
| 235 | } | ||
| 236 | |||
| 237 | @include bem.modifier('icon') { | ||
| 238 | margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
| 239 | } | ||
| 240 | |||
| 241 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
| 242 | @include bem.modifier($mod) { | ||
| 243 | margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); | ||
| 244 | |||
| 245 | @include bem.modifier('pill') { | ||
| 246 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); | ||
| 247 | } | ||
| 248 | |||
| 249 | @include bem.modifier('icon') { | ||
| 250 | margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
| 251 | } | ||
| 252 | } | ||
| 253 | } | ||
| 254 | } | ||
| 255 | } | ||
| 256 | } | ||
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss deleted file mode 100644 index 6693b61..0000000 --- a/src/objects/_action-button.vars.scss +++ /dev/null | |||
| @@ -1,359 +0,0 @@ | |||
| 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 | $border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; | ||
| 8 | $rounding: props.def(--o-action-button--rounding, props.get(core.$rounding--sm)) !default; | ||
| 9 | |||
| 10 | $pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default; | ||
| 11 | $pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
| 12 | $pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--115)) !default; | ||
| 13 | $pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; | ||
| 14 | $font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; | ||
| 15 | |||
| 16 | $pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--115)) !default; | ||
| 17 | $pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--40)) !default; | ||
| 18 | $pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default; | ||
| 19 | $pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; | ||
| 20 | $font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; | ||
| 21 | |||
| 22 | $pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--160)) !default; | ||
| 23 | $pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--65)) !default; | ||
| 24 | $pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default; | ||
| 25 | $pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; | ||
| 26 | $font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; | ||
| 27 | |||
| 28 | $pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--200)) !default; | ||
| 29 | $pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--85)) !default; | ||
| 30 | $pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default; | ||
| 31 | $pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; | ||
| 32 | $font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; | ||
| 33 | |||
| 34 | $shadow-x: props.def(--o-action-button--shadow-x, props.get(core.$shadow--l1--x)) !default; | ||
| 35 | $shadow-y: props.def(--o-action-button--shadow-y, props.get(core.$shadow--l1--y)) !default; | ||
| 36 | $shadow-blur: props.def(--o-action-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default; | ||
| 37 | $shadow-grow: props.def(--o-action-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default; | ||
| 38 | |||
| 39 | $key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
| 40 | $key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
| 41 | $key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
| 42 | |||
| 43 | $fixed-sizes: ( | ||
| 44 | 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, | ||
| 45 | 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, | ||
| 46 | 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, | ||
| 47 | ) !default; | ||
| 48 | |||
| 49 | $themes: props.def(--o-action-button, (), 'color'); | ||
| 50 | |||
| 51 | $default-theme-override: () !default; | ||
| 52 | $default-theme: map.deep-merge(( | ||
| 53 | --bg-color: props.get(core.$theme, --bg-l2), | ||
| 54 | --label-color: props.get(core.$theme, --text), | ||
| 55 | --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), | ||
| 56 | --shadow-color: props.get(core.$theme, --shadow), | ||
| 57 | |||
| 58 | --hover: ( | ||
| 59 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 60 | --label-color: props.get(core.$theme, --heading), | ||
| 61 | --border-color: props.get(core.$theme, --border-strong), | ||
| 62 | ), | ||
| 63 | |||
| 64 | --active: ( | ||
| 65 | --bg-color: props.get(core.$theme, --border), | ||
| 66 | --label-color: props.get(core.$theme, --heading), | ||
| 67 | --border-color: props.get(core.$theme, --text-mute-more), | ||
| 68 | ), | ||
| 69 | |||
| 70 | --disabled: ( | ||
| 71 | --bg-color: transparent, | ||
| 72 | --label-color: props.get(core.$theme, --border-strong), | ||
| 73 | --border-color: props.get(core.$theme, --border), | ||
| 74 | ), | ||
| 75 | |||
| 76 | --key-focus: ( | ||
| 77 | --border-color: props.get(core.$theme, --focus, --border), | ||
| 78 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
| 79 | ), | ||
| 80 | |||
| 81 | --selected: ( | ||
| 82 | --bg-color: props.get(core.$theme, --text), | ||
| 83 | --label-color: props.get(core.$theme, --base, --50), | ||
| 84 | --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), | ||
| 85 | |||
| 86 | --hover: ( | ||
| 87 | --bg-color: props.get(core.$theme, --heading), | ||
| 88 | --label-color: props.get(core.$theme, --base, --50), | ||
| 89 | --border-color: props.get(core.$theme, --heading), | ||
| 90 | ), | ||
| 91 | |||
| 92 | --active: ( | ||
| 93 | --bg-color: props.get(core.$theme, --heading), | ||
| 94 | --label-color: props.get(core.$theme, --base, --50), | ||
| 95 | --border-color: props.get(core.$theme, --heading), | ||
| 96 | ), | ||
| 97 | |||
| 98 | --disabled: ( | ||
| 99 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 100 | --label-color: props.get(core.$theme, --border-strong), | ||
| 101 | --border-color: props.get(core.$theme, --border-mute), | ||
| 102 | ), | ||
| 103 | ), | ||
| 104 | |||
| 105 | --static: ( | ||
| 106 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 107 | --label-color: props.get(core.$theme, --heading), | ||
| 108 | --border-color: props.get(core.$theme, --border-mute), | ||
| 109 | |||
| 110 | --hover: ( | ||
| 111 | --bg-color: props.get(core.$theme, --border), | ||
| 112 | --label-color: props.get(core.$theme, --heading), | ||
| 113 | --border-color: props.get(core.$theme, --border), | ||
| 114 | ), | ||
| 115 | |||
| 116 | --active: ( | ||
| 117 | --bg-color: props.get(core.$theme, --border-strong), | ||
| 118 | --label-color: props.get(core.$theme, --heading), | ||
| 119 | --border-color: props.get(core.$theme, --border-strong), | ||
| 120 | ), | ||
| 121 | ), | ||
| 122 | |||
| 123 | --quiet: ( | ||
| 124 | --label-color: props.get(core.$theme, --text), | ||
| 125 | |||
| 126 | --hover: ( | ||
| 127 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 128 | --label-color: props.get(core.$theme, --heading), | ||
| 129 | ), | ||
| 130 | |||
| 131 | --active: ( | ||
| 132 | --bg-color: props.get(core.$theme, --border), | ||
| 133 | --label-color: props.get(core.$theme, --heading), | ||
| 134 | ), | ||
| 135 | |||
| 136 | --disabled: ( | ||
| 137 | --label-color: props.get(core.$theme, --border-strong), | ||
| 138 | ), | ||
| 139 | ), | ||
| 140 | ), $default-theme-override) !default; | ||
| 141 | $default-theme: props.def(--o-action-button, $default-theme, 'color'); | ||
| 142 | |||
| 143 | $default-theme-dark-override: () !default; | ||
| 144 | $default-theme-dark: map.deep-merge(( | ||
| 145 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 146 | --border-color: props.get(core.$theme, --border-mute), | ||
| 147 | |||
| 148 | --hover: ( | ||
| 149 | --bg-color: props.get(core.$theme, --border), | ||
| 150 | --border-color: props.get(core.$theme, --border), | ||
| 151 | ), | ||
| 152 | |||
| 153 | --active: ( | ||
| 154 | --bg-color: props.get(core.$theme, --border-strong), | ||
| 155 | --border-color: props.get(core.$theme, --border-strong), | ||
| 156 | ), | ||
| 157 | |||
| 158 | --selected: ( | ||
| 159 | --border-color: props.get(core.$theme, --text), | ||
| 160 | ), | ||
| 161 | ), $default-theme-override) !default; | ||
| 162 | $default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark'); | ||
| 163 | |||
| 164 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
| 165 | $button-theme: --static-#{string.slice($theme, 3)}; | ||
| 166 | |||
| 167 | $themes: props.merge($themes, ( | ||
| 168 | $button-theme: ( | ||
| 169 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 170 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 171 | --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), | ||
| 172 | --shadow-color: props.get(core.$transparent-colors, --black, --200), | ||
| 173 | |||
| 174 | --hover: ( | ||
| 175 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 176 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 177 | --border-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 178 | ), | ||
| 179 | |||
| 180 | --active: ( | ||
| 181 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 182 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 183 | --border-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 184 | ), | ||
| 185 | |||
| 186 | --disabled: ( | ||
| 187 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 188 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 189 | --border-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 190 | ), | ||
| 191 | |||
| 192 | --key-focus: ( | ||
| 193 | --border-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 194 | --outline-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 195 | ), | ||
| 196 | |||
| 197 | --selected: ( | ||
| 198 | --bg-color: props.get(core.$transparent-colors, $theme, --800), | ||
| 199 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 200 | --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), | ||
| 201 | |||
| 202 | --hover: ( | ||
| 203 | --bg-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 204 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 205 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 206 | ), | ||
| 207 | |||
| 208 | --active: ( | ||
| 209 | --bg-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 210 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
| 211 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 212 | ), | ||
| 213 | |||
| 214 | --disabled: ( | ||
| 215 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 216 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 217 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 218 | ), | ||
| 219 | ), | ||
| 220 | |||
| 221 | --static: ( | ||
| 222 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 223 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 224 | --border-color: transparent, | ||
| 225 | |||
| 226 | --hover: ( | ||
| 227 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 228 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 229 | --border-color: transparent, | ||
| 230 | ), | ||
| 231 | |||
| 232 | --active: ( | ||
| 233 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 234 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 235 | --border-color: transparent, | ||
| 236 | ), | ||
| 237 | ), | ||
| 238 | |||
| 239 | --quiet: ( | ||
| 240 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 241 | |||
| 242 | --hover: ( | ||
| 243 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 244 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 245 | ), | ||
| 246 | |||
| 247 | --active: ( | ||
| 248 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 249 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 250 | ), | ||
| 251 | |||
| 252 | --disabled: ( | ||
| 253 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 254 | ), | ||
| 255 | ), | ||
| 256 | ) | ||
| 257 | )); | ||
| 258 | } | ||
| 259 | |||
| 260 | $themes-config: ( | ||
| 261 | accent: --accent, | ||
| 262 | positive: --positive, | ||
| 263 | negative: --negative, | ||
| 264 | warning: --warning, | ||
| 265 | ) !default; | ||
| 266 | |||
| 267 | @each $theme, $key in $themes-config { | ||
| 268 | $themes: props.merge($themes, ( | ||
| 269 | --#{$theme}: ( | ||
| 270 | --bg-color: props.get(core.$theme, $key, --200), | ||
| 271 | --label-color: props.get(core.$theme, $key, --1100), | ||
| 272 | --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), | ||
| 273 | --shadow-color: props.get(core.$theme, $key, --200), | ||
| 274 | |||
| 275 | --hover: ( | ||
| 276 | --bg-color: props.get(core.$theme, $key, --300), | ||
| 277 | --label-color: props.get(core.$theme, $key, --1200), | ||
| 278 | --border-color: props.get(core.$theme, $key, --600), | ||
| 279 | ), | ||
| 280 | |||
| 281 | --active: ( | ||
| 282 | --bg-color: props.get(core.$theme, $key, --400), | ||
| 283 | --label-color: props.get(core.$theme, $key, --1300), | ||
| 284 | --border-color: props.get(core.$theme, $key, --800), | ||
| 285 | ), | ||
| 286 | |||
| 287 | --disabled: ( | ||
| 288 | --bg-color: props.get(core.$theme, --bg-l1), | ||
| 289 | --label-color: props.get(core.$theme, --border-strong), | ||
| 290 | --border-color: props.get(core.$theme, --border), | ||
| 291 | ), | ||
| 292 | |||
| 293 | --key-focus: ( | ||
| 294 | --border-color: props.get(core.$theme, --focus, --border), | ||
| 295 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
| 296 | ), | ||
| 297 | |||
| 298 | --selected: ( | ||
| 299 | --bg-color: props.get(core.$theme, #{$key}-static, --900), | ||
| 300 | --label-color: props.get(core.$theme, #{$key}-static, --900-text), | ||
| 301 | --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), | ||
| 302 | |||
| 303 | --hover: ( | ||
| 304 | --bg-color: props.get(core.$theme, #{$key}-static, --1000), | ||
| 305 | --label-color: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 306 | --border-color: props.get(core.$theme, #{$key}-static, --1000), | ||
| 307 | ), | ||
| 308 | |||
| 309 | --active: ( | ||
| 310 | --bg-color: props.get(core.$theme, #{$key}-static, --1100), | ||
| 311 | --label-color: props.get(core.$theme, #{$key}-static, --1100-text), | ||
| 312 | --border-color: props.get(core.$theme, #{$key}-static, --1100), | ||
| 313 | ), | ||
| 314 | |||
| 315 | --disabled: ( | ||
| 316 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 317 | --label-color: props.get(core.$theme, --border-strong), | ||
| 318 | --border-color: props.get(core.$theme, --border-mute), | ||
| 319 | ), | ||
| 320 | ), | ||
| 321 | |||
| 322 | --static: ( | ||
| 323 | --bg-color: props.get(core.$theme, $key, --100), | ||
| 324 | --label-color: props.get(core.$theme, $key, --1100), | ||
| 325 | --border-color: props.get(core.$theme, $key, --300), | ||
| 326 | |||
| 327 | --hover: ( | ||
| 328 | --bg-color: props.get(core.$theme, $key, --200), | ||
| 329 | --label-color: props.get(core.$theme, $key, --1200), | ||
| 330 | --border-color: props.get(core.$theme, $key, --400), | ||
| 331 | ), | ||
| 332 | |||
| 333 | --active: ( | ||
| 334 | --bg-color: props.get(core.$theme, $key, --300), | ||
| 335 | --label-color: props.get(core.$theme, $key, --1300), | ||
| 336 | --border-color: props.get(core.$theme, $key, --500), | ||
| 337 | ), | ||
| 338 | ), | ||
| 339 | |||
| 340 | --quiet: ( | ||
| 341 | --label-color: props.get(core.$theme, $key, --1100), | ||
| 342 | |||
| 343 | --hover: ( | ||
| 344 | --bg-color: props.get(core.$theme, $key, --200), | ||
| 345 | --label-color: props.get(core.$theme, $key, --1200), | ||
| 346 | ), | ||
| 347 | |||
| 348 | --active: ( | ||
| 349 | --bg-color: props.get(core.$theme, $key, --300), | ||
| 350 | --label-color: props.get(core.$theme, $key, --1300), | ||
| 351 | ), | ||
| 352 | |||
| 353 | --disabled: ( | ||
| 354 | --label-color: props.get(core.$theme, --border-strong), | ||
| 355 | ), | ||
| 356 | ), | ||
| 357 | ) | ||
| 358 | )); | ||
| 359 | } | ||
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss deleted file mode 100644 index 9f3e307..0000000 --- a/src/objects/_badge.scss +++ /dev/null | |||
| @@ -1,144 +0,0 @@ | |||
| 1 | @use 'sass:list'; | ||
| 2 | @use 'sass:map'; | ||
| 3 | @use 'sass:meta'; | ||
| 4 | @use 'sass:string'; | ||
| 5 | @use 'iro-sass/src/bem'; | ||
| 6 | @use 'iro-sass/src/props'; | ||
| 7 | @use '../props' as *; | ||
| 8 | @use '../core.vars' as core; | ||
| 9 | |||
| 10 | @forward 'badge.vars'; | ||
| 11 | @use 'badge.vars' as vars; | ||
| 12 | |||
| 13 | @mixin -apply-theme($theme, $key: (), $static: false) { | ||
| 14 | color: props.get($theme, list.join($key, --label)...); | ||
| 15 | background-color: props.get($theme, list.join($key, --bg)...); | ||
| 16 | |||
| 17 | &:link, | ||
| 18 | &:visited, | ||
| 19 | &:enabled { | ||
| 20 | &:hover, | ||
| 21 | &:focus-visible { | ||
| 22 | color: props.get($theme, list.join($key, --hover --label)...); | ||
| 23 | background-color: props.get($theme, list.join($key, --hover --bg)...); | ||
| 24 | } | ||
| 25 | |||
| 26 | &:active { | ||
| 27 | color: props.get($theme, list.join($key, --active --label)...); | ||
| 28 | background-color: props.get($theme, list.join($key, --active --bg)...); | ||
| 29 | } | ||
| 30 | } | ||
| 31 | |||
| 32 | @include bem.modifier('quiet') { | ||
| 33 | color: props.get($theme, list.join($key, --quiet --label)...); | ||
| 34 | background-color: props.get($theme, list.join($key, --quiet --bg)...); | ||
| 35 | |||
| 36 | &:link, | ||
| 37 | &:visited, | ||
| 38 | &:enabled { | ||
| 39 | &:hover, | ||
| 40 | &:focus-visible { | ||
| 41 | color: props.get($theme, list.join($key, --quiet --hover --label)...); | ||
| 42 | background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); | ||
| 43 | } | ||
| 44 | |||
| 45 | &:active { | ||
| 46 | color: props.get($theme, list.join($key, --quiet --active --label)...); | ||
| 47 | background-color: props.get($theme, list.join($key, --quiet --active --bg)...); | ||
| 48 | } | ||
| 49 | } | ||
| 50 | } | ||
| 51 | |||
| 52 | @if $static { | ||
| 53 | &::after { | ||
| 54 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); | ||
| 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)...); | ||
| 61 | } | ||
| 62 | } | ||
| 63 | } | ||
| 64 | |||
| 65 | @mixin styles { | ||
| 66 | @include materialize-at-root(meta.module-variables('vars')); | ||
| 67 | |||
| 68 | @include bem.object('badge') { | ||
| 69 | position: relative; | ||
| 70 | display: inline-block; | ||
| 71 | padding-block: props.get(vars.$pad-b); | ||
| 72 | padding-inline: props.get(vars.$pad-i); | ||
| 73 | font-size: props.get(vars.$font-size); | ||
| 74 | line-height: props.get(core.$font--standard--line-height); | ||
| 75 | text-align: center; | ||
| 76 | text-decoration: none; | ||
| 77 | background-clip: padding-box; | ||
| 78 | border-radius: props.get(vars.$rounding); | ||
| 79 | |||
| 80 | &::after { | ||
| 81 | position: absolute; | ||
| 82 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
| 83 | z-index: 1; | ||
| 84 | display: 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); | ||
| 89 | } | ||
| 90 | |||
| 91 | &:link, | ||
| 92 | &:visited, | ||
| 93 | &:enabled { | ||
| 94 | &:focus-visible { | ||
| 95 | &::after { | ||
| 96 | display: block; | ||
| 97 | } | ||
| 98 | } | ||
| 99 | } | ||
| 100 | |||
| 101 | @include bem.elem('label') { | ||
| 102 | margin-inline: props.get(vars.$pad-i-label); | ||
| 103 | } | ||
| 104 | |||
| 105 | @include -apply-theme(vars.$default-theme, $static: true); | ||
| 106 | |||
| 107 | @each $theme in map.keys(props.get(vars.$themes)) { | ||
| 108 | @include bem.modifier(string.slice($theme, 3)) { | ||
| 109 | @include -apply-theme(vars.$themes, $theme); | ||
| 110 | } | ||
| 111 | } | ||
| 112 | |||
| 113 | @each $theme in map.keys(props.get(vars.$static-themes)) { | ||
| 114 | @include bem.modifier(string.slice($theme, 3)) { | ||
| 115 | @include -apply-theme(vars.$static-themes, $theme, true); | ||
| 116 | } | ||
| 117 | } | ||
| 118 | |||
| 119 | @include bem.modifier('pill') { | ||
| 120 | padding-inline: props.get(vars.$pad-i-pill); | ||
| 121 | border-radius: 10em; | ||
| 122 | |||
| 123 | &::after { | ||
| 124 | border-radius: 10em; | ||
| 125 | } | ||
| 126 | } | ||
| 127 | |||
| 128 | @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { | ||
| 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); | ||
| 136 | } | ||
| 137 | |||
| 138 | @include bem.modifier('pill') { | ||
| 139 | padding-inline: props.get($pad-i-pill); | ||
| 140 | } | ||
| 141 | } | ||
| 142 | } | ||
| 143 | } | ||
| 144 | } | ||
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss deleted file mode 100644 index ff07148..0000000 --- a/src/objects/_badge.vars.scss +++ /dev/null | |||
| @@ -1,161 +0,0 @@ | |||
| 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 aaf55b5..0467f24 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
| @@ -5,72 +5,141 @@ | |||
| 5 | @use 'iro-sass/src/bem'; | 5 | @use 'iro-sass/src/bem'; |
| 6 | @use 'iro-sass/src/props'; | 6 | @use 'iro-sass/src/props'; |
| 7 | @use '../props' as *; | 7 | @use '../props' as *; |
| 8 | @use '../core.vars' as core; | ||
| 9 | 8 | ||
| 10 | @forward 'button.vars'; | 9 | @forward 'button.vars'; |
| 11 | @use 'button.vars' as vars; | 10 | @use 'button.vars' as vars; |
| 12 | 11 | ||
| 13 | @mixin -apply-theme($theme, $key: ()) { | 12 | @mixin -apply-theme($theme, $key: ()) { |
| 14 | &:link, | 13 | color: props.get($theme, list.join($key, --disabled --label-color)...); |
| 15 | &:visited, | 14 | background-color: props.get($theme, list.join($key, --disabled --bg-color)...); |
| 16 | &:enabled { | 15 | border-color: props.get($theme, list.join($key, --disabled --border-color)...); |
| 17 | color: props.get($theme, list.join($key, --label)...); | 16 | |
| 18 | background-color: props.get($theme, list.join($key, --bg)...); | 17 | &::after { |
| 19 | border-color: transparent; | 18 | outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); |
| 20 | } | 19 | box-shadow: |
| 21 | 20 | 0 | |
| 22 | @include bem.modifier('outline') { | 21 | 0 |
| 23 | &:link, | 22 | 0 |
| 24 | &:visited, | 23 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
| 25 | &:enabled { | 24 | props.get($theme, list.join($key, --key-focus --outline-color)...); |
| 26 | color: props.get($theme, list.join($key, --outline-label)...); | ||
| 27 | background-color: transparent; | ||
| 28 | border-color: props.get($theme, list.join($key, --outline-border)...); | ||
| 29 | } | ||
| 30 | } | 25 | } |
| 31 | 26 | ||
| 32 | &:link, | 27 | &:link, |
| 33 | &:visited, | 28 | &:visited, |
| 34 | &:enabled { | 29 | &:enabled { |
| 30 | color: props.get($theme, list.join($key, --label-color)...); | ||
| 31 | background-color: props.get($theme, list.join($key, --bg-color)...); | ||
| 32 | border-color: props.get($theme, list.join($key, --border-color)...); | ||
| 33 | box-shadow: | ||
| 34 | props.get(vars.$shadow-x) | ||
| 35 | props.get(vars.$shadow-y) | ||
| 36 | props.get(vars.$shadow-blur) | ||
| 37 | props.get(vars.$shadow-grow) | ||
| 38 | props.get($theme, list.join($key, --shadow-color)...); | ||
| 39 | |||
| 35 | &:hover, | 40 | &:hover, |
| 36 | &:focus-visible { | 41 | &:focus-visible { |
| 37 | color: props.get($theme, list.join($key, --hover --label)...); | 42 | color: props.get($theme, list.join($key, --hover --label-color)...); |
| 38 | background-color: props.get($theme, list.join($key, --hover --bg)...); | 43 | background-color: props.get($theme, list.join($key, --hover --bg-color)...); |
| 39 | border-color: transparent; | 44 | border-color: props.get($theme, list.join($key, --hover --border-color)...); |
| 40 | } | 45 | } |
| 41 | 46 | ||
| 42 | &:active { | 47 | &:active { |
| 43 | color: props.get($theme, list.join($key, --active --label)...); | 48 | color: props.get($theme, list.join($key, --active --label-color)...); |
| 44 | background-color: props.get($theme, list.join($key, --active --bg)...); | 49 | background-color: props.get($theme, list.join($key, --active --bg-color)...); |
| 45 | border-color: transparent; | 50 | border-color: props.get($theme, list.join($key, --active --border-color)...); |
| 51 | box-shadow: none; | ||
| 46 | } | 52 | } |
| 47 | } | 53 | } |
| 48 | } | ||
| 49 | 54 | ||
| 50 | @mixin -apply-static-theme($theme, $key: ()) { | 55 | @include bem.modifier('static') { |
| 51 | color: props.get($theme, list.join($key, --disabled --label)...); | 56 | color: props.get($theme, list.join($key, --static --label-color)...); |
| 52 | background-color: props.get($theme, list.join($key, --disabled --bg)...); | 57 | background-color: props.get($theme, list.join($key, --static --bg-color)...); |
| 53 | border-color: transparent; | 58 | border-color: props.get($theme, list.join($key, --static --border-color)...); |
| 59 | box-shadow: none; | ||
| 54 | 60 | ||
| 55 | &::after { | 61 | &:link, |
| 56 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); | 62 | &:visited, |
| 57 | box-shadow: | 63 | &:enabled { |
| 58 | 0 | 64 | color: props.get($theme, list.join($key, --static --label-color)...); |
| 59 | 0 | 65 | background-color: props.get($theme, list.join($key, --static --bg-color)...); |
| 60 | 0 | 66 | border-color: props.get($theme, list.join($key, --static --border-color)...); |
| 61 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 67 | box-shadow: none; |
| 62 | props.get($theme, list.join($key, --key-focus --outline)...); | 68 | |
| 69 | &:hover, | ||
| 70 | &:focus-visible { | ||
| 71 | color: props.get($theme, list.join($key, --static --hover --label-color)...); | ||
| 72 | background-color: props.get($theme, list.join($key, --static --hover --bg-color)...); | ||
| 73 | border-color: props.get($theme, list.join($key, --static --hover --border-color)...); | ||
| 74 | } | ||
| 75 | |||
| 76 | &:active { | ||
| 77 | color: props.get($theme, list.join($key, --static --active --label-color)...); | ||
| 78 | background-color: props.get($theme, list.join($key, --static --active --bg-color)...); | ||
| 79 | border-color: props.get($theme, list.join($key, --static --active --border-color)...); | ||
| 80 | } | ||
| 81 | } | ||
| 63 | } | 82 | } |
| 64 | 83 | ||
| 65 | @include bem.modifier('outline') { | 84 | @include bem.modifier('quiet') { |
| 85 | color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); | ||
| 66 | background-color: transparent; | 86 | background-color: transparent; |
| 67 | border-color: props.get($theme, list.join($key, --disabled --outline-border)...); | 87 | border-color: transparent; |
| 88 | |||
| 89 | &:link, | ||
| 90 | &:visited, | ||
| 91 | &:enabled { | ||
| 92 | color: props.get($theme, list.join($key, --quiet --label-color)...); | ||
| 93 | background-color: transparent; | ||
| 94 | border-color: transparent; | ||
| 95 | box-shadow: none; | ||
| 96 | |||
| 97 | &:hover, | ||
| 98 | &:focus-visible { | ||
| 99 | color: props.get($theme, list.join($key, --quiet --hover --label-color)...); | ||
| 100 | background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); | ||
| 101 | border-color: transparent; | ||
| 102 | } | ||
| 103 | |||
| 104 | &:active { | ||
| 105 | color: props.get($theme, list.join($key, --quiet --active --label-color)...); | ||
| 106 | background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); | ||
| 107 | border-color: transparent; | ||
| 108 | } | ||
| 109 | } | ||
| 68 | } | 110 | } |
| 69 | 111 | ||
| 70 | @include -apply-theme($theme, $key); | 112 | @include bem.is('selected') { |
| 113 | color: props.get($theme, list.join($key, --selected --disabled --label-color)...); | ||
| 114 | background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); | ||
| 115 | border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); | ||
| 71 | 116 | ||
| 72 | @include bem.modifier('primary') { | 117 | @include bem.modifier('static') { |
| 73 | @include -apply-theme($theme, list.join($key, --primary)); | 118 | color: props.get($theme, list.join($key, --selected --label-color)...); |
| 119 | background-color: props.get($theme, list.join($key, --selected --bg-color)...); | ||
| 120 | border-color: props.get($theme, list.join($key, --selected --border-color)...); | ||
| 121 | } | ||
| 122 | |||
| 123 | &:link, | ||
| 124 | &:visited, | ||
| 125 | &:enabled { | ||
| 126 | color: props.get($theme, list.join($key, --selected --label-color)...); | ||
| 127 | background-color: props.get($theme, list.join($key, --selected --bg-color)...); | ||
| 128 | border-color: props.get($theme, list.join($key, --selected --border-color)...); | ||
| 129 | |||
| 130 | &:hover, | ||
| 131 | &:focus-visible { | ||
| 132 | color: props.get($theme, list.join($key, --selected --hover --label-color)...); | ||
| 133 | background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); | ||
| 134 | border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); | ||
| 135 | } | ||
| 136 | |||
| 137 | &:active { | ||
| 138 | color: props.get($theme, list.join($key, --selected --active --label-color)...); | ||
| 139 | background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); | ||
| 140 | border-color: props.get($theme, list.join($key, --selected --active --border-color)...); | ||
| 141 | } | ||
| 142 | } | ||
| 74 | } | 143 | } |
| 75 | } | 144 | } |
| 76 | 145 | ||
| @@ -82,11 +151,11 @@ | |||
| 82 | display: inline-block; | 151 | display: inline-block; |
| 83 | padding-block: props.get(vars.$pad-b); | 152 | padding-block: props.get(vars.$pad-b); |
| 84 | padding-inline: props.get(vars.$pad-i); | 153 | padding-inline: props.get(vars.$pad-i); |
| 85 | font-size: props.get(vars.$font-size); | ||
| 86 | font-weight: 500; | ||
| 87 | line-height: props.get(vars.$line-height); | 154 | line-height: props.get(vars.$line-height); |
| 88 | text-align: center; | 155 | text-align: center; |
| 89 | text-decoration: none; | 156 | text-decoration: none; |
| 157 | text-overflow: ellipsis; | ||
| 158 | white-space: nowrap; | ||
| 90 | border: props.get(vars.$border-width) solid transparent; | 159 | border: props.get(vars.$border-width) solid transparent; |
| 91 | border-radius: props.get(vars.$rounding); | 160 | border-radius: props.get(vars.$rounding); |
| 92 | 161 | ||
| @@ -114,16 +183,30 @@ | |||
| 114 | @include bem.elem('label') { | 183 | @include bem.elem('label') { |
| 115 | margin-inline: props.get(vars.$pad-i-label); | 184 | margin-inline: props.get(vars.$pad-i-label); |
| 116 | } | 185 | } |
| 117 | 186 | ||
| 118 | @include bem.modifier('block') { | 187 | @include -apply-theme(vars.$default-theme); |
| 119 | display: block; | 188 | |
| 189 | @each $theme in map.keys(props.get(vars.$themes)) { | ||
| 190 | @include bem.modifier(string.slice($theme, 3)) { | ||
| 191 | @include -apply-theme(vars.$themes, $theme); | ||
| 192 | } | ||
| 120 | } | 193 | } |
| 121 | 194 | ||
| 122 | @include bem.modifier('outline') { | 195 | @include bem.modifier('pill') { |
| 123 | background-color: transparent; | 196 | padding-inline: props.get(vars.$pad-i-pill); |
| 197 | border-radius: 100em; | ||
| 198 | |||
| 199 | &::after { | ||
| 200 | border-radius: 100em; | ||
| 201 | } | ||
| 202 | } | ||
| 203 | |||
| 204 | @include bem.modifier('icon') { | ||
| 205 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); | ||
| 206 | padding-inline: 0; | ||
| 124 | } | 207 | } |
| 125 | 208 | ||
| 126 | @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { | 209 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { |
| 127 | @include bem.modifier($mod) { | 210 | @include bem.modifier($mod) { |
| 128 | padding-block: props.get($pad-b); | 211 | padding-block: props.get($pad-b); |
| 129 | padding-inline: props.get($pad-i); | 212 | padding-inline: props.get($pad-i); |
| @@ -132,27 +215,42 @@ | |||
| 132 | @include bem.elem('label') { | 215 | @include bem.elem('label') { |
| 133 | margin-inline: props.get($pad-i-label); | 216 | margin-inline: props.get($pad-i-label); |
| 134 | } | 217 | } |
| 218 | |||
| 219 | @include bem.modifier('pill') { | ||
| 220 | padding-inline: props.get($pad-i-pill); | ||
| 221 | } | ||
| 222 | |||
| 223 | @include bem.modifier('icon') { | ||
| 224 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); | ||
| 225 | padding-inline: 0; | ||
| 226 | } | ||
| 135 | } | 227 | } |
| 136 | } | 228 | } |
| 137 | 229 | ||
| 138 | @include -apply-static-theme(vars.$default-theme); | 230 | @include bem.modifier('align-block') { |
| 231 | margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); | ||
| 139 | 232 | ||
| 140 | @each $theme in map.keys(props.get(vars.$themes)) { | 233 | @include bem.modifier('pill') { |
| 141 | @include bem.modifier(string.slice($theme, 3)) { | 234 | margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); |
| 142 | @include -apply-theme(vars.$themes, $theme); | ||
| 143 | } | 235 | } |
| 144 | } | ||
| 145 | 236 | ||
| 146 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 237 | @include bem.modifier('icon') { |
| 147 | @include bem.modifier(string.slice($theme, 3)) { | 238 | margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); |
| 148 | @include -apply-static-theme(vars.$static-themes, $theme); | ||
| 149 | } | 239 | } |
| 150 | } | 240 | |
| 241 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
| 242 | @include bem.modifier($mod) { | ||
| 243 | margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); | ||
| 151 | 244 | ||
| 152 | @include bem.modifier('round') { | 245 | @include bem.modifier('pill') { |
| 153 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); | 246 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); |
| 154 | padding-inline: 0; | 247 | } |
| 155 | border-radius: 100em; | 248 | |
| 249 | @include bem.modifier('icon') { | ||
| 250 | margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
| 251 | } | ||
| 252 | } | ||
| 253 | } | ||
| 156 | } | 254 | } |
| 157 | } | 255 | } |
| 158 | } | 256 | } |
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 4f7b552..1ab7e5a 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss | |||
| @@ -4,164 +4,355 @@ | |||
| 4 | @use '../core.vars' as core; | 4 | @use '../core.vars' as core; |
| 5 | 5 | ||
| 6 | $line-height: props.def(--o-button--line-height, 1.4) !default; | 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; | 7 | $border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default; |
| 8 | $pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; | 8 | $rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !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 | 9 | ||
| 14 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; | 10 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default; |
| 15 | $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; | 11 | $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; | 12 | $pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default; |
| 13 | $pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default; | ||
| 17 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; | 14 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; |
| 18 | 15 | ||
| 19 | $pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; | 16 | $pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default; |
| 20 | $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; | 17 | $pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default; |
| 21 | $pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; | 18 | $pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !default; |
| 19 | $pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default; | ||
| 20 | $font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; | ||
| 21 | |||
| 22 | $pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default; | ||
| 23 | $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default; | ||
| 24 | $pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default; | ||
| 25 | $pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default; | ||
| 22 | $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; | 26 | $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; |
| 23 | 27 | ||
| 24 | $pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; | 28 | $pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default; |
| 25 | $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; | 29 | $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default; |
| 30 | $pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default; | ||
| 26 | $pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; | 31 | $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; | 32 | $font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; |
| 28 | 33 | ||
| 34 | $shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default; | ||
| 35 | $shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default; | ||
| 36 | $shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default; | ||
| 37 | $shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default; | ||
| 38 | |||
| 29 | $key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 39 | $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; | 40 | $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; | 41 | $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; |
| 32 | 42 | ||
| 33 | $sizes: ( | 43 | $fixed-sizes: ( |
| 34 | 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, | 44 | 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, |
| 35 | 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, | 45 | 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, |
| 36 | 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, | 46 | 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, |
| 37 | ) !default; | 47 | ) !default; |
| 38 | 48 | ||
| 49 | $themes: props.def(--o-button, (), 'color'); | ||
| 50 | |||
| 39 | $default-theme-override: () !default; | 51 | $default-theme-override: () !default; |
| 40 | $default-theme: props.def(--o-button, ( | 52 | $default-theme: map.deep-merge(( |
| 41 | --bg: props.get(core.$theme, --border-mute), | 53 | --bg-color: props.get(core.$theme, --bg-l2), |
| 42 | --label: props.get(core.$theme, --text), | 54 | --label-color: props.get(core.$theme, --text), |
| 43 | --outline-border: props.get(core.$theme, --border), | 55 | --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), |
| 44 | --outline-label: props.get(core.$theme, --text), | 56 | --shadow-color: props.get(core.$theme, --shadow), |
| 45 | 57 | ||
| 46 | --hover: ( | 58 | --hover: ( |
| 47 | --bg: props.get(core.$theme, --border), | 59 | --bg-color: props.get(core.$theme, --border-mute), |
| 48 | --label: props.get(core.$theme, --heading), | 60 | --label-color: props.get(core.$theme, --heading), |
| 61 | --border-color: props.get(core.$theme, --border-strong), | ||
| 49 | ), | 62 | ), |
| 50 | 63 | ||
| 51 | --active: ( | 64 | --active: ( |
| 52 | --bg: props.get(core.$theme, --border-strong), | 65 | --bg-color: props.get(core.$theme, --border), |
| 53 | --label: props.get(core.$theme, --heading), | 66 | --label-color: props.get(core.$theme, --heading), |
| 67 | --border-color: props.get(core.$theme, --text-mute-more), | ||
| 54 | ), | 68 | ), |
| 55 | 69 | ||
| 56 | --disabled: ( | 70 | --disabled: ( |
| 57 | --bg: props.get(core.$theme, --border-mute), | 71 | --bg-color: transparent, |
| 58 | --outline-border: props.get(core.$theme, --border), | 72 | --label-color: props.get(core.$theme, --border-strong), |
| 59 | --label: props.get(core.$theme, --text-disabled), | 73 | --border-color: props.get(core.$theme, --border), |
| 60 | ), | 74 | ), |
| 61 | 75 | ||
| 62 | --key-focus: ( | 76 | --key-focus: ( |
| 63 | --label: props.get(core.$theme, --focus, --text), | 77 | --border-color: props.get(core.$theme, --focus, --border), |
| 64 | --border: props.get(core.$theme, --focus, --border), | 78 | --outline-color: props.get(core.$theme, --focus, --outline), |
| 65 | --outline: props.get(core.$theme, --focus, --outline), | 79 | ), |
| 80 | |||
| 81 | --selected: ( | ||
| 82 | --bg-color: props.get(core.$theme, --text), | ||
| 83 | --label-color: props.get(core.$theme, --base, --50), | ||
| 84 | --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), | ||
| 85 | |||
| 86 | --hover: ( | ||
| 87 | --bg-color: props.get(core.$theme, --heading), | ||
| 88 | --label-color: props.get(core.$theme, --base, --50), | ||
| 89 | --border-color: props.get(core.$theme, --heading), | ||
| 90 | ), | ||
| 91 | |||
| 92 | --active: ( | ||
| 93 | --bg-color: props.get(core.$theme, --heading), | ||
| 94 | --label-color: props.get(core.$theme, --base, --50), | ||
| 95 | --border-color: props.get(core.$theme, --heading), | ||
| 96 | ), | ||
| 97 | |||
| 98 | --disabled: ( | ||
| 99 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 100 | --label-color: props.get(core.$theme, --border-strong), | ||
| 101 | --border-color: props.get(core.$theme, --border-mute), | ||
| 102 | ), | ||
| 103 | ), | ||
| 104 | |||
| 105 | --static: ( | ||
| 106 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 107 | --label-color: props.get(core.$theme, --heading), | ||
| 108 | --border-color: props.get(core.$theme, --border-mute), | ||
| 109 | |||
| 110 | --hover: ( | ||
| 111 | --bg-color: props.get(core.$theme, --border), | ||
| 112 | --label-color: props.get(core.$theme, --heading), | ||
| 113 | --border-color: props.get(core.$theme, --border), | ||
| 114 | ), | ||
| 115 | |||
| 116 | --active: ( | ||
| 117 | --bg-color: props.get(core.$theme, --border-strong), | ||
| 118 | --label-color: props.get(core.$theme, --heading), | ||
| 119 | --border-color: props.get(core.$theme, --border-strong), | ||
| 120 | ), | ||
| 66 | ), | 121 | ), |
| 67 | 122 | ||
| 68 | --primary: ( | 123 | --quiet: ( |
| 69 | --bg: props.get(core.$theme, --base, --900), | 124 | --label-color: props.get(core.$theme, --text), |
| 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 | 125 | ||
| 74 | --hover: ( | 126 | --hover: ( |
| 75 | --bg: props.get(core.$theme, --base, --800), | 127 | --bg-color: props.get(core.$theme, --border-mute), |
| 76 | --label: props.get(core.$theme, --base, --800-text), | 128 | --label-color: props.get(core.$theme, --heading), |
| 77 | ), | 129 | ), |
| 78 | 130 | ||
| 79 | --active: ( | 131 | --active: ( |
| 80 | --bg: props.get(core.$theme, --base, --700), | 132 | --bg-color: props.get(core.$theme, --border), |
| 81 | --label: props.get(core.$theme, --base, --700-text), | 133 | --label-color: props.get(core.$theme, --heading), |
| 134 | ), | ||
| 135 | |||
| 136 | --disabled: ( | ||
| 137 | --label-color: props.get(core.$theme, --border-strong), | ||
| 82 | ), | 138 | ), |
| 83 | ), | 139 | ), |
| 84 | ), 'color') !default; | 140 | ), $default-theme-override) !default; |
| 85 | $default-theme: props.merge($default-theme, $default-theme-override); | 141 | $default-theme: props.def(--o-button, $default-theme, 'color'); |
| 142 | |||
| 143 | $default-theme-dark-override: () !default; | ||
| 144 | $default-theme-dark: map.deep-merge(( | ||
| 145 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 146 | --border-color: props.get(core.$theme, --border-mute), | ||
| 86 | 147 | ||
| 87 | $static-themes: props.def(--o-button, (), 'color'); | 148 | --hover: ( |
| 149 | --bg-color: props.get(core.$theme, --border), | ||
| 150 | --border-color: props.get(core.$theme, --border), | ||
| 151 | ), | ||
| 152 | |||
| 153 | --active: ( | ||
| 154 | --bg-color: props.get(core.$theme, --border-strong), | ||
| 155 | --border-color: props.get(core.$theme, --border-strong), | ||
| 156 | ), | ||
| 157 | |||
| 158 | --selected: ( | ||
| 159 | --border-color: props.get(core.$theme, --text), | ||
| 160 | ), | ||
| 161 | ), $default-theme-override) !default; | ||
| 162 | $default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); | ||
| 88 | 163 | ||
| 89 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | 164 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
| 90 | $button-theme: --static-#{string.slice($theme, 3)}; | 165 | $button-theme: --static-#{string.slice($theme, 3)}; |
| 91 | 166 | ||
| 92 | $static-themes: props.merge($static-themes, ( | 167 | $themes: props.merge($themes, ( |
| 93 | $button-theme: ( | 168 | $button-theme: ( |
| 94 | --bg: props.get(core.$transparent-colors, $theme, --200), | 169 | --bg-color: props.get(core.$transparent-colors, $theme, --200), |
| 95 | --label: props.get(core.$transparent-colors, $theme, --900), | 170 | --label-color: props.get(core.$transparent-colors, $theme, --900), |
| 96 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | 171 | --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), |
| 97 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | 172 | --shadow-color: props.get(core.$transparent-colors, --black, --200), |
| 98 | 173 | ||
| 99 | --hover: ( | 174 | --hover: ( |
| 100 | --bg: props.get(core.$transparent-colors, $theme, --300), | 175 | --bg-color: props.get(core.$transparent-colors, $theme, --300), |
| 101 | --label: props.get(core.$transparent-colors, $theme, --900), | 176 | --label-color: props.get(core.$transparent-colors, $theme, --900), |
| 177 | --border-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 102 | ), | 178 | ), |
| 103 | 179 | ||
| 104 | --active: ( | 180 | --active: ( |
| 105 | --bg: props.get(core.$transparent-colors, $theme, --400), | 181 | --bg-color: props.get(core.$transparent-colors, $theme, --400), |
| 106 | --label: props.get(core.$transparent-colors, $theme, --900), | 182 | --label-color: props.get(core.$transparent-colors, $theme, --900), |
| 183 | --border-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 107 | ), | 184 | ), |
| 108 | 185 | ||
| 109 | --disabled: ( | 186 | --disabled: ( |
| 110 | --bg: props.get(core.$transparent-colors, $theme, --200), | 187 | --bg-color: props.get(core.$transparent-colors, $theme, --100), |
| 111 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | 188 | --label-color: props.get(core.$transparent-colors, $theme, --500), |
| 112 | --label: props.get(core.$transparent-colors, $theme, --500), | 189 | --border-color: props.get(core.$transparent-colors, $theme, --300), |
| 113 | ), | 190 | ), |
| 114 | 191 | ||
| 115 | --key-focus: ( | 192 | --key-focus: ( |
| 116 | --bg: props.get(core.$transparent-colors, $theme, --100), | 193 | --border-color: props.get(core.$transparent-colors, $theme, --900), |
| 117 | --label: props.get(core.$transparent-colors, $theme, --900), | 194 | --outline-color: props.get(core.$transparent-colors, $theme, --300), |
| 118 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
| 119 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
| 120 | ), | 195 | ), |
| 121 | 196 | ||
| 122 | --primary: ( | 197 | --selected: ( |
| 123 | --bg: props.get(core.$transparent-colors, $theme, --800), | 198 | --bg-color: props.get(core.$transparent-colors, $theme, --800), |
| 124 | --label: props.get(core.$transparent-colors, $theme, --text), | 199 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
| 125 | --outline-border: props.get(core.$transparent-colors, $theme, --800), | 200 | --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), |
| 126 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | 201 | |
| 127 | |||
| 128 | --hover: ( | 202 | --hover: ( |
| 129 | --bg: props.get(core.$transparent-colors, $theme, --900), | 203 | --bg-color: props.get(core.$transparent-colors, $theme, --900), |
| 130 | --label: props.get(core.$transparent-colors, $theme, --text), | 204 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
| 205 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 131 | ), | 206 | ), |
| 132 | 207 | ||
| 133 | --active: ( | 208 | --active: ( |
| 134 | --bg: props.get(core.$transparent-colors, $theme, --900), | 209 | --bg-color: props.get(core.$transparent-colors, $theme, --900), |
| 135 | --label: props.get(core.$transparent-colors, $theme, --text), | 210 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
| 211 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 212 | ), | ||
| 213 | |||
| 214 | --disabled: ( | ||
| 215 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 216 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 217 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 218 | ), | ||
| 219 | ), | ||
| 220 | |||
| 221 | --static: ( | ||
| 222 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 223 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 224 | --border-color: transparent, | ||
| 225 | |||
| 226 | --hover: ( | ||
| 227 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 228 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 229 | --border-color: transparent, | ||
| 136 | ), | 230 | ), |
| 137 | ) | 231 | |
| 232 | --active: ( | ||
| 233 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 234 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 235 | --border-color: transparent, | ||
| 236 | ), | ||
| 237 | ), | ||
| 238 | |||
| 239 | --quiet: ( | ||
| 240 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 241 | |||
| 242 | --hover: ( | ||
| 243 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 244 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 245 | ), | ||
| 246 | |||
| 247 | --active: ( | ||
| 248 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 249 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 250 | ), | ||
| 251 | |||
| 252 | --disabled: ( | ||
| 253 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 254 | ), | ||
| 255 | ), | ||
| 138 | ) | 256 | ) |
| 139 | )); | 257 | )); |
| 140 | } | 258 | } |
| 141 | 259 | ||
| 142 | $themes-config: ( | 260 | $themes-config: ( |
| 143 | accent: --accent, | 261 | accent: --accent, |
| 262 | positive: --positive, | ||
| 144 | negative: --negative, | 263 | negative: --negative, |
| 264 | warning: --warning, | ||
| 145 | ) !default; | 265 | ) !default; |
| 146 | 266 | ||
| 147 | $themes: props.def(--o-button, (), 'color'); | ||
| 148 | |||
| 149 | @each $theme, $key in $themes-config { | 267 | @each $theme, $key in $themes-config { |
| 150 | $themes: props.merge($themes, ( | 268 | $themes: props.merge($themes, ( |
| 151 | --#{$theme}: ( | 269 | --#{$theme}: ( |
| 152 | --bg: props.get(core.$theme, #{$key}-static, --900), | 270 | --bg-color: props.get(core.$theme, $key, --200), |
| 153 | --label: props.get(core.$theme, #{$key}-static, --900-text), | 271 | --label-color: props.get(core.$theme, $key, --1100), |
| 154 | --outline-border: props.get(core.$theme, $key, --900), | 272 | --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), |
| 155 | --outline-label: props.get(core.$theme, $key, --1000), | 273 | --shadow-color: props.get(core.$theme, $key, --200), |
| 156 | 274 | ||
| 157 | --hover: ( | 275 | --hover: ( |
| 158 | --bg: props.get(core.$theme, #{$key}-static, --1000), | 276 | --bg-color: props.get(core.$theme, $key, --300), |
| 159 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | 277 | --label-color: props.get(core.$theme, $key, --1200), |
| 278 | --border-color: props.get(core.$theme, $key, --600), | ||
| 160 | ), | 279 | ), |
| 161 | 280 | ||
| 162 | --active: ( | 281 | --active: ( |
| 163 | --bg: props.get(core.$theme, #{$key}-static, --1100), | 282 | --bg-color: props.get(core.$theme, $key, --400), |
| 164 | --label: props.get(core.$theme, #{$key}-static, --1100-text), | 283 | --label-color: props.get(core.$theme, $key, --1300), |
| 284 | --border-color: props.get(core.$theme, $key, --800), | ||
| 285 | ), | ||
| 286 | |||
| 287 | --disabled: ( | ||
| 288 | --bg-color: props.get(core.$theme, --bg-l1), | ||
| 289 | --label-color: props.get(core.$theme, --border-strong), | ||
| 290 | --border-color: props.get(core.$theme, --border), | ||
| 291 | ), | ||
| 292 | |||
| 293 | --key-focus: ( | ||
| 294 | --border-color: props.get(core.$theme, --focus, --border), | ||
| 295 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
| 296 | ), | ||
| 297 | |||
| 298 | --selected: ( | ||
| 299 | --bg-color: props.get(core.$theme, #{$key}-static, --900), | ||
| 300 | --label-color: props.get(core.$theme, #{$key}-static, --900-text), | ||
| 301 | --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), | ||
| 302 | |||
| 303 | --hover: ( | ||
| 304 | --bg-color: props.get(core.$theme, #{$key}-static, --1000), | ||
| 305 | --label-color: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 306 | --border-color: props.get(core.$theme, #{$key}-static, --1000), | ||
| 307 | ), | ||
| 308 | |||
| 309 | --active: ( | ||
| 310 | --bg-color: props.get(core.$theme, #{$key}-static, --1100), | ||
| 311 | --label-color: props.get(core.$theme, #{$key}-static, --1100-text), | ||
| 312 | --border-color: props.get(core.$theme, #{$key}-static, --1100), | ||
| 313 | ), | ||
| 314 | |||
| 315 | --disabled: ( | ||
| 316 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 317 | --label-color: props.get(core.$theme, --border-strong), | ||
| 318 | --border-color: props.get(core.$theme, --border-mute), | ||
| 319 | ), | ||
| 320 | ), | ||
| 321 | |||
| 322 | --static: ( | ||
| 323 | --bg-color: props.get(core.$theme, $key, --100), | ||
| 324 | --label-color: props.get(core.$theme, $key, --1100), | ||
| 325 | --border-color: props.get(core.$theme, $key, --300), | ||
| 326 | |||
| 327 | --hover: ( | ||
| 328 | --bg-color: props.get(core.$theme, $key, --200), | ||
| 329 | --label-color: props.get(core.$theme, $key, --1200), | ||
| 330 | --border-color: props.get(core.$theme, $key, --400), | ||
| 331 | ), | ||
| 332 | |||
| 333 | --active: ( | ||
| 334 | --bg-color: props.get(core.$theme, $key, --300), | ||
| 335 | --label-color: props.get(core.$theme, $key, --1300), | ||
| 336 | --border-color: props.get(core.$theme, $key, --500), | ||
| 337 | ), | ||
| 338 | ), | ||
| 339 | |||
| 340 | --quiet: ( | ||
| 341 | --label-color: props.get(core.$theme, $key, --1100), | ||
| 342 | |||
| 343 | --hover: ( | ||
| 344 | --bg-color: props.get(core.$theme, $key, --200), | ||
| 345 | --label-color: props.get(core.$theme, $key, --1200), | ||
| 346 | ), | ||
| 347 | |||
| 348 | --active: ( | ||
| 349 | --bg-color: props.get(core.$theme, $key, --300), | ||
| 350 | --label-color: props.get(core.$theme, $key, --1300), | ||
| 351 | ), | ||
| 352 | |||
| 353 | --disabled: ( | ||
| 354 | --label-color: props.get(core.$theme, --border-strong), | ||
| 355 | ), | ||
| 165 | ), | 356 | ), |
| 166 | ) | 357 | ) |
| 167 | )); | 358 | )); |