Fixed some styles

resources/assets/themes/base.scss

@@ -1,9 +1,11 @@
-// select 2 variables
-$cursor-disabled: false;
+// Basic variables
+@use "sass:map";
 
+// select 2 variables
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
 
+// Imports
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
@@ -269,10 +271,27 @@ span.ref-id[id] {
   }
 }
 
+// Cards
 .card-body > *:last-child {
     margin-bottom: 0;
 }
 
+.card-header {
+  &.bg-dark {
+    color: map.get($theme-colors, "light");;
+  }
+
+  &.bg-light {
+    color: map.get($theme-colors, "dark");;
+  }
+}
+
+// code tag
+code {
+  background-color: $input-disabled-bg;
+  @include border-radius($input-border-radius);
+}
+
 @keyframes pulse {
   0% {
     transform: rotate(0deg);
@@ -343,3 +362,8 @@ span.ref-id[id] {
     }
   }
 }
+
+// Forms
+.form-label {
+  font-weight: $font-weight-bold;
+}

resources/assets/themes/cyborg_styles.scss

@@ -158,10 +158,3 @@ table,
     color: #fff;
   }
 }
-
-// code tag
-code {
-  background-color: $input-bg-disabled;
-  color: $input-color;
-}
-

resources/assets/themes/theme1.scss

@@ -53,6 +53,8 @@ $state-danger-border:            darken($state-danger-bg, 3%);
 
 $headings-small-color:        $gray-light;
 
+$nav-tabs-link-active-color:     $gray-light;
+
 code {
   background-color: $state-info-bg;
   color: $state-info-text;

resources/views/macros/base.twig

@@ -1,5 +1,5 @@
 {% macro angel() %}
-    <span class="icon-icon_angel bg-light"></span>
+    <span class="icon-icon_angel"></span>
 {% endmacro %}
 
 {% macro icon(icon, color) %}
@@ -19,7 +19,7 @@
 {% endmacro %}
 
 {% macro button(label, url, type, size, title) %}
-    <a href="{{ url }}" class="btn btn-{{ type|default('primary') }}{% if size %} btn-{{ size }}{% endif %}"{% if title %} title="{{ title }}"{% endif %}>
+    <a href="{{ url }}" class="btn btn-{{ type|default('secondary') }}{% if size %} btn-{{ size }}{% endif %}"{% if title %} title="{{ title }}"{% endif %}>
         {{ label }}
     </a>
 {% endmacro %}

resources/views/macros/form.twig

@@ -67,7 +67,7 @@
 
 {% macro button(label, opt) %}
     <button
-        class="btn btn-{{ opt.btn_type|default('primary') }}
+        class="btn btn-{{ opt.btn_type|default('secondary') }}
             {%- if 'btn_size' in opt %} btn-{{ opt.btn_size }}{% endif %}"
         {%- if opt.type is defined %} type="{{ opt.type }}"{% endif %}
         {%- if opt.name is defined %} name="{{ opt.name }}"{% endif %}
@@ -79,5 +79,5 @@
 {%- endmacro %}
 
 {% macro submit(label, opt) %}
-    {{ _self.button(label|default(__('form.submit')), opt|default({})|merge({'type': 'submit'})) }}
+    {{ _self.button(label|default(__('form.submit')), opt|default({})|merge({'type': 'submit', 'btn_type': 'primary'})) }}
 {%- endmacro %}

resources/views/pages/design.twig

@@ -235,7 +235,7 @@
                     <div class="col">
                         <label class="form-label">Button</label>
                         <div>
-                            {{ f.button('Button', {'btn_type': 'primary'}) }}
+                            {{ f.button('Button') }}
                         </div>
                     </div>
                     <div class="col">
@@ -334,7 +334,7 @@
             <div class="col-md-3">
                 <h4><code>button(label, opt)</code></h4>
                 <p>
-                    {{ f.button('Label', {'btn_type': 'primary', 'name': 'button-name', 'value': 'buton-value'}) }}
+                    {{ f.button('Label', {'name': 'button-name', 'value': 'buton-value'}) }}
                 </p>
             </div>
 

webpack.config.js

@@ -8,7 +8,7 @@ const nodeEnv = (process.env.NODE_ENV || 'development').trim();
 // eslint-disable-next-line
 const __DEV__ = nodeEnv !== 'production';
 
-const devtool = __DEV__ ? 'source-map' : undefined 
+const devtool = __DEV__ ? 'source-map' : undefined
 
 const plugins = [
   new webpack.DefinePlugin({
@@ -68,7 +68,7 @@ module.exports = {
               },
             },
           },
-          { 
+          {
               loader: 'sass-loader',
               options: {
                   sassOptions: {