@appartmint/css-mint 3.0.0 → 3.0.2

package/src/components/section/grid.scss

@@ -10,6 +10,7 @@
 
 :root {
 	@include css-var(grid-gap, calc(css-var(gap) * 2));
+	@include css-var(grid-gap-section, calc(css-var(gap) * 10));
 	@include css-var-ref(grid-fit-w, xs);
 }
 
@@ -108,6 +109,12 @@
 	margin-top: css-var(grid-gap);
 	margin-bottom: css-var(grid-gap);
 
+	&#{class(section)} {
+		gap: css-var(grid-gap-section);
+		margin-top: css-var(grid-gap-section);
+		margin-bottom: css-var(grid-gap-section);
+	}
+
 	&#{class('2')} {
 		@include grid-2;
 	}

package/src/components/ui/button.scss

@@ -30,6 +30,7 @@
 #{class(theme)} {
 	&-dark {
 		@include css-var-ref(btn-fg, c-fg);
+		@include css-var-ref(btn-fg-hover, c-bg);
 		@include css-var-ref(btn-bg, c-brand-2);
 		@include css-var-ref(btn-fg-alt, c-brand-9);
 		@include css-var-ref(btn-fg-alt-hover, c-fg);

package/src/components/ui/media/image.scss

@@ -12,6 +12,12 @@
     @include css-var-ref(img-shadow-s, shadow-s);
 }
 
+#{class(theme)} {
+    &-dark {
+        @include css-var-ref(img-shadow-c, shadow-c);
+    }
+}
+
 /// A basic image
 #{class(image)} {
 

package/src/components/ui/tooltip.scss

@@ -25,6 +25,7 @@
     &-dark {
         @include css-var-ref(tooltip-fg, c-fg);
         @include css-var-ref(tooltip-bg, c-bg);
+        @include css-var-ref(tooltip-shadow-c, shadow-c);
     }
 }
 

package/src/components/widget/card.scss

@@ -18,6 +18,7 @@
 #{class(theme)} {
 	&-dark {
 		@include css-var-ref(card-bg, c-bw-2);
+		@include css-var-ref(card-shadow-c, shadow-c);
 	}
 }
 
@@ -165,6 +166,7 @@
 		border-radius: css-var(card-br);
 		width: 100%;
 		overflow: hidden;
+		z-index: 10;
 
 		& > * {
 			margin-top: 0;

package/src/global/aspect.scss

@@ -20,28 +20,6 @@
 	padding-top: calc(css-var(aspect-h) / css-var(aspect-w) * 100%);
 	overflow: hidden;
 
-	&#{class(spotify)} {
-		&, &-playlist {
-			padding-top: 152px;
-
-			@include break(xs) {
-				padding-top: 125%;
-			}
-
-			@include break(sm) {
-				padding-top: 75%;
-			}
-
-			@include break(md) {
-				padding-top: 56.25%;
-			}
-		}
-
-		&-podcast {
-			padding-top: 352px;
-		}
-	}
-
 	&#{class(responsive)} {
 		padding-top: #{calc(100% * tan(atan2(100vh - css-var(header-h) - css-var(p-clamp) * 2, 100vw)))} !important;
 		padding-top: #{calc(100% * tan(atan2(100dvh - css-var(header-h) - css-var(p-clamp) * 2, 100dvw)))} !important;
@@ -56,3 +34,25 @@
 		height: 100%;
 	}
 }
+
+#{class(spotify)} {
+	&, &-playlist {
+		#{class(aspect)} {
+			padding-top: 152px;
+
+			@include break(xs) {
+				padding-top: 125%;
+			}
+
+			@include break(sm) {
+				padding-top: 75%;
+			}
+		}
+	}
+
+	&-podcast {
+		#{class(aspect)} {
+			padding-top: 352px;
+		}
+	}
+}

package/src/global/index.scss

@@ -6,5 +6,4 @@
 @use 'shadow';
 @use 'structure';
 @use 'text';
-@use 'texture';
 @use 'themes';

package/src/global/text.scss

@@ -50,24 +50,17 @@ html, body {
 
 p {
     line-height: css-var(font-h);
+    margin: 0;
 }
 
 @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;
-	}
+    margin: 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) {

package/src/modules/amplify.scss

@@ -42,3 +42,10 @@
 		display: block;
 	}
 }
+
+#{class(theme)} {
+	&-dark {
+		@include css-var-ref(--amplify-colors-font-primary, c-fg);
+		@include css-var-ref(--amplify-components-fieldcontrol-color, --amplify-colors-font-primary);
+	}
+}

package/src/modules/angular.scss

@@ -14,6 +14,17 @@
 	@include css-var-ref(--mat-paginator-container-text-color, c-fg);
 }
 
+#{class(theme)} {
+	&-dark {
+		@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 {

package/src/modules/swiper.scss

@@ -27,3 +27,9 @@ $arrows-size: 2rem;
 		}
 	}
 }
+
+#{class(theme)} {
+	&-dark {
+		@include css-var-ref(--swiper-navigation-color, c-fg);
+	}
+}

package/src/global/texture.scss

@@ -1,143 +0,0 @@
-/// texture.scss - Texture styles
-/// @author App Art Mint LLC
-///
-/// @group Global
-@charset 'utf-8';
-
-/// Imports
-@use 'sass:list';
-@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(c-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: calc(#{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: calc(#{css-var(texture-p)} + #{css-var(texture-bw)});
-    }
-}
-
-/// Texture Styles
-#{class(texture)} {
-    @include mint-texture();
-}
-
-/// Border Styles
-#{class(border)} {
-    @extend #{class(texture)};
-    @include mint-border();
-}
-
-#{class(frame)} {
-    height: fit-content;
-	background-color: css-var(card-bg);
-
-    @extend #{class(border)};
-    padding: css-var(texture-bw);
-}
-
-#{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;
-		}
-	}
-}