@appartmint/mint 1.3.2 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appartmint/mint",
   "author": "App Art Mint LLC",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "The front-end TS/SCSS framework of App Art Mint",
   "keywords": [
@@ -26,82 +26,39 @@
     "src/**/*.scss",
     "dist/**/*.{css,js,d.ts,map}"
   ],
-  "directories": {
-    "dist": "dist",
-    "doc": "docs",
-    "src": "src",
-    "test": "test"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "config": {
-    "dirs": {
-      "doc": "docs",
-      "src": "src",
-      "scss": "scss",
-      "dist": "dist"
-    },
-    "webpack": "node_modules/@appartmint/config/dist/js/webpack.config.min.js"
-  },
   "scripts": {
-    "upgrade": "npm up -D @appartmint/config && mint-config",
-    "prepare": "npm-run-all clean bundle",
     "preversion": "npm i && npm run test",
     "version": "git add -A",
-    "postversion": "git push && git push --tags && npm run endversion --if-present",
-    "clean": "cross-var rimraf $npm_package_config_dirs_dist $npm_package_config_dirs_doc",
+    "postversion": "git push && git push --tags && gh release create v$npm_package_version --generate-notes",
+    "prepare": "npm-run-all clean bundle",
+    "clean": "rimraf dist doc",
     "clear": "npm run clean",
     "bundle": "npm-run-all build build:**",
-    "build": "cross-var webpack --config $npm_package_config_webpack",
+    "build": "webpack --config src/config/webpack.config.js",
     "build:prod": "cross-env NODE_ENV=production npm run build",
-    "build:index": "cross-env BUILD_MODE=index npm run build",
-    "build:index:prod": "cross-env NODE_ENV=production BUILD_MODE=index npm run build",
-    "build:config": "cross-env BUILD_MODE=config npm run build",
-    "build:config:prod": "cross-env NODE_ENV=production BUILD_MODE=config npm run build",
     "build:tsdoc": "typedoc",
-    "build:sassdoc": "cross-var \"sassdoc $npm_package_config_dirs_src/$npm_package_config_dirs_scss -p > $npm_package_config_dirs_doc/sassdoc.json\"",
-    "serve": "cross-var webpack serve --config $npm_package_config_webpack",
     "watch": "npm run build -- --watch",
     "watch:prod": "cross-env NODE_ENV=production npm run watch",
     "watch:tsdoc": "npm run build:tsdoc -- --watch",
-    "test": "echo-cli \"\\nRun tests here!\\n\"",
-    "relink": "npm r -g @appartmint/mint && npm link",
-    "upgrade:config": "npm up -D @appartmint/config && mint-config"
+    "test": "echo-cli \"\\nRun tests here!\\n\""
   },
   "devDependencies": {
-    "@appartmint/config": "^0.7.0",
-    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
-    "babel-loader": "^9.0.1",
-    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
-    "cross-var": "^1.1.0",
-    "css-loader": "^6.7.1",
+    "css-loader": "^7.1.2",
     "echo-cli": "^2.0.0",
-    "jasmine-core": "^4.5.0",
-    "karma": "^6.4.1",
-    "karma-babel-preprocessor": "^8.0.2",
-    "karma-chrome-launcher": "^3.1.1",
-    "karma-jasmine": "^5.1.0",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-typescript-preprocessor": "^0.4.0",
-    "karma-webpack": "^5.0.0",
-    "mini-css-extract-plugin": "^2.6.1",
+    "mini-css-extract-plugin": "^2.9.2",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^3.0.2",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.1.0",
-    "sassdoc": "^2.7.4",
-    "ts-loader": "^9.4.1",
-    "ts-node": "^10.9.1",
-    "typedoc": "^0.23.19",
-    "typescript": "^4.8.4",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-lowercase-name": "^1.0.4",
-    "webpack-node-externals": "^3.0.0",
-    "webpack-remove-empty-scripts": "^1.0.1",
-    "webpack-shebang-plugin": "^1.1.8"
+    "rimraf": "^6.0.1",
+    "sass": "^1.83.1",
+    "sass-loader": "^16.0.4",
+    "ts-loader": "^9.5.1",
+    "typedoc": "^0.27.6",
+    "typescript": "^5.5.4",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-remove-empty-scripts": "^1.0.4"
   }
 }

package/src/scss/imports/global/_animations.scss

@@ -14,7 +14,7 @@
 /// Cycle through instagram colors
 @keyframes instafade {
     @for $i from 0 through 6 {
-        $percent: percentage(math.div($i, 6));
+        $percent: math.percentage(math.div($i, 6));
         #{$percent} {
             color: css-var(instagram-#{$i});
         }

package/src/scss/imports/global/_global.scss

@@ -1,4 +1,6 @@
 /// Imports
+@use 'sass:map';
+@use 'sass:meta';
 @use '../util' as *;
 
 /// Global styles
@@ -52,7 +54,7 @@ app-root {
 	opacity: 0;
 	transition: opacity 750ms ease-in;
 	
-	@if (type-of($root-bg-image) == 'string') {
+	@if (meta.type-of($root-bg-image) == 'string') {
 		&::before {
 			content: '';
 			position: absolute;
@@ -62,15 +64,15 @@ app-root {
 			height: 100%;
 			background-image: url($root-bg-image);
 
-			@if (type-of($root-bg-size) != 'null') {
+			@if (meta.type-of($root-bg-size) != 'null') {
 				background-size: $root-bg-size;
 			}
 
-			@if (type-of($root-bg-position) != 'null') {
+			@if (meta.type-of($root-bg-position) != 'null') {
 				background-position: $root-bg-position;
 			}
 			
-			@if (type-of($root-bg-filter) != 'null') {
+			@if (meta.type-of($root-bg-filter) != 'null') {
 				filter: $root-bg-filter;
 			}
 		}
@@ -103,7 +105,7 @@ main {
 				width: 100%;
 				padding: 0.25rem;
 
-				@include fluid(padding, map-get($break, xs) * 1px, map-get($break, sm) * 1px, 4px, 16px);
+				@include fluid(padding, map.get($break, xs) * 1px, map.get($break, sm) * 1px, 4px, 16px);
 
 				&+:not(#{prefix(partial-footer)}) {
 					height: 0;

package/src/scss/imports/global/_text.scss

@@ -5,6 +5,7 @@
 @charset 'utf-8';
 
 /// Imports
+@use 'sass:map';
 @use '../util' as *;
 
 /// Text Styles
@@ -34,17 +35,17 @@ p {
 	}
 }
 
-@each $tag in map-keys($font-size-mobile) {
+@each $tag in map.keys($font-size-mobile) {
     #{$tag}, #{class($tag)} {
         margin: 1rem 0;
-        font-size: min(map-get($font-size-tiny, $tag), map-get($font-size-mobile, $tag));
+        font-size: min(map.get($font-size-tiny, $tag), map.get($font-size-mobile, $tag));
 
         @include break(xs) {
-            font-size: map-get($font-size-mobile, $tag);
+            font-size: map.get($font-size-mobile, $tag);
         }
 
         @include break(md) {
-            font-size: map-get($font-size-desktop, $tag);
+            font-size: map.get($font-size-desktop, $tag);
         }
     }
 }

package/src/scss/imports/util/_util.scss

@@ -5,7 +5,10 @@
 
 /// Imports
 @use 'sass:color';
+@use 'sass:list';
+@use 'sass:map';
 @use 'sass:math';
+@use 'sass:meta';
 @use 'sass:string';
 
 /// Library name
@@ -154,7 +157,7 @@ $bootstrap5: false !default;
 /// @param {String} $base - the string to be prefixed
 /// @return {String} - a prefixed string
 @function prefix ($base) {
-	@if (type-of($base) != 'string') {
+	@if (meta.type-of($base) != 'string') {
 		@error 'The prefix function requires a string value.';
 	}
 
@@ -176,7 +179,7 @@ $bootstrap5: false !default;
 /// @param {String} $base - the string to be prefixed
 /// @return {String} - a prefixed string
 @function css-prefix ($base) {
-	@if (type-of($base) != 'string') {
+	@if (meta.type-of($base) != 'string') {
 		@error 'The css-prefix function requires a string value.';
 	}
 
@@ -196,7 +199,7 @@ $bootstrap5: false !default;
 /// @param {String} $base - the CSS-var to create a call for
 /// @return {String} - a CSS-var call
 @function css-var ($base) {
-	@if (type-of($base) != 'string') {
+	@if (meta.type-of($base) != 'string') {
 		@error 'The css-var function requires a string value.';
 	}
 
@@ -216,7 +219,7 @@ $bootstrap5: false !default;
 /// @param {String} $base - the CSS-selector to negate
 /// @return {String} - a negated CSS-selector
 @function neg ($base) {
-	@if (type-of($base) != 'string') {
+	@if (meta.type-of($base) != 'string') {
 		@error 'The neg function requires a string value.';
 	}
 
@@ -232,7 +235,7 @@ $bootstrap5: false !default;
 /// @param {String} $base - the name of the class
 /// @return {String} - a class selector
 @function class($base) {
-	@if (type-of($base) != 'string') {
+	@if (meta.type-of($base) != 'string') {
 		@error 'The class function requires a string value.';
 	}
 
@@ -249,11 +252,11 @@ $bootstrap5: false !default;
 /// @param {String} $op - the comparison operator
 /// @return {String} - an id selector
 @function id ($base, $op: '=') {
-	@if (type-of($base) != 'string') {
+	@if (meta.type-of($base) != 'string') {
 		@error 'The id function requires a string value.';
 	}
 
-	@if (type-of($op) != 'string') {
+	@if (meta.type-of($op) != 'string') {
 		@error 'The controls function requires a string value for param 2.';
 	}
 
@@ -278,11 +281,11 @@ $bootstrap5: false !default;
 /// @param {String} $op - the comparison operator
 /// @return {String} - an aria-controls selector
 @function controls ($id, $op: '=') {
-	@if (type-of($id) != 'string') {
+	@if (meta.type-of($id) != 'string') {
 		@error 'The controls function requires a string value for param 1.';
 	}
 
-	@if (type-of($op) != 'string') {
+	@if (meta.type-of($op) != 'string') {
 		@error 'The controls function requires a string value for param 2.';
 	}
 
@@ -302,7 +305,7 @@ $bootstrap5: false !default;
 /// @param {Bool} $bool - the value of the selector
 /// @return {String} - an aria-expanded selector
 @function expanded ($bool) {
-	@if (type-of($bool) == 'string') {
+	@if (meta.type-of($bool) == 'string') {
 		$bool: string.to-lower-case($bool);
 
 		@if not($bool == 'true' or $bool == 'false') {
@@ -310,7 +313,7 @@ $bootstrap5: false !default;
 		}
 	}
 
-	@else if (type-of($bool) != 'bool') {
+	@else if (meta.type-of($bool) != 'bool') {
 		@error 'The expanded function requires a boolean value.';
 	}
 
@@ -326,7 +329,7 @@ $bootstrap5: false !default;
 /// @param {Bool} $bool - the value of the selector
 /// @return {String} - an aria-hidden selector
 @function hidden ($bool) {
-	@if (type-of($bool) == 'string') {
+	@if (meta.type-of($bool) == 'string') {
 		$bool: string.to-lower-case($bool);
 
 		@if not($bool == 'true' or $bool == 'false') {
@@ -334,7 +337,7 @@ $bootstrap5: false !default;
 		}
 	}
 
-	@else if (type-of($bool) !='bool') {
+	@else if (meta.type-of($bool) !='bool') {
 		@error 'The hidden function requires a boolean value. Received: #{$bool}';
 	}
 
@@ -350,7 +353,7 @@ $bootstrap5: false !default;
 /// @param {Number} $val - the number of ms to return
 /// @return {Number} the number as ms
 @function ms ($val) {
-	@if (type-of($val) != 'number') {
+	@if (meta.type-of($val) != 'number') {
 		@error 'The ms function requires a number value.';
 	}
 
@@ -366,7 +369,7 @@ $bootstrap5: false !default;
 /// @param {Number} $val - the number of px to return
 /// @return {Number} - the number as px
 @function px ($val) {
-	@if (type-of($val) != 'number') {
+	@if (meta.type-of($val) != 'number') {
 		@error 'The px function requires a number value.';
 	}
 
@@ -382,7 +385,7 @@ $bootstrap5: false !default;
 /// @param {Number} $val - the value to strip
 /// @return {Number} - the number without units
 @function strip-unit($val) {
-	@if (type-of($val) != 'number') {
+	@if (meta.type-of($val) != 'number') {
 		@error 'The strip-unit function requires a number value.';
 	}
 
@@ -401,7 +404,7 @@ $bootstrap5: false !default;
 /// @throws {Error} - if the values are not numbers
 /// @throws {Error} - if the divisor is 0
 @function percent($dividend, $divisor, $padding: 0) {
-	@if (type-of($dividend) != 'number' or type-of($divisor) != 'number' or type-of($padding) != 'number') {
+	@if (meta.type-of($dividend) != 'number' or meta.type-of($divisor) != 'number' or meta.type-of($padding) != 'number') {
 		@error 'The percent function requires number parameters.';
 	}
 
@@ -425,11 +428,11 @@ $bootstrap5: false !default;
 /// @param {Number} $key - the key of the delay to use
 /// @return {Number} - the delay value as ms
 @function delay($key) {
-	@if not(map-has-key($delay, $key)) {
+	@if not(map.has-key($delay, $key)) {
 		@error 'The delay function requires one of the following values: #{map-keys($delay)}';
 	}
 
-	@return ms(map-get($delay, $key));
+	@return ms(map.get($delay, $key));
 }
 
 /// Returns the requested breakpoint value as px
@@ -441,11 +444,11 @@ $bootstrap5: false !default;
 /// @param {Number} $key - the key of the breakpoint to use
 /// @return {Number} - the breakpoint value as px
 @function break($key) {
-	@if not(map-has-key($break, $key)) {
+	@if not(map.has-key($break, $key)) {
 		@error 'The break function requires one of the following values: #{map-keys($break)}';
 	}
 
-	@return px(map-get($break, $key));
+	@return px(map.get($break, $key));
 }
 
 /// Creates a prefixed CSS var definition
@@ -458,7 +461,7 @@ $bootstrap5: false !default;
 /// @param {Any} $val - the value of the CSS var
 /// @output a prefixed CSS var definition
 @mixin css-var ($key, $val) {
-	@if (type-of($key) != 'string') {
+	@if (meta.type-of($key) != 'string') {
 		@error 'The css-var mixin requires a string for the $key argument.';
 	}
 
@@ -479,7 +482,7 @@ $bootstrap5: false !default;
 /// @param {String} $key2 - the key of the referenced CSS var
 /// @output a prefixed CSS var reference
 @mixin css-var-ref ($key1, $key2) {
-	@if (type-of($key1) != 'string' or type-of($key2) != 'string') {
+	@if (meta.type-of($key1) != 'string' or meta.type-of($key2) != 'string') {
 		@error 'The css-var-ref mixin requires string values for both parameters.';
 	}
 
@@ -498,11 +501,11 @@ $bootstrap5: false !default;
 /// @param {String} $max - the key of the breakpoint to use with max-width
 /// @output the provided content wrapped in a media query
 @mixin break ($min, $max: null) {
-	@if not(map-has-key($break, $min) and (type-of($max) == 'null' or map-has-key($break, $max))) {
+	@if not(map.has-key($break, $min) and (meta.type-of($max) == 'null' or map.has-key($break, $max))) {
 		@error 'The break mixin requires one or two of the following values: #{map-keys($break)}';
 	}
 
-	@if (map-has-key($break, $max)) {
+	@if (map.has-key($break, $max)) {
 		@media (min-width: break($min)) and (max-width: break($max)) {
 			@content;
 		}
@@ -516,11 +519,11 @@ $bootstrap5: false !default;
 }
 
 @mixin break-max ($max, $min: null) {
-	@if not(map-has-key($break, $max) and (type-of($min) == 'null' or map-has-key($break, $min))) {
+	@if not(map.has-key($break, $max) and (meta.type-of($min) == 'null' or map.has-key($break, $min))) {
 		@error 'The break-max mixin requires one or two of the following values: #{map-keys($break)}';
 	}
 
-	@if (map-has-key($break, $min)) {
+	@if (map.has-key($break, $min)) {
 		@media (min-width: break($min)) and (max-width: break($max)) {
 			@content;
 		}
@@ -572,7 +575,7 @@ $bootstrap5: false !default;
 /// @param {Any} $none - the inactive value of the property
 /// @output utility selectors for the given property at each breakpoint
 @mixin break-util ($prop, $val, $none: "none") {
-	@if (type-of($prop) !='string') {
+	@if (meta.type-of($prop) !='string') {
 		@error 'The break-util mixin requires a string for the $prop argument.';
 	}
 
@@ -607,7 +610,7 @@ $bootstrap5: false !default;
 ///    @include box-util(margin, 1rem, 0);    // ->   & {
 /// 
 @mixin box-util ($prop, $val) {
-	@if (type-of($prop) != 'string') {
+	@if (meta.type-of($prop) != 'string') {
 		@error 'The box-util mixin requires a string for the $prop argument.';
 	}
 
@@ -745,16 +748,16 @@ $bootstrap5: false !default;
 /// @param {String} $max-size - the maximum value of the fluid property
 /// @output the definitions for the property at different screen sizes
 @mixin fluid ($prop, $min-vw, $max-vw, $min-size, $max-size) {
-	$u1: unit($min-vw);
-	$u2: unit($max-vw);
-	$u3: unit($min-size);
-	$u4: unit($max-size);
+	$u1: math.unit($min-vw);
+	$u2: math.unit($max-vw);
+	$u3: math.unit($min-size);
+	$u4: math.unit($max-size);
 
-	@if (type-of($prop) !='string') {
+	@if (meta.type-of($prop) !='string') {
 		@error 'The fluid mixin requires a string for the $prop argument.';
 	}
 
-	@if not(type-of($u1) == 'string' and type-of($u2) == 'string' and type-of($u3) == 'string' and type-of($u4) == 'string') {
+	@if not(meta.type-of($u1) == 'string' and meta.type-of($u2) == 'string' and meta.type-of($u3) == 'string' and meta.type-of($u4) == 'string') {
 		@error 'The fluid mixin requires numbers with units for the width and size arguments.';
 	}
 
@@ -787,11 +790,11 @@ $bootstrap5: false !default;
 /// @param {Boolean} $alpha - whether to generate alpha variations
 /// @output css variables for different shades of the source color
 @mixin shades ($name, $color, $type: both, $number: 7, $amount: 10%, $alpha: false) {
-	@if (type-of($name) != 'string') {
+	@if (meta.type-of($name) != 'string') {
 		@error 'The shades mixin requires a string for the $name argument.';
 	}
 
-	@if (type-of($color) != 'color') {
+	@if (meta.type-of($color) != 'color') {
 		@error 'The shades mixin requires a color for the $color argument.';
 	}
 
@@ -799,11 +802,11 @@ $bootstrap5: false !default;
 		@error 'The shades mixin requires a string of "lighten", "darken", or "both" for the $type argument.';
 	}
 
-	@if (type-of($number) != 'number') {
+	@if (meta.type-of($number) != 'number') {
 		@error 'The shades mixin requires a number for the $number argument.';
 	}
 
-	@if (type-of($alpha) == 'string') {
+	@if (meta.type-of($alpha) == 'string') {
 		$bool: string.to-lower-case($bool);
 
 		@if not($bool == 'true' or $bool == 'false') {
@@ -811,7 +814,7 @@ $bootstrap5: false !default;
 		}
 	}
 
-	@else if (type-of($alpha) != 'bool') {
+	@else if (meta.type-of($alpha) != 'bool') {
 		@error 'The shades mixin requires a boolean value for the $alpha argument. Received: #{$bool}';
 	}
 
@@ -848,27 +851,27 @@ $bootstrap5: false !default;
 	@else {
 		@if ($type == lighten) {
 			@for $i from 0 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, lighten($color, $i * $amount));
+				@include css-var(#{$name}-#{$i}, color.adjust($color, $lightness: $i * $amount));
 			}
 		}
 
 		@else if ($type == darken) {
 			@for $i from 0 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, darken($color, $i * $amount));
+				@include css-var(#{$name}-#{$i}, color.adjust($color, $lightness: $i * -$amount));
 			}
 		}
 
 		@else if ($type == both) {
-			$num-light: floor(math.div($number, 2));
+			$num-light: math.floor(math.div($number, 2));
 
 			@for $i from 0 through $num-light - 1 {
-				@include css-var(#{$name}-#{$i}, lighten($color, ($num-light - $i) * $amount));
+				@include css-var(#{$name}-#{$i}, color.adjust($color, $lightness: ($num-light - $i) * $amount));
 			}
 
 			@include css-var(#{$name}-#{$num-light}, $color);
 
 			@for $i from $num-light + 1 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, darken($color, ($i - $num-light) * $amount));
+				@include css-var(#{$name}-#{$i}, color.adjust($color, $lightness: ($i - $num-light) * -$amount));
 			}
 		}
 	}
@@ -877,24 +880,24 @@ $bootstrap5: false !default;
 /// TODO: Document this
 @mixin states ($states...) {
 	@each $state in $states {
-		@if (type-of($state) != 'string') {
+		@if (meta.type-of($state) != 'string') {
 			@error 'The states mixin requires a string for each state argument.';
 		}
 	}
 
-	@if (index($states, 'hover') != null) {
+	@if (list.index($states, 'hover') != null) {
 		&:hover {
 			@content;
 		}
 	}
 
-	@if (index($states, 'focus') != null) {
+	@if (list.index($states, 'focus') != null) {
 		&:focus-visible {
 			@content;
 		}
 	}
 
-	@if (index($states, 'active') != null) {
+	@if (list.index($states, 'active') != null) {
 
 		&:active,
 		&#{class(active)} {
@@ -902,19 +905,19 @@ $bootstrap5: false !default;
 		}
 	}
 
-	@if (index($states, 'visited') != null) {
+	@if (list.index($states, 'visited') != null) {
 		&:visited {
 			@content;
 		}
 	}
 
-	@if (index($states, 'disabled') != null) {
+	@if (list.index($states, 'disabled') != null) {
 		&:disabled {
 			@content;
 		}
 	}
 
-	@if (index($states, 'expanded') != null) {
+	@if (list.index($states, 'expanded') != null) {
 		&#{expanded(true)} {
 			@content;
 		}

package/src/scss/imports/util/_vars.scss

@@ -4,6 +4,9 @@
 /// @group Vars
 @charset 'utf-8';
 
+/// Imports
+@use 'sass:color';
+
 /// Global Colors
 $bitcoin: #FF9900;
 $ethereum: #3C3C3D;
@@ -45,8 +48,8 @@ $danger: #ff4d4d !default;
 $warning: #ffaa22 !default;
 $info: $brand !default;
 
-$fore: lighten($black, 10%) !default;
-$back: darken($white, 10%) !default;
+$fore: color.adjust($black, $lightness: 10%) !default;
+$back: color.adjust($white, $lightness: -10%) !default;
 
 /// Fonts
 $font-primary: sans-serif !default;