Implement core atom component to represent a color palette

This is a card that renders a color box with the associated color code
as label and the title of a color palette.
The title can either float above the card (`floatingTitle` prop) or can
be placed within the card below the color code labels using the `title`
prop.

GH-112

src/components/atoms/core/ColorPaletteCard/ColorPaletteCard.jsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Card, CardWrapper, Color, ColorBox, FloatingTitle, Label, Palette, Title } from "./styled";
+
+const ColorCard = ({ color, ...passProps }) => (
+  <ColorBox {...passProps}>
+    <Color color={color} />
+    <Label>{color}</Label>
+  </ColorBox>
+);
+
+ColorCard.propTypes = {
+  color: PropTypes.string.isRequired
+};
+
+const BaseCard = ({ colors, title, ...passProps }) => (
+  <Card {...passProps}>
+    <Palette>
+      {colors.map(c => (
+        <ColorCard key={c} color={c} />
+      ))}
+    </Palette>
+    {title && <Title>{title}</Title>}
+  </Card>
+);
+
+BaseCard.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  title: PropTypes.string
+};
+
+BaseCard.defaultProps = {
+  colors: [],
+  title: ""
+};
+
+/**
+ * A card that renders a color box with the associated color code as label and the title of a color palette.
+ * The title can either float above the card (`floatingTitle` prop) or can be placed within the card below the color
+ * code labels.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const ColorPaletteCard = ({ colors, floatingTitle, title, ...passProps }) => {
+  if (floatingTitle) {
+    return (
+      <CardWrapper {...passProps}>
+        <FloatingTitle>{floatingTitle}</FloatingTitle>
+        <BaseCard colors={colors} title={title} />
+      </CardWrapper>
+    );
+  }
+  return <BaseCard colors={colors} title={title} {...passProps} />;
+};
+
+ColorPaletteCard.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  floatingTitle: PropTypes.string,
+  title: PropTypes.string
+};
+
+ColorPaletteCard.defaultProps = {
+  colors: [],
+  floatingTitle: "",
+  title: ""
+};
+
+export default ColorPaletteCard;

src/components/atoms/core/ColorPaletteCard/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+export { default } from "./ColorPaletteCard";

src/components/atoms/core/ColorPaletteCard/shared/styles.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides multiple styles for the `ColorPaletteCard` component.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+
+import { rgba } from "polished";
+
+import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const floatingLineColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord4, 0.8),
+  [MODE_DARK_NIGHT_FROST]: rgba(colors.nord4, 0.5)
+});
+
+const dropShadowColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.shadow.base[MODE_BRIGHT_SNOW_FLURRY], 0.35),
+  [MODE_DARK_NIGHT_FROST]: rgba(colors.shadow.base[MODE_DARK_NIGHT_FROST], 0.2)
+});
+
+const fontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord3,
+  [MODE_DARK_NIGHT_FROST]: colors.nord4
+});
+
+export { dropShadowColor, floatingLineColor, fontColor };

src/components/atoms/core/ColorPaletteCard/styled/Card.jsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+import { dropShadowColor } from "../shared/styles";
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
+});
+
+/**
+ * The main container of the color palette card.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const Card = styled.div`
+  display: flex;
+  background-color: ${backgroundColor};
+  flex-direction: column;
+  box-shadow: 0px 3px 6px 0px ${dropShadowColor};
+  border-radius: 0.5em;
+  transition: box-shadow ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out,
+    background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0px 10px 20px 2px ${dropShadowColor};
+  }
+`;
+
+export default Card;

src/components/atoms/core/ColorPaletteCard/styled/CardWrapper.jsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+import styled from "styled-components";
+
+/**
+ * The main wrapper of the color palette card and the floating title.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const CardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+`;
+
+export default CardWrapper;

src/components/atoms/core/ColorPaletteCard/styled/Color.jsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * The container representing a single color code.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const Color = styled.div`
+  background-color: ${({ color }) => color};
+  width: 100%;
+  height: 100%;
+`;
+
+export default Color;

src/components/atoms/core/ColorPaletteCard/styled/ColorBox.jsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * The container for a color code component.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const ColorBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 100%;
+  height: 10em;
+`;
+
+export default ColorBox;

src/components/atoms/core/ColorPaletteCard/styled/FloatingTitle.jsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { motion } from "styles/theme";
+
+import { floatingLineColor, fontColor } from "../shared/styles";
+
+/**
+ * The floating title of the color palette.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const FloatingTitle = styled.span`
+  font-size: 1.5em;
+  color: ${fontColor};
+  text-align: center;
+  transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+
+  &:after {
+    content: "";
+    display: block;
+    height: 1px;
+    background-color: ${floatingLineColor};
+    width: 70%;
+    margin: 1.2rem auto;
+  }
+`;
+
+export default FloatingTitle;

src/components/atoms/core/ColorPaletteCard/styled/Label.jsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { motion } from "styles/theme";
+
+import { fontColor } from "../shared/styles";
+
+/**
+ * The label for a color code.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const Label = styled.div`
+  font-size: 0.875em;
+  text-transform: uppercase;
+  padding: 0.8em 0;
+  text-align: center;
+  color: ${fontColor};
+  transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+`;
+
+export default Label;

src/components/atoms/core/ColorPaletteCard/styled/Palette.jsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * The container for all color code components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const Palette = styled.div`
+  display: flex;
+  overflow: hidden;
+`;
+
+export default Palette;

src/components/atoms/core/ColorPaletteCard/styled/Title.jsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { motion } from "styles/theme";
+
+import { floatingLineColor, fontColor } from "../shared/styles";
+
+/**
+ * The title of the color palette.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.6.0
+ */
+const Title = styled.div`
+  font-size: 1.1em;
+  color: ${fontColor};
+  text-align: center;
+  padding: 0.5em 0;
+  transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+
+  &:before {
+    content: "";
+    display: block;
+    height: 1px;
+    background-color: ${floatingLineColor};
+    width: 70%;
+    margin: 0.568em auto;
+    border-radius: 1px;
+  }
+`;
+
+export default Title;