From 064fabeccf96833bd2bb90832a448384bbec876a Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Thu, 13 Dec 2018 11:46:44 +0100 Subject: [PATCH] Implement local styled components for `Header` This commit implements the various local styled atom components the `Header` organism component consists of. This includes the main HTML `header` element with flexbox layout that contains two containers. The first left-sided container is the branding logo and caption while the second one provides the navigation link list and global theme mode switch button. The navigation link list will be replaced with a slide menu when reaching the CSS breakpoint. This menu will slide down starting right below the `header` and provides the navigation links for shrinked width views. The global theme mode switch consists of the `MoonIcon` and `SunIcon` components which are animated to "rise up and go down" when toggled. All components will adhere to maximum content width based on the `Content` core container component. Associated epic: GH-63 GH-64 --- .../organisms/core/Header/shared/styles.js | 45 +++++++ .../core/Header/styled/ContentBox.jsx | 27 ++++ .../organisms/core/Header/styled/Header.jsx | 53 ++++++++ .../organisms/core/Header/styled/Logo.jsx | 28 ++++ .../core/Header/styled/LogoBannerBox.jsx | 24 ++++ .../core/Header/styled/LogoCaption.jsx | 30 +++++ .../organisms/core/Header/styled/MoonIcon.jsx | 28 ++++ .../organisms/core/Header/styled/Nav.jsx | 23 ++++ .../organisms/core/Header/styled/NavLink.jsx | 36 +++++ .../organisms/core/Header/styled/NavList.jsx | 43 ++++++ .../core/Header/styled/SlideMenuBox.jsx | 33 +++++ .../core/Header/styled/SlideMenuNavLink.jsx | 27 ++++ .../core/Header/styled/SlideMenuNavList.jsx | 32 +++++ .../core/Header/styled/SlideMenuToggle.jsx | 53 ++++++++ .../organisms/core/Header/styled/SunIcon.jsx | 28 ++++ .../core/Header/styled/ThemeModeSwitch.jsx | 58 ++++++++ .../core/Header/styled/TopContentPusher.jsx | 27 ++++ .../organisms/core/Header/styled/index.js | 54 ++++++++ .../core/Header/styled/poseConfig.js | 127 ++++++++++++++++++ src/styles/theme/colors/background.js | 14 +- src/styles/theme/colors/index.js | 2 + src/styles/theme/colors/shadow.js | 43 ++++++ 22 files changed, 828 insertions(+), 7 deletions(-) create mode 100644 src/components/organisms/core/Header/shared/styles.js create mode 100644 src/components/organisms/core/Header/styled/ContentBox.jsx create mode 100644 src/components/organisms/core/Header/styled/Header.jsx create mode 100644 src/components/organisms/core/Header/styled/Logo.jsx create mode 100644 src/components/organisms/core/Header/styled/LogoBannerBox.jsx create mode 100644 src/components/organisms/core/Header/styled/LogoCaption.jsx create mode 100644 src/components/organisms/core/Header/styled/MoonIcon.jsx create mode 100644 src/components/organisms/core/Header/styled/Nav.jsx create mode 100644 src/components/organisms/core/Header/styled/NavLink.jsx create mode 100644 src/components/organisms/core/Header/styled/NavList.jsx create mode 100644 src/components/organisms/core/Header/styled/SlideMenuBox.jsx create mode 100644 src/components/organisms/core/Header/styled/SlideMenuNavLink.jsx create mode 100644 src/components/organisms/core/Header/styled/SlideMenuNavList.jsx create mode 100644 src/components/organisms/core/Header/styled/SlideMenuToggle.jsx create mode 100644 src/components/organisms/core/Header/styled/SunIcon.jsx create mode 100644 src/components/organisms/core/Header/styled/ThemeModeSwitch.jsx create mode 100644 src/components/organisms/core/Header/styled/TopContentPusher.jsx create mode 100644 src/components/organisms/core/Header/styled/index.js create mode 100644 src/components/organisms/core/Header/styled/poseConfig.js create mode 100644 src/styles/theme/colors/shadow.js diff --git a/src/components/organisms/core/Header/shared/styles.js b/src/components/organisms/core/Header/shared/styles.js new file mode 100644 index 00000000..f19d9ef6 --- /dev/null +++ b/src/components/organisms/core/Header/shared/styles.js @@ -0,0 +1,45 @@ +/* + * 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 component styles. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ + +import { rgba } from "polished"; + +import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +/** + * The default height (in `px`) of the header when in unpinned mode. + * + * @type {number} + */ +const HEADER_HEIGHT = 80; + +/** + * The default height (in `px`) of the header for the pinned mode in pixels. + * + * @type {number} + */ +const HEADER_HEIGHT_PINNED = 56; + +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] +}); + +const linkBackgroundColorHover = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.4), + [MODE_DARK_NIGHT_FROST]: rgba(colors.nord3, 0.8) +}); + +export { backgroundColor, linkBackgroundColorHover, HEADER_HEIGHT, HEADER_HEIGHT_PINNED }; diff --git a/src/components/organisms/core/Header/styled/ContentBox.jsx b/src/components/organisms/core/Header/styled/ContentBox.jsx new file mode 100644 index 00000000..7c0fa375 --- /dev/null +++ b/src/components/organisms/core/Header/styled/ContentBox.jsx @@ -0,0 +1,27 @@ +/* + * 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 Content from "containers/core/Content"; + +/** + * A flexbox container that vertically aligns the content in the center with dynamic space. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const ContentBox = styled(Content)` + display: flex; + align-items: center; + justify-content: space-between; +`; + +export default ContentBox; diff --git a/src/components/organisms/core/Header/styled/Header.jsx b/src/components/organisms/core/Header/styled/Header.jsx new file mode 100644 index 00000000..8fec998d --- /dev/null +++ b/src/components/organisms/core/Header/styled/Header.jsx @@ -0,0 +1,53 @@ +/* + * 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 { em } from "polished"; + +import { + colors, + motion, + themedMode, + zIndexFor, + MODE_BRIGHT_SNOW_FLURRY, + MODE_DARK_NIGHT_FROST, + Z_INDEX_ELEMENTS +} from "styles/theme"; + +import { backgroundColor } from "../shared/styles"; + +const dropShadow = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: `0 5px 10px 0 ${colors.shadow.minimal[MODE_BRIGHT_SNOW_FLURRY]}`, + [MODE_DARK_NIGHT_FROST]: `0 5px 10px 0 ${colors.shadow.minimal[MODE_DARK_NIGHT_FROST]}` +}); + +/** + * The styled header with a fixed position and flexible height for the pinned(collapsed) and unpinned (expanded) header + * modes. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const Header = styled.header` + display: flex; + position: fixed; + top: 0; + height: ${({ height, heightPinned, isPinned }) => (isPinned ? `${em(heightPinned)}` : `${em(height)}`)}; + width: 100%; + z-index: ${zIndexFor(Z_INDEX_ELEMENTS.HEADER)}; + background-color: ${backgroundColor}; + box-shadow: ${({ isPinned }) => isPinned && dropShadow}; + transition: height ${motion.speed.duration.transition.area.medium}ms ease-in-out, + box-shadow ${motion.speed.duration.transition.area.medium}ms ease-in-out, + background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; + user-select: none; +`; + +export default Header; diff --git a/src/components/organisms/core/Header/styled/Logo.jsx b/src/components/organisms/core/Header/styled/Logo.jsx new file mode 100644 index 00000000..e1b744a5 --- /dev/null +++ b/src/components/organisms/core/Header/styled/Logo.jsx @@ -0,0 +1,28 @@ +/* + * 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 { em } from "polished"; + +import { Nord } from "atoms/core/vectors/logos"; + +/** + * Nord's logo as SVG vector graphic component with a dynamic size based on the given `size` prop. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const Logo = styled(Nord)` + display: block; + width: ${({ size }) => em(size * 0.45)}; + height: ${({ size }) => em(size * 0.45)}; +`; + +export default Logo; diff --git a/src/components/organisms/core/Header/styled/LogoBannerBox.jsx b/src/components/organisms/core/Header/styled/LogoBannerBox.jsx new file mode 100644 index 00000000..678f5697 --- /dev/null +++ b/src/components/organisms/core/Header/styled/LogoBannerBox.jsx @@ -0,0 +1,24 @@ +/* + * 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"; + +/** + * A flexbox container for Nord's logo and caption components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const LogoBannerBox = styled.div` + display: flex; + align-items: center; +`; + +export default LogoBannerBox; diff --git a/src/components/organisms/core/Header/styled/LogoCaption.jsx b/src/components/organisms/core/Header/styled/LogoCaption.jsx new file mode 100644 index 00000000..e025c3d4 --- /dev/null +++ b/src/components/organisms/core/Header/styled/LogoCaption.jsx @@ -0,0 +1,30 @@ +/* + * 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 { motion, ms } from "styles/theme"; + +/** + * Caption for Nord's logo component. + * It will fade out when the header changes into pinned (collapsed) mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const LogoCaption = styled.span` + font-size: ${ms(6)}; + font-weight: 500; + transition: opacity ${motion.speed.duration.transition.text.fade}ms ease-in-out; + opacity: ${({ isPinned }) => isPinned && 0}; + margin-left: 0.2775em; +`; + +export default LogoCaption; diff --git a/src/components/organisms/core/Header/styled/MoonIcon.jsx b/src/components/organisms/core/Header/styled/MoonIcon.jsx new file mode 100644 index 00000000..e83ef067 --- /dev/null +++ b/src/components/organisms/core/Header/styled/MoonIcon.jsx @@ -0,0 +1,28 @@ +/* + * 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 React from "react"; +import posed from "react-pose"; + +import { Moon } from "atoms/core/vectors/icons"; + +import { themeModeSwitchIconPoseConfig } from "./poseConfig"; + +const PosedMoonIcon = React.forwardRef((props, ref) => ); + +/** + * The animated "moon" icon of the theme mode switcher button with pose configurations. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const MoonIcon = posed(PosedMoonIcon)(themeModeSwitchIconPoseConfig); + +export default MoonIcon; diff --git a/src/components/organisms/core/Header/styled/Nav.jsx b/src/components/organisms/core/Header/styled/Nav.jsx new file mode 100644 index 00000000..85c31137 --- /dev/null +++ b/src/components/organisms/core/Header/styled/Nav.jsx @@ -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 + */ + +import styled from "styled-components"; + +/** + * A flexbox navigation for the link components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const Nav = styled.nav` + display: flex; +`; + +export default Nav; diff --git a/src/components/organisms/core/Header/styled/NavLink.jsx b/src/components/organisms/core/Header/styled/NavLink.jsx new file mode 100644 index 00000000..710c6e80 --- /dev/null +++ b/src/components/organisms/core/Header/styled/NavLink.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 { A } from "atoms/core/HTMLElements"; +import { motion } from "styles/theme"; + +import { linkBackgroundColorHover } from "../shared/styles"; + +/** + * A navigation link. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const NavLink = styled(A)` + border-radius: 0.25em; + padding: 0.15em 0.5em; + transition: background-color ${motion.speed.duration.transition.area.small}ms ease-in-out; + + &:active, + &:focus, + &:hover { + background-color: ${linkBackgroundColorHover}; + } +`; + +export default NavLink; diff --git a/src/components/organisms/core/Header/styled/NavList.jsx b/src/components/organisms/core/Header/styled/NavList.jsx new file mode 100644 index 00000000..53447261 --- /dev/null +++ b/src/components/organisms/core/Header/styled/NavList.jsx @@ -0,0 +1,43 @@ +/* + * 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 { ms } from "styles/theme"; + +/** + * A flexbox list for navigation links with dynamic spacing. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const NavList = styled.div` + display: none; + justify-content: space-between; + font-size: ${ms(1)}; + + * { + margin: 0 0.556em; + + &:last-child { + margin-right: 0; + } + + &:first-child { + margin-left: 0; + } + } + + ${({ theme }) => theme.media.tabletPortrait` + display: flex; + `}; +`; + +export default NavList; diff --git a/src/components/organisms/core/Header/styled/SlideMenuBox.jsx b/src/components/organisms/core/Header/styled/SlideMenuBox.jsx new file mode 100644 index 00000000..dbabb63e --- /dev/null +++ b/src/components/organisms/core/Header/styled/SlideMenuBox.jsx @@ -0,0 +1,33 @@ +import styled from "styled-components"; +import posed from "react-pose"; +import { em } from "polished"; + +import { motion, zIndexFor, Z_INDEX_ELEMENTS } from "styles/theme"; +import { HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "organisms/core/Header"; + +import { backgroundColor } from "../shared/styles"; +import { slideMenuNavigationPoseConfig } from "./poseConfig"; + +/** + * A compact responsive menu for small width layouts with a sliding animation starting below the main header container. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const SlideMenuBox = styled(posed.div(slideMenuNavigationPoseConfig))` + position: absolute; + top: ${({ isPinned }) => (isPinned ? em(HEADER_HEIGHT_PINNED) : em(HEADER_HEIGHT))}; + width: 100%; + background-color: ${backgroundColor}; + text-align: center; + z-index: ${zIndexFor(Z_INDEX_ELEMENTS.HEADER_COMPACT_SLIDE_MENU)}; + overflow-y: auto; + transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; + + ${({ theme }) => theme.media.tabletPortrait` + display: none; + `}; +`; + +export default SlideMenuBox; diff --git a/src/components/organisms/core/Header/styled/SlideMenuNavLink.jsx b/src/components/organisms/core/Header/styled/SlideMenuNavLink.jsx new file mode 100644 index 00000000..749ad3ac --- /dev/null +++ b/src/components/organisms/core/Header/styled/SlideMenuNavLink.jsx @@ -0,0 +1,27 @@ +/* + * 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 React from "react"; +import posed from "react-pose"; + +import NavLink from "./NavLink"; +import { slideMenuNavigationLinkPoseConfig } from "./poseConfig"; + +const Link = React.forwardRef((props, ref) => ); + +/** + * An animated slide menu navigation link. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const SlideMenuNavLink = posed(Link)(slideMenuNavigationLinkPoseConfig); + +export default SlideMenuNavLink; diff --git a/src/components/organisms/core/Header/styled/SlideMenuNavList.jsx b/src/components/organisms/core/Header/styled/SlideMenuNavList.jsx new file mode 100644 index 00000000..ad445319 --- /dev/null +++ b/src/components/organisms/core/Header/styled/SlideMenuNavList.jsx @@ -0,0 +1,32 @@ +/* + * 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 { ms } from "styles/theme"; + +/** + * A flexbox list for slide menu navigation links with dynamic spacing. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const SlideMenuNavList = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + font-size: ${ms(1)}; + + * { + margin: 1em; + } +`; + +export default SlideMenuNavList; diff --git a/src/components/organisms/core/Header/styled/SlideMenuToggle.jsx b/src/components/organisms/core/Header/styled/SlideMenuToggle.jsx new file mode 100644 index 00000000..608cbf5c --- /dev/null +++ b/src/components/organisms/core/Header/styled/SlideMenuToggle.jsx @@ -0,0 +1,53 @@ +/* + * 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 { motion, ms } from "styles/theme"; + +import { linkBackgroundColorHover } from "../shared/styles"; + +/** + * A button to toggle the navigation link slide menu. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const SlideMenuToggle = styled.button` + user-select: none; + cursor: pointer; + pointer-events: auto; + border: 0; + border-radius: 0.25em; + background-color: transparent; + transition: background-color ${motion.speed.duration.transition.area.small}ms ease-in-out; + + &:active, + &:focus, + &:hover { + outline: 0; + } + + &:hover:not(:disabled) { + background-color: ${linkBackgroundColorHover}; + } + + > * { + width: ${ms(3)}; + height: ${ms(3)}; + vertical-align: middle; + } + + ${({ theme }) => theme.media.tabletPortrait` + display: none; + `}; +`; + +export default SlideMenuToggle; diff --git a/src/components/organisms/core/Header/styled/SunIcon.jsx b/src/components/organisms/core/Header/styled/SunIcon.jsx new file mode 100644 index 00000000..c85fd784 --- /dev/null +++ b/src/components/organisms/core/Header/styled/SunIcon.jsx @@ -0,0 +1,28 @@ +/* + * 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 React from "react"; +import posed from "react-pose"; + +import { Sun } from "atoms/core/vectors/icons"; + +import { themeModeSwitchIconPoseConfig } from "./poseConfig"; + +const PosedSunIcon = React.forwardRef((props, ref) => ); + +/** + * The animated "sun" icon of the theme mode switcher button with pose configurations. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const SunIcon = posed(PosedSunIcon)(themeModeSwitchIconPoseConfig); + +export default SunIcon; diff --git a/src/components/organisms/core/Header/styled/ThemeModeSwitch.jsx b/src/components/organisms/core/Header/styled/ThemeModeSwitch.jsx new file mode 100644 index 00000000..1923e4c4 --- /dev/null +++ b/src/components/organisms/core/Header/styled/ThemeModeSwitch.jsx @@ -0,0 +1,58 @@ +/* + * 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 { stripUnit } from "polished"; + +import { motion, ms } from "styles/theme"; + +import { linkBackgroundColorHover } from "../shared/styles"; + +/** + * A button to toggle between the global theme modes. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const ThemeModeSwitch = styled.button` + user-select: none; + padding: 1em; + cursor: pointer; + pointer-events: auto; + border: 0; + border-radius: 0.25em; + background-color: transparent; + transition: background-color ${motion.speed.duration.transition.area.small}ms ease-in-out; + margin-left: 0.5em; + position: relative; + overflow: hidden; + + &:active, + &:focus, + &:hover { + outline: 0; + } + + &:hover:not(:disabled) { + background-color: ${linkBackgroundColorHover}; + } + + > * { + width: ${ms(1)}; + height: ${ms(1)}; + position: absolute; + top: 50%; + left: 50%; + margin-top: ${stripUnit(ms(1)) / -2}em; + margin-left: ${stripUnit(ms(1)) / -2}em; + } +`; + +export default ThemeModeSwitch; diff --git a/src/components/organisms/core/Header/styled/TopContentPusher.jsx b/src/components/organisms/core/Header/styled/TopContentPusher.jsx new file mode 100644 index 00000000..c6fde381 --- /dev/null +++ b/src/components/organisms/core/Header/styled/TopContentPusher.jsx @@ -0,0 +1,27 @@ +/* + * 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 { em } from "polished"; + +/** + * A spacing container to prevent content from slipping under the header. + * It inherits the dynamic size of the header through the `height` prop to match the expanded and collapsed states. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const TopContentPusher = styled.div` + height: ${({ height }) => em(height)}; + position: relative; + background-color: transparent; +`; + +export default TopContentPusher; diff --git a/src/components/organisms/core/Header/styled/index.js b/src/components/organisms/core/Header/styled/index.js new file mode 100644 index 00000000..6ff096c8 --- /dev/null +++ b/src/components/organisms/core/Header/styled/index.js @@ -0,0 +1,54 @@ +/* + * 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 ContentBox from "./ContentBox"; +import Header from "./Header"; +import Logo from "./Logo"; +import LogoBannerBox from "./LogoBannerBox"; +import LogoCaption from "./LogoCaption"; +import MoonIcon from "./MoonIcon"; +import Nav from "./Nav"; +import NavLink from "./NavLink"; +import NavList from "./NavList"; +import SlideMenuBox from "./SlideMenuBox"; +import SlideMenuNavLink from "./SlideMenuNavLink"; +import SlideMenuNavList from "./SlideMenuNavList"; +import SlideMenuToggle from "./SlideMenuToggle"; +import SunIcon from "./SunIcon"; +import ThemeModeSwitch from "./ThemeModeSwitch"; +import TopContentPusher from "./TopContentPusher"; +import { + SLIDE_MENU_NAV_LINK_CLOSED_POSE, + SLIDE_MENU_NAV_LINK_INITIAL_POSE, + SLIDE_MENU_NAV_LINK_OPEN_POSE, + THEME_MODE_SWITCH_ICON_INITIAL_POSE +} from "./poseConfig"; + +export { + ContentBox, + Nav, + Header, + Logo, + LogoBannerBox, + LogoCaption, + MoonIcon, + NavLink, + NavList, + SlideMenuBox, + SlideMenuNavLink, + SlideMenuNavList, + SlideMenuToggle, + SunIcon, + ThemeModeSwitch, + TopContentPusher, + SLIDE_MENU_NAV_LINK_CLOSED_POSE, + SLIDE_MENU_NAV_LINK_INITIAL_POSE, + SLIDE_MENU_NAV_LINK_OPEN_POSE, + THEME_MODE_SWITCH_ICON_INITIAL_POSE +}; diff --git a/src/components/organisms/core/Header/styled/poseConfig.js b/src/components/organisms/core/Header/styled/poseConfig.js new file mode 100644 index 00000000..c1d969ca --- /dev/null +++ b/src/components/organisms/core/Header/styled/poseConfig.js @@ -0,0 +1,127 @@ +/* + * 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 pose animation configuerations. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ + +import { em } from "polished"; + +import { motion } from "styles/theme"; + +import { HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "../shared/styles"; + +/** + * The initial pose to apply the "reverse" enter and exit animation. + * + * @type {string} + */ +const THEME_MODE_SWITCH_ICON_INITIAL_POSE = "reverseInOut"; + +/** + * The initial pose to apply the slide in animation for slide menu navigation links. + * + * @type {string} + */ +const SLIDE_MENU_NAV_LINK_CLOSED_POSE = "closed"; + +/** + * The initial pose to apply the slide in animation for slide menu navigation links. + * + * @type {string} + */ +const SLIDE_MENU_NAV_LINK_INITIAL_POSE = "slideIn"; + +/** + * The initial pose to apply the slide in animation for slide menu navigation links. + * + * @type {string} + */ +const SLIDE_MENU_NAV_LINK_OPEN_POSE = "open"; + +/** + * The pose animation configurations for the slide menu navigation links. + * + * @type {Object} + */ +const slideMenuNavigationLinkPoseConfig = { + [SLIDE_MENU_NAV_LINK_INITIAL_POSE]: { + opacity: 0, + y: "calc(-5vh)" + }, + [SLIDE_MENU_NAV_LINK_CLOSED_POSE]: { + opacity: 0, + y: "calc(-5vh)", + transition: { + duration: motion.speed.duration.transition.text.fade * motion.speed.duration.exitReducerFactor + } + }, + [SLIDE_MENU_NAV_LINK_OPEN_POSE]: { + opacity: 1, + y: 0, + transition: { duration: motion.speed.duration.transition.text.fade } + } +}; + +/** + * The pose animation configurations for the slide menu navigation links. + * + * @type {Object} + */ +const slideMenuNavigationPoseConfig = { + [SLIDE_MENU_NAV_LINK_CLOSED_POSE]: { + height: 0, + staggerChildren: (motion.speed.duration.transition.area.large * 0.333) / 2, + delay: (motion.speed.duration.transition.area.large * 0.333) / 2, + transition: { + duration: motion.speed.duration.transition.area.large * motion.speed.duration.exitReducerFactor + } + }, + [SLIDE_MENU_NAV_LINK_OPEN_POSE]: { + height: ({ isPinned }) => `calc(100vh - ${isPinned ? em(HEADER_HEIGHT_PINNED) : em(HEADER_HEIGHT)})`, + delayChildren: motion.speed.duration.transition.area.large * 0.333, + staggerChildren: (motion.speed.duration.transition.area.large * 0.333) / 2, + transition: { + duration: motion.speed.duration.transition.area.large + } + } +}; + +/** + * The pose animation configurations for the icons of the button component that toggles between the global theme modes. + * + * @type {Object} + */ +const themeModeSwitchIconPoseConfig = { + [THEME_MODE_SWITCH_ICON_INITIAL_POSE]: { + y: ({ reverseEnterDirection }) => (reverseEnterDirection ? 32 : -32) + }, + enter: { + y: 0, + delay: motion.speed.duration.transition.base.themeModeSwitch / 2, + transition: { duration: motion.speed.duration.transition.base.themeModeSwitch } + }, + exit: { + y: ({ reverseEnterDirection }) => (reverseEnterDirection ? -32 : 32), + transition: { duration: motion.speed.duration.transition.base.themeModeSwitch } + } +}; + +export { + slideMenuNavigationLinkPoseConfig, + slideMenuNavigationPoseConfig, + themeModeSwitchIconPoseConfig, + SLIDE_MENU_NAV_LINK_CLOSED_POSE, + SLIDE_MENU_NAV_LINK_INITIAL_POSE, + SLIDE_MENU_NAV_LINK_OPEN_POSE, + THEME_MODE_SWITCH_ICON_INITIAL_POSE +}; diff --git a/src/styles/theme/colors/background.js b/src/styles/theme/colors/background.js index ae72b0bc..fba9c349 100644 --- a/src/styles/theme/colors/background.js +++ b/src/styles/theme/colors/background.js @@ -7,13 +7,6 @@ * License: MIT */ -/** - * @file Provides theme background colors. - * @author Arctic Ice Studio - * @author Sven Greb - * @since 0.2.0 - */ - import nord from "./nord"; import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "../constants"; @@ -22,6 +15,13 @@ const base = { [MODE_DARK_NIGHT_FROST]: nord.nord0 }; +/** + * Provides theme background colors. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.2.0 + */ const background = { base }; export default background; diff --git a/src/styles/theme/colors/index.js b/src/styles/theme/colors/index.js index 21d2bf7f..83506b5f 100644 --- a/src/styles/theme/colors/index.js +++ b/src/styles/theme/colors/index.js @@ -18,10 +18,12 @@ import background from "./background"; import font from "./font"; import nord from "./nord"; import palettes from "./palettes"; +import shadow from "./shadow"; const colors = { background, font, + shadow, ...nord, ...palettes }; diff --git a/src/styles/theme/colors/shadow.js b/src/styles/theme/colors/shadow.js new file mode 100644 index 00000000..db40e0b7 --- /dev/null +++ b/src/styles/theme/colors/shadow.js @@ -0,0 +1,43 @@ +/* + * 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 { darken, rgba } from "polished"; + +import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "../constants"; +import nord from "./nord"; + +const minimal = { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(nord.nord4, 0.15), + [MODE_DARK_NIGHT_FROST]: rgba(darken(0.045, nord.nord0), 0.15) +}; + +const decent = { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.05, minimal[MODE_BRIGHT_SNOW_FLURRY]), + [MODE_DARK_NIGHT_FROST]: darken(0.05, minimal[MODE_DARK_NIGHT_FROST]) +}; + +const base = { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.05, decent[MODE_BRIGHT_SNOW_FLURRY]), + [MODE_DARK_NIGHT_FROST]: darken(0.05, decent[MODE_DARK_NIGHT_FROST]) +}; + +/** + * Provides theme shadow colors. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const shadow = { + base, + decent, + minimal +}; + +export default shadow;