summaryrefslogtreecommitdiffstats
path: root/src/objects/_badge.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_badge.vars.scss')
-rw-r--r--src/objects/_badge.vars.scss38
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 )