Shadow work

editor/resources/editor/css/ReactContexify.css

@@ -3,10 +3,11 @@
   position: fixed;
   opacity: 0;
   user-select: none;
-  border-radius: 1px;
-  background-color: var(--utopitheme-contextMenuBackground);
+  border-radius: 3px;
+  background-color: var(--utopitheme-bg1);
   box-sizing: border-box;
-  box-shadow: 3px 4px 10px 0px rgba(0,0,0, .3);
+  /* the same as boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow */
+  box-shadow: 0px 3px 6px -2px var(--utopitheme-shadow80), 0px 4px 8px -2px var(--utopitheme-shadow40);
   padding: 4px 0px;
   font-family: 'utopian-inter';
 }

editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap

@@ -16,8 +16,8 @@ exports[`UiJsxCanvas #747 - DOM object constructor cannot be called as a functio
         overflow: hidden;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
-        box-shadow: 0px 0px 1px 0px
-          var(--utopitheme-neutralInvertedBackground30);
+        box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+          0px 2px 4px -1px var(--utopitheme-shadow50);
         background-image: conic-gradient(
           var(--utopitheme-checkerboardLight) 0.25turn,
           var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,

editor/src/components/canvas/controls/comment-indicator.tsx

@@ -12,9 +12,9 @@ import {
 } from '../../../../liveblocks.config'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { switchEditorMode } from '../../editor/actions/action-creators'
+import { UtopiaStyles, UtopiaTheme } from '../../../uuiui'
 import type { CanvasPoint, CanvasVector, WindowPoint } from '../../../core/shared/math-utils'
 import { canvasPoint, offsetPoint, windowPoint } from '../../../core/shared/math-utils'
-import { UtopiaTheme } from '../../../uuiui'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
 import {
   multiplayerColorFromIndex,
@@ -156,7 +156,7 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+            boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
           }}
         >
           <AvatarPicture url={avatar} initials={initials} />

editor/src/components/canvas/controls/comment-popup.tsx

@@ -1,18 +1,18 @@
 import type { CommentData } from '@liveblocks/client'
 import type { ComposerSubmitComment } from '@liveblocks/react-comments'
 import { Comment, Composer } from '@liveblocks/react-comments'
+import { stopPropagation } from '../../inspector/common/inspector-utils'
+import { UtopiaStyles, UtopiaTheme } from '../../../uuiui'
 import React from 'react'
 import { useCreateThread } from '../../../../liveblocks.config'
 import '../../../../resources/editor/css/liveblocks-comments.css'
 import { useCanvasCommentThread } from '../../../core/commenting/comment-hooks'
 import { useRemixPresence } from '../../../core/shared/multiplayer-hooks'
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
-import { UtopiaTheme } from '../../../uuiui'
 import { switchEditorMode } from '../../editor/actions/action-creators'
 import { EditorModes, isCommentMode } from '../../editor/editor-modes'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
-import { stopPropagation } from '../../inspector/common/inspector-utils'
 import { canvasPointToWindowPoint } from '../dom-lookup'
 
 export const CommentPopup = React.memo(() => {
@@ -48,7 +48,7 @@ export const CommentPopup = React.memo(() => {
         left: point.x + 30,
         cursor: 'text',
         minWidth: 250,
-        boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+        boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
         zoom: 1 / canvasScale,
       }}
       onKeyDown={stopPropagation}

editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.tsx

@@ -95,7 +95,7 @@ export const CanvasStrategyPicker = React.memo(() => {
               gap: 4,
               background: colorTheme.bg1.value,
               borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
-              boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+              boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
             }}
           >
             {allApplicableStrategies?.map(({ strategy, name }, index) => {

editor/src/components/canvas/controls/select-mode/post-action-menu.tsx

@@ -388,7 +388,7 @@ export const FloatingPostActionMenu = React.memo(
               padding: 4,
               background: colorTheme.bg0.value,
               borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
-              boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+              boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
               cursor: open ? undefined : 'pointer',
               fontSize: 10,
             }}

editor/src/components/canvas/controls/select-mode/strategy-indicator.tsx

@@ -50,7 +50,7 @@ export const StrategyIndicator = React.memo(() => {
         overflow: 'hidden',
         backgroundColor: colorTheme.bg1subdued.value,
         borderRadius: '0px 10px 10px 10px',
-        boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+        boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
         pointerEvents: 'initial',
         zIndex: -1,
       }}

editor/src/components/canvas/design-panel-root.tsx

@@ -16,6 +16,7 @@ import {
   LargerIcons,
   FlexColumn,
   colorTheme,
+  UtopiaStyles,
 } from '../../uuiui'
 import { ConsoleAndErrorsPane } from '../code-editor/console-and-errors-pane'
 import { CanvasStrategyInspector } from './canvas-strategies/canvas-strategy-inspector'
@@ -234,7 +235,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
         overflow: 'hidden',
         backgroundColor: colorTheme.inspectorBackground.value,
         borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
-        boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+        boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
       }}
     >
       <TitleBarUserProfile panelData={props.panelData} />
@@ -305,7 +306,7 @@ export const CodeEditorPane = React.memo<CodeEditorPaneProps>((props) => {
         contain: 'layout',
         overflow: 'hidden',
         borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
-        boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+        boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
         background: colorTheme.bg1.value,
       }}
     >

editor/src/components/canvas/multiplayer-presence.tsx

@@ -23,7 +23,8 @@ import {
   normalizeOthersList,
 } from '../../core/shared/multiplayer'
 import { assertNever } from '../../core/shared/utils'
-import { UtopiaTheme, useColorTheme } from '../../uuiui'
+import { useKeepShallowReferenceEquality } from '../../utils/react-performance'
+import { UtopiaStyles, UtopiaTheme, useColorTheme } from '../../uuiui'
 import { notice } from '../common/notice'
 import type { EditorAction } from '../editor/action-types'
 import { isLoggedIn } from '../editor/action-types'
@@ -202,6 +203,15 @@ const MultiplayerCursor = React.memo(
             stiffness: 350,
           }}
           style={{
+            color: color.foreground,
+            backgroundColor: color.background,
+            padding: '0 4px',
+            borderRadius: 2,
+            boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
+            fontWeight: 'bold',
+            fontSize: 9,
+            left: 5,
+            top: 5,
             position: 'fixed',
             pointerEvents: 'none',
             opacity: opacity,
@@ -229,7 +239,7 @@ const MultiplayerCursor = React.memo(
               backgroundColor: color.background,
               padding: '0 4px',
               borderRadius: 2,
-              boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+              boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
               fontWeight: 'bold',
               fontSize: 9,
               position: 'absolute',
@@ -386,7 +396,7 @@ const FollowingOverlay = React.memo(() => {
           color: colorTheme.white.value,
           padding: '2px 10px',
           borderRadius: 10,
-          boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+          boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
         }}
       >
         You're following {followedUser.name}

editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx

@@ -86,8 +86,8 @@ export var storyboard = (
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -161,8 +161,8 @@ export default function App(props) {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -269,8 +269,8 @@ export default function App(props) {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -301,8 +301,8 @@ export default function App(props) {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -445,8 +445,8 @@ export default function () {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,

editor/src/components/canvas/ui-jsx-canvas-renderer/remix-scene-component.tsx

@@ -24,9 +24,7 @@ export const RemixSceneComponent = React.memo((props: React.PropsWithChildren<Re
   const sceneStyle: React.CSSProperties = {
     position: 'relative',
     backgroundColor: colorTheme.emphasizedBackground.value,
-    boxShadow: canvasIsLive
-      ? UtopiaStyles.scene.live.boxShadow
-      : UtopiaStyles.scene.editing.boxShadow,
+    boxShadow: UtopiaStyles.shadowStyles.grounded.boxShadow,
     ...UtopiaStyles.backgrounds.checkerboardBackground,
     ...style,
   }

editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx

@@ -23,9 +23,7 @@ export const SceneComponent = React.memo(
     const sceneStyle: React.CSSProperties = {
       position: 'relative',
       backgroundColor: colorTheme.emphasizedBackground.value,
-      boxShadow: canvasIsLive
-        ? UtopiaStyles.scene.live.boxShadow
-        : UtopiaStyles.scene.editing.boxShadow,
+      boxShadow: UtopiaStyles.shadowStyles.grounded.boxShadow,
       ...UtopiaStyles.backgrounds.checkerboardBackground,
       ...style,
     }

editor/src/components/canvas/ui-jsx-canvas.spec.tsx

@@ -1281,8 +1281,8 @@ export var ${BakedInStoryboardVariableName} = (props) => {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -1390,8 +1390,8 @@ export var ${BakedInStoryboardVariableName} = (props) => {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -1912,8 +1912,8 @@ describe('UiJsxCanvas render multifile projects', () => {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -2007,8 +2007,8 @@ describe('UiJsxCanvas render multifile projects', () => {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -2104,8 +2104,8 @@ describe('UiJsxCanvas render multifile projects', () => {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -2186,8 +2186,8 @@ describe('UiJsxCanvas render multifile projects', () => {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
@@ -2281,8 +2281,8 @@ describe('UiJsxCanvas render multifile projects', () => {
               overflow: hidden;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
-              box-shadow: 0px 0px 1px 0px
-                var(--utopitheme-neutralInvertedBackground30);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
               background-image: conic-gradient(
                 var(--utopitheme-checkerboardLight) 0.25turn,
                 var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,

editor/src/components/code-editor/code-problems.tsx

@@ -318,7 +318,6 @@ export const CodeEditorTabPane = React.memo<CodeEditorTabPaneProps>(
         style={{
           backgroundColor: colorTheme.neutralBackground.value,
           flexGrow: 0,
-          boxShadow: `0px 1px 0px 0px ${colorTheme.subduedBorder.value}`,
         }}
       >
         <UIRow

editor/src/components/common/notices.tsx

@@ -76,8 +76,7 @@ export const Toast: React.FunctionComponent<React.PropsWithChildren<NoticeProps>
       style={{
         ...getStylesForLevel(props.level ?? 'INFO'),
         borderRadius: 6,
-        boxShadow:
-          '0px 0px .5px rgba(0, 0, 0, .12), 0px 10px 16px rgba(0, 0, 0, .12), 0px 2px 5px rgba(0, 0, 0, .15), 0px 2px 14px rgba(0, 0, 0, .15), 0px 0px 0px 0.5px rgba(0, 0, 0, .2)',
+        boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
         color: 'white',
         maxWidth: 300,
         fontSize: 11,

editor/src/components/editor/canvas-toolbar.tsx

@@ -5,7 +5,7 @@ import type { CSSObject } from '@emotion/react'
 import { jsx } from '@emotion/react'
 import React, { useState } from 'react'
 import type { TooltipProps } from '../../uuiui'
-import { Tile } from '../../uuiui'
+import { Tile, UtopiaStyles } from '../../uuiui'
 import { UtopiaTheme } from '../../uuiui'
 import {
   colorTheme,
@@ -152,7 +152,7 @@ export const CanvasToolbarSearch = React.memo((props: CanvasToolbarSearchProps)
               height: 'auto',
               backgroundColor: theme.bg1subdued.value,
               borderRadius: '0px 10px 10px 10px',
-              boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+              boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
               pointerEvents: 'initial',
             }
           },
@@ -389,7 +389,7 @@ export const CanvasToolbar = React.memo(() => {
           overflow: 'hidden',
           backgroundColor: colorTheme.bg1subdued.value,
           borderRadius: '0px 10px 10px 10px',
-          boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+          boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
           pointerEvents: 'initial',
           zIndex: -1, // it sits below the main menu row, but we want the main menu's shadow to cast over this one
         }}
@@ -427,7 +427,7 @@ export const CanvasToolbar = React.memo(() => {
           backgroundColor: theme.inspectorBackground.value,
           borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
           overflow: 'hidden',
-          boxShadow: UtopiaTheme.panelStyles.shadows.medium,
+          boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
           pointerEvents: 'initial',
           display: 'flex',
           flexDirection: 'row',