From 3bcfafc89bec390e6cd8bd588388a13cb6a4c0c7 Mon Sep 17 00:00:00 2001 From: Cristina Chumillas Date: Mon, 25 Apr 2022 16:48:30 -0700 Subject: [PATCH] Issue #3020418 by antoineh, ckrina, bnjmnm, fhaeberle, saschaeggi, andregp, ravi.shankar, priyanka.sahni, rkoller, huzooka, balsama, cindytwilliams, modulist, lauriii, antonellasevero: Update Placeholder styles so that contrast ratio passes guidelines --- core/themes/claro/css/base/variables.css | 2 +- core/themes/claro/css/base/variables.pcss.css | 2 +- core/themes/claro/css/components/form.css | 1 + core/themes/claro/css/components/form.pcss.css | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css index 0119a078916..48da4d37da3 100644 --- a/core/themes/claro/css/base/variables.css +++ b/core/themes/claro/css/base/variables.css @@ -100,7 +100,7 @@ --input-fg-color: var(--color-fg); --input-bg-color: var(--color-bg); --input-fg-color--description: var(--color-gray-800); - --input-fg-color--placeholder: var(--color-gray-500); + --input-fg-color--placeholder: var(--color-gray-700); --input-border-color: var(--color-gray-500); --input--hover-border-color: var(--color-text); --input--focus-border-color: var(--color-absolutezero); diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css index 636deea2300..f5ccad24809 100644 --- a/core/themes/claro/css/base/variables.pcss.css +++ b/core/themes/claro/css/base/variables.pcss.css @@ -94,7 +94,7 @@ --input-fg-color: var(--color-fg); --input-bg-color: var(--color-bg); --input-fg-color--description: var(--color-gray-800); - --input-fg-color--placeholder: var(--color-gray-500); + --input-fg-color--placeholder: var(--color-gray-700); --input-border-color: var(--color-gray-500); --input--hover-border-color: var(--color-text); --input--focus-border-color: var(--color-absolutezero); diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css index 9632d1e6b90..b0bb8b9f9b5 100644 --- a/core/themes/claro/css/components/form.css +++ b/core/themes/claro/css/components/form.css @@ -11,6 +11,7 @@ */ ::placeholder { + opacity: 1; color: var(--input-fg-color--placeholder); } diff --git a/core/themes/claro/css/components/form.pcss.css b/core/themes/claro/css/components/form.pcss.css index a8cf852c62c..8935516752b 100644 --- a/core/themes/claro/css/components/form.pcss.css +++ b/core/themes/claro/css/components/form.pcss.css @@ -4,6 +4,7 @@ */ ::placeholder { + opacity: 1; color: var(--input-fg-color--placeholder); } /* IE 10 and 11 needs this set as important. */