@dev-tcloud/tcloud-ui 0.1.0 → 0.1.2

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

@@ -11,7 +11,7 @@
 
 // '#293846'
 
-$i: !important;
+$i: '!important';
 
 // =========================================================
 // T-Cloud Prime theme v.01
@@ -20,7 +20,7 @@ $i: !important;
 body.tc-prime {
   font-family: 'Lato', sans-serif;
   font-size: 12px;
-  color: $prime-black;
+  color: var(--black);
 
 }
 
@@ -34,7 +34,7 @@ body.tc-prime {
   // Colors
   //===================================
 
-  background: $prime-black; // body and menu background
+  background: var(--black); // body and menu background
 
   //==========================================================
     // Prime Objects Colors
@@ -49,7 +49,7 @@ body.tc-prime {
   .card-shadow-tit,
   .card
   {
-    color: $prime-black $i;
+    color: var(--black) $i;
   }
 
   h1,
@@ -164,7 +164,7 @@ body.tc-prime {
   .admin-fullname-wrap i,
   .admin-email-wrap i
   {
-    color: $prime-gray-100 $i;
+    color: var(--tc-gray-100) $i;
   }
 
 
@@ -296,7 +296,7 @@ body.tc-prime {
 
   .gray-bg,
   .bg-muted {
-    background-color: $tc-white;
+    background-color: var(--white);
   }
 
   .wrap-main {
@@ -347,7 +347,7 @@ body.tc-prime {
 
       &.active,
       &.hover {
-        color: $prime-white $i;
+        color: var(--white) $i;
       }
 
       i {
@@ -358,12 +358,12 @@ body.tc-prime {
   }
 
   .nav-tabs > li > a {
-    color: $prime-black $i;
+    color: var(--black) $i;
   }
 
   .nav-tabs > li > a:hover,
   .nav-tabs > li > a:focus {
-    color: $prime-white $i;
+    color: var(--white) $i;
   }
 
 
@@ -384,7 +384,7 @@ body.tc-prime {
       background-color: transparent $i;
 
       label {
-        color: $prime-black $i;
+        color: var(--black) $i;
       }
     }
 
@@ -422,7 +422,7 @@ body.tc-prime {
   .inmodal {
 
     .modal-title {
-      color: $prime-white $i;
+      color: var(--white) $i;
     }
 
     .modal-header {
@@ -437,7 +437,7 @@ body.tc-prime {
 
   button.close,
   .close:not(:disabled):not(.disabled) {
-    color: $prime-white $i;
+    color: var(--white) $i;
     opacity: 1 $i;
   }
 
@@ -460,12 +460,12 @@ body.tc-prime {
   .btnContainer {
 
     .chamada {
-      background-color: $prime-black $i;
+      background-color: var(--black) $i;
     }
 
     .remove-feedback {
-      background-color: $prime-gray-100 $i;
-      color: $prime-white $i;
+      background-color: var(--tc-gray-100) $i;
+      color: var(--white) $i;
     }
   }
 
@@ -484,7 +484,7 @@ body.tc-prime {
 
         .progress-bar-line {
             margin: 15px 0 $i;
-            background: $prime-gray-50 $i;
+            background: var(--tc-gray-50) $i;
             border: none $i;
           }
         }
@@ -501,7 +501,7 @@ body.tc-prime {
 
       .title,
       .sub-title  {
-        color: $prime-white $i;
+        color: var(--white) $i;
         font-weight: normal $i;
       }
 
@@ -535,7 +535,7 @@ body.tc-prime {
   //============================
   .ngx-pagination a:hover,
   .ngx-pagination button:hover {
-    color: $prime-white $i;
+    color: var(--white) $i;
   }
 
   .pagination-wrap {
@@ -549,15 +549,15 @@ body.tc-prime {
 
   /* Track */
   ::-webkit-scrollbar-track {
-    background: $prime-gray-50 $i;
+    background: var(--tc-gray-50) $i;
   }
   /* Handle */
   ::-webkit-scrollbar-thumb {
-    background: $prime-primary $i;
+    background: var(--tc-primary) $i;
   }
   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
-    background: $prime-complemt-2 $i;
+    background: var(--tc-complemt-2) $i;
   }
 
   //============================
@@ -579,9 +579,9 @@ body.tc-prime {
 //-------------------------------------
 
 .loader-icon {
-  $clr: $prime-gray-50;
+  $clr: var(--tc-gray-50);
   $sz: 3px;
-  border-top: $sz solid $prime-primary $i;
+  border-top: $sz solid var(--tc-primary) $i;
   border-right: $sz solid $clr $i;
   border-bottom: $sz solid $clr $i;
   border-left: $sz solid $clr $i;
@@ -595,7 +595,7 @@ body.tc-prime {
 
     h1,
     h2 {
-      color: $prime-white $i;
+      color: var(--white) $i;
     }
   }
 
@@ -619,9 +619,9 @@ body.tc-prime {
   .footer {
 
     &.fixed {
-      background: $prime-black $i;
-      border-top-color: rgba($tc-black, .4);
-      color: rgba($tc-white, .4);
+      background: var(--tc-black) $i;
+      border-top-color: rgba( var(--tc-black), .4);
+      color: rgba(var(--white), .4);
       margin-left: 0;
       right: inherit;
       text-align: center;
@@ -651,8 +651,8 @@ body.tc-prime {
     thead {
 
       th {
-        background-color: $prime-black $i;
-        color: $tc-white $i;
+        background-color: var(--black) $i;
+        color: var(--white) $i;
       }
     }
 
@@ -662,7 +662,7 @@ body.tc-prime {
   }
 
   tbody tr:nth-child(odd) {
-    background: $prime-gray-10 $i;
+    background: var(--tc-gray-10) $i;
   }
 
 
@@ -675,8 +675,8 @@ body.tc-prime {
   .secondary,
   .button-card
   {
-    background: $prime-gray-10 $i;
-    color: $prime-black $i;
+    background: var(--tc-gray-10) $i;
+    color: var(--black) $i;
     display: inline-flex $i;
     align-items: center $i;
     width: initial $i;
@@ -684,8 +684,8 @@ body.tc-prime {
     &.active,
     &.opened,
     &:hover {
-      background: $prime-primary $i;
-      color: $prime-white $i;
+      background: var(--tc-primary) $i;
+      color: var(--white) $i;
     }
 
     i {
@@ -702,17 +702,17 @@ body.tc-prime {
     display: inline-flex $i;
     align-items: center $i;
     gap: 5px $i;
-    background: $prime-primary $i;
-    color: $prime-white $i;
+    background: var(--tc-primary) $i;
+    color: var(--white) $i;
     width: initial $i;
 
     &.active,
     &.opened,
     &:hover {
-      background: $prime-complemt-2 $i;
+      background: var(--tc-complemt-2) $i;
 
       .fa-save {
-        color: $prime-white $i;
+        color: var(--white) $i;
       }
     }
   }
@@ -723,9 +723,9 @@ body.tc-prime {
     &:hover,
     &:focus
     {
-      background-color: $prime-primary $i;
-      border-color: $prime-primary $i;
-      color: $prime-white $i;
+      background-color: var(--tc-primary) $i;
+      border-color: var(--tc-primary) $i;
+      color: var(--white) $i;
     }
   }
 
@@ -737,15 +737,15 @@ body.tc-prime {
   }
 
   .btn-white {
-    background: $prime-white $i;
-    color: $prime-primary $i;
+    background: var(--white) $i;
+    color: var(--tc-primary) $i;
 
     &:hover {
-      border-color: $prime-primary $i;
-      color: $prime-white $i;
+      border-color: var(--tc-primary) $i;
+      color: var(--white) $i;
 
       i {
-        color: $prime-primary $i;
+        color: var(--tc-primary) $i;
       }
     }
   }
@@ -753,13 +753,13 @@ body.tc-prime {
   .input-group-append .btn {
     border-radius: 0 5px 5px 0 $i;
     background: none $i;
-    border-color: $prime-gray-100 $i;
+    border-color: var(--tc-gray-100) $i;
   }
 
   .btn-danger {
-    color: $prime-white $i;
-    background-color:$prime-red $i;
-    border-color: $prime-red $i;
+    color: var(--white) $i;
+    background-color: var(--red) $i;
+    border-color:  var(--red) $i;
   }
 
   .btn-xs {
@@ -774,7 +774,7 @@ body.tc-prime {
 
 
   .btn-white:focus {
-    border: 1px solid $prime-primary $i;
+    border: 1px solid var(--tc-primary) $i;
   }
 
 
@@ -786,14 +786,14 @@ body.tc-prime {
   .btn-success:hover,
   .btn-success:focus,
   .btn-success.focus {
-    border-color: $prime-primary $i;
+    border-color: var(--tc-primary) $i;
   }
   //==========================================================
   // Forms
   //==========================================================
 
   .box-input-line-options {
-    border: 1px solid $prime-gray-100 $i;
+    border: 1px solid var(--tc-gray-100) $i;
     padding: 10px;
 
     label {
@@ -809,17 +809,17 @@ body.tc-prime {
 
   input[type=checkbox]:after,
   input[type=radio]:after {
-    border: 2px solid $tc-gray-600;
+    border: 2px solid var(--tc-gray-600);
   }
 
   input[type=radio]:checked:before,
   input[type=checkbox]:checked:after {
-    background: $tc-gray-600;
+    background: var(--tc-gray-600);
   }
 
   .form-control,
   .single-line {
-    border: 1px solid $prime-gray-100;
+    border: 1px solid var(--tc-gray-100);
     border-radius: 5px;
   }
 
@@ -833,7 +833,7 @@ body.tc-prime {
       font-size: 18px $i;
       padding: 0 10px $i;
       border: 1px solid $i;
-      border-color: $prime-gray-100 $i;
+      border-color: var(--tc-gray-100) $i;
     }
   }
 
@@ -853,12 +853,12 @@ body.tc-prime {
 
   .switch.checked {
     @include prime-bg;
-    border-color: $prime-primary $i;
+    border-color: var(--tc-primary) $i;
   }
 
 
   .tc-form-control:focus-visible {
-    outline: 1px solid $prime-primary $i;
+    outline: 1px solid var(--tc-primary) $i;
     // border-radius: 2px $i;
   }
 
@@ -867,7 +867,7 @@ body.tc-prime {
 
     .form-control:not(:last-child),
     .custom-select:not(:last-child) {
-      border-right-color: $prime-gray-100 $i;
+      border-right-color: var(--tc-gray-100) $i;
     }
   }
 
@@ -883,11 +883,11 @@ body.tc-prime {
   }
 
   .form-input:focus {
-    border: 1px solid $prime-primary $i;
+    border: 1px solid var(--tc-primary) $i;
   }
 
   .form-input:focus-visible {
-    outline: 1px solid $prime-primary $i;
+    outline: 1px solid var(--tc-primary) $i;
   }
 
   //==========================================================
@@ -956,7 +956,7 @@ body.tc-prime {
 
     p {
       display:block;
-      color: $tc-white;
+      color: var(--white);
       width: 150px $i;
     }
   }
@@ -969,11 +969,11 @@ body.tc-prime {
   .tc-prime-icon.fa-user {
     display: block $i;
     font-size: 18px;
-    color: $tc-white;
+    color: var(--white);
   }
 
   .profile-options {
-    color: $tc-white;
+    color: var(--white);
     position: absolute $i;
     right: -22px;
     top: 2px;
@@ -1026,8 +1026,7 @@ body.tc-prime {
   .nav-header {
 
     .text-muted {
-      // color: $tc-gray-500 $i;
-      color: $prime-gray-100 $i;
+      color: var(--tc-gray-100) $i;
     }
   }
 
@@ -1070,7 +1069,7 @@ body.tc-prime {
 
     > li > a,
     .item-link i {
-      color: $prime-black $i;
+      color: var(--black) $i;
 
       &:hover,
       :focus {
@@ -1112,7 +1111,7 @@ body.tc-prime {
         display: flex;
         align-items: center;
         gap: 10px;
-        color: $tc-white;
+        color: var(--white);
         border-radius: 35px;
         margin: 0 10px;
         padding: 7px;
@@ -1141,7 +1140,7 @@ body.tc-prime {
           &:hover {
 
             a {
-              color: lighten($prime-primary, 20%);
+              color: var(--tc-primary-lighten);
             }
           }
 
@@ -1161,7 +1160,7 @@ body.tc-prime {
             margin-top: 5px;
 
             a {
-              color: $prime-white;
+              color: var(--white);
               padding: 0 15px 0 30px;
               margin: 0;
             }
@@ -1170,7 +1169,7 @@ body.tc-prime {
             &:hover {
 
               a {
-                color: lighten($prime-primary, 20%);
+                color: var(--tc-primary-lighten);
               }
             }
           }
@@ -1268,15 +1267,15 @@ body.tc-prime {
 
 .navbar-fixed-top,
 .navbar-static-top {
-    background: $prime-white;
+    background: var(--white);
   }
 
   .tcloud-name {
-    color: $tc-black;
+    color: var(--tc-black);
     font-weight: bold;
 
     span {
-      color: $prime-primary;
+      color: var(--tc-primary);
       text-transform: uppercase;
       margin-left: 5px;
     }
@@ -1290,7 +1289,7 @@ body.tc-prime {
 
     .dropdown {
       background: none;
-      border: 1px solid $prime-primary;
+      border: 1px solid var(--tc-primary);
       border-radius: 5px;
       padding: 5px 10px;
 
@@ -1300,7 +1299,7 @@ body.tc-prime {
 
       .fa-angle-down {
         background: none $i;
-        color: $prime-primary;
+        color: var(--tc-primary);
       }
     }
   }
@@ -1320,7 +1319,7 @@ body.tc-prime {
       }
 
       a {
-        color: $prime-primary;
+        color: var(--tc-primary);
       }
 
     }
@@ -1331,7 +1330,7 @@ body.tc-prime {
     &.navbar-top-links {
       > li > a {
         background: none $i;
-        color: $prime-black $i;
+        color: var(--black) $i;
         padding: 10px 5px $i;
 
         &:hover {
@@ -1420,14 +1419,14 @@ body.tc-prime {
   // Tab Menu
   //====================================
   .tc-menu {
-    background: $prime-gray-10 $i;
+    background: var(--tc-gray-10) $i;
     border-radius: 7px $i;
   }
 
   .tab-title {
 
     &:hover {
-      background: $prime-complemt-2 $i;
+      background: var(--tc-complemt-2) $i;
     }
 
     &.tab-title-active {
@@ -1503,28 +1502,28 @@ body.tc-prime {
 
     .circle {
       border: none $i;
-      background-color: $prime-gray-50 $i;
+      background-color: var(--tc-gray-50) $i;
       position: relative;
       z-index: 1;
 
       &.icon-step-active {
         border: none $i;
-        background-color: $prime-primary $i;
+        background-color: var(--tc-primary) $i;
 
         .area-index {
           font-size: 20px $i;
-          color: $prime-white $i;
+          color: var(--white) $i;
         }
 
       }
     }
 
     .area-index {
-      color: $prime-gray-100 $i;
+      color: var(--tc-gray-100) $i;
     }
 
     .step-line {
-      background-color: $prime-gray-50 $i;
+      background-color: var(--tc-gray-50) $i;
     }
   }
 
@@ -1576,13 +1575,13 @@ body.tc-prime {
 
   .tc-card-engprime {
     @include prime-mkt-gradient;
-    color: $tc-white;
+    color: var(--white);
     padding: 20px;
     border-radius: 10px;
     flex: 1;
 
     a {
-      color: $tc-white;
+      color: var(--white);
     }
   }
 
@@ -1619,7 +1618,7 @@ body.tc-prime {
 
     i {
       font-size: 20px;
-      color: $prime-gray-100;
+      color: var(--tc-gray-100);
     }
   }
 
@@ -1629,7 +1628,7 @@ body.tc-prime {
     justify-content: flex-end;
     gap: 20px;
 
-    background: $prime-gray-10;
+    background: var(--tc-gray-50);
     padding: 8px 10px;
     border-radius: 6px;
 
@@ -1639,7 +1638,7 @@ body.tc-prime {
     top: 18px;
 
     .product-card-title-wrap {
-      color: $prime-black $i;
+      color: var(--black) $i;
       background: transparent $i;
       margin: 0$i;
       padding: 0$i;
@@ -1669,7 +1668,7 @@ body.tc-prime {
     h2 {
       display: block $i;
       font-size: 12px $i;
-      color: $prime-black;
+      color: var(--black);
       text-transform: uppercase;
       margin: 0 $i;
       font-weight: bold $i;
@@ -1679,7 +1678,7 @@ body.tc-prime {
       content: 'Linha';
       text-transform: uppercase;
       font-weight: bold;
-      color: $prime-black;
+      color: var(--black);
     }
   }
 
@@ -1689,8 +1688,8 @@ body.tc-prime {
     justify-content: space-between $i;
     min-height: 176px $i;
 
-    border:1px solid $prime-gray-100;
-    color: $prime-black $i;
+    border:1px solid var(--tc-gray-100);
+    color: var(--black) $i;
     border-radius: 5px $i;
     box-shadow: none $i;
 
@@ -1704,12 +1703,12 @@ body.tc-prime {
       background-color: transparent$i;
       @include prime-color;
       text-transform: uppercase;
-      border-bottom: 1px solid $prime-gray-50;
+      border-bottom: 1px solid var(--tc-gray-50);
     }
 
     .card-topology__footer {
       background-color: transparent$i;
-      border-top: 1px solid $prime-gray-50;
+      border-top: 1px solid var(--tc-gray-50);
     }
   }
 
@@ -1738,8 +1737,8 @@ body.tc-prime {
   }
 
   .card-products-tit {
-    color: $prime-black$i;
-    font-weight: bold$i;
+    color: var(--black) $i;
+    font-weight: bold $i;
   }
 
   .card-products-wrap {
@@ -1811,15 +1810,15 @@ body.tc-prime {
 
     /* Track */
     ::-webkit-scrollbar-track {
-      background: $prime-gray-50 $i;
+      background: var(--tc-gray-50) $i;
     }
     /* Handle */
     ::-webkit-scrollbar-thumb {
-      background: $prime-primary $i;
+      background: var(--tc-primary) $i;
     }
     /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
-      background: $prime-complemt-2 $i;
+      background: var(--tc-complemt-2) $i;
     }
   }
 
@@ -1867,7 +1866,7 @@ body.tc-prime {
   .modal-eng-prime-header {
     @include flex-center;
     gap: 20px;
-    @include bdr-bottom(20px, $prime-gray-50);
+    @include bdr-bottom(20px, var(--gray-50));
 
     .modal-eng-prime-text {
       margin-left: 40px;
@@ -1899,7 +1898,7 @@ body.tc-prime {
     width: 70px;
 
     p {
-      color: $prime-white;
+      color: var(--white);
       font-size: 40px;
     }
   }
@@ -1922,7 +1921,7 @@ body.tc-prime {
       gap: 20px;
 
       padding: 10px;
-      border: 2px solid $prime-gray-50;
+      border: 2px solid var(--tc-gray-50);
       border-radius: 10px;
       width: 270px;
     }
@@ -1930,7 +1929,7 @@ body.tc-prime {
 
   .modal-eng-prime-thumb {
     @include flex-center;
-    border: 2px solid $prime-gray-100;
+    border: 2px solid var(--tc-gray-100);
     border-radius: 50%;
     height: 50px;
     width: 50px;
@@ -1961,7 +1960,7 @@ body.tc-prime {
     &:hover {
 
       h3 {
-        color: $prime-white $i;
+        color: var(--white) $i;
       }
     }
   }
@@ -2014,18 +2013,18 @@ body.tc-prime {
     .col-lg-12.text-right {
 
       .btn.btn-link {
-        color: $prime-white $i;
+        color: var(--white) $i;
       }
     }
 
 
     .btn.btn-link.m-r {
-      color: $prime-primary $i;
+      color: var(--tc-primary) $i;
     }
 
     .changes-controllers {
       .btn.btn-link.m-r {
-        color: $prime-primary $i;
+        color: var(--tc-primary) $i;
       }
     }
   }
@@ -2055,31 +2054,31 @@ body.tc-prime {
     .label-warning,
     .badge-warning {
       background-color: transparent;
-      border: 3px solid $prime-second $i;
-      color: $prime-black $i;
+      border: 3px solid var(--second) $i;
+      color: var(--black) $i;
       border-radius: 5px $i;
 
       .fa-exclamation-triangle {
         margin-right: 5px;
-        color: $prime-second $i;
+        color: var(--second) $i;
       }
     }
 
     .config-index {
-      background-color: $prime-primary $i;
+      background-color: var(--tc-primary) $i;
     }
   }
 
   .whitelist-wrap {
 
     .config-index {
-      background-color: $prime-primary $i;
+      background-color: var(--tc-primary) $i;
     }
   }
 
   .whitelist-wrap,
     .tc-security-app-modify-restrictions .rowBox {
-    border: 3px solid $prime-gray-50 $i;
+    border: 3px solid var(--tc-gray-50) $i;
 
   }
 
@@ -2102,7 +2101,7 @@ body.tc-prime {
     }
 
     .status {
-      color: $prime-black;
+      color: var(--black);
     }
   }
 
@@ -2146,7 +2145,7 @@ body.tc-prime {
 
     .ibox-content.selected > :after,
     .ibox-content:hover > :after {
-      border-top: 13px solid $prime-primary$i;
+      border-top: 13px solid var(--tc-primary)$i;
     }
 
     .ibox-content:hover,
@@ -2181,7 +2180,7 @@ body.tc-prime {
     display: flex;
     gap: 20px;
     align-items: stretch;
-    border-bottom: 1px solid $prime-gray-50;
+    border-bottom: 1px solid var(--tc-gray-50);
     height: 53px;
   }
 
@@ -2197,7 +2196,7 @@ body.tc-prime {
 
     i {
       margin-left: 10px;
-      color: $prime-gray-100;
+      color: var(--tc-gray-100);
     }
 
     .header-title {
@@ -2210,7 +2209,7 @@ body.tc-prime {
     display: flex;
     gap: 20px;
     align-items: center;
-    border-left: 1px solid $prime-gray-50;
+    border-left: 1px solid var(--tc-gray-50);
     padding-left: 20px;
 
     .tplg-legnth {
@@ -2259,19 +2258,19 @@ body.tc-prime {
   .env-card {
 
     .ibox-content {
-      border: 3px solid $prime-gray-100 $i;
+      border: 3px solid var(--tc-gray-100) $i;
       border-radius: 5px;
 
       .env-card-header {
-        border-bottom: 2px solid $prime-gray-100;
+        border-bottom: 2px solid var(--tc-gray-100);
       }
 
       &.selected,
       &:hover {
-        border-color: $prime-primary $i;
+        border-color: var(--tc-primary) $i;
 
         .env-card-header {
-          border-bottom: 2px solid $prime-primary $i;
+          border-bottom: 2px solid var(--tc-primary) $i;
 
           .status,
           .fa-cog,
@@ -2286,15 +2285,15 @@ body.tc-prime {
     &.error {
 
       .env-card-header {
-        border-bottom: 2px solid $prime-red $i;
+        border-bottom: 2px solid  var(--red) $i;
 
         .status,
         .icon-date-create {
-          color: $prime-red $i;
+          color:  var(--red) $i;
         }
 
         .status{
-          color: $prime-red $i;
+          color:  var(--red) $i;
 
           &.error {
             background-color: transparent $i;
@@ -2303,23 +2302,23 @@ body.tc-prime {
       }
 
       .ibox-content {
-        border-color: $prime-red $i;
+        border-color:  var(--red) $i;
 
         &.selected,
         &:hover
         {
 
           .env-card-header {
-            border-bottom: 2px solid $prime-red $i;
+            border-bottom: 2px solid  var(--red) $i;
 
             .fa-cog,
             .status,
             .icon-date-create {
-              color: $prime-red $i;
+              color:  var(--red) $i;
             }
 
             i {
-              color: $prime-red $i;
+              color:  var(--red) $i;
             }
 
           }
@@ -2327,7 +2326,7 @@ body.tc-prime {
           .env-card-content {
 
             &:after {
-              border-top-color: $prime-red $i;
+              border-top-color:  var(--red) $i;
             }
           }
         }
@@ -2337,15 +2336,15 @@ body.tc-prime {
     &.migrating {
 
       .env-card-header {
-        border-bottom: 2px solid $prime-second $i;
+        border-bottom: 2px solid var(--second) $i;
 
         .status,
         .icon-date-create {
-          color: $prime-second $i;
+          color: var(--second) $i;
         }
 
         .status{
-          color: $prime-second $i;
+          color: var(--second) $i;
 
           &.error {
             background-color: transparent $i;
@@ -2354,23 +2353,23 @@ body.tc-prime {
       }
 
       .ibox-content {
-        border-color: $prime-second $i;
+        border-color: var(--second) $i;
 
         &.selected,
         &:hover
         {
 
           .env-card-header {
-            border-bottom: 2px solid $prime-second $i;
+            border-bottom: 2px solid var(--second) $i;
 
             .fa-cog,
             .status,
             .icon-date-create {
-              color: $prime-second $i;
+              color: var(--second) $i;
             }
 
             i {
-              color: $prime-second $i;
+              color: var(--second) $i;
             }
 
           }
@@ -2378,7 +2377,7 @@ body.tc-prime {
           .env-card-content {
 
             &:after {
-              border-top-color: $prime-second $i;
+              border-top-color: var(--second) $i;
             }
           }
         }
@@ -2394,7 +2393,7 @@ body.tc-prime {
 
       .label-success,
       .badge-success {
-        color: $prime-black $i;
+        color: var(--black) $i;
         font-weight: normal;
       }
     }
@@ -2402,14 +2401,14 @@ body.tc-prime {
 
   .internet-access-box,
   .legendas {
-    background: $prime-gray-10 $i;
+    background: var(--tc-gray-10) $i;
   }
 
   .vpn-list-box {
     // @include test;
 
     .vpn-box  {
-      background-color: $prime-gray-10 $i;
+      background-color: var(--tc-gray-10) $i;
     }
   }
 
@@ -2421,9 +2420,9 @@ body.tc-prime {
 
     .boxFastAccess {
       border: none $i;
-      border-bottom: 1px solid $prime-gray-50 $i;
+      border-bottom: 1px solid var(--tc-gray-50) $i;
       border-radius: 0 $i;
-      border-top: 1px solid $prime-gray-50 $i;
+      border-top: 1px solid var(--tc-gray-50) $i;
 
       margin: 0 0 20px $i;
 
@@ -2449,7 +2448,7 @@ body.tc-prime {
 
       &:hover {
         @include prime-bg;
-        color: $prime-white $i;
+        color: var(--white) $i;
       }
 
     }
@@ -2461,12 +2460,12 @@ body.tc-prime {
     &:hover .pin-action:hover + .text-success,
     &:hover .trash-action:hover + .text-success {
       @include prime-bg;
-      color: $prime-white $i;
+      color: var(--white) $i;
     }
 
     .text-success,
     .fa-save {
-      color: $prime-black $i;
+      color: var(--black) $i;
     }
   }
 
@@ -2477,7 +2476,7 @@ body.tc-prime {
   }
 
   .pin-action {
-    background-color: $prime-complemt-2 $i;
+    background-color: var(--tc-complemt-2) $i;
   }
 
 
@@ -2529,7 +2528,7 @@ body.tc-prime {
  .group-smart-form {
 
     button i {
-      color: $prime-primary $i;
+      color: var(--tc-primary) $i;
     }
 
   }
@@ -2576,7 +2575,7 @@ body.tc-prime {
     .sessions-table {
 
       .sessions-header {
-        background-color: $prime-black $i;
+        background-color: var(--black) $i;
       }
     }
   }
@@ -2597,11 +2596,11 @@ body.tc-prime {
   .rules-helper-wrapper {
 
     .rules {
-      border: 3px solid $prime-gray-100 $i;
+      border: 3px solid var(--tc-gray-100) $i;
       border-radius: 7px $i;
 
       .illustration {
-        border: 3px solid $prime-gray-100 $i;
+        border: 3px solid var(--tc-gray-100) $i;
         border-radius: 7px $i;
 
       }
@@ -2653,17 +2652,17 @@ body.tc-prime {
 
     .rules-form,
     .form-select {
-      background: $prime-gray-10 $i;
+      background: var(--tc-gray-10) $i;
     }
   }
 
   tc-security-app-modify-restrictions {
 
     .rules-form {
-      background: $prime-gray-10 $i;
+      background: var(--tc-gray-10) $i;
 
       i {
-        color: $prime-gray-100 $i;
+        color: var(--tc-gray-100) $i;
       }
     }
 
@@ -2683,7 +2682,7 @@ body.tc-prime {
 
   .topnav a:hover,
   .topnav a.active {
-    color: $prime-white $i;
+    color: var(--white) $i;
     @include prime-bg;
   }
 
@@ -2693,7 +2692,7 @@ body.tc-prime {
   //==========================================================
 
   .card-name  {
-    color: $prime-white $i;
+    color: var(--white) $i;
   }
 
   //====================================
@@ -2800,7 +2799,7 @@ body.tc-prime {
     .icon-wrap {
       @include flex-center;
       // font-family: 'Font Awesome 6 Free';
-      // color: $prime-gray-100;
+      // color: var(--tc-gray-100);
       // height: 50px;
       // width: 50px;
 
@@ -2818,7 +2817,7 @@ body.tc-prime {
   .contrato-card {
     min-height: 410px $i;
     box-shadow: none $i;
-    border: 2px solid $prime-gray-50;
+    border: 2px solid var(--tc-gray-50);
   }
 
 
@@ -2846,7 +2845,7 @@ body.tc-prime {
   .billing-content .billing-detail,
   .total-wrap
   {
-    border-color: $prime-gray-100 $i;
+    border-color: var(--tc-gray-100) $i;
   }
 
   .billing-content {
@@ -2875,27 +2874,27 @@ body.tc-prime {
   .card-offer {
 
     .wrap {
-      background: $prime-gray-50;
+      background: var(--tc-gray-50);
     }
   }
 
   .card-offer,
   .offer
   {
-    border-color: $prime-primary $i;
+    border-color: var(--tc-primary) $i;
   }
 
   .total-wrap,
   .simulation-box
 
   {
-    background: $prime-gray-50 $i;
+    background: var(--tc-gray-50) $i;
   }
 
   .card-offer-title,
   .offer .offer-tit
   {
-    background: $prime-primary $i;
+    background: var(--tc-primary) $i;
   }
 
   .offer-wrapper-icon {
@@ -2914,7 +2913,7 @@ body.tc-prime {
   }
 
   .simulation-box {
-    border-top: 1px solid $prime-gray-100;
+    border-top: 1px solid var(--tc-gray-100);
   }
 
   .offer-head-img {
@@ -2967,7 +2966,7 @@ body.tc-prime {
       @include prime-gray-50;
 
       a {
-        color: $prime-black $i;
+        color: var(--black) $i;
       }
     }
 
@@ -3001,7 +3000,7 @@ body.tc-prime {
     .container-table {
 
       .container-columns {
-        background-color: $prime-black $i;
+        background-color: var(--black) $i;
       }
     }
 
@@ -3012,7 +3011,7 @@ body.tc-prime {
       }
 
       .fas {
-        color: $prime-white $i;
+        color: var(--white) $i;
       }
 
     }
@@ -3033,14 +3032,14 @@ body.tc-prime {
 
           .container-item {
             border: none $i;
-            background-color: $prime-gray-50 $i;
-            color: $prime-gray-100 $i;
+            background-color: var(--tc-gray-50) $i;
+            color: var(--tc-gray-100) $i;
 
             &.active,
             &.completed {
               font-size: 20px $i;
-              color: $prime-white $i;
-              background-color: $prime-primary $i;
+              color: var(--white) $i;
+              background-color: var(--tc-primary) $i;
             }
 
           }
@@ -3063,7 +3062,7 @@ body.tc-prime {
     }
 
     .primary:disabled {
-      background-color: rgba($prime-primary, 0.5) $i;
+      background-color: rgba(var(--tc-primary), 0.5) $i;
     }
 
     .container-network {
@@ -3079,8 +3078,8 @@ body.tc-prime {
 
         &:hover,
         &.active {
-          background-color: $prime-gray-50 $i;
-          color:$prime-black $i;
+          background-color: var(--tc-gray-50) $i;
+          color:var(--black) $i;
           border-radius: 0 $i;
         }
       }
@@ -3096,7 +3095,7 @@ body.tc-prime {
         }
 
         .icon-default.remove {
-          color:$prime-red $i;
+          color: var(--red) $i;
         }
       }
     }
@@ -3147,11 +3146,11 @@ body.tc-prime {
     }
 
     .fa-icon-info {
-      color: $prime-second $i;
+      color: var(--second) $i;
     }
 
     .container-icon {
-      color: $prime-primary $i;
+      color: var(--tc-primary) $i;
       background-color: transparent $i;
     }
 
@@ -3167,7 +3166,7 @@ body.tc-prime {
     .container-content .checkout-content .resume-header .environment-data .content,
     .container-content .checkout-content .resume-header .network-data .content {
       background-color: transparent $i;
-      border: 2px solid $prime-gray-50 $i;
+      border: 2px solid var(--tc-gray-50) $i;
     }
 
 
@@ -3178,8 +3177,8 @@ body.tc-prime {
 
   .container-input.success input {
     background-color: transparent $i;
-    border-color: $prime-primary $i;
-    color: $prime-primary2 $i;
+    border-color: var(--tc-primary) $i;
+    color: var(--tc-primary)2 $i;
     font-size: 13px $i;
   }
 
@@ -3187,7 +3186,7 @@ body.tc-prime {
 
     .container-header,
     .container-header.warning {
-      background-color: $prime-primary $i;
+      background-color: var(--tc-primary) $i;
     }
   }
 
@@ -3200,14 +3199,14 @@ body.tc-prime {
   .box-vouncher {
 
     .btn-link {
-      color: $prime-black $i;
+      color: var(--black) $i;
       border: 2px solid #EEEEEE;
       border-radius: 5px;
       padding: 10px;
       font-size: 14px;
 
       span {
-        color: $prime-primary $i;
+        color: var(--tc-primary) $i;
       }
     }
 
@@ -3253,7 +3252,7 @@ body.tc-prime {
 
     .welcome-page-box {
       background-color: transparent $i;
-      border: 2px solid $prime-gray-50;
+      border: 2px solid var(--tc-gray-50);
       border-radius: 5px $i;
     }
 
@@ -3265,7 +3264,7 @@ body.tc-prime {
       background-color: transparent $i;
 
       i {
-        color: $prime-primary $i;
+        color: var(--tc-primary) $i;
       }
     }
 
@@ -3283,7 +3282,7 @@ body.tc-prime {
 
     .select-bucket-page-box {
       background-color: transparent $i;
-      border: 2px solid $prime-gray-50;
+      border: 2px solid var(--tc-gray-50);
       border-radius: 5px $i;
     }
 
@@ -3314,7 +3313,7 @@ body.tc-prime {
   .box-card-import-virtual-machine {
 
     .container {
-      border: 1px solid $prime-gray-100 $i;
+      border: 1px solid var(--tc-gray-100) $i;
     }
 
     .title-image {
@@ -3331,15 +3330,15 @@ body.tc-prime {
 
     .title-image p {
       height: initial $i;
-      border-bottom: 1px solid $prime-gray-100 $i;
+      border-bottom: 1px solid var(--tc-gray-100) $i;
       padding-bottom: 5px $i;
     }
   }
 
   .msg-warning-wrap {
-    color: $prime-black $i;
+    color: var(--black) $i;
     background-color: transparent $i;
-    border: 2px solid $prime-second $i;
+    border: 2px solid var(--second) $i;
 
 
     .msg-warning-paragraph {
@@ -3356,7 +3355,7 @@ body.tc-prime {
   }
 
   .icon-fm {
-    color: $prime-black $i;
+    color: var(--black) $i;
   }
 
   //==========================================================
@@ -3366,7 +3365,7 @@ body.tc-prime {
   &.iaas-page {
 
     .background-page-global {
-      background-color: lighten($prime-primary, 34.8%) $i;
+      background-color: var(--tc-primary-lighten) $i;
     }
 
     .box-relative {
@@ -3394,7 +3393,7 @@ body.tc-prime {
   }
 
   .monitor-wrap.label-success {
-    border-color: $prime-primary $i;
+    border-color: var(--tc-primary) $i;
   }
 
   //==========================================================
@@ -3404,12 +3403,12 @@ body.tc-prime {
   .container-card-topology {
     border-radius: 5px $i;
     // @include prime-bdr-100;
-    border: 2px solid $prime-gray-100 $i;
+    border: 2px solid var(--tc-gray-100) $i;
 
     .container-header-card {
       background: none $i;
-      color: $prime-black $i;
-      border-bottom: 2px solid $prime-gray-100 $i;
+      color: var(--black) $i;
+      border-bottom: 2px solid var(--tc-gray-100) $i;
       border-radius: 5px 5px 0 0 $i;
     }
 
@@ -3418,14 +3417,14 @@ body.tc-prime {
       @include prime-bdr;
 
       i {
-        color: $prime-primary $i;
+        color: var(--tc-primary) $i;
       }
 
       .container-header-card {
-        border-bottom: 2px solid $prime-primary $i;
+        border-bottom: 2px solid var(--tc-primary) $i;
 
         span {
-          color: $prime-primary $i;
+          color: var(--tc-primary) $i;
         }
       }
     }
@@ -3433,21 +3432,21 @@ body.tc-prime {
     &.done {
 
       &:after {
-        border-top-color: $prime-primary $i;
+        border-top-color: var(--tc-primary) $i;
         bottom: -15px $i;
       }
     }
 
     &.error {
-      border-color: $prime-red $i;
+      border-color:  var(--red) $i;
 
       .container-header-card {
         background-color: transparent $i;
-        border-bottom: 2px solid $prime-red $i;
+        border-bottom: 2px solid  var(--red) $i;
 
         p,
         i {
-          color: $prime-red $i;
+          color:  var(--red) $i;
         }
 
       }
@@ -3471,17 +3470,17 @@ body.tc-prime {
       .card-details-item {
         border-radius: 5px $i;
         font-size: 12px $i;
-        border: 2px solid $prime-gray-50 $i;
+        border: 2px solid var(--tc-gray-50) $i;
 
         .container-header-card {
-          color: $prime-black $i;
+          color: var(--black) $i;
           background: none $i;
-          border-bottom: 2px solid $prime-gray-50;
+          border-bottom: 2px solid var(--tc-gray-50);
           border-radius: 5px 5px 0 0 $i;
         }
 
         &:hover {
-          border-color: $prime-primary $i;
+          border-color: var(--tc-primary) $i;
         }
 
         .container-infos {
@@ -3490,7 +3489,7 @@ body.tc-prime {
             flex-flow: column;
             gap: 5px;
             background: none $i;
-            border: 1px solid $prime-gray-50 $i;
+            border: 1px solid var(--tc-gray-50) $i;
             margin-bottom: 5px;
 
             &:last-child {
@@ -3503,14 +3502,14 @@ body.tc-prime {
     }
 
     .container-actions {
-      border: 2px solid $prime-gray-50 $i;
+      border: 2px solid var(--tc-gray-50) $i;
 
       .action-item {
-        background: $prime-gray-50 $i;
+        background: var(--tc-gray-50) $i;
 
         &:hover {
-          background: $prime-primary $i;
-          color: $prime-white;
+          background: var(--tc-primary) $i;
+          color: var(--white);
         }
 
       }
@@ -3518,7 +3517,7 @@ body.tc-prime {
 
     .disk-box {
       background: none $i;
-      border: 2px solid $prime-gray-50 $i;
+      border: 2px solid var(--tc-gray-50) $i;
       border-radius: 5px $i;
     }
   }
@@ -3539,7 +3538,7 @@ body.tc-prime {
     .access-template-text {
 
       a {
-        color: $prime-complemt $i;
+        color: var(--complemt) $i;
       }
     }
   }
@@ -3567,7 +3566,7 @@ body.tc-prime {
 
   .container-item-vm:hover,
   .container-item-vm.active {
-    background-color: $prime-gray-50 $i;
+    background-color: var(--tc-gray-50) $i;
   }
 
   .container-body .container-header .title {
@@ -3591,16 +3590,16 @@ body.tc-prime {
   //==========================================================
 
   .container-page .container-table .container-cols {
-    background-color: $prime-black $i;
+    background-color: var(--black) $i;
   }
 
   .container-page .container-card-details .card-details-item {
-    border: 2px solid $prime-gray-50 $i;
+    border: 2px solid var(--tc-gray-50) $i;
 
     .container-header-card {
       background: none $i;
-      color: $prime-black $i;
-      border-bottom: 1px solid $prime-gray-100 $i;
+      color: var(--black) $i;
+      border-bottom: 1px solid var(--tc-gray-100) $i;
     }
   }
 
@@ -3630,10 +3629,10 @@ body.tc-prime {
   .help-content-card {
     background: none $i;
     border-radius: 5px $i;
-    box-shadow: 0 0 0 2px $prime-gray-100;
+    box-shadow: 0 0 0 2px var(--tc-gray-100);
 
     &:hover {
-      box-shadow: 0 0 0 2px $prime-primary $i;
+      box-shadow: 0 0 0 2px var(--tc-primary) $i;
     }
 
     p {
@@ -3658,7 +3657,7 @@ body.tc-prime {
   }
 
   .grid .grid-header .grid-item {
-    background: $prime-black $i;
+    background: var(--black) $i;
   }
 
   .help-iam {
@@ -3684,7 +3683,7 @@ body.tc-prime {
   }
 
   .tc-accordion {
-    border: 2px solid $tc-gray-200 $i;
+    border: 2px solid var(--tc-gray-200) $i;
     border-radius: 5px $i;
 
     .area-filter {
@@ -3742,25 +3741,25 @@ body.tc-prime {
       .grid-content {
 
         .grid-item {
-          background: $prime-gray-10;
+          background: var(--tc-gray-50);
         }
 
         &:nth-child(odd) {
 
           .grid-item {
-            background: $prime-gray-50;
+            background: var(--tc-gray-50);
           }
         }
 
         &.active {
 
           .grid-item {
-            background: $prime-primary $i;
-            color:$prime-white $i;
+            background: var(--tc-primary) $i;
+            color:var(--white) $i;
           }
 
           &:before {
-            background: $prime-primary;
+            background: var(--tc-primary);
           }
         }
       }
@@ -3771,7 +3770,7 @@ body.tc-prime {
   #this-roles {
 
     .box-border-green {
-      border: 2px solid $prime-primary;
+      border: 2px solid var(--tc-primary);
     }
   }
 
@@ -3799,17 +3798,17 @@ body.tc-prime {
     .grid-body {
 
       .grid-for:nth-child(odd) {
-        background: $prime-gray-10 $i;
+        background: var(--tc-gray-10) $i;
       }
     }
 
     .news-icon-wrap {
 
       i {
-        color: $prime-gray-100 $i;
+        color: var(--tc-gray-100) $i;
 
         &.fa-trash-alt:hover {
-          color: $prime-red $i;
+          color:  var(--red) $i;
         }
       }
     }
@@ -3818,7 +3817,7 @@ body.tc-prime {
       font-weight: normal $i;
 
       .item {
-        background: $prime-black $i;
+        background: var(--black) $i;
 
         &:first-child,
         &:last-child {
@@ -3835,7 +3834,7 @@ body.tc-prime {
       }
 
       .fa-exclamation-triangle {
-        color: $prime-second $i;
+        color: var(--second) $i;
       }
     }
   }
@@ -3863,7 +3862,7 @@ body.tc-prime {
 
   .project-list {
     .table-hover tbody tr:hover {
-      background-color: $prime-primary $i;
+      background-color: var(--tc-primary) $i;
     }
   }
 
@@ -3922,7 +3921,7 @@ body.tc-prime {
     }
 
     .table-hover tbody tr:hover .btn-white:hover {
-      background: $prime-white $i;
+      background: var(--white) $i;
     }
 
     .feature-actions {
@@ -3930,7 +3929,7 @@ body.tc-prime {
       .btn-white {
 
         &:hover {
-          color: $prime-primary $i;
+          color: var(--tc-primary) $i;
         }
       }
     }
@@ -3944,7 +3943,7 @@ body.tc-prime {
 
     .ibox-content {
       background-color: transparent $i;
-      border: 2px solid $prime-gray-50 $i;
+      border: 2px solid var(--tc-gray-50) $i;
       border-radius: 5px $i;
       margin-top: 0 $i;
       padding: 10px $i;
@@ -3979,9 +3978,9 @@ body.tc-prime {
 
       &.card-header {
         background-color: transparent $i;
-        color: $prime-black $i;
+        color: var(--black) $i;
         border-radius: 7px 7px 0 0 $i;
-        border: 2px solid $prime-gray-50 $i;
+        border: 2px solid var(--tc-gray-50) $i;
 
         p {
           line-height: 25px;
@@ -4032,13 +4031,13 @@ body.tc-prime {
     margin-bottom: 20px;
 
     .container-item {
-      border: 2px solid $prime-gray-50 $i;
+      border: 2px solid var(--tc-gray-50) $i;
       border-radius: 5px;
       box-shadow: none;
     }
 
     .container-item .container-top-card .container-infos {
-      border: 1px solid $prime-gray-50 $i;
+      border: 1px solid var(--tc-gray-50) $i;
       background-color: transparent $i;
     }
   }
@@ -4111,11 +4110,11 @@ body.tc-prime {
     }
 
     .box-master {
-      background-color: $prime-gray-10 $i;
+      background-color: var(--tc-gray-10) $i;
       border-radius: 7px $i;
 
       &:hover {
-        border: 3px solid $prime-gray-100 $i;
+        border: 3px solid var(--tc-gray-100) $i;
       }
 
     }
@@ -4131,7 +4130,7 @@ body.tc-prime {
     }
 
     th {
-      background-color: $prime-black $i;
+      background-color: var(--black) $i;
     }
   }
 
@@ -4167,7 +4166,7 @@ body.tc-prime {
     }
 
     .trust-text-card {
-      border: 3px solid $prime-gray-100;
+      border: 3px solid var(--tc-gray-100);
       border-radius: 10px;
     }
 
@@ -4188,7 +4187,7 @@ body.tc-prime {
     .trust-center-prime_header {
       margin-bottom: 20px;
       padding-bottom: 20px;
-      border-bottom: 1px solid $prime-gray-50;
+      border-bottom: 1px solid var(--tc-gray-50);
 
       h1 {
         margin-bottom: 10px;
@@ -4318,7 +4317,7 @@ body.tc-prime {
 
       th {
         padding:10px $i;
-        background-color: $prime-black $i;
+        background-color: var(--black) $i;
         font-size: 10px $i;
       }
     }
@@ -4326,7 +4325,7 @@ body.tc-prime {
     .btn-action-icon {
 
       i {
-        color: $prime-primary $i;
+        color: var(--tc-primary) $i;
       }
     }
     .resume .resume-header,
@@ -4371,7 +4370,7 @@ body.tc-prime {
   }
 
   .title-product {
-    background-color: $prime-black $i;
+    background-color: var(--black) $i;
   }
 
 
@@ -4383,8 +4382,8 @@ body.tc-prime {
   .list-maintenance-window {
 
     .card-list-item {
-      background-color: $prime-gray-10 $i;
-      border: 2px solid $prime-gray-100;
+      background-color: var(--tc-gray-10) $i;
+      border: 2px solid var(--tc-gray-100);
       border-radius: 5px;
     }
 
@@ -4422,15 +4421,15 @@ body.tc-prime {
 
       /* Track */
       ::-webkit-scrollbar-track {
-        background: $prime-gray-50 $i;
+        background: var(--tc-gray-50) $i;
       }
       /* Handle */
       ::-webkit-scrollbar-thumb {
-        background: $prime-primary $i;
+        background: var(--tc-primary) $i;
       }
       /* Handle on hover */
       ::-webkit-scrollbar-thumb:hover {
-        background: $prime-complemt-2 $i;
+        background: var(--tc-complemt-2) $i;
       }
     }
 
@@ -4442,7 +4441,7 @@ body.tc-prime {
 
     .box-border,
     .box-border-label {
-      border-color: $prime-gray-100 $i;
+      border-color: var(--tc-gray-100) $i;
     }
 
     .box-border-label {
@@ -4502,8 +4501,8 @@ body.tc-prime {
 
   .token-btn {
     border-radius: 5px $i;
-    background-color: $prime-primary $i;
-    border-color: $prime-primary $i;
+    background-color: var(--tc-primary) $i;
+    border-color: var(--tc-primary) $i;
   }
 
   //==========================================================
@@ -4511,10 +4510,10 @@ body.tc-prime {
   //==========================================================
 
   .insights-card {
-    border-left-color: $prime-primary $i;
+    border-left-color: var(--tc-primary) $i;
 
     &:hover {
-      background: $prime-complemt-2 $i;
+      background: var(--tc-complemt-2) $i;
     }
   }
 
@@ -4530,7 +4529,7 @@ body.tc-prime {
     h2 {
       text-transform: uppercase;
       text-transform: uppercase;
-      border-bottom: 1px solid $prime-gray-100 $i;
+      border-bottom: 1px solid var(--tc-gray-100) $i;
       padding-bottom: 10px;
       margin-bottom: 10px $i;
     }
@@ -4547,7 +4546,7 @@ body.tc-prime {
 
       a {
         background: transparent $i;
-        color: $prime-primary $i;
+        color: var(--tc-primary) $i;
 
         &.active {
           border-bottom: none $i;
@@ -4585,7 +4584,7 @@ body.tc-prime {
   tc-file-manager-menu {
 
     .card-path {
-      border: 2px solid $prime-gray-100 $i;
+      border: 2px solid var(--tc-gray-100) $i;
 
       button {
 
@@ -4598,7 +4597,7 @@ body.tc-prime {
       }
 
       &.area-active {
-        border-color: $prime-primary $i;
+        border-color: var(--tc-primary) $i;
       }
     }