Skip to content

Commit f87cd6b

Browse files
lebogaearon
lebo
authored and
gaearon
committed
Make sandbox themeable
1 parent 5ba0ad8 commit f87cd6b

File tree

5 files changed

+88
-46
lines changed

5 files changed

+88
-46
lines changed

‎beta/colors.js

Lines changed: 1 addition & 0 deletions
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.tsx

Lines changed: 4 additions & 5 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 21 additions & 18 deletions
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: 'var(--theme-activeText)',
10+
defaultText: 'var(--theme-defaultText)',
11+
inactiveText: 'var(--theme-inactiveText)',
12+
activeBackground: 'var(--theme-activeBackground)',
13+
defaultBackground: 'var(--theme-defaultBackground)',
14+
inputBackground: 'var(--theme-inputBackground)',
15+
accent: 'var(--theme-accent)',
16+
errorBackground: 'var(--theme-errorBackground)',
17+
errorForeground: 'var(--theme-errorForeground)',
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

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,75 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

5+
html {
6+
/* palette */
7+
--theme-activeText: #24292e;
8+
--theme-defaultText: #959da5;
9+
--theme-inactiveText: #e4e7eb;
10+
--theme-activeBackground: #e4e7eb;
11+
--theme-defaultBackground: #ffffff;
12+
--theme-inputBackground: #ffffff;
13+
--theme-accent: #c8c8fa;
14+
--theme-errorBackground: #ffcdca;
15+
--theme-errorForeground: #811e18;
16+
/* syntax */
17+
--theme-plain: #24292e;
18+
--theme-comment: #6a737d;
19+
--theme-keyword: #d73a49;
20+
--theme-tag: #22863a;
21+
--theme-punctuation: #24292e;
22+
--theme-definition: #6f42c1;
23+
--theme-property: #005cc5;
24+
--theme-static: #032f62;
25+
--theme-string: #032f62;
26+
}
27+
html.dark {
28+
--theme-activeText: #FFFFFF;
29+
--theme-defaultText: #999999;
30+
--theme-inactiveText: #343434;
31+
--theme-activeBackground: #343434;
32+
--theme-defaultBackground: #16181D;
33+
--theme-inputBackground: #242424;
34+
--theme-accent: #6caedd;
35+
--theme-errorBackground: #ffcdca;
36+
--theme-errorForeground: #811e18;
37+
/* syntax */
38+
--theme-plain: #FFFFFF;
39+
--theme-comment: #757575;
40+
--theme-keyword: #77B7D7;
41+
--theme-tag: #DFAB5C;
42+
--theme-punctuation: #ffffff;
43+
--theme-definition: #86D9CA;
44+
--theme-property: #77B7D7;
45+
--theme-static: #C64640;
46+
--theme-string: #977CDC;
47+
}
48+
549
.sp-tabs .sp-tab-button {
6-
color: #087EA4;
50+
color: #087ea4;
751
padding: 0 4px;
852
}
953

1054
html.dark .sp-tabs .sp-tab-button {
11-
color: #149ECA;
55+
color: #149eca;
1256
}
1357

1458
.sp-tabs .sp-tab-button:hover {
15-
color: #087EA4;
59+
color: #087ea4;
1660
}
1761

1862
html.dark .sp-tabs .sp-tab-button:hover {
19-
color: #149ECA;
63+
color: #149eca;
2064
}
2165

2266
.sp-tabs .sp-tab-button[data-active='true'] {
23-
color: #087EA4;
24-
border-bottom: 2px solid #087EA4;
67+
color: #087ea4;
68+
border-bottom: 2px solid #087ea4;
2569
}
2670

2771
html.dark .sp-tabs .sp-tab-button[data-active='true'] {
28-
color: #149ECA;
29-
border-bottom: 2px solid #149ECA;
72+
color: #149eca;
73+
border-bottom: 2px solid #149eca;
3074
}
3175

3276
.sp-stack .sp-code-editor,
@@ -60,23 +104,17 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
60104
*
61105
* If you know a better way to keep them from diverging, send a PR.
62106
*/
63-
.sp-layout {
107+
.sp-layout {
64108
border-bottom-left-radius: 0.5rem !important;
65109
border-bottom-right-radius: 0.5rem !important;
66110
}
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-
}
74111
.sp-stack {
75112
height: initial !important;
76113
width: fit-content !important;
77114
}
78115
.sp-cm {
79116
-webkit-text-size-adjust: none !important;
117+
padding: 0 !important;
80118
}
81119
.cm-wrap,
82120
.cm-wrap .cm-gutters {
@@ -96,21 +134,22 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
96134
}
97135
.sp-cm.sp-pristine .cm-scroller {
98136
overflow: auto !important;
137+
padding: 18px 0 !important;
99138
}
100139
.sp-layout {
101140
overflow: initial !important;
102-
border:0px solid transparent !important;
141+
border: 0px solid transparent !important;
103142
border-top-left-radius: 0px !important;
104143
border-top-right-radius: 0px !important;
105144
}
106-
html.dark .sp-layout>:not(:first-child) {
107-
border-color: #343A46;
145+
html.dark .sp-layout > :not(:first-child) {
146+
border-color: #343a46;
108147
}
109148
html.dark .sp-layout {
110-
background-color: #343A46;
149+
background-color: #343a46;
111150
}
112151
html.dark .sp-loading {
113-
background-color: #23272F;
152+
background-color: #23272f;
114153
}
115154

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

0 commit comments

Comments
 (0)