diff options
Diffstat (limited to 'src/objects/_button.vars.scss')
| -rw-r--r-- | src/objects/_button.vars.scss | 460 |
1 files changed, 339 insertions, 121 deletions
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 65993ad..df7df61 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss | |||
| @@ -4,165 +4,383 @@ | |||
| 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 | $rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default; | ||
| 9 | |||
| 10 | $pad-i--xs: props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default; | ||
| 11 | $pad-i-label--xs: props.def(--o-button--xs--pad-i-label, props.get(core.$size--40)) !default; | ||
| 12 | $pad-i-wide--xs: props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default; | ||
| 13 | $pad-i-pill--xs: props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default; | ||
| 14 | $pad-b--xs: props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default; | ||
| 15 | $font-size--xs: props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default; | ||
| 16 | |||
| 17 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default; | ||
| 18 | $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default; | ||
| 19 | $pad-i-wide--sm: props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default; | ||
| 20 | $pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default; | ||
| 21 | $pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default; | ||
| 22 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default; | ||
| 23 | |||
| 24 | $pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default; | ||
| 8 | $pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; | 25 | $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; | 26 | $pad-i-wide: props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default; |
| 10 | $border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default; | 27 | $pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default; |
| 11 | $rounding: props.def(--o-button--rounding, 10em) !default; | 28 | $pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default; |
| 12 | $font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; | 29 | $font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; |
| 13 | 30 | ||
| 14 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--125)) !default; | 31 | $pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default; |
| 15 | $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; | 32 | $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default; |
| 16 | $pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; | 33 | $pad-i-wide--lg: props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default; |
| 17 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; | 34 | $pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default; |
| 18 | 35 | $pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default; | |
| 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; | 36 | $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; |
| 23 | 37 | ||
| 24 | $pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; | 38 | $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; | 39 | $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default; |
| 40 | $pad-i-wide--xl: props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default; | ||
| 41 | $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; | 42 | $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; | 43 | $font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; |
| 28 | 44 | ||
| 45 | $shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default; | ||
| 46 | $shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default; | ||
| 47 | $shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default; | ||
| 48 | $shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default; | ||
| 49 | |||
| 29 | $key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 50 | $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; | 51 | $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; | 52 | $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; |
| 32 | 53 | ||
| 33 | $sizes: ( | 54 | $fixed-sizes: ( |
| 34 | 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, | 55 | 'xs' $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs, |
| 35 | 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, | 56 | 'sm' $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, |
| 36 | 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, | 57 | 'lg' $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, |
| 58 | 'xl' $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, | ||
| 37 | ) !default; | 59 | ) !default; |
| 38 | 60 | ||
| 61 | $themes: props.def(--o-button, (), 'color'); | ||
| 62 | |||
| 39 | $default-theme-override: () !default; | 63 | $default-theme-override: () !default; |
| 40 | $default-theme: props.def(--o-button, ( | 64 | $default-theme: map.deep-merge(( |
| 41 | --bg: props.get(core.$theme, --border-mute), | 65 | --bg-color: props.get(core.$theme, --bg-l2), |
| 42 | --label: props.get(core.$theme, --text), | 66 | --label-color: props.get(core.$theme, --text), |
| 43 | --outline-border: props.get(core.$theme, --border), | 67 | --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), | 68 | --shadow-color: props.get(core.$theme, --shadow), |
| 69 | |||
| 70 | --hover: ( | ||
| 71 | --bg-color: props.get(core.$theme, --bg-l1), | ||
| 72 | --label-color: props.get(core.$theme, --heading), | ||
| 73 | --border-color: props.get(core.$theme, --border), | ||
| 74 | ), | ||
| 75 | |||
| 76 | --active: ( | ||
| 77 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 78 | --label-color: props.get(core.$theme, --heading), | ||
| 79 | --border-color: props.get(core.$theme, --border-strong), | ||
| 80 | ), | ||
| 81 | |||
| 82 | --disabled: ( | ||
| 83 | --bg-color: transparent, | ||
| 84 | --label-color: props.get(core.$theme, --border-strong), | ||
| 85 | --border-color: props.get(core.$theme, --text-disabled), | ||
| 86 | ), | ||
| 87 | |||
| 88 | --key-focus: ( | ||
| 89 | --border-color: props.get(core.$theme, --focus, --border), | ||
| 90 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
| 91 | ), | ||
| 92 | |||
| 93 | --highlighted: ( | ||
| 94 | --border-color: props.get(core.$theme, --focus, --border), | ||
| 95 | --shadow-color: props.get(core.$theme, --focus, --outline), | ||
| 96 | ), | ||
| 97 | |||
| 98 | --selected: ( | ||
| 99 | --bg-color: props.get(core.$theme, --text), | ||
| 100 | --label-color: props.get(core.$theme, --base, --50), | ||
| 101 | --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), | ||
| 102 | |||
| 103 | --hover: ( | ||
| 104 | --bg-color: props.get(core.$theme, --heading), | ||
| 105 | --label-color: props.get(core.$theme, --base, --50), | ||
| 106 | --border-color: props.get(core.$theme, --heading), | ||
| 107 | ), | ||
| 108 | |||
| 109 | --active: ( | ||
| 110 | --bg-color: props.get(core.$theme, --heading), | ||
| 111 | --label-color: props.get(core.$theme, --base, --50), | ||
| 112 | --border-color: props.get(core.$theme, --heading), | ||
| 113 | ), | ||
| 114 | |||
| 115 | --disabled: ( | ||
| 116 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 117 | --label-color: props.get(core.$theme, --border-strong), | ||
| 118 | --border-color: props.get(core.$theme, --border-mute), | ||
| 119 | ), | ||
| 120 | ), | ||
| 121 | |||
| 122 | --badge: ( | ||
| 123 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 124 | --label-color: props.get(core.$theme, --heading), | ||
| 125 | --border-color: props.get(core.$theme, --border-mute), | ||
| 126 | |||
| 127 | --hover: ( | ||
| 128 | --bg-color: props.get(core.$theme, --border), | ||
| 129 | --label-color: props.get(core.$theme, --heading), | ||
| 130 | --border-color: props.get(core.$theme, --border), | ||
| 131 | ), | ||
| 45 | 132 | ||
| 46 | --hover: ( | 133 | --active: ( |
| 47 | --bg: props.get(core.$theme, --border), | 134 | --bg-color: props.get(core.$theme, --border-strong), |
| 48 | --label: props.get(core.$theme, --heading), | 135 | --label-color: props.get(core.$theme, --heading), |
| 49 | ), | 136 | --border-color: props.get(core.$theme, --border-strong), |
| 137 | ), | ||
| 138 | ), | ||
| 50 | 139 | ||
| 51 | --active: ( | 140 | --quiet: ( |
| 52 | --bg: props.get(core.$theme, --border-strong), | 141 | --label-color: props.get(core.$theme, --text), |
| 53 | --label: props.get(core.$theme, --heading), | ||
| 54 | ), | ||
| 55 | 142 | ||
| 56 | --disabled: ( | 143 | --hover: ( |
| 57 | --bg: props.get(core.$theme, --border-mute), | 144 | --bg-color: props.get(core.$theme, --border-mute), |
| 58 | --outline-border: props.get(core.$theme, --border), | 145 | --label-color: props.get(core.$theme, --heading), |
| 59 | --label: props.get(core.$theme, --text-disabled), | 146 | ), |
| 60 | ), | ||
| 61 | 147 | ||
| 62 | --key-focus: ( | 148 | --active: ( |
| 63 | --label: props.get(core.$theme, --focus, --text), | 149 | --bg-color: props.get(core.$theme, --border), |
| 64 | --border: props.get(core.$theme, --focus, --border), | 150 | --label-color: props.get(core.$theme, --heading), |
| 65 | --outline: props.get(core.$theme, --focus, --outline), | 151 | ), |
| 66 | ), | ||
| 67 | 152 | ||
| 68 | --primary: ( | 153 | --disabled: ( |
| 69 | --bg: props.get(core.$theme, --base, --800), | 154 | --label-color: props.get(core.$theme, --border-strong), |
| 70 | --label: props.get(core.$theme, --base, --800-text), | 155 | ), |
| 71 | --outline-border: props.get(core.$theme, --base, --800), | 156 | ), |
| 72 | --outline-label: props.get(core.$theme, --text), | 157 | ), $default-theme-override) !default; |
| 158 | $default-theme: props.def(--o-button, $default-theme, 'color'); | ||
| 73 | 159 | ||
| 74 | --hover: ( | 160 | $default-theme-dark-override: () !default; |
| 75 | --bg: props.get(core.$theme, --base, --900), | 161 | $default-theme-dark: map.deep-merge(( |
| 76 | --label: props.get(core.$theme, --base, --900-text), | 162 | --bg-color: props.get(core.$theme, --border-mute), |
| 77 | ), | 163 | --border-color: props.get(core.$theme, --border-mute), |
| 78 | 164 | ||
| 79 | --active: ( | 165 | --hover: ( |
| 80 | --bg: props.get(core.$theme, --base, --900), | 166 | --bg-color: props.get(core.$theme, --border), |
| 81 | --label: props.get(core.$theme, --base, --900-text), | 167 | --border-color: props.get(core.$theme, --border), |
| 82 | ), | 168 | ), |
| 83 | ), | ||
| 84 | ), 'color'); | ||
| 85 | $default-theme: props.merge($default-theme, $default-theme-override); | ||
| 86 | 169 | ||
| 87 | $static-themes: props.def(--o-button, (), 'color'); | 170 | --active: ( |
| 171 | --bg-color: props.get(core.$theme, --border-strong), | ||
| 172 | --border-color: props.get(core.$theme, --border-strong), | ||
| 173 | ), | ||
| 174 | |||
| 175 | --selected: ( | ||
| 176 | --border-color: props.get(core.$theme, --text), | ||
| 177 | ), | ||
| 178 | ), $default-theme-override) !default; | ||
| 179 | $default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); | ||
| 88 | 180 | ||
| 89 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | 181 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
| 90 | $button-theme: --static-#{string.slice($theme, 3)}; | 182 | $button-theme: --static-#{string.slice($theme, 3)}; |
| 183 | |||
| 184 | $themes: props.merge($themes, ( | ||
| 185 | $button-theme: ( | ||
| 186 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 187 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 188 | --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), | ||
| 189 | --shadow-color: props.get(core.$transparent-colors, --black, --200), | ||
| 190 | |||
| 191 | --hover: ( | ||
| 192 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 193 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 194 | --border-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 195 | ), | ||
| 196 | |||
| 197 | --active: ( | ||
| 198 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 199 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 200 | --border-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 201 | ), | ||
| 202 | |||
| 203 | --disabled: ( | ||
| 204 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
| 205 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 206 | --border-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 207 | ), | ||
| 91 | 208 | ||
| 92 | $static-themes: props.merge($static-themes, ( | 209 | --key-focus: ( |
| 93 | $button-theme: ( | 210 | --border-color: props.get(core.$transparent-colors, $theme, --900), |
| 94 | --bg: props.get(core.$transparent-colors, $theme, --200), | 211 | --outline-color: props.get(core.$transparent-colors, $theme, --300), |
| 95 | --label: props.get(core.$transparent-colors, $theme, --900), | 212 | ), |
| 96 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | ||
| 97 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | ||
| 98 | 213 | ||
| 99 | --hover: ( | 214 | --highlighted: ( |
| 100 | --bg: props.get(core.$transparent-colors, $theme, --300), | 215 | --border-color: props.get(core.$transparent-colors, $theme, --900), |
| 101 | --label: props.get(core.$transparent-colors, $theme, --900), | 216 | --shadow-color: props.get(core.$transparent-colors, --black, --200), |
| 102 | ), | 217 | ), |
| 103 | 218 | ||
| 104 | --active: ( | 219 | --selected: ( |
| 105 | --bg: props.get(core.$transparent-colors, $theme, --400), | 220 | --bg-color: props.get(core.$transparent-colors, $theme, --800), |
| 106 | --label: props.get(core.$transparent-colors, $theme, --900), | 221 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
| 107 | ), | 222 | --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), |
| 108 | 223 | ||
| 109 | --disabled: ( | 224 | --hover: ( |
| 110 | --bg: props.get(core.$transparent-colors, $theme, --200), | 225 | --bg-color: props.get(core.$transparent-colors, $theme, --900), |
| 111 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | 226 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
| 112 | --label: props.get(core.$transparent-colors, $theme, --500), | 227 | --border-color: props.get(core.$transparent-colors, $theme, --100), |
| 113 | ), | 228 | ), |
| 114 | 229 | ||
| 115 | --key-focus: ( | 230 | --active: ( |
| 116 | --bg: props.get(core.$transparent-colors, $theme, --100), | 231 | --bg-color: props.get(core.$transparent-colors, $theme, --900), |
| 117 | --label: props.get(core.$transparent-colors, $theme, --900), | 232 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
| 118 | --border: props.get(core.$transparent-colors, $theme, --900), | 233 | --border-color: props.get(core.$transparent-colors, $theme, --100), |
| 119 | --outline: props.get(core.$transparent-colors, $theme, --300), | 234 | ), |
| 120 | ), | ||
| 121 | 235 | ||
| 122 | --primary: ( | 236 | --disabled: ( |
| 123 | --bg: props.get(core.$transparent-colors, $theme, --800), | 237 | --bg-color: props.get(core.$transparent-colors, $theme, --200), |
| 124 | --label: props.get(core.$transparent-colors, $theme, --text), | 238 | --label-color: props.get(core.$transparent-colors, $theme, --500), |
| 125 | --outline-border: props.get(core.$transparent-colors, $theme, --800), | 239 | --border-color: props.get(core.$transparent-colors, $theme, --100), |
| 126 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | 240 | ), |
| 127 | 241 | ), | |
| 128 | --hover: ( | ||
| 129 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
| 130 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
| 131 | ), | ||
| 132 | 242 | ||
| 133 | --active: ( | 243 | --badge: ( |
| 134 | --bg: props.get(core.$transparent-colors, $theme, --900), | 244 | --bg-color: props.get(core.$transparent-colors, $theme, --200), |
| 135 | --label: props.get(core.$transparent-colors, $theme, --text), | 245 | --label-color: props.get(core.$transparent-colors, $theme, --900), |
| 136 | ), | 246 | --border-color: transparent, |
| 137 | ) | 247 | |
| 138 | ) | 248 | --hover: ( |
| 139 | )); | 249 | --bg-color: props.get(core.$transparent-colors, $theme, --300), |
| 250 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 251 | --border-color: transparent, | ||
| 252 | ), | ||
| 253 | |||
| 254 | --active: ( | ||
| 255 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
| 256 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 257 | --border-color: transparent, | ||
| 258 | ), | ||
| 259 | ), | ||
| 260 | |||
| 261 | --quiet: ( | ||
| 262 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 263 | |||
| 264 | --hover: ( | ||
| 265 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
| 266 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 267 | ), | ||
| 268 | |||
| 269 | --active: ( | ||
| 270 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
| 271 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
| 272 | ), | ||
| 273 | |||
| 274 | --disabled: ( | ||
| 275 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
| 276 | ), | ||
| 277 | ), | ||
| 278 | ) | ||
| 279 | )); | ||
| 140 | } | 280 | } |
| 141 | 281 | ||
| 142 | $themes-config: ( | 282 | $themes-config: ( |
| 143 | accent: --accent, | 283 | accent: --accent, |
| 144 | negative: --negative, | 284 | positive: --positive, |
| 285 | negative: --negative, | ||
| 286 | warning: --warning, | ||
| 145 | ) !default; | 287 | ) !default; |
| 146 | 288 | ||
| 147 | $themes: props.def(--o-button, (), 'color'); | ||
| 148 | |||
| 149 | @each $theme, $key in $themes-config { | 289 | @each $theme, $key in $themes-config { |
| 150 | $themes: props.merge($themes, ( | 290 | $themes: props.merge($themes, ( |
| 151 | --#{$theme}: ( | 291 | --#{$theme}: ( |
| 152 | --bg: props.get(core.$theme, #{$key}-static, --900), | 292 | --bg-color: props.get(core.$theme, $key, --100), |
| 153 | --label: props.get(core.$theme, #{$key}-static, --900-text), | 293 | --label-color: props.get(core.$theme, $key, --1100), |
| 154 | --outline-border: props.get(core.$theme, $key, --900), | 294 | --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), | 295 | --shadow-color: props.get(core.$theme, $key, --200), |
| 296 | |||
| 297 | --hover: ( | ||
| 298 | --bg-color: props.get(core.$theme, $key, --200), | ||
| 299 | --label-color: props.get(core.$theme, $key, --1200), | ||
| 300 | --border-color: props.get(core.$theme, $key, --600), | ||
| 301 | ), | ||
| 302 | |||
| 303 | --active: ( | ||
| 304 | --bg-color: props.get(core.$theme, $key, --300), | ||
| 305 | --label-color: props.get(core.$theme, $key, --1300), | ||
| 306 | --border-color: props.get(core.$theme, $key, --800), | ||
| 307 | ), | ||
| 308 | |||
| 309 | --disabled: ( | ||
| 310 | --bg-color: props.get(core.$theme, --bg-l1), | ||
| 311 | --label-color: props.get(core.$theme, --border-strong), | ||
| 312 | --border-color: props.get(core.$theme, --border), | ||
| 313 | ), | ||
| 314 | |||
| 315 | --key-focus: ( | ||
| 316 | --border-color: props.get(core.$theme, --focus, --border), | ||
| 317 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
| 318 | ), | ||
| 319 | |||
| 320 | --highlighted: ( | ||
| 321 | --border-color: props.get(core.$theme, $key, --900), | ||
| 322 | --shadow-color: props.get(core.$theme, $key, --200), | ||
| 323 | ), | ||
| 324 | |||
| 325 | --selected: ( | ||
| 326 | --bg-color: props.get(core.$theme, #{$key}-static, --900), | ||
| 327 | --label-color: props.get(core.$theme, #{$key}-static, --900-text), | ||
| 328 | --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), | ||
| 329 | |||
| 330 | --hover: ( | ||
| 331 | --bg-color: props.get(core.$theme, #{$key}-static, --1000), | ||
| 332 | --label-color: props.get(core.$theme, #{$key}-static, --1000-text), | ||
| 333 | --border-color: props.get(core.$theme, #{$key}-static, --1000), | ||
| 334 | ), | ||
| 335 | |||
| 336 | --active: ( | ||
| 337 | --bg-color: props.get(core.$theme, #{$key}-static, --1100), | ||
| 338 | --label-color: props.get(core.$theme, #{$key}-static, --1100-text), | ||
| 339 | --border-color: props.get(core.$theme, #{$key}-static, --1100), | ||
| 340 | ), | ||
| 341 | |||
| 342 | --disabled: ( | ||
| 343 | --bg-color: props.get(core.$theme, --border-mute), | ||
| 344 | --label-color: props.get(core.$theme, --border-strong), | ||
| 345 | --border-color: props.get(core.$theme, --border-mute), | ||
| 346 | ), | ||
| 347 | ), | ||
| 156 | 348 | ||
| 157 | --hover: ( | 349 | --badge: ( |
| 158 | --bg: props.get(core.$theme, #{$key}-static, --1000), | 350 | --bg-color: props.get(core.$theme, $key, --100), |
| 159 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | 351 | --label-color: props.get(core.$theme, $key, --1100), |
| 160 | ), | 352 | --border-color: props.get(core.$theme, $key, --300), |
| 353 | |||
| 354 | --hover: ( | ||
| 355 | --bg-color: props.get(core.$theme, $key, --200), | ||
| 356 | --label-color: props.get(core.$theme, $key, --1200), | ||
| 357 | --border-color: props.get(core.$theme, $key, --400), | ||
| 358 | ), | ||
| 359 | |||
| 360 | --active: ( | ||
| 361 | --bg-color: props.get(core.$theme, $key, --300), | ||
| 362 | --label-color: props.get(core.$theme, $key, --1300), | ||
| 363 | --border-color: props.get(core.$theme, $key, --500), | ||
| 364 | ), | ||
| 365 | ), | ||
| 161 | 366 | ||
| 162 | --active: ( | 367 | --quiet: ( |
| 163 | --bg: props.get(core.$theme, #{$key}-static, --1100), | 368 | --label-color: props.get(core.$theme, $key, --1100), |
| 164 | --label: props.get(core.$theme, #{$key}-static, --1100-text), | 369 | |
| 165 | ), | 370 | --hover: ( |
| 166 | ) | 371 | --bg-color: props.get(core.$theme, $key, --200), |
| 167 | )); | 372 | --label-color: props.get(core.$theme, $key, --1200), |
| 373 | ), | ||
| 374 | |||
| 375 | --active: ( | ||
| 376 | --bg-color: props.get(core.$theme, $key, --300), | ||
| 377 | --label-color: props.get(core.$theme, $key, --1300), | ||
| 378 | ), | ||
| 379 | |||
| 380 | --disabled: ( | ||
| 381 | --label-color: props.get(core.$theme, --border-strong), | ||
| 382 | ), | ||
| 383 | ), | ||
| 384 | ) | ||
| 385 | )); | ||
| 168 | } | 386 | } |