@appartmint/css-mint 0.0.33 → 0.0.35

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@appartmint/css-mint",
 	"author": "App Art Mint LLC",
-	"version": "0.0.33",
+	"version": "0.0.35",
 	"type": "module",
 	"license": "MIT",
 	"description": "Styles by App Art Mint",

package/src/components/ui/index.scss

@@ -1,3 +1,3 @@
 @use './button';
 @use './image';
-//@use './tooltip';
+@use './tooltip';

package/src/components/ui/tooltip.scss

@@ -8,8 +8,8 @@
 @use '../../util' as *;
 
 :root {
-	@include css-var-ref(tooltip-fg, fg);
-	@include css-var-ref(tooltip-bg, bg);
+	@include css-var-ref(tooltip-fg, c-fg);
+	@include css-var-ref(tooltip-bg, c-bg);
 	@include css-var-ref(tooltip-r, br);
 	@include css-var-ref(tooltip-shadow-c, shadow-c);
 	@include css-var-ref(tooltip-shadow-s, shadow-s);

package/src/themes/colors.scss

@@ -1,26 +1,42 @@
 @use 'sass:color';
 @use '../util' as *;
 
+@function get-luminance($color) {
+	@if (color.space($color) == 'rgb') {
+		@return math.sqrt(
+			0.299 * color.red($color) * color.red($color)
+			+ 0.587 * color.green($color) * color.green($color)
+			+ 0.114 * color.blue($color) * color.blue($color));
+	}
+	@else if (color.space($color) == 'hsl') {
+		@return color.lightness($color);
+	}
+
+	@error 'Invalid color space: #{color.space($color)}';
+}
+
 :root {
-	@include shades(glow, rgba(255, 255, 255, 0), darken, 7, 10%, true);
-	@include shades(shadow, rgba(0, 0, 0, 0), darken, 7, 10%, true);
+	/// Black and White Shades
+	@include shades(c-bw, black);
+	@include shades(glow, rgba(255, 255, 255, 0), 10, true);
+	@include shades(shadow, rgba(0, 0, 0, 0), 10, true);
 
 	/// Brand Colors
-	@include shades(c-brand, #C55);
-	@include shades(c-accent, #483d8b);
-	@include shades(c-success, #208a20);
-	@include shades(c-danger, #ff4d4d);
-	@include shades(c-warning, #ffaa22);
-	@include shades(c-info, #238cc4);
+	@include shades(c-brand, hsl(0, 54%, 50%));
+	@include shades(c-accent, hsl(248, 39%, 50%));
+	@include shades(c-success, hsl(120, 62%, 50%));
+	@include shades(c-danger, hsl(0, 100%, 50%));
+	@include shades(c-warning, hsl(37, 100%, 50%));
+	@include shades(c-info, hsl(201, 70%, 50%));
 
 	/// App Colors
-	@include shades(c-fg, color.adjust(black, $lightness: 10%), lighten);
-	@include shades(c-bg, color.adjust(white, $lightness: -10%), darken);
+	@include css-var-ref(c-fg, c-bw-8);
+	@include css-var-ref(c-bg, c-bw-1);
 }
 
 #{class(theme)} {
 	&-dark {
-		@include shades(c-fg, color.adjust(white, $lightness: -10%), darken);
-		@include shades(c-bg, color.adjust(black, $lightness: 10%), lighten);
+		@include css-var-ref(c-fg, c-bw-1);
+		@include css-var-ref(c-bg, c-bw-8);
 	}
 }

package/src/util.scss

@@ -596,12 +596,11 @@ $break: (
 ///
 /// @param {String} $name - the name of the color
 /// @param {Color} $color - the color to generate variations for
-/// @param {String} $type - the type of variation to generate
 /// @param {Number} $number - the number of variations to geerate
-/// @param {String} $amount - the amount to vary the color by
 /// @param {Boolean} $alpha - whether to generate alpha variations
 /// @output css variables for different shades of the source color
-@mixin shades ($name, $color, $type: both, $number: 7, $amount: 10%, $alpha: false) {
+@mixin shades ($name, $color, $number: 10, $alpha: false) {
+	@error color.space($color);
 	@if (meta.type-of($name) != 'string') {
 		@error 'The shades mixin requires a string for the $name argument.';
 	}
@@ -610,10 +609,6 @@ $break: (
 		@error 'The shades mixin requires a color for the $color argument.';
 	}
 
-	@if not($type == lighten or $type == darken or $type == both) {
-		@error 'The shades mixin requires a string of "lighten", "darken", or "both" for the $type argument.';
-	}
-
 	@if (meta.type-of($number) != 'number') {
 		@error 'The shades mixin requires a number for the $number argument.';
 	}
@@ -630,61 +625,15 @@ $break: (
 		@error 'The shades mixin requires a boolean value for the $alpha argument. Received: #{$bool}';
 	}
 
-	@include css-var(#{$name}, $color);
-
 	@if ($alpha) {
-		@if ($type == lighten) {
-			@for $i from 0 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, color.adjust($color, $alpha: -$i * math.div($amount, 100%)));
-			}
-		}
-
-		@else if ($type == darken) {
-			@for $i from 0 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, color.adjust($color, $alpha: $i * math.div($amount, 100%)));
-			}
-		}
-
-		@else if ($type == both) {
-			$num-light: floor(math.div($number, 2));
-
-			@for $i from 0 through $num-light - 1 {
-				@include css-var(#{$name}-#{$i}, color.adjust($color, $alpha: -$i * math.div($amount, 100%)));
-			}
-
-			@include css-var(#{$name}-#{$num-light}, $color);
-
-			@for $i from $num-light + 1 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, color.adjust($color, $alpha: ($num-light - $i) * math.div($amount, 100%)));
-			}
+		@for $i from 0 through $number - 1 {
+			$amount: math.div($i, $number);
+			@include css-var(#{$name}-#{$i}, color.change($color, $alpha: $amount));
 		}
-	}
-
-	@else {
-		@if ($type == lighten) {
-			@for $i from 0 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, color.adjust($color, $lightness: $i * $amount));
-			}
-		}
-
-		@else if ($type == darken) {
-			@for $i from 0 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, color.adjust($color, $lightness: $i * -$amount));
-			}
-		}
-
-		@else if ($type == both) {
-			$num-light: math.floor(math.div($number, 2));
-
-			@for $i from 0 through $num-light - 1 {
-				@include css-var(#{$name}-#{$i}, color.adjust($color, $lightness: ($num-light - $i) * $amount));
-			}
-
-			@include css-var(#{$name}-#{$num-light}, $color);
-
-			@for $i from $num-light + 1 through $number - 1 {
-				@include css-var(#{$name}-#{$i}, color.adjust($color, $lightness: ($i - $num-light) * -$amount));
-			}
+	} @else {
+		@for $i from 0 through $number - 1 {
+			$amount: math.div($i, $number);
+			@include css-var(#{$name}-#{$i}, color.change($color, $lightness: $amount));
 		}
 	}
 }