<commit_before># PostCSS High Contrast
PostCSS High Contrast is PostCSS plugin that helps automaticaly convert all colors to high contrast. This Plugin gives you ability to create high contrast version of your project with ease.

## Why?
Accessible websites are getting more popular. Some countries even pass laws obliging IT companies create high contrast versions of their projects. Creating high contrast version of your project due some reasons can be painfull.


## Example	
<img title="High Contras Example" src="img/high-contrast-example.png">


## Basic Usage
```
var postcss = require('postcss');
var highContrast = require('postcss-high-contrast');

gulp.task('css', function(){
	var processors = [
		highContrast({
			aggressiveHC: true,
			aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
			aggressiveHCCustomSelectorList: ['div', 'span'],
			
			backgroundColor: '#000',
			altBgColor: '#fff',
			
			textColor: '#fff',
			
			linkColor: '#fcff3c',
			linkHoverBgColor: '#fff',
			linkHoverColor: '#000',
			
			borderColor: '#fff',
			disableShadow: true
		})
	];
	gulp.src(src + './*.css')
	.pipe(postcss(processors))
	.pipe(gulp.dest(root + './'))
});
```

## Options
| Name                              | Default Value                                                 | Description    |
|:----------------------------------|:--------------------------------------------------------------|:---------------|
| `aggressiveHC`                    | `true`                                                        | Will append properties even if they do not exist |
| `aggressiveHCDefaultSelectorList` | `['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td']` | Default list of selectors for aggressive property append |
| `aggressiveHCCustomSelectorList`  | `['span']`                                                    | Custom list of selectors for aggressive property append |
| `backgroundColor`                 | `#000`                                                        | Backgound color |
| `altBgColor`                      | `#fff`                                                        | Alternative background color |
| `textColor`                       | `#fff`                                                        | Text color |
| `linkColor`                       | `#fcff3c`                                                     | Link color |
| `linkHoverBgColor`                | `#fff`                                                        | Link hover bacground color |
| `linkHoverColor`                  | `#000`                                                        | Link hover color |
| `borderColor`                     | `#fff`                                                        | Border color |
| `disableShadow`                   | `true`                                                        | Disable shadow |
<commit_msg>readme update<commit_after># PostCSS High Contrast
<img align="right" width="57" height="108" title="Dev Kit Main Logo" src="http://adm-designhouse.com/dev-kit-logo.png">

<img align="right" width="108" height="108" title="Philosopher’s stone, logo of PostCSS" src="http://postcss.github.io/postcss/logo.svg" hspace="20">
PostCSS High Contrast is PostCSS plugin that helps automaticaly convert all colors to high contrast. This Plugin gives you ability to create high contrast version of your project with ease.

## Why?
Accessible websites are getting more popular. Some countries even pass laws obliging IT companies create high contrast versions of their projects. Creating high contrast version of your project due some reasons can be painfull.


## Live Example 	
<img title="High Contras Example" src="img/high-contrast-example.png">


## Basic Usage
```js
postcss([ require('postcss-high-contrast')({
	highContrast({
		aggressiveHC: true,
		aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
		aggressiveHCCustomSelectorList: ['div', 'span'],
		
		backgroundColor: '#000',
		altBgColor: '#fff',
		
		textColor: '#fff',
		
		linkColor: '#fcff3c',
		linkHoverColor: '#fcff3c',
		
		borderColor: '#fff',
		disableShadow: true
	})
})]);

```
#### None Aggressive
input.css:
```css
body {
	background: #fff;
	color: #000;
}

a {
	color: #0b39e1;
}
```
oputput.css:
```css
body {
	background: #000;
	color: #fff;
}

a {
	color: #fcff3c;
}
```
#### Aggressive
```aggressiveHC``` is enabled by default. If selector doesn't have ```color``` property it will automateclly append it for increasing specificity and providing more accurate results.
```css
h1 {
	font-size: 48px;
	margin: 0;
	padding: 0 24px;
	width: 100%;
}

p {
	font-size: 48px;
	margin: 0 0 24px;
}
```
oputput.css:
```css
h1 {
	color: #fff;
	font-size: 48px;
	margin: 0;
	padding: 0 24px;
	width: 100%;
}

p {
	color: #fff;
	font-size: 48px;
	margin: 0 0 24px;
}
```
Use ```aggressiveHCDefaultSelectorList``` and ```aggressiveHCCustomSelectorList``` to define own lists of properties.


#### Appending to wepbage
Using this plugin it's better to generate new high contrast version of css file. Than it is very easy to add/append high contrast version css to a webpage using JavaScript.  
JQuery example: 
```js
function appendHighContrastCss(){
	var hc = '<link rel="stylesheet" href="/assets/css/high-contrast.css" id="hccss"/>';


	if(!$('#highContrastCss').length ){
		$('head').append(hc);
	} else {
		$('#hccss').remove();
	}

}

$('a.high-contrast').click(loadHighContrastCSS);
	appendHighContrastCss();
}
```
Tip: use cookeis to remember turned on high contrast css on different sessions and pages.

 

## Options
| Name                              | Default Value                                                 | Description    |
|:----------------------------------|:--------------------------------------------------------------|:---------------|
| `aggressiveHC`                    | `true`                                                        | Will append properties even if they do not exist |
| `aggressiveHCDefaultSelectorList` | `['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td']` | Default list of selectors for aggressive property append |
| `aggressiveHCCustomSelectorList`  | `['span']`                                                    | Custom list of selectors for aggressive property append |
| `backgroundColor`                 | `#000`                                                        | Backgound color |
| `altBgColor`                      | `#fff`                                                        | Alternative background color |
| `textColor`                       | `#fff`                                                        | Text color |
| `linkColor`                       | `#fcff3c`                                                     | Link color |
| `linkHoverBgColor`                | `#fff`                                                        | Link hover bacground color |
| `linkHoverColor`                  | `#000`                                                        | Link hover color |
| `borderColor`                     | `#fff`                                                        | Border color |
| `disableShadow`                   | `true`                                                        | Disable shadow |


## Used by
[<NAME>](https://www.posta.hu)
{'fraction_non_alphanumeric': 0.14959349593495935, 'fraction_numerical': 0.014363143631436315, 'mean_word_length': 1.6531272465851905, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 1, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 44, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2027448', 'n_tokens_mistral': 2078, 'n_tokens_neox': 1868, 'n_words': 585}