Fluent Theme

Apply the perfect look and feel to your apps with the styles supported by the Telerik and Kendo UI Fluent theme.

Variables

The Telerik and Kendo UI Fluent theme employs SASS variables and CSS custom properties (known as CSS variables) that you can use to customize the theme.

Variables by Scope

When it comes to the effect that a specific change in a variable's value causes, variables are not equal. Changing some values will have a much wider impact on the theme than changing others.

Depending on the extent of the styles that each variable controls, the variables fall into three main groups:

  • Global variables—They control globally used theme colors and metrics like $kendo-colors$kendo-spacing$kendo-elevation$kendo-border-radii.
  • Variables affecting individual UI components—For example, $kendo-grid-bg$kendo-tabstrip-font-size.

Most component-level variables link to generic variables that are higher in the hierarchy. For instance, you can customize the background of the Grid component both through the $kendo-colors map and the $kendo-grid-bg variables. In this case, consider that the $kendo-grid-bg variable references a value from the $kendo-colors map.

List of Variables

The following tables represent the variables in the Telerik and Kendo UI Fluent theme by the type of styles that they control.

Color Variables

The following table represents the $kendo-colors Sass map of the Telerik and Kendo UI Fluent theme:

KeyValue
Variable: kendo-colors
app-surface #ffffff
on-app-surface #323130
subtle #605e5c
surface #faf9f8
surface-alt #ffffff
border #8a8886
border-alt #323130
base-subtle #edebe9
base-subtle-hover #e1dfdd
base-subtle-active #d2d0ce
base #ffffff
base-hover #f3f2f1
base-active #edebe9
base-emphasis #605e5c
base-on-subtle #323130
on-base #323130
base-on-surface #323130
primary-subtle #deecf9
primary-subtle-hover #c7e0f4
primary-subtle-active #abd1ef
primary #0078d4
primary-hover #106ebe
primary-active #005a9e
primary-emphasis #004578
primary-on-subtle #001c30
on-primary #ffffff
primary-on-surface #0078d4
secondary-subtle #faf9f8
secondary-subtle-hover #f3f2f1
secondary-subtle-active #edebe9
secondary #979593
secondary-hover #8a8886
secondary-active #797775
secondary-emphasis #605e5c
secondary-on-subtle #323130
on-secondary #ffffff
secondary-on-surface #605e5c
tertiary-subtle #deecf9
tertiary-subtle-hover #bfdbf3
tertiary-subtle-active #aacfef
tertiary #2b88d8
tertiary-hover #287ec7
tertiary-active #2473b7
tertiary-emphasis #2169a6
tertiary-on-subtle #174974
on-tertiary #ffffff
tertiary-on-surface #2b88d8
info-subtle #cee5ff
info-subtle-hover #add4ff
info-subtle-active #8dc3ff
info #0a7eff
info-hover #096edf
info-active #085ebf
info-emphasis #064f9f
info-on-subtle #032040
on-info #ffffff
info-on-surface #096edf
success-subtle #dff6dd
success-subtle-hover #c8e8c6
success-subtle-active #b1dbaf
success #55a554
success-hover #3e973e
success-active #278a27
success-emphasis #107c10
success-on-subtle #063206
on-success #ffffff
success-on-surface #107c10
warning-subtle #fff4ce
warning-subtle-hover #ffedad
warning-subtle-active #ffe58d
warning #ffc80a
warning-hover #f5c000
warning-active #e0b000
warning-emphasis #4e4d4b
warning-on-subtle #323130
on-warning #323130
warning-on-surface #7a6000
error-subtle #fde7e9
error-subtle-hover #f3d2d4
error-subtle-active #e9bcbf
error #c2666b
error-hover #b85156
error-active #ae3b41
error-emphasis #a4262c
error-on-subtle #420f12
on-error #ffffff
error-on-surface #a4262c
light-subtle #faf9f8
light-subtle-hover #f3f2f1
light-subtle-active #edebe9
light #d2d0ce
light-hover #c8c6c4
light-active #a19f9d
light-emphasis #e1dfdd
light-on-subtle #323130
on-light #323130
light-on-surface #d2d0ce
dark-subtle #a19f9d
dark-subtle-hover #979593
dark-subtle-active #8a8886
dark #323130
dark-hover #201f1e
dark-active #000000
dark-emphasis #797775
dark-on-subtle #201f1e
on-dark #ffffff
dark-on-surface #323130
inverse-subtle #a19f9d
inverse-subtle-hover #979593
inverse-subtle-active #8a8886
inverse #323130
inverse-hover #201f1e
inverse-active #000000
inverse-emphasis #797775
inverse-on-subtle #201f1e
on-inverse #ffffff
inverse-on-surface #323130
series-a #0099bc
series-a-bold #00738d
series-a-bolder #004d5e
series-a-subtle #40b3cd
series-a-subtler #80ccdd
series-b #e74856
series-b-bold #ad3641
series-b-bolder #74242b
series-b-subtle #ed7680
series-b-subtler #f3a3aa
series-c #ffb900
series-c-bold #bf8b00
series-c-bolder #805d00
series-c-subtle #ffcb40
series-c-subtler #ffdc80
series-d #096edf
series-d-bold #064f9f
series-d-bolder #042f60
series-d-subtle #2b8fff
series-d-subtler #6cb2ff
series-e #8764b8
series-e-bold #654b8a
series-e-bolder #44325c
series-e-subtle #a58bca
series-e-subtler #c3b1db
series-f #00cc6a
series-f-bold #009950
series-f-bolder #006635
series-f-subtle #40d98f
series-f-subtler #80e5b4
Description: The global default Colors map.

Spacing Variables

The following table represents the $kendo-spacing Sass map of the Telerik and Kendo UI Fluent theme:

StepValueExample
00px
1px1px
0.50.125rem
10.25rem
1.50.375rem
20.5rem
2.50.625rem
30.75rem
3.50.875rem
41rem
4.51.125rem
51.25rem
5.51.375rem
61.5rem
6.51.625rem
71.75rem
7.51.875rem
82rem
92.25rem
102.5rem
112.75rem
123rem
133.25rem
143.5rem
153.75rem
164rem
174.25rem
184.5rem
194.75rem
205rem
215.25rem
225.5rem
235.75rem
246rem
257rem
268rem
279rem
2810rem
2911rem
3012rem

Typography Variables

The following table represents the typography Sass variables of the Telerik and Kendo UI Fluent theme:

VariableDefault ValueComputed ValueValue
kendo-font-size0.875rem0.875remDefault: 0.875remComputed: 0.875rem
Description: The base font size across all components.
kendo-font-size-xs0.625rem0.625remDefault: 0.625remComputed: 0.625rem
Description: The extra extra small font size across all components.
kendo-font-size-sm0.75rem0.75remDefault: 0.75remComputed: 0.75rem
Description: The small font size across all components.
kendo-font-size-md$kendo-font-size0.875remDefault: $kendo-font-sizeComputed: 0.875rem
Description: The medium font size across all components.
kendo-font-size-lg1rem1remDefault: 1remComputed: 1rem
Description: The large font size across all components.
kendo-font-size-xl1.25rem1.25remDefault: 1.25remComputed: 1.25rem
Description: The extra large font size across all components.
kendo-line-heightmath.div( 20, 14 )1.4285714286Default: math.div( 20, 14 )Computed: 1.4285714286
Description: The base line height across all components.
kendo-line-height-xs11Default: 1Computed: 1
Description: The extra small line height across all components.
kendo-line-height-sm1.251.25Default: 1.25Computed: 1.25
Description: The small line height across all components.
kendo-line-height-md$kendo-line-height1.4285714286Default: $kendo-line-heightComputed: 1.4285714286
Description: The medium line height across all components.
kendo-line-height-lg1.51.5Default: 1.5Computed: 1.5
Description: The large line height across all components.
kendo-line-height-emcalc( #{$kendo-line-height} * 1em)calc(1.4285714286 * 1em)Default: calc( #{$kendo-line-height} * 1em)Computed: calc(1.4285714286 * 1em)
Description: The base line height in ems across all components.
kendo-letter-spacingnormalnormalDefault: normalComputed: normal
Description: The base letter spacing across all components.
kendo-font-family"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serifDefault: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serifComputed: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif
Description: The font family across all components.
kendo-font-sizes$_default-font-sizes(xxs: 0.5rem, xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)Default: $_default-font-sizesComputed: (xxs: 0.5rem, xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)
Description: The font sizes map
kendo-line-heights$_default-line-heights(xs: 1, sm: 1.25, md: 1.4285714286, lg: 1.5)Default: $_default-line-heightsComputed: (xs: 1, sm: 1.25, md: 1.4285714286, lg: 1.5)
Description: The line heights map
kendo-h1-font-size32px32pxDefault: 32pxComputed: 32px
Description: The font size of the highest level heading.
kendo-h2-font-size28px28pxDefault: 28pxComputed: 28px
Description: The font size of the second highest level heading.
kendo-h3-font-size24px24pxDefault: 24pxComputed: 24px
Description: The font size of the third highest level heading.
kendo-h4-font-size20px20pxDefault: 20pxComputed: 20px
Description: The font size of the fourth highest level heading.
kendo-h5-font-size18px18pxDefault: 18pxComputed: 18px
Description: The font size of the fifth highest level heading.
kendo-h6-font-size16px16pxDefault: 16pxComputed: 16px
Description: The font size of the sixth highest level heading.
kendo-h1-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the highest level heading.
kendo-h2-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the second highest level heading.
kendo-h3-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the third highest level heading.
kendo-h4-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the fourth highest level heading.
kendo-h6-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the sixth highest level heading.
kendo-h1-line-height40px40pxDefault: 40pxComputed: 40px
Description: The line height of the highest level heading.
kendo-h2-line-height36px36pxDefault: 36pxComputed: 36px
Description: The line height of the second highest level heading.
kendo-h3-line-height32px32pxDefault: 32pxComputed: 32px
Description: The line height of the third highest level heading.
kendo-h4-line-height28px28pxDefault: 28pxComputed: 28px
Description: The line height of the fourth highest level heading.
kendo-h5-line-height24px24pxDefault: 24pxComputed: 24px
Description: The line height of the fifth highest level heading.
kendo-h2-font-weightvar( --kendo-font-weight-semibold, normal )var(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )Computed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the highest level heading.
kendo-h1-font-weightvar( --kendo-font-weight-semibold, normal )var(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )Computed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the second highest level heading.
kendo-h3-font-weightvar( --kendo-font-weight-semibold, normal )var(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )Computed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the third highest level heading.
kendo-h4-font-weightvar( --kendo-font-weight-semibold, normal )!defaultvar(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )!defaultComputed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the fourth highest level heading.
kendo-h5-font-weightvar( --kendo-font-weight-semibold, normal )!defaultvar(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )!defaultComputed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the fifth highest level heading.
kendo-h6-font-weightvar( --kendo-font-weight-semibold, normal )!defaultvar(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )!defaultComputed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the sixth highest level heading.
kendo-h1-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the highest level heading.
kendo-h2-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the second highest level heading.
kendo-h3-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the third highest level heading.
kendo-h4-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the fourth highest level heading.
kendo-h5-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the fifth highest level heading.
kendo-h6-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the sixth highest level heading.
kendo-h1-margin0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)Default: 0 0 var( --kendo-font-size, inherit )Computed: 0 0 var(--kendo-font-size, inherit)
Description: The margin of the highest level heading.
kendo-h2-margin0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)Default: 0 0 var( --kendo-font-size, inherit )Computed: 0 0 var(--kendo-font-size, inherit)
Description: The margin of the second highest level heading.
kendo-h3-margin0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)Default: 0 0 var( --kendo-font-size, inherit )Computed: 0 0 var(--kendo-font-size, inherit)
Description: The margin of the third highest level heading.
kendo-h4-margin0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)Default: 0 0 var( --kendo-font-size, inherit )Computed: 0 0 var(--kendo-font-size, inherit)
Description: The margin of the fourth highest level heading.
kendo-h5-margin0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)Default: 0 0 var( --kendo-font-size, inherit )Computed: 0 0 var(--kendo-font-size, inherit)
Description: The margin of the fifth highest level heading.
kendo-h6-margin0 0 var( --kendo-font-size, inherit )0 0 var(--kendo-font-size, inherit)Default: 0 0 var( --kendo-font-size, inherit )Computed: 0 0 var(--kendo-font-size, inherit)
Description: The margin of the sixth highest level heading.
kendo-headings( h1: ( font-size: $kendo-h1-font-size, font-family: $kendo-h1-font-family, line-height: $kendo-h1-line-height, font-weight: $kendo-h1-font-weight, letter-spacing: $kendo-h1-letter-spacing, margin: $kendo-h1-margin ), h2: ( font-size: $kendo-h2-font-size, font-family: $kendo-h2-font-family, line-height: $kendo-h2-line-height, font-weight: $kendo-h2-font-weight, letter-spacing: $kendo-h2-letter-spacing, margin: $kendo-h2-margin ), h3: ( font-size: $kendo-h3-font-size, font-family: $kendo-h3-font-family, line-height: $kendo-h3-line-height, font-weight: $kendo-h3-font-weight, letter-spacing: $kendo-h3-letter-spacing, margin: $kendo-h3-margin ), h4: ( font-size: $kendo-h4-font-size, font-family: $kendo-h4-font-family, line-height: $kendo-h4-line-height, font-weight: $kendo-h4-font-weight, letter-spacing: $kendo-h4-letter-spacing, margin: $kendo-h4-margin ), h5: ( font-size: $kendo-h5-font-size, font-family: $kendo-h5-font-family, line-height: $kendo-h5-line-height, font-weight: $kendo-h5-font-weight, letter-spacing: $kendo-h5-letter-spacing, margin: $kendo-h5-margin ), h6: ( font-size: $kendo-h6-font-size, font-family: $kendo-h6-font-family, line-height: $kendo-h6-line-height, font-weight: $kendo-h6-font-weight, letter-spacing: $kendo-h6-letter-spacing, margin: $kendo-h6-margin ) )(h1: (font-size: 32px, font-family: var(--kendo-font-family, inherit), line-height: 40px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h2: (font-size: 28px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h3: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 32px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h4: (font-size: 20px, font-family: var(--kendo-font-family, inherit), line-height: 28px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h5: (font-size: 18px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h6: (font-size: 16px, font-family: var(--kendo-font-family, inherit), line-height: 22px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)))Default: ( h1: ( font-size: $kendo-h1-font-size, font-family: $kendo-h1-font-family, line-height: $kendo-h1-line-height, font-weight: $kendo-h1-font-weight, letter-spacing: $kendo-h1-letter-spacing, margin: $kendo-h1-margin ), h2: ( font-size: $kendo-h2-font-size, font-family: $kendo-h2-font-family, line-height: $kendo-h2-line-height, font-weight: $kendo-h2-font-weight, letter-spacing: $kendo-h2-letter-spacing, margin: $kendo-h2-margin ), h3: ( font-size: $kendo-h3-font-size, font-family: $kendo-h3-font-family, line-height: $kendo-h3-line-height, font-weight: $kendo-h3-font-weight, letter-spacing: $kendo-h3-letter-spacing, margin: $kendo-h3-margin ), h4: ( font-size: $kendo-h4-font-size, font-family: $kendo-h4-font-family, line-height: $kendo-h4-line-height, font-weight: $kendo-h4-font-weight, letter-spacing: $kendo-h4-letter-spacing, margin: $kendo-h4-margin ), h5: ( font-size: $kendo-h5-font-size, font-family: $kendo-h5-font-family, line-height: $kendo-h5-line-height, font-weight: $kendo-h5-font-weight, letter-spacing: $kendo-h5-letter-spacing, margin: $kendo-h5-margin ), h6: ( font-size: $kendo-h6-font-size, font-family: $kendo-h6-font-family, line-height: $kendo-h6-line-height, font-weight: $kendo-h6-font-weight, letter-spacing: $kendo-h6-letter-spacing, margin: $kendo-h6-margin ) )Computed: (h1: (font-size: 32px, font-family: var(--kendo-font-family, inherit), line-height: 40px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h2: (font-size: 28px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h3: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 32px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h4: (font-size: 20px, font-family: var(--kendo-font-family, inherit), line-height: 28px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h5: (font-size: 18px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h6: (font-size: 16px, font-family: var(--kendo-font-family, inherit), line-height: 22px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)))
Description: The headings Map.
kendo-paragraph-margin0 0 var( --kendo-font-size, inherit)0 0 var(--kendo-font-size, inherit)Default: 0 0 var( --kendo-font-size, inherit)Computed: 0 0 var(--kendo-font-size, inherit)
Description: The margin of the paragraph.
kendo-paragraph-font-sizevar( --kendo-font-size, inherit)var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit)Computed: var(--kendo-font-size, inherit)
Description: The font size of the paragraph.
kendo-paragraph-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the paragraph.
kendo-paragraph-line-heightvar( --kendo-line-height, normal)var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal)Computed: var(--kendo-line-height, normal)
Description: The line height of the paragraph.
kendo-paragraph-font-weightvar( --kendo-font-weight, normal)var(--kendo-font-weight, normal)Default: var( --kendo-font-weight, normal)Computed: var(--kendo-font-weight, normal)
Description: The font weight of the paragraph.
kendo-paragraph-letter-spacingvar( --kendo-letter-spacing, normal)var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal)Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the paragraph.
kendo-code-font-sizevar( --kendo-font-size, inherit)var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit)Computed: var(--kendo-font-size, inherit)
Description: The font size of the code tag.
kendo-code-font-family$kendo-font-family-monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceDefault: $kendo-font-family-monospaceComputed: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description: The font family of the code tag.
kendo-code-line-heightvar( --kendo-line-height, normal)var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal)Computed: var(--kendo-line-height, normal)
Description: The line height of the code tag.
kendo-code-font-weightvar( --kendo-font-weight, normal)var(--kendo-font-weight, normal)Default: var( --kendo-font-weight, normal)Computed: var(--kendo-font-weight, normal)
Description: The font weight of the code tag.
kendo-code-letter-spacingvar( --kendo-letter-spacing, normal)var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal)Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the code tag.
kendo-code-padding-xk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal padding of the code tag.
kendo-code-padding-yk-spacing(0)var(--kendo-spacing-0, 0px)Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px)
Description: The vertical padding of the code tag.
kendo-pre-padding-xk-spacing(6)var(--kendo-spacing-6, 1.5rem)Default: k-spacing(6)Computed: var(--kendo-spacing-6, 1.5rem)
Description: The horizontal padding of the preformatted text.
kendo-pre-padding-yk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The vertical padding of the preformatted text.
kendo-code-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border of the code tag.
kendo-code-bgvar( --kendo-component-bg, initial)var(--kendo-component-bg, initial)Default: var( --kendo-component-bg, initial)Computed: var(--kendo-component-bg, initial)
Description: The background color of the code tag.
kendo-code-textvar( --kendo-component-text, initial)var(--kendo-component-text, initial)Default: var( --kendo-component-text, initial)Computed: var(--kendo-component-text, initial)
Description: The text color of the code tag.
kendo-code-bordervar( --kendo-component-border, initial)var(--kendo-component-border, initial)Default: var( --kendo-component-border, initial)Computed: var(--kendo-component-border, initial)
Description: The border color of the code tag.
kendo-display1-font-sizecalc( var( --kendo-font-size, .875rem ) * 9 )calc(var(--kendo-font-size, 0.875rem) * 9)Default: calc( var( --kendo-font-size, .875rem ) * 9 )Computed: calc(var(--kendo-font-size, 0.875rem) * 9)
Description: The font size of the largest display text.
kendo-display2-font-sizecalc( var( --kendo-font-size, .875rem ) * 6 )calc(var(--kendo-font-size, 0.875rem) * 6)Default: calc( var( --kendo-font-size, .875rem ) * 6 )Computed: calc(var(--kendo-font-size, 0.875rem) * 6)
Description: The font size of the second largest display text.
kendo-display3-font-size68px68pxDefault: 68pxComputed: 68px
Description: The font size of the third largest display text.
kendo-display4-font-sizecalc( var( --kendo-font-size, .875rem ) * 3 )calc(var(--kendo-font-size, 0.875rem) * 3)Default: calc( var( --kendo-font-size, .875rem ) * 3 )Computed: calc(var(--kendo-font-size, 0.875rem) * 3)
Description: The font size of the fourth largest display text.
kendo-display1-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the largest display text.
kendo-display2-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the second largest display text.
kendo-display3-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the third largest display text.
kendo-display4-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the fourth largest display text.
kendo-display1-line-height118px118pxDefault: 118pxComputed: 118px
Description: The line height of the largest display text.
kendo-display2-line-height94px94pxDefault: 94pxComputed: 94px
Description: The line height of the second largest display text.
kendo-display3-line-height76px76pxDefault: 76pxComputed: 76px
Description: The line height of the third largest display text.
kendo-display4-line-height52px52pxDefault: 52pxComputed: 52px
Description: The line height of the fourth largest display text.
kendo-display1-font-weightvar( --kendo-font-weight-semibold, normal )var(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )Computed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the largest display text.
kendo-display2-font-weightvar( --kendo-font-weight-semibold, normal )var(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )Computed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the second largest display text.
kendo-display3-font-weightvar( --kendo-font-weight-semibold, normal )var(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )Computed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the third largest display text.
kendo-display4-font-weightvar( --kendo-font-weight-semibold, normal )var(--kendo-font-weight-semibold, normal)Default: var( --kendo-font-weight-semibold, normal )Computed: var(--kendo-font-weight-semibold, normal)
Description: The font weight of the fourth largest display text.
kendo-display1-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the largest display text.
kendo-display2-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the second largest display text.
kendo-display3-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the third largest display text.
kendo-display4-letter-spacingvar( --kendo-letter-spacing, normal )var(--kendo-letter-spacing, normal)Default: var( --kendo-letter-spacing, normal )Computed: var(--kendo-letter-spacing, normal)
Description: The letter spacing of the fourth largest display text.
kendo-display( 1: ( font-size: $kendo-display1-font-size, font-family: $kendo-display1-font-family, line-height: $kendo-display1-line-height, font-weight: $kendo-display1-font-weight, letter-spacing: $kendo-display1-letter-spacing ), 2: ( font-size: $kendo-display2-font-size, font-family: $kendo-display2-font-family, line-height: $kendo-display2-line-height, font-weight: $kendo-display2-font-weight, letter-spacing: $kendo-display2-letter-spacing ), 3: ( font-size: $kendo-display3-font-size, font-family: $kendo-display3-font-family, line-height: $kendo-display3-line-height, font-weight: $kendo-display3-font-weight, letter-spacing: $kendo-display3-letter-spacing ), 4: ( font-size: $kendo-display4-font-size, font-family: $kendo-display4-font-family, line-height: $kendo-display4-line-height, font-weight: $kendo-display4-font-weight, letter-spacing: $kendo-display4-letter-spacing ) )(1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 9), font-family: var(--kendo-font-family, inherit), line-height: 118px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 6), font-family: var(--kendo-font-family, inherit), line-height: 94px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 3: (font-size: 68px, font-family: var(--kendo-font-family, inherit), line-height: 76px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 3), font-family: var(--kendo-font-family, inherit), line-height: 52px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)))Default: ( 1: ( font-size: $kendo-display1-font-size, font-family: $kendo-display1-font-family, line-height: $kendo-display1-line-height, font-weight: $kendo-display1-font-weight, letter-spacing: $kendo-display1-letter-spacing ), 2: ( font-size: $kendo-display2-font-size, font-family: $kendo-display2-font-family, line-height: $kendo-display2-line-height, font-weight: $kendo-display2-font-weight, letter-spacing: $kendo-display2-letter-spacing ), 3: ( font-size: $kendo-display3-font-size, font-family: $kendo-display3-font-family, line-height: $kendo-display3-line-height, font-weight: $kendo-display3-font-weight, letter-spacing: $kendo-display3-letter-spacing ), 4: ( font-size: $kendo-display4-font-size, font-family: $kendo-display4-font-family, line-height: $kendo-display4-line-height, font-weight: $kendo-display4-font-weight, letter-spacing: $kendo-display4-letter-spacing ) )Computed: (1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 9), font-family: var(--kendo-font-family, inherit), line-height: 118px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 6), font-family: var(--kendo-font-family, inherit), line-height: 94px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 3: (font-size: 68px, font-family: var(--kendo-font-family, inherit), line-height: 76px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 3), font-family: var(--kendo-font-family, inherit), line-height: 52px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)))
Description: The displays Map.
kendo-font-size-xxs0.5rem0.5remDefault: 0.5remComputed: 0.5rem
Description: The extra extra small font size across all components.
kendo-font-weight400400Default: 400Computed: 400
Description: The base font weight across all components.
kendo-font-weight-thin100100Default: 100Computed: 100
Description: The thin font weight across all components.
kendo-font-weight-extra-light200200Default: 200Computed: 200
Description: The extra light font weight across all components.
kendo-font-weight-light300300Default: 300Computed: 300
Description: The light font weight across all components.
kendo-font-weight-normal$kendo-font-weight400Default: $kendo-font-weightComputed: 400
Description: The normal font weight across all components.
kendo-font-weight-medium500500Default: 500Computed: 500
Description: The medium font weight across all components.
kendo-font-weight-semibold600600Default: 600Computed: 600
Description: The semibold font weight across all components.
kendo-font-weight-bold700700Default: 700Computed: 700
Description: The bold font weight across all components.
kendo-font-weight-extra-bold800800Default: 800Computed: 800
Description: The extra bold font weight across all components.
kendo-font-weight-black900900Default: 900Computed: 900
Description: The most pronounced font weight across all components.
kendo-letter-spacing-tightest-.15px-0.15pxDefault: -.15pxComputed: -0.15px
Description: The tightest letter spacing across all components.
kendo-letter-spacing-tighter-.10px-0.1pxDefault: -.10pxComputed: -0.1px
Description: Slightly looser than the tighter letter spacing across all components.
kendo-letter-spacing-tight-.5px-0.5pxDefault: -.5pxComputed: -0.5px
Description: Moderately tight letter spacing across all components.
kendo-letter-spacing-normal0px0pxDefault: 0pxComputed: 0px
Description: The normal letter spacing across all components.
kendo-letter-spacing-wide.5px0.5pxDefault: .5pxComputed: 0.5px
Description: Wide letter spacing across all components.
kendo-letter-spacing-wider.10px0.1pxDefault: .10pxComputed: 0.1px
Description: Slightly wider than the wide letter spacing across all components.
kendo-letter-spacing-widest.15px0.15pxDefault: .15pxComputed: 0.15px
Description: The widest letter spacing across all components.
kendo-font-family-sansArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansDefault: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansComputed: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans
Description: The sans font family across all components.
kendo-font-family-serif"Times New Roman", Georgia, Garamond, Palatino, Baskerville"Times New Roman", Georgia, Garamond, Palatino, BaskervilleDefault: "Times New Roman", Georgia, Garamond, Palatino, BaskervilleComputed: "Times New Roman", Georgia, Garamond, Palatino, Baskerville
Description: The serif font family across all components.
kendo-font-family-sans-serifsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"Default: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"Computed: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description: The sans-serif font family across all components.
kendo-font-family-monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceDefault: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceComputed: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description: The monospace font family across all components.
kendo-font-weightsk-map-merge( $_default-font-weights, $kendo-font-weights )(thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)Default: k-map-merge( $_default-font-weights, $kendo-font-weights )Computed: (thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)
Description: The font weights map
kendo-letter-spacingsk-map-merge( $_default-letter-spacings, $kendo-letter-spacings )(tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px)Default: k-map-merge( $_default-letter-spacings, $kendo-letter-spacings )Computed: (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px)
Description: The letter spacings map
kendo-font-familiesk-map-merge( $_default-font-families, $kendo-font-families )(sans: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans), serif: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville), sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace))Default: k-map-merge( $_default-font-families, $kendo-font-families )Computed: (sans: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans), serif: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville), sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace))
Description: The font families map

Border Radii Variables

The following table represents the $kendo-border-radii Sass map of the Telerik and Kendo UI Fluent theme:

StepValueExample
none0px
xs1px
sm0.125rem
md0.25rem
lg0.5rem
xl0.75rem
xxl1rem
xxxl1.25rem

Elevation Variables

The following table represents the $kendo-elevation Sass map of the Telerik and Kendo UI Fluent theme:

KeyValue
Variable: kendo-elevation
1(0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13))
2(0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13))
3(0 0.9px 2.7px rgba(0, 0, 0, 0.1), 0 4.8px 10.8px rgba(0, 0, 0, 0.13))
4(0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13))
5(0 1.8px 5.4px rgba(0, 0, 0, 0.1), 0 9.6px 21.6px rgba(0, 0, 0, 0.13))
6(0 2.4px 7.2px rgba(0, 0, 0, 0.18), 0 12.8px 28.8px rgba(0, 0, 0, 0.22))
7(0 3.2px 10.8px rgba(0, 0, 0, 0.18), 0 19.2px 43.2px rgba(0, 0, 0, 0.22))
8(0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22))
9(0 6.4px 18px rgba(0, 0, 0, 0.18), 0 32px 72px rgba(0, 0, 0, 0.22))
Description: The global default Elevation map.