From 20f12af14cbd4c4fa67b87ee29a2fee8632fe424 Mon Sep 17 00:00:00 2001 From: ray Date: Wed, 17 Feb 2021 22:21:21 +0000 Subject: [PATCH] fix various errors --- src/css/colors.css | 66 +++++++++++++++++++++--------------------- src/css/main.css | 2 ++ src/css/typography.css | 4 +-- src/css/variables.css | 4 +-- src/js/index.js | 6 ++-- src/postcss/mixins.js | 24 +++++++-------- src/sass/main.scss | 2 +- 7 files changed, 56 insertions(+), 52 deletions(-) diff --git a/src/css/colors.css b/src/css/colors.css index 49d130d..4eda946 100644 --- a/src/css/colors.css +++ b/src/css/colors.css @@ -1,44 +1,44 @@ :root, [data-theme="default"] { /* main */ - @include defineHSL(--color-primary-darker, 220, 90%, 42%); /* hsl(220, 90%, 42%) */ - @include defineHSL(--color-primary-dark, 220, 90%, 49%); /* hsl(220, 90%, 49%) */ - @include defineHSL(--color-primary, 220, 90%, 56%); /* hsl(220, 90%, 56%) */ - @include defineHSL(--color-primary-light, 220, 90%, 63%); /* hsl(220, 90%, 63%) */ - @include defineHSL(--color-primary-lighter, 220, 90%, 70%); /* hsl(220, 90%, 70%) */ + @mixin defineHSL --color-primary-darker, 220, 90%, 42%; /* hsl(220, 90%, 42%) */ + @mixin defineHSL --color-primary-dark, 220, 90%, 49%; /* hsl(220, 90%, 49%) */ + @mixin defineHSL --color-primary, 220, 90%, 56%; /* hsl(220, 90%, 56%) */ + @mixin defineHSL --color-primary-light, 220, 90%, 63%; /* hsl(220, 90%, 63%) */ + @mixin defineHSL --color-primary-lighter, 220, 90%, 70%; /* hsl(220, 90%, 70%) */ - @include defineHSL(--color-accent-darker, 349, 75%, 36%); /* hsl(349, 75%, 36%) */ - @include defineHSL(--color-accent-dark, 349, 75%, 44%); /* hsl(349, 75%, 44%) */ - @include defineHSL(--color-accent, 349, 75%, 51%); /* hsl(349, 75%, 51%) */ - @include defineHSL(--color-accent-light, 349, 75%, 59%); /* hsl(349, 75%, 59%) */ - @include defineHSL(--color-accent-lighter, 349, 75%, 67%); /* hsl(349, 75%, 67%) */ + @mixin defineHSL --color-accent-darker, 349, 75%, 36%; /* hsl(349, 75%, 36%) */ + @mixin defineHSL --color-accent-dark, 349, 75%, 44%; /* hsl(349, 75%, 44%) */ + @mixin defineHSL --color-accent, 349, 75%, 51%; /* hsl(349, 75%, 51%) */ + @mixin defineHSL --color-accent-light, 349, 75%, 59%; /* hsl(349, 75%, 59%) */ + @mixin defineHSL --color-accent-lighter, 349, 75%, 67%; /* hsl(349, 75%, 67%) */ - @include defineHSL(--color-black, 240, 8%, 12%); /* hsl(240, 8%, 12%) */ - @include defineHSL(--color-white, 0, 0%, 100%); /* hsl(0, 0%, 100%) */ + @mixin defineHSL --color-black, 240, 8%, 12%; /* hsl(240, 8%, 12%) */ + @mixin defineHSL --color-white, 0, 0%, 100%; /* hsl(0, 0%, 100%) */ /* feedback */ - @include defineHSL(--color-warning-darker, 46, 100%, 47%); /* hsl(46, 100%, 47%) */ - @include defineHSL(--color-warning-dark, 46, 100%, 50%); /* hsl(46, 100%, 50%) */ - @include defineHSL(--color-warning, 46, 100%, 61%); /* hsl(46, 100%, 61%) */ - @include defineHSL(--color-warning-light, 46, 100%, 71%); /* hsl(46, 100%, 71%) */ - @include defineHSL(--color-warning-lighter, 46, 100%, 80%); /* hsl(46, 100%, 80%) */ + @mixin defineHSL --color-warning-darker, 46, 100%, 47%; /* hsl(46, 100%, 47%) */ + @mixin defineHSL --color-warning-dark, 46, 100%, 50%; /* hsl(46, 100%, 50%) */ + @mixin defineHSL --color-warning, 46, 100%, 61%; /* hsl(46, 100%, 61%) */ + @mixin defineHSL --color-warning-light, 46, 100%, 71%; /* hsl(46, 100%, 71%) */ + @mixin defineHSL --color-warning-lighter, 46, 100%, 80%; /* hsl(46, 100%, 80%) */ - @include defineHSL(--color-success-darker, 94, 48%, 42%); /* hsl(94, 48%, 42%) */ - @include defineHSL(--color-success-dark, 94, 48%, 48%); /* hsl(94, 48%, 48%) */ - @include defineHSL(--color-success, 94, 48%, 56%); /* hsl(94, 48%, 56%) */ - @include defineHSL(--color-success-light, 94, 48%, 65%); /* hsl(94, 48%, 65%) */ - @include defineHSL(--color-success-lighter, 94, 48%, 74%); /* hsl(94, 48%, 74%) */ + @mixin defineHSL --color-success-darker, 94, 48%, 42%; /* hsl(94, 48%, 42%) */ + @mixin defineHSL --color-success-dark, 94, 48%, 48%; /* hsl(94, 48%, 48%) */ + @mixin defineHSL --color-success, 94, 48%, 56%; /* hsl(94, 48%, 56%) */ + @mixin defineHSL --color-success-light, 94, 48%, 65%; /* hsl(94, 48%, 65%) */ + @mixin defineHSL --color-success-lighter, 94, 48%, 74%; /* hsl(94, 48%, 74%) */ - @include defineHSL(--color-error-darker, 349, 75%, 36%); /* hsl(349, 75%, 36%) */ - @include defineHSL(--color-error-dark, 349, 75%, 44%); /* hsl(349, 75%, 44%) */ - @include defineHSL(--color-error, 349, 75%, 51%); /* hsl(349, 75%, 51%) */ - @include defineHSL(--color-error-light, 349, 75%, 59%); /* hsl(349, 75%, 59%) */ - @include defineHSL(--color-error-lighter, 349, 75%, 67%); /* hsl(349, 75%, 67%) */ + @mixin defineHSL --color-error-darker, 349, 75%, 36%; /* hsl(349, 75%, 36%) */ + @mixin defineHSL --color-error-dark, 349, 75%, 44%; /* hsl(349, 75%, 44%) */ + @mixin defineHSL --color-error, 349, 75%, 51%; /* hsl(349, 75%, 51%) */ + @mixin defineHSL --color-error-light, 349, 75%, 59%; /* hsl(349, 75%, 59%) */ + @mixin defineHSL --color-error-lighter, 349, 75%, 67%; /* hsl(349, 75%, 67%) */ /* color contrasts */ - @include defineHSL(--color-bg, 0, 0%, 100%); /* hsl(0, 0%, 100%) */ - @include defineHSL(--color-contrast-lower, 0, 0%, 95%); /* hsl(0, 0%, 95%) */ - @include defineHSL(--color-contrast-low, 240, 1%, 83%); /* hsl(240, 1%, 83%) */ - @include defineHSL(--color-contrast-medium, 240, 1%, 48%); /* hsl(240, 1%, 48%) */ - @include defineHSL(--color-contrast-high, 240, 4%, 20%); /* hsl(240, 4%, 20%) */ - @include defineHSL(--color-contrast-higher, 240, 8%, 12%); /* hsl(240, 8%, 12%) */ + @mixin defineHSL --color-bg, 0, 0%, 100%; /* hsl(0, 0%, 100%) */ + @mixin defineHSL --color-contrast-lower, 0, 0%, 95%; /* hsl(0, 0%, 95%) */ + @mixin defineHSL --color-contrast-low, 240, 1%, 83%; /* hsl(240, 1%, 83%) */ + @mixin defineHSL --color-contrast-medium, 240, 1%, 48%; /* hsl(240, 1%, 48%) */ + @mixin defineHSL --color-contrast-high, 240, 4%, 20%; /* hsl(240, 4%, 20%) */ + @mixin defineHSL --color-contrast-higher, 240, 8%, 12%; /* hsl(240, 8%, 12%) */ } diff --git a/src/css/main.css b/src/css/main.css index e69de29..54f179a 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -0,0 +1,2 @@ +@import 'colors.css'; +@import 'reset.css'; diff --git a/src/css/typography.css b/src/css/typography.css index 3693d89..ad28f8a 100644 --- a/src/css/typography.css +++ b/src/css/typography.css @@ -181,7 +181,7 @@ u { margin-left: calc(50% - 50vw); } -@include breakpoint(sm) { +@mixin breakpoint sm { .text-component__block--left, .text-component__block--right { width: 45%; @@ -204,7 +204,7 @@ u { } /* outset content */ -@include breakpoint(xl) { +@mixin breakpoint xl { .text-component__block--outset { width: calc(100% + 10.5 * var(--space-unit)); } diff --git a/src/css/variables.css b/src/css/variables.css index 9e430c1..986a8f6 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -6,9 +6,9 @@ --zindex-overlay: 15; /* e.g., modals and dialogs */ /*radius */ - --radius-sm: calc(var(--radius, 0.25em)/2); + --radius-sm: calc(var(--radius, 0.25em) / 2); --radius-md: var(--radius, 0.25em); - --radius-lg: calc(var(--radius, 0.25em)*2); + --radius-lg: calc(var(--radius, 0.25em) * 2); /*box shadow */ --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), diff --git a/src/js/index.js b/src/js/index.js index fcb8a81..56ecdd2 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,3 +1,5 @@ -window.addEventListener('DOMContentLoaded', function(event) { - console.log('DOMContentLoaded:', event); +import '../css/main.css'; + +window.addEventListener('DOMContentLoaded', (event) => { + console.log('DOMContentLoaded:', event); }); diff --git a/src/postcss/mixins.js b/src/postcss/mixins.js index 347baa4..4e48af5 100644 --- a/src/postcss/mixins.js +++ b/src/postcss/mixins.js @@ -6,26 +6,26 @@ const postcssMixins = { // TODO - untest defineHSL(mixin, name, hue, sat, light) { const obj = {}; - obj[name] = name; - // need to ensure hue is a string otherwise postcss (is it postcss?) appends - // 'px' to the property's value. - obj[`${name}__h`] = hue.toString(); - obj[`${name}__s`] = `${sat}%`; - obj[`${name}__l`] = `${light}%`; - return obj; + obj[name] = name; + // need to ensure hue is a string otherwise postcss (is it postcss?) appends + // 'px' to the property's value. + obj[`${name}__h`] = hue.toString(); + obj[`${name}__s`] = `${sat}`; + obj[`${name}__l`] = `${light}`; + return obj; }, // defines a custom property with identifier name, along with individual hue, // saturation and lightness components defineHex(mixin, name, hex) { const [hue, sat, light] = toHSL(hex); - return defineHSL(name, hue, sat, light) + return defineHSL(name, hue, sat, light); }, - bpMin(mixin, ) { + bpMin(mixin) { }, - bpMax(mixin, ) { + bpMax(mixin) { }, // TODO - untested @@ -34,8 +34,8 @@ const postcssMixins = { return { '-webkit-font-smoothing': 'antialiased', '-moz-osx-font-smoothing': 'grayscale', - } + }; }, -} +}; module.exports = postcssMixins; diff --git a/src/sass/main.scss b/src/sass/main.scss index 1333ed7..70b786d 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1 +1 @@ -TODO +// TODO