diff --git a/changelog/unreleased/bugfix-darkmode-disabled-textarea b/changelog/unreleased/bugfix-darkmode-disabled-textarea new file mode 100644 index 000000000..26684178d --- /dev/null +++ b/changelog/unreleased/bugfix-darkmode-disabled-textarea @@ -0,0 +1,6 @@ +Bugfix: Disabled textarea color contrast in darkmode + +We fixed an issue that made text on disabled textarea fields unreadable since it was the same color as the background. + +https://github.com/owncloud/owncloud-design-system/pull/2055 +https://github.com/owncloud/owncloud-design-system/issues/2053 diff --git a/src/components/atoms/OcTextarea/OcTextarea.vue b/src/components/atoms/OcTextarea/OcTextarea.vue index 27ed34f45..e100a911c 100644 --- a/src/components/atoms/OcTextarea/OcTextarea.vue +++ b/src/components/atoms/OcTextarea/OcTextarea.vue @@ -205,6 +205,10 @@ export default { width: 100%; -webkit-appearance: none; + &:disabled { + color: var(--oc-color-input-text-muted); + } + &:focus { background-color: var(--oc-color-input-bg); border-color: var(--oc-color-input-text-default); diff --git a/src/styles/theme/oc-form.scss b/src/styles/theme/oc-form.scss index f793a6379..0210e1472 100644 --- a/src/styles/theme/oc-form.scss +++ b/src/styles/theme/oc-form.scss @@ -246,7 +246,7 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,% border: 1px solid var(--oc-color-input-border); border-radius: 0; box-sizing: border-box; - color: var(--oc-color-input-text-default) ; + color: var(--oc-color-input-text-default); display: inline-block; height: 2rem; line-height: inherit; @@ -264,7 +264,9 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,% /* 2 */ .oc-input:not(input), -.oc-select:not(select) { line-height: $form-line-height; } +.oc-select:not(select) { + line-height: $form-line-height; +} /* * Multi-line @@ -287,8 +289,7 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,% /* Disabled */ .oc-input:disabled, -.oc-select:disabled, -.oc-textarea:disabled { +.oc-select:disabled { background-color: $form-disabled-background; color: $form-disabled-color; }