From f2e213a383eef3c69c6f180f068900268b38085d Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Sat, 9 Mar 2019 21:01:19 +0100 Subject: [PATCH] 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 --- .../atoms/core/mdx-elements/Image.jsx | 51 +++++++------------ .../core/mdx-elements/shared/FigCaption.jsx | 36 +++++++++++++ .../SectionCardGridFilter/styled/Card.jsx | 26 ++++------ src/styles/shared/colors/shadow.js | 51 +++++++++++++++++++ src/styles/shared/index.js | 35 +++++++++++++ src/styles/shared/motion/transition.js | 23 +++++++++ 6 files changed, 173 insertions(+), 49 deletions(-) create mode 100644 src/components/atoms/core/mdx-elements/shared/FigCaption.jsx create mode 100644 src/styles/shared/colors/shadow.js create mode 100644 src/styles/shared/index.js create mode 100644 src/styles/shared/motion/transition.js diff --git a/src/components/atoms/core/mdx-elements/Image.jsx b/src/components/atoms/core/mdx-elements/Image.jsx index efb6a4fd..f47429e5 100644 --- 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 }) => ( -
- - {children &&
{children}
} -
-); +const Image = ({ children, fillSize, dropShadow, rounded, ...passProps }) => + children ? ( +
+ + {children &&
{children}
} +
+ ) : ( + + ); 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 new file mode 100644 index 00000000..92f41d9e --- /dev/null +++ b/src/components/atoms/core/mdx-elements/shared/FigCaption.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 `
` element for a caption or legend describing the rest of the + * contents of its parent `
` element. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @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 index 2511ba0f..ef7bdd73 100644 --- 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 new file mode 100644 index 00000000..cff88f84 --- /dev/null +++ b/src/styles/shared/colors/shadow.js @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @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 new file mode 100644 index 00000000..3d70583a --- /dev/null +++ b/src/styles/shared/index.js @@ -0,0 +1,35 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @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 new file mode 100644 index 00000000..2f487fa3 --- /dev/null +++ b/src/styles/shared/motion/transition.js @@ -0,0 +1,23 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @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 };