feat: Theming - Inline svgs

packages/code-studio/src/styleguide/GoldenLayout.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import classnames from 'classnames';
+import { sampleSectionIdAndClasses } from './utils';
+
+const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
+
+function Tab({
+ isActive,
+ title,
+}: {
+ isActive: boolean;
+ title: string;
+}): JSX.Element {
+ return (
+ <li className={classnames('lm_tab', isActive && 'lm_active')}>
+ <span className="lm_title_before" />
+ <span className="lm_title">{title}</span>
+ <span className="lm_close_tab" />
+ </li>
+ );
+}
+
+export function GoldenLayout(): JSX.Element {
+ return (
+ <div {...sampleSectionIdAndClasses('golden-layout')}>
+ <h2 className="ui-title">Golden Layout</h2>
+ {[false, true].map(isMaximised => (
+ <React.Fragment key={String(isMaximised)}>
+ <h5>{isMaximised ? 'Minimized' : 'Maximised'}</h5>
+ <div
+ style={{ position: 'relative', border: 'none' }}
+ className={isMaximised ? 'lm_maximised' : undefined}
+ >
+ <div className="lm_header">
+ <ul className="lm_tabs">
+ {tabs.map((tab, i) => (
+ <Tab key={tab} isActive={i === 0} title={tab} />
+ ))}
+ </ul>
+ <ul className="lm_controls">
+ <li className="lm_tabpreviousbutton" />
+ <li className="lm_tabnextbutton" />
+ <li className="lm_maximise" />
+ <li className="lm_popout" />
+ <li className="lm_tabdropdown" />
+ <li className="lm_close" />
+ </ul>
+ </div>
+ </div>
+ </React.Fragment>
+ ))}
+ </div>
+ );
+}
+
+export default GoldenLayout;

packages/code-studio/src/styleguide/Inputs.tsx

@@ -304,10 +304,11 @@ function Inputs(): React.ReactElement {
  validationError={!validateValue ? 'Value not set' : undefined}
  isModified={!!validateValue}
  id="validateInput1"
- labelText="Input Field"
+ labelText={`Input Field${on ? ' (disabled)' : ''}`}
  hintText="Hint text"
  >
  <input
+ disabled={on}
  type="text"
  className="form-control"
  aria-describedby="emailHelp"
@@ -320,9 +321,10 @@ function Inputs(): React.ReactElement {
  validateOption === 'Invalid' ? 'Invalid value' : undefined
  }
  id="validateLabelInput2"
- labelText="Dropdown"
+ labelText={`Dropdown${on ? ' (disabled)' : ''}`}
  >
  <Select
+ disabled={on}
  onChange={eventTargetValue =>
  setValidateOption(eventTargetValue)
  }

packages/code-studio/src/styleguide/StyleGuide.tsx

@@ -28,6 +28,7 @@ import SpectrumComponents from './SpectrumComponents';
 import SamplesMenu, { SampleMenuCategory } from './SamplesMenu';
 import GotoTopButton from './GotoTopButton';
 import { HIDE_FROM_E2E_TESTS_CLASS } from './utils';
+import { GoldenLayout } from './GoldenLayout';
 
 const stickyProps = {
  position: 'sticky',
@@ -85,6 +86,9 @@ function StyleGuide(): React.ReactElement {
  <Colors />
  <ThemeColors />
 
+ <SampleMenuCategory data-menu-category="Layout" />
+ <GoldenLayout />
+
  <SampleMenuCategory data-menu-category="Components" />
  <Buttons />
  <Progress />

packages/code-studio/src/styleguide/ThemeColors.module.scss

@@ -11,7 +11,7 @@
 
  .label {
  display: flex;
- align-items: end;
+ align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  height: var(--swatch-height);

packages/code-studio/src/styleguide/ThemeColors.tsx

@@ -10,6 +10,11 @@ import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-
 import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?inline';
 import styles from './ThemeColors.module.scss';
 import { sampleSectionIdAndClasses } from './utils';
+import {
+ buildColorGroups,
+ contrastColor,
+ INVALID_COLOR_BORDER_STYLE,
+} from './colorUtils';
 
 // Group names are extracted from var names via a regex capture group. Most of
 // them work pretty well, but some need to be remapped to a more appropriate
@@ -39,6 +44,10 @@ const reassignVarGroups: Record<string, string> = {
 
 // Mappings of variable groups to rename
 const renameGroups = {
+ palette: {
+ black: 'gray',
+ white: 'gray',
+ },
  editor: {
  line: 'editor',
  comment: 'code',
@@ -76,12 +85,37 @@ const renameGroups = {
 };
 
 const swatchDataGroups = {
- 'Theme Color Palette': buildColorGroups(palette, 1),
- 'Semantic Colors': buildColorGroups(semantic, 1, renameGroups.semantic),
- 'Chart Colors': buildColorGroups(chart, 2, renameGroups.chart),
- 'Editor Colors': buildColorGroups(semanticEditor, 2, renameGroups.editor),
- 'Grid Colors': buildColorGroups(semanticGrid, 2, renameGroups.grid),
- 'Component Colors': buildColorGroups(components, 1),
+ 'Theme Color Palette': buildColorGroups(
+ palette,
+ 1,
+ reassignVarGroups,
+ renameGroups.palette
+ ),
+ 'Semantic Colors': buildColorGroups(
+ semantic,
+ 1,
+ reassignVarGroups,
+ renameGroups.semantic
+ ),
+ 'Chart Colors': buildColorGroups(
+ chart,
+ 2,
+ reassignVarGroups,
+ renameGroups.chart
+ ),
+ 'Editor Colors': buildColorGroups(
+ semanticEditor,
+ 2,
+ reassignVarGroups,
+ renameGroups.editor
+ ),
+ 'Grid Colors': buildColorGroups(
+ semanticGrid,
+ 2,
+ reassignVarGroups,
+ renameGroups.grid
+ ),
+ 'Component Colors': buildColorGroups(components, 1, reassignVarGroups),
 };
 
 export function ThemeColors(): JSX.Element {
@@ -110,6 +144,10 @@ export function ThemeColors(): JSX.Element {
  className={styles.swatch}
  style={{
  backgroundColor: value,
+ border:
+ value === '' && name.length > 0
+ ? INVALID_COLOR_BORDER_STYLE
+ : undefined,
  color: `var(--dh-color-${contrastColor(value)})`,
  }}
  >
@@ -137,94 +175,3 @@ export function ThemeColors(): JSX.Element {
 }
 
 export default ThemeColors;
-
-/** Return black or white contrast color */
-function contrastColor(color: string): 'black' | 'white' {
- const rgba = ColorUtils.parseRgba(ColorUtils.asRgbOrRgbaString(color) ?? '');
- if (rgba == null || rgba.a < 0.5) {
- return 'white';
- }
-
- const { r, g, b } = rgba;
- const y = (299 * r + 587 * g + 114 * b) / 1000;
- return y >= 128 ? 'black' : 'white';
-}
-
-/** Extract an array of { name, value } pairs for css variables in a given string */
-function extractColorVars(
- styleText: string
-): { name: string; value: string }[] {
- const computedStyle = getComputedStyle(document.documentElement);
- const varNames = styleText
- .split(/[\n;]/g)
- // Non-minified css will have leading 2 spaces in front of each css variable
- // declaration. Minified has no prefix except for the first line which will
- // have ':root{' prefix.
- .map(line => /^(?:\s{2}|:root\{)?(--dh-color-(?:[^:]+))/.exec(line)?.[1])
- .filter((match): match is string => Boolean(match));
-
- return varNames
- .map(varName => {
- const value = computedStyle.getPropertyValue(varName);
-
- // Chart colorway consists of multiple colors, so split into separate
- // swatches for illustration. Note that this assumes the colors are hsl
- // values. We'll need to make this more robust if we ever change the
- // default themes to use non-hsl.
- if (varName === '--dh-color-chart-colorway') {
- const colorwayColors = value
- .split('hsl')
- .filter(Boolean)
- .map(v => `hsl${v.trim()}`);
-
- return colorwayColors.map((varExp, i) => ({
- name: `${varName}-${i}`,
- value: varExp,
- }));
- }
-
- return {
- name: varName,
- value,
- };
- })
- .flat();
-}
-
-/** Group color data based on capture group value */
-function buildColorGroups(
- styleText: string,
- captureGroupI: number,
- groupRemap: Record<string, string> = {}
-): Record<string, { name: string; value: string }[]> {
- const swatchData = extractColorVars(styleText);
-
- const groupData = swatchData.reduce(
- (acc, { name, value }) => {
- const match = /^--dh-color-([^-]+)(?:-([^-]+))?/.exec(name);
- let group =
- reassignVarGroups[name] ??
- match?.[captureGroupI] ??
- match?.[1] ??
- '???';
-
- group = groupRemap[group] ?? group;
-
- if (acc[group] == null) {
- acc[group] = [];
- }
-
- // Add a spacer for black / white
- if (name === '--dh-color-black') {
- acc[group].push({ name: '', value: '' });
- }
-
- acc[group].push({ name, value });
-
- return acc;
- },
- {} as Record<string, { name: string; value: string }[]>
- );
-
- return groupData;
-}

packages/code-studio/src/styleguide/colorUtils.ts

@@ -0,0 +1,105 @@
+import { ColorUtils } from '@deephaven/utils';
+
+export const INVALID_COLOR_BORDER_STYLE =
+ '2px solid var(--dh-color-notice-default-bg)';
+
+/** Return black or white contrast color */
+export function contrastColor(color: string): 'black' | 'white' {
+ const rgba = ColorUtils.parseRgba(ColorUtils.asRgbOrRgbaString(color) ?? '');
+ if (rgba == null || rgba.a < 0.5) {
+ return 'white';
+ }
+
+ const { r, g, b } = rgba;
+ return ColorUtils.getBrightness([r, g, b]) >= 128 ? 'black' : 'white';
+}
+
+/** Extract an array of { name, value } pairs for css variables in a given string */
+export function extractColorVars(
+ styleText: string
+): { name: string; value: string }[] {
+ const computedStyle = getComputedStyle(document.documentElement);
+ const varNames = styleText
+ .split(/[\n;]/g)
+ // Non-minified css will have leading 2 spaces in front of each css variable
+ // declaration. Minified has no prefix except for the first line which will
+ // have ':root{' prefix.
+ .map(line => /^(?:\s{2}|:root\{)?(--dh-color-(?:[^:]+))/.exec(line)?.[1])
+ .filter((match): match is string => Boolean(match));
+
+ return varNames
+ .map(varName => {
+ const value = computedStyle.getPropertyValue(varName);
+
+ // Chart colorway consists of multiple colors, so split into separate
+ // swatches for illustration. Note that this assumes the colors are hsl
+ // values. We'll need to make this more robust if we ever change the
+ // default themes to use non-hsl.
+ if (varName === '--dh-color-chart-colorway') {
+ const colorwayColors = value
+ .split('hsl')
+ .filter(Boolean)
+ .map(v => `hsl${v.trim()}`);
+
+ return colorwayColors.map((varExp, i) => ({
+ name: `${varName}-${i}`,
+ value: varExp,
+ }));
+ }
+
+ return {
+ name: varName,
+ value,
+ };
+ })
+ .flat();
+}
+
+/** Group color data based on capture group value */
+export function buildColorGroups(
+ styleText: string,
+ captureGroupI: number,
+ reassignVarGroups: Record<string, string> = {},
+ groupRemap: Record<string, string> = {}
+): Record<string, { name: string; value: string }[]> {
+ const swatchData = extractColorVars(styleText);
+
+ const groupData = swatchData.reduce(
+ (acc, { name, value }) => {
+ const match = /^--dh-color-([^-]+)(?:-([^-]+))?/.exec(name);
+ let group =
+ reassignVarGroups[name] ??
+ match?.[captureGroupI] ??
+ match?.[1] ??
+ '???';
+
+ group = groupRemap[group] ?? group;
+
+ if (acc[group] == null) {
+ acc[group] = [];
+ }
+
+ // Skip -hsl variables since they aren't actually colors yet
+ if (/^--dh-color-(.*?)-hsl$/.test(name)) {
+ return acc;
+ }
+
+ // Add a spacer for black / white
+ if (name === '--dh-color-black') {
+ acc[group].push({ name: '', value: '' });
+ }
+
+ // Skip gray light/mid/dark as we are planning to remove them
+ if (/^--dh-color-gray-(light|mid|dark)$/.test(name)) {
+ return acc;
+ }
+
+ acc[group].push({ name, value });
+
+ return acc;
+ },
+ {} as Record<string, { name: string; value: string }[]>
+ );
+
+ return groupData;
+}