wcag/contrast: improve contrast of next pages, file explorer, and notebooks

Author: novoselt

src/packages/frontend/app/antd-base-theme.ts

@@ -10,7 +10,9 @@ import { COLORS } from "@cocalc/util/theme";
 export function getBaseAntdTheme(): ThemeConfig {
   return {
     token: {
-      colorLink: COLORS.BLUE_D,
+      colorPrimary: COLORS.COCALC_BLUE,
+      colorLink: COLORS.BLUE_DD,
+      colorTextLightSolid: COLORS.TOP_BAR.ACTIVE,
       colorTextDescription: COLORS.GRAY_DD,
     },
   };

src/packages/frontend/app/context.tsx

@@ -92,9 +92,9 @@ export function useAntdStyleProvider() {
 
   const animationStyle = animate ? undefined : { motion: false };
 
-  const brandedColors = branded
-    ? { colorPrimary: COLORS.COCALC_BLUE }
-    : undefined;
+  const primaryColor = branded
+    ? undefined
+    : { colorPrimary: COLORS.ANTD_LINK_BLUE };
 
   const algorithm = compact ? { algorithm: theme.compactAlgorithm } : undefined;
 
@@ -103,13 +103,13 @@ export function useAntdStyleProvider() {
     ...algorithm,
     token: {
       ...(baseTheme.token ?? {}),
-      ...brandedColors,
+      ...primaryColor,
       ...borderStyle,
       ...animationStyle,
     },
     components: {
       Button: {
-        ...brandedColors,
+        ...primaryColor,
       },
     },
   };

src/packages/frontend/customize.tsx

@@ -589,7 +589,6 @@ export const Footer: React.FC = React.memo(() => {
   const webappVersionInfo =
     `Version ${smc_version} @ ${build_date}` + ` | ${smc_git_rev.slice(0, 8)}`;
   const style: React.CSSProperties = {
-    color: "gray",
     textAlign: "center",
     paddingBottom: `${UNIT}px`,
   };

src/packages/frontend/index.sass

@@ -268,9 +268,9 @@ ul.nav.pull-right.navbar-nav li
     z-index : 0
 
 footer
-  color : gray
+  color : colors.$COL_GRAY_M
   a
-    color : gray
+    color : colors.$COL_GRAY_M
 
 @keyframes pulse
   0%
@@ -421,4 +421,3 @@ span.cc-project-fixedtab-drag:hover
 
 div.cc-project-flyout-file-item:hover
   background-color: colors.$COL_BLUE_LLLL
-

src/packages/frontend/jupyter/status.tsx

@@ -32,15 +32,15 @@ import { ALERT_COLS } from "./usage";
 const KERNEL_NAME_STYLE: CSS = {
   margin: "0px 5px",
   display: "block",
-  color: COLORS.BS_BLUE_TEXT,
+  color: COLORS.BLUE_DD,
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
 } as const;
 
 const KERNEL_USAGE_STYLE: CSS = {
   margin: "0px 5px",
-  color: COLORS.GRAY,
+  color: COLORS.GRAY_M,
   borderRight: `1px solid ${COLORS.GRAY}`,
   paddingRight: "5px",
   display: "flex",
@@ -234,7 +234,7 @@ export function Kernel({
         <div
           style={{
             display: "flex",
-            color: COLORS.GRAY,
+            color: COLORS.GRAY_M,
             paddingLeft: "5px",
             borderLeft: "1px solid gray",
           }}
@@ -383,7 +383,7 @@ export function Kernel({
         <div
           style={{
             flex: 1,
-            color: COLORS.GRAY,
+            color: COLORS.GRAY_M,
             textAlign: "center",
             whiteSpace: "nowrap",
             overflow: "hidden",
@@ -692,7 +692,7 @@ export function Kernel({
   const body = (
     <div
       style={{
-        color: COLORS.GRAY,
+        color: COLORS.GRAY_M,
         cursor: "pointer",
       }}
     >

src/packages/frontend/project/explorer/action-bar.tsx

@@ -19,7 +19,7 @@ import * as misc from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 
 const ROW_INFO_STYLE = {
-  color: COLORS.GRAY,
+  color: COLORS.TAB,
   height: "22px",
   margin: "5px 3px",
 } as const;

src/packages/frontend/project/explorer/file-listing/file-row.tsx

@@ -120,7 +120,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
     return (
       <a style={styles} cocalc-test="file-line">
         {misc.trunc_middle(name, 50)}
-        <span style={{ color: !props.mask ? COLORS.FILE_EXT : undefined }}>
+        <span style={{ color: !props.mask ? COLORS.GRAY_M : undefined }}>
           {ext === "" ? "" : `.${ext}`}
         </span>
         {render_link_target()}
@@ -260,12 +260,12 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
       return (
         <TimeAgo
           date={new Date(props.time * 1000).toISOString()}
-          style={{ color: COLORS.GRAY_M }}
+          style={{ color: COLORS.TAB }}
         />
       );
     } catch (error) {
       return (
-        <div style={{ color: COLORS.GRAY_M, display: "inline" }}>
+        <div style={{ color: COLORS.TAB, display: "inline" }}>
           Invalid Date Time
         </div>
       );
@@ -280,7 +280,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
     const ext_lower = ext.toLowerCase();
     const style: CSS = {
       marginLeft: "10px",
-      color: COLORS.GRAY,
+      color: COLORS.TAB,
       padding: 0,
     };
     const icon = <Icon name="eye" />;
@@ -341,10 +341,10 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
           type="link"
           href={url}
           onClick={handle_download_click}
-          style={{ color: COLORS.GRAY, padding: 0 }}
+          style={{ color: COLORS.TAB, padding: 0 }}
         >
           {size}
-          <Icon name="cloud-download" style={{ color: COLORS.GRAY }} />
+          <Icon name="cloud-download" style={{ color: COLORS.TAB }} />
         </Button>
       </Popover>
     );
@@ -416,7 +416,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
             <DirectorySize size={props.size} />
           </>
         ) : (
-          <span className="pull-right" style={{ color: COLORS.GRAY_M }}>
+          <span className="pull-right" style={{ color: COLORS.TAB }}>
             {render_download_button(url)}
             {render_view_button(url, props.name)}
           </span>
@@ -427,7 +427,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
 });
 
 const directory_size_style: React.CSSProperties = {
-  color: COLORS.GRAY,
+  color: COLORS.TAB,
   marginRight: "3em",
 } as const;
 

src/packages/frontend/project/explorer/file-listing/listing-header.tsx

@@ -47,7 +47,7 @@ export const ListingHeader: React.FC<Props> = (props: Props) => {
             return sort_by(column_name);
           }}
           style={{
-            color: COLORS.FG_BLUE,
+            color: COLORS.BLUE_DD,
             fontWeight: "bold",
             whiteSpace: "nowrap",
           }}
@@ -80,7 +80,7 @@ export const ListingHeader: React.FC<Props> = (props: Props) => {
           "starred",
           <Icon
             name="star-filled"
-            style={{ color: COLORS.FG_BLUE, fontSize: "12pt" }}
+            style={{ color: COLORS.BLUE_DD, fontSize: "12pt" }}
           />,
           "0px",
         )}