igniteui-theming 25.0.0 → 25.0.2

package/sass/themes/schemas/components/light/_validator.scss

@@ -11,7 +11,7 @@
 /// @prop {Map} helper-text-color [color: ('gray', 700)] - The color used for helper text.
 /// @prop {Map} text-error-color [color: ('error', 500)] - The color used for the error message.
 /// @prop {Map} icon-error-color [color: ('error', 500)] - The color used for the error icon.
-/// @type {Map}
+/// @type Map
 $light-validator: extend(
     (
         helper-text-color: (
@@ -40,8 +40,8 @@ $light-validator: extend(
 );
 
 /// Generates a light material validator schema.
-/// @type {Map}
-/// @requires {Map} $light-validator
+/// @type Map
+/// @requires $light-validator
 $material-validator: extend(
     $light-validator,
     (
@@ -52,8 +52,8 @@ $material-validator: extend(
 );
 
 /// Generates a light fluent validator schema.
-/// @type {Map}
-/// @requires {Map} $light-validator
+/// @type Map
+/// @requires $light-validator
 $fluent-validator: extend(
     $light-validator,
     (
@@ -64,8 +64,8 @@ $fluent-validator: extend(
 );
 
 /// Generates a bootstrap validator schema.
-/// @type {Map}
-/// @requires {Map} $light-validator
+/// @type Map
+/// @requires $light-validator
 $bootstrap-validator: extend(
     $light-validator,
     (
@@ -76,9 +76,9 @@ $bootstrap-validator: extend(
 );
 
 /// Generates an indigo validator schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} text-error-color [color: ('gray', 700)] - The color used for error message.
-/// @requires {Map} $light-validator
+/// @requires $light-validator
 $indigo-validator: extend(
     $light-validator,
     (

package/sass/themes/schemas/components/light/_watermark.scss

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a base light watermark schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Color} base-color [null] - The base color for all elements of the watermark.
 /// @prop {Color} image-color [null] - The color used for the stamp image.
 /// @prop {Number} image-opacity [null] - The opacity of the stamp image.
@@ -47,8 +47,8 @@ $light-watermark: extend(
 );
 
 /// Generates a light material watermark schema.
-/// @type {Map}
-/// @requires {Map} $light-watermark
+/// @type Map
+/// @requires $light-watermark
 $material-watermark: extend(
     $light-watermark,
     (
@@ -59,9 +59,9 @@ $material-watermark: extend(
 );
 
 /// Generates a light fluent watermark schema.
-/// @type {Map}
+/// @type Map
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for watermark.
-/// @requires {Map} $light-watermark
+/// @requires $light-watermark
 $fluent-watermark: extend(
     $light-watermark,
     (
@@ -79,9 +79,9 @@ $fluent-watermark: extend(
 );
 
 /// Generates a bootstrap watermark schema.
-/// @type {Map}
+/// @type Map
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for watermark.
-/// @requires {Map} $light-watermark
+/// @requires $light-watermark
 $bootstrap-watermark: extend(
     $light-watermark,
     (
@@ -99,10 +99,10 @@ $bootstrap-watermark: extend(
 );
 
 /// Generates an indigo watermark schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} border-color [color: ('primary', 300)] - The border color for the link.
 /// @prop {List} border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for watermark.
-/// @requires {Map} $light-watermark
+/// @requires $light-watermark
 $indigo-watermark: extend(
     $light-watermark,
     (

package/sass/themes/schemas/components/light/calendar/_base.scss

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a light base calendar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Number} default-size [2] - The default size used for the calendar component.
 /// @prop {Color} border-color [transparent] - The calendar border color.
 /// @prop {Map} border-radius [border-radius: (rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
@@ -40,16 +40,11 @@ $calendar-base: (
 );
 
 /// Generates a base material calendar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} header-foreground [contrast-color: ('secondary', 900)] - The header foreground color.
 /// @prop {Map} header-background [color: ('secondary', 500)] - The header background color.
 /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
-/// @prop {Map} typography [
-///   header: (
-///     year: (value: 'overline'),
-///     date: (value: 'h4')
-///   )
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [header: (year: (value: 'overline'), date: (value: 'h4'))] - The typography styles used for the component.
 /// @requires $calendar-base
 $material-base: extend(
     $calendar-base,
@@ -90,17 +85,12 @@ $material-base: extend(
 );
 
 /// Generates a light base fluent base calendar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} header-foreground [contrast-color: ('primary', 600)] - The header foreground color.
 /// @prop {Map} header-background [color: ('primary', 500)] - The background color of the month and year pickers.
 /// @prop {Map} border-radius [border-radius: (rem(0), rem(0), rem(25px))] - The border radius used for calendar.
 /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
-/// @prop {Map} typography [
-///   header: (
-///     year: (value: 'overline'),
-///     date: (value: 'h4')
-///   )
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [header: (year: (value: 'overline'), date: (value: 'h4'))] - The typography styles used for the component.
 /// @requires $calendar-base
 $fluent-base: extend(
     $calendar-base,
@@ -148,18 +138,13 @@ $fluent-base: extend(
 );
 
 /// Generates a light base bootstrap base calendar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} header-foreground [contrast-color: ('gray', 100)] - The header foreground color.
 /// @prop {Map} header-background [color: ('gray', 100)] - The header background color.
 /// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
 /// @prop {Map} border-radius [border-radius: (rem(4px), rem(0), rem(20px))] - The border radius used for the calendar.
 /// @prop {Map} actions-divider-color [color: ('gray', 300)] - The border color used for the date-picker actions divider.
-/// @prop {Map} typography [
-///   header: (
-///     year: (value: 'body-2'),
-///     date: (value: 'h4')
-///   )
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [header: (year: (value: 'body-2'), date: (value: 'h4'))] - The typography styles used for the component.
 /// @requires $calendar-base
 $bootstrap-base: extend(
     $calendar-base,
@@ -213,7 +198,7 @@ $bootstrap-base: extend(
 );
 
 /// Generates a light base indigo base calendar schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} content-foreground [color: ('gray', 800)] - The foreground color of the days, months and years views.
 /// @prop {Map} content-background [contrast-color: ('gray', 900)] - The background color of the days, months and years views.
 /// @prop {Map} header-foreground [color: ('gray', 800)] - The header foreground color.
@@ -221,12 +206,7 @@ $bootstrap-base: extend(
 /// @prop {Map} border-color [color: ('gray', 400)] - The calendar border color.
 /// @prop {Map} border-radius [border-radius: (rem(6px), rem(0), rem(6px))] - The border radius used for calendar.
 /// @prop {Map} actions-divider-color [color: ('gray', 400)] - The border color used for the date-picker actions divider.
-/// @prop {Map} typography [
-///   header: (
-///     year: (value: 'body-2'),
-///     date: (value: 'h5')
-///   )
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [header: (year: (value: 'body-2'), date: (value: 'h5'))] - The typography styles used for the component.
 /// @requires $calendar-base
 $indigo-base: extend(
     $calendar-base,

package/sass/themes/schemas/components/light/calendar/_days-view.scss

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a base light days-view schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} weekday-color [color: ('gray', 500)] - The foreground color of the weekday labels.
 /// @prop {Map} weekend-color [color: ('gray', 900)] - The foreground color of the weekend days.
 /// @prop {Map} inactive-color [color: ('gray', 500)] - The foreground color of the previous and next month dates.
@@ -200,7 +200,7 @@ $light-days-view: extend(
 );
 
 /// Generates a light material days-view schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} date-hover-background [color: ('gray', 100)] - The :hover background color of a date.
 /// @prop {Map} date-focus-background [color: ('gray', 100)] - The :focus background color of date.
 /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
@@ -260,10 +260,7 @@ $light-days-view: extend(
 /// @prop {List} date-current-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the current date selection.
 /// @prop {Map} weekday-color [color: ('gray', 700)] - The foreground color of the weekday labels.
 /// @prop {Map} week-number-foreground [color: ('gray', 700)] - The foreground color of the week number column.
-/// @prop {Map} typography [
-///   weekday-label: (value: 'body-1'),
-///   content: (value: 'body-1')
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [weekday-label: (value: 'body-1'), content: (value: 'body-1')] - The typography styles used for the component.
 /// @requires $light-days-view
 /// @requires $material-base
 $material-days-view: extend(
@@ -635,7 +632,7 @@ $material-days-view: extend(
 );
 
 /// Generates a light fluent days-view schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} date-special-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-hover-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-foreground [color: ('gray', 900)] - The foreground color of a special date.
@@ -714,10 +711,7 @@ $material-days-view: extend(
 /// @prop {Map} weekday-color [color: ('gray', 700)] - The foreground color of the weekday labels.
 /// @prop {Map} week-number-foreground [color: ('gray', 700)] - The foreground color of the week number column.
 /// @prop {Map} inactive-color [color: ('gray', 700)] - The foreground color of the previous and next month dates.
-/// @prop {Map} typography [
-///   weekday-label: (value: 'body-1'),
-///   content: (value: 'body-1')
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [weekday-label: (value: 'body-1'), content: (value: 'body-1')] - The typography styles used for the component.
 /// @requires $light-days-view
 /// @requires $fluent-base
 $fluent-days-view: extend(
@@ -1190,7 +1184,7 @@ $fluent-days-view: extend(
 );
 
 /// Generates a light bootstrap days-view schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} date-special-hover-background [color: ('gray', 200)] - The background color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('gray', 200)] - The background color of a special date.
 /// @prop {Map} date-special-range-hover-background [color: ('gray', 200)] - The :hover background color of a special date in range selection.
@@ -1258,10 +1252,7 @@ $fluent-days-view: extend(
 /// @prop {List} date-special-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the special date selection.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the calendar.
 /// @prop {List} week-number-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the week numbers column.
-/// @prop {Map} typography [
-///   weekday-label: (value: 'body-2'),
-///   content: (value: 'body-1')
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [weekday-label: (value: 'body-2'), content: (value: 'body-1')] - The typography styles used for the component.
 /// @requires $light-days-view
 /// @requires $bootstrap-base
 $bootstrap-days-view: extend(
@@ -1655,7 +1646,7 @@ $bootstrap-days-view: extend(
 );
 
 /// Generates a light indigo days-view schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} weekend-color [color: ('gray', 800)] - The foreground color of the weekend days.
 /// @prop {Map} week-number-foreground [color: ('gray', 600)] - The foreground color of the week number column.
 /// @prop {Map} week-number-background [color: ('gray', 900, .05)] - The background color of the week number column.

package/sass/themes/schemas/components/light/calendar/_picker.scss

@@ -8,7 +8,7 @@
 ////
 
 /// Generates a base light month/year picker schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} picker-background [color: 'surface'] - The background color of the month and year pickers.
 /// @prop {Map} picker-hover-foreground [color: ('secondary', 500)] - The :hover foreground color of the month and year pickers.
 /// @prop {Map} picker-focus-foreground [color: ('secondary', 500)] - The :focus foreground color of the month and year pickers.
@@ -53,11 +53,9 @@ $light-picker: (
 );
 
 /// Generates a light material month/year picker schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
-/// @prop {Map} typography [
-///   picker-date: (value: 'subtitle-1')
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [picker-date: (value: 'subtitle-1')] - The typography styles used for the component.
 /// @requires $light-picker
 $material-picker: extend(
     $light-picker,
@@ -78,15 +76,13 @@ $material-picker: extend(
 );
 
 /// Generates a light fluent month/year picker schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
 /// @prop {Map} picker-hover-foreground [color: ('primary', 500)] - The :hover foreground color of the month and year pickers.
 /// @prop {Map} picker-focus-foreground [color: ('primary', 500)] - The :focus foreground color of the month and year pickers.
 /// @prop {Map} navigation-hover-color [color: ('primary', 500)] - The :hover color of the buttons responsible for navigation.
 /// @prop {Map} navigation-focus-color [color: ('primary', 500)] - The :focus color of the buttons responsible for navigation.
-/// @prop {Map} typography [
-///   picker-date: (value: 'subtitle-2')
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [picker-date: (value: 'subtitle-2')] - The typography styles used for the component.
 /// @requires $light-picker
 $fluent-picker: extend(
     $light-picker,
@@ -131,12 +127,10 @@ $fluent-picker: extend(
 );
 
 /// Generates a light bootstrap month/year picker schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} picker-foreground [color: ('gray', 900)] - The foreground color of the month and year pickers.
 /// @prop {Map} picker-background [color: ('gray', 100)] - The background color of the month and year pickers.
-/// @prop {Map} typography [
-///   picker-date: (value: 'subtitle-1')
-/// ] - The typography styles used for the component.
+/// @prop {Map} typography [picker-date: (value: 'subtitle-1')] - The typography styles used for the component.
 /// @requires $light-picker
 $bootstrap-picker: extend(
     $light-picker,
@@ -170,10 +164,8 @@ $bootstrap-picker: extend(
 /// @prop {Map} navigation-color [color: ('gray', 600)] - the color of the buttons responsible for navigation.
 /// @prop {Map} navigation-hover-color [color: ('primary', 500)] - The :hover color of the icon button responsible for month navigation.
 /// @prop {Map} navigation-focus-color [color: ('primary', 500)] - The :focus color of the icon button responsible for month navigation.
-/// @type {Map}
-/// @prop {Map} typography [
-///   picker-date: (value: 'subtitle-2')
-/// ] - The typography styles used for the component.
+/// @type Map
+/// @prop {Map} typography [picker-date: (value: 'subtitle-2')] - The typography styles used for the component.
 /// @requires $light-picker
 $indigo-picker: extend(
     $light-picker,

package/sass/themes/schemas/components/light/calendar/_year-month-view.scss

@@ -9,7 +9,7 @@
 ////
 
 /// Generates a base light year/month views schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Number} default-size [2] - The default size used for the calendar component.
 /// @prop {Map} ym-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the current month/year.
 /// @prop {Map} ym-current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the current month/year.
@@ -62,7 +62,7 @@ $light-year-month: extend(
 );
 
 /// Generates a light material year/month views schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} ym-selected-current-hover-foreground [contrast-color: ('secondary', 700)] - The :hover foreground color of the current/selected year/month.
 /// @prop {Map} ym-selected-current-hover-background [color: ('secondary', 700)] - The :hover background color of the current/selected year.
 /// @prop {Map} ym-hover-foreground [color: ('gray', 900)] -  The :hover foreground color of the month/year.
@@ -83,9 +83,7 @@ $light-year-month: extend(
 /// @prop {Map} ym-selected-current-outline-color [color: ('gray', 900)] - The outline color of the selected current month/year.
 /// @prop {Map} ym-selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current month/year.
 /// @prop {Map} ym-selected-current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the selected current month/year.
-/// @prop {Map} typography [
-///   content: (value: 'body-1')
-/// ]
+/// @prop {Map} typography [content: (value: 'body-1')] - The typography styles used for the component.
 /// @requires $light-year-month
 /// @requires $material-base
 $material-year-month: extend(
@@ -206,7 +204,7 @@ $material-year-month: extend(
 );
 
 /// Generates a light fluent year/month views schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} ym-hover-background [color: ('gray', 200)] - The :hover background color of the month/year.
 /// @prop {Map} ym-selected-current-hover-foreground [color: ('gray', 900)] - The foreground color of the current/selected month/year on :hover.
 /// @prop {Map} ym-selected-current-hover-background [color: ('primary', 100, .5)] - The background color of the current/selected month/year on :hover.
@@ -230,9 +228,7 @@ $material-year-month: extend(
 /// @prop {Map} ym-selected-current-outline-hover-color [color: ('gray', 700)] - The :hover outline color of the selected current month/year.
 /// @prop {Map} ym-selected-current-outline-focus-color [color: ('gray', 700)] - The :focus outline color of the selected current month/year.
 /// @prop {List} ym-border-radius [(rem(0), rem(0), rem(25px))] - The border radius used for the month/year.
-/// @prop {Map} typography [
-///   content: (value: 'body-1')
-/// ]
+/// @prop {Map} typography [content: (value: 'body-1')] - The typography styles used for the component.
 /// @requires $light-year-month
 /// @requires $fluent-base
 $fluent-year-month: extend(
@@ -379,7 +375,7 @@ $fluent-year-month: extend(
 );
 
 /// Generates a light bootstrap year/month views schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} ym-current-outline-color [color: ('gray', 900)] - The outline color of the current month/year.
 /// @prop {Map} ym-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month/year.
 /// @prop {Map} ym-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected month/year.
@@ -401,9 +397,7 @@ $fluent-year-month: extend(
 /// @prop {Map} ym-selected-current-outline-hover-color [color: ('gray', 900)] - The :hover outline color of the selected current month/year.
 /// @prop {Map} ym-selected-current-outline-focus-color [color: ('gray', 900)] - The :focus outline color of the selected current month/year.
 /// @prop {List} ym-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the month/year.
-/// @prop {Map} typography [
-///   content: (value: 'body-1')
-/// ]
+/// @prop {Map} typography [content: (value: 'body-1')] - The typography styles used for the component.
 /// @requires $light-year-month
 /// @requires $bootstrap-base
 $bootstrap-year-month: extend(
@@ -530,7 +524,7 @@ $bootstrap-year-month: extend(
 );
 
 /// Generates a light indigo year/month views schema.
-/// @type {Map}
+/// @type Map
 /// @prop {Map} ym-hover-foreground [color: ('gray', 800)] -  The :hover foreground color of the month/year.
 /// @prop {Map} ym-hover-background [color: ('gray', 900, .05)] - The :hover background color of the month/year.
 /// @prop {Map} ym-current-foreground [color: ('gray', 800)] - The foreground color of the current month/year.
@@ -551,9 +545,7 @@ $bootstrap-year-month: extend(
 /// @prop {Map} ym-selected-current-outline-color [color: ('primary', 100)] - The outline color of the selected current month/year.
 /// @prop {Map} ym-selected-current-outline-hover-color [color: ('primary', 200)] - The :hover outline color of the selected current month/year.
 /// @prop {Map} ym-selected-current-outline-focus-color [color: ('primary', 200)] - The :focus outline color of the selected current month/year.
-/// @prop {Map} typography [
-///   content: (value: 'body-1')
-/// ]
+/// @prop {Map} typography [content: (value: 'body-1')] - The typography styles used for the component.
 /// @requires $light-year-month
 /// @requires $indigo-base
 $indigo-year-month: extend(

package/sass/typography/_functions.scss

@@ -13,9 +13,9 @@
 
 /// Converts pixels to relative values (em).
 /// @access public
-/// @param {number|string} $pixels - The pixel value to be converted.
-/// @param {number|string} $context [$browser-context] - The base context to convert against.
-/// @example
+/// @param {Number | String} $pixels - The pixel value to be converted.
+/// @param {Number | String} $context [$browser-context] - The base context to convert against.
+/// @example scss
 ///   .my-component {
 ///     margin: em(10px) em(5px);
 ///   }
@@ -25,7 +25,7 @@
 ///     margin: 0.625em 0.3125em;
 ///   }
 ///
-/// @return {number} - Returns the pixels value converted to em.
+/// @return {number} Returns the pixels value converted to em.
 @function em($pixels, $context: $base-font-size) {
     @if math.is-unitless($pixels) {
         $pixels: $pixels * 1px;
@@ -42,7 +42,7 @@
 /// @access public
 /// @param {number|string} $pixels - The pixel value to be converted.
 /// @param {number|string} $context [$browser-context] - The base context to convert against.
-/// @example
+/// @example scss
 ///   .my-component {
 ///     margin: rem(10px) rem(5px);
 ///   }
@@ -52,7 +52,7 @@
 ///     margin: 0.625rem 0.3125rem;
 ///   }
 ///
-/// @return {number} - Returns the pixels value converted to rem.
+/// @return {number} Returns the pixels value converted to rem.
 @function rem($pixels, $context: $base-font-size) {
     @if math.is-unitless($pixels) {
         $pixels: $pixels * 1px;
@@ -69,7 +69,7 @@
 /// @access public
 /// @param {number|string} $num - The relative value to be converted.
 /// @param {number|string} $context [$browser-context] - The base context to convert against.
-/// @example
+/// @example scss
 ///   .my-component {
 ///     margin: px(3rem);
 ///   }
@@ -79,7 +79,7 @@
 ///     margin: 48px;
 ///   }
 ///
-/// @return {number} - Returns the relative value converted to pixels.
+/// @return {number} Returns the relative value converted to pixels.
 @function px($num, $context: $base-font-size) {
     @if math.is-unitless($context) {
         $context: $context * 1px;
@@ -104,7 +104,7 @@
 /// @param {Number} $margin-top [0] - The margin-top property of the type style.
 /// @param {Number} $margin-bottom [0] - The margin-bottom property of the type style.
 /// @requires $ITypeStyle
-/// @example
+/// @example scss
 ///   $main_navigation: type-style(
 ///      $font-size: rem(14px),
 ///      $font-weight: 600,
@@ -117,7 +117,7 @@
 ///   .main-nav {
 ///     @include type-style($main_navigation);
 ///   }
-/// @returns {Map} - A map of all defined type style properties.
+/// @returns {Map} A map of all defined type style properties.
 @function type-style($args...) {
     $keywords: meta.keywords($args);
     $result: ();
@@ -158,7 +158,7 @@
 /// @param {Map} $overline - A map containing type style properties as produces by the type-style function.
 /// @param {String} $_theme [null] - The theme related to this type scale. Internal use only.
 /// @requires $ITypeScale
-/// @example
+/// @example scss
 ///   // First define type styles to use
 ///   $my-body-1: type-style(
 ///      $font-size: rem(14px),
@@ -170,7 +170,7 @@
 ///	    $body-1: $my-body-1,
 ///	    ...
 ///   );
-/// @returns {Map} - A map of all defined type scales.
+/// @returns {Map} A map of all defined type scales.
 @function type-scale($_theme: null, $args...) {
     $style_fn: meta.get-function('type-style');
     $categories: meta.keywords($args);
@@ -201,9 +201,9 @@
 /// Get type scale category config.
 /// @param {Map} $scale - A type scale map reference as produces by type-scale.
 /// @param {String} $category - The scale category you want config for. For instance - 'h1';
-/// @example scss Get the type scale category config for the `h1` scale.
+/// @example scss - Get the type scale category config for the `h1` scale.
 ///   $h1-type-scale: type-scale-category($type-scale, 'h1');
-/// @returns {Map} - The config map for the selected category in the type scale.
+/// @returns {Map} The config map for the selected category in the type scale.
 @function type-scale-category($scale, $category) {
     @return map.get($scale, $category);
 }

package/sass/typography/_mixins.scss

@@ -19,7 +19,7 @@
 /// keywords like inherit, etc.) are returned as-is.
 /// @access private
 /// @param {String | List | *} $value - The font-family value to normalize.
-/// @return {String | List | *} - The normalized value.
+/// @return {String | List | *} The normalized value.
 @function _normalize-font-family($value) {
     @return if(meta.type-of($value) == 'string', string.unquote($value), $value);
 }
@@ -28,7 +28,7 @@
 /// @param {String} $category - The type scale category.
 /// @param {String} $check [true] - Toggles category checks against ITypeScale.
 /// Set to false when using a custom type scale.
-/// @example scss Add the `h1` styles to custom CSS selector.
+/// @example scss - Add the `h1` styles to custom CSS selector.
 ///   .fancy-h1 {
 ///      @include type-style('h1');
 ///
@@ -54,7 +54,7 @@
 /// Transforms a type style map into css font variables.
 /// @param {String} $name - The custom CSS variable name.
 /// @param {Map} $type-style - A type style map reference as produced by type-style.
-/// @example scss Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.
+/// @example scss - Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.
 ///   $h1-style: type-scale-category($type-scale, 'h1');
 ///   @include type-style-vars('h1', $h1-style);
 @mixin type-style-vars($name, $type-style) {
@@ -112,7 +112,7 @@
 /// @param {String} $name - The custom CSS variable name.
 /// @param {Map} $type-style - A type style map reference as produces by type-style.
 /// @param {String} $prefix [null] - Optional prefix.
-/// @example scss Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.
+/// @example scss - Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.
 ///   $h1-style: type-scale-category($type-scale, 'h1');
 ///   @include font-var('h1-font', $h1-style);
 @mixin font-var($name, $type-style, $prefix: null) {
@@ -139,11 +139,11 @@
 /// (e.g. "'Comic Sans MS', sans-serif" for backward compatibility), or any other
 /// valid CSS value such as var(--my-font), inherit, etc.
 /// @param {Map} $type-scale - A type scale map as produced by the type-scale function.
-/// @example scss Using a font-family list
+/// @example scss - Using a font-family list
 ///   @include typography(("Open Sans", Helvetica, sans-serif), $my-type-scale);
-/// @example scss Using a quoted string (backward compatible)
+/// @example scss - Using a quoted string (backward compatible)
 ///   @include typography("'Comic Sans MS', sans-serif", $my-type-scale);
-/// @example scss Using a CSS variable reference
+/// @example scss - Using a CSS variable reference
 ///   @include typography(var(--my-custom-font), $my-type-scale);
 ///
 /// @requires {function} is-root

package/sass/utils/_css.scss

@@ -11,7 +11,7 @@
 /// @access private
 /// @param {List} $list - The of values to be expanded. Supports up to four values.
 /// @param {string} $prop [margin] - The name of the property.
-/// @returns {Map} - Returns an expanded list of values.
+/// @returns {Map} Returns an expanded list of values.
 @function expand-shorthand($list, $prop: 'margin') {
     $len: list.length($list);
     $props: (

package/sass/utils/_map.scss

@@ -9,7 +9,7 @@
 /// Removes all null key-value pairs from a map
 /// @access public
 /// @param {Map} $map - The target map to be cleaned.
-/// @returns {Map} - Returns a map with null key-value pairs removed.
+/// @returns {Map} Returns a map with null key-value pairs removed.
 @function clean($map) {
     $result: ();
 
@@ -26,7 +26,7 @@
 /// @access public
 /// @param {Map...} $maps - The maps to get extended.
 /// @requires {function} clean
-/// @returns {Map} - Returns the merged maps.
+/// @returns {Map} Returns the merged maps.
 @function extend($maps...) {
     $result: ();
 
@@ -40,7 +40,7 @@
 /// Extracts the differences between two or more maps, comparing the first map against the rest.
 /// @access public
 /// @param {Map...} $maps - A list of maps that will be diffed.
-/// @example scss Pull out the unique properties of the second map when compared to the first.
+/// @example scss - Pull out the unique properties of the second map when compared to the first.
 ///   $map-1: (
 ///     color: orange,
 ///     background: black,
@@ -52,7 +52,7 @@
 ///   );
 ///
 ///   $diffed: diff($map-1, $map-2); // returns (color: red);
-/// @returns {Map} - Returns a map of the unique properties.
+/// @returns {Map} Returns a map of the unique properties.
 @function diff($maps...) {
     $result: ();
 
@@ -81,7 +81,7 @@
 /// @param {Map} $map - The target map.
 /// @param {String} $prefix - The string used to prefix all keys in the map.
 /// @param {String} $separator [-] - The string used as a separator between the prefix and the key.
-/// @returns {Map} - Returns the modified map with all keys prefixed.
+/// @returns {Map} Returns the modified map with all keys prefixed.
 @function map-keys-prefix($map, $prefix, $separator: '-') {
     $keys: map.keys($map);
     $len: list.length($keys);