fix: badge bg #6 and add some colors

matifandy8 · Jan 12, 2024 · 81fb0b2 · 81fb0b2
1 parent 57d3b80
commit 81fb0b2
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 8 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -510,6 +510,15 @@ html {
     opacity: 1;
     text-align: left; }
 
+.text-black {
+  color: #000000; }
+
+.text-white {
+  color: #ffffff; }
+
+.text-red {
+  color: #dc341e; }
+
 .text-orange {
   color: #ff5733; }
 
@@ -537,6 +546,15 @@ html {
 .text-pale-yellow {
   color: #fdfd96; }
 
+.bg-black {
+  background-color: #000000; }
+
+.bg-white {
+  background-color: #ffffff; }
+
+.bg-red {
+  background-color: #dc341e; }
+
 .bg-orange {
   background-color: #ff5733; }
 
@@ -687,7 +705,6 @@ input.nb-checkbox {
   padding: 5px;
   border: 2px solid #000;
   border-radius: 50px;
-  background-color: #40d39c;
   box-shadow: 3px 3px 0 0 #000; }
   .badge .badge-inner {
     display: flex;
@@ -698,7 +715,6 @@ input.nb-checkbox {
     border: 2px solid #000;
     border-radius: 50px; }
     .badge .badge-inner .badge-text {
-      color: #031926;
       padding: 10px;
       margin: 0; }
 

diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -258,7 +258,7 @@ <h3>Badge</h3>
                 Section presents a badge with text. It illustrates a user interface component
                 provided by NeoBrutalismCSS for badges.
             </p>
-            <div class="badge">
+            <div class="badge bg-orange text-white">
                 <div class="badge-inner">
                     <p class="badge-text">Excellence</p>
                 </div>
@@ -267,7 +267,7 @@ <h3>Badge</h3>
                 <pre>
                   <button class="copy tooltip copy-button"><img src="assets/copy.svg" alt="copy"> <span class="tooltiptext">Copy to clipboard</span></button>
                   <code class="language-html" data-lang="html"> 
-<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge"</span><span class="tag">&gt;</span>
+<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge bg-orange"</span><span class="tag">&gt;</span>
     <span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge-inner"</span><span class="tag">&gt;</span>
         <span class="tag">&lt;p</span> <span class="class">class=</span><span class="name">"badge-text"</span><span class="tag">&gt;</span>Excellence<span class="tag">&lt;/p&gt;</span>
     <span class="tag">&lt;/div&gt;</span>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neobrutalismcss",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "NeoBrutalismCSS design framework that embraces the aesthetics of neo-brutalism in web",
   "main": "dist/index.min.css",
   "repository": {

diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
@@ -1,3 +1,5 @@
+$black: #000000;
+$white: #ffffff;
 $red: #dc341e;
 $orange: #ff5733;
 $blue: #0077b6;
@@ -12,6 +14,7 @@ $pale-cyan: #b9e7de;
 $pale-yellow: #fdfd96;
 $pale-yellow-light: #f8f894;
 
+$hover-red: #a52a2a;
 $hover-orange: #d64b2b;
 $hover-blue: #005785;
 $hover-green: #30ac7e;

diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss
@@ -3,7 +3,6 @@
   padding: 5px;
   border: 2px solid #000;
   border-radius: 50px;
-  background-color: #40d39c;
   box-shadow: 3px 3px 0 0 #000;
 
   .badge-inner {
@@ -15,7 +14,6 @@
     border: 2px solid #000;
     border-radius: 50px;
     .badge-text {
-      color: #031926;
       padding: 10px;
       margin: 0;
     }

diff --git a/src/scss/components/_colors.scss b/src/scss/components/_colors.scss
@@ -1,4 +1,7 @@
 $text-colors: (
+  black: $black,
+  white: $white,
+  red: $red,
   orange: $orange,
   blue: $blue,
   green: $green,
@@ -11,6 +14,9 @@ $text-colors: (
 );
 
 $bg-colors: (
+  black: $black,
+  white: $white,
+  red: $red,
   orange: $orange,
   blue: $blue,
   green: $green,