Add new fields for themes

- In the settings view
- In the model validation
- In the controller parameter permissions
- In the CoffeeScript/Ruby helpers

app/assets/javascripts/settings.coffee

@@ -152,11 +152,17 @@ generateTheme = (payload) ->
     'info_text': 'info-text',
     'success_color': 'success',
     'success_text': 'success-text',
-    'panel_color': 'raised-bg',
+    'dark_color': 'dark',
+    'dark_text': 'dark-text',
+    'light_color': 'light',
+    'light_text': 'light-text',
+    'raised_background': 'raised-bg',
+    'raised_accent': 'raised-accent',
     'background_color': 'background',
-    'background_text': 'body-text',
+    'body_text': 'body-text',
     'input_color': 'input-bg',
-    'input_text': 'input-text' 
+    'input_text': 'input-text',
+    'muted_text': 'muted-text'
   }
 
   body = ":root {\n"

app/controllers/user_controller.rb

@@ -117,12 +117,12 @@ class UserController < ApplicationController
       :success_color, :success_text,
       :warning_color, :warning_text,
       :info_color, :info_text,
-      :default_color, :default_text,
+      :dark_color, :dark_text,
-      :panel_color, :panel_text,
+      :light_color, :light_text,
-      :link_color, :background_color,
+      :raised_background, :raised_accent,
-      :background_text, :background_muted,
+      :background_color, :body_text, 
-      :input_color, :input_text,
+      :muted_text, :input_color, 
-      :outline_color
+      :input_text
     ])
 
     if current_user.theme.nil?

app/helpers/theme_helper.rb

@@ -11,11 +11,17 @@ module ThemeHelper
       'info_text' => 'info-text',
       'success_color' => 'success',
       'success_text' => 'success-text',
-      'panel_color' => 'raised-bg',
+      'dark_color' => 'dark',
+      'dark_text' => 'dark-text',
+      'light_color' => 'light',
+      'light_text' => 'light-text',
+      'raised_background' => 'raised-bg',
+      'raised_accent' => 'raised-accent',
       'background_color' => 'background',
-      'background_text' => 'body-text',
+      'body_text' => 'body-text',
       'input_color' => 'input-bg',
-      'input_text' => 'input-text' 
+      'input_text' => 'input-text',
+      'muted_text' => 'muted-text'
     }
 
     theme = get_active_theme

app/models/theme.rb

@@ -8,12 +8,12 @@ class Theme < ApplicationRecord
     :success_color, :success_text,
     :warning_color, :warning_text,
     :info_color, :info_text,
-    :default_color, :default_text,
+    :dark_color, :dark_text,
-    :panel_color, :panel_text,
+    :light_color, :light_text,
-    :link_color, :background_color,
+    :raised_background, :raised_accent,
-    :background_text, :background_muted,
+    :background_color, :body_text, 
-    :input_color, :input_text,
+    :muted_text, :input_color, 
-    :outline_color,
+    :input_text,
     greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF,
     allow_nil: true, only_integer: true
 

app/views/settings/_theme.haml

@@ -18,9 +18,9 @@
         Here you'll find general page values that are basically visible all across the page.
       .row
         .col-sm-6
-          = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF}
+          = f.text_field :background_color, class: 'color', data: {default: 0xF0EDF4}
         .col-sm-6
-          = f.text_field :background_text, class: 'color', data: {default: 0x222222}
+          = f.text_field :body_text, class: 'color', data: {default: 0x000000}
   .card
     .card-body
       %h2 Forms and Inputs
@@ -38,9 +38,11 @@
         Raised content basically describes all the different boxes and panels you can see across the site.
       .row
         .col-sm-6
-          = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9}
+          = f.text_field :raised_background, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-6
-          = f.text_field :panel_text, class: 'color', data: {default: 0x151515}
+          = f.text_field :raised_accent, class: 'color', data: {default: 0xF7F7F7}
+    .card-footer
+      %p Some text on top of a accented area on a raised element!
   .card
     .card-body
       %h2 Colors
@@ -74,7 +76,7 @@
             A simple primary alert—check it out!
       .row
         .col-sm-6
-          = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039}
+          = f.text_field :danger_color, class: 'color', data: {default: 0xDC3545}
         .col-sm-6
           = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
@@ -82,7 +84,7 @@
             A simple danger alert—check it out!
       .row
         .col-sm-6
-          = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518}
+          = f.text_field :warning_color, class: 'color', data: {default: 0xFFC107}
         .col-sm-6
           = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
@@ -90,7 +92,7 @@
             A simple warning alert—check it out!
       .row
         .col-sm-6
-          = f.text_field :info_color, class: 'color', data: {default: 0x9954BB}
+          = f.text_field :info_color, class: 'color', data: {default: 0x17A2B8}
         .col-sm-6
           = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
@@ -98,16 +100,36 @@
             A simple info alert—check it out!
       .row
         .col-sm-6
-          = f.text_field :success_color, class: 'color', data: {default: 0x3FB618}
+          = f.text_field :success_color, class: 'color', data: {default: 0x28A745}
         .col-sm-6
           = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
         .col-sm-12
           .alert.alert-success
             A simple success alert—check it out!
+      .row
+        .col-sm-6
+          = f.text_field :dark_color, class: 'color', data: {default: 0x343A40}
+        .col-sm-6
+          = f.text_field :dark_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          %button.btn.btn-dark.mb-3 A dark button
+      .row
+        .col-sm-6
+          = f.text_field :light_color, class: 'color', data: {default: 0xF8F9FA}
+        .col-sm-6
+          = f.text_field :light_text, class: 'color', data: {default: 0xFFFFFF}
+        .col-sm-12
+          %button.btn.btn-light.mb-3 A light button
+      .row
+        .col-sm-6
+          = f.text_field :muted_text, class: 'color', data: {default: 0x6C757D}
+        .col-sm-6
+          %p.pt-4.text-muted Some muted text
   .card
     .card-body
       .pull-left
         = f.submit t('views.actions.save'), class: 'btn btn-primary'
 
+      - if current_user.theme
         .pull-right
           = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"