diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/.old/objects/_action-menu.scss | 122 | ||||
-rw-r--r-- | src/_config.scss | 3 | ||||
-rw-r--r-- | src/_objects.scss | 6 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 111 | ||||
-rw-r--r-- | src/objects/_avatar.scss (renamed from src/.old/objects/_avatar.scss) | 84 | ||||
-rw-r--r-- | src/objects/_status-indicator.scss (renamed from src/.old/objects/_status-indicator.scss) | 28 |
6 files changed, 174 insertions, 180 deletions
diff --git a/src/.old/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss deleted file mode 100644 index 12e3b5f..0000000 --- a/src/.old/objects/_action-menu.scss +++ /dev/null | |||
@@ -1,122 +0,0 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('action-menu') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --pad-x: 0, | ||
8 | --pad-y: fn.global-dim(--size --85), | ||
9 | --separator: fn.global-dim(--size --85), | ||
10 | --rounding: 3px, | ||
11 | --border: 1px, | ||
12 | --item: ( | ||
13 | --pad-x: fn.global-dim(--size --150), | ||
14 | --pad-y: fn.global-dim(--size --85), | ||
15 | ), | ||
16 | ), | ||
17 | ), 'dims'); | ||
18 | |||
19 | @include iro.props-store(( | ||
20 | --colors: ( | ||
21 | --shadow: 0 .2em .5em rgba(#000, .1), | ||
22 | --border: fn.global-color(--border --stable-lo), | ||
23 | --separator: fn.global-color(--obj), | ||
24 | --icon: fn.global-color(--fg-hi), | ||
25 | --item: ( | ||
26 | --hover: ( | ||
27 | --bg: fn.global-color(--obj-hi), | ||
28 | --label: fn.global-color(--fg-lo), | ||
29 | ), | ||
30 | --disabled: ( | ||
31 | --label: fn.global-color(--fg-hi3), | ||
32 | ), | ||
33 | --key-focus: ( | ||
34 | --bg: fn.global-color(--obj-hi), | ||
35 | --label: fn.global-color(--fg-lo), | ||
36 | --border: fn.global-color(--focus --fill), | ||
37 | --shadow: fn.global-color(--focus --shadow), | ||
38 | ), | ||
39 | ), | ||
40 | ), | ||
41 | ), 'colors'); | ||
42 | |||
43 | @include iro.props-store(( | ||
44 | --colors: ( | ||
45 | --shadow: 0 .2em .5em rgba(#000, .5), | ||
46 | ), | ||
47 | ), 'colors-dark'); | ||
48 | |||
49 | @include iro.bem-object(iro.props-namespace()) { | ||
50 | position: absolute; | ||
51 | z-index: 10000; | ||
52 | top: 0; | ||
53 | left: 0; | ||
54 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
55 | transform: translate(var(--x), var(--y)); | ||
56 | border: fn.dim(--border) solid fn.color(--border); | ||
57 | border-radius: fn.dim(--rounding); | ||
58 | background-clip: padding-box; | ||
59 | background-color: fn.global-color(--bg); | ||
60 | box-shadow: fn.color(--shadow); | ||
61 | color: fn.global-color(--fg); | ||
62 | |||
63 | @include iro.bem-modifier('up-left') { | ||
64 | transform: translate(var(--x), calc(var(--y) - 100%)); | ||
65 | } | ||
66 | |||
67 | @include iro.bem-modifier('up-right') { | ||
68 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); | ||
69 | } | ||
70 | |||
71 | @include iro.bem-modifier('down-right') { | ||
72 | transform: translate(calc(var(--x) - 100%), var(--y)); | ||
73 | } | ||
74 | |||
75 | @include iro.bem-elem('item') { | ||
76 | display: block; | ||
77 | box-sizing: border-box; | ||
78 | width: 100%; | ||
79 | padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); | ||
80 | border: 2px solid transparent; | ||
81 | color: fn.color(--item --disabled --label); | ||
82 | |||
83 | &:link, | ||
84 | &:visited, | ||
85 | &:enabled { | ||
86 | color: currentColor; | ||
87 | |||
88 | &:hover, | ||
89 | &:active { | ||
90 | background-color: fn.color(--item --hover --bg); | ||
91 | color: fn.color(--item --hover --label); | ||
92 | } | ||
93 | |||
94 | @include iro.bem-at-theme('keyboard') { | ||
95 | &:focus { | ||
96 | border-radius: calc(fn.dim(--rounding) - 1px); | ||
97 | border-color: fn.color(--item --key-focus --border); | ||
98 | background-color: fn.color(--item --key-focus --bg); | ||
99 | box-shadow: fn.color(--item --key-focus --shadow); | ||
100 | color: fn.color(--item --key-focus --label); | ||
101 | } | ||
102 | } | ||
103 | } | ||
104 | } | ||
105 | |||
106 | @include iro.bem-elem('separator') { | ||
107 | height: 1px; | ||
108 | margin: fn.dim(--separator) 0; | ||
109 | background-color: fn.color(--separator); | ||
110 | } | ||
111 | |||
112 | @include iro.bem-elem('slot') { | ||
113 | padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); | ||
114 | } | ||
115 | |||
116 | @include iro.bem-elem('icon-slot') { | ||
117 | display: flex; | ||
118 | justify-content: center; | ||
119 | width: fn.foreign-dim(--icon, --size); | ||
120 | } | ||
121 | } | ||
122 | } | ||
diff --git a/src/_config.scss b/src/_config.scss index f4f43fd..56a74e1 100644 --- a/src/_config.scss +++ b/src/_config.scss | |||
@@ -82,9 +82,6 @@ $semantic-colors-common: ( | |||
82 | --focus-raw: --accent, | 82 | --focus-raw: --accent, |
83 | --focus-static: --accent-static, | 83 | --focus-static: --accent-static, |
84 | 84 | ||
85 | --light: --white-transparent, | ||
86 | --shadow: --black-transparent, | ||
87 | |||
88 | --border-mute: --base --200, | 85 | --border-mute: --base --200, |
89 | --border: --base --300, | 86 | --border: --base --300, |
90 | --border-strong: --base --400, | 87 | --border-strong: --base --400, |
diff --git a/src/_objects.scss b/src/_objects.scss index b1872c9..0973920 100644 --- a/src/_objects.scss +++ b/src/_objects.scss | |||
@@ -11,10 +11,10 @@ | |||
11 | @use 'objects/switch'; | 11 | @use 'objects/switch'; |
12 | @use 'objects/action-button'; | 12 | @use 'objects/action-button'; |
13 | // @use 'objects/overflow-button'; | 13 | // @use 'objects/overflow-button'; |
14 | // @use 'objects/status-indicator'; | 14 | @use 'objects/status-indicator'; |
15 | // @use 'objects/avatar'; | 15 | @use 'objects/avatar'; |
16 | // @use 'objects/message'; | 16 | // @use 'objects/message'; |
17 | // @use 'objects/action-menu'; | 17 | @use 'objects/action-menu'; |
18 | // @use 'objects/menu'; | 18 | // @use 'objects/menu'; |
19 | // @use 'objects/icon-nav'; | 19 | // @use 'objects/icon-nav'; |
20 | // @use 'objects/backdrop'; | 20 | // @use 'objects/backdrop'; |
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss new file mode 100644 index 0000000..2a74834 --- /dev/null +++ b/src/objects/_action-menu.scss | |||
@@ -0,0 +1,111 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('action-menu') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --pad-i: 0, | ||
8 | --pad-b: fn.global-dim(--size --85), | ||
9 | --separator: fn.global-dim(--size --85), | ||
10 | --rounding: fn.global-dim(--rounding), | ||
11 | --border: fn.global-dim(--border --thin), | ||
12 | --item: ( | ||
13 | --pad-i: fn.global-dim(--size --150), | ||
14 | --pad-b: fn.global-dim(--size --85), | ||
15 | ), | ||
16 | ), | ||
17 | --colors: ( | ||
18 | --bg: fn.global-color(--bg-l2), | ||
19 | --text: fn.global-color(--text), | ||
20 | --shadow: 0 .2em .5em rgba(#000, .1), | ||
21 | --border: fn.global-color(--border), | ||
22 | --separator: fn.global-color(--border), | ||
23 | --icon: fn.global-color(--text-mute), | ||
24 | --item: ( | ||
25 | --hover: ( | ||
26 | --bg: fn.global-color(--border-mute), | ||
27 | --label: fn.global-color(--heading), | ||
28 | ), | ||
29 | --disabled: ( | ||
30 | --label: fn.global-color(--text-disabled), | ||
31 | ), | ||
32 | --key-focus: ( | ||
33 | --border: fn.global-color(--focus --border), | ||
34 | --outline: fn.global-color(--focus --outline), | ||
35 | ), | ||
36 | ), | ||
37 | ), | ||
38 | )); | ||
39 | |||
40 | @include iro.bem-object(iro.props-namespace()) { | ||
41 | position: absolute; | ||
42 | z-index: 10000; | ||
43 | inset-block-start: 0; | ||
44 | inset-inline-start: 0; | ||
45 | padding-block: fn.dim(--pad-b); | ||
46 | padding-inline: fn.dim(--pad-i); | ||
47 | transform: translate(var(--x), var(--y)); | ||
48 | border: fn.dim(--border) solid fn.color(--border); | ||
49 | border-radius: fn.dim(--rounding); | ||
50 | background-clip: padding-box; | ||
51 | background-color: fn.color(--bg); | ||
52 | box-shadow: fn.color(--shadow); | ||
53 | color: fn.color(--text); | ||
54 | |||
55 | @include iro.bem-modifier('up-left') { | ||
56 | transform: translate(var(--x), calc(var(--y) - 100%)); | ||
57 | } | ||
58 | |||
59 | @include iro.bem-modifier('up-right') { | ||
60 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); | ||
61 | } | ||
62 | |||
63 | @include iro.bem-modifier('down-right') { | ||
64 | transform: translate(calc(var(--x) - 100%), var(--y)); | ||
65 | } | ||
66 | |||
67 | @include iro.bem-elem('item') { | ||
68 | display: block; | ||
69 | box-sizing: border-box; | ||
70 | inline-size: 100%; | ||
71 | padding-block: calc(fn.dim(--item --pad-b) - 2px); | ||
72 | padding-inline: calc(fn.dim(--item --pad-i) - 2px); | ||
73 | border: 2px solid transparent; | ||
74 | color: fn.color(--item --disabled --label); | ||
75 | |||
76 | &:link, | ||
77 | &:visited, | ||
78 | &:enabled { | ||
79 | color: currentColor; | ||
80 | |||
81 | &:hover, | ||
82 | &:active, | ||
83 | &:focus-visible { | ||
84 | background-color: fn.color(--item --hover --bg); | ||
85 | color: fn.color(--item --hover --label); | ||
86 | } | ||
87 | |||
88 | &:focus-visible { | ||
89 | border-color: fn.color(--item --key-focus --border); | ||
90 | } | ||
91 | } | ||
92 | } | ||
93 | |||
94 | @include iro.bem-elem('separator') { | ||
95 | block-size: 1px; | ||
96 | margin-block: fn.dim(--separator); | ||
97 | background-color: fn.color(--separator); | ||
98 | } | ||
99 | |||
100 | @include iro.bem-elem('slot') { | ||
101 | padding-block: fn.dim(--item --pad-b); | ||
102 | padding-inline: fn.dim(--item --pad-i); | ||
103 | } | ||
104 | |||
105 | @include iro.bem-elem('icon-slot') { | ||
106 | display: flex; | ||
107 | justify-content: center; | ||
108 | inline-size: fn.foreign-dim(--icon, --size); | ||
109 | } | ||
110 | } | ||
111 | } | ||
diff --git a/src/.old/objects/_avatar.scss b/src/objects/_avatar.scss index 4be780e..e6fa74e 100644 --- a/src/.old/objects/_avatar.scss +++ b/src/objects/_avatar.scss | |||
@@ -1,16 +1,19 @@ | |||
1 | @use 'sass:list'; | ||
1 | @use 'iro-sass/src/index' as iro; | 2 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../functions' as fn; |
3 | 4 | ||
4 | @mixin status($size) { | 5 | $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; |
6 | |||
7 | @mixin status($size: ()) { | ||
5 | @include iro.bem-elem('status') { | 8 | @include iro.bem-elem('status') { |
6 | width: fn.dim(--#{$size} --indicator-size); | 9 | width: fn.dim(list.join($size, --indicator-size)); |
7 | height: fn.dim(--#{$size} --indicator-size); | 10 | height: fn.dim(list.join($size, --indicator-size)); |
8 | 11 | ||
9 | @include iro.bem-next-elem('content') { | 12 | @include iro.bem-next-elem('content') { |
10 | mask-image: radial-gradient( | 13 | mask-image: radial-gradient( |
11 | circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at | 14 | circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at |
12 | calc(100% - .5 * fn.dim(--#{$size} --indicator-size)) | 15 | calc(100% - .5 * fn.dim(list.join($size, --indicator-size))) |
13 | calc(100% - .5 * fn.dim(--#{$size} --indicator-size)), | 16 | calc(100% - .5 * fn.dim(list.join($size, --indicator-size))), |
14 | transparent 95%, | 17 | transparent 95%, |
15 | #fff | 18 | #fff |
16 | ); | 19 | ); |
@@ -21,81 +24,84 @@ | |||
21 | @include iro.props-namespace('avatar') { | 24 | @include iro.props-namespace('avatar') { |
22 | @include iro.props-store(( | 25 | @include iro.props-store(( |
23 | --dims: ( | 26 | --dims: ( |
24 | --400: ( | 27 | --size: fn.global-dim(--size --500), |
28 | --font-size: fn.global-dim(--font-size --100), | ||
29 | --indicator-size: fn.global-dim(--size --150), | ||
30 | |||
31 | --xxxl: ( | ||
25 | --size: fn.global-dim(--size --1600), | 32 | --size: fn.global-dim(--size --1600), |
26 | --font-size: fn.global-dim(--font-size --800), | 33 | --font-size: fn.global-dim(--font-size --800), |
27 | --indicator-size: fn.global-dim(--size --400), | 34 | --indicator-size: fn.global-dim(--size --400), |
28 | ), | 35 | ), |
29 | --300: ( | 36 | --xxl: ( |
30 | --size: fn.global-dim(--size --1200), | 37 | --size: fn.global-dim(--size --1200), |
31 | --font-size: fn.global-dim(--font-size --600), | 38 | --font-size: fn.global-dim(--font-size --600), |
32 | --indicator-size: fn.global-dim(--size --300), | 39 | --indicator-size: fn.global-dim(--size --300), |
33 | ), | 40 | ), |
34 | --200: ( | 41 | --xl: ( |
35 | --size: fn.global-dim(--size --800), | 42 | --size: fn.global-dim(--size --800), |
36 | --font-size: fn.global-dim(--font-size --300), | 43 | --font-size: fn.global-dim(--font-size --300), |
37 | --indicator-size: fn.global-dim(--size --225), | 44 | --indicator-size: fn.global-dim(--size --225), |
38 | ), | 45 | ), |
39 | --150: ( | 46 | --lg: ( |
40 | --size: fn.global-dim(--size --650), | 47 | --size: fn.global-dim(--size --650), |
41 | --font-size: fn.global-dim(--font-size --200), | 48 | --font-size: fn.global-dim(--font-size --200), |
42 | --indicator-size: fn.global-dim(--size --175), | 49 | --indicator-size: fn.global-dim(--size --175), |
43 | ), | 50 | ), |
44 | --100: ( | 51 | --sm: ( |
45 | --size: fn.global-dim(--size --500), | ||
46 | --font-size: fn.global-dim(--font-size --100), | ||
47 | --indicator-size: fn.global-dim(--size --150), | ||
48 | ), | ||
49 | --75: ( | ||
50 | --size: fn.global-dim(--size --375), | 52 | --size: fn.global-dim(--size --375), |
51 | --font-size: fn.global-dim(--font-size --75), | 53 | --font-size: fn.global-dim(--font-size --75), |
52 | --indicator-size: fn.global-dim(--size --125), | 54 | --indicator-size: fn.global-dim(--size --125), |
53 | ), | 55 | ), |
54 | --50: ( | 56 | --xs: ( |
55 | --size: fn.global-dim(--size --250), | 57 | --size: fn.global-dim(--size --250), |
56 | --font-size: fn.global-dim(--font-size --50), | 58 | --font-size: fn.global-dim(--font-size --50), |
57 | --indicator-size: fn.global-dim(--size --100), | 59 | --indicator-size: fn.global-dim(--size --100), |
58 | ), | 60 | ), |
59 | --indicator-spacing: fn.global-dim(--size --40), | 61 | --indicator-spacing: fn.global-dim(--size --40), |
60 | --rounding: 25%, | 62 | --rounding: 25%, |
63 | |||
64 | --key-focus: ( | ||
65 | --border: fn.global-dim(--key-focus --border), | ||
66 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
67 | --outline: fn.global-dim(--key-focus --outline), | ||
68 | ), | ||
61 | ), | 69 | ), |
62 | ), 'dims'); | ||
63 | |||
64 | @include iro.props-store(( | ||
65 | --colors: ( | 70 | --colors: ( |
66 | --h: 354, | 71 | --h: 354, |
67 | --s: 44%, | 72 | --s: 44%, |
68 | --l: 45%, | 73 | --l: 45%, |
69 | 74 | ||
70 | --key-focus: ( | 75 | --key-focus: ( |
71 | --border: fn.global-color(--focus --fill), | 76 | --border: fn.global-color(--focus --border), |
72 | --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo), | 77 | --outline: fn.global-color(--focus --outline), |
73 | ), | 78 | ), |
74 | ), | 79 | ), |
75 | ), 'colors'); | 80 | )); |
76 | 81 | ||
77 | @include iro.bem-object(iro.props-namespace()) { | 82 | @include iro.bem-object(iro.props-namespace()) { |
78 | display: inline-block; | 83 | display: inline-block; |
79 | position: relative; | 84 | position: relative; |
85 | border: fn.dim(--key-focus --border) solid transparent; | ||
80 | border-radius: fn.dim(--rounding); | 86 | border-radius: fn.dim(--rounding); |
81 | font-size: fn.dim(--100 --font-size); | 87 | font-size: fn.dim(--font-size); |
82 | font-style: normal; | 88 | font-style: normal; |
83 | vertical-align: .05em; | 89 | vertical-align: .05em; |
84 | 90 | ||
85 | @include iro.bem-elem('status') { | 91 | @include iro.bem-elem('status') { |
86 | position: absolute; | 92 | position: absolute; |
87 | right: 0; | 93 | inset-inline-end: 0; |
88 | bottom: 0; | 94 | inset-block-end: 0; |
89 | } | 95 | } |
90 | 96 | ||
91 | @include status(100); | 97 | @include status; |
92 | 98 | ||
93 | @include iro.bem-elem('content') { | 99 | @include iro.bem-elem('content') { |
94 | display: block; | 100 | display: block; |
95 | width: fn.dim(--100 --size); | 101 | inline-size: fn.dim(--size); |
96 | height: fn.dim(--100 --size); | 102 | block-size: fn.dim(--size); |
97 | border-radius: fn.dim(--rounding); | 103 | border-radius: fn.dim(--rounding); |
98 | line-height: fn.dim(--100 --size); | 104 | line-height: fn.dim(--size); |
99 | text-align: center; | 105 | text-align: center; |
100 | object-fit: cover; | 106 | object-fit: cover; |
101 | object-position: center center; | 107 | object-position: center center; |
@@ -122,25 +128,23 @@ | |||
122 | } | 128 | } |
123 | } | 129 | } |
124 | 130 | ||
125 | @each $size in 50 75 150 200 300 400 { | 131 | @each $size in $sizes { |
126 | @include iro.bem-modifier($size) { | 132 | @include iro.bem-modifier($size) { |
127 | font-size: fn.dim(--#{$size} --font-size); | 133 | font-size: fn.dim(--#{$size} --font-size); |
128 | 134 | ||
129 | @include status($size); | 135 | @include status(--#{$size}); |
130 | 136 | ||
131 | @include iro.bem-elem('content') { | 137 | @include iro.bem-elem('content') { |
132 | width: fn.dim(--#{$size} --size); | 138 | inline-size: fn.dim(--#{$size} --size); |
133 | height: fn.dim(--#{$size} --size); | 139 | block-size: fn.dim(--#{$size} --size); |
134 | line-height: fn.dim(--#{$size} --size); | 140 | line-height: fn.dim(--#{$size} --size); |
135 | } | 141 | } |
136 | } | 142 | } |
137 | } | 143 | } |
138 | 144 | ||
139 | @include iro.bem-at-theme('keyboard') { | 145 | &:focus-visible { |
140 | &:focus { | 146 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); |
141 | outline: 2px solid fn.color(--key-focus --border); | 147 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); |
142 | box-shadow: fn.color(--key-focus --shadow); | ||
143 | } | ||
144 | } | 148 | } |
145 | } | 149 | } |
146 | } | 150 | } |
diff --git a/src/.old/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index d8ea9ef..4c5305e 100644 --- a/src/.old/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss | |||
@@ -1,22 +1,26 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | 3 | ||
4 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | ||
5 | |||
4 | @include iro.props-namespace('status-indicator') { | 6 | @include iro.props-namespace('status-indicator') { |
5 | @include iro.props-store(( | 7 | @include iro.props-store(( |
6 | --dims: ( | 8 | --dims: ( |
7 | --size: fn.global-dim(--size --125), | 9 | --size: fn.global-dim(--size --125), |
8 | ), | 10 | ), |
9 | ), 'dims'); | ||
10 | |||
11 | @include iro.props-store(( | ||
12 | --colors: ( | 11 | --colors: ( |
13 | --default: fn.global-color(--obj-lo), | 12 | --default: fn.global-color(--border-strong), |
14 | --primary: fn.global-color(--fg), | 13 | --primary: fn.global-color(--text), |
15 | --green: fn.global-color(--green --solid --bg-hi), | ||
16 | --yellow: fn.global-color(--yellow --solid --bg-hi), | ||
17 | --red: fn.global-color(--red --solid --bg-hi), | ||
18 | ), | 14 | ), |
19 | ), 'colors'); | 15 | )); |
16 | |||
17 | @each $theme in $themes { | ||
18 | @include iro.props-store(( | ||
19 | --colors: ( | ||
20 | --#{$theme}: fn.global-color(--#{$theme}-static --800), | ||
21 | ), | ||
22 | )); | ||
23 | } | ||
20 | 24 | ||
21 | @include iro.bem-object(iro.props-namespace()) { | 25 | @include iro.bem-object(iro.props-namespace()) { |
22 | display: inline-block; | 26 | display: inline-block; |
@@ -26,9 +30,9 @@ | |||
26 | background-color: fn.color(--default); | 30 | background-color: fn.color(--default); |
27 | vertical-align: middle; | 31 | vertical-align: middle; |
28 | 32 | ||
29 | @each $color in 'primary' 'green' 'yellow' 'red' { | 33 | @each $theme in $themes { |
30 | @include iro.bem-is($color) { | 34 | @include iro.bem-is($theme) { |
31 | background-color: fn.color(--#{$color}); | 35 | background-color: fn.color(--#{$theme}); |
32 | } | 36 | } |
33 | } | 37 | } |
34 | } | 38 | } |