108 lines
2.5 KiB
TypeScript
108 lines
2.5 KiB
TypeScript
import { css } from 'styled-components';
|
|
import Color from 'color';
|
|
|
|
export const color = {
|
|
primary: '#0052cc', // Blue
|
|
success: '#0B875B', // green
|
|
danger: '#E13C3C', // red
|
|
warning: '#F89C1C', // orange
|
|
secondary: '#F4F5F7', // light grey
|
|
|
|
textDarkest: '#172b4d',
|
|
textDark: '#42526E',
|
|
textMedium: '#5E6C84',
|
|
textLight: '#8993a4',
|
|
textLink: '#0052cc',
|
|
|
|
backgroundDarkPrimary: '#0747A6',
|
|
backgroundMedium: '#dfe1e6',
|
|
backgroundLight: '#ebecf0',
|
|
backgroundLightest: '#F4F5F7',
|
|
backgroundLightPrimary: '#D2E5FE',
|
|
backgroundLightSuccess: '#E4FCEF',
|
|
|
|
borderLightest: '#dfe1e6',
|
|
borderLight: '#C1C7D0',
|
|
borderInputFocus: '#4c9aff',
|
|
};
|
|
|
|
export const font = {
|
|
regular: 'font-family: "Droid Sans"; font-weight: normal;',
|
|
size: (size: number) => `font-size: ${size}px;`,
|
|
bold: 'font-family: "Droid Sans"; font-weight: normal;',
|
|
medium: 'font-family: "Droid Sans"; font-weight: normal;',
|
|
};
|
|
|
|
export const mixin = {
|
|
darken: (colorValue: string, amount: number) =>
|
|
Color(colorValue)
|
|
.darken(amount)
|
|
.string(),
|
|
lighten: (colorValue: string, amount: number) =>
|
|
Color(colorValue)
|
|
.lighten(amount)
|
|
.string(),
|
|
rgba: (colorValue: string, opacity: number) =>
|
|
Color(colorValue)
|
|
.alpha(opacity)
|
|
.string(),
|
|
boxShadowCard: css`
|
|
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 2px 0px;
|
|
`,
|
|
boxShadowMedium: css`
|
|
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
|
|
`,
|
|
boxShadowDropdown: css`
|
|
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.31) 0px 0px 1px;
|
|
`,
|
|
truncateText: css`
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
`,
|
|
clickable: css`
|
|
cursor: pointer;
|
|
user-select: none;
|
|
`,
|
|
hardwareAccelerate: css`
|
|
transform: translateZ(0);
|
|
`,
|
|
cover: css`
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
`,
|
|
link: (colorValue = color.textLink) => css`
|
|
cursor: pointer;
|
|
color: ${colorValue};
|
|
${font.medium}
|
|
&:hover, &:visited, &:active {
|
|
color: ${colorValue};
|
|
}
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
`,
|
|
|
|
placeholderColor: (colorValue: string) => css`
|
|
::-webkit-input-placeholder {
|
|
color: ${colorValue} !important;
|
|
opacity: 1 !important;
|
|
}
|
|
:-moz-placeholder {
|
|
color: ${colorValue} !important;
|
|
opacity: 1 !important;
|
|
}
|
|
::-moz-placeholder {
|
|
color: ${colorValue} !important;
|
|
opacity: 1 !important;
|
|
}
|
|
:-ms-input-placeholder {
|
|
color: ${colorValue} !important;
|
|
opacity: 1 !important;
|
|
}
|
|
`,
|
|
};
|