@appartmint/css-mint 0.0.37 → 0.0.38

package/package.json

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

package/src/themes/colors.scss

@@ -1,39 +1,35 @@
-@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);
-	}
+/// colors.scss - Color variables
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
 
-	@error 'Invalid color space: #{color.space($color)}';
-}
+/// Imports
+@use '../util' as *;
 
+/// Color Variables
 :root {
 	/// 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);
+	@include shades(c-bw, black);
+	@include shades(c-glow, rgba(255, 255, 255, 0));
+	@include shades(c-shadow, rgba(0, 0, 0, 0));
 
 	/// Brand Colors
-	@include shades(c-brand, hsl(0, 54%, 50%));
+	@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, 100%, 50%));
+	@include shades(c-danger, hsl(0, 54%, 50%));
 	@include shades(c-warning, hsl(37, 100%, 50%));
-	@include shades(c-info, hsl(201, 70%, 50%));
+	@include shades(c-info, hsl(201, 50%, 50%));
+}
 
-	/// App Colors
+/// 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(c-bg, c-bw-1);
 }
 
+/// App Themes
 #{class(theme)} {
 	&-dark {
 		@include css-var-ref(c-fg, c-bw-1);

package/src/themes/fonts.scss

@@ -1,5 +1,13 @@
+/// 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);

package/src/util/box.scss

@@ -0,0 +1,127 @@
+/// box.scss - Box model utilities
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:meta';
+
+/// Creates utility selectors for a box model property
+/// @group Mixins
+@mixin box-util ($prop, $val) {
+	@if (meta.type-of($prop) != 'string') {
+		@error 'The box-util mixin requires a string for the $prop argument.';
+	}
+
+	&-auto {
+		#{$prop}-left: auto;
+		#{$prop}-right: auto;
+
+		&-v {
+			#{$prop}: $val auto;
+
+			@for $i from 0 through 6 {
+				&#{$i} {
+					#{$prop}: $val * $i auto;
+				}
+			}
+		}
+
+		&-t {
+			#{$prop}-top: $val;
+			#{$prop}-left: auto;
+			#{$prop}-right: auto;
+
+			@for $i from 0 through 6 {
+				&#{$i} {
+					#{$prop}-top: $val * $i;
+					#{$prop}-left: auto;
+					#{$prop}-right: auto;
+				}
+			}
+		}
+
+		&-b {
+			#{$prop}-bottom: $val;
+			#{$prop}-left: auto;
+			#{$prop}-right: auto;
+
+			@for $i from 0 through 6 {
+				&#{$i} {
+					#{$prop}-bottom: $val * $i;
+					#{$prop}-left: auto;
+					#{$prop}-right: auto;
+				}
+			}
+		}
+	}
+
+	&-v {
+		#{$prop}-top: $val;
+		#{$prop}-bottom: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-top: $val * $i;
+				#{$prop}-bottom: $val * $i;
+			}
+		}
+	}
+
+	&-t {
+		#{$prop}-top: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-top: $val * $i;
+			}
+		}
+
+		&#{50} {
+			#{$prop}-top: 50vh;
+		}
+	}
+
+	&-b {
+		#{$prop}-bottom: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-bottom: $val * $i;
+			}
+		}
+	}
+
+	&-h {
+		#{$prop}-left: $val;
+		#{$prop}-right: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-left: $val * $i;
+				#{$prop}-right: $val * $i;
+			}
+		}
+	}
+
+	&-l {
+		#{$prop}-left: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-left: $val * $i;
+			}
+		}
+	}
+
+	&-r {
+		#{$prop}-right: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-right: $val * $i;
+			}
+		}
+	}
+}

package/src/util/break.scss

@@ -0,0 +1,113 @@
+/// break.scss - Breakpoint utilities
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:map';
+@use 'sass:meta';
+
+/// Breakpoint variables
+/// @group Maps
+/// @prop {Number} $break.xs [480] - Extra-Small: mobile devices
+/// @prop {Number} $break.sm [768] - Small: small tablets, landscape mobiles
+/// @prop {Number} $break.md [1024] - Medium: small desktops, large tablets
+/// @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,
+) !default;
+
+/// Returns the requested breakpoint value as rem
+/// @group Functions
+///
+/// @param {Number} $key - the key of the breakpoint to use
+/// @return {Number} - the breakpoint value as rem
+@function break($key) {
+	@if not(map.has-key($break, $key)) {
+		@error 'The break function requires one of the following values: #{map.keys($break)}';
+	}
+
+	@return map.get($break, $key) * 1rem;
+}
+
+/// Wraps the provided content in a media query
+/// @group Mixins
+///
+/// @param {String} $min - the key of the breakpoint to use with min-width
+/// @param {String} $max - the key of the breakpoint to use with max-width
+/// @output the provided content wrapped in a media query
+@mixin break ($min, $max: null) {
+	@if not(map.has-key($break, $min) and (meta.type-of($max) == 'null' or map.has-key($break, $max))) {
+		@error 'The break mixin requires one or two of the following values: #{map.keys($break)}';
+	}
+
+	@if (map.has-key($break, $max)) {
+		@media (min-width: break($min)) and (max-width: break($max)) {
+			@content;
+		}
+	}
+
+	@else {
+		@media (min-width: break($min)) {
+			@content;
+		}
+	}
+}
+
+@mixin break-max ($max, $min: null) {
+	@if not(map.has-key($break, $max) and (meta.type-of($min) == 'null' or map.has-key($break, $min))) {
+		@error 'The break-max mixin requires one or two of the following values: #{map.keys($break)}';
+	}
+
+	$break-max: break($max) - 1px;
+	@if (map.has-key($break, $min)) {
+		@media (min-width: break($min)) and (max-width: $break-max) {
+			@content;
+		}
+	}
+
+	@else {
+		@media (max-width: $break-max) {
+			@content;
+		}
+	}
+}
+
+/// Creates utility selectors for a given property at each breakpoint
+/// @group Mixins
+///
+/// @param {String} $prop - the property to toggle
+/// @param {Any} $val - the active value of the property
+/// @param {Any} $none - the inactive value of the property
+/// @output utility selectors for the given property at each breakpoint
+@mixin break-util ($prop, $val, $none: "none") {
+	@if (meta.type-of($prop) !='string') {
+		@error 'The break-util mixin requires a string for the $prop argument.';
+	}
+
+	#{$prop}: #{$val};
+
+	@each $key, $width in $break {
+		&-#{$key} {
+			#{$prop}: #{$none};
+
+			@include break($key) {
+				#{$prop}: #{$val};
+			}
+		}
+
+		&-to-#{$key} {
+			#{$prop}: #{$val};
+
+			@include break($key) {
+				#{$prop}: #{$none};
+			}
+		}
+	}
+}

package/src/util/color.scss

@@ -0,0 +1,61 @@
+/// color.scss - Color utilities
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:color';
+@use 'sass:math';
+
+/// Get the luminance of a color
+/// @group Functions
+///
+/// @param {Color} $color - the color to get the luminance of
+/// @return {Number} the luminance of the color
+@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)}';
+}
+
+/// Generates css varibles for lighter, darker, or both variations
+/// @group Mixins
+///
+/// @param {String} $name - the name of the color
+/// @param {Color} $color - the color to generate variations for
+/// @param {Number} $number - the number of variations to generate
+/// @output css variables for different shades of the source color
+@mixin shades ($name, $color, $number: 10) {
+	@if (meta.type-of($name) != 'string') {
+		@error 'The shades mixin requires a string for the $name argument.';
+	}
+
+	@if (meta.type-of($color) != 'color') {
+		@error 'The shades mixin requires a color for the $color argument.';
+	}
+
+	@if (meta.type-of($number) != 'number') {
+		@error 'The shades mixin requires a number for the $number argument.';
+	}
+
+	@if (color.alpha($color) != 1) {
+		@for $i from 0 through $number - 1 {
+			$amount: math.div($i, $number);
+			@include css-var(#{$name}-#{$i}, color.change($color, $alpha: $amount));
+		}
+	} @else {
+		@for $i from 0 through $number - 1 {
+			$amount: math.div($i, $number);
+			@include css-var(#{$name}-#{$i}, color.change($color, $lightness: $amount));
+		}
+	}
+}

package/src/util/index.scss

@@ -0,0 +1,7 @@
+@use 'box' as *;
+@use 'break' as *;
+@use 'color' as *;
+@use 'number' as *;
+@use 'selector' as *;
+@use 'text' as *;
+@use 'time' as *;

package/src/util/number.scss

@@ -0,0 +1,22 @@
+/// number.scss - Number utilities
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use 'sass:meta';
+
+/// Removes the unit from the given value
+/// @group Functions
+///
+/// @param {Number} $val - the value to strip
+/// @return {Number} - the number without units
+@function strip-unit($val) {
+	@if (meta.type-of($val) != 'number') {
+		@error 'The strip-unit function requires a number value.';
+	}
+
+	@return math.div($val, $val * 0 + 1);
+}