compass-yiq-color-contrast 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
require 'compass'
|
|
2
|
+
|
|
3
|
+
# This tells Compass what your Compass extension is called, and where to find
|
|
4
|
+
# its files
|
|
5
|
+
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
|
6
|
+
Compass::Frameworks.register('compass-yiq-color-contrast', :path => extension_path)
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
$yiq-contrasted-dark-default: #000 !default;
|
|
2
|
+
$yiq-contrasted-light-default: #fff !default;
|
|
3
|
+
$yiq-contrasted-threshold: 128 !default;
|
|
4
|
+
$yiq-debug: false !default;
|
|
5
|
+
|
|
6
|
+
@function yiq-contrast-color(
|
|
7
|
+
$color,
|
|
8
|
+
$dark: $yiq-contrasted-dark-default,
|
|
9
|
+
$light: $yiq-contrasted-light-default,
|
|
10
|
+
$threshold: $yiq-contrasted-threshold
|
|
11
|
+
) {
|
|
12
|
+
$red: red($color);
|
|
13
|
+
$green: green($color);
|
|
14
|
+
$blue: blue($color);
|
|
15
|
+
|
|
16
|
+
$yiq: (($red*299)+($green*587)+($blue*114))/1000;
|
|
17
|
+
|
|
18
|
+
@if $yiq-debug { @debug $yiq, $threshold; }
|
|
19
|
+
|
|
20
|
+
@return if($yiq >= $threshold, $dark, $light);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin yiq-contrasted(
|
|
24
|
+
$background-color,
|
|
25
|
+
$dark: $yiq-contrasted-dark-default,
|
|
26
|
+
$light: $yiq-contrasted-light-default,
|
|
27
|
+
$threshold: $yiq-contrasted-threshold
|
|
28
|
+
) {
|
|
29
|
+
background-color: $background-color;
|
|
30
|
+
color: yiq-contrast-color($background-color, $dark, $light, $threshold);
|
|
31
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
6
|
+
<title>Color Contrast Comparison</title>
|
|
7
|
+
<meta name="description" content="">
|
|
8
|
+
<meta name="viewport" content="width=device-width">
|
|
9
|
+
<link rel="stylesheet" href="stylesheets/compass-yiq-color-contrast.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<h1>Compass Color Contrast (30% - Default)</h1>
|
|
13
|
+
<div class="example example--default">
|
|
14
|
+
<div class="example__row">
|
|
15
|
+
<div class="example__item example--default__item--1">FA5400</div>
|
|
16
|
+
<div class="example__item example--default__item--2">87E300</div>
|
|
17
|
+
<div class="example__item example--default__item--3">FFF000</div>
|
|
18
|
+
<div class="example__item example--default__item--4">00A4E4</div>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="example__row">
|
|
21
|
+
<div class="example__item example--default__item--5">983168</div>
|
|
22
|
+
<div class="example__item example--default__item--6">DC404A</div>
|
|
23
|
+
<div class="example__item example--default__item--7">E7FF00</div>
|
|
24
|
+
<div class="example__item example--default__item--8">BC9A69</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
<h1>Compass Color Contrast (50%)</h1>
|
|
28
|
+
<div class="example example--50">
|
|
29
|
+
<div class="example__row">
|
|
30
|
+
<div class="example__item example--50__item--1">FA5400</div>
|
|
31
|
+
<div class="example__item example--50__item--2">87E300</div>
|
|
32
|
+
<div class="example__item example--50__item--3">FFF000</div>
|
|
33
|
+
<div class="example__item example--50__item--4">00A4E4</div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="example__row">
|
|
36
|
+
<div class="example__item example--50__item--5">983168</div>
|
|
37
|
+
<div class="example__item example--50__item--6">DC404A</div>
|
|
38
|
+
<div class="example__item example--50__item--7">E7FF00</div>
|
|
39
|
+
<div class="example__item example--50__item--8">BC9A69</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<h1>YIQ Color Contrast</h1>
|
|
43
|
+
<div class="example example--yiq">
|
|
44
|
+
<div class="example__row">
|
|
45
|
+
<div class="example__item example--yiq__item--1">FA5400</div>
|
|
46
|
+
<div class="example__item example--yiq__item--2">87E300</div>
|
|
47
|
+
<div class="example__item example--yiq__item--3">FFF000</div>
|
|
48
|
+
<div class="example__item example--yiq__item--4">00A4E4</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="example__row">
|
|
51
|
+
<div class="example__item example--yiq__item--5">983168</div>
|
|
52
|
+
<div class="example__item example--yiq__item--6">DC404A</div>
|
|
53
|
+
<div class="example__item example--yiq__item--7">E7FF00</div>
|
|
54
|
+
<div class="example__item example--yiq__item--8">BC9A69</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@import "compass/utilities/color/contrast";
|
|
2
|
+
@import "yiq-color-contrast";
|
|
3
|
+
@import "susy";
|
|
4
|
+
|
|
5
|
+
$yiq-debug : true;
|
|
6
|
+
|
|
7
|
+
//Susy settings
|
|
8
|
+
$total-columns : 12; // a 12-column grid
|
|
9
|
+
$column-width : 4em; // each column is 4em wide
|
|
10
|
+
$gutter-width : 1em; // 1em gutters between columns
|
|
11
|
+
$grid-padding : 0; // grid-padding equal to gutters
|
|
12
|
+
$items-per-row : 4;
|
|
13
|
+
|
|
14
|
+
$color-list: #000000, #FA5400, #87E300, #00A4E4, #983168, #DC404A, #E7FF00, #BC9A69;
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
font-family: "Helvetica Neue", sans-serif;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.example__row {
|
|
21
|
+
@include container;
|
|
22
|
+
margin: $gutter-width 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.example__item {
|
|
26
|
+
@include box-sizing('border-box');
|
|
27
|
+
@include span-columns($total-columns/$items-per-row,$total-columns);
|
|
28
|
+
@include nth-omega();
|
|
29
|
+
padding: 1em;
|
|
30
|
+
text-align: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@for $i from 1 through length($color-list) {
|
|
34
|
+
.example--default__item--#{$i} {
|
|
35
|
+
@include contrasted(nth($color-list, $i));
|
|
36
|
+
}
|
|
37
|
+
.example--50__item--#{$i} {
|
|
38
|
+
@include contrasted($background-color: nth($color-list, $i), $threshold: 50%);
|
|
39
|
+
}
|
|
40
|
+
.example--yiq__item--#{$i} {
|
|
41
|
+
@include yiq-contrasted(nth($color-list, $i));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
discover :all
|
metadata
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-yiq-color-contrast
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 1.0.0
|
|
5
|
+
prerelease:
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Tim Hettler
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
date: 2013-09-27 00:00:00.000000000 Z
|
|
13
|
+
dependencies:
|
|
14
|
+
- !ruby/object:Gem::Dependency
|
|
15
|
+
name: sass
|
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
|
17
|
+
none: false
|
|
18
|
+
requirements:
|
|
19
|
+
- - ! '>='
|
|
20
|
+
- !ruby/object:Gem::Version
|
|
21
|
+
version: '0'
|
|
22
|
+
type: :runtime
|
|
23
|
+
prerelease: false
|
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
25
|
+
none: false
|
|
26
|
+
requirements:
|
|
27
|
+
- - ! '>='
|
|
28
|
+
- !ruby/object:Gem::Version
|
|
29
|
+
version: '0'
|
|
30
|
+
- !ruby/object:Gem::Dependency
|
|
31
|
+
name: compass
|
|
32
|
+
requirement: !ruby/object:Gem::Requirement
|
|
33
|
+
none: false
|
|
34
|
+
requirements:
|
|
35
|
+
- - ! '>='
|
|
36
|
+
- !ruby/object:Gem::Version
|
|
37
|
+
version: '0'
|
|
38
|
+
type: :runtime
|
|
39
|
+
prerelease: false
|
|
40
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
41
|
+
none: false
|
|
42
|
+
requirements:
|
|
43
|
+
- - ! '>='
|
|
44
|
+
- !ruby/object:Gem::Version
|
|
45
|
+
version: '0'
|
|
46
|
+
description: A compass extension that provides a function to determine the lightness
|
|
47
|
+
of a color in the YIQ color space
|
|
48
|
+
email:
|
|
49
|
+
- me+github@timhettler.com
|
|
50
|
+
executables: []
|
|
51
|
+
extensions: []
|
|
52
|
+
extra_rdoc_files: []
|
|
53
|
+
files:
|
|
54
|
+
- lib/compass-yiq-color-contrast.rb
|
|
55
|
+
- stylesheets/_yiq-color-contrast.scss
|
|
56
|
+
- templates/example/compass-yiq-color-contrast.html
|
|
57
|
+
- templates/example/compass-yiq-color-contrast.scss
|
|
58
|
+
- templates/example/manifest.rb
|
|
59
|
+
homepage: https://github.com/timhettler/compass-yiq-color-contrast
|
|
60
|
+
licenses: []
|
|
61
|
+
post_install_message:
|
|
62
|
+
rdoc_options: []
|
|
63
|
+
require_paths:
|
|
64
|
+
- lib
|
|
65
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
66
|
+
none: false
|
|
67
|
+
requirements:
|
|
68
|
+
- - ! '>='
|
|
69
|
+
- !ruby/object:Gem::Version
|
|
70
|
+
version: '0'
|
|
71
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
72
|
+
none: false
|
|
73
|
+
requirements:
|
|
74
|
+
- - ! '>='
|
|
75
|
+
- !ruby/object:Gem::Version
|
|
76
|
+
version: 1.3.6
|
|
77
|
+
requirements: []
|
|
78
|
+
rubyforge_project:
|
|
79
|
+
rubygems_version: 1.8.23
|
|
80
|
+
signing_key:
|
|
81
|
+
specification_version: 3
|
|
82
|
+
summary: A compass extension that provides a function to determine the lightness of
|
|
83
|
+
a color in the YIQ color space
|
|
84
|
+
test_files: []
|