Verified Commit 21ca2cb4 authored by catch's avatar catch Committed by Mike Herchel
Browse files

fix: #3617875 Better Dark Mode Support for Disabled Elements 

By: mgifford
By: mherchel
By: gareth.poole
(cherry picked from commit 41b0b4ea)
parent 7425089d

core/themes/default_admin/css/_variables/variables-color-semantic.css

+3 −3
Changes for core/themes/default_admin/css/_variables/variables-color-semantic.css: 3 added lines, 3 removed lines.
Original line number Diff line number Diff line
@@ -75,7 +75,7 @@ 
  --admin-color-border: light-dark(var(--admin-color-gray-200), #43454a);

  --admin-color-border-soft: light-dark(color-mix(in lch, black 8%, transparent), color-mix(in lch, black 5%, transparent));

  --admin-color-border-loud: light-dark(color-mix(in lch, black 30%, transparent), color-mix(in lch, white 40%, transparent));

  --admin-color-border-input: light-dark(var(--admin-color-gray-500), #76777b);

  --admin-color-border-input: light-dark(var(--admin-color-gray-500), #999);

  --admin-color-border-table: light-dark(color-mix(in srgb, black 10%, transparent), #43454a);

  --admin-color-text-on-primary: light-dark(var(--admin-color-white), #111);

  --admin-color-switch: light-dark(#26a769, var(--admin-color-accent-100));
@@ -120,8 +120,8 @@ 
  --admin-color-focus-border: light-dark(color-mix(in lch, black 20%, transparent), color-mix(in lch, black 80%, transparent));

  --admin-color-focus-neutral: light-dark(color-mix(in lch, black 40%, transparent), color-mix(in lch, white 80%, transparent));

  --admin-color-text-disabled: light-dark(var(--admin-color-gray-700), #919191);

  --admin-color-bg-disabled: light-dark(#eaeaea, #47474c);

  --admin-color-border-disabled: light-dark(var(--admin-color-gray-300), #646464);

  --admin-color-bg-disabled: light-dark(#eaeaea, #313134);

  --admin-color-border-disabled: light-dark(var(--admin-color-gray-300), #555);



  /*

   * Link / interactive blue. Used for links and blue focus/selected accents

core/themes/default_admin/css/_variables/variables-color-semantic.pcss.css

+3 −3
Changes for core/themes/default_admin/css/_variables/variables-color-semantic.pcss.css: 3 added lines, 3 removed lines.
Original line number Diff line number Diff line
@@ -68,7 +68,7 @@ 
  --admin-color-border: light-dark(var(--admin-color-gray-200), #43454a);

  --admin-color-border-soft: light-dark(color-mix(in lch, black 8%, transparent), color-mix(in lch, black 5%, transparent));

  --admin-color-border-loud: light-dark(color-mix(in lch, black 30%, transparent), color-mix(in lch, white 40%, transparent));

  --admin-color-border-input: light-dark(var(--admin-color-gray-500), #76777b);

  --admin-color-border-input: light-dark(var(--admin-color-gray-500), #999);

  --admin-color-border-table: light-dark(color-mix(in srgb, black 10%, transparent), #43454a);

  --admin-color-text-on-primary: light-dark(var(--admin-color-white), #111);

  --admin-color-switch: light-dark(#26a769, var(--admin-color-accent-100));
@@ -113,8 +113,8 @@ 
  --admin-color-focus-border: light-dark(color-mix(in lch, black 20%, transparent), color-mix(in lch, black 80%, transparent));

  --admin-color-focus-neutral: light-dark(color-mix(in lch, black 40%, transparent), color-mix(in lch, white 80%, transparent));

  --admin-color-text-disabled: light-dark(var(--admin-color-gray-700), #919191);

  --admin-color-bg-disabled: light-dark(#eaeaea, #47474c);

  --admin-color-border-disabled: light-dark(var(--admin-color-gray-300), #646464);

  --admin-color-bg-disabled: light-dark(#eaeaea, #313134);

  --admin-color-border-disabled: light-dark(var(--admin-color-gray-300), #555);



  /*

   * Link / interactive blue. Used for links and blue focus/selected accents

core/themes/default_admin/css/_variables/variables-components.css

+2 −2
Changes for core/themes/default_admin/css/_variables/variables-components.css: 2 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -34,8 +34,8 @@ 
  --input--error-color: var(--admin-color-error);

  --input--error-border-color: var(--admin-color-error);

  --input--disabled-fg-color: light-dark(var(--admin-color-gray-800), var(--admin-color-gray-400));

  --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */

  --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */

  --input--disabled-bg-color: var(--admin-color-bg-disabled);

  --input--disabled-border-color: var(--admin-color-border-disabled);

  --input-border-radius-size: var(--admin-radius-2xs);

  --input-border-size: 1px; /* (1/16)em ~ 1px */

  --input--error-border-size: 2px;

core/themes/default_admin/css/_variables/variables-components.pcss.css

+2 −2
Changes for core/themes/default_admin/css/_variables/variables-components.pcss.css: 2 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -27,8 +27,8 @@ 
  --input--error-color: var(--admin-color-error);

  --input--error-border-color: var(--admin-color-error);

  --input--disabled-fg-color: light-dark(var(--admin-color-gray-800), var(--admin-color-gray-400));

  --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */

  --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */

  --input--disabled-bg-color: var(--admin-color-bg-disabled);

  --input--disabled-border-color: var(--admin-color-border-disabled);

  --input-border-radius-size: var(--admin-radius-2xs);

  --input-border-size: 1px; /* (1/16)em ~ 1px */

  --input--error-border-size: 2px;

core/themes/default_admin/css/components/form--checkbox-toggle.css

+4 −0
Changes for core/themes/default_admin/css/components/form--checkbox-toggle.css: 4 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -136,6 +136,10 @@ 
        opacity: 0.6;

        background-color: #fff;

      }



      ~ label {

        color: var(--input--disabled-fg-color);

      }

    }



    @media (forced-colors: active) {