keevo-components 1.8.535 → 1.8.537

package/src/lib/components/keevo-components-styles.scss

@@ -2,17 +2,72 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
-$font-family-keevo: "Inter var", "Inter", sans-serif;
+@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css");
+// @import url("./styles/tabler-icons.css");
+
+$font-family-keevo: "Inter", "Inter var", sans-serif;
 
 // Importar outras fontes
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
 
 ::ng-deep :root {
+  --kv-color-system: 10,58,120;
+  --kv-color-system-cta: 76, 175, 80;
+  --kv-color-text: 0, 0, 0;
+  --kv-color-text-inv: 255, 255, 165;
+  --kv-background-system: 248,250,253;
+  --kv-background-card: 255,255,255;
+
   --kv-primary-color: 41, 185, 45;
   --kv-secondary-color: 0, 37, 66;
   --kv-tertiary-color: 165, 165, 165;
 }
 
+::ng-deep .padrao {
+  --kv-color-system: 10,58,120;
+  --kv-color-system-cta: 76, 175, 80;
+  --kv-color-text: 0, 0, 0;
+  --kv-background-system: 248,250,253;
+  --kv-background-card: 255,255,255;
+}
+
+::ng-deep .theme-keevocenter {
+  --kv-color-system: 88,25,153;
+  --kv-color-system-cta: 0, 116, 217;
+  --kv-color-text: 0, 0, 0;
+  --kv-color-text-inv: 255, 255, 165;
+  --kv-background-system: 248,250,253;
+  --kv-background-card: 255,255,255;
+}
+
+::ng-deep .theme-holos {
+  --kv-color-system: 241,90,36;
+  --kv-color-system-cta: 224, 168, 35;
+  --kv-color-text: 0, 0, 0;
+  --kv-color-text-inv: 255, 255, 165;
+  --kv-background-system: 240,240,240;
+  --kv-background-card: 2255,255,255;
+}
+
+
+
+.system-color{
+  color: rgb(var(--kv-color-system), 1);
+}
+
+.bg-system-100{
+  background: rgb(var(--kv-color-system), 1);
+}
+.bg-system-75{
+  background: rgb(var(--kv-color-system), .75);
+}
+.bg-system-50{
+  background: rgb(var(--kv-color-system), .5);
+}
+.bg-system-25{
+  background: rgb(var(--kv-color-system), .25);
+}
+
 .material-symbols-outlined {
   font-family: "Material Symbols Outlined" !important;
 }
@@ -118,11 +173,12 @@ $font-family-keevo: "Inter var", "Inter", sans-serif;
 }
 
 ::ng-deep .p-dialog .p-dialog-header {
-  color: white !important;
-  background: #002542 !important;
+  color: rgb(var(--kv-color-text)) !important;
+  background: rgb(var(--kv-background-card)) !important;
   display: flex !important;
   flex-wrap: wrap;
   word-wrap: break-word;
+  border-bottom: 1px solid rgb(var(--kv-color-text), 0.15);
 }
 
 ::ng-deep .p-dialog .p-dialog-content {

package/src/lib/components/kv-button/kv-button.component.scss

@@ -201,3 +201,148 @@
     background-color: rgba(var(--kv-tertiary-color), 0.2);
   }
 }
+
+
+// =======================================================================
+// ==================== NOVO CSS DO BOTÃO ================================
+// ======== AGUARDAR PUBLICAÇÃO DO REINF PARA LIBERAÇÃO ==================
+// =======================================================================
+
+// @import "../keevo-components-styles.scss";
+
+// ::ng-deep .kv-button .p-button-loading-icon svg {
+//   width: 100%;
+//   height: 100%;
+//   display: block;
+// }
+
+// ::ng-deep .kv-button .p-button-loading-icon svg g {
+//   transform: translate(0, 0);
+// }
+
+// ::ng-deep .kv-button {
+//   border: none;
+//   // padding: 0.4rem;
+//   display: flex;
+//   flex-direction: row;
+//   align-items: center;
+//   justify-content: center;
+//   gap: 0.125rem;
+
+//   .kv-button-label {
+//     font-weight: 500;
+//   }
+
+//   :focus {
+//     outline: none;
+//     box-shadow: none;
+//   }
+// }
+
+// ::ng-deep .small {
+//   height: 1.625rem;
+//   min-width: 1.625rem;
+
+//   .kv-button-label {
+//     font-size: 0.625rem;
+//   }
+
+//   .kv-button-icon {
+//     font-size: 0.75rem;
+//   }
+
+//   .p-button-loading-icon {
+//     width: 0.55rem;
+//     height: 0.55rem;
+//   }
+// }
+
+// ::ng-deep .normal {
+//   height: 1.875rem;
+//   min-width: 1.875rem;
+
+//   .kv-button-label {
+//     font-size: 0.825rem;
+//   }
+
+//   .kv-button-icon {
+//     font-size: 1rem;
+//   }
+
+//   .p-button-loading-icon {
+//     width: 0.75rem;
+//     height: 0.75rem;
+//   }
+// }
+
+// ::ng-deep .large {
+//   height: 2.125rem;
+//   min-width: 2.125rem;
+
+//   .kv-button-label {
+//     font-size: 1rem;
+//   }
+
+//   .kv-button-icon {
+//     font-size: 1.25rem;
+//   }
+
+//   .p-button-loading-icon {
+//     width: 0.875rem;
+//     height: 0.875rem;
+//   }
+// }
+
+// //Primary button
+// ::ng-deep .primary {
+//   background-color: rgb(var(--kv-color-system));
+//   &:hover {
+//     background-color: rgba(var(--kv-color-system), 0.8);
+//   }
+
+//   &:active {
+//     background-color: rgba(var(--kv-color-system), 0.95);
+//   }
+// }
+
+// ::ng-deep .secondary {
+//   border: solid 0.5px rgb(var(--kv-color-system));
+//   background-color: white;
+//   color: rgb(var(--kv-color-system));
+
+//   &:hover {
+//     background-color: rgb(var(--kv-color-system),0.1);
+//   }
+
+//   &:active {
+//     background-color: rgba(var(--kv-color-system), 0.8);
+//   }
+// }
+
+// ::ng-deep .tertiary {
+//   opacity: 0.9;
+//   background-color: transparent;
+//   color: rgb(var(--kv-color-system));
+
+//   &:hover {
+//     background-color: rgba(var(--kv-color-system), 0.1);
+//   }
+
+//   &:active {
+//     background-color: rgba(var(--kv-color-system), 0.2);
+//   }
+// }
+
+// ::ng-deep .callToAction {
+//   opacity: 0.9;
+//   background-color: transparent;
+//   color: rgb(var(--kv-color-system));
+
+//   &:hover {
+//     background-color: rgba(var(--kv-color-system), 0.1);
+//   }
+
+//   &:active {
+//     background-color: rgba(var(--kv-color-system), 0.2);
+//   }
+// }