Initially implement shared theme mode styles and "mixins"

To simplify the usage of common and uniform theme mode styles some have been extracted into a new global `styles/shared` package that allows all components ti import them. There are also some "mixins" (functions) that can be used to customize some dynamic/variable attributes of these styles. GH-129
nordtheme · Mar 9, 2019 · f2e213a · f2e213a
1 parent f0e148e
commit f2e213a
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 49 deletions.
diff --git a/src/components/atoms/core/mdx-elements/Image.jsx b/src/components/atoms/core/mdx-elements/Image.jsx
@@ -11,35 +11,24 @@ import React from "react";
 import PropTypes from "prop-types";
 import GatsbyImage from "gatsby-image";
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 
 import { Figure } from "atoms/core/html-elements";
 import { contentMdxImageFluidPropTypes } from "data/graphql/fragmentPropTypes";
-import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+import { mixinDropShadowAmbientLight, mixinDropShadowDirectLight } from "styles/shared";
 
-const boxShadow = themedMode({
-  [MODE_BRIGHT_SNOW_FLURRY]: css`0px 10px 20px 2px ${rgba(colors.shadow.decent[MODE_BRIGHT_SNOW_FLURRY], 0.35)}`,
-  [MODE_DARK_NIGHT_FROST]: css`0px 10px 20px 2px ${rgba(colors.shadow.decent[MODE_DARK_NIGHT_FROST], 0.2)}`
-});
-
-const figcaptionFontColor = themedMode({
-  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.faded[MODE_BRIGHT_SNOW_FLURRY],
-  [MODE_DARK_NIGHT_FROST]: colors.font.faded[MODE_DARK_NIGHT_FROST]
-});
+import FigCaption from "./shared/FigCaption";
 
 const Img = styled(GatsbyImage)`
   border-radius: ${({ rounded }) => rounded && "8px"};
   max-width: ${({ fluid, fillSize }) => (fillSize < 100 ? `${fillSize}%` : `${fluid.presentationWidth}px`)};
   margin: ${({ hasCaption }) => `0 auto ${hasCaption ? "2em" : "6em"} auto`};
-  box-shadow: ${({ dropShadow }) => dropShadow && boxShadow};
-  transition: box-shadow ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
-`;
-
-const FigCaption = styled.figcaption`
-  color: ${figcaptionFontColor};
-  margin-bottom: 6em;
-  margin-left: 1em;
-  font-size: 0.875em;
+  box-shadow: ${({ dropShadow }) =>
+    dropShadow &&
+    css`
+      ${mixinDropShadowDirectLight()}, ${mixinDropShadowAmbientLight()}
+    `};
+  user-select: none;
+  pointer-events: none;
 `;
 
 /**
@@ -51,19 +40,15 @@ const FigCaption = styled.figcaption`
  * @see https://www.gatsbyjs.org/docs/working-with-images
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
  */
-const Image = ({ children, dropShadow, rounded, fillSize, src, ...passProps }) => (
-  <Figure>
-    <Img
-      dropShadow={dropShadow}
-      fillSize={fillSize}
-      fluid={src.fluid && src.fluid}
-      hasCaption={!!children}
-      rounded={rounded}
-      {...passProps}
-    />
-    {children && <FigCaption>{children}</FigCaption>}
-  </Figure>
-);
+const Image = ({ children, fillSize, dropShadow, rounded, ...passProps }) =>
+  children ? (
+    <Figure>
+      <Img dropShadow={dropShadow} fillSize={fillSize} hasCaption={!!children} rounded={rounded} {...passProps} />
+      {children && <FigCaption>{children}</FigCaption>}
+    </Figure>
+  ) : (
+    <Img dropShadow={dropShadow} fillSize={fillSize} hasCaption={!!children} rounded={rounded} {...passProps} />
+  );
 
 Image.propTypes = {
   children: PropTypes.node,

diff --git a/src/components/atoms/core/mdx-elements/shared/FigCaption.jsx b/src/components/atoms/core/mdx-elements/shared/FigCaption.jsx
@@ -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
+ */
+
+import styled from "styled-components";
+
+import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const figcaptionFontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.faded[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.font.faded[MODE_DARK_NIGHT_FROST]
+});
+
+/**
+ * A base HTML component that represents the `<figcaption>` element for a caption or legend describing the rest of the
+ * contents of its parent `<figure>` element.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
+ */
+const FigCaption = styled.figcaption`
+  color: ${figcaptionFontColor};
+  margin-bottom: 6em;
+  margin-left: 1em;
+  font-size: 0.875em;
+`;
+
+export default FigCaption;
diff --git a/src/components/organisms/page/ports/SectionCardGridFilter/styled/Card.jsx b/src/components/organisms/page/ports/SectionCardGridFilter/styled/Card.jsx
@@ -9,22 +9,17 @@
 
 import styled from "styled-components";
 import posed from "react-pose";
-import { rgba } from "polished";
 
-import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+import {
+  mixinDropShadowAmbientLight,
+  mixinDropShadowAmbientLightHover,
+  mixinDropShadowDirectLight,
+  mixinDropShadowDirectLightHover,
+  transitionThemedModeSwitch
+} from "styles/shared";
 
 import { componentBaseBackgroundColor } from "../shared/styles";
 
-const dropShadowColorAmbientLight = themedMode({
-  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.shadow.base[MODE_BRIGHT_SNOW_FLURRY], 0.1),
-  [MODE_DARK_NIGHT_FROST]: rgba(colors.shadow.base[MODE_DARK_NIGHT_FROST], 0.1)
-});
-
-const dropShadowColorDirectLight = themedMode({
-  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.shadow.base[MODE_BRIGHT_SNOW_FLURRY], 0.25),
-  [MODE_DARK_NIGHT_FROST]: rgba(colors.shadow.base[MODE_DARK_NIGHT_FROST], 0.25)
-});
-
 /**
  * The card component to represent a port project and its metadata.
  *
@@ -41,12 +36,11 @@ const Card = styled(posed.div())`
   height: auto;
   border-radius: 4px;
   background-color: ${componentBaseBackgroundColor};
-  box-shadow: 0 4px 6px ${dropShadowColorDirectLight}, 0 5px 7px ${dropShadowColorAmbientLight};
-  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;
+  box-shadow: ${mixinDropShadowDirectLight()}, ${mixinDropShadowAmbientLight()};
+  transition: ${transitionThemedModeSwitch("box-shadow")}, ${transitionThemedModeSwitch("background-color")};
 
   &:hover {
-    box-shadow: 0 8px 10px ${dropShadowColorDirectLight}, 0 9px 11px ${dropShadowColorAmbientLight};
+    box-shadow: ${mixinDropShadowDirectLightHover()}, ${mixinDropShadowAmbientLightHover()};
   }
 `;
 

diff --git a/src/styles/shared/colors/shadow.js b/src/styles/shared/colors/shadow.js
@@ -0,0 +1,51 @@
+/*
+ * 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 shared theme mode shadow color styles for all components.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ */
+
+import { css } from "styled-components";
+import { rgba } from "polished";
+
+import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const dropShadowColorAmbientLight = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.shadow.base[MODE_BRIGHT_SNOW_FLURRY], 0.1),
+  [MODE_DARK_NIGHT_FROST]: rgba(colors.shadow.base[MODE_DARK_NIGHT_FROST], 0.1)
+});
+
+const dropShadowColorDirectLight = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.shadow.base[MODE_BRIGHT_SNOW_FLURRY], 0.25),
+  [MODE_DARK_NIGHT_FROST]: rgba(colors.shadow.base[MODE_DARK_NIGHT_FROST], 0.25)
+});
+
+const mixinDropShadowAmbientLight = (offsetX = 0, offsetY = 5, blurRadius = 7) =>
+  css`${offsetX}px ${offsetY}px ${blurRadius}px ${dropShadowColorAmbientLight}`;
+
+const mixinDropShadowAmbientLightHover = (offsetX = 0, offsetY = 9, blurRadius = 11) =>
+  css`${offsetX}px ${offsetY}px ${blurRadius}px ${dropShadowColorAmbientLight}`;
+
+const mixinDropShadowDirectLight = (offsetX = 0, offsetY = 4, blurRadius = 6) =>
+  css`${offsetX}px ${offsetY}px ${blurRadius}px ${dropShadowColorDirectLight}`;
+
+const mixinDropShadowDirectLightHover = (offsetX = 0, offsetY = 8, blurRadius = 10) =>
+  css`${offsetX}px ${offsetY}px ${blurRadius}px ${dropShadowColorDirectLight}`;
+
+export {
+  dropShadowColorAmbientLight,
+  dropShadowColorDirectLight,
+  mixinDropShadowAmbientLight,
+  mixinDropShadowAmbientLightHover,
+  mixinDropShadowDirectLight,
+  mixinDropShadowDirectLightHover
+};
diff --git a/src/styles/shared/index.js b/src/styles/shared/index.js
@@ -0,0 +1,35 @@
+/*
+ * 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 shared theme mode styles for all components.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ */
+
+import { transitionThemedModeSwitch } from "./motion/transition";
+import {
+  dropShadowColorAmbientLight,
+  dropShadowColorDirectLight,
+  mixinDropShadowAmbientLight,
+  mixinDropShadowAmbientLightHover,
+  mixinDropShadowDirectLight,
+  mixinDropShadowDirectLightHover
+} from "./colors/shadow";
+
+export {
+  dropShadowColorAmbientLight,
+  dropShadowColorDirectLight,
+  mixinDropShadowAmbientLight,
+  mixinDropShadowAmbientLightHover,
+  mixinDropShadowDirectLight,
+  mixinDropShadowDirectLightHover,
+  transitionThemedModeSwitch
+};
diff --git a/src/styles/shared/motion/transition.js b/src/styles/shared/motion/transition.js
@@ -0,0 +1,23 @@
+/*
+ * 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 shared theme mode transition styles for all components.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ */
+
+import { motion } from "styles/theme";
+
+const transitionThemedModeSwitch = (propName, duration, timingFunction = "ease-in-out") =>
+  `${propName} ${duration > 0 || motion.speed.duration.transition.base.themeModeSwitch}ms ${timingFunction}`;
+
+/* eslint-disable-next-line import/prefer-default-export */
+export { transitionThemedModeSwitch };