@appartmint/mint 1.0.8 → 1.0.10

package/package.json

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

package/src/scss/imports/components/_header.scss

@@ -23,7 +23,6 @@
 	background-color: css-var(header-back);
 	z-index: 10000;
 	height: css-var(header-height);
-	//padding: 0 calc(css-var(header-height) / 2);
 
 	&#{class(right)} {
 		#{id(wrapper)} {
@@ -429,7 +428,6 @@
 			border-radius: $header-link-border-radius;
 
 			@include break(xs) {
-				font-size: 4em;
 				padding: 1rem 1.5rem;
 
 				i {

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

@@ -6,40 +6,43 @@
 
 /// Imports
 @use '../util' as *;
+@use '../components/buttons';
+@use '../components/cards';
 
 /// 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)};
+:root:root {
+	@include css-var-ref(--amplify-colors-background-error, $amp-background-error);
+	@include css-var-ref(--amplify-colors-border-primary, $amp-border-primary);
+	@include css-var-ref(--amplify-colors-border-focus, $amp-border-focus);
+	@include css-var-ref(--amplify-colors-font-hover, $amp-font-hover);
+	@include css-var-ref(--amplify-colors-font-interactive, $amp-font-interactive);
+	@include css-var-ref(--amplify-colors-font-primary, $amp-font-primary);
+	@include css-var-ref(--amplify-components-fieldcontrol-color, --amplify-colors-font-primary);
+	@include css-var-ref(--amplify-colors-font-secondary, $amp-font-secondary);
+	@include css-var-ref(--amplify-colors-font-error, $amp-font-error);
+	@include css-var-ref(--amplify-colors-font-warning, $amp-font-warning);
+	@include css-var-ref(--amplify-colors-font-success, $amp-font-success);
+	@include css-var-ref(--amplify-colors-font-info, $amp-font-info);
 
-	--amplify-border-widths-small: $border-width;
-}
-
-[data-amplify-authenticator] {
-	[data-amplify-container] {
-		@extend .mint-card !optional;
+	@include css-var(--amplify-border-widths-small, $amp-border-width);
 
-		[data-amplify-router] {
-			@extend .mint-content !optional;
-			border: none;
+	[data-amplify-authenticator] {
+		[data-amplify-container] {
+			@extend #{class(card)};
+	
+			[data-amplify-router] {
+				@extend #{class(content)};
+				border: none;
+			}
 		}
 	}
-}
-
-[amplify-button] {
-	@extend .mint-btn !optional;
-	margin: auto;
-}
-
-.amplify-icon {
-	display: block;
+	
+	[amplify-button] {
+		@extend #{class(btn)};
+		margin: auto;
+	}
+	
+	.amplify-icon {
+		display: block;
+	}
 }

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

@@ -9,11 +9,16 @@
 
 /// Material Styles
 :root:root {
-	@include css-var(--mat-table-background-color, transparent);
+	@include css-var(--mat-table-background-color, $mat-table-bg);
+	@include css-var(--mat-paginator-container-background-color, $mat-table-bg);
+	@include css-var(--mat-table-row-item-label-text-color, $mat-table-fore);
+	@include css-var(--mat-table-header-headline-color, $mat-table-fore);
+	@include css-var(--mat-table-header-subheadline-color, $mat-table-fore);
+	@include css-var(--mat-paginator-container-text-color, $mat-table-fore);
 }
 
 .cdk-overlay-container {
 	.mat-mdc-select-panel {
-		background: css-var(brand-4)
+		background: css-var($mat-select-bg);
 	}
 }

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

@@ -175,12 +175,24 @@ $texture-border-repeat: round !default;
 /// Backgrounds
 $back-bg-blur: 0.15vw !default;
 
+/// Material
+$mat-table-bg: back !default;
+$mat-table-fore: fore !default;
+$mat-select-bg: brand-4 !default;
+
+/// Amplify
+$amp-font-primary: fore !default;
+$amp-background-error: glow-0 !default;
+$amp-font-warning: warning !default;
+$amp-font-success: success !default;
+$amp-font-info: info !default;
+$amp-border-width: $border-width !default;
+
 
 /// Themes
 $theme-default: light !default;
 
 /// Default Theme (light)
-
 /// Buttons
 $btn-back-default: brand-2;
 $btn-back: $btn-back-default !default;
@@ -208,6 +220,21 @@ $header-link-fore-hover: $header-link-fore-hover-default !default;
 $footer-heel-fore-default: back;
 $footer-heel-fore: $footer-heel-fore-default !default;
 
+/// Amplify
+$amp-border-primary-default: brand-5;
+$amp-border-primary: $amp-border-primary-default !default;
+$amp-border-focus-default: brand-4;
+$amp-border-focus: $amp-border-focus-default !default;
+$amp-font-hover-default: brand-3;
+$amp-font-hover: $amp-font-hover-default !default;
+$amp-font-interactive-default: brand-5;
+$amp-font-interactive: $amp-font-interactive-default !default;
+$amp-font-secondary-default: brand-6;
+$amp-font-secondary: $amp-font-secondary-default !default;
+$amp-font-error-default: danger-5 !default;
+$amp-font-error: $amp-font-error-default !default;
+
+
 /// Dark Theme
 @if ($theme-default == dark) {
 
@@ -222,4 +249,12 @@ $footer-heel-fore: $footer-heel-fore-default !default;
 
     /// Footer
     $footer-heel-fore: if($footer-heel-fore != $footer-heel-fore-default, $footer-heel-fore, fore);
+
+	/// Amplify
+	$amp-border-primary: if($amp-border-primary != $amp-border-primary-default, $amp-border-primary, brand-1);
+	$amp-border-focus: if($amp-border-focus != $amp-border-focus-default, $amp-border-focus, brand-3);
+	$amp-font-hover: if($amp-font-hover != $amp-font-hover-default, $amp-font-hover, brand-0);
+	$amp-font-interactive: if($amp-font-interactive != $amp-font-interactive-default, $amp-font-interactive, brand-1);
+	$amp-font-secondary: if($amp-font-secondary != $amp-font-secondary-default, $amp-font-secondary, brand-0);
+	$amp-font-error: if($amp-font-error != $amp-font-error-default, $amp-font-error, danger-4);
 }