Apply suggestions from code review

Co-authored-by: margaretkennedy <[email protected]>

plugins/example-theme/src/js/README.md

@@ -1,6 +1,6 @@
 # Deephaven Custom Theme Example
 
-This plugin demonstrates how to create a custom theme for the Deephaven web UI. Deephaven themes work by providing a set of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to override the default theme variables. By way of example, we will create a custom theme inspired by the unique color scheme from the [Financial Times](https://financialtimes.com). The image below shows our example theme we will be creating on the left, and the Financial Times inspiration on the right.
+This plugin demonstrates how to create a custom theme for the Deephaven web UI. Deephaven themes work by providing a set of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to override the default theme variables. By way of example, we will create a custom theme inspired by the unique color scheme from the [Financial Times](https://financialtimes.com). The image below shows our example theme on the left and the Financial Times inspiration on the right.
 
 ![Example Theme](example-theme.jpg)
 
@@ -10,21 +10,24 @@ Refer to the main [README](../../README.md) for instructions on how to build and
 
 ## Development
 
-Copy the `example-theme` directory to a new directory and rename it to your plugin name. Rename the `example-theme` references in the `./<your-theme>/src/js/package.json` and `./<your-theme>/src/js/src/index.ts` to your plugin name in your theme folder. Add your plugin's name to the `manifest.json` in the repository root directory to enable your plugin in development previews.
+- Copy the `example-theme` directory to a new directory and rename it to your plugin name. 
+- Rename the `example-theme` references in the `./<your-theme>/src/js/package.json` and `./<your-theme>/src/js/src/index.ts` to your plugin name in your theme folder. 
+- Add your plugin's name to the `manifest.json` in the repository root directory to enable your plugin in development previews.
+- You should also update the `name` key in the `./<your-theme>/src/js/src/index.ts` file with a unique name that will appear in the theme selector UI.
 
 You should also update the `name` key in the `./<your-theme>/src/js/src/index.ts` file with a unique name that will appear in the theme selector UI.
 
 To preview themes during development, you'll need to start three separate processes. The first is a deephaven server, the second is a plugins server, and the third is a development version of the web-client-ui server. This is only necessary if you would like to preview your changes during development.
 
 1. Start a deephaven-core server on port 10000. You can follow the instructions here in [deephaven-core](https://deephaven.io/core/docs/tutorials/quickstart/].
-2. In a separate terminal start a plugins server that will proxy your plugins. This is so you don't have to re-install it each time you make a change while developing your custom theme. From the deephaven-plugins project repository root directory, run:
+2. In a separate terminal, start a plugins server that will proxy your plugins. This is so you don't have to re-install it each time you make a change while developing your custom theme. From the deephaven-plugins project repository root directory, run:
 
    ```
    npm install
    npm start
    ```
 
-3. Finally, start a local web-client-ui server that will allow you to view a development copy of your theme. Clone the [deephaven/web-client-ui](https://github.com/deephaven/web-client-ui) repository and run in a separate terminal, from the the web-client-ui project repository root directory:
+3. Finally, start a local web-client-ui server that will allow you to view a development copy of your theme. Clone the [deephaven/web-client-ui](https://github.com/deephaven/web-client-ui) repository and in a separate terminal from the the web-client-ui project repository root directory, run:
 
    ```
    npm install
@@ -35,20 +38,20 @@ Then visit http://localhost:4000 to preview in the app, or http://localhost:4000
 
 ## Creating your theme
 
-The general steps for creating a theme is as follows:
+The general steps for creating a theme are as follows:
 
-1. Inherit a base theme (either `dark` or `light`)
-2. Create your color palette (gray, red, orange, etc)
-3. Override any semantic colors with colors from your palette as desired (accent, positive, negative, etc)
-4. Override component specific colors with colors semantic colors, or colors from your palette as desired (grid colors, plot, etc)
+1. Inherit a base theme (either `dark` or `light`).
+2. Create your color palette (gray, red, orange, etc).
+3. Override any semantic colors with colors from your palette as desired (accent, positive, negative, etc).
+4. Override component-specific colors with semantic colors or colors from your palette as desired (grid colors, plot, etc).
 
 ### Inherit a base theme
 
-To create your theme, you must first decide whether your theme is a "light" theme or a "dark" theme. For example if your background color is black, or a dark color, you are creating a dark theme and should inherit the initial styling from the "Default Dark" theme. If your background color is white, or a light color, you are creating a light theme and should inherit the initial styling from the "Default Light" theme.
+To create your theme, first decide whether your theme is a "light" or a "dark" theme. For example, if your background color is black or a dark color, you should inherit the initial styling from the "Default Dark" theme. If your background color is white or a light color, you should inherit the initial styling from the "Default Light" theme.
 
-By inheriting from either `dark` or `light`, it significantly reduces the amount of variables you need to assign. You may choose to override just one variable, or all of them. The choice is yours.
+Inheriting from either `dark` or `light` significantly reduces the amount of variables you need to assign. You may choose to override just one variable or all of them. The choice is yours.
 
-To set which theme to inherit from, set the baseTheme to either `dark` or `light` in the `./<your-theme>/src/js/src/index.ts` file.
+Set the `baseTheme` to either `dark` or `light` in the `./<your-theme>/src/js/src/index.ts` file.
 
 ```typescript
 export const plugin: ThemePlugin = {
@@ -64,22 +67,22 @@ export const plugin: ThemePlugin = {
 
 ### Creating your override variables
 
-Next you'll want to override colors and other variables to create your custom theme in the `./<your-theme>/src/js/src/theme.scss` file. You can find a list of all the variables you can override in the [Default Dark](https://github.com/deephaven/web-client-ui/tree/main/packages/components/src/theme/theme-dark) or [Default Light](https://github.com/deephaven/web-client-ui/tree/main/packages/components/src/theme/theme-light) directory in the web-client-ui repository, organized into files by usage. You can also inspect elements in the browser to discover the class or variable names you may need to override. Use selector based styling sparingly, as these are not guaranteed to be stable across releases. Most themes will start by overriding a few colors, and then add additional variables as needed. For example, to create the example theme above, we only need to override a few colors, mostly from the palette files listed above.
+Next, you'll want to override colors and other variables to create your custom theme in the `./<your-theme>/src/js/src/theme.scss` file. You can find a list of all the variables you can override in the [Default Dark](https://github.com/deephaven/web-client-ui/tree/main/packages/components/src/theme/theme-dark) or [Default Light](https://github.com/deephaven/web-client-ui/tree/main/packages/components/src/theme/theme-light) directory in the web-client-ui repository, organized into files by usage. You can also inspect elements in the browser to discover the class or variable names you may need to override. Use selector-based styling sparingly, as these are not guaranteed to be stable across releases. Most themes will start by overriding a few colors and then add additional variables as needed. For example, to create the example theme above, we only need to override a few colors, mostly from the palette files listed above.
 
-We'll start by overriding the background colors, accent colors, positive and negative colors, and then a few additional colors specific to grids and plots. **Colors must be in the sRGB color space** (supported formats include #HEX, rgb(), rgba(), hsl(), hwb(), color(srgb) or a named color. Other color spaces such as LAB, OKLAB, P3 etc are not supported). The web-client-ui theme provider will convert your colors to HEX internally via javascript for display in some of the non-traditional dom-elements (canvas based grids, monaco code editors, svg/webgl plots). We also mix in an alpha channel to create transparent colors for you via [color-mix](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) in srgb space.
+We'll start by overriding the background colors, accent colors, positive and negative colors, and then a few additional colors specific to grids and plots. **Colors must be in the sRGB color space**. (Supported formats include #HEX, rgb(), rgba(), hsl(), hwb(), color(srgb) or a named color. Other color spaces such as LAB, OKLAB, P3, etc, are not supported). The web-client-ui theme provider will convert your colors to HEX internally via javascript for display in some of the non-traditional dom-elements (canvas-based grids, monaco code editors, svg/webgl plots). We also mix in an alpha channel to create transparent colors for you via [color-mix](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) in srgb space.
 
 ### Using color generators and defining your palette
 
-The Deephaven design system is based on the [adobe spectrum](https://spectrum.adobe.com/page/color-palette/) color system. It is setup to use a palette consisting of:
+The Deephaven design system is based on the [Adobe spectrum](https://spectrum.adobe.com/page/color-palette/) color system. It is set up to use a palette consisting of:
 
 - 11 shades of a "gray" palette used for background colors
 - 13 shades of each of the 12 colors in the "color" palette: Red, Orange, Yellow, Chartreuse, Celery, Green, Seafoam, Cyan, Blue, Indigo, Purple, Fuschia and Magenta
 
-You can create color palettes with shades for each color using tools like: Adobe's [Leonardo](https://leonardocolor.io/theme.html) color tool (recommended), or [Coolors](https://coolors.co/gradient-palette/fae7d5-24211d?number=11). You may already have an existing brand guide at your company that also gives you full palettes. Leonardo is a great tool for creating color ramps, which has an "Export as CSS" feature to get the HEX values for each color in the ramp. Below we use hsl values, but you can use any color format listed in the previous section.
+You can create color palettes with shades for each color using tools like Adobe's [Leonardo](https://leonardocolor.io/theme.html) color tool (recommended), or [Coolors](https://coolors.co/gradient-palette/fae7d5-24211d?number=11). You may already have an existing brand guide at your company that gives you full palettes. Leonardo is a great tool for creating color ramps, and has an "Export as CSS" feature to get the HEX values for each color in the ramp. Below we use hsl values, but you can use any color format listed in the previous section.
 
-The background colors are defined using a set of 11 colors, ranging from light to dark for light themes, and inverted from dark to light for dark themes. With the 50, 75 and 100 colors being closer together, and 100-900 being a more equal distribution. The other colors are more evenly distributed across lightness.
+The background colors are defined using a set of 11 colors, ranging from light to dark for light themes, and inverted from dark to light for dark themes. The 50, 75, and 100 colors are closer together, and 100-900 are a more equal distribution. The other colors are more evenly distributed across lightness.
 
-For our example theme, we used a background color inspired from the financial times site to create a palette using Leonardo. The example theme uses the following palette for the "gray" background colors:
+Our example theme used a background color inspired by the Financial Times site to create a palette using Leonardo. The example theme uses the following palette for the "gray" background colors:
 
 ```css
 // Background colors, labeled as gray but may be any suitable background color
@@ -96,13 +99,13 @@ For our example theme, we used a background color inspired from the financial ti
 --dh-color-gray-900: hsl(0, 0%, 0%);
 ```
 
-We also override a "red" palette, a "green" palette and a "seafoam" palette based on the colors inspired by the financial times site. You will inherit any color from your chosen base theme that you do not define. Here's is the full palette we used for our example theme:
+We also override a "red" palette, a "green" palette and a "seafoam" palette based on the colors inspired by the Financial Times site. You will inherit any color from your chosen base theme you do not define. Here is the full palette we used for our example theme:
 
 ![Gray Palette](example-theme-palette.jpg)
 
 ### Using your palette for semantic colors
 
-Depending on how much you want to customize, you may choose to stop after just setting the palette and inherit the rest of the theme from the default theme. Or you may choose to override additional variables to customize the theme further. For example, we also override the `accent` variables as used for things like buttons from `blue` to `seafoam`. `positive` and `negative` already default to `red` and `green`, so by updating `red` and `green` palettes these are also changed. They could also be changed independently if you prefer a different color associated with positive or negative values or actions. Refer to the files labeled as "semantic" in the default theme for exposed variables.
+Depending on how much you want to customize, you may choose to stop after just setting the palette and inherit the rest of the theme from the default theme. Or you may choose to override additional variables to customize the theme further. For example, we also override the `accent` variables used for things like buttons from `blue` to `seafoam`. `positive` and `negative` already default to `red` and `green` -- updating `red` and `green` palettes will change these variables. They could also be changed independently if you prefer a different color associated with positive or negative values or actions. Refer to the files labeled as "semantic" in the default theme for exposed variables.
 
 ```css
 --dh-color-accent-100: var(--dh-color-seafoam-100);
@@ -121,17 +124,17 @@ Depending on how much you want to customize, you may choose to stop after just s
 --dh-color-accent-1400: var(--dh-color-seafoam-1400);
 ```
 
-### Using your palette for component specific semantic colors
+### Using your palette for component-specific semantic colors
 
-You may find that after overriding the palette and semantic colors you want even further customization of within specific components. In our example, we also override the default grid grid header color, row stripes and date colors, as well as the plot colorway.
+You may find that after overriding the palette and semantic colors, you want even further customization within specific components. In our example, we also override the default grid header color, row stripes, and date colors, as well as the plot colorway.
 
 ```css
 --dh-color-grid-header-bg: var(--dh-color-gray-100);
 --dh-color-grid-row-0-bg: var(--dh-color-gray-200);
 --dh-color-grid-row-1-bg: var(--dh-color-gray-100);
 ```
 
-### Additional Customization
+### Additional customization
 
 You may also override specific components using css selectors and setting your own variables and properties. This however is not recommended as it may break in future updates to the web-client-ui library. If you find yourself needing to do this, please consider opening an issue or pull request to request for additional variables in the default themes.