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