const Button = ({ as: Component, color, style, ...props }: Props) => (
<Component
style={{
'--color': color,
'--color-hover': polished.darken(0.15, color),
...style,
}}
{...props}
/>
)
{Object.keys(links).map(key => {
const { name, url, color, iconId } = links[key]
return (
<A
className={styles.socialLink}
key={key}
title={name}
href={url}
style={{
'--color': color,
'--color-hover': polished.darken(0.15, color),
}}
>
<Icon id={iconId} size={28} />
</A>
)
})}
${(props) => darken(0.2, props.theme.colors.green)}40 3px
-webkit-text-stroke-color: ${(props) => darken(0.2, props.theme.colors.black)};
background-color: ${({ theme }) => darken(0.2, theme.brand.primary)};
const getHoverColor = props => {
return props.hollow ? props.color : darken(0.1, props.color)
}
const yellow = {
logoText: '#d2bca1',
cover: bannerBg,
coverIndex: primaryMate,
contrastFg: 'orange',
htmlBg: contentBoxBg,
loading: {
basic: bannerBg,
animate: lighten(0.03, bannerBg),
// basic: '#113B4A',
// animate: '#02495a',
},
error: {
title: primaryColor,
desc: darken(0.1, primaryColor),
bg: lighten(0.02, contentBoxBg),
},
font: fontColor,
link: '#269A95',
main: '#7DC0C5',
bodyBg: contentBg,
selectionBg: '#839496',
avatarOpacity: 0.8,
baseColor: {
error: 'tomato !important',
errorBg: '#FFF0F0',
green: 'yellowgreen !important',
pink: '#f59dba !important',
pinkLite: '#ffafc9',
export const h4FontWeight = 'normal';
export const miniHeaderFontSize = '12px';
export const miniHeaderLineHeight = '14px';
export const miniHeaderFontWeight = 'bold';
export const backgroundColor = '#1b2431';
export const borderColor = '#313d4f';
export const primaryColor = '#2980B9';
export const primaryGreen = '#26C281';
export const primaryRed = '#F64747';
export const primaryHoverColor = lighten(0.05, primaryColor);
export const primaryActiveColor = darken(0.05, primaryColor);
export const panelBackground = rgba('#012132', 0.6);
export const panelDarkBackground = darken(0.05, panelBackground);
export const panelLightBackground = lighten(0.02, panelBackground);
export const progressBackground = rgba('#313d4f', 0.5);
export const progressColor = primaryHoverColor;
export const gutterMini = '0.6rem';
export const gutterSmall = '1rem';
export const gutterMedium = '1.75rem';
export const gutterLarge = '3rem';
export const borderRadius = '4px';
const generateColor = color => ({
base: color,
light: lighten(0.2, color),
dark: darken(0.2, color),
});
border: 1px solid ${props =>
props.error
? props.theme.colors.red
: darken(0.15, props.theme.colors.border)
${(props) => darken(0.2, props.theme.colors.blue)}30 3px
Object.keys(PALETTE).forEach(key => PALETTE[`dark${upperCaseFirst(key)}`] = darken(DARKEN_RATIO, PALETTE[key]));
inputLineHeight: 1.4, em: '1em', rem: '1rem', fontFamily: '"Open Sans", Helvetica, Arial, sans-serif', weightLight: 300, weightNormal: 400, weightSemiBold: 600, weightBold: 700, fontWeight: 400, fontWeightLight: 300, fontColorHeadingCaption: '#888', borderRadius: '2px', arrowSize: '5px', disabledBackground: '#ededed', bodyBackground: '#ebebeb', bodyAccentColor: darken(0.8, '#fff'), bodyOffsetColor: darken(0.53, '#fff'), fontColor: darken(0.8, '#fff'), colorWhite: '#fff', colorBlack: '#000', colorOffsetLight, colorOffsetDark, colorInfo: '#00a9eb', colorSuccess: '#68970f', colorWarning: '#fca520', colorError: '#ff3100', colorMuted: darken(0.5125, '#fff'), colorSmoke: '#f2f2f2', colorBlue: '#2f7bbf', colorBlueLight: lighten(colorOffsetLight, '#2f7bbf'), colorBlueDark: darken(colorOffsetDark, '#2f7bbf'),
backgroundColor: props => darken(0.3, theme.color[props.layer].base),
${props => {
const color = props.color ? props.color : props.theme.dark;
return darken(0.1, color);
}},
fontSize: '24px',
},
img: {
padding: '50px',
},
},
})
const Button = styled(Link)({
padding: '10px 15px',
borderRadius: '3px',
background: theme.colors.green,
color: 'white',
':hover, :focus': {
color: 'white',
background: darken(0.1, theme.colors.green),
},
})
const TestingCta = () => {
const {allFile} = useStaticQuery(
graphql`
query {
allFile(
sort: {fields: name, order: DESC}
filter: {relativeDirectory: {eq: "images/testing"}}
) {
edges {
node {
id
name
export default baseTheme => {
const defaultBorder = darken(
baseTheme.colorOffsetDark,
baseTheme.colorGrayLight
);
const primaryBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorBlue);
const successBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorGreen);
const warningBorder = darken(
baseTheme.colorOffsetDark,
baseTheme.colorOrange
);
const dangerBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorRed);
const defaultHoverBackground = darken(
baseTheme.colorOffsetDark,
baseTheme.colorGrayLight
);
const defaultActiveBackground = darken(
baseTheme.colorOffsetDark,
defaultHoverBackground
);
const primaryActiveBackground = darken(
baseTheme.colorOffsetDark,
baseTheme.colorBlueDark
);
const successActiveBackground = darken(
baseTheme.colorOffsetDark,
baseTheme.colorGreenDark
);
const warningActiveBackground = darken(
baseTheme.colorOffsetDark,
baseTheme.colorOrangeDark
);
const dangerActiveBackground = darken(
baseTheme.colorOffsetDark,
baseTheme.colorRedDark
);
return {
fontSize: `${(parseFloat(baseTheme.fontSize) - 1) / parseFloat(baseTheme.fontSize)}rem`,
fontWeight: baseTheme.weightNormal,
paddingTop: '0.6em',
paddingRight: '1em',
paddingBottom: '0.53em',
paddingLeft: '1em',
spacing: '0.4rem',
borderSize: '1px',
display: 'inline-block',
position: 'relative',
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
background: 'transparent',
lineHeight: 1.2,
textAlign: 'center',
webkitTextStroke: 0, // This makes white text in buttons hard to read, so removing it
webkitFontSmoothing: 'subpixel-antialiased',
userSelect: 'none',
cursor: 'pointer',
transition: 'all 200ms ease',
border: 'none',
borderLeft: 0,
borderBottom: '1px solid',
borderTop: 0,
borderRight: 0,
maxWidth: 'initial',
float: 'none',
// Disabled
disabledBorder: darken(
baseTheme.colorOffsetDark,
baseTheme.disabledBackground
),
disabledColor: lighten(0.3, baseTheme.disabledBackground),
// Normal
defaultBackground: baseTheme.colorGrayLight,
primaryBackground: baseTheme.colorBlue,
successBackground: baseTheme.colorGreen,
warningBackground: baseTheme.colorOrange,
dangerBackground: baseTheme.colorRed,
defaultBorder,
primaryBorder,
successBorder,
warningBorder,
dangerBorder,
defaultColor: baseTheme.colorGrayDark,
primaryColor: baseTheme.colorWhite,
successColor: baseTheme.colorWhite,
warningColor: baseTheme.colorWhite,
dangerColor: baseTheme.colorWhite,
// Hover
defaultHoverBackground,
primaryHoverBackground: baseTheme.colorBlueDark,
successHoverBackground: baseTheme.colorGreenDark,
warningHoverBackground: baseTheme.colorOrangeDark,
dangerHoverBackground: baseTheme.colorRedDark,
defaultHoverBorder: darken(baseTheme.colorOffsetDark, defaultBorder),
primaryHoverBorder: darken(baseTheme.colorOffsetDark, primaryBorder),
successHoverBorder: darken(
baseTheme.colorOffsetDark,
baseTheme.colorGreenDark
),
warningHoverBorder: darken(
baseTheme.colorOffsetDark,
baseTheme.colorOrangeDark
),
dangerHoverBorder: darken(
baseTheme.colorOffsetDark,
baseTheme.colorRedDark
),
defaultHoverColor: baseTheme.colorGrayDark,
primaryHoverColor: baseTheme.colorWhite,
successHoverColor: baseTheme.colorWhite,
warningHoverColor: baseTheme.colorWhite,
dangerHoverColor: baseTheme.colorWhite,
// Active
defaultActiveBackground,
primaryActiveBackground,
successActiveBackground,
warningActiveBackground,
dangerActiveBackground,
defaultActiveBorder: darken(
baseTheme.colorOffsetDark,
defaultActiveBackground
),
primaryActiveBorder: darken(
baseTheme.colorOffsetDark,
primaryActiveBackground
),
successActiveBorder: darken(
baseTheme.colorOffsetDark,
successActiveBackground
),
warningActiveBorder: darken(
baseTheme.colorOffsetDark,
warningActiveBackground
),
dangerActiveBorder: darken(
baseTheme.colorOffsetDark,
dangerActiveBackground
),
defaultActiveColor: baseTheme.colorGrayDark,
primaryActiveColor: baseTheme.colorWhite,
successActiveColor: baseTheme.colorWhite,
warningActiveColor: baseTheme.colorWhite,
dangerActiveColor: baseTheme.colorWhite,
// Focus
defaultFocusColor: baseTheme.colorGrayDark,
primaryFocusColor: baseTheme.colorWhite,
successFocusColor: baseTheme.colorWhite,
warningFocusColor: baseTheme.colorWhite,
dangerFocusColor: baseTheme.colorWhite,
defaultFocusOutlineColor: darken(
baseTheme.colorOffsetDark,
defaultActiveBackground
),
primaryFocusOutlineColor: darken(
baseTheme.colorOffsetDark,
primaryActiveBackground
),
successFocusOutlineColor: darken(
baseTheme.colorOffsetDark,
successActiveBackground
),
warningFocusOutlineColor: darken(
baseTheme.colorOffsetDark,
warningActiveBackground
),
dangerFocusOutlineColor: darken(
baseTheme.colorOffsetDark,
dangerActiveBackground
)
};
};
border: 1px solid ${props =>
props.error
? darken(0.1, props.theme.colors.red)
: props.theme.colors.blue
link: {
default: lighten(0.4, palette.yellow),
hover: lighten(0.3, palette.yellow)
},
navigation: {
link: palette.maximumBlueGreen
},
inlineCodeBackground: greys.greyLight,
githubIcon: greys.greyDark,
instagramIcon: palette.tulip,
twitterIcon: palette.dodgerBlue,
background: '#FFF',
horizontalRule: palette.mediumTurquoise,
shadow: palette.russianViolet,
error: palette.tulip,
blockQuote: darken(0.1, greys.greyMedium),
...greys
}
export const fonts = {
sansSerif: {
family: '"Open Sans", Helvetica, sans-serif',
weights: {
light: 300,
regular: 600,
heavy: 700
}
},
serif: {
family: 'Merriweather, Georgia, serif',
weights: {
border-bottom: 1px solid ${props => darken(0.05, props.theme.colors.white)};
}
&:active, &:focus {
box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 3px 1px, rgba(60, 64, 67, 0.3) 0px 1px 2px 0px;
border-bottom-left-radius: 0px;
color: ${variable.SiteColor};
outline: unset;
border-color: transparent;
}
&::after {
display: none !important;
}
&[alt="BandagedBD"] {
background-color: ${variable.BandagedBD};
color: #fff;
&:hover {
background-color: ${darken(0.15, variable.BandagedBD)}
}
}
&[alt="BetterDiscord"] {
background-color: ${variable.BetterDiscord};
color: #fff;
&:hover {
background-color: ${darken(0.15, variable.BetterDiscord)}
}
}
&[alt="PowerCord"] {
background-color: ${variable.PowerCord};
color: #fff;
&:hover {
background-color: ${darken(0.15, variable.PowerCord)}
}
// common colors
const chrome000 = "#FFFFFF";
const chrome500 = "#9E9E9E";
const chrome600 = "#757575";
const chrome800 = "#424242";
const chrome900 = "#212121";
const blue = "#2196F3";
const deepPurple = "#673AB7";
module.exports = {
colors: {
// ui colors
background: "#f3f4f5",
link: blue,
linkHover: darken(0.2, blue),
linkVisited: darken(0.2, deepPurple),
text: chrome800,
textLight: chrome500,
overlay: rgba(chrome900, 0.85),
shadow: rgba(chrome600, 0.4),
shadowLight: rgba(chrome600, 0.2),
// material ui color palette
red: "#F44336",
pink: "#E91E63",
purple: "#9C27B0",
deepPurple: "#673AB7",
indigo: "#3F51B5",
blue,
lightBlue: "#03A9F4",
background-color: ${props =>
props.hollow ? colors.white : darken(0.1, props.color)};
list-style: none;
line-height: initial;
cursor: pointer;
text-shadow: unset;
&:nth-child(2) {
margin-left: 10px;
}
&:only-child {
display: none;
}
&:hover {
color: ${variable.SiteColor};
}
&:focus {
outline: unset;
border: 1px solid ${darken(0.1,variable.SiteColor)};
box-shadow: unset;
}
&:focus::after {
display: none;
}
&[class*="selected"] {
color: ${variable.SiteColor};
box-shadow: unset;
text-shadow: unset;
background-color: #fff;
box-shadow: 0 1px 3px 1px rgba(60,64,67,0.15), 0 1px 2px 0 rgba(60,64,67,0.3);
}
}
}
${TabPanell} {
}
button {
color: #fff;
background-color: transparent;
border-radius: 3px;
line-height: unset;
padding: 2px 9px;
margin-top: 7px;
justify-self: center;
transition: 250ms ease-in-out;
height: 1.2rem;
margin-left: 10px;
border: unset;
font-size: 0.6rem;
font-weight: bold;
align-self: flex-end;
border: 1px solid rgba( 255,255,255, 0.55);
@media (min-width: 850px) {
margin-top: unset;
}
&:hover {
background-color: ${darken(0.1, variable.SiteColor)};
color: #fff;
cursor: pointer;
}
&:focus, &:active {
opacity: 0.8;
outline: 0;
}
}
`
border: solid 3px ${(props) => darken(0.2, props.theme.colors.green)};