@appartmint/mint 1.0.7 → 1.0.8

package/package.json

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

package/src/scss/imports/_index.scss

@@ -1,8 +1,10 @@
-/// _index.scss - Loads every scss style file in the Mint library
+/// _index.scss - Forward all overrides
 /// @author App Art Mint LLC
 /// 
-/// @group Mint
+/// @group Index
+@charset 'utf-8';
 
 /// Imports
 @use './components';
 @use './global';
+@use './overrides';

package/src/scss/imports/components/_index.scss

@@ -1,3 +1,10 @@
+/// _index.scss - Forward all overrides
+/// @author App Art Mint LLC
+/// 
+/// @group Index
+@charset 'utf-8';
+
+/// Imports
 @use './backgrounds';
 @use './buttons';
 @use './cards';

package/src/scss/imports/overrides/_amplify.scss

@@ -0,0 +1,45 @@
+/// _amplify.scss - Amplify styles
+/// @author App Art Mint LLC
+/// 
+/// @group Overrides
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Amplify Styles
+:root:root:root {
+	--amplify-colors-background-error: #{css-var(glow-0)};
+	--amplify-colors-border-primary: #{css-var(brand-1)};
+	--amplify-colors-border-focus: #{css-var(brand-3)};
+	--amplify-colors-font-hover: #{css-var(brand-0)};
+	--amplify-colors-font-interactive: #{css-var(brand-1)};
+	--amplify-colors-font-primary: #{css-var('white')};
+	--amplify-colors-font-secondary: #{css-var(brand-0)};
+	--amplify-colors-font-error: #{css-var(danger)};
+	--amplify-colors-font-warning: #{css-var(warning)};
+	--amplify-colors-font-success: #{css-var(success)};
+	--amplify-colors-font-info: #{css-var(info)};
+
+	--amplify-border-widths-small: $border-width;
+}
+
+[data-amplify-authenticator] {
+	[data-amplify-container] {
+		@extend .mint-card !optional;
+
+		[data-amplify-router] {
+			@extend .mint-content !optional;
+			border: none;
+		}
+	}
+}
+
+[amplify-button] {
+	@extend .mint-btn !optional;
+	margin: auto;
+}
+
+.amplify-icon {
+	display: block;
+}

package/src/scss/imports/overrides/_full-calendar.scss

@@ -0,0 +1,46 @@
+/// _amplify.scss - Amplify styles
+/// @author App Art Mint LLC
+/// 
+/// @group Overrides
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// FullCalendar Styles
+.fc {
+	--fc-page-bg-color: #{css-var(brand-6)};
+	.fc-toolbar {
+		flex-wrap: wrap;
+		justify-content: space-around;
+		gap: 1rem;
+
+		&-title {
+			@include break-max(sm) {
+				font-size: 1.25rem;
+			}
+		}
+	}
+	.fc-timegrid {
+		&-divider {
+			padding: 0;
+		}
+		&-slot-minor {
+			border-top-style: groove;
+		}
+	}
+	.fc-list-table {
+		--fc-list-event-hover-bg-color: #{css-var(brand-4)};
+
+		@include break-max(sm) {
+			word-break: normal;
+		}
+
+		.fc-list-event-time {
+			@include break-max(xs) {
+				white-space: normal;
+
+			}
+		}
+	}
+}

package/src/scss/imports/overrides/_index.scss

@@ -0,0 +1,11 @@
+/// _index.scss - Forward all overrides
+/// @author App Art Mint LLC
+/// 
+/// @group Index
+@charset 'utf-8';
+
+/// Imports
+@use './amplify';
+@use './full-calendar';
+@use './material';
+@use './swiper';

package/src/scss/imports/overrides/_material.scss

@@ -0,0 +1,19 @@
+/// _material.scss - Material styles
+/// @author App Art Mint LLC
+/// 
+/// @group Overrides
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Material Styles
+:root:root {
+	@include css-var(--mat-table-background-color, transparent);
+}
+
+.cdk-overlay-container {
+	.mat-mdc-select-panel {
+		background: css-var(brand-4)
+	}
+}

package/src/scss/imports/overrides/_swiper.scss

@@ -0,0 +1,55 @@
+/// _swiper.scss - Swiper styles
+/// @author App Art Mint LLC
+/// 
+/// @group Overrides
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Variables
+$arrows-offset: 1rem;
+$arrows-size: 2rem;
+
+/// Swiper Styles
+:root {
+	@include css-var-ref(--swiper-navigation-color, fore);
+	@include css-var-ref(--swiper-pagination-color, brand);
+	@include css-var(--swiper-navigation-size, $arrows-size);
+
+	.swiper {
+		max-width: 100%;
+
+		@include break(xs) {
+			@include css-var(--swiper-navigation-sides-offset, $arrows-offset);
+		}
+
+		&-slide {
+			@include break(xs) {
+				padding: $arrows-offset + $arrows-size;
+			}
+		}
+	
+		&-button {
+			&-prev,
+			&-next {
+				&::after {
+					font-family: "Font Awesome 6 Pro";
+					font-weight: 900;
+				}
+			}
+	
+			&-prev {
+				&::after {
+					content: '\f053';
+				}
+			}
+	
+			&-next {
+				&::after {
+					content: '\f054';
+				}
+			}
+		}
+	}
+}

package/src/scss/imports/util/_index.scss

@@ -1,8 +1,9 @@
-/// _index.scss - SCSS Utilities
+/// _index.scss - Forward all overrides
 /// @author App Art Mint LLC
 /// 
-/// @group Mint
+/// @group Index
+@charset 'utf-8';
 
-/// Forwards
+/// Imports
 @forward './util';
 @forward './vars';

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

@@ -200,7 +200,11 @@ $bootstrap5: false !default;
 		@error 'The css-var function requires a string value.';
 	}
 
-	@return var(css-prefix($base));
+	@if (string.index($base, '--') != 1) {
+		$base: css-prefix($base);
+	}
+
+	@return var(#{$base});
 }
 
 /// Negates a provided CSS-selector
@@ -454,7 +458,15 @@ $bootstrap5: false !default;
 /// @param {Any} $val - the value of the CSS var
 /// @output a prefixed CSS var definition
 @mixin css-var ($key, $val) {
-	#{css-prefix($key)}: #{$val};
+	@if (type-of($key) != 'string') {
+		@error 'The css-var mixin requires a string for the $key argument.';
+	}
+
+	@if (string.index($key, '--') != 1) {
+		$key: css-prefix($key);
+	}
+
+	#{$key}: #{$val};
 }
 
 /// Creates a prefixed CSS var reference
@@ -467,6 +479,10 @@ $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') {
+		@error 'The css-var-ref mixin requires string values for both parameters.';
+	}
+
 	@include css-var($key1, css-var($key2));
 }