summaryrefslogtreecommitdiffstats
path: root/src/.old
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-23 19:05:33 +0200
committerVolpeon <git@volpeon.ink>2024-06-23 19:05:33 +0200
commit64a841c69ead262666dd0754218585d0f05cf735 (patch)
tree2e6d3462d544c18d51e1e9930a2d95f98111e219 /src/.old
parentUpdate (diff)
downloadiro-design-64a841c69ead262666dd0754218585d0f05cf735.tar.gz
iro-design-64a841c69ead262666dd0754218585d0f05cf735.tar.bz2
iro-design-64a841c69ead262666dd0754218585d0f05cf735.zip
WIP: New color calculations
Diffstat (limited to 'src/.old')
-rw-r--r--src/.old/objects/_checkbox.scss249
-rw-r--r--src/.old/objects/_radio.scss176
2 files changed, 0 insertions, 425 deletions
diff --git a/src/.old/objects/_checkbox.scss b/src/.old/objects/_checkbox.scss
deleted file mode 100644
index b3bb34d..0000000
--- a/src/.old/objects/_checkbox.scss
+++ /dev/null
@@ -1,249 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('checkbox') {
5 @include iro.props-store((
6 --dims: (
7 --size: fn.global-dim(--size --175),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: fn.global-dim(--size --65),
12 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: (
17 --box-border: fn.global-color(--fg-hi),
18 --box-bg: fn.global-color(--bg-hi),
19
20 --hover: (
21 --label: fn.global-color(--fg-lo),
22 --box-border: fn.global-color(--fg),
23 ),
24 --accent: (
25 --box-border: fn.global-color(--accent --primary --solid --bg),
26
27 --hover: (
28 --box-border: fn.global-color(--accent --primary --solid --obj),
29 ),
30 ),
31 --key-focus: (
32 --label: fn.global-color(--focus --text),
33 --box-border: fn.global-color(--focus --fill),
34 --shadow: fn.global-color(--focus --shadow),
35 ),
36 --disabled: (
37 --label: fn.global-color(--fg-hi3),
38 --box-border: fn.global-color(--obj-lo),
39 --box-bg: fn.global-color(--bg-hi),
40 )
41 ),
42 ), 'colors');
43
44 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex;
46 position: relative;
47 align-items: flex-start;
48 margin-right: calc(-1 * fn.dim(--pad-x));
49 margin-left: calc(-1 * fn.dim(--pad-x));
50 padding: fn.dim(--pad-y) fn.dim(--pad-x);
51
52 @include iro.bem-elem('box') {
53 display: block;
54 position: relative;
55 flex: 0 0 auto;
56 width: fn.dim(--size);
57 height: fn.dim(--size);
58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
59 border-radius: fn.dim(--border);
60 background-color: fn.color(--box-border);
61
62 &::before,
63 &::after {
64 content: '';
65 display: block;
66 position: absolute;
67 }
68
69 &::before {
70 z-index: 2;
71 top: fn.dim(--border);
72 left: fn.dim(--border);
73 width: calc(fn.dim(--size) - 2 * fn.dim(--border));
74 height: calc(fn.dim(--size) - 2 * fn.dim(--border));
75 transition: transform .2s ease;
76 background-color: fn.color(--box-bg);
77 }
78
79 &::after {
80 z-index: 3;
81 top: calc(.5 * fn.dim(--size) - 1px);
82 left: calc(1.5 * fn.dim(--border));
83 box-sizing: border-box;
84 width: calc(fn.dim(--size) - 3 * fn.dim(--border));
85 height: 0;
86 transform: scale(0);
87 transition: transform .2s ease;
88 border-width: 0 2px 2px 0;
89 border-style: solid;
90 border-radius: 2px;
91 border-color: fn.color(--box-bg);
92 }
93 }
94
95 @include iro.bem-elem('check-icon') {
96 display: block;
97 position: absolute;
98 z-index: 2;
99 top: calc(1 * fn.dim(--border));
100 left: calc(1 * fn.dim(--border));
101 width: calc(100% - 2 * fn.dim(--border));
102 height: calc(100% - 2 * fn.dim(--border));
103 margin: 0;
104 transform: scale(0);
105 transform-origin: 40% 90%;
106 transition: transform .2s ease;
107 stroke-width: iro.fn-px-to-rem(3px);
108 color: fn.color(--box-bg);
109 }
110
111 @include iro.bem-elem('label') {
112 align-self: baseline;
113 margin-left: fn.dim(--label-gap);
114 }
115
116 @include iro.bem-elem('native') {
117 position: absolute;
118 top: 0;
119 left: 0;
120 width: 100%;
121 height: 100%;
122 margin: 0;
123 padding: 0;
124 overflow: hidden;
125 opacity: .0001;
126
127 &:hover {
128 @include iro.bem-sibling-elem('label') {
129 color: fn.color(--hover --label);
130 }
131
132 @include iro.bem-sibling-elem('box') {
133 background-color: fn.color(--hover --box-border);
134 }
135 }
136
137 &:checked {
138 @include iro.bem-sibling-elem('box') {
139 &::before {
140 transform: scale(0);
141 }
142
143 @include iro.bem-elem('check-icon') {
144 transform: scale(1);
145 }
146 }
147 }
148
149 &:indeterminate {
150 @include iro.bem-sibling-elem('box') {
151 &::before {
152 transform: scale(0);
153 }
154
155 &::after {
156 transform: scale(1);
157 }
158
159 @include iro.bem-elem('check-icon') {
160 transform: scale(0);
161 }
162 }
163 }
164
165 &:disabled {
166 @include iro.bem-sibling-elem('label') {
167 color: fn.color(--disabled --label);
168 }
169
170 @include iro.bem-sibling-elem('box') {
171 background-color: fn.color(--disabled --box-border);
172
173 &::before {
174 background-color: fn.color(--disabled --box-bg);
175 }
176 }
177 }
178
179 @include iro.bem-at-theme('keyboard') {
180 &:focus {
181 @include iro.bem-sibling-elem('label') {
182 color: fn.color(--key-focus --label);
183 }
184
185 @include iro.bem-sibling-elem('box') {
186 background-color: fn.color(--key-focus --box-border);
187 box-shadow: fn.color(--key-focus --shadow);
188 }
189 }
190 }
191 }
192
193 @include iro.bem-modifier('standalone') {
194 @include iro.bem-elem('box') {
195 margin-top: 0;
196 }
197 }
198
199 @include iro.bem-modifier('accent') {
200 @include iro.bem-elem('native') {
201 &:checked {
202 @include iro.bem-sibling-elem('box') {
203 background-color: fn.color(--accent --box-border);
204 }
205
206 &:hover {
207 @include iro.bem-sibling-elem('box') {
208 background-color: fn.color(--accent --hover --box-border);
209 }
210 }
211 }
212
213 &:indeterminate {
214 @include iro.bem-sibling-elem('box') {
215 background-color: fn.color(--accent --box-border);
216 }
217
218 &:hover {
219 @include iro.bem-sibling-elem('box') {
220 background-color: fn.color(--accent --hover --box-border);
221 }
222 }
223 }
224
225 &:disabled {
226 @include iro.bem-sibling-elem('box') {
227 background-color: fn.color(--disabled --box-border);
228
229 &::before {
230 background-color: fn.color(--disabled --box-bg);
231 }
232 }
233
234 &:checked {
235 @include iro.bem-sibling-elem('box') {
236 background-color: fn.color(--disabled --box-border);
237 }
238 }
239
240 &:indeterminate {
241 @include iro.bem-sibling-elem('box') {
242 background-color: fn.color(--disabled --box-border);
243 }
244 }
245 }
246 }
247 }
248 }
249}
diff --git a/src/.old/objects/_radio.scss b/src/.old/objects/_radio.scss
deleted file mode 100644
index 5af7a12..0000000
--- a/src/.old/objects/_radio.scss
+++ /dev/null
@@ -1,176 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('radio') {
5 @include iro.props-store((
6 --dims: (
7 --diameter: calc(fn.global-dim(--size --175) + 1px),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: fn.global-dim(--size --65),
12 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: (
17 --circle-border: fn.global-color(--fg-hi),
18 --circle-bg: fn.global-color(--bg-hi),
19
20 --hover: (
21 --label: fn.global-color(--fg-lo),
22 --circle-border: fn.global-color(--fg),
23 ),
24 --accent: (
25 --circle-border: fn.global-color(--accent --primary --solid --bg),
26
27 --hover: (
28 --circle-border: fn.global-color(--accent --primary --solid --obj),
29 ),
30 ),
31 --key-focus: (
32 --label: fn.global-color(--focus --text),
33 --circle-border: fn.global-color(--focus --fill),
34 --shadow: fn.global-color(--focus --shadow),
35 ),
36 --disabled: (
37 --label: fn.global-color(--fg-hi3),
38 --circle-border: fn.global-color(--obj-lo),
39 --circle-bg: fn.global-color(--bg-hi),
40 )
41 ),
42 ), 'colors');
43
44 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex;
46 position: relative;
47 align-items: flex-start;
48 margin-right: calc(-1 * fn.dim(--pad-x));
49 margin-left: calc(-1 * fn.dim(--pad-x));
50 padding: fn.dim(--pad-y) fn.dim(--pad-x);
51
52 @include iro.bem-elem('circle') {
53 display: block;
54 box-sizing: border-box;
55 flex: 0 0 auto;
56 width: fn.dim(--diameter);
57 height: fn.dim(--diameter);
58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
59 border-radius: 2em;
60 background-color: fn.color(--circle-border);
61
62 &::after {
63 content: '';
64 display: block;
65 position: relative;
66 top: fn.dim(--border);
67 left: fn.dim(--border);
68 width: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
69 height: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
70 transition: transform .2s ease;
71 border-radius: fn.dim(--diameter);
72 background-color: fn.color(--circle-bg);
73 }
74 }
75
76 @include iro.bem-elem('label') {
77 align-self: baseline;
78 margin-left: fn.dim(--label-gap);
79 }
80
81 @include iro.bem-elem('native') {
82 position: absolute;
83 top: 0;
84 left: 0;
85 width: 100%;
86 height: 100%;
87 margin: 0;
88 padding: 0;
89 overflow: hidden;
90 opacity: .0001;
91
92 &:hover {
93 @include iro.bem-sibling-elem('label') {
94 color: fn.color(--hover --label);
95 }
96
97 @include iro.bem-sibling-elem('circle') {
98 background-color: fn.color(--hover --circle-border);
99 }
100 }
101
102 &:checked {
103 @include iro.bem-sibling-elem('circle') {
104 &::after {
105 transform: scale(.44);
106 }
107 }
108 }
109
110 &:disabled {
111 @include iro.bem-sibling-elem('label') {
112 color: fn.color(--disabled --label);
113 }
114
115 @include iro.bem-sibling-elem('circle') {
116 background-color: fn.color(--disabled --circle-border);
117
118 &::after {
119 background-color: fn.color(--disabled --circle-bg);
120 }
121 }
122 }
123
124 @include iro.bem-at-theme('keyboard') {
125 &:focus {
126 @include iro.bem-sibling-elem('label') {
127 color: fn.color(--key-focus --label);
128 }
129
130 @include iro.bem-sibling-elem('circle') {
131 background-color: fn.color(--key-focus --circle-border);
132 box-shadow: fn.color(--key-focus --shadow);
133 }
134 }
135 }
136 }
137
138 @include iro.bem-modifier('standalone') {
139 @include iro.bem-elem('circle') {
140 margin-top: 0;
141 }
142 }
143
144 @include iro.bem-modifier('accent') {
145 @include iro.bem-elem('native') {
146 &:checked {
147 @include iro.bem-sibling-elem('circle') {
148 background-color: fn.color(--accent --circle-border);
149 }
150
151 &:hover {
152 @include iro.bem-sibling-elem('circle') {
153 background-color: fn.color(--accent --hover --circle-border);
154 }
155 }
156 }
157
158 &:disabled {
159 @include iro.bem-sibling-elem('circle') {
160 background-color: fn.color(--disabled --circle-border);
161
162 &::after {
163 background-color: fn.color(--disabled --circle-bg);
164 }
165 }
166
167 &:checked {
168 @include iro.bem-sibling-elem('circle') {
169 background-color: fn.color(--disabled --circle-border);
170 }
171 }
172 }
173 }
174 }
175 }
176}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 12:45:17 +0000