Skip to content

Commit

Permalink
selection styling for light theme flowhub#125
Browse files Browse the repository at this point in the history
  • Loading branch information
@forresto
forresto committed Mar 9, 2014
1 parent 22d7ed7 commit de4b959
Show file tree
Hide file tree
Showing 3 changed files with 174 additions and 134 deletions.
101 changes: 67 additions & 34 deletions themes/light/the-graph-spectrum.styl
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,71 @@
/* thanks http://oobrien.com/2012/01/tube-colours/ */
var-route00 = hsl( 0, 0%, 75%)
var-route01 = hsl( 0, 100%, 40%)
var-route02 = hsl( 29, 100%, 40%)
var-route03 = hsl( 47, 100%, 50%)
var-route04 = hsl(138, 100%, 40%)
var-route05 = hsl(160, 73%, 81%)
var-route06 = hsl(181, 100%, 40%)
var-route07 = hsl(216, 100%, 40%)
var-route08 = hsl(260, 100%, 40%)
var-route09 = hsl(348, 100%, 83%)
var-route10 = hsl(328, 100%, 40%)

var-route00 = #A0A5A9 /* Jubilee */
var-route01 = #E32017 /* Central */
var-route02 = #EE7C0E /* Overground */
var-route03 = #FFD300 /* Circle */
var-route04 = #00782A /* District */
var-route05 = #95CDBA /* Waterloo and City */
var-route06 = #0098D4 /* Victoria */
var-route07 = #003688 /* Piccadilly */
var-route08 = #9B0056 /* Metropolitan */
var-route09 = #F3A9BB /* Hammersmith and City */
var-route10 = #B36305 /* Bakerloo */
var-route00-fade = hsl( 0, 0%, 90%)
var-route01-fade = hsl( 0, 100%, 90%)
var-route02-fade = hsl( 29, 100%, 90%)
var-route03-fade = hsl( 47, 100%, 90%)
var-route04-fade = hsl(138, 100%, 90%)
var-route05-fade = hsl(160, 73%, 90%)
var-route06-fade = hsl(181, 100%, 90%)
var-route07-fade = hsl(216, 100%, 90%)
var-route08-fade = hsl(260, 100%, 90%)
var-route09-fade = hsl(348, 100%, 90%)
var-route10-fade = hsl(328, 100%, 90%)

var-group00 = hsla( 0, 0%, 75%, 0.25)
var-group01 = hsla( 0, 50%, 75%, 0.25)
var-group02 = hsla( 35, 50%, 75%, 0.25)
var-group03 = hsla( 60, 50%, 75%, 0.25)
var-group04 = hsla(135, 50%, 75%, 0.25)
var-group05 = hsla(160, 50%, 75%, 0.25)
var-group06 = hsla(185, 50%, 75%, 0.25)
var-group07 = hsla(210, 50%, 75%, 0.25)
var-group08 = hsla(285, 50%, 75%, 0.25)
var-group09 = hsla(310, 50%, 75%, 0.25)
var-group10 = hsla(335, 50%, 75%, 0.25)
var-group00 = hsla( 0, 0%, 75%, 0.1)
var-group01 = hsla( 0, 100%, 40%, 0.1)
var-group02 = hsla( 29, 100%, 40%, 0.1)
var-group03 = hsla( 47, 100%, 50%, 0.1)
var-group04 = hsla(138, 100%, 40%, 0.1)
var-group05 = hsla(160, 73%, 81%, 0.1)
var-group06 = hsla(181, 100%, 40%, 0.1)
var-group07 = hsla(216, 100%, 40%, 0.1)
var-group08 = hsla(260, 100%, 40%, 0.1)
var-group09 = hsla(348, 100%, 83%, 0.1)
var-group10 = hsla(328, 100%, 40%, 0.1)

var-group00-hover = hsla( 0, 0%, 75%, 0.35)
var-group01-hover = hsla( 0, 50%, 75%, 0.35)
var-group02-hover = hsla( 35, 50%, 75%, 0.35)
var-group03-hover = hsla( 60, 50%, 75%, 0.35)
var-group04-hover = hsla(135, 50%, 75%, 0.35)
var-group05-hover = hsla(160, 50%, 75%, 0.35)
var-group06-hover = hsla(185, 50%, 75%, 0.35)
var-group07-hover = hsla(210, 50%, 75%, 0.35)
var-group08-hover = hsla(285, 50%, 75%, 0.35)
var-group09-hover = hsla(310, 50%, 75%, 0.35)
var-group10-hover = hsla(335, 50%, 75%, 0.35)
var-group00-stroke = hsla( 0, 0%, 75%, 0.15)
var-group01-stroke = hsla( 0, 100%, 40%, 0.15)
var-group02-stroke = hsla( 29, 100%, 40%, 0.15)
var-group03-stroke = hsla( 47, 100%, 50%, 0.15)
var-group04-stroke = hsla(138, 100%, 40%, 0.15)
var-group05-stroke = hsla(160, 73%, 81%, 0.15)
var-group06-stroke = hsla(181, 100%, 40%, 0.15)
var-group07-stroke = hsla(216, 100%, 40%, 0.15)
var-group08-stroke = hsla(260, 100%, 40%, 0.15)
var-group09-stroke = hsla(348, 100%, 83%, 0.15)
var-group10-stroke = hsla(328, 100%, 40%, 0.15)

var-group00-hover = hsla( 0, 0%, 75%, 0.15)
var-group01-hover = hsla( 0, 100%, 40%, 0.15)
var-group02-hover = hsla( 29, 100%, 40%, 0.15)
var-group03-hover = hsla( 47, 100%, 50%, 0.15)
var-group04-hover = hsla(138, 100%, 40%, 0.15)
var-group05-hover = hsla(160, 73%, 81%, 0.15)
var-group06-hover = hsla(181, 100%, 40%, 0.15)
var-group07-hover = hsla(216, 100%, 40%, 0.15)
var-group08-hover = hsla(260, 100%, 40%, 0.15)
var-group09-hover = hsla(348, 100%, 83%, 0.15)
var-group10-hover = hsla(328, 100%, 40%, 0.15)

var-group00-fade = hsla( 0, 0%, 75%, 0.05)
var-group01-fade = hsla( 0, 100%, 40%, 0.05)
var-group02-fade = hsla( 29, 100%, 40%, 0.05)
var-group03-fade = hsla( 47, 100%, 50%, 0.05)
var-group04-fade = hsla(138, 100%, 40%, 0.05)
var-group05-fade = hsla(160, 73%, 81%, 0.05)
var-group06-fade = hsla(181, 100%, 40%, 0.05)
var-group07-fade = hsla(216, 100%, 40%, 0.05)
var-group08-fade = hsla(260, 100%, 40%, 0.05)
var-group09-fade = hsla(348, 100%, 83%, 0.05)
var-group10-fade = hsla(328, 100%, 40%, 0.05)
13 changes: 10 additions & 3 deletions themes/light/the-graph.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,23 @@ var-node-icon = hsl(194, 8%, 25%)
var-node-icon-big = hsl(194, 8%, 80%)
var-node-icon-small = hsl(194, 8%, 10%)

var-node-selected = hsla(192, 25%, 92%, 0.94)
var-node-selected-border = hsl(0, 0%, 50%)
var-node-selected-icon = hsl(194, 8%, 20%)
var-node-deselected = hsla(192, 25%, 97%, 0.94)
var-node-deselected-border = hsl(194, 8%, 85%)
var-node-deselected-icon = hsl(194, 8%, 75%)

var-export-bg = hsl(0, 0%, 90%)

var-type-a = black
var-type-b = hsl(188, 6%, 5%)
var-text-bg = hsla(0, 0%, 100%, 0.5)
var-tooltip-bg = hsla(0, 0%, 100%, 0.9)

var-selection-box = hsla(0, 100%, 70%, 0.15)
var-selection-box-hover = hsla(0, 100%, 70%, 0.25)
var-selection-box-border = hsl(0, 100%, 50%)
var-selection-box = hsla(0, 0%, 50%, 0.15)
var-selection-box-hover = hsla(0, 0%, 40%, 0.25)
var-selection-box-border = hsl(0, 0%, 50%)

var-menu-modal-bg = hsla(0, 0%, 100%, 0.5)
var-menu-bg = hsla(211, 12%, 89%, 0.95)
Expand Down
Loading

0 comments on commit de4b959

Please sign in to comment.