@progress/kendo-theme-utils 8.0.0-dev.0 → 8.0.0-dev.2

package/scss/elevation/index.import.scss

@@ -1,5 +1,5 @@
 @import "@progress/kendo-theme-core/scss/elevation/index.import.scss";
 
 @mixin kendo-utils--elevation {
-    @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: 'elevation');
+    @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: "elevation");
 }

package/scss/spacing/_margin.scss

@@ -548,12 +548,12 @@
 
     // Margin utility classes
     $kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
-    @include generate-utils( m, margin, $kendo-utils-margin );
-    @include generate-utils( mt, margin-top, $kendo-utils-margin );
-    @include generate-utils( mr, margin-right, $kendo-utils-margin );
-    @include generate-utils( mb, margin-bottom, $kendo-utils-margin );
-    @include generate-utils( ml, margin-left, $kendo-utils-margin );
-    @include generate-utils( mx, margin-inline, $kendo-utils-margin );
-    @include generate-utils( my, margin-block, $kendo-utils-margin );
+    @include generate-utils( m, margin, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( mt, margin-top, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( mr, margin-right, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( mb, margin-bottom, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( ml, margin-left, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( mx, margin-inline, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( my, margin-block, $kendo-utils-margin, $css-var: "spacing" );
 
 }

package/scss/spacing/_padding.scss

@@ -16,18 +16,6 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding: -1px;`.
-/// @example padding: -1px;
-/// @name .k-p--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding: -0.25rem;`.
-/// @example padding: -0.25rem;
-/// @name .k-p--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding: 0.25rem;`.
 /// @example padding: 0.25rem;
 /// @name .k-p-xs
@@ -94,18 +82,6 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-top: -1px;`.
-/// @example padding-top: -1px;
-/// @name .k-pt--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-top: -0.25rem;`.
-/// @example padding-top: -0.25rem;
-/// @name .k-pt--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-top: 0.25rem;`.
 /// @example padding-top: 0.25rem;
 /// @name .k-pt-xs
@@ -172,18 +148,6 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-right: -1px;`.
-/// @example padding-right: -1px;
-/// @name .k-pr--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-right: -0.25rem;`.
-/// @example padding-right: -0.25rem;
-/// @name .k-pr--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-right: 0.25rem;`.
 /// @example padding-right: 0.25rem;
 /// @name .k-pr-xs
@@ -250,18 +214,6 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-bottom: -1px;`.
-/// @example padding-bottom: -1px;
-/// @name .k-pb--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-bottom: -0.25rem;`.
-/// @example padding-bottom: -0.25rem;
-/// @name .k-pb--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-bottom: 0.25rem;`.
 /// @example padding-bottom: 0.25rem;
 /// @name .k-pb-xs
@@ -328,18 +280,6 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-left: -1px;`.
-/// @example padding-left: -1px;
-/// @name .k-pl--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-left: -0.25rem;`.
-/// @example padding-left: -0.25rem;
-/// @name .k-pl--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-left: 0.25rem;`.
 /// @example padding-left: 0.25rem;
 /// @name .k-pl-xs
@@ -406,18 +346,6 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-inline: -1px;`.
-/// @example padding-inline: -1px;
-/// @name .k-px--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-inline: -0.25rem;`.
-/// @example padding-inline: -0.25rem;
-/// @name .k-px--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-inline: 0.25rem;`.
 /// @example padding-inline: 0.25rem;
 /// @name .k-px-xs
@@ -484,18 +412,6 @@
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-block: -1px;`.
-/// @example padding-block: -1px;
-/// @name .k-py--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-block: -0.25rem;`.
-/// @example padding-block: -0.25rem;
-/// @name .k-py--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-block: 0.25rem;`.
 /// @example padding-block: 0.25rem;
 /// @name .k-py-xs
@@ -548,12 +464,12 @@
 
     // Padding utility classes
     $kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
-    @include generate-utils( p, padding, $kendo-utils-padding );
-    @include generate-utils( pt, padding-top, $kendo-utils-padding );
-    @include generate-utils( pr, padding-right, $kendo-utils-padding );
-    @include generate-utils( pb, padding-bottom, $kendo-utils-padding );
-    @include generate-utils( pl, padding-left, $kendo-utils-padding );
-    @include generate-utils( px, padding-inline, $kendo-utils-padding );
-    @include generate-utils( py, padding-block, $kendo-utils-padding );
+    @include generate-utils( p, padding, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( pt, padding-top, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( pr, padding-right, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( pb, padding-bottom, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( pl, padding-left, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( px, padding-inline, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( py, padding-block, $kendo-utils-padding, $css-var: "spacing" );
 
 }

package/scss/spacing/index.import.scss

@@ -1,3 +1,5 @@
+@import "@progress/kendo-theme-core/scss/spacing/index.import.scss";
+
 @import "./_margin.scss";
 @import "./_padding.scss";
 @import "./_space-between.scss";

package/scss/typography/_font-family.scss

@@ -0,0 +1,8 @@
+@import "@progress/kendo-theme-core/scss/index.import.scss";
+
+@mixin kendo-utils--typography--font-family() {
+
+    // Font family utility classes
+    @include generate-utils( font-family, font-family, $kendo-font-families, $css-var: "font-family" );
+
+}

package/scss/typography/_font-size.scss

@@ -1,40 +1,41 @@
+@import "@progress/kendo-theme-core/scss/index.import.scss";
+
 /// This is equivalent to `font-size: 10px;`.
 /// @example font-size: 10px;
-/// @name .k-font-xs
+/// @name .k-font-size-xs
 /// @group font-size
 /// @contextType css
 
 /// This is equivalent to `font-size: 12px;`.
 /// @example font-size: 12px;
-/// @name .k-font-sm
+/// @name .k-font-size-sm
 /// @group font-size
 /// @contextType css
 
 /// This is equivalent to `font-size: 14px;`.
 /// @example font-size: 14px;
-/// @name .k-font-md
+/// @name .k-font-size-md
 /// @group font-size
 /// @contextType css
 
 /// This is equivalent to `font-size: 16px;`.
 /// @example font-size: 16px;
-/// @name .k-font-lg
+/// @name .k-font-size-lg
 /// @group font-size
 /// @contextType css
 
 /// This is equivalent to `font-size: 20px;`.
 /// @example font-size: 20px;
-/// @name .k-font-xl
+/// @name .k-font-size-xl
 /// @group font-size
 /// @contextType css
 
 @mixin kendo-utils--typography--font-size() {
 
     // Font size utility classes
-    $kendo-utils-font-size: k-map-get( $kendo-utils, "font-size" ) !default;
-    @include generate-utils( font-size, font-size, $kendo-utils-font-size );
+    @include generate-utils( font-size, font-size, $kendo-font-sizes, $css-var: "font-size" );
 
     // Legacy aliases
-    @include generate-utils( fs, font-size, $kendo-utils-font-size );
+    @include generate-utils( fs, font-size, $kendo-font-sizes, $css-var: "fs" );
 
 }

package/scss/typography/_font-style.scss

@@ -14,6 +14,6 @@
 
     // Font style utility classes
     $kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
-    @include generate-utils( font, font-style, $kendo-utils-font-style );
+    @include generate-utils( font-style, font-style, $kendo-utils-font-style, $css-var: "font-style" );
 
 }

package/scss/typography/_font-weight.scss

@@ -1,3 +1,5 @@
+@import "@progress/kendo-theme-core/scss/index.import.scss";
+
 /// This is equivalent to `font-weight: 100;`.
 /// @example font-weight: 100;
 /// @name .k-font-thin
@@ -55,11 +57,10 @@
 @mixin kendo-utils--typography--font-weight() {
 
     // Font weight utility classes
-    $kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default;
-    @include generate-utils( font, font-weight, $kendo-utils-font-weight );
+    @include generate-utils( font, font-weight, $kendo-font-weights, $css-var: "font" );
 
 
     // Legacy aliases
-    @include generate-utils( font-weight, font-weight, $kendo-utils-font-weight );
+    @include generate-utils( font-weight, font-weight, $kendo-font-weights, $css-var: "font-weight" );
 
 }

package/scss/typography/_letter-spacing.scss

@@ -0,0 +1,9 @@
+@import "@progress/kendo-theme-core/scss/index.import.scss";
+
+@mixin kendo-utils--typography--letter-spacing() {
+
+    // Letter spacing utility classes
+    @include generate-utils( letter-spacing, letter-spacing, $kendo-letter-spacings, $css-var: "letter-spacing" );
+
+}
+

package/scss/typography/_line-height.scss

@@ -0,0 +1,8 @@
+@import "@progress/kendo-theme-core/scss/index.import.scss";
+
+@mixin kendo-utils--typography--line-height() {
+
+    // Line height utility classes
+    @include generate-utils( line-height, line-height, $kendo-line-heights, $css-var: "line-height" );
+
+}

package/scss/typography/index.import.scss

@@ -1,11 +1,14 @@
 // font family
+@import "./_font-family.scss";
 @import "./_font-size.scss";
 // font smoothing
 @import "./_font-style.scss";
 @import "./_font-weight.scss";
 // font variant
 // letter spacing
+@import "./_letter-spacing.scss";
 // line height
+@import "./_line-height.scss";
 @import "./_list-style.scss";
 @import "./_text-align.scss";
 @import "./_text-color.scss";
@@ -18,9 +21,12 @@
 
 
 @mixin kendo-utils--typography() {
+    @include kendo-utils--typography--font-family();
     @include kendo-utils--typography--font-size();
     @include kendo-utils--typography--font-style();
     @include kendo-utils--typography--font-weight();
+    @include kendo-utils--typography--letter-spacing();
+    @include kendo-utils--typography--line-height();
     @include kendo-utils--typography--list-style-type();
     @include kendo-utils--typography--text-align();
     @include kendo-utils--typography--text-color();