@dev-tcloud/tcloud-ui 5.0.2-beta.1 → 5.0.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-tcloud/tcloud-ui",
-  "version": "5.0.2-beta.1",
+  "version": "5.0.3-beta.1",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14"

package/scss/components/custom/tab-menu.scss

@@ -40,13 +40,13 @@ tcloud-ui-tab-subtitle,
 tcloud-ui-tab-title{
   .tab-subtitle-active + .bottom-line-hover,
   .tab-title-active + .bottom-line-hover {
-    background-color: var(--c-primary-500) !important;
+    background-color: var(--tc-primary) !important;
     border-radius: 5px;
   }
 
   &:hover{
     .bottom-line-hover{
-      background-color: var(--c-primary-500) !important;
+      background-color: var(--tc-primary) !important;
       border-radius: 5px;
       transition: 1s ease-in-out;
     }
@@ -55,4 +55,4 @@ tcloud-ui-tab-title{
 
 tcloud-ui-tab-subtitle {
   margin: 0px 10px;
-}
+}

package/scss/components/custom/variables.scss

@@ -30,61 +30,4 @@
     --verde: #37B6C4;
     --cinza: #8A817B;
     --cinza4: #F1F1F1;
-
-    --f-family: 'Open Sans', sans-serif;
-
-
-    --c-neutral-50: #FFFFFF;
-    --c-neutral-100: #FAFAFA;
-    --c-neutral-200: #EEEEEE;
-    --c-neutral-300: #D2D2D2;
-    --c-neutral-400: #CED4DA;
-    --c-neutral-500: #5E5E5E;
-    --c-neutral-600: #6C757D;
-    --c-neutral-700: #495057;
-    --c-neutral-800: #363636;
-    --c-neutral-900: #000000;
-    --c-primary-300: #e3fcff;
-    --c-primary-400: #98e5ee;
-    --c-primary-500: #37B6C4;
-    --c-primary-600: #2592AB;
-    --c-primary-700: #136E92;
-    --c-danger-300: #FDE1D6;
-    --c-danger-400: #F48E85;
-    --c-danger-500: #DC3545;
-    --c-alert-300: #FFE6B7;
-    --c-alert-400: #FECD6E;
-    --c-alert-500: #FEAC0E;
-    --c-info-300: #E6F5FD;
-    --c-info-400: #6BC1F2;
-    --c-info-500: #0897E9;
-    --c-success-300: #E7FBDA;
-    --c-success-400: #A3E78C;
-    --c-success-500: #47B13D;
-
-  body.tc-prime {
-    --c-primary-300: #D3C8FF;
-    --c-primary-400: #896DFF;
-    --c-primary-500: #6B48FF;
-    --c-primary-600: #3A24B7;
-    --c-primary-700: #190D7A;
-  }
-
-  body.tc-standard-modern {
-    --f-family: 'Nunito Sans', sans-serif;
-    --c-primary-300: #EAF9FF;
-    --c-primary-400: #75D8FF;
-    --c-primary-500: #0897E9;
-    --c-primary-600: #0457A7;
-    --c-primary-700: #012C6F;
-  }
-
-  body.tc-prime-modern {
-    --f-family: 'Nunito Sans', sans-serif;
-    --c-primary-300: #D3C8FF;
-    --c-primary-400: #896DFF;
-    --c-primary-500: #6B48FF;
-    --c-primary-600: #3A24B7;
-    --c-primary-700: #190D7A;
-  }
-}
+}

package/scss/tcloud/custom/buttons.scss

@@ -11,7 +11,6 @@
   height: 40px;
   border: 1px solid var(--tc-gray-100);
   justify-content: center;
-  font-family: var(--f-family);
 
 p {
   font-size: 13px;
@@ -25,7 +24,7 @@ i {
 }
 
 &:hover {
-  color: var(--c-primary-500);
+  color: var(--tc-primary);
   background: var(--tc-gray-50);
   border-color: var(--tc-gray-100);
 }
@@ -74,13 +73,13 @@ i {
 
 .tc-btn-primary {
   color: var(--white);
-  background: var(--c-primary-500);
-  border-color: var(--c-primary-500);
+  background: var(--tc-primary);
+  border-color: var(--tc-primary);
 
   &:hover {
     color: var(--white);
-    background: var(--c-primary-700);
-    border-color: var(--c-primary-500);
+    background: var(--tc-complemt-3);
+    border-color: var(--tc-primary);
   }
 }
 
@@ -122,14 +121,14 @@ i {
 }
 
 .tc-btn-outline-primary {
-  color: var(--c-primary-500);
+  color: var(--tc-primary);
   background: transparent;
-  border-color: var(--c-primary-500);
+  border-color: var(--tc-primary);
 
   &:hover {
     color: var(--white);
-    background: var(--c-primary-500);
-    border-color: var(--c-primary-500);
+    background: var(--tc-primary);
+    border-color: var(--tc-primary);
   }
 }
 
@@ -162,12 +161,12 @@ i {
   cursor: pointer;
   padding: 10px;
   background: none;
-  color: var(--c-primary-500);
+  color: var(--tc-primary);
   border: none;
 
   p {
     text-align: left;
-    color: var(--c-primary-500);
+    color: var(--tc-primary);
   }
 
   &:hover{
@@ -181,7 +180,7 @@ i {
   &.tc-btn-link-primary {
     background: none;
     border: none;
-    color: var(--c-primary-500);
+    color: var(--tc-primary);
   }
 
   &.tc-btn-link-warning {
@@ -228,7 +227,7 @@ i {
 .btn-new.active,
 .btn-new.opened,
 .btn-new:hover {
-  background: var(--c-primary-500);
+  background: var(--tc-primary);
   color: var(--white);
 }
 
@@ -256,7 +255,7 @@ border: none !important;
 .btn-new-grey.active,
 .btn-new-grey.opened,
 .btn-new-grey:hover {
-background: var(--c-primary-500)!important;
+background: var(--tc-primary)!important;
 color: var(--white) !important;
 }
 
@@ -272,7 +271,7 @@ margin: 0 0 0 10px;
 .btn-green-validate {
 /*display: inline-flex;*/
 align-items: center;
-background: var(--c-primary-500)!important;
+background: var(--tc-primary)!important;
 color: var(--white) !important;
 font-size: 12px;
 font-weight: normal;
@@ -302,7 +301,7 @@ padding: 10px 20px;
 .tc-btn-primary.active,
 .tc-btn-primary.opened,
 .tc-btn-primary:hover {
-background: var(--c-primary-700) !important;
+background: var(--tc-complemt-3) !important;
 }
 
 .tc-btn-primary i {
@@ -366,7 +365,7 @@ margin: 0;
 .btn-disabled {
 /*display: inline-flex;*/
 align-items: center;
-background: var(--c-primary-500)!important;
+background: var(--tc-primary)!important;
 color: var(--white) !important;
 font-size: 12px;
 font-weight: normal;
@@ -390,7 +389,7 @@ font-weight: normal;
 
 display: inline-flex;
 align-items: center;
-color: var(--c-primary-500);
+color: var(--tc-primary);
 background: var(--white);
 border-radius: 30px;
 padding: 10px 20px;
@@ -401,7 +400,7 @@ transition: all 0.25s;
 
 .btn-new-white:hover {
 color: var(--white);
-background: var(--var(--c-primary-500)2);
+background: var(--var(--tc-primary)2);
 }
 
 .btn-new-full {
@@ -415,12 +414,12 @@ width: 100%;
 
 .btn-group .btn-secondary {
 color: var(--white);
-background-color: var(--c-primary-500);
-border-color: var(--c-primary-500);
+background-color: var(--tc-primary);
+border-color: var(--tc-primary);
 }
 
 .btn-group .btn-secondary:hover {
-background-color:  var(--c-primary-500)2;
+background-color:  var(--tc-primary)2;
 }
 
 
@@ -458,7 +457,7 @@ min-width: 120px;
 }
 
 .btn-primary.btn-outline {
-color: var(--c-primary-500);
+color: var(--tc-primary);
 }
 
 .btn-success.btn-outline {
@@ -466,7 +465,7 @@ color: var(--tc-complete);
 }
 
 .btn-info.btn-outline {
-color: var(--c-primary-500);
+color: var(--tc-primary);
 }
 
 .btn-warning.btn-outline {
@@ -499,16 +498,16 @@ color: var(--white);
 .btn-primary {
 font-size: 12px;
 color: var(--white);
-background-color: var(--c-primary-500)!important;
-border-color: var(--c-primary-500)!important;
+background-color: var(--tc-primary)!important;
+border-color: var(--tc-primary)!important;
 padding: 10px 20px;
 border-radius: 20px;
 
 &:hover,
 &:focus,
 &.focus {
-  background-color: var(--c-primary-500)2!important;
-  border-color: var(--c-primary-500)2!important;
+  background-color: var(--tc-primary)2!important;
+  border-color: var(--tc-primary)2!important;
   color: var(--white) !important;
 }
 
@@ -543,15 +542,15 @@ margin: 0 10px 0 0;
 
 .btn-success {
 color: var(--white);
-background-color: var(--c-primary-500);
-border-color: var(--c-primary-500);
+background-color: var(--tc-primary);
+border-color: var(--tc-primary);
 
 &:hover,
 &:focus,
 &.focus {
   color: var(--white);
-  background-color: var(--c-primary-500);
-  border-color: var(--c-primary-500);
+  background-color: var(--tc-primary);
+  border-color: var(--tc-primary);
 }
 
 &.disabled,
@@ -566,8 +565,8 @@ border-color: var(--c-primary-500);
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
 color: var(--white);
-background-color: var(--c-primary-500);
-border-color: var(--c-primary-500);
+background-color: var(--tc-primary);
+border-color: var(--tc-primary);
 }
 
 .btn-success:not(:disabled):not(.disabled):active:focus,
@@ -765,7 +764,7 @@ color: inherit;
 &:focus,
 &:active,
 &.active {
-  color: var(--c-primary-500);
+  color: var(--tc-primary);
   text-decoration: none;
 }
 
@@ -790,7 +789,7 @@ color: inherit;
 }
 
 .open .dropdown-toggle.btn-link {
-color: var(--c-primary-500);
+color: var(--tc-primary);
 text-decoration: none;
 background-image: none;
 box-shadow: none;
@@ -820,8 +819,8 @@ border-radius: 30px;
 &.active:hover,
 &.active:focus {
   color: var(--white);
-  border: 1px solid var(--c-primary-500);
-  background: var(--c-primary-500);
+  border: 1px solid var(--tc-primary);
+  background: var(--tc-primary);
 }
 
 &:active,
@@ -850,8 +849,8 @@ border-radius: 30px;
 
 .open .dropdown-toggle.btn-white {
 color: var(--white);
-border: 1px solid var(--c-primary-500);
-background: var(--c-primary-500);
+border: 1px solid var(--tc-primary);
+background: var(--tc-primary);
 background-image: none;
 }
 
@@ -1001,4 +1000,4 @@ line-height: 1.33;
 
 .tc-display-inline-flex{
   display: inline-flex;
-}
+}

package/scss/tcloud/custom/forms.scss

@@ -23,15 +23,14 @@
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   height: 40px;
   cursor: pointer;
-  font-family: var(--f-family);
 
   &:focus {
-    border-color: var(--c-primary-500);
+    border-color: var(--tc-primary);
     box-shadow: none;
   }
 
   &:focus-visible {
-    outline: 1px solid var(--c-primary-500);
+    outline: 1px solid var(--tc-primary);
     border-radius: 3px;
   }
 
@@ -44,7 +43,6 @@
 
 textarea.tc-form-control{
   min-height: 80px;
-  font-family: var(--f-family);
 }
 
 
@@ -61,7 +59,7 @@ select.tc-form-control{
   font-family: "Open Sans";
   height: 40px !important;
   padding: 0 10px;
-  font-family: var(--f-family);
+
 }
 
 

package/scss/tcloud/prime/tcloud-prime.scss

@@ -246,7 +246,7 @@ body.tc-prime {
     @include mixins.prime-bg-50;
   }
 
-
+  
 
   //==========================================================
   // Prime Objects border Colors
@@ -307,7 +307,7 @@ body.tc-prime {
 
   .card {
     box-shadow: none !important;
-
+    
     &.card.shadow {
       box-shadow: none !important;
     }
@@ -396,15 +396,15 @@ body.tc-prime {
   //============================
 
   .prime-mb-1 {
-    margin-bottom: 10px;
+    margin-bottom: 10px;  
   }
 
   .prime-mb-2 {
-    margin-bottom: 20px;
+    margin-bottom: 20px;  
   }
-
+  
   .prime-mb-3 {
-    margin-bottom: 30px;
+    margin-bottom: 30px;  
   }
 
 
@@ -675,9 +675,9 @@ body.tc-prime {
   tbody tr:nth-child(odd) {
     background: var(--tc-gray-10) !important;
   }
+  
 
-
-
+  
   //==========================================================
   // Forms
   //==========================================================
@@ -699,12 +699,12 @@ body.tc-prime {
 
   input[type=checkbox]:after,
   input[type=radio]:after {
-    border: 2px solid var(--c-primary-500);
+    border: 2px solid var(--tc-gray-600);
   }
 
   input[type=radio]:checked:before,
   input[type=checkbox]:checked:after {
-    background: var(--c-primary-500);
+    background: var(--tc-gray-600);
   }
 
   .form-control,
@@ -983,7 +983,7 @@ body.tc-prime {
   }
 
   .tc-top-message-user {
-
+    
     .count-info .label {
       right: -13px !important;
       top: 0px !important;
@@ -1027,7 +1027,7 @@ body.tc-prime {
 
   }
 
-
+ 
 
 
 //==========================================================
@@ -1299,7 +1299,7 @@ body.tc-prime {
       }
     }
 
-
+    
 
     .tab-menu-wrap {
       margin: 20px 0 0 !important;
@@ -1599,7 +1599,7 @@ body.tc-prime {
   }
 
 
-
+  
 
   //====================================
   // Actions
@@ -1658,7 +1658,7 @@ body.tc-prime {
     }
 
     .text-success {
-
+    
       &.disable {
         color: var(--tc-gray-300) !important;
         background: var(--tc-gray-50) !important;
@@ -2011,7 +2011,7 @@ body.tc-prime {
     .progress-bar {
       color: var(--white) !important;
     }
-  }
+  } 
 
   .contrato-card-header {
     border-radius: 8px 8px 0 0 !important;
@@ -2187,7 +2187,7 @@ body.tc-prime {
   }
 
   tc-contact-info {
-
+    
     .contact-info {
       box-shadow: none;
     }
@@ -3345,38 +3345,38 @@ body.tc-prime {
       .tc-tab-menu {
         overflow: hidden !important;
       }
-
+  
       .area-navigation td button {
         top: -3px !important;
       }
-
+  
       h3 {
         @include mixins.prime-subtitle;
       }
-
+  
       .sec-time {
         bottom: 130px !important;
       }
-
+  
       .box-master {
         background-color: var(--tc-gray-10) !important;
         border-radius: 7px !important;
-
+  
         &:hover {
           border: 3px solid var(--tc-gray-100) !important;
         }
-
+  
       }
-
+  
       th {
         background-color: var(--black) !important;
       }
     }
+ 
+  
 
 
-
-
-
+   
   }
 
   //==========================================================

package/scss/tcloud-revitalizacao/_tc-rev-border.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+
+:root
+{
+    --bor-radius-0: 0px;
+    --bor-radius-4: 4px;
+    --bor-radius-8: 8px;
+    --bor-radius-16: 16px;
+    --bor-radius-24: 24px;
+    --bor-radius-32: 32px;
+    --bor-radius-rounded: 50%;
+    --bor-radius-pill: 2000px;
+    --bor-size-none: 0;
+    --bor-size-xs: 1px;
+    --bor-size-sm: 1.5px;
+    --bor-size-md: 2px;
+    --bor-size-lg: 2.5px;
+    --bor-size-xl: 3px;
+    --bor-size-1: 1px;
+    --bor-size-2: 2px;
+    --bor-size-3: 3px;
+    --bor-style-solid: solid;
+    --bor-style-dashed: dashed;
+}
+
+$borders-config: (
+  "rad": (
+    "4": var(--bor-radius-4),
+    "8": var(--bor-radius-8),
+    "16": var(--bor-radius-16),
+    "24": var(--bor-radius-24),
+    "32": var(--bor-radius-32),
+    "none": var(--bor-radius-0),
+    "xs": var(--bor-radius-4),
+    "sm": var(--bor-radius-8),
+    "md": var(--bor-radius-16),
+    "lg": var(--bor-radius-24),
+    "xl": var(--bor-radius-32),
+    "pill": var(--bor-radius-pill),
+    "rounded": (var(--bor-radius-rounded))
+  ),
+  "width": (
+    "none": var(--bor-size-none),
+    "xs": var(--bor-size-xs),
+    "sm": var(--bor-size-sm),
+    "md": var(--bor-size-md),
+    "lg": var(--bor-size-lg),
+    "xl": var(--bor-size-xl),
+    "1": var(--bor-size-1),
+    "2": var(--bor-size-2),
+    "3": var(--bor-size-3)
+  )
+);
+
+@each $type, $values in $borders-config {
+  @each $name, $value in $values {
+    @if $type == "rad" {
+      .bor-#{$type}-#{$name} {
+        border-radius: $value;
+      }
+    } @else if $type == "width" {
+      .bor-#{$name} {
+        border-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+
+      .bor-l-#{$name} {
+        border-left-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+
+      .bor-t-#{$name} {
+        border-top-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+
+      .bor-r-#{$name} {
+        border-right-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+
+      .bor-b-#{$name} {
+        border-bottom-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+    }
+  }
+}
+
+.bor-dashed
+{
+    border-style: dashed;
+}