rayelliott
/
css-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix various errors

This commit is contained in:
Ray Elliott 2021-02-17 22:21:21 +00:00
parent 9a2908cdaa
commit 20f12af14c
7 changed files with 56 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/css/colors.css
View File

@ -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%) */
}

2
src/css/main.css
View File

@ -0,0 +1,2 @@
@import 'colors.css';
@import 'reset.css';

4
src/css/typography.css
View File

@ -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));
}

4
src/css/variables.css
View File

@ -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),

6
src/js/index.js
View File

@ -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);
});

24
src/postcss/mixins.js
View File

@ -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;

2
src/sass/main.scss
View File

@ -1 +1 @@
TODO
// TODO