feat(utils): integrate typography module

telerik · Mar 25, 2024 · aa155a1 · aa155a1
1 parent 4f70d1e
commit aa155a1
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 26 deletions.
diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
@@ -700,23 +700,14 @@ $kendo-utils: (
 
     // Typography
     "font-family": (),
-    "font-size": $kendo-font-sizes,
+    "font-size": (),
     "font-smoothing": (),
     "font-style": (
         italic: italic,
-        non-italic: normal
-    ),
-    "font-weight": (
-        "thin": 100,
-        "extralight": 200,
-        "light": 300,
-        "normal": 400,
-        "medium": 500,
-        "semibold": 600,
-        "bold": 700,
-        "extrabold": 800,
-        "black": 900
+        non-italic: normal,
+        oblique: oblique
     ),
+    "font-weight": (),
     "font-variant-numeric": (),
     "letter-spacing": (),
     "line-height": (),

diff --git a/packages/utils/scss/elevation/index.import.scss b/packages/utils/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");
 }
diff --git a/packages/utils/scss/typography/_font-family.scss b/packages/utils/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" );
+
+}
diff --git a/packages/utils/scss/typography/_font-size.scss b/packages/utils/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" );
 
 }
diff --git a/packages/utils/scss/typography/_font-style.scss b/packages/utils/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" );
 
 }
diff --git a/packages/utils/scss/typography/_font-weight.scss b/packages/utils/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" );
 
 }
diff --git a/packages/utils/scss/typography/_letter-spacing.scss b/packages/utils/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" );
+
+}
+
diff --git a/packages/utils/scss/typography/_line-height.scss b/packages/utils/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" );
+
+}
diff --git a/packages/utils/scss/typography/index.import.scss b/packages/utils/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();