Skip to content

Commit

Permalink
Switch out the fuel colours
Browse files Browse the repository at this point in the history
  • Loading branch information
@urbanwide
urbanwide committed Sep 10, 2024
1 parent 7ba7c9d commit d6d84c3
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 91 deletions.
19 changes: 9 additions & 10 deletions app/assets/stylesheets/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,19 +241,19 @@ dl dt {

// fuel colour styles

@each $tag, $colour in $fuel-colours-light {
.bg-#{$tag}-light {
background-color: $colour;
@each $fuel, $tones in $fuel-colours {
.bg-#{$fuel}-light {
background-color: map-get($tones, "light");
}
}

@each $tag, $colour in $fuel-colours-dark {
.bg-#{$tag}-dark {
background-color: $colour;
.bg-#{$fuel}-dark {
background-color: map-get($tones, "dark");
}
.text-#{$tag} {
color: $colour;

.text-#{$fuel} {
color: map-get($tones, "dark");
}

}

@each $tag, $colour in $colours-comparison {
Expand All @@ -267,4 +267,3 @@ dl dt {
font-weight: bolder;
}
}

63 changes: 26 additions & 37 deletions app/assets/stylesheets/colours.scss.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,36 @@

// The hex values for colours can be found in initializers/colours.rb

// The following creates a SASS variable for each colour found in the Colours::ALL hash
// The following creates a SASS variable for each colour found in the Colours::BASE hash
// in initializers/colours.rb of the format $colour: #hexval;
// e.g.:
// $yellow-pale: #fdefc8;
// $blue-very-dark: #334375;
<% Colours::ALL.each do |name, hex| %>
$<%= name.to_s.dasherize %>: <%= hex %>;
<% Colours::BASE.each do |colour, hex| %>
$<%= colour.to_s.dasherize %>: <%= hex %>;
<% end %>

// The following creates a SASS variables each fuel type found in Colours::FUEL hash
// Fuel Types. e.g.
// $electric-dark: #007EFF;
<% Colours::FUEL.each do |fuel, tones| %>
<% tones.each do |tone, hex| %>
$<%= "#{fuel}-#{tone}".dasherize %>: <%= hex %>;
<% end %>
<% end %>

// The following creates a SASS map of all the fuel colours
// So we can use it later to iterate on
$fuel-colours: (
<% Colours::FUEL.each do |fuel, tones| %>
<%= fuel.to_s.dasherize %>: (
<% tones.each do |tone, hex| %>
<%= tone.to_s.dasherize %>: $<%= "#{fuel}-#{tone}".dasherize %>,
<% end %>
),
<% end %>
);

// Old / current colour mappings ###
// These are *not* to be used for new features as we're moving away
// from them to the colours above
Expand Down Expand Up @@ -59,26 +80,10 @@ $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;

// Positive / neutral / negative
$bg-positive: $turquoise;
$bg-neutral: $light-blue;
$bg-negative: $new-red;
Expand All @@ -87,22 +92,6 @@ $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;
Expand Down
16 changes: 0 additions & 16 deletions app/components/advice_page_list_component/advice_page_list_component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,4 @@
background-color: $other-school;
color: $white;
}

.bg-electric-light {
background-color: $blue-pale;
}

.bg-gas-light {
background-color: $yellow-pale;
}

.bg-storage-light {
background-color: $purple-light;
}

.bg-solar-light {
background-color: $green-pale;
}
}
20 changes: 10 additions & 10 deletions app/components/page_nav_component/page_nav_component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,24 @@
font-weight: normal;
}

@each $tag, $colour in $fuel-colours-light {
.page-nav-component a.nav-link.#{$tag}-item {
border-left: 1px solid $colour;
@each $fuel, $tones in $fuel-colours {
.page-nav-component a.nav-link.#{$fuel}-item {
border-left: 1px solid map-get($tones, "light");
}

.page-nav-component a.nav-link.#{$tag}-item:hover {
background-color: rgba($colour, 0.5);
.page-nav-component a.nav-link.#{$fuel}-item:hover {
background-color: rgba(map-get($tones, "light"), 0.5);
}

.page-nav-component a.nav-link.#{$tag}-item.current {
background-color: rgba($colour, 0.5);
.page-nav-component a.nav-link.#{$fuel}-item.current {
background-color: rgba(map-get($tones, "light"), 0.5);
font-weight: bolder;
}
}

@each $tag, $colour in $fuel-colours-dark {
.page-nav-component a.#{$tag}-section {
background-color: $colour;
@each $fuel, $tones in $fuel-colours {
.page-nav-component a.#{$fuel}-section {
background-color: map-get($tones, "dark");
color: $white;
font-weight: bold;
}
Expand Down
8 changes: 2 additions & 6 deletions app/helpers/application_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,12 +201,10 @@ def fuel_type_background_class(fuel_type)
'bg-electric-light'
when :gas
'bg-gas-light'
when :solar_pv
when :solar_pv, :exported_solar_pv
'bg-solar-light'
when :storage_heater, :storage_heaters
'bg-storage-light'
when :exported_solar_pv
'bg-solar-light'
end
end

Expand All @@ -216,12 +214,10 @@ def fuel_type_class(fuel_type)
'text-electric'
when :gas
'text-gas'
when :solar_pv
when :solar_pv, :exported_solar_pv
'text-solar'
when :storage_heater, :storage_heaters
'text-storage'
when :exported_solar_pv
'text-solar'
end
end

Expand Down
59 changes: 47 additions & 12 deletions config/initializers/colours.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,50 +15,85 @@ module Colours
# $blue-very-dark: #334375;
#

ALL = {
BASE = {
blue_pale: '#f2f6fc'.freeze, # advice_page_list_component background colour
blue_light: '#dcecfd'.freeze,
blue_medium: '#cbe4fc'.freeze, # used in nav so far
blue_dark: '#334375'.freeze, # paragraph text
blue_very_dark: '#192a52'.freeze, # new nav blue (adult) and headings
blue_bright: '#007EFF'.freeze, # used for electricity in designs

yellow_pale: '#fdefc8'.freeze, #advice_page_list_component background colour
yellow_light: '#fcdc8b'.freeze,
yellow_medium: '#f9b233'.freeze,
yellow_dark: '#772d10'.freeze,
yellow_very_dark: '#441504'.freeze,

teal_pale: '#f0fdf9'.freeze, # advice_page_list_component background colour
teal_light: '#cbfcf0'.freeze,
teal_medium: '#88f7dd'.freeze,
teal_dark: '#10bca2'.freeze,

green_pale: '#f0fdf9'.freeze, # advice_page_list_component background colour

grey_light: '#f6f6f6'.freeze, # unused
table_grey: '#c3c3c3'.freeze, # unused

red_light: '#fff1f1'.freeze,
red_medium: '#f8a0a0'.freeze,

purple_light: '#e9d5ff'.freeze, #advice_page_list_component background colour
purple: '#9333ea'.freeze
purple_light: '#e9d5ff'.freeze, # advice_page_list_component background colour
purple_medium: '#BE84F4'.freeze, # not in the design - it is the mid way point between the given dark and light
purple_dark: '#9333ea'.freeze # called purple in the design

}.freeze


FUEL = {
electric: {
light: BASE[:blue_pale],
medium: BASE[:blue_medium],
dark: BASE[:blue_bright]
},
gas: {
light: BASE[:yellow_pale],
medium: BASE[:yellow_light],
dark: BASE[:yellow_medium]
},
storage: {
light: BASE[:purple_light],
medium: BASE[:purple_medium],
dark: BASE[:purple_dark]
},
solar: {
light: BASE[:teal_pale],
medium: BASE[:teal_medium],
dark: BASE[:teal_dark]
}
}.freeze

# Usage: Colours::yellow_very_dark
def self.base(method_name)
BASE[method_name.to_sym]
end

def self.fuel(method_name)
fuel, tone = method_name.split('_', 2).map(&:to_sym)
FUEL.dig(fuel, tone)
end

# Usage:
# Colours::yellow_very_dark
# Colours::gas_light
def self.method_missing(method_name, *args, &block)
colour = method_name.to_sym
ALL[colour] || super
base(method_name) || fuel(method_name) || super
end

def self.respond_to_missing?(method_name, include_private = false)
colour = method_name.to_sym
ALL.key?(color) || super
BASE.key?(method_name) || fuel(method_name) || super
end

# Usage: Colours::get(:yellow_very_dark)
# Usage:
# Colours::get(:yellow_very_dark)
def self.get(colour)
ALL[colour]
base(colour) || fuel(color)
end

### Old / current colours ###
Expand Down

0 comments on commit d6d84c3

Please sign in to comment.