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

package/scss/components/custom/variables.scss

@@ -1,33 +1,90 @@
-
-:root {
-
-    --black: #000;
-    --white: #fff;
-    --blue: #0897E9;
-    --dark: #363636;
-    --orange: #FEAC0E;
-    // --gray-100: #EEE;
-    --gray-light: #EEE;
-    --blue-500: #0ADBE3;
-    --purple: #6B48FF;
-    --red: red;
-    // =============================================
-    // Colors V1
-    // =============================================
-    --primary: #37B6C4;
-    --primary-700: #136E92;
-    --secondary: #484440;
-    --gray: #707070;
-    --gray-800: #8A817B;
-    --gray-400: #D5CCC3;
-    --gray-200: #F1F1F1;
-    --gray-100: #F8F9FA;
-    --warning: #ED9C2E;
-    --danger:  #D93025;
-    --success :#1E8E3E;
-    --complete :#039BE5;
-
-    --verde: #37B6C4;
-    --cinza: #8A817B;
-    --cinza4: #F1F1F1;
-}
+
+:root {
+
+    --black: #000;
+    --white: #fff;
+    --blue: #0897E9;
+    --dark: #363636;
+    --orange: #FEAC0E;
+    // --gray-100: #EEE;
+    --gray-light: #EEE;
+    --blue-500: #0ADBE3;
+    --purple: #6B48FF;
+    --red: red;
+    // =============================================
+    // Colors V1
+    // =============================================
+    --primary: #37B6C4;
+    --primary-700: #136E92;
+    --secondary: #484440;
+    --gray: #707070;
+    --gray-800: #8A817B;
+    --gray-400: #D5CCC3;
+    --gray-200: #F1F1F1;
+    --gray-100: #F8F9FA;
+    --warning: #ED9C2E;
+    --danger:  #D93025;
+    --success :#1E8E3E;
+    --complete :#039BE5;
+
+    --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/components/styles.scss

@@ -1,9 +1,9 @@
-@use 'custom/variables.scss';
-
-@use 'custom/loading-transitions.scss';
-@use 'custom/table.scss';
-@use 'custom/tooltip.scss';
-@use 'custom/validation.scss';
-@use 'custom/el-copy.scss';
-@use 'custom/ui-datepicker.scss';
+@use 'custom/variables.scss';
+
+@use 'custom/loading-transitions.scss';
+@use 'custom/table.scss';
+@use 'custom/tooltip.scss';
+@use 'custom/validation.scss';
+@use 'custom/el-copy.scss';
+@use 'custom/ui-datepicker.scss';
 @use 'custom/tab-menu.scss';

package/scss/tcloud/custom/alerts.scss

@@ -1,38 +1,38 @@
 @use "sass:color";
-/* 
-<div class="tc-alert tc-alert-primary">
-  A simple primary alert—check it out!
-</div>
-
-*/
-
-.tc-alert{
-  padding: 16px;
-  border-radius: 13px;
-  font-size: 14px;
-}
-
-.tc-alert-success{
-  border: 2px solid #4597a4;
-  color: #4597a4;
-  background-color: color.adjust(#4597a4, $lightness: 40%);
-}
-
-.tc-alert-danger{
-  border: 2px solid #ee4d4d;
-  color: #ee4d4d;
-  background-color: color.adjust(#ee4d4d, $lightness: 33%);
-}
-
-.tc-alert-warning{
-  border: 2px solid #ffa632;
-  color: #c8842a;
-  background-color: color.adjust(#ffa632, $lightness: 33%);
-}
-
-.tc-alert-info{
-  border: 2px solid #456da4;
-  color: #456da4;
-  background-color: color.adjust(#456da4, $lightness: 40%);
-}
-
+/* 
+<div class="tc-alert tc-alert-primary">
+  A simple primary alert—check it out!
+</div>
+
+*/
+
+.tc-alert{
+  padding: 16px;
+  border-radius: 13px;
+  font-size: 14px;
+}
+
+.tc-alert-success{
+  border: 2px solid #4597a4;
+  color: #4597a4;
+  background-color: color.adjust(#4597a4, $lightness: 40%);
+}
+
+.tc-alert-danger{
+  border: 2px solid #ee4d4d;
+  color: #ee4d4d;
+  background-color: color.adjust(#ee4d4d, $lightness: 33%);
+}
+
+.tc-alert-warning{
+  border: 2px solid #ffa632;
+  color: #c8842a;
+  background-color: color.adjust(#ffa632, $lightness: 33%);
+}
+
+.tc-alert-info{
+  border: 2px solid #456da4;
+  color: #456da4;
+  background-color: color.adjust(#456da4, $lightness: 40%);
+}
+