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.scss158
1 files changed, 158 insertions, 0 deletions
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
new file mode 100644
index 0000000..6a3dd15
--- /dev/null
+++ b/src/objects/_badge.vars.scss
@@ -0,0 +1,158 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
6$pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
7$pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
8$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
9$rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
10$font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
11
12$pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
13$pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
14$pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
15$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
16$font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
17
18$pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
19$pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
20$pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
21$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
22$font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
23
24$pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
25$pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
26$pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
27$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
28$font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
29
30$key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
31$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
32$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
33
34$sizes: (
35 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
36 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
37 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
38) !default;
39
40$key-focus--label-color: props.def(--o-avatar--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
41$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
42$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
43
44$default-theme-override: () !default;
45$default-theme: props.def(--o-badge, (
46 --bg: props.def(--o-badge--bg-color, props.get(core.$theme, --text-mute)),
47 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
48
49 --hover: (
50 --bg: props.def(--o-badge--hover--bg-color, props.get(core.$theme, --text)),
51 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
52 ),
53
54 --active: (
55 --bg: props.def(--o-badge--active--bg-color, props.get(core.$theme, --heading)),
56 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
57 ),
58
59 --quiet: (
60 --bg: props.def(--o-badge--quiet--bg-color, props.get(core.$theme, --border-mute)),
61 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
62
63 --hover: (
64 --bg: props.def(--o-badge--quiet--hover--bg-color, props.get(core.$theme, --border)),
65 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
66 ),
67
68 --active: (
69 --bg: props.def(--o-badge--quiet--active--bg-color, props.get(core.$theme, --border-strong)),
70 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
71 ),
72 )
73));
74$default-theme: props.merge(--o-badge, $default-theme-override);
75
76$static-themes: props.def(--o-badge);
77
78@each $theme in map.keys(props.get(core.$transparent-colors)) {
79 $badge-theme: #{$theme}-static;
80
81 $static-themes: props.merge($static-themes, (
82 $badge-theme: (
83 --bg: props.get(core.$transparent-colors, $theme, --800),
84 --label: props.get(core.$transparent-colors, $theme, --text),
85
86 --hover: (
87 --bg: props.get(core.$transparent-colors, $theme, --900),
88 --label: props.get(core.$transparent-colors, $theme, --text),
89 ),
90
91 --active: (
92 --bg: props.get(core.$transparent-colors, $theme, --900),
93 --label: props.get(core.$transparent-colors, $theme, --text),
94 ),
95
96 --key-focus: (
97 --bg: props.get(core.$transparent-colors, $theme, --100),
98 --label: props.get(core.$transparent-colors, $theme, --900),
99 --border: props.get(core.$transparent-colors, $theme, --900),
100 --outline: props.get(core.$transparent-colors, $theme, --300),
101 ),
102
103 --quiet: (
104 --bg: props.get(core.$transparent-colors, $theme, --200),
105 --label: props.get(core.$transparent-colors, $theme, --900),
106 --hover: (
107 --bg: props.get(core.$transparent-colors, $theme, --300),
108 --label: props.get(core.$transparent-colors, $theme, --900),
109 ),
110 --active: (
111 --bg: props.get(core.$transparent-colors, $theme, --400),
112 --label: props.get(core.$transparent-colors, $theme, --900),
113 ),
114 )
115 )
116 ));
117}
118
119$themes-config: (
120 accent: --accent,
121 positive: --positive,
122 negative: --negative,
123 warning: --warning,
124) !default;
125
126$themes: props.def(--o-badge);
127
128@each $theme, $key in $themes-config {
129 $themes: props.merge($themes, (
130 $key: (
131 --bg: props.get(core.$static-colors, $key, --900),
132 --label: props.get(core.$static-colors, $key, --900-text),
133
134 --hover: (
135 --bg: props.get(core.$static-colors, $key, --1000),
136 --label: props.get(core.$static-colors, $key, --1000-text),
137 ),
138
139 --active: (
140 --bg: props.get(core.$static-colors, $key, --1100),
141 --label: props.get(core.$static-colors, $key, --1000-text),
142 ),
143
144 --quiet: (
145 --bg: props.get(core.$theme, $key, --200),
146 --label: props.get(core.$theme, $key, --1100),
147 --hover: (
148 --bg: props.get(core.$theme, $key, --300),
149 --label: props.get(core.$theme, $key, --1200),
150 ),
151 --active: (
152 --bg: props.get(core.$theme, $key, --400),
153 --label: props.get(core.$theme, $key, --1300),
154 ),
155 )
156 )
157 ));
158}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 07:34:54 +0000