Skip to content

Commit c89e0ab

Browse files
committed
chore: regen docs
1 parent 30a58f6 commit c89e0ab

File tree

62 files changed

+16840
-227
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+16840
-227
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Customizing Accessibility
3+
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+
<table class="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>
38+
</td>
39+
</tr>
40+
<tr>
41+
<td>$wcag-dark</td>
42+
<td>Color</td>
43+
<td><code>black</code></td>
44+
<td><span class="color-preview" style="background-color: black"></span><code>black</code></td>
45+
</tr>
46+
<tr>
47+
<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>
48+
</td>
49+
</tr>
50+
<tr>
51+
<td>$wcag-light</td>
52+
<td>Color</td>
53+
<td><code>white</code></td>
54+
<td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
55+
</tr>
56+
<tr>
57+
<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>
58+
</td>
59+
</tr>
60+
</tbody>
61+
</table>
62+
63+
## Suggested Links
64+
65+
* [Styling Overview]({% slug themesandstyles %})
66+
* [Web Font Icons]({% slug icons %})
67+
* [Preview of the Themed Components](../)
68+

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

+80
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,86 @@ The following table lists the available variables for customization.
167167
<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>
168168
</td>
169169
</tr>
170+
<tr>
171+
<td>$kendo-color-white</td>
172+
<td>Color</td>
173+
<td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
174+
<td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
175+
</tr>
176+
<tr>
177+
<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>
178+
</td>
179+
</tr>
180+
<tr>
181+
<td>$kendo-color-black</td>
182+
<td>Color</td>
183+
<td><span class="color-preview" style="background-color: #000000"></span><code>#000000</code></td>
184+
<td><span class="color-preview" style="background-color: #000000"></span><code>#000000</code></td>
185+
</tr>
186+
<tr>
187+
<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>
188+
</td>
189+
</tr>
190+
<tr>
191+
<td>$kendo-color-rgba-transparent</td>
192+
<td>Color</td>
193+
<td><code>rgba(0, 0, 0, 0)</code></td>
194+
<td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0)"></span><code>rgba(0, 0, 0, 0)</code></td>
195+
</tr>
196+
<tr>
197+
<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>
208+
</td>
209+
</tr>
210+
<tr>
211+
<td>$kendo-gradient-transparent-to-white</td>
212+
<td>Gradient</td>
213+
<td><code>rgba(white, 0), white</code></td>
214+
<td><code>rgba(255, 255, 255, 0), white</code></td>
215+
</tr>
216+
<tr>
217+
<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>
228+
</td>
229+
</tr>
230+
<tr>
231+
<td>$kendo-gradient-white-to-transparent</td>
232+
<td>Gradient</td>
233+
<td><code>white, rgba(white, 0)</code></td>
234+
<td><code>white, rgba(255, 255, 255, 0)</code></td>
235+
</tr>
236+
<tr>
237+
<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>
238+
</td>
239+
</tr>
240+
<tr>
241+
<td>$kendo-gradient-rainbow</td>
242+
<td>Gradient</td>
243+
<td><span class="color-preview" style="background-color: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000"></span><code>#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000</code></td>
244+
<td><code>#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000</code></td>
245+
</tr>
246+
<tr>
247+
<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>
248+
</td>
249+
</tr>
170250
</tbody>
171251
</table>
172252

packages/bootstrap/docs/customization-common.md

+39
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,45 @@ The following table lists the available variables for customization.
157157
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Text color of disabled items.</div></div>
158158
</td>
159159
</tr>
160+
<tr>
161+
<td>$kendo-display</td>
162+
<td>Map</td>
163+
<td><code>(
164+
1: (
165+
font-size: $kendo-display1-font-size,
166+
font-family: $kendo-display1-font-family,
167+
line-height: $kendo-display1-line-height,
168+
font-weight: $kendo-display1-font-weight,
169+
letter-spacing: $kendo-display1-letter-spacing
170+
),
171+
2: (
172+
font-size: $kendo-display2-font-size,
173+
font-family: $kendo-display2-font-family,
174+
line-height: $kendo-display2-line-height,
175+
font-weight: $kendo-display2-font-weight,
176+
letter-spacing: $kendo-display2-letter-spacing
177+
),
178+
3: (
179+
font-size: $kendo-display3-font-size,
180+
font-family: $kendo-display3-font-family,
181+
line-height: $kendo-display3-line-height,
182+
font-weight: $kendo-display3-font-weight,
183+
letter-spacing: $kendo-display3-letter-spacing
184+
),
185+
4: (
186+
font-size: $kendo-display4-font-size,
187+
font-family: $kendo-display4-font-family,
188+
line-height: $kendo-display4-line-height,
189+
font-weight: $kendo-display4-font-weight,
190+
letter-spacing: $kendo-display4-letter-spacing
191+
),
192+
)</code></td>
193+
<td><code>(1: (font-size: 5rem, font-family: null, line-height: 1.2, font-weight: 300, letter-spacing: null), 2: (font-size: 4.5rem, font-family: null, line-height: 1.2, font-weight: 300, letter-spacing: null), 3: (font-size: 4rem, font-family: null, line-height: 1.2, font-weight: 300, letter-spacing: null), 4: (font-size: 3.5rem, font-family: null, line-height: 1.2, font-weight: 300, letter-spacing: null))</code></td>
194+
</tr>
195+
<tr>
196+
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The displays Map</div></div>
197+
</td>
198+
</tr>
160199
</tbody>
161200
</table>
162201

packages/bootstrap/docs/customization-scheduler.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -660,8 +660,8 @@ The following table lists the available variables for customization.
660660
<tr>
661661
<td>$kendo-scheduler-tooltip-day-font-size</td>
662662
<td>Calculation</td>
663-
<td><code>calc( #{$kendo-scheduler-tooltip-month-font-size} * 2 )</code></td>
664-
<td><code>calc(var(--kendo-font-size-sm, inherit) * 2)</code></td>
663+
<td><code>calc( var( --kendo-font-size-sm, #{$kendo-font-size-sm} ) * 2 )</code></td>
664+
<td><code>calc(var(--kendo-font-size-sm, 0.875rem) * 2)</code></td>
665665
</tr>
666666
<tr>
667667
<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>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Customizing Spacing
3+
description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization."
4+
slug: variables_kendothemebootstrap_spacing
5+
position: 9
6+
---
7+
8+
# Customizing Spacing
9+
10+
## Variables
11+
12+
The following table lists the available variables for customization.
13+
14+
<table class="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>$kendo-spacing</td>
32+
<td>Map</td>
33+
<td><code>$_default-spacing</code></td>
34+
<td><code>(0: 0px, 1px: 1px, 0.5: 0.125rem, 1: 0.25rem, 1.5: 0.375rem, 2: 0.5rem, 2.5: 0.625rem, 3: 0.75rem, 3.5: 0.875rem, 4: 1rem, 4.5: 1.125rem, 5: 1.25rem, 5.5: 1.375rem, 6: 1.5rem, 6.5: 1.625rem, 7: 1.75rem, 7.5: 1.875rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 2.75rem, 12: 3rem, 13: 3.25rem, 14: 3.5rem, 15: 3.75rem, 16: 4rem, 17: 4.25rem, 18: 4.5rem, 19: 4.75rem, 20: 5rem, 21: 5.25rem, 22: 5.5rem, 23: 5.75rem, 24: 6rem, 25: 7rem, 26: 8rem, 27: 9rem, 28: 10rem, 29: 11rem, 30: 12rem)</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 global default Spacing map.</div></div>
38+
</td>
39+
</tr>
40+
</tbody>
41+
</table>
42+
43+
## Suggested Links
44+
45+
* [Styling Overview]({% slug themesandstyles %})
46+
* [Web Font Icons]({% slug icons %})
47+
* [Preview of the Themed Components](../)
48+

packages/bootstrap/docs/customization-tooltip.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ The following table lists the available variables for customization.
100100
<tr>
101101
<td>$kendo-tooltip-title-font-size</td>
102102
<td>Calculation</td>
103-
<td><code>calc( #{$kendo-tooltip-font-size} * 1.25 )</code></td>
104-
<td><code>calc(var(--kendo-font-size-sm, inherit) * 1.25)</code></td>
103+
<td><code>calc( var( --kendo-font-size-sm, #{$kendo-font-size-sm} ) * 1.25 )</code></td>
104+
<td><code>calc(var(--kendo-font-size-sm, 0.875rem) * 1.25)</code></td>
105105
</tr>
106106
<tr>
107107
<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

Comments
 (0)