summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss112
1 files changed, 58 insertions, 54 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 3932575..135ada0 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,33 +1,34 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2@use '../vars'; 3@use '../vars';
3@use '../mixins/typography'; 4@use '../mixins/typography';
4 5
5@mixin button-variant($variant) { 6@mixin button-variant($variant) {
6 border-color: iro.props-get((--colors, --#{$variant}, --bg)); 7 border-color: fn.color((--#{$variant}, --bg));
7 background-color: iro.props-get((--colors, --#{$variant}, --bg)); 8 background-color: fn.color((--#{$variant}, --bg));
8 box-shadow: iro.props-get((--colors, --#{$variant}, --shadow)); 9 box-shadow: fn.color((--#{$variant}, --shadow));
9 color: iro.props-get((--colors, --#{$variant}, --label)); 10 color: fn.color((--#{$variant}, --label));
10 11
11 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 12 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
12 &:hover { 13 &:hover {
13 border-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); 14 border-color: fn.color((--#{$variant}, --hover, --bg));
14 background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); 15 background-color: fn.color((--#{$variant}, --hover, --bg));
15 box-shadow: iro.props-get((--colors, --#{$variant}, --hover, --shadow)); 16 box-shadow: fn.color((--#{$variant}, --hover, --shadow));
16 color: iro.props-get((--colors, --#{$variant}, --hover, --label)); 17 color: fn.color((--#{$variant}, --hover, --label));
17 } 18 }
18 19
19 &:active { 20 &:active {
20 border-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); 21 border-color: fn.color((--#{$variant}, --active, --bg));
21 background-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); 22 background-color: fn.color((--#{$variant}, --active, --bg));
22 box-shadow: iro.props-get((--colors, --#{$variant}, --active, --shadow)); 23 box-shadow: fn.color((--#{$variant}, --active, --shadow));
23 color: iro.props-get((--colors, --#{$variant}, --active, --label)); 24 color: fn.color((--#{$variant}, --active, --label));
24 } 25 }
25 } 26 }
26 27
27 @include iro.bem-modifier('outline') { 28 @include iro.bem-modifier('outline') {
28 background-color: transparent; 29 background-color: transparent;
29 box-shadow: none; 30 box-shadow: none;
30 color: iro.props-get((--colors, --#{$variant}, --outline-label)); 31 color: fn.color((--#{$variant}, --outline-label));
31 } 32 }
32} 33}
33 34
@@ -38,81 +39,84 @@
38 --padding-y: .5rem, 39 --padding-y: .5rem,
39 --rounding: 10em, 40 --rounding: 10em,
40 ), 41 ),
42 ), 'dims');
43
44 @include iro.props-store((
41 --colors: ( 45 --colors: (
42 --any: ( 46 --any: (
43 --disabled: ( 47 --disabled: (
44 --bg: iro.props-get(--colors --obj-hi, $global: true), 48 --bg: fn.color(--obj-hi, $global: true),
45 --label: iro.props-get(--colors --fg-hi3, $global: true), 49 --label: fn.color(--fg-hi3, $global: true),
46 --shadow: 0 0 0 0 transparent, 50 --shadow: 0 0 0 0 transparent,
47 ), 51 ),
48 --key-focus: ( 52 --key-focus: (
49 --bg: transparent, 53 --bg: transparent,
50 --label: iro.props-get(--colors --accent --primary-lo2, $global: true), 54 --label: fn.color(--accent --primary-lo2, $global: true),
51 --border: iro.props-get(--colors --focus --fill, $global: true), 55 --border: fn.color(--focus --fill, $global: true),
52 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 56 --shadow: fn.color(--focus --shadow, $global: true),
53 ), 57 ),
54 ), 58 ),
55 --accent: ( 59 --accent: (
56 --bg: iro.props-get(--colors --accent --primary, $global: true), 60 --bg: fn.color(--accent --primary, $global: true),
57 --label: iro.props-get(--colors --accent --primary-fg, $global: true), 61 --label: fn.color(--accent --primary-fg, $global: true),
58 --outline-label: iro.props-get(--colors --accent --primary-lo, $global: true), 62 --outline-label: fn.color(--accent --primary-lo, $global: true),
59 --shadow: 0 0 0 0 transparent, 63 --shadow: 0 0 0 0 transparent,
60 64
61 --hover: ( 65 --hover: (
62 --bg: iro.props-get(--colors --accent --primary-lo, $global: true), 66 --bg: fn.color(--accent --primary-lo, $global: true),
63 --label: iro.props-get(--colors --accent --primary-fg, $global: true), 67 --label: fn.color(--accent --primary-fg, $global: true),
64 --shadow: 0 0 0 0 transparent, 68 --shadow: 0 0 0 0 transparent,
65 ), 69 ),
66 --active: ( 70 --active: (
67 --bg: iro.props-get(--colors --accent --primary-lo2, $global: true), 71 --bg: fn.color(--accent --primary-lo2, $global: true),
68 --label: iro.props-get(--colors --accent --primary-fg, $global: true), 72 --label: fn.color(--accent --primary-fg, $global: true),
69 --shadow: 0 0 0 0 transparent, 73 --shadow: 0 0 0 0 transparent,
70 ), 74 ),
71 ), 75 ),
72 --primary: ( 76 --primary: (
73 --bg: iro.props-get(--colors --fg, $global: true), 77 --bg: fn.color(--fg, $global: true),
74 --label: iro.props-get(--colors --bg-hi2, $global: true), 78 --label: fn.color(--bg-hi2, $global: true),
75 --outline-label: iro.props-get(--colors --fg, $global: true), 79 --outline-label: fn.color(--fg, $global: true),
76 --shadow: 0 0 0 0 transparent, 80 --shadow: 0 0 0 0 transparent,
77 81
78 --hover: ( 82 --hover: (
79 --bg: iro.props-get(--colors --fg-lo, $global: true), 83 --bg: fn.color(--fg-lo, $global: true),
80 --label: iro.props-get(--colors --bg-hi2, $global: true), 84 --label: fn.color(--bg-hi2, $global: true),
81 --shadow: 0 0 0 0 transparent, 85 --shadow: 0 0 0 0 transparent,
82 ), 86 ),
83 --active: ( 87 --active: (
84 --bg: iro.props-get(--colors --fg-lo, $global: true), 88 --bg: fn.color(--fg-lo, $global: true),
85 --label: iro.props-get(--colors --bg-hi2, $global: true), 89 --label: fn.color(--bg-hi2, $global: true),
86 --shadow: 0 0 0 0 transparent, 90 --shadow: 0 0 0 0 transparent,
87 ), 91 ),
88 ), 92 ),
89 --secondary: ( 93 --secondary: (
90 --bg: iro.props-get(--colors --obj-hi, $global: true), 94 --bg: fn.color(--obj-hi, $global: true),
91 --label: iro.props-get(--colors --fg, $global: true), 95 --label: fn.color(--fg, $global: true),
92 --outline-label: iro.props-get(--colors --fg, $global: true), 96 --outline-label: fn.color(--fg, $global: true),
93 --shadow: 0 0 0 0 transparent, 97 --shadow: 0 0 0 0 transparent,
94 98
95 --hover: ( 99 --hover: (
96 --bg: iro.props-get(--colors --obj, $global: true), 100 --bg: fn.color(--obj, $global: true),
97 --label: iro.props-get(--colors --fg-lo, $global: true), 101 --label: fn.color(--fg-lo, $global: true),
98 --shadow: 0 0 0 0 transparent, 102 --shadow: 0 0 0 0 transparent,
99 ), 103 ),
100 --active: ( 104 --active: (
101 --bg: iro.props-get(--colors --obj-lo, $global: true), 105 --bg: fn.color(--obj-lo, $global: true),
102 --label: iro.props-get(--colors --fg-lo, $global: true), 106 --label: fn.color(--fg-lo, $global: true),
103 --shadow: 0 0 0 0 transparent, 107 --shadow: 0 0 0 0 transparent,
104 ), 108 ),
105 ), 109 ),
106 ), 110 ),
107 )); 111 ), 'colors');
108 112
109 @include iro.bem-object(iro.props-namespace()) { 113 @include iro.bem-object(iro.props-namespace()) {
110 @include typography.set-font(vars.$font--main, (weight: 500)); 114 @include typography.set-font(vars.$font--main, (weight: 500));
111 115
112 display: inline-block; 116 display: inline-block;
113 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 117 padding: fn.dim(--padding-y) fn.dim(--padding-x);
114 border: 2px solid transparent; 118 border: 2px solid transparent;
115 border-radius: iro.props-get(--dims --rounding); 119 border-radius: fn.dim(--rounding);
116 line-height: 1; 120 line-height: 1;
117 text-align: center; 121 text-align: center;
118 text-decoration: none; 122 text-decoration: none;
@@ -138,26 +142,26 @@
138 142
139 @include iro.bem-at-theme('keyboard') { 143 @include iro.bem-at-theme('keyboard') {
140 &:focus { 144 &:focus {
141 border-color: iro.props-get(--colors --any --key-focus --border); 145 border-color: fn.color(--any --key-focus --border);
142 background-color: iro.props-get(--colors --any --key-focus --bg); 146 background-color: fn.color(--any --key-focus --bg);
143 box-shadow: iro.props-get(--colors --any --key-focus --shadow); 147 box-shadow: fn.color(--any --key-focus --shadow);
144 color: iro.props-get(--colors --any --key-focus --label); 148 color: fn.color(--any --key-focus --label);
145 } 149 }
146 } 150 }
147 151
148 @include iro.bem-is('disabled') { 152 @include iro.bem-is('disabled') {
149 border-color: iro.props-get(--colors --any --disabled --bg); 153 border-color: fn.color(--any --disabled --bg);
150 background-color: iro.props-get(--colors --any --disabled --bg); 154 background-color: fn.color(--any --disabled --bg);
151 box-shadow: iro.props-get(--colors --any --disabled --shadow); 155 box-shadow: fn.color(--any --disabled --shadow);
152 color: iro.props-get(--colors --any --disabled --label); 156 color: fn.color(--any --disabled --label);
153 157
154 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 158 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
155 &:hover, 159 &:hover,
156 &:active { 160 &:active {
157 border-color: iro.props-get(--colors --any --disabled --bg); 161 border-color: fn.color(--any --disabled --bg);
158 background-color: iro.props-get(--colors --any --disabled --bg); 162 background-color: fn.color(--any --disabled --bg);
159 box-shadow: iro.props-get(--colors --any --disabled --shadow); 163 box-shadow: fn.color(--any --disabled --shadow);
160 color: iro.props-get(--colors --any --disabled --label); 164 color: fn.color(--any --disabled --label);
161 } 165 }
162 } 166 }
163 167
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 11:51:44 +0000