b203

Author: UnderlineWords

src/Core/Global/Colors.scss

@@ -1,12 +1,16 @@
 ///
 /// Punica CSS Framework
-/// Core/Global/Colors.scss
+/// [Core/Global/Colors.scss]
+/// Secondary Color Variables/Mixes
 /// 
 
 @use "sass:color" as color;
 @use "../Theme/Getters" as *;
 
-// Secondary color variables/mixes
+/// Grey
 $grey        : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%);
+$dark-grey   : color.mix(theme('color', 'text'), theme('color', 'background'), 9.5%);
+$darken-grey : color.mix(theme('color', 'text'), theme('color', 'background'), 4.5%);
+//
 $sharp-grey  : color.mix(theme('color', 'text'), theme('color', 'dark'), 24.5%);
 $sharpen-grey: color.mix(theme('color', 'text'), theme('color', 'dark'), 45%);

src/Core/Global/Helpers.scss

@@ -8,6 +8,6 @@
 ///
 @function theme-not-found($theme) 
 {
-    $error: "[PUNICA] Invalid theme name: [#{$theme}]. Punica's theme map does not contains a key name associated with #{$theme}. Please check the 'themes.scss' file.";
+    $error: "[PUNICA] Invalid theme name: [#{$theme}]. Punica's theme map does not contains a key name associated with '#{$theme}'. Please check the 'themes.scss' file.";
     @error $error;
 }

src/Core/Global/Sass.scss

@@ -2,15 +2,15 @@
 /// Punica CSS Framework
 /// Core/Global/Sass.scss
 /// 
-@use "sass:color" as *;
+@use "sass:color" as color;
 
 ///
 /// @param $color
 /// @param $value
 ///
 @function lighten($color, $value)
 {
-	@return adjust($color, $lightness: $value);
+	@return color.adjust($color, $lightness: $value);
 }
 
 ///
@@ -19,5 +19,5 @@
 ///
 @function darken($color, $value)
 {
-	@return adjust($color, $lightness: -$value);
+	@return color.adjust($color, $lightness: -$value);
 }

src/Modules/Components/Card/Card.scss

@@ -20,8 +20,7 @@
 		@if features('components', 'card', 'hovered') {
 			// .hovered.cards
 			&.#{class('card', 'hovered')} > .#{class('card', 'name')}:hover {
-				background-color: darken(components('card', 'background-color'), 4%);
-				transition      : components('card', 'transition');
+				@extend .#{class('card', 'hovered')}, :hover;
 			}
 		}
 	}

src/Modules/Components/Menu/Menu.scss

@@ -60,9 +60,15 @@
 				&:active,
 				&:focus,
 				&.#{class('menu', 'active')} {
-					color           : components('menu', 'item', 'hover', 'color');
-					transition      : components('menu', 'item', 'href', 'transition');
-					background-color: components('menu', 'item', 'hover', 'background-color');
+					transition: components('menu', 'item', 'href', 'transition');
+				}
+				// .menu .item > a.active
+				&.#{class('menu', 'active')} {
+					color           : components('menu', 'item', 'active', 'color');
+					background-color: components('menu', 'item', 'active', 'background-color');
+					i {
+						color: components('menu', 'item', 'active', 'color') !important;
+					}
 				}
 			}
 			// .menu .item i

src/Modules/Elements/Table/Table.scss

@@ -35,7 +35,7 @@
 				tr,
 				tbody tr {
 					&.#{class('table', 'active')} {
-						background-color: elements('table', 'striped', 'background-color');
+						@extend .#{class('table', 'active')};
 					}
 					&:nth-of-type(odd) {
 						background-color: elements('table', 'striped', 'background-color');
@@ -52,17 +52,18 @@
 				tbody tr {
 					&:hover {
 						background-color: elements('table', 'hover', 'background-color');
-						color           : theme('color', 'text');
+						color           : elements('table', 'hover', 'color');
 					}
 				}
 			}
 		}
 		tr,
 		tbody tr {
-			transition: all 0.3s;
+			transition: elements('table', 'transition');
 			&.#{class('table', 'active')},
 			&.#{class('table', 'active')}:hover {
-				background-color: elements('table', 'hover', 'background-color');
+				color           : elements('table', 'active', 'color');
+				background-color: elements('table', 'active', 'background-color');
 			}
 		}
 		td,

src/options.scss

@@ -446,9 +446,13 @@ $options: (
 					'text-decoration': none,
 					'transition'     : background .15s,
 				),
+				'active': (
+					'color'           : theme('color', 'text'),
+					'background-color': color.$grey
+				),
 				'hover': (
 					'color'           : theme('color', 'text'),
-					'background-color': color.$grey,
+					'background-color': color.$grey
 				),
 				'sub-menu': (
 					'padding': .4rem // padding of sub items
@@ -1211,11 +1215,18 @@ $options: (
 			'border-spacing' : 0,
 			'border-collapse': collapse,
 			'position'       : relative,
+			'transition'     : all 0.3s,
 			'hover': (
-				'background-color': color.$grey
+				'color'           : theme('color', 'text'),
+				'background-color': color.$darken-grey
 			),
 			'striped': (
-				'background-color': color.$grey
+				'color'           : theme('color', 'text'),
+				'background-color': color.$darken-grey
+			),
+			'active': (
+				'color'           : theme('color', 'text'),
+				'background-color': color.$dark-grey
 			),
 			'td': (
 				'padding': .313rem .7rem,

src/themes.scss

@@ -124,7 +124,13 @@ $themes: (
 		// the all default settings in the options.scss API file.
 		'components': (
 			'menu': (
-				'background-color': lighten(#222226, 2.5%)
+				'background-color': lighten(#222226, 2.5%),
+				'item': (
+					'active': (
+						'color': white,
+						'background-color': #3266ec
+					)
+				)
 			),
 			'navbar': (
 				'color': #cfd4ec
@@ -148,9 +154,6 @@ $themes: (
 				)
 			),
 			'table':(
-				'hover': (
-					'background-color': lighten(#222226, 3%),
-				),
 				'caption' : (
 					'border-bottom': 4px solid #474a59
 				)