@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/start/goodtoknow.md

@@ -0,0 +1,14 @@
+# Good to know
+
+*Category:* Getting started
+*Section:* Guidelines
+*Source:* https://uikit.developers.rio.cloud/#start/goodtoknow
+*Captured:* 2025-12-12T14:20:04.037Z
+
+## Good to know
+
+## IntelliSense for CSS class names in HTML
+
+## CSS Hyphens
+
+> Note: Hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a html element. Not all languages are supported yet, and support depends on the specific browser.

package/dist/docs/start/guidelines/color-combinations.md

@@ -0,0 +1,678 @@
+# Color combinations
+
+*Category:* Getting started
+*Section:* Guidelines
+*Source:* https://uikit.developers.rio.cloud/#start/guidelines/color-combinations
+*Captured:* 2025-12-12T14:20:04.600Z
+
+For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.
+
+## Color combinations
+
+### Example: Example 1
+
+White text on brand backgrounds
+
+white text on bg-primary
+
+white text on bg-secondary
+
+Black text on highlight backgrounds
+
+black text on bg-primary
+
+black text on bg-secondary
+
+#### Summary
+
+White text on brand backgrounds
+
+white text on bg-primary
+
+white text on bg-secondary
+
+Black text on highlight backgrounds
+
+black text on bg-primary
+
+black text on bg-secondary
+
+### Example: Example 2
+
+White text on gray backgrounds
+
+white text on bg-decent
+
+white text on bg-lightest
+
+white text on bg-lighter
+
+white text on bg-light
+
+white text on bg-gray
+
+white text on bg-dark
+
+white text on bg-darker
+
+white text on bg-darkest
+
+Black text on gray backgrounds
+
+black text on bg-decent
+
+black text on bg-lightest
+
+black text on bg-lighter
+
+black text on bg-light
+
+black text on bg-gray
+
+black text on bg-dark
+
+black text on bg-darker
+
+black text on bg-darkest
+
+#### Summary
+
+White text on gray backgrounds
+
+white text on bg-decent
+
+white text on bg-lightest
+
+white text on bg-lighter
+
+white text on bg-light
+
+white text on bg-gray
+
+white text on bg-dark
+
+white text on bg-darker
+
+white text on bg-darkest
+
+Black text on gray backgrounds
+
+black text on bg-decent
+
+black text on bg-lightest
+
+black text on bg-lighter
+
+black text on bg-light
+
+black text on bg-gray
+
+black text on bg-dark
+
+black text on bg-darker
+
+black text on bg-darkest
+
+### Example: Example 3
+
+White text on status backgrounds
+
+white text on bg-info
+
+white text on bg-success
+
+white text on bg-warning
+
+white text on bg-danger
+
+Black text on status backgrounds
+
+black text on bg-info
+
+black text on bg-success
+
+black text on bg-warning
+
+black text on bg-danger
+
+#### Summary
+
+White text on status backgrounds
+
+white text on bg-info
+
+white text on bg-success
+
+white text on bg-warning
+
+white text on bg-danger
+
+Black text on status backgrounds
+
+black text on bg-info
+
+black text on bg-success
+
+black text on bg-warning
+
+black text on bg-danger
+
+### Example: Example 4
+
+White text on driving status backgrounds
+
+white text on bg-status-available
+
+white text on bg-status-driving
+
+white text on bg-status-resting
+
+white text on bg-status-working
+
+Black text on driving status backgrounds
+
+black text on bg-status-available
+
+black text on bg-status-driving
+
+black text on bg-status-resting
+
+black text on bg-status-working
+
+#### Summary
+
+White text on driving status backgrounds
+
+white text on bg-status-available
+
+white text on bg-status-driving
+
+white text on bg-status-resting
+
+white text on bg-status-working
+
+Black text on driving status backgrounds
+
+black text on bg-status-available
+
+black text on bg-status-driving
+
+black text on bg-status-resting
+
+black text on bg-status-working
+
+### Example: Example 5
+
+White text on highlight backgrounds
+
+white text on bg-highlight-decent
+
+white text on bg-highlight-lightest
+
+white text on bg-highlight-lighter
+
+white text on bg-highlight-light
+
+white text on bg-highlight
+
+white text on bg-highlight-dark
+
+white text on bg-highlight-darker
+
+white text on bg-highlight-darkest
+
+Black text on highlight backgrounds
+
+black text on bg-highlight-decent
+
+black text on bg-highlight-lightest
+
+black text on bg-highlight-lighter
+
+black text on bg-highlight-light
+
+black text on bg-highlight
+
+black text on bg-highlight-dark
+
+black text on bg-highlight-darker
+
+black text on bg-highlight-darkest
+
+#### Summary
+
+White text on highlight backgrounds
+
+white text on bg-highlight-decent
+
+white text on bg-highlight-lightest
+
+white text on bg-highlight-lighter
+
+white text on bg-highlight-light
+
+white text on bg-highlight
+
+white text on bg-highlight-dark
+
+white text on bg-highlight-darker
+
+white text on bg-highlight-darkest
+
+Black text on highlight backgrounds
+
+black text on bg-highlight-decent
+
+black text on bg-highlight-lightest
+
+black text on bg-highlight-lighter
+
+black text on bg-highlight-light
+
+black text on bg-highlight
+
+black text on bg-highlight-dark
+
+black text on bg-highlight-darker
+
+black text on bg-highlight-darkest
+
+### Example: dark text on bg-decent
+
+Gray text on gray backgrounds
+
+decent text on bg-decent
+
+lightest text on bg-decent
+
+lighter text on bg-decent
+
+light text on bg-decent
+
+gray text on bg-decent
+
+dark text on bg-decent
+
+darker text on bg-decent
+
+darkest text on bg-decent
+
+decent text on bg-lightest
+
+lightest text on bg-lightest
+
+lighter text on bg-lightest
+
+light text on bg-lightest
+
+gray text on bg-lightest
+
+dark text on bg-lightest
+
+darker text on bg-lightest
+
+darkest text on bg-lightest
+
+decent text on bg-lighter
+
+lightest text on bg-lighter
+
+lighter text on bg-lighter
+
+light text on bg-lighter
+
+gray text on bg-lighter
+
+dark text on bg-lighter
+
+darker text on bg-lighter
+
+darkest text on bg-lighter
+
+decent text on bg-light
+
+lightest text on bg-light
+
+lighter text on bg-light
+
+light text on bg-light
+
+gray text on bg-light
+
+dark text on bg-light
+
+darker text on bg-light
+
+darkest text on bg-light
+
+decent text on bg-gray
+
+lightest text on bg-gray
+
+lighter text on bg-gray
+
+light text on bg-gray
+
+gray text on bg-gray
+
+dark text on bg-gray
+
+darker text on bg-gray
+
+darkest text on bg-gray
+
+decent text on bg-dark
+
+lightest text on bg-dark
+
+lighter text on bg-dark
+
+light text on bg-dark
+
+gray text on bg-dark
+
+dark text on bg-dark
+
+darker text on bg-dark
+
+darkest text on bg-dark
+
+decent text on bg-darker
+
+lightest text on bg-darker
+
+lighter text on bg-darker
+
+light text on bg-darker
+
+gray text on bg-darker
+
+dark text on bg-darker
+
+darker text on bg-darker
+
+darkest text on bg-darker
+
+decent text on bg-darkest
+
+lightest text on bg-darkest
+
+lighter text on bg-darkest
+
+light text on bg-darkest
+
+gray text on bg-darkest
+
+dark text on bg-darkest
+
+darker text on bg-darkest
+
+darkest text on bg-darkest
+
+#### Summary
+
+Gray text on gray backgrounds
+
+decent text on bg-decent
+
+lightest text on bg-decent
+
+lighter text on bg-decent
+
+light text on bg-decent
+
+gray text on bg-decent
+
+dark text on bg-decent
+
+darker text on bg-decent
+
+darkest text on bg-decent
+
+decent text on bg-lightest
+
+lightest text on bg-lightest
+
+lighter text on bg-lightest
+
+light text on bg-lightest
+
+gray text on bg-lightest
+
+dark text on bg-lightest
+
+darker text on bg-lightest
+
+darkest text on bg-lightest
+
+decent text on bg-lighter
+
+lightest text on bg-lighter
+
+lighter text on bg-lighter
+
+light text on bg-lighter
+
+gray text on bg-lighter
+
+dark text on bg-lighter
+
+darker text on bg-lighter
+
+darkest text on bg-lighter
+
+decent text on bg-light
+
+lightest text on bg-light
+
+lighter text on bg-light
+
+light text on bg-light
+
+gray text on bg-light
+
+dark text on bg-light
+
+darker text on bg-light
+
+darkest text on bg-light
+
+decent text on bg-gray
+
+lightest text on bg-gray
+
+lighter text on bg-gray
+
+light text on bg-gray
+
+gray text on bg-gray
+
+dark text on bg-gray
+
+darker text on bg-gray
+
+darkest text on bg-gray
+
+decent text on bg-dark
+
+lightest text on bg-dark
+
+lighter text on bg-dark
+
+light text on bg-dark
+
+gray text on bg-dark
+
+dark text on bg-dark
+
+darker text on bg-dark
+
+darkest text on bg-dark
+
+decent text on bg-darker
+
+lightest text on bg-darker
+
+lighter text on bg-darker
+
+light text on bg-darker
+
+gray text on bg-darker
+
+dark text on bg-darker
+
+darker text on bg-darker
+
+darkest text on bg-darker
+
+decent text on bg-darkest
+
+lightest text on bg-darkest
+
+lighter text on bg-darkest
+
+light text on bg-darkest
+
+gray text on bg-darkest
+
+dark text on bg-darkest
+
+darker text on bg-darkest
+
+darkest text on bg-darkest
+
+### Example: Example 7
+
+Status text on highlight backgrounds
+
+info text on bg-highlight-decent
+
+success text on bg-highlight-decent
+
+warning text on bg-highlight-decent
+
+danger text on bg-highlight-decent
+
+info text on bg-highlight-lightest
+
+success text on bg-highlight-lightest
+
+warning text on bg-highlight-lightest
+
+danger text on bg-highlight-lightest
+
+info text on bg-highlight-lighter
+
+success text on bg-highlight-lighter
+
+warning text on bg-highlight-lighter
+
+danger text on bg-highlight-lighter
+
+info text on bg-highlight-light
+
+success text on bg-highlight-light
+
+warning text on bg-highlight-light
+
+danger text on bg-highlight-light
+
+info text on bg-highlight
+
+success text on bg-highlight
+
+warning text on bg-highlight
+
+danger text on bg-highlight
+
+info text on bg-highlight-dark
+
+success text on bg-highlight-dark
+
+warning text on bg-highlight-dark
+
+danger text on bg-highlight-dark
+
+info text on bg-highlight-darker
+
+success text on bg-highlight-darker
+
+warning text on bg-highlight-darker
+
+danger text on bg-highlight-darker
+
+info text on bg-highlight-darkest
+
+success text on bg-highlight-darkest
+
+warning text on bg-highlight-darkest
+
+danger text on bg-highlight-darkest
+
+#### Summary
+
+Status text on highlight backgrounds
+
+info text on bg-highlight-decent
+
+success text on bg-highlight-decent
+
+warning text on bg-highlight-decent
+
+danger text on bg-highlight-decent
+
+info text on bg-highlight-lightest
+
+success text on bg-highlight-lightest
+
+warning text on bg-highlight-lightest
+
+danger text on bg-highlight-lightest
+
+info text on bg-highlight-lighter
+
+success text on bg-highlight-lighter
+
+warning text on bg-highlight-lighter
+
+danger text on bg-highlight-lighter
+
+info text on bg-highlight-light
+
+success text on bg-highlight-light
+
+warning text on bg-highlight-light
+
+danger text on bg-highlight-light
+
+info text on bg-highlight
+
+success text on bg-highlight
+
+warning text on bg-highlight
+
+danger text on bg-highlight
+
+info text on bg-highlight-dark
+
+success text on bg-highlight-dark
+
+warning text on bg-highlight-dark
+
+danger text on bg-highlight-dark
+
+info text on bg-highlight-darker
+
+success text on bg-highlight-darker
+
+warning text on bg-highlight-darker
+
+danger text on bg-highlight-darker
+
+info text on bg-highlight-darkest
+
+success text on bg-highlight-darkest
+
+warning text on bg-highlight-darkest
+
+danger text on bg-highlight-darkest

package/dist/docs/start/guidelines/custom-css.md

@@ -0,0 +1,42 @@
+# Avoid writing custom CSS
+
+*Category:* Getting started
+*Section:* Guidelines
+*Source:* https://uikit.developers.rio.cloud/#start/guidelines/custom-css
+*Captured:* 2025-12-12T14:20:04.611Z
+
+Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.
+
+## Avoid writing custom CSS
+
+Getting more familiar with Bootstrap and the UIKIT will speed up your development and keep the maintenance of custom styles low.
+
+Therefore, avoid writing custom CSS where possible and try to achieve the desired results by using
+
+## Custom CSS
+
+If the UIKIT colors do not fit your needs, you have the option to use 5 additional custom color vars.
+
+You just have to add those css vars to the index.html head and than you can use the following classes. bg-custom-a, text-color-custom-a, fill-custom-a.
+
+```html
+<head>
+<style>
+:root {
+--custom-color-a: #5eff1e;
+--custom-color-b: #e51eff;
+--custom-color-c: #1e90ff;
+--custom-color-d: #ff4b1e;
+--custom-color-e: #ffcb1e;
+}
+</style>
+</head>
+```
+
+```html
+<div class="bg-custom-a">
+<p class="text-color-custom-b">
+<svg class="fill-custom-c"></svg>
+</p>
+</div>
+```