diff options
author | John Molakvoæ <skjnldsv@protonmail.com> | 2022-04-20 10:55:41 +0300 |
---|---|---|
committer | John Molakvoæ <skjnldsv@protonmail.com> | 2022-04-21 10:31:07 +0300 |
commit | 493b20605f9819a03a23cf0da456f89634307152 (patch) | |
tree | cdacf96788fd9212051a19c9a9bf55e9c31f512c /apps/theming/lib | |
parent | 9ea72b10104ceb482be33b4626c3603a788a687f (diff) |
Font fixes and design update for theme picker
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Diffstat (limited to 'apps/theming/lib')
-rw-r--r-- | apps/theming/lib/Controller/ThemingController.php | 10 | ||||
-rw-r--r-- | apps/theming/lib/ITheme.php | 10 | ||||
-rw-r--r-- | apps/theming/lib/Service/ThemeInjectionService.php | 2 | ||||
-rw-r--r-- | apps/theming/lib/Themes/DarkHighContrastTheme.php | 45 | ||||
-rw-r--r-- | apps/theming/lib/Themes/DefaultTheme.php | 5 | ||||
-rw-r--r-- | apps/theming/lib/Themes/DyslexiaFont.php | 35 | ||||
-rw-r--r-- | apps/theming/lib/Themes/HighContrastTheme.php | 36 |
7 files changed, 120 insertions, 23 deletions
diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index 1cd269f9bff..ff30e27f721 100644 --- a/apps/theming/lib/Controller/ThemingController.php +++ b/apps/theming/lib/Controller/ThemingController.php @@ -55,6 +55,7 @@ use OCP\IL10N; use OCP\IRequest; use OCP\ITempManager; use OCP\IURLGenerator; +use ScssPhp\ScssPhp\Compiler; /** * Class ThemingController @@ -309,13 +310,14 @@ class ThemingController extends Controller { * * @return FileDisplayResponse|NotFoundResponse */ - public function getThemeVariables(string $themeId, bool $plain = false) { + public function getThemeStylesheet(string $themeId, bool $plain = false, bool $withCustomCss = false) { $themes = $this->themesService->getThemes(); if (!in_array($themeId, array_keys($themes))) { return new NotFoundResponse(); } $theme = $themes[$themeId]; + $customCss = $theme->getCustomCss(); // Generate variables $variables = ''; @@ -325,10 +327,12 @@ class ThemingController extends Controller { // If plain is set, the browser decides of the css priority if ($plain) { - $css = ":root { $variables }"; + $css = ":root { $variables } " . $customCss; } else { // If not set, we'll rely on the body class - $css = "body[data-theme-$themeId] { $variables }"; + $compiler = new Compiler(); + $compiledCss = $compiler->compileString("body[data-theme-$themeId] { $variables $customCss }"); + $css = $compiledCss->getCss();; } try { diff --git a/apps/theming/lib/ITheme.php b/apps/theming/lib/ITheme.php index 20508fac4e8..a5c9cdf26a6 100644 --- a/apps/theming/lib/ITheme.php +++ b/apps/theming/lib/ITheme.php @@ -86,4 +86,14 @@ interface ITheme { * @since 25.0.0 */ public function getCSSVariables(): array; + + /** + * Return the custom css necessary for that app + * ⚠️ Warning, should be used slightly. + * Theoretically, editing the variables should be enough. + * + * @return string + * @since 25.0.0 + */ + public function getCustomCss(): string; } diff --git a/apps/theming/lib/Service/ThemeInjectionService.php b/apps/theming/lib/Service/ThemeInjectionService.php index e00839c21c5..81edc19bc4b 100644 --- a/apps/theming/lib/Service/ThemeInjectionService.php +++ b/apps/theming/lib/Service/ThemeInjectionService.php @@ -75,7 +75,7 @@ class ThemeInjectionService { * @param string $media media query to use in the <link> element */ private function addThemeHeader(string $themeId, bool $plain = true, string $media = null) { - $linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeVariables', [ + $linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeStylesheet', [ 'themeId' => $themeId, 'plain' => $plain, ]); diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php index 8d0b134c75f..62b7d4f6358 100644 --- a/apps/theming/lib/Themes/DarkHighContrastTheme.php +++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php @@ -26,7 +26,7 @@ namespace OCA\Theming\Themes; use OCA\Theming\ITheme; -class DarkHighContrastTheme extends HighContrastTheme implements ITheme { +class DarkHighContrastTheme extends DarkTheme implements ITheme { public function getId(): string { return 'dark-highcontrast'; @@ -48,12 +48,51 @@ class DarkHighContrastTheme extends HighContrastTheme implements ITheme { return $this->l->t('Similar to the high contrast mode, but with dark colours.'); } + /** + * Try to keep this consistent with HighContrastTheme + */ public function getCSSVariables(): array { $variables = parent::getCSSVariables(); + $colorMainText = '#ffffff'; + $colorMainBackground = '#000000'; + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorMainText)); - // FIXME … - $variables = $variables; + $variables['--color-main-background'] = $colorMainBackground; + $variables['--color-main-text'] = $colorMainText; + + $variables['--color-background-dark'] = $this->util->lighten($colorMainBackground, 30); + $variables['--color-background-darker'] = $this->util->lighten($colorMainBackground, 30); + + $variables['--color-placeholder-light'] = $this->util->lighten($colorMainBackground, 30); + $variables['--color-placeholder-dark'] = $this->util->lighten($colorMainBackground, 45); + + $variables['--color-text-maxcontrast'] = $colorMainText; + $variables['--color-text-light'] = $colorMainText; + $variables['--color-text-lighter'] = $colorMainText; + + // used for the icon loading animation + $variables['--color-loading-light'] = '#000000'; + $variables['--color-loading-dark'] = '#dddddd'; + + + $variables['--color-box-shadow-rgb'] = $colorBoxShadowRGB; + $variables['--color-box-shadow'] = $colorBoxShadowRGB; + + + $variables['--color-border'] = $this->util->lighten($colorMainBackground, 50); + $variables['--color-border-dark'] = $this->util->lighten($colorMainBackground, 50); return $variables; } + + public function getCustomCss(): string { + return " + [class^='icon-'], [class*=' icon-'], + .action, + #appmenu li a, + .menutoggle { + opacity: 1 !important; + } + "; + } } diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 3b194a36546..7561bb16ecd 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -35,7 +35,6 @@ use OCP\IURLGenerator; class DefaultTheme implements ITheme { public Util $util; public ThemingDefaults $themingDefaults; - public IURLGenerator $urlGenerator; public ImageManager $imageManager; public IConfig $config; public IL10N $l; @@ -196,4 +195,8 @@ class DefaultTheme implements ITheme { return $variables; } + + public function getCustomCss(): string { + return ''; + } } diff --git a/apps/theming/lib/Themes/DyslexiaFont.php b/apps/theming/lib/Themes/DyslexiaFont.php index 460147b9fa3..50284d33b9d 100644 --- a/apps/theming/lib/Themes/DyslexiaFont.php +++ b/apps/theming/lib/Themes/DyslexiaFont.php @@ -58,18 +58,27 @@ class DyslexiaFont extends DefaultTheme implements ITheme { return $variables; } -} -// @font-face { -// font-family: 'OpenDyslexic'; -// font-style: normal; -// font-weight: 400; -// src: url('../fonts/OpenDyslexic-Regular.woff') format('woff'); -// } + public function getCustomCss(): string { + 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'); + } + + @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'); + } + "; + } +} -// @font-face { -// font-family: 'OpenDyslexic'; -// font-style: normal; -// font-weight: 700; -// src: url('../fonts/OpenDyslexic-Bold.woff') format('woff'); -// } diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php index 67276e4ef00..77239f2076c 100644 --- a/apps/theming/lib/Themes/HighContrastTheme.php +++ b/apps/theming/lib/Themes/HighContrastTheme.php @@ -50,10 +50,42 @@ class HighContrastTheme extends DefaultTheme implements ITheme { public function getCSSVariables(): array { $variables = parent::getCSSVariables(); + $colorMainText = '#000000'; + $colorMainBackground = '#ffffff'; - // FIXME … - $variables = $variables; + $variables['--color-main-background'] = $colorMainBackground; + $variables['--color-main-text'] = $colorMainText; + + $variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30); + $variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30); + + $variables['--color-placeholder-light'] = $this->util->darken($colorMainBackground, 30); + $variables['--color-placeholder-dark'] = $this->util->darken($colorMainBackground, 45); + + $variables['--color-text-maxcontrast'] = 'var(--color-main-text)'; + $variables['--color-text-light'] = 'var(--color-main-text)'; + $variables['--color-text-lighter'] = 'var(--color-main-text)'; + + // used for the icon loading animation + $variables['--color-loading-light'] = '#dddddd'; + $variables['--color-loading-dark'] = '#000000'; + + $variables['--color-box-shadow'] = 'var(--color-main-text)'; + + $variables['--color-border'] = $this->util->darken($colorMainBackground, 50); + $variables['--color-border-dark'] = $this->util->darken($colorMainBackground, 50); return $variables; } + + public function getCustomCss(): string { + return " + [class^='icon-'], [class*=' icon-'], + .action, + #appmenu li a, + .menutoggle { + opacity: 1 !important; + } + "; + } } |