Merge branch 'main' of github.com:codesandbox/sandpack into fix/hidde…

…n-files-in-explorer

CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.2](https://github.com/codesandbox/sandpack/compare/v1.1.1...v1.1.2) (2022-06-06)
+
+
+### Bug Fixes
+
+* **theme:** set color-scheme css property in theme context ([#491](https://github.com/codesandbox/sandpack/issues/491)) ([35342a3](https://github.com/codesandbox/sandpack/commit/35342a36cf8a5d9d0bd48779070397575541e9a7))
+
+
+
+
+
 ## [1.1.1](https://github.com/codesandbox/sandpack/compare/v1.1.0...v1.1.1) (2022-06-01)
 
 

lerna.json

@@ -21,5 +21,5 @@
       "message": "chore: [skip ci] bump packages"
     }
   },
-  "version": "1.1.1"
+  "version": "1.1.2"
 }

sandpack-react/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.2](https://github.com/codesandbox/sandpack/compare/v1.1.1...v1.1.2) (2022-06-06)
+
+
+### Bug Fixes
+
+* **theme:** set color-scheme css property in theme context ([#491](https://github.com/codesandbox/sandpack/issues/491)) ([35342a3](https://github.com/codesandbox/sandpack/commit/35342a36cf8a5d9d0bd48779070397575541e9a7))
+
+
+
+
+
 ## [1.1.1](https://github.com/codesandbox/sandpack/compare/v1.1.0...v1.1.1) (2022-06-01)
 
 

sandpack-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sandpack-react",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "keywords": [],
   "repository": {

sandpack-react/src/contexts/themeContext.tsx

@@ -11,6 +11,7 @@ import { standardizeTheme } from "../styles";
 import { defaultLight } from "../themes";
 import type { SandpackTheme, SandpackThemeProp } from "../types";
 import { classNames } from "../utils/classNames";
+import { isDarkColor } from "../utils/stringUtils";
 
 const wrapperClassName = css({
   all: "initial",
@@ -22,6 +23,13 @@ const wrapperClassName = css({
   WebkitTapHighlightColor: "transparent",
   WebkitFontSmoothing: "subpixel-antialiased",
 
+  variants: {
+    variant: {
+      dark: { colorScheme: "dark" },
+      light: { colorScheme: "light" },
+    },
+  },
+
   "@media screen and (min-resolution: 2dppx)": {
     WebkitFontSmoothing: "antialiased",
     MozOsxFontSmoothing: "grayscale",
@@ -57,13 +65,15 @@ const SandpackThemeProvider: React.FC<
     return createTheme(id, standardizeStitchesTheme(theme));
   }, [theme, id]);
 
+  const isDarkTheme = isDarkColor(theme.colors.surface1);
+
   return (
     <SandpackThemeContext.Provider value={{ theme, id }}>
       <div
         className={classNames(
           c("wrapper"),
           themeClassName.toString(),
-          wrapperClassName,
+          wrapperClassName({ variant: isDarkTheme ? "dark" : "light" }),
           className
         )}
         {...props}

sandpack-react/src/presets/Sandpack.test.tsx

@@ -33,7 +33,7 @@ describe("getSandpackCssText", () => {
       </SandpackProvider>
     );
 
-    expect(getSandpackCssText().length).toBe(3456);
+    expect(getSandpackCssText().length).toBe(3564);
     expect(getSandpackCssText()).not.toContain(componentClassName);
   });
 

scripts/sizebot/sizebot.json

@@ -1 +1 @@
-{"sandpack-react":{"gzip":164643,"assets":[{"name":"0","size":535016},{"name":"main","size":491303},{"name":"@codesandbox/sandpack-react","size":84423},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":11195},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1952},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7223,"assets":[{"name":"main","size":20671},{"name":"@codesandbox/sandpack-client","size":11195},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}}
+{"sandpack-react":{"gzip":164684,"assets":[{"name":"0","size":535016},{"name":"main","size":491424},{"name":"@codesandbox/sandpack-react","size":84583},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":11195},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1952},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7223,"assets":[{"name":"main","size":20671},{"name":"@codesandbox/sandpack-client","size":11195},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}}

website/docs/docs/releases/v1.md

@@ -48,7 +48,7 @@ We heard you, and now Sandpack has a new component to navigate through files:
 
 To reduce the bundle size of the main package and make it possible for the community to contribute custom Sandpack themes with ease, we have detached the themes.
 
-So it won’t be available anymore through the `@codesandbox/sandpack-react` package but `@codesandbox-sandpack-themes`.
+So it won’t be available anymore through the `@codesandbox/sandpack-react` package but `@codesandbox/sandpack-themes`.
 
 For example:
 
@@ -102,7 +102,7 @@ We took this chance to rethink how Sandpack should fit on your website. Our amaz
 
 From now on `files` , `visibleFiles`, `activeFile` are type-safe:
 
-<video autoPlay muted playsinline>
+<video autoPlay muted playsInline>
   <source src="/docs/img/v1-ts.mp4" type="video/mp4" />
 </video>