igniteui-theming 1.0.0-release → 1.0.0

package/index.js

@@ -0,0 +1,5 @@
+export { default as Palettes } from "./json/colors/presets/palettes.json";
+export { default as PaletteMeta } from "./json/colors/meta/palette.json";
+export { default as PaletteMultipliers } from "./json/colors/meta/multipliers.json";
+export { default as Typescales } from "./json/typography/presets/typescales.json";
+export { default as Elevations } from "./json/elevations/elevations.json";

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/json/colors/presets/palettes.json

@@ -1 +1 @@
-{"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#333","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#0078d4","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"hsl(262deg 8% 98%)","surface":"#2a2b2f","info":"#9208bc","success":"#689f38","warn":"#ff9800","error":"#cf1a2b"},"dark-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#0078d4","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"hsl(236deg 8% 5%)","surface":"#fff","info":"#9208bc","success":"#689f38","warn":"#ff9800","error":"#cf1a2b"},"light-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"}}
+{"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#333","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"hsl(262deg 8% 98%)","surface":"#2a2b2f","info":"#9208bc","success":"#689f38","warn":"#ff9800","error":"#cf1a2b"},"dark-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"hsl(236deg 8% 5%)","surface":"#fff","info":"#9208bc","success":"#689f38","warn":"#ff9800","error":"#cf1a2b"},"light-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"}}

package/package.json

@@ -1,17 +1,34 @@
 {
   "name": "igniteui-theming",
-  "version": "1.0.0-release",
+  "version": "1.0.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": {
-    "clean": "rimraf \"json/\"",
+    "clean": "npm run clean:json && npm run clean:docs",
+    "clean:json": "rimraf \"json/\"",
+    "clean:docs": "rimraf \"docs/\"",
     "build": "npm run build:json && npm run build:e2e",
-    "build:docs": "npx sassdoc ./sass",
+    "build:docs": "npm run clean:docs && npm run build:docs:en:production",
+    "build:docs:en:production": "set NODE_ENV=production && npx sassdoc ./sass -d docs",
+    "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": "npm run lint:styles && npm run lint:prettier",
+    "lint:styles": "stylelint ./sass/**/*.scss",
+    "lint:prettier": "prettier \"./sass/**/*.scss\" --check --ignore-path .gitignore",
     "test": "jest",
-    "serve:docs": "npx http-server ./sassdoc"
+    "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": {
+    "sass/**/*.{scss,css}": [
+      "npm run format"
+    ]
   },
   "files": [
     "/sass",
@@ -39,24 +56,37 @@
   "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"
-    }
+    },
+    "./sass/**/*.*": "./sass/**/*.*"
   },
   "devDependencies": {
-    "globby": "^13.1.2",
-    "jest": "^28.1.1",
-    "postcss": "^8.4.14",
-    "rimraf": "^3.0.2",
+    "globby": "^13.1.4",
+    "husky": "^8.0.3",
+    "igniteui-sassdoc-theme": "^1.1.6",
+    "jest": "^29.5.0",
+    "jest-environment-node-single-context": "^29.0.0",
+    "lunr": "^2.3.9",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
+    "rimraf": "^4.4.1",
     "sass-export": "^2.1.2",
-    "sass-true": "^6.1.0",
-    "stylelint": "^14.9.1",
-    "stylelint-config-standard-scss": "^4.0.0",
-    "stylelint-scss": "^4.2.0"
+    "sass-true": "^7.0.0",
+    "sassdoc-plugin-localization": "^1.4.3",
+    "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.58.1"
   }
 }

package/sass/animations/_easings.scss

@@ -1,77 +1,78 @@
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// @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/_mixins.scss

@@ -3,11 +3,16 @@
 @use 'sass:map';
 @use 'sass:string';
 
+////
+/// @package theming
+/// @group animations
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
 $keyframes: () !default;
 
 /// Registers a keyframes animation in the keyframes registry.
-/// @access public
-/// @group animations
 /// @param {String} $name - The name of the keyframes animation.
 @mixin keyframes($name) {
     $keyframe: map.has-key($keyframes, $name);
@@ -25,8 +30,6 @@ $keyframes: () !default;
 }
 
 /// Animates an element.
-/// @access public
-/// @group animations
 /// @param {List} $animate - The list of animation properties.
 /// @example scss - Animating an element
 ///  @include fade-in(); // include the 'fade-in' keyframes animation mixin

package/sass/animations/entrances/_bounce.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -210,7 +211,7 @@
         }
 
         55% {
-            transform: scale(.7);
+            transform: scale(0.7);
             animation-timing-function: ease-in;
         }
 
@@ -220,7 +221,7 @@
         }
 
         81% {
-            transform: scale(.84);
+            transform: scale(0.84);
             animation-timing-function: ease-in;
         }
 
@@ -230,7 +231,7 @@
         }
 
         95% {
-            transform: scale(.95);
+            transform: scale(0.95);
             animation-timing-function: ease-in;
         }
 

package/sass/animations/entrances/_fade.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_flicker.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -244,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%);
         }
 
@@ -270,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% {
@@ -298,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/entrances/_flip.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_puff.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_roll.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_rotate.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_scale.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_slide.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_slit.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_swing.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_swirl.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_bounce.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -8,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;
@@ -57,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;
@@ -106,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;
@@ -155,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;
@@ -204,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;
@@ -254,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/_fade.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_flicker.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -8,7 +9,7 @@
 
 /// @requires {mixin} keyframes
 @mixin flicker-out-1 {
-    @include keyframes (flicker-out-1) {
+    @include keyframes(flicker-out-1) {
         0% {
             opacity: 1;
         }
@@ -153,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% {
@@ -184,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% {
@@ -212,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%);
         }