nextcloud /
server
@@ -20,244 +20,244 @@ |
||
| 20 | 20 | use OCP\IUserSession; |
| 21 | 21 | |
| 22 | 22 | class DefaultTheme implements ITheme { |
| 23 | - use CommonThemeTrait; |
|
| 24 | - |
|
| 25 | - public string $defaultPrimaryColor; |
|
| 26 | - public string $primaryColor; |
|
| 27 | - |
|
| 28 | - public function __construct( |
|
| 29 | - public Util $util, |
|
| 30 | - public ThemingDefaults $themingDefaults, |
|
| 31 | - public IUserSession $userSession, |
|
| 32 | - public IURLGenerator $urlGenerator, |
|
| 33 | - public ImageManager $imageManager, |
|
| 34 | - public IConfig $config, |
|
| 35 | - public IL10N $l, |
|
| 36 | - public IAppManager $appManager, |
|
| 37 | - private ?IRequest $request, |
|
| 38 | - ) { |
|
| 39 | - $this->defaultPrimaryColor = $this->themingDefaults->getDefaultColorPrimary(); |
|
| 40 | - $this->primaryColor = $this->themingDefaults->getColorPrimary(); |
|
| 41 | - } |
|
| 42 | - |
|
| 43 | - public function getId(): string { |
|
| 44 | - return 'default'; |
|
| 45 | - } |
|
| 46 | - |
|
| 47 | - public function getType(): int { |
|
| 48 | - return ITheme::TYPE_THEME; |
|
| 49 | - } |
|
| 50 | - |
|
| 51 | - public function getTitle(): string { |
|
| 52 | - return $this->l->t('System default theme'); |
|
| 53 | - } |
|
| 54 | - |
|
| 55 | - public function getEnableLabel(): string { |
|
| 56 | - return $this->l->t('Enable the system default'); |
|
| 57 | - } |
|
| 58 | - |
|
| 59 | - public function getDescription(): string { |
|
| 60 | - return $this->l->t('Using the default system appearance.'); |
|
| 61 | - } |
|
| 62 | - |
|
| 63 | - public function getMediaQuery(): string { |
|
| 64 | - return ''; |
|
| 65 | - } |
|
| 66 | - |
|
| 67 | - public function getMeta(): array { |
|
| 68 | - return []; |
|
| 69 | - } |
|
| 70 | - |
|
| 71 | - public function getCSSVariables(): array { |
|
| 72 | - $colorMainText = '#222222'; |
|
| 73 | - // Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover |
|
| 74 | - $colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark |
|
| 75 | - $colorMainBackground = '#ffffff'; |
|
| 76 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 77 | - $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 78 | - $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 79 | - |
|
| 80 | - /* |
|
| 23 | + use CommonThemeTrait; |
|
| 24 | + |
|
| 25 | + public string $defaultPrimaryColor; |
|
| 26 | + public string $primaryColor; |
|
| 27 | + |
|
| 28 | + public function __construct( |
|
| 29 | + public Util $util, |
|
| 30 | + public ThemingDefaults $themingDefaults, |
|
| 31 | + public IUserSession $userSession, |
|
| 32 | + public IURLGenerator $urlGenerator, |
|
| 33 | + public ImageManager $imageManager, |
|
| 34 | + public IConfig $config, |
|
| 35 | + public IL10N $l, |
|
| 36 | + public IAppManager $appManager, |
|
| 37 | + private ?IRequest $request, |
|
| 38 | + ) { |
|
| 39 | + $this->defaultPrimaryColor = $this->themingDefaults->getDefaultColorPrimary(); |
|
| 40 | + $this->primaryColor = $this->themingDefaults->getColorPrimary(); |
|
| 41 | + } |
|
| 42 | + |
|
| 43 | + public function getId(): string { |
|
| 44 | + return 'default'; |
|
| 45 | + } |
|
| 46 | + |
|
| 47 | + public function getType(): int { |
|
| 48 | + return ITheme::TYPE_THEME; |
|
| 49 | + } |
|
| 50 | + |
|
| 51 | + public function getTitle(): string { |
|
| 52 | + return $this->l->t('System default theme'); |
|
| 53 | + } |
|
| 54 | + |
|
| 55 | + public function getEnableLabel(): string { |
|
| 56 | + return $this->l->t('Enable the system default'); |
|
| 57 | + } |
|
| 58 | + |
|
| 59 | + public function getDescription(): string { |
|
| 60 | + return $this->l->t('Using the default system appearance.'); |
|
| 61 | + } |
|
| 62 | + |
|
| 63 | + public function getMediaQuery(): string { |
|
| 64 | + return ''; |
|
| 65 | + } |
|
| 66 | + |
|
| 67 | + public function getMeta(): array { |
|
| 68 | + return []; |
|
| 69 | + } |
|
| 70 | + |
|
| 71 | + public function getCSSVariables(): array { |
|
| 72 | + $colorMainText = '#222222'; |
|
| 73 | + // Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover |
|
| 74 | + $colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark |
|
| 75 | + $colorMainBackground = '#ffffff'; |
|
| 76 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 77 | + $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 78 | + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 79 | + |
|
| 80 | + /* |
|
| 81 | 81 | colorX: The background color for e.g. buttons and note-card |
| 82 | 82 | colorXText: The text color on that background |
| 83 | 83 | colorXElement: When that color needs to have element contrast like borders |
| 84 | 84 | */ |
| 85 | - $colorError = '#FFE7E7'; |
|
| 86 | - $colorErrorText = '#8A0000'; |
|
| 87 | - $colorErrorElement = '#c90000'; |
|
| 88 | - $colorWarning = '#FFEEC5'; |
|
| 89 | - $colorWarningText = '#664700'; |
|
| 90 | - $colorWarningElement = '#BF7900'; |
|
| 91 | - $colorSuccess = '#D8F3DA'; |
|
| 92 | - $colorSuccessText = '#005416'; |
|
| 93 | - $colorSuccessElement = '#099f05'; |
|
| 94 | - $colorInfo = '#D5F1FA'; |
|
| 95 | - $colorInfoText = '#0066AC'; |
|
| 96 | - $colorInfoElement = '#0077C7'; |
|
| 97 | - |
|
| 98 | - $user = $this->userSession->getUser(); |
|
| 99 | - // Chromium based browsers currently (2024) have huge performance issues with blur filters |
|
| 100 | - $isChromium = $this->request !== null && $this->request->isUserAgent([Request::USER_AGENT_CHROME, Request::USER_AGENT_MS_EDGE]); |
|
| 101 | - // Ignore MacOS because they always have hardware accelartion |
|
| 102 | - $isChromium = $isChromium && !$this->request->isUserAgent(['/Macintosh/']); |
|
| 103 | - // Allow to force the blur filter |
|
| 104 | - $forceEnableBlur = $user === null ? false : $this->config->getUserValue( |
|
| 105 | - $user->getUID(), |
|
| 106 | - 'theming', |
|
| 107 | - 'force_enable_blur_filter', |
|
| 108 | - ); |
|
| 109 | - $workingBlur = match($forceEnableBlur) { |
|
| 110 | - 'yes' => true, |
|
| 111 | - 'no' => false, |
|
| 112 | - default => !$isChromium |
|
| 113 | - }; |
|
| 114 | - |
|
| 115 | - $variables = [ |
|
| 116 | - '--color-main-background' => $colorMainBackground, |
|
| 117 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 118 | - '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
|
| 119 | - '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)', |
|
| 120 | - '--filter-background-blur' => $workingBlur ? 'blur(25px)' : 'none', |
|
| 121 | - |
|
| 122 | - // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
|
| 123 | - '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
|
| 124 | - |
|
| 125 | - // used for different active/hover/focus/disabled states |
|
| 126 | - '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
|
| 127 | - '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
|
| 128 | - '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
|
| 129 | - |
|
| 130 | - '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
|
| 131 | - '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
|
| 132 | - |
|
| 133 | - // max contrast for WCAG compliance |
|
| 134 | - '--color-main-text' => $colorMainText, |
|
| 135 | - '--color-text-maxcontrast' => $colorTextMaxcontrast, |
|
| 136 | - '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
|
| 137 | - '--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7), |
|
| 138 | - '--color-text-error' => $this->util->darken($colorErrorElement, 2), |
|
| 139 | - '--color-text-success' => $this->util->darken($colorSuccessElement, 10), |
|
| 140 | - |
|
| 141 | - // border colors |
|
| 142 | - '--color-border' => $this->util->darken($colorMainBackground, 7), |
|
| 143 | - '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
|
| 144 | - '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51), |
|
| 145 | - '--color-border-error' => 'var(--color-element-error)', |
|
| 146 | - '--color-border-success' => 'var(--color-element-success)', |
|
| 147 | - |
|
| 148 | - // special colors for elements (providing corresponding contrast) e.g. icons |
|
| 149 | - '--color-element-error' => $colorErrorElement, |
|
| 150 | - '--color-element-info' => $colorInfoElement, |
|
| 151 | - '--color-element-success' => $colorSuccessElement, |
|
| 152 | - '--color-element-warning' => $colorWarningElement, |
|
| 153 | - |
|
| 154 | - // error/warning/success/info feedback colors |
|
| 155 | - '--color-error' => $colorError, |
|
| 156 | - '--color-error-hover' => $this->util->darken($colorError, 7), |
|
| 157 | - '--color-error-text' => $colorErrorText, |
|
| 158 | - '--color-warning' => $colorWarning, |
|
| 159 | - '--color-warning-hover' => $this->util->darken($colorWarning, 7), |
|
| 160 | - '--color-warning-text' => $colorWarningText, |
|
| 161 | - '--color-success' => $colorSuccess, |
|
| 162 | - '--color-success-hover' => $this->util->darken($colorSuccess, 7), |
|
| 163 | - '--color-success-text' => $colorSuccessText, |
|
| 164 | - '--color-info' => $colorInfo, |
|
| 165 | - '--color-info-hover' => $this->util->darken($colorInfo, 7), |
|
| 166 | - '--color-info-text' => $colorInfoText, |
|
| 167 | - '--color-favorite' => '#A37200', |
|
| 168 | - // deprecated |
|
| 169 | - '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), |
|
| 170 | - '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), |
|
| 171 | - '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), |
|
| 172 | - '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), |
|
| 173 | - |
|
| 174 | - // used for the icon loading animation |
|
| 175 | - '--color-loading-light' => '#cccccc', |
|
| 176 | - '--color-loading-dark' => '#444444', |
|
| 177 | - |
|
| 178 | - // Scrollbar |
|
| 179 | - '--color-scrollbar' => 'var(--color-border-maxcontrast) transparent', |
|
| 180 | - |
|
| 181 | - // Box shadow of elements |
|
| 182 | - '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 183 | - '--color-box-shadow' => 'rgba(var(--color-box-shadow-rgb), 0.5)', |
|
| 184 | - |
|
| 185 | - // Assistant colors (marking AI generated content) |
|
| 186 | - '--color-background-assistant' => '#F6F5FF', // Background for AI generated content |
|
| 187 | - '--color-border-assistant' => 'linear-gradient(125deg, #7398FE 50%, #6104A4 125%)', // Border for AI generated content |
|
| 188 | - '--color-element-assistant' => 'linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%)', // Background of primary buttons to interact with the Assistant (e.g. generate content) |
|
| 189 | - '--color-element-assistant-icon' => 'linear-gradient(285deg, #9669D3 15%, #00679E 40%, #492083 80%)', // The color used for the Assistant icon |
|
| 190 | - |
|
| 191 | - '--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'", |
|
| 192 | - '--default-font-size' => '15px', |
|
| 193 | - '--font-size-small' => '13px', |
|
| 194 | - // 1.5 * font-size for accessibility |
|
| 195 | - '--default-line-height' => '1.5', |
|
| 196 | - |
|
| 197 | - // TODO: support "(prefers-reduced-motion)" |
|
| 198 | - '--animation-quick' => '100ms', |
|
| 199 | - '--animation-slow' => '300ms', |
|
| 200 | - |
|
| 201 | - // Default variables -------------------------------------------- |
|
| 202 | - // Border width for input elements such as text fields and selects |
|
| 203 | - '--border-width-input' => '1px', |
|
| 204 | - '--border-width-input-focused' => '2px', |
|
| 205 | - |
|
| 206 | - // Border radii (new values) |
|
| 207 | - '--border-radius-small' => '4px', // For smaller elements |
|
| 208 | - '--border-radius-element' => '8px', // For interactive elements such as buttons, input, navigation and list items |
|
| 209 | - '--border-radius-container' => '12px', // For smaller containers like action menus |
|
| 210 | - '--border-radius-container-large' => '16px', // For bigger containers like body or modals |
|
| 211 | - |
|
| 212 | - // Border radii (deprecated) |
|
| 213 | - '--border-radius' => 'var(--border-radius-small)', |
|
| 214 | - '--border-radius-large' => 'var(--border-radius-element)', |
|
| 215 | - '--border-radius-rounded' => '28px', |
|
| 216 | - '--border-radius-pill' => '100px', |
|
| 217 | - |
|
| 218 | - '--default-clickable-area' => '34px', |
|
| 219 | - '--clickable-area-large' => '48px', |
|
| 220 | - '--clickable-area-small' => '24px', |
|
| 221 | - |
|
| 222 | - '--default-grid-baseline' => '4px', |
|
| 223 | - |
|
| 224 | - // header / navigation bar |
|
| 225 | - '--header-height' => '50px', |
|
| 226 | - '--header-menu-item-height' => '44px', |
|
| 227 | - /* An alpha mask to be applied to all icons on the navigation bar (header menu). |
|
| 85 | + $colorError = '#FFE7E7'; |
|
| 86 | + $colorErrorText = '#8A0000'; |
|
| 87 | + $colorErrorElement = '#c90000'; |
|
| 88 | + $colorWarning = '#FFEEC5'; |
|
| 89 | + $colorWarningText = '#664700'; |
|
| 90 | + $colorWarningElement = '#BF7900'; |
|
| 91 | + $colorSuccess = '#D8F3DA'; |
|
| 92 | + $colorSuccessText = '#005416'; |
|
| 93 | + $colorSuccessElement = '#099f05'; |
|
| 94 | + $colorInfo = '#D5F1FA'; |
|
| 95 | + $colorInfoText = '#0066AC'; |
|
| 96 | + $colorInfoElement = '#0077C7'; |
|
| 97 | + |
|
| 98 | + $user = $this->userSession->getUser(); |
|
| 99 | + // Chromium based browsers currently (2024) have huge performance issues with blur filters |
|
| 100 | + $isChromium = $this->request !== null && $this->request->isUserAgent([Request::USER_AGENT_CHROME, Request::USER_AGENT_MS_EDGE]); |
|
| 101 | + // Ignore MacOS because they always have hardware accelartion |
|
| 102 | + $isChromium = $isChromium && !$this->request->isUserAgent(['/Macintosh/']); |
|
| 103 | + // Allow to force the blur filter |
|
| 104 | + $forceEnableBlur = $user === null ? false : $this->config->getUserValue( |
|
| 105 | + $user->getUID(), |
|
| 106 | + 'theming', |
|
| 107 | + 'force_enable_blur_filter', |
|
| 108 | + ); |
|
| 109 | + $workingBlur = match($forceEnableBlur) { |
|
| 110 | + 'yes' => true, |
|
| 111 | + 'no' => false, |
|
| 112 | + default => !$isChromium |
|
| 113 | + }; |
|
| 114 | + |
|
| 115 | + $variables = [ |
|
| 116 | + '--color-main-background' => $colorMainBackground, |
|
| 117 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 118 | + '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
|
| 119 | + '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)', |
|
| 120 | + '--filter-background-blur' => $workingBlur ? 'blur(25px)' : 'none', |
|
| 121 | + |
|
| 122 | + // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
|
| 123 | + '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
|
| 124 | + |
|
| 125 | + // used for different active/hover/focus/disabled states |
|
| 126 | + '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
|
| 127 | + '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
|
| 128 | + '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
|
| 129 | + |
|
| 130 | + '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
|
| 131 | + '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
|
| 132 | + |
|
| 133 | + // max contrast for WCAG compliance |
|
| 134 | + '--color-main-text' => $colorMainText, |
|
| 135 | + '--color-text-maxcontrast' => $colorTextMaxcontrast, |
|
| 136 | + '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
|
| 137 | + '--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7), |
|
| 138 | + '--color-text-error' => $this->util->darken($colorErrorElement, 2), |
|
| 139 | + '--color-text-success' => $this->util->darken($colorSuccessElement, 10), |
|
| 140 | + |
|
| 141 | + // border colors |
|
| 142 | + '--color-border' => $this->util->darken($colorMainBackground, 7), |
|
| 143 | + '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
|
| 144 | + '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51), |
|
| 145 | + '--color-border-error' => 'var(--color-element-error)', |
|
| 146 | + '--color-border-success' => 'var(--color-element-success)', |
|
| 147 | + |
|
| 148 | + // special colors for elements (providing corresponding contrast) e.g. icons |
|
| 149 | + '--color-element-error' => $colorErrorElement, |
|
| 150 | + '--color-element-info' => $colorInfoElement, |
|
| 151 | + '--color-element-success' => $colorSuccessElement, |
|
| 152 | + '--color-element-warning' => $colorWarningElement, |
|
| 153 | + |
|
| 154 | + // error/warning/success/info feedback colors |
|
| 155 | + '--color-error' => $colorError, |
|
| 156 | + '--color-error-hover' => $this->util->darken($colorError, 7), |
|
| 157 | + '--color-error-text' => $colorErrorText, |
|
| 158 | + '--color-warning' => $colorWarning, |
|
| 159 | + '--color-warning-hover' => $this->util->darken($colorWarning, 7), |
|
| 160 | + '--color-warning-text' => $colorWarningText, |
|
| 161 | + '--color-success' => $colorSuccess, |
|
| 162 | + '--color-success-hover' => $this->util->darken($colorSuccess, 7), |
|
| 163 | + '--color-success-text' => $colorSuccessText, |
|
| 164 | + '--color-info' => $colorInfo, |
|
| 165 | + '--color-info-hover' => $this->util->darken($colorInfo, 7), |
|
| 166 | + '--color-info-text' => $colorInfoText, |
|
| 167 | + '--color-favorite' => '#A37200', |
|
| 168 | + // deprecated |
|
| 169 | + '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), |
|
| 170 | + '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), |
|
| 171 | + '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), |
|
| 172 | + '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), |
|
| 173 | + |
|
| 174 | + // used for the icon loading animation |
|
| 175 | + '--color-loading-light' => '#cccccc', |
|
| 176 | + '--color-loading-dark' => '#444444', |
|
| 177 | + |
|
| 178 | + // Scrollbar |
|
| 179 | + '--color-scrollbar' => 'var(--color-border-maxcontrast) transparent', |
|
| 180 | + |
|
| 181 | + // Box shadow of elements |
|
| 182 | + '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 183 | + '--color-box-shadow' => 'rgba(var(--color-box-shadow-rgb), 0.5)', |
|
| 184 | + |
|
| 185 | + // Assistant colors (marking AI generated content) |
|
| 186 | + '--color-background-assistant' => '#F6F5FF', // Background for AI generated content |
|
| 187 | + '--color-border-assistant' => 'linear-gradient(125deg, #7398FE 50%, #6104A4 125%)', // Border for AI generated content |
|
| 188 | + '--color-element-assistant' => 'linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%)', // Background of primary buttons to interact with the Assistant (e.g. generate content) |
|
| 189 | + '--color-element-assistant-icon' => 'linear-gradient(285deg, #9669D3 15%, #00679E 40%, #492083 80%)', // The color used for the Assistant icon |
|
| 190 | + |
|
| 191 | + '--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'", |
|
| 192 | + '--default-font-size' => '15px', |
|
| 193 | + '--font-size-small' => '13px', |
|
| 194 | + // 1.5 * font-size for accessibility |
|
| 195 | + '--default-line-height' => '1.5', |
|
| 196 | + |
|
| 197 | + // TODO: support "(prefers-reduced-motion)" |
|
| 198 | + '--animation-quick' => '100ms', |
|
| 199 | + '--animation-slow' => '300ms', |
|
| 200 | + |
|
| 201 | + // Default variables -------------------------------------------- |
|
| 202 | + // Border width for input elements such as text fields and selects |
|
| 203 | + '--border-width-input' => '1px', |
|
| 204 | + '--border-width-input-focused' => '2px', |
|
| 205 | + |
|
| 206 | + // Border radii (new values) |
|
| 207 | + '--border-radius-small' => '4px', // For smaller elements |
|
| 208 | + '--border-radius-element' => '8px', // For interactive elements such as buttons, input, navigation and list items |
|
| 209 | + '--border-radius-container' => '12px', // For smaller containers like action menus |
|
| 210 | + '--border-radius-container-large' => '16px', // For bigger containers like body or modals |
|
| 211 | + |
|
| 212 | + // Border radii (deprecated) |
|
| 213 | + '--border-radius' => 'var(--border-radius-small)', |
|
| 214 | + '--border-radius-large' => 'var(--border-radius-element)', |
|
| 215 | + '--border-radius-rounded' => '28px', |
|
| 216 | + '--border-radius-pill' => '100px', |
|
| 217 | + |
|
| 218 | + '--default-clickable-area' => '34px', |
|
| 219 | + '--clickable-area-large' => '48px', |
|
| 220 | + '--clickable-area-small' => '24px', |
|
| 221 | + |
|
| 222 | + '--default-grid-baseline' => '4px', |
|
| 223 | + |
|
| 224 | + // header / navigation bar |
|
| 225 | + '--header-height' => '50px', |
|
| 226 | + '--header-menu-item-height' => '44px', |
|
| 227 | + /* An alpha mask to be applied to all icons on the navigation bar (header menu). |
|
| 228 | 228 | * Icons are have a size of 20px but usually we use MDI which have a content of 16px so 2px padding top bottom, |
| 229 | 229 | * for better gradient we must at first begin at those 2px (10% of height) as start and stop positions. |
| 230 | 230 | */ |
| 231 | - '--header-menu-icon-mask' => 'linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha', |
|
| 232 | - |
|
| 233 | - // various structure data |
|
| 234 | - '--navigation-width' => '300px', |
|
| 235 | - '--sidebar-min-width' => '300px', |
|
| 236 | - '--sidebar-max-width' => '500px', |
|
| 237 | - |
|
| 238 | - // Border radius of the body container |
|
| 239 | - '--body-container-radius' => 'var(--border-radius-container-large)', |
|
| 240 | - // Margin of the body container |
|
| 241 | - '--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)', |
|
| 242 | - // Height of the body container to fully fill the view port |
|
| 243 | - '--body-height' => 'calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin))', |
|
| 244 | - |
|
| 245 | - // mobile. Keep in sync with core/src/init.js |
|
| 246 | - '--breakpoint-mobile' => '1024px', |
|
| 247 | - '--background-invert-if-dark' => 'no', |
|
| 248 | - '--background-invert-if-bright' => 'invert(100%)', |
|
| 249 | - '--background-image-invert-if-bright' => 'no', |
|
| 250 | - ]; |
|
| 251 | - |
|
| 252 | - // Primary variables |
|
| 253 | - $variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText)); |
|
| 254 | - $variables = array_merge($variables, $this->generateGlobalBackgroundVariables()); |
|
| 255 | - $variables = array_merge($variables, $this->generateUserBackgroundVariables()); |
|
| 256 | - |
|
| 257 | - return $variables; |
|
| 258 | - } |
|
| 259 | - |
|
| 260 | - public function getCustomCss(): string { |
|
| 261 | - return ''; |
|
| 262 | - } |
|
| 231 | + '--header-menu-icon-mask' => 'linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha', |
|
| 232 | + |
|
| 233 | + // various structure data |
|
| 234 | + '--navigation-width' => '300px', |
|
| 235 | + '--sidebar-min-width' => '300px', |
|
| 236 | + '--sidebar-max-width' => '500px', |
|
| 237 | + |
|
| 238 | + // Border radius of the body container |
|
| 239 | + '--body-container-radius' => 'var(--border-radius-container-large)', |
|
| 240 | + // Margin of the body container |
|
| 241 | + '--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)', |
|
| 242 | + // Height of the body container to fully fill the view port |
|
| 243 | + '--body-height' => 'calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin))', |
|
| 244 | + |
|
| 245 | + // mobile. Keep in sync with core/src/init.js |
|
| 246 | + '--breakpoint-mobile' => '1024px', |
|
| 247 | + '--background-invert-if-dark' => 'no', |
|
| 248 | + '--background-invert-if-bright' => 'invert(100%)', |
|
| 249 | + '--background-image-invert-if-bright' => 'no', |
|
| 250 | + ]; |
|
| 251 | + |
|
| 252 | + // Primary variables |
|
| 253 | + $variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText)); |
|
| 254 | + $variables = array_merge($variables, $this->generateGlobalBackgroundVariables()); |
|
| 255 | + $variables = array_merge($variables, $this->generateUserBackgroundVariables()); |
|
| 256 | + |
|
| 257 | + return $variables; |
|
| 258 | + } |
|
| 259 | + |
|
| 260 | + public function getCustomCss(): string { |
|
| 261 | + return ''; |
|
| 262 | + } |
|
| 263 | 263 | } |
@@ -11,126 +11,126 @@ |
||
| 11 | 11 | |
| 12 | 12 | class DarkTheme extends DefaultTheme implements ITheme { |
| 13 | 13 | |
| 14 | - protected bool $isDarkVariant = true; |
|
| 15 | - |
|
| 16 | - public function getId(): string { |
|
| 17 | - return 'dark'; |
|
| 18 | - } |
|
| 19 | - |
|
| 20 | - public function getTitle(): string { |
|
| 21 | - return $this->l->t('Dark theme'); |
|
| 22 | - } |
|
| 23 | - |
|
| 24 | - public function getEnableLabel(): string { |
|
| 25 | - return $this->l->t('Enable dark theme'); |
|
| 26 | - } |
|
| 27 | - |
|
| 28 | - public function getDescription(): string { |
|
| 29 | - return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.'); |
|
| 30 | - } |
|
| 31 | - |
|
| 32 | - public function getMediaQuery(): string { |
|
| 33 | - return '(prefers-color-scheme: dark)'; |
|
| 34 | - } |
|
| 35 | - |
|
| 36 | - public function getMeta(): array { |
|
| 37 | - // https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme |
|
| 38 | - return [[ |
|
| 39 | - 'name' => 'color-scheme', |
|
| 40 | - 'content' => 'dark', |
|
| 41 | - ]]; |
|
| 42 | - } |
|
| 43 | - |
|
| 44 | - public function getCSSVariables(): array { |
|
| 45 | - $defaultVariables = parent::getCSSVariables(); |
|
| 46 | - |
|
| 47 | - $colorMainText = '#EBEBEB'; |
|
| 48 | - $colorMainBackground = '#171717'; |
|
| 49 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 50 | - $colorTextMaxcontrast = $this->util->darken($colorMainText, 32); |
|
| 51 | - |
|
| 52 | - $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 53 | - $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 54 | - |
|
| 55 | - $colorError = '#552121'; |
|
| 56 | - $colorErrorText = '#FFCCCC'; |
|
| 57 | - $colorErrorElement = '#FF5050'; |
|
| 58 | - $colorWarning = '#3D3010'; |
|
| 59 | - $colorWarningText = '#FFEEC5'; |
|
| 60 | - $colorWarningElement = '#FFCC00'; |
|
| 61 | - $colorSuccess = '#11321A'; |
|
| 62 | - $colorSuccessText = '#D5F2DC'; |
|
| 63 | - $colorSuccessElement = '#40A330'; |
|
| 64 | - $colorInfo = '#003553'; |
|
| 65 | - $colorInfoText = '#00AEFF'; |
|
| 66 | - $colorInfoElement = '#0099E0'; |
|
| 67 | - |
|
| 68 | - return array_merge( |
|
| 69 | - $defaultVariables, |
|
| 70 | - $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 71 | - [ |
|
| 72 | - '--color-main-text' => $colorMainText, |
|
| 73 | - '--color-main-background' => $colorMainBackground, |
|
| 74 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 75 | - '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .85)', |
|
| 76 | - |
|
| 77 | - '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), |
|
| 78 | - '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), |
|
| 79 | - '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), |
|
| 80 | - |
|
| 81 | - '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), |
|
| 82 | - '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), |
|
| 83 | - |
|
| 84 | - '--color-text-maxcontrast' => $colorTextMaxcontrast, |
|
| 85 | - '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
|
| 86 | - '--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 6), |
|
| 87 | - '--color-text-error' => $this->util->lighten($colorErrorElement, 6), |
|
| 88 | - '--color-text-success' => $this->util->lighten($colorSuccessElement, 6), |
|
| 89 | - |
|
| 90 | - '--color-border' => $this->util->lighten($colorMainBackground, 7), |
|
| 91 | - '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), |
|
| 92 | - '--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40), |
|
| 93 | - |
|
| 94 | - // Assistant colors (see default theme) |
|
| 95 | - '--color-background-assistant' => '#221D2B', |
|
| 96 | - '--color-border-assistant' => 'linear-gradient(125deg, #0C3A65 50%, #6204A5 125%)', |
|
| 97 | - |
|
| 98 | - '--color-element-error' => $colorErrorElement, |
|
| 99 | - '--color-element-info' => $colorInfoElement, |
|
| 100 | - '--color-element-success' => $colorSuccessElement, |
|
| 101 | - '--color-element-warning' => $colorWarningElement, |
|
| 102 | - |
|
| 103 | - |
|
| 104 | - |
|
| 105 | - '--color-error' => $colorError, |
|
| 106 | - '--color-error-hover' => $this->util->lighten($colorError, 10), |
|
| 107 | - '--color-error-text' => $colorErrorText, |
|
| 108 | - '--color-warning' => $colorWarning, |
|
| 109 | - '--color-warning-hover' => $this->util->lighten($colorWarning, 10), |
|
| 110 | - '--color-warning-text' => $colorWarningText, |
|
| 111 | - '--color-success' => $colorSuccess, |
|
| 112 | - '--color-success-hover' => $this->util->lighten($colorSuccess, 10), |
|
| 113 | - '--color-success-text' => $colorSuccessText, |
|
| 114 | - '--color-info' => $colorInfo, |
|
| 115 | - '--color-info-hover' => $this->util->lighten($colorInfo, 10), |
|
| 116 | - '--color-info-text' => $colorInfoText, |
|
| 117 | - '--color-favorite' => '#ffde00', |
|
| 118 | - // deprecated |
|
| 119 | - '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), |
|
| 120 | - '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), |
|
| 121 | - '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), |
|
| 122 | - '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), |
|
| 123 | - |
|
| 124 | - // used for the icon loading animation |
|
| 125 | - '--color-loading-light' => '#777', |
|
| 126 | - '--color-loading-dark' => '#CCC', |
|
| 127 | - |
|
| 128 | - '--color-box-shadow' => $colorBoxShadow, |
|
| 129 | - '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 130 | - |
|
| 131 | - '--background-invert-if-dark' => 'invert(100%)', |
|
| 132 | - '--background-invert-if-bright' => 'no', |
|
| 133 | - ] |
|
| 134 | - ); |
|
| 135 | - } |
|
| 14 | + protected bool $isDarkVariant = true; |
|
| 15 | + |
|
| 16 | + public function getId(): string { |
|
| 17 | + return 'dark'; |
|
| 18 | + } |
|
| 19 | + |
|
| 20 | + public function getTitle(): string { |
|
| 21 | + return $this->l->t('Dark theme'); |
|
| 22 | + } |
|
| 23 | + |
|
| 24 | + public function getEnableLabel(): string { |
|
| 25 | + return $this->l->t('Enable dark theme'); |
|
| 26 | + } |
|
| 27 | + |
|
| 28 | + public function getDescription(): string { |
|
| 29 | + return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.'); |
|
| 30 | + } |
|
| 31 | + |
|
| 32 | + public function getMediaQuery(): string { |
|
| 33 | + return '(prefers-color-scheme: dark)'; |
|
| 34 | + } |
|
| 35 | + |
|
| 36 | + public function getMeta(): array { |
|
| 37 | + // https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme |
|
| 38 | + return [[ |
|
| 39 | + 'name' => 'color-scheme', |
|
| 40 | + 'content' => 'dark', |
|
| 41 | + ]]; |
|
| 42 | + } |
|
| 43 | + |
|
| 44 | + public function getCSSVariables(): array { |
|
| 45 | + $defaultVariables = parent::getCSSVariables(); |
|
| 46 | + |
|
| 47 | + $colorMainText = '#EBEBEB'; |
|
| 48 | + $colorMainBackground = '#171717'; |
|
| 49 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 50 | + $colorTextMaxcontrast = $this->util->darken($colorMainText, 32); |
|
| 51 | + |
|
| 52 | + $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 53 | + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 54 | + |
|
| 55 | + $colorError = '#552121'; |
|
| 56 | + $colorErrorText = '#FFCCCC'; |
|
| 57 | + $colorErrorElement = '#FF5050'; |
|
| 58 | + $colorWarning = '#3D3010'; |
|
| 59 | + $colorWarningText = '#FFEEC5'; |
|
| 60 | + $colorWarningElement = '#FFCC00'; |
|
| 61 | + $colorSuccess = '#11321A'; |
|
| 62 | + $colorSuccessText = '#D5F2DC'; |
|
| 63 | + $colorSuccessElement = '#40A330'; |
|
| 64 | + $colorInfo = '#003553'; |
|
| 65 | + $colorInfoText = '#00AEFF'; |
|
| 66 | + $colorInfoElement = '#0099E0'; |
|
| 67 | + |
|
| 68 | + return array_merge( |
|
| 69 | + $defaultVariables, |
|
| 70 | + $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 71 | + [ |
|
| 72 | + '--color-main-text' => $colorMainText, |
|
| 73 | + '--color-main-background' => $colorMainBackground, |
|
| 74 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 75 | + '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .85)', |
|
| 76 | + |
|
| 77 | + '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), |
|
| 78 | + '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), |
|
| 79 | + '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), |
|
| 80 | + |
|
| 81 | + '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), |
|
| 82 | + '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), |
|
| 83 | + |
|
| 84 | + '--color-text-maxcontrast' => $colorTextMaxcontrast, |
|
| 85 | + '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
|
| 86 | + '--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 6), |
|
| 87 | + '--color-text-error' => $this->util->lighten($colorErrorElement, 6), |
|
| 88 | + '--color-text-success' => $this->util->lighten($colorSuccessElement, 6), |
|
| 89 | + |
|
| 90 | + '--color-border' => $this->util->lighten($colorMainBackground, 7), |
|
| 91 | + '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), |
|
| 92 | + '--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40), |
|
| 93 | + |
|
| 94 | + // Assistant colors (see default theme) |
|
| 95 | + '--color-background-assistant' => '#221D2B', |
|
| 96 | + '--color-border-assistant' => 'linear-gradient(125deg, #0C3A65 50%, #6204A5 125%)', |
|
| 97 | + |
|
| 98 | + '--color-element-error' => $colorErrorElement, |
|
| 99 | + '--color-element-info' => $colorInfoElement, |
|
| 100 | + '--color-element-success' => $colorSuccessElement, |
|
| 101 | + '--color-element-warning' => $colorWarningElement, |
|
| 102 | + |
|
| 103 | + |
|
| 104 | + |
|
| 105 | + '--color-error' => $colorError, |
|
| 106 | + '--color-error-hover' => $this->util->lighten($colorError, 10), |
|
| 107 | + '--color-error-text' => $colorErrorText, |
|
| 108 | + '--color-warning' => $colorWarning, |
|
| 109 | + '--color-warning-hover' => $this->util->lighten($colorWarning, 10), |
|
| 110 | + '--color-warning-text' => $colorWarningText, |
|
| 111 | + '--color-success' => $colorSuccess, |
|
| 112 | + '--color-success-hover' => $this->util->lighten($colorSuccess, 10), |
|
| 113 | + '--color-success-text' => $colorSuccessText, |
|
| 114 | + '--color-info' => $colorInfo, |
|
| 115 | + '--color-info-hover' => $this->util->lighten($colorInfo, 10), |
|
| 116 | + '--color-info-text' => $colorInfoText, |
|
| 117 | + '--color-favorite' => '#ffde00', |
|
| 118 | + // deprecated |
|
| 119 | + '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), |
|
| 120 | + '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), |
|
| 121 | + '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), |
|
| 122 | + '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), |
|
| 123 | + |
|
| 124 | + // used for the icon loading animation |
|
| 125 | + '--color-loading-light' => '#777', |
|
| 126 | + '--color-loading-dark' => '#CCC', |
|
| 127 | + |
|
| 128 | + '--color-box-shadow' => $colorBoxShadow, |
|
| 129 | + '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 130 | + |
|
| 131 | + '--background-invert-if-dark' => 'invert(100%)', |
|
| 132 | + '--background-invert-if-bright' => 'no', |
|
| 133 | + ] |
|
| 134 | + ); |
|
| 135 | + } |
|
| 136 | 136 | } |
@@ -12,222 +12,222 @@ |
||
| 12 | 12 | use Test\TestCase; |
| 13 | 13 | |
| 14 | 14 | class AccessibleThemeTestCase extends TestCase { |
| 15 | - protected ITheme $theme; |
|
| 16 | - protected Util $util; |
|
| 15 | + protected ITheme $theme; |
|
| 16 | + protected Util $util; |
|
| 17 | 17 | |
| 18 | - /** |
|
| 19 | - * Set to true to check for WCAG AAA level accessibility |
|
| 20 | - */ |
|
| 21 | - protected static bool $WCAGaaa = false; |
|
| 18 | + /** |
|
| 19 | + * Set to true to check for WCAG AAA level accessibility |
|
| 20 | + */ |
|
| 21 | + protected static bool $WCAGaaa = false; |
|
| 22 | 22 | |
| 23 | - public static function dataAccessibilityPairs(): array { |
|
| 24 | - $textContrast = static::$WCAGaaa ? 7.0 : 4.5; |
|
| 25 | - $elementContrast = 3.0; |
|
| 23 | + public static function dataAccessibilityPairs(): array { |
|
| 24 | + $textContrast = static::$WCAGaaa ? 7.0 : 4.5; |
|
| 25 | + $elementContrast = 3.0; |
|
| 26 | 26 | |
| 27 | - return [ |
|
| 28 | - 'primary-element on background' => [ |
|
| 29 | - [ |
|
| 30 | - '--color-primary-element', |
|
| 31 | - '--color-primary-element-hover', |
|
| 32 | - ], |
|
| 33 | - [ |
|
| 34 | - '--color-main-background', |
|
| 35 | - '--color-background-hover', |
|
| 36 | - '--color-background-dark', |
|
| 37 | - '--color-background-darker', |
|
| 38 | - '--color-main-background-blur', |
|
| 39 | - ], |
|
| 40 | - $elementContrast, |
|
| 41 | - ], |
|
| 42 | - 'favorite elements on background' => [ |
|
| 43 | - [ |
|
| 44 | - '--color-favorite', |
|
| 45 | - ], |
|
| 46 | - [ |
|
| 47 | - '--color-main-background', |
|
| 48 | - '--color-background-hover', |
|
| 49 | - '--color-background-dark', |
|
| 50 | - '--color-background-darker', |
|
| 51 | - '--color-main-background-blur', |
|
| 52 | - ], |
|
| 53 | - $elementContrast, |
|
| 54 | - ], |
|
| 55 | - 'border-colors' => [ |
|
| 56 | - [ |
|
| 57 | - '--color-border-maxcontrast', |
|
| 58 | - ], |
|
| 59 | - [ |
|
| 60 | - '--color-main-background', |
|
| 61 | - '--color-background-hover', |
|
| 62 | - '--color-background-dark', |
|
| 63 | - '--color-main-background-blur', |
|
| 64 | - ], |
|
| 65 | - $elementContrast, |
|
| 66 | - ], |
|
| 67 | - 'primary-element-text' => [ |
|
| 68 | - [ |
|
| 69 | - '--color-primary-element-text', |
|
| 70 | - '--color-primary-element-text-dark', |
|
| 71 | - ], |
|
| 72 | - [ |
|
| 73 | - '--color-primary-element', |
|
| 74 | - '--color-primary-element-hover', |
|
| 75 | - ], |
|
| 76 | - $textContrast, |
|
| 77 | - ], |
|
| 78 | - 'primary-element-light-text' => [ |
|
| 79 | - ['--color-primary-element-light-text'], |
|
| 80 | - [ |
|
| 81 | - '--color-primary-element-light', |
|
| 82 | - '--color-primary-element-light-hover', |
|
| 83 | - ], |
|
| 84 | - $textContrast, |
|
| 85 | - ], |
|
| 86 | - 'main-text' => [ |
|
| 87 | - ['--color-main-text'], |
|
| 88 | - [ |
|
| 89 | - '--color-main-background', |
|
| 90 | - '--color-background-hover', |
|
| 91 | - '--color-background-dark', |
|
| 92 | - '--color-background-darker', |
|
| 93 | - '--color-main-background-blur', |
|
| 94 | - ], |
|
| 95 | - $textContrast, |
|
| 96 | - ], |
|
| 97 | - 'max-contrast-text' => [ |
|
| 98 | - ['--color-text-maxcontrast'], |
|
| 99 | - [ |
|
| 100 | - '--color-main-background', |
|
| 101 | - '--color-background-hover', |
|
| 102 | - '--color-background-dark', |
|
| 103 | - ], |
|
| 104 | - $textContrast, |
|
| 105 | - ], |
|
| 106 | - 'max-contrast text-on blur' => [ |
|
| 107 | - ['--color-text-maxcontrast-background-blur'], |
|
| 108 | - [ |
|
| 109 | - '--color-main-background-blur', |
|
| 110 | - ], |
|
| 111 | - $textContrast, |
|
| 112 | - ], |
|
| 113 | - 'text-on-status-background' => [ |
|
| 114 | - [ |
|
| 115 | - '--color-main-text', |
|
| 116 | - '--color-text-maxcontrast', |
|
| 117 | - ], |
|
| 118 | - [ |
|
| 119 | - '--color-error', |
|
| 120 | - '--color-info', |
|
| 121 | - '--color-success', |
|
| 122 | - '--color-warning', |
|
| 123 | - ], |
|
| 124 | - $textContrast, |
|
| 125 | - ], |
|
| 126 | - 'text-on-status-background-hover' => [ |
|
| 127 | - [ |
|
| 128 | - '--color-main-text', |
|
| 129 | - ], |
|
| 130 | - [ |
|
| 131 | - '--color-error-hover', |
|
| 132 | - '--color-info-hover', |
|
| 133 | - '--color-success-hover', |
|
| 134 | - '--color-warning-hover', |
|
| 135 | - ], |
|
| 136 | - $textContrast, |
|
| 137 | - ], |
|
| 138 | - 'status-element-colors-on-background' => [ |
|
| 139 | - [ |
|
| 140 | - '--color-border-error', |
|
| 141 | - '--color-border-success', |
|
| 142 | - '--color-element-error', |
|
| 143 | - '--color-element-info', |
|
| 144 | - '--color-element-success', |
|
| 145 | - '--color-element-warning', |
|
| 146 | - ], |
|
| 147 | - [ |
|
| 148 | - '--color-main-background', |
|
| 149 | - '--color-background-hover', |
|
| 150 | - '--color-background-dark', |
|
| 151 | - ], |
|
| 152 | - $elementContrast, |
|
| 153 | - ], |
|
| 154 | - 'status-text-on-background' => [ |
|
| 155 | - [ |
|
| 156 | - '--color-text-error', |
|
| 157 | - '--color-text-success', |
|
| 158 | - ], |
|
| 159 | - [ |
|
| 160 | - '--color-main-background', |
|
| 161 | - '--color-background-hover', |
|
| 162 | - '--color-background-dark', |
|
| 163 | - '--color-main-background-blur', |
|
| 164 | - ], |
|
| 165 | - $textContrast, |
|
| 166 | - ], |
|
| 167 | - 'error-text-on-error-background' => [ |
|
| 168 | - ['--color-error-text'], |
|
| 169 | - [ |
|
| 170 | - '--color-error', |
|
| 171 | - '--color-error-hover', |
|
| 172 | - ], |
|
| 173 | - $textContrast, |
|
| 174 | - ], |
|
| 175 | - 'warning-text-on-warning-background' => [ |
|
| 176 | - ['--color-warning-text'], |
|
| 177 | - [ |
|
| 178 | - '--color-warning', |
|
| 179 | - '--color-warning-hover', |
|
| 180 | - ], |
|
| 181 | - $textContrast, |
|
| 182 | - ], |
|
| 183 | - 'success-text-on-success-background' => [ |
|
| 184 | - ['--color-success-text'], |
|
| 185 | - [ |
|
| 186 | - '--color-success', |
|
| 187 | - '--color-success-hover', |
|
| 188 | - ], |
|
| 189 | - $textContrast, |
|
| 190 | - ], |
|
| 191 | - 'text-on-assistant-background' => [ |
|
| 192 | - [ |
|
| 193 | - '--color-main-text', |
|
| 194 | - '--color-text-maxcontrast', |
|
| 195 | - ], |
|
| 196 | - [ |
|
| 197 | - '--color-background-assistant', |
|
| 198 | - ], |
|
| 199 | - $textContrast, |
|
| 200 | - ], |
|
| 201 | - ]; |
|
| 202 | - } |
|
| 27 | + return [ |
|
| 28 | + 'primary-element on background' => [ |
|
| 29 | + [ |
|
| 30 | + '--color-primary-element', |
|
| 31 | + '--color-primary-element-hover', |
|
| 32 | + ], |
|
| 33 | + [ |
|
| 34 | + '--color-main-background', |
|
| 35 | + '--color-background-hover', |
|
| 36 | + '--color-background-dark', |
|
| 37 | + '--color-background-darker', |
|
| 38 | + '--color-main-background-blur', |
|
| 39 | + ], |
|
| 40 | + $elementContrast, |
|
| 41 | + ], |
|
| 42 | + 'favorite elements on background' => [ |
|
| 43 | + [ |
|
| 44 | + '--color-favorite', |
|
| 45 | + ], |
|
| 46 | + [ |
|
| 47 | + '--color-main-background', |
|
| 48 | + '--color-background-hover', |
|
| 49 | + '--color-background-dark', |
|
| 50 | + '--color-background-darker', |
|
| 51 | + '--color-main-background-blur', |
|
| 52 | + ], |
|
| 53 | + $elementContrast, |
|
| 54 | + ], |
|
| 55 | + 'border-colors' => [ |
|
| 56 | + [ |
|
| 57 | + '--color-border-maxcontrast', |
|
| 58 | + ], |
|
| 59 | + [ |
|
| 60 | + '--color-main-background', |
|
| 61 | + '--color-background-hover', |
|
| 62 | + '--color-background-dark', |
|
| 63 | + '--color-main-background-blur', |
|
| 64 | + ], |
|
| 65 | + $elementContrast, |
|
| 66 | + ], |
|
| 67 | + 'primary-element-text' => [ |
|
| 68 | + [ |
|
| 69 | + '--color-primary-element-text', |
|
| 70 | + '--color-primary-element-text-dark', |
|
| 71 | + ], |
|
| 72 | + [ |
|
| 73 | + '--color-primary-element', |
|
| 74 | + '--color-primary-element-hover', |
|
| 75 | + ], |
|
| 76 | + $textContrast, |
|
| 77 | + ], |
|
| 78 | + 'primary-element-light-text' => [ |
|
| 79 | + ['--color-primary-element-light-text'], |
|
| 80 | + [ |
|
| 81 | + '--color-primary-element-light', |
|
| 82 | + '--color-primary-element-light-hover', |
|
| 83 | + ], |
|
| 84 | + $textContrast, |
|
| 85 | + ], |
|
| 86 | + 'main-text' => [ |
|
| 87 | + ['--color-main-text'], |
|
| 88 | + [ |
|
| 89 | + '--color-main-background', |
|
| 90 | + '--color-background-hover', |
|
| 91 | + '--color-background-dark', |
|
| 92 | + '--color-background-darker', |
|
| 93 | + '--color-main-background-blur', |
|
| 94 | + ], |
|
| 95 | + $textContrast, |
|
| 96 | + ], |
|
| 97 | + 'max-contrast-text' => [ |
|
| 98 | + ['--color-text-maxcontrast'], |
|
| 99 | + [ |
|
| 100 | + '--color-main-background', |
|
| 101 | + '--color-background-hover', |
|
| 102 | + '--color-background-dark', |
|
| 103 | + ], |
|
| 104 | + $textContrast, |
|
| 105 | + ], |
|
| 106 | + 'max-contrast text-on blur' => [ |
|
| 107 | + ['--color-text-maxcontrast-background-blur'], |
|
| 108 | + [ |
|
| 109 | + '--color-main-background-blur', |
|
| 110 | + ], |
|
| 111 | + $textContrast, |
|
| 112 | + ], |
|
| 113 | + 'text-on-status-background' => [ |
|
| 114 | + [ |
|
| 115 | + '--color-main-text', |
|
| 116 | + '--color-text-maxcontrast', |
|
| 117 | + ], |
|
| 118 | + [ |
|
| 119 | + '--color-error', |
|
| 120 | + '--color-info', |
|
| 121 | + '--color-success', |
|
| 122 | + '--color-warning', |
|
| 123 | + ], |
|
| 124 | + $textContrast, |
|
| 125 | + ], |
|
| 126 | + 'text-on-status-background-hover' => [ |
|
| 127 | + [ |
|
| 128 | + '--color-main-text', |
|
| 129 | + ], |
|
| 130 | + [ |
|
| 131 | + '--color-error-hover', |
|
| 132 | + '--color-info-hover', |
|
| 133 | + '--color-success-hover', |
|
| 134 | + '--color-warning-hover', |
|
| 135 | + ], |
|
| 136 | + $textContrast, |
|
| 137 | + ], |
|
| 138 | + 'status-element-colors-on-background' => [ |
|
| 139 | + [ |
|
| 140 | + '--color-border-error', |
|
| 141 | + '--color-border-success', |
|
| 142 | + '--color-element-error', |
|
| 143 | + '--color-element-info', |
|
| 144 | + '--color-element-success', |
|
| 145 | + '--color-element-warning', |
|
| 146 | + ], |
|
| 147 | + [ |
|
| 148 | + '--color-main-background', |
|
| 149 | + '--color-background-hover', |
|
| 150 | + '--color-background-dark', |
|
| 151 | + ], |
|
| 152 | + $elementContrast, |
|
| 153 | + ], |
|
| 154 | + 'status-text-on-background' => [ |
|
| 155 | + [ |
|
| 156 | + '--color-text-error', |
|
| 157 | + '--color-text-success', |
|
| 158 | + ], |
|
| 159 | + [ |
|
| 160 | + '--color-main-background', |
|
| 161 | + '--color-background-hover', |
|
| 162 | + '--color-background-dark', |
|
| 163 | + '--color-main-background-blur', |
|
| 164 | + ], |
|
| 165 | + $textContrast, |
|
| 166 | + ], |
|
| 167 | + 'error-text-on-error-background' => [ |
|
| 168 | + ['--color-error-text'], |
|
| 169 | + [ |
|
| 170 | + '--color-error', |
|
| 171 | + '--color-error-hover', |
|
| 172 | + ], |
|
| 173 | + $textContrast, |
|
| 174 | + ], |
|
| 175 | + 'warning-text-on-warning-background' => [ |
|
| 176 | + ['--color-warning-text'], |
|
| 177 | + [ |
|
| 178 | + '--color-warning', |
|
| 179 | + '--color-warning-hover', |
|
| 180 | + ], |
|
| 181 | + $textContrast, |
|
| 182 | + ], |
|
| 183 | + 'success-text-on-success-background' => [ |
|
| 184 | + ['--color-success-text'], |
|
| 185 | + [ |
|
| 186 | + '--color-success', |
|
| 187 | + '--color-success-hover', |
|
| 188 | + ], |
|
| 189 | + $textContrast, |
|
| 190 | + ], |
|
| 191 | + 'text-on-assistant-background' => [ |
|
| 192 | + [ |
|
| 193 | + '--color-main-text', |
|
| 194 | + '--color-text-maxcontrast', |
|
| 195 | + ], |
|
| 196 | + [ |
|
| 197 | + '--color-background-assistant', |
|
| 198 | + ], |
|
| 199 | + $textContrast, |
|
| 200 | + ], |
|
| 201 | + ]; |
|
| 202 | + } |
|
| 203 | 203 | |
| 204 | - #[\PHPUnit\Framework\Attributes\DataProvider('dataAccessibilityPairs')] |
|
| 205 | - public function testAccessibilityOfVariables(array $mainColors, array $backgroundColors, float $minContrast): void { |
|
| 206 | - if (!isset($this->theme)) { |
|
| 207 | - $this->markTestSkipped('You need to setup $this->theme in your setUp function'); |
|
| 208 | - } elseif (!isset($this->util)) { |
|
| 209 | - $this->markTestSkipped('You need to setup $this->util in your setUp function'); |
|
| 210 | - } |
|
| 204 | + #[\PHPUnit\Framework\Attributes\DataProvider('dataAccessibilityPairs')] |
|
| 205 | + public function testAccessibilityOfVariables(array $mainColors, array $backgroundColors, float $minContrast): void { |
|
| 206 | + if (!isset($this->theme)) { |
|
| 207 | + $this->markTestSkipped('You need to setup $this->theme in your setUp function'); |
|
| 208 | + } elseif (!isset($this->util)) { |
|
| 209 | + $this->markTestSkipped('You need to setup $this->util in your setUp function'); |
|
| 210 | + } |
|
| 211 | 211 | |
| 212 | - $variables = $this->theme->getCSSVariables(); |
|
| 212 | + $variables = $this->theme->getCSSVariables(); |
|
| 213 | 213 | |
| 214 | - // Blur effect does not work so we mockup the color - worst supported case is the default "clouds" background image (on dark themes the clouds with white color are bad on bright themes the primary color as sky is bad) |
|
| 215 | - $variables['--color-main-background-blur'] = $this->util->mix($variables['--color-main-background'], $this->util->isBrightColor($variables['--color-main-background']) ? '#000000' : '#ffffff', 75); |
|
| 214 | + // Blur effect does not work so we mockup the color - worst supported case is the default "clouds" background image (on dark themes the clouds with white color are bad on bright themes the primary color as sky is bad) |
|
| 215 | + $variables['--color-main-background-blur'] = $this->util->mix($variables['--color-main-background'], $this->util->isBrightColor($variables['--color-main-background']) ? '#000000' : '#ffffff', 75); |
|
| 216 | 216 | |
| 217 | - foreach ($backgroundColors as $background) { |
|
| 218 | - $matches = []; |
|
| 219 | - if (preg_match('/^var\\(([^)]+)\\)$/', $variables[$background], $matches) === 1) { |
|
| 220 | - $background = $matches[1]; |
|
| 221 | - } |
|
| 222 | - $this->assertStringStartsWith('#', $variables[$background], 'Is not a plain color variable - consider to remove or fix this test'); |
|
| 223 | - foreach ($mainColors as $main) { |
|
| 224 | - if (preg_match('/^var\\(([^)]+)\\)$/', $variables[$main], $matches) === 1) { |
|
| 225 | - $main = $matches[1]; |
|
| 226 | - } |
|
| 227 | - $this->assertStringStartsWith('#', $variables[$main], 'Is not a plain color variable - consider to remove or fix this test'); |
|
| 228 | - $realContrast = $this->util->colorContrast($variables[$main], $variables[$background]); |
|
| 229 | - $this->assertGreaterThanOrEqual($minContrast, $realContrast, "Contrast is not high enough for $main (" . $variables[$main] . ") on $background (" . $variables[$background] . ')'); |
|
| 230 | - } |
|
| 231 | - } |
|
| 232 | - } |
|
| 217 | + foreach ($backgroundColors as $background) { |
|
| 218 | + $matches = []; |
|
| 219 | + if (preg_match('/^var\\(([^)]+)\\)$/', $variables[$background], $matches) === 1) { |
|
| 220 | + $background = $matches[1]; |
|
| 221 | + } |
|
| 222 | + $this->assertStringStartsWith('#', $variables[$background], 'Is not a plain color variable - consider to remove or fix this test'); |
|
| 223 | + foreach ($mainColors as $main) { |
|
| 224 | + if (preg_match('/^var\\(([^)]+)\\)$/', $variables[$main], $matches) === 1) { |
|
| 225 | + $main = $matches[1]; |
|
| 226 | + } |
|
| 227 | + $this->assertStringStartsWith('#', $variables[$main], 'Is not a plain color variable - consider to remove or fix this test'); |
|
| 228 | + $realContrast = $this->util->colorContrast($variables[$main], $variables[$background]); |
|
| 229 | + $this->assertGreaterThanOrEqual($minContrast, $realContrast, "Contrast is not high enough for $main (" . $variables[$main] . ") on $background (" . $variables[$background] . ')'); |
|
| 230 | + } |
|
| 231 | + } |
|
| 232 | + } |
|
| 233 | 233 | } |
