Created
October 5, 2017 17:52
-
-
Save usirin/0298261de10e8562a5fc60bd201ad3c1 to your computer and use it in GitHub Desktop.
Semantic variables as a js object
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as polished from 'polished' | |
| import range from 'lodash.range' | |
| const unit = (value, type) => `${value}${type}` | |
| const relative = value => unit(value, 'em') | |
| const absolute = value => unit(value, 'rem') | |
| const lighten = (val, percent) => polished.lighten(percent / 100, val) | |
| const darken = (val, percent) => polished.darken(percent / 100, val) | |
| const saturate = (val, percent) => polished.saturate(percent / 100, val) | |
| const rgba = (r, g, b, a) => `rgba(${r}, ${g}, ${b}, ${a})` | |
| const base = { | |
| fontSmoothing: 'antialiased', | |
| fontFamily: 'sans-serif', | |
| headerFont: 'sans-serif', | |
| pageFont: 'sans-serif', | |
| fontSize: unit(14, 'px'), | |
| emSize: unit(14, 'px'), | |
| } | |
| const borderRadius = { | |
| relativeBorderRadius: relative(4), | |
| absoluteBorderRadius: absolute(4), | |
| defaultBorderRadius: absolute(4), | |
| } | |
| const color = { | |
| red: '#DB2828', | |
| orange: '#F2711C', | |
| yellow: '#FBBD08', | |
| olive: '#B5CC18', | |
| green: '#21BA45', | |
| teal: '#00B5AD', | |
| blue: '#2185D0', | |
| violet: '#6435C9', | |
| purple: '#A333C8', | |
| pink: '#E03997', | |
| brown: '#A5673F', | |
| grey: '#767676', | |
| black: '#1B1C1D', | |
| lightRed: '#FF695E', | |
| lightOrange: '#FF851B', | |
| lightYellow: '#FFE21F', | |
| lightOlive: '#D9E778', | |
| lightGreen: '#2ECC40', | |
| lightTeal: '#6DFFFF', | |
| lightBlue: '#54C8FF', | |
| lightViolet: '#A291FB', | |
| lightPurple: '#DC73FF', | |
| lightPink: '#FF8EDF', | |
| lightBrown: '#D67C1C', | |
| lightGrey: '#DCDDDE', | |
| lightBlack: '#545454', | |
| fullBlack: '#000000', | |
| offWhite: '#F9FAFB', | |
| darkWhite: '#F3F4F5', | |
| midWhite: '#DCDDDE', | |
| white: '#FFFFFF', | |
| redBackground: '#FFE8E6', | |
| orangeBackground: '#FFEDDE', | |
| yellowBackground: '#FFF8DB', | |
| oliveBackground: '#FBFDEF', | |
| greenBackground: '#E5F9E7', | |
| tealBackground: '#E1F7F7', | |
| blueBackground: '#DFF0FF', | |
| violetBackground: '#EAE7FF', | |
| purpleBackground: '#F6E7FF', | |
| pinkBackground: '#FFE3FB', | |
| brownBackground: '#F1E2D3', | |
| textColor: rgba(0, 0, 0, 0.87), | |
| linkColor: '#4183C4', | |
| } | |
| const brand = { | |
| primaryColor: color.blue, | |
| secondaryColor: color.black, | |
| lightPrimaryColor: color.lightBlue, | |
| lightSecondaryColor: color.lightBlack, | |
| } | |
| const pageHeading = { | |
| headerFontWeight: 'bold', | |
| headerLineHeight: unit(18 / 14, 'em'), | |
| h1: unit(28 / 14, 'rem'), | |
| h2: unit(24 / 14, 'rem'), | |
| h3: unit(18 / 14, 'rem'), | |
| h4: unit(15 / 14, 'rem'), | |
| h5: unit(14 / 14, 'rem'), | |
| } | |
| const formInput = { | |
| inputBackground: color.white, | |
| inputVerticalPadding: relative(11), | |
| inputHorizontalPadding: relative(11), | |
| inputPadding: `${relative(11)} ${relative(11)}`, | |
| inputColor: color.textColor, | |
| inputPlaceholderColor: lighten(color.textColor, 75), | |
| inputPlaceholderFocusColor: lighten(color.textColor, 45), | |
| inputLineHeight: unit(17 / 14, 'em'), | |
| focusedFormBorderColor: '#85B7D9', | |
| focusedFormMutedBorderColor: '#96C8DA', | |
| } | |
| const sizes = { | |
| miniSize: 11 / 14, | |
| tinySize: 12 / 14, | |
| smallSize: 13 / 14, | |
| mediumSize: 14 / 14, | |
| largeSize: 16 / 14, | |
| bigSize: 18 / 14, | |
| hugeSize: 20 / 14, | |
| massiveSize: 24 / 14, | |
| } | |
| const page = { | |
| pageBackground: color.white, | |
| pageOverflowX: 'hidden', | |
| lineHeight: unit('1.4285', 'em'), | |
| } | |
| const paragraph = { | |
| paragraphMargin: '0em 0em 1em', | |
| paragraphLineHeight: page.lineHeight, | |
| } | |
| const link = { | |
| linkUnderline: 'none', | |
| linkHoverColor: darken(saturate(color.linkColor, 20), 15), | |
| linkHoverUnderline: 'none', | |
| } | |
| const scrollBar = { | |
| useCustomScrollbars: true, | |
| customScrollbarWidth: unit(10, 'px'), | |
| trackBackground: rgba(0, 0, 0, 0.1), | |
| trackBorderRadius: unit(0, 'px'), | |
| thumbBorderRadius: unit(5, 'px'), | |
| thumbBackground: rgba(0, 0, 0, 0.25), | |
| thumbTransition: 'color 0.2s ease', | |
| thumbInactiveBackground: rgba(0, 0, 0, 0.15), | |
| thumbHoverBackground: rgba(128, 135, 139, 0.8), | |
| /* Inverted */ | |
| trackInvertedBackground: rgba(255, 255, 255, 0.1), | |
| thumbInvertedBackground: rgba(255, 255, 255, 0.25), | |
| thumbInvertedInactiveBackground: rgba(255, 255, 255, 0.15), | |
| thumbInvertedHoverBackground: rgba(255, 255, 255, 0.35), | |
| } | |
| const highlighted = { | |
| highlightBackground: '#CCE2FF', | |
| highlightColor: color.textColor, | |
| inputHighlightBackground: rgba(100, 100, 100, 0.4), | |
| inputHighlightColor: color.textColor, | |
| } | |
| const _baseEm = 14 | |
| const emSizes = { | |
| mini: unit(Math.round(sizes.miniSize * _baseEm) / _baseEm, 'rem'), | |
| tiny: unit(Math.round(sizes.tinySize * _baseEm) / _baseEm, 'rem'), | |
| small: unit(Math.round(sizes.smallSize * _baseEm) / _baseEm, 'rem'), | |
| medium: unit(Math.round(sizes.mediumSize * _baseEm) / _baseEm, 'rem'), | |
| large: unit(Math.round(sizes.largeSize * _baseEm) / _baseEm, 'rem'), | |
| big: unit(Math.round(sizes.bigSize * _baseEm) / _baseEm, 'rem'), | |
| huge: unit(Math.round(sizes.hugeSize * _baseEm) / _baseEm, 'rem'), | |
| massive: unit(Math.round(sizes.massiveSize * _baseEm) / _baseEm, 'rem'), | |
| relativeMini: unit(Math.round(sizes.miniSize * _baseEm) / _baseEm, 'em'), | |
| relativeTiny: unit(Math.round(sizes.tinySize * _baseEm) / _baseEm, 'em'), | |
| relativeSmall: unit(Math.round(sizes.smallSize * _baseEm) / _baseEm, 'em'), | |
| relativeMedium: unit(Math.round(sizes.mediumSize * _baseEm) / _baseEm, 'em'), | |
| relativeLarge: unit(Math.round(sizes.largeSize * _baseEm) / _baseEm, 'em'), | |
| relativeBig: unit(Math.round(sizes.bigSize * _baseEm) / _baseEm, 'em'), | |
| relativeHuge: unit(Math.round(sizes.hugeSize * _baseEm) / _baseEm, 'em'), | |
| relativeMassive: unit( | |
| Math.round(sizes.massiveSize * _baseEm) / _baseEm, | |
| 'em' | |
| ), | |
| absoluteMini: unit(Math.round(sizes.miniSize * _baseEm) / _baseEm, 'rem'), | |
| absoluteTiny: unit(Math.round(sizes.tinySize * _baseEm) / _baseEm, 'rem'), | |
| absoluteSmall: unit(Math.round(sizes.smallSize * _baseEm) / _baseEm, 'rem'), | |
| absoluteMedium: unit(Math.round(sizes.mediumSize * _baseEm) / _baseEm, 'rem'), | |
| absoluteLarge: unit(Math.round(sizes.largeSize * _baseEm) / _baseEm, 'rem'), | |
| absoluteBig: unit(Math.round(sizes.bigSize * _baseEm) / _baseEm, 'rem'), | |
| absoluteHuge: unit(Math.round(sizes.hugeSize * _baseEm) / _baseEm, 'rem'), | |
| absoluteMassive: unit( | |
| Math.round(sizes.massiveSize * _baseEm) / _baseEm, | |
| 'rem' | |
| ), | |
| } | |
| const loader = { | |
| loaderSize: emSizes.relativeBig, | |
| loaderSpeed: unit(0.6, 's'), | |
| loaderLineWidth: unit(0.2, 'em'), | |
| loaderFillColor: rgba(0, 0, 0, 0.1), | |
| loaderLineColor: color.grey, | |
| invertedLoaderFillColor: rgba(255, 255, 255, 0.15), | |
| invertedLoaderLineColor: color.white, | |
| } | |
| const grid = { | |
| columnCount: 16, | |
| } | |
| const transitions = { | |
| defaultDuration: unit(1 / 10, 's'), | |
| defaultEasing: 'ease', | |
| } | |
| const breakPoints = { | |
| mobileBreakpoint: unit(320, 'px'), | |
| tabletBreakpoint: unit(768, 'px'), | |
| computerBreakpoint: unit(992, 'px'), | |
| largeMonitorBreakpoint: unit(1200, 'px'), | |
| widescreenMonitorBreakpoint: unit(1920, 'px'), | |
| } | |
| const coloredText = { | |
| redTextColor: color.red, | |
| orangeTextColor: color.orange, | |
| yellowTextColor: '#B58105', // Yellow text is difficult to read | |
| oliveTextColor: '#8ABC1E', // Olive is difficult to read | |
| greenTextColor: '#1EBC30', // Green is difficult to read | |
| tealTextColor: '#10A3A3', // Teal text is difficult to read | |
| blueTextColor: color.blue, | |
| violetTextColor: color.violet, | |
| purpleTextColor: color.purple, | |
| pinkTextColor: color.pink, | |
| brownTextColor: color.brown, | |
| } | |
| const coloredHeaders = { | |
| redHeaderColor: darken(coloredText.redTextColor, 5), | |
| oliveHeaderColor: darken(coloredText.oliveTextColor, 5), | |
| greenHeaderColor: darken(coloredText.greenTextColor, 5), | |
| yellowHeaderColor: darken(coloredText.yellowTextColor, 5), | |
| blueHeaderColor: darken(coloredText.blueTextColor, 5), | |
| tealHeaderColor: darken(coloredText.tealTextColor, 5), | |
| pinkHeaderColor: darken(coloredText.pinkTextColor, 5), | |
| violetHeaderColor: darken(coloredText.violetTextColor, 5), | |
| purpleHeaderColor: darken(coloredText.purpleTextColor, 5), | |
| orangeHeaderColor: darken(coloredText.orangeTextColor, 5), | |
| brownHeaderColor: darken(coloredText.brownTextColor, 5), | |
| } | |
| const coloredBorder = { | |
| redBorderColor: coloredText.redTextColor, | |
| orangeBorderColor: coloredText.orangeTextColor, | |
| yellowBorderColor: coloredText.yellowTextColor, | |
| oliveBorderColor: coloredText.oliveTextColor, | |
| greenBorderColor: coloredText.greenTextColor, | |
| tealBorderColor: coloredText.tealTextColor, | |
| blueBorderColor: coloredText.blueTextColor, | |
| violetBorderColor: coloredText.violetTextColor, | |
| purpleBorderColor: coloredText.purpleTextColor, | |
| pinkBorderColor: coloredText.pinkTextColor, | |
| brownBorderColor: coloredText.brownTextColor, | |
| } | |
| const alphaColors = { | |
| subtleTransparentBlack: rgba(0, 0, 0, 0.03), | |
| transparentBlack: rgba(0, 0, 0, 0.05), | |
| strongTransparentBlack: rgba(0, 0, 0, 0.1), | |
| veryStrongTransparentBlack: rgba(0, 0, 0, 0.15), | |
| subtleTransparentWhite: rgba(255, 255, 255, 0.02), | |
| transparentWhite: rgba(255, 255, 255, 0.08), | |
| strongTransparentWhite: rgba(255, 255, 255, 0.15), | |
| } | |
| const borders = { | |
| circularRadius: unit(500, 'rem'), | |
| borderColor: rgba(34, 36, 38, 0.15), | |
| strongBorderColor: rgba(34, 36, 38, 0.22), | |
| internalBorderColor: rgba(34, 36, 38, 0.1), | |
| selectedBorderColor: rgba(34, 36, 38, 0.35), | |
| strongSelectedBorderColor: rgba(34, 36, 38, 0.5), | |
| disabledBorderColor: rgba(34, 36, 38, 0.5), | |
| solidInternalBorderColor: '#FAFAFA', | |
| solidBorderColor: '#D4D4D5', | |
| solidSelectedBorderColor: '#BCBDBD', | |
| whiteBorderColor: rgba(255, 255, 255, 0.1), | |
| selectedWhiteBorderColor: rgba(255, 255, 255, 0.8), | |
| solidWhiteBorderColor: '#555555', | |
| selectedSolidWhiteBorderColor: '#999999', | |
| } | |
| const accents = { | |
| subtleGradient: `linear-gradient(transparent, ${alphaColors.transparentBlack})`, | |
| subtleShadow: `1px 1px 2px 0 ${borders.borderColor}`, | |
| floatingShadow: '0px 2px 4px 0px rgba(34, 36, 38, 0.12)', | |
| } | |
| const emotiveColors = { | |
| /* Positive */ | |
| positiveColor: color.green, | |
| positiveBackgroundColor: '#FCFFF5', | |
| positiveBorderColor: '#A3C293', | |
| positiveHeaderColor: '#1A531B', | |
| positiveTextColor: '#2C662D', | |
| /* Negative */ | |
| negativeColor: color.red, | |
| negativeBackgroundColor: '#FFF6F6', | |
| negativeBorderColor: '#E0B4B4', | |
| negativeHeaderColor: '#912D2B', | |
| negativeTextColor: '#9F3A38', | |
| /* Info */ | |
| infoColor: '#31CCEC', | |
| infoBackgroundColor: '#F8FFFF', | |
| infoBorderColor: '#A9D5DE', | |
| infoHeaderColor: '#0E566C', | |
| infoTextColor: '#276F86', | |
| /* Warning */ | |
| warningColor: '#F2C037', | |
| warningBorderColor: '#C9BA9B', | |
| warningBackgroundColor: '#FFFAF3', | |
| warningHeaderColor: '#794B02', | |
| warningTextColor: '#573A08', | |
| } | |
| const icons = { | |
| iconWidth: unit(1.18, 'em'), | |
| } | |
| const neutralText = { | |
| darkTextColor: rgba(0, 0, 0, 0.85), | |
| mutedTextColor: rgba(0, 0, 0, 0.6), | |
| lightTextColor: rgba(0, 0, 0, 0.4), | |
| unselectedTextColor: rgba(0, 0, 0, 0.4), | |
| hoveredTextColor: rgba(0, 0, 0, 0.8), | |
| pressedTextColor: rgba(0, 0, 0, 0.9), | |
| selectedTextColor: rgba(0, 0, 0, 0.95), | |
| disabledTextColor: rgba(0, 0, 0, 0.2), | |
| invertedTextColor: rgba(255, 255, 255, 0.9), | |
| invertedMutedTextColor: rgba(255, 255, 255, 0.8), | |
| invertedLightTextColor: rgba(255, 255, 255, 0.7), | |
| invertedUnselectedTextColor: rgba(255, 255, 255, 0.5), | |
| invertedHoveredTextColor: rgba(255, 255, 255, 1), | |
| invertedPressedTextColor: rgba(255, 255, 255, 1), | |
| invertedSelectedTextColor: rgba(255, 255, 255, 1), | |
| invertedDisabledTextColor: rgba(255, 255, 255, 0.2), | |
| } | |
| const socialBrandColors = { | |
| facebookColor: '#3B5998', | |
| twitterColor: '#55ACEE', | |
| googlePlusColor: '#DD4B39', | |
| linkedInColor: '#1F88BE', | |
| youtubeColor: '#CC181E', | |
| pinterestColor: '#BD081C', | |
| vkColor: '#4D7198', | |
| instagramColor: '#49769C', | |
| } | |
| const headerLineHeightOffset = `calc((${pageHeading.headerLineHeight} - 1em) / 2)` | |
| const headerTopMargin = `calc(2rem - ${headerLineHeightOffset})` | |
| const headerBottomMargin = '1rem' | |
| const loaderOffset = `-${emSizes.relativeMini}` | |
| const derivedValues = { | |
| /* Loaders Position Offset */ | |
| loaderOffset: loaderOffset, | |
| loaderMargin: `${loaderOffset} 0em 0em ${loaderOffset}`, | |
| scrollbarWidth: unit(17, 'px'), | |
| glyphWidth: unit(1.1, 'em'), | |
| lineHeightOffset: `calc((${page.lineHeight} - 1em) / 2)`, | |
| headerLineHeightOffset: headerLineHeightOffset, | |
| headerTopMargin: headerTopMargin, | |
| headerBottomMargin: headerBottomMargin, | |
| headerMargin: `${headerTopMargin} 0em ${headerBottomMargin}`, | |
| pageMinWidth: '320px', | |
| successBackgroundColor: emotiveColors.positiveBackgroundColor, | |
| successColor: emotiveColors.positiveColor, | |
| successBorderColor: emotiveColors.positiveBorderColor, | |
| successHeaderColor: emotiveColors.positiveHeaderColor, | |
| successTextColor: emotiveColors.positiveTextColor, | |
| errorBackgroundColor: emotiveColors.negativeBackgroundColor, | |
| errorColor: emotiveColors.negativeColor, | |
| errorBorderColor: emotiveColors.negativeBorderColor, | |
| errorHeaderColor: emotiveColors.negativeHeaderColor, | |
| errorTextColor: emotiveColors.negativeTextColor, | |
| /* Responsive */ | |
| largestMobileScreen: `calc(${breakPoints.tabletBreakpoint} - 1px)`, | |
| largestTabletScreen: `calc(${breakPoints.computerBreakpoint} - 1px)`, | |
| largestSmallMonitor: `calc(${breakPoints.largeMonitorBreakpoint} - 1px)`, | |
| largestLargeMonitor: `calc(${breakPoints.widescreenMonitorBreakpoint} - 1px)`, | |
| } | |
| const wideColumn = num => unit(num / grid.columnCount * 100, '%') | |
| const regColumn = num => unit(1 / num * 100, '%') | |
| const columns = { | |
| wideColumns: range(16).map(num => wideColumn(num + 1)), | |
| columns: range(16).map(num => regColumn(num + 1)), | |
| } | |
| // /******************************* | |
| // States | |
| // *******************************/ | |
| const disabled = { | |
| disabledOpacity: 0.45, | |
| disabledTextColor: rgba(40, 40, 40, 0.3), | |
| invertedDisabledTextColor: rgba(225, 225, 225, 0.3), | |
| } | |
| const hover = { | |
| floatingShadowHover: | |
| '0px 2px 4px 0px rgba(34, 36, 38, 0.15), ' + | |
| '0px 2px 10px 0px rgba(34, 36, 38, 0.25)', | |
| primaryColorHover: saturate(darken(brand.primaryColor, 5), 10), | |
| secondaryColorHover: saturate(lighten(brand.secondaryColor, 5), 10), | |
| redHover: saturate(darken(color.red, 5), 10), | |
| orangeHover: saturate(darken(color.orange, 5), 10), | |
| yellowHover: saturate(darken(color.yellow, 5), 10), | |
| oliveHover: saturate(darken(color.olive, 5), 10), | |
| greenHover: saturate(darken(color.green, 5), 10), | |
| tealHover: saturate(darken(color.teal, 5), 10), | |
| blueHover: saturate(darken(color.blue, 5), 10), | |
| violetHover: saturate(darken(color.violet, 5), 10), | |
| purpleHover: saturate(darken(color.purple, 5), 10), | |
| pinkHover: saturate(darken(color.pink, 5), 10), | |
| brownHover: saturate(darken(color.brown, 5), 10), | |
| lightRedHover: saturate(darken(color.lightRed, 5), 10), | |
| lightOrangeHover: saturate(darken(color.lightOrange, 5), 10), | |
| lightYellowHover: saturate(darken(color.lightYellow, 5), 10), | |
| lightOliveHover: saturate(darken(color.lightOlive, 5), 10), | |
| lightGreenHover: saturate(darken(color.lightGreen, 5), 10), | |
| lightTealHover: saturate(darken(color.lightTeal, 5), 10), | |
| lightBlueHover: saturate(darken(color.lightBlue, 5), 10), | |
| lightVioletHover: saturate(darken(color.lightViolet, 5), 10), | |
| lightPurpleHover: saturate(darken(color.lightPurple, 5), 10), | |
| lightPinkHover: saturate(darken(color.lightPink, 5), 10), | |
| lightBrownHover: saturate(darken(color.lightBrown, 5), 10), | |
| lightGreyHover: saturate(darken(color.lightGrey, 5), 10), | |
| lightBlackHover: saturate(darken(color.fullBlack, 5), 10), | |
| positiveColorHover: saturate(darken(emotiveColors.positiveColor, 5), 10), | |
| negativeColorHover: saturate(darken(emotiveColors.negativeColor, 5), 10), | |
| facebookHoverColor: saturate(darken(socialBrandColors.facebookColor, 5), 10), | |
| twitterHoverColor: saturate(darken(socialBrandColors.twitterColor, 5), 10), | |
| googlePlusHoverColor: saturate( | |
| darken(socialBrandColors.googlePlusColor, 5), | |
| 10 | |
| ), | |
| linkedInHoverColor: saturate(darken(socialBrandColors.linkedInColor, 5), 10), | |
| youtubeHoverColor: saturate(darken(socialBrandColors.youtubeColor, 5), 10), | |
| instagramHoverColor: saturate( | |
| darken(socialBrandColors.instagramColor, 5), | |
| 10 | |
| ), | |
| pinterestHoverColor: saturate( | |
| darken(socialBrandColors.pinterestColor, 5), | |
| 10 | |
| ), | |
| vkHoverColor: saturate(darken(socialBrandColors.vkColor, 5), 10), | |
| fullBlackHover: lighten(color.fullBlack, 5), | |
| blackHover: lighten(color.black, 5), | |
| greyHover: lighten(color.grey, 5), | |
| whiteHover: darken(color.white, 5), | |
| offWhiteHover: darken(color.offWhite, 5), | |
| darkWhiteHover: darken(color.darkWhite, 5), | |
| } | |
| const focus = { | |
| primaryColorFocus: saturate(darken(brand.primaryColor, 8), 20), | |
| secondaryColorFocus: saturate(lighten(brand.secondaryColor, 8), 20), | |
| redFocus: saturate(darken(color.red, 8), 20), | |
| orangeFocus: saturate(darken(color.orange, 8), 20), | |
| yellowFocus: saturate(darken(color.yellow, 8), 20), | |
| oliveFocus: saturate(darken(color.olive, 8), 20), | |
| greenFocus: saturate(darken(color.green, 8), 20), | |
| tealFocus: saturate(darken(color.teal, 8), 20), | |
| blueFocus: saturate(darken(color.blue, 8), 20), | |
| violetFocus: saturate(darken(color.violet, 8), 20), | |
| purpleFocus: saturate(darken(color.purple, 8), 20), | |
| pinkFocus: saturate(darken(color.pink, 8), 20), | |
| brownFocus: saturate(darken(color.brown, 8), 20), | |
| lightRedFocus: saturate(darken(color.lightRed, 8), 20), | |
| lightOrangeFocus: saturate(darken(color.lightOrange, 8), 20), | |
| lightYellowFocus: saturate(darken(color.lightYellow, 8), 20), | |
| lightOliveFocus: saturate(darken(color.lightOlive, 8), 20), | |
| lightGreenFocus: saturate(darken(color.lightGreen, 8), 20), | |
| lightTealFocus: saturate(darken(color.lightTeal, 8), 20), | |
| lightBlueFocus: saturate(darken(color.lightBlue, 8), 20), | |
| lightVioletFocus: saturate(darken(color.lightViolet, 8), 20), | |
| lightPurpleFocus: saturate(darken(color.lightPurple, 8), 20), | |
| lightPinkFocus: saturate(darken(color.lightPink, 8), 20), | |
| lightBrownFocus: saturate(darken(color.lightBrown, 8), 20), | |
| lightGreyFocus: saturate(darken(color.lightGrey, 8), 20), | |
| lightBlackFocus: saturate(darken(color.fullBlack, 8), 20), | |
| positiveColorFocus: saturate(darken(emotiveColors.positiveColor, 8), 20), | |
| negativeColorFocus: saturate(darken(emotiveColors.negativeColor, 8), 20), | |
| facebookFocusColor: saturate(darken(socialBrandColors.facebookColor, 8), 20), | |
| twitterFocusColor: saturate(darken(socialBrandColors.twitterColor, 8), 20), | |
| googlePlusFocusColor: saturate( | |
| darken(socialBrandColors.googlePlusColor, 8), | |
| 20 | |
| ), | |
| linkedInFocusColor: saturate(darken(socialBrandColors.linkedInColor, 8), 20), | |
| youtubeFocusColor: saturate(darken(socialBrandColors.youtubeColor, 8), 20), | |
| instagramFocusColor: saturate( | |
| darken(socialBrandColors.instagramColor, 8), | |
| 20 | |
| ), | |
| pinterestFocusColor: saturate( | |
| darken(socialBrandColors.pinterestColor, 8), | |
| 20 | |
| ), | |
| vkFocusColor: saturate(darken(socialBrandColors.vkColor, 8), 20), | |
| fullBlackFocus: lighten(color.fullBlack, 8), | |
| blackFocus: lighten(color.black, 8), | |
| greyFocus: lighten(color.grey, 8), | |
| whiteFocus: darken(color.white, 8), | |
| offWhiteFocus: darken(color.offWhite, 8), | |
| darkWhiteFocus: darken(color.darkWhite, 8), | |
| } | |
| const activeDown = { | |
| // /*--- Colors ---*/ | |
| primaryColorDown: darken(brand.primaryColor, 10), | |
| secondaryColorDown: lighten(brand.secondaryColor, 10), | |
| redDown: darken(color.red, 10), | |
| orangeDown: darken(color.orange, 10), | |
| yellowDown: darken(color.yellow, 10), | |
| oliveDown: darken(color.olive, 10), | |
| greenDown: darken(color.green, 10), | |
| tealDown: darken(color.teal, 10), | |
| blueDown: darken(color.blue, 10), | |
| violetDown: darken(color.violet, 10), | |
| purpleDown: darken(color.purple, 10), | |
| pinkDown: darken(color.pink, 10), | |
| brownDown: darken(color.brown, 10), | |
| lightRedDown: darken(color.lightRed, 10), | |
| lightOrangeDown: darken(color.lightOrange, 10), | |
| lightYellowDown: darken(color.lightYellow, 10), | |
| lightOliveDown: darken(color.lightOlive, 10), | |
| lightGreenDown: darken(color.lightGreen, 10), | |
| lightTealDown: darken(color.lightTeal, 10), | |
| lightBlueDown: darken(color.lightBlue, 10), | |
| lightVioletDown: darken(color.lightViolet, 10), | |
| lightPurpleDown: darken(color.lightPurple, 10), | |
| lightPinkDown: darken(color.lightPink, 10), | |
| lightBrownDown: darken(color.lightBrown, 10), | |
| lightGreyDown: darken(color.lightGrey, 10), | |
| lightBlackDown: darken(color.fullBlack, 10), | |
| // /*--- 'em'otive ---*/ | |
| positiveColorDown: darken(emotiveColors.positiveColor, 10), | |
| negativeColorDown: darken(emotiveColors.negativeColor, 10), | |
| // /*--- Brand ---*/ | |
| facebookDownColor: darken(socialBrandColors.facebookColor, 10), | |
| twitterDownColor: darken(socialBrandColors.twitterColor, 10), | |
| googlePlusDownColor: darken(socialBrandColors.googlePlusColor, 10), | |
| linkedInDownColor: darken(socialBrandColors.linkedInColor, 10), | |
| youtubeDownColor: darken(socialBrandColors.youtubeColor, 10), | |
| instagramDownColor: darken(socialBrandColors.instagramColor, 10), | |
| pinterestDownColor: darken(socialBrandColors.pinterestColor, 10), | |
| vkDownColor: darken(socialBrandColors.vkColor, 10), | |
| // /*--- Dark Tones ---*/ | |
| fullBlackDown: lighten(color.fullBlack, 10), | |
| blackDown: lighten(color.black, 10), | |
| greyDown: lighten(color.grey, 10), | |
| // /*--- Light Tones ---*/ | |
| whiteDown: darken(color.white, 10), | |
| offWhiteDown: darken(color.offWhite, 10), | |
| darkWhiteDown: darken(color.darkWhite, 10), | |
| } | |
| const active = { | |
| primaryColorActive: saturate(darken(brand.primaryColor, 5), 15), | |
| secondaryColorActive: saturate(lighten(brand.secondaryColor, 5), 15), | |
| redActive: saturate(darken(color.red, 5), 15), | |
| orangeActive: saturate(darken(color.orange, 5), 15), | |
| yellowActive: saturate(darken(color.yellow, 5), 15), | |
| oliveActive: saturate(darken(color.olive, 5), 15), | |
| greenActive: saturate(darken(color.green, 5), 15), | |
| tealActive: saturate(darken(color.teal, 5), 15), | |
| blueActive: saturate(darken(color.blue, 5), 15), | |
| violetActive: saturate(darken(color.violet, 5), 15), | |
| purpleActive: saturate(darken(color.purple, 5), 15), | |
| pinkActive: saturate(darken(color.pink, 5), 15), | |
| brownActive: saturate(darken(color.brown, 5), 15), | |
| lightRedActive: saturate(darken(color.lightRed, 5), 15), | |
| lightOrangeActive: saturate(darken(color.lightOrange, 5), 15), | |
| lightYellowActive: saturate(darken(color.lightYellow, 5), 15), | |
| lightOliveActive: saturate(darken(color.lightOlive, 5), 15), | |
| lightGreenActive: saturate(darken(color.lightGreen, 5), 15), | |
| lightTealActive: saturate(darken(color.lightTeal, 5), 15), | |
| lightBlueActive: saturate(darken(color.lightBlue, 5), 15), | |
| lightVioletActive: saturate(darken(color.lightViolet, 5), 15), | |
| lightPurpleActive: saturate(darken(color.lightPurple, 5), 15), | |
| lightPinkActive: saturate(darken(color.lightPink, 5), 15), | |
| lightBrownActive: saturate(darken(color.lightBrown, 5), 15), | |
| lightGreyActive: saturate(darken(color.lightGrey, 5), 15), | |
| lightBlackActive: saturate(darken(color.fullBlack, 5), 15), | |
| // /*--- 'em'otive ---*/ | |
| positiveColorActive: saturate(darken(emotiveColors.positiveColor, 5), 15), | |
| negativeColorActive: saturate(darken(emotiveColors.negativeColor, 5), 15), | |
| // /*--- Brand ---*/ | |
| facebookActiveColor: saturate(darken(socialBrandColors.facebookColor, 5), 15), | |
| twitterActiveColor: saturate(darken(socialBrandColors.twitterColor, 5), 15), | |
| googlePlusActiveColor: saturate( | |
| darken(socialBrandColors.googlePlusColor, 5), | |
| 15 | |
| ), | |
| linkedInActiveColor: saturate(darken(socialBrandColors.linkedInColor, 5), 15), | |
| youtubeActiveColor: saturate(darken(socialBrandColors.youtubeColor, 5), 15), | |
| instagramActiveColor: saturate( | |
| darken(socialBrandColors.instagramColor, 5), | |
| 15 | |
| ), | |
| pinterestActiveColor: saturate( | |
| darken(socialBrandColors.pinterestColor, 5), | |
| 15 | |
| ), | |
| vkActiveColor: saturate(darken(socialBrandColors.vkColor, 5), 15), | |
| // /*--- Dark Tones ---*/ | |
| fullBlackActive: darken(color.fullBlack, 5), | |
| blackActive: darken(color.black, 5), | |
| greyActive: darken(color.grey, 5), | |
| // /*--- Light Tones ---*/ | |
| whiteActive: darken(color.white, 5), | |
| offWhiteActive: darken(color.offWhite, 5), | |
| darkWhiteActive: darken(color.darkWhite, 5), | |
| } | |
| export default { | |
| ...accents, | |
| ...active, | |
| ...activeDown, | |
| ...alphaColors, | |
| ...base, | |
| ...borderRadius, | |
| ...borders, | |
| ...brand, | |
| ...breakPoints, | |
| ...color, | |
| ...coloredBorder, | |
| ...coloredHeaders, | |
| ...coloredText, | |
| ...columns, | |
| ...derivedValues, | |
| ...disabled, | |
| ...emotiveColors, | |
| ...emSizes, | |
| ...focus, | |
| ...formInput, | |
| ...grid, | |
| ...highlighted, | |
| ...hover, | |
| ...icons, | |
| ...link, | |
| ...loader, | |
| ...neutralText, | |
| ...page, | |
| ...pageHeading, | |
| ...paragraph, | |
| ...scrollBar, | |
| ...sizes, | |
| ...socialBrandColors, | |
| ...transitions, | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment