Fix tsc types by csstype dependency resolution

- Fix Paper background color to be consistent

- Fix line-height & font-size on body to be consitent

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

package.json

@@ -45,7 +45,8 @@
   },
   "resolutions": {
     "@types/react": "^17",
-    "@types/react-dom": "^17"
+    "@types/react-dom": "^17",
+    "csstype": "3.0.9"
   },
   "version": "1.14.0",
   "dependencies": {

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -33,23 +33,23 @@ import { SidebarPinStateProvider } from './SidebarPinStateContext';
 
 export type SidebarPageClassKey = 'root';
 
-const useStyles = makeStyles<
-  BackstageTheme,
-  { sidebarConfig: SidebarConfig; isPinned: boolean }
->(
+type PageStyleProps = { sidebarConfig: SidebarConfig; isPinned: boolean };
+
+const useStyles = makeStyles<BackstageTheme, PageStyleProps>(
   theme => ({
     root: {
       width: '100%',
       transition: 'padding-left 0.1s ease-out',
       isolation: 'isolate',
       [theme.breakpoints.up('sm')]: {
-        paddingLeft: props =>
+        paddingLeft: (props: PageStyleProps) =>
           props.isPinned
             ? props.sidebarConfig.drawerWidthOpen
             : props.sidebarConfig.drawerWidthClosed,
       },
       [theme.breakpoints.down('xs')]: {
-        paddingBottom: props => props.sidebarConfig.mobileSidebarHeight,
+        paddingBottom: (props: PageStyleProps) =>
+          props.sidebarConfig.mobileSidebarHeight,
       },
     },
     content: {

packages/theme/src/base/palettes.ts

@@ -25,7 +25,7 @@ export const palettes = {
     mode: 'light' as const,
     background: {
       default: '#F8F8F8',
-      paper: '#FAFAFA',
+      paper: '#FFFFFF',
     },
     status: {
       ok: '#1DB954',

packages/theme/src/v5/defaultComponentThemes.ts

@@ -32,6 +32,8 @@ export const defaultComponentThemes: ThemeOptions['components'] = {
         height: '100%',
         fontFamily: theme.typography.fontFamily,
         overscrollBehaviorY: 'none',
+        fontSize: '0.875rem',
+        lineHeight: 1.43,
       },
       a: {
         color: 'inherit',

yarn.lock

@@ -21750,17 +21750,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^2.0.0, csstype@npm:^2.5.2, csstype@npm:^2.6.7":
-  version: 2.6.21
-  resolution: "csstype@npm:2.6.21"
-  checksum: 2ce8bc832375146eccdf6115a1f8565a27015b74cce197c35103b4494955e9516b246140425ad24103864076aa3e1257ac9bab25a06c8d931dd87a6428c9dccf
-  languageName: node
-  linkType: hard
-
-"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "csstype@npm:3.1.2"
-  checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5
+"csstype@npm:3.0.9":
+  version: 3.0.9
+  resolution: "csstype@npm:3.0.9"
+  checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93
   languageName: node
   linkType: hard