Change instances of --color-text-lighter to -maxcontrast, -light to -main-text

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

apps/files/css/files.scss

@@ -791,7 +791,7 @@ table.dragshadow td.size {
 .notCreatable {
 	padding-left: 12px;
 	padding-top: 12px;
-	color: var(--color-text-lighter);
+	color: var(--color-text-maxcontrast);
 }
 
 #quota {

apps/settings/css/settings.scss

@@ -1577,7 +1577,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			> form {
 				grid-row: 1;
 				display: inline-flex;
-				color: var(--color-text-lighter);
+				color: var(--color-text-maxcontrast);
 				flex-grow: 1;
 
 				> input:not(:focus):not(:active) {

apps/settings/js/vue-editor.js

@@ -3308,7 +3308,7 @@ module.exports = exports;
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
 exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
-exports.push([module.i, "#editor-container[data-v-782c4aaa] {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  left: 0;\n  margin: 0 auto;\n  position: relative;\n  background-color: var(--color-main-background);\n}\n#editor-wrapper[data-v-782c4aaa] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n}\n#editor-wrapper .ProseMirror[data-v-782c4aaa] {\n    margin-top: 0 !important;\n}\n#editor-wrapper.icon-loading #editor[data-v-782c4aaa] {\n    opacity: 0.3;\n}\n#editor[data-v-782c4aaa], .editor[data-v-782c4aaa] {\n  background: var(--color-main-background);\n  color: var(--color-main-text);\n  background-clip: padding-box;\n  border-radius: var(--border-radius);\n  padding: 0;\n  position: relative;\n  overflow-y: auto;\n  overflow-x: hidden;\n  width: 100%;\n}\n.msg.icon-error[data-v-782c4aaa] {\n  padding: 12px;\n  border-bottom: 1px solid var(--color-border);\n  padding-left: 30px;\n  background-position: 8px center;\n}\n.save-status[data-v-782c4aaa] {\n  padding: 9px;\n  text-overflow: ellipsis;\n  color: var(--color-text-lighter);\n}\n.save-status.error[data-v-782c4aaa] {\n    background-color: var(--color-error);\n    color: var(--color-main-background);\n    border-radius: 3px;\n}\n#editor-container #editor-wrapper.has-conflicts[data-v-782c4aaa] {\n  height: calc(100% - 50px);\n}\n#editor-container #editor-wrapper.has-conflicts #editor[data-v-782c4aaa], #editor-container #editor-wrapper.has-conflicts #read-only-editor[data-v-782c4aaa] {\n    width: 50%;\n    height: 100%;\n}\n#editor-session-list[data-v-782c4aaa] {\n  padding: 4px 16px 4px 4px;\n  display: flex;\n}\n#editor-session-list input[data-v-782c4aaa], #editor-session-list div[data-v-782c4aaa] {\n    vertical-align: middle;\n    margin-left: 3px;\n}\n.editor__content[data-v-782c4aaa] {\n  max-width: 670px;\n  margin: auto;\n  position: relative;\n}\n#body-public[data-v-782c4aaa] {\n  height: auto;\n}\n#files-public-content[data-v-782c4aaa] {\n  height: auto;\n}\n#files-public-content #editor-wrapper[data-v-782c4aaa] {\n    position: relative;\n}\n#files-public-content #editor-container[data-v-782c4aaa] {\n    top: 0;\n    width: 100%;\n}\n#files-public-content #editor-container #editor[data-v-782c4aaa] .menubar {\n      position: fixed;\n      top: 50px;\n      width: 100%;\n}\n#files-public-content #editor-container #editor[data-v-782c4aaa] {\n      padding-top: 50px;\n      overflow: auto;\n}\n#files-public-content #editor-container .has-conflicts #editor[data-v-782c4aaa] {\n      padding-top: 0px;\n}\n.ie #editor[data-v-782c4aaa] .menubar {\n  position: fixed;\n  top: 50px;\n  width: 100%;\n}\n.ie .editor__content[data-v-782c4aaa] .ProseMirror {\n  padding-top: 50px;\n}\n", ""]);
+exports.push([module.i, "#editor-container[data-v-782c4aaa] {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  left: 0;\n  margin: 0 auto;\n  position: relative;\n  background-color: var(--color-main-background);\n}\n#editor-wrapper[data-v-782c4aaa] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n}\n#editor-wrapper .ProseMirror[data-v-782c4aaa] {\n    margin-top: 0 !important;\n}\n#editor-wrapper.icon-loading #editor[data-v-782c4aaa] {\n    opacity: 0.3;\n}\n#editor[data-v-782c4aaa], .editor[data-v-782c4aaa] {\n  background: var(--color-main-background);\n  color: var(--color-main-text);\n  background-clip: padding-box;\n  border-radius: var(--border-radius);\n  padding: 0;\n  position: relative;\n  overflow-y: auto;\n  overflow-x: hidden;\n  width: 100%;\n}\n.msg.icon-error[data-v-782c4aaa] {\n  padding: 12px;\n  border-bottom: 1px solid var(--color-border);\n  padding-left: 30px;\n  background-position: 8px center;\n}\n.save-status[data-v-782c4aaa] {\n  padding: 9px;\n  text-overflow: ellipsis;\n  color: var(--color-text-maxcontrast);\n}\n.save-status.error[data-v-782c4aaa] {\n    background-color: var(--color-error);\n    color: var(--color-main-background);\n    border-radius: 3px;\n}\n#editor-container #editor-wrapper.has-conflicts[data-v-782c4aaa] {\n  height: calc(100% - 50px);\n}\n#editor-container #editor-wrapper.has-conflicts #editor[data-v-782c4aaa], #editor-container #editor-wrapper.has-conflicts #read-only-editor[data-v-782c4aaa] {\n    width: 50%;\n    height: 100%;\n}\n#editor-session-list[data-v-782c4aaa] {\n  padding: 4px 16px 4px 4px;\n  display: flex;\n}\n#editor-session-list input[data-v-782c4aaa], #editor-session-list div[data-v-782c4aaa] {\n    vertical-align: middle;\n    margin-left: 3px;\n}\n.editor__content[data-v-782c4aaa] {\n  max-width: 670px;\n  margin: auto;\n  position: relative;\n}\n#body-public[data-v-782c4aaa] {\n  height: auto;\n}\n#files-public-content[data-v-782c4aaa] {\n  height: auto;\n}\n#files-public-content #editor-wrapper[data-v-782c4aaa] {\n    position: relative;\n}\n#files-public-content #editor-container[data-v-782c4aaa] {\n    top: 0;\n    width: 100%;\n}\n#files-public-content #editor-container #editor[data-v-782c4aaa] .menubar {\n      position: fixed;\n      top: 50px;\n      width: 100%;\n}\n#files-public-content #editor-container #editor[data-v-782c4aaa] {\n      padding-top: 50px;\n      overflow: auto;\n}\n#files-public-content #editor-container .has-conflicts #editor[data-v-782c4aaa] {\n      padding-top: 0px;\n}\n.ie #editor[data-v-782c4aaa] .menubar {\n  position: fixed;\n  top: 50px;\n  width: 100%;\n}\n.ie .editor__content[data-v-782c4aaa] .ProseMirror {\n  padding-top: 50px;\n}\n", ""]);
 // Exports
 module.exports = exports;
 
@@ -3380,7 +3380,7 @@ module.exports = exports;
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
 exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
-exports.push([module.i, ".image[data-v-38673bf4] {\n  margin: 0;\n  padding: 0;\n}\n.image__caption[data-v-38673bf4] {\n  text-align: center;\n  color: var(--color-text-lighter);\n}\n.image__caption input[type='text'][data-v-38673bf4] {\n    width: 100%;\n    border: none;\n    text-align: center;\n}\n.icon-image[data-v-38673bf4] {\n  margin-top: 10px;\n  height: 32px;\n  padding: 20px;\n  background-size: contain;\n}\n.image__loading[data-v-38673bf4] {\n  height: 100px;\n}\n.image__placeholder .image__main[data-v-38673bf4] {\n  background-color: var(--color-background-dark);\n  text-align: center;\n  padding: 20px;\n  border-radius: var(--border-radius);\n}\n.image__placeholder .image__main .icon-image[data-v-38673bf4] {\n    opacity: 0.7;\n}\n.fade-enter-active[data-v-38673bf4] {\n  transition: opacity .3s ease-in-out;\n}\n.fade-enter-to[data-v-38673bf4] {\n  opacity: 1;\n}\n.fade-enter[data-v-38673bf4] {\n  opacity: 0;\n}\n", ""]);
+exports.push([module.i, ".image[data-v-38673bf4] {\n  margin: 0;\n  padding: 0;\n}\n.image__caption[data-v-38673bf4] {\n  text-align: center;\n  color: var(--color-text-maxcontrast);\n}\n.image__caption input[type='text'][data-v-38673bf4] {\n    width: 100%;\n    border: none;\n    text-align: center;\n}\n.icon-image[data-v-38673bf4] {\n  margin-top: 10px;\n  height: 32px;\n  padding: 20px;\n  background-size: contain;\n}\n.image__loading[data-v-38673bf4] {\n  height: 100px;\n}\n.image__placeholder .image__main[data-v-38673bf4] {\n  background-color: var(--color-background-dark);\n  text-align: center;\n  padding: 20px;\n  border-radius: var(--border-radius);\n}\n.image__placeholder .image__main .icon-image[data-v-38673bf4] {\n    opacity: 0.7;\n}\n.fade-enter-active[data-v-38673bf4] {\n  transition: opacity .3s ease-in-out;\n}\n.fade-enter-to[data-v-38673bf4] {\n  opacity: 1;\n}\n.fade-enter[data-v-38673bf4] {\n  opacity: 0;\n}\n", ""]);
 // Exports
 module.exports = exports;
 

apps/settings/src/components/AuthToken.vue

@@ -285,7 +285,7 @@ export default {
 			}
 		}
 		&.token-name .wiping-warning {
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 		}
 
 		&.more {

apps/systemtags/src/css/systemtagsfilelist.scss

@@ -16,7 +16,7 @@
 	cursor: pointer;
 	padding: 13px 0;
 	display: flex;
-	color: var(--color-text-light);
+	color: var(--color-main-text);
 	position: relative;
 	margin-top: -20px;
 }

apps/theming/css/theming.scss

@@ -257,7 +257,7 @@ input.primary,
 		&.primary:not(:disabled) {
 			background-color: var(--color-background-dark);
 			color: var(--color-main-text);
-			border-color: var(--color-text-lighter);
+			border-color: var(--color-text-maxcontrast);
 
 			&:hover, &:focus, &:active {
 				background-color: var(--color-background-darker);

core/css/apps.scss

@@ -23,13 +23,12 @@ h2 {
 	font-size: 20px;
 	margin-bottom: 12px;
 	line-height: 30px;
-	color: var(--color-text-light);
 }
 
 h3 {
+	font-weight: bold;
 	font-size: 16px;
 	margin: 12px 0;
-	color: var(--color-text-light);
 }
 
 h4 {
@@ -39,7 +38,7 @@ h4 {
 /* do not use italic typeface style, instead lighter color */
 em {
 	font-style: normal;
-	color: var(--color-text-lighter);
+	color: var(--color-text-maxcontrast);
 }
 
 dl {
@@ -688,7 +687,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 
 	.info-text {
 		padding: 5px 0 7px 22px;
-		color: var(--color-text-lighter);
+		color: var(--color-text-maxcontrast);
 	}
 	input {
 		&[type='checkbox'],
@@ -794,7 +793,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		cursor: pointer;
-		color: var(--color-text-lighter);
+		color: var(--color-text-maxcontrast);
 		margin-bottom: 1px;
 		padding: 5px;
 
@@ -823,7 +822,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 		}
 
 		a {
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 			margin-bottom: 1px;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -836,7 +835,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 		&:focus {
 			margin-bottom: 0px;
 			color: var(--color-main-text);
-			border-bottom: 1px solid var(--color-text-lighter);
+			border-bottom: 1px solid var(--color-text-maxcontrast);
 		}
 	}
 }

core/css/css-variables.scss

@@ -23,8 +23,8 @@
 	--color-success: $color-success;
 
 	--color-text-maxcontrast: $color-text-maxcontrast;
-	--color-text-light: $color-text-light;
-	--color-text-lighter: $color-text-lighter;
+	--color-text-light: $color-main-text;
+	--color-text-lighter: $color-text-maxcontrast;
 
 	--image-logo: $image-logo;
 	--image-login-background: $image-login-background;

core/css/inputs.scss

@@ -34,12 +34,6 @@ div[contenteditable=false] {
 	box-sizing: border-box;
 }
 
-/**
- * color-text-lighter		normal state
- * color-text-lighter		active state
- * color-text-maxcontrast 	disabled state
- */
-
 /* Default global values */
 div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2
 select,
@@ -68,7 +62,7 @@ div[contenteditable=true],
 		&:active {
 			outline: none;
 			background-color: var(--color-main-background);
-			color: var(--color-text-light);
+			color: var(--color-main-text);
 		}
 	}
 	&:disabled {
@@ -122,13 +116,13 @@ div[contenteditable=false] {
 	padding: 7px 6px;
 	font-size: 13px;
 	background-color: var(--color-main-background);
-	color: var(--color-text-lighter);
+	color: var(--color-text-maxcontrast);
 	border: 1px solid var(--color-background-darker);
 	outline: none;
 	border-radius: var(--border-radius);
 
 	background-color: var(--color-background-dark);
-	color: var(--color-text-lighter);
+	color: var(--color-text-maxcontrast);
 	cursor: default;
 	opacity: 0.5;
 }
@@ -243,7 +237,7 @@ textarea, div[contenteditable=true] {
 }
 
 div[contenteditable=false] {
-	color: var(--color-text-lighter);
+	color: var(--color-text-maxcontrast);
 	font-family: inherit;
 	height: auto;
 }
@@ -489,7 +483,7 @@ div.select2-drop {
 			padding: 12px;
 			background-color: transparent;
 			cursor: pointer;
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 		}
 		.select2-result {
 			&.select2-selected {
@@ -516,7 +510,7 @@ div.select2-container-multi {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background: var(--color-main-background);
-		color: var(--color-text-lighter) !important;
+		color: var(--color-text-maxcontrast) !important;
 		box-sizing: content-box;
 		border-radius: var(--border-radius);
 		border: 1px solid var(--color-border-dark);
@@ -532,7 +526,7 @@ div.select2-container-multi {
 			& {
 				background-image: none;
 				background-color: var(--color-main-background);
-				color: var(--color-text-lighter);
+				color: var(--color-text-maxcontrast);
 				border: 1px solid var(--color-border-dark);
 			}
 			.select2-search-choice-close {
@@ -561,7 +555,7 @@ div.select2-container {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background: var(--color-main-background);
-		color: var(--color-text-lighter) !important;
+		color: var(--color-text-maxcontrast) !important;
 		box-sizing: content-box;
 		border-radius: var(--border-radius);
 		border: 1px solid var(--color-border-dark);
@@ -616,7 +610,7 @@ div.select2-container {
 			padding-left: 5px;
 			background-image: none;
 			background-color: var(--color-main-background);
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 			border: 1px solid var(--color-border-dark);
 			display: inline-flex;
 			align-items: center;
@@ -633,7 +627,7 @@ div.select2-container {
 			display: list-item;
 			background-color: transparent;
 			cursor: pointer;
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 			a {
 				white-space: nowrap;
 				overflow: hidden;
@@ -735,7 +729,7 @@ div.select2-container {
 				line-height: 20px;
 				padding: 1px 5px;
 				background-image: none;
-				color: var(--color-text-lighter);
+				color: var(--color-text-maxcontrast);
 				border: 1px solid var(--color-border-dark);
 				display: inline-flex;
 				align-items: center;
@@ -777,7 +771,7 @@ div.select2-container {
 		.multiselect__limit {
 			flex: 0 0 auto;
 			line-height: 20px;
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 			display: inline-flex;
 			align-items: center;
 			opacity: .7;
@@ -839,7 +833,7 @@ div.select2-container {
 				display: inline-flex;
 				align-items: center;
 				background-color: transparent !important;
-				color: var(--color-text-lighter);
+				color: var(--color-text-maxcontrast);
 				width: 100%;
 				/* selected checkmark icon */
 				&::before {

core/css/public.scss

@@ -76,9 +76,9 @@ $footer-height: 65px;
 		flex-direction: column;
 		p {
 			text-align: center;
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 			a {
-				color: var(--color-text-lighter);
+				color: var(--color-text-maxcontrast);
 				font-weight: bold;
 				white-space: nowrap;
 				/* increasing clickability to more than the text height */

core/css/styles.scss

@@ -111,7 +111,7 @@ body {
 .two-factor-link {
 	display: inline-block;
 	padding: 12px;
-	color: var(--color-text-lighter);
+	color: var(--color-text-maxcontrast);
 }
 
 .float-spinner {
@@ -355,7 +355,7 @@ body {
 		color: var(--color-primary-text) !important;
 		font-weight: bold !important;
 		&.button {
-			color: var(--color-text-lighter) !important;
+			color: var(--color-text-maxcontrast) !important;
 			display: inline-block;
 			text-align: center;
 		}
@@ -579,7 +579,7 @@ code {
 	.ui-datepicker-calendar {
 		th {
 			font-weight: normal;
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 			opacity: .8;
 			width: 26px;
 			padding: 2px;
@@ -602,7 +602,7 @@ code {
 
 			&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
 			.ui-priority-secondary:not(.ui-state-hover) {
-				color: var(--color-text-lighter);
+				color: var(--color-text-maxcontrast);
 				opacity: .8;
 			}
 		}
@@ -651,7 +651,7 @@ code {
 	.ui-timepicker-table {
 		th {
 			font-weight: normal;
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 			opacity: .8;
 			&.periods {
 				padding: 0;
@@ -673,7 +673,7 @@ code {
 			}
 
 			&.ui-timepicker-minutes:not(.ui-state-hover) {
-				color: var(--color-text-lighter);
+				color: var(--color-text-maxcontrast);
 			}
 
 			&.ui-timepicker-hours {

core/css/variables.scss

@@ -61,8 +61,8 @@ $color-yellow: #FC0;
 // min. color contrast for normal text on white background according to WCAG AA
 // (Works as well: color: #000; opacity: 0.57;)
 $color-text-maxcontrast: nc-lighten($color-main-text, 33%) !default;
-$color-text-light: nc-lighten($color-main-text, 15%) !default;
-$color-text-lighter: nc-lighten($color-main-text, 30%) !default;
+$color-text-light: $color-main-text !default;
+$color-text-lighter: $color-text-maxcontrast !default;
 
 $image-logo: url('../img/logo/logo.svg?v=1') !default;
 $image-login-background: url('../img/background.png?v=2') !default;

core/src/jquery/css/jquery-ui-fixes.scss

@@ -70,13 +70,13 @@
 .ui-widget-header .ui-state-highlight {
 	border: 1px solid var(--color-main-background);
 	background: var(--color-main-background) none;
-	color: var(--color-text-light);
+	color: var(--color-main-text);
 	font-weight: 600;
 }
 .ui-state-highlight a,
 .ui-widget-content .ui-state-highlight a,
 .ui-widget-header .ui-state-highlight a {
-	color: var(--color-text-lighter);
+	color: var(--color-text-maxcontrast);
 }
 .ui-state-error,
 .ui-widget-content .ui-state-error,
@@ -183,7 +183,7 @@
 		}
 
 		.ui-menu-item a {
-			color: var(--color-text-lighter);
+			color: var(--color-text-maxcontrast);
 			display: block;
 			padding: 4px 4px 4px 14px;
 

core/src/jquery/css/jquery.ocdialog.scss

@@ -1,6 +1,6 @@
 .oc-dialog {
 	background: var(--color-main-background);
-	color: var(--color-text-light);
+	color: var(--color-main-text);
 	border-radius: var(--border-radius-large);
 	box-shadow: 0 0 30px var(--color-box-shadow);
 	padding: 15px;