@appartmint/css-mint 0.1.0 → 1.0.0

package/src/global/shadow.scss

@@ -0,0 +1,20 @@
+/// shadow.scss - Shadow styles
+/// @author App Art Mint LLC
+///
+/// @group Global
+@charset 'utf-8';
+
+/// Imports
+@use '../util/selector' as *;
+
+#{class(glow)} {
+	box-shadow: 0 0 2rem -0.5rem css-var(glow-2);
+}
+
+#{class(shadow)} {
+	box-shadow: 0 0 2rem -0.5rem css-var(shadow-2);
+}
+
+#{class(no-glow)} {
+	box-shadow: none !important;
+}

package/src/global/structure.scss

@@ -0,0 +1,101 @@
+/// structure.scss - Structure styles
+/// @author App Art Mint LLC
+///
+/// @group Global
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:map';
+@use '../util/box' as *;
+@use '../util/break' as *;
+@use '../util/selector' as *;
+
+/// Structure styles
+#{class(p)} {
+	@include box-util(padding, 1rem);
+	@include break-util(padding, 0.5rem, 0);
+
+	@include break(xs) {
+		@include break-util(padding, 1rem, 0);
+	}
+}
+
+#{class(m)} {
+	@include box-util(margin, 1rem);
+	@include break-util(margin, 0.5rem, 0);
+
+	@include break(xs) {
+		@include break-util(margin, 1rem, 0);
+	}
+}
+
+#{class(hide)} {
+	@include break-util(display, initial, none);
+}
+
+#{class(max)} {
+	@each $size in map.keys($break) {
+		&-#{$size} {
+			width: 100%;
+			max-width: break($size);
+			
+			&:not(#{class(left)}) {
+				margin-left: auto;
+			}
+
+			&:not(#{class(right)}) {
+				margin-right: auto;
+			}
+		}
+	}
+}
+
+#{class(half-w)} {
+	width: 50%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+#{class(center)} {
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+
+	&-down {
+		&, & * {
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+		}
+	}
+}
+
+#{class(fit)} {
+	width: fit-content;
+	height: fit-content;
+
+	&:not(#{class(left)}) {
+		margin-left: auto;
+	}
+
+	&:not(#{class(right)}) {
+		margin-right: auto;
+	}
+}
+
+#{class(left)} {
+	float: left;
+}
+
+#{class(right)} {
+	float: right;
+}
+
+#{class(full-page)} {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: calc(100vh - css-var(header-h));
+	min-height: calc(100dvh - css-var(header-h));
+}

package/src/global/text.scss

@@ -0,0 +1,93 @@
+/// text.scss - Text styles
+/// @author App Art Mint LLC
+///
+/// @group Global
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:map';
+@use '../util/break' as *;
+@use '../util/selector' as *;
+@use '../util/text' as *;
+
+/// Text Styles
+$font-min: (h1: 15vw, h2: 12vw, h3: 10vw, h4: 8vw, h5: 7vw, h6: 6vw, p: 1rem);
+$font-mobile: (h1: 2.5rem, h2: 2rem, h3: 1.75rem, h4: 1.5rem, h5: 1.25rem, h6: 1.125rem, p: 1rem);
+$font-desktop: (h1: 3rem, h2: 2.5rem, h3: 2rem, h4: 1.75rem, h5: 1.5rem, h6: 1.25rem, p: 1.125rem);
+
+:root {
+	@include css-var(font-text, sans-serif);
+	@include css-var(font-title, serif);
+	@include css-var(font-backups, (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
+	@include css-var(font-title-backups, (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
+	@include css-var(font-h, 1.25);
+
+    @each $tag in map.keys($font-min) {
+        @include css-var(font-min-#{$tag}, map.get($font-min, $tag));
+    }
+
+    @each $tag in map.keys($font-mobile) {
+        @include css-var(font-mobile-#{$tag}, map.get($font-mobile, $tag));
+    }
+
+    @each $tag in map.keys($font-desktop) {
+        @include css-var(font-desktop-#{$tag}, map.get($font-desktop, $tag));
+    }
+}
+
+html, body {
+    font-family: css-var(font-text), css-var(font-backups);
+    font-size: min(css-var(font-min-p), css-var(font-mobile-p));
+
+    @include break(xs) {
+        font-size: css-var(font-mobile-p);
+    }
+
+    @include break(md) {
+        font-size: css-var(font-desktop-p);
+    }
+}
+
+p {
+    line-height: css-var(font-h);
+}
+
+@include headers () {
+    font-family: css-var(font-title), css-var(font-title-backups);
+    line-height: 1;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+@each $tag in map.keys($font-min) {
+    #{$tag}, #{class($tag)} {
+        margin: 1rem 0;
+        font-size: min(css-var(font-min-#{$tag}), css-var(font-mobile-#{$tag}));
+
+        @include break(xs) {
+            font-size: css-var(font-mobile-#{$tag});
+        }
+
+        @include break(md) {
+            font-size: css-var(font-desktop-#{$tag});
+        }
+    }
+}
+
+#{class(upper)} {
+	text-transform: uppercase;
+}
+
+#{class(disclaim)} {
+    font-size: 0.875em;
+
+    @include break-max(xs) {
+        text-align: center;
+    }
+}

package/src/global/texture.scss

@@ -0,0 +1,154 @@
+/// texture.scss - Texture styles
+/// @author App Art Mint LLC
+///
+/// @group Global
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:list';
+@use 'sass:math';
+@use '../util/selector' as *;
+@use '../util/break' as *;
+
+/// Texture Mixin
+$texture-bc: null !default;
+$texture-bg: null !default;
+$texture-bi: null !default;
+$texture-alt-bg: null !default;
+
+:root {
+    @include css-var(texture-bg, $texture-bg);
+    @include css-var(texture-bg-s, cover);
+    @include css-var(texture-bg-pos, top);
+    @include css-var(texture-blend, normal);
+    @include css-var(texture-filter, none);
+    @include css-var(texture-opacity, 1);
+    @include css-var(texture-alt-bg-s, cover);
+    @include css-var(texture-alt-bg-pos, center);
+    @include css-var(texture-alt-blend, normal);
+    @include css-var(texture-alt-mask, none);
+    @include css-var(texture-alt-opacity, 1);
+    @include css-var(texture-p, 1rem);
+    @include css-var(texture-bw, 1.25rem);
+    @include css-var(texture-bc, $texture-bc);
+    @include css-var(texture-bi, $texture-bi);
+    @include css-var(texture-bis, 42 42);
+    @include css-var(texture-bir, round);
+    @include css-var(texture-bst, solid);
+}
+
+@mixin mint-texture () {
+    position: relative;
+	background-color: css-var(bg);
+    
+    &::before, &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    &::before {
+        opacity: css-var(texture-opacity);
+        background-image: css-var(texture-bg);
+        background-size: css-var(texture-bg-s);
+        background-position: css-var(texture-bg-pos);
+        mix-blend-mode: css-var(texture-blend);
+        filter: css-var(texture-filter);
+    }
+
+    &::after {
+        opacity: css-var(texture-alt-opacity);
+        background-size: css-var(texture-alt-bg-s);
+        background-position: css-var(texture-alt-bg-pos);
+        mask-image: css-var(texture-alt-mask);
+        mix-blend-mode: css-var(texture-alt-blend);
+        z-index: 1;
+    }
+
+    & > * {
+        position: relative;
+        z-index: 10;
+    }
+}
+
+/// Border Mixin
+@mixin mint-border () {
+	padding: math.div(css-var(texture-p), 2) + css-var(texture-bw);
+	border-image-source: css-var(texture-bi);
+	border-image-slice: css-var(texture-bis);
+	border-image-repeat: css-var(texture-bir);
+	border-image-width: css-var(texture-bw);
+	border-style: css-var(texture-bst);
+
+    @include break(sm) {
+        padding: css-var(texture-p) + css-var(texture-bw);
+    }
+}
+
+/// Texture Styles
+#{class(texture)} {
+    @if $texture-bg {
+        @include mint-texture();
+    }
+}
+
+/// Border Styles
+#{class(border)} {
+    @extend #{class(texture)};
+    @if $texture-bi {
+        @include mint-border();
+    } @else if $texture-bc {
+        border: css-var(texture-bw) css-var(texture-bst) css-var(texture-bc);
+    }
+}
+
+#{class(frame)} {
+    height: fit-content;
+	background-color: css-var(card-bg);
+
+    @extend #{class(border)};
+    @if $texture-bi {
+        padding: css-var(texture-bw);
+    } @else if $texture-bc {
+        padding: 0;
+    }
+}
+
+#{class(card)} {
+	#{class(content)} {
+		@extend #{class(border)};
+	}
+
+    &-grid {
+        #{class(image)} {
+            @extend #{class(border)};
+            position: absolute;
+        }
+    }
+}
+
+/// Alt Texture Styles
+@if $texture-alt-bg and list.length($texture-alt-bg) > 0 {
+    @for $num from 1 through list.length($texture-alt-bg) {
+        #{class(texture-#{$num})} {
+            #{class(content)} {
+                &::after {
+                    background-image: url(#{list.nth($texture-alt-bg, $num)});
+                }
+            }
+        }
+    }
+}
+
+/// Overlay texture
+#{class(overlay)} {
+	#{class(border)}, #{class(texture)} {
+		&::before {
+			z-index: 100;
+		}
+	}
+}

package/src/global/themes.scss

@@ -0,0 +1,26 @@
+/// themes.scss - Styles for ui theming
+/// @author App Art Mint LLC
+///
+/// @group Themes
+@charset 'utf-8';
+
+/// Imports
+@use '../util/selector' as *;
+
+@each $theme in success, danger, warning, info {
+	#{class(theme-#{$theme})} {
+		background-color: css-var(c-#{$theme}-2);
+		border-color: css-var(c-#{$theme}-4);
+	}
+}
+
+#{class(theme)} {
+	&-dark {
+		@each $theme in success, danger, warning, info {
+			#{class(theme-#{$theme})} {
+				background-color: css-var(c-#{$theme}-7);
+				border-color: css-var(c-#{$theme}-5);
+			}
+		}
+	}
+}

package/src/modules/amplify.scss

@@ -0,0 +1,44 @@
+/// amplify.scss - Amplify styles
+/// @author App Art Mint LLC
+/// 
+/// @group Modules
+@charset 'utf-8';
+@use '../util/selector' as *;
+@use '../components/ui/button';
+@use '../components/widget/card';
+
+:root:root {
+	@include css-var-ref(--amplify-colors-background-error, c-glow-0);
+	@include css-var-ref(--amplify-colors-border-primary, c-brand-5);
+	@include css-var-ref(--amplify-colors-border-focus, c-brand-4);
+	@include css-var-ref(--amplify-colors-font-hover, c-brand-3);
+	@include css-var-ref(--amplify-colors-font-interactive, c-brand-5);
+	@include css-var-ref(--amplify-colors-font-primary, c-fg);
+	@include css-var-ref(--amplify-colors-font-secondary, c-brand-6);
+	@include css-var-ref(--amplify-colors-font-error, c-danger-5);
+	@include css-var-ref(--amplify-colors-font-warning, c-warning-5);
+	@include css-var-ref(--amplify-colors-font-success, c-success-5);
+	@include css-var-ref(--amplify-colors-font-info, c-info-5);
+	@include css-var-ref(--amplify-components-fieldcontrol-color, --amplify-colors-font-primary);
+
+	@include css-var-ref(--amplify-border-widths-small, bw);
+
+	[data-amplify-authenticator] {
+		[data-amplify-container] {
+			@extend #{class(card)};
+	
+			[data-amplify-router] {
+				@extend #{class(content)};
+			}
+		}
+	}
+	
+	[amplify-button] {
+		@extend #{class(btn)};
+		margin: auto;
+	}
+	
+	.amplify-icon {
+		display: block;
+	}
+}

package/src/modules/angular.scss

@@ -0,0 +1,67 @@
+/// angular.scss - Angular styles
+/// @author App Art Mint LLC
+///
+/// @group Modules
+@charset 'utf-8';
+@use '../util/selector' as *;
+
+:root:root {
+	@include css-var-ref(--mat-table-background-color, c-bg);
+	@include css-var-ref(--mat-paginator-container-background-color, c-bg);
+	@include css-var-ref(--mat-table-row-item-label-text-color, c-fg);
+	@include css-var-ref(--mat-table-header-headline-color, c-fg);
+	@include css-var-ref(--mat-table-header-subheadline-color, c-fg);
+	@include css-var-ref(--mat-paginator-container-text-color, c-fg);
+}
+
+body {
+	&#{class(ready)} {
+		app-root {
+			opacity: 1;
+		}
+	}
+}
+
+router-outlet {
+	display: none;
+}
+
+app-root {
+	display: block;
+	position: relative;
+	opacity: 0;
+	transition: opacity 750ms ease-in;
+}
+
+:root {
+	main {
+		& > router-outlet {
+			flex-grow: 0;
+
+			& + * {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				flex-grow: 1;
+				width: 100%;
+				padding: css-var(p-clamp);
+
+				&+:not(#{prefix(partial-footer)}) {
+					height: 0;
+					overflow: hidden;
+				}
+			}
+
+			& + #{prefix(partial-footer)} {
+				transform: translateY(100vh);
+			}
+		}
+	}
+}
+
+.cdk-overlay-container {
+	.mat-mdc-select-panel {
+		background: css-var(c-brand-4);
+	}
+}

package/src/modules/full-calendar.scss

@@ -0,0 +1,60 @@
+/// full-calendar.scss - FullCalendar styles
+/// @author App Art Mint LLC
+/// 
+/// @group Modules
+@charset 'utf-8';
+@use '../util/break' as *;
+@use '../util/selector' as *;
+
+.fc {
+	--fc-page-bg-color: #{css-var(c-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(c-brand-4)};
+
+		@include break-max(sm) {
+			word-break: normal;
+		}
+
+		.fc-list-event-time {
+			@include break-max(xs) {
+				white-space: normal;
+			}
+		}
+	}
+
+	.fc-v-event {
+		.fc-event-title {
+			@include break(sm) {
+				font-size: 0.8em;
+			}
+		}
+	}
+}
+
+thead {
+	.fc-scroller {
+		overflow: hidden !important;
+	}
+}

package/src/modules/noscript.scss

@@ -0,0 +1,12 @@
+/// noscript.scss - Styles for when JavaScript is disabled
+/// @author App Art Mint LLC
+/// 
+/// @group Modules
+@charset 'utf-8';
+@use '../util/selector' as *;
+
+#{id(header)} {
+    #{id(wrapper)} {
+        position: unset !important;
+    }
+}

package/src/modules/recaptcha.scss

@@ -0,0 +1,15 @@
+/// recaptcha.scss - Recaptcha styles
+/// @author App Art Mint LLC
+///
+/// @group Modules
+@charset 'utf-8';
+
+/// Hide the badge
+/// Requires this on form:
+/// 
+/// This site is protected by reCAPTCHA and the Google
+/// <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+/// <a href="https://policies.google.com/terms">Terms of Service</a> apply.
+.grecaptcha-badge {
+	visibility: hidden;
+}

package/src/modules/swiper.scss

@@ -0,0 +1,59 @@
+/// _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 {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			
+			@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/themes/colors.scss

@@ -14,19 +14,36 @@
 	@include shades(c-glow, rgba(255, 255, 255, 0));
 	@include shades(c-shadow, rgba(0, 0, 0, 0));
 
-	/// Brand Colors
+	/// Application Colors
 	@include shades(c-brand, hsl(220, 35%, 50%));
 	@include shades(c-accent, hsl(248, 39%, 50%));
 	@include shades(c-success, hsl(120, 62%, 50%));
 	@include shades(c-danger, hsl(0, 54%, 50%));
 	@include shades(c-warning, hsl(37, 100%, 50%));
 	@include shades(c-info, hsl(201, 50%, 50%));
+
+	/// Brand Colors
+	@include css-var(c-amazon, #F90);
+	@include css-var(c-apple-music, #fc3c44);
+	@include css-var(c-apple, #DDD);
+	@include css-var(c-bandcamp, #629aa9);
+	@include css-var(c-btc, #FF9900);
+	@include css-var(c-eth, #3C3C3D);
+	@include css-var(c-facebook, #3b5998);
+	@include css-var(c-google-play, #f55a34);
+	@include css-var(c-instagram, #8a3ab9);
+	@include css-var(c-soundcloud, #f26f23);
+	@include css-var(c-spotify, #84bd00);
+	@include css-var(c-twitter, #1da1f2);
+	@include css-var(c-venmo, #008CFF);
+	@include css-var(c-youtube, #F00);
 }
 
 /// App Colors
 :root {
 	@include css-var-ref(c-fg, c-bw-8);
 	@include css-var-ref(c-bg, c-bw-1);
+	@include css-var-ref(shadow-c, c-shadow-2);
 }
 
 /// App Themes
@@ -34,5 +51,6 @@
 	&-dark {
 		@include css-var-ref(c-fg, c-bw-1);
 		@include css-var-ref(c-bg, c-bw-8);
+		@include css-var-ref(shadow-c, c-glow-2);
 	}
 }

package/src/themes/index.scss

@@ -1,3 +1,2 @@
 @use './colors';
-@use './fonts';
 @use './structure';