summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-28 14:22:27 +0200
committerVolpeon <git@volpeon.ink>2024-06-28 14:22:27 +0200
commitf98a5c58c830a283d07d8efad4502281a5e0369e (patch)
tree84c4abdd260e595c7b314d79ae7af58bd406bf67 /src
parentAdd card (diff)
downloadiro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.tar.gz
iro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.tar.bz2
iro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_base.scss2
-rw-r--r--src/_config.scss8
-rw-r--r--src/_declare-vars.scss18
-rw-r--r--src/_layouts.scss1
-rw-r--r--src/_mixins.scss3
-rw-r--r--src/_utils.scss4
-rw-r--r--src/layouts/_card-list.scss78
-rw-r--r--src/objects/_action-button.scss4
-rw-r--r--src/objects/_avatar.scss33
-rw-r--r--src/objects/_badge.scss36
-rw-r--r--src/objects/_card.scss72
-rw-r--r--src/objects/_divider.scss1
-rw-r--r--src/objects/_popover.scss9
13 files changed, 234 insertions, 35 deletions
diff --git a/src/_base.scss b/src/_base.scss
index 4932235..aecf6af 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -67,12 +67,10 @@ p {
67} 67}
68 68
69strong { 69strong {
70 color: fn.color(--heading);
71 font-weight: bold; 70 font-weight: bold;
72} 71}
73 72
74small { 73small {
75 color: fn.color(--text-mute);
76 font-size: fn.dim(--font-size --75); 74 font-size: fn.dim(--font-size --75);
77} 75}
78 76
diff --git a/src/_config.scss b/src/_config.scss
index 56a74e1..ffba8c9 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -156,6 +156,10 @@ $theme-light: (
156 --bg-l1: --base --100, 156 --bg-l1: --base --100,
157 --bg-base: --base --200, 157 --bg-base: --base --200,
158 )), 158 )),
159
160 --constants: (
161 --shadow: rgba(#000, 0.15),
162 ),
159) !default; 163) !default;
160 164
161$theme-dark: ( 165$theme-dark: (
@@ -212,6 +216,10 @@ $theme-dark: (
212 --bg-l1: --base --75, 216 --bg-l1: --base --75,
213 --bg-l2: --base --100, 217 --bg-l2: --base --100,
214 )), 218 )),
219
220 --constants: (
221 --shadow: rgba(#000, 0.5),
222 ),
215) !default; 223) !default;
216 224
217$themes: ( 225$themes: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 23ee4d4..797001c 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -101,6 +101,12 @@
101 --thin: 1px, 101 --thin: 1px,
102 ), 102 ),
103 103
104 --shadow: (
105 --x: 0,
106 --y: 1px,
107 --blur: 4px,
108 ),
109
104 --rounding: 4px, 110 --rounding: 4px,
105 111
106 --key-focus: ( 112 --key-focus: (
@@ -110,7 +116,7 @@
110 ), 116 ),
111 117
112 --paragraph: ( 118 --paragraph: (
113 --margin-bs: fn.dim(--size --300, null), 119 --margin-bs: fn.dim(--size --200, null),
114 ), 120 ),
115 121
116 --heading: ( 122 --heading: (
@@ -230,6 +236,14 @@
230 ), $tree); 236 ), $tree);
231 } 237 }
232 238
239 @each $color, $value in map.get($theme, --constants) {
240 @include iro.props-store((
241 --colors: (
242 $color: $value,
243 ),
244 ), $tree);
245 }
246
233 @each $color, $ref in map.get($theme, --semantic) { 247 @each $color, $ref in map.get($theme, --semantic) {
234 $res: (); 248 $res: ();
235 249
@@ -246,7 +260,7 @@
246 $color: $res, 260 $color: $res,
247 ), 261 ),
248 ), $tree); 262 ), $tree);
249 } 263 }
250} 264}
251 265
252@each $theme-name, $theme in config.$themes { 266@each $theme-name, $theme in config.$themes {
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 26cfe3f..779fd64 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -4,4 +4,5 @@
4@use 'layouts/form'; 4@use 'layouts/form';
5@use 'layouts/flex'; 5@use 'layouts/flex';
6@use 'layouts/overflow'; 6@use 'layouts/overflow';
7@use 'layouts/card-list';
7@use 'layouts/message-group'; 8@use 'layouts/message-group';
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 29d792b..dca6831 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -20,8 +20,7 @@
20 @include set-font(--standard, ( 20 @include set-font(--standard, (
21 --line-height: null, 21 --line-height: null,
22 --size: fn.global-dim(list.join(--heading, $size)), 22 --size: fn.global-dim(list.join(--heading, $size)),
23 --weight: bold, 23 --weight: bold
24 --spacing: 1px
25 )); 24 ));
26 25
27 color: fn.global-color(--heading); 26 color: fn.global-color(--heading);
diff --git a/src/_utils.scss b/src/_utils.scss
index a99d7ec..06afa62 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -119,6 +119,10 @@ $sizes: 0 10 50 75 100 125 200 400 700 800 !default;
119 color: fn.color(--text-mute); 119 color: fn.color(--text-mute);
120} 120}
121 121
122@include iro.bem-utility('c-mute-more') {
123 color: fn.color(--text-mute-more);
124}
125
122@include iro.bem-utility('mt-neutralize') { 126@include iro.bem-utility('mt-neutralize') {
123 &::before { 127 &::before {
124 content: ''; 128 content: '';
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
new file mode 100644
index 0000000..c27b297
--- /dev/null
+++ b/src/layouts/_card-list.scss
@@ -0,0 +1,78 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('card-list') {
6 @include iro.props-store((
7 --dims: (
8 --row-gap: fn.global-dim(--size --800),
9 --col-gap: fn.global-dim(--size --400),
10
11 --grid: (
12 --row-gap: fn.global-dim(--size --800),
13 --col-gap: fn.global-dim(--size --400),
14 --col-width: fn.global-dim(--size --3200),
15 ),
16 --masonry: (
17 --row-gap: fn.global-dim(--size --800),
18 --col-gap: fn.global-dim(--size --400),
19 --col-width: fn.global-dim(--size --3200),
20 ),
21 --masonry-h: (
22 --row-gap: fn.global-dim(--size --800),
23 --col-gap: fn.global-dim(--size --400),
24 --row-height: fn.global-dim(--size --3200),
25 )
26 ),
27 --colors: (
28 --border: fn.global-color(--border),
29 ),
30 ));
31
32 @include iro.bem-layout(iro.props-namespace()) {
33 display: flex;
34 flex-direction: column;
35 gap: fn.dim(--row-gap) fn.dim(--col-gap);
36
37 @include iro.bem-modifier('grid') {
38 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
40 gap: fn.dim(--grid --row-gap) fn.dim(--grid --col-gap);
41 }
42
43 @include iro.bem-modifier('masonry') {
44 display: block;
45 columns: auto fn.dim(--masonry --col-width);
46 column-gap: fn.dim(--masonry --col-gap);
47
48 @include iro.bem-elem('card') {
49 margin-bottom: fn.dim(--masonry --row-gap);
50 }
51 }
52
53 @include iro.bem-modifier('masonry-h') {
54 flex-flow: row wrap;
55 gap: fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap);
56
57 @include iro.bem-elem('card') {
58 flex: 1 0 auto;
59 max-width: 100%;
60 }
61
62 @include iro.bem-elem('card-content') {
63 height: fn.dim(--masonry-h --row-height);
64 }
65
66 @include iro.bem-elem('dummy') {
67 flex: 1 0 auto;
68 width: fn.dim(--masonry-h --row-height);
69 }
70 }
71
72 @include iro.bem-modifier('aspect-5\\/4') {
73 @include iro.bem-elem('card') {
74 aspect-ratio: 5 / 4;
75 }
76 }
77 }
78}
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 7a7ff46..7fe9d44 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -11,8 +11,8 @@ $static-themes: 'black' 'white' !default;
11 color: fn.color(list.join($theme, --disabled --label)); 11 color: fn.color(list.join($theme, --disabled --label));
12 12
13 &::after { 13 &::after {
14 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); 14 outline-color: fn.color(list.join($theme, --key-focus --border));
15 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); 15 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
16 } 16 }
17 17
18 &:link, 18 &:link,
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index e6fa74e..5a34d19 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -24,9 +24,11 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
24@include iro.props-namespace('avatar') { 24@include iro.props-namespace('avatar') {
25 @include iro.props-store(( 25 @include iro.props-store((
26 --dims: ( 26 --dims: (
27 --size: fn.global-dim(--size --500), 27 --size: fn.global-dim(--size --500),
28 --font-size: fn.global-dim(--font-size --100), 28 --font-size: fn.global-dim(--font-size --100),
29 --indicator-size: fn.global-dim(--size --150), 29 --indicator-size: fn.global-dim(--size --150),
30 --indicator-spacing: fn.global-dim(--size --40),
31 --rounding: 25%,
30 32
31 --xxxl: ( 33 --xxxl: (
32 --size: fn.global-dim(--size --1600), 34 --size: fn.global-dim(--size --1600),
@@ -58,8 +60,6 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
58 --font-size: fn.global-dim(--font-size --50), 60 --font-size: fn.global-dim(--font-size --50),
59 --indicator-size: fn.global-dim(--size --100), 61 --indicator-size: fn.global-dim(--size --100),
60 ), 62 ),
61 --indicator-spacing: fn.global-dim(--size --40),
62 --rounding: 25%,
63 63
64 --key-focus: ( 64 --key-focus: (
65 --border: fn.global-dim(--key-focus --border), 65 --border: fn.global-dim(--key-focus --border),
@@ -82,12 +82,24 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
82 @include iro.bem-object(iro.props-namespace()) { 82 @include iro.bem-object(iro.props-namespace()) {
83 display: inline-block; 83 display: inline-block;
84 position: relative; 84 position: relative;
85 border: fn.dim(--key-focus --border) solid transparent;
86 border-radius: fn.dim(--rounding); 85 border-radius: fn.dim(--rounding);
87 font-size: fn.dim(--font-size); 86 font-size: fn.dim(--font-size);
88 font-style: normal; 87 font-style: normal;
89 vertical-align: .05em; 88 vertical-align: .05em;
90 89
90 &::after {
91 content: '';
92 display: none;
93 position: absolute;
94 z-index: 1;
95 inset: calc(-1 * fn.dim(--key-focus --border-offset));
96 border: fn.dim(--key-focus --border-offset) solid transparent;
97 border-radius: fn.dim(--rounding);
98 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
99 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
100 pointer-events: none;
101 }
102
91 @include iro.bem-elem('status') { 103 @include iro.bem-elem('status') {
92 position: absolute; 104 position: absolute;
93 inset-inline-end: 0; 105 inset-inline-end: 0;
@@ -110,6 +122,10 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
110 @include iro.bem-modifier('circle') { 122 @include iro.bem-modifier('circle') {
111 border-radius: 100%; 123 border-radius: 100%;
112 124
125 &::after {
126 border-radius: 100%;
127 }
128
113 @include iro.bem-elem('content') { 129 @include iro.bem-elem('content') {
114 border-radius: 100%; 130 border-radius: 100%;
115 } 131 }
@@ -143,8 +159,9 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
143 } 159 }
144 160
145 &:focus-visible { 161 &:focus-visible {
146 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 162 &::after {
147 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 163 display: block;
164 }
148 } 165 }
149 } 166 }
150} 167}
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index cc7e500..06261b8 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default;
45 } 45 }
46 46
47 @if string.slice($theme, 1, 7) == 'static-' { 47 @if string.slice($theme, 1, 7) == 'static-' {
48 &:link, 48 &::after {
49 &:visited, 49 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
50 &:enabled { 50 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
51 &:focus-visible {
52 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
54 }
55 } 51 }
56 } 52 }
57} 53}
@@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default;
190 186
191 @include iro.bem-object(iro.props-namespace()) { 187 @include iro.bem-object(iro.props-namespace()) {
192 display: inline-block; 188 display: inline-block;
193 margin: calc(-1 * fn.dim(--key-focus --border)); 189 position: relative;
194 padding-block: fn.dim(--pad-b); 190 padding-block: fn.dim(--pad-b);
195 padding-inline: fn.dim(--pad-i); 191 padding-inline: fn.dim(--pad-i);
196 border: fn.dim(--key-focus --border) solid transparent; 192 border-radius: fn.dim(--rounding);
197 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
198 background-color: fn.color(--bg); 193 background-color: fn.color(--bg);
199 background-clip: padding-box; 194 background-clip: padding-box;
200 color: fn.color(--label); 195 color: fn.color(--label);
@@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default;
203 text-align: center; 198 text-align: center;
204 text-decoration: none; 199 text-decoration: none;
205 200
201 &::after {
202 content: '';
203 display: none;
204 position: absolute;
205 z-index: 1;
206 inset: calc(-1 * fn.dim(--key-focus --border-offset));
207 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
208 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
209 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
210 pointer-events: none;
211 }
212
206 &:link, 213 &:link,
207 &:visited, 214 &:visited,
208 &:enabled { 215 &:enabled {
@@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default;
244 &:visited, 251 &:visited,
245 &:enabled { 252 &:enabled {
246 &:focus-visible { 253 &:focus-visible {
247 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 254 &::after {
248 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 255 display: block;
256 }
249 } 257 }
250 } 258 }
251 259
@@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default;
258 @include iro.bem-modifier('pill') { 266 @include iro.bem-modifier('pill') {
259 padding-inline: fn.dim(--pad-i-pill); 267 padding-inline: fn.dim(--pad-i-pill);
260 border-radius: 10em; 268 border-radius: 10em;
269
270 &::after {
271 border-radius: 10em;
272 }
261 } 273 }
262 274
263 @each $size in sm lg xl { 275 @each $size in sm lg xl {
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 5783ac1..9f84d7a 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -18,18 +18,26 @@
18 ), 18 ),
19 ), 19 ),
20 --colors: ( 20 --colors: (
21 --bg: fn.global-color(--bg-l2), 21 --bg: fn.global-color(--bg-l2),
22 --border: fn.global-color(--border-mute), 22 --image-bg: fn.global-color(--border-mute),
23 --divider: fn.global-color(--border-mute), 23 --border: fn.global-color(--border-mute),
24 --divider: fn.global-color(--border-mute),
24 25
25 --hover: ( 26 --hover: (
26 --border: fn.global-color(--border), 27 --border: fn.global-color(--border),
27 ), 28 ),
29
28 --key-focus: ( 30 --key-focus: (
29 --label: fn.global-color(--focus --text), 31 --label: fn.global-color(--focus --text),
30 --border: fn.global-color(--focus --border), 32 --border: fn.global-color(--focus --border),
31 --outline: fn.global-color(--focus --outline), 33 --outline: fn.global-color(--focus --outline),
32 ), 34 ),
35
36 --quiet: (
37 --hover: (
38 --border: fn.global-color(--text-disabled),
39 ),
40 ),
33 ), 41 ),
34 )); 42 ));
35 43
@@ -59,8 +67,20 @@
59 } 67 }
60 68
61 @include iro.bem-elem('image') { 69 @include iro.bem-elem('image') {
62 position: relative; 70 position: relative;
63 width: 100%; 71 width: 100%;
72 overflow: hidden;
73 background-color: fn.color(--image-bg);
74
75 &:first-child {
76 border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
77 border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border));
78 }
79
80 &:last-child {
81 border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
82 border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border));
83 }
64 84
65 @include iro.bem-next-elem('avatar') { 85 @include iro.bem-next-elem('avatar') {
66 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); 86 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
@@ -102,5 +122,47 @@
102 background-color: fn.color(--divider); 122 background-color: fn.color(--divider);
103 } 123 }
104 } 124 }
125
126 @include iro.bem-modifier('quiet') {
127 position: relative;
128 border: 0;
129 background-color: transparent;
130
131 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
132 &:hover,
133 &:active {
134 @include iro.bem-elem('image') {
135 outline: fn.dim(--border) solid fn.color(--quiet --hover --border);
136 outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border));
137 }
138 }
139
140 &:focus-visible {
141 outline: none;
142 box-shadow: none;
143
144 @include iro.bem-elem('image') {
145 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
146 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
147 }
148 }
149 }
150
151 @include iro.bem-elem('image') {
152 margin: calc(-1 * fn.dim(--key-focus --border));
153 border: fn.dim(--key-focus --border) solid transparent;
154 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
155 background-clip: padding-box;
156 }
157
158 @include iro.bem-elem('body') {
159 padding: 0;
160 padding-block-start: fn.dim(--spacing);
161 }
162
163 @include iro.bem-elem('footer') {
164 padding-inline: 0;
165 }
166 }
105 } 167 }
106} 168}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 84ddf12..d1e2897 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -75,6 +75,7 @@ $static-themes: 'black' 'white' !default;
75 75
76 @include iro.bem-object(iro.props-namespace()) { 76 @include iro.bem-object(iro.props-namespace()) {
77 display: flex; 77 display: flex;
78 flex: 0 0 auto;
78 flex-direction: row; 79 flex-direction: row;
79 align-items: center; 80 align-items: center;
80 block-size: 1em; 81 block-size: 1em;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 9d4b1c7..5ad58ec 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -14,7 +14,12 @@
14 --colors: ( 14 --colors: (
15 --bg: fn.global-color(--bg-l2), 15 --bg: fn.global-color(--bg-l2),
16 --border: fn.global-color(--border), 16 --border: fn.global-color(--border),
17 --shadow: 0 .2em .5em rgba(#000, .1), 17 --filter: drop-shadow(
18 fn.global-dim(--shadow --x)
19 fn.global-dim(--shadow --y)
20 fn.global-dim(--shadow --blur)
21 fn.global-color(--shadow)
22 ),
18 ), 23 ),
19 )); 24 ));
20 25
@@ -29,7 +34,7 @@
29 border: fn.dim(--border) solid fn.color(--border); 34 border: fn.dim(--border) solid fn.color(--border);
30 border-radius: fn.dim(--rounding); 35 border-radius: fn.dim(--rounding);
31 background-color: fn.color(--bg); 36 background-color: fn.color(--bg);
32 box-shadow: fn.color(--shadow); 37 filter: fn.color(--filter);
33 38
34 @include iro.bem-modifier('up-left') { 39 @include iro.bem-modifier('up-left') {
35 transform: translate(var(--x), calc(var(--y) - 100%)); 40 transform: translate(var(--x), calc(var(--y) - 100%));
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 04:52:29 +0000