Automate the markdown generation for the CSS variables.

[petyosi]

Needs more work.

Currently, running yarn build-docs will output an HTML table with some variables parsed. I believe we should write those to several files and have them included in the markdown. Here's what it looks like:

Name	Default Value	Description	Used in
--str-chat__primary-color	var(--str-chat__blue500)	Used for emphasis, brands can inject their main color using this variable	Used in Links, buttons, avatar fallback background, etc.
--str-chat__primary-color-low-emphasis	var(--str-chat__blue300)	Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color	Used in Selected message reaction background color
--str-chat__active-primary-color	var(--str-chat__blue600)	Used to indicate that a UI element with primary color is in an active state	Used in Pressed buttons
--str-chat__on-primary-color	var(--str-chat__grey50)	If the primary color is used as a background, text/icons are displayed in this color	Used in Button color, text on avatar fallback, etc.
--str-chat__background-color	var(--str-chat__grey50)	Used as a background color for the main chat UI components	Used in Channel list background
--str-chat__secondary-background-color	var(--str-chat__grey50)	Used as a background color for the main chat UI components	Used in Channel background, message list background, message input background
--str-chat__primary-surface-color	var(--str-chat__blue100)	Used as a background color to give emphasis, but less vibrant than the primary color	Used in Background of messages sent by the current user
--str-chat__surface-color	var(--str-chat__grey300)	A neutral color used to give emphasis to different surfaces	Used in Selected channel preview background, borders
--str-chat__secondary-surface-color	var(--str-chat__grey200)	A neutral color used to give emphasis to different surfaces	Used in Background of received messages, reactions, etc.
--str-chat__text-color	var(--str-chat__grey950)	The main color used for texts/icons	Used in Messages, channel header, channel title in the channel preview, etc.
--str-chat__text-low-emphasis-color	var(--str-chat__grey500)	Used for texts/icons that need less emphasis	Used in The latest message in the channel preview, deleted message text, default icon state, etc.
--str-chat__disabled-color	var(--str-chat__grey400)	Used for displaying disabled UI elements (typically buttons)	Used in Disabled send button etc.
--str-chat__on-disabled-color	var(--str-chat__grey50)	Used for text/icon colors if disabled color is used as a background color	Used in Text on disabled send button etc.
--str-chat__danger-color	var(--str-chat__red400)	Used for error messages, and destructive actions	Used in Delete action label etc.
--str-chat__online-indicator-color	var(--str-chat__green500)
--str-chat__message-highlight-color	var(--str-chat__yellow100)
--str-chat__unread-badge-color	var(--str-chat__red400)	Used for displaying the unread badge	Used in Background of the unread badge
--str-chat__on-unread-badge-color	var(--str-chat__grey50)	Used for text/icon colors if unread badge color is used as a background color	Used in Text on the unread badge
--str-chat__overlay-color	rgba(252, 252, 252, 0.9)	The background color used for overlays	Used in Modal overlay color, attachment preview overlay
--str-chat__secondary-overlay	rgba(0, 0, 0, 0.2)	The background color used for subtle overlays	Used in Image gallery
--str-chat__secondary-overlay-text-color	var(--str-chat__grey50)	The text/icon color used on subtle overlays	Used in Image gallery

[szuperaz]

I think we can reuse some of the Angular code generation infrastructure here:

• Chunks of the components docs are generated
• But each component has a not-generated documentation file with an introduction, code examples, etc., for example: https://raw.githubusercontent.com/GetStream/stream-chat-angular/master/docusaurus/docs/Angular/components/AvatarComponent.mdx
• These component doc files contain a mark for where the generated part should go

[//]: # "Start of generated content"
[//]: # "End of generated content"

• There is a script for generating the documentation and inserting the generated parts: https://github.com/GetStream/stream-chat-angular/blob/master/copy-generated-component-docs.ts
• There is a precommit hook that removes the generated parts from the documentation files, so we don't commit the generated parts https://github.com/GetStream/stream-chat-angular/blob/master/package.json#L41

Nothing fancy, but maybe this can save some time.

DONE in the other PR

[szuperaz]

Other PR: #143