summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 19:30:00 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 19:30:00 +0200
commit6b0fcac695aa7a5517f6f53cec50da493acc4582 (patch)
tree05b1ec4bfd484c75f1ee82f06f674aba69ad1408 /src/objects
parentWIP: Refactoring (diff)
downloadiro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.tar.gz
iro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.tar.bz2
iro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.zip
Update
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_badge.scss194
-rw-r--r--src/objects/_button.scss173
-rw-r--r--src/objects/_divider.scss16
-rw-r--r--src/objects/_emoji.scss73
-rw-r--r--src/objects/_icon.scss26
-rw-r--r--src/objects/_palette.scss22
6 files changed, 494 insertions, 10 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
new file mode 100644
index 0000000..0d95751
--- /dev/null
+++ b/src/objects/_badge.scss
@@ -0,0 +1,194 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$themes: accent positive negative warning;
5
6@include iro.props-namespace('badge') {
7 @include iro.props-store((
8 --dims: (
9 --pad-b: fn.global-dim(--size --100),
10 --pad-i: fn.global-dim(--size --150),
11 --pad-i-pill: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding),
13 --font-size: fn.global-dim(--font-size --100),
14
15 --50: (
16 --pad-b: fn.global-dim(--size --50),
17 --pad-i: fn.global-dim(--size --115),
18 --pad-i-pill: fn.global-dim(--size --150),
19 --font-size: fn.global-dim(--font-size --75),
20 ),
21 --200: (
22 --pad-b: fn.global-dim(--size --125),
23 --pad-i: fn.global-dim(--size --175),
24 --pad-i-pill: fn.global-dim(--size --225),
25 --font-size: fn.global-dim(--font-size --150),
26 ),
27 --300: (
28 --pad-b: fn.global-dim(--size --160),
29 --pad-i: fn.global-dim(--size --225),
30 --pad-i-pill: fn.global-dim(--size --300),
31 --font-size: fn.global-dim(--font-size --200),
32 ),
33 ),
34 --colors: (
35 --bg: fn.global-color(--heading),
36 --label: fn.global-color(--bg-l2),
37 --hover: (
38 --bg: fn.global-color(--text),
39 ),
40 --active: (
41 --bg: fn.global-color(--text),
42 ),
43 --key-focus: (
44 --bg: fn.global-color(--base --50),
45 --label: fn.global-color(--heading),
46 --border: fn.global-color(--yellow-static --400),
47 ),
48
49 --quiet: (
50 --bg: fn.global-color(--border-mute),
51 --label: fn.global-color(--heading),
52 --hover: (
53 --bg: fn.global-color(--border),
54 ),
55 --active: (
56 --bg: fn.global-color(--border-strong),
57 ),
58 ),
59 ),
60 ));
61
62 @each $theme in $themes {
63 @include iro.props-store((
64 --colors: (
65 --#{$theme}: (
66 --bg: fn.global-color(--#{$theme} --800),
67 --label: fn.global-color(--#{$theme} --800-text),
68 --hover: (
69 --bg: fn.global-color(--#{$theme} --900),
70 ),
71 --active: (
72 --bg: fn.global-color(--#{$theme} --900),
73 ),
74 ),
75
76 --#{$theme}-quiet: (
77 --bg: fn.global-color(--#{$theme} --200),
78 --label: fn.global-color(--#{$theme} --1100),
79 --hover: (
80 --bg: fn.global-color(--#{$theme} --300),
81 ),
82 --active: (
83 --bg: fn.global-color(--#{$theme} --300),
84 ),
85 )
86 ),
87 ));
88 }
89
90 @include iro.bem-object(iro.props-namespace()) {
91 display: inline-block;
92 padding-block: fn.dim(--pad-b);
93 padding-inline: fn.dim(--pad-i);
94 border-radius: fn.dim(--rounding);
95 background-color: fn.color(--bg);
96 color: fn.color(--label);
97 font-size: fn.dim(--font-size);
98 line-height: fn.global-dim(--font --standard --line-height);
99 text-align: center;
100 text-decoration: none;
101
102 &:link,
103 &:visited,
104 &:enabled {
105 &:hover {
106 background-color: fn.color(--hover --bg);
107 }
108
109 &:active {
110 background-color: fn.color(--active --bg);
111 }
112 }
113
114 @include iro.bem-modifier('quiet') {
115 background-color: fn.color(--quiet --bg);
116 color: fn.color(--quiet --label);
117
118 &:link,
119 &:visited,
120 &:enabled {
121 &:hover {
122 background-color: fn.color(--quiet --hover --bg);
123 }
124
125 &:active {
126 background-color: fn.color(--quiet --active --bg);
127 }
128 }
129 }
130
131 @each $theme in $themes {
132 @include iro.bem-modifier($theme) {
133 background-color: fn.color(--#{$theme} --bg);
134 color: fn.color(--#{$theme} --label);
135
136 &:link,
137 &:visited,
138 &:enabled {
139 &:hover {
140 background-color: fn.color(--#{$theme} --hover --bg);
141 }
142
143 &:active {
144 background-color: fn.color(--#{$theme} --active --bg);
145 }
146 }
147
148 @include iro.bem-modifier('quiet') {
149 background-color: fn.color(--#{$theme}-quiet --bg);
150 color: fn.color(--#{$theme}-quiet --label);
151
152 &:link,
153 &:visited,
154 &:enabled {
155 &:hover {
156 background-color: fn.color(--#{$theme}-quiet --hover --bg);
157 }
158
159 &:active {
160 background-color: fn.color(--#{$theme}-quiet --active --bg);
161 }
162 }
163 }
164 }
165 }
166
167 &:link,
168 &:visited,
169 &:enabled {
170 &:focus-visible {
171 background-color: fn.color(--key-focus --bg);
172 box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border);
173 color: fn.color(--key-focus --label);
174 }
175 }
176
177 @include iro.bem-modifier('pill') {
178 padding-inline: fn.dim(--pad-i-pill);
179 border-radius: 10em;
180 }
181
182 @each $size in '50' '200' '300' {
183 @include iro.bem-modifier($size) {
184 padding-block: fn.dim(--#{$size} --pad-b);
185 padding-inline: fn.dim(--#{$size} --pad-i);
186 font-size: fn.dim(--#{$size} --font-size);
187
188 @include iro.bem-modifier('pill') {
189 padding-inline: fn.dim(--#{$size} --pad-i-pill);
190 }
191 }
192 }
193 }
194}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..d3588f6
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,173 @@
1@use 'sass:list';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$themes: primary accent positive negative warning;
6
7@mixin button-variant($theme: null) {
8 $key: if($theme == null, (), --#{$theme});
9
10 &:link,
11 &:visited,
12 &:enabled {
13 border-color: fn.color(list.join($key, --bg));
14 background-color: fn.color(list.join($key, --bg));
15 color: fn.color(list.join($key, --label));
16 }
17
18 @include iro.bem-modifier('outline') {
19 &:link,
20 &:visited,
21 &:enabled {
22 background-color: transparent;
23 color: fn.color(list.join($key, --outline-label));
24 }
25 }
26
27 &:link,
28 &:visited,
29 &:enabled {
30 &:hover {
31 border-color: fn.color(list.join($key, --hover --bg));
32 background-color: fn.color(list.join($key, --hover --bg));
33 color: fn.color(list.join($key, --hover --label));
34 }
35
36 &:active {
37 border-color: fn.color(list.join($key, --active --bg));
38 background-color: fn.color(list.join($key, --active --bg));
39 color: fn.color(list.join($key, --active --label));
40 }
41 }
42}
43
44@include iro.props-namespace('button') {
45 @include iro.props-store((
46 --dims: (
47 --line-height: 1.4,
48 --pad-i: fn.global-dim(--size --225),
49 --pad-b: fn.global-dim(--size --65),
50 --rounding: 10em,
51
52 --lg: (
53 --pad-i: fn.global-dim(--size --300),
54 --pad-b: fn.global-dim(--size --100),
55 ),
56 ),
57 --colors: (
58 --bg: fn.global-color(--border-mute),
59 --label: fn.global-color(--text),
60 --outline-label: fn.global-color(--text),
61
62 --hover: (
63 --bg: fn.global-color(--border),
64 --label: fn.global-color(--heading),
65 ),
66 --active: (
67 --bg: fn.global-color(--border-strong),
68 --label: fn.global-color(--heading),
69 ),
70 --disabled: (
71 --bg: fn.global-color(--border-mute),
72 --label: fn.global-color(--text-disabled),
73 ),
74 --key-focus: (
75 --bg: fn.global-color(--base --50),
76 --label: fn.global-color(--heading),
77 --border: fn.global-color(--yellow-static --400),
78 ),
79
80 --primary: (
81 --bg: fn.global-color(--base --800),
82 --label: fn.global-color(--base --800-text),
83 --outline-label: fn.global-color(--text),
84
85 --hover: (
86 --bg: fn.global-color(--base --900),
87 --label: fn.global-color(--base --900-text),
88 ),
89 --active: (
90 --bg: fn.global-color(--base --900),
91 --label: fn.global-color(--base --900-text),
92 ),
93 ),
94 ),
95 ));
96
97 @each $theme in $themes {
98 @if $theme != primary {
99 @include iro.props-store((
100 --colors: (
101 --#{$theme}: (
102 --bg: fn.global-color(--#{$theme} --900),
103 --label: fn.global-color(--#{$theme} --900-text),
104 --outline-label: fn.global-color(--#{$theme} --1000),
105
106 --hover: (
107 --bg: fn.global-color(--#{$theme} --1000),
108 --label: fn.global-color(--#{$theme} --1000-text),
109 ),
110 --active: (
111 --bg: fn.global-color(--#{$theme} --1100),
112 --label: fn.global-color(--#{$theme} --1100-text),
113 ),
114 ),
115 ),
116 ));
117 }
118 }
119
120 @include iro.bem-object(iro.props-namespace()) {
121 display: inline-block;
122 padding-block: fn.dim(--pad-b);
123 padding-inline: fn.dim(--pad-i);
124 border: 2px solid transparent;
125 border-radius: fn.dim(--rounding);
126 border-color: fn.color(--disabled --bg);
127 background-color: fn.color(--disabled --bg);
128 color: fn.color(--disabled --label);
129 font-weight: 500;
130 line-height: fn.dim(--line-height);
131 text-align: center;
132 text-decoration: none;
133 vertical-align: top;
134
135 @include iro.bem-modifier('block') {
136 display: block;
137 }
138
139 @include iro.bem-modifier('outline') {
140 background-color: transparent;
141 box-shadow: none;
142 }
143
144 @include iro.bem-modifier('lg') {
145 padding-block: fn.dim(--lg --pad-b);
146 padding-inline: fn.dim(--lg --pad-i);
147 }
148
149 @include button-variant();
150
151 @each $theme in $themes {
152 @include iro.bem-modifier($theme) {
153 @include button-variant($theme);
154 }
155 }
156
157 &:link,
158 &:visited,
159 &:enabled {
160 &:focus-visible {
161 border-color: fn.color(--key-focus --border);
162 background-color: fn.color(--key-focus --bg);
163 color: fn.color(--key-focus --label);
164 }
165 }
166
167 @include iro.bem-modifier('round') {
168 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
169 padding-inline: 0;
170 border-radius: 100em;
171 }
172 }
173}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 3332331..5e80de4 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -42,7 +42,7 @@
42 @include iro.props-store(( 42 @include iro.props-store((
43 --colors: ( 43 --colors: (
44 $color: ( 44 $color: (
45 --bg: fn.global-color($color --700), 45 --bg: fn.global-color($color --800),
46 --label: fn.global-color($color --1000), 46 --label: fn.global-color($color --1000),
47 ) 47 )
48 ), 48 ),
@@ -54,7 +54,7 @@
54 display: flex; 54 display: flex;
55 flex-direction: row; 55 flex-direction: row;
56 align-items: center; 56 align-items: center;
57 height: 1em; 57 block-size: 1em;
58 margin-block: fn.dim(--margin-b); 58 margin-block: fn.dim(--margin-b);
59 color: fn.color(--strong --label); 59 color: fn.color(--strong --label);
60 font-size: fn.dim(--strong --label-font-size); 60 font-size: fn.dim(--strong --label-font-size);
@@ -67,8 +67,8 @@
67 &::after { 67 &::after {
68 content: ''; 68 content: '';
69 flex: 1 1 auto; 69 flex: 1 1 auto;
70 width: 100%; 70 inline-size: 100%;
71 height: fn.dim(--strong --border); 71 block-size: fn.dim(--strong --border);
72 background-color: fn.color(--strong --bg); 72 background-color: fn.color(--strong --bg);
73 } 73 }
74 74
@@ -82,8 +82,8 @@
82 82
83 @include iro.bem-modifier('vertical') { 83 @include iro.bem-modifier('vertical') {
84 align-self: stretch; 84 align-self: stretch;
85 width: 1px; 85 inline-size: 1px;
86 height: auto; 86 block-size: auto;
87 margin-block: 0; 87 margin-block: 0;
88 background-color: fn.color(--faint --bg); 88 background-color: fn.color(--faint --bg);
89 89
@@ -100,7 +100,7 @@
100 100
101 &::before, 101 &::before,
102 &::after { 102 &::after {
103 height: fn.dim(--medium --border); 103 block-size: fn.dim(--medium --border);
104 background-color: fn.color(--medium --bg); 104 background-color: fn.color(--medium --bg);
105 } 105 }
106 } 106 }
@@ -112,7 +112,7 @@
112 112
113 &::before, 113 &::before,
114 &::after { 114 &::after {
115 height: fn.dim(--faint --border); 115 block-size: fn.dim(--faint --border);
116 background-color: fn.color(--faint --bg); 116 background-color: fn.color(--faint --bg);
117 } 117 }
118 } 118 }
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
new file mode 100644
index 0000000..d8d1289
--- /dev/null
+++ b/src/objects/_emoji.scss
@@ -0,0 +1,73 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'sass:math';
4
5@use 'icon';
6
7@include iro.props-namespace('emoji') {
8 @include iro.props-store((
9 --dims: (
10 --size: calc(1 / 14 * 18em),
11 --pad: .3em,
12 --rounding: fn.global-dim(--rounding),
13 --zoom: 3,
14 --valign: -.25em,
15
16 --125: (
17 --size: calc(1 / 14 * 23em),
18 --valign: -.45em,
19 ),
20
21 --150: (
22 --size: calc(1 / 14 * 28em),
23 --valign: -.65em,
24 ),
25
26 --200: (
27 --size: calc(1 / 14 * 38em),
28 --valign: -1em,
29 )
30 ),
31 --colors: (
32 --bg: fn.global-color(--border-mute),
33 )
34 ));
35
36 @include iro.bem-object(iro.props-namespace()) {
37 display: inline-block;
38 position: relative;
39 inline-size: calc(fn.dim(--size));
40 block-size: calc(fn.dim(--size));
41 margin: calc(-1 * fn.dim(--pad));
42 padding: calc(fn.dim(--pad));
43 vertical-align: fn.dim(--valign);
44 object-fit: contain;
45
46 @include iro.bem-modifier('icon') {
47 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
48 vertical-align: fn.foreign-dim(--icon, --valign);
49 }
50
51 @each $size in '125' '150' '200' {
52 @include iro.bem-modifier($size) {
53 inline-size: fn.dim(--#{$size} --size);
54 block-size: fn.dim(--#{$size} --size);
55 vertical-align: fn.dim(--#{$size} --valign);
56
57 @include iro.bem-modifier('icon') {
58 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
59 }
60 }
61 }
62
63 @include iro.bem-modifier('zoomable') {
64 transition: transform .2s ease, background-color .2s ease;
65 border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
66
67 &:hover {
68 transform: scale(fn.dim(--zoom));
69 background-color: fn.color(--bg);
70 }
71 }
72 }
73}
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
new file mode 100644
index 0000000..1491dd9
--- /dev/null
+++ b/src/objects/_icon.scss
@@ -0,0 +1,26 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('icon') {
5 @include iro.props-store((
6 --dims: (
7 --stroke: 1.5px,
8 --size: calc(1 / 14 * 16em),
9 --valign: -.2em,
10 )
11 ));
12
13 @include iro.bem-object(iro.props-namespace()) {
14 display: inline;
15 inline-size: fn.dim(--size);
16 block-size: fn.dim(--size);
17 stroke-width: fn.dim(--stroke);
18 stroke-linecap: round;
19 stroke-linejoin: round;
20 vertical-align: fn.dim(--valign);
21
22 @include iro.bem-modifier('block') {
23 display: block;
24 }
25 }
26}
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 9ecdfac..19f282f 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -7,8 +7,8 @@
7 7
8@include iro.props-namespace('palette') { 8@include iro.props-namespace('palette') {
9 @include iro.bem-object(iro.props-namespace()) { 9 @include iro.bem-object(iro.props-namespace()) {
10 display: flex; 10 display: flex;
11 height: 3em; 11 block-size: 3em;
12 12
13 @include iro.bem-elem('item') { 13 @include iro.bem-elem('item') {
14 flex: 1 1 auto; 14 flex: 1 1 auto;
@@ -40,5 +40,23 @@
40 } 40 }
41 } 41 }
42 } 42 }
43
44 @include iro.bem-modifier('static') {
45 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
46 $contrasts: map.get(config.$static-colors, --contrasts);
47
48 @include iro.bem-modifier(string.slice($palette-name, 3)) {
49 @include iro.bem-elem('item') {
50 @for $i from 1 through list.length($contrasts) {
51 $key: list.nth(map.keys($contrasts), $i);
52
53 &:nth-child(#{$i}) {
54 background-color: fn.global-color(#{$palette-name}-static $key);
55 }
56 }
57 }
58 }
59 }
60 }
43 } 61 }
44} 62}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 12:35:07 +0000