<%= form_tag update_design_colors_path, method: :post, class: "form" do %>
<%= I18n.t(:label_interface_colors) %>

<%= t('label_interface_colors_description') %>

<% DesignColor.setables.each do |design_color| %>
<%= icon_for_color(OpenStruct.new(variable: design_color.variable, hexcode: design_color.hexcode), data: { target: "#design_colors_" + design_color.variable }) %>
<%= styled_text_field_tag "design_colors[]" + design_color.variable, design_color.hexcode, class: 'design-color--variable-input', data: { 'variable-name': design_color.variable } %>
<% instruction_key = "admin.custom_styles.instructions.#{design_color.variable}" %> <% if I18n.exists?(instruction_key, :en) %> <%= I18n.t(instruction_key) %> <% end %>
<% end %>
<%# Fill in the computed css variables in the inputs as their defaults %> <%= nonced_javascript_tag do %> var computedStyle = getComputedStyle(document.documentElement); document .querySelectorAll('.design-color--variable-input') .forEach(function(el) { if (!el.value || el.value === '') { el.placeholder = computedStyle.getPropertyValue('--' + el.dataset.variableName).trim(); } }); <% end %> <% end %>