summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/index.scss3
-rw-r--r--src/objects/_button.scss173
2 files changed, 176 insertions, 0 deletions
diff --git a/src/index.scss b/src/index.scss
index 292785d..1d21d45 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -8,6 +8,7 @@
8 8
9@import 'objects/heading'; 9@import 'objects/heading';
10@import 'objects/rule'; 10@import 'objects/rule';
11@import 'objects/button';
11 12
12:root { 13:root {
13 @include iro.props-assign; 14 @include iro.props-assign;
@@ -24,6 +25,7 @@
24} 25}
25 26
26@include iro.bem-theme('raised') { 27@include iro.bem-theme('raised') {
28 @include iro.props-assign($root: --colors, $prefix: --colors);
27 @include iro.props-assign('light-raised'); 29 @include iro.props-assign('light-raised');
28 30
29 @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { 31 @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
@@ -39,6 +41,7 @@
39 } 41 }
40 42
41 @include iro.bem-theme('raised') { 43 @include iro.bem-theme('raised') {
44 @include iro.props-assign('dark', $root: --colors, $prefix: --colors);
42 @include iro.props-assign('dark-raised'); 45 @include iro.props-assign('dark-raised');
43 46
44 @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { 47 @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..5da1fbd
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,173 @@
1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4
5@mixin button-variant($variant) {
6 border-color: iro.props-get((--colors, --#{$variant}, --bg));
7 background-color: iro.props-get((--colors, --#{$variant}, --bg));
8 box-shadow: iro.props-get((--colors, --#{$variant}, --shadow));
9 color: iro.props-get((--colors, --#{$variant}, --label));
10
11 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
12 &:hover {
13 border-color: iro.props-get((--colors, --#{$variant}, --hover, --bg));
14 background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg));
15 box-shadow: iro.props-get((--colors, --#{$variant}, --hover, --shadow));
16 color: iro.props-get((--colors, --#{$variant}, --hover, --label));
17 }
18
19 &:active {
20 border-color: iro.props-get((--colors, --#{$variant}, --active, --bg));
21 background-color: iro.props-get((--colors, --#{$variant}, --active, --bg));
22 box-shadow: iro.props-get((--colors, --#{$variant}, --active, --shadow));
23 color: iro.props-get((--colors, --#{$variant}, --active, --label));
24 }
25 }
26
27 @include iro.bem-modifier('outline') {
28 background-color: transparent;
29 box-shadow: none;
30 color: iro.props-get((--colors, --#{$variant}, --outline-label));
31 }
32}
33
34@include iro.props-namespace('button') {
35 @include iro.props-store((
36 --dims: (
37 --padding-x: 1.2rem,
38 --padding-y: .5rem,
39 --rounding: 10em,
40 ),
41 --colors: (
42 --any: (
43 --disabled: (
44 --bg: iro.props-get(--colors --obj-hi, $global: true),
45 --label: iro.props-get(--colors --fg-hi3, $global: true),
46 --shadow: 0 0 0 0 transparent,
47 ),
48 --key-focus: (
49 --bg: transparent,
50 --label: iro.props-get(--colors --accent --primary-lo2, $global: true),
51 --border: iro.props-get(--colors --focus --fill, $global: true),
52 --shadow: iro.props-get(--colors --focus --shadow, $global: true),
53 ),
54 ),
55 --accent: (
56 --bg: iro.props-get(--colors --accent --primary, $global: true),
57 --label: iro.props-get(--colors --accent --primary-fg, $global: true),
58 --outline-label: iro.props-get(--colors --accent --primary-lo2, $global: true),
59 --shadow: 0 0 0 0 transparent,
60
61 --hover: (
62 --bg: iro.props-get(--colors --accent --primary-lo, $global: true),
63 --label: iro.props-get(--colors --accent --primary-fg, $global: true),
64 --shadow: 0 0 0 0 transparent,
65 ),
66 --active: (
67 --bg: iro.props-get(--colors --accent --primary-lo2, $global: true),
68 --label: iro.props-get(--colors --accent --primary-fg, $global: true),
69 --shadow: 0 0 0 0 transparent,
70 ),
71 ),
72 --primary: (
73 --bg: iro.props-get(--colors --fg, $global: true),
74 --label: iro.props-get(--colors --bg-hi2, $global: true),
75 --outline-label: iro.props-get(--colors --fg, $global: true),
76 --shadow: 0 0 0 0 transparent,
77
78 --hover: (
79 --bg: iro.props-get(--colors --fg-lo, $global: true),
80 --label: iro.props-get(--colors --bg-hi2, $global: true),
81 --shadow: 0 0 0 0 transparent,
82 ),
83 --active: (
84 --bg: iro.props-get(--colors --fg-lo, $global: true),
85 --label: iro.props-get(--colors --bg-hi2, $global: true),
86 --shadow: 0 0 0 0 transparent,
87 ),
88 ),
89 --secondary: (
90 --bg: iro.props-get(--colors --obj-hi, $global: true),
91 --label: iro.props-get(--colors --fg, $global: true),
92 --outline-label: iro.props-get(--colors --fg, $global: true),
93 --shadow: 0 0 0 0 transparent,
94
95 --hover: (
96 --bg: iro.props-get(--colors --obj, $global: true),
97 --label: iro.props-get(--colors --fg-lo, $global: true),
98 --shadow: 0 0 0 0 transparent,
99 ),
100 --active: (
101 --bg: iro.props-get(--colors --obj-lo, $global: true),
102 --label: iro.props-get(--colors --fg-lo, $global: true),
103 --shadow: 0 0 0 0 transparent,
104 ),
105 ),
106 ),
107 ));
108
109 @include iro.bem-object(iro.props-namespace()) {
110 @include typography.set-font(vars.$font--main, (weight: 500));
111
112 display: inline-block;
113 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
114 border: 2px solid transparent;
115 border-radius: iro.props-get(--dims --rounding);
116 line-height: 1;
117 text-align: center;
118 text-decoration: none;
119
120 @include iro.bem-modifier('block') {
121 display: block;
122 }
123
124 @include iro.bem-modifier('native') {
125 @include iro.bem-modifier('block') {
126 box-sizing: border-box;
127 width: 100%;
128 }
129 }
130
131 @include button-variant('secondary');
132
133 @each $mod in ('accent' 'primary' 'secondary') {
134 @if $mod != 'secondary' {
135 @include iro.bem-modifier($mod) {
136 // sass-lint:disable-block function-name-format
137 @include button-variant($mod);
138 }
139 }
140 }
141
142 @include iro.bem-at-theme('keyboard') {
143 &:focus {
144 border-color: iro.props-get(--colors --any --key-focus --border);
145 background-color: iro.props-get(--colors --any --key-focus --bg);
146 box-shadow: iro.props-get(--colors --any --key-focus --shadow);
147 color: iro.props-get(--colors --any --key-focus --label);
148 }
149 }
150
151 @include iro.bem-is('disabled') {
152 border-color: iro.props-get(--colors --any --disabled --bg);
153 background-color: iro.props-get(--colors --any --disabled --bg);
154 box-shadow: iro.props-get(--colors --any --disabled --shadow);
155 color: iro.props-get(--colors --any --disabled --label);
156
157 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
158 &:hover,
159 &:active {
160 border-color: iro.props-get(--colors --any --disabled --bg);
161 background-color: iro.props-get(--colors --any --disabled --bg);
162 box-shadow: iro.props-get(--colors --any --disabled --shadow);
163 color: iro.props-get(--colors --any --disabled --label);
164 }
165 }
166
167 @include iro.bem-modifier('outline') {
168 background-color: transparent;
169 box-shadow: none;
170 }
171 }
172 }
173}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 14:19:00 +0000