summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--package.json2
-rw-r--r--src/_utils.scss10
-rw-r--r--src/_vars.scss116
-rw-r--r--tpl/index.pug6
-rw-r--r--tpl/objects/action-menu.pug2
-rw-r--r--tpl/objects/avatar.pug2
-rw-r--r--tpl/objects/backdrop.pug2
-rw-r--r--yarn.lock20
8 files changed, 87 insertions, 73 deletions
diff --git a/package.json b/package.json
index de64393..fa4f082 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
28 "pug": "^3.0.0", 28 "pug": "^3.0.0",
29 "pug-cli": "^1.0.0-alpha6", 29 "pug-cli": "^1.0.0-alpha6",
30 "sass": "^1.28.0", 30 "sass": "^1.28.0",
31 "stylelint": "^14.3.0", 31 "stylelint": "^14.5.0",
32 "stylelint-config-sass-guidelines": "^9.0.1", 32 "stylelint-config-sass-guidelines": "^9.0.1",
33 "svg-sprite": "^1.5.4" 33 "svg-sprite": "^1.5.4"
34 } 34 }
diff --git a/src/_utils.scss b/src/_utils.scss
index 7ae2d6e..ae72f65 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,11 +1,11 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'functions' as fn; 2@use 'functions' as fn;
3 3
4@include iro.bem-utility('db') { 4@include iro.bem-utility('d-block') {
5 display: block; 5 display: block;
6} 6}
7 7
8@include iro.bem-utility('dc') { 8@include iro.bem-utility('d-contents') {
9 display: contents; 9 display: contents;
10} 10}
11 11
@@ -14,15 +14,15 @@
14 text-overflow: ellipsis; 14 text-overflow: ellipsis;
15} 15}
16 16
17@include iro.bem-utility('ps') { 17@include iro.bem-utility('p-static') {
18 position: static; 18 position: static;
19} 19}
20 20
21@include iro.bem-utility('pr') { 21@include iro.bem-utility('p-relative') {
22 position: relative; 22 position: relative;
23} 23}
24 24
25@include iro.bem-utility('mt0') { 25@include iro.bem-utility('mt-0') {
26 margin-top: 0; 26 margin-top: 0;
27} 27}
28 28
diff --git a/src/_vars.scss b/src/_vars.scss
index 71f0b1f..cafdb3d 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,3 +1,4 @@
1@use 'sass:math';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 3@use 'include-media/dist/include-media' as media;
3@use '@oddbird/blend'; 4@use '@oddbird/blend';
@@ -17,6 +18,42 @@ media.$unit-intervals: (
17 '': 0 18 '': 0
18); 19);
19 20
21$grays: ();
22
23@for $i from 0 through 100 {
24 $grays: append($grays, $i * 1%);
25}
26
27$grays-rev: iro.fn-list-reverse($grays);
28
29@function find-gray($lightness, $contrast) {
30 $base: blend.lch($lightness 0 0);
31 $dir: if($contrast < 0, -1, 1) * if($lightness >= 50%, 1, -1);
32 $args: ();
33
34 @if $dir == 1 {
35 @each $gray in $grays-rev {
36 @if $gray < $lightness {
37 $args: append($args, blend.lch($gray 0 0));
38 }
39 }
40 } @else {
41 @each $gray in $grays {
42 @if $gray > $lightness {
43 $args: append($args, blend.lch($gray 0 0));
44 }
45 }
46 }
47
48 @if length($args) == 0 {
49 @return $base;
50 }
51
52 $args: append($args, math.abs($contrast));
53 $result: blend.contrast($base, $args...);
54 @return hsl(fn.color(--gray-h), fn.color(--gray-s), lightness($result));
55}
56
20// 57//
21 58
22@include iro.props-store(( 59@include iro.props-store((
@@ -95,9 +132,28 @@ media.$unit-intervals: (
95 ); 132 );
96} 133}
97 134
135@function gray-palette($lightness) {
136 @return (
137 --gray1: find-gray($lightness, -1.1),
138 --gray2: find-gray($lightness, -1.05),
139 --gray3: find-gray($lightness, 1),
140 --gray4: find-gray($lightness, 1.15),
141 --gray5: find-gray($lightness, 1.37),
142 --gray6: find-gray($lightness, 1.73),
143 --gray7: find-gray($lightness, 2.4),
144 --gray8: find-gray($lightness, 3.26),
145 --gray9: find-gray($lightness, 7.14),
146 --gray10: find-gray($lightness, 11),
147 --gray11: find-gray($lightness, 17.4),
148 );
149}
150
98@include iro.fn-execute { 151@include iro.fn-execute {
99 @include iro.props-store(( 152 @include iro.props-store((
100 --colors: ( 153 --colors: (
154 --gray-h: 220,
155 --gray-s: 5%,
156
101 --bg-hi2: fn.color(--gray1, null), // Lightest background 157 --bg-hi2: fn.color(--gray1, null), // Lightest background
102 --bg-hi: fn.color(--gray2, null), // Lighter background 158 --bg-hi: fn.color(--gray2, null), // Lighter background
103 --bg: fn.color(--gray3, null), // Background 159 --bg: fn.color(--gray3, null), // Background
@@ -139,35 +195,11 @@ media.$unit-intervals: (
139 ), 'colors'); 195 ), 'colors');
140 196
141 @include iro.props-store(( 197 @include iro.props-store((
142 --colors: ( 198 --colors: gray-palette(94%)
143 --gray1: hsl(210, 0%, 100%), // 1.11
144 --gray2: hsl(210, 0%, 98%), // 1.07
145 --gray3: hsl(210, 0%, 95%), // 1
146 --gray4: hsl(210, 0%, 90%), // 1.11
147 --gray5: hsl(210, 0%, 87%), // 1.2
148 --gray6: hsl(210, 0%, 78%), // 1.51
149 --gray7: hsl(210, 0%, 69%), // 1.93
150 --gray8: hsl(210, 0%, 55%), // 3
151 --gray9: hsl(210, 0%, 38%), // 5.53
152 --gray10: hsl(210, 0%, 19%), // 11.78
153 --gray11: hsl(210, 0%, 0%), // 18.75
154 )
155 ), 'palette-light'); 199 ), 'palette-light');
156 200
157 @include iro.props-store(( 201 @include iro.props-store((
158 --colors: ( 202 --colors: gray-palette(100%)
159 --gray1: hsl(210, 0%, 100%), // 1
160 --gray2: hsl(210, 0%, 100%), // 1
161 --gray3: hsl(210, 0%, 100%), // 1
162 --gray4: hsl(210, 0%, 95%), // 1.11
163 --gray5: hsl(210, 0%, 92%), // 1.19
164 --gray6: hsl(210, 0%, 82%), // 1.52
165 --gray7: hsl(210, 0%, 73%), // 1.94
166 --gray8: hsl(210, 0%, 58%), // 3.03
167 --gray9: hsl(210, 0%, 41%), // 5.48
168 --gray10: hsl(210, 0%, 22%), // 11.72
169 --gray11: hsl(210, 0%, 0%), // 21
170 )
171 ), 'palette-light-raised'); 203 ), 'palette-light-raised');
172} 204}
173 205
@@ -188,37 +220,13 @@ media.$unit-intervals: (
188 ), 220 ),
189 ) 221 )
190 ), 'colors-dark'); 222 ), 'colors-dark');
191 223
192 @include iro.props-store(( 224 @include iro.props-store((
193 --colors: ( 225 --colors: gray-palette(9%)
194 --gray1: hsl(210, 0%, 6%), // 1.1
195 --gray2: hsl(210, 0%, 8%), // 1.05
196 --gray3: hsl(210, 0%, 10%), // 1
197 --gray4: hsl(210, 0%, 14%), // 1.12
198 --gray5: hsl(210, 0%, 20%), // 1.37
199 --gray6: hsl(210, 0%, 26%), // 1.73
200 --gray7: hsl(210, 0%, 34%), // 2.4
201 --gray8: hsl(210, 0%, 42%), // 3.26
202 --gray9: hsl(210, 0%, 65%), // 7.14
203 --gray10: hsl(210, 0%, 86%), // 12.57
204 --gray11: hsl(210, 0%, 100%), // 17.4
205 )
206 ), 'palette-dark'); 226 ), 'palette-dark');
207 227
208 @include iro.props-store(( 228 @include iro.props-store((
209 --colors: ( 229 --colors: gray-palette(16%)
210 --gray1: hsl(210, 0%, 10%), // 1.12
211 --gray2: hsl(210, 0%, 12%), // 1.06
212 --gray3: hsl(210, 0%, 14%), // 1
213 --gray4: hsl(210, 0%, 18%), // 1.14
214 --gray5: hsl(210, 0%, 23%), // 1.38
215 --gray6: hsl(210, 0%, 29%), // 1.75
216 --gray7: hsl(210, 0%, 37%), // 2.39
217 --gray8: hsl(210, 0%, 45%), // 3.27
218 --gray9: hsl(210, 0%, 69%), // 7.15
219 --gray10: hsl(210, 0%, 90%), // 12.43
220 --gray11: hsl(210, 0%, 100%), // 15.52
221 )
222 ), 'palette-dark-raised'); 230 ), 'palette-dark-raised');
223} 231}
224 232
diff --git a/tpl/index.pug b/tpl/index.pug
index 4e56564..d8984ce 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -450,8 +450,8 @@ html
450 +action-menu-slot(class='l-card l-card--flush') 450 +action-menu-slot(class='l-card l-card--flush')
451 +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block') 451 +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block')
452 .l-card__block.l-card__block--main 452 .l-card__block.l-card__block--main
453 strong.u-db= 'Volpeon' 453 strong.u-d-block= 'Volpeon'
454 small.u-db= '@volpeon@mk.vulpes.one' 454 small.u-d-block= '@volpeon@mk.vulpes.one'
455 +action-menu-separator 455 +action-menu-separator
456 +action-menu-item(icon='user')= 'View profile' 456 +action-menu-item(icon='user')= 'View profile'
457 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' 457 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
@@ -528,7 +528,7 @@ html
528 +box 528 +box
529 +backdrop 529 +backdrop
530 +dialog('Lorem ipsum') 530 +dialog('Lorem ipsum')
531 p.u-mt0= loremIpsum 531 p.u-mt-0= loremIpsum
532 p= loremIpsum 532 p= loremIpsum
533 p= loremIpsum 533 p= loremIpsum
534 p= loremIpsum 534 p= loremIpsum
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index e8cecb2..751e29d 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -2,7 +2,7 @@ include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3 3
4mixin action-menu 4mixin action-menu
5 .o-action-menu.u-ps.t-raised 5 .o-action-menu.u-p-static.t-raised
6 block 6 block
7 7
8mixin action-menu-item 8mixin action-menu-item
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 16de7c5..9e08a16 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -5,7 +5,7 @@ mixin avatar
5 let classes = { 5 let classes = {
6 'o-avatar': true, 6 'o-avatar': true,
7 'o-avatar--circle': attributes.circle, 7 'o-avatar--circle': attributes.circle,
8 'u-db': attributes.block 8 'u-d-block': attributes.block
9 } 9 }
10 if (attributes.class) { 10 if (attributes.class) {
11 classes[attributes.class] = true; 11 classes[attributes.class] = true;
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 3e3eb7f..5d0c9e8 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -1,3 +1,3 @@
1mixin backdrop 1mixin backdrop
2 .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' }) 2 .o-backdrop.u-p-static(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
3 block 3 block
diff --git a/yarn.lock b/yarn.lock
index 47c49bf..a946522 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -623,6 +623,11 @@ cosmiconfig@^7.0.1:
623 path-type "^4.0.0" 623 path-type "^4.0.0"
624 yaml "^1.10.0" 624 yaml "^1.10.0"
625 625
626css-functions-list@^3.0.0:
627 version "3.0.0"
628 resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.0.0.tgz#faa770a0666aea11435efc0889935336cea564be"
629 integrity sha512-rfwhBOvXVFcKrSwmLxD8JQyuEEy/3g3Y9FMI2l6iV558Coeo1ucXypXb4rwrVpk5Osh5ViXp2DTgafw8WxglhQ==
630
626css-select-base-adapter@^0.1.1: 631css-select-base-adapter@^0.1.1:
627 version "0.1.1" 632 version "0.1.1"
628 resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7" 633 resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -1265,7 +1270,7 @@ internal-slot@^1.0.3:
1265 1270
1266"iro-sass@git+https://git.vulpes.one/git/iro-sass.git": 1271"iro-sass@git+https://git.vulpes.one/git/iro-sass.git":
1267 version "1.0.2" 1272 version "1.0.2"
1268 resolved "git+https://git.vulpes.one/git/iro-sass.git#4c9a427806b47b916849dbc98330fdbb469b659b" 1273 resolved "git+https://git.vulpes.one/git/iro-sass.git#ac1f3da1da7759d8537b60a7f6b5ceb1a30a361e"
1269 1274
1270is-arrayish@^0.2.1: 1275is-arrayish@^0.2.1:
1271 version "0.2.1" 1276 version "0.2.1"
@@ -1980,7 +1985,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
1980 resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" 1985 resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
1981 integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== 1986 integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
1982 1987
1983postcss@^8.3.11, postcss@^8.4.5: 1988postcss@^8.3.11, postcss@^8.4.6:
1984 version "8.4.6" 1989 version "8.4.6"
1985 resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1" 1990 resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
1986 integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA== 1991 integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@@ -2688,14 +2693,15 @@ stylelint-scss@^4.0.0:
2688 postcss-selector-parser "^6.0.6" 2693 postcss-selector-parser "^6.0.6"
2689 postcss-value-parser "^4.1.0" 2694 postcss-value-parser "^4.1.0"
2690 2695
2691stylelint@^14.3.0: 2696stylelint@^14.5.0:
2692 version "14.3.0" 2697 version "14.5.0"
2693 resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.3.0.tgz#26b62730da7b3dc320021fc469d80048d7b77ebe" 2698 resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.0.tgz#d94252027164bc918303a6b782652931421d8871"
2694 integrity sha512-PZXSwtJe4f4qBPWBwAbHL0M0Qjrv8iHN+cLpUNsffaVMS3YzpDDRI73+2lsqLAYfQEzxRwpll6BDKImREbpHWA== 2699 integrity sha512-4dvQjrhAz2njLoE1OvUEZpryNWcmx2w5Lq5jlibxFv6b5W6O8/vob12M2ZzhX3Ndzs5f67F+BEYmhnQXOwfVYQ==
2695 dependencies: 2700 dependencies:
2696 balanced-match "^2.0.0" 2701 balanced-match "^2.0.0"
2697 colord "^2.9.2" 2702 colord "^2.9.2"
2698 cosmiconfig "^7.0.1" 2703 cosmiconfig "^7.0.1"
2704 css-functions-list "^3.0.0"
2699 debug "^4.3.3" 2705 debug "^4.3.3"
2700 execall "^2.0.0" 2706 execall "^2.0.0"
2701 fast-glob "^3.2.11" 2707 fast-glob "^3.2.11"
@@ -2717,7 +2723,7 @@ stylelint@^14.3.0:
2717 normalize-path "^3.0.0" 2723 normalize-path "^3.0.0"
2718 normalize-selector "^0.2.0" 2724 normalize-selector "^0.2.0"
2719 picocolors "^1.0.0" 2725 picocolors "^1.0.0"
2720 postcss "^8.4.5" 2726 postcss "^8.4.6"
2721 postcss-media-query-parser "^0.2.3" 2727 postcss-media-query-parser "^0.2.3"
2722 postcss-resolve-nested-selector "^0.1.1" 2728 postcss-resolve-nested-selector "^0.1.1"
2723 postcss-safe-parser "^6.0.0" 2729 postcss-safe-parser "^6.0.0"