1import { css } from '@emotion/react'; 2import { theme, typography } from '@expo/styleguide'; 3import { spacing } from '@expo/styleguide-base'; 4 5// Global styles for react-diff-view 6export const globalDiff = css` 7 .diff-unified { 8 ${typography.fontSizes[13]}; 9 border-collapse: collapse; 10 white-space: pre-wrap; 11 width: 100%; 12 13 td, 14 th { 15 border-bottom: none; 16 } 17 } 18 19 .diff-line:first-of-type { 20 height: 29px; 21 22 td { 23 padding-top: ${spacing[2]}px; 24 } 25 } 26 27 .diff-line:last-of-type { 28 height: 29px; 29 } 30 31 .diff-gutter-col { 32 width: ${spacing[10]}px; 33 background-color: ${theme.background.element}; 34 } 35 36 .diff-gutter { 37 ${typography.fontSizes[12]}; 38 text-align: right; 39 padding: 0 ${spacing[2]}px; 40 } 41 42 .diff-gutter-normal { 43 color: ${theme.icon.secondary}; 44 } 45 46 .diff-code { 47 word-break: break-word; 48 padding-left: ${spacing[4]}px; 49 } 50 51 .diff-code-insert { 52 background-color: ${theme.palette.green2}; 53 color: ${theme.text.success}; 54 } 55 56 .diff-gutter-insert { 57 background-color: ${theme.palette.green4}; 58 color: ${theme.text.success}; 59 } 60 61 .diff-code-delete { 62 background-color: ${theme.palette.red2}; 63 color: ${theme.text.danger}; 64 } 65 66 .diff-gutter-delete { 67 background-color: ${theme.palette.red4}; 68 color: ${theme.text.danger}; 69 } 70`; 71