@appartmint/css-mint 0.0.40 → 1.0.0

package/src/themes/structure.scss

@@ -12,10 +12,9 @@
 	@include css-var(p-val, 1vw);
 	@include css-var(p-clamp, clamp(css-var(p-min), css-var(p-val), css-var(p-max)));
 	@include css-var(p-exit, clamp(calc(css-var(p-min) * -1), calc(css-var(p-val) * -1), calc(css-var(p-max) * -1)));
-	@include css-var(p-exit-width, clamp(calc(100% + css-var(p-min) * 2), calc(100% + css-var(p-val) * 2), calc(100% + css-var(p-max) * 2)));
+	@include css-var(p-exit-w, clamp(calc(100% + css-var(p-min) * 2), calc(100% + css-var(p-val) * 2), calc(100% + css-var(p-max) * 2)));
 
 	/// Shadows
-	@include css-var-ref(shadow-c, glow-2);
 	@include css-var(shadow-s, 0 0 2rem -0.5rem);
 
 	/// Widths

package/src/util/break.scss

@@ -16,11 +16,11 @@
 /// @prop {Number} $break.lg [1200] - Large: large desktops, landscape tablets
 /// @prop {Number} $break.xl [1440] - Extra-Large: larger desktops
 $break: (
-	xs: 30,
-	sm: 48,
-	md: 64,
-	lg: 75,
-	xl: 90,
+	xs: 480,
+	sm: 768,
+	md: 1024,
+	lg: 1200,
+	xl: 1440,
 ) !default;
 
 /// Returns the requested breakpoint value as rem
@@ -33,7 +33,7 @@ $break: (
 		@error 'The break function requires one of the following values: #{map.keys($break)}';
 	}
 
-	@return map.get($break, $key) * 1rem;
+	@return map.get($break, $key) * 1px;
 }
 
 /// Wraps the provided content in a media query

package/src/util/color.scss

@@ -7,6 +7,8 @@
 /// Imports
 @use 'sass:color';
 @use 'sass:math';
+@use 'sass:meta';
+@use './selector' as *;
 
 /// Get the luminance of a color
 /// @group Functions
@@ -54,7 +56,7 @@
 		}
 	} @else {
 		@for $i from 0 through $number - 1 {
-			$amount: math.div($i, $number);
+			$amount: math.div($i, $number) * 100%;
 			@include css-var(#{$name}-#{$i}, color.change($color, $lightness: $amount));
 		}
 	}

package/src/util/text.scss

@@ -3,6 +3,7 @@
 ///
 /// @group UI
 @charset 'utf-8';
+@use './selector' as *;
 
 /// Selector for all headers
 /// @group Mixins

package/src/components/widget/_tooltip.scss

@@ -1,106 +0,0 @@
-/// _tooltip.scss - Tooltip styles
-/// @author App Art Mint LLC
-///
-/// @group Widget
-@charset 'utf-8';
-
-/// Imports
-@use '../../util' as *;
-
-#{class(tooltip)} {
-    position: absolute;
-    max-width: css-var(tooltip-max-width);
-    border-radius: css-var(tooltip-radius);
-    padding: css-var(tooltip-padding);
-    opacity: 0;
-    color: css-var(tooltip-fore);
-    background: css-var(tooltip-back);
-    box-shadow: css-var(tooltip-shadow-color) css-var(tooltip-shadow-size);
-    font-size: css-var(tooltip-font-size);
-    line-height: css-var(tooltip-line-height);
-    transition: opacity 0.3s;
-	user-select: none;
-	pointer-events: none;
-    white-space: nowrap;
-
-    &#{class(top)}, &#{class(bottom)} {
-        &::after {
-            border-left: solid css-var(tooltip-arrow-size) transparent;
-            border-right: solid css-var(tooltip-arrow-size) transparent;
-        }
-    }
-    &#{class(left)}, &#{class(right)} {
-        &::after {
-            border-top: solid css-var(tooltip-arrow-size) transparent;
-            border-bottom: solid css-var(tooltip-arrow-size) transparent;
-        }
-    }
-
-    &#{class(top)} {
-        bottom: calc(100% + css-var(tooltip-arrow-size) + css-var(tooltip-distance));
-        left: 50%;
-        transform: translateX(-50%);
-
-        &::after {
-            bottom: calc(-1 * css-var(tooltip-arrow-size) + 1px);
-            left: 50%;
-            transform: translateX(-50%);
-            border-top: solid css-var(tooltip-arrow-size) css-var(tooltip-back);
-        }
-    }
-    &#{class(left)} {
-        right: calc(100% + css-var(tooltip-arrow-size) + css-var(tooltip-distance));
-        top: 50%;
-        transform: translateY(-50%);
-
-        &::after {
-            right: calc(-1 * css-var(tooltip-arrow-size) + 1px);
-            top: 50%;
-            transform: translateY(-50%);
-            border-left: solid css-var(tooltip-arrow-size) css-var(tooltip-back);
-        }
-    }
-    &#{class(bottom)} {
-        top: calc(100% + css-var(tooltip-arrow-size) + css-var(tooltip-distance));
-        left: 50%;
-        transform: translateX(-50%);
-
-        &::after {
-            top: calc(-1 * css-var(tooltip-arrow-size) + 1px);
-            left: 50%;
-            transform: translateX(-50%);
-            border-bottom: solid css-var(tooltip-arrow-size) css-var(tooltip-back);
-        }
-    }
-    &#{class(right)} {
-        left: calc(100% + css-var(tooltip-arrow-size) + css-var(tooltip-distance));
-        top: 50%;
-        transform: translateY(-50%);
-
-        &::after {
-            left: calc(-1 * css-var(tooltip-arrow-size) + 1px);
-            top: 50%;
-            transform: translateY(-50%);
-            border-right: solid css-var(tooltip-arrow-size) css-var(tooltip-back);
-        }
-    }
-
-    &::after {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-    }
-
-    &ped {
-        display: inline-flex;
-        position: relative;
-        width: fit-content;
-
-        @include states(hover) {
-            #{class(tooltip)} {
-                opacity: 1;
-            }
-        }
-    }
-}

package/src/global/size.scss

@@ -1,15 +0,0 @@
-/// size.scss - Sizes
-/// @author App Art Mint LLC
-///
-/// @group Global
-@charset 'utf-8';
-
-/// Imports
-@use '../util' as *;
-
-/// Sizes
-#{class(half-w)} {
-	width: 50%;
-	margin-left: auto;
-	margin-right: auto;
-}

package/src/themes/fonts.scss

@@ -1,18 +0,0 @@
-/// fonts.scss - Font variables
-/// @author App Art Mint LLC
-///
-/// @group UI
-@charset 'utf-8';
-
-/// Imports
-@use '../util' as *;
-
-/// Font Variables
-:root {
-	/// Fonts
-	@include css-var(c-font-text, sans-serif);
-	@include css-var(c-font-title, serif);
-	///@include css-var(c-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(c-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(c-font-h, 1.25);
-}