diff options
Diffstat (limited to 'src/objects/_badge.vars.scss')
| -rw-r--r-- | src/objects/_badge.vars.scss | 38 |
1 files changed, 20 insertions, 18 deletions
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index f9a4ed5..4941ccf 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss | |||
| @@ -38,10 +38,6 @@ $sizes: ( | |||
| 38 | 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, | 38 | 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, |
| 39 | ) !default; | 39 | ) !default; |
| 40 | 40 | ||
| 41 | $key-focus--label-color: props.def(--o-badge--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; | ||
| 42 | $key-focus--border-color: props.def(--o-badge--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | ||
| 43 | $key-focus--outline-color: props.def(--o-badge--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | ||
| 44 | |||
| 45 | $default-theme-override: () !default; | 41 | $default-theme-override: () !default; |
| 46 | $default-theme: props.def(--o-badge, ( | 42 | $default-theme: props.def(--o-badge, ( |
| 47 | --bg: props.get(core.$theme, --text-mute), | 43 | --bg: props.get(core.$theme, --text-mute), |
| @@ -57,6 +53,12 @@ $default-theme: props.def(--o-badge, ( | |||
| 57 | --label: props.get(core.$theme, --bg-l2), | 53 | --label: props.get(core.$theme, --bg-l2), |
| 58 | ), | 54 | ), |
| 59 | 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 | |||
| 60 | --quiet: ( | 62 | --quiet: ( |
| 61 | --bg: props.get(core.$theme, --border-mute), | 63 | --bg: props.get(core.$theme, --border-mute), |
| 62 | --label: props.get(core.$theme, --heading), | 64 | --label: props.get(core.$theme, --heading), |
| @@ -117,36 +119,36 @@ $static-themes: props.def(--o-badge); | |||
| 117 | )); | 119 | )); |
| 118 | } | 120 | } |
| 119 | 121 | ||
| 120 | $themes-config: --accent --positive --negative --warning !default; | 122 | $themes-config: accent positive negative warning !default; |
| 121 | 123 | ||
| 122 | $themes: props.def(--o-badge); | 124 | $themes: props.def(--o-badge); |
| 123 | 125 | ||
| 124 | @each $theme in $themes-config { | 126 | @each $theme in $themes-config { |
| 125 | $themes: props.merge($themes, ( | 127 | $themes: props.merge($themes, ( |
| 126 | $theme: ( | 128 | --#{$theme}: ( |
| 127 | --bg: props.get(core.$static-colors, $theme, --900), | 129 | --bg: props.get(core.$theme, --#{$theme}-static, --900), |
| 128 | --label: props.get(core.$static-colors, $theme, --900-text), | 130 | --label: props.get(core.$theme, --#{$theme}-static, --900-text), |
| 129 | 131 | ||
| 130 | --hover: ( | 132 | --hover: ( |
| 131 | --bg: props.get(core.$static-colors, $theme, --1000), | 133 | --bg: props.get(core.$theme, --#{$theme}-static, --1000), |
| 132 | --label: props.get(core.$static-colors, $theme, --1000-text), | 134 | --label: props.get(core.$theme, --#{$theme}-static, --1000-text), |
| 133 | ), | 135 | ), |
| 134 | 136 | ||
| 135 | --active: ( | 137 | --active: ( |
| 136 | --bg: props.get(core.$static-colors, $theme, --1100), | 138 | --bg: props.get(core.$theme, --#{$theme}-static, --1100), |
| 137 | --label: props.get(core.$static-colors, $theme, --1000-text), | 139 | --label: props.get(core.$theme, --#{$theme}-static, --1000-text), |
| 138 | ), | 140 | ), |
| 139 | 141 | ||
| 140 | --quiet: ( | 142 | --quiet: ( |
| 141 | --bg: props.get(core.$theme, $theme, --200), | 143 | --bg: props.get(core.$theme, --#{$theme}, --200), |
| 142 | --label: props.get(core.$theme, $theme, --1100), | 144 | --label: props.get(core.$theme, --#{$theme}, --1100), |
| 143 | --hover: ( | 145 | --hover: ( |
| 144 | --bg: props.get(core.$theme, $theme, --300), | 146 | --bg: props.get(core.$theme, --#{$theme}, --300), |
| 145 | --label: props.get(core.$theme, $theme, --1200), | 147 | --label: props.get(core.$theme, --#{$theme}, --1200), |
| 146 | ), | 148 | ), |
| 147 | --active: ( | 149 | --active: ( |
| 148 | --bg: props.get(core.$theme, $theme, --400), | 150 | --bg: props.get(core.$theme, --#{$theme}, --400), |
| 149 | --label: props.get(core.$theme, $theme, --1300), | 151 | --label: props.get(core.$theme, --#{$theme}, --1300), |
| 150 | ), | 152 | ), |
| 151 | ) | 153 | ) |
| 152 | ) | 154 | ) |
