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
|
@use "pkg:iro-design/core.vars" as core;
@use "pkg:iro-design/objects/avatar.vars" as avatar;
@use "pkg:iro-sass/props";
$avatar-size: props.def(--o-message--avatar-size, props.get(avatar.$size));
$dot-radius: props.def(--o-message--dot-radius, 6px);
$dot-width: props.def(--o-message--dot-width, 4px);
$spacing-x: props.def(--o-message--spacing-x, props.get(core.$size--200));
$spacing-y: props.def(--o-message--spacing-y, props.get(core.$size--150));
$spacing-inner: props.def(--o-message--spacing-inner, props.get(core.$size--500));
$spacing-outer: props.def(--o-message--spacing-outer, props.get(core.$size--700));
$spacing-attachments: props.def(--o-message--spacing-attachments, props.get(core.$size--200));
$line-width: props.def(--o-message--line-width, props.get(core.$border-width--medium));
$line-offset: props.def(
--o-message--line-offset,
calc(0.5 * props.get($avatar-size) - props.get($line-width))
);
$line-curve: props.def(--o-message--line-curve, props.get(core.$size--250));
$attachment-width: props.def(--o-message--attachment-width, props.get(core.$size--2000));
$colors: props.def(
--o-message,
(
--meta: props.get(core.$theme, --text-mute-more),
--line: props.get(core.$theme, --border),
--dot: (
--border: props.get(core.$theme, --text-mute-more),
--bg: props.get(core.$theme, --bg-base),
),
--attachment: (
--bg: props.get(core.$theme, --border-mute),
),
),
"color"
);
|
