xref: /expo/docs/global-styles/extras.ts (revision dfd15ebd) 
1import { css } from '@emotion/react';
2import { darkTheme, spacing, theme, typography } from '@expo/styleguide';
3
4export const globalExtras = css`
5  html {
6    background: ${theme.background.default};
7  }
8
9  body {
10    ${typography.body.paragraph}
11    font-family: ${typography.fontFaces.regular};
12    text-rendering: optimizeLegibility;
13    line-height: 1;
14  }
15
16  ::selection {
17    background-color: ${theme.highlight.accent};
18    color: ${theme.text.default};
19  }
20
21  ::-webkit-scrollbar {
22    width: 6px;
23    height: 6px;
24  }
25
26  ::-webkit-scrollbar-track {
27    background-color: transparent;
28    cursor: pointer;
29  }
30
31  ::-webkit-scrollbar-thumb {
32    background: ${theme.background.tertiary};
33    border-radius: 10px;
34  }
35
36  ::-webkit-scrollbar-thumb:hover {
37    background: ${theme.background.quaternary};
38  }
39
40  html[data-expo-theme='light'] div[class*='SnippetContent'] {
41    ::-webkit-scrollbar-thumb {
42      background: ${darkTheme.background.quaternary};
43    }
44
45    ::-webkit-scrollbar-thumb:hover {
46      background: ${darkTheme.icon.secondary};
47    }
48  }
49
50  a {
51    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
52    color: ${theme.link.default};
53  }
54
55  img {
56    max-width: 768px;
57    width: 100%;
58  }
59
60  img.wide-image {
61    max-width: 900px;
62  }
63
64  img[src*="https://placehold.it/15"]
65  {
66    width: 15px !important;
67    height: 15px !important;
68  }
69
70  .react-player > video {
71    outline: none;
72  }
73
74  .strike {
75    text-decoration: line-through;
76  }
77
78  // TODO: investigate why some style is forcing nested ordered lists to have 1rem bottom margin!
79
80  ul ul,
81  ol ul {
82    margin-bottom: 0 !important;
83  }
84
85  // Global styles for react-diff-view
86
87  .diff-unified {
88    ${typography.fontSizes[13]};
89    font-family: ${typography.fontStacks.mono};
90    border-collapse: collapse;
91    white-space: pre-wrap;
92    width: 100%;
93
94    td,
95    th {
96      border-bottom: none;
97    }
98  }
99
100  .diff-line:first-of-type {
101    height: 29px;
102
103    td {
104      padding-top: ${spacing[2]}px;
105    }
106  }
107
108  .diff-line:last-of-type {
109    height: 29px;
110  }
111
112  .diff-gutter-col {
113    width: ${spacing[10]}px;
114    background-color: ${theme.background.tertiary};
115  }
116
117  .diff-gutter {
118    ${typography.fontSizes[12]};
119    text-align: right;
120    padding: 0 ${spacing[2]}px;
121  }
122
123  .diff-gutter-normal {
124    color: ${theme.icon.secondary};
125  }
126
127  .diff-code {
128    word-break: break-word;
129    padding-left: ${spacing[4]}px;
130  }
131
132  .diff-code-insert {
133    background-color: ${theme.palette.green['000']};
134    color: ${theme.text.success};
135  }
136
137  .diff-gutter-insert {
138    background-color: ${theme.palette.green['100']};
139    color: ${theme.text.success};
140  }
141
142  .diff-code-delete {
143    background-color: ${theme.palette.red['000']};
144    color: ${theme.text.error};
145  }
146
147  .diff-gutter-delete {
148    background-color: ${theme.palette.red['100']};
149    color: ${theme.text.error};
150  }
151`;
152