1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
@use 'sass:map';
@use 'sass:string';
@use 'iro-sass/src/props';
@use '../core.vars' as core;
$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default;
$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default;
$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default;
$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
$static-themes: props.def(--o-divider, (), 'color');
@each $theme in map.keys(props.get(core.$transparent-colors)) {
$button-theme: --static-#{string.slice($theme, 3)};
$static-themes: props.merge($static-themes, (
$button-theme: (
--strong: (
--bg: props.get(core.$transparent-colors, $theme, --800),
--label: props.get(core.$transparent-colors, $theme, --900),
),
--medium: (
--bg: props.get(core.$transparent-colors, $theme, --300),
--label: props.get(core.$transparent-colors, $theme, --500),
),
--faint: (
--bg: props.get(core.$transparent-colors, $theme, --300),
--label: props.get(core.$transparent-colors, $theme, --500),
),
)
));
}
$themes-config: (
accent: --accent,
negative: --negative,
) !default;
$themes: props.def(--o-divider, (), 'color');
@each $theme, $key in $themes-config {
$themes: props.merge($themes, (
--#{$theme}: (
--bg: props.get(core.$theme, $key, --800),
--label: props.get(core.$theme, $key, --1000),
)
));
}
|
