From 73817c1f486885c26d9bfb4a95fe2929f6ac0a4d Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 14 Apr 2022 18:28:26 +0200 Subject: [PATCH 01/26] use tools for most config files --- src/scss/config/_animation.scss | 2 +- src/scss/config/_fonts.scss | 2 +- src/scss/config/_index.scss | 1 + src/scss/config/_layout.scss | 2 +- src/scss/config/_scale.scss | 8 ++++---- src/scss/config/_tools.scss | 1 + 6 files changed, 9 insertions(+), 7 deletions(-) create mode 100644 src/scss/config/_tools.scss diff --git a/src/scss/config/_animation.scss b/src/scss/config/_animation.scss index 193de3672..bdda5d561 100644 --- a/src/scss/config/_animation.scss +++ b/src/scss/config/_animation.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools' as *; +@use 'tools' as *; /// # Animation Config /// Accoutrement maps for storing global animation tokens. diff --git a/src/scss/config/_fonts.scss b/src/scss/config/_fonts.scss index 0ab490186..27a745238 100644 --- a/src/scss/config/_fonts.scss +++ b/src/scss/config/_fonts.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use 'tools'; @use '~sassdoc-theme-herman/scss/utilities' as herman; @use 'sass:meta'; diff --git a/src/scss/config/_index.scss b/src/scss/config/_index.scss index 0b2fd14e7..41887fe13 100644 --- a/src/scss/config/_index.scss +++ b/src/scss/config/_index.scss @@ -1,3 +1,4 @@ +@forward 'tools'; @forward 'animation'; @forward 'color'; @forward 'focus'; diff --git a/src/scss/config/_layout.scss b/src/scss/config/_layout.scss index 0618e92a7..3b69c429a 100644 --- a/src/scss/config/_layout.scss +++ b/src/scss/config/_layout.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools' as *; +@use 'tools' as *; // Times // ----- diff --git a/src/scss/config/_scale.scss b/src/scss/config/_scale.scss index acbdd313e..c66a4626a 100644 --- a/src/scss/config/_scale.scss +++ b/src/scss/config/_scale.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use 'tools'; @use '~sassdoc-theme-herman/scss/utilities' as herman; @use 'sass:map'; @@ -14,12 +14,12 @@ /// that adapts to context /// @ratios /// @group config-scale -$ratios: ( +$text-ratios: ( 'line-height': 1.4, ); -@include tools.add-ratios($ratios); -@include herman.add('ratios', 'ratios', $ratios); +@include tools.add-ratios($text-ratios); +@include herman.add('ratios', 'text-ratios', $text-ratios); // Font Sizes // ---------- diff --git a/src/scss/config/_tools.scss b/src/scss/config/_tools.scss new file mode 100644 index 000000000..04fab397c --- /dev/null +++ b/src/scss/config/_tools.scss @@ -0,0 +1 @@ +@forward '~accoutrement/sass/tools'; From 51d5470a7f30df113826d5720c02bfd2cee16712 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 14 Apr 2022 18:44:45 +0200 Subject: [PATCH 02/26] use forwarded accoutrement in components --- src/scss/components/_events.scss | 6 +++--- src/scss/components/_logo-grid.scss | 2 -- src/scss/components/_post.scss | 8 ++++---- src/scss/components/_resources.scss | 4 ++-- src/scss/components/_work-grid.scss | 6 +++--- 5 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/scss/components/_events.scss b/src/scss/components/_events.scss index 042e00ffc..8967cab49 100644 --- a/src/scss/components/_events.scss +++ b/src/scss/components/_events.scss @@ -1,11 +1,11 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; .event { margin-bottom: var(--newline); } .event-meta { - @include tools.font-family('alt'); + @include config.font-family('alt'); font-size: var(--small); } @@ -15,7 +15,7 @@ } .event-links { - @include tools.wrap-content('[' ']'); + @include config.wrap-content('[' ']'); font-size: var(--small); font-style: italic; diff --git a/src/scss/components/_logo-grid.scss b/src/scss/components/_logo-grid.scss index d5c614365..7d790ca83 100644 --- a/src/scss/components/_logo-grid.scss +++ b/src/scss/components/_logo-grid.scss @@ -1,5 +1,3 @@ -@use '~accoutrement/sass/tools'; - .logo-grid { --column: content; --fill: var(--feature); diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss index 707d57124..dc2570afc 100644 --- a/src/scss/components/_post.scss +++ b/src/scss/components/_post.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; [data-post] { --post-margin: var(--gutter); @@ -32,7 +32,7 @@ } [data-post='link'] { - @include tools.transition('pop'); + @include config.transition('pop'); --hero-height: var(--grid-hero); --item-title: 1rem; @@ -58,7 +58,7 @@ display: block; &::after { - @include tools.z-index('bump'); + @include config.z-index('bump'); content: ''; display: block; @@ -77,7 +77,7 @@ // -------- .type-flag { - @include tools.font-family('alt'); + @include config.font-family('alt'); background: var(--highlight); color: var(--bg); diff --git a/src/scss/components/_resources.scss b/src/scss/components/_resources.scss index d89b22e29..5c449c404 100644 --- a/src/scss/components/_resources.scss +++ b/src/scss/components/_resources.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; // pagination @@ -17,7 +17,7 @@ [title-end]; margin: var(--double-gutter) 0; - @include tools.above('wide-break') { + @include config.above('wide-break') { --justify-nav: initial; grid-template-columns: diff --git a/src/scss/components/_work-grid.scss b/src/scss/components/_work-grid.scss index daab62984..1308b2a0a 100644 --- a/src/scss/components/_work-grid.scss +++ b/src/scss/components/_work-grid.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; [data-work] { --column: full; @@ -6,7 +6,7 @@ [data-work='summary'] + & { --pull-sample: var(--spacer); - @include tools.above('wide-break') { + @include config.above('wide-break') { --pull-sample: calc(var(--spacer) * -1); } } @@ -45,7 +45,7 @@ margin: var(--gutter) var(--page-margin); max-width: var(--wide-page); - @include tools.above('wide-page') { + @include config.above('wide-page') { grid-template-areas: 'desktop desktop2 desktop2' 'desktop mobile ..........' From 280d089a12b7e883b0a39ed04702c04ad64a4e6c Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 14 Apr 2022 18:49:44 +0200 Subject: [PATCH 03/26] use forwarded accoutrement in forms files --- src/scss/forms/_buttons.scss | 8 ++++---- src/scss/forms/_fields.scss | 6 +++--- src/scss/forms/_radios.scss | 5 ++--- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/scss/forms/_buttons.scss b/src/scss/forms/_buttons.scss index 3c9e390be..944b72f5f 100644 --- a/src/scss/forms/_buttons.scss +++ b/src/scss/forms/_buttons.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; /// # Button Pattern /// @group buttons @@ -10,8 +10,8 @@ /// which allows an override of inline padding on the button. /// @group buttons [data-btn] { - @include tools.font-family('alt'); - @include tools.transition('colors'); + @include config.font-family('alt'); + @include config.transition('colors'); align-items: center; background: var(--btn-bg, var(--highlight)); @@ -62,7 +62,7 @@ // ----- /// @group buttons [data-btn~='menu'] { - @include tools.font-family('body'); + @include config.font-family('body'); --btn-bg: transparent; --btn-border: var(--border-fade); diff --git a/src/scss/forms/_fields.scss b/src/scss/forms/_fields.scss index 050b0586d..4eb016821 100644 --- a/src/scss/forms/_fields.scss +++ b/src/scss/forms/_fields.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; // Fields // ------ @@ -17,7 +17,7 @@ /// and is displayed above the input. /// @group forms [data-label] { - @include tools.font-family('alt'); + @include config.font-family('alt'); display: block; } @@ -59,5 +59,5 @@ /// Apply to honey-pot SPAM-protection fields… /// @group forms [data-honey] { - @include tools.is-hidden; + @include config.is-hidden; } diff --git a/src/scss/forms/_radios.scss b/src/scss/forms/_radios.scss index 75a774773..df9d0be1f 100644 --- a/src/scss/forms/_radios.scss +++ b/src/scss/forms/_radios.scss @@ -1,4 +1,3 @@ -@use '~accoutrement/sass/tools'; @use '../config'; /// # Radio Buttons @@ -15,7 +14,7 @@ /// @group input-radio [data-radio='input'] { - @include tools.is-hidden; + @include config.is-hidden; } /// @group input-radio @@ -37,7 +36,7 @@ [data-radio='input']:focus + & { @include config.focus-ring; - @include tools.z-index('bump'); + @include config.z-index('bump'); position: relative; } From 6f2115c4933142b31e9a73bbf88060b7b65864c0 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 14 Apr 2022 19:10:25 +0200 Subject: [PATCH 04/26] reconfigure initial/ --- src/scss/initial/_colors.scss | 9 ++++----- src/scss/initial/_headings.scss | 4 ++-- src/scss/initial/_links.scss | 3 +-- src/scss/initial/_root.scss | 10 +++++----- src/scss/initial/_scale.scss | 17 ++++++++--------- src/scss/initial/_type.scss | 6 +++--- 6 files changed, 23 insertions(+), 26 deletions(-) diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index c48514740..2ef499993 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -1,5 +1,4 @@ -@use '../config/color' as config; -@use '~accoutrement/sass/tools'; +@use '../config'; @use '~cascading-color-systems' as ccs with ( $hues: config.ccs('hues'), $saturation: config.ccs('saturation'), @@ -23,9 +22,9 @@ /// @group init-colors [data-ccs-colors] { - @include tools.tokens--(config.$ccs-colors); - @include tools.tokens--(config.$background-colors); - @include tools.tokens--(config.$content-colors); + @include config.tokens--(config.$ccs-colors); + @include config.tokens--(config.$background-colors); + @include config.tokens--(config.$content-colors); --img-bright--base: #{ccs.if-mode($light: 50%, $dark: 40%)}; --img-bright--default: calc(var(--img-bright--base) + var(--ccs-l)); diff --git a/src/scss/initial/_headings.scss b/src/scss/initial/_headings.scss index d1b27c195..284a36892 100644 --- a/src/scss/initial/_headings.scss +++ b/src/scss/initial/_headings.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; /// # Heading Defaults /// Initial global defaults for heading elements… @@ -15,7 +15,7 @@ h3, h4, h5, h6 { - @include tools.font-family('alt'); + @include config.font-family('alt'); --link: currentcolor; diff --git a/src/scss/initial/_links.scss b/src/scss/initial/_links.scss index b79728b47..6ada7e55c 100644 --- a/src/scss/initial/_links.scss +++ b/src/scss/initial/_links.scss @@ -1,4 +1,3 @@ -@use '~accoutrement/sass/tools'; @use '../config'; /// # Link Defaults @@ -45,7 +44,7 @@ a { .link-text, &:link, &:visited { - @include tools.transition('underline'); + @include config.transition('underline'); text-decoration: underline; text-decoration-color: var( diff --git a/src/scss/initial/_root.scss b/src/scss/initial/_root.scss index 073372da5..3470e89fc 100644 --- a/src/scss/initial/_root.scss +++ b/src/scss/initial/_root.scss @@ -1,9 +1,9 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; -@include tools.import-webfonts; +@include config.import-webfonts; html { - @include tools.font-family('body'); + @include config.font-family('body'); --clip-overlap: var(--page-margin); --clip-angle: var(--double-gutter); @@ -16,6 +16,6 @@ html { 0 100% ); - font-size: tools.size('rem'); - line-height: tools.ratio('line-height'); + font-size: config.size('rem'); + line-height: config.ratio('line-height'); } diff --git a/src/scss/initial/_scale.scss b/src/scss/initial/_scale.scss index 228b2070e..eaefaf6cf 100644 --- a/src/scss/initial/_scale.scss +++ b/src/scss/initial/_scale.scss @@ -1,6 +1,5 @@ @use 'sass:math'; -@use '../config/scale'; -@use '~accoutrement/sass/tools'; +@use '../config'; /// # CSS Size Variables /// Convert useful [Sass scale tokens](config-scale.html) @@ -8,7 +7,7 @@ /// @group init-scale /// Generate variables from Sass maps, -/// using Accountrement tools. +/// using Accoutrement tools. /// @name Global Sizes /// @see $font-sizes /// @see $spacing-sizes @@ -17,18 +16,18 @@ /// Accoutrement CSS Variables /// @group init-scale html { - @include tools.tokens--(scale.$font-sizes); - @include tools.tokens--(scale.$spacing-sizes); - @include tools.tokens--(scale.$theme-sizes); - @include tools.tokens--(scale.$page-sizes); + @include config.tokens--(config.$font-sizes); + @include config.tokens--(config.$spacing-sizes); + @include config.tokens--(config.$theme-sizes); + @include config.tokens--(config.$page-sizes); - --extra: #{math.div(tools.size('wide-page') - tools.size('page'), 2)}; + --extra: #{math.div(config.size('wide-page') - config.size('page'), 2)}; --main-min: calc(100vw - var(--page-margin) * 2); --page-columns: [full-start] var(--page-margin) [content-start wide-start page-start] minmax(var(--main-min), var(--page)) [page-end wide-end content-end] var(--page-margin) [full-end]; - @include tools.above('wide-page') { + @include config.above('wide-page') { --main-min: var(--min-page); --page-columns: [full-start] var(--page-margin) [content-start] minmax(0, 1fr) [wide-start] minmax(0, var(--extra)) [page-start] diff --git a/src/scss/initial/_type.scss b/src/scss/initial/_type.scss index 8ff9dcf8d..4cd03d55d 100644 --- a/src/scss/initial/_type.scss +++ b/src/scss/initial/_type.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; // Horizontal Rules // ---------------- @@ -24,7 +24,7 @@ hr { /// to avoid a flash of unstyled text. /// @group type .wf-loading { - @include tools.is-hidden; + @include config.is-hidden; } // Ampersands @@ -32,7 +32,7 @@ hr { /// All ampersands default to the fancy baskerville italic. /// @group type .amp { - @include tools.font-family('amp'); + @include config.font-family('amp'); font-style: italic; // needed for Safari } From f39edf43e229c8e81d2f9b4137dae23a32041a5a Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 14 Apr 2022 19:30:37 +0200 Subject: [PATCH 05/26] reconfigure layout files --- src/scss/layout/_banner.scss | 8 ++++---- src/scss/layout/_cta.scss | 2 -- src/scss/layout/_footer.scss | 8 ++++---- src/scss/layout/_header.scss | 8 ++++---- src/scss/layout/_hero.scss | 2 -- src/scss/layout/_main.scss | 2 -- src/scss/layout/_meta.scss | 2 -- src/scss/layout/_nav.scss | 2 -- src/scss/layout/_root.scss | 6 +++--- src/scss/layout/_title.scss | 6 +++--- 10 files changed, 18 insertions(+), 28 deletions(-) diff --git a/src/scss/layout/_banner.scss b/src/scss/layout/_banner.scss index 83015ce32..ade8bea71 100644 --- a/src/scss/layout/_banner.scss +++ b/src/scss/layout/_banner.scss @@ -1,7 +1,7 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; [data-layout='banner'] { - @include tools.font-family('alt'); + @include config.font-family('alt'); --banner-space: calc(var(--shim) + 1vw); @@ -23,8 +23,8 @@ #banner-logo { &:link, &:visited { - @include tools.transition('move'); - @include tools.z-index('bump'); + @include config.transition('move'); + @include config.z-index('bump'); align-self: start; display: block; diff --git a/src/scss/layout/_cta.scss b/src/scss/layout/_cta.scss index 83fd0651c..5dd215e7a 100644 --- a/src/scss/layout/_cta.scss +++ b/src/scss/layout/_cta.scss @@ -1,5 +1,3 @@ -@use '~accoutrement/sass/tools'; - [data-layout='cta'] { --media-min: 6em; --media-size: calc(4em + 5vw); diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss index 372797c17..4a2405040 100644 --- a/src/scss/layout/_footer.scss +++ b/src/scss/layout/_footer.scss @@ -1,9 +1,9 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; $two-column: 45em; [data-layout='footer'] { - @include tools.font-family('alt'); + @include config.font-family('alt'); display: grid; font-size: var(--small); @@ -11,7 +11,7 @@ $two-column: 45em; grid-gap: var(--gutter); padding: var(--gutter) var(--page-margin) var(--spacer); - @include tools.above($two-column) { + @include config.above($two-column) { grid-template-columns: minmax(10em, var(--wide-page)) minmax( 10em, var(--page) @@ -29,7 +29,7 @@ $two-column: 45em; grid-template-rows: 1fr auto; padding-top: var(--gutter); - @include tools.above($two-column) { + @include config.above($two-column) { text-align: right; } diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss index 37a34c90e..7644fd356 100644 --- a/src/scss/layout/_header.scss +++ b/src/scss/layout/_header.scss @@ -1,10 +1,10 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; [data-layout='header'] { display: grid; .type-flag { - @include tools.z-index('bump'); + @include config.z-index('bump'); margin: var(--gutter) 0 var(--shim) auto; padding-block: var(--quarter-shim); @@ -38,12 +38,12 @@ --clip-overlap: var(--h1); } - @include tools.above(35em) { + @include config.above(35em) { --angle: var(--page-margin); --edge: var(--page-margin); } - @include tools.above(50em) { + @include config.above(50em) { --edge: 25%; } } diff --git a/src/scss/layout/_hero.scss b/src/scss/layout/_hero.scss index 3d7110b53..6e0cff9df 100644 --- a/src/scss/layout/_hero.scss +++ b/src/scss/layout/_hero.scss @@ -1,5 +1,3 @@ -@use '~accoutrement/sass/tools'; - #hero { --fill: var(--feature); diff --git a/src/scss/layout/_main.scss b/src/scss/layout/_main.scss index 07b25bf96..e3a1bebec 100644 --- a/src/scss/layout/_main.scss +++ b/src/scss/layout/_main.scss @@ -1,5 +1,3 @@ -@use '~accoutrement/sass/tools'; - [data-layout='main'] { grid-area: main; } diff --git a/src/scss/layout/_meta.scss b/src/scss/layout/_meta.scss index 3c4b97623..9c86dda51 100644 --- a/src/scss/layout/_meta.scss +++ b/src/scss/layout/_meta.scss @@ -1,5 +1,3 @@ -@use '~accoutrement/sass/tools'; - #meta { display: grid; font-size: var(--small); diff --git a/src/scss/layout/_nav.scss b/src/scss/layout/_nav.scss index 6e7efb547..e691584e2 100644 --- a/src/scss/layout/_nav.scss +++ b/src/scss/layout/_nav.scss @@ -1,5 +1,3 @@ -@use '~accoutrement/sass/tools'; - [data-layout='nav'] { font-size: var(--small); grid-column: logo / nav; diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss index 119899f25..f02c13817 100644 --- a/src/scss/layout/_root.scss +++ b/src/scss/layout/_root.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; html { // image, size, position, & media-queries are all related *magically* @@ -12,11 +12,11 @@ html { background-size: auto 5.5em, 20em auto; } - @include tools.above(40em) { + @include config.above(40em) { --header-pos: right 0; } - @include tools.above(50em) { + @include config.above(50em) { --header-pos: left 0; } diff --git a/src/scss/layout/_title.scss b/src/scss/layout/_title.scss index 8a933b6dd..adae956bc 100644 --- a/src/scss/layout/_title.scss +++ b/src/scss/layout/_title.scss @@ -1,7 +1,7 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; #title { - @include tools.z-index('bump'); + @include config.z-index('bump'); --blur: var(--quarter-shim); --outset: calc(var(--blur) * -1); @@ -45,7 +45,7 @@ font-style: normal; font-weight: normal; - @include tools.above('page') { + @include config.above('page') { display: inline-block; transform: translateY(calc(-1vw)); } From 5b865f84dc2241cbedb16b12d5c88e5ac0fecd5e Mon Sep 17 00:00:00 2001 From: dvdherron Date: Fri, 15 Apr 2022 16:44:30 +0200 Subject: [PATCH 06/26] reconfigure page and patterns --- src/scss/page/support-unknown.scss | 3 +-- src/scss/patterns/_a11y.scss | 8 ++++---- src/scss/patterns/_above.scss | 6 +++--- src/scss/patterns/_code.scss | 4 ++-- src/scss/patterns/_devices.scss | 2 -- src/scss/patterns/_dropdown.scss | 10 +++++----- src/scss/patterns/_gallery.scss | 4 ++-- src/scss/patterns/_icons.scss | 1 - src/scss/patterns/_lists.scss | 6 +++--- src/scss/patterns/_media.scss | 10 +++++----- src/scss/patterns/_offset-grid.scss | 13 ++++++------- src/scss/patterns/_sections.scss | 9 ++++----- src/scss/patterns/_tables.scss | 10 +++++----- 13 files changed, 40 insertions(+), 46 deletions(-) diff --git a/src/scss/page/support-unknown.scss b/src/scss/page/support-unknown.scss index f0c57a2ae..0bbc6b295 100644 --- a/src/scss/page/support-unknown.scss +++ b/src/scss/page/support-unknown.scss @@ -1,12 +1,11 @@ @use '../config'; /* run config setup before calling tools */ -@use '~accoutrement/sass/tools'; #unknown-support { --false: var(--ccs-special--bg4); --true: var(--ccs-prime--bg4); td { - @include tools.font-family('code'); + @include config.font-family('code'); font-size: var(--code); } diff --git a/src/scss/patterns/_a11y.scss b/src/scss/patterns/_a11y.scss index 25339c467..525dc0a2e 100644 --- a/src/scss/patterns/_a11y.scss +++ b/src/scss/patterns/_a11y.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; /// # Accessibility /// Helpers and utilities formaking the site more accessible. @@ -22,7 +22,7 @@ /// @group a11y .sr-only { &:not(:focus):not(:active) { - @include tools.is-hidden; + @include config.is-hidden; } } @@ -38,7 +38,7 @@ #to-content { &:link, &:visited { - @include tools.z-index('skip-link'); + @include config.z-index('skip-link'); --underline-color: currentcolor; @@ -50,7 +50,7 @@ position: absolute; top: 0; transform: translate3d(0, -100%, 0); - transition: tools.change('move'), tools.change('fade'); + transition: config.change('move'), config.change('fade'); } &:focus, diff --git a/src/scss/patterns/_above.scss b/src/scss/patterns/_above.scss index 3e0541af0..26bb1e8eb 100644 --- a/src/scss/patterns/_above.scss +++ b/src/scss/patterns/_above.scss @@ -1,12 +1,12 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; [data-above] { display: none; } -@each $break, $point in tools.$breakpoints { +@each $break, $point in config.$breakpoints { [data-above='#{$break}'] { - @include tools.above($point) { + @include config.above($point) { display: revert; } } diff --git a/src/scss/patterns/_code.scss b/src/scss/patterns/_code.scss index 80fde7e69..1f58cd6d0 100644 --- a/src/scss/patterns/_code.scss +++ b/src/scss/patterns/_code.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; /** * ccs theme @@ -8,7 +8,7 @@ pre, code { - @include tools.font-family('code'); + @include config.font-family('code'); font-size: var(--code); hyphens: none; diff --git a/src/scss/patterns/_devices.scss b/src/scss/patterns/_devices.scss index 256159f3e..b69bbbe43 100644 --- a/src/scss/patterns/_devices.scss +++ b/src/scss/patterns/_devices.scss @@ -1,5 +1,3 @@ -@use '~accoutrement/sass/tools'; - [data-screen] { position: relative; overflow: hidden; diff --git a/src/scss/patterns/_dropdown.scss b/src/scss/patterns/_dropdown.scss index 5f44dd00b..e10935075 100644 --- a/src/scss/patterns/_dropdown.scss +++ b/src/scss/patterns/_dropdown.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; /// # Dropdowns /// A flexible pattern for dropdown menus. @@ -24,10 +24,10 @@ --marker-color: currentcolor; [open] > & { - @include tools.z-index('dropdown'); + @include config.z-index('dropdown'); - @include tools.before('') { - @include tools.z-index('bump'); + @include config.before('') { + @include config.z-index('bump'); cursor: default; display: block; @@ -43,7 +43,7 @@ /// with a max-width of the available space. /// @group dropdown [data-dropdown] { - @include tools.z-index('dropdown'); + @include config.z-index('dropdown'); background: var(--bg); border: thin solid var(--active); diff --git a/src/scss/patterns/_gallery.scss b/src/scss/patterns/_gallery.scss index 343e76f6f..7a809891c 100644 --- a/src/scss/patterns/_gallery.scss +++ b/src/scss/patterns/_gallery.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; figure { --column: wide; @@ -18,7 +18,7 @@ figure { } > * { - @include tools.square(100%); + @include config.square(100%); inset: 0; position: absolute; diff --git a/src/scss/patterns/_icons.scss b/src/scss/patterns/_icons.scss index 891a63ad1..18d91fbe7 100644 --- a/src/scss/patterns/_icons.scss +++ b/src/scss/patterns/_icons.scss @@ -1,4 +1,3 @@ -@use '~accoutrement/sass/tools'; @use '~cascading-color-systems' as ccs; /// # SVG Icons diff --git a/src/scss/patterns/_lists.scss b/src/scss/patterns/_lists.scss index b6cc172d7..e56fe943f 100644 --- a/src/scss/patterns/_lists.scss +++ b/src/scss/patterns/_lists.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; /// # Typography /// Basic typographic styles for the site. @@ -18,7 +18,7 @@ ol { --list-padding--default: 1em; } - @include tools.below('wide-page') { + @include config.below('wide-page') { --list-padding--default: 1em; } } @@ -51,7 +51,7 @@ ol { } strong { - @include tools.font-family('alt'); + @include config.font-family('alt'); font-size: var(--h3); } diff --git a/src/scss/patterns/_media.scss b/src/scss/patterns/_media.scss index 65b16b30b..1d4392c0f 100644 --- a/src/scss/patterns/_media.scss +++ b/src/scss/patterns/_media.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; /// # Media Blocks & Ratios /// @group media @@ -23,7 +23,7 @@ --reverse-y: 'content' 'image'; } - @include tools.above('wide-page') { + @include config.above('wide-page') { grid-template-areas: var(--reverse-x, 'image content'); grid-template-columns: fit-content(25%) minmax( min-content, @@ -83,7 +83,7 @@ /// set as relative context. /// @group media [data-ratio='parent'] { - --ratio: #{tools.ratio('_widescreen')}; + --ratio: #{config.ratio('_widescreen')}; position: relative; @@ -91,7 +91,7 @@ content: ''; display: inline-block; height: 0; - padding-top: calc(100% / var(--ratio, #{tools.ratio('_widescreen')})); + padding-top: calc(100% / var(--ratio, #{config.ratio('_widescreen')})); width: 1px; } } @@ -102,7 +102,7 @@ /// through absolute positioning. /// @group media [data-ratio='child'] { - @include tools.square(100%); + @include config.square(100%); inset: 0; position: absolute; diff --git a/src/scss/patterns/_offset-grid.scss b/src/scss/patterns/_offset-grid.scss index bf1dcdab3..7b42f34d0 100644 --- a/src/scss/patterns/_offset-grid.scss +++ b/src/scss/patterns/_offset-grid.scss @@ -1,5 +1,4 @@ -@use '~accoutrement/sass/tools'; -@use '../config/layout'; +@use '../config'; $break: 'wide-break'; @@ -11,7 +10,7 @@ $break: 'wide-break'; margin: var(--spacer) 0; position: relative; - @include tools.above($break) { + @include config.above($break) { --clip-overlap: calc(var(--gutter) * -1); --offset: var(--spacer); @@ -26,21 +25,21 @@ $break: 'wide-break'; } .offset-item { - @include layout.clip-base; + @include config.clip-base; &:nth-child(odd) { - @include layout.clip('right', $break); + @include config.clip('right', $break); } &:nth-child(even) { - @include layout.clip('left', $break); + @include config.clip('left', $break); } } .offset-more { padding: 0 var(--page-margin); - @include tools.above($break) { + @include config.above($break) { inset: auto auto 0 50%; padding-left: 0; position: absolute; diff --git a/src/scss/patterns/_sections.scss b/src/scss/patterns/_sections.scss index 369fd7e01..21b063969 100644 --- a/src/scss/patterns/_sections.scss +++ b/src/scss/patterns/_sections.scss @@ -1,5 +1,4 @@ -@use '~accoutrement/sass/tools'; -@use '../config/scale'; +@use '../config'; @use 'sass:map'; // Main Actions @@ -85,7 +84,7 @@ [data-block~='rotate'] { transform: rotate(var(--rotate, 0)); - @include tools.above('wide-page') { + @include config.above('wide-page') { --rotate: -6deg; } } @@ -100,7 +99,7 @@ } } -@each $name in map.keys(scale.$page-sizes) { +@each $name in map.keys(config.$page-sizes) { [data-block~='#{$name}'] { --block-max: var(--#{unquote($name)}); } @@ -129,7 +128,7 @@ justify-content: var(--justify, center); justify-items: stretch; - @include tools.below('page') { + @include config.below('page') { // "private" variable to ensure grid-items fit on mobile… ---mobile-min: 60%; } diff --git a/src/scss/patterns/_tables.scss b/src/scss/patterns/_tables.scss index fe3c6f135..44783e851 100644 --- a/src/scss/patterns/_tables.scss +++ b/src/scss/patterns/_tables.scss @@ -1,4 +1,4 @@ -@use '~accoutrement/sass/tools'; +@use '../config'; [data-table] { border-collapse: collapse; @@ -6,7 +6,7 @@ width: 100%; th { - @include tools.font-family('alt'); + @include config.font-family('alt'); font-weight: bold; } @@ -18,7 +18,7 @@ font-style: inherit; text-align: left; - @include tools.above('page') { + @include config.above('page') { --cell-padding: var(--shim); } } @@ -27,7 +27,7 @@ thead { font-size: var(--thead-size, var(--xxsmall)); - @include tools.above('page') { + @include config.above('page') { --thead-size: var(--small); } } @@ -35,7 +35,7 @@ thead { tbody { font-size: var(--tbody-size, var(--xsmall)); - @include tools.above('page') { + @include config.above('page') { --tbody-size: var(--small); } } From 8d431887bf54fc29f92efd4f93370ffc26fe9e81 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Tue, 19 Apr 2022 16:56:14 +0200 Subject: [PATCH 07/26] wip: separate colors into modules --- src/scss/config/_color.scss | 54 +++-------------------------- src/scss/config/_index.scss | 6 ++++ src/scss/config/color/_brand.scss | 12 +++++++ src/scss/config/color/_content.scss | 20 +++++++++++ src/scss/config/color/_docs.scss | 11 ++++++ src/scss/config/color/_index.scss | 2 ++ src/scss/initial/_colors.scss | 4 ++- src/scss/json.scss | 1 + 8 files changed, 60 insertions(+), 50 deletions(-) create mode 100644 src/scss/config/color/_brand.scss create mode 100644 src/scss/config/color/_content.scss create mode 100644 src/scss/config/color/_docs.scss create mode 100644 src/scss/config/color/_index.scss diff --git a/src/scss/config/_color.scss b/src/scss/config/_color.scss index 6d15808db..8b96af4c4 100644 --- a/src/scss/config/_color.scss +++ b/src/scss/config/_color.scss @@ -1,7 +1,8 @@ @use 'sass:meta'; @use 'sass:math'; @use 'sass:color'; -@use '~accoutrement/sass/tools'; +@use 'tools'; +@use './color/brand'; @use '~sassdoc-theme-herman/scss/utilities' as herman; /// # Color Config @@ -13,28 +14,6 @@ /// Cascading Color Systems /// @group config-color -// Brand Colors -// ------------ -/// The brand is defined by our primary brand blue, -/// along with secondary pink and orange base colors. -/// These colors are rarely used directly, -/// but form the basis of our CSS color variables. -/// @colors -/// @type map -/// @group config-color -$brand-colors: ( - 'brand-blue': hsl(195deg, 52%, 31%), - 'brand-orange': hsl(24deg, 100%, 62%), - 'brand-pink': hsl(330deg, 100%, 45%), -); - -@include tools.add-colors($brand-colors); -@include herman.add( - 'colors', - 'brand-colors', - tools.compile-colors($brand-colors) -); - // Background Colors // ----------------- /// Rather than using the brand colors directly, @@ -61,29 +40,6 @@ $background-colors: ( hsla(var(--ccs-h--neutral), var(--ccs-s--bg6), var(--ccs-l--bg6), 40%), ); -// Content Colors -// -------------- -/// Rather than using the brand colors directly, -/// we use them to set default values for generated variables. -/// This provides a mapping between semantic foreground use-cases, -/// and automatically-generated color variables. -/// @type map -/// @group config-color -$content-colors: ( - 'text': var(--ccs-neutral--fg-full), - 'text-light': var(--ccs-neutral--fg3), - 'accent': var(--ccs-accent--fg1), - 'highlight': var(--ccs-accent--fg3), - 'feature': var(--ccs-prime--fg4), - 'border': var(--ccs-neutral), - 'border-fade': var(--ccs-neutral--fade), - 'shadow': - hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 25%), - 'action': var(--ccs-prime--fg3), - 'active': '#highlight', - 'icon': var(--ccs-special--fg1), -); - // CCS Defaults // ------------ /// The Cascading Color System has a few settings @@ -104,9 +60,9 @@ $ccs-colors: ( /// @access private /// @group config-color $_hues: ( - 'prime': math.div(color.hue(tools.color('brand-blue')), 1deg), - 'accent': math.div(color.hue(tools.color('brand-pink')), 1deg), - 'special': math.div(color.hue(tools.color('brand-orange')), 1deg), + 'prime': math.div(color.hue(brand.$brand-blue), 1deg), + 'accent': math.div(color.hue(brand.$brand-pink), 1deg), + 'special': math.div(color.hue(brand.$brand-orange), 1deg), 'neutral': null, ); diff --git a/src/scss/config/_index.scss b/src/scss/config/_index.scss index 41887fe13..d8d3d2222 100644 --- a/src/scss/config/_index.scss +++ b/src/scss/config/_index.scss @@ -5,3 +5,9 @@ @forward 'fonts'; @forward 'layout'; @forward 'scale'; +@use 'tools'; +@use 'sass:meta'; +@use 'color/brand'; +@use 'color/content'; +@include tools.add-colors(meta.module-variables('brand')); +@include tools.add-colors(meta.module-variables('content')); diff --git a/src/scss/config/color/_brand.scss b/src/scss/config/color/_brand.scss new file mode 100644 index 000000000..a149f88f0 --- /dev/null +++ b/src/scss/config/color/_brand.scss @@ -0,0 +1,12 @@ +/// # Brand Colors +/// ------------ +/// The brand is defined by our primary brand blue, +/// along with secondary pink and orange base colors. +/// These colors are rarely used directly, +/// but form the basis of our CSS color variables. +/// @colors brand-colors +/// @group config-color + +$brand-blue: hsl(195deg, 52%, 31%); +$brand-orange: hsl(24deg, 100%, 62%); +$brand-pink: hsl(330deg, 100%, 45%); diff --git a/src/scss/config/color/_content.scss b/src/scss/config/color/_content.scss new file mode 100644 index 000000000..78ea9b8d4 --- /dev/null +++ b/src/scss/config/color/_content.scss @@ -0,0 +1,20 @@ +/// # Content Colors +/// -------------- +/// Rather than using the brand colors directly, +/// we use them to set default values for generated variables. +/// This provides a mapping between semantic foreground use-cases, +/// and automatically-generated color variables. +/// @colors content-colors +/// @group config-color + +$text: var(--ccs-neutral--fg-full); +$text-light: var(--ccs-neutral--fg3); +$accent: var(--ccs-accent--fg1); +$highlight: var(--ccs-accent--fg3); +$feature: var(--ccs-prime--fg4); +$border: var(--ccs-neutral); +$border-fade: var(--ccs-neutral--fade); +$shadow: hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 25%); +$action: var(--ccs-prime--fg3); +$active: '#highlight'; +$icon: var(--ccs-special--fg1); diff --git a/src/scss/config/color/_docs.scss b/src/scss/config/color/_docs.scss new file mode 100644 index 000000000..d6bc1cc26 --- /dev/null +++ b/src/scss/config/color/_docs.scss @@ -0,0 +1,11 @@ +@use '~sassdoc-theme-herman/scss/utilities' as herman; +@use 'sass:meta'; +@use 'brand'; +@use 'content'; + +@include herman.add('colors', 'brand-colors', meta.module-variables('brand')); +@include herman.add( + 'colors', + 'content-colors', + meta.module-variables('content') +); diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss new file mode 100644 index 000000000..4f7fd5985 --- /dev/null +++ b/src/scss/config/color/_index.scss @@ -0,0 +1,2 @@ +@forward 'brand'; +@forward 'content'; diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index 2ef499993..7879d6ba1 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -1,4 +1,6 @@ +@use 'sass:meta'; @use '../config'; +@use '../config/color/content'; @use '~cascading-color-systems' as ccs with ( $hues: config.ccs('hues'), $saturation: config.ccs('saturation'), @@ -24,7 +26,7 @@ [data-ccs-colors] { @include config.tokens--(config.$ccs-colors); @include config.tokens--(config.$background-colors); - @include config.tokens--(config.$content-colors); + @include config.tokens--(meta.module-variables('content')); --img-bright--base: #{ccs.if-mode($light: 50%, $dark: 40%)}; --img-bright--default: calc(var(--img-bright--base) + var(--ccs-l)); diff --git a/src/scss/json.scss b/src/scss/json.scss index b95e297ef..dae015662 100644 --- a/src/scss/json.scss +++ b/src/scss/json.scss @@ -1,4 +1,5 @@ @use 'config'; +@use 'config/color/docs'; @use '~sassdoc-theme-herman/scss/utilities' as herman; @include herman.export(herman.$herman); From 9ff50f2b28cf2d41dc2ebe9446dc5046e2ae3fc0 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 21 Apr 2022 18:45:59 +0200 Subject: [PATCH 08/26] hide ccs color previews --- src/scss/config/_color.scss | 28 +------------------------ src/scss/config/_index.scss | 3 ++- src/scss/config/color/_background.scss | 26 +++++++++++++++++++++++ src/scss/config/color/_brand.scss | 2 +- src/scss/config/color/_content.scss | 29 ++++++++++++++------------ src/scss/config/color/_docs.scss | 6 ------ src/scss/config/color/_index.scss | 1 + src/scss/initial/_colors.scss | 5 +++-- 8 files changed, 50 insertions(+), 50 deletions(-) create mode 100644 src/scss/config/color/_background.scss diff --git a/src/scss/config/_color.scss b/src/scss/config/_color.scss index 8b96af4c4..5064156ce 100644 --- a/src/scss/config/_color.scss +++ b/src/scss/config/_color.scss @@ -9,37 +9,11 @@ /// Accoutrement maps for storing global color tokens, /// and settings for generating color variables. /// @link https://www.oddbird.net/accoutrement/docs/color.html -/// Accoutrement Scale +/// Accoutrement Color /// @link https://www.oddbird.net/cascading-colors/ /// Cascading Color Systems /// @group config-color -// Background Colors -// ----------------- -/// Rather than using the brand colors directly, -/// we use them to set default values for generated variables. -/// This provides a mapping between semantic background use-cases, -/// and automatically-generated color variables. -/// @type map -/// @group config-color -$background-colors: ( - 'bg': var(--ccs-neutral--bg-full), - 'bg-full': var(--ccs--bg-full), - 'callout': hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5)), - 'callout-neutral': var(--ccs-neutral--bg5), - 'callout-fade': - hsla( - var(--ccs-h--prime), - var(--ccs-s--bg2), - var(--ccs-l--bg5), - var(--ccs-fade) - ), - 'callout-special': var(--ccs-special--bg5-fade), - 'overlay': var(--ccs-neutral--bg6-fade), - 'overlay-banner': - hsla(var(--ccs-h--neutral), var(--ccs-s--bg6), var(--ccs-l--bg6), 40%), -); - // CCS Defaults // ------------ /// The Cascading Color System has a few settings diff --git a/src/scss/config/_index.scss b/src/scss/config/_index.scss index d8d3d2222..c63551ba8 100644 --- a/src/scss/config/_index.scss +++ b/src/scss/config/_index.scss @@ -7,7 +7,8 @@ @forward 'scale'; @use 'tools'; @use 'sass:meta'; +@use 'color/background'; @use 'color/brand'; @use 'color/content'; + @include tools.add-colors(meta.module-variables('brand')); -@include tools.add-colors(meta.module-variables('content')); diff --git a/src/scss/config/color/_background.scss b/src/scss/config/color/_background.scss new file mode 100644 index 000000000..276a00025 --- /dev/null +++ b/src/scss/config/color/_background.scss @@ -0,0 +1,26 @@ +/// ## Background Colors +/// ----------------- +/// Rather than using the brand colors directly, +/// we use them to set default values for generated variables. +/// This provides a mapping between semantic background use-cases, +/// and automatically-generated color variables. +/// @colors background-colors +/// @type map +/// @group config-color +$background-colors: ( + 'bg': var(--ccs-neutral--bg-full), + 'bg-full': var(--ccs--bg-full), + 'callout': hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5)), + 'callout-neutral': var(--ccs-neutral--bg5), + 'callout-fade': + hsla( + var(--ccs-h--prime), + var(--ccs-s--bg2), + var(--ccs-l--bg5), + var(--ccs-fade) + ), + 'callout-special': var(--ccs-special--bg5-fade), + 'overlay': var(--ccs-neutral--bg6-fade), + 'overlay-banner': + hsla(var(--ccs-h--neutral), var(--ccs-s--bg6), var(--ccs-l--bg6), 40%), +); diff --git a/src/scss/config/color/_brand.scss b/src/scss/config/color/_brand.scss index a149f88f0..81f5c38bf 100644 --- a/src/scss/config/color/_brand.scss +++ b/src/scss/config/color/_brand.scss @@ -1,4 +1,4 @@ -/// # Brand Colors +/// ## Brand Colors /// ------------ /// The brand is defined by our primary brand blue, /// along with secondary pink and orange base colors. diff --git a/src/scss/config/color/_content.scss b/src/scss/config/color/_content.scss index 78ea9b8d4..4c0d6272d 100644 --- a/src/scss/config/color/_content.scss +++ b/src/scss/config/color/_content.scss @@ -1,20 +1,23 @@ -/// # Content Colors +/// ## Content Colors /// -------------- /// Rather than using the brand colors directly, /// we use them to set default values for generated variables. /// This provides a mapping between semantic foreground use-cases, /// and automatically-generated color variables. /// @colors content-colors +/// @type map /// @group config-color - -$text: var(--ccs-neutral--fg-full); -$text-light: var(--ccs-neutral--fg3); -$accent: var(--ccs-accent--fg1); -$highlight: var(--ccs-accent--fg3); -$feature: var(--ccs-prime--fg4); -$border: var(--ccs-neutral); -$border-fade: var(--ccs-neutral--fade); -$shadow: hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 25%); -$action: var(--ccs-prime--fg3); -$active: '#highlight'; -$icon: var(--ccs-special--fg1); +$content-colors: ( + 'text': var(--ccs-neutral--fg-full), + 'text-light': var(--ccs-neutral--fg3), + 'accent': var(--ccs-accent--fg1), + 'highlight': var(--ccs-accent--fg3), + 'feature': var(--ccs-prime--fg4), + 'border': var(--ccs-neutral), + 'border-fade': var(--ccs-neutral--fade), + 'shadow': + hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 25%), + 'action': var(--ccs-prime--fg3), + 'active': '#highlight', + 'icon': var(--ccs-special--fg1), +); diff --git a/src/scss/config/color/_docs.scss b/src/scss/config/color/_docs.scss index d6bc1cc26..aeae3ab83 100644 --- a/src/scss/config/color/_docs.scss +++ b/src/scss/config/color/_docs.scss @@ -1,11 +1,5 @@ @use '~sassdoc-theme-herman/scss/utilities' as herman; @use 'sass:meta'; @use 'brand'; -@use 'content'; @include herman.add('colors', 'brand-colors', meta.module-variables('brand')); -@include herman.add( - 'colors', - 'content-colors', - meta.module-variables('content') -); diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index 4f7fd5985..a2699b787 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -1,2 +1,3 @@ @forward 'brand'; @forward 'content'; +@forward 'background'; diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index 7879d6ba1..2c564aac3 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -1,6 +1,7 @@ @use 'sass:meta'; @use '../config'; @use '../config/color/content'; +@use '../config/color/background'; @use '~cascading-color-systems' as ccs with ( $hues: config.ccs('hues'), $saturation: config.ccs('saturation'), @@ -25,8 +26,8 @@ /// @group init-colors [data-ccs-colors] { @include config.tokens--(config.$ccs-colors); - @include config.tokens--(config.$background-colors); - @include config.tokens--(meta.module-variables('content')); + @include config.tokens--(background.$background-colors); + @include config.tokens--(content.$content-colors); --img-bright--base: #{ccs.if-mode($light: 50%, $dark: 40%)}; --img-bright--default: calc(var(--img-bright--base) + var(--ccs-l)); From 0fb728c7367b55ff8fa216eb0355758421104291 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 21 Apr 2022 19:19:21 +0200 Subject: [PATCH 09/26] move ccs defaults --- src/scss/config/_color.scss | 12 ------------ src/scss/config/_index.scss | 2 -- src/scss/config/color/_ccs-defaults.scss | 12 ++++++++++++ src/scss/config/color/_index.scss | 1 + src/scss/initial/_colors.scss | 3 ++- 5 files changed, 15 insertions(+), 15 deletions(-) create mode 100644 src/scss/config/color/_ccs-defaults.scss diff --git a/src/scss/config/_color.scss b/src/scss/config/_color.scss index 5064156ce..a761b78d8 100644 --- a/src/scss/config/_color.scss +++ b/src/scss/config/_color.scss @@ -14,18 +14,6 @@ /// Cascading Color Systems /// @group config-color -// CCS Defaults -// ------------ -/// The Cascading Color System has a few settings -/// that we can most easily override with CSS variables -/// @type map -/// @group config-color -$ccs-colors: ( - 'ccs-neutral--theme': var(--ccs-h--prime), - 'ccs-background': var(--bg), - 'ccs-color': var(--text), -); - // Brand Hues // ---------- /// Hue values taken from the brand colors, diff --git a/src/scss/config/_index.scss b/src/scss/config/_index.scss index c63551ba8..434f28ceb 100644 --- a/src/scss/config/_index.scss +++ b/src/scss/config/_index.scss @@ -7,8 +7,6 @@ @forward 'scale'; @use 'tools'; @use 'sass:meta'; -@use 'color/background'; @use 'color/brand'; -@use 'color/content'; @include tools.add-colors(meta.module-variables('brand')); diff --git a/src/scss/config/color/_ccs-defaults.scss b/src/scss/config/color/_ccs-defaults.scss new file mode 100644 index 000000000..c9bcde10a --- /dev/null +++ b/src/scss/config/color/_ccs-defaults.scss @@ -0,0 +1,12 @@ +/// ## CCS Defaults +/// ------------ +/// The Cascading Color System has a few settings +/// that we can most easily override with CSS variables +/// @colors ccs-colors +/// @type map +/// @group config-color +$ccs-colors: ( + 'ccs-neutral--theme': var(--ccs-h--prime), + 'ccs-background': var(--bg), + 'ccs-color': var(--text), +); diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index a2699b787..9eb7f5075 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -1,3 +1,4 @@ @forward 'brand'; @forward 'content'; @forward 'background'; +@forward 'ccs-defaults'; diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index 2c564aac3..7b3dc4344 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -1,6 +1,7 @@ @use 'sass:meta'; @use '../config'; @use '../config/color/content'; +@use '../config/color/ccs-defaults'; @use '../config/color/background'; @use '~cascading-color-systems' as ccs with ( $hues: config.ccs('hues'), @@ -25,7 +26,7 @@ /// @group init-colors [data-ccs-colors] { - @include config.tokens--(config.$ccs-colors); + @include config.tokens--(ccs-defaults.$ccs-colors); @include config.tokens--(background.$background-colors); @include config.tokens--(content.$content-colors); From 2339047704b7ae7c3f0eea5731bab976e540c8ae Mon Sep 17 00:00:00 2001 From: dvdherron Date: Wed, 15 Jun 2022 15:21:43 +0200 Subject: [PATCH 10/26] move color config --- .../config/{_color.scss => color/_config.scss} | 18 +++++++++--------- src/scss/config/color/_index.scss | 1 + 2 files changed, 10 insertions(+), 9 deletions(-) rename src/scss/config/{_color.scss => color/_config.scss} (89%) diff --git a/src/scss/config/_color.scss b/src/scss/config/color/_config.scss similarity index 89% rename from src/scss/config/_color.scss rename to src/scss/config/color/_config.scss index a761b78d8..a069cf379 100644 --- a/src/scss/config/_color.scss +++ b/src/scss/config/color/_config.scss @@ -1,11 +1,11 @@ @use 'sass:meta'; @use 'sass:math'; @use 'sass:color'; -@use 'tools'; -@use './color/brand'; -@use '~sassdoc-theme-herman/scss/utilities' as herman; +@use '../tools'; +@use 'brand'; /// # Color Config +/// ----------------- /// Accoutrement maps for storing global color tokens, /// and settings for generating color variables. /// @link https://www.oddbird.net/accoutrement/docs/color.html @@ -14,8 +14,8 @@ /// Cascading Color Systems /// @group config-color -// Brand Hues -// ---------- +/// ## Brand Hues +/// ---------- /// Hue values taken from the brand colors, /// for easy access in the CCS settings. /// @type map @@ -28,8 +28,8 @@ $_hues: ( 'neutral': null, ); -// CCS Settings -// ------------ +/// ## CCS Settings +/// ------------ /// Settings for generating color variables. /// This map is marked private to encourage access /// through the `ccs()` function. @@ -50,8 +50,8 @@ $_ccs: ( 'neutral-saturation': 10%, ); -// CCS "Get" Function -// ------------------ +/// ## CCS "Get" Function +/// ------------------ /// Get settings from the `$ccs` configuration map. /// @param {string} $token - /// Name of a token key in the `$ccs` map. diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index 9eb7f5075..fb3cf8f79 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -1,3 +1,4 @@ +@forward 'config'; @forward 'brand'; @forward 'content'; @forward 'background'; From a022eabbcf9ed3cd1f7bf7308c70462b40441d24 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 1 Aug 2022 15:32:51 -0500 Subject: [PATCH 11/26] @use 'sass:map' and map.get() in color config --- src/scss/config/color/_config.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/config/color/_config.scss b/src/scss/config/color/_config.scss index a069cf379..20998a68c 100644 --- a/src/scss/config/color/_config.scss +++ b/src/scss/config/color/_config.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use 'sass:meta'; @use 'sass:math'; @use 'sass:color'; @@ -64,5 +65,5 @@ $_ccs: ( /// $prime-hue: color.ccs('prime'); /// @group config-color @function ccs($token) { - @return map-get($_ccs, $token); + @return map.get($_ccs, $token); } From 9e1d20d637b4ecb45b95877f52c1b54947882923 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 1 Aug 2022 15:34:40 -0500 Subject: [PATCH 12/26] convert sass color maps to variables --- src/scss/config/_index.scss | 9 +++++++ src/scss/config/_tools.scss | 4 ++- src/scss/config/color/_background.scss | 33 +++++++++++------------- src/scss/config/color/_ccs-defaults.scss | 11 ++++---- src/scss/config/color/_content.scss | 27 +++++++++---------- src/scss/config/color/_docs.scss | 5 ---- src/scss/config/color/_index.scss | 12 ++++++--- src/scss/initial/_colors.scss | 12 ++++----- src/scss/initial/_root.scss | 11 ++++---- src/scss/json.scss | 1 - src/scss/styleguide.scss | 6 +---- 11 files changed, 63 insertions(+), 68 deletions(-) delete mode 100644 src/scss/config/color/_docs.scss diff --git a/src/scss/config/_index.scss b/src/scss/config/_index.scss index 434f28ceb..f32c8efa3 100644 --- a/src/scss/config/_index.scss +++ b/src/scss/config/_index.scss @@ -5,8 +5,17 @@ @forward 'fonts'; @forward 'layout'; @forward 'scale'; + @use 'tools'; @use 'sass:meta'; @use 'color/brand'; +@use 'color/background'; +@use 'color/ccs-defaults'; +@use 'color/content'; +@use 'color/config' as color-config; @include tools.add-colors(meta.module-variables('brand')); +@include tools.add-colors(meta.module-variables('background')); +@include tools.add-colors(meta.module-variables('ccs-defaults')); +@include tools.add-colors(meta.module-variables('content')); +@include tools.add-colors(meta.module-variables('color-config')); diff --git a/src/scss/config/_tools.scss b/src/scss/config/_tools.scss index 04fab397c..7c369f0fb 100644 --- a/src/scss/config/_tools.scss +++ b/src/scss/config/_tools.scss @@ -1 +1,3 @@ -@forward '~accoutrement/sass/tools'; +@forward '~accoutrement/sass/tools' with ( + $color-var-prefix: '' +); diff --git a/src/scss/config/color/_background.scss b/src/scss/config/color/_background.scss index 276a00025..731359945 100644 --- a/src/scss/config/color/_background.scss +++ b/src/scss/config/color/_background.scss @@ -5,22 +5,19 @@ /// This provides a mapping between semantic background use-cases, /// and automatically-generated color variables. /// @colors background-colors -/// @type map /// @group config-color -$background-colors: ( - 'bg': var(--ccs-neutral--bg-full), - 'bg-full': var(--ccs--bg-full), - 'callout': hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5)), - 'callout-neutral': var(--ccs-neutral--bg5), - 'callout-fade': - hsla( - var(--ccs-h--prime), - var(--ccs-s--bg2), - var(--ccs-l--bg5), - var(--ccs-fade) - ), - 'callout-special': var(--ccs-special--bg5-fade), - 'overlay': var(--ccs-neutral--bg6-fade), - 'overlay-banner': - hsla(var(--ccs-h--neutral), var(--ccs-s--bg6), var(--ccs-l--bg6), 40%), -); + +$bg: var(--ccs-neutral--bg-full); +$bg-full: var(--ccs--bg-full); +$callout: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5)); +$callout-neutral: var(--ccs-neutral--bg5); +$callout-fade: hsla(var(--ccs-h--prime), + var(--ccs-s--bg2), + var(--ccs-l--bg5), + var(--ccs-fade)); +$callout-special: var(--ccs-special--bg5-fade); +$overlay: var(--ccs-neutral--bg6-fade); +$overlay-banner: hsla(var(--ccs-h--neutral), + var(--ccs-s--bg6), + var(--ccs-l--bg6), + 40%); diff --git a/src/scss/config/color/_ccs-defaults.scss b/src/scss/config/color/_ccs-defaults.scss index c9bcde10a..a00d2383c 100644 --- a/src/scss/config/color/_ccs-defaults.scss +++ b/src/scss/config/color/_ccs-defaults.scss @@ -3,10 +3,9 @@ /// The Cascading Color System has a few settings /// that we can most easily override with CSS variables /// @colors ccs-colors -/// @type map /// @group config-color -$ccs-colors: ( - 'ccs-neutral--theme': var(--ccs-h--prime), - 'ccs-background': var(--bg), - 'ccs-color': var(--text), -); + +/* stylelint-disable-next-line dollar-variable-pattern */ +$ccs-neutral--theme: var(--ccs-h--prime); +$ccs-background: var(--bg); +$ccs-color: var(--text); diff --git a/src/scss/config/color/_content.scss b/src/scss/config/color/_content.scss index 4c0d6272d..abae024b9 100644 --- a/src/scss/config/color/_content.scss +++ b/src/scss/config/color/_content.scss @@ -5,19 +5,16 @@ /// This provides a mapping between semantic foreground use-cases, /// and automatically-generated color variables. /// @colors content-colors -/// @type map /// @group config-color -$content-colors: ( - 'text': var(--ccs-neutral--fg-full), - 'text-light': var(--ccs-neutral--fg3), - 'accent': var(--ccs-accent--fg1), - 'highlight': var(--ccs-accent--fg3), - 'feature': var(--ccs-prime--fg4), - 'border': var(--ccs-neutral), - 'border-fade': var(--ccs-neutral--fade), - 'shadow': - hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 25%), - 'action': var(--ccs-prime--fg3), - 'active': '#highlight', - 'icon': var(--ccs-special--fg1), -); + +$text: var(--ccs-neutral--fg-full); +$text-light: var(--ccs-neutral--fg3); +$accent: var(--ccs-accent--fg1); +$highlight: var(--ccs-accent--fg3); +$feature: var(--ccs-prime--fg4); +$border: var(--ccs-neutral); +$border-fade: var(--ccs-neutral--fade); +$shadow: hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 25%); +$action: var(--ccs-prime--fg3); +$active: $highlight; +$icon: var(--ccs-special--fg1); diff --git a/src/scss/config/color/_docs.scss b/src/scss/config/color/_docs.scss deleted file mode 100644 index aeae3ab83..000000000 --- a/src/scss/config/color/_docs.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '~sassdoc-theme-herman/scss/utilities' as herman; -@use 'sass:meta'; -@use 'brand'; - -@include herman.add('colors', 'brand-colors', meta.module-variables('brand')); diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index fb3cf8f79..9d5dfa883 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -1,5 +1,9 @@ +@use '~sassdoc-theme-herman/scss/utilities' as herman; +@use '../tools'; +@use 'sass:meta'; +@use 'brand'; @forward 'config'; -@forward 'brand'; -@forward 'content'; -@forward 'background'; -@forward 'ccs-defaults'; + +@include herman.add('colors', + 'brand-colors', + tools.compile-colors(meta.module-variables('brand'))); diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index 7b3dc4344..6c6ba49ce 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -3,8 +3,7 @@ @use '../config/color/content'; @use '../config/color/ccs-defaults'; @use '../config/color/background'; -@use '~cascading-color-systems' as ccs with ( - $hues: config.ccs('hues'), +@use '~cascading-color-systems' as ccs with ($hues: config.ccs('hues'), $saturation: config.ccs('saturation'), $contrast: config.ccs('contrast'), $steps: config.ccs('steps'), @@ -12,8 +11,7 @@ $fade-background: config.ccs('fade-background'), $neutral-saturation: config.ccs('neutral-saturation'), $build: true, - $gradients: true -); + $gradients: true); /// # CSS Color Variables /// Generate CSS variables from configuration colors, @@ -26,9 +24,9 @@ /// @group init-colors [data-ccs-colors] { - @include config.tokens--(ccs-defaults.$ccs-colors); - @include config.tokens--(background.$background-colors); - @include config.tokens--(content.$content-colors); + @include config.colors--(meta.module-variables('ccs-defaults')); + @include config.colors--(meta.module-variables('background')); + @include config.colors--(meta.module-variables('content')); --img-bright--base: #{ccs.if-mode($light: 50%, $dark: 40%)}; --img-bright--default: calc(var(--img-bright--base) + var(--ccs-l)); diff --git a/src/scss/initial/_root.scss b/src/scss/initial/_root.scss index 3470e89fc..14a38c4d5 100644 --- a/src/scss/initial/_root.scss +++ b/src/scss/initial/_root.scss @@ -4,17 +4,16 @@ html { @include config.font-family('body'); + @include config.colors--; --clip-overlap: var(--page-margin); --clip-angle: var(--double-gutter); --clip-space: calc(var(--clip-angle) + var(--gutter)); --clip-left: polygon(var(--clip-angle) 0, 100% 0, 100% 100%, 0 100%); - --clip-right: polygon( - 0 0, - 100% 0, - calc(100% - var(--clip-angle)) 100%, - 0 100% - ); + --clip-right: polygon(0 0, + 100% 0, + calc(100% - var(--clip-angle)) 100%, + 0 100%); font-size: config.size('rem'); line-height: config.ratio('line-height'); diff --git a/src/scss/json.scss b/src/scss/json.scss index dae015662..b95e297ef 100644 --- a/src/scss/json.scss +++ b/src/scss/json.scss @@ -1,5 +1,4 @@ @use 'config'; -@use 'config/color/docs'; @use '~sassdoc-theme-herman/scss/utilities' as herman; @include herman.export(herman.$herman); diff --git a/src/scss/styleguide.scss b/src/scss/styleguide.scss index eacfc4569..bb505584c 100644 --- a/src/scss/styleguide.scss +++ b/src/scss/styleguide.scss @@ -1,9 +1,5 @@ -@use '~cssremedy/css/remedy'; +@use 'screen'; @use 'config'; -@use 'initial'; -@use 'forms'; -@use 'patterns'; -@use 'components'; [data-styleguide='focus'] { @include config.focus-ring; From e8c9d58d712b5afafff913cbf26ce2d11271f4ba Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 1 Aug 2022 15:38:15 -0500 Subject: [PATCH 13/26] remove unused --- src/scss/patterns/_icons.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/scss/patterns/_icons.scss b/src/scss/patterns/_icons.scss index 18d91fbe7..494367de3 100644 --- a/src/scss/patterns/_icons.scss +++ b/src/scss/patterns/_icons.scss @@ -1,5 +1,3 @@ -@use '~cascading-color-systems' as ccs; - /// # SVG Icons /// @icons content/_includes/icons/ /// @group icons From 86117cbe82cb651710459f02bacdcc810835f63e Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 1 Aug 2022 15:50:27 -0500 Subject: [PATCH 14/26] simplify color include, lint --- src/scss/config/color/_background.scss | 20 ++++++++++++-------- src/scss/config/color/_index.scss | 6 ++++-- src/scss/initial/_colors.scss | 15 +++++---------- src/scss/initial/_root.scss | 11 ++++++----- 4 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/scss/config/color/_background.scss b/src/scss/config/color/_background.scss index 731359945..d71fcdbe7 100644 --- a/src/scss/config/color/_background.scss +++ b/src/scss/config/color/_background.scss @@ -11,13 +11,17 @@ $bg: var(--ccs-neutral--bg-full); $bg-full: var(--ccs--bg-full); $callout: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5)); $callout-neutral: var(--ccs-neutral--bg5); -$callout-fade: hsla(var(--ccs-h--prime), - var(--ccs-s--bg2), - var(--ccs-l--bg5), - var(--ccs-fade)); +$callout-fade: hsla( + var(--ccs-h--prime), + var(--ccs-s--bg2), + var(--ccs-l--bg5), + var(--ccs-fade) +); $callout-special: var(--ccs-special--bg5-fade); $overlay: var(--ccs-neutral--bg6-fade); -$overlay-banner: hsla(var(--ccs-h--neutral), - var(--ccs-s--bg6), - var(--ccs-l--bg6), - 40%); +$overlay-banner: hsla( + var(--ccs-h--neutral), + var(--ccs-s--bg6), + var(--ccs-l--bg6), + 40% +); diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index 9d5dfa883..7599dac24 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -4,6 +4,8 @@ @use 'brand'; @forward 'config'; -@include herman.add('colors', +@include herman.add( + 'colors', 'brand-colors', - tools.compile-colors(meta.module-variables('brand'))); + tools.compile-colors(meta.module-variables('brand')) +); diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index 6c6ba49ce..5c3fda711 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -1,9 +1,7 @@ @use 'sass:meta'; @use '../config'; -@use '../config/color/content'; -@use '../config/color/ccs-defaults'; -@use '../config/color/background'; -@use '~cascading-color-systems' as ccs with ($hues: config.ccs('hues'), +@use '~cascading-color-systems' as ccs with ( + $hues: config.ccs('hues'), $saturation: config.ccs('saturation'), $contrast: config.ccs('contrast'), $steps: config.ccs('steps'), @@ -11,7 +9,8 @@ $fade-background: config.ccs('fade-background'), $neutral-saturation: config.ccs('neutral-saturation'), $build: true, - $gradients: true); + $gradients: true +); /// # CSS Color Variables /// Generate CSS variables from configuration colors, @@ -20,13 +19,9 @@ /// Accoutrement Variables /// @link https://www.oddbird.net/cascading-colors/ /// Cascading Color Systems -/// @group init-colors - /// @group init-colors [data-ccs-colors] { - @include config.colors--(meta.module-variables('ccs-defaults')); - @include config.colors--(meta.module-variables('background')); - @include config.colors--(meta.module-variables('content')); + @include config.colors--; --img-bright--base: #{ccs.if-mode($light: 50%, $dark: 40%)}; --img-bright--default: calc(var(--img-bright--base) + var(--ccs-l)); diff --git a/src/scss/initial/_root.scss b/src/scss/initial/_root.scss index 14a38c4d5..3470e89fc 100644 --- a/src/scss/initial/_root.scss +++ b/src/scss/initial/_root.scss @@ -4,16 +4,17 @@ html { @include config.font-family('body'); - @include config.colors--; --clip-overlap: var(--page-margin); --clip-angle: var(--double-gutter); --clip-space: calc(var(--clip-angle) + var(--gutter)); --clip-left: polygon(var(--clip-angle) 0, 100% 0, 100% 100%, 0 100%); - --clip-right: polygon(0 0, - 100% 0, - calc(100% - var(--clip-angle)) 100%, - 0 100%); + --clip-right: polygon( + 0 0, + 100% 0, + calc(100% - var(--clip-angle)) 100%, + 0 100% + ); font-size: config.size('rem'); line-height: config.ratio('line-height'); From aac7f3f8915c4ee005bf9891084e5924700adc81 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 1 Aug 2022 16:22:56 -0500 Subject: [PATCH 15/26] show color variable names and values, even though they are empty --- src/scss/config/color/_index.scss | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index 7599dac24..7237dc6cc 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -2,10 +2,23 @@ @use '../tools'; @use 'sass:meta'; @use 'brand'; +@use 'background'; +@use 'ccs-defaults'; +@use 'content'; @forward 'config'; -@include herman.add( - 'colors', +@include herman.add('colors', 'brand-colors', - tools.compile-colors(meta.module-variables('brand')) -); + tools.compile-colors(meta.module-variables('brand'))); + +@include herman.add('colors', + 'background-colors', + tools.compile-colors(meta.module-variables('background'))); + +@include herman.add('colors', + 'ccs-colors', + tools.compile-colors(meta.module-variables('ccs-defaults'))); + +@include herman.add('colors', + 'content-colors', + tools.compile-colors(meta.module-variables('content'))); From fc17e225d2eb008cc0b5208e327db137ea0de80f Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Mon, 1 Aug 2022 17:48:16 -0400 Subject: [PATCH 16/26] lint --- src/scss/config/color/_ccs-defaults.scss | 2 +- src/scss/config/color/_index.scss | 24 ++++++++++++++++-------- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/scss/config/color/_ccs-defaults.scss b/src/scss/config/color/_ccs-defaults.scss index a00d2383c..57da77b79 100644 --- a/src/scss/config/color/_ccs-defaults.scss +++ b/src/scss/config/color/_ccs-defaults.scss @@ -5,7 +5,7 @@ /// @colors ccs-colors /// @group config-color -/* stylelint-disable-next-line dollar-variable-pattern */ +/* stylelint-disable-next-line scss/dollar-variable-pattern */ $ccs-neutral--theme: var(--ccs-h--prime); $ccs-background: var(--bg); $ccs-color: var(--text); diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index 7237dc6cc..4b7f6490a 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -7,18 +7,26 @@ @use 'content'; @forward 'config'; -@include herman.add('colors', +@include herman.add( + 'colors', 'brand-colors', - tools.compile-colors(meta.module-variables('brand'))); + tools.compile-colors(meta.module-variables('brand')) +); -@include herman.add('colors', +@include herman.add( + 'colors', 'background-colors', - tools.compile-colors(meta.module-variables('background'))); + tools.compile-colors(meta.module-variables('background')) +); -@include herman.add('colors', +@include herman.add( + 'colors', 'ccs-colors', - tools.compile-colors(meta.module-variables('ccs-defaults'))); + tools.compile-colors(meta.module-variables('ccs-defaults')) +); -@include herman.add('colors', +@include herman.add( + 'colors', 'content-colors', - tools.compile-colors(meta.module-variables('content'))); + tools.compile-colors(meta.module-variables('content')) +); From 1f69e67fd9bd624f1fb5ae4ea8db9ff754d701cb Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 9 Aug 2022 13:43:05 -0400 Subject: [PATCH 17/26] update linter --- .stylelintrc.yml | 2 +- src/mentions/webmentions.json | 182 ++++++++++++++++++++++- src/scss/config/color/_ccs-defaults.scss | 1 - 3 files changed, 182 insertions(+), 3 deletions(-) diff --git a/.stylelintrc.yml b/.stylelintrc.yml index c59c9cdeb..5cb51ddb1 100644 --- a/.stylelintrc.yml +++ b/.stylelintrc.yml @@ -36,7 +36,7 @@ rules: - message: 'Expected mixin to be kebab-case' scss/at-rule-conditional-no-parentheses: null scss/dollar-variable-pattern: - - '^([_|-]*[a-z][a-z0-9]*)(-[a-z0-9]+)*-*$' + - '^([_|-]*[a-z][a-z0-9]*)(-{1,2}[a-z0-9]+)*-*$' - message: 'Expected variable to be kebab-case' # Disable for Prettier diff --git a/src/mentions/webmentions.json b/src/mentions/webmentions.json index b5fb1e3d9..7e4c9bb07 100644 --- a/src/mentions/webmentions.json +++ b/src/mentions/webmentions.json @@ -1,6 +1,186 @@ { - "lastFetched": "2022-08-03T13:45:23.167Z", + "lastFetched": "2022-08-09T17:33:57.333Z", "children": [ + { + "type": "entry", + "author": { + "type": "card", + "name": "", + "photo": "", + "url": "" + }, + "url": "https://thedevnews.com/net-weekly-74-stefan-judis-net-improvement/", + "published": null, + "wm-received": "2022-08-08T23:12:21Z", + "wm-id": 1453712, + "wm-source": "https://thedevnews.com/net-weekly-74-stefan-judis-net-improvement/", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "mention-of": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "mention-of", + "wm-private": false, + "rels": { + "canonical": "https://thedevnews.com/net-weekly-74-stefan-judis-net-improvement/" + } + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "Miriam Eric Suzanne", + "photo": "https://webmention.io/avatar/d33wubrfki0l68.cloudfront.net/10683266149a653b1fe45e7f5c7e0ccc65f813301b42f85b3a6f043a672adace.jpg", + "url": "https://www.miriamsuzanne.com/who/" + }, + "url": "https://www.miriamsuzanne.com/2022/08/07/minimal/", + "published": "2022-08-07T20:57:46", + "wm-received": "2022-08-07T21:18:58Z", + "wm-id": 1453036, + "wm-source": "https://www.miriamsuzanne.com/2022/08/07/minimal/", + "wm-target": "https://www.oddbird.net/cascading-colors/", + "name": "No Demo [Website] Reno", + "summary": { + "content-type": "text/plain", + "value": "I want to re-think the front-end of my site, without too much change to the (Eleventy/Markdown) content that drives it. And I want to do it slowly." + }, + "content": { + "html": "

Erin & I had a lovely vacation last month,\ndriving around southwest Colorado –\nBishop Castle, the Great Sand Dunes,\nChimney Rock, the Durango-Silverton Railroad,\nthe (terrifying) Million Dollar Highway,\nthe Black Canyon of the Gunnison,\nand so on.\nIt was absolutely beautiful.

\n

This post isn’t about our vacation,\nor any of the amazing places we visited.

\n

Every night we would end up in a hotel room,\nwhere we turn on the Food Network\n(back-to-back Diners, Drive-Ins, and Dives)\nor whatever is showing on HGTV.\nNested between extensive house remodeling shows,\nNo Demo Reno starts with the premise\nthat you can make big upgrades to a home\nwithout moving a single wall.

\n

This post isn’t about HGTV or home renovations, either.\nI’ve seen a total of two or three episodes\nwhile knitting, winding down,\nand getting ready for bed.

\n

But that’s my goal with this site redesign.\nHow much can I change,\nwithout moving any of the walls?

\n

Some background, and goals

\n

I’ve had a number of ‘personal’ sites over the years,\nbut landed on this URL in 2015.\nThe first version of this site\nused rstBlog –\na small Python static-site generator\nwithout any documentation.

\n\n

In early 2019,\nI migrated from rstBlog\nonto my current Eleventy setup –\na complete overhaul of the site,\ninside and out.\nThe demolition was extensive,\nand I likely\nbroke a few promises.

\n

This time\nI plan to leave all the\ncontent and Eleventy infrastructure\nbasically intact.\nHere are the goals:

\n

Clarify the information architecture

\n

I’ve always found it hard\nto sort my activities\ninto organized ‘categories’,\nso I’ve been treating basically everything\nas an event\nwith the same data, look, and feel.\nSomething happens –\na presentation, performance, album release, novel, article, spec –\non a particular date,\nwith any number of relevant tags.

\n

I like some things about that –\nembracing the mess of my ADHD life –\nbut I haven’t yet found a great solution\nfor navigating & displaying it.\nPart of the problem is simply that\neverything looks the same.\nIt would help if site visitors\ncan more easily see the different types of content\nreflected in the design and navigation of the site.

\n

The previous design also relied heavily\non extra-long ‘calendars’ of content\nat the bottom of every page.\nThat solution felt very bulky to me –\nboth in terms of page-load,\nand user scrolling.\nIt may have been\ntechnically Finite,\nbut it didn’t always feel as finite\n(or as easy to navigate)\nas I’d like.

\n

Clean up the HTML (& Nunjucks)

\n

Technical debt often builds up in HTML over time –\nextra wrapping divs, stray classes,\nand other complexities\nthat originate more from style than content.\nIt feels good to clean that out and start fresh.\nSpecifically, I want to:

\n
  • Simplify complex Nunjucks templates
    • \n
  • Strip out any HTML that is not absolutely essential
    • \n
  • Improve my use of microformats\n
    • \n
  • Rethink how WebMentions are displayed
    • \n
  • Rethink how user design customizations are provided
    • \n
  • Always improve accessibility where I can
    • \n

I hope to end up with an HTML architecture\nthat feels more minimal –\na blank canvas,\nthat I can treat more like a\nZen Garden\nor\nStyle Stage\nfor my CSS.\nMy early websites\n(back in the 00s)\nall had multiple\n‘alternate stylesheets’\nto choose from,\nand I would love to do that again.

\n

Make RSS a first-class part of the site

\n

While I was working on WebMentions last month,\nI also made major updates to my RSS feed.\nBut I don’t love the way browsers\ndisplay a raw xml file.\nDevelopers may be my biggest audience,\nbut they aren’t my only audience,\nand I want that link to make sense\nand feel like part of the site.

\n

So I looked into it,\nand it seems like I can\nuse XSL and CSS\nto better design and integrate that page\nas a part of the site.

\n

Try out new CSS features (slowly)

\n

It’s been fun\nworking on new CSS features\nwith the CSSWG,\nbut now that those features\n(and more)\nare starting to roll out in browsers\nI want to use them on my site.

\n

Some of features\nare available already,\nor even a few years old.\nThings like\nis() & :where(),\nmin()/max() & clamp(),\nvariable fonts,\ncolor-scheme/accent-color,\nand Cascade Layers.\nSome of those were already\nbeing used in the old design,\nbut this time I get to design around them from the start.

\n

Over the next months and years\nI also hope to start playing with\nsize-based container queries & query units,\nscope,\nsubgrid,\nnew color spaces\n(okLCH/display-P3),\nand more.

\n

I want to take this slow.\nStart simple,\nand build more interesting themes\nas the various features arrive.\nThat means keeping things simple\nfor as long as possible,\nso it’s easy to integrate new ideas\nwithout major rewrites.

\n

Highlight user customizations

\n

As part of the previous design,\nI launched\nCascading Color Systems –\na tool for giving users\ntotal control over the colors on the site.\nThat was inspired by Håkon Lie’s\noriginal 1994 CSS proposal,\nwhich includes the following\ntext-art diagram:

\n
        User            Author\n Font   o-----x--------------o 64%\n Color  o-x------------------o 90%\n Margin o-------------x------o 37%\n Volume o---------x----------o 50%\n
\n

I still want to explore that idea\nof making the site design interactive,\nbut I don’t want to keep relying on\nHSL colors to make it happen.\nFor now, I’ve removed Cascading Colors,\nwhile I rethink the approach.

\n

I’d also like to expose the ways\na CSS design is layered –\nfrom specified initial values,\nuser agent defaults,\nresets, global typography,\nlayouts, components, etc.\nIt’s a cascade!\nWhat if users could turn on and off\nthe various Cascade origins,\nand layers\nto see how the site looks\nat different steps of the process?\nCheck out the Theme Settings below,\nfor a first-draft of the idea.

\nspec\n browser\n reset\n default\n theme\n Try turning CSS layers on and off…\n These settings are also saved in `localStorage`,\n so they persist across visits.\n

This idea is absolutely\ninspired by the personal site of\nNils Binder.\nNils provides a slider from 0 to 865 lines of CSS,\nwith animated transitions between the styles.\nIt’s a lot of fun,\nand I recommend checking it out.

\n

The order of things

\n

My instinct was to strip out all CSS,\nand then work on getting the HTML cleaned up\nwhile my site remains ‘naked’ of style.\nI didn’t quite do that,\nbut I’m aiming for something close.\nHere’s what I’ve done so far:

\n
  • Remove the old CSS (done)
    • \n
  • Begin re-arranging the HTML & Nunjucks templates
    • \n
  • \n@layer reset »\njust the bare minimum needed\nfor HTML tags and attributes to work the way I expect,\nstarting from CSS Remedy.
    • \n
  • \n@layer default »\njust enough colors & typography\nto make the site feel usable to me,\nwithout making decisions about\nhow I’m going to theme it long-term.
    • \n
  • \n@layer theme »\nadds a few site-specific features and opinions\non top of the typographic defaults.
    • \n

The distinction between layers is still fluid,\nas I try to figure out what I’m doing.\nI’ll keep adjusting the reset and default styles as I go,\nbut hope to leave the theme layer\nas minimal as possible,\nwhile I focus on the architectural issues.

\n

For now,\nthe default layer has colors based roughly on Firefox\nCSS System Colors.\nI experimented briefly with using\nthe System Colors directly,\nbut support seems a bit inconsistent,\nand there are additional accessibility considerations\nwith that approach.\nI might revisit in the future.

\n

The theme layer colors\nare based on Named Colors,\nwith some minor adjustments for accessible contrast.\nWhile\ndarkslategray

\n

works fine as a text color\nover\nazure

\n

in light mode,\nI used Sass to darken it\nas a background-color in dark mode,\nproviding enough contrast for my accent colors as well.\nThe result is\nhsl(180deg 25% 6%)\n.

\n

There’s a lot more to do.\nWebMentions are temporarily hidden,\nRSS isn’t highlighted in the nav or styled,\nand all content still looks the same in a list –\nbut I have to start somewhere.\nWe’ll see where it goes (slowly).

\n

Some links I’ve been keeping open while I work

\n

Articles:

\n

Sites:

\n", + "text": "Erin & I had a lovely vacation last month,\ndriving around southwest Colorado –\nBishop Castle, the Great Sand Dunes,\nChimney Rock, the Durango-Silverton Railroad,\nthe (terrifying) Million Dollar Highway,\nthe Black Canyon of the Gunnison,\nand so on.\nIt was absolutely beautiful.\nThis post isn’t about our vacation,\nor any of the amazing places we visited.\nEvery night we would end up in a hotel room,\nwhere we turn on the Food Network\n(back-to-back Diners, Drive-Ins, and Dives)\nor whatever is showing on HGTV.\nNested between extensive house remodeling shows,\nNo Demo Reno starts with the premise\nthat you can make big upgrades to a home\nwithout moving a single wall.\nThis post isn’t about HGTV or home renovations, either.\nI’ve seen a total of two or three episodes\nwhile knitting, winding down,\nand getting ready for bed.\nBut that’s my goal with this site redesign.\nHow much can I change,\nwithout moving any of the walls?\nSome background, and goals\nI’ve had a number of ‘personal’ sites over the years,\nbut landed on this URL in 2015.\nThe first version of this site\nused rstBlog –\na small Python static-site generator\nwithout any documentation.\n\nIn early 2019,\nI migrated from rstBlog\nonto my current Eleventy setup –\na complete overhaul of the site,\ninside and out.\nThe demolition was extensive,\nand I likely\nbroke a few promises.\nThis time\nI plan to leave all the\ncontent and Eleventy infrastructure\nbasically intact.\nHere are the goals:\nClarify the information architecture\nI’ve always found it hard\nto sort my activities\ninto organized ‘categories’,\nso I’ve been treating basically everything\nas an event\nwith the same data, look, and feel.\nSomething happens –\na presentation, performance, album release, novel, article, spec –\non a particular date,\nwith any number of relevant tags.\nI like some things about that –\nembracing the mess of my ADHD life –\nbut I haven’t yet found a great solution\nfor navigating & displaying it.\nPart of the problem is simply that\neverything looks the same.\nIt would help if site visitors\ncan more easily see the different types of content\nreflected in the design and navigation of the site.\nThe previous design also relied heavily\non extra-long ‘calendars’ of content\nat the bottom of every page.\nThat solution felt very bulky to me –\nboth in terms of page-load,\nand user scrolling.\nIt may have been\ntechnically Finite,\nbut it didn’t always feel as finite\n(or as easy to navigate)\nas I’d like.\nClean up the HTML (& Nunjucks)\nTechnical debt often builds up in HTML over time –\nextra wrapping divs, stray classes,\nand other complexities\nthat originate more from style than content.\nIt feels good to clean that out and start fresh.\nSpecifically, I want to:\nSimplify complex Nunjucks templates\nStrip out any HTML that is not absolutely essential\nImprove my use of microformats\n\nRethink how WebMentions are displayed\nRethink how user design customizations are provided\nAlways improve accessibility where I can\nI hope to end up with an HTML architecture\nthat feels more minimal –\na blank canvas,\nthat I can treat more like a\nZen Garden\nor\nStyle Stage\nfor my CSS.\nMy early websites\n(back in the 00s)\nall had multiple\n‘alternate stylesheets’\nto choose from,\nand I would love to do that again.\nMake RSS a first-class part of the site\nWhile I was working on WebMentions last month,\nI also made major updates to my RSS feed.\nBut I don’t love the way browsers\ndisplay a raw xml file.\nDevelopers may be my biggest audience,\nbut they aren’t my only audience,\nand I want that link to make sense\nand feel like part of the site.\nSo I looked into it,\nand it seems like I can\nuse XSL and CSS\nto better design and integrate that page\nas a part of the site.\nTry out new CSS features (slowly)\nIt’s been fun\nworking on new CSS features\nwith the CSSWG,\nbut now that those features\n(and more)\nare starting to roll out in browsers\nI want to use them on my site.\nSome of features\nare available already,\nor even a few years old.\nThings like\nis() & :where(),\nmin()/max() & clamp(),\nvariable fonts,\ncolor-scheme/accent-color,\nand Cascade Layers.\nSome of those were already\nbeing used in the old design,\nbut this time I get to design around them from the start.\nOver the next months and years\nI also hope to start playing with\nsize-based container queries & query units,\nscope,\nsubgrid,\nnew color spaces\n(okLCH/display-P3),\nand more.\nI want to take this slow.\nStart simple,\nand build more interesting themes\nas the various features arrive.\nThat means keeping things simple\nfor as long as possible,\nso it’s easy to integrate new ideas\nwithout major rewrites.\nHighlight user customizations\nAs part of the previous design,\nI launched\nCascading Color Systems –\na tool for giving users\ntotal control over the colors on the site.\nThat was inspired by Håkon Lie’s\noriginal 1994 CSS proposal,\nwhich includes the following\ntext-art diagram:\n User Author\n Font o-----x--------------o 64%\n Color o-x------------------o 90%\n Margin o-------------x------o 37%\n Volume o---------x----------o 50%\n\nI still want to explore that idea\nof making the site design interactive,\nbut I don’t want to keep relying on\nHSL colors to make it happen.\nFor now, I’ve removed Cascading Colors,\nwhile I rethink the approach.\nI’d also like to expose the ways\na CSS design is layered –\nfrom specified initial values,\nuser agent defaults,\nresets, global typography,\nlayouts, components, etc.\nIt’s a cascade!\nWhat if users could turn on and off\nthe various Cascade origins,\nand layers\nto see how the site looks\nat different steps of the process?\nCheck out the Theme Settings below,\nfor a first-draft of the idea.\nspec\n browser\n reset\n default\n theme\n Try turning CSS layers on and off…\n These settings are also saved in `localStorage`,\n so they persist across visits.\nThis idea is absolutely\ninspired by the personal site of\nNils Binder.\nNils provides a slider from 0 to 865 lines of CSS,\nwith animated transitions between the styles.\nIt’s a lot of fun,\nand I recommend checking it out.\nThe order of things\nMy instinct was to strip out all CSS,\nand then work on getting the HTML cleaned up\nwhile my site remains ‘naked’ of style.\nI didn’t quite do that,\nbut I’m aiming for something close.\nHere’s what I’ve done so far:\nRemove the old CSS (done)\nBegin re-arranging the HTML & Nunjucks templates\n\n@layer reset »\njust the bare minimum needed\nfor HTML tags and attributes to work the way I expect,\nstarting from CSS Remedy.\n\n@layer default »\njust enough colors & typography\nto make the site feel usable to me,\nwithout making decisions about\nhow I’m going to theme it long-term.\n\n@layer theme »\nadds a few site-specific features and opinions\non top of the typographic defaults.\nThe distinction between layers is still fluid,\nas I try to figure out what I’m doing.\nI’ll keep adjusting the reset and default styles as I go,\nbut hope to leave the theme layer\nas minimal as possible,\nwhile I focus on the architectural issues.\nFor now,\nthe default layer has colors based roughly on Firefox\nCSS System Colors.\nI experimented briefly with using\nthe System Colors directly,\nbut support seems a bit inconsistent,\nand there are additional accessibility considerations\nwith that approach.\nI might revisit in the future.\nThe theme layer colors\nare based on Named Colors,\nwith some minor adjustments for accessible contrast.\nWhile\ndarkslategray\nworks fine as a text color\nover\nazure\nin light mode,\nI used Sass to darken it\nas a background-color in dark mode,\nproviding enough contrast for my accent colors as well.\nThe result is\nhsl(180deg 25% 6%)\n.\nThere’s a lot more to do.\nWebMentions are temporarily hidden,\nRSS isn’t highlighted in the nav or styled,\nand all content still looks the same in a list –\nbut I have to start somewhere.\nWe’ll see where it goes (slowly).\nSome links I’ve been keeping open while I work\nArticles:\n\nThe Smallest CSS\nby Robin Rendle\n\n\nStyle with Stateful, Semantic Selectors\nby Ben Myers (with links to several others)\n\nBeginning to Style Your RSS Feed\nby Jon Christopher\n\nSites:\n\ntink\n(Léonie did a lovely redesign recently, with tags for navigation)\nIndieWebify.Me\nmicroformats\nHumane by Design\nSorted Colors\nContrast Ratio" + }, + "mention-of": "https://www.oddbird.net/cascading-colors/", + "wm-property": "mention-of", + "wm-private": false + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "Jakub T. Jankiewicz 🐦", + "photo": "https://webmention.io/avatar/pbs.twimg.com/e024762468f8aea5b4a49047615f03921be43d67aed4e39d7a9c2f44463c6bcb.jpg", + "url": "https://twitter.com/jcubic" + }, + "url": "https://twitter.com/jcubic/status/1555160949471985664", + "published": "2022-08-04T11:57:18+00:00", + "wm-received": "2022-08-04T12:09:51Z", + "wm-id": 1450602, + "wm-source": "https://brid.gy/comment/twitter/TerribleMia/1554897256611995653/1555160949471985664", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "content": { + "html": "One that gave me trouble was CSS Animation.\n\n0 { }\n\nThis is was the output of one CSS minifier, I need to add % by hand (shell script after minification).\n\n\n\n", + "text": "One that gave me trouble was CSS Animation.\n\n0 { }\n\nThis is was the output of one CSS minifier, I need to add % by hand (shell script after minification)." + }, + "in-reply-to": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "in-reply-to", + "wm-private": false + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "T. Afif @ CSS Challenges", + "photo": "https://webmention.io/avatar/pbs.twimg.com/52104894ba58cf8c84a281f07f7cbd3fa7b290bd6a1e5ff99d2108d28c060fea.jpg", + "url": "https://twitter.com/ChallengesCss" + }, + "url": "https://twitter.com/ChallengesCss/status/1555162029207523328", + "published": "2022-08-04T12:01:35+00:00", + "wm-received": "2022-08-04T12:09:51Z", + "wm-id": 1450603, + "wm-source": "https://brid.gy/comment/twitter/TerribleMia/1554897256611995653/1555162029207523328", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "content": { + "html": "You have to stop using that minifier or report a bug. If a minifier is automatically converting all the 0% to 0 then it's a big red flag.\n\n\n\n", + "text": "You have to stop using that minifier or report a bug. If a minifier is automatically converting all the 0% to 0 then it's a big red flag." + }, + "in-reply-to": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "in-reply-to", + "wm-private": false + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "Mia", + "photo": "https://webmention.io/avatar/pbs.twimg.com/31fcfd6282b72379bdececa7d23a188489aa4cf4f63f576928d87f6a3df9064b.jpg", + "url": "https://twitter.com/TerribleMia" + }, + "url": "https://twitter.com/TerribleMia/status/1554965772325232641", + "published": "2022-08-03T23:01:44+00:00", + "wm-received": "2022-08-04T00:03:38Z", + "wm-id": 1450259, + "wm-source": "https://brid.gy/comment/twitter/TerribleMia/1554897256611995653/1554965772325232641", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "content": { + "html": "interesting. wonder if it's specced that way intentionally, or just a quirk?\n\ni also gloss over the fact that percentages are not technically 'lengths' in css - they resolve separately - but many syntaxes accept them interchangeably.\n\n", + "text": "interesting. wonder if it's specced that way intentionally, or just a quirk?\n\ni also gloss over the fact that percentages are not technically 'lengths' in css - they resolve separately - but many syntaxes accept them interchangeably." + }, + "in-reply-to": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "in-reply-to", + "wm-private": false + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "T. Afif @ CSS Challenges", + "photo": "https://webmention.io/avatar/pbs.twimg.com/52104894ba58cf8c84a281f07f7cbd3fa7b290bd6a1e5ff99d2108d28c060fea.jpg", + "url": "https://twitter.com/ChallengesCss" + }, + "url": "https://twitter.com/ChallengesCss/status/1554961425914908672", + "published": "2022-08-03T22:44:28+00:00", + "wm-received": "2022-08-04T00:03:37Z", + "wm-id": 1450257, + "wm-source": "https://brid.gy/comment/twitter/TerribleMia/1554897256611995653/1554961425914908672", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "content": { + "html": "I would like to add a small note that 0 is the same as 0px but not always the same as 0% (even if used outside calc()).\n\nI remember dealing with this little quirk in different places (one I just found: stackoverflow.com/a/54012225/862…) \n\na demo to illustrate: codepen.io/t_afif/pen/XWE…\n\n\n\n", + "text": "I would like to add a small note that 0 is the same as 0px but not always the same as 0% (even if used outside calc()).\n\nI remember dealing with this little quirk in different places (one I just found: stackoverflow.com/a/54012225/862…) \n\na demo to illustrate: codepen.io/t_afif/pen/XWE…" + }, + "in-reply-to": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "in-reply-to", + "wm-private": false + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "T. Afif @ CSS Challenges", + "photo": "https://webmention.io/avatar/pbs.twimg.com/52104894ba58cf8c84a281f07f7cbd3fa7b290bd6a1e5ff99d2108d28c060fea.jpg", + "url": "https://twitter.com/ChallengesCss" + }, + "url": "https://twitter.com/ChallengesCss/status/1554967374566244352", + "published": "2022-08-03T23:08:06+00:00", + "wm-received": "2022-08-04T00:03:37Z", + "wm-id": 1450258, + "wm-source": "https://brid.gy/comment/twitter/TerribleMia/1554897256611995653/1554967374566244352", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "content": { + "html": "Yes it's intentional and the behavior is correct based on the Spec (I am explaining it in the linked Stack Overflow question)\n\nIt's related to \"cyclic percentage\" where the container size depend on the child size and child size depend on the container size as well\n\n\n", + "text": "Yes it's intentional and the behavior is correct based on the Spec (I am explaining it in the linked Stack Overflow question)\n\nIt's related to \"cyclic percentage\" where the container size depend on the child size and child size depend on the container size as well" + }, + "in-reply-to": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "in-reply-to", + "wm-private": false + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "T. Afif @ CSS Challenges", + "photo": "https://webmention.io/avatar/pbs.twimg.com/52104894ba58cf8c84a281f07f7cbd3fa7b290bd6a1e5ff99d2108d28c060fea.jpg", + "url": "https://twitter.com/ChallengesCss" + }, + "url": "https://twitter.com/ChallengesCss/status/1554918933752324096", + "published": "2022-08-03T19:55:37+00:00", + "wm-received": "2022-08-03T20:22:12Z", + "wm-id": 1450088, + "wm-source": "https://brid.gy/comment/twitter/TerribleMia/1554897256611995653/1554918933752324096", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "content": { + "html": "Can't agree more! and I can confirm (based on the Stack Overflow questions I see regularly) that many new developers struggle with that \"0\" inside calc()/min()/max() that make everything invalid. 😩\n\n\n", + "text": "Can't agree more! and I can confirm (based on the Stack Overflow questions I see regularly) that many new developers struggle with that \"0\" inside calc()/min()/max() that make everything invalid. 😩" + }, + "in-reply-to": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "in-reply-to", + "wm-private": false + }, { "type": "entry", "author": { diff --git a/src/scss/config/color/_ccs-defaults.scss b/src/scss/config/color/_ccs-defaults.scss index 57da77b79..7c06e24de 100644 --- a/src/scss/config/color/_ccs-defaults.scss +++ b/src/scss/config/color/_ccs-defaults.scss @@ -5,7 +5,6 @@ /// @colors ccs-colors /// @group config-color -/* stylelint-disable-next-line scss/dollar-variable-pattern */ $ccs-neutral--theme: var(--ccs-h--prime); $ccs-background: var(--bg); $ccs-color: var(--text); From 4ea9c73d6fa923d44b7dca90d158c6ea4c88246a Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 9 Aug 2022 15:32:32 -0400 Subject: [PATCH 18/26] fix font --- src/mentions/webmentions.json | 2 +- src/scss/config/_fonts.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mentions/webmentions.json b/src/mentions/webmentions.json index 7e4c9bb07..a30dc0952 100644 --- a/src/mentions/webmentions.json +++ b/src/mentions/webmentions.json @@ -1,5 +1,5 @@ { - "lastFetched": "2022-08-09T17:33:57.333Z", + "lastFetched": "2022-08-09T19:27:00.882Z", "children": [ { "type": "entry", diff --git a/src/scss/config/_fonts.scss b/src/scss/config/_fonts.scss index 27a745238..420e17ebc 100644 --- a/src/scss/config/_fonts.scss +++ b/src/scss/config/_fonts.scss @@ -67,7 +67,7 @@ $alt-font: ( /// @link https://www.oddbird.net/accoutrement/docs/type.html /// Accoutrement Type $code-font: ( - 'name': 'SourceCodePro', + 'name': 'source-code-pro', 'stack': ( 'Consolas', 'Menlo', From 035adff181cc69bc75f849527742b125b51e461e Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 9 Aug 2022 14:56:45 -0500 Subject: [PATCH 19/26] compiled webmention timestamp? --- src/mentions/webmentions.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mentions/webmentions.json b/src/mentions/webmentions.json index a30dc0952..884640324 100644 --- a/src/mentions/webmentions.json +++ b/src/mentions/webmentions.json @@ -1,5 +1,5 @@ { - "lastFetched": "2022-08-09T19:27:00.882Z", + "lastFetched": "2022-08-09T19:56:15.659Z", "children": [ { "type": "entry", From e80092af12c9c306dab67765bcc28dd97814b3e1 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 9 Aug 2022 14:57:49 -0500 Subject: [PATCH 20/26] add another @group init-colors to control order of heading and example --- src/scss/initial/_colors.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index 5c3fda711..317f5e68d 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -19,6 +19,8 @@ /// Accoutrement Variables /// @link https://www.oddbird.net/cascading-colors/ /// Cascading Color Systems +/// @group init-colors + /// @group init-colors [data-ccs-colors] { @include config.colors--; From 603831817691245c3cbc7be0fd21810f403c4fbf Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 9 Aug 2022 14:58:03 -0500 Subject: [PATCH 21/26] linted on save --- src/scss/initial/_colors.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index 317f5e68d..8b91e8acd 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -1,7 +1,6 @@ @use 'sass:meta'; @use '../config'; -@use '~cascading-color-systems' as ccs with ( - $hues: config.ccs('hues'), +@use '~cascading-color-systems' as ccs with ($hues: config.ccs('hues'), $saturation: config.ccs('saturation'), $contrast: config.ccs('contrast'), $steps: config.ccs('steps'), @@ -9,8 +8,7 @@ $fade-background: config.ccs('fade-background'), $neutral-saturation: config.ccs('neutral-saturation'), $build: true, - $gradients: true -); + $gradients: true); /// # CSS Color Variables /// Generate CSS variables from configuration colors, From 87274424b8c1f8fb6a98772badc1d120d09f2a9c Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 9 Aug 2022 16:00:32 -0400 Subject: [PATCH 22/26] lint --- src/scss/initial/_colors.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/scss/initial/_colors.scss b/src/scss/initial/_colors.scss index 8b91e8acd..317f5e68d 100644 --- a/src/scss/initial/_colors.scss +++ b/src/scss/initial/_colors.scss @@ -1,6 +1,7 @@ @use 'sass:meta'; @use '../config'; -@use '~cascading-color-systems' as ccs with ($hues: config.ccs('hues'), +@use '~cascading-color-systems' as ccs with ( + $hues: config.ccs('hues'), $saturation: config.ccs('saturation'), $contrast: config.ccs('contrast'), $steps: config.ccs('steps'), @@ -8,7 +9,8 @@ $fade-background: config.ccs('fade-background'), $neutral-saturation: config.ccs('neutral-saturation'), $build: true, - $gradients: true); + $gradients: true +); /// # CSS Color Variables /// Generate CSS variables from configuration colors, From 2ab4196d20e78de07f0b5e868648d59fd26b7d0e Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Wed, 10 Aug 2022 10:12:38 -0600 Subject: [PATCH 23/26] Show content-color names/values in herman example --- src/scss/config/color/_content.scss | 9 --------- src/scss/config/color/_index.scss | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/scss/config/color/_content.scss b/src/scss/config/color/_content.scss index abae024b9..0e7f26e83 100644 --- a/src/scss/config/color/_content.scss +++ b/src/scss/config/color/_content.scss @@ -1,12 +1,3 @@ -/// ## Content Colors -/// -------------- -/// Rather than using the brand colors directly, -/// we use them to set default values for generated variables. -/// This provides a mapping between semantic foreground use-cases, -/// and automatically-generated color variables. -/// @colors content-colors -/// @group config-color - $text: var(--ccs-neutral--fg-full); $text-light: var(--ccs-neutral--fg3); $accent: var(--ccs-accent--fg1); diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index 4b7f6490a..1e79b755b 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -25,6 +25,21 @@ tools.compile-colors(meta.module-variables('ccs-defaults')) ); +/// ## Content Colors +/// -------------- +/// Rather than using the brand colors directly, +/// we use them to set default values for generated variables. +/// This provides a mapping between semantic foreground use-cases, +/// and automatically-generated color variables. +/// @group config-color +/// @example scss +/// @use 'config/color/content'; +/// @use 'config/tools'; +/// @use 'sass:meta'; +/// +/// @each $name, $color in tools.compile-colors(meta.module-variables('content')) { +/// /*! #{$name}: #{$color}; */ +/// } @include herman.add( 'colors', 'content-colors', From 5d9427a203750928d5549b5b1da254c3c5269bcf Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Thu, 11 Aug 2022 12:59:50 -0500 Subject: [PATCH 24/26] allow herman to show color values for now instead of previews --- src/mentions/webmentions.json | 59 +++++++++++++++++++++++- src/scss/config/color/_background.scss | 9 ---- src/scss/config/color/_ccs-defaults.scss | 7 --- src/scss/config/color/_config.scss | 8 ++-- src/scss/config/color/_index.scss | 30 +++++++++++- 5 files changed, 91 insertions(+), 22 deletions(-) diff --git a/src/mentions/webmentions.json b/src/mentions/webmentions.json index 884640324..e7fc9e8b0 100644 --- a/src/mentions/webmentions.json +++ b/src/mentions/webmentions.json @@ -1,6 +1,63 @@ { - "lastFetched": "2022-08-09T19:56:15.659Z", + "lastFetched": "2022-08-11T17:58:48.193Z", "children": [ + { + "type": "entry", + "author": { + "type": "card", + "name": "", + "photo": "", + "url": "" + }, + "url": "https://thedevnews.com/situation-516/", + "published": null, + "wm-received": "2022-08-11T16:28:45Z", + "wm-id": 1456238, + "wm-source": "https://thedevnews.com/situation-516/", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/?utm_source=CSS-Weekly&utm_campaign=Issue-516&utm_medium=RSS", + "mention-of": "https://www.oddbird.net/2022/08/04/zero-units/?utm_source=CSS-Weekly&utm_campaign=Issue-516&utm_medium=RSS", + "wm-property": "mention-of", + "wm-private": false, + "rels": { + "canonical": "https://thedevnews.com/situation-516/" + } + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "", + "photo": "", + "url": "" + }, + "url": "https://pwsngr.com/collective-724/", + "published": null, + "wm-received": "2022-08-11T13:34:39Z", + "wm-id": 1456113, + "wm-source": "https://pwsngr.com/collective-724/", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "mention-of": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "mention-of", + "wm-private": false + }, + { + "type": "entry", + "author": { + "type": "card", + "name": "", + "photo": "", + "url": "" + }, + "url": "https://easycreateawebsite.com/not-all-zeros-are-equal/", + "published": null, + "wm-received": "2022-08-10T13:47:25Z", + "wm-id": 1455333, + "wm-source": "https://easycreateawebsite.com/not-all-zeros-are-equal/", + "wm-target": "https://www.oddbird.net/2022/08/04/zero-units/", + "mention-of": "https://www.oddbird.net/2022/08/04/zero-units/", + "wm-property": "mention-of", + "wm-private": false + }, { "type": "entry", "author": { diff --git a/src/scss/config/color/_background.scss b/src/scss/config/color/_background.scss index d71fcdbe7..3a2f82d6a 100644 --- a/src/scss/config/color/_background.scss +++ b/src/scss/config/color/_background.scss @@ -1,12 +1,3 @@ -/// ## Background Colors -/// ----------------- -/// Rather than using the brand colors directly, -/// we use them to set default values for generated variables. -/// This provides a mapping between semantic background use-cases, -/// and automatically-generated color variables. -/// @colors background-colors -/// @group config-color - $bg: var(--ccs-neutral--bg-full); $bg-full: var(--ccs--bg-full); $callout: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5)); diff --git a/src/scss/config/color/_ccs-defaults.scss b/src/scss/config/color/_ccs-defaults.scss index 7c06e24de..32a201dcb 100644 --- a/src/scss/config/color/_ccs-defaults.scss +++ b/src/scss/config/color/_ccs-defaults.scss @@ -1,10 +1,3 @@ -/// ## CCS Defaults -/// ------------ -/// The Cascading Color System has a few settings -/// that we can most easily override with CSS variables -/// @colors ccs-colors -/// @group config-color - $ccs-neutral--theme: var(--ccs-h--prime); $ccs-background: var(--bg); $ccs-color: var(--text); diff --git a/src/scss/config/color/_config.scss b/src/scss/config/color/_config.scss index 20998a68c..02e4d7922 100644 --- a/src/scss/config/color/_config.scss +++ b/src/scss/config/color/_config.scss @@ -6,7 +6,7 @@ @use 'brand'; /// # Color Config -/// ----------------- +/// -------------- /// Accoutrement maps for storing global color tokens, /// and settings for generating color variables. /// @link https://www.oddbird.net/accoutrement/docs/color.html @@ -16,7 +16,7 @@ /// @group config-color /// ## Brand Hues -/// ---------- +/// ------------- /// Hue values taken from the brand colors, /// for easy access in the CCS settings. /// @type map @@ -30,7 +30,7 @@ $_hues: ( ); /// ## CCS Settings -/// ------------ +/// --------------- /// Settings for generating color variables. /// This map is marked private to encourage access /// through the `ccs()` function. @@ -52,7 +52,7 @@ $_ccs: ( ); /// ## CCS "Get" Function -/// ------------------ +/// --------------------- /// Get settings from the `$ccs` configuration map. /// @param {string} $token - /// Name of a token key in the `$ccs` map. diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index 1e79b755b..5e5489d91 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -13,12 +13,40 @@ tools.compile-colors(meta.module-variables('brand')) ); +/// ## Background Colors +/// -------------------- +/// Rather than using the brand colors directly, +/// we use them to set default values for generated variables. +/// This provides a mapping between semantic background use-cases, +/// and automatically-generated color variables. +/// @group config-color +/// @example scss +/// @use 'config/color/background'; +/// @use 'config/tools'; +/// @use 'sass:meta'; +/// +/// @each $name, $color in tools.compile-colors(meta.module-variables('background')) { +/// /*! #{$name}: #{$color}; */ +/// } @include herman.add( 'colors', 'background-colors', tools.compile-colors(meta.module-variables('background')) ); +/// ## CCS Defaults +/// --------------- +/// The Cascading Color System has a few settings +/// that we can most easily override with CSS variables +/// @group config-color +/// @example scss +/// @use 'config/color/ccs-defaults'; +/// @use 'config/tools'; +/// @use 'sass:meta'; +/// +/// @each $name, $color in tools.compile-colors(meta.module-variables('ccs-defaults')) { +/// /*! #{$name}: #{$color}; */ +/// } @include herman.add( 'colors', 'ccs-colors', @@ -26,7 +54,7 @@ ); /// ## Content Colors -/// -------------- +/// ----------------- /// Rather than using the brand colors directly, /// we use them to set default values for generated variables. /// This provides a mapping between semantic foreground use-cases, From 228667a403af7bbf7f22ecf78f70aef50765f0b0 Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Thu, 11 Aug 2022 14:56:19 -0400 Subject: [PATCH 25/26] adjust headings --- src/mentions/webmentions.json | 2 +- src/scss/config/color/_brand.scss | 4 ++-- src/scss/config/color/_config.scss | 16 ++++++++-------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/mentions/webmentions.json b/src/mentions/webmentions.json index e7fc9e8b0..36142ebbe 100644 --- a/src/mentions/webmentions.json +++ b/src/mentions/webmentions.json @@ -1,5 +1,5 @@ { - "lastFetched": "2022-08-11T17:58:48.193Z", + "lastFetched": "2022-08-11T18:54:21.559Z", "children": [ { "type": "entry", diff --git a/src/scss/config/color/_brand.scss b/src/scss/config/color/_brand.scss index 81f5c38bf..9559a130a 100644 --- a/src/scss/config/color/_brand.scss +++ b/src/scss/config/color/_brand.scss @@ -1,5 +1,5 @@ -/// ## Brand Colors -/// ------------ +/// # Brand Colors +/// -------------- /// The brand is defined by our primary brand blue, /// along with secondary pink and orange base colors. /// These colors are rarely used directly, diff --git a/src/scss/config/color/_config.scss b/src/scss/config/color/_config.scss index 02e4d7922..62e62c1a1 100644 --- a/src/scss/config/color/_config.scss +++ b/src/scss/config/color/_config.scss @@ -5,8 +5,8 @@ @use '../tools'; @use 'brand'; -/// # Color Config -/// -------------- +/// ## Color Config +/// --------------- /// Accoutrement maps for storing global color tokens, /// and settings for generating color variables. /// @link https://www.oddbird.net/accoutrement/docs/color.html @@ -15,8 +15,8 @@ /// Cascading Color Systems /// @group config-color -/// ## Brand Hues -/// ------------- +/// ### Brand Hues +/// -------------- /// Hue values taken from the brand colors, /// for easy access in the CCS settings. /// @type map @@ -29,8 +29,8 @@ $_hues: ( 'neutral': null, ); -/// ## CCS Settings -/// --------------- +/// ### CCS Settings +/// ---------------- /// Settings for generating color variables. /// This map is marked private to encourage access /// through the `ccs()` function. @@ -51,8 +51,8 @@ $_ccs: ( 'neutral-saturation': 10%, ); -/// ## CCS "Get" Function -/// --------------------- +/// ### CCS "Get" Function +/// ---------------------- /// Get settings from the `$ccs` configuration map. /// @param {string} $token - /// Name of a token key in the `$ccs` map. From a759111c7196b5ac1b22fcd802143a6320275509 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Thu, 11 Aug 2022 16:38:01 -0500 Subject: [PATCH 26/26] update sass comment sicne we arent compressing our css output --- src/mentions/webmentions.json | 2 +- src/scss/config/color/_index.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/mentions/webmentions.json b/src/mentions/webmentions.json index e7fc9e8b0..687dab682 100644 --- a/src/mentions/webmentions.json +++ b/src/mentions/webmentions.json @@ -1,5 +1,5 @@ { - "lastFetched": "2022-08-11T17:58:48.193Z", + "lastFetched": "2022-08-11T21:34:04.731Z", "children": [ { "type": "entry", diff --git a/src/scss/config/color/_index.scss b/src/scss/config/color/_index.scss index 5e5489d91..8af1d0574 100644 --- a/src/scss/config/color/_index.scss +++ b/src/scss/config/color/_index.scss @@ -26,7 +26,7 @@ /// @use 'sass:meta'; /// /// @each $name, $color in tools.compile-colors(meta.module-variables('background')) { -/// /*! #{$name}: #{$color}; */ +/// /* #{$name}: #{$color}; */ /// } @include herman.add( 'colors', @@ -45,7 +45,7 @@ /// @use 'sass:meta'; /// /// @each $name, $color in tools.compile-colors(meta.module-variables('ccs-defaults')) { -/// /*! #{$name}: #{$color}; */ +/// /* #{$name}: #{$color}; */ /// } @include herman.add( 'colors', @@ -66,7 +66,7 @@ /// @use 'sass:meta'; /// /// @each $name, $color in tools.compile-colors(meta.module-variables('content')) { -/// /*! #{$name}: #{$color}; */ +/// /* #{$name}: #{$color}; */ /// } @include herman.add( 'colors',