Fix dialog footer and buttons

Author: christianezeani

projects/ngsuite/src/lib/form/components/button/button.component.scss

@@ -26,62 +26,62 @@
 
   &[default], // Deprecated
   &.default {
-    background-color: ngs.$default;
-    color: #333;
+    background-color: var(--ngs-default) !important;
+    color: var(--ngs-default-fg) !important;
   }
 
   &[primary], // Deprecated
   &.primary {
-    background-color: ngs.$primary;
-    color: #FFF;
+    background-color: var(--ngs-primary) !important;
+    color: var(--ngs-primary-fg) !important;
   }
 
   &[secondary], // Deprecated
   &.secondary {
-    background-color: ngs.$secondary;
-    color: #FFF;
+    background-color: var(--ngs-secondary) !important;
+    color: var(--ngs-secondary-fg) !important;
   }
 
   &[error], // Deprecated
   &.error {
-    background-color: ngs.$error;
-    color: #FFF;
+    background-color: var(--ngs-error) !important;
+    color: var(--ngs-error-fg) !important;
   }
 
   &[danger], // Deprecated
   &.danger {
-    background-color: ngs.$danger;
-    color: #FFF;
+    background-color: var(--ngs-danger) !important;
+    color: var(--ngs-danger-fg) !important;
   }
 
   &[success], // Deprecated
   &.success {
-    background-color: ngs.$success;
-    color: #FFF;
+    background-color: var(--ngs-success) !important;
+    color: var(--ngs-success-fg) !important;
   }
 
   &[warning], // Deprecated
   &.warning {
-    background-color: ngs.$warning;
-    color: #333;
+    background-color: var(--ngs-warning) !important;
+    color: var(--ngs-warning-fg) !important;
   }
 
   &[info], // Deprecated
   &.info {
-    background-color: ngs.$info;
-    color: #333;
+    background-color: var(--ngs-info) !important;
+    color: var(--ngs-info-fg) !important;
   }
 
   &[light], // Deprecated
   &.light {
-    background-color: ngs.$light;
-    color: #333;
+    background-color: var(--ngs-light) !important;
+    color: var(--ngs-light-fg) !important;
   }
 
   &[dark], // Deprecated
   &.dark {
-    background-color: ngs.$dark;
-    color: #FFF;
+    background-color: var(--ngs-dark) !important;
+    color: var(--ngs-dark-fg) !important;
   }
 
   > button {

projects/ngsuite/src/styles/_variables.scss

@@ -1,25 +1,63 @@
 $default: #CCC !default;
+$default-fg: #333 !default;
+
 $primary: #02AFEE !default;
+$primary-fg: #FFF !default;
+
 $secondary: #6C757D !default;
+$secondary-fg: #FFF !default;
+
 $error: #F00 !default;
+$error-fg: #FFF !default;
+
 $danger: #DC3545 !default;
+$danger-fg: #FFF !default;
+
 $success: #090 !default;
+$success-fg: #FFF !default;
+
 $warning: #FFC107 !default;
+$warning-fg: #333 !default;
+
 $info: #0DCAF0 !default;
+$info-fg: #333 !default;
+
 $light: #F8F9FA !default;
+$light-fg: #333 !default;
+
 $dark: #212529 !default;
+$dark-fg: #FFF !default;
 
 $color: (
   default: $default,
+  default-fg: $default,
+
   primary: $primary,
+  primary-fg: $primary-fg,
+
   secondary: $secondary,
+  secondary-fg: $secondary-fg,
+
   error: $error,
+  error-fg: $error-fg,
+
   danger: $danger,
+  danger-fg: $danger-fg,
+
   success: $success,
+  success-fg: $success-fg,
+
   warning: $warning,
+  warning-fg: $warning-fg,
+
   info: $info,
+  info-fg: $info-fg,
+
   light: $light,
+  light-fg: $light-fg,
+
   dark: $dark,
+  dark-fg: $dark-fg,
 );
 
 $device: (