Add raised-text and raised-accent-text theme variables

app/assets/stylesheets/_variables.scss

@@ -125,6 +125,8 @@ $spacers: map-merge($rs-spacers, $spacers);
   --muted-text: 108, 117, 125;
   --input-text: 0, 0, 0;
   --input-placeholder: 108, 117, 125;
+  --raised-text: 0, 0, 0;
+  --raised-accent-text: 0, 0, 0;
 
   --turbolinks-progress-color: #a58adc; // --primary lightened by 25%
 }

app/assets/stylesheets/overrides/_card.scss

@@ -4,6 +4,7 @@
   margin-bottom: map.get($spacers, 3);
   box-shadow: $box-shadow-sm;
   background-color: var(--raised-bg);
+  color: RGB(var(--raised-text));
 
   p:last-child {
     margin-bottom: 0;
@@ -17,4 +18,5 @@
 .card-header,
 .card-footer {
   background-color: var(--raised-accent);
+  color: RGB(var(--raised-accent-text));
 }

app/helpers/theme_helper.rb

@@ -17,7 +17,9 @@ module ThemeHelper
     "light_color"       => "light",
     "light_text"        => "light-text",
     "raised_background" => %w[raised-bg raised-bg-rgb],
+    "raised_text"       => "raised-text",
     "raised_accent"     => %w[raised-accent raised-accent-rgb],
+    "raised_accent_text"=> "raised-accent-text",
     "background_color"  => "background",
     "body_text"         => "body-text",
     "input_color"       => "input-bg",

app/javascript/retrospring/utilities/theme.ts

@@ -14,7 +14,9 @@ export const THEME_MAPPING = {
   'light_color': 'light',
   'light_text': 'light-text',
   'raised_background': 'raised-bg',
+  'raised_text': 'raised-text',
   'raised_accent': 'raised-accent',
+  'raised_accent_text': 'raised-accent-text',
   'background_color': 'background',
   'body_text': 'body-text',
   'input_color': 'input-bg',

app/views/settings/theme/edit.html.haml

@@ -93,7 +93,7 @@
 
       .row
         .col-sm-6
-          = f.text_field :input_placeholder, class: "color", data: { default: 0x6C757D, theme_target: "color" }
+          = f.text_field :input_placeholder, class: "color", data: { default: 0x6C757D, theme_target: "color", action: "theme#updatePreview" }
         .col-sm-6
           .form-group
             %label.form-label Example Input
@@ -105,9 +105,14 @@
 
       .row
         .col-sm-6
-          = f.text_field :raised_background, class: "color", data: { default: 0xFFFFFF, theme_target: "color" }
+          = f.text_field :raised_background, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }
         .col-sm-6
-          = f.text_field :raised_accent, class: "color", data: { default: 0xF7F7F7, theme_target: "color" }
+          = f.text_field :raised_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }
+      .row
+        .col-sm-6
+          = f.text_field :raised_accent, class: "color", data: { default: 0xF7F7F7, theme_target: "color", action: "theme#updatePreview" }
+        .col-sm-6
+          = f.text_field :raised_accent_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }
     .card-footer
       %p= t(".raised.accent.example")
   .card

config/locales/activerecord.en.yml

@@ -49,7 +49,9 @@ en:
         primary_color: "Primary colour"
         primary_text: "Primary text colour"
         raised_accent: "Raised accent colour"
+        raised_accent_text: "Raised accent text colour"
         raised_background: "Raised background colour"
+        raised_text: "Raised text colour"
         success_color: "Success colour"
         success_text: "Success text colour"
         warning_color: "Warning colour"

db/migrate/20230123214851_add_raised_and_accent_text_to_themes.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class AddRaisedAndAccentTextToThemes < ActiveRecord::Migration[6.1]
+  def up
+    add_column :themes, :raised_text, :integer, default: 0x000000, null: false
+    add_column :themes, :raised_accent_text, :integer, default: 0x000000, null: false
+  end
+
+  def down
+    remove_column :themes, :raised_text
+    remove_column :themes, :raised_accent_text
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2023_01_08_114333) do
+ActiveRecord::Schema.define(version: 2023_01_23_214851) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -181,7 +181,7 @@ ActiveRecord::Schema.define(version: 2023_01_08_114333) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.index ["name", "resource_type", "resource_id"], name: "index_roles_on_name_and_resource_type_and_resource_id"
-    t.index ["resource_type", "resource_id"], name: "index_roles_on_resource"
+    t.index ["resource_type", "resource_id"], name: "index_roles_on_resource_type_and_resource_id"
   end
 
   create_table "rpush_apps", force: :cascade do |t|
@@ -301,6 +301,8 @@ ActiveRecord::Schema.define(version: 2023_01_08_114333) do
     t.integer "light_color", default: 16316922
     t.integer "light_text", default: 0
     t.integer "input_placeholder", default: 7107965, null: false
+    t.integer "raised_text", default: 0, null: false
+    t.integer "raised_accent_text", default: 0, null: false
     t.index ["user_id", "created_at"], name: "index_themes_on_user_id_and_created_at"
   end