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