[base] Fix text contrast (#1992)

* [base] Enhance contrast of muted text

* [components] Enhance contrast of buttons

* [test-studio] Remove unused variables

packages/@sanity/base/src/components/AppLoadingScreen.js

@@ -7,7 +7,7 @@ const AppLoadingScreenStyles = `
   -webkit-font-smoothing: antialiased;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   background-color: #e4e8ed;
-  color: #7b8ca8;
+  color: #66758d;
   display: block;
   width: 100vw;
   height: 100vh;

packages/@sanity/base/src/styles/variables/forms.css

@@ -2,15 +2,6 @@
 @import 'part:@sanity/base/theme/variables/globals-style';
 
 :root {
-  /* Default button */
-  --default-button-color: var(--gray);
-  --default-button-color--inverted: var(--white);
-  --default-button-color--hover: var(--gray);
-  --default-button-color--active: var(--gray);
-
-  /* Button */
-  --button-border-radius: var(--border-radius-medium);
-
   /* Input */
   --input-bg: var(--component-bg);
   --input-bg-focus: var(--input-bg);

packages/@sanity/base/src/styles/variables/globals.css

@@ -35,7 +35,14 @@
   --component-text-color: var(--gray-darkest);
   --component-border-color: var(--hairline-color);
 
+  /* Button */
+  --button-border-radius: var(--border-radius-medium);
+
   /* "Default" button */
+  --default-button-color: var(--gray);
+  --default-button-color--inverted: var(--white);
+  --default-button-color--hover: var(--gray); /* not in use */
+  --default-button-color--active: var(--gray); /* not in use */
   --default-button-primary-color: var(--brand-primary);
   --default-button-primary-color--inverted: var(--brand-primary--inverted);
   --default-button-success-color: var(--state-success-color);

packages/@sanity/base/src/styles/variables/typography.css

@@ -4,7 +4,7 @@
 :root {
   --text-color: var(--body-text);
   --text-color-secondary: var(--gray-darker);
-  --text-muted: var(--gray);
+  --text-muted: var(--gray-dark);
   --link-color: var(--brand-primary);
   --link-hover-color: color(var(--state-info-color) saturation(+5%) lightness(-4%));
 

packages/@sanity/components/src/buttons/styles/DefaultButton.css

@@ -23,7 +23,9 @@
   --color-button-inverted-border: color(var(--color-button-bg) alpha(35%));
   --color-button-inverted-spinner-bg: color(var(--color-button-text) alpha(80%));
   /* simple={true} */
-  --color-button-simple-color: var(--color-button-bg);
+  /* :enabled */
+  --color-button-simple-enabled-bg: transparent;
+  --color-button-simple-enabled-text: color(var(--color-button-bg) lightness(- 20%));
   /* :focus */
   --color-button-simple-focus-bg: color(var(--color-button-bg) alpha(10%));
   --color-button-simple-focus-text: color(var(--color-button-bg) lightness(- 20%));
@@ -57,7 +59,11 @@
   --color-button-primary-inverted-focus-bg: var(--color-button-primary-bg);
   --color-button-primary-inverted-focus-color: var(--color-button-primary-text);
   /* simple={true} */
-  --color-button-primary-simple-color: var(--color-button-primary-bg);
+  /* :enabled */
+  --color-button-primary-simple-enabled-bg: transparent;
+  --color-button-primary-simple-enabled-text: color(
+    var(--color-button-primary-bg) lightness(- 20%)
+  );
   /* :focus */
   --color-button-primary-simple-focus-bg: color(var(--color-button-primary-bg) alpha(10%));
   --color-button-primary-simple-focus-text: color(var(--color-button-primary-bg) lightness(- 20%));
@@ -93,7 +99,11 @@
   --color-button-success-inverted-focus-bg: var(--color-button-success-bg);
   --color-button-success-inverted-focus-color: var(--color-button-success-text);
   /* simple={true} */
-  --color-button-success-simple-color: var(--color-button-success-bg);
+  /* :enabled */
+  --color-button-success-simple-enabled-bg: transparent;
+  --color-button-success-simple-enabled-text: color(
+    var(--color-button-success-bg) lightness(- 20%)
+  );
   /* :focus */
   --color-button-success-simple-focus-bg: color(var(--color-button-success-bg) alpha(10%));
   --color-button-success-simple-focus-text: color(var(--color-button-success-bg) lightness(- 20%));
@@ -129,7 +139,11 @@
   --color-button-warning-inverted-focus-bg: var(--color-button-warning-bg);
   --color-button-warning-inverted-focus-color: var(--color-button-warning-text);
   /* simple={true} */
-  --color-button-warning-simple-color: var(--color-button-warning-bg);
+  /* :enabled */
+  --color-button-warning-simple-enabled-bg: transparent;
+  --color-button-warning-simple-enabled-text: color(
+    var(--color-button-warning-bg) lightness(- 20%)
+  );
   /* :focus */
   --color-button-warning-simple-focus-bg: color(var(--color-button-warning-bg) alpha(10%));
   --color-button-warning-simple-focus-text: color(var(--color-button-warning-bg) lightness(- 20%));
@@ -165,7 +179,9 @@
   --color-button-danger-inverted-focus-bg: var(--color-button-danger-bg);
   --color-button-danger-inverted-focus-color: var(--color-button-danger-text);
   /* simple={true} */
-  --color-button-danger-simple-color: var(--color-button-danger-bg);
+  /* :enabled */
+  --color-button-danger-simple-enabled-bg: transparent;
+  --color-button-danger-simple-enabled-text: color(var(--color-button-danger-bg) lightness(- 20%));
   /* :focus */
   --color-button-danger-simple-focus-bg: color(var(--color-button-danger-bg) alpha(10%));
   --color-button-danger-simple-focus-text: color(var(--color-button-danger-bg) lightness(- 20%));
@@ -245,8 +261,8 @@
 
     @nest &.simple {
       @nest & > .inner {
-        background-color: transparent;
-        color: var(--color-button-simple-color);
+        background-color: var(--color-button-simple-enabled-bg);
+        color: var(--color-button-simple-enabled-text);
       }
 
       @nest & .spinner {
@@ -431,8 +447,8 @@
 
   @nest &.simple {
     @nest & > .inner {
-      background-color: transparent;
-      color: var(--color-button-primary-simple-color);
+      background-color: var(--color-button-primary-simple-enabled-bg);
+      color: var(--color-button-primary-simple-enabled-text);
     }
 
     @media (hover: hover) {
@@ -488,8 +504,8 @@
 
   @nest &.simple {
     @nest & > .inner {
-      background-color: transparent;
-      color: var(--color-button-success-simple-color);
+      background-color: var(--color-button-success-simple-enabled-bg);
+      color: var(--color-button-success-simple-enabled-text);
     }
 
     @media (hover: hover) {
@@ -545,8 +561,8 @@
 
   @nest &.simple {
     @nest & > .inner {
-      background-color: transparent;
-      color: var(--color-button-warning-simple-color);
+      background-color: var(--color-button-warning-simple-enabled-bg);
+      color: var(--color-button-warning-simple-enabled-text);
     }
 
     @media (hover: hover) {
@@ -602,8 +618,8 @@
 
   @nest &.simple {
     @nest & > .inner {
-      background-color: transparent;
-      color: var(--color-button-danger-simple-color);
+      background-color: var(--color-button-danger-simple-enabled-bg);
+      color: var(--color-button-danger-simple-enabled-text);
     }
 
     @media (hover: hover) {

packages/test-studio/src/themes/dark.css

@@ -11,8 +11,6 @@
   /* Forms */
   --default-button-color: #145eda;
   --default-button-color--inverted: #fff;
-  --default-button-color--hover: #156dff;
-  --default-button-color--active: #156dff;
   --input-bg: #1a202e;
 
   --input-color: #fff;