fix various errors
This commit is contained in:
parent
9a2908cdaa
commit
20f12af14c
|
@ -1,44 +1,44 @@
|
||||||
:root, [data-theme="default"] {
|
:root, [data-theme="default"] {
|
||||||
/* main */
|
/* main */
|
||||||
@include defineHSL(--color-primary-darker, 220, 90%, 42%); /* hsl(220, 90%, 42%) */
|
@mixin defineHSL --color-primary-darker, 220, 90%, 42%; /* hsl(220, 90%, 42%) */
|
||||||
@include defineHSL(--color-primary-dark, 220, 90%, 49%); /* hsl(220, 90%, 49%) */
|
@mixin defineHSL --color-primary-dark, 220, 90%, 49%; /* hsl(220, 90%, 49%) */
|
||||||
@include defineHSL(--color-primary, 220, 90%, 56%); /* hsl(220, 90%, 56%) */
|
@mixin defineHSL --color-primary, 220, 90%, 56%; /* hsl(220, 90%, 56%) */
|
||||||
@include defineHSL(--color-primary-light, 220, 90%, 63%); /* hsl(220, 90%, 63%) */
|
@mixin 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-lighter, 220, 90%, 70%; /* hsl(220, 90%, 70%) */
|
||||||
|
|
||||||
@include defineHSL(--color-accent-darker, 349, 75%, 36%); /* hsl(349, 75%, 36%) */
|
@mixin defineHSL --color-accent-darker, 349, 75%, 36%; /* hsl(349, 75%, 36%) */
|
||||||
@include defineHSL(--color-accent-dark, 349, 75%, 44%); /* hsl(349, 75%, 44%) */
|
@mixin defineHSL --color-accent-dark, 349, 75%, 44%; /* hsl(349, 75%, 44%) */
|
||||||
@include defineHSL(--color-accent, 349, 75%, 51%); /* hsl(349, 75%, 51%) */
|
@mixin defineHSL --color-accent, 349, 75%, 51%; /* hsl(349, 75%, 51%) */
|
||||||
@include defineHSL(--color-accent-light, 349, 75%, 59%); /* hsl(349, 75%, 59%) */
|
@mixin 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-lighter, 349, 75%, 67%; /* hsl(349, 75%, 67%) */
|
||||||
|
|
||||||
@include defineHSL(--color-black, 240, 8%, 12%); /* hsl(240, 8%, 12%) */
|
@mixin defineHSL --color-black, 240, 8%, 12%; /* hsl(240, 8%, 12%) */
|
||||||
@include defineHSL(--color-white, 0, 0%, 100%); /* hsl(0, 0%, 100%) */
|
@mixin defineHSL --color-white, 0, 0%, 100%; /* hsl(0, 0%, 100%) */
|
||||||
|
|
||||||
/* feedback */
|
/* feedback */
|
||||||
@include defineHSL(--color-warning-darker, 46, 100%, 47%); /* hsl(46, 100%, 47%) */
|
@mixin defineHSL --color-warning-darker, 46, 100%, 47%; /* hsl(46, 100%, 47%) */
|
||||||
@include defineHSL(--color-warning-dark, 46, 100%, 50%); /* hsl(46, 100%, 50%) */
|
@mixin defineHSL --color-warning-dark, 46, 100%, 50%; /* hsl(46, 100%, 50%) */
|
||||||
@include defineHSL(--color-warning, 46, 100%, 61%); /* hsl(46, 100%, 61%) */
|
@mixin defineHSL --color-warning, 46, 100%, 61%; /* hsl(46, 100%, 61%) */
|
||||||
@include defineHSL(--color-warning-light, 46, 100%, 71%); /* hsl(46, 100%, 71%) */
|
@mixin 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-lighter, 46, 100%, 80%; /* hsl(46, 100%, 80%) */
|
||||||
|
|
||||||
@include defineHSL(--color-success-darker, 94, 48%, 42%); /* hsl(94, 48%, 42%) */
|
@mixin defineHSL --color-success-darker, 94, 48%, 42%; /* hsl(94, 48%, 42%) */
|
||||||
@include defineHSL(--color-success-dark, 94, 48%, 48%); /* hsl(94, 48%, 48%) */
|
@mixin defineHSL --color-success-dark, 94, 48%, 48%; /* hsl(94, 48%, 48%) */
|
||||||
@include defineHSL(--color-success, 94, 48%, 56%); /* hsl(94, 48%, 56%) */
|
@mixin defineHSL --color-success, 94, 48%, 56%; /* hsl(94, 48%, 56%) */
|
||||||
@include defineHSL(--color-success-light, 94, 48%, 65%); /* hsl(94, 48%, 65%) */
|
@mixin 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-lighter, 94, 48%, 74%; /* hsl(94, 48%, 74%) */
|
||||||
|
|
||||||
@include defineHSL(--color-error-darker, 349, 75%, 36%); /* hsl(349, 75%, 36%) */
|
@mixin defineHSL --color-error-darker, 349, 75%, 36%; /* hsl(349, 75%, 36%) */
|
||||||
@include defineHSL(--color-error-dark, 349, 75%, 44%); /* hsl(349, 75%, 44%) */
|
@mixin defineHSL --color-error-dark, 349, 75%, 44%; /* hsl(349, 75%, 44%) */
|
||||||
@include defineHSL(--color-error, 349, 75%, 51%); /* hsl(349, 75%, 51%) */
|
@mixin defineHSL --color-error, 349, 75%, 51%; /* hsl(349, 75%, 51%) */
|
||||||
@include defineHSL(--color-error-light, 349, 75%, 59%); /* hsl(349, 75%, 59%) */
|
@mixin 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-lighter, 349, 75%, 67%; /* hsl(349, 75%, 67%) */
|
||||||
|
|
||||||
/* color contrasts */
|
/* color contrasts */
|
||||||
@include defineHSL(--color-bg, 0, 0%, 100%); /* hsl(0, 0%, 100%) */
|
@mixin defineHSL --color-bg, 0, 0%, 100%; /* hsl(0, 0%, 100%) */
|
||||||
@include defineHSL(--color-contrast-lower, 0, 0%, 95%); /* hsl(0, 0%, 95%) */
|
@mixin defineHSL --color-contrast-lower, 0, 0%, 95%; /* hsl(0, 0%, 95%) */
|
||||||
@include defineHSL(--color-contrast-low, 240, 1%, 83%); /* hsl(240, 1%, 83%) */
|
@mixin defineHSL --color-contrast-low, 240, 1%, 83%; /* hsl(240, 1%, 83%) */
|
||||||
@include defineHSL(--color-contrast-medium, 240, 1%, 48%); /* hsl(240, 1%, 48%) */
|
@mixin defineHSL --color-contrast-medium, 240, 1%, 48%; /* hsl(240, 1%, 48%) */
|
||||||
@include defineHSL(--color-contrast-high, 240, 4%, 20%); /* hsl(240, 4%, 20%) */
|
@mixin 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-contrast-higher, 240, 8%, 12%; /* hsl(240, 8%, 12%) */
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import 'colors.css';
|
||||||
|
@import 'reset.css';
|
|
@ -181,7 +181,7 @@ u {
|
||||||
margin-left: calc(50% - 50vw);
|
margin-left: calc(50% - 50vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@mixin breakpoint sm {
|
||||||
.text-component__block--left,
|
.text-component__block--left,
|
||||||
.text-component__block--right {
|
.text-component__block--right {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
|
@ -204,7 +204,7 @@ u {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* outset content */
|
/* outset content */
|
||||||
@include breakpoint(xl) {
|
@mixin breakpoint xl {
|
||||||
.text-component__block--outset {
|
.text-component__block--outset {
|
||||||
width: calc(100% + 10.5 * var(--space-unit));
|
width: calc(100% + 10.5 * var(--space-unit));
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
window.addEventListener('DOMContentLoaded', function(event) {
|
import '../css/main.css';
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
console.log('DOMContentLoaded:', event);
|
console.log('DOMContentLoaded:', event);
|
||||||
});
|
});
|
||||||
|
|
|
@ -10,8 +10,8 @@ const postcssMixins = {
|
||||||
// need to ensure hue is a string otherwise postcss (is it postcss?) appends
|
// need to ensure hue is a string otherwise postcss (is it postcss?) appends
|
||||||
// 'px' to the property's value.
|
// 'px' to the property's value.
|
||||||
obj[`${name}__h`] = hue.toString();
|
obj[`${name}__h`] = hue.toString();
|
||||||
obj[`${name}__s`] = `${sat}%`;
|
obj[`${name}__s`] = `${sat}`;
|
||||||
obj[`${name}__l`] = `${light}%`;
|
obj[`${name}__l`] = `${light}`;
|
||||||
return obj;
|
return obj;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -19,13 +19,13 @@ const postcssMixins = {
|
||||||
// saturation and lightness components
|
// saturation and lightness components
|
||||||
defineHex(mixin, name, hex) {
|
defineHex(mixin, name, hex) {
|
||||||
const [hue, sat, light] = toHSL(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
|
// TODO - untested
|
||||||
|
@ -34,8 +34,8 @@ const postcssMixins = {
|
||||||
return {
|
return {
|
||||||
'-webkit-font-smoothing': 'antialiased',
|
'-webkit-font-smoothing': 'antialiased',
|
||||||
'-moz-osx-font-smoothing': 'grayscale',
|
'-moz-osx-font-smoothing': 'grayscale',
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
module.exports = postcssMixins;
|
module.exports = postcssMixins;
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
TODO
|
// TODO
|
||||||
|
|
Loading…
Reference in New Issue