igniteui-theming 1.2.0 → 1.4.0

package/index.js

@@ -0,0 +1,2 @@
+export { default as Palettes } from "./json/colors/presets/palettes.json";
+export { default as Typescales } from "./json/typography/presets/typescales.json";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {
@@ -13,10 +13,17 @@
     "build:docs:en:staging": "set NODE_ENV=staging && npx sassdoc ./sass -d docs",
     "build:e2e": "sass ./test/e2e/theme.scss ./test/e2e/theme.css",
     "build:json": "node scripts/buildJSON.mjs",
-    "lint": "stylelint ./sass",
+    "serve:docs": "npx http-server ./docs",
     "preview:palette": "node scripts/previewPalette.mjs",
+    "lint": "stylelint ./sass",
     "test": "jest",
-    "serve:docs": "npx http-server ./docs"
+    "format": "stylelint \"**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .gitignore",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "**/*.{scss,css}": [
+      "npm run format"
+    ]
   },
   "files": [
     "/sass",
@@ -44,7 +51,12 @@
   "homepage": "https://github.com/IgniteUI/igniteui-theming#readme",
   "exports": {
     ".": {
-      "sass": "./_index.scss"
+      "sass": "./_index.scss",
+      "esm2020": "./index.js",
+      "es2020": "./index.js",
+      "es2015": "./index.js",
+      "node": "./index.js",
+      "default": "./index.js"
     },
     "./functions": {
       "sass": "./sass/_functions.scss"
@@ -52,6 +64,7 @@
   },
   "devDependencies": {
     "globby": "^13.1.2",
+    "husky": "^8.0.2",
     "igniteui-sassdoc-theme": "^1.1.4",
     "jest": "^28.1.1",
     "lunr": "^2.3.9",

package/sass/color/_functions.scss

@@ -30,7 +30,7 @@ $_enhanced-accessibility: false;
 /// @group Palettes
 /// @param {Color} $primary - The primary color used to generate the primary color palette (required).
 /// @param {Color} $secondary - The secondary color used to generate the secondary color palette (required).
-/// @param {Color} $surface - The color used as a background in components, such as cards, sheets, and menus (required).
+/// @param {Color} $surface - The color used as a background in components (required).
 /// @param {Color} $gray [null] - The color used for generating the grayscale palette (optional).
 /// @param {Color} $info [#1377d5] - The information color used throughout the application (optional).
 /// @param {Color} $success [#4eb862] - The success color used throughout the application (optional).

package/sass/color/_mixins.scss

@@ -5,33 +5,39 @@
 @use 'sass:string';
 @use '../utils/meta' as *;
 
-/// Generates CSS variables for a given palette.
-/// @access public
-/// @group Palettes
-/// @param {Map} $palette - The palette used to generate CSS variables.
-/// @param {Boolean} $contrast [true] - Specify if contrast colors should be included.
-/// @example scss Generate css variables for a palette
-///    $palette: palette($primary: red, $secondary: blue, $gray: #000);
-///    @include palette($palette);
-/// @require {function} is-root
-@mixin palette($palette, $contrast: true) {
+// Generates CSS variables for the base colors.
+// @access private
+@mixin _base-colors($palette) {
     $scope: if(is-root(), ':root', '&');
 
     #{$scope} {
         @each $color, $shades in map.remove($palette, '_meta') {
             @each $shade, $value in $shades {
-                $_base-shade: $shade == 500;
-                $_valid-color: meta.type-of($value == 'color');
-                $_other-shade: meta.type-of($shade) == 'string';
-                $_hsl: if($_other-shade, string.index($shade, 'hsl'), false);
-                $_contrast: if($_other-shade, string.index($shade, 'contrast'), false);
+                $_shade: $shade == 500;
+                $_valid: meta.type-of($value == 'color');
 
-                @if $_base-shade and $_valid-color {
+                @if $_shade and $_valid {
                     --ig-#{$color}-h: #{math.round(color.hue($value))};
                     --ig-#{$color}-s: #{math.round(color.saturation($value))};
                     --ig-#{$color}-l: #{math.round(color.lightness($value))};
                     --ig-#{$color}-a: #{color.alpha($value)};
                 }
+            }
+        }
+    }
+}
+
+// Generates shade CSS variables from the base colors.
+// @access private
+@mixin _shade-colors($palette, $contrast: true) {
+    $scope: if(is-root(), '*', '&');
+
+    #{$scope} {
+        @each $color, $shades in map.remove($palette, '_meta') {
+            @each $shade, $value in $shades {
+                $_shade: meta.type-of($shade) == 'string';
+                $_hsl: if($_shade, string.index($shade, 'hsl'), false);
+                $_contrast: if($_shade, string.index($shade, 'contrast'), false);
 
                 @if $_hsl {
                     $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
@@ -46,3 +52,17 @@
         }
     }
 }
+
+/// Generates CSS variables for a given palette.
+/// @access public
+/// @group Palettes
+/// @param {Map} $palette - The palette used to generate CSS variables.
+/// @param {Boolean} $contrast [true] - Specify if contrast colors should be included.
+/// @example scss Generate css variables for a palette
+///    $palette: palette($primary: red, $secondary: blue, $gray: #000);
+///    @include palette($palette);
+/// @require {function} is-root
+@mixin palette($palette, $contrast: true) {
+    @include _base-colors($palette);
+    @include _shade-colors($palette, $contrast);
+}

package/sass/themes/_functions.scss

@@ -26,7 +26,7 @@
     $result: ();
 
     @each $key, $value in $schema {
-        @if meta.type-of($value) == 'map' {
+        @if meta.type-of($value) == 'map' and $key != '_meta' {
             $result: map.merge($result, (#{$key}: resolve-value($value)));
         } @else {
             $result: map.merge($result, (#{$key}: $value));
@@ -126,6 +126,7 @@
 }
 
 /// Used to switch between values based on the size of the component.
+/// The passed sizes are converted to absolute values before comparing.
 /// @group themes
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
@@ -135,6 +136,10 @@
 ///   --size: #{sizable(rem(40px), rem(64px), rem(88px))};
 /// @return {Function} - The evaluated value.
 @function sizable($sm, $md: $sm, $lg: $md) {
+    $sm: max(#{$sm}, -1 * #{$sm});
+    $md: max(#{$md}, -1 * #{$md});
+    $lg: max(#{$lg}, -1 * #{$lg});
+
     @return max(
         calc(var(--is-large, 1) * #{$lg}),
         calc(var(--is-medium, 1) * #{$md}),
@@ -142,7 +147,8 @@
     );
 }
 
-/// Used to add spacing.
+/// Returns a value based on the size of the component taking spacing values into consideration.
+/// The passed sizes are converted to absolute values before comparing.
 /// @group utilities
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
@@ -156,6 +162,9 @@
 /// @return {Function} - The evaluated value.
 @function pad($sm, $md: $sm, $lg: $md, $dir: null) {
     $spacing: if($dir, --ig-spacing-#{$dir}, --ig-spacing);
+    $sm: max(#{$sm}, -1 * #{$sm});
+    $md: max(#{$md}, -1 * #{$md});
+    $lg: max(#{$lg}, -1 * #{$lg});
 
     @return max(
         calc(var(--is-large, 1) * #{$lg} * var(#{$spacing}-large, var(#{$spacing}, --ig-spacing))),

package/sass/themes/_mixins.scss

@@ -7,7 +7,7 @@
 
 /// A list of ignored keywords to be excluded when generating CSS variables for a theme.
 /// @access private
-$ignored-keys: ('name', 'palette', 'variant', 'selector');
+$ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
 
 /// Parses a map of key value pairs from component themes to css variables.
 /// @access private

package/sass/typography/_mixins.scss

@@ -23,7 +23,11 @@
 
     @if $valid {
         @each $key, $value in types.$ITypeStyle {
-            #{$key}: var(--ig-#{$category}-#{$key});
+            @if #{$key} == 'font-family' {
+                font-family: var(--ig-#{$category}-#{$key}, var(--ig-font-family));
+            } @else {
+                #{$key}: var(--ig-#{$category}-#{$key});
+            }
         }
         @content;
     } @else {
@@ -39,7 +43,13 @@
 ///   @include type-style-vars('h1', $h1-style);
 @mixin type-style-vars($name, $type-style) {
     @each $key, $value in map.remove($type-style, '_meta') {
-        --ig-#{$name}-#{$key}: #{$value};
+        @if $key == 'font-family' and $value != inherit {
+            --ig-#{$name}-#{$key}: #{$value};
+        }
+
+        @if $key != 'font-family' {
+            --ig-#{$name}-#{$key}: #{$value};
+        }
     }
 }
 
@@ -111,7 +121,9 @@
 /// @example scss
 ///   @include typography('Roboto', $my-type-scale);
 @mixin typography($font-family, $type-scale) {
-    $scope: if(is-root(), ':root', '&');
+    $root: is-root();
+    $host: is-host();
+    $scope: if($root, ':root', '&');
 
     #{$scope} {
         --ig-font-family: #{string.unquote($font-family)};
@@ -121,7 +133,7 @@
         }
     }
 
-    @if is-root() {
+    @if $root or $host {
         .ig-typography {
             @include type-style-elements();
             @include type-style-classes();

package/sass/typography/_types.scss

@@ -25,7 +25,7 @@ $ITypeScale: (
 /// @type Map
 /// @access private
 $ITypeStyle: (
-    font-family: var(--ig-font-family),
+    font-family: inherit,
     font-size: null,
     font-weight: normal,
     font-style: normal,

package/sass/utils/_meta.scss

@@ -1,3 +1,5 @@
+@use 'sass:selector';
+
 /// Returns true if the scope where it's called is the root of the document.
 /// @access private
 /// @example scss Check if the current scope is root
@@ -11,6 +13,21 @@
 /// @return {Boolean} - Returns a boolean depending on the scope where it's called
 @function is-root() {
     @each $selector in & {
-        @return if($selector == null, true, false);
+        @return $selector == null;
     }
 }
+
+/// Returns true if the scope where it's called is :host.
+/// @access private
+/// @example scss Check if the current scope is :root
+///   @mixin smart-mixin() {
+///     $host: is-host();
+///
+///     @if is-host() {
+///       /* style rules here */
+///     }
+///   }
+/// @return {Boolean} - Returns a boolean depending on the scope where it's called
+@function is-host() {
+    @return not(is-root()) and selector.is-superselector(':host', &);
+}