V1 is HERE! 🐶🐶🐶

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 ![Puppertino Logo](https://i.imgur.com/r81X3Yj.png)
 
-# Welcome to Puppertino!
+# Welcome to Puppertino V 1.0!
 
 Hi! Welcome to **Puppertino!** Puppertino is a framework meant to mimic the look
 of **macOS** and follow the **human guidelines**. Puppertino is a Framework
@@ -44,10 +44,15 @@ Puppertino currently includes:
 
 - Buttons
 - Switches
+- Actions
 - Form Elements (Inputs, select, form validation)
 - Modals
 - Icons
 - Font Layout
+- Segmented Controls
+- Tabs
+- Shadows
+- NEW! Dark Mode
 - Color Palette
 
 Yeah... That's all. But no worries! I'm working on adding new components every day!

dist/css/actions.css

@@ -1,19 +1,32 @@
+:root {
+  --font: -apple-system, "Inter", sans-serif;
+  --primary-col-ac: #0f75f5;
+  --p-modal-bg: rgba(255, 255, 255, 0.8);
+  --p-modal-bd-color: rgba(0,0,0,.1);
+  --p-modal-fallback-color: rgba(255,255,255,.95);
+  --p-actions-static-color: #555761;
+}
+
+.p-modal-opened {
+  overflow: hidden;
+}
+
 .p-action-background{
-  background: rgba(0, 0, 0, 0.3);
-    height: 100vh;
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: fixed;
-    top: 0;
-    transition: all 0.3s;
-    width: 100vw;
-    z-index: 5;
+  background: rgba(0, 0, 0, 0.7);
+  height: 100vh;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  transition: 0.3s;
+  width: 100vw;
+  z-index: 5;
 }
 
 .p-action-background.nowactive {
-    opacity: 1;
-    pointer-events: auto;
+  opacity: 1;
+  pointer-events: auto;
 }
 
 
@@ -26,12 +39,12 @@
 }
 
 .p-action-container{
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(10px);
+  background: var(--p-modal-bg);
   display:block;
   margin:auto;
   margin-bottom: 10px;
   border-radius: 10px;
+  max-width: 700px;
 }
 
 .p-action-big-container .p-action-container:first-child{
@@ -54,7 +67,7 @@
 }
 
 .p-action-neutral{
-  color: #555761;
+  color: var(--p-actions-static-color);
 }
 
 .p-action-cancel, .p-action-container a:last-child{
@@ -93,7 +106,7 @@
 
 .p-action-title--intern,.p-action-text{
   margin:0;
-  color:#555761;
+  color:var(--p-actions-static-color);
 }
 
 .p-action-title--intern{
@@ -102,20 +115,27 @@
 
 @supports not (backdrop-filter: blur(10px)) {
   .p-action-container {
-    background: rgba(255,255,255,.95);
+    background: var(--p-modal-fallback-color);
   }
 }
 
 .p-action-big-container{
   -webkit-transform: translateY(30%);
-            transform: translateY(30%);
-    opacity: 0;
+  transform: translateY(30%);
+  opacity: 0;
   transition: opacity 0.4s, transform 0.4s;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: ease;
+  pointer-events: none;
 }
 
 .p-action-big-container.active {
--webkit-transform: translateY(0);
-            transform: translateY(0);
-    opacity: 1;
+  -webkit-transform: translateY(0);
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: all;
 }
+
+
+.p-action-big-container.active .p-action-container {
+  backdrop-filter: saturate(180%) blur(10px);
+}

dist/css/buttons.css

@@ -1,36 +1,68 @@
 @charset "UTF-8";
+:root{
+  --p-btn-border: #cacaca;
+  --p-btn-def-bg: #fff;
+  --p-btn-def-col: #333230;
+  --p-btn-dir-col: #242424;
+  --p-btn-scope-unactive: #212136;
+  --p-btn-scope-action: #212136;
+}
+
 .p-btn {
-  background: #fff;
-  border: 1px solid #cacaca;
-  border-radius: 5px;
-  color: #333230;
+  background: var(--p-btn-def-bg);
+  border: 1px solid var(--p-btn-border);
+  border-radius: .3rem;
+  color: var(--p-btn-def-col);
   display: inline-block;
   font-family: -apple-system, "Inter", sans-serif;
-  font-size: 17px;
-  margin: 10px;
-  padding: 5px 20px;
+  font-size: 1.1rem;
+  margin: .7rem;
+  padding: .4rem 1.2rem;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  text-align: center;
+  box-shadow: 0px 2px 3px -2px rgba(0,0,0,.3);
+  user-select: none;
+  cursor: pointer;
 }
-.p-btn[disabled] {
-  background: #d3d3d3;
-  color: #555;
-  cursor: not-allowed;
+.p-btn:focus{
+  outline: 2px solid #64baff;
 }
-.p-btn:disabled {
-  background: #d3d3d3;
-  color: #555;
-  cursor: not-allowed;
+.p-btn.p-btn-block{
+  display: block;
+}
+.p-btn.p-btn-sm {
+  padding: .3rem 1.1rem;
+  font-size: 1rem;
 }
-.p-btn-disabled {
-  background: #d3d3d3;
-  color: #555;
+.p-btn.p-btn-md {
+  padding: .8rem 2.4rem;
+  font-size: 1.6rem;
+}
+.p-btn.p-btn-lg {
+  padding: 1.2rem 2.8rem;
+  font-size: 1.8rem;
+}
+.p-btn-mob{
+  padding: 10px 40px;
+  background: #227bec;
+  color: #fff;
+  border: 0;
+  box-shadow: inset 0 1px 1px rgb(255 255 255 / 41%), 0px 2px 3px -2px rgba(0,0,0,.3);
+}
+.p-btn[disabled],
+.p-btn:disabled,
+.p-btn-disabled{
+  filter:contrast(0.5) grayscale(.5) opacity(.8);
   cursor: not-allowed;
+  box-shadow: none;
+  pointer-events: none;
 }
 
 .p-prim-col {
   background: linear-gradient(to bottom, #4fc5fa 0%, #0f75f5 100%);
-  border: 0;
+  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;
 }
 
@@ -45,24 +77,31 @@
 .p-btn-round {
   border: 0;
   border-radius: 50px;
+  box-shadow: inset 0 1px 1px rgb(255 255 255 / 41%);
   padding: 10px 30px;
 }
 
 .p-btn-icon {
   align-items: center;
-  background: #fff;
+  background: var(--p-btn-def-bg);
   border: 2px solid currentColor;
   border-radius: 50%;
-  box-shadow: 0 3px 10px -8px #000;
   color: #0f75f5;
   display: inline-flex;
   font-weight: 900;
-  height: 36px;
+  height: 40px;
+  width: 40px;
   justify-content: center;
   margin: 5px;
   text-align: center;
   text-decoration: none;
-  width: 36px;
+  box-sizing: border-box;
+  user-select: none;
+  vertical-align: bottom;
+}
+
+.p-btn-icon.p-btn-icon-no-border{
+  border: 0px;
 }
 
 .p-btn-scope {
@@ -70,46 +109,42 @@
   color: #fff;
   margin: 5px;
   padding: 2px 20px;
+  box-shadow: none;
 }
 .p-btn-scope-unactive {
   background: transparent;
   border-color: transparent;
-  color: #212136;
+  color: var(--p-btn-scope-unactive);
   transition: border-color 0.2s;
 }
 .p-btn-scope-unactive:hover {
-  border-color: #cacaca;
-}
-.p-btn-scope-disabled {
-  background: transparent;
-  color: #8e8e8e;
-  cursor: not-allowed;
-}
-.p-btn-scope-outline {
-  background: transparent;
-  color: #212136;
+  border-color: var(--p-btn-border);
 }
 
 .p-btn-scope-outline {
   background: transparent;
-  color: #212136;
+  color: var(--p-btn-scope-action);
+  box-shadow: none;
 }
 
 .p-btn-outline {
   background: none;
   border-color: currentColor;
+  box-shadow: none;
 }
 
 .p-btn-outline-dash {
   background: none;
   border-color: currentColor;
   border-style: dashed;
+  box-shadow: none;
 }
 
 .p-btn-direction {
-  color: #212136;
+  color: var(--p-btn-dir-col);
   padding: 5px;
   text-decoration: none;
+  user-select: none;
 }
 
 .p-btn-direction.p-btn-d-back::before {
@@ -118,19 +153,4 @@
 
 .p-btn-direction.p-btn-d-next::after {
   content: "❭";
-}
-
-@media (max-width: 576px) {
-  .p-btn-big-sm {
-    border: 0;
-    border-radius: 0%;
-    bottom: 0;
-    font-size: 50px;
-    left: 0;
-    margin: 0;
-    padding: 10px 0;
-    position: fixed;
-    text-align: center;
-    width: 100%;
-  }
-}
+}

dist/css/cards.css

@@ -1,12 +1,17 @@
+:root{
+  --p-color-card: #1a1a1a;
+  --p-bg-card: #fff;
+  --p-bd-card: #c5c5c5;
+}
 .p-card {
-  background: rgba(255, 255, 255, 0.3);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-  box-shadow: 0 8px 10px -8px rgba(0, 0, 0, 0.1);
-  color: #000;
+  background: var(--p-bg-card);
+  border: 1px solid var(--p-bd-card);
+  color: var(--p-color-card);
   display: block;
   margin-top: 30px;
   text-decoration: none;
+  border-radius: 25px;
+  padding: 20px 0px;
 }
 .p-card-image > img {
   border-bottom: 3px solid var(--accent-article);
@@ -29,20 +34,6 @@
   top: 0;
   width: 30%;
 }
-.p-card-tags span,
-.p-card-tags a {
-  border: 1px solid #252525;
-  border-radius: 50px;
-  color: #252525;
-  margin: 5px;
-  padding: 5px 15px;
-  text-decoration: none;
-  transition: all 0.2s;
-}
-.p-card-tags a:hover {
-  background: #252525;
-  color: #000;
-}
 .p-card-title {
   font-size: 2rem;
   margin-bottom: 15px;

dist/css/color_palette.css

@@ -1,3 +1,93 @@
+:root{
+--p-strawberry: #c6262e;
+--p-strawberry-100: #ff8c82;
+--p-strawberry-300: #ed5353;
+--p-strawberry-500: #c6262e;
+--p-strawberry-700: #a10705;
+--p-strawberry-900: #7a0000;
+
+--p-orange: #f37329;
+--p-orange-100: #ffc27d;
+--p-orange-300: #ffa154;
+--p-orange-500: #f37329;
+--p-orange-700: #cc3b02;
+--p-orange-900: #a62100;
+
+
+--p-banana: #f9c440;
+--p-banana-100: #fff394;
+--p-banana-300: #ffe16b;
+--p-banana-500: #f9c440;
+--p-banana-700: #d48e15;
+--p-banana-900: #ad5f00;
+
+--p-lime: #68b723;
+--p-lime-100: #d1ff82;
+--p-lime-300: #9bdb4d;
+--p-lime-500: #68b723;
+--p-lime-700: #3a9104;
+--p-lime-900: #206b00;
+
+--p-mint: #28bca3;
+--p-mint-100: #89ffdd;
+--p-mint-300: #43d6b5;
+--p-mint-500: #28bca3;
+--p-mint-700: #0e9a83;
+--p-mint-900: #007367;
+
+
+--p-blueberry: #3689e6;
+--p-blueberry-100: #8cd5ff;
+--p-blueberry-300: #64baff;
+--p-blueberry-500: #3689e6;
+--p-blueberry-700: #0d52bf;
+--p-blueberry-900: #002e99;
+
+--p-grape: #a56de2;
+--p-grape-100: #e4c6fa;
+--p-grape-300: #cd9ef7;
+--p-grape-500: #a56de2;
+--p-grape-700: #7239b3;
+--p-grape-900: #452981;
+
+--p-bubblegum: #de3e80;
+--p-bubblegum-100: #fe9ab8;
+--p-bubblegum-300: #f4679d;
+--p-bubblegum-500: #de3e80;
+--p-bubblegum-700: #bc245d;
+--p-bubblegum-900: #910e38;
+
+
+--p-cocoa: #715344;
+--p-cocoa-100: #a3907c;
+--p-cocoa-300: #8a715e;
+--p-cocoa-500: #715344;
+--p-cocoa-700: #57392d;
+--p-cocoa-900: #3d211b;
+
+--p-silver: #abacae;
+--p-silver-100: #fafafa;
+--p-silver-300: #d4d4d4;
+--p-silver-500: #abacae;
+--p-silver-700: #7e8087;
+--p-silver-900: #555761;
+
+--p-slate: #485a6c;
+--p-slate-100: #95a3ab;
+--p-slate-300: #667885;
+--p-slate-500: #485a6c;
+--p-slate-700: #273445;
+--p-slate-900: #0e141f;
+
+
+--p-dark: #333;
+--p-dark-100: #666;
+--p-dark-300: #4d4d4d;
+--p-dark-500: #333;
+--p-dark-700: #1a1a1a;
+--p-dark-900: #000;
+}
+
 .p-strawberry {
   background: #c6262e;
 }
@@ -287,6 +377,10 @@
   background: #000;
 }
 
+.p-white{
+  background: #fff;
+}
+
 .p-strawberry-color {
   color: #c6262e;
 }
@@ -575,3 +669,7 @@
 .p-dark-900-color {
   color: #000;
 }
+
+.p-white-color{
+  color: #fff;
+}

dist/css/dark_mode.css

@@ -0,0 +1,89 @@
+.p-dark-mode {
+
+  --p-btn-border: #454545;
+  --p-btn-def-bg: #262525;
+  --p-btn-def-col: #fcfcfc;
+  --p-btn-dir-col: #e0e0e0;
+  --p-btn-scope-unactive: #e4e4e4;
+  --p-btn-scope-action: #d0d0d0;
+  --p-color-card: #fff;
+  --p-bg-card: #1a1a1a;
+  --p-bd-card: #1d1d1d;
+
+	--p-suggested-bg: #0e0e0e;
+	--p-suggested-color: #e6e6e6;
+	--route-bg:#040404;
+
+
+	--p-modal-bg: rgb(45 45 45 / 85%);
+	--p-modal-bd-color:rgb(224 224 224 / 10%);
+  --p-color-basic-elements: #f5f5f7;
+
+
+	--primary-col-ac:#197fff;
+
+  --p-input-bg: #040404;
+  --p-input-color: #fff;
+  --p-input-color-plac:#414141;
+
+  --p-input-bd: #454545;
+  
+  --p-modal-fallback-color: rgba(0,0,0,.95);
+
+  --p-segmented-bg:#0e0e0e;
+
+  --p-actions-static-color: #dadada;
+
+
+  --p-modal-color: #f5f5f7;
+
+
+  --p-mobile-tabs-color: #f5f5f7;
+  --p-panel-bg:#212121;
+
+}
+
+@media (prefers-color-scheme: dark) {
+  .p-auto-dark-mode {
+    --p-btn-border: #454545;
+    --p-btn-def-bg: #262525;
+    --p-btn-def-col: #fcfcfc;
+    --p-btn-dir-col: #e0e0e0;
+    --p-btn-scope-unactive: #e4e4e4;
+    --p-btn-scope-action: #d0d0d0;
+    --p-color-card: #fff;
+    --p-bg-card: #1a1a1a;
+    --p-bd-card: #1d1d1d;
+
+    --p-suggested-bg: #0e0e0e;
+    --p-suggested-color: #e6e6e6;
+    --route-bg:#040404;
+
+
+    --p-modal-bg: rgb(45 45 45 / 85%);
+    --p-modal-bd-color:rgb(224 224 224 / 10%);
+    --p-color-basic-elements: #f5f5f7;
+
+
+    --primary-col-ac:#197fff;
+
+    --p-input-bg: #040404;
+    --p-input-color: #fff;
+    --p-input-color-plac:#414141;
+
+    --p-input-bd: #454545;
+    
+    --p-modal-fallback-color: rgba(0,0,0,.95);
+
+    --p-segmented-bg:#0e0e0e;
+
+    --p-actions-static-color: #dadada;
+
+
+    --p-modal-color: #f5f5f7;
+
+
+    --p-mobile-tabs-color: #f5f5f7;
+    --p-panel-bg:#212121;
+  }
+}

dist/css/forms.css

@@ -1,7 +1,15 @@
 :root {
   --primary-col:linear-gradient(to bottom, #4fc5fa 0%,#0f75f5 100%);
   --primary-col-ac:#0f75f5;
-  --bg-color:#fff;
+  --bg-color-input:#fff;
+
+
+  --p-input-bg:#fff;
+  --p-input-color:#000;
+  --p-input-color-plac:#cdcdcd;
+
+  --p-input-color:#808080;
+  --p-input-bd:#808080;
   --bg-hover-color:#f9f9f9;
   --bg-front-col:#000;
   --invalid-color:#d6513c;
@@ -16,6 +24,10 @@
   position: relative;
 }
 
+.p-form-select > select:focus{
+  outline: 2px solid #64baff;
+}
+
 .p-form-select::before {
   border-color: #fff transparent transparent;
   border-style: solid;
@@ -45,8 +57,8 @@
 
 .p-form-select > select {
   -webkit-appearance: none;
-  background: #fff;
-  border: 1px solid #cacaca;
+  background: var(--p-input-bg);
+  border: 1px solid var(--p-input-bd);
   border-radius: 5px;
   font-size: 14px;
   margin: 0;
@@ -54,69 +66,73 @@
   padding: 5px 30px 5px 10px;
   position: relative;
   width: 100%;
+  color: var(--p-input-color);
 }
 
 .p-form-text:invalid,
-.p-form-text-alt:invalid,
-.p-form-select > select:invalid {
+.p-form-text-alt:invalid{
   border-color: var(--invalid-color);
 }
 
 .p-form-text:valid,
-.p-form-text-alt:valid,
-.p-form-select > select:valid {
+.p-form-text-alt:valid{
   border-color: var(--valid-color);
 }
 
 .p-form-text:placeholder-shown,
-.p-form-text-alt:placeholder-shown,
-.p-form-select > select:placeholder-shown {
-  border-color: #cacaca;
+.p-form-text-alt:placeholder-shown{
+  border-color: var(--p-input-bd);
 }
 
 .p-form-text {
+  color: var(--p-input-color);
   -webkit-appearance: none;
   box-shadow: none;
-  background: #fff;
-  border: 1px solid #cacaca;
+  background: var(--p-input-bg);
+  border: 1px solid var(--p-input-bd);
   border-radius: 5px;
   font-family: -apple-system, "Inter", sans-serif;
   margin: 10px;
   outline: 0;
-  padding: 5px;
+  padding: 10px 5px;
   resize: none;
   transition: border-color 200ms;
 }
 
 .p-form-text-alt {
+  color: var(--p-input-color);
   -webkit-appearance: none;
   box-shadow: none;
-  background: #fff;
+  background: var(--p-input-bg);
   border: 0px;
-  border-bottom: 2px solid #cacaca;
+  border-bottom: 2px solid var(--p-input-bd);
   padding: 10px;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
   margin: 10px;
 }
 
-.p-form-text-alt::placeholder {
-  color: #cacaca;
+
+
+.p-form-text-alt::placeholder,
+.p-form-text::placeholder
+{
+  color: var(--p-input-color-plac);
 }
 
 .p-form-text-alt:focus {
-  outline: 3px solid #bed8f9;
+  outline: 0;
+  border-color: #3689e6;
 }
 
 .p-form-no-validate:valid,
-.p-form-no-validate:invalid,
-.p-form-no-validate > select:valid,
-.p-form-no-validate > select:invalid {
-  border-color: #cacaca;
+.p-form-no-validate:invalid{
+  border-color: var(--p-input-bd);
+  color: var(--p-input-color)!important;
 }
 
 .p-form-text:focus {
-  border-color: #0f75f5;
+  border-color: #3689e6;
 }
 
 textarea.p-form-text {
@@ -136,27 +152,68 @@ textarea.p-form-text {
 
 .p-form-label,
 .p-form-radio-cont,
-.p-form-checkbox-cont {
+.p-form-checkbox-cont,
+.p-form-label-inline {
   font-family: -apple-system, "Inter", sans-serif;
 }
 
-.p-form-label {
-  display: block;
+.p-form-label, .p-form-label-inline {
+  display: inline-block;
+}
+
+.p-form-label-inline {
+  background: var(--p-input-bg);
+  padding: 5px;
+  border-bottom: 2px solid var(--p-input-bd);
+  color: #656565;
+  font-weight: 500;
+  transition: .3s;
+}
+
+.p-form-label-inline:focus-within {
+  color: #3689e6;
+  border-color: #3689e6;
+}
+
+.p-form-label-inline > .p-form-text-alt {
+  border-bottom: 0px;
+  padding: 0;
+  outline: 0;
+  background: var(--p-input-bg);
+
+}
+
+.p-form-label-inline > .p-form-text-alt:-webkit-autofill{
+  background: var(--p-input-bg);
+  -webkit-box-shadow: 0 0 0 30px rgba(0,0,0,0) inset !important;
+}
+
+.p-form-label-inline > .p-form-text-alt:invalid {
+  color: var(--invalid-color);
+}
+
+.p-form-label-inline > .p-form-text-alt:valid {
+  color: #3689e6;
+}
+
+.p-form-label-inline > .p-form-text-alt:focus{
+  color: var(--p-input-color);
 }
 
 .p-form-radio-cont,
 .p-form-checkbox-cont {
   align-items: center;
   display: inline-flex;
+  cursor: pointer;
   margin: 0 10px;
+  user-select: none;
 }
 
 .p-form-radio-cont > input + span,
 .p-form-checkbox-cont > input + span {
-  background: #fff;
-  border: 1px solid #cacaca;
+  background: var(--p-input-bg);
+  border: 1px solid var(--p-input-bd);
   border-radius: 50%;
-  cursor: pointer;
   display: inline-block;
   height: 20px;
   margin-right: 5px;
@@ -165,7 +222,8 @@ textarea.p-form-text {
   width: 20px;
 }
 
-.p-form-radio-cont > input + span:hover {
+.p-form-radio-cont:hover > input + span,
+.p-form-checkbox-cont:hover > input + span {
   background: #f9f9f9;
 }
 
@@ -179,7 +237,6 @@ textarea.p-form-text {
 .p-form-radio-cont > input + span::after {
   background: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   content: "";
   display: block;
   height: 30%;
@@ -217,6 +274,13 @@ textarea.p-form-text {
   display: block;
   height: 8%;
   position: absolute;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.p-form-checkbox-cont > input:checked + span::before,
+.p-form-checkbox-cont > input:checked + span::after {
+  opacity: 1;
 }
 
 .p-form-checkbox-cont > input + span::before {
@@ -230,15 +294,22 @@ textarea.p-form-text {
 .p-form-checkbox-cont > input + span::after {
   left: 30%;
   top: 43%;
-  transform: rotate(60deg);
+  transform: rotate(59deg);
   transform-origin: top left;
   width: 40%;
 }
 
+.p-form-checkbox-cont > input[disabled] + span,
+.p-form-radio-cont > input[disabled] ~ span
+{
+  opacity: .7;
+  cursor: not-allowed;
+}
+
 .p-form-button {
   -webkit-appearance: none;
   background: #fff;
-  border: 1px solid #cacaca;
+  border: 1px solid var(--p-input-bd);
   border-radius: 5px;
   color: #333230;
   display: inline-block;
@@ -246,7 +317,6 @@ textarea.p-form-text {
   margin: 10px;
   padding: 5px 20px;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 
 .p-form-send {
@@ -280,7 +350,7 @@ textarea.p-form-text {
 }
 
 .p-form-switch > input:checked + span::after {
-  left: calc(100% - calc(var(--width) / 2.1));
+  left: calc(100% - calc(var(--width) / 1.8));
 }
 
 .p-form-switch > input:checked + span {
@@ -292,8 +362,7 @@ textarea.p-form-text {
   border: 1px solid #d3d3d3;
   border-radius: 500px;
   display: block;
-  height: calc(var(--width) / 2);
-  overflow: hidden;
+  height: calc(var(--width) / 1.6);
   position: relative;
   transition: all 0.2s;
   width: var(--width);
@@ -302,20 +371,104 @@ textarea.p-form-text {
 .p-form-switch > span::after {
   background: #f9f9f9;
   border-radius: 50%;
+  border: 0.5px solid rgba(0, 0, 0, 0.101987);
   box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.16), 0px 3px 8px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
   content: "";
-  height: 90%;
+  height: 84%;
   left: 3%;
   position: absolute;
-  top: 4.5%;
+  top: 6.5%;
   transition: all 0.2s;
-  width: 45%;
+  width: 52.5%;
 }
 
 .p-form-switch > input {
   display: none;
 }
 
+.p-chip input{
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.p-chip span{
+  padding: .8rem 1rem;
+  border-radius: 1.6rem;
+  display:inline-block;
+  margin:10px;
+  background: #e4e4e4ca;
+  color: #3689e6;
+  transition: .3s;
+  user-select: none;
+  cursor:pointer;
+  font-family: -apple-system, "Inter", sans-serif;
+  font-size: 1rem;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  text-align:center;
+}
+
+.p-chip svg{
+  display:block;
+  margin:auto;
+}
+
+
+.p-chip input:checked + span{
+  background: #3689e6;
+  color:#fff;
+}
+
+.p-chip-outline span, .p-chip-outline-to-bg span{
+  background: transparent;
+  color: #3e3e3e;
+  border: 1px solid currentColor;
+}
+
+.p-chip-outline input:checked + span{
+  background: transparent;
+  color: #3689e6;
+}
+
+.p-chip-radius-b span{
+  border-radius: 5px;
+}
+
+.p-chip-dark span{
+  color: #3e3e3e;
+}
+
+.p-chip-dark input:checked + span{
+  background: #3e3e3e;
+}
+
+.p-chip input:disabled + span,
+.p-chip input[disabled] + span{
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.p-chip-big span{
+  font-size: 1.3rem;
+  padding: 1.5rem;
+  min-width: 80px;
+}
+
+.p-form-checkbox-cont[disabled],
+.p-form-label[disabled],
+.p-form-text[disabled],
+.p-form-text-alt[disabled],
+.p-form-select[disabled],
+.p-form-radio-cont[disabled]{
+  filter: grayscale(1) opacity(.3);
+  pointer-events: none;
+}
+
+
+
+/* LEGACY (WILL BE REMOVED ON FUTURE UPDATES) */
 input[type=range].p-form-range {
   width: 100%;
   margin: 11.5px 0;
@@ -326,7 +479,7 @@ input[type=range].p-form-range:focus {
   outline: none;
 }
 input[type=range].p-form-range::-webkit-slider-runnable-track {
-  background: #cacaca;
+  background: var(--p-input-color);
   border: 0;
   width: 100%;
   height: 2px;
@@ -347,7 +500,7 @@ input[type=range].p-form-range:focus::-webkit-slider-runnable-track {
   background: #d7d7d7;
 }
 input[type=range].p-form-range::-moz-range-track {
-  background: #cacaca;
+  background: var(--p-input-color);
   border: 0;
   width: 100%;
   height: 2px;
@@ -376,7 +529,7 @@ input[type=range].p-form-range::-ms-fill-lower {
   border: 0;
 }
 input[type=range].p-form-range::-ms-fill-upper {
-  background: #cacaca;
+  background: var(--p-input-color);
   border: 0;
 }
 input[type=range].p-form-range::-ms-thumb {
@@ -388,23 +541,16 @@ input[type=range].p-form-range::-ms-thumb {
   cursor: pointer;
   box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.15);
   margin-top: 0px;
-  /*Needed to keep the Edge thumb centred*/
 }
 input[type=range].p-form-range:focus::-ms-fill-lower {
-  background: #cacaca;
+  background: var(--p-input-color);
 }
 input[type=range].p-form-range:focus::-ms-fill-upper {
   background: #d7d7d7;
 }
-/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
-how to remove the virtical space around the range input in IE*/
 @supports (-ms-ime-align:auto) {
-  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
   input[type=range].p-form-range {
     margin: 0;
-    /*Edge starts the margin from the thumb, not the track as other browsers do*/
   }
 }
 
-
-/* END OF FORMS */

dist/css/full.css

@@ -10,7 +10,12 @@
   margin: 10px;
   padding: 5px 20px;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
+}
+.p-btn-mob{
+    padding: 10px 40px;
+    background: #0f75f5;
+    color: #fff;
 }
 .p-btn[disabled] {
   background: #d3d3d3;
@@ -1029,7 +1034,7 @@ textarea.p-form-text {
   margin: 10px;
   padding: 5px 20px;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
 }
 
 .p-form-send {
@@ -1264,7 +1269,7 @@ how to remove the virtical space around the range input in IE*/
 }
 
 .p-modal {
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.85);
   border-radius: 20px;
   top: calc(50% - 20vh);
   bottom: unset;
@@ -1507,7 +1512,7 @@ how to remove the virtical space around the range input in IE*/
   background: #fff;
   color: #333230;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
   border: 1px solid #cacaca;
   display: inline-block;
   font-size: 17px;

dist/css/layout.css

@@ -1,4 +1,4 @@
-.p-layout .p-large-title {
+.p-large-title{
   font-size: 2.75rem;
 }
 
@@ -14,7 +14,7 @@
   font-size: 1.58rem;
 }
 
-.p-layout .p-headline {
+.p-headline {
   font-size: 1.34rem;
   font-weight: bold;
 }
@@ -23,23 +23,23 @@
   font-size: 1.15rem;
 }
 
-.p-layout a,
+.p-layout a:not(.p-btn),
 .p-layout input {
   font-size: 1.14rem;
 }
 
-.p-layout .p-callout {
+.p-callout {
   font-size: 1.14rem;
 }
 
-.p-layout .p-subhead {
+.p-subhead {
   font-size: 1.167rem;
 }
 
-.p-layout .p-footnote {
+.p-footnote {
   font-size: 1.07rem;
 }
 
-.p-layout .p-caption {
+.p-caption {
   font-size: 0.91rem;
 }

dist/css/modals.css

@@ -1,7 +1,10 @@
 :root {
   --font: -apple-system, "Inter", sans-serif;
-  --bg-hover-color: #f9f9f9;
   --primary-col-ac: #0f75f5;
+  --p-modal-bg: rgba(255, 255, 255, 0.8);
+  --p-modal-bd-color: rgba(0,0,0,.1);
+  --p-modal-fallback-color: rgba(255,255,255,.95);
+  --p-modal-color: #1d1d1f;
 }
 
 .p-modal-opened {
@@ -9,24 +12,25 @@
 }
 
 .p-modal-background {
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.7);
   height: 100vh;
   left: 0;
   opacity: 0;
   pointer-events: none;
   position: fixed;
   top: 0;
-  transition: all 0.3s;
+  transition: opacity 0.3s;
   width: 100vw;
   z-index: 5;
 }
 
-.p-modal {
-  background: rgba(255, 255, 255, 0.7);
+.p-modal { 
+  background: var(--p-modal-bg);
+  color: var(--p-modal-color);
   border-radius: 20px;
   top: calc(50% - 20vh);
   bottom: unset;
-  box-shadow: 0 10px 20px -15px;
+  box-shadow: 0 10px 20px -15px black;
   font-family: var(--font);
   left: calc(50% - 20vw);
   opacity: 0;
@@ -36,6 +40,7 @@
   text-align: center;
   transform: scale(1.5);
   transition: opacity 0.3s, transform 0.3s;
+  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
   width: 40vw;
   z-index: 9;
 }
@@ -53,16 +58,15 @@
 }
 
 .p-modal-button-container > a {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--p-modal-bd-color);
   color: var(--primary-col-ac);
   padding: 30px 0%;
   text-decoration: none;
   width: 100%;
 }
 
-.p-modal-button-container > a:nth-child(2),
-.p-modal-button-container > a:nth-child(3) {
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
+.p-modal-button-container > a:not(:first-child){
+  border-left: 1px solid var(--p-modal-bd-color);
 }
 
 .nowactive {
@@ -76,14 +80,12 @@
 
 @supports not (backdrop-filter: blur(5px)) {
   .p-modal {
-    background: #fff;
+    background: var(--p-modal-fallback-color);
   }
 }
 @media (max-width: 568px) {
   .p-modal {
-    bottom: 20%;
     left: 15%;
-    top: unset;
     width: 70vw;
   }
 
@@ -97,8 +99,17 @@
   }
 
   .p-modal-button-container > a {
-    border-left: 0 !important;
+    border-left: 0;
     display: block;
     padding: 2vh 0%;
   }
+  .p-modal-button-container > a:not(:first-child){
+    border-left: 0px;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .p-modal-background,.p-modal  {
+    transition: none;
+  }
 }

dist/css/newfull.css

@@ -0,0 +1,11 @@
+@import url('layout.css');
+@import url('actions.css');
+@import url('buttons.css');
+@import url('cards.css');
+@import url('color_palette.css');
+@import url('forms.css');
+@import url('modals.css');
+@import url('segmented-controls.css');
+@import url('shadows.css');
+@import url('tabs.css');
+@import url('dark_mode.css');

dist/css/puppertino.css

@@ -10,7 +10,12 @@
   margin: 10px;
   padding: 5px 20px;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
+}
+.p-btn-mob{
+    padding: 10px 40px;
+    background: #0f75f5;
+    color: #fff;
 }
 .p-btn[disabled] {
   background: #d3d3d3;
@@ -1029,7 +1034,7 @@ textarea.p-form-text {
   margin: 10px;
   padding: 5px 20px;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
 }
 
 .p-form-send {
@@ -1264,7 +1269,7 @@ how to remove the virtical space around the range input in IE*/
 }
 
 .p-modal {
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.85);
   border-radius: 20px;
   top: calc(50% - 20vh);
   bottom: unset;
@@ -1507,7 +1512,7 @@ how to remove the virtical space around the range input in IE*/
   background: #fff;
   color: #333230;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
   border: 1px solid #cacaca;
   display: inline-block;
   font-size: 17px;

dist/css/segmented-controls.css

@@ -1,7 +1,10 @@
+:root{
+--p-segmented-bg: #fff;
+}
 .p-segmented-controls {
   --color-segmented: #3689e6;
   --color-lighter-segment: #d2e3f9;
-  background: #fff;
+  background: var(--p-segmented-bg);
   border: 1px solid var(--color-segmented);
   border-radius: 5px;
   display: flex;
@@ -13,15 +16,16 @@
 }
 .p-segmented-controls a {
   color: var(--color-segmented);
-  flex: auto;
+  flex: 1;
   padding: 10px;
   text-align: center;
   text-decoration: none;
-  transition: all 0.5s;
+  transition: 0.5s color, 0.5s background, 0.5s border-color;
+  -webkit-tap-highlight-color: transparent;
 }
 .p-segmented-controls a.active {
   background: var(--color-segmented);
-  color: #fff;
+  color: var(--p-segmented-bg);
 }
 .p-segmented-controls a:not(:first-child) {
   border-left: 1px solid currentColor;
@@ -40,7 +44,7 @@
 .p-segmented-controls-alt a:not(:first-child) {
   border: 0;
 }
-.p-segmented-controls-alt a:not(:first-child).active {
+.p-segmented-controls-alt a.active {
   background: var(--color-lighter-segment);
   color: var(--color-segmented);
   font-weight: bold;
@@ -65,7 +69,7 @@
   border-radius: 30px;
 }
 .p-segmented-controls-outline-alt a.active {
-  background: #fff;
+  background: var(--p-segmented-bg);
   border-color: var(--color-segmented);
   border-radius: 30px;
   color: var(--color-segmented);

dist/css/shadows.css

@@ -23,7 +23,7 @@
 }
 
 .p-to-shadow-1:hover {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);>
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 }
 
 .p-to-shadow-2:hover {

dist/css/tabs.css

@@ -1,3 +1,10 @@
+:root{
+  --p-modal-bg: rgba(255, 255, 255, 0.8);
+  --p-modal-bd-color: rgba(0,0,0,.1);
+  --p-modal-fallback-color: rgba(255,255,255,.95);
+  --p-mobile-tabs-color: #555;
+  --p-panel-bg:#fff;
+}
 .p-tabs-container {
   background: #e3e3e3;
   border: 1px solid #e0e0e0;
@@ -34,7 +41,6 @@
   background: #fff;
   color: #333230;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   border: 1px solid #cacaca;
   display: inline-block;
   font-size: 17px;
@@ -48,13 +54,12 @@
 
 .p-is-active {
   background: linear-gradient(to bottom, #4fc5fa 0%, #0f75f5 100%);
-  border: 0;
   color: #fff;
 }
 
 .p-panels {
   margin-top: 1em;
-  background: #fff;
+  background: var(--p-panel-bg);
   border-radius: 3px;
   position: relative;
   padding: 0.8em;
@@ -128,28 +133,35 @@
   left: 0;
   width: 100%;
   padding: 15px 0px;
-  border-top: 1px solid #949494;
-  background: rgba(202, 202, 202, 0.8);
+  border-top: 1px solid var(--p-modal-bd-color);
+  background: var(--p-modal-bg);
   backdrop-filter: blur(10px);
   display: flex;
   font-family: -apple-system, "Inter", sans-serif;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+  .p-mobile-tabs {
+    background: var(--p-modal-fallback-color);
+  }
 }
 
 .p-mobile-tabs > div {
-  flex: auto;
+  flex: 1;
   text-align: center;
 }
 
 .p-mobile-tabs a {
   text-decoration: none;
-  color: #555;
+  color: var(--p-mobile-tabs-color);
   transition: color 0.5s;
   display: inline-block;
   font-size: 0.8rem;
 }
 
 .p-mobile-tabs a.active {
-  color: #0f75f5;
+  color: var(--primary-col-ac);
   font-weight: 600;
 }
 
@@ -159,6 +171,10 @@
   margin-bottom: 0.2rem;
 }
 
+.p-mobile-tabs a.active svg{
+  stroke-width:2.5;
+}
+
 .p-mobile-tabs--content {
   display: none;
 }

docs/examples/actions.html

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Actions - Puppertino Framework</title>
+    <link
+      href="https://rsms.me/inter/inter.css"
+      rel="stylesheet"
+    />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <link rel="stylesheet" type="text/css" href="doc.css" />
+    <meta
+      name="description"
+      content="This is the documentation for Actions on the Puppertino Framework, a framework that mimics Apple's design, woof!"
+    />
+    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-176821843-1');
+</script>
+  </head>
+  <body class="p-layout">
+
+<div class="p-action-background">
+    <div class="p-action-big-container" id="actions" data-p-close-on-outside="true">
+      <div class="p-action-container">
+        <div class="p-action-title">
+          <h3 class="p-action-title--intern">What do you want to do?</h3>
+          <p class="p-action-text">Select an option below...</p></div>
+        <a href="#" class="p-action--intern p-action-destructive p-action-icon"><svg viewBox="0 0 24 24" width="24" height="24" 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> Close this tab</a>
+        <a href="#" class="p-action--intern p-action-destructive p-action-icon-inline" ><svg viewBox="0 0 24 24" width="24" height="24" 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> Close this tab</a>
+        <a href="#" class="p-action--intern p-action-neutral">New private tab</a>
+        <a href="#" class="p-action--intern">New tab</a>
+      </div>
+      <div class="p-action-container">
+        <a href="#" class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</a>
+      </div>
+    </div>
+
+    <div class="p-action-big-container" id="actions2" data-p-close-on-outside="true">
+      <div class="p-action-container">
+        <div class="p-action-title">
+          <h3 class="p-action-title--intern">What do you want to do?</h3>
+          <p class="p-action-text">Select an option below...</p>
+        </div>
+        <a href="#" class="p-action--intern p-action-neutral">New private tab</a>
+        <a href="#" class="p-action--intern">New tab</a>
+      </div>
+      <div class="p-action-container">
+        <a href="#" class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</a>
+      </div>
+    </div>
+
+    <div class="p-action-big-container" id="actions_basic" data-p-close-on-outside="true">
+      <div class="p-action-container">
+        <div class="p-action-title">
+          <h3 class="p-action-title--intern">Welcome to actions</h3>
+          <p class="p-action-text">Select an option below...</p>
+        </div>
+        <a href="#" class="p-action--intern p-action-neutral">New private tab</a>
+        <a href="#" class="p-action--intern">New tab</a>
+      </div>
+      <div class="p-action-container">
+        <a href="#" class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</a>
+      </div>
+    </div>
+</div>
+
+    <div class="route">
+      <a
+        href="https://codedgar.github.io/Puppertino/"
+        class="p-btn p-btn-scope p-btn-scope-unactive"
+        >Puppertino</a
+      >
+      <p>/</p>
+      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
+        >Examples</a
+      >
+      <p>/</p>
+      <a href="actions.html" class="p-btn p-btn-scope">Actions</a>
+    </div>
+    <h1>Actions</h1>
+    <div class="master">
+      <p>
+        Actions are a big part of iOS, and we couldn't stop thinking of adding them. That's why we added it into Puppertino! To use actions, you can
+        <a
+          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/actions.css"
+          target="_blank"
+          >Download the CSS</a
+        >
+        and
+        <a
+          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/actions.js"
+          target="_blank"
+          >Download the JS</a
+        >
+        alternatively you can use the
+        <a
+          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/full.css"
+          target="_blank"
+          >Full CSS</a
+        >
+        (Not recommended if you are just going to use this component). Please be
+        aware that you still need to download the JS of Actions, since at the
+        time, there's no full.js
+      </p>
+
+      <div class="talk-about-it">
+        <h2>Let's talk about actions!</h2>
+        <p>
+          Actions in Puppertino are very similar to modals. They prompt the user to take an decision. The difference is that Actions can feature multiple decisions and are easier to acccess than modals.
+        </p>
+
+
+        <button data-p-open-actions="#actions2" class="p-btn">
+          Open actions
+        </button>
+      </div>
+    </div>
+
+    <div class="talk-about-it">
+      <h2>General usage.</h2>
+      <p>
+        The usage it's the practically the same as modals. You need a container for the Actions and the button that you want to toggle actions needs to have the attribute <code class="code">data-p-open-actions</code> with the #id of the actions you want to open. And the actions with the according ID.
+        <br><br>
+        There are also variants so you can arrange the elements differently, but <strong>please</strong> try to use just one variant at a time, one action with icon, then another one without action and so on can cause confusion on users and it also looks visually unpleasant, so handle with care.
+        <br><br>
+        Actions also support the attribute <code class="code">data-p-close-on-outside="true"</code> to close the action on click outside of the area.
+      </p>
+
+      <button class="p-btn" data-p-open-actions="#actions">
+        Open actions with variants
+      </button>
+
+      <button class="p-btn" data-p-open-actions="#actions_basic">
+        Basic Actions
+      </button>
+
+      <p>Usage:</p>
+      <div class="code">
+        <pre>
+				<code class="html">
+&#60;!-- The button that toggles the action -->
+
+&#60;button class="p-btn" data-p-open-actions="#actions_basic">Basic Actions&#60;/button>
+
+
+&#60;!-- Action container, all the actions you use should be inside of it. -->
+
+&#60;div class="p-action-background">
+
+	&#60;!-- Your actions will be here -->
+  &#60;div class="p-action-big-container" id="actions_basic" data-p-close-on-outside="true">
+    &#60;div class="p-action-container">
+      &#60;div class="p-action-title">
+        &#60;h3 class="p-action-title--intern">Welcome to actions&#60;/h3>
+        &#60;p class="p-action-text">Select an option below...&#60;/p>
+      &#60;/div>
+      &#60;a href="#" class="p-action--intern p-action-neutral">New private tab&#60;/a>
+      &#60;a href="#" class="p-action--intern">New tab&#60;/a>
+    &#60;/div>
+    &#60;div class="p-action-container">
+      &#60;a href="#" class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel&#60;/a>
+    &#60;/div>
+  &#60;/div>
+
+&#60;/div>
+				</code>
+			</pre>
+      </div>
+
+      <p>Variations:</p>
+      <div class="code">
+        <pre>
+        <code class="html">
+  &#60;div class="p-action-big-container" id="actions" data-p-close-on-outside="true">
+        &#60;div class="p-action-container">
+          &#60;div class="p-action-title">
+            &#60;h3 class="p-action-title--intern">What do you want to do?&#60;/h3>
+            &#60;p class="p-action-text">Select an option below...&#60;/p>&#60;/div>
+          &#60;a href="#" class="p-action--intern p-action-destructive p-action-icon">&#60;!-- ICON --> Close this tab&#60;/a>
+          &#60;a href="#" class="p-action--intern p-action-destructive p-action-icon-inline" >&#60;!-- ICON --> Close this tab&#60;/a>
+          &#60;a href="#" class="p-action--intern p-action-neutral">New private tab&#60;/a>
+          &#60;a href="#" class="p-action--intern">New tab&#60;/a>
+        &#60;/div>
+        &#60;div class="p-action-container">
+      &#60;a href="#" class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel&#60;/a>
+    &#60;/div>
+  &#60;/div>
+        </code>
+      </pre>
+      </div>
+    </div>
+
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
+  <script
+    type="text/javascript"
+    src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
+  ></script>
+  <script>
+    hljs.initHighlightingOnLoad();
+  </script>
+  <script type="text/javascript">
+    (function (document) {
+
+  var p_actions = document.querySelectorAll("[data-p-open-actions]");
+  var actions = document.querySelectorAll(".p-action-big-container");
+  var cancel_action = document.querySelectorAll("[data-p-cancel-action]");
+
+  for (var item of p_actions) {
+    item.addEventListener("click", function (event) {
+      event.preventDefault();
+      var selector = this.getAttribute("data-p-open-actions");
+      if (selector.length == 0) {
+        console.warn(
+          "Error. The data-p-open-action attribute is empty, please add the ID of the action you want to open."
+        );
+        return false;
+      }
+      document.querySelector(".p-action-background").classList.add("nowactive");
+      document.body.classList.add("p-modal-opened");
+      document.querySelector(selector).classList.add("active");
+    });
+  }
+
+  for (var element of cancel_action) {
+    element.addEventListener("click", function (event) {
+      event.preventDefault();
+      document.querySelector(".p-action-big-container.active").classList.remove("active");
+      document.querySelector(".p-action-background").classList.remove("nowactive");
+      document.body.classList.remove("p-modal-opened");
+    });
+  }
+
+  document
+    .querySelector(".p-action-background")
+    .addEventListener("click", function (event) {
+      event.preventDefault();
+      var opened_action = document.querySelector(".p-action-big-container.active");
+      if (opened_action.getAttribute("data-p-close-on-outside") == "true") {
+        event.stopPropagation();
+        opened_action.classList.remove("active");
+        document
+          .querySelector(".p-action-background")
+          .classList.remove("nowactive");
+        document.body.classList.remove("p-modal-opened");
+      }
+    });
+
+  for (var action of actions) {
+      action.addEventListener("click", function (event) {
+      event.stopPropagation();
+    });
+  }
+})(document)
+  </script>
+</html>

docs/examples/buttons.html

@@ -3,11 +3,11 @@
   <head>
     <title>Buttons - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
     <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -49,53 +49,25 @@
       <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. You can use
-        the Buttons using the
-        <a
-          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/buttons.css"
-          target="_blank"
-          >CSS of Buttons</a
-        >
-        or
-        <a
-          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/full.css"
-          target="_blank"
-          >dowloading the full CSS</a
-        >
-        (Not recommended if you are just going to use this component).
+        buttons support usage as links, buttons and submit elements.
       </p>
 
       <div class="talk-about-it">
         <h2>Push Buttons.</h2>
         <p>
-          Push buttons come in different ways. The
-          <strong>Default button</strong> is plain, and should be use for cancel
-          or optional clicks. For main clicks, the
-          <strong>Primary button</strong> is the way to go. While similar to the
-          Primary button, the <strong>Mobile Big</strong> button will change to
-          a <code class="code">position:fixed</code> and take a significant part
-          of the screen if it's mobile. This button is ideal for Buy buttons or
-          similar. Last but not least, there's the
-          <strong>Custom action</strong> button, which is really similar to the
-          Default button, but it adds three dots at the end. This button is
-          amazing for Advanced, Options or Other actions.<br /><br />
-          Buttons can be used either with and
-          <code class="code">&#60;button></code> or
-          <code class="code">&#60;a></code>. If you are going to use the
-          disabled button, is highly recommended to use
-          <strong>disabled</strong> as an attribute. Classes are also
-          combinable!
+          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.
         </p>
 
-        <a href="#" class="p-btn">Default</a>
+        <button class="p-btn">Default</button>
 
-        <a href="#" class="p-btn p-btn-disabled">Disabled</a>
+        <button class="p-btn" disabled="">Disabled</button>
 
         <a href="#" class="p-btn p-prim-col">Primary</a>
 
-        <a href="#" class="p-btn p-btn-round">Rounded</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-prim-col" id="mobile_big">Mobile big</a>
         
         <a href="#" class="p-btn p-btn-outline">Outline</a>
 
@@ -113,9 +85,9 @@
 
 &#60;a href="#" class="p-btn p-prim-col">Primary&#60;/a>
 
-&#60;a href="#" class="p-btn p-btn-round">Rounded&#60;/a>
+&#60;a href="#" class="p-btn p-btn-mob">Btn mob&#60;/a>
 
-&#60;a href="#" class="p-btn p-prim-col p-btn-big-sm">Mobile big&#60;/a>
+&#60;a href="#" class="p-btn p-btn-round">Rounded&#60;/a>
 
 &#60;a href="#" class="p-btn p-btn-more">Custom action&#60;/a>
 				</code>
@@ -123,6 +95,60 @@
         </div>
       </div>
 
+      <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.
+          <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.
+        </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>
+
+                <p>Usage:</p>
+        <div class="code">
+          <pre>
+        <code class="html">
+&#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>
+
+&#60;button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error&#60;/button>
+        </code>
+      </pre>
+        </div>
+
+      </div>
+
+      <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:
+        </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>
+        <a href="#" class="p-btn p-btn-mob p-btn-lg">Large size</a>
+        <a href="#" class="p-btn p-btn-mob p-btn-lg p-btn-block">Block size</a>
+
+                <p>Usage:</p>
+        <div class="code">
+          <pre>
+        <code class="html">
+&#60;a href="#" class="p-btn p-btn-sm">Small size&#60;/a>
+
+&#60;a href="#" class="p-btn p-btn-md">Medium size&#60;/a>
+
+&#60;a href="#" class="p-btn p-btn-lg">Large size&#60;/a>
+
+&#60;a href="#" class="p-btn p-btn-lg p-btn-block">Block size&#60;/a>
+        </code>
+      </pre>
+        </div>
+
+      </div>
+
       <div class="talk-about-it">
         <h2>Direction buttons.</h2>
         <p>
@@ -145,7 +171,9 @@
       <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>. You can set the color of the borders and icon by just changing the <code class="code">color</code> property of the button.
+          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>.
+          <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>
         </p>
         <a href="#" class="p-btn-icon">?</a>
 
@@ -159,10 +187,14 @@
           <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
         </a>
 
-        <a href="#" class="p-btn-icon p-orange p-silver-100-color">
+        <a href="#" class="p-btn-icon p-orange p-silver-100-color p-btn-icon-no-border">
           <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
         </a>
 
+        <a href="#" class="p-btn-icon p-mint p-silver-100-color">
+          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>
+        </a>
+
         <p>Usage:</p>
         <div class="code">
           <pre>
@@ -170,6 +202,8 @@
 &#60;a href="#" class="p-btn-icon">?&#60;/a>
 
 &#60;a href="#" class="p-btn-icon">&#60;!-- SVG ICON HERE -->&#60;/a>
+
+&#60;a href="#" class="p-btn-icon p-mint p-silver-100-color">Custom Color&#60;/a>
 				</code>
 			</pre>
         </div>
@@ -191,10 +225,12 @@
 
         <a href="#" class="p-btn p-btn-scope p-btn-scope-unactive">Unactive</a>
 
-        <a href="#" class="p-btn p-btn-scope p-btn-scope-disabled">Disabled</a>
+        <a href="#" class="p-btn p-btn-scope p-btn-disabled">Disabled</a>
 
         <a href="#" class="p-btn p-btn-scope p-btn-scope-outline">Action</a>
 
+        <a href="#" class="p-btn p-btn-scope p-btn-scope-outline p-btn-outline-dash">Action</a>
+
         <p>Usage:</p>
         <div class="code">
           <pre>
@@ -203,7 +239,7 @@
 
 &#60;a href="#" class="p-btn p-btn-scope p-btn-scope-unactive">Unactive&#60;/a>
 
-&#60;a href="#" class="p-btn p-btn-scope p-btn-scope-disabled">Disabled&#60;/a>
+&#60;a href="#" class="p-btn p-btn-scope p-btn-disabled">Disabled&#60;/a>
 
 &#60;a href="#" class="p-btn p-btn-scope p-btn-scope-outline">Action&#60;/a>
 				</code>
@@ -211,7 +247,23 @@
         </div>
       </div>
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
@@ -219,12 +271,4 @@
   <script defer>
     hljs.initHighlightingOnLoad();
   </script>
-  <script type="text/javascript">
-    document
-      .querySelector("#mobile_big")
-      .addEventListener("click", function (event) {
-        event.preventDefault();
-        this.classList.toggle("p-btn-big-sm");
-      });
-  </script>
 </html>

docs/examples/color_palette.html

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="utf-8">
     <title>Color Palette - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
-    <meta charset="utf-8" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -83,6 +84,9 @@
           use, i.e: <code class="code">p-strawberry-100</code> (Base colors
           don't use shade).<br><br>
           There are also <strong>text colors</strong>, just add <code class="code">-color</code> at the end, i.e <code class="code">p-strawberry-100-color</code>
+          <br><br>
+          <span class="bit_bit p-lime p-white-color">New!</span>
+          We've added colors as variables, so you use them wherever and however you like, just add <code class="code">--</code> before the color in <strong>your CSS</strong> code, i.e <code class="code">--p-strawberry-100</code>. This can be use to create amazing gradients and theming.
         </p>
 
         <div class="row pad_15_row center_row">
@@ -347,7 +351,23 @@
     <div class="copy_correct">
       <p class="p-caption">Color <span id="color_talk"></span> copied!</p>
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
   <script type="text/javascript">
     var color_base = document.querySelectorAll(".color_base");
     for (var item of color_base) {

docs/examples/dark_mode.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Dark Mode - Puppertino Framework</title>
+    <link
+      href="https://rsms.me/inter/inter.css"
+      rel="stylesheet"
+    />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <link rel="stylesheet" type="text/css" href="doc.css" />
+    <meta
+      name="description"
+      content="This is the documentation for Dark Mode on the Puppertino Framework, a framework that mimics Apple's design, woof!"
+    />
+    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'UA-176821843-1');
+    </script>
+  </head>
+  <body class="p-layout">
+    <div class="route">
+      <a
+        href="https://codedgar.github.io/Puppertino/"
+        class="p-btn p-btn-scope p-btn-scope-unactive"
+        >Puppertino</a
+      >
+      <p>/</p>
+      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
+        >Examples</a
+      >
+      <p>/</p>
+      <a href="dark_mode.html" class="p-btn p-btn-scope">Dark Mode</a>
+    </div>
+    <h1>Dark Mode</h1>
+    <div class="master">
+      <p>
+        Dark Mode it's not new to Apple's design system, and it has been something we've been wanting to add since the first version of Puppertino. And this is now a strong part of Puppertino, to use Dark Mode, you will need to get the  
+        <a
+          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/dark_mode.css"
+          target="_blank"
+          >CSS of Dark Mode</a
+        >
+        or
+        <a
+          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/full.css"
+          target="_blank"
+          >download the full CSS</a
+        >
+      </p>
+
+      <div class="talk-about-it">
+        <h2>About Dark Mode.</h2>
+        <p>
+          Dark mode it's pretty straight forward to use. And it comes in two flavors, automatic and manual toggling. The automatic toggling uses the <code class="code">media-prefers-scheme</code> to get the user's desired theme and apply automatically. Of course, this doesn't work in some (mosts) of Linux Operating systems, and that's what the manual version is aimed for. It's also really useful if you want your users to select their own theme.
+
+          <br>
+          <br>
+          This is how it looks on practice (All current components support dark mode):
+        </p>
+
+        <div class="content_smol ">
+          <div class="mw-450 p-dark-mode dark_theme">
+              <div class="p-mobile-tabs-content">
+                <div class="p-mobile-tabs--content active" id="demo4">
+                  <h1 style="color: #fff;">Dark theme</h1>
+                  <a href="#" class="p-btn p-prim-col">Primary</a>
+                  <a href="#" class="p-btn">Second</a>
+                  <input
+                  type="email"
+                  class="p-form-text"
+                  placeholder="Normal validated input (email)"
+                  />
+                  </div>
+                
+                <div class="p-mobile-tabs">
+                <div>
+                  <a href="#" class="active" data-p-mobile-toggle="#demo1">
+                    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    Home
+                  </a>
+                </div>
+              </div>
+              </div>
+
+          </div>
+          <div class="mw-450">
+              <div class="p-mobile-tabs-content">
+                <div class="p-mobile-tabs--content active" id="demo1">
+                  <h1>Default theme</h1>
+                  <a href="#" class="p-btn p-prim-col">Primary</a>
+                  <a href="#" class="p-btn">Second</a>
+                  <input
+                  type="email"
+                  class="p-form-text"
+                  placeholder="Normal validated input (email)"
+                  />
+                </div>
+                
+                <div class="p-mobile-tabs">
+                <div>
+                  <a href="#" class="active" data-p-mobile-toggle="#demo1">
+                    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    Home
+                  </a>
+                </div>
+              </div>
+              </div>
+
+          </div>
+        </div>
+        
+        <p>You can experience the Dark Mode in all of the Puppertino's website by clicking <a href="#" class="p-btn p-prim-col" id="the_button">This button</a></p>
+        <p>Usage:</p>
+        <div class="code">
+          <pre>
+				<code class="html">
+&#60;body class="p-auto-dark-mode">&#60;/body> &#60;!-- Automatic -->
+&#60;body class="p-dark-theme">&#60;/body> &#60;!-- Manual -->
+				</code>
+			</pre>
+        </div>
+      </div>
+
+      <div class="talk-about-it" id="modifier">
+        <h2>How to use manual.</h2>
+        <p>
+          Manual will require you to create your own JS to toggle the class according to your needs (Examples will be added in 1.02). For the moment, if you do not wish to do any JS, we recommend you to do the automatic one. Is simple to use and it only requires one class.
+        </p>
+      </div>
+
+      <div class="talk-about-it" id="modifier">
+        <h2>Under the hood.</h2>
+        <p>
+          How does this all work? Simple, Puppertino is based on CSS variables, and when you toggle this class you are basically overriding all the colors in CSS variables for the dark themed ones, making it really easy to change all the colors, and also create your own themes if you need to do so. Keep in mind that some variables have been reused to cut down sizes.
+        </p>
+      </div>
+
+    </div>
+ 
+</body>
+  <script
+    type="text/javascript"
+    src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
+  ></script>
+  <script defer>
+    hljs.initHighlightingOnLoad();
+  </script>
+  <script defer>
+    document.querySelector('#the_button').addEventListener('click',function(e){
+      e.preventDefault();
+      let theme = localStorage.getItem('puppertino_theme');
+      if (theme == 'p-dark-mode') {
+        localStorage.setItem('puppertino_theme','default');
+      }else{
+        localStorage.setItem('puppertino_theme','p-dark-mode');
+      }
+      retrieve_theme();
+    });
+
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+  </script>
+</html>

docs/examples/doc.css

@@ -1,10 +1,29 @@
+:root{
+  --bg-docs: #f5f5f7;
+  --color-docs: #1d1d1f;
+  --route-bg:#e6e6e6;
+  --white-or-black:#fff;
+}
+.dark_theme{
+  --bg-docs: #0e0e0e;
+  --color-docs: #e6e6e6;
+  --route-bg:#040404;
+  --white-or-black:#212121;
+}
+.p-dark-mode {
+  --bg-docs: #0e0e0e;
+  --color-docs: #e6e6e6;
+  --route-bg:#040404;
+  --white-or-black:#212121;
+}
 html {
   scroll-behavior: smooth;
 }
 body {
-  background: #f5f5f5;
+  background: var(--bg-docs);
   padding: 2% 3%;
   margin: 0px;
+  color: var(--color-docs);
 }
 h1,
 h2,
@@ -46,7 +65,7 @@ code.code {
   padding: 1px 5px;
 }
 .route {
-  background: #e6e6e6;
+  background: var(--route-bg);
   border-radius: 5px;
 }
 .route > p {
@@ -98,56 +117,9 @@ pre {
   margin-top: 50px;
 }
 
-.p-layout .p-large-title {
-  font-size: 2.75rem;
-}
-
-.p-layout h1 {
-  font-size: 2.25rem;
-}
-
-.p-layout h2 {
-  font-size: 1.75rem;
-}
-
-.p-layout h3 {
-  font-size: 1.58rem;
-}
-
-.p-layout .p-headline {
-  font-size: 1.34rem;
-  font-weight: bold;
-}
-
-.p-layout p {
-  font-size: 1.15rem;
-}
-
-.p-layout a,
-.p-layout input {
-  font-size: 1.14rem;
-}
-
-.p-layout .p-callout {
-  font-size: 1.14rem;
-}
-
-.p-layout .p-subhead {
-  font-size: 1.167rem;
-}
-
-.p-layout .p-footnote {
-  font-size: 1.07rem;
-}
-
-.p-layout .p-caption {
-  font-size: 0.91rem;
-}
-
 .color_base {
   display: block;
   margin: auto;
-  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
 }
 
 .h-50 {
@@ -215,6 +187,7 @@ pre {
 .content_smol{
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
 .mw-300{
@@ -225,7 +198,7 @@ pre {
 .mw-450{
   width: 450px;
   position: relative;
-  background: #fff;
+  background: var(--white-or-black);
 }
 
 .p-mobile-tabs {
@@ -256,3 +229,20 @@ pre {
   justify-content: center;
 }
 
+
+.lmao_codedgar_b_dumb{
+  text-decoration: line-through;
+  opacity: .5;
+}
+
+.bit_bit{
+  display: inline-block;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+.p-card-text{
+  height: 60px;
+  line-height: 20px;
+  font-size: 20px!important;
+}

docs/examples/forms.html

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="utf-8">
 	<title>Forms - Puppertino Framework</title>
-	<link href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css">
-	<meta charset="utf-8">
+	<link href="https://rsms.me/inter/inter.css" rel="stylesheet">
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css"> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    
   	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<link rel="stylesheet" type="text/css" href="doc.css">
@@ -34,9 +36,9 @@
 
 		<div class="talk-about-it">
 			<h2>Select.</h2>
-			<p>The select box, works exactly as expected, and you can change the width and height withoug affecting the overall composition of the element without problems. Select, by default, includes the class <code class="code">p-form-no-validate</code>, but you can delete it if your wish.</p>
+			<p>The select box, works exactly as expected, and you can change the width and height withoug affecting the overall composition of the element without problems. The select does not have native validation, but you can still add the <code class="code">p-form-invalid</code> and <code class="code">p-form-valid</code> classes respectively.</p>
 
-			<div class="p-form-select p-form-no-validate">
+			<div class="p-form-select">
 			    <select>
 			        <option>Option 1</option>
 			        <option>Option 2</option>
@@ -48,7 +50,7 @@
 			<div class="code">
 			<pre>
 				<code class="html">
-&#60;div class="p-form-select p-form-no-validate">
+&#60;div class="p-form-select">
 	&#60;select>
 		&#60;option>Option 1&#60;/option>
 		&#60;option>Option 2&#60;/option>
@@ -138,6 +140,8 @@
           type="email"
           class="p-form-text-alt"
           placeholder="Normal validated input (email)"
+          value="edgar@codedgar.com"
+          disabled=""
         />
         <input
           type="name"
@@ -159,6 +163,14 @@
             placeholder="example@gmail.com"
         /></label>
 
+        <label class="p-form-label-inline"
+          >Email:<input
+            type="email"
+            class="p-form-text-alt"
+            name="Name"
+            placeholder="example@gmail.com"
+        /></label>
+
         <p>Usage:</p>
         <div class="code">
           <pre>
@@ -172,6 +184,8 @@
 
 &#60;label class="p-form-label">Email: &#60;input type="email" class="p-form-text-alt" placeholder="email@example.com">&#60;/label>
 
+&#60;label class="p-form-label-inline">Email: &#60;input type="email" class="p-form-text-alt" placeholder="email@example.com">&#60;/label>
+
         </code>
       </pre>
         </div>
@@ -263,6 +277,112 @@
         </div>
       </div>
 
+      <div class="talk-about-it">
+        <h2>Chips.</h2>
+        <p>
+          Chips are essentially checkboxes, but cooler. This makes it easier and more interactive for user to select multiple items or filter information. They come in several flavors and also have support for icons.
+        </p>
+
+        <label class="p-chip">
+          <input type="checkbox" name="thingy_second" />
+          <span>Default</span>
+        </label>
+
+        <label class="p-chip p-chip-dark p-chip-radius-b">
+          <input type="checkbox" name="thingy_second" />
+          <span>Border</span>
+        </label>
+
+        <label class="p-chip p-chip-outline">
+          <input type="checkbox" name="thingy_third" />
+          <span>Outline</span>
+        </label>
+
+        <label class="p-chip p-chip-outline-to-bg">
+          <input type="checkbox" name="thingy_third" />
+          <span>Outline to bg</span>
+        </label>
+
+        <label class="p-chip p-chip-radius-b">
+          <input type="checkbox" name="thingy_fourth" />
+          <span>Combined</span>
+        </label>
+
+        <label class="p-chip">
+          <input type="checkbox" name="thingy_fourth" disabled />
+          <span>Disabled</span>
+        </label>
+
+        <label class="p-chip p-chip-big">
+          <input type="checkbox" name="thingy_fourth" />
+          <span>
+            <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="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19"
+              ></path>
+              <line x1="23" y1="13" x2="23" y2="11"></line>
+              <polyline points="11 6 7 12 13 12 9 18"></polyline>
+            </svg>
+            Icon</span
+          >
+        </label>
+
+        <p>Usage:</p>
+        <div class="code">
+          <pre>
+        <code class="html">
+
+&#60;label class="p-chip">
+  &#60;input type="checkbox" />
+  &#60;span>Default&#60;/span>
+&#60;/label>
+
+&#60;label class="p-chip p-chip-dark p-chip-radius-b">
+  &#60;input type="checkbox" />
+  &#60;span>Border&#60;/span>
+&#60;/label>
+
+&#60;label class="p-chip p-chip-outline">
+  &#60;input type="checkbox" />
+  &#60;span>Outline&#60;/span>
+&#60;/label>
+
+&#60;label class="p-chip p-chip-outline-to-bg">
+  &#60;input type="checkbox" />
+  &#60;span>Outline to bg&#60;/span>
+&#60;/label>
+
+&#60;label class="p-chip p-chip-radius-b">
+  &#60;input type="checkbox" />
+  &#60;span>Combined&#60;/span>
+&#60;/label>
+
+&#60;label class="p-chip">
+  &#60;input type="checkbox" disabled />
+  &#60;span>Disabled&#60;/span>
+&#60;/label>
+
+&#60;label class="p-chip p-chip-big">
+  &#60;input type="checkbox" />
+  &#60;span>
+&#60;!-- SVG -->
+    Icon&#60;/span>
+&#60;/label>
+        </code>
+      </pre>
+        </div>
+      </div>
+
       <div class="talk-about-it">
         <h2>Switches.</h2>
         <p>
@@ -386,7 +506,23 @@
         </div>
       </div>
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/getting-started.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Getting started - Puppertino Framework</title>
+    <link
+      href="https://rsms.me/inter/inter.css"
+      rel="stylesheet"
+    />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <link rel="stylesheet" type="text/css" href="doc.css" />
+    <meta
+      name="description"
+      content="Wondering how to use Puppertino? Wonder no more, click here to get a getting started guide."
+    />
+    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'UA-176821843-1');
+    </script>
+  </head>
+  <body class="p-layout">
+    <div class="route">
+      <a
+        href="https://codedgar.github.io/Puppertino/"
+        class="p-btn p-btn-scope p-btn-scope-unactive"
+        >Puppertino</a
+      >
+      <p>/</p>
+      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
+        >Examples</a
+      >
+      <p>/</p>
+      <a href="getting-started.html" class="p-btn p-btn-scope">Introduction</a>
+    </div>
+    <h1>Getting started</h1>
+    <div class="master">
+      <p>
+        Puppertino is a really straight forward framework to use as you would expect. You can use Puppertino in two ways:
+      </p>
+
+      <div class="talk-about-it">
+        <h2>Download the full CSS.</h2>
+        <p>
+          <a href="https://github.com/codedgar/Puppertino/blob/master/dist/css/full.css">Downloading the full CSS </a> is recommended if you are going to use several components of Puppertino or you are planning on using them. However if you are going to use if some of them we recommend you to go to the next way of using Puppertino.
+        </p>
+
+        <a href="https://github.com/codedgar/Puppertino/blob/master/dist/css/full.css" target="_blank" class="p-btn p-prim-col p-btn-md">Download Puppertino</a>
+      </div>
+
+
+      <div class="talk-about-it">
+        <h2>Using CSS based on components.</h2>
+        <p>
+          You can also browse the <a href="https://github.com/codedgar/Puppertino/tree/master/dist/css" target="_blank">Puppertino Repo</a> to find whatever components you want to use.
+        </p>
+        <a href="https://github.com/codedgar/Puppertino/tree/master/dist/css" target="_blank" class="p-btn p-prim-col p-btn-md">Browse repo</a>
+      </div>
+
+      <div class="talk-about-it">
+        <h2>What about JS?</h2>
+        <p>
+          There's a section for that in our repo. Sadly there's no full.js, so you'll have to manually download and import every one of them you want do use.
+        </p>
+        <a href="https://github.com/codedgar/Puppertino/tree/master/src/js" target="_blank" class="p-btn p-prim-col p-btn-md">Check JS files</a>
+      </div>
+
+    </div>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
+  <script
+    type="text/javascript"
+    src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
+  ></script>
+  <script defer>
+    hljs.initHighlightingOnLoad();
+  </script>
+</html>

docs/examples/icons.html

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="utf-8" />
     <title>Icons - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
-    <meta charset="utf-8" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -86,5 +87,21 @@
         </div>
       </div>
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
 </html>

docs/examples/index.html

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="utf-8">
     <title>Examples & Documentation - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900:500,800&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
-    <meta charset="utf-8" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -45,17 +46,26 @@
     </div>
     <h1>Documentation and Examples</h1>
     <p>Find how to use every component on Puppertino.</p>
-    <div class="row around-xs">
-      <div class="col-xs-9 col-sm-4">
+    <div class="row">
+      <div class="col-xs-11 col-sm-4">
+        <a href="getting-started.html" class="p-card p-blueberry p-white-color">
+          <div class="p-card-content">
+            <h3 class="p-card-title">Introduction</h3>
+            <p class="p-card-text">How to get up and running with Puppertino.</p>
+          </div>
+        </a>
+      </div>
+
+      <div class="col-xs-11 col-sm-4">
         <a href="buttons.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Buttons</h3>
-            <p class="p-card-text">Fancy buttons of macOS? We have them.</p>
+            <p class="p-card-text">Fancy buttons of macOS and iOS? We have them.</p>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-9 col-sm-4">
+      <div class="col-xs-11 col-sm-4">
         <a href="forms.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Forms</h3>
@@ -66,7 +76,7 @@
         </a>
       </div>
 
-      <div class="col-xs-9 col-sm-4">
+      <div class="col-xs-11 col-sm-4">
         <a href="modals.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Modals</h3>
@@ -77,7 +87,18 @@
         </a>
       </div>
 
-      <div class="col-xs-9 col-sm-4">
+      <div class="col-xs-11 col-sm-4">
+        <a href="actions.html" class="p-card">
+          <div class="p-card-content">
+            <h3 class="p-card-title">Actions</h3>
+            <p class="p-card-text">
+              Pop-up actions from iOS are now in Puppertino.
+            </p>
+          </div>
+        </a>
+      </div>
+
+      <div class="col-xs-11 col-sm-4">
         <a href="icons.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Icons</h3>
@@ -88,7 +109,7 @@
         </a>
       </div>
 
-      <div class="col-xs-9 col-sm-4">
+      <div class="col-xs-11 col-sm-4">
         <a href="layout.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Layout</h3>
@@ -99,7 +120,7 @@
         </a>
       </div>
 
-      <div class="col-xs-9 col-sm-4">
+      <div class="col-xs-11 col-sm-4">
         <a href="color_palette.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Colors</h3>
@@ -112,7 +133,7 @@
       </div>
 
 
-      <div class="col-xs-9 col-sm-4">
+      <div class="col-xs-11 col-sm-4">
         <a href="segmented_controls.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Segmented controls</h3>
@@ -124,7 +145,7 @@
         </a>
       </div>
 
-      <div class="col-xs-9 col-sm-4">
+      <div class="col-xs-11 col-sm-4">
         <a href="shadows.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Shadows</h3>
@@ -136,7 +157,7 @@
         </a>
       </div>
 
-      <div class="col-xs-9 col-sm-4">
+      <div class="col-xs-11 col-sm-4">
         <a href="tabs.html" class="p-card">
           <div class="p-card-content">
             <h3 class="p-card-title">Tabs</h3>
@@ -148,6 +169,35 @@
         </a>
       </div>
 
+
+      <div class="col-xs-11 col-sm-4 p-dark-mode">
+        <a href="dark_mode.html" class="p-card">
+          <div class="p-card-content">
+            <h3 class="p-card-title">Dark Mode</h3>
+            <p class="p-card-text">
+              Want that sweet darkmode with your Puppertino app?
+              It's here now.
+            </p>
+          </div>
+        </a>
+      </div>
+
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
 </html>

docs/examples/layout.html

@@ -3,15 +3,15 @@
   <head>
     <title>Layout - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
-    <meta charset="utf-8" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -20,7 +20,7 @@
     <link rel="stylesheet" type="text/css" href="doc.css" />
     <meta
       name="description"
-      content="This is the documentation for Icons on the Puppertino Framework, a framework that mimics Apple's design, woof!"
+      content="This is the documentation for layout on the Puppertino Framework, a framework that mimics Apple's design, woof!"
     />
     <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
 <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -77,9 +77,7 @@
 
           <div class="col-xs-9 col-md-4">
             <p>
-              The font is defined in every CSS that exists as a root variable
-              called <code class="code">--font</code> and it can be easily
-              changed for whatever font you are using.
+              The font is defined in every CSS that exists, it can be change easily if you desire to use another one.
             </p>
           </div>
         </div>
@@ -118,5 +116,21 @@
         <p class="p-caption">Caption (p-caption)</p>
       </div>
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
 </html>

docs/examples/modals.html

@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="utf-8">
     <title>Modals - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
-    <meta charset="utf-8" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -92,8 +93,7 @@
     <div class="master">
       <p>
         Modals are one of the most emblematic items of iOS, so I added the
-        modals of iOS instead of adding dialog boxes like in macOS. Following
-        the same principles of iOS, modals can have 1, 2 or 3 buttons max. To
+        modals of iOS instead of adding dialog boxes like in macOS. To
         use modals, you need 2 components:
         <a
           href="https://github.com/codedgar/Puppertino/blob/master/dist/css/modals.css"
@@ -122,7 +122,7 @@
         <p>
           I wanted to make modals not only as easy to use as possible, but UX
           optimized as I could. That's why I'm calling it now, adding form
-          elements in forms is not supported, and also opening several modals is
+          elements in modals <span class="lmao_codedgar_b_dumb">is not supported</span> <sttrong>will be added in the next release</sttrong>, and also opening several modals is
           not supported either.<br />
           Now onto modals and types:
         </p>
@@ -209,7 +209,7 @@
       <h2>Several Buttons in a modal.</h2>
       <p>
         Modals support having several buttons on them without breaking, but due
-        to composition, the max amount of buttons is 3. To add more buttons, the
+        to composition, you should not add more than 3 buttons, but if you need them, you are free to put them. To add more buttons, the
         only thing you need is to add another
         <code class="code">&#60;a></code> element inside the Modal button
         container (<code class="code"
@@ -245,7 +245,23 @@
         Firefox, the modal will appear completely white.
       </p>
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino/src/js/modals.js"></script>
   <script
     type="text/javascript"

docs/examples/new-index.html

@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="utf-8">
     <title>Home - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900:500,800&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
-    <meta charset="utf-8" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -21,171 +22,165 @@
       name="description"
       content="Have you ever thought: Man, I would love a macOS based Framework? Fear not, Puppertino is here!"
     />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"> 
     <style type="text/css">
-      :root {
-        --text_color: #252525;
-        --bg_page_color: #f5f5f5;
-      }
-      body {
-        margin: 0px;
-        --font: -apple-system, "Inter", sans-serif;
-        background: var(--bg_page_color);
+      body{
+        margin: 0;
+        font-family:-apple-system, "Inter", sans-serif;
       }
-      img {
-        display: block;
-        margin: auto;
+      img{
         max-width: 100%;
       }
-      .text_black {
-        color: var(--text_color);
+      .container-no-pad .row,  .container-no-pad>.row>div{
+        margin: 0;
+        padding: 0;
       }
-      .cta_pupper {
+      .cta_pupper{
         height: 100vh;
-        background: url("../landing-images/pupper_cta.jpg"), #000;
+        background: url(https://images.pexels.com/photos/4378919/pexels-photo-4378919.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=2000);
         background-size: cover;
-        background-repeat: no-repeat;
-        background-position: 50% -30%;
-      }
-      h1,
-      h2,
-      h3,
-      h4,
-      a,
-      p {
-        font-family: -apple-system, "Inter", sans-serif;
+        background-position: center;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        padding-bottom: 50px;
+        box-sizing: border-box;
+        color: #fff;
+      }
+      .big_ass_title{
+        font-size: 80px;
+        margin: 0;
+        margin-bottom: 20px;
+        text-transform: capitalize;
       }
-      h1 {
-        padding-top: 20vh;
-        margin-top: 0;
-        margin-bottom: 10px;
+      .title{
+        width: 100%;
         display: block;
-        color: white;
-        font-size: 70px;
-      }
-      h2 {
-        font-size: 50px;
-      }
-      p {
-        font-size: 20px;
-      }
-      .cta_pupper p {
-        color: white;
-      }
-      .cta_pupper {
         text-align: center;
       }
-      .p-btn-round {
-        border-radius: 50px;
-        border: 0px;
-        padding: 10px 30px;
-      }
-      .p-link {
-        color: #f5f5f5;
-        font-size: 15px;
-        text-decoration: none;
+      .go_sticky{
+        position: sticky;
+        top: 50px;
+        margin-bottom: 50px;
+        margin-top: 50px;
       }
-      .p-link:hover {
-        text-decoration: underline;
+      .pad_50,.go_sticky{
+        padding: 0px 3vw;
       }
-      .title {
-        text-align: center;
-        display: block;
-        width: 100%;
+      .no_margin{
+        margin:0;
       }
-      .speed_boye {
-        height: 30vh;
-        background: url("../landing-images/speed.jpg");
+      .speed_boye{
+        background: url('https://images.unsplash.com/photo-1563132509-294a94412f3b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80'), rgba(0,0,0,.25);
+        background-blend-mode: overlay;
         background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        padding: 15vh 0vw;
-      }
-      .container-no-pad .row {
-        margin: 0px;
-      }
-      .speed_h2,
-      .speed_p {
-        color: #f5f5f5;
-        text-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
-      }
-      .speed_h2 {
-        margin-bottom: 10px;
-      }
-      .speed_p {
-        margin: 0;
-      }
-      .pad_5 {
-        padding: 10vh 0vw 20vh;
+        background-position: left;
+        padding: 20vh 5vw;
+        text-align: right;
+        color: #fff;
+      }
+      @media (max-width: 768px){
+        .cta_pupper h1{
+          font-size: 3rem;
+        }
+        .cta_pupper{
+          padding: 25px;
+        }
       }
     </style>
   </head>
-  <body>
+  <body >
     <div class="cta_pupper">
-      <h1>Your websites. Better.</h1>
-      <p>
-        Separate yourself from the rest. Create something unique with
-        <span>Puppertino</span>
-      </p>
-      <a href="#what" class="p-btn p-prim-col p-btn-round">Learn more</a>
-      <a href="" class="p-link">Read the docs</a>
+      <div class="inner_cta">
+        <p class="p-callout"> Puppertino Chihuahua</span> </p>
+        <h1 class="big_ass_title">The dog's out.</h1>
+        <a href="#what" class="p-btn p-prim-col p-btn-round">Learn more</a>
+        <a href="#" class="p-link p-blueberry-700-color">Read the docs</a>
+      </div>
     </div>
-    <div class="container-no-pad pad_5">
-      <div class="row around-xs middle-xs">
-        <h2 class="title text_black">More than a framework</h2>
-        <div class="col-xs-9 col-md-3">
-          <img src="../landing-images/apple.png" />
+    <div class="container-no-pad">
+      <div class="row between-xs">
+        <div class="col-xs-9 col-md-6">
+          <img src="https://images.pexels.com/photos/3434527/pexels-photo-3434527.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1500" />
         </div>
-        <div class="col-xs-9 col-md-5">
-          <p class="text_black">
-            Puppertino is a framework designed based on the
-            <strong>Human guidelines</strong> and
-            <strong>iOS and macOS</strong> from Apple, while adding our own
-            flavor to the mix.<br /><br />
-            That doesn't mean that it's a direct rip-off of everything you would
-            find in the Human Guidelines. We work hard to feature components
-            that will be neccesary to build apps or websites.<br /><br />Puppertino
-            is built to work with any framework available, so if you use
-            <strong
-              >Bootstrap, Bulma, Flexbox Grid, Skeleton, or any
-              framework</strong
-            >, you should still be able to use Puppertino without problems.<br /><br />Last
-            but not least, Puppertino is <strong>modular</strong>, so if you
-            only want buttons, or form elements, you can just use them.
-          </p>
+        <div class="col-xs-9 col-md-6">
+          <div class="go_sticky">
+            <h2 class="p-large-title big_ass_title">Pupp- What?</h2>
+            <p class="text_black">
+              Puppertino is a CSS/JS framework based on the <strong>Human guidelines</strong> and UIs of <strong>iOS and macOS</strong>.
+              <br><br>
+              Puppertino is made for people who want to develop websites, apps, and everything with the iconic Apple style without wanting to spend more time coding the UI.
+              <br><br>
+              This doesn't mean that Puppertino is a direct rip-off of all the components of Apple. Instead, we've focused on creating what we think are <strong>the most used components</strong>.
+            </p>
+          </div>
         </div>
       </div>
     </div>
-    <div class="speed_boye container-no-pad">
-      <div class="row">
-        <div class="col-md-offset-1 col-md-5">
-          <h2 class="speed_h2">Focused on speed.</h2>
-          <p class="speed_p">
-            Puppertino weights less than 50KB, making your website shine even in
-            the worst connections.
-          </p>
+
+
+    <div class="container-no-pad">
+      <div class="row between-xs">
+        <div class="col-xs-9 col-md-6">
+          <div class="go_sticky">
+            <h2 class="p-large-title big_ass_title">Customize Puppertino</h2>
+            <p class="text_black">
+              Based on powerful <strong>CSS variables</strong> Puppertino offers you a wide range of customization. <strong>Import just what you need</strong>, and customiza colors and values with the changes of simple CSS variables.
+              <br><br>
+              With a wide range of colors, classes, and options to use, customizing Puppertino is done in a breeze, so you can adapt it to the look of your brand and needs.
+            </p>
+          </div>
+        </div>
+        <div class="col-xs-9 col-md-6">
+          <img src="https://images.pexels.com/photos/5677085/pexels-photo-5677085.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
         </div>
       </div>
     </div>
 
-    <div class="container-no-pad pad_5">
-      <h2 class="title text_black">Enhace your apps.</h2>
-      <div class="row around-xs">
-        <div class="col-xs-9 col-md-5">
-          <p class="text_black">
-            If you are creating WebApps, you can use Puppertino to make your
-            apps look more like a native app without having to style a lot of
-            things.<br /><br />
-            And if you are creating a website for a macOS / iOS app, Puppertino
-            can help you make it look nice without having to import a big
-            framework.<br /><br />Don't know where to start? Check these:
-          </p>
-          <a href="#" class="p-btn p-prim-col">Examples</a>
-          <a href="#" class="p-btn">Documentation</a>
+    <div class="container-no-pad">
+      <div class="row middle-xs">
+      <div class="col-md-6">
+          <img src="https://images.pexels.com/photos/2133015/pexels-photo-2133015.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
         </div>
-        <div class="col-xs-9 col-md-5">
-          <img src="../landing-images/devices.png" />
+        <div class="col-md-6">
+          <div class="pad_50">
+              <p class="no_margin p-subhead">No more</p>
+              <h2 class="no_margin p-large-title">"This doesn't look so <em>Appley</em>"</h2>
+               <p>
+                We've tweaked every single CSS to it's core, so we can ensure that this new version of Puppertino is the one you deserve.
+               </p>
+               <a href="#" target="_blank" class="p-btn p-prim-col p-white-color no_margin">Compare</a>
+          </div>
+
         </div>
+        
       </div>
     </div>
-  </body>
+
+
+    <div class="speed_boye container-no-pad">
+      <h2 class="p-large-title no_margin">Puppertino is <em>FAST</em>.</h2>
+      <p class="speed_p">
+        Puppertino weights less than 50KB, making your website shine even in the worst connections.
+      </p>
+    </div>
+
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
 </html>

docs/examples/segmented_controls.html

@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="utf-8">
     <title>Segmented controls - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
-    <meta charset="utf-8" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -254,7 +255,23 @@
 
       </div>
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/shadows.html

@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="utf-8">
     <title>Shadows - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
-    <meta charset="utf-8" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -139,7 +140,23 @@
       </div>
 
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/examples/tabs.html

@@ -3,10 +3,11 @@
   <head>
     <title>Tabs - Puppertino Framework</title>
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900&display=swap"
+      href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" /> -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -82,7 +83,7 @@
           <div class="p-panels">
             <div class="p-panel p-is-active">
               <h1>Service 1</h1>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto et unde ut eligendi repudiandae nostrum id rerum perferendis. Architecto vel, in accusantium tempore dolore enim accusamus molestiae ex nisi?</p>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto et unde ut eligendi repudiandae nostrum id rerum perferendis. Architecto vel, in accusantium tempore dolore enim accusamus molestiae ex nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto et unde ut eligendi repudiandae nostrum id rerum perferendis. Architecto vel, in accusantium tempore dolore enim accusamus molestiae ex nisi?Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto et unde ut eligendi repudiandae nostrum id rerum perferendis. Architecto vel, in accusantium tempore dolore enim accusamus molestiae ex nisi?</p>
             </div>
             <div class="p-panel">
               <h1>Service 2</h1>
@@ -234,7 +235,23 @@
       </div>
 
     </div>
-  </body>
+ 
+</body>
+
+  <script defer>
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
   <script
     type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"

docs/index.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900:500,800&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -27,6 +27,10 @@
         --text_color: #252525;
         --bg_page_color: #f5f5f5;
       }
+      .p-dark-mode{
+        --bg_page_color: #252525;
+        --text_color: #f5f5f5;
+      }
       body {
         margin: 0px;
         --font:  -apple-system, "Inter", sans-serif;
@@ -144,7 +148,7 @@
     <div class="container-no-pad pad_5" id="what">
       <div class="row around-xs middle-xs">
         <h2 class="title text_black">More than a framework</h2>
-        <div class="col-xs-11 col-md-3">
+        <div class="col-xs-11 col-md-3" data-aos="fade-in">
           <img src="landing-images/apple.png" />
         </div>
         <div class="col-xs-11 col-md-5">
@@ -199,5 +203,21 @@
         </div>
       </div>
     </div>
-  </body>
+ 
+</body>
+  <script defer>
+
+    function retrieve_theme(){
+      let theme = localStorage.getItem('puppertino_theme');
+      if(theme != null){
+        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
+      }
+    }
+
+    window.addEventListener("storage",function(){
+      retrieve_theme();
+    },false);
+
+    retrieve_theme();
+   </script>
 </html>

src/css/cards.scss

@@ -231,7 +231,7 @@ textarea.p-form-text {
   margin: 10px;
   padding: 5px 20px;
   text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
 }
 
 .p-form-send {

src/css/full.scss

@@ -22,7 +22,7 @@
 }
 
 .p-modal {
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.85);
   border-radius: 20px;
   bottom: calc(50% - 20vh);
   box-shadow: 0 10px 20px -15px;

src/css/puppertino.scss

@@ -35,7 +35,7 @@
   color: #333230;
   text-decoration: none;
   border: 1px solid #cacaca;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
   display: inline-block;
   cursor: pointer;
   font-family: -apple-system, "Inter", sans-serif;

src/css/var/_breakpoints.scss

@@ -22,7 +22,6 @@ let mobile_tabs_pupper = document.querySelectorAll('.p-mobile-tabs a');
 for (var item of mobile_tabs_pupper) {
     item.addEventListener("click", function (event) {
       event.preventDefault();
-      console.log(this.parentNode);
       var remover_pupper = this.parentNode.parentNode;
       remover_pupper.querySelector('.active').classList.remove('active');
       this.classList.add('active');