Skip to content

Commit

Permalink
Merge pull request #112 from fastly/rsandor/themes
Browse files Browse the repository at this point in the history 
Refs #3; Sass Cleanup and Add Themes
  • Loading branch information
@rsandor
rsandor committed Jul 9, 2014
2 parents 1bfb2c4 + 1f8d49e commit 3013196
Show file tree
Hide file tree
Showing 7 changed files with 620 additions and 217 deletions.
42 changes: 41 additions & 1 deletion sass/_epoch_mixins.scss → sass/_core.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/*
* Core Epoch Styles
*/

/**
* Generates the styles needed to define a fill color for a given class name.
* @param $name Name of the class to use (sans the leading .)
Expand Down Expand Up @@ -56,4 +60,40 @@
.bucket { fill: nth($list, $i); }
}
}
}
}

// Axis and Tick Shape Rendering
.epoch {
.axis path, .axis line {
shape-rendering: crispEdges;
}

.axis.canvas .tick line {
shape-rendering: geometricPrecision;
}
}

/*
* Canvas Styles Reference Container
*
* The reference container is an SVG that is automatically created when Epoch is loaded. It is used
* by the canvas based plots to obtain color information from the page styles by creating reference
* elements and then reading their computed styles.
*
* Note: don't mess with this ;)
*/
div#_canvas_css_reference {
width: 0;
height: 0;
position: absolute;
top: -1000px;
left: -1000px;
svg {
position: absolute;
width: 0;
height: 0;
top: -1000px;
left: -1000px;
}
}

223 changes: 7 additions & 216 deletions sass/epoch.scss
View file
Original file line number Diff line number Diff line change
@@ -1,221 +1,12 @@
/*
* Fastly Charts Base CSS
* Epoch Master SCSS
*
* Includes the core styles and all the themes to produce the complete epoch css file.
*
* By Ryan Sandor Richards
* Copyright 2013 Fastly, Inc.
*/

@import "epoch_mixins";

.epoch {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12pt;
}

// Axes and Ticks
.epoch {
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.axis.canvas .tick line {
shape-rendering: geometricPrecision;
}

.axis .tick text {
font-size: 9pt;
}
}

// Line Charts
.epoch .line {
fill: none;
stroke-width: 2px;
}

.epoch.sparklines .line {
stroke-width: 1px;
}


// Area Charts
.epoch .area {
stroke: none;
}

// Pie Charts
.epoch {
.arc.pie {
stroke: #fff;
stroke-width: 1.5px;
}

.arc.pie text {
stroke: none;
fill: white;
font-size: 9pt;
}
}

// Gauge Charts
.epoch .gauge-labels {
.value {
text-anchor: middle;
font-size: 140%;
fill: #666;
}
}

.epoch.gauge-tiny {
width: 120px; height: 90px;

.gauge-labels {
.value { font-size: 80%; }
}

.gauge {
.arc.outer {
stroke-width: 2px;
}
}
}

.epoch.gauge-small {
width: 180px; height: 135px;

.gauge-labels {
.value { font-size: 120%; }
}

.gauge {
.arc.outer {
stroke-width: 3px;
}
}
}

.epoch.gauge-medium {
width: 240px; height: 180px;

.gauge {
.arc.outer {
stroke-width: 3px;
}
}
}

.epoch.gauge-large {
width: 320px; height: 240px;
.gauge-labels {
.value { font-size: 180%; }
}
}

.epoch .gauge {
.arc.outer {
stroke-width: 4px;
stroke: #666;
}
.arc.inner {
stroke-width: 1px;
stroke: #555;
}
.tick {
stroke-width: 1px;
stroke: #555;
}

.needle {
fill: orange;
}

.needle-base {
fill: #666;
}
}

// Categorical Colors
$category10:
#1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd,
#8c564b, #e377c2, #7f7f7f, #bcbd22, #17becf;

.epoch, .epoch.category10 {
@include epoch-category-colors($category10, 10);
}

$category20:
#1f77b4, #aec7e8, #ff7f0e, #ffbb78, #2ca02c,
#98df8a, #d62728, #ff9896, #9467bd, #c5b0d5,
#8c564b, #c49c94, #e377c2, #f7b6d2, #7f7f7f,
#c7c7c7, #bcbd22, #dbdb8d, #17becf, #9edae5;

.epoch.category20 {
@include epoch-category-colors($category20, 20);
}

$category20b:
#393b79, #5254a3, #6b6ecf, #9c9ede, #637939,
#8ca252, #b5cf6b, #cedb9c, #8c6d31, #bd9e39,
#e7ba52, #e7cb94, #843c39, #ad494a, #d6616b,
#e7969c, #7b4173, #a55194, #ce6dbd, #de9ed6;

.epoch.category20b {
@include epoch-category-colors($category20b, 20);
}

$category20c:
#3182bd, #6baed6, #9ecae1, #c6dbef, #e6550d,
#fd8d3c, #fdae6b, #fdd0a2, #31a354, #74c476,
#a1d99b, #c7e9c0, #756bb1, #9e9ac8, #bcbddc,
#dadaeb, #636363, #969696, #bdbdbd, #d9d9d9;

.epoch.category20c {
@include epoch-category-colors($category20c, 20);
}


//
// Heatmap Colors
//
// The heatmap real-time graph uses color blending to choose the color for which to render each bucket.
// Basic d3 categorical colors do not work well in this instance because the colors in the sequence
// vary wildly in precieved luminosity.
//
// Below we define small subsets that should work well together because they are of similar luminosities.
// Note: darker colors work better since we use opacity to denote "height" or "intensity" for each bucket
// after picking a mix color.
//
$heatmap5:
#1f77b4, #2ca02c, #d62728, #8c564b, #7f7f7f;

.epoch, .epoch.heatmap5 {
@include epoch-heatmap-colors($heatmap5, 5);
}


//
// Canvas Styles Reference Container
//
// The reference container is an SVG that is automatically created when Epoch is loaded. It is used
// by the canvas based plots to obtain color information from the page styles by creating reference
// elements and then reading their computed styles.
//
// Note: don't mess with this ;)
//
div#_canvas_css_reference {
width: 0;
height: 0;
position: absolute;
top: -1000px;
left: -1000px;
svg {
position: absolute;
width: 0;
height: 0;
top: -1000px;
left: -1000px;
}
}


@import "core";
@import "themes/default";
@import "themes/dark";
95 changes: 95 additions & 0 deletions sass/themes/_dark.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/*
* theme/_dark.scss - Theme design for dark page backgrounds.
* Designed by Ryan Sandor Richards
*/

$axisAndText: #d0d0d0;
$background: #333;

.epoch-theme-dark {
// Axes and Ticks
.epoch {
.axis path, .axis line {
stroke: $axisAndText;
}
.axis .tick text {
fill: $axisAndText;
}
}

// Pie Charts
.arc.pie {
stroke: $background;
}

.arc.pie text {
fill: $background;
}

// Gauges
.epoch .gauge-labels .value {
fill: #BBB;
}

.epoch .gauge {
.arc.outer {
stroke: #999;
}
.arc.inner {
stroke: #AAA;
}
.tick {
stroke: #AAA;
}

.needle {
fill: #F3DE88;
}

.needle-base {
fill: #999;
}
}

// Categorical Colors
$dark_category10:
#909CFF, #FFAC89, #E889E8, #78E8D3, #C2FF97,
#B7BCD1, #FF857F, #F3DE88, #C9935E, #A488FF;

.epoch, .epoch.category10 {
@include epoch-category-colors($dark_category10, 10);
}

$dark_category20:
#909CFF, #626AAD, #FFAC89, #BD7F66,
#E889E8, #995A99, #78E8D3, #4F998C,
#C2FF97, #789E5E, #B7BCD1, #7F8391,
#CCB889, #A1906B, #F3DE88, #A89A5E,
#FF857F, #BA615D, #A488FF, #7662B8;

.epoch.category20 {
@include epoch-category-colors($dark_category20, 20);
}

$dark_category20b:
#909CFF, #7680D1, #656DB2, #525992,
#FFAC89, #D18D71, #AB735C, #92624E,
#E889E8, #BA6EBA, #9B5C9B, #7B487B,
#78E8D3, #60BAAA, #509B8D, #3F7B70,
#C2FF97, #9FD17C, #7DA361, #65854E;

.epoch.category20b {
@include epoch-category-colors($dark_category20b, 20);
}

$dark_category20c:
#B7BCD1, #979DAD, #6E717D, #595C66,
#FF857F, #DE746E, #B55F5A, #964E4B,
#F3DE88, #DBC87B, #BAAA68, #918551,
#C9935E, #B58455, #997048, #735436,
#A488FF, #8670D1, #705CAD, #52447F;

.epoch.category20c {
@include epoch-category-colors($dark_category20c, 20);
}
}
Loading

0 comments on commit 3013196

Please sign in to comment.