igniteui-theming 1.2.0 → 1.3.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.3.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/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