From bf5352cbe924889c24cbdfec891bff2a97c82cff Mon Sep 17 00:00:00 2001
From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com>
Date: Wed, 29 Mar 2023 15:48:08 +0200
Subject: [PATCH] [AAE-13060] documented css global variables (#8418)
* [AAE-13060] documented css global variables
* [AAE-13060] moved documentation into proper file
---
docs/user-guide/theming.md | 49 ++++++++++++++++++++++++++++++++++++++
1 file changed, 49 insertions(+)
diff --git a/docs/user-guide/theming.md b/docs/user-guide/theming.md
index a573046619..2c49d475e5 100644
--- a/docs/user-guide/theming.md
+++ b/docs/user-guide/theming.md
@@ -152,3 +152,52 @@ Any component with the `add-dark-theme` class will use the dark theme, while ot
.primary-background-color // Primary background color
.accent-background-color // Default background color for accent
```
+
+## Styles
+
+Avoid adding css variables with names related to components:
+```
+--my-component-nr-xxx-background-color: mat.get-color-from-palette($primary, 50), // bad
+--theme-primary-color-50: mat.get-color-from-palette($primary, 50) // good
+```
+
+Avoid adding css variables with custom values, values should come from the theme:
+```
+--new-variable: yellow // bad
+--new-variable: mat.get-color-from-palette($primary, 50), // good
+```
+
+When styling components try to use theme related variables (colors, typography):
+```
+.my-class {
+ color:darkgrey; // bad
+ color:var(--theme-primary-color); // good
+ font-size:23px; // bad
+ font-size:var(--theme-typography-body-1-font-size); // good
+ background:yellow; // bad
+ background:var(--my-component-nr-200-background-color); // bad
+ background:var(--theme-primary-color-50); // good
+}
+```
+
+When using library like Angular Material try to follow patterns from this library.
+It helps to style components built with this library (just apply theme instead of custom styling).
+For example when creating input:
+```
+// bad
+