Docs: Improve guides for contributing (#19575)

* Move style guides into contribute directory

* Move contribution guides into contribute directory

* Refactor CONTRIBUTING.md

* Clean up docs/README.md

* Update reference to style guide and minor formatting fixes

* Apply suggestions from code review

Co-Authored-By: gotjosh <josue.abreu@gmail.com>

* Update CONTRIBUTING.md

Co-Authored-By: gotjosh <josue.abreu@gmail.com>

contribute/style-guides/styling.md

@@ -0,0 +1,84 @@
+# Styling Grafana
+
+## Emotion
+
+[Emotion](https://emotion.sh/docs/introduction) is our default-to-be approach to styling React components. It provides a way for styles to be a consequence of properties and state of a component.
+
+### Usage
+
+#### Basic styling
+
+For styling components use Emotion's `css` function
+
+```tsx
+import { css }  from 'emotion';
+
+
+const ComponentA = () => {
+  return (
+    <div className={css`background: red;`}>
+      As red as you can ge
+    </div>
+  );
+}
+```
+
+#### Styling complex components
+
+In more complex cases, especially when you need to style multiple DOM elements in one component or when your styles that depend on properties and/or state, you should create a helper function that returns an object with desired stylesheet. Let's say you need to style a component that has different background depending on the theme:
+
+```tsx
+import { css, cx }  from 'emotion';
+import { GrafanaTheme, useTheme, selectThemeVariant } from '@grafana/ui';
+
+const getStyles = (theme: GrafanaTheme) => {
+  const backgroundColor = selectThemeVariant({ light: theme.colors.red, dark: theme.colors.blue }, theme.type);
+
+  return {
+    wrapper: css`
+      background: ${backgroundColor};
+    `,
+    icon: css`font-size:${theme.typography.size.sm}`;
+  };
+}
+
+const ComponentA = () => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <div className={styles.wrapper}>
+      As red as you can ge
+      <i className={styles.icon} /\>
+    </div>
+  );
+}
+```
+
+For more information about themes at Grafana please see [themes guide](./themes.md)
+
+#### Composing class names
+
+For class composition use Emotion's `cx` function
+
+```tsx
+import { css, cx }  from 'emotion';
+
+
+interface Props {
+  className?: string;
+}
+
+const ComponentA: React.FC<Props> = ({ className }) => {
+  const finalClassName = cx(
+    className,
+    css`background: red`,
+  )
+
+  return (
+    <div className={finalClassName}>
+      As red as you can ge
+    </div>
+  );
+}
+```