@appartmint/css-mint 2.0.11 → 3.0.1

package/src/components/partial/header.scss

@@ -35,12 +35,15 @@ $header-break: sm;
 #{class(theme)} {
 	&-dark {
 		@include css-var-ref(header-bg, c-brand-2);
+		@include css-var-ref(header-fg, c-fg);
+		@include css-var-ref(header-link-fg, c-fg);
+		@include css-var-ref(menu-btn-fg, c-fg);
 	}
 }
 
 body {
 	&#{class(fixed)} {
-		#{id(header)} {
+		#{class(header)} {
 			position: fixed;
 			top: 0;
 			left: 0;
@@ -48,7 +51,7 @@ body {
 	}
 }
 
-#{id(header)} {
+#{class(header)} {
 	position: relative;
 	width: 100%;
 	color: css-var(header-fg);
@@ -62,11 +65,11 @@ body {
 				display: contents;
 			}
 
-			#{controls(wrapper)} {
+			#{class(menu-btn)} {
 				display: none;
 			}
 
-			#{id(wrapper)} {
+			#{class(wrapper)} {
 				position: static;
 				display: flex !important;
 				height: 100%;
@@ -158,7 +161,7 @@ body {
 
 	#{class(spread)} {
 		@include break-max($header-break) {
-			#{id(wrapper)} {
+			#{class(wrapper)} {
 				#{$has-controls} {
 					display: none;
 	
@@ -176,7 +179,7 @@ body {
 		}
 
 		&:not(#{class(expand)}) {
-			#{id(wrapper)} {
+			#{class(wrapper)} {
 				#{$has-controls} {
 					display: none;
 	
@@ -196,7 +199,7 @@ body {
 	}
 
 	#{class(tray)} {
-		#{id(wrapper)} {
+		#{class(wrapper)} {
 
 			a, button {
 				padding: 0.75rem;
@@ -240,7 +243,7 @@ body {
 		z-index: -1;
 	}
 
-	#{id(navbar)} {
+	#{class(navbar)} {
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
@@ -279,7 +282,7 @@ body {
 		}
 	}
 
-	#{controls(wrapper)} {
+	#{class(menu-btn)} {
 		display: inline-block;
 		position: relative;
 		padding: css-var(menu-btn-p);
@@ -345,7 +348,7 @@ body {
 		}
 	}
 
-	#{id(wrapper)} {
+	#{class(wrapper)} {
 		background: css-var(card-bg);
 
 		nav {
@@ -467,7 +470,7 @@ body {
 		}
 	}
 
-	#{$has-controls}:not(#{controls(wrapper)}) {
+	#{$has-controls}:not(#{class(menu-btn)}) {
 		&+ul {
 			display: flex;
 			flex-direction: column;

package/src/components/ui/button.scss

@@ -31,6 +31,8 @@
 	&-dark {
 		@include css-var-ref(btn-fg, c-fg);
 		@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/link.scss

@@ -14,6 +14,13 @@
 	@include css-var-ref(link-c-hover, c-accent-2);
 }
 
+#{class(theme)} {
+	&-dark {
+		@include css-var-ref(link-c, c-brand-8);
+		@include css-var-ref(link-c-hover, c-accent-7);
+	}
+}
+
 a {
 	color: css-var(link-c);
 	transition-duration: time(default);

package/src/components/widget/card.scss

@@ -165,6 +165,7 @@
 		border-radius: css-var(card-br);
 		width: 100%;
 		overflow: hidden;
+		z-index: 10;
 
 		& > * {
 			margin-top: 0;

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/noscript.scss

@@ -5,8 +5,8 @@
 @charset 'utf-8';
 @use '../util/selector' as *;
 
-#{id(header)} {
-    #{id(wrapper)} {
+#{class(header)} {
+    #{class(wrapper)} {
         position: unset !important;
     }
 }

package/src/global/texture.scss

@@ -1,153 +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)} {
-    @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;
-		}
-	}
-}