summaryrefslogtreecommitdiffstats
path: root/src/objects/_divider.vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_divider.vars.scss
parentUpdate _index.scss (diff)
downloadiro-design-master.tar.gz
iro-design-master.tar.bz2
iro-design-master.zip
PathsHEADmaster
Diffstat (limited to 'src/objects/_divider.vars.scss')
-rw-r--r--src/objects/_divider.vars.scss179
1 files changed, 126 insertions, 53 deletions
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index a8b0f9f..38224d4 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -1,80 +1,153 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'sass:string'; 2@use "sass:string";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/props";
4@use '../core.vars' as core; 4@use "../core.vars" as core;
5 5
6$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; 6$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
7$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; 7$vertical--border-width: props.def(
8$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; 8 --o-divider--vertical--width,
9$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default; 9 props.get(core.$border-width--thin)
10) !default;
11$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
12$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default;
10 13
11$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; 14$strong--border-width: props.def(
12$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; 15 --o-divider--strong--border-width,
16 props.get(core.$border-width--thick)
17) !default;
18$strong--label-font-size: props.def(
19 --o-divider--strong--label-font-size,
20 props.get(core.$font-size--100)
21) !default;
13 22
14$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; 23$medium--border-width: props.def(
15$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; 24 --o-divider--medium--border-width,
25 props.get(core.$border-width--medium)
26) !default;
27$medium--label-font-size: props.def(
28 --o-divider--medium--label-font-size,
29 props.get(core.$font-size--75)
30) !default;
16 31
17$quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default; 32$quiet--border-width: props.def(
18$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default; 33 --o-divider--quiet--border-width,
34 props.get(core.$border-width--thin)
35) !default;
36$quiet--label-font-size: props.def(
37 --o-divider--quiet--label-font-size,
38 props.get(core.$font-size--50)
39) !default;
19 40
20$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; 41$faint--border-width: props.def(
21$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; 42 --o-divider--faint--border-width,
43 props.get(core.$border-width--thin)
44) !default;
45$faint--label-font-size: props.def(
46 --o-divider--faint--label-font-size,
47 props.get(core.$font-size--50)
48) !default;
22 49
23$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default; 50$strong--bg-color: props.def(
24$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default; 51 --o-divider--strong--bg-color,
52 props.get(core.$theme, --text),
53 "color"
54) !default;
55$strong--label-color: props.def(
56 --o-divider--strong--label-color,
57 props.get(core.$theme, --text),
58 "color"
59) !default;
25 60
26$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; 61$medium--bg-color: props.def(
27$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; 62 --o-divider--medium--bg-color,
63 props.get(core.$theme, --border),
64 "color"
65) !default;
66$medium--label-color: props.def(
67 --o-divider--medium--label-color,
68 props.get(core.$theme, --text-mute),
69 "color"
70) !default;
28 71
29$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default; 72$quiet--bg-color: props.def(
30$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; 73 --o-divider--quiet--bg-color,
74 props.get(core.$theme, --border),
75 "color"
76) !default;
77$quiet--label-color: props.def(
78 --o-divider--quiet--label-color,
79 props.get(core.$theme, --text-mute-more),
80 "color"
81) !default;
31 82
32$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 83$faint--bg-color: props.def(
33$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default; 84 --o-divider--faint--bg-color,
85 props.get(core.$theme, --border-mute),
86 "color"
87) !default;
88$faint--label-color: props.def(
89 --o-divider--faint--label-color,
90 props.get(core.$theme, --text-disabled),
91 "color"
92) !default;
34 93
35$vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 94$vertical--quiet--bg-color: props.def(
95 --o-divider--vertical--quiet--bg-color,
96 props.get(core.$theme, --border-mute),
97 "color"
98) !default;
36 99
37$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 100$dot--quiet--bg-color: props.def(
101 --o-divider--dot--quiet--bg-color,
102 props.get(core.$theme, --border-mute),
103 "color"
104) !default;
38 105
39$static-themes: props.def(--o-divider, (), 'color'); 106$static-themes: props.def(--o-divider, (), "color");
40 107
41@each $theme in map.keys(props.get(core.$transparent-colors)) { 108@each $theme in map.keys(props.get(core.$transparent-colors)) {
42 $button-theme: --static-#{string.slice($theme, 3)}; 109 $button-theme: --static-#{string.slice($theme, 3)};
43 110
44 $static-themes: props.merge($static-themes, ( 111 $static-themes: props.merge(
45 $button-theme: ( 112 $static-themes,
46 --strong: ( 113 (
47 --bg: props.get(core.$transparent-colors, $theme, --800), 114 $button-theme: (
48 --label: props.get(core.$transparent-colors, $theme, --900), 115 --strong: (
49 ), 116 --bg: props.get(core.$transparent-colors, $theme, --800),
50 --medium: ( 117 --label: props.get(core.$transparent-colors, $theme, --900),
51 --bg: props.get(core.$transparent-colors, $theme, --300), 118 ),
52 --label: props.get(core.$transparent-colors, $theme, --500), 119 --medium: (
53 ), 120 --bg: props.get(core.$transparent-colors, $theme, --300),
54 --quiet: ( 121 --label: props.get(core.$transparent-colors, $theme, --500),
55 --bg: props.get(core.$transparent-colors, $theme, --300), 122 ),
56 --label: props.get(core.$transparent-colors, $theme, --500), 123 --quiet: (
57 ), 124 --bg: props.get(core.$transparent-colors, $theme, --300),
58 --faint: ( 125 --label: props.get(core.$transparent-colors, $theme, --500),
59 --bg: props.get(core.$transparent-colors, $theme, --200), 126 ),
60 --label: props.get(core.$transparent-colors, $theme, --400), 127 --faint: (
61 ), 128 --bg: props.get(core.$transparent-colors, $theme, --200),
129 --label: props.get(core.$transparent-colors, $theme, --400),
130 ),
131 ),
62 ) 132 )
63 )); 133 );
64} 134}
65 135
66$themes-config: ( 136$themes-config: (
67 accent: --accent, 137 accent: --accent,
68 negative: --negative, 138 negative: --negative,
69) !default; 139) !default;
70 140
71$themes: props.def(--o-divider, (), 'color'); 141$themes: props.def(--o-divider, (), "color");
72 142
73@each $theme, $key in $themes-config { 143@each $theme, $key in $themes-config {
74 $themes: props.merge($themes, ( 144 $themes: props.merge(
75 --#{$theme}: ( 145 $themes,
76 --bg: props.get(core.$theme, $key, --800), 146 (
77 --label: props.get(core.$theme, $key, --1000), 147 --#{$theme}: (
148 --bg: props.get(core.$theme, $key, --800),
149 --label: props.get(core.$theme, $key, --1000),
150 )
78 ) 151 )
79 )); 152 );
80} 153}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 10:52:15 +0000