chore: regen docs

packages/bootstrap/docs/customization-appbar.md

@@ -140,7 +140,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-appbar-light-text</td>
     <td>Color</td>
-    <td><code>k-contrast-color( $kendo-color-light )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light ))</code></td>
     <td><span class="color-preview" style="background-color: black"></span><code>black</code></td>
 </tr>
 <tr>
@@ -160,7 +160,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-appbar-dark-text</td>
     <td>Color</td>
-    <td><code>k-contrast-color( $kendo-color-dark )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark ))</code></td>
     <td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
 </tr>
 <tr>

packages/bootstrap/docs/customization-breadcrumb.md

@@ -490,7 +490,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-breadcrumb-link-focus-shadow</td>
     <td>List</td>
-    <td><code>inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 )</code></td>
+    <td><code>inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 ))</code></td>
     <td><code>inset 0 0 0 3px rgba(33, 37, 41, 0.25)</code></td>
 </tr>
 <tr>

packages/bootstrap/docs/customization-button.md

@@ -271,7 +271,7 @@ The following table lists the available variables for customization.
     <td>Map</td>
     <td><code>k-map-merge(
     $kendo-theme-colors,
-    ( "base": #e4e7eb )
+    ( "base": if($kendo-enable-color-system, k-color( base ), #e4e7eb) )
 )</code></td>
     <td><code>("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb)</code></td>
 </tr>
@@ -282,7 +282,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-bg</td>
     <td>Color</td>
-    <td><span class="color-preview" style="background-color: #e4e7eb"></span><code>#e4e7eb</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( base ), #e4e7eb)</code></td>
     <td><span class="color-preview" style="background-color: #e4e7eb"></span><code>#e4e7eb</code></td>
 </tr>
 <tr>
@@ -292,7 +292,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-text</td>
     <td>Color</td>
-    <td><code>k-contrast-color( $kendo-button-bg, $gray-900 )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 ))</code></td>
     <td><span class="color-preview" style="background-color: #212529"></span><code>#212529</code></td>
 </tr>
 <tr>
@@ -332,7 +332,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-hover-bg</td>
     <td>Color</td>
-    <td><code>k-color-darken( $kendo-button-bg, 7.5% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% ))</code></td>
     <td><span class="color-preview" style="background-color: #ced3db"></span><code>#ced3db</code></td>
 </tr>
 <tr>
@@ -352,7 +352,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-hover-border</td>
     <td>Color</td>
-    <td><code>k-color-darken( $kendo-button-bg, 10% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% ))</code></td>
     <td><span class="color-preview" style="background-color: #c7cdd5"></span><code>#c7cdd5</code></td>
 </tr>
 <tr>
@@ -382,7 +382,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-active-bg</td>
     <td>Color</td>
-    <td><code>k-color-darken( $kendo-button-bg, 10% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))</code></td>
     <td><span class="color-preview" style="background-color: #c7cdd5"></span><code>#c7cdd5</code></td>
 </tr>
 <tr>
@@ -402,7 +402,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-active-border</td>
     <td>Color</td>
-    <td><code>k-color-darken( $kendo-button-bg, 12.5% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))</code></td>
     <td><span class="color-preview" style="background-color: #bfc6d0"></span><code>#bfc6d0</code></td>
 </tr>
 <tr>
@@ -432,7 +432,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-selected-bg</td>
     <td>Color</td>
-    <td><code>k-color-darken( $kendo-color-primary, 10% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% ))</code></td>
     <td><span class="color-preview" style="background-color: #0257d5"></span><code>#0257d5</code></td>
 </tr>
 <tr>
@@ -442,7 +442,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-selected-text</td>
     <td>Color</td>
-    <td><code>k-contrast-color( $kendo-button-selected-bg )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg ))</code></td>
     <td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
 </tr>
 <tr>
@@ -452,7 +452,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-selected-border</td>
     <td>Color</td>
-    <td><code>k-color-darken( $kendo-color-primary, 12.5% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% ))</code></td>
     <td><span class="color-preview" style="background-color: #0252c9"></span><code>#0252c9</code></td>
 </tr>
 <tr>
@@ -482,7 +482,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-focus-bg</td>
     <td>Color</td>
-    <td><code>k-color-darken( $kendo-button-bg, 10% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))</code></td>
     <td><span class="color-preview" style="background-color: #c7cdd5"></span><code>#c7cdd5</code></td>
 </tr>
 <tr>
@@ -502,7 +502,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-focus-border</td>
     <td>Color</td>
-    <td><code>k-color-darken( $kendo-button-bg, 12.5% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))</code></td>
     <td><span class="color-preview" style="background-color: #bfc6d0"></span><code>#bfc6d0</code></td>
 </tr>
 <tr>
@@ -522,7 +522,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-button-focus-shadow</td>
     <td>List</td>
-    <td><code>0 0 0 .25rem rgba( $kendo-button-border, .5 )</code></td>
+    <td><code>0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 ))</code></td>
     <td><code>0 0 0 0.25rem rgba(228, 231, 235, 0.5)</code></td>
 </tr>
 <tr>

packages/bootstrap/docs/customization-charts.md

@@ -30,7 +30,7 @@ The following table lists the available variables for customization.
         <tr>
     <td>$kendo-series-a</td>
     <td>Color</td>
-    <td><code>$blue</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( series-a ), $blue)</code></td>
     <td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
 </tr>
 <tr>
@@ -40,7 +40,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-series-b</td>
     <td>Color</td>
-    <td><code>$purple</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( series-b ), $purple)</code></td>
     <td><span class="color-preview" style="background-color: #6f42c1"></span><code>#6f42c1</code></td>
 </tr>
 <tr>
@@ -50,7 +50,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-series-c</td>
     <td>Color</td>
-    <td><code>$teal</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( series-c ), $teal)</code></td>
     <td><span class="color-preview" style="background-color: #20c997"></span><code>#20c997</code></td>
 </tr>
 <tr>
@@ -60,7 +60,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-series-d</td>
     <td>Color</td>
-    <td><code>$green</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( series-d ), $green)</code></td>
     <td><span class="color-preview" style="background-color: #198754"></span><code>#198754</code></td>
 </tr>
 <tr>
@@ -70,7 +70,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-series-e</td>
     <td>Color</td>
-    <td><code>$yellow</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( series-e ), $yellow)</code></td>
     <td><span class="color-preview" style="background-color: #ffc107"></span><code>#ffc107</code></td>
 </tr>
 <tr>
@@ -80,7 +80,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-series-f</td>
     <td>Color</td>
-    <td><code>$red</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( series-f ), $red)</code></td>
     <td><span class="color-preview" style="background-color: #dc3545"></span><code>#dc3545</code></td>
 </tr>
 <tr>
@@ -100,7 +100,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-major-lines</td>
     <td>Color</td>
-    <td><code>rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )</code></td>
+    <td><code>rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 )</code></td>
     <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.08)"></span><code>rgba(0, 0, 0, 0.08)</code></td>
 </tr>
 <tr>
@@ -110,7 +110,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chart-minor-lines</td>
     <td>Color</td>
-    <td><code>rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )</code></td>
+    <td><code>rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 )</code></td>
     <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.04)"></span><code>rgba(0, 0, 0, 0.04)</code></td>
 </tr>
 <tr>

packages/bootstrap/docs/customization-checkbox.md

@@ -150,7 +150,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-checkbox-border</td>
     <td>Color</td>
-    <td><code>if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ))</code></td>
     <td><span class="color-preview" style="background-color: #ced4da"></span><code>#ced4da</code></td>
 </tr>
 <tr>
@@ -200,7 +200,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-checkbox-checked-text</td>
     <td>Color</td>
-    <td><code>k-contrast-color( $kendo-checkbox-checked-bg )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))</code></td>
     <td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
 </tr>
 <tr>
@@ -250,7 +250,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-checkbox-focus-border</td>
     <td>Color</td>
-    <td><code>k-try-tint( $kendo-color-primary, 50% )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% ))</code></td>
     <td><span class="color-preview" style="background-color: #86b7fe"></span><code>#86b7fe</code></td>
 </tr>
 <tr>
@@ -260,7 +260,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-checkbox-focus-shadow</td>
     <td>List</td>
-    <td><code>0 0 0 .25rem rgba( $kendo-color-primary, .25 )</code></td>
+    <td><code>0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))</code></td>
     <td><code>0 0 0 0.25rem rgba(13, 110, 253, 0.25)</code></td>
 </tr>
 <tr>

packages/bootstrap/docs/customization-chip.md

@@ -425,7 +425,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-chip-outline-hover-text</td>
     <td>Color</td>
-    <td><code>k-contrast-color( $kendo-chip-outline-hover-bg )</code></td>
+    <td><code>if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))</code></td>
     <td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
 </tr>
 <tr>

packages/bootstrap/docs/customization-color-system.md

@@ -28,23 +28,13 @@ The following table lists the available variables for customization.
 </thead>
 <tbody>
         <tr>
-    <td>$kendo-color-white</td>
-    <td>Color</td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The color white.<br />Note: you cannot change this value.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-color-black</td>
-    <td>Color</td>
-    <td><span class="color-preview" style="background-color: #000000"></span><code>#000000</code></td>
-    <td><span class="color-preview" style="background-color: #000000"></span><code>#000000</code></td>
+    <td>$kendo-colors</td>
+    <td>Map</td>
+    <td><code>$_default-colors</code></td>
+    <td><code>(app-surface: #ffffff, on-app-surface: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39)</code></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The color black.<br />Note: you cannot change this value.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The global default Colors map.</div></div>
     </td>
 </tr>
 <tr>

packages/bootstrap/docs/customization-common.md

@@ -37,6 +37,16 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Border radius for all components.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-chip-lg-font-size</td>
+    <td>Number</td>
+    <td><code>$kendo-font-size-md</code></td>
+    <td><code>1rem</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Chip.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-base-bg</td>
     <td>Color</td>
@@ -158,13 +168,13 @@ The following table lists the available variables for customization.
     </td>
 </tr>
 <tr>
-    <td>$kendo-chip-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>1rem</code></td>
+    <td>$kendo-disabled-text</td>
+    <td>Color</td>
+    <td><code>if( $kendo-is-dark-theme, $gray-600, $gray-500)</code></td>
+    <td><span class="color-preview" style="background-color: #adb5bd"></span><code>#adb5bd</code></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Chip.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Text color of disabled items.</div></div>
     </td>
 </tr>
 </tbody>

packages/bootstrap/docs/customization-dock-manager.md

@@ -360,7 +360,7 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-dock-manager-dock-preview-bg</td>
     <td>Color</td>
-    <td><code>rgba( $kendo-color-primary, .16 )</code></td>
+    <td><code>if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))</code></td>
     <td><span class="color-preview" style="background-color: rgba(13, 110, 253, 0.16)"></span><code>rgba(13, 110, 253, 0.16)</code></td>
 </tr>
 <tr>