fix(themes): tweak error surface contrast (#548)

codesandbox · Aug 5, 2022 · d9120c9 · d9120c9
1 parent b07c378
commit d9120c9
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 27 deletions.
diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json
@@ -11,15 +11,15 @@
   ],
   "tasks": {
     "docs": {
-      "name": "Docs",
+      "name": "Website: docs",
       "command": "yarn dev:docs"
     },
     "landing": {
-      "name": "Landing page",
+      "name": "Website: landing page",
       "command": "yarn dev:landing"
     },
     "theme": {
-      "name": "Theme",
+      "name": "Website: theme",
       "command": "yarn dev:theme"
     },
     "storybook": {
@@ -35,6 +35,21 @@
       "name": "Build Workspace",
       "command": "yarn build"
     },
+    "build:client": {
+      "name": "Build: client",
+      "command": "yarn workspace @codesandbox/sandpack-client build",
+      "runAtStart": true
+    },
+    "build:themes": {
+      "name": "Build: themes",
+      "command": "yarn workspace @codesandbox/sandpack-themes build",
+      "runAtStart": true
+    },
+    "build:react": {
+      "name": "Build: react",
+      "command": "yarn workspace @codesandbox/sandpack-react build",
+      "runAtStart": true
+    },
     "format": {
       "name": "Format Workspace",
       "command": "yarn format"

diff --git a/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap b/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap
@@ -155,14 +155,14 @@ Object {
       "base": "#808080",
       "clickable": "#999999",
       "disabled": "#4D4D4D",
-      "error": "#EA3323",
-      "errorSurface": "#FCF1F0",
+      "error": "#FFB4A6",
+      "errorSurface": "#690000",
       "hover": "#C5C5C5",
       "surface1": "#151515",
       "surface2": "#252525",
       "surface3": "#2F2F2F",
-      "warning": "#6A4516",
-      "warningSurface": "#FEF2C0",
+      "warning": "#E7C400",
+      "warningSurface": "#3A3000",
     },
     "font": Object {
       "body": "-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",

diff --git a/sandpack-react/src/themes/ExternalThemes.stories.tsx b/sandpack-react/src/themes/ExternalThemes.stories.tsx
@@ -7,5 +7,11 @@ import { Sandpack } from "../";
 const stories = storiesOf("presets/Themes (external)", module);
 
 Object.entries(allThemes).forEach(([themeName, value]) =>
-  stories.add(themeName, () => <Sandpack theme={value} />)
+  stories.add(themeName, () => (
+    <Sandpack
+      options={{ showInlineErrors: true }}
+      template="react"
+      theme={value}
+    />
+  ))
 );
diff --git a/sandpack-react/src/themes/index.ts b/sandpack-react/src/themes/index.ts
@@ -54,10 +54,10 @@ export const defaultDark: SandpackTheme = {
     hover: "#C5C5C5",
     accent: "#E5E5E5",
 
-    error: "#EA3323",
-    errorSurface: "#FCF1F0",
-    warning: "#6A4516",
-    warningSurface: "#FEF2C0",
+    error: "#FFB4A6",
+    errorSurface: "#690000",
+    warning: "#E7C400",
+    warningSurface: "#3A3000",
   },
   syntax: {
     plain: "#FFFFFF",

diff --git a/sandpack-themes/src/aquaBlue.ts b/sandpack-themes/src/aquaBlue.ts
@@ -13,8 +13,8 @@ export const aquaBlue: SandpackTheme = {
 
     accent: "#2e7692",
 
-    error: "#ffcdca",
-    errorSurface: "#811e18",
+    error: "#811e18",
+    errorSurface: "#ffcdca",
   },
 
   syntax: {

diff --git a/sandpack-themes/src/githubLight.ts b/sandpack-themes/src/githubLight.ts
@@ -5,14 +5,11 @@ export const githubLight: SandpackTheme = {
     surface1: "#ffffff",
     surface2: "#F3F3F3",
     surface3: "#f5f5f5",
-
     clickable: "#959da5",
     base: "#24292e",
     disabled: "#d1d4d8",
     hover: "#24292e",
-
     accent: "#24292e",
-
     error: "#811e18",
     errorSurface: "#ffcdca",
   },

diff --git a/sandpack-themes/src/monokaiPro.ts b/sandpack-themes/src/monokaiPro.ts
@@ -5,16 +5,13 @@ export const monokaiPro: SandpackTheme = {
     surface1: "#2D2A2E",
     surface2: "#444344",
     surface3: "#484747",
-
     clickable: "#939293",
     base: "#C1C0C1",
     disabled: "#444344",
     hover: "#FCFCFA",
-
     accent: "#FFD866",
-
-    error: "#811e18",
-    errorSurface: "#ffcdca",
+    error: "#ffcdca",
+    errorSurface: "#c24038",
   },
   syntax: {
     plain: "rgb(252, 252, 250)",

diff --git a/sandpack-themes/src/nightOwl.ts b/sandpack-themes/src/nightOwl.ts
@@ -10,8 +10,8 @@ export const nightOwl: SandpackTheme = {
     disabled: "#4D4D4D",
     hover: "#c5e4fd",
     accent: "#c5e4fd",
-    error: "#811e18",
-    errorSurface: "#ffcdca",
+    error: "#ffcdca",
+    errorSurface: "#811e18",
   },
   syntax: {
     plain: "#d6deeb",

diff --git a/sandpack-themes/src/sandpackDark.ts b/sandpack-themes/src/sandpackDark.ts
@@ -10,8 +10,8 @@ export const sandpackDark: SandpackTheme = {
     disabled: "#4D4D4D",
     hover: "#C5C5C5",
     accent: "#90e86f",
-    error: "#b08df8",
-    errorSurface: "#dac1fb",
+    error: "#E1CFF8",
+    errorSurface: "#b08df8",
   },
   syntax: {
     plain: "#f0fdaf",

diff --git a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
@@ -318,7 +318,7 @@ export const HeroDesktop: React.FC = () => {
               width: "100%",
               transformOrigin: "top right",
               transform: "scale($scale)",
-              zIndex: 1
+              zIndex: 1,
             }}
           >
             <Clipboard />