Skip to content

Commit d51f706

Browse files
gaearonlebo
gaearon
and
lebo
authored
[Beta] Dark more tweaks (reactjs#4019)
* Make sandbox themeable * Fix gutters * Fix FOUCs Co-authored-by: Dan Lebowitz <[email protected]>
1 parent 5ba0ad8 commit d51f706

File tree

6 files changed

+99
-49
lines changed

6 files changed

+99
-49
lines changed

‎beta/colors.js

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ module.exports = {
2323
'secondary-button-dark': '#404756', // gray-70
2424

2525
// Gray
26+
'gray-95': '#16181D',
2627
'gray-90': '#23272F',
2728
'gray-80': '#343A46',
2829
'gray-70': '#404756',

‎beta/src/components/MDX/CodeBlock/CodeBlock.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
*/
44

55
.codeViewer {
6-
padding: 1.5rem 0.5rem;
6+
padding: 6px 0.5rem !important;
77
}

‎beta/src/components/MDX/CodeBlock/CodeBlock.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ import {
1111
SandpackThemeProvider,
1212
} from '@codesandbox/sandpack-react';
1313
import rangeParser from 'parse-numeric-range';
14-
15-
import {CodeBlockLightTheme} from '../Sandpack/Themes';
14+
import {CustomTheme} from '../Sandpack/Themes';
1615
import styles from './CodeBlock.module.css';
1716

1817
interface InlineHiglight {
@@ -47,7 +46,7 @@ const CodeBlock = React.forwardRef(
4746
const linesToHighlight = getHighlightLines(metastring);
4847
const highlightedLineConfig = linesToHighlight.map((line) => {
4948
return {
50-
className: 'bg-github-highlight',
49+
className: 'bg-github-highlight dark:bg-opacity-10',
5150
line,
5251
};
5352
});
@@ -81,7 +80,7 @@ const CodeBlock = React.forwardRef(
8180
<div
8281
translate="no"
8382
className={cn(
84-
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-white shadow-lg',
83+
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
8584
!noMargin && 'my-8'
8685
)}>
8786
<SandpackProvider
@@ -93,7 +92,7 @@ const CodeBlock = React.forwardRef(
9392
},
9493
},
9594
}}>
96-
<SandpackThemeProvider theme={CodeBlockLightTheme}>
95+
<SandpackThemeProvider theme={CustomTheme}>
9796
<ClasserProvider
9897
classes={{
9998
'sp-cm': styles.codeViewer,

‎beta/src/components/MDX/Sandpack/CustomPreset.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
import {IconChevron} from 'components/Icon/IconChevron';
1414
import {NavigationBar} from './NavigationBar';
1515
import {Preview} from './Preview';
16-
import {GithubLightTheme} from './Themes';
16+
import {CustomTheme} from './Themes';
1717

1818
export function CustomPreset({
1919
isSingleFile,
@@ -45,7 +45,7 @@ export function CustomPreset({
4545
<>
4646
<div className="shadow-lg dark:shadow-lg-dark rounded-lg">
4747
<NavigationBar showDownload={isSingleFile} onReset={onReset} />
48-
<SandpackThemeProvider theme={GithubLightTheme}>
48+
<SandpackThemeProvider theme={CustomTheme}>
4949
<div
5050
ref={sandpack.lazyAnchorRef}
5151
className="sp-layout rounded-t-none"

‎beta/src/components/MDX/Sandpack/Themes.tsx

+21-18
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,32 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

5-
import {githubLightTheme, SandpackTheme} from '@codesandbox/sandpack-react';
65
import tailwindConfig from '../../../../tailwind.config';
76

8-
export const GithubLightTheme: SandpackTheme = {
9-
...githubLightTheme,
10-
11-
typography: {
12-
...githubLightTheme.typography,
13-
bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
14-
monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
15-
fontSize: tailwindConfig.theme.extend.fontSize.code,
16-
lineHeight: '24px',
17-
},
18-
};
19-
20-
export const CodeBlockLightTheme: SandpackTheme = {
21-
...githubLightTheme,
7+
export const CustomTheme = {
228
palette: {
23-
...githubLightTheme.palette,
24-
defaultBackground: 'transparent',
9+
activeText: 'inherit',
10+
defaultText: 'inherit',
11+
inactiveText: 'inherit',
12+
activeBackground: 'inherit',
13+
defaultBackground: 'inherit',
14+
inputBackground: 'inherit',
15+
accent: 'inherit',
16+
errorBackground: 'inherit',
17+
errorForeground: 'inherit',
18+
},
19+
syntax: {
20+
plain: 'var(--theme-plain)',
21+
comment: 'var(--theme-comment)',
22+
keyword: 'var(--theme-keyword)',
23+
tag: 'var(--theme-tag)',
24+
punctuation: 'var(--theme-punctuation)',
25+
definition: 'var(--theme-definition)',
26+
property: 'var(--theme-property)',
27+
static: 'var(--theme-static)',
28+
string: 'var(--theme-string)',
2529
},
2630
typography: {
27-
...githubLightTheme.typography,
2831
bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
2932
monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
3033
fontSize: tailwindConfig.theme.extend.fontSize.code,

‎beta/src/styles/sandpack.css

+70-23
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,81 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

5+
html .sp-wrapper {
6+
/* palette */
7+
--sp-colors-fg-active: #24292e !important;
8+
--sp-colors-fg-default: #959da5 !important;
9+
--sp-colors-fg-inactive: #e4e7eb !important;
10+
--sp-colors-bg-active: #e4e7eb !important;
11+
--sp-colors-bg-default: #ffffff !important;
12+
--sp-colors-bg-default-overlay: #ffffff !important;
13+
--sp-colors-bg-input: #ffffff !important;
14+
--sp-colors-accent: #c8c8fa !important;
15+
--sp-colors-bg-error: #ffcdca !important;
16+
--sp-colors-fg-error: #811e18 !important;
17+
/* syntax */
18+
--theme-plain: #24292e;
19+
--theme-comment: #6a737d;
20+
--theme-keyword: #d73a49;
21+
--theme-tag: #22863a;
22+
--theme-punctuation: #24292e;
23+
--theme-definition: #6f42c1;
24+
--theme-property: #005cc5;
25+
--theme-static: #032f62;
26+
--theme-string: #032f62;
27+
}
28+
html.dark .sp-wrapper {
29+
--sp-colors-fg-active: #FFFFFF !important;
30+
--sp-colors-fg-default: #999999 !important;
31+
--sp-colors-fg-inactive: #343434 !important;
32+
--sp-colors-bg-active: #343434 !important;
33+
--sp-colors-bg-default: #16181D !important;
34+
--sp-colors-bg-default-overlay: #16181D !important;
35+
--sp-colors-bg-input: #242424 !important;
36+
--sp-colors-accent: #6caedd !important;
37+
--sp-colors-bg-error: #ffcdca !important;
38+
--sp-colors-fg-error: #811e18 !important;
39+
/* syntax */
40+
--theme-plain: #FFFFFF;
41+
--theme-comment: #757575;
42+
--theme-keyword: #77B7D7;
43+
--theme-tag: #DFAB5C;
44+
--theme-punctuation: #ffffff;
45+
--theme-definition: #86D9CA;
46+
--theme-property: #77B7D7;
47+
--theme-static: #C64640;
48+
--theme-string: #977CDC;
49+
}
50+
51+
.sp-tabs, .sp-tab-button:hover {
52+
background: none !important;
53+
}
54+
555
.sp-tabs .sp-tab-button {
6-
color: #087EA4;
56+
color: #087ea4;
757
padding: 0 4px;
858
}
959

1060
html.dark .sp-tabs .sp-tab-button {
11-
color: #149ECA;
61+
color: #149eca;
1262
}
1363

1464
.sp-tabs .sp-tab-button:hover {
15-
color: #087EA4;
65+
color: #087ea4;
1666
}
1767

1868
html.dark .sp-tabs .sp-tab-button:hover {
19-
color: #149ECA;
69+
color: #149eca;
2070
}
2171

2272
.sp-tabs .sp-tab-button[data-active='true'] {
23-
color: #087EA4;
24-
border-bottom: 2px solid #087EA4;
73+
color: #087ea4;
74+
border-bottom: 2px solid #087ea4;
2575
}
2676

2777
html.dark .sp-tabs .sp-tab-button[data-active='true'] {
28-
color: #149ECA;
29-
border-bottom: 2px solid #149ECA;
78+
color: #149eca;
79+
border-bottom: 2px solid #149eca;
3080
}
3181

3282
.sp-stack .sp-code-editor,
@@ -60,57 +110,54 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
60110
*
61111
* If you know a better way to keep them from diverging, send a PR.
62112
*/
63-
.sp-layout {
113+
.sp-layout {
64114
border-bottom-left-radius: 0.5rem !important;
65115
border-bottom-right-radius: 0.5rem !important;
66116
}
67-
68-
.cm-activeLine {
69-
background: rgba(245, 247, 250, var(--tw-bg-opacity)) !important;
70-
}
71-
.sp-code-editor {
72-
background: white !important;
73-
}
74117
.sp-stack {
75118
height: initial !important;
76119
width: fit-content !important;
77120
}
78121
.sp-cm {
79122
-webkit-text-size-adjust: none !important;
123+
padding: 0 !important;
80124
}
81-
.cm-wrap,
82-
.cm-wrap .cm-gutters {
125+
.cm-wrap {
83126
background: transparent !important;
84127
}
85128
.sp-pre-placeholder {
86129
display: block !important;
87130
margin-top: 0px !important;
88131
margin-bottom: 0px !important;
132+
padding: 18px var(--sp-space-3) !important;
89133
@apply font-mono !important;
90134
font-size: 13.6px !important;
91135
line-height: 24px !important;
136+
height: 100%;
137+
overflow: scroll;
92138
}
93139
.text-xl .sp-pre-placeholder {
94140
font-size: 16px !important;
95141
line-height: 24px !important;
96142
}
97143
.sp-cm.sp-pristine .cm-scroller {
98144
overflow: auto !important;
145+
padding: 18px 0 !important;
99146
}
100147
.sp-layout {
101148
overflow: initial !important;
102-
border:0px solid transparent !important;
149+
border: 0px solid transparent !important;
103150
border-top-left-radius: 0px !important;
104151
border-top-right-radius: 0px !important;
105152
}
106-
html.dark .sp-layout>:not(:first-child) {
107-
border-color: #343A46;
153+
html.dark .sp-layout > :not(:first-child) {
154+
border-color: #343a46;
108155
}
109156
html.dark .sp-layout {
110-
background-color: #343A46;
157+
background-color: #343a46;
111158
}
112159
html.dark .sp-loading {
113-
background-color: #23272F;
160+
background-color: #23272f;
114161
}
115162

116163
@media (min-width: 768px) {

0 commit comments

Comments
 (0)