igniteui-theming 1.4.3-beta.1 → 1.4.3-beta.2

package/json/colors/meta/multipliers.json

@@ -1 +1 @@
-{"color":{"s":{"50":"1.23","100":".8","200":".64","300":".73","400":".875","500":"1","600":"1.26","700":"1.52","800":"1.5","900":"1.34","A100":"1.23","A200":"1.22","A400":"1.23","A700":"1.23"},"l":{"50":"1.78","100":"1.66","200":"1.43","300":"1.19","400":"1.08","500":"1","600":".89","700":".81","800":".73","900":".64","A100":"1.34","A200":"1.16","A400":".91","A700":".65"}},"grayscale":{"l":{"50":"13%","100":"26%","200":"38%","300":"54%","400":"62%","500":"74%","600":"88%","700":"93%","800":"96%","900":"98%"}}}
+{"color":{"s":{"50":"1.23","100":"0.8","200":"0.64","300":"0.73","400":"0.875","500":"1","600":"1.26","700":"1.52","800":"1.5","900":"1.34","A100":"1.23","A200":"1.22","A400":"1.23","A700":"1.23"},"l":{"50":"1.78","100":"1.66","200":"1.43","300":"1.19","400":"1.08","500":"1","600":"0.89","700":"0.81","800":"0.73","900":"0.64","A100":"1.34","A200":"1.16","A400":"0.91","A700":"0.65"}},"grayscale":{"l":{"50":"13%","100":"26%","200":"38%","300":"54%","400":"62%","500":"74%","600":"88%","700":"93%","800":"96%","900":"98%"}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.4.3-beta.1",
+  "version": "1.4.3-beta.2",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {
@@ -15,11 +15,16 @@
     "build:json": "node scripts/buildJSON.mjs",
     "serve:docs": "npx http-server ./docs",
     "preview:palette": "node scripts/previewPalette.mjs",
-    "lint": "stylelint ./sass",
+    "lint": "npm run lint:styles && npm run lint:prettier",
+    "lint:styles": "stylelint ./sass/**/*.scss",
+    "lint:prettier": "prettier \"./sass/**/*.scss\" --check --ignore-path .gitignore",
     "test": "jest",
-    "format": "stylelint \"**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .gitignore",
+    "format": "stylelint \"./sass/**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .gitignore && prettier \"./sass/**/*.{scss,css}\" --write --ignore-path .gitignore",
     "prepare": "husky install"
   },
+  "jest": {
+    "testEnvironment": "jest-environment-node-single-context"
+  },
   "lint-staged": {
     "**/*.{scss,css}": [
       "npm run format"
@@ -63,22 +68,24 @@
     }
   },
   "devDependencies": {
-    "globby": "^13.1.2",
-    "husky": "^8.0.2",
+    "globby": "^13.1.4",
+    "husky": "^8.0.3",
     "igniteui-sassdoc-theme": "^1.1.6",
-    "jest": "^28.1.1",
+    "jest": "^29.5.0",
+    "jest-environment-node-single-context": "^29.0.0",
     "lunr": "^2.3.9",
-    "postcss": "^8.4.14",
-    "rimraf": "^3.0.2",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
+    "rimraf": "^4.4.1",
     "sass-export": "^2.1.2",
-    "sass-true": "^6.1.0",
+    "sass-true": "^7.0.0",
     "sassdoc-plugin-localization": "^1.4.3",
-    "stylelint": "^14.9.1",
-    "stylelint-config-standard-scss": "^4.0.0",
-    "stylelint-scss": "^4.2.0",
-    "yargs": "^17.6.2"
+    "stylelint": "^15.6.2",
+    "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-scss": "^4.7.0",
+    "yargs": "^17.7.2"
   },
   "peerDependencies": {
-    "sass": "^1.53.0"
+    "sass": "^1.62.1"
   }
 }

package/sass/animations/_easings.scss

@@ -6,73 +6,73 @@
 ////
 
 /// @type Timing Function
-$in-quad: cubic-bezier(.55, .085, .68, .53);
+$in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
 
 /// @type Timing Function
-$in-cubic: cubic-bezier(.55, .55, .675, .19);
+$in-cubic: cubic-bezier(0.55, 0.55, 0.675, 0.19);
 
 /// @type Timing Function
-$in-quart: cubic-bezier(.895, .03, .685, .22);
+$in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
 
 /// @type Timing Function
-$in-quint: cubic-bezier(.755, .05, .855, .06);
+$in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 
 /// @type Timing Function
-$in-sine: cubic-bezier(.47, 0, .745, .715);
+$in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
 
 /// @type Timing Function
-$in-expo: cubic-bezier(.95, .05, .795, .035);
+$in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 
 /// @type Timing Function
-$in-circ: cubic-bezier(.95, .05, .795, .035);
+$in-circ: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 
 /// @type Timing Function
-$in-back: cubic-bezier(.95, .05, .795, .035);
+$in-back: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 
 /// @type Timing Function
-$out-quad: cubic-bezier(.25, .46, .45, .94);
+$out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
 /// @type Timing Function
-$out-cubic: cubic-bezier(.215, .61, .355, 1);
+$out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
 
 /// @type Timing Function
-$out-quart: cubic-bezier(.165, .84, .44, 1);
+$out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
 
 /// @type Timing Function
-$out-quint: cubic-bezier(.23, 1, .32, 1);
+$out-quint: cubic-bezier(0.23, 1, 0.32, 1);
 
 /// @type Timing Function
-$out-sine: cubic-bezier(.39, .575, .565, 1);
+$out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
 
 /// @type Timing Function
-$out-expo: cubic-bezier(.19, 1, .22, 1);
+$out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 
 /// @type Timing Function
-$out-circ: cubic-bezier(.075, .82, .165, 1);
+$out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
 
 /// @type Timing Function
-$out-back: cubic-bezier(.175, .885, .32, 1.275);
+$out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
 /// @type Timing Function
-$in-out-quad: cubic-bezier(.455, .03, .515, .955);
+$in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
 /// @type Timing Function
-$in-out-cubic: cubic-bezier(.645, .045, .355, 1);
+$in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
 
 /// @type Timing Function
-$in-out-quart: cubic-bezier(.77, 0, .175, 1);
+$in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
 
 /// @type Timing Function
-$in-out-quint: .5s cubic-bezier(.86, 0, .07, 1);
+$in-out-quint: 0.5s cubic-bezier(0.86, 0, 0.07, 1);
 
 /// @type Timing Function
-$in-out-sine: cubic-bezier(.445, .05, .55, .95);
+$in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 
 /// @type Timing Function
 $in-out-expo: cubic-bezier(1, 0, 0, 1);
 
 /// @type Timing Function
-$in-out-circ: cubic-bezier(.785, .135, .15, .86);
+$in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 
 /// @type Timing Function
-$in-out-back: cubic-bezier(.68, -.55, .265, 1.55);
+$in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

package/sass/animations/entrances/_bounce.scss

@@ -211,7 +211,7 @@
         }
 
         55% {
-            transform: scale(.7);
+            transform: scale(0.7);
             animation-timing-function: ease-in;
         }
 
@@ -221,7 +221,7 @@
         }
 
         81% {
-            transform: scale(.84);
+            transform: scale(0.84);
             animation-timing-function: ease-in;
         }
 
@@ -231,7 +231,7 @@
         }
 
         95% {
-            transform: scale(.95);
+            transform: scale(0.95);
             animation-timing-function: ease-in;
         }
 

package/sass/animations/entrances/_flicker.scss

@@ -245,17 +245,13 @@
 
         65.1% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 55%),
-                0 0 60px rgb(255 255 255 / 30%),
+            box-shadow: 0 0 30px rgb(255 255 255 / 55%), 0 0 60px rgb(255 255 255 / 30%),
                 0 0 100px rgb(255 255 255 / 10%);
         }
 
         75% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 55%),
-                0 0 60px rgb(255 255 255 / 30%),
+            box-shadow: 0 0 30px rgb(255 255 255 / 55%), 0 0 60px rgb(255 255 255 / 30%),
                 0 0 100px rgb(255 255 255 / 10%);
         }
 
@@ -271,20 +267,14 @@
 
         77.1% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 60%),
-                0 0 60px rgb(255 255 255 / 40%),
-                0 0 110px rgb(255 255 255 / 20%),
-                0 0 100px rgb(255 255 255 / 10%);
+            box-shadow: 0 0 30px rgb(255 255 255 / 60%), 0 0 60px rgb(255 255 255 / 40%),
+                0 0 110px rgb(255 255 255 / 20%), 0 0 100px rgb(255 255 255 / 10%);
         }
 
         85% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 60%),
-                0 0 60px rgb(255 255 255 / 40%),
-                0 0 110px rgb(255 255 255 / 20%),
-                0 0 100px rgb(255 255 255 / 10%);
+            box-shadow: 0 0 30px rgb(255 255 255 / 60%), 0 0 60px rgb(255 255 255 / 40%),
+                0 0 110px rgb(255 255 255 / 20%), 0 0 100px rgb(255 255 255 / 10%);
         }
 
         85.1% {
@@ -299,20 +289,14 @@
 
         86.1% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 60%),
-                0 0 60px rgb(255 255 255 / 45%),
-                0 0 110px rgb(255 255 255 / 25%),
-                0 0 100px rgb(255 255 255 / 10%);
+            box-shadow: 0 0 30px rgb(255 255 255 / 60%), 0 0 60px rgb(255 255 255 / 45%),
+                0 0 110px rgb(255 255 255 / 25%), 0 0 100px rgb(255 255 255 / 10%);
         }
 
         100% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 60%),
-                0 0 60px rgb(255 255 255 / 45%),
-                0 0 110px rgb(255 255 255 / 25%),
-                0 0 100px rgb(255 255 255 / 10%);
+            box-shadow: 0 0 30px rgb(255 255 255 / 60%), 0 0 60px rgb(255 255 255 / 45%),
+                0 0 110px rgb(255 255 255 / 25%), 0 0 100px rgb(255 255 255 / 10%);
         }
     }
 }

package/sass/animations/exits/_bounce.scss

@@ -9,7 +9,7 @@
 
 /// @requires {mixin} keyframes
 @mixin bounce-out-top {
-    @include keyframes (bounce-out-top) {
+    @include keyframes(bounce-out-top) {
         0% {
             transform: translateY(0);
             animation-timing-function: ease-out;
@@ -58,7 +58,7 @@
 
 /// @requires {mixin} keyframes
 @mixin bounce-out-right {
-    @include keyframes (bounce-out-right) {
+    @include keyframes(bounce-out-right) {
         0% {
             transform: translateX(0);
             animation-timing-function: ease-out;
@@ -107,7 +107,7 @@
 
 /// @requires {mixin} keyframes
 @mixin bounce-out-bottom {
-    @include keyframes (bounce-out-bottom) {
+    @include keyframes(bounce-out-bottom) {
         0% {
             transform: translateY(0);
             animation-timing-function: ease-out;
@@ -156,7 +156,7 @@
 
 /// @requires {mixin} keyframes
 @mixin bounce-out-left {
-    @include keyframes (bounce-out-left) {
+    @include keyframes(bounce-out-left) {
         0% {
             transform: translateX(0);
             animation-timing-function: ease-out;
@@ -205,7 +205,7 @@
 
 /// @requires {mixin} keyframes
 @mixin bounce-out-bck {
-    @include keyframes (bounce-out-bck) {
+    @include keyframes(bounce-out-bck) {
         0% {
             transform: translateZ(0);
             animation-timing-function: ease-out;
@@ -255,7 +255,7 @@
 
 /// @requires {mixin} keyframes
 @mixin bounce-out-fwd {
-    @include keyframes (bounce-out-fwd) {
+    @include keyframes(bounce-out-fwd) {
         0% {
             transform: translateZ(0);
             animation-timing-function: ease-out;

package/sass/animations/exits/_flicker.scss

@@ -9,7 +9,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flicker-out-1 {
-    @include keyframes (flicker-out-1) {
+    @include keyframes(flicker-out-1) {
         0% {
             opacity: 1;
         }
@@ -154,23 +154,17 @@
 
 /// @requires {mixin} keyframes
 @mixin flicker-out-2 {
-    @include keyframes (flicker-out-2) {
+    @include keyframes(flicker-out-2) {
         0% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 60%),
-                0 0 60px rgb(255 255 255 / 45%),
-                0 0 110px rgb(255 255 255 / 25%),
-                0 0 100px rgb(255 255 255 / 10%);
+            box-shadow: 0 0 30px rgb(255 255 255 / 60%), 0 0 60px rgb(255 255 255 / 45%),
+                0 0 110px rgb(255 255 255 / 25%), 0 0 100px rgb(255 255 255 / 10%);
         }
 
         13.9% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 60%),
-                0 0 60px rgb(255 255 255 / 45%),
-                0 0 110px rgb(255 255 255 / 25%),
-                0 0 100px rgb(255 255 255 / 10%);
+            box-shadow: 0 0 30px rgb(255 255 255 / 60%), 0 0 60px rgb(255 255 255 / 45%),
+                0 0 110px rgb(255 255 255 / 25%), 0 0 100px rgb(255 255 255 / 10%);
         }
 
         14% {
@@ -185,20 +179,14 @@
 
         15% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 55%),
-                0 0 60px rgb(255 255 255 / 40%),
-                0 0 110px rgb(255 255 255 / 20%),
-                0 0 100px rgb(255 255 255 / 10%);
+            box-shadow: 0 0 30px rgb(255 255 255 / 55%), 0 0 60px rgb(255 255 255 / 40%),
+                0 0 110px rgb(255 255 255 / 20%), 0 0 100px rgb(255 255 255 / 10%);
         }
 
         22.9% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 55%),
-                0 0 60px rgb(255 255 255 / 40%),
-                0 0 110px rgb(255 255 255 / 20%),
-                0 0 100px rgb(255 255 255 / 10%);
+            box-shadow: 0 0 30px rgb(255 255 255 / 55%), 0 0 60px rgb(255 255 255 / 40%),
+                0 0 110px rgb(255 255 255 / 20%), 0 0 100px rgb(255 255 255 / 10%);
         }
 
         23% {
@@ -213,17 +201,13 @@
 
         25% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 55%),
-                0 0 60px rgb(255 255 255 / 35%),
+            box-shadow: 0 0 30px rgb(255 255 255 / 55%), 0 0 60px rgb(255 255 255 / 35%),
                 0 0 100px rgb(255 255 255 / 10%);
         }
 
         34.9% {
             opacity: 1;
-            box-shadow:
-                0 0 30px rgb(255 255 255 / 55%),
-                0 0 60px rgb(255 255 255 / 35%),
+            box-shadow: 0 0 30px rgb(255 255 255 / 55%), 0 0 60px rgb(255 255 255 / 35%),
                 0 0 100px rgb(255 255 255 / 10%);
         }
 

package/sass/animations/exits/_flip.scss

@@ -9,7 +9,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flip-out-hor-top {
-    @include keyframes (flip-out-hor-top) {
+    @include keyframes(flip-out-hor-top) {
         0% {
             transform: rotateX(0);
             opacity: 1;
@@ -24,7 +24,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flip-out-hor-bottom {
-    @include keyframes (flip-out-hor-bottom) {
+    @include keyframes(flip-out-hor-bottom) {
         0% {
             transform: rotateX(0);
             opacity: 1;
@@ -39,7 +39,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flip-out-ver-left {
-    @include keyframes (flip-out-ver-left) {
+    @include keyframes(flip-out-ver-left) {
         0% {
             transform: rotateY(0);
             opacity: 1;
@@ -54,7 +54,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flip-out-ver-right {
-    @include keyframes (flip-out-ver-right) {
+    @include keyframes(flip-out-ver-right) {
         0% {
             transform: rotateY(0);
             opacity: 1;
@@ -69,7 +69,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flip-out-diag-1-tr {
-    @include keyframes (flip-out-diag-1-tr) {
+    @include keyframes(flip-out-diag-1-tr) {
         0% {
             transform: rotate3d(1, 1, 0, 0deg);
             opacity: 1;
@@ -84,7 +84,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flip-out-diag-1-bl {
-    @include keyframes (flip-out-diag-1-bl) {
+    @include keyframes(flip-out-diag-1-bl) {
         0% {
             transform: rotate3d(1, 1, 0, 0deg);
             opacity: 1;
@@ -99,7 +99,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flip-out-diag-2-tl {
-    @include keyframes (flip-out-diag-2-tl) {
+    @include keyframes(flip-out-diag-2-tl) {
         0% {
             transform: rotate3d(1, 1, 0, 0deg);
             opacity: 1;
@@ -114,7 +114,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flip-out-diag-2-br {
-    @include keyframes (flip-out-diag-2-br) {
+    @include keyframes(flip-out-diag-2-br) {
         0% {
             transform: rotate3d(1, 1, 0, 0deg);
             opacity: 1;

package/sass/animations/exits/_puff.scss

@@ -9,7 +9,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-center {
-    @include keyframes (puff-out-center) {
+    @include keyframes(puff-out-center) {
         0% {
             transform: scale(1);
             filter: blur(0);
@@ -26,7 +26,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-top {
-    @include keyframes (puff-out-top) {
+    @include keyframes(puff-out-top) {
         0% {
             transform: scale(1);
             transform-origin: 50% 0%;
@@ -45,7 +45,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-tr {
-    @include keyframes (puff-out-tr) {
+    @include keyframes(puff-out-tr) {
         0% {
             transform: scale(1);
             transform-origin: 100% 0%;
@@ -64,7 +64,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-right {
-    @include keyframes (puff-out-right) {
+    @include keyframes(puff-out-right) {
         0% {
             transform: scale(1);
             transform-origin: 100% 50%;
@@ -83,7 +83,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-br {
-    @include keyframes (puff-out-br) {
+    @include keyframes(puff-out-br) {
         0% {
             transform: scale(1);
             transform-origin: 100% 100%;
@@ -102,7 +102,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-bottom {
-    @include keyframes (puff-out-bottom) {
+    @include keyframes(puff-out-bottom) {
         0% {
             transform: scale(1);
             transform-origin: 50% 100%;
@@ -121,7 +121,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-ver {
-    @include keyframes (puff-out-ver) {
+    @include keyframes(puff-out-ver) {
         0% {
             transform: scaleY(1);
             filter: blur(0);
@@ -138,7 +138,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-hor {
-    @include keyframes (puff-out-hor) {
+    @include keyframes(puff-out-hor) {
         0% {
             transform: scaleX(1);
             filter: blur(0);
@@ -155,7 +155,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-tl {
-    @include keyframes (puff-out-tl) {
+    @include keyframes(puff-out-tl) {
         0% {
             transform: scale(1);
             transform-origin: 0% 0%;
@@ -174,7 +174,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-left {
-    @include keyframes (puff-out-left) {
+    @include keyframes(puff-out-left) {
         0% {
             transform: scale(1);
             transform-origin: 0% 50%;
@@ -193,7 +193,7 @@
 
 /// @requires {mixin} keyframes
 @mixin puff-out-bl {
-    @include keyframes (puff-out-bl) {
+    @include keyframes(puff-out-bl) {
         0% {
             transform: scale(1);
             transform-origin: 0% 100%;

package/sass/animations/exits/_roll.scss

@@ -9,7 +9,7 @@
 
 /// @requires {mixin} keyframes
 @mixin roll-out-left {
-    @include keyframes (roll-out-left) {
+    @include keyframes(roll-out-left) {
         0% {
             transform: translateX(0) rotate(0deg);
             opacity: 1;
@@ -24,7 +24,7 @@
 
 /// @requires {mixin} keyframes
 @mixin roll-out-top {
-    @include keyframes (roll-out-top) {
+    @include keyframes(roll-out-top) {
         0% {
             transform: translateY(0) rotate(0deg);
             opacity: 1;
@@ -39,7 +39,7 @@
 
 /// @requires {mixin} keyframes
 @mixin roll-out-right {
-    @include keyframes (roll-out-right) {
+    @include keyframes(roll-out-right) {
         0% {
             transform: translateX(0) rotate(0deg);
             opacity: 1;
@@ -54,7 +54,7 @@
 
 /// @requires {mixin} keyframes
 @mixin roll-out-bottom {
-    @include keyframes (roll-out-bottom) {
+    @include keyframes(roll-out-bottom) {
         0% {
             transform: translateY(0) rotate(0deg);
             opacity: 1;