Accessibility contrast tweaks (#3026)

- Make the light code theme have accessible contrast.
- Docsearch placeholder contrast tweak

Also minor tweak to the prismjs tokenizer to fix optional property
highlighting

cspell.yaml

@@ -5,6 +5,7 @@ dictionaries:
   - node
   - typescript
 words:
+  - atrule
   - autorest
   - azsdk
   - azsdkengsys

packages/website/docusaurus.config.ts

@@ -3,7 +3,7 @@
 
 import type { VersionOptions } from "@docusaurus/plugin-content-docs";
 import { NormalizedSidebar } from "@docusaurus/plugin-content-docs/src/sidebars/types.js";
-import type { Config, Plugin } from "@docusaurus/types";
+import type { Config, Plugin, ThemeConfig } from "@docusaurus/types";
 import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 import { resolve } from "path";
 import { themes } from "prism-react-renderer";
@@ -48,6 +48,8 @@ function reverseSidebarItems(items: NormalizedSidebar) {
   return result;
 }
 
+import { LightTheme } from "./themes/light";
+
 const baseUrl = process.env.TYPESPEC_WEBSITE_BASE_PATH ?? "/";
 const config: Config = {
   title: "TypeSpec",
@@ -200,85 +202,83 @@ const config: Config = {
       },
     }),
   },
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    {
-      navbar: {
-        title: "TypeSpec",
-        items: [
-          {
-            type: "dropdown",
-            label: "Use cases",
-            items: [
-              {
-                label: "OpenAPI",
-                to: "/openapi",
-              },
-              {
-                label: "Data validation and type consistency",
-                to: "/data-validation",
-              },
-              {
-                label: "Tooling support",
-                to: "/tooling",
-              },
-            ],
-          },
-          {
-            type: "doc",
-            docId: "introduction/installation",
-            position: "left",
-            label: "Docs",
-          },
-          { to: "/playground", label: "Playground", position: "left" },
-          {
-            label: "Community",
-            to: "/community",
-          },
-          {
-            type: "docsVersionDropdown",
-            position: "right",
-          },
-          {
-            href: "https://github.com/microsoft/typespec",
-            position: "right",
-            className: "header-github-link",
-            "aria-label": "Github repository",
-          },
-        ],
-      },
-      footer: {
-        style: "dark",
-        links: [
-          {
-            title: "Docs",
-            items: [
-              {
-                label: "Introduction",
-                to: "/docs",
-              },
-              {
-                label: "Language basics",
-                to: "/docs/language-basics/overview",
-              },
-            ],
-          },
-        ],
-        copyright: `© ${new Date().getFullYear()} Microsoft`,
-      },
-      prism: {
-        theme: themes.oneLight,
-        darkTheme: themes.oneDark,
-        additionalLanguages: ["http", "shell-session", "protobuf"],
-      },
-      mermaid: {},
-      algolia: {
-        // cspell:disable-next-line
-        appId: "V3T9EUVLJR",
-        apiKey: "bae16ae67ddbe24e700ac20d192ad20f",
-        indexName: "typespec",
-      },
+  themeConfig: {
+    navbar: {
+      title: "TypeSpec",
+      items: [
+        {
+          type: "dropdown",
+          label: "Use cases",
+          items: [
+            {
+              label: "OpenAPI",
+              to: "/openapi",
+            },
+            {
+              label: "Data validation and type consistency",
+              to: "/data-validation",
+            },
+            {
+              label: "Tooling support",
+              to: "/tooling",
+            },
+          ],
+        },
+        {
+          type: "doc",
+          docId: "introduction/installation",
+          position: "left",
+          label: "Docs",
+        },
+        { to: "/playground", label: "Playground", position: "left" },
+        {
+          label: "Community",
+          to: "/community",
+        },
+        {
+          type: "docsVersionDropdown",
+          position: "right",
+        },
+        {
+          href: "https://github.com/microsoft/typespec",
+          position: "right",
+          className: "header-github-link",
+          "aria-label": "Github repository",
+        },
+      ],
     },
+    footer: {
+      style: "dark",
+      links: [
+        {
+          title: "Docs",
+          items: [
+            {
+              label: "Introduction",
+              to: "/docs",
+            },
+            {
+              label: "Language basics",
+              to: "/docs/language-basics/overview",
+            },
+          ],
+        },
+      ],
+      copyright: `© ${new Date().getFullYear()} Microsoft`,
+    },
+    prism: {
+      theme: LightTheme,
+      darkTheme: themes.oneDark,
+      additionalLanguages: ["http", "shell-session", "protobuf"],
+    },
+    mermaid: {},
+    algolia: {
+      // cspell:disable-next-line
+      appId: "V3T9EUVLJR",
+      apiKey: "bae16ae67ddbe24e700ac20d192ad20f",
+      indexName: "typespec",
+    },
+  } satisfies ThemeConfig,
 };
 
 export default config;

packages/website/src/components/homepage/hero-illustration/hero-illustration.module.css

@@ -22,7 +22,6 @@
 }
 
 .output {
-  opacity: 90%;
   font-size: 90%;
 }
 

packages/website/src/css/custom.css

@@ -179,6 +179,9 @@
   --ifm-navbar-background-color: var(--colorNeutralBackground3);
 }
 
+[data-theme="light"] {
+  --docsearch-muted-color: #6c727e !important;
+}
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
   /* Change docusaurus Colors */

packages/website/src/theme/typespec-lang-prism.ts

@@ -28,7 +28,7 @@ const lang = {
   },
 
   property: {
-    pattern: /\b[A-Za-z]\w*(?=\s*:)/m,
+    pattern: /\b[A-Za-z]\w*(?=\s*\??:)/m,
     lookbehind: true,
     alias: "property",
   },
@@ -71,8 +71,7 @@ const lang = {
   variable: /\b[A-Za-z]\w*\b/,
 
   number: /(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:E[+-]?\d+)?/i,
-  operator:
-    /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/,
+  operator: /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/,
   punctuation: /[{}[\];(),.:]/,
 };
 

packages/website/themes/light.ts

@@ -0,0 +1,101 @@
+import { PrismTheme } from "prism-react-renderer";
+
+/**
+ * Fork from atom one light theme that is accessible AA compliant.
+ */
+export const LightTheme: PrismTheme = {
+  plain: {
+    backgroundColor: "hsl(230, 1%, 98%)",
+    color: "hsl(230, 8%, 24%)",
+  },
+  styles: [
+    {
+      types: ["comment", "prolog", "cdata"],
+      style: {
+        color: "#737378",
+      },
+    },
+    {
+      types: ["doctype", "punctuation", "entity"],
+      style: {
+        color: "hsl(230, 8%, 24%)",
+      },
+    },
+    {
+      types: ["attr-name", "class-name", "boolean", "constant", "number", "atrule"],
+      style: {
+        color: "#c2483d",
+      },
+    },
+    {
+      types: ["keyword"],
+      style: {
+        color: "hsl(301, 63%, 40%)",
+      },
+    },
+
+    {
+      types: ["property", "tag", "symbol", "deleted", "important"],
+      style: {
+        color: "#c2483d",
+      },
+    },
+    {
+      types: [
+        "selector",
+        "string",
+        "char",
+        "builtin",
+        "inserted",
+        "regex",
+        "attr-value",
+        "punctuation",
+      ],
+      style: {
+        color: "#40813f",
+      },
+    },
+    {
+      types: ["variable", "operator", "function"],
+      style: {
+        color: "#3e6ed7",
+      },
+    },
+    {
+      types: ["url"],
+      style: {
+        color: "hsl(198, 99%, 37%)",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        textDecorationLine: "line-through",
+      },
+    },
+    {
+      types: ["inserted"],
+      style: {
+        textDecorationLine: "underline",
+      },
+    },
+    {
+      types: ["italic"],
+      style: {
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["important", "bold"],
+      style: {
+        fontWeight: "bold",
+      },
+    },
+    {
+      types: ["important"],
+      style: {
+        color: "hsl(230, 8%, 24%)",
+      },
+    },
+  ],
+};