diff options
20 files changed, 146 insertions, 33 deletions
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue index 4cc0d50346a..ef12d511fb9 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue @@ -161,6 +161,8 @@ export default { &__header { height: 70px; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; + background-color: var(--color-primary); + background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); span { bottom: 0; diff --git a/apps/theming/appinfo/routes.php b/apps/theming/appinfo/routes.php index c9a99a409ef..fa8dde90786 100644 --- a/apps/theming/appinfo/routes.php +++ b/apps/theming/appinfo/routes.php @@ -45,7 +45,7 @@ return [ 'verb' => 'POST' ], [ - 'name' => 'Theming#getThemeVariables', + 'name' => 'Theming#getThemeStylesheet', 'url' => '/theme/{themeId}.css', 'verb' => 'GET', ], diff --git a/apps/theming/fonts/OpenDyslexic-Bold.otf b/apps/theming/fonts/OpenDyslexic-Bold.otf Binary files differnew file mode 100644 index 00000000000..4c492e2fcc2 --- /dev/null +++ b/apps/theming/fonts/OpenDyslexic-Bold.otf diff --git a/apps/theming/fonts/OpenDyslexic-Bold.ttf b/apps/theming/fonts/OpenDyslexic-Bold.ttf Binary files differnew file mode 100644 index 00000000000..7c97eb4329b --- /dev/null +++ b/apps/theming/fonts/OpenDyslexic-Bold.ttf diff --git a/apps/theming/fonts/OpenDyslexic-Bold.woff b/apps/theming/fonts/OpenDyslexic-Bold.woff Binary files differnew file mode 100644 index 00000000000..755476f6b4a --- /dev/null +++ b/apps/theming/fonts/OpenDyslexic-Bold.woff diff --git a/apps/theming/fonts/OpenDyslexic-Regular.otf b/apps/theming/fonts/OpenDyslexic-Regular.otf Binary files differnew file mode 100644 index 00000000000..1226d2ab281 --- /dev/null +++ b/apps/theming/fonts/OpenDyslexic-Regular.otf diff --git a/apps/theming/fonts/OpenDyslexic-Regular.ttf b/apps/theming/fonts/OpenDyslexic-Regular.ttf Binary files differnew file mode 100644 index 00000000000..e7849348cdb --- /dev/null +++ b/apps/theming/fonts/OpenDyslexic-Regular.ttf diff --git a/apps/theming/fonts/OpenDyslexic-Regular.woff b/apps/theming/fonts/OpenDyslexic-Regular.woff Binary files differnew file mode 100644 index 00000000000..fdf9e37dd43 --- /dev/null +++ b/apps/theming/fonts/OpenDyslexic-Regular.woff diff --git a/apps/theming/img/dark-highcontrast.jpg b/apps/theming/img/dark-highcontrast.jpg Binary files differnew file mode 100644 index 00000000000..5fce8ef0851 --- /dev/null +++ b/apps/theming/img/dark-highcontrast.jpg diff --git a/apps/theming/img/highcontrast.jpg b/apps/theming/img/highcontrast.jpg Binary files differindex 8c55a7358b9..e9087e898ee 100644 --- a/apps/theming/img/highcontrast.jpg +++ b/apps/theming/img/highcontrast.jpg diff --git a/apps/theming/img/opendyslexic.jpg b/apps/theming/img/opendyslexic.jpg Binary files differindex db8e60f3658..f56ea33e6c4 100644 --- a/apps/theming/img/opendyslexic.jpg +++ b/apps/theming/img/opendyslexic.jpg 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; + } + "; + } } diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue index 78115021412..1fd6cb20866 100644 --- a/apps/theming/src/UserThemes.vue +++ b/apps/theming/src/UserThemes.vue @@ -1,5 +1,5 @@ <template> - <SettingsSection class="theming" :title="t('themes', 'Appaerance and accessibility')"> + <SettingsSection class="theming" :title="t('themes', 'Appearance and accessibility')"> <p v-html="description" /> <p v-html="descriptionDetail" /> @@ -166,9 +166,20 @@ export default { } &__preview-list { + --gap: 30px; + + display: grid; + margin-top: var(--gap); + column-gap: var(--gap); + row-gap: var(--gap); + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 1440px) { + .theming__preview-list { display: flex; flex-direction: column; - max-width: 800px; } } diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue index 997d66a037e..0ed7dfc7858 100644 --- a/apps/theming/src/components/ItemPreview.vue +++ b/apps/theming/src/components/ItemPreview.vue @@ -75,13 +75,15 @@ export default { } </script> <style lang="scss" scoped> +// We make previews on 16/10 screens +$ratio: 16; .theming__preview { + --ratio: 16; position: relative; display: flex; justify-content: flex-start; - height: 140px; - margin-top: 3em; + max-width: 800px; &, * { @@ -89,9 +91,10 @@ export default { } &-image { - flex-basis: 200px; + flex-basis: calc(16px * var(--ratio)); flex-shrink: 0; - margin-right: 30px; + height: calc(10px * var(--ratio)); + margin-right: var(--gap); border-radius: var(--border-radius); background-repeat: no-repeat; background-position: top left; @@ -108,12 +111,12 @@ export default { } } -@media (max-width: (1024 / 2)) { +@media (max-width: (1024px / 1.5)) { .theming__preview { - display: unset; + flex-direction: column; &-image { - height: 150px; + margin: 0; } } } |
