diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_iro-design.scss | 1 | ||||
-rw-r--r-- | src/_themes.scss | 2 | ||||
-rw-r--r-- | src/objects/_action-button.scss | 3 | ||||
-rw-r--r-- | src/objects/_badge.scss | 5 | ||||
-rw-r--r-- | src/objects/_badge.vars.scss | 61 | ||||
-rw-r--r-- | src/objects/_button.scss | 260 | ||||
-rw-r--r-- | src/objects/_button.vars.scss | 163 | ||||
-rw-r--r-- | src/scopes/_links.scss | 3 |
8 files changed, 258 insertions, 240 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss index 31be892..b8e8246 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss | |||
@@ -42,3 +42,4 @@ $breakpoints: ( | |||
42 | @forward 'objects/avatar' as o-avatar--*; | 42 | @forward 'objects/avatar' as o-avatar--*; |
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--*; | ||
diff --git a/src/_themes.scss b/src/_themes.scss index a90d049..ced2aa5 100644 --- a/src/_themes.scss +++ b/src/_themes.scss | |||
@@ -205,7 +205,7 @@ $theme-dark: map.deep-merge(( | |||
205 | 205 | ||
206 | $themes-override: () !default; | 206 | $themes-override: () !default; |
207 | $themes: map.deep-merge(( | 207 | $themes: map.deep-merge(( |
208 | main: ( | 208 | --main: ( |
209 | light: $theme-light, | 209 | light: $theme-light, |
210 | dark: $theme-dark, | 210 | dark: $theme-dark, |
211 | ) | 211 | ) |
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 129e681..48149b1 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
@@ -1,6 +1,7 @@ | |||
1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
2 | @use 'sass:map'; | 2 | @use 'sass:map'; |
3 | @use 'sass:meta'; | 3 | @use 'sass:meta'; |
4 | @use 'sass:string'; | ||
4 | @use 'iro-sass/src/iro-sass' as iro; | 5 | @use 'iro-sass/src/iro-sass' as iro; |
5 | @use '../props'; | 6 | @use '../props'; |
6 | 7 | ||
@@ -138,7 +139,7 @@ | |||
138 | @include -apply-theme(vars.$default-theme); | 139 | @include -apply-theme(vars.$default-theme); |
139 | 140 | ||
140 | @each $theme in map.keys(props.get(vars.$themes)) { | 141 | @each $theme in map.keys(props.get(vars.$themes)) { |
141 | @include iro.bem-modifier($theme) { | 142 | @include iro.bem-modifier(string.slice($theme, 3)) { |
142 | @include -apply-theme(vars.$themes, $theme); | 143 | @include -apply-theme(vars.$themes, $theme); |
143 | } | 144 | } |
144 | } | 145 | } |
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 3f68873..5a07630 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -1,6 +1,7 @@ | |||
1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
2 | @use 'sass:map'; | 2 | @use 'sass:map'; |
3 | @use 'sass:meta'; | 3 | @use 'sass:meta'; |
4 | @use 'sass:string'; | ||
4 | @use 'iro-sass/src/iro-sass' as iro; | 5 | @use 'iro-sass/src/iro-sass' as iro; |
5 | @use '../props'; | 6 | @use '../props'; |
6 | @use '../core.vars' as core; | 7 | @use '../core.vars' as core; |
@@ -103,13 +104,13 @@ | |||
103 | @include -apply-theme(vars.$default-theme); | 104 | @include -apply-theme(vars.$default-theme); |
104 | 105 | ||
105 | @each $theme in map.keys(props.get(vars.$themes)) { | 106 | @each $theme in map.keys(props.get(vars.$themes)) { |
106 | @include iro.bem-modifier($theme) { | 107 | @include iro.bem-modifier(string.slice($theme, 3)) { |
107 | @include -apply-theme(vars.$themes, $theme); | 108 | @include -apply-theme(vars.$themes, $theme); |
108 | } | 109 | } |
109 | } | 110 | } |
110 | 111 | ||
111 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 112 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
112 | @include iro.bem-modifier($theme) { | 113 | @include iro.bem-modifier(string.slice($theme, 3)) { |
113 | @include -apply-theme(vars.$static-themes, $theme, true); | 114 | @include -apply-theme(vars.$static-themes, $theme, true); |
114 | } | 115 | } |
115 | } | 116 | } |
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index 6a3dd15..c49474b 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss | |||
@@ -43,35 +43,35 @@ $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props | |||
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, ( |
46 | --bg: props.def(--o-badge--bg-color, props.get(core.$theme, --text-mute)), | 46 | --bg: props.get(core.$theme, --text-mute), |
47 | --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), | 47 | --label: props.get(core.$theme, --bg-l2), |
48 | 48 | ||
49 | --hover: ( | 49 | --hover: ( |
50 | --bg: props.def(--o-badge--hover--bg-color, props.get(core.$theme, --text)), | 50 | --bg: props.get(core.$theme, --text), |
51 | --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), | 51 | --label: props.get(core.$theme, --bg-l2), |
52 | ), | 52 | ), |
53 | 53 | ||
54 | --active: ( | 54 | --active: ( |
55 | --bg: props.def(--o-badge--active--bg-color, props.get(core.$theme, --heading)), | 55 | --bg: props.get(core.$theme, --heading), |
56 | --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), | 56 | --label: props.get(core.$theme, --bg-l2), |
57 | ), | 57 | ), |
58 | 58 | ||
59 | --quiet: ( | 59 | --quiet: ( |
60 | --bg: props.def(--o-badge--quiet--bg-color, props.get(core.$theme, --border-mute)), | 60 | --bg: props.get(core.$theme, --border-mute), |
61 | --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), | 61 | --label: props.get(core.$theme, --heading), |
62 | 62 | ||
63 | --hover: ( | 63 | --hover: ( |
64 | --bg: props.def(--o-badge--quiet--hover--bg-color, props.get(core.$theme, --border)), | 64 | --bg: props.get(core.$theme, --border), |
65 | --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), | 65 | --label: props.get(core.$theme, --heading), |
66 | ), | 66 | ), |
67 | 67 | ||
68 | --active: ( | 68 | --active: ( |
69 | --bg: props.def(--o-badge--quiet--active--bg-color, props.get(core.$theme, --border-strong)), | 69 | --bg: props.get(core.$theme, --border-strong), |
70 | --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), | 70 | --label: props.get(core.$theme, --heading), |
71 | ), | 71 | ), |
72 | ) | 72 | ) |
73 | )); | 73 | )); |
74 | $default-theme: props.merge(--o-badge, $default-theme-override); | 74 | $default-theme: props.merge($default-theme, $default-theme-override); |
75 | 75 | ||
76 | $static-themes: props.def(--o-badge); | 76 | $static-themes: props.def(--o-badge); |
77 | 77 | ||
@@ -116,41 +116,36 @@ $static-themes: props.def(--o-badge); | |||
116 | )); | 116 | )); |
117 | } | 117 | } |
118 | 118 | ||
119 | $themes-config: ( | 119 | $themes-config: --accent --positive --negative --warning !default; |
120 | accent: --accent, | ||
121 | positive: --positive, | ||
122 | negative: --negative, | ||
123 | warning: --warning, | ||
124 | ) !default; | ||
125 | 120 | ||
126 | $themes: props.def(--o-badge); | 121 | $themes: props.def(--o-badge); |
127 | 122 | ||
128 | @each $theme, $key in $themes-config { | 123 | @each $theme in $themes-config { |
129 | $themes: props.merge($themes, ( | 124 | $themes: props.merge($themes, ( |
130 | $key: ( | 125 | $theme: ( |
131 | --bg: props.get(core.$static-colors, $key, --900), | 126 | --bg: props.get(core.$static-colors, $theme, --900), |
132 | --label: props.get(core.$static-colors, $key, --900-text), | 127 | --label: props.get(core.$static-colors, $theme, --900-text), |
133 | 128 | ||
134 | --hover: ( | 129 | --hover: ( |
135 | --bg: props.get(core.$static-colors, $key, --1000), | 130 | --bg: props.get(core.$static-colors, $theme, --1000), |
136 | --label: props.get(core.$static-colors, $key, --1000-text), | 131 | --label: props.get(core.$static-colors, $theme, --1000-text), |
137 | ), | 132 | ), |
138 | 133 | ||
139 | --active: ( | 134 | --active: ( |
140 | --bg: props.get(core.$static-colors, $key, --1100), | 135 | --bg: props.get(core.$static-colors, $theme, --1100), |
141 | --label: props.get(core.$static-colors, $key, --1000-text), | 136 | --label: props.get(core.$static-colors, $theme, --1000-text), |
142 | ), | 137 | ), |
143 | 138 | ||
144 | --quiet: ( | 139 | --quiet: ( |
145 | --bg: props.get(core.$theme, $key, --200), | 140 | --bg: props.get(core.$theme, $theme, --200), |
146 | --label: props.get(core.$theme, $key, --1100), | 141 | --label: props.get(core.$theme, $theme, --1100), |
147 | --hover: ( | 142 | --hover: ( |
148 | --bg: props.get(core.$theme, $key, --300), | 143 | --bg: props.get(core.$theme, $theme, --300), |
149 | --label: props.get(core.$theme, $key, --1200), | 144 | --label: props.get(core.$theme, $theme, --1200), |
150 | ), | 145 | ), |
151 | --active: ( | 146 | --active: ( |
152 | --bg: props.get(core.$theme, $key, --400), | 147 | --bg: props.get(core.$theme, $theme, --400), |
153 | --label: props.get(core.$theme, $key, --1300), | 148 | --label: props.get(core.$theme, $theme, --1300), |
154 | ), | 149 | ), |
155 | ) | 150 | ) |
156 | ) | 151 | ) |
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 097bc21..854e1e3 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -1,17 +1,20 @@ | |||
1 | @use 'sass:list'; | 1 | @use 'sass:list'; |
2 | @use 'sass:map'; | ||
3 | @use 'sass:meta'; | ||
4 | @use 'sass:string'; | ||
2 | @use 'iro-sass/src/iro-sass' as iro; | 5 | @use 'iro-sass/src/iro-sass' as iro; |
3 | @use '../functions' as fn; | 6 | @use '../props'; |
7 | @use '../core.vars' as core; | ||
4 | 8 | ||
5 | $sizes: 'sm' 'lg' 'xl' !default; | 9 | @forward 'button.vars'; |
6 | $themes: 'accent' 'negative' !default; | 10 | @use 'button.vars' as vars; |
7 | $static-themes: 'black' 'white' !default; | ||
8 | 11 | ||
9 | @mixin theme($theme: ()) { | 12 | @mixin -apply-theme($theme, $key: ()) { |
10 | &:link, | 13 | &:link, |
11 | &:visited, | 14 | &:visited, |
12 | &:enabled { | 15 | &:enabled { |
13 | color: fn.color(list.join($theme, --label)); | 16 | color: props.get($theme, list.join($key, --label)...); |
14 | background-color: fn.color(list.join($theme, --bg)); | 17 | background-color: props.get($theme, list.join($key, --bg)...); |
15 | border-color: transparent; | 18 | border-color: transparent; |
16 | } | 19 | } |
17 | 20 | ||
@@ -19,9 +22,9 @@ $static-themes: 'black' 'white' !default; | |||
19 | &:link, | 22 | &:link, |
20 | &:visited, | 23 | &:visited, |
21 | &:enabled { | 24 | &:enabled { |
22 | color: fn.color(list.join($theme, --outline-label)); | 25 | color: props.get($theme, list.join($key, --outline-label)); |
23 | background-color: transparent; | 26 | background-color: transparent; |
24 | border-color: fn.color(list.join($theme, --outline-border)); | 27 | border-color: props.get($theme, list.join($key, --outline-border)); |
25 | } | 28 | } |
26 | } | 29 | } |
27 | 30 | ||
@@ -30,217 +33,71 @@ $static-themes: 'black' 'white' !default; | |||
30 | &:enabled { | 33 | &:enabled { |
31 | &:hover, | 34 | &:hover, |
32 | &:focus-visible { | 35 | &:focus-visible { |
33 | color: fn.color(list.join($theme, --hover --label)); | 36 | color: props.get($theme, list.join($key, --hover --label)); |
34 | background-color: fn.color(list.join($theme, --hover --bg)); | 37 | background-color: props.get($theme, list.join($key, --hover --bg)); |
35 | border-color: transparent; | 38 | border-color: transparent; |
36 | } | 39 | } |
37 | 40 | ||
38 | &:active { | 41 | &:active { |
39 | color: fn.color(list.join($theme, --active --label)); | 42 | color: props.get($theme, list.join($key, --active --label)); |
40 | background-color: fn.color(list.join($theme, --active --bg)); | 43 | background-color: props.get($theme, list.join($key, --active --bg)); |
41 | border-color: transparent; | 44 | border-color: transparent; |
42 | } | 45 | } |
43 | } | 46 | } |
44 | } | 47 | } |
45 | 48 | ||
46 | @mixin static-theme($theme: ()) { | 49 | @mixin -apply-static-theme($theme, $key: ()) { |
47 | color: fn.color(list.join($theme, --disabled --label)); | 50 | color: props.get($theme, list.join($key, --disabled --label)); |
48 | background-color: fn.color(list.join($theme, --disabled --bg)); | 51 | background-color: props.get($theme, list.join($key, --disabled --bg)); |
49 | border-color: transparent; | 52 | border-color: transparent; |
50 | 53 | ||
51 | &::after { | 54 | &::after { |
52 | outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); | 55 | outline: props.get($theme, list.join($key, --key-focus --border)) solid props.get(vars.$key-focus--border-width); |
53 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); | 56 | box-shadow: |
57 | 0 | ||
58 | 0 | ||
59 | 0 | ||
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)); | ||
54 | } | 62 | } |
55 | 63 | ||
56 | @include iro.bem-modifier('outline') { | 64 | @include iro.bem-modifier('outline') { |
57 | background-color: transparent; | 65 | background-color: transparent; |
58 | border-color: fn.color(list.join($theme, --disabled --outline-border)); | 66 | border-color: props.get($theme, list.join($key, --disabled --outline-border)); |
59 | } | 67 | } |
60 | 68 | ||
61 | @include theme($theme); | 69 | @include -apply-theme($theme, $key); |
62 | 70 | ||
63 | @include iro.bem-modifier('primary') { | 71 | @include iro.bem-modifier('primary') { |
64 | @include theme(list.join($theme, --primary)); | 72 | @include -apply-theme($theme, list.join($key, --primary)); |
65 | } | 73 | } |
66 | } | 74 | } |
67 | 75 | ||
68 | @include iro.props-namespace('button') { | 76 | @mixin styles { |
69 | @include iro.props-store(( | 77 | @include props.materialize(meta.module-variables('vars')); |
70 | --dims: ( | ||
71 | --line-height: 1.4, | ||
72 | --pad-i: fn.global-dim(--size --200), | ||
73 | --pad-i-label: fn.global-dim(--size --75), | ||
74 | --pad-b: fn.global-dim(--size --65), | ||
75 | --border: fn.global-dim(--border --medium), | ||
76 | --rounding: 10em, | ||
77 | --font-size: fn.global-dim(--font-size --100), | ||
78 | 78 | ||
79 | --sm: ( | 79 | @include iro.bem-object('button') { |
80 | --pad-i: fn.global-dim(--size --150), | ||
81 | --pad-i-label: fn.global-dim(--size --50), | ||
82 | --pad-b: fn.global-dim(--size --25), | ||
83 | --font-size: fn.global-dim(--font-size --75), | ||
84 | ), | ||
85 | --lg: ( | ||
86 | --pad-i: fn.global-dim(--size --250), | ||
87 | --pad-i-label: fn.global-dim(--size --100), | ||
88 | --pad-b: fn.global-dim(--size --100), | ||
89 | --font-size: fn.global-dim(--font-size --150), | ||
90 | ), | ||
91 | --xl: ( | ||
92 | --pad-i: fn.global-dim(--size --300), | ||
93 | --pad-i-label: fn.global-dim(--size --150), | ||
94 | --pad-b: fn.global-dim(--size --150), | ||
95 | --font-size: fn.global-dim(--font-size --200), | ||
96 | ), | ||
97 | |||
98 | --key-focus: ( | ||
99 | --border: fn.global-dim(--key-focus --border), | ||
100 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
101 | --outline: fn.global-dim(--key-focus --outline), | ||
102 | ), | ||
103 | ), | ||
104 | --colors: ( | ||
105 | --bg: fn.global-color(--border-mute), | ||
106 | --label: fn.global-color(--text), | ||
107 | --outline-border: fn.global-color(--border), | ||
108 | --outline-label: fn.global-color(--text), | ||
109 | |||
110 | --hover: ( | ||
111 | --bg: fn.global-color(--border), | ||
112 | --label: fn.global-color(--heading), | ||
113 | ), | ||
114 | --active: ( | ||
115 | --bg: fn.global-color(--border-strong), | ||
116 | --label: fn.global-color(--heading), | ||
117 | ), | ||
118 | --disabled: ( | ||
119 | --bg: fn.global-color(--border-mute), | ||
120 | --outline-border: fn.global-color(--border), | ||
121 | --label: fn.global-color(--text-disabled), | ||
122 | ), | ||
123 | --key-focus: ( | ||
124 | --label: fn.global-color(--focus --text), | ||
125 | --border: fn.global-color(--focus --border), | ||
126 | --outline: fn.global-color(--focus --outline), | ||
127 | ), | ||
128 | |||
129 | --primary: ( | ||
130 | --bg: fn.global-color(--base --800), | ||
131 | --label: fn.global-color(--base --800-text), | ||
132 | --outline-border: fn.global-color(--base --800), | ||
133 | --outline-label: fn.global-color(--text), | ||
134 | |||
135 | --hover: ( | ||
136 | --bg: fn.global-color(--base --900), | ||
137 | --label: fn.global-color(--base --900-text), | ||
138 | ), | ||
139 | --active: ( | ||
140 | --bg: fn.global-color(--base --900), | ||
141 | --label: fn.global-color(--base --900-text), | ||
142 | ), | ||
143 | ), | ||
144 | ), | ||
145 | )); | ||
146 | |||
147 | @each $theme in $themes { | ||
148 | @include iro.props-store(( | ||
149 | --colors: ( | ||
150 | --#{$theme}: ( | ||
151 | --bg: fn.global-color(--#{$theme}-static --900), | ||
152 | --label: fn.global-color(--#{$theme}-static --900-text), | ||
153 | --outline-border: fn.global-color(--#{$theme} --900), | ||
154 | --outline-label: fn.global-color(--#{$theme} --1000), | ||
155 | |||
156 | --hover: ( | ||
157 | --bg: fn.global-color(--#{$theme}-static --1000), | ||
158 | --label: fn.global-color(--#{$theme}-static --1000-text), | ||
159 | ), | ||
160 | --active: ( | ||
161 | --bg: fn.global-color(--#{$theme}-static --1100), | ||
162 | --label: fn.global-color(--#{$theme}-static --1100-text), | ||
163 | ), | ||
164 | ), | ||
165 | ), | ||
166 | )); | ||
167 | } | ||
168 | |||
169 | @each $theme in $static-themes { | ||
170 | @include iro.props-store(( | ||
171 | --colors: ( | ||
172 | --static-#{$theme}: ( | ||
173 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
174 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
175 | --outline-border: fn.global-color(--#{$theme}-transparent --300), | ||
176 | --outline-label: fn.global-color(--#{$theme}-transparent --900), | ||
177 | |||
178 | --hover: ( | ||
179 | --bg: fn.global-color(--#{$theme}-transparent --300), | ||
180 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
181 | ), | ||
182 | --active: ( | ||
183 | --bg: fn.global-color(--#{$theme}-transparent --400), | ||
184 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
185 | ), | ||
186 | --disabled: ( | ||
187 | --bg: fn.global-color(--#{$theme}-transparent --200), | ||
188 | --outline-border: fn.global-color(--#{$theme}-transparent --300), | ||
189 | --label: fn.global-color(--#{$theme}-transparent --500), | ||
190 | ), | ||
191 | --key-focus: ( | ||
192 | --bg: fn.global-color(--#{$theme}-transparent --100), | ||
193 | --label: fn.global-color(--#{$theme}-transparent --900), | ||
194 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
195 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
196 | ), | ||
197 | |||
198 | --primary: ( | ||
199 | --bg: fn.global-color(--#{$theme}-transparent --800), | ||
200 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
201 | --outline-border: fn.global-color(--#{$theme}-transparent --800), | ||
202 | --outline-label: fn.global-color(--#{$theme}-transparent --900), | ||
203 | |||
204 | --hover: ( | ||
205 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
206 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
207 | ), | ||
208 | --active: ( | ||
209 | --bg: fn.global-color(--#{$theme}-transparent --900), | ||
210 | --label: fn.global-color(--#{$theme}-transparent --text), | ||
211 | ), | ||
212 | ), | ||
213 | ), | ||
214 | ), | ||
215 | )); | ||
216 | } | ||
217 | |||
218 | @include iro.bem-object(iro.props-namespace()) { | ||
219 | position: relative; | 80 | position: relative; |
220 | display: inline-block; | 81 | display: inline-block; |
221 | padding-block: fn.dim(--pad-b); | 82 | padding-block: props.get(vars.$pad-b); |
222 | padding-inline: fn.dim(--pad-i); | 83 | padding-inline: props.get(vars.$pad-i); |
223 | font-size: fn.dim(--font-size); | 84 | font-size: props.get(vars.$font-size); |
224 | font-weight: 500; | 85 | font-weight: 500; |
225 | line-height: fn.dim(--line-height); | 86 | line-height: props.get(vars.$line-height); |
226 | color: fn.color(--disabled --label); | ||
227 | text-align: center; | 87 | text-align: center; |
228 | text-decoration: none; | 88 | text-decoration: none; |
229 | background-color: fn.color(--disabled --bg); | 89 | border: props.get(vars.$border-width) solid transparent; |
230 | border: fn.dim(--border) solid transparent; | 90 | border-radius: props.get(vars.$rounding); |
231 | border-color: fn.color(--disabled --bg); | ||
232 | border-radius: fn.dim(--rounding); | ||
233 | 91 | ||
234 | &::after { | 92 | &::after { |
235 | position: absolute; | 93 | position: absolute; |
236 | inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | 94 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); |
237 | z-index: 1; | 95 | z-index: 1; |
238 | display: none; | 96 | display: none; |
239 | pointer-events: none; | 97 | pointer-events: none; |
240 | content: ''; | 98 | content: ''; |
241 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | 99 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); |
242 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 100 | outline: transparent solid props.get(vars.$key-focus--border-width); |
243 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
244 | } | 101 | } |
245 | 102 | ||
246 | &:link, | 103 | &:link, |
@@ -254,7 +111,7 @@ $static-themes: 'black' 'white' !default; | |||
254 | } | 111 | } |
255 | 112 | ||
256 | @include iro.bem-elem('label') { | 113 | @include iro.bem-elem('label') { |
257 | margin-inline: fn.dim(--pad-i-label); | 114 | margin-inline: props.get(vars.$pad-i-label); |
258 | } | 115 | } |
259 | 116 | ||
260 | @include iro.bem-modifier('block') { | 117 | @include iro.bem-modifier('block') { |
@@ -263,37 +120,36 @@ $static-themes: 'black' 'white' !default; | |||
263 | 120 | ||
264 | @include iro.bem-modifier('outline') { | 121 | @include iro.bem-modifier('outline') { |
265 | background-color: transparent; | 122 | background-color: transparent; |
266 | border-color: fn.color(--disabled --outline-border); | ||
267 | } | 123 | } |
268 | 124 | ||
269 | @each $size in $sizes { | 125 | @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { |
270 | @include iro.bem-modifier($size) { | 126 | @include iro.bem-modifier($mod) { |
271 | padding-block: fn.dim(--#{$size} --pad-b); | 127 | padding-block: props.get($pad-b); |
272 | padding-inline: fn.dim(--#{$size} --pad-i); | 128 | padding-inline: props.get($pad-i); |
273 | font-size: fn.dim(--#{$size} --font-size); | 129 | font-size: props.get($font-size); |
274 | 130 | ||
275 | @include iro.bem-elem('label') { | 131 | @include iro.bem-elem('label') { |
276 | margin-inline: fn.dim(--#{$size} --pad-i-label); | 132 | margin-inline: props.get($pad-i-label); |
277 | } | 133 | } |
278 | } | 134 | } |
279 | } | 135 | } |
280 | 136 | ||
281 | @include static-theme; | 137 | @include -apply-static-theme(vars.$default-theme); |
282 | 138 | ||
283 | @each $theme in $themes { | 139 | @each $theme in map.keys(props.get(vars.$themes)) { |
284 | @include iro.bem-modifier($theme) { | 140 | @include iro.bem-modifier(string.slice($theme, 3)) { |
285 | @include theme(--#{$theme}); | 141 | @include -apply-theme(vars.$themes, $theme); |
286 | } | 142 | } |
287 | } | 143 | } |
288 | 144 | ||
289 | @each $theme in $static-themes { | 145 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
290 | @include iro.bem-modifier(static-#{$theme}) { | 146 | @include iro.bem-modifier(string.slice($theme, 3)) { |
291 | @include static-theme(--static-#{$theme}); | 147 | @include -apply-static-theme(vars.$static-themes, $theme); |
292 | } | 148 | } |
293 | } | 149 | } |
294 | 150 | ||
295 | @include iro.bem-modifier('round') { | 151 | @include iro.bem-modifier('round') { |
296 | inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); | 152 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); |
297 | padding-inline: 0; | 153 | padding-inline: 0; |
298 | border-radius: 100em; | 154 | border-radius: 100em; |
299 | } | 155 | } |
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss new file mode 100644 index 0000000..80d9274 --- /dev/null +++ b/src/objects/_button.vars.scss | |||
@@ -0,0 +1,163 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $line-height: props.def(--o-button--line-height, 1.4) !default; | ||
6 | $pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; | ||
7 | $pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--75)) !default; | ||
8 | $pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default; | ||
9 | $border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default; | ||
10 | $rounding: props.def(--o-button--rounding, 10em) !default; | ||
11 | $font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; | ||
12 | |||
13 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; | ||
14 | $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default; | ||
15 | $pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; | ||
16 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; | ||
17 | |||
18 | $pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; | ||
19 | $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; | ||
20 | $pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; | ||
21 | $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; | ||
22 | |||
23 | $pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; | ||
24 | $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; | ||
25 | $pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; | ||
26 | $font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; | ||
27 | |||
28 | $key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
29 | $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
30 | $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
31 | |||
32 | $sizes: ( | ||
33 | 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, | ||
34 | 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, | ||
35 | 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, | ||
36 | ) !default; | ||
37 | |||
38 | $default-theme-override: () !default; | ||
39 | $default-theme: props.def(--o-button, ( | ||
40 | --default: ( | ||
41 | --bg: props.get(core.$theme, --border-mute), | ||
42 | --label: props.get(core.$theme, --text), | ||
43 | --outline-border: props.get(core.$theme, --border), | ||
44 | --outline-label: props.get(core.$theme, --text), | ||
45 | |||
46 | --hover: ( | ||
47 | --bg: props.get(core.$theme, --border), | ||
48 | --label: props.get(core.$theme, --heading), | ||
49 | ), | ||
50 | --active: ( | ||
51 | --bg: props.get(core.$theme, --border-strong), | ||
52 | --label: props.get(core.$theme, --heading), | ||
53 | ), | ||
54 | --disabled: ( | ||
55 | --bg: props.get(core.$theme, --border-mute), | ||
56 | --outline-border: props.get(core.$theme, --border), | ||
57 | --label: props.get(core.$theme, --text-disabled), | ||
58 | ), | ||
59 | --key-focus: ( | ||
60 | --label: props.get(core.$theme, --focus --text), | ||
61 | --border: props.get(core.$theme, --focus --border), | ||
62 | --outline: props.get(core.$theme, --focus --outline), | ||
63 | ), | ||
64 | ), | ||
65 | )); | ||
66 | $default-theme: props.merge($default-theme, $default-theme-override); | ||
67 | |||
68 | $static-themes: props.def(--o-button); | ||
69 | |||
70 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
71 | $button-theme: #{$theme}-static; | ||
72 | |||
73 | $static-themes: props.merge($static-themes, ( | ||
74 | $button-theme: ( | ||
75 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
76 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
77 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | ||
78 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | ||
79 | |||
80 | --hover: ( | ||
81 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
82 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
83 | ), | ||
84 | |||
85 | --active: ( | ||
86 | --bg: props.get(core.$transparent-colors, $theme, --400), | ||
87 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
88 | ), | ||
89 | |||
90 | --disabled: ( | ||
91 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
92 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | ||
93 | --label: props.get(core.$transparent-colors, $theme, --500), | ||
94 | ), | ||
95 | |||
96 | --key-focus: ( | ||
97 | --bg: props.get(core.$transparent-colors, $theme, --100), | ||
98 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
99 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
100 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
101 | ), | ||
102 | |||
103 | --primary: ( | ||
104 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
105 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
106 | --outline-border: props.get(core.$transparent-colors, $theme, --800), | ||
107 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | ||
108 | |||
109 | --hover: ( | ||
110 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
111 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
112 | ), | ||
113 | |||
114 | --active: ( | ||
115 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
116 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
117 | ), | ||
118 | ) | ||
119 | ) | ||
120 | )); | ||
121 | } | ||
122 | |||
123 | $themes-config: --accent --negative !default; | ||
124 | |||
125 | $themes: props.def(--o-button, ( | ||
126 | --primary: ( | ||
127 | --bg: props.get(core.$theme, --base, --800), | ||
128 | --label: props.get(core.$theme, --base, --800-text), | ||
129 | --outline-border: props.get(core.$theme, --base, --800), | ||
130 | --outline-label: props.get(core.$theme, --text), | ||
131 | |||
132 | --hover: ( | ||
133 | --bg: props.get(core.$theme, --base, --900), | ||
134 | --label: props.get(core.$theme, --base, --900-text), | ||
135 | ), | ||
136 | |||
137 | --active: ( | ||
138 | --bg: props.get(core.$theme, --base, --900), | ||
139 | --label: props.get(core.$theme, --base, --900-text), | ||
140 | ), | ||
141 | ), | ||
142 | )); | ||
143 | |||
144 | @each $theme in $themes-config { | ||
145 | $themes: props.merge($themes, ( | ||
146 | $theme: ( | ||
147 | --bg: props.get(core.$static-colors, $theme, --900), | ||
148 | --label: props.get(core.$static-colors, $theme, --900-text), | ||
149 | --outline-border: props.get(core.$theme, $theme, --900), | ||
150 | --outline-label: props.get(core.$theme, $theme, --1000), | ||
151 | |||
152 | --hover: ( | ||
153 | --bg: props.get(core.$static-colors, $theme, --1000), | ||
154 | --label: props.get(core.$static-colors, $theme, --1000-text), | ||
155 | ), | ||
156 | |||
157 | --active: ( | ||
158 | --bg: props.get(core.$static-colors, $theme, --1100), | ||
159 | --label: props.get(core.$static-colors, $theme, --1100-text), | ||
160 | ), | ||
161 | ) | ||
162 | )); | ||
163 | } | ||
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 69793b2..81412aa 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss | |||
@@ -1,5 +1,6 @@ | |||
1 | @use 'sass:map'; | 1 | @use 'sass:map'; |
2 | @use 'sass:meta'; | 2 | @use 'sass:meta'; |
3 | @use 'sass:string'; | ||
3 | @use 'iro-sass/src/iro-sass' as iro; | 4 | @use 'iro-sass/src/iro-sass' as iro; |
4 | @use '../props'; | 5 | @use '../props'; |
5 | 6 | ||
@@ -66,7 +67,7 @@ | |||
66 | } | 67 | } |
67 | 68 | ||
68 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 69 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
69 | @include iro.bem-modifier($theme) { | 70 | @include iro.bem-modifier(string.slice($theme, 3)) { |
70 | :link, | 71 | :link, |
71 | :visited { | 72 | :visited { |
72 | color: props.get(vars.$static-themes, $theme, --text-color); | 73 | color: props.get(vars.$static-themes, $theme, --text-color); |