docs: Update Mermaid diagrams with design token styling

.agents/rules/github-seo.md

@@ -56,6 +56,15 @@ Every file must start with a `# Context & Scope` section that defines:
   graph LR
     A[Component] --> B[Feature Logic]
     B --> C[Shared Layer]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class C component;
+    class A component;
+    class B component;
+
   ```
 
 ### Code Standards

.agents/rules/project-architecture.md

@@ -59,6 +59,24 @@ graph TD
 
     H --> J
     I --> J
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class C component;
+    class A component;
+    class E component;
+    class F component;
+    class G component;
+    class C1 component;
+    class H component;
+    class D component;
+    class J component;
+    class I component;
+    class F1 component;
+    class B component;
+
 ```
 
 ## 5. Rules for Adding New Technologies

.agents/rules/rules.md

@@ -49,6 +49,15 @@ graph TD
     class C,E review;
     class D warning;
     class F success;
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class C component;
+    class E component;
+    class B component;
+
 ```
 
 ---

.agents/rules/system-documentation.md

@@ -59,6 +59,19 @@ graph TD
     UpdateAgents --> Revalidate
     UpdateHub --> Revalidate
     Revalidate --> Commit[Apply System Doc Changes]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class Revalidate component;
+    class UpdateAgents component;
+    class UpdateHub component;
+    class CheckFiles component;
+    class RuleUpdate component;
+    class Commit component;
+    class UpdateSEO component;
+
 ```
 
 ---

.gemini/memory/github-seo.md

@@ -51,6 +51,15 @@ Every file must start with a `# Context & Scope` section that defines:
   graph LR
     A[Component] --> B[Feature Logic]
     B --> C[Shared Layer]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class C component;
+    class A component;
+    class B component;
+
   ```
 
 ### Code Standards

.github/CODE_OF_CONDUCT.md

@@ -60,6 +60,15 @@ graph TD
     class C,E review;
     class D warning;
     class F success;
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class C component;
+    class E component;
+    class B component;
+
 ```
 
 ---
@@ -211,6 +220,15 @@ graph TD
     class C,E review;
     class D warning;
     class F success;
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class C component;
+    class E component;
+    class B component;
+
 ```
 
 ---

.github/CONTRIBUTING.md

@@ -30,6 +30,11 @@ stateDiagram-v2
     Review --> Merge: Standards Met
     Review --> Writing: Remediation Required
     Merge --> [*]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
 ```
 
 ---
@@ -160,6 +165,11 @@ stateDiagram-v2
     Review --> Merge: Стандарты соблюдены
     Review --> Writing: Требуются исправления
     Merge --> [*]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
 ```
 
 ---

.github/SECURITY.md

@@ -84,6 +84,18 @@ graph TD
     classDef safe fill:#ebffeb,stroke:#00aa00,stroke-width:2px;
     class C critical;
     class D safe;
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class E component;
+    class F component;
+    class G component;
+    class H component;
+    class I component;
+    class B component;
+
 ```
 
 ---
@@ -186,6 +198,18 @@ graph TD
     classDef safe fill:#ebffeb,stroke:#00aa00,stroke-width:2px;
     class C critical;
     class D safe;
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class E component;
+    class F component;
+    class G component;
+    class H component;
+    class I component;
+    class B component;
+
 ```
 
 ---

.jules/rules/architecture.md

@@ -34,6 +34,14 @@ graph TD
 
     style Domain fill:#4caf50,stroke:#388e3c,stroke-width:2px,color:#fff
     style Logic fill:#2196f3,stroke:#1976d2,stroke-width:2px,color:#fff
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class UI component;
+    class Adapters component;
+
 ```
 
 ### Architecture Comparison for Selection

.jules/rules/daily-content-generator.md

@@ -32,6 +32,15 @@ graph LR
     D --> E[Add to /docs/ folder]
 
     style C fill:#ff9800,stroke:#f57c00,stroke-width:2px,color:#fff
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class A component;
+    class E component;
+    class D component;
+
 ```
 
 ### Interest Areas for Generation

.jules/rules/design.md

@@ -36,6 +36,13 @@ graph TD
     style Tokens fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000
     style Elements fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000
     style Components fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class Layouts component;
+
 ```
 
 ---

.jules/rules/frontend.md

@@ -34,6 +34,18 @@ graph TD
     Widgets --> Features[4. Features / User Actions]
     Features --> Entities[5. Entities / Business Data]
     Entities --> Shared[6. Shared / UI Library, Utils]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class Shared component;
+    class Features component;
+    class Pages component;
+    class App component;
+    class Entities component;
+    class Widgets component;
+
 ```
 
 | Layer | Description | Examples |

.jules/rules/security.md

@@ -52,6 +52,11 @@ graph TD
     style E fill:#f00,stroke:#333,stroke-width:2px,color:#fff
     style F fill:#ccc,stroke:#333,stroke-width:2px
     style G fill:#ddd,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
 ```
 
 | Security Layer | Pattern/Standard | Jules Requirement |

.jules/rules/system-docs-manager.md

@@ -59,6 +59,19 @@ graph TD
     UpdateAgents --> Revalidate
     UpdateHub --> Revalidate
     Revalidate --> Commit[Apply System Doc Changes]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class Revalidate component;
+    class UpdateAgents component;
+    class UpdateHub component;
+    class CheckFiles component;
+    class RuleUpdate component;
+    class Commit component;
+    class UpdateSEO component;
+
 ```
 
 ---

.jules/rules/ui-ux-design.md

@@ -48,6 +48,13 @@ graph TD
     style Tokens fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000
     style Elements fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000
     style Components fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class Layouts component;
+
 ```
 
 ---

README.md

@@ -73,6 +73,16 @@ graph LR
     A[Best-Practise Library] --> B[Select Technology .md]
     B --> C[Copy to Local .ide-folder/]
     C --> D[AI Agent Activation]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class C component;
+    class A component;
+    class D component;
+    class B component;
+
 ```
 
 ### Folder Mapping Table
@@ -136,6 +146,25 @@ graph TD
     class B,C1,C2,C3 domain;
     class D1,D2,D3 tech;
     class E1,E2,E3,E4,E5,E6 spec;
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class E1 component;
+    class E5 component;
+    class E3 component;
+    class E6 component;
+    class D3 component;
+    class C1 component;
+    class E2 component;
+    class D1 component;
+    class D2 component;
+    class E4 component;
+    class C2 component;
+    class C3 component;
+    class B component;
+
 ```
 ## 🌴 Folder Tree
 
@@ -262,6 +291,16 @@ graph LR
     A[Best-Practise Library] --> B[Select Technology .md]
     B --> C[Copy to Local .ide-folder/]
     C --> D[AI Agent Activation]
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class C component;
+    class A component;
+    class D component;
+    class B component;
+
 ```
 
 ### Таблица: Маппинг директорий
@@ -326,6 +365,25 @@ graph TD
     class B,C1,C2,C3 domain;
     class D1,D2,D3 tech;
     class E1,E2,E3,E4,E5,E6 spec;
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
+
+    class E1 component;
+    class E5 component;
+    class E3 component;
+    class E6 component;
+    class D3 component;
+    class C1 component;
+    class E2 component;
+    class D1 component;
+    class D2 component;
+    class E4 component;
+    class C2 component;
+    class C3 component;
+    class B component;
+
 ```
 ## 🌴 Folder Tree