sdga-ui 1.0.6 → 1.0.7

package/demo-angular/src/app/views/buttons/buttons.component.html

@@ -56,78 +56,78 @@
     <h3 class="mt-5">{{ 'buttons.section_icons' | translate }}</h3>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-primary btn-icon">
-        <i class="hgi hgi-stroke hgi-download-04"></i>{{ 'buttons.download' | translate }}
+        <i class="bi bi-download"></i>{{ 'buttons.download' | translate }}
       </button>
       <button type="button" class="btn btn-neutral btn-icon">
-        <i class="hgi hgi-stroke hgi-upload-04"></i>{{ 'buttons.upload' | translate }}
+        <i class="bi bi-upload"></i>{{ 'buttons.upload' | translate }}
       </button>
       <button type="button" class="btn btn-secondary btn-icon">
-        <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>{{ 'buttons.edit' | translate }}
+        <i class="bi bi-pencil"></i>{{ 'buttons.edit' | translate }}
       </button>
       <button type="button" class="btn btn-danger btn-icon">
-        <i class="hgi hgi-stroke hgi-delete-02"></i>{{ 'buttons.delete' | translate }}
+        <i class="bi bi-trash"></i>{{ 'buttons.delete' | translate }}
       </button>
     </div>
     <app-code-example [htmlCode]="buttonIconLeftCode"></app-code-example>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-primary btn-icon">
-        {{ 'buttons.save' | translate }}<i class="hgi hgi-stroke hgi-tick-02"></i>
+        {{ 'buttons.save' | translate }}<i class="bi bi-check"></i>
       </button>
       <button type="button" class="btn btn-neutral btn-icon">
-        {{ 'buttons.search' | translate }}<i class="hgi hgi-stroke hgi-search-01"></i>
+        {{ 'buttons.search' | translate }}<i class="bi bi-search"></i>
       </button>
       <button type="button" class="btn btn-secondary btn-icon">
-        {{ 'buttons.settings' | translate }}<i class="hgi hgi-stroke hgi-settings-02"></i>
+        {{ 'buttons.settings' | translate }}<i class="bi bi-gear"></i>
       </button>
     </div>
     <app-code-example [htmlCode]="buttonIconRightCode"></app-code-example>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-primary btn-icon btn-sm">
-        <i class="hgi hgi-stroke hgi-plus-sign-circle"></i>{{ 'buttons.add' | translate }}
+        <i class="bi bi-plus-circle"></i>{{ 'buttons.add' | translate }}
       </button>
       <button type="button" class="btn btn-outline-primary btn-icon">
-        <i class="hgi hgi-stroke hgi-arrow-right-01"></i>{{ 'buttons.next' | translate }}
+        <i class="bi bi-arrow-right"></i>{{ 'buttons.next' | translate }}
       </button>
       <button type="button" class="btn btn-outline-secondary btn-icon">
-        <i class="hgi hgi-stroke hgi-arrow-left-01"></i>{{ 'buttons.previous' | translate }}
+        <i class="bi bi-arrow-left"></i>{{ 'buttons.previous' | translate }}
       </button>
     </div>
     
     <h3 class="mt-5">{{ 'buttons.section_icon_only' | translate }}</h3>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.download' | translate }}">
-        <i class="hgi hgi-stroke hgi-download-04"></i>
+        <i class="bi bi-download"></i>
       </button>
       <button type="button" class="btn btn-neutral btn-icon" aria-label="{{ 'buttons.upload' | translate }}">
-        <i class="hgi hgi-stroke hgi-upload-04"></i>
+        <i class="bi bi-upload"></i>
       </button>
       <button type="button" class="btn btn-secondary btn-icon" aria-label="{{ 'buttons.edit' | translate }}">
-        <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>
+        <i class="bi bi-pencil"></i>
       </button>
       <button type="button" class="btn btn-danger btn-icon" aria-label="{{ 'buttons.delete' | translate }}">
-        <i class="hgi hgi-stroke hgi-delete-02"></i>
+        <i class="bi bi-trash"></i>
       </button>
     </div>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-outline-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
-        <i class="hgi hgi-stroke hgi-search-01"></i>
+        <i class="bi bi-search"></i>
       </button>
       <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.settings' | translate }}">
-        <i class="hgi hgi-stroke hgi-settings-02"></i>
+        <i class="bi bi-gear"></i>
       </button>
       <button type="button" class="btn btn-outline-neutral btn-icon" aria-label="{{ 'buttons.add' | translate }}">
-        <i class="hgi hgi-stroke hgi-plus-sign-circle"></i>
+        <i class="bi bi-plus-circle"></i>
       </button>
     </div>
     <div class="component-showcase">
       <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
-        <i class="hgi hgi-stroke hgi-search-01"></i>
+        <i class="bi bi-search"></i>
       </button>
       <button type="button" class="btn btn-neutral btn-icon btn-sm" aria-label="{{ 'buttons.settings' | translate }}">
-        <i class="hgi hgi-stroke hgi-settings-02"></i>
+        <i class="bi bi-gear"></i>
       </button>
       <button type="button" class="btn btn-secondary btn-icon btn-xs" aria-label="{{ 'buttons.add' | translate }}">
-        <i class="hgi hgi-stroke hgi-plus-sign-circle"></i>
+        <i class="bi bi-plus-circle"></i>
       </button>
     </div>
     <app-code-example [htmlCode]="buttonIconOnlyCode"></app-code-example>
@@ -253,7 +253,7 @@
     <div class="component-showcase">
       <div class="dropdown">
         <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="hgi hgi-stroke hgi-settings-02"></i>
+          <i class="bi bi-gear"></i>
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
@@ -264,7 +264,7 @@
       
       <div class="dropdown">
         <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="hgi hgi-stroke hgi-settings-02"></i>
+          <i class="bi bi-gear"></i>
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
@@ -275,7 +275,7 @@
       
       <div class="dropdown">
         <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="hgi hgi-stroke hgi-settings-02"></i>
+          <i class="bi bi-gear"></i>
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>

package/demo-angular/src/app/views/buttons/buttons.component.ts

@@ -30,39 +30,39 @@ export class ButtonsComponent {
 <button type="button" class="btn btn-primary" disabled>Disabled</button>`;
 
   buttonIconLeftCode = `<button type="button" class="btn btn-primary btn-icon">
-  <i class="hgi hgi-stroke hgi-download-04"></i>Download
+  <i class="bi bi-download"></i>Download
 </button>
 <button type="button" class="btn btn-neutral btn-icon">
-  <i class="hgi hgi-stroke hgi-upload-04"></i>Upload
+  <i class="bi bi-upload"></i>Upload
 </button>
 <button type="button" class="btn btn-secondary btn-icon">
-  <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>Edit
+  <i class="bi bi-pencil"></i>Edit
 </button>
 <button type="button" class="btn btn-danger btn-icon">
-  <i class="hgi hgi-stroke hgi-delete-02"></i>Delete
+  <i class="bi bi-trash"></i>Delete
 </button>`;
 
   buttonIconRightCode = `<button type="button" class="btn btn-primary btn-icon">
-  Save<i class="hgi hgi-stroke hgi-tick-02"></i>
+  Save<i class="bi bi-check"></i>
 </button>
 <button type="button" class="btn btn-neutral btn-icon">
-  Search<i class="hgi hgi-stroke hgi-search-01"></i>
+  Search<i class="bi bi-search"></i>
 </button>
 <button type="button" class="btn btn-secondary btn-icon">
-  Settings<i class="hgi hgi-stroke hgi-settings-02"></i>
+  Settings<i class="bi bi-gear"></i>
 </button>`;
 
   buttonIconOnlyCode = `<button type="button" class="btn btn-primary btn-icon" aria-label="Download">
-  <i class="hgi hgi-stroke hgi-download-04"></i>
+  <i class="bi bi-download"></i>
 </button>
 <button type="button" class="btn btn-neutral btn-icon" aria-label="Upload">
-  <i class="hgi hgi-stroke hgi-upload-04"></i>
+  <i class="bi bi-upload"></i>
 </button>
 <button type="button" class="btn btn-secondary btn-icon" aria-label="Edit">
-  <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>
+  <i class="bi bi-pencil"></i>
 </button>
 <button type="button" class="btn btn-danger btn-icon" aria-label="Delete">
-  <i class="hgi hgi-stroke hgi-delete-02"></i>
+  <i class="bi bi-trash"></i>
 </button>`;
 
   dropdownButtonCode = `<div class="dropdown">
@@ -122,7 +122,7 @@ export class ButtonsComponent {
 
   iconDropdownCode = `<div class="dropdown">
   <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="hgi hgi-stroke hgi-settings-02"></i>
+    <i class="bi bi-gear"></i>
   </button>
   <ul class="dropdown-menu">
     <li><button class="dropdown-item" type="button">Action</button></li>
@@ -133,7 +133,7 @@ export class ButtonsComponent {
 
 <div class="dropdown">
   <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="hgi hgi-stroke hgi-settings-02"></i>
+    <i class="bi bi-gear"></i>
   </button>
   <ul class="dropdown-menu">
     <li><button class="dropdown-item" type="button">Action</button></li>
@@ -144,7 +144,7 @@ export class ButtonsComponent {
 
 <div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="hgi hgi-stroke hgi-settings-02"></i>
+    <i class="bi bi-gear"></i>
   </button>
   <ul class="dropdown-menu">
     <li><button class="dropdown-item" type="button">Action</button></li>

package/demo-angular/src/app/views/cards/cards.component.html

@@ -11,7 +11,7 @@
       <div class="card" tabindex="0">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
           <p class="card-text">{{ 'cards.card_text' | translate }}</p>
@@ -49,7 +49,7 @@
       <div class="card disabled" tabindex="0">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
             <input class="card-title-checked  form-check-input ripple" disabled type="checkbox" value="" id="check1" aria-label="{{ 'cards.select_card' | translate }}">
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
@@ -88,7 +88,7 @@
       <div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
             <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check3" aria-label="{{ 'cards.select_card' | translate }}">
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
@@ -106,7 +106,7 @@
           }
           
           <div class="card-footer">
-            <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(1)" [class.hgi-arrow-down-01]="!isExpanded(1)" (click)="toggleCard(1)"></i>
+            <i class="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(1)" [class.bi-chevron-down]="!isExpanded(1)" (click)="toggleCard(1)"></i>
           </div>
         </div>
       </div>
@@ -122,7 +122,7 @@
       <div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
           <p class="card-text">{{ 'cards.expandable_text' | translate }}</p>
@@ -143,7 +143,7 @@
           }
           
           <div class="card-footer">
-            <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(2)" [class.hgi-arrow-down-01]="!isExpanded(2)" (click)="toggleCard(2)"></i>
+            <i class="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(2)" [class.bi-chevron-down]="!isExpanded(2)" (click)="toggleCard(2)"></i>
           </div>
         </div>
       </div>

package/demo-angular/src/app/views/cards/cards.component.ts

@@ -32,7 +32,7 @@ export class CardsComponent {
   cardWithIconCode = `<div class="card" tabindex="0">
   <div class="card-body">
     <h5 class="card-title">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+      <i class="bi bi-check-circle card-title-icon"></i>
     </h5>
     <h6 class="card-subtitle mb-2">Card Title</h6>
     <p class="card-text">This is a sample card text that describes the content.</p>
@@ -64,7 +64,7 @@ export class CardsComponent {
   disabledCardCode = `<div class="card disabled" tabindex="0">
   <div class="card-body">
     <h5 class="card-title">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+      <i class="bi bi-check-circle card-title-icon"></i>
       <input class="card-title-checked form-check-input ripple" 
              disabled 
              type="checkbox" 
@@ -102,7 +102,7 @@ export class CardsComponent {
   expandableCardHtmlCode = `<div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
   <div class="card-body">
     <h5 class="card-title">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+      <i class="bi bi-check-circle card-title-icon"></i>
       <input class="card-title-checked form-check-input ripple" 
              type="checkbox" 
              value="" 
@@ -124,9 +124,9 @@ export class CardsComponent {
     }
     
     <div class="card-footer">
-      <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" 
-         [class.hgi-arrow-up-01]="isExpanded(1)" 
-         [class.hgi-arrow-down-01]="!isExpanded(1)" 
+      <i class="bi card-expanded-icon" 
+         [class.bi-chevron-up]="isExpanded(1)" 
+         [class.bi-chevron-down]="!isExpanded(1)" 
          (click)="toggleCard(1)"></i>
     </div>
   </div>
@@ -163,7 +163,7 @@ export class CardsComponent {
   expandableCardSimpleHtmlCode = `<div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
   <div class="card-body">
     <h5 class="card-title">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+      <i class="bi bi-check-circle card-title-icon"></i>
     </h5>
     <h6 class="card-subtitle mb-2">Expandable Card Title</h6>
     <p class="card-text">Click the arrow to see more details.</p>
@@ -184,9 +184,9 @@ export class CardsComponent {
     }
     
     <div class="card-footer">
-      <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" 
-         [class.hgi-arrow-up-01]="isExpanded(2)" 
-         [class.hgi-arrow-down-01]="!isExpanded(2)" 
+      <i class="bi card-expanded-icon" 
+         [class.bi-chevron-up]="isExpanded(2)" 
+         [class.bi-chevron-down]="!isExpanded(2)" 
          (click)="toggleCard(2)"></i>
     </div>
   </div>

package/demo-angular/src/app/views/contexts/contexts.component.html

@@ -0,0 +1,204 @@
+<!-- Context-Aware Theming Demo -->
+<div class="container py-5">
+  <h1 class="mb-5">Context-Aware Theming System</h1>
+  <p class="lead mb-5">
+    Components automatically adapt their colors based on the background context.
+    Simply wrap content in context classes like <code>.on-primary</code>, <code>.on-dark</code>, etc.
+  </p>
+
+  <!-- Default Context (Light Background) -->
+  <section class="mb-5">
+    <h2>Default Context</h2>
+    <div class="p-4 border rounded">
+      <p class="mb-3">This is the default light background context.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-outline-primary">Outline Button</button>
+      </div>
+      <p class="mb-2">
+        <a href="#" class="me-3">Regular Link</a>
+        <a href="#" class="link-primary">Primary Link</a>
+      </p>
+      <input type="text" class="form-control" placeholder="Input field">
+    </div>
+  </section>
+
+  <!-- On Primary Context -->
+  <section class="mb-5">
+    <h2>On Primary Context</h2>
+    <div class="on-primary p-4 rounded context-section">
+      <h3>Content on Primary Background</h3>
+      <p class="mb-3">All components automatically adapt to white/light colors for better contrast.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-outline-primary">Outline Button</button>
+      </div>
+      <p class="mb-3">
+        <a href="#" class="me-3">Regular Link</a>
+        <span class="text-muted">Muted text adapts too</span>
+      </p>
+      <input type="text" class="form-control" placeholder="Input field adapts">
+      
+      <div class="card mt-3 on-light">
+        <div class="card-body">
+          <h5 class="card-title">Card in Primary Context</h5>
+          <p class="card-text">Cards have subtle transparency to blend with the background.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- On Dark Context -->
+  <section class="mb-5">
+    <h2>On Dark Context</h2>
+    <div class="on-dark p-4 rounded context-section">
+      <h3>Content on Dark Background</h3>
+      <p class="mb-3">Perfect for dark mode or dark sections. All components adapt automatically.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-outline-primary">Outline Button</button>
+      </div>
+      <p class="mb-3">
+        <a href="#" class="me-3">Regular Link</a>
+        <span class="text-muted">Muted text is readable</span>
+      </p>
+      <input type="text" class="form-control mb-3" placeholder="Form fields work great">
+      <select class="form-select">
+        <option>Select options adapt too</option>
+        <option>Option 2</option>
+      </select>
+    </div>
+  </section>
+
+  <!-- On Danger Context -->
+  <section class="mb-5">
+    <h2>On Danger Context</h2>
+    <div class="on-danger p-4 rounded context-section">
+      <h3>Critical Alerts or Warnings</h3>
+      <p class="mb-3">Use for error states, critical warnings, or important notices.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Action</button>
+        <button class="btn btn-secondary">Secondary Action</button>
+        <button class="btn btn-outline-primary">Outline Action</button>
+      </div>
+      <div class="alert alert-warning mb-0">
+        <strong>Warning!</strong> Even alerts adapt to the context.
+      </div>
+    </div>
+  </section>
+
+  <!-- On Success Context -->
+  <section class="mb-5">
+    <h2>On Success Context</h2>
+    <div class="on-success p-4 rounded context-section">
+      <h3>Success Messages or Confirmation</h3>
+      <p class="mb-3">Perfect for success states, completed actions, or positive feedback.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Continue</button>
+        <button class="btn btn-outline-primary">View Details</button>
+      </div>
+      <p class="mb-0">
+        <a href="#">Learn more about this success</a>
+      </p>
+    </div>
+  </section>
+
+  <!-- On Warning Context -->
+  <section class="mb-5">
+    <h2>On Warning Context</h2>
+    <div class="on-warning p-4 rounded context-section">
+      <h3>Warning or Attention Needed</h3>
+      <p class="mb-3">Note: Uses dark text for better contrast on yellow/warning background.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Take Action</button>
+        <button class="btn btn-secondary">Dismiss</button>
+      </div>
+      <input type="text" class="form-control" placeholder="Dark text on warning background">
+    </div>
+  </section>
+
+  <!-- On Light Context -->
+  <section class="mb-5">
+    <h2>On Light Context</h2>
+    <div class="on-light p-4 rounded context-section">
+      <h3>Subtle Light Background</h3>
+      <p class="mb-3">Slightly different from default - useful for sections, sidebars, or panels.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-outline-primary">Outline Button</button>
+      </div>
+      <p class="mb-3">
+        <a href="#">Links maintain primary color</a>
+        <span class="text-muted ms-3">Muted text for less emphasis</span>
+      </p>
+      <div class="row g-2">
+        <div class="col">
+          <input type="text" class="form-control" placeholder="First name">
+        </div>
+        <div class="col">
+          <input type="text" class="form-control" placeholder="Last name">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Nested Contexts Example -->
+  <section class="mb-5">
+    <h2>Nested Contexts</h2>
+    <div class="on-primary p-4 rounded">
+      <h3>Primary Background</h3>
+      <p class="mb-3">You can nest different contexts for complex layouts.</p>
+      <button class="btn btn-primary me-2">Button on Primary</button>
+      
+      <div class="on-light p-3 rounded mt-3">
+        <h4>Light Context Inside Primary</h4>
+        <p class="mb-2">This light section is nested inside the primary background.</p>
+        <button class="btn btn-primary">Button on Light</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Usage Guide -->
+  <section class="mt-5 p-4 bg-light rounded">
+    <h2>How to Use</h2>
+    <div class="row">
+      <div class="col-md-6">
+        <h4>Available Context Classes:</h4>
+        <ul>
+          <li><code>.on-primary</code> - White text on primary color</li>
+          <li><code>.on-dark</code> - White text on dark background</li>
+          <li><code>.on-danger</code> - White text on danger/error color</li>
+          <li><code>.on-success</code> - White text on success color</li>
+          <li><code>.on-warning</code> - Dark text on warning color</li>
+          <li><code>.on-light</code> - Dark text on light background</li>
+        </ul>
+      </div>
+      <div class="col-md-6">
+        <h4>What Adapts Automatically:</h4>
+        <ul>
+          <li>✅ Buttons (all variants)</li>
+          <li>✅ Links</li>
+          <li>✅ Form inputs and selects</li>
+          <li>✅ Text colors</li>
+          <li>✅ Border colors</li>
+          <li>✅ Cards and alerts</li>
+          <li>✅ Tables and badges</li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="mt-4">
+      <h4>Example Code:</h4>
+      <pre class="bg-dark text-white p-3 rounded"><code>&lt;div class="on-primary p-4"&gt;
+  &lt;h3&gt;Content adapts automatically&lt;/h3&gt;
+  &lt;button class="btn btn-primary"&gt;Primary Button&lt;/button&gt;
+  &lt;a href="#"&gt;Link&lt;/a&gt;
+  &lt;input type="text" class="form-control" placeholder="Input"&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </section>
+</div>

package/demo-angular/src/app/views/contexts/contexts.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-buttons',
+  imports: [TranslateModule],
+  templateUrl: './contexts.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContextsComponent {}