From b62fa77d0dc0c6a053b9d72e27a8f404ae8a4206 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 12 Feb 2022 17:58:31 +0100 Subject: Calculate gray palette via contrast automatically --- package.json | 2 +- src/_utils.scss | 10 ++-- src/_vars.scss | 116 +++++++++++++++++++++++--------------------- tpl/index.pug | 6 +-- tpl/objects/action-menu.pug | 2 +- tpl/objects/avatar.pug | 2 +- tpl/objects/backdrop.pug | 2 +- yarn.lock | 20 +++++--- 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 @@ "pug": "^3.0.0", "pug-cli": "^1.0.0-alpha6", "sass": "^1.28.0", - "stylelint": "^14.3.0", + "stylelint": "^14.5.0", "stylelint-config-sass-guidelines": "^9.0.1", "svg-sprite": "^1.5.4" } 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 @@ @use 'iro-sass/src/index' as iro; @use 'functions' as fn; -@include iro.bem-utility('db') { +@include iro.bem-utility('d-block') { display: block; } -@include iro.bem-utility('dc') { +@include iro.bem-utility('d-contents') { display: contents; } @@ -14,15 +14,15 @@ text-overflow: ellipsis; } -@include iro.bem-utility('ps') { +@include iro.bem-utility('p-static') { position: static; } -@include iro.bem-utility('pr') { +@include iro.bem-utility('p-relative') { position: relative; } -@include iro.bem-utility('mt0') { +@include iro.bem-utility('mt-0') { margin-top: 0; } 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 @@ +@use 'sass:math'; @use 'iro-sass/src/index' as iro; @use 'include-media/dist/include-media' as media; @use '@oddbird/blend'; @@ -17,6 +18,42 @@ media.$unit-intervals: ( '': 0 ); +$grays: (); + +@for $i from 0 through 100 { + $grays: append($grays, $i * 1%); +} + +$grays-rev: iro.fn-list-reverse($grays); + +@function find-gray($lightness, $contrast) { + $base: blend.lch($lightness 0 0); + $dir: if($contrast < 0, -1, 1) * if($lightness >= 50%, 1, -1); + $args: (); + + @if $dir == 1 { + @each $gray in $grays-rev { + @if $gray < $lightness { + $args: append($args, blend.lch($gray 0 0)); + } + } + } @else { + @each $gray in $grays { + @if $gray > $lightness { + $args: append($args, blend.lch($gray 0 0)); + } + } + } + + @if length($args) == 0 { + @return $base; + } + + $args: append($args, math.abs($contrast)); + $result: blend.contrast($base, $args...); + @return hsl(fn.color(--gray-h), fn.color(--gray-s), lightness($result)); +} + // @include iro.props-store(( @@ -95,9 +132,28 @@ media.$unit-intervals: ( ); } +@function gray-palette($lightness) { + @return ( + --gray1: find-gray($lightness, -1.1), + --gray2: find-gray($lightness, -1.05), + --gray3: find-gray($lightness, 1), + --gray4: find-gray($lightness, 1.15), + --gray5: find-gray($lightness, 1.37), + --gray6: find-gray($lightness, 1.73), + --gray7: find-gray($lightness, 2.4), + --gray8: find-gray($lightness, 3.26), + --gray9: find-gray($lightness, 7.14), + --gray10: find-gray($lightness, 11), + --gray11: find-gray($lightness, 17.4), + ); +} + @include iro.fn-execute { @include iro.props-store(( --colors: ( + --gray-h: 220, + --gray-s: 5%, + --bg-hi2: fn.color(--gray1, null), // Lightest background --bg-hi: fn.color(--gray2, null), // Lighter background --bg: fn.color(--gray3, null), // Background @@ -139,35 +195,11 @@ media.$unit-intervals: ( ), 'colors'); @include iro.props-store(( - --colors: ( - --gray1: hsl(210, 0%, 100%), // 1.11 - --gray2: hsl(210, 0%, 98%), // 1.07 - --gray3: hsl(210, 0%, 95%), // 1 - --gray4: hsl(210, 0%, 90%), // 1.11 - --gray5: hsl(210, 0%, 87%), // 1.2 - --gray6: hsl(210, 0%, 78%), // 1.51 - --gray7: hsl(210, 0%, 69%), // 1.93 - --gray8: hsl(210, 0%, 55%), // 3 - --gray9: hsl(210, 0%, 38%), // 5.53 - --gray10: hsl(210, 0%, 19%), // 11.78 - --gray11: hsl(210, 0%, 0%), // 18.75 - ) + --colors: gray-palette(94%) ), 'palette-light'); @include iro.props-store(( - --colors: ( - --gray1: hsl(210, 0%, 100%), // 1 - --gray2: hsl(210, 0%, 100%), // 1 - --gray3: hsl(210, 0%, 100%), // 1 - --gray4: hsl(210, 0%, 95%), // 1.11 - --gray5: hsl(210, 0%, 92%), // 1.19 - --gray6: hsl(210, 0%, 82%), // 1.52 - --gray7: hsl(210, 0%, 73%), // 1.94 - --gray8: hsl(210, 0%, 58%), // 3.03 - --gray9: hsl(210, 0%, 41%), // 5.48 - --gray10: hsl(210, 0%, 22%), // 11.72 - --gray11: hsl(210, 0%, 0%), // 21 - ) + --colors: gray-palette(100%) ), 'palette-light-raised'); } @@ -188,37 +220,13 @@ media.$unit-intervals: ( ), ) ), 'colors-dark'); - + @include iro.props-store(( - --colors: ( - --gray1: hsl(210, 0%, 6%), // 1.1 - --gray2: hsl(210, 0%, 8%), // 1.05 - --gray3: hsl(210, 0%, 10%), // 1 - --gray4: hsl(210, 0%, 14%), // 1.12 - --gray5: hsl(210, 0%, 20%), // 1.37 - --gray6: hsl(210, 0%, 26%), // 1.73 - --gray7: hsl(210, 0%, 34%), // 2.4 - --gray8: hsl(210, 0%, 42%), // 3.26 - --gray9: hsl(210, 0%, 65%), // 7.14 - --gray10: hsl(210, 0%, 86%), // 12.57 - --gray11: hsl(210, 0%, 100%), // 17.4 - ) + --colors: gray-palette(9%) ), 'palette-dark'); - + @include iro.props-store(( - --colors: ( - --gray1: hsl(210, 0%, 10%), // 1.12 - --gray2: hsl(210, 0%, 12%), // 1.06 - --gray3: hsl(210, 0%, 14%), // 1 - --gray4: hsl(210, 0%, 18%), // 1.14 - --gray5: hsl(210, 0%, 23%), // 1.38 - --gray6: hsl(210, 0%, 29%), // 1.75 - --gray7: hsl(210, 0%, 37%), // 2.39 - --gray8: hsl(210, 0%, 45%), // 3.27 - --gray9: hsl(210, 0%, 69%), // 7.15 - --gray10: hsl(210, 0%, 90%), // 12.43 - --gray11: hsl(210, 0%, 100%), // 15.52 - ) + --colors: gray-palette(16%) ), 'palette-dark-raised'); } 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 +action-menu-slot(class='l-card l-card--flush') +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block') .l-card__block.l-card__block--main - strong.u-db= 'Volpeon' - small.u-db= '@volpeon@mk.vulpes.one' + strong.u-d-block= 'Volpeon' + small.u-d-block= '@volpeon@mk.vulpes.one' +action-menu-separator +action-menu-item(icon='user')= 'View profile' +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' @@ -528,7 +528,7 @@ html +box +backdrop +dialog('Lorem ipsum') - p.u-mt0= loremIpsum + p.u-mt-0= loremIpsum p= loremIpsum p= loremIpsum 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 include status-indicator.pug mixin action-menu - .o-action-menu.u-ps.t-raised + .o-action-menu.u-p-static.t-raised block mixin 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 let classes = { 'o-avatar': true, 'o-avatar--circle': attributes.circle, - 'u-db': attributes.block + 'u-d-block': attributes.block } if (attributes.class) { 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 @@ mixin backdrop - .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' }) + .o-backdrop.u-p-static(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' }) 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: path-type "^4.0.0" yaml "^1.10.0" +css-functions-list@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.0.0.tgz#faa770a0666aea11435efc0889935336cea564be" + integrity sha512-rfwhBOvXVFcKrSwmLxD8JQyuEEy/3g3Y9FMI2l6iV558Coeo1ucXypXb4rwrVpk5Osh5ViXp2DTgafw8WxglhQ== + css-select-base-adapter@^0.1.1: version "0.1.1" 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: "iro-sass@git+https://git.vulpes.one/git/iro-sass.git": version "1.0.2" - resolved "git+https://git.vulpes.one/git/iro-sass.git#4c9a427806b47b916849dbc98330fdbb469b659b" + resolved "git+https://git.vulpes.one/git/iro-sass.git#ac1f3da1da7759d8537b60a7f6b5ceb1a30a361e" is-arrayish@^0.2.1: version "0.2.1" @@ -1980,7 +1985,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.3.11, postcss@^8.4.5: +postcss@^8.3.11, postcss@^8.4.6: version "8.4.6" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1" integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA== @@ -2688,14 +2693,15 @@ stylelint-scss@^4.0.0: postcss-selector-parser "^6.0.6" postcss-value-parser "^4.1.0" -stylelint@^14.3.0: - version "14.3.0" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.3.0.tgz#26b62730da7b3dc320021fc469d80048d7b77ebe" - integrity sha512-PZXSwtJe4f4qBPWBwAbHL0M0Qjrv8iHN+cLpUNsffaVMS3YzpDDRI73+2lsqLAYfQEzxRwpll6BDKImREbpHWA== +stylelint@^14.5.0: + version "14.5.0" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.0.tgz#d94252027164bc918303a6b782652931421d8871" + integrity sha512-4dvQjrhAz2njLoE1OvUEZpryNWcmx2w5Lq5jlibxFv6b5W6O8/vob12M2ZzhX3Ndzs5f67F+BEYmhnQXOwfVYQ== dependencies: balanced-match "^2.0.0" colord "^2.9.2" cosmiconfig "^7.0.1" + css-functions-list "^3.0.0" debug "^4.3.3" execall "^2.0.0" fast-glob "^3.2.11" @@ -2717,7 +2723,7 @@ stylelint@^14.3.0: normalize-path "^3.0.0" normalize-selector "^0.2.0" picocolors "^1.0.0" - postcss "^8.4.5" + postcss "^8.4.6" postcss-media-query-parser "^0.2.3" postcss-resolve-nested-selector "^0.1.1" postcss-safe-parser "^6.0.0" -- cgit v1.2.3-54-g00ecf