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"] { :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%) */
} }

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

4
src/css/variables.css
View File

@ -6,9 +6,9 @@
--zindex-overlay: 15; /* e.g., modals and dialogs */ --zindex-overlay: 15; /* e.g., modals and dialogs */
/*radius */ /*radius */
--radius-sm: calc(var(--radius, 0.25em)/2); --radius-sm: calc(var(--radius, 0.25em) / 2);
--radius-md: var(--radius, 0.25em); --radius-md: var(--radius, 0.25em);
--radius-lg: calc(var(--radius, 0.25em)*2); --radius-lg: calc(var(--radius, 0.25em) * 2);
/*box shadow */ /*box shadow */
--shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), --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) { import '../css/main.css';
console.log('DOMContentLoaded:', event);
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOMContentLoaded:', event);
}); });

24
src/postcss/mixins.js
View File

@ -6,26 +6,26 @@ const postcssMixins = {
// TODO - untest // TODO - untest
defineHSL(mixin, name, hue, sat, light) { defineHSL(mixin, name, hue, sat, light) {
const obj = {}; const obj = {};
obj[name] = name; obj[name] = name;
// 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;
}, },
// defines a custom property with identifier name, along with individual hue, // defines a custom property with identifier name, along with individual hue,
// 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;

2
src/sass/main.scss
View File

@ -1 +1 @@
TODO // TODO