diff options
Diffstat (limited to 'src/objects/_badge.vars.scss')
-rw-r--r-- | src/objects/_badge.vars.scss | 61 |
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 | ) |