summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_badge.scss8
-rw-r--r--src/objects/_button.scss30
-rw-r--r--src/objects/_field-label.scss86
-rw-r--r--src/objects/_text-field.scss209
4 files changed, 323 insertions, 10 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 0d95751..23ae305 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -12,19 +12,19 @@ $themes: accent positive negative warning;
12 --rounding: fn.global-dim(--rounding), 12 --rounding: fn.global-dim(--rounding),
13 --font-size: fn.global-dim(--font-size --100), 13 --font-size: fn.global-dim(--font-size --100),
14 14
15 --50: ( 15 --sm: (
16 --pad-b: fn.global-dim(--size --50), 16 --pad-b: fn.global-dim(--size --50),
17 --pad-i: fn.global-dim(--size --115), 17 --pad-i: fn.global-dim(--size --115),
18 --pad-i-pill: fn.global-dim(--size --150), 18 --pad-i-pill: fn.global-dim(--size --150),
19 --font-size: fn.global-dim(--font-size --75), 19 --font-size: fn.global-dim(--font-size --75),
20 ), 20 ),
21 --200: ( 21 --lg: (
22 --pad-b: fn.global-dim(--size --125), 22 --pad-b: fn.global-dim(--size --125),
23 --pad-i: fn.global-dim(--size --175), 23 --pad-i: fn.global-dim(--size --175),
24 --pad-i-pill: fn.global-dim(--size --225), 24 --pad-i-pill: fn.global-dim(--size --225),
25 --font-size: fn.global-dim(--font-size --150), 25 --font-size: fn.global-dim(--font-size --150),
26 ), 26 ),
27 --300: ( 27 --xl: (
28 --pad-b: fn.global-dim(--size --160), 28 --pad-b: fn.global-dim(--size --160),
29 --pad-i: fn.global-dim(--size --225), 29 --pad-i: fn.global-dim(--size --225),
30 --pad-i-pill: fn.global-dim(--size --300), 30 --pad-i-pill: fn.global-dim(--size --300),
@@ -179,7 +179,7 @@ $themes: accent positive negative warning;
179 border-radius: 10em; 179 border-radius: 10em;
180 } 180 }
181 181
182 @each $size in '50' '200' '300' { 182 @each $size in sm lg xl {
183 @include iro.bem-modifier($size) { 183 @include iro.bem-modifier($size) {
184 padding-block: fn.dim(--#{$size} --pad-b); 184 padding-block: fn.dim(--#{$size} --pad-b);
185 padding-inline: fn.dim(--#{$size} --pad-i); 185 padding-inline: fn.dim(--#{$size} --pad-i);
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index d3588f6..a823f17 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -47,11 +47,24 @@ $themes: primary accent positive negative warning;
47 --line-height: 1.4, 47 --line-height: 1.4,
48 --pad-i: fn.global-dim(--size --225), 48 --pad-i: fn.global-dim(--size --225),
49 --pad-b: fn.global-dim(--size --65), 49 --pad-b: fn.global-dim(--size --65),
50 --border: fn.global-dim(--border --medium),
50 --rounding: 10em, 51 --rounding: 10em,
52 --font-size: fn.global-dim(--font-size --100),
51 53
54 --sm: (
55 --pad-i: fn.global-dim(--size --150),
56 --pad-b: fn.global-dim(--size --25),
57 --font-size: fn.global-dim(--font-size --75),
58 ),
52 --lg: ( 59 --lg: (
53 --pad-i: fn.global-dim(--size --300), 60 --pad-i: fn.global-dim(--size --300),
54 --pad-b: fn.global-dim(--size --100), 61 --pad-b: fn.global-dim(--size --100),
62 --font-size: fn.global-dim(--font-size --150),
63 ),
64 --xl: (
65 --pad-i: fn.global-dim(--size --400),
66 --pad-b: fn.global-dim(--size --150),
67 --font-size: fn.global-dim(--font-size --200),
55 ), 68 ),
56 ), 69 ),
57 --colors: ( 70 --colors: (
@@ -121,11 +134,12 @@ $themes: primary accent positive negative warning;
121 display: inline-block; 134 display: inline-block;
122 padding-block: fn.dim(--pad-b); 135 padding-block: fn.dim(--pad-b);
123 padding-inline: fn.dim(--pad-i); 136 padding-inline: fn.dim(--pad-i);
124 border: 2px solid transparent; 137 border: fn.dim(--border) solid transparent;
125 border-radius: fn.dim(--rounding); 138 border-radius: fn.dim(--rounding);
126 border-color: fn.color(--disabled --bg); 139 border-color: fn.color(--disabled --bg);
127 background-color: fn.color(--disabled --bg); 140 background-color: fn.color(--disabled --bg);
128 color: fn.color(--disabled --label); 141 color: fn.color(--disabled --label);
142 font-size: fn.dim(--font-size);
129 font-weight: 500; 143 font-weight: 500;
130 line-height: fn.dim(--line-height); 144 line-height: fn.dim(--line-height);
131 text-align: center; 145 text-align: center;
@@ -141,9 +155,12 @@ $themes: primary accent positive negative warning;
141 box-shadow: none; 155 box-shadow: none;
142 } 156 }
143 157
144 @include iro.bem-modifier('lg') { 158 @each $size in sm lg xl {
145 padding-block: fn.dim(--lg --pad-b); 159 @include iro.bem-modifier($size) {
146 padding-inline: fn.dim(--lg --pad-i); 160 padding-block: fn.dim(--#{$size} --pad-b);
161 padding-inline: fn.dim(--#{$size} --pad-i);
162 font-size: fn.dim(--#{$size} --font-size);
163 }
147 } 164 }
148 165
149 @include button-variant(); 166 @include button-variant();
@@ -160,6 +177,7 @@ $themes: primary accent positive negative warning;
160 &:focus-visible { 177 &:focus-visible {
161 border-color: fn.color(--key-focus --border); 178 border-color: fn.color(--key-focus --border);
162 background-color: fn.color(--key-focus --bg); 179 background-color: fn.color(--key-focus --bg);
180 box-shadow: 0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border);
163 color: fn.color(--key-focus --label); 181 color: fn.color(--key-focus --label);
164 } 182 }
165 } 183 }
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
new file mode 100644
index 0000000..9f267cb
--- /dev/null
+++ b/src/objects/_field-label.scss
@@ -0,0 +1,86 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('field-label') {
5 @include iro.props-store((
6 --dims: (
7 --spacing-i: fn.global-dim(--size --150),
8 --spacing-b: fn.global-dim(--size --85),
9 --label-font-size: fn.global-dim(--font-size --75),
10 --hint-font-size: fn.global-dim(--font-size --75),
11 ),
12 --colors: (
13 --label: fn.global-color(--text-mute),
14 --hint: fn.global-color(--text-mute),
15 --error-hint: fn.global-color(--negative --900),
16 --disabled: fn.global-color(--text-disabled),
17 ),
18 ));
19
20 @include iro.bem-object(iro.props-namespace()) {
21 display: block;
22
23 @include iro.bem-elem('label') {
24 display: block;
25 flex: 0 0 auto;
26 padding-inline-end: fn.dim(--spacing-i);
27 color: fn.color(--label);
28 font-size: fn.dim(--label-font-size);
29 font-weight: 400;
30 line-height: 1.3;
31
32 @include iro.bem-next-elem('content') {
33 margin-block-start: fn.dim(--spacing-b);
34 }
35 }
36
37 @include iro.bem-elem('content') {
38 display: block;
39 inline-size: 100%;
40 }
41
42 @include iro.bem-elem('hint') {
43 display: block;
44 margin-block-start: fn.dim(--spacing-b);
45 color: fn.color(--hint);
46 font-size: fn.dim(--hint-font-size);
47 }
48
49 @include iro.bem-is('invalid') {
50 @include iro.bem-elem('hint') {
51 color: fn.color(--error-hint);
52 }
53 }
54
55 @include iro.bem-is('disabled') {
56 @include iro.bem-elem('label', 'hint') {
57 color: fn.color(--disabled);
58 }
59 }
60
61 @include iro.bem-modifier('align-start', 'align-end') {
62 display: flex;
63 align-items: baseline;
64
65 @include iro.bem-elem('label') {
66 display: inline-block;
67
68 @include iro.bem-next-elem('content') {
69 margin-block-start: 0;
70 }
71 }
72 }
73
74 @include iro.bem-modifier('align-start') {
75 @include iro.bem-elem('label') {
76 text-align: start;
77 }
78 }
79
80 @include iro.bem-modifier('align-end') {
81 @include iro.bem-elem('label') {
82 text-align: end;
83 }
84 }
85 }
86}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
new file mode 100644
index 0000000..de5bcd1
--- /dev/null
+++ b/src/objects/_text-field.scss
@@ -0,0 +1,209 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin invalid {
5 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
6
7 @include iro.bem-sibling-elem('bg') {
8 inset-block: $focus-border-offset;
9 inset-inline: $focus-border-offset;
10 border: fn.dim(--focus --border) solid fn.color(--error --border);
11 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
12 }
13
14 &:hover {
15 @include iro.bem-sibling-elem('bg') {
16 border-color: fn.color(--error --hover --border);
17 }
18 }
19
20 &:focus {
21 @include iro.bem-sibling-elem('bg') {
22 border-color: fn.color(--error --focus --border);
23 }
24 }
25}
26
27@mixin keyboard-focus {
28 @include iro.bem-sibling-elem('bg') {
29 border: fn.dim(--key-focus --border) solid fn.color(--key-focus --border);
30 }
31}
32
33@include iro.props-namespace('text-field') {
34 @include iro.props-store((
35 --dims: (
36 --line-height: 1.4,
37 --pad-i: fn.global-dim(--size --125),
38 --pad-b: fn.global-dim(--size --125),
39 --border: fn.global-dim(--border --thin),
40 --rounding: fn.global-dim(--rounding),
41
42 --extended: (
43 --pad: fn.global-dim(--size --50),
44 ),
45
46 --focus: (
47 --border: fn.global-dim(--border --medium),
48 ),
49 --key-focus: (
50 --border: fn.global-dim(--border --thick),
51 )
52 ),
53 --colors: (
54 --bg: fn.global-color(--base --50),
55 --placeholder: fn.global-color(--text-mute-more),
56 --text: fn.global-color(--text),
57 --border: fn.global-color(--border-strong),
58
59 --hover: (
60 --border: fn.global-color(--text-mute-more),
61 ),
62 --focus: (
63 --border: fn.global-color(--accent --900),
64 ),
65 --key-focus: (
66 --border: fn.global-color(--yellow-static --400),
67 ),
68 --error: (
69 --border: fn.global-color(--negative --900),
70
71 --hover: (
72 --border: fn.global-color(--negative --800),
73 ),
74 --focus: (
75 --border: fn.global-color(--negative --800),
76 ),
77 ),
78 --disabled: (
79 --bg: fn.global-color(--border-mute),
80 --placeholder: fn.global-color(--text-disabled),
81 --text: fn.global-color(--text-disabled),
82 --border: fn.global-color(--border-mute),
83 ),
84 ),
85 ));
86
87 @include iro.bem-object(iro.props-namespace()) {
88 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
89
90 position: relative;
91 min-inline-size: 0;
92 border-radius: fn.dim(--rounding);
93 background-color: fn.color(--bg);
94
95 @include iro.bem-elem('bg') {
96 display: block;
97 position: absolute;
98 inset-block: 0;
99 inset-inline: 0;
100 border: fn.dim(--border) solid fn.color(--border);
101 border-radius: fn.dim(--rounding);
102 pointer-events: none;
103 }
104
105 @include iro.bem-elem('native') {
106 box-sizing: border-box;
107 inline-size: 100%;
108 padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1));
109 padding-inline: fn.dim(--pad-i);
110 border: 1px solid transparent;
111 background-color: transparent;
112 color: fn.color(--text);
113 font: inherit;
114 line-height: fn.dim(--line-height);
115 resize: none;
116 appearance: none;
117
118 &::placeholder {
119 opacity: 1;
120 color: fn.color(--placeholder);
121 font-style: italic;
122 }
123
124 &:hover {
125 @include iro.bem-sibling-elem('bg') {
126 border-color: fn.color(--hover --border);
127 }
128 }
129
130 &:focus {
131 outline: 0;
132
133 @include iro.bem-sibling-elem('bg') {
134 inset-block: $focus-border-offset;
135 inset-inline: $focus-border-offset;
136 border: fn.dim(--focus --border) solid fn.color(--focus --border);
137 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
138 }
139 }
140
141 &:invalid {
142 @include invalid;
143 }
144
145 &:focus-visible,
146 &:invalid:focus-visible {
147 @include keyboard-focus;
148 }
149 }
150
151 @include iro.bem-modifier('extended') {
152 padding: fn.dim(--extended --pad);
153
154 @include iro.bem-multi('&', 'elem' 'bg') {
155 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
156 }
157
158 @include iro.bem-elem('native') {
159 &:focus {
160 @include iro.bem-sibling-elem('bg') {
161 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset);
162 }
163 }
164 }
165 }
166
167 @include iro.bem-is('invalid') {
168 @include iro.bem-elem('native') {
169 @include invalid;
170
171 &:focus-visible {
172 @include keyboard-focus;
173 }
174 }
175 }
176
177 @include iro.bem-is('disabled') {
178 background-color: fn.color(--disabled --bg);
179
180 @include iro.bem-elem('native') {
181 color: fn.color(--disabled --text);
182
183 &::placeholder {
184 color: fn.color(--disabled --placeholder);
185 }
186 }
187
188 @include iro.bem-elem('bg') {
189 border-color: fn.color(--disabled --border);
190 }
191
192 @include iro.bem-is('invalid') {
193 @include iro.bem-elem('native') {
194 @include iro.bem-sibling-elem('bg') {
195 border-color: fn.color(--disabled --border);
196 }
197 }
198 }
199
200 @include iro.bem-elem('native') {
201 &:invalid {
202 @include iro.bem-sibling-elem('bg') {
203 border-color: fn.color(--disabled --border);
204 }
205 }
206 }
207 }
208 }
209}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 17:31:37 +0000