@appartmint/mint 2.10.16 → 2.10.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appartmint/mint",
   "author": "App Art Mint LLC",
-  "version": "2.10.16",
+  "version": "2.10.18",
   "license": "MIT",
   "description": "The front-end TS/SCSS framework of App Art Mint",
   "keywords": [

package/src/scss/imports/components/widget/_card.scss

@@ -16,8 +16,8 @@
 	height: 100%;
 	max-width: 100%;
 	margin: 0;
-	border-radius: $card-radius;
-	box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
+	border-radius: css-var(card-radius);
+	box-shadow: css-var(card-shadow-size) css-var(card-shadow-color);
 	overflow: hidden;
 
 	@include break(sm) {
@@ -32,7 +32,7 @@
 		box-shadow: none;
 
 		#{class(content)} {
-			box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
+			box-shadow: css-var(card-shadow-size) css-var(card-shadow-color);
 		}
 	}
 
@@ -91,10 +91,10 @@
 			overflow: visible;
 
 			& > #{class(image)} {
-				width: calc(50% + $card-padding);
+				width: calc(50% + css-var(card-padding));
 				height: fit-content;
-				margin-right: $card-padding * -2;
-				border-radius: $card-radius;
+				margin-right: calc(css-var(card-padding) * -2);
+				border-radius: css-var(card-radius);
 
 				img {
 					height: 100%;
@@ -103,11 +103,11 @@
 			}
 
 			& > #{class(content)} {
-				width: calc(50% + $card-padding);
 				height: fit-content;
-				margin-top: $card-padding * 2;
-				border-radius: $card-radius;
-				box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
+				width: calc(50% + css-var(card-padding));
+				margin-top: calc(2 * css-var(card-padding));
+				border-radius: css-var(card-radius);
+				box-shadow: css-var(card-shadow-size) css-var(card-shadow-color);
 			}
 		}
 
@@ -117,7 +117,7 @@
 
 				& > #{class(image)} {
 					margin-right: 0;
-					margin-left: $card-padding * -2;
+					margin-left: calc(css-var(card-padding) * -2);
 				}
 			}
 		}
@@ -146,8 +146,8 @@
 		flex-direction: column;
 		gap: math.div($grid-gap, 2);
 		position: relative;
-		padding: $card-padding;
-		background: css-var($card-bg-color);
+		padding: css-var(card-padding);
+		background: css-var(card-back);
 		width: 100%;
 		overflow: hidden;
 
@@ -162,7 +162,7 @@
 		flex-direction: column;
 		align-items: center;
 		height: fit-content;
-		gap: $card-padding;
+		gap: css-var(card-padding);
 		text-align: center;
 
 		@include break(xs) {
@@ -177,12 +177,12 @@
 		& > #{class(image)} {
 			width: 100%;
 			height: 100%;
-			max-width: $card-logo-size;
-			max-height: $card-logo-size;
+			max-width: css-var(card-logo-size);
+			max-height: css-var(card-logo-size);
 
 			&#{class(large)} {
-				max-width: $card-logo-size * 2;
-				max-height: $card-logo-size * 2;
+				max-width: calc(2 * css-var(card-logo-size));
+				max-height: calc(2 * css-var(card-logo-size));
 			}
 
 			img {
@@ -197,10 +197,10 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			min-width: $card-logo-size;
-			max-width: $card-logo-size;
+			min-width: css-var(card-logo-size);
+			max-width: css-var(card-logo-size);
 			margin: 0;
-			font-size: calc($card-logo-size - 1rem);
+			font-size: calc(css-var(card-logo-size) - 1rem);
 		}
 
 		& > div {
@@ -222,7 +222,7 @@
 
 	&-grid {
 		position: relative;
-		background: css-var($card-bg-color);
+		background: css-var(card-back);
 
 		&:has(#{class(image)}) {
 			#{class(content)} {

package/src/scss/imports/global/_texture.scss

@@ -87,7 +87,7 @@
 
 #{class(frame)} {
     height: fit-content;
-	background-color: css-var($card-bg-color);
+	background-color: css-var(card-back);
 
     @extend #{class(border)};
     @if $texture-border-image {

package/src/scss/imports/global/_themes.scss

@@ -5,6 +5,7 @@
 @charset 'utf-8';
 
 /// Imports
+@use 'sass:meta';
 @use '../util' as *;
 
 /// Global theme
@@ -52,6 +53,19 @@
 	@include css-var(spacing, 0.25rem);
 	@include css-var(flex-gap, calc(css-var(spacing) * 2));
 
+	/// Cards
+	@include css-var(card-padding, $card-padding);
+	@include css-var(card-radius, $card-radius);
+	@include css-var(card-shadow-color, $card-shadow-color);
+	@include css-var(card-shadow-size, $card-shadow-size);
+	@include css-var(card-logo-size, $card-logo-size);
+
+	@if (meta.type-of($card-back) == 'color') {
+		@include css-var(card-back, $card-back);
+	} @else {
+		@include css-var-ref(card-back, $card-back);
+	}
+
 	/// Tooltips
 	@include css-var-ref(tooltip-fore, fore);
 	@include css-var-ref(tooltip-back, black-2);

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

@@ -139,7 +139,7 @@ $pill-radius: $border-radius !default;
 $pill-pad-h: 0.75rem !default;
 
 /// Cards
-$card-bg-color: back !default;
+$card-back: back !default;
 $card-padding: 1.5rem !default;
 $card-radius: $border-radius !default;
 $card-shadow-color: $shadow-color !default;