Fluent

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

Variables

All Telerik and Kendo UI themes rely on Sass variables to store styling information. For more detailed information about Sass variables, take a look at the official Sass docs.

The Telerik and Kendo UI Fluent theme employs multiple variables that you can use to customize the theme.

For consistency, the name of each variable follows a pattern. All variables in the Telerik and Kendo UI themes begin with the kendo- prefix. Depending on its purpose, the variable name ends with the following keywords: colors, spacing, bg, font-size, hover, focus, selected, disabled, and so on.

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-border-radii$kendo-elevation.
  • 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 #fafafa
on-app-surface #242424
subtle #707070
surface #ffffff
surface-alt #ffffff
border rgba(36, 36, 36, 0.72)
border-alt #000000
base-subtle #f5f5f5
base-subtle-hover #ebebeb
base-subtle-active #e0e0e0
base #ffffff
base-hover #f5f5f5
base-active #ebebeb
base-emphasis #d1d1d1
base-on-subtle #242424
on-base #242424
base-on-surface #242424
primary-subtle #ebf3fc
primary-subtle-hover #cfe4fa
primary-subtle-active #96c6fa
primary #0f6cbd
primary-hover #115ea3
primary-active #0f548c
primary-emphasis #abd1f8
primary-on-subtle #0a2e4a
on-primary #ffffff
primary-on-surface #0f6cbd
secondary-subtle #f0f0f0
secondary-subtle-hover #fafafa
secondary-subtle-active #ffffff
secondary #ebebeb
secondary-hover #f5f5f5
secondary-active #fafafa
secondary-emphasis #e0e0e0
secondary-on-subtle #616161
on-secondary #616161
secondary-on-surface #616161
tertiary-subtle #fdf5fc
tertiary-subtle-hover #f5daf2
tertiary-subtle-active #edbbe7
tertiary #c239b3
tertiary-hover #af33a1
tertiary-active #962c8a
tertiary-emphasis #edbbe7
tertiary-on-subtle #af33a1
on-tertiary #ffffff
tertiary-on-surface #c239b3
info-subtle #f6fafe
info-subtle-hover #dcedfa
info-subtle-active #bfddf5
info #3a96dd
info-hover #3991d5
info-active #4fa1e1
info-emphasis #bfddf5
info-on-subtle #20547c
on-info #242424
info-on-surface #3487c7
success-subtle #f1faf1
success-subtle-hover #c9eac9
success-subtle-active #9fd89f
success #107c10
success-hover #0e700e
success-active #0c5e0c
success-emphasis #9fd89f
success-on-subtle #0e700e
on-success #ffffff
success-on-surface #107c10
warning-subtle #fff9f5
warning-subtle-hover #fee5d7
warning-subtle-active #fdcfb4
warning #f7630c
warning-hover #de590b
warning-active #bc4b09
warning-emphasis #fdcfb4
warning-on-subtle #8a3707
on-warning #242424
warning-on-surface #8a3707
error-subtle #fdf3f4
error-subtle-hover #f6d1d5
error-subtle-active #eeacb2
error #c50f1f
error-hover #b10e1c
error-active #960b18
error-emphasis #eeacb2
error-on-subtle #b10e1c
on-error #ffffff
error-on-surface #c50f1f
light-subtle #ffffff
light-subtle-hover #f5f5f5
light-subtle-active #ebebeb
light #ebebeb
light-hover #f5f5f5
light-active #f0f0f0
light-emphasis #e0e0e0
light-on-subtle #616161
on-light #242424
light-on-surface #ffffff
dark-subtle #000000
dark-subtle-hover #242424
dark-subtle-active #333333
dark #242424
dark-hover #424242
dark-active #333333
dark-emphasis #616161
dark-on-subtle #ffffff
on-dark #ffffff
dark-on-surface #616161
inverse-subtle #000000
inverse-subtle-hover #242424
inverse-subtle-active #333333
inverse #242424
inverse-hover #424242
inverse-active #333333
inverse-emphasis #616161
inverse-on-subtle #ffffff
on-inverse #ffffff
inverse-on-surface #616161
series-a #2aa0a4
series-a-bold #20787b
series-a-bolder #155052
series-a-subtle #5fb8bb
series-a-subtler #94cfd1
series-b #ae8c00
series-b-bold #826900
series-b-bolder #574600
series-b-subtle #c2a940
series-b-subtler #d7c580
series-c #e3008c
series-c-bold #aa0069
series-c-bolder #720046
series-c-subtle #ea40a9
series-c-subtler #f180c5
series-d #13a10e
series-d-bold #0e790b
series-d-bolder #0a5107
series-d-subtle #4eb94a
series-d-subtler #89d086
series-e #637cef
series-e-bold #4a5db3
series-e-bolder #323e78
series-e-subtle #c3b1db
series-e-subtler #a58bca
series-f #CA5010
series-f-bold #973C0C
series-f-bolder #652808
series-f-subtle #D77C4C
series-f-subtler #E5A787
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:

StepCSS VariableValueExample
0--kendo-spacing-00px
1px--kendo-spacing-1px1px
0.5--kendo-spacing-0.50.125rem
1--kendo-spacing-10.25rem
1.5--kendo-spacing-1.50.375rem
2--kendo-spacing-20.5rem
2.5--kendo-spacing-2.50.625rem
3--kendo-spacing-30.75rem
3.5--kendo-spacing-3.50.875rem
4--kendo-spacing-41rem
4.5--kendo-spacing-4.51.125rem
5--kendo-spacing-51.25rem
5.5--kendo-spacing-5.51.375rem
6--kendo-spacing-61.5rem
6.5--kendo-spacing-6.51.625rem
7--kendo-spacing-71.75rem
7.5--kendo-spacing-7.51.875rem
8--kendo-spacing-82rem
9--kendo-spacing-92.25rem
10--kendo-spacing-102.5rem
11--kendo-spacing-112.75rem
12--kendo-spacing-123rem
13--kendo-spacing-133.25rem
14--kendo-spacing-143.5rem
15--kendo-spacing-153.75rem
16--kendo-spacing-164rem
17--kendo-spacing-174.25rem
18--kendo-spacing-184.5rem
19--kendo-spacing-194.75rem
20--kendo-spacing-205rem
21--kendo-spacing-215.25rem
22--kendo-spacing-225.5rem
23--kendo-spacing-235.75rem
24--kendo-spacing-246rem
25--kendo-spacing-257rem
26--kendo-spacing-268rem
27--kendo-spacing-279rem
28--kendo-spacing-2810rem
29--kendo-spacing-2911rem
30--kendo-spacing-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.331.5Default: 1.33Computed: 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-font-weight-light300300Default: 300Computed: 300
Description: The light font weight across all components.
kendo-font-weight-normal400400Default: 400Computed: 400
Description: The base 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-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-serif)Default: "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
xs: 0.625rem
sm: 0.75rem
md: 0.875rem
lg: 1rem
xl: 1.25rem
Computed: (xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)
Description: The font sizes map
kendo-line-heights
xs: 1
sm: 1.25
md: 1.4285714285714286
lg: 1.33
Computed: (xs: 1, sm: 1.25, md: 1.4285714286, lg: 1.33)
Description: The line heights 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-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 Sans(Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans)Default: 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, Baskerville)Default: "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", monospace(SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace)Default: 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-weights
thin: 100
extra-light: 200
light: 300
normal: 400
medium: 500
semibold: 600
bold: 700
extra-bold: 800
black: 900
Computed: (thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700, extra-bold: 800, "black": 900)
Description: The font weights map
kendo-letter-spacings
tightest: -0.15px
tighter: -0.1px
tight: -0.5px
normal: 0px
wide: 0.5px
wider: 0.1px
widest: 0.15px
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-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)
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:

StepCSS VariableValueExample
none--kendo-border-radius-none0px
xs--kendo-border-radius-xs1px
sm--kendo-border-radius-sm0.125rem
md--kendo-border-radius-md0.25rem
lg--kendo-border-radius-lg0.375rem
xl--kendo-border-radius-xl0.5rem
xxl--kendo-border-radius-xxl0.75rem
xxxl--kendo-border-radius-xxxl1rem
full--kendo-border-radius-full9999px

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 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))
3(0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))
4(0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))
5(0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))
6(0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))
7(0 20px 38px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))
8(0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))
9(0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))
Description: The global default Elevation map.
Feedback