matiseams / henris Goto Github PK

Also add support for output of elements with custom classes.

Find good debug tests and add them to the debug mode.

https://ffoodd.github.io/a11y.css/warnings.html

When a color doesn't exist, the error is as following:
[function color] string does not exist in the current colorset.

but should be..
[function color] ColorName does not exist in the current colorset.

Issue

I miss this function

Proposal

// Create Background Classes
@if variable-exists("custom-colors") {
	$colors: map-merge($colors, $custom-colors);
}

@debug($colors);

@each $name, $value in $colors {
	$name-lowercase: to-lower-case($name);
	.bg-#{$name},
	.bg-#{$name-lowercase} {
		background-color: $value;
		color: contra($value);
		.copy-button svg path {
			fill: contra($value);
		}
		hr {
			background-color: currentColor;
			color: currentColor;
		}
	}
	.text-#{$name},
	.text-#{$name-lowercase},
	.content .text-#{$name-lowercase} {
		color: $value !important;
	}
	$opacity: (0.9, 0.8, 0.75, 0.7, 0.6, 0.5, 0.4, 0.3, 0.25, 0.2, 0.1);
	@each $opacity-value in $opacity {
		$opacity-name: "0#{$opacity-value * 100}";
		.bg-#{$name}-#{$opacity-name},
		.bg-#{$name-lowercase}-#{$opacity-name} {
			background-color: color($name, $opacity-value);
			color: $value;
		}
	}
}

Had to make an issue anyway.
.DS_store files on src folder are still included (but ignored in gitignore)

Button mixins.

Create sets of buttons with easy mixins.

darken() & lighten() have a problem with css color names.

ul:not([class]) li:before {
	content: "\2014 ";
}

😭

Problem

$font-medium f.e. does not exist.

Proposal

Since it's not possible to declare variables, maybe use font-weight: weight(medium);

$font-weights: (
	"bold": 800,
	"medium": 600,
	"regular": 400,
	"light": 200
);

@each $weight, $weight-value in $font-weights {
	.font-#{$weight} {
		font-weight: $weight-value;
	}
}

At the moment when you want to add multiple output rules. You have to use double brackets:

@include output(('typography','typography-margins')){
// the css
}

It would be better if its possible to write this in a cleaner way:

@include output(typography typography-margins){
// the css
}

We can also improve this by assuming a dashed argument has a 'parent' argument without the dash (can also be checked if it exists). And automatically also add the 'parent' as an argument event when not provided.

next will check $output-typography too for output.

@include output(typography-margins){
// the css
}

What we need to do in the output function:

• add $arguments... to enable multiple arguments at once as a list. Go through the list.
• Add a check for a first dash - and check if the variable (parent) exists in the outputs.
• Add an argument to disable the automatic parent check behaviour by adding a 'false' argument at the end. This can be done with a comma separated argument.

@function output($arguments..., $autoParent: true){
// all output checks. 
}
to use:

@include output(typography-margins){
// the css
// function will check $output-typography-margins & $output-typography
}
or

@include output(typography-margins,false){
// the css
// function will check ONLY $output-typography-margins
}

For example, put debug mode on on develop and off on production so we will never see red borders on images without an alt=""

My background gets overwritten because Henris uses very specific selectors to give basic styling.

This is maybe to specific. "a" inherit should be enough in my opinion cause inherit is default.

No font-weight is returned when using:

font-weight: font-weight(Light);

For some reason this doesn't get included but when you overwrite it, it does

Missing px unit

Decide if mixins in this style https://css-tricks.com/snippets/sass/bem-mixins/ can be usefull.

And if so, implement them.

Any opinions?

Font loading loads all the fonts which are default and doesn't use just the requested files.

for instance when using this:

@if output('button-regular'){
	.button--regular{
		font-size: 1rem; 
	}
}

with settings:

{
	"output": [
		{
			"button": false,
			"button-regular": true
		}
	]
}

Will not be outputed. Because the "parent": button is set to false. Parents are defined by the key before the first dash (-). In this way its easier to enable a whole set of "children" in once or exclude.

{
	"output": [
		{
			"button": true,
			"button-regular": false
		}
	]
}

will also NOT output the button. Only when both are true the child will be outputed.