xref: /expo/docs/global-styles/extras.ts (revision 104b94c3) 
1import { css } from '@emotion/react';
2import { theme, typography } from '@expo/styleguide';
3import { darkTheme } from '@expo/styleguide-base';
4
5export const globalExtras = css`
6  html {
7    background: ${theme.background.default};
8  }
9
10  body {
11    ${typography.body.paragraph}
12    text-rendering: optimizeLegibility;
13    line-height: 1;
14  }
15
16  *:focus-visible {
17    outline: 3px solid ${theme.button.tertiary.icon};
18    outline-offset: 1px;
19    border-radius: 3px;
20  }
21
22  ::selection {
23    background-color: ${theme.palette.blue5};
24    color: ${theme.text.default};
25  }
26
27  ::-webkit-scrollbar {
28    width: 6px;
29    height: 6px;
30  }
31
32  ::-webkit-scrollbar-track {
33    background-color: transparent;
34    cursor: pointer;
35  }
36
37  ::-webkit-scrollbar-thumb {
38    background: ${theme.palette.gray5};
39    border-radius: 10px;
40  }
41
42  ::-webkit-scrollbar-thumb:hover {
43    background: ${theme.palette.gray6};
44  }
45
46  div[class*='Terminal'] > div {
47    ::-webkit-scrollbar-thumb {
48      background: ${darkTheme.icon.quaternary};
49    }
50
51    ::-webkit-scrollbar-thumb:hover {
52      background: ${darkTheme.icon.tertiary};
53    }
54  }
55
56  img {
57    max-width: 768px;
58    width: 100%;
59  }
60
61  img.wide-image {
62    max-width: 900px;
63  }
64
65  img[src*="https://placehold.it/15"]
66  {
67    width: 15px !important;
68    height: 15px !important;
69  }
70
71  .react-player > video {
72    outline: none;
73  }
74
75  .strike {
76    text-decoration: line-through;
77  }
78
79  code {
80    font-variant-ligatures: none;
81  }
82`;
83