You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization."
4
+
slug: variables_kendothemebootstrap_accessibility
5
+
position: 9
6
+
---
7
+
8
+
# Customizing Accessibility
9
+
10
+
## Variables
11
+
12
+
The following table lists the available variables for customization.
13
+
14
+
<tableclass="theme-variables">
15
+
<colgroup>
16
+
<col style="width: 200px; white-space:nowrap;" />
17
+
<col />
18
+
<col />
19
+
<col />
20
+
</colgroup>
21
+
<thead>
22
+
<tr>
23
+
<th>Name</th>
24
+
<th>Type</th>
25
+
<th>Default value</th>
26
+
<th>Computed value</th>
27
+
</tr>
28
+
</thead>
29
+
<tbody>
30
+
<tr>
31
+
<td>$wcag-min-contrast-ratio</td>
32
+
<td>Number</td>
33
+
<td><code>7</code></td>
34
+
<td><code>4.5</code></td>
35
+
</tr>
36
+
<tr>
37
+
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The contrast ratio to reach against white, to determine if color changes from "light" to "dark".<br />Acceptable values for WCAG 2.0 are 3, 4.5 and 7.</div></div>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Default dark color for WCAG 2.0.</div></div>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Default light color for WCAG 2.0.</div></div>
Copy file name to clipboardexpand all lines: packages/bootstrap/docs/customization-color-system.md
+80
Original file line number
Diff line number
Diff line change
@@ -167,6 +167,86 @@ The following table lists the available variables for customization.
167
167
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark</div></div>
<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 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 color transparent.<br />Note: you cannot change this value.</div></div>
198
+
</td>
199
+
</tr>
200
+
<tr>
201
+
<td>$kendo-gradient-transparent-to-black</td>
202
+
<td>Gradient</td>
203
+
<td><code>rgba(black, 0), black</code></td>
204
+
<td><code>rgba(0, 0, 0, 0), black</code></td>
205
+
</tr>
206
+
<tr>
207
+
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">A gradient that goes from transparent to 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">A gradient that goes from transparent to white.<br />Note: you cannot change this value.</div></div>
218
+
</td>
219
+
</tr>
220
+
<tr>
221
+
<td>$kendo-gradient-black-to-transparent</td>
222
+
<td>Gradient</td>
223
+
<td><code>black, rgba(black, 0)</code></td>
224
+
<td><code>black, rgba(0, 0, 0, 0)</code></td>
225
+
</tr>
226
+
<tr>
227
+
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">A gradient that goes from black to transparent.<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">A gradient that goes from white to transparent.<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">A gradient that cycles through the colors of the rainbow.<br />Note: you cannot change this value.</div></div>
Copy file name to clipboardexpand all lines: packages/bootstrap/docs/customization-common.md
+39
Original file line number
Diff line number
Diff line change
@@ -157,6 +157,45 @@ The following table lists the available variables for customization.
157
157
<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 colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the day inside the Scheduler Tooltip.</div></div>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Tooltip title.</div></div>
0 commit comments