Merge "darkened" section background color as new "tertiary" variant

This simplifies the usage of a "darkened" background color for sections
and containers by add it as new "tertiary" variant prop instead of
definiting it as shared style.

GH-115

src/components/containers/core/Section/Section.jsx

@@ -12,12 +12,18 @@ import styled from "styled-components";
 
 import { motion } from "styles/theme";
 
-import { baseBackgroundColor, primaryBackgroundColor, secondaryBackgroundColor } from "../shared/styles";
+import {
+  baseBackgroundColor,
+  primaryBackgroundColor,
+  secondaryBackgroundColor,
+  tertiaryBackgroundColor
+} from "../shared/styles";
 
 const variants = {
   base: baseBackgroundColor,
   primary: primaryBackgroundColor,
-  secondary: secondaryBackgroundColor
+  secondary: secondaryBackgroundColor,
+  tertiary: tertiaryBackgroundColor
 };
 
 /**

src/components/containers/core/shared/styles.js

@@ -31,4 +31,9 @@ const secondaryBackgroundColor = themedMode({
   [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST]
 });
 
-export { baseBackgroundColor, primaryBackgroundColor, secondaryBackgroundColor };
+const tertiaryBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.tertiary[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.tertiary[MODE_DARK_NIGHT_FROST]
+});
+
+export { baseBackgroundColor, primaryBackgroundColor, secondaryBackgroundColor, tertiaryBackgroundColor };

src/components/organisms/page/landing/shared/styles.js

@@ -27,10 +27,8 @@ import {
   Z_INDEX_ELEMENTS
 } from "styles/theme";
 
-import { darkenedSectionBackgroundColor } from "../../shared/styles";
-
 const darkenedThemeModeBackgroundbackgroundColor = themedMode({
-  [MODE_DARK_NIGHT_FROST]: darkenedSectionBackgroundColor
+  [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.tertiary[MODE_DARK_NIGHT_FROST]
 });
 
 const decorationBaseStyles = css`

src/components/organisms/page/shared/styles.js

@@ -15,9 +15,8 @@
  */
 
 import { css } from "styled-components";
-import { darken } from "polished";
 
-import { media, nord } from "styles/theme";
+import { media } from "styles/theme";
 
 const emptyStateIllustrationStyles = css`
   width: 7em;
@@ -43,11 +42,4 @@ const errorState404IllustrationStyles = css`
   `}
 `;
 
-/**
- * A darkened background color for landing page section components.
- *
- * @since 0.6.0
- */
-const darkenedSectionBackgroundColor = darken(0.045, nord.nord0);
-
-export { darkenedSectionBackgroundColor, emptyStateIllustrationStyles, errorState404IllustrationStyles };
+export { emptyStateIllustrationStyles, errorState404IllustrationStyles };

src/styles/theme/colors/background.js

@@ -26,6 +26,16 @@ const sectioningSecondary = {
   [MODE_DARK_NIGHT_FROST]: darken(0.025, nord.nord0)
 };
 
+/**
+ * A darkened background color for landing page section components.
+ *
+ * @since 0.6.0
+ */
+const tertiarySecondary = {
+  [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.08, nord.nord5),
+  [MODE_DARK_NIGHT_FROST]: darken(0.045, nord.nord0)
+};
+
 /**
  * Provides theme background colors.
  *
@@ -37,7 +47,8 @@ const background = {
   base,
   sectioning: {
     primary: sectioningPrimary,
-    secondary: sectioningSecondary
+    secondary: sectioningSecondary,
+    tertiary: tertiarySecondary
   }
 };