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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
@use "sass:map";
@use "sass:string";
@use "pkg:iro-sass/props";
@use "../core.vars" as core;
$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
$vertical--border-width: props.def(
--o-divider--vertical--width,
props.get(core.$border-width--thin)
) !default;
$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !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;
$quiet--border-width: props.def(
--o-divider--quiet--border-width,
props.get(core.$border-width--thin)
) !default;
$quiet--label-font-size: props.def(
--o-divider--quiet--label-font-size,
props.get(core.$font-size--50)
) !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;
$quiet--bg-color: props.def(
--o-divider--quiet--bg-color,
props.get(core.$theme, --border),
"color"
) !default;
$quiet--label-color: props.def(
--o-divider--quiet--label-color,
props.get(core.$theme, --text-mute-more),
"color"
) !default;
$faint--bg-color: props.def(
--o-divider--faint--bg-color,
props.get(core.$theme, --border-mute),
"color"
) !default;
$faint--label-color: props.def(
--o-divider--faint--label-color,
props.get(core.$theme, --text-disabled),
"color"
) !default;
$vertical--quiet--bg-color: props.def(
--o-divider--vertical--quiet--bg-color,
props.get(core.$theme, --border-mute),
"color"
) !default;
$dot--quiet--bg-color: props.def(
--o-divider--dot--quiet--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),
),
--quiet: (
--bg: props.get(core.$transparent-colors, $theme, --300),
--label: props.get(core.$transparent-colors, $theme, --500),
),
--faint: (
--bg: props.get(core.$transparent-colors, $theme, --200),
--label: props.get(core.$transparent-colors, $theme, --400),
),
),
)
);
}
$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),
)
)
);
}
|
