* wip code highlighting of lines * Implements gutter component * WIP: Profiler with gutter * cleaned up highlight code * Removes before content for gutter styling * Styles gutter * Add correct Profiler code content * Adds color variable for gutter gray * refactor code component width gutter and diffing
34 lines
636 B
TypeScript
34 lines
636 B
TypeScript
import { css } from 'styled-components';
|
|
|
|
const colors = {
|
|
black: '#000000',
|
|
white: '#FFFFFF',
|
|
lightGray: '#F1F4F5',
|
|
gray: '#F1F2F7',
|
|
darkGray: '#E9ECED',
|
|
darkestGray: '#E2E5E6',
|
|
blueGray: '#ECEFF9',
|
|
};
|
|
|
|
interface SizesInterface {
|
|
[key: string]: number;
|
|
}
|
|
|
|
const sizes: SizesInterface = {
|
|
medium: 900,
|
|
small: 650,
|
|
};
|
|
|
|
const media = Object.keys(sizes).reduce((acc: any, label: string) => {
|
|
acc[label] = (args: any) => css`
|
|
@media (max-width: ${sizes[label] / 16}em) {
|
|
${css(args)};
|
|
}
|
|
`;
|
|
|
|
return acc;
|
|
}, {});
|
|
|
|
export default media;
|
|
export { colors, media };
|