@dev-tcloud/tcloud-ui 0.1.1 → 0.1.2

package/scss/tcloud/custom/colors.scss

@@ -1,67 +1,58 @@
-// =============================================
-// Common Colors
-// =============================================
-
-$black: #000;
-$white: #fff;
-
-$blue: #0897E9;
-$dark: #363636;
-
-$orange: orange;
-
-$warning: orange;
-$danger:  #D93025;
-$success :#1E8E3E;
-$complete :#039BE5;
-
-
-$gray-light: #EEE;
-$blue-500: #0ADBE3;
-$purple: #6B48FF;
-
-$red: red;
-
-$error:#ff5f5f;
-
-// =============================================
-// Colors V1
-// =============================================
-
-
-
-$primary-700: #136e92;
-
-$secondary: #484440;
-
-$gray: #707070;
-$gray-800: #8A817B;
-$gray-400: #D5CCC3;
-$gray-200: #F1F1F1;
-$gray-100: #F8F9FA;
-
-
-
-
-
 :root {
 
-  // theme color
+  body.tc-prime{
+    // theme color
+    --tc-primary: #6B48FF;
+    --tc-primary-lighten: #886dfc;
+    
+    --tc-primary2: #0897E9;
+    // --tc-complemt: #0ADBE3;
+    --tc-complemt-2: #5B35FC;
+
+    /*
+    --primary: #6B48FF;
+    --primary2:  #0897E9;
+    --complemt: #0ADBE3;
+    --complemt-2: #5B35FC;
+    */
+
+    --second:  #FEAC0E;
+    --second2:  #EEEEEE;
+    --white: #fff;
+    --black: #363636;
+    --tc-gray-10: #f9f9f9;
+    --tc-gray-50: #EEEEEE;
+    --tc-gray-100: #C7C7C7;
+    --red: #cb0000;
+    --green: #1E8E3E;
+  }
 
+  // theme color
   --tc-primary: #37b6c4;
-  // var(--tc-primary);
+  --tc-primary-lighten: #5ab8c2;
 
   --tc-primary2: #136e92;
+  --tc-complemt: #0ADBE3;
+  --tc-complemt-2: #136e92;
+  --tc-complemt-3: #136e92;
+  
 
   // commons
-
   --orange: orange;
   --red :#dc0217;
   --azul: #1c84c6;
+  --green: #1E8E3E;
   --green2: #10ba3c;
   --green3: #00965A;
   --dark-green: #037f9c;
-
+  --black: #000;
+  --white: #fff;
+  --blue: #0897E9;
+  --dark: #363636;
+  --warning: orange;
+  --danger:  #D93025;
+  --success :#1E8E3E;
+  --complete :#039BE5;
 
   // grays
   --tc-gray-600: #4e4944;
@@ -72,7 +63,6 @@ $gray-100: #F8F9FA;
   --tc-gray-100: #f1f1f1;
   --tc-gray-50: #f8f9fa;
 
-
   // OLD Theme
   --gray: #4e4944;
   --cinza: #8a817b;

package/scss/tcloud/custom/forms.scss

@@ -24,12 +24,12 @@
   
 
   &:focus {
-    border-color: $primary;
+    border-color: var(--tc-primary);
     box-shadow: none;
   }
 
   &:focus-visible {
-    outline: 1px solid $primary;
+    outline: 1px solid var(--tc-primary);
     border-radius: 3px;
   }
 }

package/scss/tcloud/custom/mixins.scss

@@ -28,23 +28,23 @@
 // Misc
 // ===============================================
 
-@mixin brdr($color: $gray-200) {
+@mixin brdr($color: var(--tc-gray-200)) {
     border: 1px solid $color;
 }
 
-@mixin bd-bottom($color: $gray-200) {
+@mixin bd-bottom($color: var(--tc-gray-200)) {
     border-bottom: 1px solid $color;
 }
 
-@mixin bd-top($color: $gray-200) {
+@mixin bd-top($color: var(--tc-gray-200)) {
     border-top: 1px solid $color;
 }
 
-@mixin bd-rgt($color: $gray-200) {
+@mixin bd-rgt($color: var(--tc-gray-200)) {
     border-right: 1px solid $color;
 }
 
-@mixin bd-lft($color: $gray-200) {
+@mixin bd-lft($color: var(--tc-gray-200)) {
     border-left: 1px solid $color;
 }
 
@@ -171,17 +171,17 @@
 
 @mixin prime-color {
   // @include prime-color;
-  color: $prime-primary!important;
+  color: var(--tc-primary) !important;
 }
 
 @mixin prime-gray-100 {
   // @include prime-gray-100;
-  color: $prime-gray-100!important;
+  color: var(--tc-gray-100) !important;
 }
 
 @mixin prime-gray-50 {
   // @include prime-gray-50;
-  color: $prime-gray-50!important;
+  color: var(--tc-gray-50) !important;
 }
 
 
@@ -189,27 +189,27 @@
 
 @mixin prime-bg {
   // @include prime-bg;
-  background: $prime-primary!important;
+  background: var(--tc-primary) !important;
 }
 
 @mixin prime-bgc {
   // @include prime-bgc;
-  background-color: $prime-primary!important;
+  background-color: var(--tc-primary) !important;
 }
 
 @mixin prime-bg-100 {
   // @include prime-bg-100;
-  background: $prime-gray-100!important;
+  background: var(--tc-gray-100) !important;
 }
 
 @mixin prime-bg-50 {
   // @include prime-bg-50;
-  background: $prime-gray-50!important;
+  background: var(--tc-gray-50) !important;
 }
 
 @mixin prime-bg-10 {
   // @include prime-bg-10;
-  background: $prime-gray-10!important;
+  background: var(--tc-gray-10) !important;
 }
 
 
@@ -217,17 +217,17 @@
 
 @mixin prime-bdr {
   // @include prime-color;
-  border-color: $prime-primary!important;
+  border-color: var(--tc-primary) !important;
 }
 
 @mixin prime-bdr-100 {
   // @include prime-bdr-100;
-  border-color: $prime-gray-100!important;
+  border-color: var(--tc-gray-100) !important;
 }
 
 @mixin prime-bdr-50 {
   // @include prime-bdr-50;
-  border-color: $prime-gray-50!important;
+  border-color: var(--tc-gray-50) !important;
 }
 
 
@@ -235,12 +235,12 @@
 
 @mixin prime-black {
   // @include prime-black;
-  color: $prime-black!important;
+  color: var(--black) !important;
 }
 
 @mixin prime-white {
   // @include prime-white;
-  color: $prime-white!important;
+  color: var(--white) !important;
 }
 
 @mixin prime-mkt-gradient {
@@ -270,7 +270,7 @@
   font-weight: bold;
   text-transform: uppercase;
   padding-bottom: 10px;
-  border-bottom: 1px solid $prime-gray-50;
+  border-bottom: 1px solid var(--tc-gray-50);
   margin-bottom: 20px;
 }
 
@@ -279,7 +279,7 @@
   // @include prime-subtitle;
   font-size: 16px !important;
   text-transform: uppercase !important;
-  border-bottom: 1px solid $prime-gray-50 !important;
+  border-bottom: 1px solid var(--tc-gray-50) !important;
   padding-bottom: 10px !important;
   margin-bottom: 20px !important;
 }