diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2023-10-25 13:57:28 +0200 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2023-10-27 12:56:23 +0200 |
| commit | 3676295f7b13852ec328e32f510aefd4c7b709c7 (patch) | |
| tree | 77236e44d27adfac9bb54c5bdae7210fbf333c88 /apps/theming/css | |
| parent | be129a7d1f256a9a6aeaadbd9355c088fe0df929 (diff) | |
| download | nextcloud-server-3676295f7b13852ec328e32f510aefd4c7b709c7.tar.gz nextcloud-server-3676295f7b13852ec328e32f510aefd4c7b709c7.zip | |
fix(theming): Ensure all text colors have enough contrast for accessibility
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'apps/theming/css')
| -rw-r--r-- | apps/theming/css/default.css | 32 |
1 files changed, 17 insertions, 15 deletions
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 571ae8a7829..8cc3eb2de32 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -6,14 +6,16 @@ --filter-background-blur: blur(25px); --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; --color-background-hover: #f5f5f5; + /** Can be used e.g. to colorize selected table rows */ --color-background-dark: #ededed; + /** This should only be used for elements, not as a text background! Otherwise it will not work for accessibility. */ --color-background-darker: #dbdbdb; --color-placeholder-light: #e6e6e6; --color-placeholder-dark: #cccccc; --color-main-text: #222222; - --color-text-maxcontrast: #707070; - --color-text-maxcontrast-default: #707070; - --color-text-maxcontrast-background-blur: #5e5e5e; + --color-text-maxcontrast: #6b6b6b; + --color-text-maxcontrast-default: #6b6b6b; + --color-text-maxcontrast-background-blur: #595959; /** @deprecated use ` --color-main-text` instead */ --color-text-light: var(--color-main-text); /** @deprecated use `--color-text-maxcontrast` instead */ @@ -26,7 +28,7 @@ --color-warning: #c28900; --color-warning-rgb: 194,137,0; --color-warning-hover: #cea032; - --color-warning-text: #996c00; + --color-warning-text: #8f6500; --color-success: #2d7b41; --color-success-rgb: 45,123,65; --color-success-hover: #448955; @@ -66,20 +68,20 @@ --background-invert-if-bright: invert(100%); --background-image-invert-if-bright: no; --primary-invert-if-bright: no; - --color-primary: #006aa3; + --color-primary: #006889; --color-primary-default: #0082c9; --color-primary-text: #ffffff; - --color-primary-hover: #3287b5; - --color-primary-light: #e5f0f5; - --color-primary-light-text: #002a41; - --color-primary-light-hover: #dbe5ea; - --color-primary-element: #006aa3; - --color-primary-element-hover: #1f7cae; + --color-primary-hover: #3286a0; + --color-primary-light: #e5eff3; + --color-primary-light-text: #002936; + --color-primary-light-hover: #dbe4e8; + --color-primary-element: #006889; + --color-primary-element-hover: #187694; --color-primary-element-text: #ffffff; - --color-primary-element-light: #e5f0f5; - --color-primary-element-light-hover: #dbe5ea; - --color-primary-element-light-text: #002a41; - --color-primary-element-text-dark: #ededed; + --color-primary-element-text-dark: #f0f0f0; + --color-primary-element-light: #e5eff3; + --color-primary-element-light-hover: #dbe4e8; + --color-primary-element-light-text: #002936; --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); --image-background-default: url('/apps/theming/img/background/kamil-porembinski-clouds.jpg'); --color-background-plain: #0082c9; |