diff --git a/src/assets/images/.gitkeep b/src/assets/images/.gitkeep deleted file mode 100644 index 1cdc14de..00000000 --- a/src/assets/images/.gitkeep +++ /dev/null @@ -1 +0,0 @@ -A stub to prevent the "gatsby-source-filesystem" plugin to error on CI builds when this folder doesn't exist. diff --git a/src/assets/images/icons/eva-icons/menu-outline.svg b/src/assets/images/icons/eva-icons/menu-outline.svg new file mode 100644 index 00000000..6cf30c10 --- /dev/null +++ b/src/assets/images/icons/eva-icons/menu-outline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/icons/eva-icons/moon-fill.svg b/src/assets/images/icons/eva-icons/moon-fill.svg new file mode 100644 index 00000000..b167b532 --- /dev/null +++ b/src/assets/images/icons/eva-icons/moon-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/eva-icons/moon-outline.svg b/src/assets/images/icons/eva-icons/moon-outline.svg new file mode 100644 index 00000000..15901ad1 --- /dev/null +++ b/src/assets/images/icons/eva-icons/moon-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/eva-icons/sun-fill.svg b/src/assets/images/icons/eva-icons/sun-fill.svg new file mode 100644 index 00000000..71214276 --- /dev/null +++ b/src/assets/images/icons/eva-icons/sun-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/eva-icons/sun-outline.svg b/src/assets/images/icons/eva-icons/sun-outline.svg new file mode 100644 index 00000000..1804dbd8 --- /dev/null +++ b/src/assets/images/icons/eva-icons/sun-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/nord.svg b/src/assets/images/logos/nord.svg new file mode 100644 index 00000000..60379ff2 --- /dev/null +++ b/src/assets/images/logos/nord.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/atoms/core/vectors/icons/Menu.jsx b/src/components/atoms/core/vectors/icons/Menu.jsx new file mode 100644 index 00000000..5bdcdd28 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Menu.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 React from "react"; +import styled from "styled-components"; + +import { ReactComponent as MenuSVGOutline } from "assets/images/icons/eva-icons/menu-outline.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const MenuIconOutline = styled(MenuSVGOutline)` + ${themeModeFillColorStyles}; +`; + +/** + * The "menu" icon from "Eva Icons" as SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://akveo.github.io/eva-icons + * @since 0.3.0 + */ +const Menu = ({ svgRef }) => ; + +Menu.propTypes = iconPropTypes; + +Menu.defaultProps = iconDefaultProps; + +export default Menu; diff --git a/src/components/atoms/core/vectors/icons/Moon.jsx b/src/components/atoms/core/vectors/icons/Moon.jsx new file mode 100644 index 00000000..f7f7d3b7 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Moon.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 React from "react"; +import styled from "styled-components"; + +import { ReactComponent as MoonSVGFill } from "assets/images/icons/eva-icons/moon-fill.svg"; +import { ReactComponent as MoonSVGOutline } from "assets/images/icons/eva-icons/moon-outline.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const MoonIconFill = styled(MoonSVGFill)` + ${themeModeFillColorStyles}; +`; + +const MoonIconOutline = styled(MoonSVGOutline)` + ${themeModeFillColorStyles}; +`; + +/** + * The "moon" icon from "Eva Icons" as SVG vector graphic component. + * The "outline" variant can be used by passing the `outlined` boolean prop. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://akveo.github.io/eva-icons + * @since 0.3.0 + */ +const Moon = ({ outlined, svgRef }) => + outlined ? : ; + +Moon.propTypes = iconPropTypes; + +Moon.defaultProps = iconDefaultProps; + +export default Moon; diff --git a/src/components/atoms/core/vectors/icons/Sun.jsx b/src/components/atoms/core/vectors/icons/Sun.jsx new file mode 100644 index 00000000..69a0bce4 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Sun.jsx @@ -0,0 +1,42 @@ +/* + * 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 styled from "styled-components"; + +import { ReactComponent as SunSVGFill } from "assets/images/icons/eva-icons/sun-fill.svg"; +import { ReactComponent as SunSVGOutline } from "assets/images/icons/eva-icons/sun-outline.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const SunIconFill = styled(SunSVGFill)` + ${themeModeFillColorStyles}; +`; + +const SunIconOutline = styled(SunSVGOutline)` + ${themeModeFillColorStyles}; +`; + +/** + * The "sun" icon from "Eva Icons" as SVG vector graphic component. + * The "outline" variant can be used by passing the `outlined` boolean prop. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://akveo.github.io/eva-icons + * @since 0.3.0 + */ +const Sun = ({ outlined, svgRef }) => (outlined ? : ); + +Sun.propTypes = iconPropTypes; + +Sun.defaultProps = iconDefaultProps; + +export default Sun; diff --git a/src/components/atoms/core/vectors/icons/index.js b/src/components/atoms/core/vectors/icons/index.js new file mode 100644 index 00000000..f1c8e068 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/index.js @@ -0,0 +1,22 @@ +/* + * 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 SVG vector graphic icon components. + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://developer.mozilla.org/de/docs/Web/SVG + * @since 0.3.0 + */ + +import Menu from "./Menu"; +import Moon from "./Moon"; +import Sun from "./Sun"; + +export { Menu, Moon, Sun }; diff --git a/src/components/atoms/core/vectors/logos/Nord.jsx b/src/components/atoms/core/vectors/logos/Nord.jsx new file mode 100644 index 00000000..a141966b --- /dev/null +++ b/src/components/atoms/core/vectors/logos/Nord.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 { ReactComponent as NordSVG } from "assets/images/logos/nord.svg"; + +import { themeModeFillColorStyles } from "../shared"; + +/** + * The Nord logo as SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const Nord = styled(NordSVG)` + ${themeModeFillColorStyles}; +`; + +export default Nord; diff --git a/src/components/atoms/core/vectors/logos/index.js b/src/components/atoms/core/vectors/logos/index.js new file mode 100644 index 00000000..9aff104b --- /dev/null +++ b/src/components/atoms/core/vectors/logos/index.js @@ -0,0 +1,21 @@ +/* + * 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 SVG vector graphic logo components. + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://developer.mozilla.org/de/docs/Web/SVG + * @since 0.3.0 + */ + +import Nord from "./Nord"; + +/* eslint-disable-next-line import/prefer-default-export */ +export { Nord }; diff --git a/src/components/atoms/core/vectors/shared/index.js b/src/components/atoms/core/vectors/shared/index.js new file mode 100644 index 00000000..18496256 --- /dev/null +++ b/src/components/atoms/core/vectors/shared/index.js @@ -0,0 +1,21 @@ +/* + * 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 vector graphic components and styles. + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://developer.mozilla.org/de/docs/Web/SVG + * @since 0.3.0 + */ + +import { iconDefaultProps, iconPropTypes } from "./propTypes"; +import { themeModeFillColorStyles } from "./styles"; + +export { iconDefaultProps, iconPropTypes, themeModeFillColorStyles }; diff --git a/src/components/atoms/core/vectors/shared/propTypes.js b/src/components/atoms/core/vectors/shared/propTypes.js new file mode 100644 index 00000000..018132b6 --- /dev/null +++ b/src/components/atoms/core/vectors/shared/propTypes.js @@ -0,0 +1,37 @@ +/* + * 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 prop types. + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://reactjs.org/docs/typechecking-with-proptypes.html + * @since 0.3.0 + */ + +import PropTypes from "prop-types"; + +const iconPropTypes = { + /** + * Flag to toggle the "outline" icon variant. + */ + outlined: PropTypes.bool, + + /** + * The React `ref` to be forwarded to the underlying SVG component. + */ + svgRef: PropTypes.func +}; + +const iconDefaultProps = { + outlined: false, + svgRef: () => {} +}; + +export { iconDefaultProps, iconPropTypes }; diff --git a/src/components/atoms/core/vectors/shared/styles.js b/src/components/atoms/core/vectors/shared/styles.js new file mode 100644 index 00000000..cf6c3d3c --- /dev/null +++ b/src/components/atoms/core/vectors/shared/styles.js @@ -0,0 +1,37 @@ +/* + * 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 vector graphic component styles. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ + +import { css } from "styled-components"; + +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const themeModeFillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.font.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * The value and transition for the fill color based on the active global theme mode. + * + * @since 0.3.0 + */ +const themeModeFillColorStyles = css` + fill: ${themeModeFillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}s ease-in-out; +`; + +/* eslint-disable-next-line import/prefer-default-export */ +export { themeModeFillColorStyles };