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.scss61
1 files changed, 28 insertions, 33 deletions
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index 6a3dd15..c49474b 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -43,35 +43,35 @@ $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props
43 43
44$default-theme-override: () !default; 44$default-theme-override: () !default;
45$default-theme: props.def(--o-badge, ( 45$default-theme: props.def(--o-badge, (
46 --bg: props.def(--o-badge--bg-color, props.get(core.$theme, --text-mute)), 46 --bg: props.get(core.$theme, --text-mute),
47 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), 47 --label: props.get(core.$theme, --bg-l2),
48 48
49 --hover: ( 49 --hover: (
50 --bg: props.def(--o-badge--hover--bg-color, props.get(core.$theme, --text)), 50 --bg: props.get(core.$theme, --text),
51 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), 51 --label: props.get(core.$theme, --bg-l2),
52 ), 52 ),
53 53
54 --active: ( 54 --active: (
55 --bg: props.def(--o-badge--active--bg-color, props.get(core.$theme, --heading)), 55 --bg: props.get(core.$theme, --heading),
56 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), 56 --label: props.get(core.$theme, --bg-l2),
57 ), 57 ),
58 58
59 --quiet: ( 59 --quiet: (
60 --bg: props.def(--o-badge--quiet--bg-color, props.get(core.$theme, --border-mute)), 60 --bg: props.get(core.$theme, --border-mute),
61 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), 61 --label: props.get(core.$theme, --heading),
62 62
63 --hover: ( 63 --hover: (
64 --bg: props.def(--o-badge--quiet--hover--bg-color, props.get(core.$theme, --border)), 64 --bg: props.get(core.$theme, --border),
65 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), 65 --label: props.get(core.$theme, --heading),
66 ), 66 ),
67 67
68 --active: ( 68 --active: (
69 --bg: props.def(--o-badge--quiet--active--bg-color, props.get(core.$theme, --border-strong)), 69 --bg: props.get(core.$theme, --border-strong),
70 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), 70 --label: props.get(core.$theme, --heading),
71 ), 71 ),
72 ) 72 )
73)); 73));
74$default-theme: props.merge(--o-badge, $default-theme-override); 74$default-theme: props.merge($default-theme, $default-theme-override);
75 75
76$static-themes: props.def(--o-badge); 76$static-themes: props.def(--o-badge);
77 77
@@ -116,41 +116,36 @@ $static-themes: props.def(--o-badge);
116 )); 116 ));
117} 117}
118 118
119$themes-config: ( 119$themes-config: --accent --positive --negative --warning !default;
120 accent: --accent,
121 positive: --positive,
122 negative: --negative,
123 warning: --warning,
124) !default;
125 120
126$themes: props.def(--o-badge); 121$themes: props.def(--o-badge);
127 122
128@each $theme, $key in $themes-config { 123@each $theme in $themes-config {
129 $themes: props.merge($themes, ( 124 $themes: props.merge($themes, (
130 $key: ( 125 $theme: (
131 --bg: props.get(core.$static-colors, $key, --900), 126 --bg: props.get(core.$static-colors, $theme, --900),
132 --label: props.get(core.$static-colors, $key, --900-text), 127 --label: props.get(core.$static-colors, $theme, --900-text),
133 128
134 --hover: ( 129 --hover: (
135 --bg: props.get(core.$static-colors, $key, --1000), 130 --bg: props.get(core.$static-colors, $theme, --1000),
136 --label: props.get(core.$static-colors, $key, --1000-text), 131 --label: props.get(core.$static-colors, $theme, --1000-text),
137 ), 132 ),
138 133
139 --active: ( 134 --active: (
140 --bg: props.get(core.$static-colors, $key, --1100), 135 --bg: props.get(core.$static-colors, $theme, --1100),
141 --label: props.get(core.$static-colors, $key, --1000-text), 136 --label: props.get(core.$static-colors, $theme, --1000-text),
142 ), 137 ),
143 138
144 --quiet: ( 139 --quiet: (
145 --bg: props.get(core.$theme, $key, --200), 140 --bg: props.get(core.$theme, $theme, --200),
146 --label: props.get(core.$theme, $key, --1100), 141 --label: props.get(core.$theme, $theme, --1100),
147 --hover: ( 142 --hover: (
148 --bg: props.get(core.$theme, $key, --300), 143 --bg: props.get(core.$theme, $theme, --300),
149 --label: props.get(core.$theme, $key, --1200), 144 --label: props.get(core.$theme, $theme, --1200),
150 ), 145 ),
151 --active: ( 146 --active: (
152 --bg: props.get(core.$theme, $key, --400), 147 --bg: props.get(core.$theme, $theme, --400),
153 --label: props.get(core.$theme, $key, --1300), 148 --label: props.get(core.$theme, $theme, --1300),
154 ), 149 ),
155 ) 150 )
156 ) 151 )