Skip to content

Commit

Permalink
chore: regen docs
Browse files Browse the repository at this point in the history
  • Loading branch information
joneff authored and Juveniel committed Feb 1, 2023
1 parent de27fde commit a33008c
Show file tree
Hide file tree
Showing 26 changed files with 13,240 additions and 398 deletions.
151 changes: 151 additions & 0 deletions packages/nouvelle/docs/customization-avatar.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
---
title: Customizing Avatar
description: "Refer to the list of the Kendo UI Nouvelle theme variables available for customization."
slug: variables_kendothemenouvelle_avatar
position: 9
---

# Customizing Avatar

The following table lists the available variables for customization.

<table class="theme-variables">
<colgroup>
<col style="width: 200px; white-space:nowrap;" />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</thead>
<tbody>
<tr>
<td>$kendo-avatar-border-width</td>
<td>Number</td>
<td>

`1px`

</td>
<td>

`1px`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Border width of the avatar.</div></div>
</td>
</tr>
<tr>
<td>$kendo-avatar-font-family</td>
<td>Null</td>
<td>

`$kendo-font-family`

</td>
<td>

`null`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Font family of the avatar.</div></div>
</td>
</tr>
<tr>
<td>$kendo-avatar-font-size</td>
<td>Number</td>
<td>

`$kendo-font-size-md`

</td>
<td>

`1rem`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Font size of the avatar.</div></div>
</td>
</tr>
<tr>
<td>$kendo-avatar-line-height</td>
<td>Number</td>
<td>

`$kendo-line-height-md`

</td>
<td>

`1.5`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Line height of the avatar.</div></div>
</td>
</tr>
<tr>
<td>$kendo-avatar-sizes</td>
<td>Map</td>
<td>

`(
sm: k-map-get( $kendo-spacing, 4 ),
md: k-map-get( $kendo-spacing, 8 ),
lg: k-map-get( $kendo-spacing, 16 )
)`

</td>
<td>

`(sm: 1rem, md: 2rem, lg: 4rem)`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes of the avatar.</div></div>
</td>
</tr>
<tr>
<td>$kendo-avatar-theme</td>
<td>Map</td>
<td>

`k-process-variant-matrices(
$kendo-avatar-theme-matrix,
$kendo-avatar-palette-matrix
)`

</td>
<td>

`(solid-neutral: (bg: #ededed, text: #494949, border: #ededed, gradient: null, shadow: null, outline: null), solid-inverse: (bg: #494949, text: #ffffff, border: #494949, gradient: null, shadow: null, outline: null), solid-primary: (bg: #622331, text: #ffffff, border: #622331, gradient: null, shadow: null, outline: null), solid-info: (bg: #0969da, text: #ffffff, border: #0969da, gradient: null, shadow: null, outline: null), solid-success: (bg: #1a7f37, text: #ffffff, border: #1a7f37, gradient: null, shadow: null, outline: null), solid-warning: (bg: #bc4c00, text: #ffffff, border: #bc4c00, gradient: null, shadow: null, outline: null), solid-error: (bg: #cf222e, text: #ffffff, border: #cf222e, gradient: null, shadow: null, outline: null), outline-neutral: (bg: transparent, text: #767676, border: #767676, gradient: null, shadow: null, outline: null), outline-inverse: (bg: transparent, text: #494949, border: #494949, gradient: null, shadow: null, outline: null), outline-primary: (bg: transparent, text: #622331, border: #622331, gradient: null, shadow: null, outline: null), outline-info: (bg: transparent, text: #0969da, border: #0969da, gradient: null, shadow: null, outline: null), outline-success: (bg: transparent, text: #1a7f37, border: #1a7f37, gradient: null, shadow: null, outline: null), outline-warning: (bg: transparent, text: #bc4c00, border: #bc4c00, gradient: null, shadow: null, outline: null), outline-error: (bg: transparent, text: #cf222e, border: #cf222e, gradient: null, shadow: null, outline: null))`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Theme colors map of the avatar.</div></div>
</td>
</tr>
</tbody>
</table>

## Suggested Links

* [Styling Overview]({% slug themesandstyles %})
* [Web Font Icons]({% slug icons %})
* [Preview of the Themed Components](../)

241 changes: 241 additions & 0 deletions packages/nouvelle/docs/customization-badge.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
---
title: Customizing Badge
description: "Refer to the list of the Kendo UI Nouvelle theme variables available for customization."
slug: variables_kendothemenouvelle_badge
position: 9
---

# Customizing Badge

The following table lists the available variables for customization.

<table class="theme-variables">
<colgroup>
<col style="width: 200px; white-space:nowrap;" />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</thead>
<tbody>
<tr>
<td>$kendo-badge-border-width</td>
<td>Number</td>
<td>

`1px`

</td>
<td>

`1px`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Border width of the badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-font-family</td>
<td>Null</td>
<td>

`$kendo-font-family`

</td>
<td>

`null`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Font family of the badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-font-weight</td>
<td>Null</td>
<td>

`null`

</td>
<td>

`null`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Font weight of the badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-sm-padding-x</td>
<td>Number</td>
<td>

`k-map-get( $kendo-spacing, 0.5 )`

</td>
<td>

`0.125rem`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Horizontal padding of the badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-sm-padding-y</td>
<td>Number</td>
<td>

`k-map-get( $kendo-spacing, 0.5 )`

</td>
<td>

`0.125rem`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Vertical padding of the badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-sm-font-size</td>
<td>Number</td>
<td>

`$kendo-font-size-xs`

</td>
<td>

`0.75rem`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Font sizes of the badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-sm-line-height</td>
<td>Null</td>
<td>

`null`

</td>
<td>

`null`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Line heights of the badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-sm-min-width</td>
<td>Calculation</td>
<td>

`calc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )`

</td>
<td>

`calc( * 1em + 0.125rem * 2 + 1px * 2 )`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Badge min width used for circle badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-sizes</td>
<td>Map</td>
<td>

`(
sm: (
padding-x: $kendo-badge-sm-padding-x,
padding-y: $kendo-badge-sm-padding-y,
font-size: $kendo-badge-sm-font-size,
line-height: $kendo-badge-sm-line-height,
min-width: $kendo-badge-sm-min-width
),
md: (
padding-x: $kendo-badge-md-padding-x,
padding-y: $kendo-badge-md-padding-y,
font-size: $kendo-badge-md-font-size,
line-height: $kendo-badge-md-line-height,
min-width: $kendo-badge-md-min-width
),
lg: (
padding-x: $kendo-badge-lg-padding-x,
padding-y: $kendo-badge-lg-padding-y,
font-size: $kendo-badge-lg-font-size,
line-height: $kendo-badge-lg-line-height,
min-width: $kendo-badge-lg-min-width
)
)`

</td>
<td>

`(sm: (padding-x: 0.125rem, padding-y: 0.125rem, font-size: 0.75rem, line-height: null, min-width: calc( * 1em + 0.125rem * 2 + 1px * 2 )), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: null, min-width: calc( * 1em + 0.25rem * 2 + 1px * 2 )), lg: (padding-x: 0.375rem, padding-y: 0.375rem, font-size: 1rem, line-height: null, min-width: calc( * 1em + 0.375rem * 2 + 1px * 2 )))`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Size map for the badge.</div></div>
</td>
</tr>
<tr>
<td>$kendo-badge-theme</td>
<td>Map</td>
<td>

`k-process-variant-matrices(
$kendo-badge-theme-matrix,
$kendo-badge-palette-matrix
)`

</td>
<td>

`(solid-neutral: (bg: #ededed, text: #494949, border: #ededed, gradient: null, shadow: null, outline: null), solid-inverse: (bg: #494949, text: #ffffff, border: #494949, gradient: null, shadow: null, outline: null), solid-primary: (bg: #622331, text: #ffffff, border: #622331, gradient: null, shadow: null, outline: null), solid-info: (bg: #0969da, text: #ffffff, border: #0969da, gradient: null, shadow: null, outline: null), solid-success: (bg: #1a7f37, text: #ffffff, border: #1a7f37, gradient: null, shadow: null, outline: null), solid-warning: (bg: #bc4c00, text: #ffffff, border: #bc4c00, gradient: null, shadow: null, outline: null), solid-error: (bg: #cf222e, text: #ffffff, border: #cf222e, gradient: null, shadow: null, outline: null), outline-neutral: (bg: transparent, text: #767676, border: #767676, gradient: null, shadow: null, outline: null), outline-inverse: (bg: transparent, text: #494949, border: #494949, gradient: null, shadow: null, outline: null), outline-primary: (bg: transparent, text: #622331, border: #622331, gradient: null, shadow: null, outline: null), outline-info: (bg: transparent, text: #0969da, border: #0969da, gradient: null, shadow: null, outline: null), outline-success: (bg: transparent, text: #1a7f37, border: #1a7f37, gradient: null, shadow: null, outline: null), outline-warning: (bg: transparent, text: #bc4c00, border: #bc4c00, gradient: null, shadow: null, outline: null), outline-error: (bg: transparent, text: #cf222e, border: #cf222e, gradient: null, shadow: null, outline: null))`

</td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Theme colors map of the badge.</div></div>
</td>
</tr>
</tbody>
</table>

## Suggested Links

* [Styling Overview]({% slug themesandstyles %})
* [Web Font Icons]({% slug icons %})
* [Preview of the Themed Components](../)

Loading

0 comments on commit a33008c

Please sign in to comment.