@progress/kendo-theme-meridian 14.0.0-dev.1

package/scss/treeview/_variables.scss

@@ -0,0 +1,227 @@
+@use "../core/_index.scss" as *;
+
+// TreeView
+
+/// The default size of the TreeView.
+/// @group treeview
+/// @role default
+$kendo-treeview-default-size: "md" !default;
+/// The gap of the TreeView.
+/// @group treeview
+$kendo-treeview-gap: k-spacing(0) !default;
+/// The border radius of the TreeView.
+/// @group treeview
+$kendo-treeview-border-radius: k-border-radius(sm) !default;
+
+/// The font family of the TreeView.
+/// @group treeview
+$kendo-treeview-font-family: var( --kendo-font-family ) !default;
+/// The font size of the TreeView.
+/// @group treeview
+$kendo-treeview-font-size: null !default;
+/// The font size of the small TreeView.
+/// @group treeview
+$kendo-treeview-sm-font-size: var( --kendo-font-size-sm ) !default;
+/// The font size of the medium TreeView.
+/// @group treeview
+$kendo-treeview-md-font-size: var( --kendo-font-size ) !default;
+/// The font size of the large TreeView.
+/// @group treeview
+$kendo-treeview-lg-font-size: var( --kendo-font-size-lg ) !default;
+/// The line height of the TreeView.
+/// @group treeview
+$kendo-treeview-line-height: null !default;
+/// The line height of the small TreeView.
+/// @group treeview
+$kendo-treeview-sm-line-height: var( --kendo-line-height-sm ) !default;
+/// The line height of the medium TreeView.
+/// @group treeview
+$kendo-treeview-md-line-height: var( --kendo-line-height ) !default;
+/// The line height of the large TreeView.
+/// @group treeview
+$kendo-treeview-lg-line-height: var( --kendo-line-height-lg ) !default;
+/// The indentation of child groups in the TreeView.
+/// @group treeview
+$kendo-treeview-indent: 24px !default;
+
+/// The horizontal padding of the small TreeView items.
+/// @group treeview
+$kendo-treeview-sm-item-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the medium TreeView items.
+/// @group treeview
+$kendo-treeview-md-item-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the large TreeView items.
+/// @group treeview
+$kendo-treeview-lg-item-padding-x: k-spacing(2) !default;
+/// The vertical padding of the small TreeView items.
+/// @group treeview
+$kendo-treeview-sm-item-padding-y: k-spacing(1) !default;
+/// The vertical padding of the medium TreeView items.
+/// @group treeview
+$kendo-treeview-md-item-padding-y: k-spacing(1.5) !default;
+/// The vertical padding of the large TreeView items.
+/// @group treeview
+$kendo-treeview-lg-item-padding-y: k-spacing(2) !default;
+/// The border width of the TreeView items.
+/// @group treeview
+$kendo-treeview-item-border-width: 0px !default;
+/// The border radius of the TreeView items.
+/// @group treeview
+$kendo-treeview-item-border-radius: k-border-radius(sm) !default;
+
+/// The horizontal padding of the checkbox in the small TreeView.
+/// @group treeview
+$kendo-treeview-sm-checkbox-padding-x: k-spacing(0) !default;
+/// The horizontal padding of the checkbox in the medium TreeView.
+/// @group treeview
+$kendo-treeview-md-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !default;
+/// The horizontal padding of the checkbox in the large TreeView.
+/// @group treeview
+$kendo-treeview-lg-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !default;
+/// The vertical padding of the checkbox in the small TreeView.
+/// @group treeview
+$kendo-treeview-sm-checkbox-padding-y: k-spacing(1) !default;
+/// The vertical padding of the checkbox in the medium TreeView.
+/// @group treeview
+$kendo-treeview-md-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y !default;
+/// The vertical padding of the checkbox in the large TreeView.
+/// @group treeview
+$kendo-treeview-lg-checkbox-padding-y: null !default;
+
+
+/// The background color of the TreeView.
+/// @group treeview
+$kendo-treeview-bg: null !default;
+/// The text color of the TreeView.
+/// @group treeview
+$kendo-treeview-text: k-color(on-app-surface) !default;
+/// The border color of the TreeView.
+/// @group treeview
+$kendo-treeview-border: null !default;
+
+/// The background color of hovered TreeView items.
+/// @group treeview
+$kendo-treeview-item-hover-bg: k-color(primary-subtle-hover) !default;
+/// The text color of hovered TreeView items.
+/// @group treeview
+$kendo-treeview-item-hover-text: k-color(primary-on-subtle) !default;
+/// The border color of hovered TreeView items.
+/// @group treeview
+$kendo-treeview-item-hover-border: null !default;
+/// The background gradient of hovered TreeView items.
+/// @group treeview
+$kendo-treeview-item-hover-gradient: null !default;
+
+/// The background color of selected TreeView items.
+/// @group treeview
+$kendo-treeview-item-selected-bg: k-color(primary-subtle-active) !default;
+/// The text color of selected TreeView items.
+/// @group treeview
+$kendo-treeview-item-selected-text: k-color(primary-on-subtle) !default;
+/// The border color of selected TreeView items.
+/// @group treeview
+$kendo-treeview-item-selected-border: null !default;
+/// The background gradient of selected TreeView items.
+/// @group treeview
+$kendo-treeview-item-selected-gradient: null !default;
+
+/// The background color of selected and hovered TreeView items.
+/// @group treeview
+$kendo-treeview-item-selected-hover-bg: color-mix(in srgb, k-color(primary-subtle-active), k-color(primary-emphasis) 50%) !default;
+
+/// The box shadow of focused TreeView items.
+/// @group treeview
+$kendo-treeview-item-focus-shadow: null !default;
+/// The outline color of the focused TreeView items.
+/// @group treeview
+$kendo-treeview-item-focus-outline-color: k-color(subtle) !default;
+/// The outline offset of the focused TreeView items.
+/// @group treeview
+$kendo-treeview-item-focus-outline-offset: 1px !default;
+
+/// The background color of the Load More button in the TreeView
+/// @group treeview
+$kendo-treeview-loadmore-bg: transparent !default;
+/// The text color of the Load More button in the TreeView
+/// @group treeview
+$kendo-treeview-loadmore-text: k-color(primary) !default;
+/// The border color of the Load More button in the TreeView
+/// @group treeview
+$kendo-treeview-loadmore-border: null !default;
+
+/// The background color of the hovered Load More button in the TreeView
+/// @group treeview
+$kendo-treeview-loadmore-hover-bg: transparent !default;
+/// The text color of the hovered Load More button in the TreeView.
+/// @group treeview
+$kendo-treeview-loadmore-hover-text: k-color(primary-hover) !default;
+/// The border color of the hovered Load More button in the TreeView.
+/// @group treeview
+$kendo-treeview-loadmore-hover-border: null !default;
+
+/// The background color of the focused Load More button in the TreeView.
+/// @group treeview
+$kendo-treeview-loadmore-focus-bg: transparent !default;
+/// The text color of the focused Load More button in the TreeView.
+/// @group treeview
+$kendo-treeview-loadmore-focus-text: k-color(primary-hover) !default;
+/// The border color of the focused Load More button in the TreeView.
+/// @group treeview
+$kendo-treeview-loadmore-focus-border: null !default;
+/// The box shadow of the focused Load More button in the TreeView.
+/// @group treeview
+$kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;
+
+
+@forward "@progress/kendo-theme-core/scss/components/treeview/_variables.scss" with (
+    $kendo-treeview-default-size: $kendo-treeview-default-size,
+    $kendo-treeview-gap: $kendo-treeview-gap,
+    $kendo-treeview-border-radius: $kendo-treeview-border-radius,
+    $kendo-treeview-font-family: $kendo-treeview-font-family,
+    $kendo-treeview-font-size: $kendo-treeview-font-size,
+    $kendo-treeview-sm-font-size: $kendo-treeview-sm-font-size,
+    $kendo-treeview-md-font-size: $kendo-treeview-md-font-size,
+    $kendo-treeview-lg-font-size: $kendo-treeview-lg-font-size,
+    $kendo-treeview-line-height: $kendo-treeview-line-height,
+    $kendo-treeview-sm-line-height: $kendo-treeview-sm-line-height,
+    $kendo-treeview-md-line-height: $kendo-treeview-md-line-height,
+    $kendo-treeview-lg-line-height: $kendo-treeview-lg-line-height,
+    $kendo-treeview-indent: $kendo-treeview-indent,
+    $kendo-treeview-sm-item-padding-x: $kendo-treeview-sm-item-padding-x,
+    $kendo-treeview-md-item-padding-x: $kendo-treeview-md-item-padding-x,
+    $kendo-treeview-lg-item-padding-x: $kendo-treeview-lg-item-padding-x,
+    $kendo-treeview-sm-item-padding-y: $kendo-treeview-sm-item-padding-y,
+    $kendo-treeview-md-item-padding-y: $kendo-treeview-md-item-padding-y,
+    $kendo-treeview-lg-item-padding-y: $kendo-treeview-lg-item-padding-y,
+    $kendo-treeview-item-border-width: $kendo-treeview-item-border-width,
+    $kendo-treeview-item-border-radius: $kendo-treeview-item-border-radius,
+    $kendo-treeview-sm-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,
+    $kendo-treeview-md-checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,
+    $kendo-treeview-lg-checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,
+    $kendo-treeview-sm-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y,
+    $kendo-treeview-md-checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y,
+    $kendo-treeview-lg-checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y,
+    $kendo-treeview-bg: $kendo-treeview-bg,
+    $kendo-treeview-text: $kendo-treeview-text,
+    $kendo-treeview-border: $kendo-treeview-border,
+    $kendo-treeview-item-hover-bg: $kendo-treeview-item-hover-bg,
+    $kendo-treeview-item-hover-text: $kendo-treeview-item-hover-text,
+    $kendo-treeview-item-hover-border: $kendo-treeview-item-hover-border,
+    $kendo-treeview-item-hover-gradient: $kendo-treeview-item-hover-gradient,
+    $kendo-treeview-item-selected-bg: $kendo-treeview-item-selected-bg,
+    $kendo-treeview-item-selected-text: $kendo-treeview-item-selected-text,
+    $kendo-treeview-item-selected-border: $kendo-treeview-item-selected-border,
+    $kendo-treeview-item-selected-gradient: $kendo-treeview-item-selected-gradient,
+    $kendo-treeview-item-selected-hover-bg: $kendo-treeview-item-selected-hover-bg,
+    $kendo-treeview-item-focus-shadow: $kendo-treeview-item-focus-shadow,
+    $kendo-treeview-loadmore-bg: $kendo-treeview-loadmore-bg,
+    $kendo-treeview-loadmore-text: $kendo-treeview-loadmore-text,
+    $kendo-treeview-loadmore-border: $kendo-treeview-loadmore-border,
+    $kendo-treeview-loadmore-hover-bg: $kendo-treeview-loadmore-hover-bg,
+    $kendo-treeview-loadmore-hover-text: $kendo-treeview-loadmore-hover-text,
+    $kendo-treeview-loadmore-hover-border: $kendo-treeview-loadmore-hover-border,
+    $kendo-treeview-loadmore-focus-bg: $kendo-treeview-loadmore-focus-bg,
+    $kendo-treeview-loadmore-focus-text: $kendo-treeview-loadmore-focus-text,
+    $kendo-treeview-loadmore-focus-border: $kendo-treeview-loadmore-focus-border,
+    $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-loadmore-focus-shadow
+);

package/scss/typography/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-typography--styles() {
+    @include import-once( "typography" ) {
+        @include core-styles();
+        @include kendo-typography--layout();
+        @include kendo-typography--theme();
+        @include kendo-utils--typography();
+    }
+}

package/scss/typography/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/typography/_layout.scss" as *;
+
+
+@mixin kendo-typography--layout() {
+    @include kendo-typography--layout-base();
+}

package/scss/typography/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/typography/_theme.scss" as *;
+
+
+@mixin kendo-typography--theme() {
+    @include kendo-typography--theme-base();
+}

package/scss/typography/_variables.scss

@@ -0,0 +1,419 @@
+@use "../core/_index.scss" as *;
+// Typography
+
+
+// Headings
+
+/// The font size of the highest level heading.
+/// @group typography-component
+$kendo-h1-font-size: calc( var( --kendo-font-size ) * 4 ) !default;
+/// The font size of the second highest level heading.
+/// @group typography-component
+$kendo-h2-font-size: calc( var( --kendo-font-size ) * 3.25 ) !default;
+/// The font size of the third highest level heading.
+/// @group typography-component
+$kendo-h3-font-size: calc( var( --kendo-font-size ) * 2.5 ) !default;
+/// The font size of the fourth highest level heading.
+/// @group typography-component
+$kendo-h4-font-size: calc( var( --kendo-font-size ) * 1.75 ) !default;
+/// The font size of the fifth highest level heading.
+/// @group typography-component
+$kendo-h5-font-size: calc( var( --kendo-font-size ) * 1.375 ) !default;
+/// The font size of the sixth highest level heading.
+/// @group typography-component
+$kendo-h6-font-size: calc( var( --kendo-font-size ) * 1.125 ) !default;
+
+/// The font family of the highest level heading.
+/// @group typography-component
+$kendo-h1-font-family: var( --kendo-font-family ) !default;
+/// The font family of the second highest level heading.
+/// @group typography-component
+$kendo-h2-font-family: var( --kendo-font-family ) !default;
+/// The font family of the third highest level heading.
+/// @group typography-component
+$kendo-h3-font-family: var( --kendo-font-family ) !default;
+/// The font family of the fourth highest level heading.
+/// @group typography-component
+$kendo-h4-font-family: var( --kendo-font-family ) !default;
+/// The font family of the fifth highest level heading.
+/// @group typography-component
+$kendo-h5-font-family: var( --kendo-font-family ) !default;
+/// The font family of the sixth highest level heading.
+/// @group typography-component
+$kendo-h6-font-family: var( --kendo-font-family ) !default;
+
+/// The line height of the highest level heading.
+/// @group typography-component
+$kendo-h1-line-height: 80px !default;
+/// The line height of the second highest level heading.
+/// @group typography-component
+$kendo-h2-line-height: 62px !default;
+/// The line height of the third highest level heading.
+/// @group typography-component
+$kendo-h3-line-height: 48px !default;
+/// The line height of the fourth highest level heading.
+/// @group typography-component
+$kendo-h4-line-height: 34px !default;
+/// The line height of the fifth highest level heading.
+/// @group typography-component
+$kendo-h5-line-height: 36px !default;
+/// The line height of the sixth highest level heading.
+/// @group typography-component
+$kendo-h6-line-height: 22px !default;
+
+/// The font weight of the highest level heading.
+/// @group typography-component
+$kendo-h1-font-weight: var( --kendo-font-weight-semibold ) !default;
+/// The font weight of the second highest level heading.
+/// @group typography-component
+$kendo-h2-font-weight: var( --kendo-font-weight-semibold ) !default;
+/// The font weight of the third highest level heading.
+/// @group typography-component
+$kendo-h3-font-weight: var( --kendo-font-weight-semibold ) !default;
+/// The font weight of the fourth highest level heading.
+/// @group typography-component
+$kendo-h4-font-weight: var( --kendo-font-weight-semibold ) !default;
+/// The font weight of the fifth highest level heading.
+/// @group typography-component
+$kendo-h5-font-weight: var( --kendo-font-weight-semibold ) !default;
+/// The font weight of the sixth highest level heading.
+/// @group typography-component
+$kendo-h6-font-weight: var( --kendo-font-weight-semibold ) !default;
+
+/// The letter spacing of the highest level heading.
+/// @group typography-component
+$kendo-h1-letter-spacing: null !default;
+/// The letter spacing of the second highest level heading.
+/// @group typography-component
+$kendo-h2-letter-spacing: null !default;
+/// The letter spacing of the third highest level heading.
+/// @group typography-component
+$kendo-h3-letter-spacing: null !default;
+/// The letter spacing of the fourth highest level heading.
+/// @group typography-component
+$kendo-h4-letter-spacing: null !default;
+/// The letter spacing of the fifth highest level heading.
+/// @group typography-component
+$kendo-h5-letter-spacing: null !default;
+/// The letter spacing of the sixth highest level heading.
+/// @group typography-component
+$kendo-h6-letter-spacing: null !default;
+
+/// The margin of the highest level heading.
+/// @group typography-component
+$kendo-h1-margin: 0 0 var( --kendo-font-size ) !default;
+/// The margin of the second highest level heading.
+/// @group typography-component
+$kendo-h2-margin: 0 0 var( --kendo-font-size ) !default;
+/// The margin of the third highest level heading.
+/// @group typography-component
+$kendo-h3-margin: 0 0 var( --kendo-font-size ) !default;
+/// The margin of the fourth highest level heading.
+/// @group typography-component
+$kendo-h4-margin: 0 0 var( --kendo-font-size ) !default;
+/// The margin of the fifth highest level heading.
+/// @group typography-component
+$kendo-h5-margin: 0 0 var( --kendo-font-size ) !default;
+/// The margin of the sixth highest level heading.
+/// @group typography-component
+$kendo-h6-margin: 0 0 var( --kendo-font-size ) !default;
+
+/// The headings Map.
+/// @group typography-component
+$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
+    )
+) !default;
+
+
+// Paragraph
+
+/// The margin of the paragraph.
+/// @group typography-component
+$kendo-paragraph-margin: 0 0 var( --kendo-font-size ) !default;
+/// The font size of the paragraph.
+/// @group typography-component
+$kendo-paragraph-font-size: var( --kendo-font-size ) !default;
+/// The font family of the paragraph.
+/// @group typography-component
+$kendo-paragraph-font-family: var( --kendo-font-family ) !default;
+/// The line height of the paragraph.
+/// @group typography-component
+$kendo-paragraph-line-height: var( --kendo-line-height ) !default;
+/// The font weight of the paragraph.
+/// @group typography-component
+$kendo-paragraph-font-weight: var( --kendo-font-weight-normal ) !default;
+/// The letter spacing of the paragraph.
+/// @group typography-component
+$kendo-paragraph-letter-spacing: null !default;
+
+
+// Code
+
+/// The font size of the code tag.
+/// @group typography-component
+$kendo-code-font-size: var( --kendo-font-size ) !default;
+/// The font family of the code tag.
+/// @group typography-component
+$kendo-code-font-family: var( --kendo-font-family-monospace ) !default;
+/// The line height of the code tag.
+/// @group typography-component
+$kendo-code-line-height: 20px !default;
+/// The font weight of the code tag.
+/// @group typography-component
+$kendo-code-font-weight: var( --kendo-font-weight-normal ) !default;
+/// The letter spacing of the code tag.
+/// @group typography-component
+$kendo-code-letter-spacing: null !default;
+
+/// The horizontal padding of the code tag.
+/// @group typography-component
+$kendo-code-padding-x: k-spacing(1) !default;
+/// The vertical padding of the code tag.
+/// @group typography-component
+$kendo-code-padding-y: k-spacing(0) !default;
+/// The horizontal padding of the preformatted text.
+/// @group typography-component
+$kendo-pre-padding-x: k-spacing(6) !default;
+/// The vertical padding of the preformatted text.
+/// @group typography-component
+$kendo-pre-padding-y: k-spacing(4) !default;
+/// The width of the border of the code tag.
+/// @group typography-component
+$kendo-code-border-width: 1px !default;
+
+/// The background color of the code tag.
+/// @group typography-component
+$kendo-code-bg: k-color(surface) !default;
+/// The color of the code tag.
+/// @group typography-component
+$kendo-code-text: k-color(on-app-surface) !default;
+/// The border color of the code tag.
+/// @group typography-component
+$kendo-code-border: k-color(border) !default;
+
+// Display
+
+/// The font size of the largest display text.
+/// @group typography-component
+$kendo-display1-font-size: calc( var( --kendo-font-size ) * 8) !default;
+/// The font size of the second largest display text.
+/// @group typography-component
+$kendo-display2-font-size: calc( var( --kendo-font-size ) * 7) !default;
+/// The font size of the third largest display text.
+/// @group typography-component
+$kendo-display3-font-size: calc( var( --kendo-font-size ) * 6) !default;
+/// The font size of the fourth largest display text.
+/// @group typography-component
+$kendo-display4-font-size: calc( var( --kendo-font-size ) * 5) !default;
+
+/// The font family of the largest display text.
+/// @group typography-component
+$kendo-display1-font-family: var( --kendo-font-family ) !default;
+/// The font family of the second largest display text.
+/// @group typography-component
+$kendo-display2-font-family: var( --kendo-font-family ) !default;
+/// The font family of the third largest display text.
+/// @group typography-component
+$kendo-display3-font-family: var( --kendo-font-family ) !default;
+/// The font family of the fourth largest display text.
+/// @group typography-component
+$kendo-display4-font-family: var( --kendo-font-family ) !default;
+
+/// The line height of the largest display text.
+/// @group typography-component
+$kendo-display1-line-height: 1.2 !default;
+/// The line height of the second largest display text.
+/// @group typography-component
+$kendo-display2-line-height: 1.2 !default;
+/// The line height of the third largest display text.
+/// @group typography-component
+$kendo-display3-line-height: 1.25 !default;
+/// The line height of the fourth largest display text.
+/// @group typography-component
+$kendo-display4-line-height: 1.2 !default;
+
+/// The font weight of the largest display text.
+/// @group typography-component
+$kendo-display1-font-weight: var( --kendo-font-weight-light ) !default;
+/// The font weight of the second largest display text.
+/// @group typography-component
+$kendo-display2-font-weight: var( --kendo-font-weight-light ) !default;
+/// The font weight of the third largest display text.
+/// @group typography-component
+$kendo-display3-font-weight: var( --kendo-font-weight-light ) !default;
+/// The font weight of the fourth largest display text.
+/// @group typography-component
+$kendo-display4-font-weight: var( --kendo-font-weight-light ) !default;
+
+/// The letter spacing of the largest display text.
+/// @group typography-component
+$kendo-display1-letter-spacing: null !default;
+/// The letter spacing of the second largest display text.
+/// @group typography-component
+$kendo-display2-letter-spacing: null !default;
+/// The letter spacing of the third largest display text.
+/// @group typography-component
+$kendo-display3-letter-spacing: null !default;
+/// The letter spacing of the fourth largest display text.
+/// @group typography-component
+$kendo-display4-letter-spacing: null !default;
+
+/// The displays Map.
+/// @group typography-component
+$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
+    )
+) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/typography/_variables.scss" with (
+    $kendo-h1-font-size: $kendo-h1-font-size,
+    $kendo-h2-font-size: $kendo-h2-font-size,
+    $kendo-h3-font-size: $kendo-h3-font-size,
+    $kendo-h4-font-size: $kendo-h4-font-size,
+    $kendo-h5-font-size: $kendo-h5-font-size,
+    $kendo-h6-font-size: $kendo-h6-font-size,
+    $kendo-h1-font-family: $kendo-h1-font-family,
+    $kendo-h2-font-family: $kendo-h2-font-family,
+    $kendo-h3-font-family: $kendo-h3-font-family,
+    $kendo-h4-font-family: $kendo-h4-font-family,
+    $kendo-h5-font-family: $kendo-h5-font-family,
+    $kendo-h6-font-family: $kendo-h6-font-family,
+    $kendo-h1-line-height: $kendo-h1-line-height,
+    $kendo-h2-line-height: $kendo-h2-line-height,
+    $kendo-h3-line-height: $kendo-h3-line-height,
+    $kendo-h4-line-height: $kendo-h4-line-height,
+    $kendo-h5-line-height: $kendo-h5-line-height,
+    $kendo-h6-line-height: $kendo-h6-line-height,
+    $kendo-h1-font-weight: $kendo-h1-font-weight,
+    $kendo-h2-font-weight: $kendo-h2-font-weight,
+    $kendo-h3-font-weight: $kendo-h3-font-weight,
+    $kendo-h4-font-weight: $kendo-h4-font-weight,
+    $kendo-h5-font-weight: $kendo-h5-font-weight,
+    $kendo-h6-font-weight: $kendo-h6-font-weight,
+    $kendo-h1-letter-spacing: $kendo-h1-letter-spacing,
+    $kendo-h2-letter-spacing: $kendo-h2-letter-spacing,
+    $kendo-h3-letter-spacing: $kendo-h3-letter-spacing,
+    $kendo-h4-letter-spacing: $kendo-h4-letter-spacing,
+    $kendo-h5-letter-spacing: $kendo-h5-letter-spacing,
+    $kendo-h6-letter-spacing: $kendo-h6-letter-spacing,
+    $kendo-h1-margin: $kendo-h1-margin,
+    $kendo-h2-margin: $kendo-h2-margin,
+    $kendo-h3-margin: $kendo-h3-margin,
+    $kendo-h4-margin: $kendo-h4-margin,
+    $kendo-h5-margin: $kendo-h5-margin,
+    $kendo-h6-margin: $kendo-h6-margin,
+    $kendo-headings: $kendo-headings,
+    $kendo-paragraph-margin: $kendo-paragraph-margin,
+    $kendo-paragraph-font-size: $kendo-paragraph-font-size,
+    $kendo-paragraph-font-family: $kendo-paragraph-font-family,
+    $kendo-paragraph-line-height: $kendo-paragraph-line-height,
+    $kendo-paragraph-font-weight: $kendo-paragraph-font-weight,
+    $kendo-paragraph-letter-spacing: $kendo-paragraph-letter-spacing,
+    $kendo-code-font-size: $kendo-code-font-size,
+    $kendo-code-font-family: $kendo-code-font-family,
+    $kendo-code-line-height: $kendo-code-line-height,
+    $kendo-code-font-weight: $kendo-code-font-weight,
+    $kendo-code-letter-spacing: $kendo-code-letter-spacing,
+    $kendo-code-padding-x: $kendo-code-padding-x,
+    $kendo-code-padding-y: $kendo-code-padding-y,
+    $kendo-pre-padding-x: $kendo-pre-padding-x,
+    $kendo-pre-padding-y: $kendo-pre-padding-y,
+    $kendo-code-border-width: $kendo-code-border-width,
+    $kendo-code-bg: $kendo-code-bg,
+    $kendo-code-text: $kendo-code-text,
+    $kendo-code-border: $kendo-code-border,
+    $kendo-display1-font-size: $kendo-display1-font-size,
+    $kendo-display2-font-size: $kendo-display2-font-size,
+    $kendo-display3-font-size: $kendo-display3-font-size,
+    $kendo-display4-font-size: $kendo-display4-font-size,
+    $kendo-display1-font-family: $kendo-display1-font-family,
+    $kendo-display2-font-family: $kendo-display2-font-family,
+    $kendo-display3-font-family: $kendo-display3-font-family,
+    $kendo-display4-font-family: $kendo-display4-font-family,
+    $kendo-display1-line-height: $kendo-display1-line-height,
+    $kendo-display2-line-height: $kendo-display2-line-height,
+    $kendo-display3-line-height: $kendo-display3-line-height,
+    $kendo-display4-line-height: $kendo-display4-line-height,
+    $kendo-display1-font-weight: $kendo-display1-font-weight,
+    $kendo-display2-font-weight: $kendo-display2-font-weight,
+    $kendo-display3-font-weight: $kendo-display3-font-weight,
+    $kendo-display4-font-weight: $kendo-display4-font-weight,
+    $kendo-display1-letter-spacing: $kendo-display1-letter-spacing,
+    $kendo-display2-letter-spacing: $kendo-display2-letter-spacing,
+    $kendo-display3-letter-spacing: $kendo-display3-letter-spacing,
+    $kendo-display4-letter-spacing: $kendo-display4-letter-spacing,
+    $kendo-display: $kendo-display
+);