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