diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_iro-design.scss | 5 | ||||
-rw-r--r-- | src/objects/_badge.scss | 2 | ||||
-rw-r--r-- | src/objects/_badge.vars.scss | 6 | ||||
-rw-r--r-- | src/objects/_button.scss | 22 | ||||
-rw-r--r-- | src/objects/_card.scss | 129 | ||||
-rw-r--r-- | src/objects/_card.vars.scss | 25 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 142 | ||||
-rw-r--r-- | src/objects/_checkbox.vars.scss | 32 | ||||
-rw-r--r-- | src/objects/_divider.scss | 132 | ||||
-rw-r--r-- | src/objects/_divider.vars.scss | 59 | ||||
-rw-r--r-- | src/objects/_emoji.scss | 72 | ||||
-rw-r--r-- | src/objects/_emoji.vars.scss | 26 | ||||
-rw-r--r-- | src/objects/_icon.scss | 26 | ||||
-rw-r--r-- | src/objects/_icon.vars.scss | 5 |
14 files changed, 347 insertions, 336 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss index b8e8246..6cda866 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss | |||
@@ -43,3 +43,8 @@ $breakpoints: ( | |||
43 | @forward 'objects/backdrop' as o-backdrop--*; | 43 | @forward 'objects/backdrop' as o-backdrop--*; |
44 | @forward 'objects/badge' as o-badge--*; | 44 | @forward 'objects/badge' as o-badge--*; |
45 | @forward 'objects/button' as o-button--*; | 45 | @forward 'objects/button' as o-button--*; |
46 | @forward 'objects/card' as o-card--*; | ||
47 | @forward 'objects/checkbox' as o-checkbox--*; | ||
48 | @forward 'objects/divider' as o-divider--*; | ||
49 | @forward 'objects/emoji' as o-emoji--*; | ||
50 | @forward 'objects/icon' as o-icon--*; | ||
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 5a07630..41b2fbb 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -50,7 +50,7 @@ | |||
50 | 50 | ||
51 | @if $static { | 51 | @if $static { |
52 | &::after { | 52 | &::after { |
53 | outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width); | 53 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); |
54 | box-shadow: | 54 | box-shadow: |
55 | 0 | 55 | 0 |
56 | 0 | 56 | 0 |
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index c49474b..9254c83 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss | |||
@@ -37,9 +37,9 @@ $sizes: ( | |||
37 | 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, | 37 | 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, |
38 | ) !default; | 38 | ) !default; |
39 | 39 | ||
40 | $key-focus--label-color: props.def(--o-avatar--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; | 40 | $key-focus--label-color: props.def(--o-badge--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; |
41 | $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | 41 | $key-focus--border-color: props.def(--o-badge--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; |
42 | $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | 42 | $key-focus--outline-color: props.def(--o-badge--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; |
43 | 43 | ||
44 | $default-theme-override: () !default; | 44 | $default-theme-override: () !default; |
45 | $default-theme: props.def(--o-badge, ( | 45 | $default-theme: props.def(--o-badge, ( |
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 854e1e3..e4a656c 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -22,9 +22,9 @@ | |||
22 | &:link, | 22 | &:link, |
23 | &:visited, | 23 | &:visited, |
24 | &:enabled { | 24 | &:enabled { |
25 | color: props.get($theme, list.join($key, --outline-label)); | 25 | color: props.get($theme, list.join($key, --outline-label)...); |
26 | background-color: transparent; | 26 | background-color: transparent; |
27 | border-color: props.get($theme, list.join($key, --outline-border)); | 27 | border-color: props.get($theme, list.join($key, --outline-border)...); |
28 | } | 28 | } |
29 | } | 29 | } |
30 | 30 | ||
@@ -33,37 +33,37 @@ | |||
33 | &:enabled { | 33 | &:enabled { |
34 | &:hover, | 34 | &:hover, |
35 | &:focus-visible { | 35 | &:focus-visible { |
36 | color: props.get($theme, list.join($key, --hover --label)); | 36 | color: props.get($theme, list.join($key, --hover --label)...); |
37 | background-color: props.get($theme, list.join($key, --hover --bg)); | 37 | background-color: props.get($theme, list.join($key, --hover --bg)...); |
38 | border-color: transparent; | 38 | border-color: transparent; |
39 | } | 39 | } |
40 | 40 | ||
41 | &:active { | 41 | &:active { |
42 | color: props.get($theme, list.join($key, --active --label)); | 42 | color: props.get($theme, list.join($key, --active --label)...); |
43 | background-color: props.get($theme, list.join($key, --active --bg)); | 43 | background-color: props.get($theme, list.join($key, --active --bg)...); |
44 | border-color: transparent; | 44 | border-color: transparent; |
45 | } | 45 | } |
46 | } | 46 | } |
47 | } | 47 | } |
48 | 48 | ||
49 | @mixin -apply-static-theme($theme, $key: ()) { | 49 | @mixin -apply-static-theme($theme, $key: ()) { |
50 | color: props.get($theme, list.join($key, --disabled --label)); | 50 | color: props.get($theme, list.join($key, --disabled --label)...); |
51 | background-color: props.get($theme, list.join($key, --disabled --bg)); | 51 | background-color: props.get($theme, list.join($key, --disabled --bg)...); |
52 | border-color: transparent; | 52 | border-color: transparent; |
53 | 53 | ||
54 | &::after { | 54 | &::after { |
55 | outline: props.get($theme, list.join($key, --key-focus --border)) solid props.get(vars.$key-focus--border-width); | 55 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); |
56 | box-shadow: | 56 | box-shadow: |
57 | 0 | 57 | 0 |
58 | 0 | 58 | 0 |
59 | 0 | 59 | 0 |
60 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 60 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
61 | props.get($theme, list.join($key, --key-focus --outline)); | 61 | props.get($theme, list.join($key, --key-focus --outline)...); |
62 | } | 62 | } |
63 | 63 | ||
64 | @include iro.bem-modifier('outline') { | 64 | @include iro.bem-modifier('outline') { |
65 | background-color: transparent; | 65 | background-color: transparent; |
66 | border-color: props.get($theme, list.join($key, --disabled --outline-border)); | 66 | border-color: props.get($theme, list.join($key, --disabled --outline-border)...); |
67 | } | 67 | } |
68 | 68 | ||
69 | @include -apply-theme($theme, $key); | 69 | @include -apply-theme($theme, $key); |
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index cc9afc9..25e68d2 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -1,70 +1,44 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
3 | 4 | @use 'avatar.vars' as avatar; | |
4 | @include iro.props-namespace('card') { | 5 | |
5 | @include iro.props-store(( | 6 | @forward 'card.vars'; |
6 | --dims: ( | 7 | @use 'card.vars' as vars; |
7 | --divider: fn.global-dim(--border --thin), | 8 | |
8 | --pad-i: fn.global-dim(--size --300), | 9 | @mixin styles { |
9 | --pad-b: fn.global-dim(--size --250), | 10 | @include props.materialize(meta.module-variables('vars')); |
10 | --spacing: fn.global-dim(--size --200), | 11 | |
11 | --rounding: fn.global-dim(--rounding), | 12 | @include iro.bem-object('card') { |
12 | |||
13 | --hover: ( | ||
14 | --offset-b: calc(-1 * fn.global-dim(--size --65)), | ||
15 | ), | ||
16 | |||
17 | --key-focus: ( | ||
18 | --border: fn.global-dim(--key-focus --border), | ||
19 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
20 | --outline: fn.global-dim(--key-focus --outline), | ||
21 | ), | ||
22 | ), | ||
23 | --colors: ( | ||
24 | --bg: fn.global-color(--bg-l2), | ||
25 | --divider: fn.global-color(--border-mute), | ||
26 | |||
27 | --key-focus: ( | ||
28 | --label: fn.global-color(--focus --text), | ||
29 | --border: fn.global-color(--focus --border), | ||
30 | --outline: fn.global-color(--focus --outline), | ||
31 | ), | ||
32 | |||
33 | --quiet: ( | ||
34 | --image: fn.global-color(--bg-base), | ||
35 | |||
36 | --hover: ( | ||
37 | --image: fn.global-color(--border), | ||
38 | ), | ||
39 | ) | ||
40 | ), | ||
41 | )); | ||
42 | |||
43 | @include iro.bem-object(iro.props-namespace()) { | ||
44 | display: block; | 13 | display: block; |
45 | margin: calc(-1 * fn.dim(--key-focus --border)); | 14 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
46 | background-color: fn.color(--bg); | 15 | background-color: props.get(vars.$bg-color); |
47 | background-clip: content-box; | 16 | background-clip: content-box; |
48 | border: fn.dim(--key-focus --border-offset) solid transparent; | 17 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
49 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | 18 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); |
50 | transition: transform .2s; | 19 | transition: transform .2s; |
51 | 20 | ||
52 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 21 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
53 | &:hover, | 22 | &:hover, |
54 | &:active, | 23 | &:active, |
55 | &:focus-visible { | 24 | &:focus-visible { |
56 | transform: translateY(fn.dim(--hover --offset-b)); | 25 | transform: translateY(props.get(vars.$hover--offset-b)); |
57 | } | 26 | } |
58 | 27 | ||
59 | &:focus-visible { | 28 | &:focus-visible { |
60 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 29 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
61 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 30 | box-shadow: |
31 | 0 | ||
32 | 0 | ||
33 | 0 | ||
34 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
35 | props.get(vars.$key-focus--outline-color); | ||
62 | } | 36 | } |
63 | } | 37 | } |
64 | 38 | ||
65 | @include iro.bem-elem('avatar') { | 39 | @include iro.bem-elem('avatar') { |
66 | margin-block-start: fn.dim(--pad-b); | 40 | margin-block-start: props.get(vars.$pad-b); |
67 | margin-inline-start: fn.dim(--pad-i); | 41 | margin-inline-start: props.get(vars.$pad-i); |
68 | } | 42 | } |
69 | 43 | ||
70 | @include iro.bem-elem('image') { | 44 | @include iro.bem-elem('image') { |
@@ -74,23 +48,23 @@ | |||
74 | transition: transform .2s, opacity .2s; | 48 | transition: transform .2s, opacity .2s; |
75 | 49 | ||
76 | &:first-child { | 50 | &:first-child { |
77 | border-start-start-radius: fn.dim(--rounding); | 51 | border-start-start-radius: props.get(vars.$rounding); |
78 | border-start-end-radius: fn.dim(--rounding); | 52 | border-start-end-radius: props.get(vars.$rounding); |
79 | } | 53 | } |
80 | 54 | ||
81 | &:last-child { | 55 | &:last-child { |
82 | border-end-start-radius: fn.dim(--rounding); | 56 | border-end-start-radius: props.get(vars.$rounding); |
83 | border-end-end-radius: fn.dim(--rounding); | 57 | border-end-end-radius: props.get(vars.$rounding); |
84 | } | 58 | } |
85 | 59 | ||
86 | @include iro.bem-next-elem('avatar') { | 60 | @include iro.bem-next-elem('avatar') { |
87 | margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); | 61 | margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); |
88 | } | 62 | } |
89 | } | 63 | } |
90 | 64 | ||
91 | @include iro.bem-elem('body') { | 65 | @include iro.bem-elem('body') { |
92 | padding-block: fn.dim(--pad-b); | 66 | padding-block: props.get(vars.$pad-b); |
93 | padding-inline: fn.dim(--pad-i); | 67 | padding-inline: props.get(vars.$pad-i); |
94 | 68 | ||
95 | &::before { | 69 | &::before { |
96 | display: block; | 70 | display: block; |
@@ -100,20 +74,20 @@ | |||
100 | } | 74 | } |
101 | 75 | ||
102 | @include iro.bem-elem('content') { | 76 | @include iro.bem-elem('content') { |
103 | margin-block-start: fn.dim(--spacing); | 77 | margin-block-start: props.get(vars.$spacing); |
104 | } | 78 | } |
105 | 79 | ||
106 | @include iro.bem-elem('footer') { | 80 | @include iro.bem-elem('footer') { |
107 | padding-block: 0 fn.dim(--pad-b); | 81 | padding-block: 0 props.get(vars.$pad-b); |
108 | padding-inline: fn.dim(--pad-i); | 82 | padding-inline: props.get(vars.$pad-i); |
109 | margin-block-start: calc(-1 * fn.dim(--pad-b)); | 83 | margin-block-start: calc(-1 * props.get(vars.$pad-b)); |
110 | 84 | ||
111 | &::before { | 85 | &::before { |
112 | display: block; | 86 | display: block; |
113 | block-size: fn.dim(--divider); | 87 | block-size: props.get(vars.$divider-width); |
114 | margin-block: fn.dim(--spacing); | 88 | margin-block: props.get(vars.$spacing); |
115 | content: ''; | 89 | content: ''; |
116 | background-color: fn.color(--divider); | 90 | background-color: props.get(vars.$divider-width); |
117 | } | 91 | } |
118 | } | 92 | } |
119 | 93 | ||
@@ -129,9 +103,9 @@ | |||
129 | transform: none; | 103 | transform: none; |
130 | 104 | ||
131 | @include iro.bem-elem('image') { | 105 | @include iro.bem-elem('image') { |
132 | background-color: fn.color(--quiet --hover --image); | 106 | background-color: props.get(vars.$quiet--hover--image-color); |
133 | opacity: .75; | 107 | opacity: .75; |
134 | transform: translateY(fn.dim(--hover --offset-b)); | 108 | transform: translateY(props.get(vars.$hover--offset-b)); |
135 | } | 109 | } |
136 | } | 110 | } |
137 | 111 | ||
@@ -140,9 +114,14 @@ | |||
140 | box-shadow: none; | 114 | box-shadow: none; |
141 | 115 | ||
142 | @include iro.bem-elem('image') { | 116 | @include iro.bem-elem('image') { |
143 | background-color: fn.color(--quiet --hover --image); | 117 | background-color: props.get(vars.$quiet--hover--image-color); |
144 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 118 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
145 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 119 | box-shadow: |
120 | 0 | ||
121 | 0 | ||
122 | 0 | ||
123 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
124 | props.get(vars.$key-focus--outline-width); | ||
146 | opacity: 1; | 125 | opacity: 1; |
147 | } | 126 | } |
148 | } | 127 | } |
@@ -150,16 +129,16 @@ | |||
150 | 129 | ||
151 | @include iro.bem-elem('image') { | 130 | @include iro.bem-elem('image') { |
152 | position: relative; | 131 | position: relative; |
153 | margin: calc(-1 * fn.dim(--key-focus --border)); | 132 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
154 | background-color: fn.color(--quiet --image); | 133 | background-color: props.get(vars.$quiet--image-color); |
155 | background-clip: padding-box; | 134 | background-clip: padding-box; |
156 | border: fn.dim(--key-focus --border-offset) solid transparent; | 135 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
157 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | 136 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); |
158 | } | 137 | } |
159 | 138 | ||
160 | @include iro.bem-elem('body') { | 139 | @include iro.bem-elem('body') { |
161 | padding: 0; | 140 | padding: 0; |
162 | padding-block-start: fn.dim(--spacing); | 141 | padding-block-start: props.get(vars.$spacing); |
163 | } | 142 | } |
164 | 143 | ||
165 | @include iro.bem-elem('footer') { | 144 | @include iro.bem-elem('footer') { |
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss new file mode 100644 index 0000000..bf5f6db --- /dev/null +++ b/src/objects/_card.vars.scss | |||
@@ -0,0 +1,25 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; | ||
6 | $pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; | ||
7 | $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; | ||
8 | $spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; | ||
9 | $rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; | ||
10 | |||
11 | $hover--offset-b: props.def(--o-card--rounding, calc(-1 * props.get(core.$size--65))) !default; | ||
12 | |||
13 | $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2)) !default; | ||
18 | $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute)) !default; | ||
19 | |||
20 | $key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; | ||
21 | $key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | ||
22 | $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | ||
23 | |||
24 | $quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base)) !default; | ||
25 | $quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border)) !default; | ||
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 8d82cd5..c6385bc 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss | |||
@@ -1,72 +1,35 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
4 | @use '../core.vars' as core; | ||
3 | 5 | ||
4 | @include iro.props-namespace('checkbox') { | 6 | @forward 'checkbox.vars'; |
5 | @include iro.props-store(( | 7 | @use 'checkbox.vars' as vars; |
6 | --dims: ( | ||
7 | --size: fn.global-dim(--size --175), | ||
8 | --label-gap: fn.global-dim(--size --125), | ||
9 | --border: fn.global-dim(--border --medium), | ||
10 | --pad-i: fn.global-dim(--size --65), | ||
11 | --pad-b: fn.global-dim(--size --65), | ||
12 | --rounding: fn.global-dim(--rounding), | ||
13 | --spacing-sibling: fn.global-dim(--size --300), | ||
14 | 8 | ||
15 | --key-focus: ( | 9 | @mixin styles { |
16 | --border: fn.global-dim(--key-focus --border), | 10 | @include props.materialize(meta.module-variables('vars')); |
17 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
18 | --outline: fn.global-dim(--key-focus --outline), | ||
19 | ), | ||
20 | ), | ||
21 | --colors: ( | ||
22 | --box-border: fn.global-color(--text-mute-more), | ||
23 | --box-bg: fn.global-color(--base --75), | ||
24 | |||
25 | --hover: ( | ||
26 | --label: fn.global-color(--heading), | ||
27 | --box-border: fn.global-color(--text-mute), | ||
28 | ), | ||
29 | --accent: ( | ||
30 | --box-border: fn.global-color(--accent --900), | ||
31 | |||
32 | --hover: ( | ||
33 | --box-border: fn.global-color(--accent --1000), | ||
34 | ), | ||
35 | ), | ||
36 | --disabled: ( | ||
37 | --label: fn.global-color(--text-disabled), | ||
38 | --box-border: fn.global-color(--border-strong), | ||
39 | --box-bg: fn.global-color(--base --75), | ||
40 | ), | ||
41 | --key-focus: ( | ||
42 | --label: fn.global-color(--focus --text), | ||
43 | --border: fn.global-color(--focus --border), | ||
44 | --outline: fn.global-color(--focus --outline), | ||
45 | ), | ||
46 | ), | ||
47 | )); | ||
48 | 11 | ||
49 | @include iro.bem-object(iro.props-namespace()) { | 12 | @include iro.bem-object('checkbox') { |
50 | position: relative; | 13 | position: relative; |
51 | display: inline-block; | 14 | display: inline-block; |
52 | padding-block: fn.dim(--pad-b); | 15 | padding-block: props.get(vars.$pad-b); |
53 | padding-inline: fn.dim(--pad-i); | 16 | padding-inline: props.get(vars.$pad-i); |
54 | margin-inline: | 17 | margin-inline: |
55 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) | 18 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
56 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset)); | 19 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); |
57 | 20 | ||
58 | @include iro.bem-elem('box') { | 21 | @include iro.bem-elem('box') { |
59 | position: relative; | 22 | position: relative; |
60 | display: inline-block; | 23 | display: inline-block; |
61 | flex: 0 0 auto; | 24 | flex: 0 0 auto; |
62 | inline-size: fn.dim(--size); | 25 | inline-size: props.get(vars.$size); |
63 | block-size: fn.dim(--size); | 26 | block-size: props.get(vars.$size); |
64 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset)); | 27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); |
65 | vertical-align: top; | 28 | vertical-align: top; |
66 | background-color: fn.color(--box-border); | 29 | background-color: props.get(vars.$box-border-color); |
67 | background-clip: padding-box; | 30 | background-clip: padding-box; |
68 | border: fn.dim(--key-focus --border-offset) solid transparent; | 31 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
69 | border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset)); | 32 | border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); |
70 | 33 | ||
71 | &::before, | 34 | &::before, |
72 | &::after { | 35 | &::after { |
@@ -76,23 +39,23 @@ | |||
76 | } | 39 | } |
77 | 40 | ||
78 | &::before { | 41 | &::before { |
79 | inset-block-start: fn.dim(--border); | 42 | inset-block-start: props.get(vars.$border-width); |
80 | inset-inline-start: fn.dim(--border); | 43 | inset-inline-start: props.get(vars.$border-width); |
81 | z-index: 2; | 44 | z-index: 2; |
82 | inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); | 45 | inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); |
83 | block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); | 46 | block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); |
84 | background-color: fn.color(--box-bg); | 47 | background-color: props.get(vars.$box-bg-color); |
85 | transition: transform .2s ease; | 48 | transition: transform .2s ease; |
86 | } | 49 | } |
87 | 50 | ||
88 | &::after { | 51 | &::after { |
89 | inset-block-start: calc(.5 * fn.dim(--size) - 1px); | 52 | inset-block-start: calc(.5 * props.get(vars.$size) - 1px); |
90 | inset-inline-start: calc(1.5 * fn.dim(--border)); | 53 | inset-inline-start: calc(1.5 * props.get(vars.$border-width)); |
91 | z-index: 3; | 54 | z-index: 3; |
92 | box-sizing: border-box; | 55 | box-sizing: border-box; |
93 | inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); | 56 | inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); |
94 | block-size: 0; | 57 | block-size: 0; |
95 | border-color: fn.color(--box-bg); | 58 | border-color: props.get(vars.$box-bg-color); |
96 | border-style: solid; | 59 | border-style: solid; |
97 | border-radius: 2px; | 60 | border-radius: 2px; |
98 | transition: transform .2s ease; | 61 | transition: transform .2s ease; |
@@ -104,14 +67,14 @@ | |||
104 | 67 | ||
105 | @include iro.bem-elem('check-icon') { | 68 | @include iro.bem-elem('check-icon') { |
106 | position: absolute; | 69 | position: absolute; |
107 | inset-block-start: calc(1 * fn.dim(--border)); | 70 | inset-block-start: calc(1 * props.get(vars.$border-width)); |
108 | inset-inline-start: calc(1 * fn.dim(--border)); | 71 | inset-inline-start: calc(1 * props.get(vars.$border-width)); |
109 | z-index: 2; | 72 | z-index: 2; |
110 | display: block; | 73 | display: block; |
111 | inline-size: calc(100% - 2 * fn.dim(--border)); | 74 | inline-size: calc(100% - 2 * props.get(vars.$border-width)); |
112 | block-size: calc(100% - 2 * fn.dim(--border)); | 75 | block-size: calc(100% - 2 * props.get(vars.$border-width)); |
113 | margin: 0; | 76 | margin: 0; |
114 | color: fn.color(--box-bg); | 77 | color: props.get(vars.$box-bg-color); |
115 | stroke-width: iro.fn-px-to-rem(3px); | 78 | stroke-width: iro.fn-px-to-rem(3px); |
116 | transition: transform .2s ease; | 79 | transition: transform .2s ease; |
117 | transform: scale(0); | 80 | transform: scale(0); |
@@ -119,7 +82,7 @@ | |||
119 | } | 82 | } |
120 | 83 | ||
121 | @include iro.bem-elem('label') { | 84 | @include iro.bem-elem('label') { |
122 | margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); | 85 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); |
123 | } | 86 | } |
124 | 87 | ||
125 | @include iro.bem-elem('native') { | 88 | @include iro.bem-elem('native') { |
@@ -133,16 +96,16 @@ | |||
133 | margin: 0; | 96 | margin: 0; |
134 | overflow: hidden; | 97 | overflow: hidden; |
135 | appearance: none; | 98 | appearance: none; |
136 | border-radius: fn.dim(--rounding); | 99 | border-radius: props.get(vars.$rounding); |
137 | 100 | ||
138 | &:hover, | 101 | &:hover, |
139 | &:focus-visible { | 102 | &:focus-visible { |
140 | @include iro.bem-sibling-elem('label') { | 103 | @include iro.bem-sibling-elem('label') { |
141 | color: fn.color(--hover --label); | 104 | color: props.get(vars.$hover--label-color); |
142 | } | 105 | } |
143 | 106 | ||
144 | @include iro.bem-sibling-elem('box') { | 107 | @include iro.bem-sibling-elem('box') { |
145 | background-color: fn.color(--hover --box-border); | 108 | background-color: props.get(vars.$hover--box-border-color); |
146 | } | 109 | } |
147 | } | 110 | } |
148 | 111 | ||
@@ -176,26 +139,31 @@ | |||
176 | 139 | ||
177 | &:disabled { | 140 | &:disabled { |
178 | @include iro.bem-sibling-elem('label') { | 141 | @include iro.bem-sibling-elem('label') { |
179 | color: fn.color(--disabled --label); | 142 | color: props.get(vars.$disabled--label-color); |
180 | } | 143 | } |
181 | 144 | ||
182 | @include iro.bem-sibling-elem('box') { | 145 | @include iro.bem-sibling-elem('box') { |
183 | background-color: fn.color(--disabled --box-border); | 146 | background-color: props.get(vars.$disabled--box-border-color); |
184 | 147 | ||
185 | &::before { | 148 | &::before { |
186 | background-color: fn.color(--disabled --box-bg); | 149 | background-color: props.get(vars.$disabled--box-bg-color); |
187 | } | 150 | } |
188 | } | 151 | } |
189 | } | 152 | } |
190 | 153 | ||
191 | &:focus-visible { | 154 | &:focus-visible { |
192 | @include iro.bem-sibling-elem('label') { | 155 | @include iro.bem-sibling-elem('label') { |
193 | color: fn.color(--key-focus --label); | 156 | color: props.get(vars.$key-focus--label-color); |
194 | } | 157 | } |
195 | 158 | ||
196 | @include iro.bem-sibling-elem('box') { | 159 | @include iro.bem-sibling-elem('box') { |
197 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 160 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
198 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 161 | box-shadow: |
162 | 0 | ||
163 | 0 | ||
164 | 0 | ||
165 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
166 | props.get(vars.$key-focus--outline-color); | ||
199 | } | 167 | } |
200 | } | 168 | } |
201 | } | 169 | } |
@@ -210,48 +178,48 @@ | |||
210 | @include iro.bem-elem('native') { | 178 | @include iro.bem-elem('native') { |
211 | &:checked { | 179 | &:checked { |
212 | @include iro.bem-sibling-elem('box') { | 180 | @include iro.bem-sibling-elem('box') { |
213 | background-color: fn.color(--accent --box-border); | 181 | background-color: props.get(vars.$accent--box-border-color); |
214 | } | 182 | } |
215 | 183 | ||
216 | &:hover, | 184 | &:hover, |
217 | &:focus-visible { | 185 | &:focus-visible { |
218 | @include iro.bem-sibling-elem('box') { | 186 | @include iro.bem-sibling-elem('box') { |
219 | background-color: fn.color(--accent --hover --box-border); | 187 | background-color: props.get(vars.$accent--hover--box-border-color); |
220 | } | 188 | } |
221 | } | 189 | } |
222 | } | 190 | } |
223 | 191 | ||
224 | &:indeterminate { | 192 | &:indeterminate { |
225 | @include iro.bem-sibling-elem('box') { | 193 | @include iro.bem-sibling-elem('box') { |
226 | background-color: fn.color(--accent --box-border); | 194 | background-color: props.get(vars.$accent--box-border-color); |
227 | } | 195 | } |
228 | 196 | ||
229 | &:hover, | 197 | &:hover, |
230 | &:focus-visible { | 198 | &:focus-visible { |
231 | @include iro.bem-sibling-elem('box') { | 199 | @include iro.bem-sibling-elem('box') { |
232 | background-color: fn.color(--accent --hover --box-border); | 200 | background-color: props.get(vars.$accent--hover--box-border-color); |
233 | } | 201 | } |
234 | } | 202 | } |
235 | } | 203 | } |
236 | 204 | ||
237 | &:disabled { | 205 | &:disabled { |
238 | @include iro.bem-sibling-elem('box') { | 206 | @include iro.bem-sibling-elem('box') { |
239 | background-color: fn.color(--disabled --box-border); | 207 | background-color: props.get(vars.$disabled--box-border-color); |
240 | 208 | ||
241 | &::before { | 209 | &::before { |
242 | background-color: fn.color(--disabled --box-bg); | 210 | background-color: props.get(vars.$disabled--box-bg-color); |
243 | } | 211 | } |
244 | } | 212 | } |
245 | 213 | ||
246 | &:checked { | 214 | &:checked { |
247 | @include iro.bem-sibling-elem('box') { | 215 | @include iro.bem-sibling-elem('box') { |
248 | background-color: fn.color(--disabled --box-border); | 216 | background-color: props.get(vars.$disabled--box-border-color); |
249 | } | 217 | } |
250 | } | 218 | } |
251 | 219 | ||
252 | &:indeterminate { | 220 | &:indeterminate { |
253 | @include iro.bem-sibling-elem('box') { | 221 | @include iro.bem-sibling-elem('box') { |
254 | background-color: fn.color(--disabled --box-border); | 222 | background-color: props.get(vars.$disabled--box-border-color); |
255 | } | 223 | } |
256 | } | 224 | } |
257 | } | 225 | } |
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss new file mode 100644 index 0000000..d0785d7 --- /dev/null +++ b/src/objects/_checkbox.vars.scss | |||
@@ -0,0 +1,32 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default; | ||
6 | $label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default; | ||
7 | $border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; | ||
8 | $pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; | ||
9 | $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; | ||
10 | $rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; | ||
11 | $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; | ||
12 | |||
13 | $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default; | ||
18 | $box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default; | ||
19 | |||
20 | $hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading)) !default; | ||
21 | $hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute)) !default; | ||
22 | |||
23 | $accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900)) !default; | ||
24 | $accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000)) !default; | ||
25 | |||
26 | $disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; | ||
27 | $disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong)) !default; | ||
28 | $disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75)) !default; | ||
29 | |||
30 | $key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; | ||
31 | $key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | ||
32 | $key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | ||
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 7d96206..122da78 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss | |||
@@ -1,89 +1,27 @@ | |||
1 | @use 'sass:map'; | 1 | @use 'sass:map'; |
2 | @use 'sass:meta'; | ||
3 | @use 'sass:string'; | ||
2 | @use 'iro-sass/src/iro-sass' as iro; | 4 | @use 'iro-sass/src/iro-sass' as iro; |
3 | @use '../functions' as fn; | 5 | @use '../props'; |
4 | @use '../config'; | 6 | @use '../core.vars' as core; |
5 | 7 | ||
6 | $static-themes: 'black' 'white' !default; | 8 | @forward 'divider.vars'; |
9 | @use 'divider.vars' as vars; | ||
7 | 10 | ||
8 | @include iro.props-namespace('divider') { | 11 | @mixin styles { |
9 | @include iro.props-store(( | 12 | @include props.materialize(meta.module-variables('vars')); |
10 | --dims: ( | ||
11 | --margin-b: fn.global-dim(--size --85), | ||
12 | |||
13 | --strong: ( | ||
14 | --border: fn.global-dim(--border --thick), | ||
15 | --label-font-size: fn.global-dim(--font-size --100), | ||
16 | ), | ||
17 | --medium: ( | ||
18 | --border: fn.global-dim(--border --medium), | ||
19 | --label-font-size: fn.global-dim(--font-size --75), | ||
20 | ), | ||
21 | --faint: ( | ||
22 | --border: fn.global-dim(--border --thin), | ||
23 | --label-font-size: fn.global-dim(--font-size --50), | ||
24 | ), | ||
25 | ), | ||
26 | --colors: ( | ||
27 | --strong: ( | ||
28 | --bg: fn.global-color(--text), | ||
29 | --label: fn.global-color(--text), | ||
30 | ), | ||
31 | --medium: ( | ||
32 | --bg: fn.global-color(--border), | ||
33 | --label: fn.global-color(--text-mute), | ||
34 | ), | ||
35 | --faint: ( | ||
36 | --bg: fn.global-color(--border), | ||
37 | --label: fn.global-color(--text-mute-more), | ||
38 | ), | ||
39 | ), | ||
40 | )); | ||
41 | |||
42 | @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) { | ||
43 | @if $color != '--base' { | ||
44 | @include iro.props-store(( | ||
45 | --colors: ( | ||
46 | $color: ( | ||
47 | --bg: fn.global-color($color --800), | ||
48 | --label: fn.global-color($color --1000), | ||
49 | ) | ||
50 | ), | ||
51 | )); | ||
52 | } | ||
53 | } | ||
54 | |||
55 | @each $theme in $static-themes { | ||
56 | @include iro.props-store(( | ||
57 | --colors: ( | ||
58 | --static-#{$theme}: ( | ||
59 | --strong: ( | ||
60 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
61 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
62 | ), | ||
63 | --medium: ( | ||
64 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
65 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
66 | ), | ||
67 | --faint: ( | ||
68 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
69 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
70 | ), | ||
71 | ) | ||
72 | ), | ||
73 | )); | ||
74 | } | ||
75 | 13 | ||
76 | @include iro.bem-object(iro.props-namespace()) { | 14 | @include iro.bem-object('divider') { |
77 | display: flex; | 15 | display: flex; |
78 | flex: 0 0 auto; | 16 | flex: 0 0 auto; |
79 | flex-direction: row; | 17 | flex-direction: row; |
80 | align-items: center; | 18 | align-items: center; |
81 | block-size: 1em; | 19 | block-size: 1em; |
82 | margin-block: fn.dim(--margin-b); | 20 | margin-block: props.get(vars.$margin-b); |
83 | font-size: fn.dim(--strong --label-font-size); | 21 | font-size: props.get(vars.$strong--label-font-size); |
84 | font-weight: 700; | 22 | font-weight: 700; |
85 | line-height: 1; | 23 | line-height: 1; |
86 | color: fn.color(--strong --label); | 24 | color: props.get(vars.$strong--label-color); |
87 | text-transform: uppercase; | 25 | text-transform: uppercase; |
88 | letter-spacing: .5px; | 26 | letter-spacing: .5px; |
89 | 27 | ||
@@ -91,9 +29,9 @@ $static-themes: 'black' 'white' !default; | |||
91 | &::after { | 29 | &::after { |
92 | flex: 1 1 auto; | 30 | flex: 1 1 auto; |
93 | inline-size: 100%; | 31 | inline-size: 100%; |
94 | block-size: fn.dim(--strong --border); | 32 | block-size: props.get(vars.$strong--border-width); |
95 | content: ''; | 33 | content: ''; |
96 | background-color: fn.color(--strong --bg); | 34 | background-color: props.get(vars.$strong--bg-color); |
97 | } | 35 | } |
98 | 36 | ||
99 | &::before { | 37 | &::before { |
@@ -109,7 +47,7 @@ $static-themes: 'black' 'white' !default; | |||
109 | inline-size: 1px; | 47 | inline-size: 1px; |
110 | block-size: auto; | 48 | block-size: auto; |
111 | margin-block: 0; | 49 | margin-block: 0; |
112 | background-color: fn.color(--faint --bg); | 50 | background-color: props.get(vars.$faint--bg-color); |
113 | 51 | ||
114 | &::before, | 52 | &::before, |
115 | &::after { | 53 | &::after { |
@@ -118,26 +56,26 @@ $static-themes: 'black' 'white' !default; | |||
118 | } | 56 | } |
119 | 57 | ||
120 | @include iro.bem-modifier('medium') { | 58 | @include iro.bem-modifier('medium') { |
121 | font-size: fn.dim(--medium --label-font-size); | 59 | font-size: props.get(vars.$medium--label-font-size); |
122 | font-weight: 500; | 60 | font-weight: 500; |
123 | color: fn.color(--medium --label); | 61 | color: props.get(vars.$medium--label-color); |
124 | 62 | ||
125 | &::before, | 63 | &::before, |
126 | &::after { | 64 | &::after { |
127 | block-size: fn.dim(--medium --border); | 65 | block-size: props.get(vars.$medium--border-width); |
128 | background-color: fn.color(--medium --bg); | 66 | background-color: props.get(vars.$medium--bg-color); |
129 | } | 67 | } |
130 | } | 68 | } |
131 | 69 | ||
132 | @include iro.bem-modifier('faint') { | 70 | @include iro.bem-modifier('faint') { |
133 | font-size: fn.dim(--faint --label-font-size); | 71 | font-size: props.get(vars.$faint--label-font-size); |
134 | font-weight: 500; | 72 | font-weight: 500; |
135 | color: fn.color(--faint --label); | 73 | color: props.get(vars.$faint--label-color); |
136 | 74 | ||
137 | &::before, | 75 | &::before, |
138 | &::after { | 76 | &::after { |
139 | block-size: fn.dim(--faint --border); | 77 | block-size: props.get(vars.$faint--border-width); |
140 | background-color: fn.color(--faint --bg); | 78 | background-color: props.get(vars.$faint--bg-color); |
141 | } | 79 | } |
142 | } | 80 | } |
143 | 81 | ||
@@ -152,49 +90,49 @@ $static-themes: 'black' 'white' !default; | |||
152 | } | 90 | } |
153 | } | 91 | } |
154 | 92 | ||
155 | @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { | 93 | @each $theme in map.keys(props.get(vars.$themes)) { |
156 | @include iro.bem-modifier($color) { | 94 | @include iro.bem-modifier(string.slice($theme, 3)) { |
157 | &::before, | 95 | &::before, |
158 | &::after { | 96 | &::after { |
159 | background-color: fn.color(--#{$color} --bg); | 97 | background-color: props.get(vars.$themes, $theme, --bg); |
160 | } | 98 | } |
161 | 99 | ||
162 | @include iro.bem-elem('label') { | 100 | @include iro.bem-elem('label') { |
163 | color: fn.color(--#{$color} --label); | 101 | color: props.get(vars.$themes, $theme, --label); |
164 | } | 102 | } |
165 | } | 103 | } |
166 | } | 104 | } |
167 | 105 | ||
168 | @each $theme in $static-themes { | 106 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
169 | @include iro.bem-modifier(static-#{$theme}) { | 107 | @include iro.bem-modifier(string.slice($theme, 3)) { |
170 | &::before, | 108 | &::before, |
171 | &::after { | 109 | &::after { |
172 | background-color: fn.color(--static-#{$theme} --strong --bg); | 110 | background-color: props.get(vars.$static-themes, $theme, --strong, --bg); |
173 | } | 111 | } |
174 | 112 | ||
175 | @include iro.bem-elem('label') { | 113 | @include iro.bem-elem('label') { |
176 | color: fn.color(--static-#{$theme} --strong --label); | 114 | color: props.get(vars.$static-themes, $theme, --strong, --label); |
177 | } | 115 | } |
178 | 116 | ||
179 | @include iro.bem-modifier('medium') { | 117 | @include iro.bem-modifier('medium') { |
180 | &::before, | 118 | &::before, |
181 | &::after { | 119 | &::after { |
182 | background-color: fn.color(--static-#{$theme} --medium --bg); | 120 | background-color: props.get(vars.$static-themes, $theme, --medium, --bg); |
183 | } | 121 | } |
184 | 122 | ||
185 | @include iro.bem-elem('label') { | 123 | @include iro.bem-elem('label') { |
186 | color: fn.color(--static-#{$theme} --medium --label); | 124 | color: props.get(vars.$static-themes, $theme, --medium, --label); |
187 | } | 125 | } |
188 | } | 126 | } |
189 | 127 | ||
190 | @include iro.bem-modifier('faint') { | 128 | @include iro.bem-modifier('faint') { |
191 | &::before, | 129 | &::before, |
192 | &::after { | 130 | &::after { |
193 | background-color: fn.color(--static-#{$theme} --faint --bg); | 131 | background-color: props.get(vars.$static-themes, $theme, --faint, --bg); |
194 | } | 132 | } |
195 | 133 | ||
196 | @include iro.bem-elem('label') { | 134 | @include iro.bem-elem('label') { |
197 | color: fn.color(--static-#{$theme} --faint --label); | 135 | color: props.get(vars.$static-themes, $theme, --faint, --label); |
198 | } | 136 | } |
199 | } | 137 | } |
200 | } | 138 | } |
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss new file mode 100644 index 0000000..09e734f --- /dev/null +++ b/src/objects/_divider.vars.scss | |||
@@ -0,0 +1,59 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; | ||
6 | |||
7 | $strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; | ||
8 | $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; | ||
9 | |||
10 | $medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; | ||
11 | $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; | ||
12 | |||
13 | $faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; | ||
14 | $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; | ||
15 | |||
16 | $strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text)) !default; | ||
17 | $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text)) !default; | ||
18 | |||
19 | $medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border)) !default; | ||
20 | $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute)) !default; | ||
21 | |||
22 | $faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border)) !default; | ||
23 | $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more)) !default; | ||
24 | |||
25 | $static-themes: props.def(--o-divider); | ||
26 | |||
27 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
28 | $button-theme: #{$theme}-static; | ||
29 | |||
30 | $static-themes: props.merge($static-themes, ( | ||
31 | $button-theme: ( | ||
32 | --strong: ( | ||
33 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
34 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
35 | ), | ||
36 | --medium: ( | ||
37 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
38 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
39 | ), | ||
40 | --faint: ( | ||
41 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
42 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
43 | ), | ||
44 | ) | ||
45 | )); | ||
46 | } | ||
47 | |||
48 | $themes-config: --accent --negative !default; | ||
49 | |||
50 | $themes: props.def(--o-divider); | ||
51 | |||
52 | @each $theme in $themes-config { | ||
53 | $themes: props.merge($themes, ( | ||
54 | $theme: ( | ||
55 | --bg: props.get(core.$static-colors, $theme, --800), | ||
56 | --label: props.get(core.$static-colors, $theme, --1000), | ||
57 | ) | ||
58 | )); | ||
59 | } | ||
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index 41c614c..7747bbf 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss | |||
@@ -1,72 +1,48 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
3 | @use 'sass:math'; | 4 | @use 'icon.vars' as icon; |
4 | 5 | ||
5 | @use 'icon'; | 6 | @forward 'emoji.vars'; |
7 | @use 'emoji.vars' as vars; | ||
6 | 8 | ||
7 | @include iro.props-namespace('emoji') { | 9 | @mixin styles { |
8 | @include iro.props-store(( | 10 | @include props.materialize(meta.module-variables('vars')); |
9 | --dims: ( | ||
10 | --size: calc(1 / 14 * 18em), | ||
11 | --pad: .3em, | ||
12 | --rounding: fn.global-dim(--rounding), | ||
13 | --zoom: 3, | ||
14 | --valign: -.25em, | ||
15 | 11 | ||
16 | --125: ( | 12 | @include iro.bem-object('emoji') { |
17 | --size: calc(1 / 14 * 23em), | ||
18 | --valign: -.45em, | ||
19 | ), | ||
20 | |||
21 | --150: ( | ||
22 | --size: calc(1 / 14 * 28em), | ||
23 | --valign: -.65em, | ||
24 | ), | ||
25 | |||
26 | --200: ( | ||
27 | --size: calc(1 / 14 * 38em), | ||
28 | --valign: -1em, | ||
29 | ) | ||
30 | ), | ||
31 | --colors: ( | ||
32 | --bg: fn.global-color(--border-mute), | ||
33 | ) | ||
34 | )); | ||
35 | |||
36 | @include iro.bem-object(iro.props-namespace()) { | ||
37 | position: relative; | 13 | position: relative; |
38 | display: inline-block; | 14 | display: inline-block; |
39 | inline-size: calc(fn.dim(--size)); | 15 | inline-size: calc(props.get(vars.$size)); |
40 | block-size: calc(fn.dim(--size)); | 16 | block-size: calc(props.get(vars.$size)); |
41 | padding: calc(fn.dim(--pad)); | 17 | padding: calc(props.get(vars.$pad)); |
42 | margin: calc(-1 * fn.dim(--pad)); | 18 | margin: calc(-1 * props.get(vars.$pad)); |
43 | vertical-align: fn.dim(--valign); | 19 | vertical-align: props.get(vars.$valign); |
44 | object-fit: contain; | 20 | object-fit: contain; |
45 | 21 | ||
46 | @include iro.bem-modifier('icon') { | 22 | @include iro.bem-modifier('icon') { |
47 | margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size))); | 23 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); |
48 | vertical-align: fn.foreign-dim(--icon, --valign); | 24 | vertical-align: props.get(icon.$valign); |
49 | } | 25 | } |
50 | 26 | ||
51 | @each $size in '125' '150' '200' { | 27 | @each $mod, $size, $valign in vars.$sizes { |
52 | @include iro.bem-modifier($size) { | 28 | @include iro.bem-modifier($mod) { |
53 | inline-size: fn.dim(--#{$size} --size); | 29 | inline-size: props.get($size); |
54 | block-size: fn.dim(--#{$size} --size); | 30 | block-size: props.get($size); |
55 | vertical-align: fn.dim(--#{$size} --valign); | 31 | vertical-align: props.get($valign); |
56 | 32 | ||
57 | @include iro.bem-modifier('icon') { | 33 | @include iro.bem-modifier('icon') { |
58 | margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size))); | 34 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); |
59 | } | 35 | } |
60 | } | 36 | } |
61 | } | 37 | } |
62 | 38 | ||
63 | @include iro.bem-modifier('zoomable') { | 39 | @include iro.bem-modifier('zoomable') { |
64 | border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom)); | 40 | border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); |
65 | transition: transform .2s ease, background-color .2s ease; | 41 | transition: transform .2s ease, background-color .2s ease; |
66 | 42 | ||
67 | &:hover { | 43 | &:hover { |
68 | background-color: fn.color(--bg); | 44 | background-color: props.get(vars.$bg-color); |
69 | transform: scale(fn.dim(--zoom)); | 45 | transform: scale(props.get(vars.$zoom)); |
70 | } | 46 | } |
71 | } | 47 | } |
72 | } | 48 | } |
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss new file mode 100644 index 0000000..458ea9a --- /dev/null +++ b/src/objects/_emoji.vars.scss | |||
@@ -0,0 +1,26 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; | ||
6 | $pad: props.def(--o-emoji--pad, .3em) !default; | ||
7 | $rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default; | ||
8 | $zoom: props.def(--o-emoji--zoom, 3) !default; | ||
9 | $valign: props.def(--o-emoji--valign, -.25em) !default; | ||
10 | |||
11 | $size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default; | ||
12 | $valign--125: props.def(--o-emoji--125--valign, -.45em) !default; | ||
13 | |||
14 | $size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default; | ||
15 | $valign--150: props.def(--o-emoji--150--valign, -.65em) !default; | ||
16 | |||
17 | $size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; | ||
18 | $valign--200: props.def(--o-emoji--200--valign, -1em) !default; | ||
19 | |||
20 | $sizes: ( | ||
21 | '125' $size--125 $valign--125, | ||
22 | '150' $size--150 $valign--150, | ||
23 | '200' $size--200 $valign--200, | ||
24 | ) !default; | ||
25 | |||
26 | $bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute)) !default; | ||
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 7cbb7db..23a606d 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss | |||
@@ -1,23 +1,21 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
3 | 4 | ||
4 | @include iro.props-namespace('icon') { | 5 | @forward 'icon.vars'; |
5 | @include iro.props-store(( | 6 | @use 'icon.vars' as vars; |
6 | --dims: ( | ||
7 | --stroke: 1.5px, | ||
8 | --size: calc(1 / 14 * 16em), | ||
9 | --valign: -.2em, | ||
10 | ) | ||
11 | )); | ||
12 | 7 | ||
13 | @include iro.bem-object(iro.props-namespace()) { | 8 | @mixin styles { |
9 | @include props.materialize(meta.module-variables('vars')); | ||
10 | |||
11 | @include iro.bem-object('icon') { | ||
14 | display: inline; | 12 | display: inline; |
15 | inline-size: fn.dim(--size); | 13 | inline-size: props.get(vars.$size); |
16 | block-size: fn.dim(--size); | 14 | block-size: props.get(vars.$size); |
17 | vertical-align: fn.dim(--valign); | 15 | vertical-align: props.get(vars.$valign); |
18 | stroke-linecap: round; | 16 | stroke-linecap: round; |
19 | stroke-linejoin: round; | 17 | stroke-linejoin: round; |
20 | stroke-width: fn.dim(--stroke); | 18 | stroke-width: props.get(vars.$stroke-width); |
21 | 19 | ||
22 | @include iro.bem-modifier('block') { | 20 | @include iro.bem-modifier('block') { |
23 | display: block; | 21 | display: block; |
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss new file mode 100644 index 0000000..dedd23a --- /dev/null +++ b/src/objects/_icon.vars.scss | |||
@@ -0,0 +1,5 @@ | |||
1 | @use '../props'; | ||
2 | |||
3 | $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default; | ||
4 | $size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; | ||
5 | $valign: props.def(--o-icon--valign, -.2em) !default; | ||