BathHacked/energy-sparks

View on GitHub
app/assets/stylesheets/colours.scss.erb

Summary

Maintainability
Test Coverage
// Core colours for use across the application

// Mappings to values found in initializers/colours.rb
// Yellows
$new-yellow: <%= Colours::NEW_YELLOW %>; // not used in the site but same colour is used in mailers & chart_data_values.rb
$dark-yellow: <%= Colours::DARK_YELLOW %>; // podium
$light-yellow: <%= Colours::LIGHT_YELLOW %>; // podium

// Oranges
$dark-orange: <%= Colours::DARK_ORANGE %>;
$light-orange: <%= Colours::LIGHT_ORANGE %>;

// Blues
$dark-blue: <%= Colours::DARK_BLUE %>; // main nav blue
$bright-blue: <%= Colours::BRIGHT_BLUE %>;
$mid-blue: <%= Colours::MID_BLUE %>; // used in charts
$light-blue: <%= Colours::LIGHT_BLUE %>;
$lighter-light-blue: <%= Colours::LIGHTER_LIGHT_BLUE %>;
$bluey-white: <%= Colours::BLUEY_WHITE %>; // used for background on pupil dashboards

// Greens
$green: <%= Colours::GREEN %>;

// Reds
$new-red: <%= Colours::NEW_RED %>;
$light-red: <%= Colours::LIGHT_RED %>;

// PURPLES / PINKS
$mid-purple: <%= Colours::MID_PURPLE %>;

// Turquoise
$turquoise: <%= Colours::TURQUOISE %>;
$light-turquoise: <%= Colours::LIGHT_TURQUOISE %>;

// Shades of grey
$black: <%= Colours::BLACK %>;
$dark: <%= Colours::DARK %>;
$darker-grey: <%= Colours::DARKER_GREY %>;
$dark-grey: <%= Colours::DARK_GREY %>;
$silver: <%= Colours::SILVER %>;
$grey: <%= Colours::GREY %>;
$bluey-grey: <%= Colours::BLUEY_GREY %>; // used for background on pupil dashboards
$light-grey: <%= Colours::LIGHT_GREY %>;
$lighter-grey: <%= Colours::LIGHTER_GREY %>;
$very-light-grey: <%= Colours::VERY_LIGHT_GREY %>;
$white: <%= Colours::WHITE %>;

// Fuel Types
$electric-dark: <%= Colours::ELECTRIC_DARK %>; // very similar to $mid-blue
$electric-middle: <%= Colours::ELECTRIC_MIDDLE %>; // used in charts only
$electric-light: <%= Colours::ELECTRIC_LIGHT %>; // very similar to $light-blue

$storage-dark: <%= Colours::STORAGE_DARK %>; // dark purple
$storage-light: <%= Colours::STORAGE_LIGHT %>; // pinky purple

$solar-dark: <%= Colours::SOLAR_DARK %>;
$solar-light: <%= Colours::SOLAR_LIGHT %>;

$gas-dark: <%= Colours::GAS_DARK %>; // mid orange
$gas-middle: <%= Colours::GAS_MIDDLE %>; // used in charts only
$gas-light: <%= Colours::GAS_LIGHT %>; // dark yellow

$carbon-dark: <%= Colours::CARBON_DARK %>;
$carbon-light: <%= Colours::CARBON_LIGHT %>;

// Shortcuts
$text: $dark;
$bg-positive: $turquoise;
$bg-neutral: $light-blue;
$bg-negative: $new-red;

$bg-positive-light: $light-turquoise;
$bg-neutral-light: $lighter-light-blue;
$bg-negative-light: $light-red;

$fuel-colours-light: (
  "electric" : $electric-light,
  "gas"      : $gas-light,
  "storage"  : $storage-light,
  "solar"    : $solar-light,
  "carbon"   : $carbon-light
);

$fuel-colours-dark: (
  "electric" : $electric-dark,
  "gas"      : $gas-dark,
  "storage"  : $storage-dark,
  "solar"    : $solar-dark,
  "carbon"   : $carbon-dark
);

// Live Data
$live-data-dark: $green;
$live-data-light: $light-grey;

// Comparisons
$exemplar-school: $green;
$benchmark-school: $light-orange;
$other-school: $bg-negative;

$colours-comparison: (
  "exemplar_school": $exemplar-school,
  "benchmark_school": $benchmark-school,
  "other_school": $other-school
);