b254 3.0.1 beta

UnderlineWords · UnderlineWords · commit 2ee14b3c81b5 · 2025-01-19T12:02:43.000+03:00
diff --git a/README.md b/README.md
@@ -16,6 +16,10 @@ If you want to quickly add the Punica CSS to your project, you can use the JsDel
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@3.x.x/dist/punica.min.css" crossorigin="anonymous">
 ```
+for Default Dark Theme;
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@3.x.x/dist/punica-dark.min.css" crossorigin="anonymous">
+```
 ### HTML Markup
 For your default setup, add the Punica CSS file to the <head> element of your HTML5 document.
 ```html
@@ -47,7 +51,7 @@ Punica's API-based structure allows you to create or customize a CSS framework t
 
 ### TODO List
 - [x] Default Theme
-- [ ] Default Dark Theme (testing)
+- [x] Default Dark Theme
 - [x] Documentation
 - [ ] API Documentation (0%)
 - [ ] Starter Templates (65%)
diff --git a/dist/punica-dark.min.css b/dist/punica-dark.min.css
diff --git a/dist/punica.min.css b/dist/punica.min.css
diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss
@@ -145,7 +145,6 @@
 					flex: inherit;
 					.#{class('card', 'title')},
 					.#{class('card', 'description')} {
-						//padding: components('card', 'padding');
 						padding: calc(#{components('card', 'padding')} / 2) calc(#{components('card', 'padding')} * 3);
 					}
 					.#{class('card', 'description')} {
diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss
@@ -143,8 +143,9 @@
 					color: components('navbar', 'button', 'icon', 'color');
 				}
 				&:hover {
-					background: darken(components('navbar', 'background-color'), 5%);
-					border-radius: 0;
+					color           : components('navbar', 'button', 'hover', 'color');
+					background-color: components('navbar', 'button', 'hover', 'background-color');
+					border-radius   : 0;
 				}
 				&:active,
 				&.#{class('button', 'active')} {
@@ -153,7 +154,6 @@
 					transition      : components('button', 'transition');
 					&:hover {
 						transition: components('button', 'transition');
-						background: darken(components('navbar', 'background-color'), 7%);
 					}
 				}
 			}
diff --git a/src/Modules/Components/Navbar/mixins.scss b/src/Modules/Components/Navbar/mixins.scss
@@ -51,14 +51,15 @@
 	}
 
 	.#{class('button', 'group')} {
-		.#{class('button', 'name')} {
-			color: $text-color;
+		.#{class('button', 'name')},
+		.#{class('button', 'dropdown')} .#{class('button', 'name')} {
+			color     : $text-color;
 			min-height: 100%;
 			i {
 				color: $text-color;
 			}
 			&:hover {
-				background: darken($bg-color, 5%);
+				background: lighten($bg-color, 5%);
 			}
 		}
 	}
@@ -72,8 +73,8 @@
 		div.#{class('navbar', 'section')} {
 			input[type='text'] {
 				background-color: $input-bg;
-				border-color: $input-border-color;
-				color: $input-color;
+				border-color    : $input-border-color;
+				color           : $input-color;
 				&::placeholder {
 					color: $text-color;
 				}
@@ -86,12 +87,12 @@
 				.#{class('button', 'dropdown')} .#{class('button', 'name')} {
 					&:active,
 					&.#{class('button', 'active')} {
-						color: $text-color;
-						background: darken($bg-color, 5%);
-						transition: components('button', 'transition');
+						color           : $text-color;
+						background-color: lighten($bg-color, 5%);
+						transition      : components('button', 'transition');
 						&:hover {
-							transition: components('button', 'transition');
-							background: darken($bg-color, 7%);
+							transition      : components('button', 'transition');
+							//background-color: darken($bg-color, 7%);
 						}
 					}
 				}
diff --git a/src/options.scss b/src/options.scss
@@ -499,14 +499,18 @@ $options: (
 			'font-size'       : 1rem,
 			'color'           : theme('color', 'text'),
 			'font-weight'     : bold,
-			'background-color': #fff,
+			'background-color': white,
 			'width'           : 100%,
 			'min-height'      : 5rem,
 			'button'          : (
 				'padding': .935rem 1.4rem,
 				'icon'   : (
 					'color': theme('color', 'text')
 				),
+				'hover': (
+					'color'           : theme('color', 'text'),
+					'background-color': color.$grey
+				),
 				'active': (
 					'color'           : theme('color', 'text'),
 					'background-color': color.$grey
@@ -531,7 +535,7 @@ $options: (
 			),
 			'input': (
 				'color'           : theme('color', 'text'),
-				'background-color': white,
+				'background-color': transparent,
 				'border-color'    : theme('border', 'color'),
 				'border-width'    : theme('border', 'width'),
 				'focus'           : (
@@ -559,7 +563,7 @@ $options: (
 				(
 					"primary", // theme name (class)
 					theme('color', 'primary'), // bg color
-					white, // text color
+					white, // text/button color
 					darken(theme('color', 'primary'), 7%), // input bg
 					white, // input color
 					lighten(theme('color', 'primary'), 4%), // input border color
@@ -568,7 +572,7 @@ $options: (
 				(
 					"dark", // theme name (class)
 					theme('color', 'dark'), // bg color
-					white, // text color
+					white, // text/button color
 					lighten(theme('color', 'dark'), 7%), // input bg
 					white, // input color
 					lighten(theme('color', 'dark'), 25.75%), // input border color
@@ -1081,7 +1085,7 @@ $options: (
 				'font-family'     : inherit,
 				'box-sizing'      : inherit,
 				'color'           : inherit,
-				'background-color': initial,
+				'background-color': transparent,
 				'border-color'    : inherit,
 				'height'          : initial,
 				'padding'         : .7rem .5rem,
diff --git a/src/punica.scss b/src/punica.scss
@@ -9,7 +9,7 @@
 
 ////////////////////////////////////////////////////////////////
 ///-------------------------------------------------------------
-	$active-theme: dark;
+	$active-theme: default;
 ///-------------------------------------------------------------
 ////////////////////////////////////////////////////////////////
 	$theme-name: if(map.has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme));
diff --git a/src/themes.scss b/src/themes.scss
@@ -61,7 +61,7 @@ $themes: (
 			'success'   : #369138,
 			'warning'   : #c17f2a,
 			'error'     : #CC2B52,
-			'dark'      : #29292f
+			'dark'      : #39414f
 		),
 		'border': (
 			'color' : #454859,
@@ -96,9 +96,6 @@ $themes: (
 			),
 			'navbar': (
 				'background-color': lighten(#222226, 2.5%),
-				'input': (
-					'background-color': #29292f
-				),
 				'menu': (
 					'background-color': lighten(#222226, 2.5%),
 				)

Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,6 @@`
`145`	`145`	`flex: inherit;`
`146`	`146`	`.#{class('card', 'title')},`
`147`	`147`	`.#{class('card', 'description')} {`
`148`		`- //padding: components('card', 'padding');`
`149`	`148`	`padding: calc(#{components('card', 'padding')} / 2) calc(#{components('card', 'padding')} * 3);`
`150`	`149`	`}`
`151`	`150`	`.#{class('card', 'description')} {`
Original file line number	Diff line number	Diff line change
`@@ -143,8 +143,9 @@`
`143`	`143`	`color: components('navbar', 'button', 'icon', 'color');`
`144`	`144`	`}`
`145`	`145`	`&:hover {`
`146`		`- background: darken(components('navbar', 'background-color'), 5%);`
`147`		`- border-radius: 0;`
	`146`	`+ color : components('navbar', 'button', 'hover', 'color');`
	`147`	`+ background-color: components('navbar', 'button', 'hover', 'background-color');`
	`148`	`+ border-radius : 0;`
`148`	`149`	`}`
`149`	`150`	`&:active,`
`150`	`151`	`&.#{class('button', 'active')} {`
`@@ -153,7 +154,6 @@`
`153`	`154`	`transition : components('button', 'transition');`
`154`	`155`	`&:hover {`
`155`	`156`	`transition: components('button', 'transition');`
`156`		`- background: darken(components('navbar', 'background-color'), 7%);`
`157`	`157`	`}`
`158`	`158`	`}`
`159`	`159`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,14 +51,15 @@`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`.#{class('button', 'group')} {`
`54`		`- .#{class('button', 'name')} {`
`55`		`- color: $text-color;`
	`54`	`+ .#{class('button', 'name')},`
	`55`	`+ .#{class('button', 'dropdown')} .#{class('button', 'name')} {`
	`56`	`+ color : $text-color;`
`56`	`57`	`min-height: 100%;`
`57`	`58`	`i {`
`58`	`59`	`color: $text-color;`
`59`	`60`	`}`
`60`	`61`	`&:hover {`
`61`		`- background: darken($bg-color, 5%);`
	`62`	`+ background: lighten($bg-color, 5%);`
`62`	`63`	`}`
`63`	`64`	`}`
`64`	`65`	`}`
`@@ -72,8 +73,8 @@`
`72`	`73`	`div.#{class('navbar', 'section')} {`
`73`	`74`	`input[type='text'] {`
`74`	`75`	`background-color: $input-bg;`
`75`		`- border-color: $input-border-color;`
`76`		`- color: $input-color;`
	`76`	`+ border-color : $input-border-color;`
	`77`	`+ color : $input-color;`
`77`	`78`	`&::placeholder {`
`78`	`79`	`color: $text-color;`
`79`	`80`	`}`
`@@ -86,12 +87,12 @@`
`86`	`87`	`.#{class('button', 'dropdown')} .#{class('button', 'name')} {`
`87`	`88`	`&:active,`
`88`	`89`	`&.#{class('button', 'active')} {`
`89`		`- color: $text-color;`
`90`		`- background: darken($bg-color, 5%);`
`91`		`- transition: components('button', 'transition');`
	`90`	`+ color : $text-color;`
	`91`	`+ background-color: lighten($bg-color, 5%);`
	`92`	`+ transition : components('button', 'transition');`
`92`	`93`	`&:hover {`
`93`		`- transition: components('button', 'transition');`
`94`		`- background: darken($bg-color, 7%);`
	`94`	`+ transition : components('button', 'transition');`
	`95`	`+ //background-color: darken($bg-color, 7%);`
`95`	`96`	`}`
`96`	`97`	`}`
`97`	`98`	`}`