Migrate to full css-variables theming with IThemes provider

[nickvergessen]

This is a first start towards a proper theme management system.
That should help us do the following:

• Get a cleaner and more flexible approach towards Theming in general
• Allow external apps to provide themes in the future
• Allow the use of media-queries to select a specific theme automatically
• Deprecate the old scssCacher method
• Migrate away from scss WIP: move SCSS to webpack  #31743
• Allow for much better performances in design generation and per-user design caching
• Fix most of the guest/public/login pages that were not themed
• Move to a declarative theming approach rather than imperative (apps handle their themes compatibility instead of having the theme provide custom css rules)

Steps

• Implement base ITheme provider (private for now)
• Implement theme management backend
• Migrate Theme selection UI from accessibility to theming
• Adapt UI
• Implement instant design switch
• Remove accessibility

How to review

• Test the various ways themes can be changed per-user
  • From the user theming settings
  • With media queries
• Try to find visual glitches
• Experiment with Admin theming changes and colours/edits and see if everything behaves properly
  • Settings changes and preview
  • Public pages
  • Standard logged-in pages
  • Login page

Follow-ups

• Remove scss support WIP: move SCSS to webpack  #31743
• Fix icons generation
  • Compile with npm
  • Implement theme-switch icon colour revert (?)
• Fix potential leftovers and deploy magic variables like
  • --background-invert-if-bright => invert the element if the main background colour is bright
  • --primary-invert-if-bright => invert the element if the primary colour is too bright
• Make ITheme api public (?)

---

Closes #31746

[szaimen]

I'll retest in a second 👍

[szaimen]

the dashboard app is still a bit broken in dark mode:

and the files app too:

Also dyslexia still does not work for me, don't know why...

and this is still not renamed:

But okay to me to do this in a follow-up

[szaimen]

We should add this to breaking change of 25 (e.g. that the accessibility app is now included in theming...)

[skjnldsv]

But okay to me to do this in a follow-up

Will do! 🚀

Fixed

[skjnldsv]

Will address design improvements in followups

[skjnldsv]

integration-setup-features failure unrelated

[szaimen]

@skjnldsv Did you find a fix for the dyslexic prpblem?

[skjnldsv]

@skjnldsv Did you find a fix for the dyslexic problem?

Yes, will add as followup, just using the generateUrl should be enough

diff --git a/apps/theming/lib/Themes/DyslexiaFont.php b/apps/theming/lib/Themes/DyslexiaFont.php
index 50284d33b9..2629ac588c 100644
--- a/apps/theming/lib/Themes/DyslexiaFont.php
+++ b/apps/theming/lib/Themes/DyslexiaFont.php
@@ -60,23 +60,30 @@ class DyslexiaFont extends DefaultTheme implements ITheme {
        }
 
        public function getCustomCss(): string {
+               $fontPathWoff = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Regular.woff');
+               $fontPathOtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Regular.otf');
+               $fontPathTtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Regular.ttf');
+               $boldFontPathWoff = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Bold.woff');
+               $boldFontPathOtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Bold.otf');
+               $boldFontPathTtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Bold.ttf');
+
                return "
                        @font-face {
                                font-family: 'OpenDyslexic';
                                font-style: normal;
                                font-weight: 400;
-                               src: url('../fonts/OpenDyslexic-Regular.woff') format('woff'),
-                                        url('../fonts/OpenDyslexic-Regular.otf') format('opentype'),
-                                        url('../fonts/OpenDyslexic-Regular.ttf') format('truetype');
+                               src: url('$fontPathWoff') format('woff'),
+                                        url('$fontPathOtf') format('opentype'),
+                                        url('$fontPathTtf') format('truetype');
                        }
                        
                        @font-face {
                                font-family: 'OpenDyslexic';
                                font-style: normal;
                                font-weight: 700;
-                               src: url('../fonts/OpenDyslexic-Bold.woff') format('woff'),
-                                        url('../fonts/OpenDyslexic-Bold.otf') format('opentype'),
-                                        url('../fonts/OpenDyslexic-Bold.ttf') format('truetype');
+                               src: url('$boldFontPathWoff') format('woff'),
+                                        url('$boldFontPathOtf') format('opentype'),
+                                        url('$boldFontPathTtf') format('truetype');
                        }
                ";
        }

[CarlSchwan]

@skjnldsv something to look into it next week, but I think this broke one integration test

[skjnldsv]

@skjnldsv something to look into it next week, but I think this broke one integration test

I wondered this too, but I cannot reproduce locally 🤔

[zak39]

Is it possible to declare sccs in a Vue template ?

[skjnldsv]

Is it possible to declare sccs in a Vue template ?

Yes, we use scss in vue apps almost everywhere :)