Commit 41b0b4ea authored by catch's avatar catch
Browse files

fix: #3617875 Better Dark Mode Support for Disabled Elements 

By: mgifford
By: mherchel
By: gareth.poole
parent 77b938be

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
@@ -35,8 +35,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
@@ -28,8 +28,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-radio.css

+1 −1
Changes for core/themes/default_admin/css/components/form--checkbox-radio.css: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -145,7 +145,7 @@ 
 */



.form-boolean--type-checkbox {

  &:not(:checked) {

  &:not(:is(:checked, :disabled)) {

    .gin--dark-mode & {

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

    }