Merge pull request #8 from betha-plataforma/rebranding

Rebranding
betha-plataforma · Sep 10, 2024 · b99db12 · b99db12
2 parents c4fa8d4 + c021cea
commit b99db12
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@betha-plataforma/theme-bootstrap4",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Tema do Design System Betha para Bootstrap 4",
   "main": "dist/theme-bootstrap4.css",
   "unpkg": "dist/theme-bootstrap4.min.css",

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -27,32 +27,26 @@ $font: (
    ),
 );
 // Colors
-$base-color: #f5f5f7;
 $white: #fff;
 $black: #000;
+
 // Colors >> Gray
-$gray-dark-40: $black;
-$gray-dark-30: #222;
-$gray-dark-20: #595959;
-$gray-dark-10: #767676;
-$gray: #c0c0c0;
-$gray-light-10: #e1e3e6;
-$gray-light-20: #ebedf0;
-$gray-light-30: #f5f7fa;
-$gray-light-40: $white;
+$gray: #bfbfc0;
 $colors-gray: (
-   "dark-40": $gray-dark-40,
-   "dark-30": $gray-dark-30,
-   "dark-20": $gray-dark-20,
-   "dark-10": $gray-dark-10,
+   "dark-40": $black,
+   "dark-30": dark($gray, 61%),
+   "dark-20": dark($gray, 40%),
+   "dark-10": dark($gray, 29%),
+   "dark-5": dark($gray, 15%),
    "base": $gray,
-   "light-10": $gray-light-10,
-   "light-20": $gray-light-20,
-   "light-30": $gray-light-30,
-   "light-40": $gray-light-40,
+   "light-5": lighten($gray, 9%),
+   "light-10": lighten($gray, 14%),
+   "light-20": lighten($gray, 18%),
+   "light-30": lighten($gray, 21%),
+   "light-40": $white,
 );
 // Colors >> Red
-$red: #d64038;
+$red: #dd413c;
 $colors-red: (
    "dark-40": dark($red, 40%),
    "dark-30": dark($red, 30%),
@@ -65,7 +59,7 @@ $colors-red: (
    "light-40": light($red, 40%),
 );
 // Colors >> Pink
-$pink: #cb528e;
+$pink: #cb528f;
 $colors-pink: (
    "dark-40": dark($pink, 40%),
    "dark-30": dark($pink, 30%),
@@ -78,7 +72,7 @@ $colors-pink: (
    "light-40": light($pink, 40%),
 );
 // Colors >> Blue
-$blue: #3475c1;
+$blue: #3374db;
 $colors-blue: (
    "dark-40": dark($blue, 40%),
    "dark-30": dark($blue, 30%),
@@ -91,7 +85,7 @@ $colors-blue: (
    "light-40": light($blue, 40%),
 );
 // Colors >> Aqua
-$aqua: #48b1d3;
+$aqua: #46afd2;
 $colors-aqua: (
    "dark-40": dark($aqua, 40%),
    "dark-30": dark($aqua, 30%),
@@ -104,7 +98,7 @@ $colors-aqua: (
    "light-40": light($aqua, 40%),
 );
 // Colors >> Green
-$green: #54a668;
+$green: #3ec18f;
 $colors-green: (
    "dark-40": dark($green, 40%),
    "dark-30": dark($green, 30%),
@@ -117,7 +111,7 @@ $colors-green: (
    "light-40": light($green, 40%),
 );
 // Colors >> Yellow
-$yellow: #efbc3c;
+$yellow: #e8b730;
 $colors-yellow: (
    "dark-40": dark($yellow, 40%),
    "dark-30": dark($yellow, 30%),
@@ -130,7 +124,7 @@ $colors-yellow: (
    "light-40": light($yellow, 40%),
 );
 // Colors >> Orange
-$orange: #ea863e;
+$orange: #e87d30;
 $colors-orange: (
    "dark-40": dark($orange, 40%),
    "dark-30": dark($orange, 30%),
@@ -143,7 +137,7 @@ $colors-orange: (
    "light-40": light($orange, 40%),
 );
 // Colors >> Purple
-$purple: #a46ab5;
+$purple: #9f62b2;
 $colors-purple: (
    "dark-40": dark($purple, 40%),
    "dark-30": dark($purple, 30%),
@@ -174,42 +168,28 @@ $colors: (
    ),
 );
 
-/**
- ** Cores dos produtos extraidos do manual da marca
-
-    Gestão municipal              -> Marrom   / Brown    -> #9A8B7D
-    Planejamento e Contabilidade  -> Lilás    / Lilac    -> #8986CA
-    Arrecadação e Fiscalização    -> Verde    / Lime     -> #26D07C
-    Atendimento                   -> Cinza    / Gray     -> #AFB2B2
-    Gestão de Compras e Contratos -> Vermelho / Red      -> #DF4661
-    Pessoal e Recursos Humanos    -> Azul     / Blue     -> #009CDE
-    Saúde e Assistência Social    -> Verde    / Green    -> #A2C084
-    Educação e Gestão Escolar     -> Amarelo  / Yellow   -> #F7B51C
-    Gestão e Leis Municipais      -> Laranja  / Orange   -> #F7932F
-
- ** PS.: As Cores estão em português para coincidirem com o manual.
- **/
+$main-brand-color: #0761ff;
 
-$main-brand-color: #001489;
 $brand-colors: (
-   "brown": #9a8b7d,
-   "lilac": #8986ca,
-   "lime": #26d07c,
-   "gray": #afb2b2,
-   "red": #df4661,
-   "blue": #009cde,
-   "green": #a2c084,
-   "yellow": #f7b51c,
-   "orange": #f7932f,
+   'brown'    : #9a8b7d, // Gestão municipal
+   'lilac'    : #a6b8ff, // Contábil
+   'lime'     : #00bb77, // Arrecadação
+   'gray'     : #959798, // Atendimento
+   'red'      : #ff7a75, // Contratos
+   'blue'     : #009adc, // Pessoal
+   'navy'     : #263e81, // NoPaper
+   'green'    : #a7c27e, // Saúde
+   'yellow'   : #f3b02e, // Educação
+   'orange'   : #f4812e, // Leis
 );
 
 /**
  ** Colors adicionais utilizadas no sistema
  **/
 
 $additional-colors: (
-   "blue": #06a,
-   "petrol": #23313f,
+   "blue": #009adc,
+   "petrol": #1c1a23,
    "gold": #ad8b43,
 );
 $breadcrumb-text: map-get($colors-gray, "dark-10");
@@ -232,4 +212,17 @@ $text-timeline: map-get($colors-gray, "dark-30");
 $icon-danger-timeline: map-get($colors-red, "base");
 $icon-warning-timeline: map-get($colors-yellow, "base");
 
+$sizes: (
+  "xs": 2px,
+  "sm": 4px,
+  "base": 6px,
+  "lg": 8px,
+  "xl": 10px,
+  "xxl": 14px
+);
+
+$border-radius: map-get($sizes, "base");
+$border-radius-sm: map-get($sizes, "sm");
+$border-radius-lg: map-get($sizes, "lg");
+
 // stylelint-enable
diff --git a/src/all.scss b/src/all.scss
@@ -1,25 +1,25 @@
 @import 'global';
-@import './components/alert/alert'; /* ok */
-@import './components/badge/badge'; /* ok */
-@import './components/breadcrumb/breadcrumb'; /* ok */
-@import './components/button/button'; /* ok */
+@import './components/alert/alert';
+@import './components/badge/badge';
+@import './components/breadcrumb/breadcrumb';
+@import './components/button/button';
 //@import './components/calendar/calendar';
-@import './components/card/card'; /* ok */
-@import './components/checkbox/checkbox'; /* ok */
+@import './components/card/card';
+@import './components/checkbox/checkbox';
 //@import './components/comment/comment';
-@import './components/container/container'; /* ok */
-@import './components/dropdown/dropdown'; /* ok */
+@import './components/container/container';
+@import './components/dropdown/dropdown';
 //@import './components/filter-by/filter-by';
-@import './components/form/form'; /* ok */
+@import './components/form/form';
 //@import './components/grid/grid';
-@import './components/helpers/helpers'; /* ok */
-@import './components/modal/modal'; /* ok */
+@import './components/helpers/helpers';
+@import './components/modal/modal';
 @import './components/nav/nav';
-@import './components/pagination/pagination'; /* ok */
-@import './components/popover/popover'; /* ok */
-@import './components/progress/progress'; /* ok */
-@import './components/radio/radio'; /* ok */
-@import './components/scrollbar/scrollbar'; /* ok */
-@import './components/spinner/spinner'; /* ok */
-@import './components/switch/switch'; /* ok */
-@import './components/table/table'; /* ok */
+@import './components/pagination/pagination';
+@import './components/popover/popover';
+@import './components/progress/progress';
+@import './components/radio/radio';
+@import './components/scrollbar/scrollbar';
+@import './components/spinner/spinner';
+@import './components/switch/switch';
+@import './components/table/table';
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
@@ -51,7 +51,7 @@ $rootIcon: ".alert-icon";
 $rootDismissible: ".alert-dismissible";
 
 #{$root} {
-  border-radius: 2px;
+  border-radius: $border-radius-sm;
   position: relative;
 
   @each $name, $value in $alert-states {

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -10,12 +10,12 @@ button:focus {
 }
 
 .btn {
-  border-radius: 2px;
-  font-family: $base-font;
-  text-transform: uppercase;
   display: inline-flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  font-family: $base-font;
+  text-transform: uppercase;
+  border-radius: $border-radius-sm;
   > .material-icons {
     vertical-align: middle;
   }
@@ -50,7 +50,7 @@ button:focus {
       opacity: 1;
     }
     &.dropdown-toggle {
-      border-left: 1px solid $gray;
+      border-left: 1px solid palette('gray', 'base');;
       z-index: 2;
     }
   }
@@ -266,7 +266,7 @@ button.btn-link:disabled {
   font-style: normal;
   font-weight: 400;
   margin-right: 5px;
-  margin-top: -3px;
+  margin-top: -1px;
   padding-right: 0;
   vertical-align: middle;
 }

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -2,6 +2,10 @@
 @import '../../config';
 
 .card {
+
+  border-radius: $border-radius-lg;
+  overflow: hidden;
+
   &.bg-secondary {
     background-color: palette('gray', 'light-30') !important;
   }

diff --git a/src/components/container/container.scss b/src/components/container/container.scss
@@ -6,7 +6,7 @@ $root: '.container';
 .container {
   &#{$root}-page {
     background: palette('white');
-    border-radius: 2px;
+    border-radius: $border-radius-sm;
     box-sizing: border-box;
     min-height: 500px;
     position: relative;

diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
@@ -5,7 +5,7 @@ $dropdown-color: map-get($colors-gray, "dark-20");
 
 .dropdown-menu {
   border-color: palette("gray", "light-10");
-  border-radius: 2px;
+  border-radius: $border-radius-sm;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
   .dropdown-header {
     color: palette("gray", "dark-20");

diff --git a/src/components/form/form.scss b/src/components/form/form.scss
@@ -8,7 +8,7 @@ $input-addon-hover: map-get($colors-gray, "light-20");
 
 .form-control {
   border: 1px solid palette("gray");
-  border-radius: 2px;
+  border-radius: $border-radius-sm;
   box-shadow: none;
   color: palette("gray", "dark-30");
   transition: none;
@@ -83,7 +83,7 @@ input[disabled] {
 .input-group-addon {
   background-color: palette("gray", "light-20");
   border-color: palette("gray");
-  border-radius: 2px;
+  border-radius: $border-radius-sm;
   color: palette("gray", "dark-20");
   + input[disabled] {
     border-left: 1px solid palette("gray");

diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
@@ -23,6 +23,10 @@
   border-color: palette("gray", "light-30");
 }
 
+.modal-content {
+  border-radius: $border-radius-lg;
+}
+
 
 /* ajuste do tamanho da modal xxl para monitores menores */
 

diff --git a/src/components/nav/nav.scss b/src/components/nav/nav.scss
@@ -177,7 +177,7 @@ nav.nav {
       margin-bottom: -1px;
       .nav-link {
         border-bottom: 1px solid palette("gray", "light-10");
-        border-radius: 2px 2px 0 0;
+        border-radius: $border-radius-sm $border-radius-sm 0 0;
         &.active {
           border-bottom: 0;
           border-left: 1px solid palette("gray", "light-10");
@@ -446,22 +446,22 @@ nav.nav {
       &.active {
         font-weight: normal;
         &::after {
-          background-color: #3475c1;
-          border-color: #3475c1;
+          background-color: palette("blue", "base");
+          border-color: palette("blue", "base");
           color: #fff;
         }
       }
 
       &.checked:not(.active) {
-        color: #3475c1;
+        color: palette("blue", "base");
         &::after {
           content: "\F012C";
           font-family: "Material Design Icons";
-          border-color: #3475c1;
-          color: #3475c1;
+          border-color: palette("blue", "base");
+          color: palette("blue", "base");
         }
         &::before {
-          border-color: #3475c1;
+          border-color: palette("blue", "base");
         }
       }
     }

diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
@@ -5,7 +5,7 @@
     > .page-item {
       margin-left: 4px;
       .page-link {
-        border-radius: 2px;
+        border-radius: $border-radius-sm;
         background-color: #fff;
         border-color: silver;
         color: #222;
@@ -44,7 +44,7 @@
       &:first-child {
         margin-left: 0;
         .page-link {
-          border-radius: 2px;
+          border-radius: $border-radius-sm;
         }
       }