Merge pull request #13126 from opf/primer-dev

Introduce Primer

Gemfile

@@ -355,3 +355,5 @@ gemfiles.each do |file|
   # don't use eval_gemfile(file) here as it will break dependabot!
   send(:eval_gemfile, file) if File.readable?(file)
 end
+
+gem "primer_view_components", git: 'https://github.com/opf/primer_view_components', ref: '18abe4d'

Gemfile.lock

@@ -50,6 +50,17 @@ GIT
     omniauth-openid_connect-providers (0.2.0)
       omniauth-openid-connect (>= 0.2.1)
 
+GIT
+  remote: https://github.com/opf/primer_view_components
+  revision: 18abe4d3c8059bc915443767c033543c2e6e8beb
+  ref: 18abe4d
+  specs:
+    primer_view_components (0.4.0)
+      actionview (>= 5.0.0)
+      activesupport (>= 5.0.0)
+      octicons (>= 18.0.0)
+      view_component (>= 3.1, < 4.0)
+
 PATH
   remote: modules/auth_plugins
   specs:
@@ -298,7 +309,7 @@ GEM
       airbrake-ruby (~> 6.0)
     airbrake-ruby (6.2.1)
       rbtree3 (~> 0.6)
-    appsignal (3.4.8)
+    appsignal (3.4.7)
       rack
     ast (2.4.2)
     attr_required (1.0.1)
@@ -628,6 +639,7 @@ GEM
     nokogiri (1.15.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
+    octicons (19.4.0)
     oj (3.15.0)
     okcomputer (1.18.4)
     omniauth-saml (1.10.3)
@@ -1088,6 +1100,7 @@ DEPENDENCIES
   plaintext (~> 0.3.2)
   posix-spawn (~> 0.3.13)
   prawn (~> 2.2)
+  primer_view_components!
   pry-byebug (~> 3.10.0)
   pry-rails (~> 0.3.6)
   pry-rescue (~> 1.5.2)

app/helpers/application_helper.rb

@@ -130,21 +130,26 @@ def join_flash_messages(messages)
   end
 
   def render_flash_message(type, message, html_options = {})
-    css_classes  = ["flash #{type} icon icon-#{type}", html_options.delete(:class)]
-
+    if type.to_s == 'notice'
+      type = 'success'
+    end
+    toast_css_classes = ["op-toast -#{type}", html_options.delete(:class)]
     # Add autohide class to notice flashes if configured
-    if type.to_s == 'notice' && User.current.pref.auto_hide_popups?
-      css_classes << 'autohide-toaster'
+    if type.to_s == 'success' && User.current.pref.auto_hide_popups?
+      toast_css_classes << 'autohide-toaster'
     end
-
-    html_options = { class: css_classes.join(' '), role: 'alert' }.merge(html_options)
-
-    content_tag :div, html_options do
-      concat(join_flash_messages(message))
-      concat(content_tag(:i, '', class: 'icon-close close-handler',
-                                 tabindex: '0',
-                                 role: 'button',
-                                 aria: { label: ::I18n.t('js.close_popup_title') }))
+    html_options = { class: toast_css_classes.join(' '), role: 'alert' }.merge(html_options)
+    close_button = content_tag :a, '', class: 'op-toast--close icon-context icon-close',
+                                       title: I18n.t('js.close_popup_title'),
+                                       tabindex: '0'
+    toast = content_tag(:div, join_flash_messages(message), class: 'op-toast--content')
+    content_tag :div, '', class: 'op-toast--wrapper' do
+      content_tag :div, '', class: 'op-toast--casing' do
+        content_tag :div, html_options do
+          concat(close_button)
+          concat(toast)
+        end
+      end
     end
   end
 
@@ -310,6 +315,20 @@ def all_lang_options_for_select
       .sort_by(&:last)
   end
 
+  def theme_options_for_select
+    [
+      [t('themes.light'), 'light'],
+      [t('themes.light_high_contrast'), 'light_high_contrast'],
+      [t('themes.dark'), 'dark'],
+      [t('themes.dark_dimmed'), 'dark_dimmed'],
+      [t('themes.dark_high_contrast'), 'dark_high_contrast']
+    ]
+  end
+
+  def user_theme_data_attributes
+    mode, _theme_suffix = User.current.pref.theme.split("_", 2)
+    "data-color-mode=#{mode} data-#{mode}-theme=#{User.current.pref.theme}"
+  end
   def highlight_default_language(lang_options)
     lang_options.map do |(language_name, code)|
       if code == Setting.default_language

app/models/user_preference.rb

@@ -123,6 +123,10 @@ def comments_in_reverse_order=(value)
     settings[:comments_sorting] = to_boolean(value) ? 'desc' : 'asc'
   end
 
+  def theme
+    super.presence || Setting.user_default_theme
+  end
+
   def time_zone
     super.presence || Setting.user_default_timezone.presence
   end

app/views/custom_styles/_inline_css.erb

@@ -28,45 +28,45 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 
 <style type="text/css">
-  :root {
-  <%  DesignColor.overwritten.each do |design_color| %>
-    --<%= design_color.variable %>: <%= design_color.hexcode %>;
+    :root {
+    <% DesignColor.overwritten.each do |design_color| %>
+        --<%= design_color.variable %>: <%= design_color.hexcode %>;
     <% if design_color.variable == "header-border-bottom-color" %>
-    --header-border-bottom-width: 1px;
+        --header-border-bottom-width: 1px;
     <% end %>
     <% if design_color.variable == "main-menu-border-color" %>
-    --main-menu-border-width: 1px;
+        --main-menu-border-width: 1px;
     <% end %>
     <% if design_color.variable == "alternative-color" %>
-    --button--alt-highlight-background-hover-color: <%= design_color.darken 0.18 %>;
+        --button--alt-highlight-background-hover-color: <%= design_color.darken 0.18 %>;
     <% end %>
     <% if design_color.variable == "primary-color" %>
-      --primary-color--minor1: <%= design_color.lighten 0.3 %>;
-      --primary-color--minor2: <%= design_color.lighten 0.6 %>;
-      --primary-color--minor3: <%= design_color.lighten 0.8 %>;
-      --primary-color--major1: <%= design_color.darken 0.2 %>;
-      --primary-color--major2: <%= design_color.darken 0.4 %>;
-      --primary-color--major3: <%= design_color.darken 0.6 %>;
+        --primary-color--minor1: <%= design_color.lighten 0.3 %>;
+        --primary-color--minor2: <%= design_color.lighten 0.6 %>;
+        --primary-color--minor3: <%= design_color.lighten 0.8 %>;
+        --primary-color--major1: <%= design_color.darken 0.2 %>;
+        --primary-color--major2: <%= design_color.darken 0.4 %>;
+        --primary-color--major3: <%= design_color.darken 0.6 %>;
     <% end %>
-  <% end %>
-  }
+    <% end %>
+    }
 
-  <%# Conditional styles %>
-  <% if DesignColor.overwritten.map(&:variable).include?('header-border-bottom-color') %>
+    <%# Conditional styles %>
+    <% if DesignColor.overwritten.map(&:variable).include?('header-border-bottom-color') %>
     <%# Remove top border of left menu to not have to borders adding to 2px %>
     #main-menu #toggle-project-menu {
-      border-top: 0px;
+        border-top: 0px;
     }
 
     <%# Trying to hit the query cache for the condition here: %>
     <% if DesignColor.overwritten.map(&:variable).include?('header-bg-color') &&
           DesignColor.overwritten.select { |design_color| design_color.variable == 'header-bg-color' }.try(:first).try(:hexcode) == '#FFFFFF' &&
           DesignColor.overwritten.select { |design_color| design_color.variable == 'header-item-bg-hover-color' }.try(:first).try(:hexcode) == '#FFFFFF' %>
-      <%# Disable hover background color to not overlap border %>
-      .op-app-menu--item-action:hover,
-      .top-menu-search.-collapsed .top-menu-search--button:hover {
+    <%# Disable hover background color to not overlap border %>
+    .op-app-menu--item-action:hover,
+    .top-menu-search.-collapsed .top-menu-search--button:hover {
         background: transparent;
-      }
+    }
+    <% end %>
     <% end %>
-  <% end %>
 </style>

app/views/custom_styles/_primer_color_mapping.erb

@@ -0,0 +1,19 @@
+<style type="text/css">
+
+  /* Overwrite Primer primitives */
+  [data-color-mode] {
+      --body-background: var(--color-canvas-default);
+      --body-font-color: var(--color-fg-default);
+      --color-accent-fg: var(--content-link-color) !important;
+
+  <% DesignColor.overwritten.each do |design_color| %>
+    <% if design_color.variable == "alternative-color" %>
+        --color-btn-primary-bg:  <%= design_color.hexcode %> !important;
+        --color-btn-primary-hover-bg:  <%= design_color.darken 0.18 %> !important;
+    <% end %>
+    <% if design_color.variable == "content-link-color" %>
+        --color-accent-fg: <%= design_color.hexcode %> !important;
+    <% end %>
+  <% end %>
+  }
+</style>

app/views/layouts/_common_head.html.erb

@@ -43,6 +43,7 @@
 
 <%# Custom styles %>
 <%= render partial: "custom_styles/inline_css_logo" %>
+<%= render partial: 'custom_styles/primer_color_mapping' %>
 <% if apply_custom_styles? %>
   <% cache(CustomStyle.current) do %>
     <%= render partial: "custom_styles/inline_css" %>

app/views/layouts/base.html.erb

@@ -45,6 +45,7 @@ See COPYRIGHT and LICENSE files for more details.
   data-overflowing-identifier=".__overflowing_body"
   data-rendered-at="<%= Time.zone.now.iso8601 %>"
   data-controller="application"
+  <%= user_theme_data_attributes %>
 >
 <%= render partial: 'warning_bar/warning_bar' %>
 <noscript>

app/views/users/_preferences.html.erb

@@ -33,6 +33,11 @@ See COPYRIGHT and LICENSE files for more details.
         container_class: (defined? input_size) ? "-#{input_size}" : "-wide"
       )
   %>
+  <% if OpenProject::FeatureDecisions.personal_theme_selection_active? %>
+    <div class="form--field">
+      <%= pref_fields.select :theme, theme_options_for_select,  container_class: '-middle' %>
+    </div>
+  <% end %>
   <div class="form--field">
     <%= pref_fields.select :comments_sorting,
                            [[t(:label_chronological_order), 'asc'],

config/application.rb

@@ -32,6 +32,8 @@
 require 'active_support'
 require 'active_support/dependencies'
 require 'core_extensions'
+require "view_component"
+require "primer/view_components/engine"
 
 # Silence deprecations early on for testing on CI and production
 ActiveSupport::Deprecation.silenced =

config/constants/settings/definition.rb

@@ -979,6 +979,13 @@ class Definition
       users_deletable_by_admins: {
         default: false
       },
+      user_default_theme: {
+        default: 'light',
+        format: :string,
+        allowed: -> do
+          UserPreferences::Schema.schema.dig('definitions', 'UserPreferences', 'properties', 'theme', 'enum')
+        end
+      },
       users_deletable_by_self: {
         default: false
       },

config/initializers/feature_decisions.rb

@@ -41,3 +41,4 @@
 
 OpenProject::FeatureDecisions.add :show_changes
 OpenProject::FeatureDecisions.add :more_global_index_pages
+OpenProject::FeatureDecisions.add :personal_theme_selection

config/locales/en.yml

@@ -385,6 +385,13 @@ en:
       no_results_title_text: There are currently no work package statuses.
       no_results_content_text: Add a new status
 
+  themes:
+    light: "Light"
+    light_high_contrast: "Light high contrast"
+    dark: "Dark"
+    dark_dimmed: "Dark dimmed"
+    dark_high_contrast: "Dark high contrast"
+
   types:
     index:
       no_results_title_text: There are currently no types.

config/schemas/user_preferences.schema.json

@@ -12,6 +12,10 @@
                 "time_zone": {
                     "type": ["string", "null"]
                 },
+                "theme": {
+                  "type": "string",
+                  "enum": ["light", "light_high_contrast", "dark", "dark_dimmed", "dark_high_contrast"]
+                },
                 "warn_on_leaving_unsaved": {
                     "type": "boolean"
                 },

docker/pullpreview/docker-compose.yml

@@ -69,14 +69,3 @@ services:
     command: "./docker/prod/worker --seed --set attachment_max_size=262144,host_name=${PULLPREVIEW_PUBLIC_DNS}"
     depends_on:
       - db
-
-  storybook:
-    build:
-      context: .
-      dockerfile: Dockerfile-storybook
-      target: prod
-    restart: unless-stopped
-    ports:
-      - "8080:8080"
-    volumes:
-      - "caddy_data:/data"

frontend/angular.json

@@ -9,8 +9,17 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "verbose": {
+                "properties": ["entry"]
+              },
+              "path": "./extra-webpack.config.js",
+              "mergeStrategies": {
+                "externals": "replace"
+              }
+            },
             "allowedCommonJsDependencies": [
               "core-app/init-vendors",
               "core-app/init-globals",
@@ -44,7 +53,8 @@
               "node_modules/jquery-ui/themes/base/core.css",
               "node_modules/jquery-ui/themes/base/datepicker.css",
               "node_modules/jquery-ui/themes/base/dialog.css",
-              "node_modules/flatpickr/dist/flatpickr.min.css"
+              "node_modules/flatpickr/dist/flatpickr.min.css",
+              "node_modules/@primer/css/core/index.scss"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
@@ -70,7 +80,11 @@
                 }
               ],
               "preserveSymlinks": true,
-              "optimization": true,
+              "optimization": {
+                "scripts" : false,
+                "styles" : true,
+                "fonts" : true
+              },
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,

frontend/extra-webpack.config.js

@@ -0,0 +1,14 @@
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          keep_classnames: true,
+          keep_fnames: true,
+        }
+      })
+    ]
+  }
+};