feat(core): adds ccs variables support

Author: pavankjadda

apps/react-kit-demo/src/main.tsx

@@ -2,11 +2,16 @@ import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes/Routes';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import theme from './theme';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
 	<StrictMode>
-		<RouterProvider router={router} />
+		<ThemeProvider theme={theme}>
+			<CssBaseline />
+			<RouterProvider router={router} />
+		</ThemeProvider>
 	</StrictMode>
 );

apps/react-kit-demo/src/styles.scss

@@ -1,4 +1,15 @@
-/* You can add global styles to this file, and also import other style files */
+:root {
+  --primary-color: #153d77;
+  --secondary-color: #607d8b;
+  --success-color: #198754;
+  --error-color: #ff1744;
+  --white-color: #fff;
+  --background-color: #dedede;
+  --pdf-color: #f40f02;
+  --word-document-color: #2b579a;
+}
+
+
 /* The sidebar menu */
 .sidenav {
   height: 100%; /* Full-height: remove this if you want "auto" height */
@@ -23,3 +34,4 @@
   font-size: 20px;
   display: block;
 }
+

apps/react-kit-demo/src/theme.ts

@@ -0,0 +1,59 @@
+import { createTheme } from '@mui/material/styles';
+import { getCssVariable } from './utils/CssUtils';
+
+declare module '@mui/material/styles' {
+	interface BreakpointOverrides {
+		xs: true;
+		sm: true;
+		md: true;
+		lg: true;
+		xl: true;
+		xxl: true;
+		xxxl: true;
+	}
+}
+
+// A custom theme for this app
+const theme = createTheme({
+	cssVariables: { cssVarPrefix: '' },
+	breakpoints: {
+		values: {
+			xs: 0,
+			sm: 600,
+			md: 900,
+			lg: 1200,
+			xl: 1536,
+			xxl: 1920,
+			xxxl: 2200,
+		},
+	},
+	palette: {
+		primary: {
+			main: getCssVariable('--primary-color'),
+		},
+		secondary: {
+			main: getCssVariable('--secondary-color'),
+		},
+		success: {
+			main: getCssVariable('--success-color'),
+		},
+		error: {
+			main: getCssVariable('--error-color'),
+		},
+		background: {
+			default: getCssVariable('--background-color'),
+		},
+	},
+	components: {
+		// @ts-ignore
+		MuiDataGrid: {
+			styleOverrides: {
+				root: {
+					'--DataGrid-containerBackground': '#FFFFFF',
+				},
+			},
+		},
+	},
+});
+
+export default theme;

apps/react-kit-demo/src/utils/CssUtils.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the value of a CSS variable
+ *
+ * @param variable The name of the CSS variable
+ *
+ * @returns The value of the CSS variable
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.6.0
+ */
+export function getCssVariable(variable: string): string {
+	return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+}

react-kit/src/lib/react-kit.module.scss

@@ -1,22 +1,14 @@
 /* Define global variables */
 
-$primary-color: #153d77;
-$secondary-color: #607d8b;
-$success-color: #198754;
-$error-color: #ff1744;
-$white-color: #fff;
-$background-color: #dedede;
-$pdf-color: #f40f02;
-$word-document-color: #2b579a;
+:root {
+  --primary-color: #153d77;
+  --secondary-color: #607d8b;
+  --success-color: #198754;
+  --error-color: #ff1744;
+  --white-color: #fff;
+  --background-color: #dedede;
+  --pdf-color: #f40f02;
+  --word-document-color: #2b579a;
+}
+
 
-/* Export the variables so that they can be used in the app */
-:export {
-	primaryColor: $primary-color;
-	secondaryColor: $secondary-color;
-	successColor: $success-color;
-	errorColor: $error-color;
-	whiteColor: $white-color;
-	backgroundColor: $background-color;
-	pdfDocumentColor: $pdf-color;
-	wordDocumentColor: $word-document-color;
-}