[WebApp][MM-51266]: Add compass (MUI wrapper components) in common components package (#22942)

* wrap all the components using compass-components with compass-components theme provider

Co-authored-by: @michelengelen 
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/platform/components/src/compass/utils/color.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {decomposeColor, hslToRgb} from '@mui/material';
+import {normal} from 'color-blend';
+
+export const decomposeColorToRgb = (color: string) => {
+    if (color.startsWith('hsl')) {
+        return decomposeColor(hslToRgb(color));
+    }
+
+    return decomposeColor(color);
+};
+
+export const blend = (background: string, foreground: string) => {
+    const bg = decomposeColorToRgb(background);
+    const fg = decomposeColorToRgb(foreground);
+
+    const blended = normal({
+        r: bg.values[0],
+        g: bg.values[1],
+        b: bg.values[2],
+        a: bg.values[3] || 1,
+    }, {
+        r: fg.values[0],
+        g: fg.values[1],
+        b: fg.values[2],
+        a: fg.values[3] || 1,
+    });
+
+    return `rgba(${blended.r}, ${blended.g}, ${blended.b}, ${blended.a})`;
+};

webapp/platform/components/src/compass/utils/font.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export const getFontMargin = (fontSize: number, multiplier: number): number =>
+    Math.max(Math.round((fontSize * multiplier) / 4) * 4, 8);