update to srgb values

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

@@ -31,10 +31,17 @@ To preview themes during development, you'll need to start three separate proces
    npm run start
    ```
 
-Then visit http://localhost:4000 to preview in the app, or http://localhost:4000/ide/styleguide for a preview of all the components in the web-client-ui library. You can change the theme by clicking on the theme selector in the top right corner of the styleguide, or in the settings menu from the app.
+Then visit http://localhost:4000 to preview in the app, or http://localhost:4000/ide/styleguide for a preview of all the components in the web-client-ui library. You can change the theme by clicking on the theme selector in the top right corner of the styleguide, or in the settings menu from the app. If you make changes to your styles, you will need to refresh the page to see the changes.
 
 ## Creating your theme
 
+The general steps for creating a theme is 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)
+
 ### 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.
@@ -59,7 +66,7 @@ export const plugin: ThemePlugin = {
 
 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, and then the accent colors, positive and negative colors, and then a few additional colors specific to grids and plots. All colors are defined as raw HSL values without the `hsl()` functional notation. ex. `--dh-color-red-100: 2.14, 86.73%, 44.31%`. This allows web-client-ui to convert the colors internally to the necessary formats for each display purpose (grids, code editors, plots) and also mix in the alpha channel to create transparent colors via HSLA(Hue, Saturation, Lightness, Alpha). When CSS color-mixing is more widely supported, we may deprecate the use of HSL colors in favor of any valid css color.
+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
 
@@ -68,25 +75,25 @@ The Deephaven design system is based on the [adobe spectrum](https://spectrum.ad
 - 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 HSL values for each color in the ramp. Remove the `hsl()` notation to get the raw values. Consider manually converting to HSL using two decimals for your HSL raw values for additional precision.
+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.
 
 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.
 
 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:
 
 ```css
 // Background colors, labeled as gray but may be any suitable background color
---dh-color-gray-50-hsl: 30, 100%, 99.22%;
---dh-color-gray-75-hsl: 30, 100%, 97.65%;
---dh-color-gray-100-hsl: 27.69, 100%, 94.9%;
---dh-color-gray-200-hsl: 29.19, 78.72%, 90.78%;
---dh-color-gray-300-hsl: 28.33, 58.06%, 87.84%;
---dh-color-gray-400-hsl: 28, 18.99%, 69.02%;
---dh-color-gray-500-hsl: 27.5, 10.34%, 54.51%;
---dh-color-gray-600-hsl: 26.67, 8.57%, 41.18%;
---dh-color-gray-700-hsl: 25, 9.38%, 25.1%;
---dh-color-gray-800-hsl: 34.29, 10.77%, 12.75%;
---dh-color-gray-900-hsl: 0, 0%, 0%;
+--dh-color-gray-50: hsl(30, 100%, 99.22%);
+--dh-color-gray-75: hsl(30, 100%, 97.65%);
+--dh-color-gray-100: hsl(27.69, 100%, 94.9%);
+--dh-color-gray-200: hsl(29.19, 78.72%, 90.78%);
+--dh-color-gray-300: hsl(28.33, 58.06%, 87.84%);
+--dh-color-gray-400: hsl(28, 18.99%, 69.02%);
+--dh-color-gray-500: hsl(27.5, 10.34%, 54.51%);
+--dh-color-gray-600: hsl(26.67, 8.57%, 41.18%);
+--dh-color-gray-700: hsl(25, 9.38%, 25.1%);
+--dh-color-gray-800: hsl(34.29, 10.77%, 12.75%);
+--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:
@@ -95,23 +102,23 @@ We also override a "red" palette, a "green" palette and a "seafoam" palette base
 
 ### 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 they remained untouched but you could customize these as well. Refer to the semantic files in the default theme for available 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 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.
 
 ```css
---dh-color-accent-100-hsl: var(--dh-color-red-100-hsl);
---dh-color-accent-200-hsl: var(--dh-color-red-200-hsl);
---dh-color-accent-300-hsl: var(--dh-color-seafoam-300-hsl);
---dh-color-accent-400-hsl: var(--dh-color-seafoam-400-hsl);
---dh-color-accent-500-hsl: var(--dh-color-seafoam-500-hsl);
---dh-color-accent-600-hsl: var(--dh-color-seafoam-600-hsl);
---dh-color-accent-700-hsl: var(--dh-color-seafoam-700-hsl);
---dh-color-accent-800-hsl: var(--dh-color-seafoam-800-hsl);
---dh-color-accent-900-hsl: var(--dh-color-seafoam-900-hsl);
---dh-color-accent-1000-hsl: var(--dh-color-seafoam-1000-hsl);
---dh-color-accent-1100-hsl: var(--dh-color-seafoam-1100-hsl);
---dh-color-accent-1200-hsl: var(--dh-color-seafoam-1200-hsl);
---dh-color-accent-1300-hsl: var(--dh-color-seafoam-1300-hsl);
---dh-color-accent-1400-hsl: var(--dh-color-seafoam-1400-hsl);
+--dh-color-accent-100: var(--dh-color-seafoam-100);
+--dh-color-accent-200: var(--dh-color-seafoam-200);
+--dh-color-accent-300: var(--dh-color-seafoam-300);
+--dh-color-accent-400: var(--dh-color-seafoam-400);
+--dh-color-accent-500: var(--dh-color-seafoam-500);
+--dh-color-accent-600: var(--dh-color-seafoam-600);
+--dh-color-accent-700: var(--dh-color-seafoam-700);
+--dh-color-accent-800: var(--dh-color-seafoam-800);
+--dh-color-accent-900: var(--dh-color-seafoam-900);
+--dh-color-accent-1000: var(--dh-color-seafoam-1000);
+--dh-color-accent-1100: var(--dh-color-seafoam-1100);
+--dh-color-accent-1200: var(--dh-color-seafoam-1200);
+--dh-color-accent-1300: var(--dh-color-seafoam-1300);
+--dh-color-accent-1400: var(--dh-color-seafoam-1400);
 ```
 
 ### Using your palette for component specific semantic colors

plugins/example-theme/src/js/src/index.ts

@@ -1,13 +1,13 @@
 import type { ThemePlugin } from '@deephaven/plugin';
-import styleContent from './theme.scss?inline';
+import styleContent from './theme.css?inline';
 
 const plugin: ThemePlugin = {
   name: 'example-theme', // match the plugin name in the package.json, and the folder name
   type: 'ThemePlugin',
   themes: {
     name: 'Example Theme', // A human-readable name for the theme
     baseTheme: 'light', // The base theme to extend from, either 'light' or 'dark'
-    styleContent,
+    styleContent, // this is a string containing your .css file contents, you could also manually inline css rules here
   },
 };
 

plugins/example-theme/src/js/src/theme.css

@@ -0,0 +1,147 @@
+/* override the inherited base theme by scoping variables to :root */
+:root {
+  /*
+  ============ PALETTE ===========
+  GRAY 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900
+
+  RED, ORANGE, YELLOW, CHARTREUSE, CELERY, GREEN, SEAFOAM,
+  CYAN, BLUE, INDIGO, PURPLE, FUSCIA AND MAGENTA
+  100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400
+
+  Use any srgb color space value (hex, rgb, hsl, etc) to define a color.
+
+  See for reference: 
+  github repo deephaven/web-client-ui
+  /packages/components/src/theme/theme-light/theme-light-palette.css
+  */
+
+  /* Create a custom gray palette for background colors */
+  --dh-color-gray-50: hsl(30, 100%, 99.22%);
+  --dh-color-gray-75: hsl(30, 100%, 97.65%);
+  --dh-color-gray-100: hsl(27.69, 100%, 94.9%);
+  --dh-color-gray-200: hsl(29.19, 78.72%, 90.78%);
+  --dh-color-gray-300: hsl(28.33, 58.06%, 87.84%);
+  --dh-color-gray-400: hsl(28, 18.99%, 69.02%);
+  --dh-color-gray-500: hsl(27.5, 10.34%, 54.51%);
+  --dh-color-gray-600: hsl(26.67, 8.57%, 41.18%);
+  --dh-color-gray-700: hsl(25, 9.38%, 25.1%);
+  --dh-color-gray-800: hsl(34.29, 10.77%, 12.75%);
+  --dh-color-gray-900: hsl(0, 0%, 0%);
+
+  /* Create a custom seafoam palette */
+  --dh-color-seafoam-100: hsl(185, 30%, 92.16%);
+  --dh-color-seafoam-200: hsl(186, 31.25%, 87.45%);
+  --dh-color-seafoam-300: hsl(186.67, 31.03%, 82.94%);
+  --dh-color-seafoam-400: hsl(187.14, 32.81%, 74.9%);
+  --dh-color-seafoam-500: hsl(186.43, 32.18%, 65.88%);
+  --dh-color-seafoam-600: hsl(186.86, 31.82%, 56.86%);
+  --dh-color-seafoam-700: hsl(186.43, 34.43%, 47.84%);
+  --dh-color-seafoam-800: hsl(186.19, 49.74%, 38.24%);
+  --dh-color-seafoam-900: hsl(185.17, 84.06%, 27.06%);
+  --dh-color-seafoam-1000: hsl(185.61, 100%, 20.98%);
+  --dh-color-seafoam-1100: hsl(186.21, 100%, 17.06%);
+  --dh-color-seafoam-1200: hsl(187.06, 100%, 13.33%);
+  --dh-color-seafoam-1300: hsl(187.2, 100%, 9.8%);
+  --dh-color-seafoam-1400: hsl(188.33, 100%, 7.06%);
+
+  /* Create a custom green palette */
+  --dh-color-green-100: hsl(102.35, 39.53%, 91.57%);
+  --dh-color-green-200: hsl(102, 41.67%, 85.88%);
+  --dh-color-green-300: hsl(101.43, 41.18%, 80%);
+  --dh-color-green-400: hsl(100.33, 40.94%, 70.78%);
+  --dh-color-green-500: hsl(99.49, 39.7%, 60.98%);
+  --dh-color-green-600: hsl(98.13, 38.4%, 50.98%);
+  --dh-color-green-700: hsl(96.22, 53.11%, 40.98%);
+  --dh-color-green-800: hsl(91.34, 90.54%, 29.02%);
+  --dh-color-green-900: hsl(93.72, 100%, 23.73%);
+  --dh-color-green-1000: hsl(96.6, 100%, 19.61%);
+  --dh-color-green-1100: hsl(99.26, 100%, 15.88%);
+  --dh-color-green-1200: hsl(101.9, 100%, 12.35%);
+  --dh-color-green-1300: hsl(105.65, 100%, 9.02%);
+  --dh-color-green-1400: hsl(109.09, 100%, 6.47%);
+
+  /* Create a custom red palette */
+  --dh-color-red-100: hsl(10, 100%, 95.29%);
+  --dh-color-red-200: hsl(8.78, 100%, 91.96%);
+  --dh-color-red-300: hsl(9.15, 100%, 88.43%);
+  --dh-color-red-400: hsl(8.47, 100%, 83.33%);
+  --dh-color-red-500: hsl(8.28, 100%, 77.25%);
+  --dh-color-red-600: hsl(7.03, 96.03%, 70.39%);
+  --dh-color-red-700: hsl(5.85, 87.23%, 63.14%);
+  --dh-color-red-800: hsl(4.67, 77.59%, 54.51%);
+  --dh-color-red-900: hsl(2.14, 86.73%, 44.31%);
+  --dh-color-red-1000: hsl(0, 100%, 35.29%);
+  --dh-color-red-1100: hsl(0, 100%, 28.63%);
+  --dh-color-red-1200: hsl(0, 100%, 22.75%);
+  --dh-color-red-1300: hsl(0, 100%, 17.25%);
+  --dh-color-red-1400: hsl(0, 100%, 12.94%);
+
+  /*
+  ============ SEMANTIC VARIABLES ===========
+  Assign things like accent colors, apply how background colors
+  are mapped, positive/negative colors, etc. 
+  
+  See: 
+  /packages/components/src/theme/theme-light/theme-light-semantic.css
+  */
+
+  /*
+  Assign the accent colors to use seafoam. We could have assigned colors 
+  directly to accent-XXX but by first setting our brand color to the 
+  nearest palette color it allows it to also be exposed as a color option 
+  in color pickers within the UI.
+  */
+
+  --dh-color-accent-100: var(--dh-color-seafoam-100);
+  --dh-color-accent-200: var(--dh-color-seafoam-200);
+  --dh-color-accent-300: var(--dh-color-seafoam-300);
+  --dh-color-accent-400: var(--dh-color-seafoam-400);
+  --dh-color-accent-500: var(--dh-color-seafoam-500);
+  --dh-color-accent-600: var(--dh-color-seafoam-600);
+  --dh-color-accent-700: var(--dh-color-seafoam-700);
+  --dh-color-accent-800: var(--dh-color-seafoam-800);
+  --dh-color-accent-900: var(--dh-color-seafoam-900);
+  --dh-color-accent-1000: var(--dh-color-seafoam-1000);
+  --dh-color-accent-1100: var(--dh-color-seafoam-1100);
+  --dh-color-accent-1200: var(--dh-color-seafoam-1200);
+  --dh-color-accent-1300: var(--dh-color-seafoam-1300);
+  --dh-color-accent-1400: var(--dh-color-seafoam-1400);
+
+  /*
+  ============ COMPONENT SPECIFIC SEMANTIC VARIABLES ===========
+  Override specific colors to components like grid, plots, code editor, etc.
+
+  See: 
+  /packages/components/src/theme/theme-light/theme-dark-components.css
+  /packages/components/src/theme/theme-light/theme-dark-semantic-grid.css
+  /packages/components/src/theme/theme-light/theme-dark-semantic-charts.css
+  /packages/components/src/theme/theme-light/theme-dark-editor.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);
+  --dh-color-grid-date: var(--dh-color-black);
+
+  /* Chart colorway is special in that it contains a space seperated 
+  list of colors to assign in order for each series in a chart. 
+  Consider including at least 10 colors. */
+  --dh-color-chart-colorway: var(--dh-color-accent-bg)
+    var(--dh-color-visual-green) var(--dh-color-visual-yellow)
+    var(--dh-color-visual-purple) var(--dh-color-visual-orange)
+    var(--dh-color-visual-red) var(--dh-color-visual-chartreuse)
+    var(--dh-color-visual-fuchsia) var(--dh-color-visual-blue)
+    var(--dh-color-visual-magenta) var(--dh-color-white);
+}
+
+/*
+============ CUSTOM CLASS OVERRIDES ===========
+Exampe of overriding specific class color variables for one off customizations.
+Use sparingly as these are not guaranteed to be stable across releases.
+*/
+
+/* target a specific class in the DOM and override the variables or properties */
+.console-input-wrapper {
+  --console-input-bg: var(--dh-color-gray-75);
+  padding: 4px;
+}