Better Isolator, Modal Buttons, and Shadows (#4714)

concrete-utopia · Jan 12, 2024 · d50f077 · d50f077
1 parent 36d44e4
commit d50f077
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 27 deletions.
diff --git a/editor/src/uuiui/button.tsx b/editor/src/uuiui/button.tsx
@@ -94,7 +94,7 @@ export const FormButton = styled.button<ButtonProps>((props: ButtonProps) => ({
   boxSixing: 'border-box',
   flexDirection: 'row',
   alignItems: 'center',
-  borderRadius: 1,
+  borderRadius: 5,
   outline: 'none',
   opacity: props.disabled ? 0.5 : 1,
   pointerEvents: props.disabled ? 'none' : 'initial',
@@ -105,7 +105,7 @@ export const FormButton = styled.button<ButtonProps>((props: ButtonProps) => ({
     ? props.danger
       ? colorTheme.errorForeground.value
       : colorTheme.primary.value
-    : colorTheme.bg1.value,
+    : 'transparent',
 
   color: props.primary ? 'white' : props.danger ? colorTheme.errorForeground.value : 'inherit',
 
@@ -114,7 +114,7 @@ export const FormButton = styled.button<ButtonProps>((props: ButtonProps) => ({
       ? colorTheme.errorForeground.value
       : props.primary
       ? colorTheme.denimBlue.value
-      : colorTheme.bg3.value
+      : 'transparent'
   }`,
   transition: 'all .10s ease-in-out',
   // regular background in hover state
@@ -123,7 +123,7 @@ export const FormButton = styled.button<ButtonProps>((props: ButtonProps) => ({
       ? props.danger
         ? colorTheme.errorForeground.value
         : colorTheme.denimBlue.value
-      : colorTheme.bg1.value,
+      : colorTheme.dialogBackground2.value,
   },
   '&:focus': {
     outline: 'none',

diff --git a/editor/src/uuiui/dialog.tsx b/editor/src/uuiui/dialog.tsx
@@ -29,11 +29,11 @@ export const Dialog = (props: DialogProps) => {
             width: '450px',
             height: '220px',
             transform: 'translateY(-150px)',
-            backgroundColor: colorTheme.bg1.value,
+            backgroundColor: colorTheme.bg2.value,
             color: colorTheme.fg1.value,
             overflow: 'hidden',
             borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
-            boxShadow: UtopiaStyles.shadowStyles.high.boxShadow,
+            boxShadow: UtopiaStyles.shadowStyles.highest.boxShadow,
           }}
         >
           <FlexColumn

diff --git a/editor/src/uuiui/isolator.tsx b/editor/src/uuiui/isolator.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { colorTheme } from './styles/theme'
 
 type IsolatorProps = {
   onAbandonIntent: () => void
@@ -33,8 +34,7 @@ export const Isolator: React.FunctionComponent<React.PropsWithChildren<IsolatorP
         top: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: '#ffffff01',
-        backdropFilter: 'blur(3px)',
+        background: colorTheme.isolator.value,
         transition: 'all .1s ease-in-out',
       }}
       onClick={() => props.onAbandonIntent()}

diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
@@ -71,6 +71,8 @@ const darkPrimitives = {
   secondaryBackground: darkBase.bg2,
   subtleBackground: darkBase.bg2,
   neutralInvertedBackground: darkBase.fg1,
+  dialogBackground: darkBase.bg2,
+  dialogBackground2: darkBase.bg3,
 
   emphasizedForeground: darkBase.fg0,
   neutralForeground: darkBase.fg1,
@@ -98,6 +100,7 @@ const darkErrorStates = {
 
 // TEMP colors with preset opacity pulled from within the app
 const colorsWithOpacity = {
+  isolator: createUtopiColor('#00000080'),
   shadow90: createUtopiColor('#00000090'),
   shadow85: createUtopiColor('#00000085'),
   shadow80: createUtopiColor('#00000080'),
@@ -111,9 +114,6 @@ const colorsWithOpacity = {
   shadow40: createUtopiColor('#00000040'),
   shadow35: createUtopiColor('#00000035'),
   shadow30: createUtopiColor('#00000030'),
-  shadow25: createUtopiColor('#00000025'),
-  shadow20: createUtopiColor('#00000020'),
-  shadow15: createUtopiColor('#00000015'),
   fg0Opacity10: createUtopiColor('hsla(0,100%,100%,0.1)'),
   fg6Opacity50: createUtopiColor('rgba(111, 119, 139, 0.5)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(255,255,255,0.20)'),

diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
@@ -71,6 +71,8 @@ const lightPrimitives = {
   secondaryBackground: lightBase.bg2,
   subtleBackground: lightBase.bg3,
   neutralInvertedBackground: lightBase.fg1,
+  dialogBackground: lightBase.bg1,
+  dialogBackground2: lightBase.bg4,
 
   emphasizedForeground: lightBase.fg0,
   neutralForeground: lightBase.fg1,
@@ -98,22 +100,20 @@ const lightErrorStates = {
 
 // TEMP colors with preset opacity pulled from within the app
 const colorsWithOpacity = {
-  shadow90: createUtopiColor('#B2B2B290'),
-  shadow85: createUtopiColor('#B2B2B285'),
-  shadow80: createUtopiColor('#B2B2B280'),
-  shadow75: createUtopiColor('#B2B2B275'),
-  shadow70: createUtopiColor('#B2B2B270'),
-  shadow65: createUtopiColor('#B2B2B265'),
-  shadow60: createUtopiColor('#B2B2B260'),
-  shadow55: createUtopiColor('#B2B2B255'),
-  shadow50: createUtopiColor('#B2B2B250'),
-  shadow45: createUtopiColor('#B2B2B245'),
-  shadow40: createUtopiColor('#B2B2B240'),
-  shadow35: createUtopiColor('#B2B2B235'),
-  shadow30: createUtopiColor('#B2B2B230'),
-  shadow25: createUtopiColor('#B2B2B225'),
-  shadow20: createUtopiColor('#B2B2B220'),
-  shadow15: createUtopiColor('#B2B2B215'),
+  isolator: createUtopiColor('#00000025'),
+  shadow90: createUtopiColor('#00000065'),
+  shadow85: createUtopiColor('#00000055'),
+  shadow80: createUtopiColor('#00000045'),
+  shadow75: createUtopiColor('#00000040'),
+  shadow70: createUtopiColor('#00000040'),
+  shadow65: createUtopiColor('#00000035'),
+  shadow60: createUtopiColor('#00000035'),
+  shadow55: createUtopiColor('#00000025'),
+  shadow50: createUtopiColor('#00000020'),
+  shadow45: createUtopiColor('#00000015'),
+  shadow40: createUtopiColor('#00000010'),
+  shadow35: createUtopiColor('#00000005'),
+  shadow30: createUtopiColor('#00000005'),
 
   fg0Opacity10: createUtopiColor('hsla(0,0%,0%,0.1)'),
   fg6Opacity50: createUtopiColor('hsla(0,0%,0%,0.5)'),