Total color overhaul on Front and Guild page

src/assets/scss/_globals.scss

@@ -1,74 +1,104 @@
-$dark-blue: #002d3a;
-$light-blue: #bfdbd9;
-$white: #fff;
-$black: #000;
-$grey1: #d4d0c7;
-$grey2: #efece4;
-$orange1: #d57a2d;
-$orange2: #dd934e;
-$blue: #57b2df;
-$light-turquoise: #beddeb;
-$green: #c0dcd9;
-$sand: #fdf9d7;
-
 $font: 'Montserrat', sans-serif;
 
-.dark-blue {
+$colors: (
-  color: $dark-blue;
+  // Name Color ?Hover?
+  dark-blue: 'dark-blue'               #002d3a,
+  light-blue: 'light-blue'             #bfdbd9,
+  white: 'white'                       #fff,
+  black: 'black'                       #000,
+  grey1: 'grey1'                       #d4d0c7,
+  grey2: 'grey2'                       #efece4,
+  orange1: 'orange1'                   #d57a2d,
+  orange2: 'orange2'                   #dd934e,
+  blue: 'blue'                         #57b2df,
+  light-turquoise: 'light-turquoise'   #beddeb,
+  green: 'green'                       #c0dcd9,
+  sand: 'sand'                         #fdf9d7
+);
+
+@function color($label) {
+  $color: map-get($colors, $label);
+
+  @if $color {
+    @return nth($color, 2);
+  }
+
+  @warn 'No specified color for '#{$label}'; add your own to _colors.scss';
+  @return null;
 }
 
-.white {
+@function hover($label) {
-  color: $white;
+  $color: map-get($colors, $label);
+
+  @if $color {
+    @return nth($color, 2);
+  }
+
+  @warn 'No specified hover color for '#{$label}'; add your own to _colors.scss';
+  @return lighten($color, 20%);
 }
 
-.orange {
-  color: $orange1;
-}
 
-.light-turquoise {
-  color: $light-turquoise;
-}
 
-.light-blue {
+@mixin hoverableColor($colorName) {
-  color: $light-blue;
+  .color--#{$colorName} {
-}
+    color: color($colorName);
+  }
 
-.blue {
+  .color--#{$colorName}Hoverable {
-  color: $blue;
+    &:hover,
-}
+    &:active {
-
+      color: hover($colorName);
-.hover-dark-blue {
+    }
-  &:hover {
-    color: $dark-blue;
   }
 }
 
-.hover-white {
+@mixin backgroundColor($colorName) {
-  &:hover {
+  .color--background-#{$colorName} {
-    color: $white;
+    background-color: color($colorName);
+  }
+
+  .color--background-#{$colorName}Hoverable {
+    &:hover,
+    &:active {
+      background-color: hover($colorName);
+    }
   }
 }
 
-.hover-orange {
+@mixin backgroundAndHoverableColor($colorName) {
-  &:hover {
+  @include hoverableColor($colorName);
-    color: $orange1;
+  @include backgroundColor($colorName);
+}
+
+@include backgroundAndHoverableColor(dark-blue);
+@include backgroundAndHoverableColor(light-blue);
+@include backgroundAndHoverableColor(white);
+@include backgroundAndHoverableColor(black);
+@include backgroundAndHoverableColor(grey1);
+@include backgroundAndHoverableColor(grey2);
+@include backgroundAndHoverableColor(orange1);
+@include backgroundAndHoverableColor(orange2);
+@include backgroundAndHoverableColor(blue);
+@include backgroundAndHoverableColor(light-turquoise);
+@include backgroundAndHoverableColor(green);
+@include backgroundAndHoverableColor(sand);
+
+.color--inherit {
+  color: inherit;
+}
+
+.color--transparent {
+  color: transparent;
+}
+
+.color--inheritHoverable {
+  &:hover,
+  &:active {
+    color: inherit;
   }
 }
 
-.hover-light-turquoise {
+.color--background-transparent {
-  &:hover {
+  background-color: transparent;
-    color: $light-turquoise;
+}
-  }
-}
-
-.hover-light-blue {
-  &:hover {
-    color: $light-blue;
-  }
-}
-
-.hover-blue {
-  &:hover {
-    color: $blue;
-  }
-}

src/components/Accordion/Accordion.scss

@@ -1,12 +1,13 @@
 @import "../../assets/scss/globals";
 
+
 .accordion {
   margin: 0.2em;
   padding: 0.2em;
   display: flex;
   flex-flow: column nowrap;
   border-style: solid;
-  border-color: $light-turquoise;
+  border-color: color(light-turquoise);
   border-width: 1px;
 
   &__desc {
@@ -38,7 +39,7 @@
   button {
     display: flex;
     flex-flow: row nowrap;
-    background-color: $white;
+    background-color: color(white);
     width: 100%;
     margin: 0;
     padding: 0;
@@ -51,7 +52,7 @@
     flex: 1;
     text-align: center;
     padding-left: 1em;
-    color: $blue;
+    color: color(blue);
     font-size: 1.125em;
     margin: auto;
   }

src/components/AccordionIcon/AccordionIcon.scss

@@ -1,9 +1,10 @@
 @import "../../assets/scss/globals";
 
+
 .accordion-icon {
   display: flex;
-  background-color: $blue;
+  background-color: color(blue);
-  color: $white;
+  color: color(white);
   align-items: center;
   justify-content: center;
   min-width: 40px;
@@ -14,7 +15,7 @@
   font-size: 40px;
 
   &.open {
-    background-color: $orange1;
+    background-color: color(orange1);
   }
 }
 

src/components/AdminSidebarLink/AdminSidebarLink.scss

@@ -1,13 +1,14 @@
 @import "../../assets/scss/globals";
 
+
 .admin-sidebar-link {
   padding: 1rem 3rem 1rem 1rem;
-  background-color: $blue;
+  background-color: color(blue);
   letter-spacing: 3px;
   text-transform: uppercase;
   line-height: 20px;
   font-weight: bold;
-  border-left: 4px solid $blue;
+  border-left: 4px solid color(blue);
   white-space: nowrap;
 
   @media screen and (max-width: 800px - 1px) {
@@ -16,7 +17,7 @@
 
   &:hover,
   &.active {
-    border-left: 4px solid $white;
+    border-left: 4px solid color(white);
   }
 
   &::after {

src/components/AsideSection/AsideSection.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .aside-section {
   display: flex;
   flex: 1;
@@ -8,27 +9,27 @@
   padding: 4rem;
 
   &.dark-blue {
-    background-color: $dark-blue;
+    background-color: color(dark-blue);
 
     h2 {
-      color: $light-blue;
+      color: color(light-blue);
     }
 
     p {
-      color: $white;
+      color: color(white);
     }
   }
 
   &.light-turquoise {
-    background-color: $light-turquoise;
+    background-color: color(light-turquoise);
 
     h2,
     p {
-      color: $dark-blue;
+      color: color(dark-blue);
     }
   }
 
   &.light-blue {
-    background-color: $light-blue;
+    background-color: color(light-blue);
   }
 }

src/components/AsideSection/AsideSection.tsx

@@ -1,18 +1,24 @@
 import * as React from "react";
 import "./AsideSection.scss";
+import ColorDiv from "../ColorDiv";
+import { ColorDivProps } from "../ColorDiv/ColorDiv";
 
 export interface AsideSectionProps {
-  className: string;
+  className?: string;
 }
-export interface AsideSectionState {}
+export interface AsideSectionState { }
 
-class AsideSection extends React.Component<AsideSectionProps, AsideSectionState> {
+class AsideSection extends React.Component<AsideSectionProps & ColorDivProps, AsideSectionState> {
   render() {
-    const {children, className} = this.props;
+    const { children, className, ...props } = this.props;
+    const classNames = [
+      "aside-section",
+    ];
+    if (className) classNames.push(className);
     return (
-      <div className={`${className} aside-section`}>
+      <ColorDiv className={classNames.join(" ")} {...props}>
         {children}
-      </div>
+      </ColorDiv>
     );
   }
 }

src/components/Button/Button.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .button {
   -webkit-appearance: none;
   border-radius: none;
@@ -14,17 +15,17 @@
   }
 
   &.hero {
-    background-color: $dark-blue;
+    background-color: color(dark-blue);
-    color: $blue;
+    color: color(blue);
     font-weight: 800;
     letter-spacing: 1.5px;
-    border: 1px solid $light-turquoise;
+    border: 1px solid color(light-turquoise);
   }
 
   &.filled {
     justify-content: center;
-    background-color: $blue;
+    background-color: color(blue);
-    color: $white;
+    color: color(white);
     font-weight: 800;
     letter-spacing: 1.5px;
     border: none;

src/components/Card/Card.scss

@@ -1,8 +1,9 @@
 @import "../../assets/scss/globals";
 
+
 .card {
-  background-color: $white;
+  background-color: color(white);
-  color: $dark-blue;
+  color: color(dark-blue);
   white-space: wrap;
   margin: 1rem 1rem;
   display: flex;
@@ -30,7 +31,7 @@
     font-size: 1.5rem;
     text-align: center;
     font-weight: 300;
-    color: $black;
+    color: color(black);
   }
 
   &__image {
@@ -68,7 +69,7 @@
     margin: 0 0 0.5rem;
     font-weight: 200;
     line-height: 22px;
-    color: $black;
+    color: color(black);
 
     @media screen and (max-width: 1200px - 1px) {
       margin: 0.5rem 0;
@@ -77,7 +78,7 @@
   }
 
   &__datetime {
-    color: $orange1;
+    color: color(orange1);
     display: flex;
     justify-content: center;
     text-align: center;

src/components/ColorDiv/ColorDiv.scss

@@ -0,0 +1,66 @@
+@import "../../assets/scss/globals";
+
+.color-div {
+  @mixin hoverableColor($colorName) {
+    &__#{$colorName} {
+      color: color($colorName);
+    }
+
+    &__#{$colorName}Hoverable {
+      &:hover,
+      &:active {
+        color: hover($colorName);
+      }
+    }
+  }
+
+  @mixin backgroundColor($colorName) {
+    &__background_#{$colorName} {
+      background-color: color($colorName);
+    }
+
+    &__background_#{$colorName}Hoverable {
+      &:hover,
+      &:active {
+        background-color: hover($colorName);
+      }
+    }
+  }
+
+  @mixin backgroundAndHoverableColor($colorName) {
+    @include hoverableColor($colorName);
+    @include backgroundColor($colorName);
+  }
+
+  @include backgroundAndHoverableColor(dark-blue);
+  @include backgroundAndHoverableColor(light-blue);
+  @include backgroundAndHoverableColor(white);
+  @include backgroundAndHoverableColor(black);
+  @include backgroundAndHoverableColor(grey1);
+  @include backgroundAndHoverableColor(grey2);
+  @include backgroundAndHoverableColor(orange1);
+  @include backgroundAndHoverableColor(orange2);
+  @include backgroundAndHoverableColor(blue);
+  @include backgroundAndHoverableColor(light-turquoise);
+  @include backgroundAndHoverableColor(green);
+  @include backgroundAndHoverableColor(sand);
+
+  &__inherit {
+    color: inherit;
+  }
+
+  &__transparent {
+    color: transparent;
+  }
+
+  &__inheritHoverable {
+    &:hover,
+    &:active {
+      color: inherit;
+    }
+  }
+
+  &__background_transparent {
+    background-color: transparent;
+  }
+}

src/components/ColorDiv/ColorDiv.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import "./ColorDiv.scss";
+import { ColorEnum, getColor, getBgColor, getHoverColor, getBgHoverColor } from "../..";
+
+export interface ColorDivProps extends React.HTMLAttributes<HTMLDivElement> {
+  textColor?: ColorEnum;
+  backgroundColor?: ColorEnum;
+  hoverColor?: ColorEnum;
+  backgroundHoverColor?: ColorEnum;
+}
+export interface ColorDivState { }
+
+
+class ColorDiv extends React.Component<ColorDivProps, ColorDivState> {
+  render() {
+    const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props;
+    const classNames = [];
+    if (className) classNames.push(className);
+    if (textColor !== undefined) classNames.push(getColor(textColor));
+    if (backgroundColor !== undefined) classNames.push(getBgColor(backgroundColor));
+    if (hoverColor !== undefined) classNames.push(getHoverColor(hoverColor));
+    if (backgroundHoverColor !== undefined) classNames.push(getBgHoverColor(backgroundHoverColor));
+    return (
+      <div {...props} className={classNames.join(" ")} >
+        {children}
+      </div>
+    );
+  }
+}
+
+export default ColorDiv;

src/components/ColorDiv/index.ts

@@ -0,0 +1,2 @@
+import ColorDiv from "./ColorDiv";
+export default ColorDiv;

src/components/ContactCard/ContactCard.scss

@@ -1,8 +1,9 @@
 @import "../../assets/scss/globals";
 
+
 .contact-card {
-  background-color: $white;
+  background-color: color(white);
-  color: $dark-blue;
+  color: color(dark-blue);
   white-space: wrap;
   margin: 1rem 1rem;
   display: flex;
@@ -30,7 +31,7 @@
     font-size: 1.5rem;
     text-align: center;
     font-weight: 300;
-    color: $black;
+    color: color(black);
   }
 
   &__image {
@@ -68,7 +69,7 @@
     margin: 0 0 0.5rem;
     font-weight: 200;
     line-height: 22px;
-    color: $black;
+    color: color(black);
 
     @media screen and (max-width: 1200px - 1px) {
       margin: 0.5rem 0;
@@ -77,7 +78,7 @@
   }
 
   &__datetime {
-    color: $orange1;
+    color: color(orange1);
     display: flex;
     justify-content: center;
     text-align: center;

src/components/DropDownBox/DropDownBox.scss

@@ -1,7 +1,8 @@
 @import "../../assets/scss/globals";
 
+
 .drop-down-box {
-  background-color: $white;
+  background-color: color(white);
   margin-top: 0.8rem;
   position: absolute;
   left: 0;
@@ -10,7 +11,7 @@
 
   &,
   & a {
-    color: $dark-blue !important;
+    color: color(dark-blue) !important;
     text-transform: uppercase;
   }
 }

src/components/Footer/Footer.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .footer {
   display: flex;
   flex-direction: column;
@@ -9,19 +10,19 @@
   }
 
   h4 {
-    color: $light-blue;
+    color: color(light-blue);
     padding: 1.5rem 0;
   }
 
   & a {
-    color: $white;
+    color: color(white);
     text-decoration: underline;
     padding: 0.4rem 0;
     font-size: 14px;
   }
 
   & p {
-    color: $white;
+    color: color(white);
     margin: 0;
     padding: 0.4rem 0;
     font-size: 14px;
@@ -71,7 +72,7 @@
   &__copyright {
     display: flex;
     flex-flow: row nowrap;
-    background-color: $black;
+    background-color: color(black);
     text-align: center;
     justify-content: center;
     font-size: 12px;

src/components/Header/Header.scss

@@ -1,11 +1,12 @@
 @import "../../assets/scss/globals";
 
+
 .header {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   padding: 0 1rem;
-  background-color: $dark-blue;
+  background-color: color(dark-blue);
 
   @media screen and (min-width: 600px) {
     position: sticky;

src/components/HeroAsideItem/HeroAsideItem.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .hero-aside-item {
   max-width: 300px;
   line-height: 16px;
@@ -25,11 +26,11 @@
   }
 
   h6 {
-    color: $blue;
+    color: color(blue);
     font-weight: 600;
   }
 
   h6:hover {
-    color: $white;
+    color: color(white);
   }
 }

src/components/HeroAsideSection/HeroAsideSection.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .hero-aside-section {
   display: flex;
   flex-flow: column nowrap;
@@ -15,28 +16,28 @@
   padding: 3rem 1rem 2rem;
 
   &.dark-blue {
-    background-color: $dark-blue;
+    background-color: color(dark-blue);
 
     h2 {
-      color: $light-blue;
+      color: color(light-blue);
     }
 
     p {
       font-weight: 100;
-      color: $white;
+      color: color(white);
     }
   }
 
   &.light-turquoise {
-    background-color: $light-turquoise;
+    background-color: color(light-turquoise);
 
     h2,
     p {
-      color: $dark-blue;
+      color: color(dark-blue);
     }
   }
 
   &.light-blue {
-    background-color: $light-blue;
+    background-color: color(light-blue);
   }
 }

src/components/HeroAsideSection/HeroAsideSection.tsx

@@ -1,24 +1,21 @@
 import * as React from "react";
 import "./HeroAsideSection.scss";
-import { colors, ColorEnum } from "../../index";
+import ColorDiv from "../ColorDiv/index";
+import { ColorDivProps } from "../ColorDiv/ColorDiv";
 
 
-export interface HeroAsideSectionProps {
+export interface HeroAsideSectionProps { }
-  backgroundColor?: ColorEnum;
-}
 export interface HeroAsideSectionState { }
 
-class HeroAsideSection extends React.Component<HeroAsideSectionProps, HeroAsideSectionState> {
+class HeroAsideSection extends React.Component<HeroAsideSectionProps & ColorDivProps, HeroAsideSectionState> {
   render() {
-    const { backgroundColor } = this.props;
+    const className = `hero-aside-section`;
-    const bgClass = colors.get(backgroundColor);
-    const className = `hero-aside-section ${bgClass}`;
     return (
-      <div className={className}>
+      <ColorDiv className={className} {...this.props}>
         <div className="hero-aside-section-block">
           {this.props.children}
         </div>
-      </div>
+      </ColorDiv>
     );
   }
 }

src/components/MainSection/MainSection.tsx

@@ -1,19 +1,25 @@
 import * as React from "react";
 import "./MainSection.scss";
+import ColorDiv from "../ColorDiv";
+import { ColorDivProps } from "../ColorDiv/ColorDiv";
 
-export interface MainSectionProps {}
+export interface MainSectionProps { }
-export interface MainSectionState {}
+export interface MainSectionState { }
 
-class MainSection extends React.Component<MainSectionProps, MainSectionState> {
+class MainSection extends React.Component<MainSectionProps & ColorDivProps, MainSectionState> {
   constructor(props: MainSectionProps) {
     super(props);
   }
   render() {
-    const {children} = this.props;
+    const { children, className, ...props } = this.props;
+    const classNames = [
+      "main-section",
+    ];
+    if (className) classNames.push(className);
     return (
-      <div className="main-section">
+      <ColorDiv className={classNames.join(" ")} {...props}>
         {children}
-      </div>
+      </ColorDiv>
     );
   }
 }

src/components/NavbarChildLink/NavbarChildLink.scss

@@ -1,4 +1,6 @@
 @import "../../assets/scss/globals";
+
+
 $border-width: 2px;
 
 .navbar-child-link {
@@ -9,14 +11,14 @@ $border-width: 2px;
   font-weight: 400;
 
   @media screen and (max-width: 1200px - 1px) {
-    border-bottom: 1px dotted $light-blue;
+    border-bottom: 1px dotted color(light-blue);
     margin-left: 2rem;
     padding-left: 0;
   }
 
   &:hover {
     @media screen and (min-width: 1200px) {
-      background-color: $light-blue;
+      background-color: color(light-blue);
     }
   }
 }

src/components/NavbarDropdownLink/NavbarDropdownLink.scss

@@ -1,4 +1,6 @@
 @import "../../assets/scss/globals";
+
+
 $border-width: 2px;
 
 .navbar-dropdown-link {
@@ -11,7 +13,7 @@ $border-width: 2px;
   padding: 20px 0;
 
   @media screen and (max-width: 1200px - 1px) {
-    border-bottom: 1px solid $light-blue;
+    border-bottom: 1px solid color(light-blue);
   }
 }
 
@@ -25,7 +27,7 @@ $border-width: 2px;
       bottom: 5px;
       left: 0;
       width: 100%;
-      border-bottom: 4px solid $light-blue;
+      border-bottom: 4px solid color(light-blue);
     }
   }
 }

src/components/Navigation/Navigation.scss

@@ -1,12 +1,14 @@
 @import "../../assets/scss/globals";
+
+
 $border-width: 2px;
 
 .navigation,
 .navigation-mobile-menu {
   a,
   a:-webkit-any-link {
-    fill: $light-blue;
+    fill: color(light-blue);
-    color: $light-blue;
+    color: color(light-blue);
   }
 }
 
@@ -17,7 +19,7 @@ $border-width: 2px;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
-  color: $light-blue;
+  color: color(light-blue);
   margin-left: 5rem;
 
   @media screen and (min-width: 600px) and (max-width: 1200px - 1px) {
@@ -41,8 +43,8 @@ $border-width: 2px;
 
     a,
     a:-webkit-any-link {
-      fill: $white;
+      fill: color(white);
-      color: $white;
+      color: color(white);
     }
   }
 
@@ -66,8 +68,8 @@ $border-width: 2px;
     svg {
       width: 26px;
       height: 26px;
-      fill: $white;
+      fill: color(white);
-      color: $white;
+      color: color(white);
     }
   }
 }

src/components/PageLink/PageLink.scss

@@ -1,7 +1,8 @@
 @import "../../assets/scss/globals";
 
+
 .page-link {
-  border-left-color: $blue;
+  border-left-color: color(blue);
   border-left-width: 0.8rem;
   border-left-style: solid;
   margin: 0 1rem 1rem 0;
@@ -10,7 +11,7 @@
     display: flex;
     margin-block-start: 0;
     margin-block-end: 0;
-    color: $dark-blue;
+    color: color(dark-blue);
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -21,7 +22,7 @@
   }
 
   & a {
-    color: $dark-blue;
+    color: color(dark-blue);
     margin-left: 1rem;
     display: flex;
   }

src/components/PageSection/PageSection.scss

@@ -1,7 +1,7 @@
 @import "../../assets/scss/globals";
 
+
 .page-section {
-  background-color: $dark-blue;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
@@ -17,31 +17,6 @@
     }
   }
 
-  &.dark-blue {
-    background-color: $dark-blue;
-    color: $white;
-  }
-
-  &.white {
-    background-color: $white;
-    color: $dark-blue;
-  }
-
-  &.orange {
-    background-color: $orange1;
-    color: $white;
-  }
-
-  &.light-turquoise {
-    background-color: $light-turquoise;
-    color: $dark-blue;
-  }
-
-  &.light-blue {
-    background-color: $light-blue;
-    color: $black;
-  }
-
   &.center {
     justify-content: center;
   }
@@ -53,7 +28,7 @@
       bottom: 0;
       width: 98%;
       left: 1%;
-      border-bottom: 1px solid rgba($blue, 0.4);
+      border-bottom: 1px solid rgba(color(blue), 0.4);
     }
   }
 }

src/components/PageSection/PageSection.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import "./PageSection.scss";
-import { colors, ColorEnum } from "../../index";
+import ColorDiv from "../ColorDiv/index";
+import { ColorDivProps } from "../ColorDiv/ColorDiv";
 
 export interface PageSectionProps {
-  backgroundColor: ColorEnum;
   center?: boolean;
   bottomBorder?: boolean;
   cardSection?: boolean;  // does section contain a grid of cards
@@ -11,18 +11,25 @@ export interface PageSectionProps {
 }
 export interface PageSectionState { }
 
-class PageSection extends React.Component<PageSectionProps, PageSectionState> {
+class PageSection extends React.Component<PageSectionProps & ColorDivProps, PageSectionState> {
   render() {
-    const { backgroundColor, children, center, bottomBorder, cardSection, fullSize } = this.props;
+    const { children, className, center, bottomBorder, cardSection, fullSize, ...props } = this.props;
     const centerClass = center ? "center" : "";
     const borderClass = bottomBorder ? "bottom-border" : "";
     const cardsClass = cardSection ? "card-section" : "";
     const nonPaddedClass = fullSize ? "" : "padded";
-    const className = `page-section ${colors.get(backgroundColor)} ${centerClass} ${borderClass} ${cardsClass} ${nonPaddedClass}`;
+    const classNames = [
+      "page-section",
+      centerClass,
+      borderClass,
+      cardsClass,
+      nonPaddedClass
+    ];
+    if (className) classNames.push(className);
     return (
-      <div className={className}>
+      <ColorDiv className={classNames.join(" ")} {...props}>
         {children}
-      </div>
+      </ColorDiv>
     );
   }
 }

src/components/Ribbon/Ribbon.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .ribbon {
   display: flex;
   flex-flow: row nowrap;
@@ -9,7 +10,6 @@
   margin: auto;
 
   p {
-    color: $white;
     font-size: 2rem;
     font-weight: 100;
     line-height: 30px;

src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .signup-questions-widget {
   button.add-link {
     background: none;
@@ -8,7 +9,7 @@
   }
 
   button.remove {
-    background-color: $orange1;
+    background-color: color(orange1);
     margin-left: auto;
     margin-bottom: 0.5rem;
     padding: 0.3rem 0.5rem;
@@ -20,6 +21,6 @@
     display: flex;
     flex-flow: column nowrap;
     padding: 0.5rem;
-    background-color: $light-blue;
+    background-color: color(light-blue);
   }
 }

src/components/SponsorReel/SponsorReel.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .sponsor-reel {
   text-align: center;
 
@@ -7,7 +8,7 @@
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 500;
-    color: $dark-blue;
+    color: color(dark-blue);
     margin: 1rem 0 4rem;
     font-size: 14px;
 
@@ -17,7 +18,7 @@
   }
 
   a {
-    color: $blue;
+    color: color(blue);
     text-decoration: underline;
   }
 

src/components/SponsorReel/SponsorReel.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 import "./SponsorReel.scss";
+import TextAnchor from "../TextAnchor";
+import { ColorEnum } from "../..";
 
-export interface SponsorReelProps {}
+export interface SponsorReelProps { }
-export interface SponsorReelState {}
+export interface SponsorReelState { }
 
 class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
   render() {
@@ -17,7 +19,7 @@ class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
           <Link to="#"><img src="https://placehold.it/200x200" /></Link>
           <Link to="#"><img src="https://placehold.it/200x200" /></Link>
         </div>
-        <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
+        <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.LightTurquoise} to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</TextAnchor>
       </div>
     );
   }

src/components/TextAnchor/TextAnchor.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import "./TextAnchor.scss";
 import { Link } from "react-router-dom";
-import { ColorEnum, colors } from "../../index";
+import { ColorEnum, getColor, getHoverColor } from "../..";
 
 export enum TextSize {
   Small,
@@ -21,18 +21,18 @@ export interface TextAnchorProps {
   size?: TextSize;
   to: string;
   style?: any;
-  color?: ColorEnum;
+  textColor?: ColorEnum;
   hoverColor?: ColorEnum;
 }
 export interface TextAnchorState { }
 
 class TextAnchor extends React.Component<TextAnchorProps, TextAnchorState> {
   render() {
-    const { children, size, to, style, color, hoverColor } = this.props;
+    const { children, size, to, style, textColor, hoverColor } = this.props;
-    const className = `text-anchor
+    const classColor = textColor !== undefined ? getColor(textColor) : getColor(ColorEnum.DarkBlue);
-     ${sizes.get(size !== undefined ? size : TextSize.Small)}
+    const classHoverColor = hoverColor !== undefined ? getHoverColor(hoverColor) : getHoverColor(ColorEnum.Blue);
-     ${color !== undefined ? colors.get(color) : "dark-blue"}
+    const classSize = size !== undefined ? sizes.get(size) : sizes.get(TextSize.Small);
-      hover-${hoverColor !== undefined ? colors.get(hoverColor) : "blue"}`;
+    const className = `text-anchor ${classSize} ${classColor} ${classHoverColor}`;
     if (to.startsWith("/")) {
       return (
         <Link style={style} to={to} className={className}>

src/index.scss

@@ -8,10 +8,10 @@
 html,
 body {
   font-size: 16px;
-  background-color: $dark-blue;
+  background-color: color(dark-blue);
   height: 100%;
   font-family: $font;
-  color: $white;
+  color: color(white);
   overflow: auto;
 }
 
@@ -112,151 +112,5 @@ p {
 a,
 a:hover {
   text-decoration: none;
-  color: $white;
+  color: color(white);
-}
-
-.page {
-  &__dark-blue {
-    background-color: $dark-blue;
-
-    h1 {
-      color: $white;
-    }
-
-    h2 {
-      color: $light-turquoise;
-    }
-
-    h3 {
-      color: $blue;
-    }
-
-    p {
-      color: $white;
-    }
-
-    a {
-      color: $white;
-    }
-  }
-
-  &__white {
-    background-color: $white;
-
-    h1 {
-      color: $black;
-    }
-
-    h2 {
-      color: $black;
-    }
-
-    h3 {
-      color: $orange1;
-    }
-
-    p {
-      color: $black;
-    }
-
-    a {
-      color: $blue;
-    }
-  }
-
-  &__orange {
-    background-color: $orange1;
-
-    h1 {
-      color: $white;
-    }
-
-    h2 {
-      color: $white;
-    }
-
-    h3 {
-      color: $white;
-    }
-
-    p {
-      color: $white;
-    }
-
-    a {
-      color: $white;
-    }
-  }
-
-  &__light-turquoise {
-    background-color: $light-turquoise;
-
-    h1 {
-      color: $dark-blue;
-    }
-
-    h2 {
-      color: $dark-blue;
-    }
-
-    h3 {
-      color: $dark-blue;
-    }
-
-    p {
-      color: $dark-blue;
-    }
-
-    a {
-      color: $dark-blue;
-    }
-  }
-
-  &__blue {
-    background-color: $blue;
-
-    h1 {
-      color: $dark-blue;
-    }
-
-    h2 {
-      color: $dark-blue;
-    }
-
-    h3 {
-      color: $dark-blue;
-    }
-
-    p {
-      color: $white;
-    }
-
-    a {
-      color: $white;
-    }
-  }
-
-  &__light-blue {
-    background-color: $light-blue;
-
-    h1 {
-      color: $dark-blue;
-    }
-
-    h2 {
-      color: $dark-blue;
-    }
-
-    h3 {
-      color: $dark-blue;
-    }
-
-    p {
-      color: $dark-blue;
-    }
-
-    a {
-      color: $dark-blue;
-    }
-  }
 }

src/index.tsx

@@ -5,28 +5,49 @@ import { AppContainer } from "react-hot-loader";
 import Routes from "./routes";
 import "./index.scss";
 
+export enum ColorEnum {
+  DarkBlue,
+  LightBlue,
+  White,
+  Black,
+  Grey1,
+  Grey2,
+  Orange1,
+  Orange2,
+  Blue,
+  LightTurquoise,
+  Green,
+  Sand,
+  Transparent,
+  Inherit,
+}
+
+const colors = new Map<ColorEnum, string>([
+  [ColorEnum.DarkBlue, "dark-blue"],
+  [ColorEnum.LightBlue, "light-blue"],
+  [ColorEnum.White, "white"],
+  [ColorEnum.Black, "black"],
+  [ColorEnum.Grey1, "grey1"],
+  [ColorEnum.Grey2, "grey2"],
+  [ColorEnum.Orange1, "orange1"],
+  [ColorEnum.Orange2, "orange2"],
+  [ColorEnum.Blue, "blue"],
+  [ColorEnum.LightTurquoise, "light-turquoise"],
+  [ColorEnum.Green, "green"],
+  [ColorEnum.Sand, "sand"],
+  [ColorEnum.Transparent, "transparent"],
+  [ColorEnum.Inherit, "inherit"]
+]);
+
+export const getColor = (color: ColorEnum): string => `color-div__${colors.get(color)}`;
+export const getBgColor = (color: ColorEnum): string => `color-div__background_${colors.get(color)}`;
+export const getHoverColor = (color: ColorEnum): string => `color-div__${colors.get(color)}Hoverable`;
+export const getBgHoverColor = (color: ColorEnum): string => `color-div__background_${colors.get(color)}Hoverable`;
+
 console.log("Using API URL: ", process.env.API_URL);
 
 const rootEl = document.getElementById("root");
 
-export enum ColorEnum {
-  DarkBlue,
-  White,
-  Orange,
-  LightTurquoise,
-  LightBlue,
-  Blue,
-}
-
-export const colors = new Map<ColorEnum, string>([
-  [ColorEnum.DarkBlue, "dark-blue"],
-  [ColorEnum.White, "white"],
-  [ColorEnum.Orange, "orange"],
-  [ColorEnum.LightTurquoise, "light-turquoise"],
-  [ColorEnum.LightBlue, "light-blue"],
-  [ColorEnum.Blue, "blue"],
-]);
-
 render(
   <AppContainer>
     <BrowserRouter>

src/pages/AdminCommonPage/AdminCommonPage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .admin-container {
   display: flex;
   flex-flow: row nowrap;
@@ -33,9 +34,9 @@
   input[type="submit"] {
     border: none;
     outline: none;
-    background-color: $orange2;
+    background-color: color(orange2);
     padding: 0.5rem 1rem;
-    color: $white;
+    color: color(white);
   }
 
   h1 {
@@ -44,17 +45,17 @@
 
   .error {
     margin-bottom: 0.5rem;
-    border: 1px solid $orange2;
+    border: 1px solid color(orange2);
     padding: 8px 16px;
-    color: $orange2;
+    color: color(orange2);
     display: inline-block;
   }
 
   .success {
     margin-bottom: 0.5rem;
-    border: 1px solid $green;
+    border: 1px solid color(green);
     padding: 8px 16px;
-    color: $green;
+    color: color(green);
     display: inline-block;
   }
 
@@ -65,7 +66,7 @@
     margin-bottom: 1rem;
 
     &:hover {
-      color: $orange2;
+      color: color(orange2);
     }
 
     img {

src/pages/AdminEventPage/AdminEventPage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .admin-event-page {
   table {
     border-collapse: collapse;
@@ -8,11 +9,11 @@
   table,
   th,
   td {
-    border: 1px solid $white;
+    border: 1px solid color(white);
     padding: 0.5rem;
 
     a {
-      color: $orange1;
+      color: color(orange1);
       text-decoration: underline;
     }
   }

src/pages/AdminFeedPage/AdminFeedPage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .admin-feed-page {
   table {
     border-collapse: collapse;
@@ -8,11 +9,11 @@
   table,
   th,
   td {
-    border: 1px solid $white;
+    border: 1px solid color(white);
     padding: 0.5rem;
 
     a {
-      color: $orange1;
+      color: color(orange1);
       text-decoration: underline;
     }
   }

src/pages/AdminSignupPage/AdminSignupPage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .admin-signup-page {
   table {
     border-collapse: collapse;
@@ -8,11 +9,11 @@
   table,
   th,
   td {
-    border: 1px solid $white;
+    border: 1px solid color(white);
     padding: 0.5rem;
 
     a {
-      color: $orange1;
+      color: color(orange1);
       text-decoration: underline;
     }
   }

src/pages/EventCreatePage/EventCreatePage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .event-create-page {
   width: 100%;
 
@@ -34,8 +35,8 @@
   }
 
   button {
-    background-color: $blue;
+    background-color: color(blue);
-    color: $white;
+    color: color(white);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;

src/pages/FeedCreatePage/FeedCreatePage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .post-create-page {
   width: 100%;
 
@@ -34,8 +35,8 @@
   }
 
   button {
-    background-color: $blue;
+    background-color: color(blue);
-    color: $white;
+    color: color(white);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;

src/pages/FrontPage/FrontPage.tsx

@@ -9,8 +9,7 @@ import { StaticContext } from "../../server/StaticContext";
 // @ts-ignore
 import * as BeerImage from "../../assets/img/beer.jpeg";
 import PageSection from "../../components/PageSection";
-import { ColorEnum as PageSectionColor } from "../../index";
+import { ColorEnum as PageSectionColor, ColorEnum } from "../../index";
-import { ColorEnum as HeroAsideColor } from "../../index";
 
 import PageLink from "../../components/PageLink/PageLink";
 import HeroMainSection from "../../components/HeroMainSection";
@@ -113,7 +112,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             </div>
 
           </HeroMainSection>
-          <HeroAsideSection backgroundColor={HeroAsideColor.DarkBlue}>
+          <HeroAsideSection textColor={ColorEnum.LightBlue} backgroundColor={ColorEnum.DarkBlue}>
             <HeroAsideItem
               title="Vasta-aloittanut opiskelija"
               linkHref="/kilta/fuksi"
@@ -160,10 +159,10 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             </PageLink>
           </div>
         </PageSection>
-        <PageSection backgroundColor={PageSectionColor.Orange}>
+        <PageSection backgroundColor={PageSectionColor.Orange1}>
           <Ribbon>
             <h3>Sössöä vuodesta 1969.</h3>
-            <TextAnchor size={TextSize.SmallRibbon} to="https://sosso.fi">
+            <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
               <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
             </TextAnchor>
           </Ribbon>

src/pages/GuildPage/GuildPage.tsx

@@ -10,8 +10,7 @@ import HeroAsideSection from "../../components/HeroAsideSection";
 import HeroAsideItem from "../../components/HeroAsideItem";
 import Ribbon from "../../components/Ribbon";
 import InfoBox from "../../components/InfoBox";
-import { ColorEnum as PageSectionColor } from "../../index";
+import { ColorEnum } from "../../index";
-import { ColorEnum as HeroAsideColor } from "../../index";
 import Accordion from "../../components/Accordion";
 import TextAnchor from "../../components/TextAnchor/index";
 import { TextSize } from "../../components/TextAnchor/TextAnchor";
@@ -27,13 +26,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
           <link rel="canonical" href="https://sik.ayy.fi/kilta" />
         </Helmet>
         <div className="front-page">
-          <PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
+          <PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
             <HeroMainSection>
               <h1>Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista</h1>
-              <p>Vapaa-ajan <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
+              <p>Vapaa-ajan <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
               <p>Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.</p>
             </HeroMainSection>
-            <HeroAsideSection backgroundColor={HeroAsideColor.LightTurquoise}>
+            <HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
               <HeroAsideItem
                 title="Toverielämää ja sähkötekniikkaa"
                 linkHref="/kilta/tehtavat"
@@ -56,25 +55,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </HeroAsideItem>
             </HeroAsideSection>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.White}>
+          <PageSection backgroundColor={ColorEnum.White}>
-            <AsideSection className="page__white" />
+            <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
-            <MainSection>
+            <MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
               <h3>Killan tehtävät ja tarina</h3>
-              <p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
+              <p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja saunailtoja. Valinnanvaraa on, joten <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
-              esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja
-              saunailtoja. Valinnanvaraa on, joten <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella
-                                        saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi
-              tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
 
-              <p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/opinnot">opetusta</TextAnchor>. Kilta on mukana
+              <p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/opinnot">opetusta</TextAnchor>. Kilta on mukana kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun henkilöstöä lähemmäs kiltalaisia. Kilta avaa oven <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita, saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa uusista avoimista työpaikoista. Killalla on Otaniemen mukavin <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
-              kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun
-              henkilöstöä lähemmäs kiltalaisia.
-              Kilta avaa oven <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita,
-                                        saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
-                                        uusista avoimista työpaikoista.
-              Killalla on Otaniemen mukavin <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä
-                                        luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän
-              lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
 
               <h6>Takana lähes satavuotinen historia</h6>
 
@@ -98,11 +85,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               määritelmä kuuluukin: “teekkarius on kaikkea sitä, mitä teekkarit tekevät”. Yksi asia
               meitä kaikkia kuitenkin yhdistää. Opiskelemme jotain tekniikkaan liittyvää täällä
               Aalto-yliopistossa.
-              Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
+              Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
-              yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin
+              yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä kiinnostavaa.</p>
-                                        osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
-                                        Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
-              kiinnostavaa.</p>
 
               <p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
               tutustua, jotta saa jonkinlaisen kuvan siitä vahvasta teekkarihengestä, joka
@@ -110,7 +94,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat
               tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.</p>
             </MainSection>
-            <AsideSection className="page__white">
+            <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
               <div>
                 <PageLink to="/jasenedut/" desc="vuonna 2018&nbsp;›">
                   Yliopiston jäsenedut
@@ -126,27 +110,27 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </div>
             </AsideSection>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.LightBlue}>
+          <PageSection backgroundColor={ColorEnum.LightBlue} textColor={ColorEnum.DarkBlue}>
             <Ribbon>
               <p>Killan hallinto koostuu XXX henkilöstä.</p>
             </Ribbon>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.White}>
+          <PageSection backgroundColor={ColorEnum.White}>
-            <AsideSection className="page__white" />
+            <AsideSection backgroundColor={ColorEnum.White} />
-            <MainSection>
+            <MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} >
               <h2>Organisaatio</h2>
 
-              <p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
+              <p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
 
               <h6>Valtuuston toimintaa</h6>
 
-              <p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
+              <p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
 
               <h6>Hallituksen toimintaa</h6>
-              <p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
+              <p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
 
             </MainSection>
-            <AsideSection className="page__white">
+            <AsideSection backgroundColor={ColorEnum.White}>
               <div>
                 <PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">
                   Vuoden 2019 hallinto
@@ -157,13 +141,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </div>
             </AsideSection>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.DarkBlue}>
+          <PageSection backgroundColor={ColorEnum.DarkBlue}>
             <Ribbon>
-              <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
+              <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
             </Ribbon>
           </PageSection>
           <div style={{ display: "flex", }}>
-            <AsideSection className="page__light-turquoise">
+            <AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
               <h3>Miksi alkaa kilta-aktiiviksi?</h3>
               <p>
                 Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!
@@ -178,16 +162,16 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
                 » Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt
               </p>
             </AsideSection>
-            <AsideSection className="page__light-blue">
+            <AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightBlue}>
               <h3>Runsaasti erilaisia tehtäviä</h3>
               <p>
-                Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
+                Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
               </p>
               <p>
-                » Haluatko <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""} >valtuustoon</TextAnchor>, <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>hallitukseen</TextAnchor> tai <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>toimariksi</TextAnchor>?
+                » Haluatko <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""} >valtuustoon</TextAnchor>, <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>toimariksi</TextAnchor>?
               </p>
               <p>
-                » <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
+                » <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
               </p>
               <p>
                 » Lorem ipsum
@@ -195,8 +179,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
             </AsideSection>
           </div>
 
-          <PageSection backgroundColor={PageSectionColor.White}>
+          <PageSection backgroundColor={ColorEnum.White}>
-            <AsideSection className="page__white">
+            <AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
               <div>
                 <h2>Sähkötekniikan korkeakoulun toimikunnat</h2>
                 <p>
@@ -218,7 +202,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
                 <Accordion title="Ipsum" />
               </div>
             </AsideSection>
-            <AsideSection className="page__white">
+            <AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
               <div>
                 <h2>Jaokset—kokeile kiltatoimintaa vapaammin</h2>
                 <p>
@@ -227,23 +211,23 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </div>
             </AsideSection>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.Orange}>
+          <PageSection backgroundColor={ColorEnum.Orange1}>
             <Ribbon>
               <p>Jäsenedut vuonna 2019</p>
             </Ribbon>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.White}>
+          <PageSection backgroundColor={ColorEnum.White}>
-            <AsideSection className="page__white" />
+            <AsideSection backgroundColor={ColorEnum.White} />
-            <MainSection>
+            <MainSection textColor={ColorEnum.Black}>
               <h2>Aalto-yliopiston tarjoamat monenlaiset edut</h2>
               <p>
                 Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.
               </p>
               <p>
-                » <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
+                » <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
               </p>
             </MainSection>
-            <AsideSection className="page__white">
+            <AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
               <InfoBox>
                 <TextAnchor to={""}>Jäseneksi liittyminen</TextAnchor> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
               </InfoBox>

src/pages/SignUpPage/SignUpPage.tsx

@@ -3,7 +3,7 @@ import Helmet from "react-helmet";
 import "./SignUpPage.scss";
 import { getForm, SignupForm } from "../../models/SignupForm";
 import PageSection from "../../components/PageSection";
-import { ColorEnum as PageSectionColor } from "../../index";
+import { ColorEnum } from "../../index";
 import { Question, optionTypes } from "../../components/SignupQuestionsWidget";
 
 export interface SignUpPageProps {
@@ -117,7 +117,7 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
         <Helmet>
           <link rel="canonical" href={`https://sik.ayy.fi/signup/${id}`} />
         </Helmet>
-        <PageSection backgroundColor={PageSectionColor.DarkBlue}>
+        <PageSection backgroundColor={ColorEnum.DarkBlue}>
           {content}
         </PageSection>
       </div>

src/pages/SignupCreatePage/SignupCreatePage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .signup-create-page {
   width: 100%;
 
@@ -34,8 +35,8 @@
   }
 
   button {
-    background-color: $blue;
+    background-color: color(blue);
-    color: $white;
+    color: color(white);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;