From 8c45192366b83bae1d9dc7d4c283e67063697945 Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Tue, 8 Jan 2019 16:29:25 +0100 Subject: [PATCH] Implement `Button` CSS styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It provides multiple variations: - `primary` — uses the primary color `nord8` for background/border/text colorization - `secondary` — uses the secondary color `nord9` for background/border/text colorization - `simple` — uses the _Snow Storm_ and _Polar Night_ palettes for background/border/text colorization - `subtle` — only colorizes the background on hover using the "Snow Storm" and "Polar Night" palettes for background/border/text colorization Next to variations there are additional props to toggle more styles: - `dashed` — uses the `dashed` property for the CSS `border-style` (1) attribute - `ghost` — only uses a border instead of a background color - `outlined` — uses uses a border in addition to a background color - `quiet` — keeps the initial text colorization on hover References: (1) https://developer.mozilla.org/en-US/docs/Web/CSS/border-style Associated epic: GH-63 GH-110 --- src/components/atoms/core/Button/styles.js | 333 +++++++++++++++++++++ 1 file changed, 333 insertions(+) create mode 100644 src/components/atoms/core/Button/styles.js diff --git a/src/components/atoms/core/Button/styles.js b/src/components/atoms/core/Button/styles.js new file mode 100644 index 00000000..a1f6bb9a --- /dev/null +++ b/src/components/atoms/core/Button/styles.js @@ -0,0 +1,333 @@ +/* + * 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 { css } from "styled-components"; +import { darken, lighten, rgba } from "polished"; + +import { colors, themedModeVariant, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const backgroundColor = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord8, + [MODE_DARK_NIGHT_FROST]: colors.nord8 + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord9, + [MODE_DARK_NIGHT_FROST]: colors.nord9 + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.45), + [MODE_DARK_NIGHT_FROST]: rgba(colors.nord1, 0.8) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: "transparent", + [MODE_DARK_NIGHT_FROST]: "transparent" + } +}); + +const backgroundColorActive = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.08, colors.nord8), + [MODE_DARK_NIGHT_FROST]: darken(0.08, colors.nord8) + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.08, colors.nord9), + [MODE_DARK_NIGHT_FROST]: darken(0.08, colors.nord9) + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.85), + [MODE_DARK_NIGHT_FROST]: colors.nord2 + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.85), + [MODE_DARK_NIGHT_FROST]: colors.nord2 + } +}); + +const backgroundColorHover = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.04, colors.nord8), + [MODE_DARK_NIGHT_FROST]: darken(0.04, colors.nord8) + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.04, colors.nord9), + [MODE_DARK_NIGHT_FROST]: darken(0.04, colors.nord9) + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.65), + [MODE_DARK_NIGHT_FROST]: rgba(colors.nord2, 0.7) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.65), + [MODE_DARK_NIGHT_FROST]: rgba(colors.nord2, 0.7) + } +}); + +const borderColor = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost, quiet }) => + ghost && !quiet ? colors.nord8 : colors.font.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: ({ ghost, quiet }) => + ghost && !quiet ? colors.nord8 : colors.font.base[MODE_BRIGHT_SNOW_FLURRY] + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost, quiet }) => + ghost && !quiet ? colors.nord9 : colors.font.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: ({ ghost, quiet }) => + ghost && !quiet ? colors.nord9 : colors.font.base[MODE_BRIGHT_SNOW_FLURRY] + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75), + [MODE_DARK_NIGHT_FROST]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75), + [MODE_DARK_NIGHT_FROST]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75) + } +}); + +const borderColorActive = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.08, colors.nord8), + [MODE_DARK_NIGHT_FROST]: darken(0.08, colors.nord8) + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.08, colors.nord9), + [MODE_DARK_NIGHT_FROST]: darken(0.08, colors.nord9) + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord2, + [MODE_DARK_NIGHT_FROST]: lighten(0.03, colors.font.base[MODE_BRIGHT_SNOW_FLURRY]) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord2, + [MODE_DARK_NIGHT_FROST]: lighten(0.03, colors.font.base[MODE_BRIGHT_SNOW_FLURRY]) + } +}); + +const borderColorDisabled = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost, quiet }) => + ghost && !quiet ? rgba(colors.nord8, 0.6) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.4), + [MODE_DARK_NIGHT_FROST]: ({ ghost, quiet }) => + ghost && !quiet ? rgba(colors.nord8, 0.6) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75) + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost, quiet }) => + ghost && !quiet ? rgba(colors.nord9, 0.6) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.4), + [MODE_DARK_NIGHT_FROST]: ({ ghost, quiet }) => + ghost && !quiet ? rgba(colors.nord9, 0.65) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75) + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.4), + [MODE_DARK_NIGHT_FROST]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.4), + [MODE_DARK_NIGHT_FROST]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75) + } +}); + +const borderColorHover = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost }) => (ghost ? darken(0.04, colors.nord8) : rgba(colors.nord0, 0.8)), + [MODE_DARK_NIGHT_FROST]: ({ ghost }) => + ghost ? darken(0.04, colors.nord8) : lighten(0.045, colors.font.base[MODE_BRIGHT_SNOW_FLURRY]) + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost }) => (ghost ? darken(0.04, colors.nord9) : rgba(colors.nord0, 0.8)), + [MODE_DARK_NIGHT_FROST]: ({ ghost }) => + ghost ? darken(0.04, colors.nord9) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.75) + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: rgba(lighten(0.05, colors.font.base[MODE_BRIGHT_SNOW_FLURRY]), 0.75) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: rgba(lighten(0.05, colors.font.base[MODE_BRIGHT_SNOW_FLURRY]), 0.75) + } +}); + +const borderStyle = ({ dashed }) => (dashed ? "dashed" : "solid"); + +const fontColor = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost, outlined, quiet }) => { + if (outlined && ghost) { + return quiet ? colors.font.base[MODE_BRIGHT_SNOW_FLURRY] : colors.nord8; + } + return colors.nord1; + }, + [MODE_DARK_NIGHT_FROST]: ({ ghost, outlined, quiet }) => { + if (outlined && ghost) { + return quiet ? colors.font.base[MODE_DARK_NIGHT_FROST] : colors.nord8; + } + return colors.nord1; + } + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost, outlined, quiet }) => { + if (outlined && ghost) { + return quiet ? colors.font.base[MODE_BRIGHT_SNOW_FLURRY] : colors.nord9; + } + return colors.nord1; + }, + [MODE_DARK_NIGHT_FROST]: ({ ghost, outlined, quiet }) => { + if (outlined && ghost) { + return quiet ? colors.font.base[MODE_DARK_NIGHT_FROST] : colors.nord9; + } + return colors.nord1; + } + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.font.base[MODE_DARK_NIGHT_FROST] + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ quiet }) => (quiet ? colors.font.base[MODE_BRIGHT_SNOW_FLURRY] : colors.nord10), + [MODE_DARK_NIGHT_FROST]: ({ quiet }) => (quiet ? colors.font.base[MODE_DARK_NIGHT_FROST] : colors.nord8) + } +}); + +const fontColorActive = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.08, colors.nord8), + [MODE_DARK_NIGHT_FROST]: darken(0.08, colors.nord8) + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.08, colors.nord9), + [MODE_DARK_NIGHT_FROST]: darken(0.08, colors.nord9) + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord2, + [MODE_DARK_NIGHT_FROST]: lighten(0.1, colors.font.base[MODE_DARK_NIGHT_FROST]) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ quiet }) => (quiet ? colors.nord2 : colors.nord10), + [MODE_DARK_NIGHT_FROST]: ({ quiet }) => + quiet ? lighten(0.1, colors.font.base[MODE_DARK_NIGHT_FROST]) : darken(0.08, colors.nord8) + } +}); + +const fontColorDisabled = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost, quiet }) => + ghost && !quiet ? rgba(colors.nord8, 0.6) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.4), + [MODE_DARK_NIGHT_FROST]: ({ ghost, quiet }) => + ghost && !quiet ? rgba(colors.nord8, 0.6) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.8) + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ ghost, quiet }) => + ghost && !quiet ? rgba(colors.nord9, 0.6) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.4), + [MODE_DARK_NIGHT_FROST]: ({ ghost, quiet }) => + ghost && !quiet ? rgba(colors.nord9, 0.65) : rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.8) + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.4), + [MODE_DARK_NIGHT_FROST]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.8) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.4), + [MODE_DARK_NIGHT_FROST]: rgba(colors.font.base[MODE_BRIGHT_SNOW_FLURRY], 0.8) + } +}); + +const fontColorHover = themedModeVariant({ + primary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.04, colors.nord8), + [MODE_DARK_NIGHT_FROST]: darken(0.04, colors.nord8) + }, + secondary: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.04, colors.nord9), + [MODE_DARK_NIGHT_FROST]: darken(0.04, colors.nord9) + }, + simple: { + [MODE_BRIGHT_SNOW_FLURRY]: darken(0.05, colors.font.base[MODE_BRIGHT_SNOW_FLURRY]), + [MODE_DARK_NIGHT_FROST]: lighten(0.05, colors.font.base[MODE_DARK_NIGHT_FROST]) + }, + subtle: { + [MODE_BRIGHT_SNOW_FLURRY]: ({ quiet }) => + quiet ? darken(0.05, colors.font.base[MODE_BRIGHT_SNOW_FLURRY]) : darken(0.05, colors.nord10), + [MODE_DARK_NIGHT_FROST]: ({ quiet }) => + quiet ? lighten(0.05, colors.font.base[MODE_DARK_NIGHT_FROST]) : darken(0.04, colors.nord8) + } +}); + +const base = css` + display: inline-flex; + align-items: center; + font-size: inherit; + text-align: center; + text-decoration: none; + vertical-align: middle; + white-space: nowrap; + border: none; + border-radius: 0.25em; + background: none; + padding: 0.375em 0.75em; + user-select: none; + + &:hover:not(:disabled) { + cursor: pointer; + } + + &:active, + &:focus { + outline: none; + } + + &:disabled { + cursor: not-allowed; + } +`; + +const styles = css` + ${base}; + color: ${fontColor}; + background-color: ${({ ghost }) => !ghost && backgroundColor}; + transition: background-color 0.2s ease-in, border-color 0.2s ease-in, box-shadow 0.2s ease-in, color 0.2s ease-in; + ${({ outlined }) => + outlined && + css` + border: 0.0625em ${borderStyle} ${borderColor}; + `}; + + /* indent */ + &:hover:not(:disabled) { + background-color: ${({ ghost }) => !ghost && backgroundColorHover}; + ${({ ghost, outlined }) => + outlined && // eslint-disable-line indent + css` + border-color: ${borderColorHover}; + color: ${ghost && fontColorHover}; + `}; + } + + &:active:not(:disabled) { + background-color: ${({ ghost }) => !ghost && backgroundColorActive}; + ${({ ghost, outlined }) => + outlined && // eslint-disable-line indent + css` + border-color: ${ghost && borderColorActive}; + color: ${ghost && fontColorActive}; + `}; + } + + &:disabled { + color: ${fontColorDisabled}; + ${({ outlined }) => + outlined && // eslint-disable-line indent + css` + border-color: ${borderColorDisabled}; + `}; + } +`; + +export default styles;