🎨 Re-formatted buttons, added destructive button, removed direction buttons

dist/css/buttons.css

@@ -1,9 +1,10 @@
 @charset "UTF-8";
 :root{
   --p-btn-border: #cacaca;
-  --p-btn-def-bg: #fff;
-  --p-btn-def-col: #333230;
+  --p-btn-def-bg: #FFFFFF;
+  --p-btn-def-col: #000000;
   --p-btn-dir-col: #242424;
+  --p-prim-text-col: #f5f5f5;
   --p-btn-scope-unactive: #212136;
   --p-btn-scope-action: #212136;
 }
@@ -11,7 +12,7 @@
 .p-btn {
   background: var(--p-btn-def-bg);
   border: 1px solid var(--p-btn-border);
-  border-radius: .3rem;
+  border-radius: 10px; /* Match the secondary button's roundness */
   color: var(--p-btn-def-col);
   display: inline-block;
   font-family: -apple-system, "Inter", sans-serif;
@@ -20,7 +21,7 @@
   padding: .4rem 1.2rem;
   text-decoration: none;
   text-align: center;
-  box-shadow: 0px 2px 3px -2px rgba(0,0,0,.3);
+  box-shadow: 0 1px 0.375px rgba(0, 0, 0, 0.05), 0 0.25px 0.375px rgba(0, 0, 0, 0.15);
   user-select: none;
   cursor: pointer;
 }
@@ -42,6 +43,9 @@
   padding: 1.2rem 2.8rem;
   font-size: 1.8rem;
 }
+.p-btn-destructive{
+  color: #FF3B30;
+}
 .p-btn-mob{
   padding: 10px 40px;
   background: #227bec;
@@ -59,11 +63,24 @@
 }
 
 .p-prim-col {
-  background: linear-gradient(to bottom, #4fc5fa 0%, #0f75f5 100%);
-  background-size: 100%;
-  border:0;
-  box-shadow: inset 0 1px 1px rgb(255 255 255 / 41%), 0px 2px 3px -2px rgba(0,0,0,.3);
-  color: #fff;
+  position: relative; /* To enable ::before element positioning */
+  background: #007AFF;
+  border: none;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.41), 0px 2px 3px -2px rgba(0, 0, 0, 0.3);
+  color: var(--p-prim-text-col);
+  overflow: hidden; /* Ensure the ::before element doesn't overflow */
+}
+
+.p-prim-col:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0.17;
+  pointer-events: none;
 }
 
 .p-btn.p-prim-col:active {
@@ -138,19 +155,4 @@
   border-color: currentColor;
   border-style: dashed;
   box-shadow: none;
-}
-
-.p-btn-direction {
-  color: var(--p-btn-dir-col);
-  padding: 5px;
-  text-decoration: none;
-  user-select: none;
-}
-
-.p-btn-direction.p-btn-d-back::before {
-  content: "❬";
-}
-
-.p-btn-direction.p-btn-d-next::after {
-  content: "❭";
 }

docs/examples/buttons.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -44,36 +44,51 @@
       <p>/</p>
       <a href="buttons.html" class="p-btn p-btn-scope">Buttons</a>
     </div>
+    <div class="p-docs-alert">
+      <div>
+        <svg viewBox="0 0 24 24" width="50" height="50" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+      </div>
+      <div>
+        <h3>Alert</h3>
+        <p>
+          Some of the components/functionalities provided in this version of the framework will be changing moving forward. <br>
+          To keep yourself updated, and understand how to migrate to newer versions, follow @puppertino_theme</p>
+      </div>
+    </div>
     <h1>Buttons</h1>
     <div class="master">
       <p>
-        Buttons are the main thing that move the interface. That's why it was
-        the main thing that was developed for Puppertino. <br />Puppertino
-        buttons support usage as links, buttons and submit elements.
+        Buttons are a key component of any interface, serving as interactive elements that guide user actions. In Puppertino, buttons have been designed with flexibility and accessibility in mind, supporting a variety of use cases across links, buttons, and form submissions.
       </p>
 
       <div class="talk-about-it">
         <h2>Push Buttons.</h2>
         <p>
-          Push buttons come in different variations according to your needings. It can be used as <code class="code">&#60;a></code> elements or <code class="code">&#60;button></code> elements. For buttons, is suggested that you use the attribute <code class="code">disabled</code> if you desire to disable them.
+          Push buttons come in several variations to suit different scenarios. They can be implemented as <code class="code">&#60;a></code> or <code class="code">&#60;button></code>elements, depending on the context. For cases where buttons need to be disabled, the disabled attribute can be applied to prevent user interaction. This ensures that the buttons are visually and functionally consistent with your design while maintaining clear communication with users about available actions.
         </p>
 
-        <button class="p-btn">Default</button>
-
-        <button class="p-btn" disabled="">Disabled</button>
-
-        <a href="#" class="p-btn p-prim-col">Primary</a>
-
-        <a href="#" class="p-btn p-btn-mob">Btn mob</a>
-
-        <a href="#" class="p-btn p-btn-round p-orange p-white-color p-white-color">Rounded</a>
-
-        
-        <a href="#" class="p-btn p-btn-outline">Outline</a>
+        <div class="d-flex align-baseline">
+          <button class="p-btn">Default</button>
+
+          <button class="p-btn p-btn-destructive">Destructive</button>
+
+          <button class="p-btn" disabled="">Disabled</button>
+
+          <a href="#" class="p-btn p-prim-col">Primary</a>
+  
+          <a href="#" class="p-btn p-btn-mob">Btn mob</a>
+  
+          <a href="#" class="p-btn p-btn-round p-orange p-white-color p-white-color">Rounded</a>
+  
+          
+          <a href="#" class="p-btn p-btn-outline">Outline</a>
+  
+          <a href="#" class="p-btn p-btn-outline-dash">Outline dashed</a>
+  
+          <a href="#" class="p-btn p-btn-more">Custom action</a>
+        </div>
 
-        <a href="#" class="p-btn p-btn-outline-dash">Outline dashed</a>
 
-        <a href="#" class="p-btn p-btn-more">Custom action</a>
 
         <p>Usage:</p>
         <div class="code">
@@ -81,6 +96,8 @@
 				<code class="html">
 &#60;a href="#" class="p-btn">Default&#60;/a>
 
+&#60;button class="p-btn p-btn-destructive">Destructive&#60;/button>
+
 &#60;a href="#" class="p-btn p-btn-disabled">Disabled&#60;/a>
 
 &#60;a href="#" class="p-btn p-prim-col">Primary&#60;/a>
@@ -98,19 +115,22 @@
       <div class="talk-about-it">
         <h2>Button colors</h2>
         <p>
-          Color customization in buttons is pretty simple. You will need to have the class <code class="code">p-btn-mob</code> to disable the shadow and border of the button.
+          Customizing button colors in Puppertino is now easier and more flexible. In earlier versions, applying the <code class="code">p-btn-mob</code> class was required for color changes. In the latest release, any button's color can be modified without additional classes.
           <br><br>
-          You can use the colors available in <a href="/docs/examples/color_palette.html">Color palette</a> or custom colors defined in your own CSS.
+          You can select from the predefined colors in <a href="/docs/examples/color_palette.html">Puppertino's color palette</a> or apply custom colors directly via your own CSS, giving you full control over button styling to match your design needs.
         </p>
 
-        <button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success</button>
-        <button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger</button>
-        <button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error</button>
+        <button class="p-btn p-prim-col p-grape p-white-color p-white-color">Primary Purple</button>
+        <button class="p-btn p-lime p-white-color p-white-color">Success</button>
+        <button class="p-btn p-prim-col p-orange p-white-color p-white-color">Danger</button>
+        <button class="p-btn p-prim-col p-strawberry p-white-color p-white-color">Error</button>
 
                 <p>Usage:</p>
         <div class="code">
           <pre>
         <code class="html">
+&#60;button class="p-btn p-prim-col p-grape p-white-color p-white-color">Primary Purple&#60;/button>
+
 &#60;button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success&#60;/button>
 
 &#60;button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger&#60;/button>
@@ -125,7 +145,7 @@
       <div class="talk-about-it">
         <h2>Button sizing</h2>
         <p>
-          Button sizing was a very requested feature during the alpha version of Puppertino. So now, I'm bringin 4 sizes for button sizes:
+          Button sizing was one of the most requested features during Puppertino's alpha phase. In response to that feedback, Puppertino now offers four distinct button sizes, providing flexibility to fit various design contexts:
         </p>
         <a href="#" class="p-btn p-btn-mob p-btn-sm">Small size</a>
         <a href="#" class="p-btn p-btn-mob p-btn-md">Medium size</a>
@@ -149,31 +169,12 @@
 
       </div>
 
-      <div class="talk-about-it">
-        <h2>Direction buttons.</h2>
-        <p>
-          Direction buttons are used to navigate across your app, and usage is really simple, just use <code class="code">p-btn-direction</code> as a base and <code class="code">p-btn-d-back</code> for back navigation and  <code class="code">p-btn-d-next</code>  for forward navigation.
-        </p>
-        <a href="#" class="p-btn-direction p-btn-d-back">Prev</a>
-        <a href="#" class="p-btn-direction p-btn-d-next">Next</a>
-        <p>Usage:</p>
-        <div class="code">
-          <pre>
-        <code class="html">
-&#60;a href="#" class="p-btn-direction p-btn-d-back">Prev&#60;/a>
-
-&#60;a href="#" class="p-btn-direction p-btn-d-next">Next&#60;/a>
-        </code>
-      </pre>
-        </div>
-      </div>
-
       <div class="talk-about-it">
         <h2>Icon button.</h2>
         <p>
-          The icon button (Before help button), is round button with an icon inside, you can use a letter, an icon based in fonts (Such as Font Awesome) or an SVG. For icons see <a href="https://codedgar.github.io/Puppertino/examples/icons.html">icons section</a>.
+          The Icon Button, previously known as the "Help Button", is a circular button that contains an icon. You can use a letter, font-based icons (such as Font Awesome), or an SVG. For more details on available icons, refer to the <a href="https://codedgar.github.io/Puppertino/examples/icons.html">icons section</a>.
           <br><br>
-          You can set the color of the borders and icon by just changing the <code class="code">color</code> property of the button or by adding the classes present in <a href="/docs/examples/color_palette.html">Color palette</a>. You can also disable borders by adding <code class="code">p-btn-icon-no-border</code>
+          Customization is straightforward: you can modify the border and icon colors using the <code class="code">color</code> property or by applying classes from the <a href="/docs/examples/color_palette.html">Color palette</a>. If you'd like to remove the button's borders, simply add the <code class="code">p-btn-icon-no-border</code> class.
         </p>
         <a href="#" class="p-btn-icon">?</a>
 
@@ -211,15 +212,13 @@
       <div class="talk-about-it">
         <h2>Scope buttons.</h2>
         <p>
-          Scope buttons are similar to Push buttons, but these are supposed to
-          be used on routes, and should not replace normal buttons.<br />
-          The <strong>Default/Active button</strong> is meant to indicate the
-          current route that the user is in. While the
-          <strong>Unactive button</strong> is supposed to be used in the route
-          before the current one. And the <strong>Action Button</strong> is
-          supposed to indicate any action that the user can do in that route,
-          like save, copy or others.
+          Scope Buttons function similarly to Push Buttons but are designed specifically for use in navigation routes. They should not replace standard buttons but complement them in route-based contexts.
         </p>
+        <ul>
+          <li><strong>Default/Active Button</strong>: This button highlights the current route, indicating where the user is within the interface.</li>
+          <li><strong>Inactive Button</strong>: Used to represent the route the user has just navigated from, providing a clear visual distinction.</li>
+          <li><strong>Action Button</strong>: This button is designed to prompt user actions, such as saving, copying, or other route-specific tasks.</li>
+        </ul>
 
         <a href="#" class="p-btn p-btn-scope">Default/Active</a>
 

docs/examples/doc.css

@@ -31,7 +31,8 @@ h3,
 input,
 p,
 a,
-code {
+code,
+li {
   font-family: -apple-system, "Inter", sans-serif;
 }
 h1 {
@@ -258,4 +259,33 @@ pre {
   .sponsored{
     max-width: 100%;
   }
+}
+
+.p-docs-alert{
+  display: flex;
+    align-items: center;
+    padding: 20px;
+    background: #ffca8063;
+    border-radius: 30px;
+    margin-top: 20px;
+}
+
+.p-docs-alert>div:first-child{
+  width: 10%;
+  display: grid;
+  place-items: center;
+}
+
+.p-docs-alert h3,
+.p-docs-alert p{
+  margin: 5px;
+}
+
+.d-flex{
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.align-baseline{
+  align-items: baseline;
 }

docs/examples/getting-started.html

@@ -44,6 +44,17 @@
       <p>/</p>
       <a href="getting-started.html" class="p-btn p-btn-scope">Introduction</a>
     </div>
+    <div class="p-docs-alert">
+      <div>
+        <svg viewBox="0 0 24 24" width="50" height="50" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+      </div>
+      <div>
+        <h3>Alert</h3>
+        <p>
+          The way in which Puppertino is installed or works will drastically change in new versions. <br>
+          To keep yourself updated, and understand how to migrate to newer versions, follow @puppertino_theme</p>
+      </div>
+    </div>
     <h1>Getting started</h1>
     <div class="master">
       <p>