diff --git a/editor/src/uuiui/button.tsx b/editor/src/uuiui/button.tsx index 5f896e7ad796..ee8e00b8ec47 100644 --- a/editor/src/uuiui/button.tsx +++ b/editor/src/uuiui/button.tsx @@ -94,7 +94,7 @@ export const FormButton = styled.button((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((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((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((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 index f8a113ee9875..9cb9b7687ab9 100644 --- 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, }} > void @@ -33,8 +34,7 @@ export const Isolator: React.FunctionComponent props.onAbandonIntent()} diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts index 7b984e837ff6..c1b468261cfa 100644 --- 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 index 8dcbbc80bed0..80c6605827a1 100644 --- 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)'),