Permalink
Browse files

Swatches for every theme based on the same color.

  • Loading branch information...
1 parent 7f69fa4 commit 069af634434cf4b5af10c393c7c8096a8ee32975 @chriseppstein committed Aug 3, 2009
View
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Analogous Color Example</title>
+ <link rel="stylesheet" href="stylesheets/analogous.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="analogous">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="support">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="accent">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ <br>
+ </div>
+ </body>
+</html>
View
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Basic Color Example</title>
+ <link rel="stylesheet" href="stylesheets/basic.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="basic">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ </body>
+</html>
View
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Complementary Color Example</title>
+ <link rel="stylesheet" href="stylesheets/complementary.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="complementary">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="complement">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ </body>
+</html>
View
@@ -28,7 +28,7 @@
.download { float: right; }
pre { background: #000; color: #fff; padding: 15px;}
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
- .footer { text-align:center; padding-top:30px; font-style: italic; }
+ .footer { padding-top:30px; font-style: italic; }
</style>
</head>
@@ -38,37 +38,23 @@
<div id="container">
- <div class="download">
- <a href="http://github.com/chriseppstein/compass-colors/zipball/master">
- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
- <a href="http://github.com/chriseppstein/compass-colors/tarball/master">
- <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
- </div>
-
- <h1><a href="http://github.com/chriseppstein/compass-colors">compass-colors</a>
- <span class="small">by <a href="http://github.com/chriseppstein">chriseppstein</a></span></h1>
+ <h1><a href="http://github.com/chriseppstein/compass-colors">Compass Colors</a></h1>
<div class="description">
Color Tools and Theme Support for Compass and Sass
</div>
- <h2>Authors</h2>
-<p>Chris Eppstein (chris@eppsteins.net)<br/><br/> </p>
-<h2>Contact</h2>
-<p>Chris Eppstein (chris@eppsteins.net)<br/> </p>
-
+ <div id="demos">
+ <h2>Theme Demos</h2>
+ <ul>
+ <li><a href="basic_example.html">Basic/Monochromatic</a></li>
+ <li><a href="complementary_example.html">Complementary</a></li>
+ <li><a href="triadic_example.html">Triadic</a></li>
+ <li><a href="split_compliment_example.html">Split Complement</a></li>
+ <li><a href="analogous_example.html" title="analogous_example">Analogous</a></li>
+ </ul>
+ </div>
- <h2>Download</h2>
- <p>
- You can download this project in either
- <a href="http://github.com/chriseppstein/compass-colors/zipball/master">zip</a> or
- <a href="http://github.com/chriseppstein/compass-colors/tarball/master">tar</a> formats.
- </p>
- <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
- by running:
- <pre>$ git clone git://github.com/chriseppstein/compass-colors</pre>
- </p>
-
<div class="footer">
get the source code on GitHub : <a href="http://github.com/chriseppstein/compass-colors">chriseppstein/compass-colors</a>
</div>
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Split Compliment Color Example</title>
+ <link rel="stylesheet" href="stylesheets/split_complement.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="split-compliment">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="complement-support">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="complement-accent">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ <br>
+ </div>
+ </body>
+</html>
@@ -2,7 +2,7 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color = red
+!base_color ||= red
!support_color = adjust_hue(!base_color, 30)
!accent_color = adjust_hue(!base_color, -30)
View
@@ -1,4 +1,4 @@
-!base_color = red
+!base_color ||= red
!dark_base_color = darken(!base_color, 50)
!darker_base_color = darken(!base_color, 70)
!darkest_base_color = darken(!base_color, 90)
@@ -2,7 +2,7 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color = red
+!base_color ||= red
!complementary_color = complement(!base_color)
!base_dark_color = darken(!base_color, 50)
View
@@ -0,0 +1,42 @@
+=annotate(!color, !name)
+ &:before, &:after
+ @if luminosity(!color) < 30
+ :color #ddd
+ @else
+ :color black
+ &:before
+ :content "#{!color}"
+ &:after
+ :content "#{!name}_color"
+ :font-size smaller
+
+=gradient(!color, !name)
+ !darkest = darken(!color, 75%)
+ !text_color = adjust_hue(!color, -180)
+ :background-color = !darkest
+ .darkest
+ :background-color = !darkest
+ +annotate(!darkest, "darkest_#{!name}")
+ .darker
+ !darker = darken(!color, 50%)
+ :background-color = !darker
+ +annotate(!darker, "darker_#{!name}")
+ .dark
+ !dark = darken(!color, 25%)
+ :background-color = !dark
+ +annotate(!dark, "dark_#{!name}")
+ .normal
+ :background-color = !color
+ +annotate(!color, !name)
+ .light
+ !light = lighten(!color, 25%)
+ :background-color = !light
+ +annotate(!light, "light_#{!name}")
+ .lighter
+ !lighter = lighten(!color, 50%)
+ :background-color = !lighter
+ +annotate(!lighter, "lighter_#{!name}")
+ .lightest
+ !lightest = lighten(!color, 75%)
+ :background-color = !lightest
+ +annotate(!lightest, "lightest_#{!name}")
@@ -2,7 +2,7 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color = red
+!base_color ||= red
!complement_support_color = adjust_hue(!base_color, 180 + 30)
!complement_accent_color = adjust_hue(!base_color, 180 - 30)
Oops, something went wrong.

0 comments on commit 069af63

Please sign in to comment.