Tweaked some semantic vars

deephaven#1540

packages/code-studio/src/main/AppMainContainer.scss

@@ -182,7 +182,7 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
  flex-shrink: 0;
  background-image: linear-gradient(
  270deg,
- hsla(var(--dh-color-background-hsl), 0) 0%,
+ hsla(var(--dh-color-bg-hsl), 0) 0%,
  $background $tab-control-gradient-width
  );
  background-clip: content-box;
@@ -199,7 +199,7 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
  .tab-controls-forward {
  background-image: linear-gradient(
  90deg,
- hsla(var(--dh-color-background-hsl), 0) 0%,
+ hsla(var(--dh-color-bg-hsl), 0) 0%,
  $background $tab-control-gradient-width
  );
  background-clip: content-box;

packages/code-studio/src/settings/SettingsMenu.scss

@@ -5,18 +5,18 @@ $settings-menu-width: 400px;
 $settings-menu-header-min-height: 60px;
 $settings-menu-padding: $spacer-3;
 $settings-menu-header-user-image-size: 40px;
-$settings-menu-header-color: var(--dh-color-foreground);
+$settings-menu-header-color: var(--dh-color-fg);
 
-$settings-menu-collapse-trigger-color: var(--dh-color-foreground);
+$settings-menu-collapse-trigger-color: var(--dh-color-fg);
 
 $settings-menu-rule-bg: $gray-600;
 $settings-menu-rule-button-color: $gray-300;
 $settings-menu-rule-border: $gray-400;
 $settings-menu-rule-focused-border: $primary;
 
-$focus-over-primary-color: var(--dh-color-foreground);
+$focus-over-primary-color: var(--dh-color-fg);
 $input-btn-focus-box-shadow-over-primary: 0 0 0 0.2rem
- hsla(var(--dh-color-foreground-hsl), 0.35);
+ hsla(var(--dh-color-fg-hsl), 0.35);
 
 $settings-menu-z-index: $zindex-modal;
 
@@ -64,7 +64,7 @@ $settings-menu-z-index: $zindex-modal;
  color: $settings-menu-header-color;
 
  .btn-close-settings-menu {
- color: var(--dh-color-foreground);
+ color: var(--dh-color-fg);
  font-size: 18px;
  // we want the close button to occupy at least
  // as much space as the triggering button below
@@ -74,31 +74,22 @@ $settings-menu-z-index: $zindex-modal;
 
  &:focus {
  &::after {
- background: hsla(
- var(--dh-color-foreground-hsl),
- $focus-bg-transparency
- );
- border: 1px solid var(--dh-color-foreground);
+ background: hsla(var(--dh-color-fg-hsl), $focus-bg-transparency);
+ border: 1px solid var(--dh-color-fg);
  box-shadow: $input-btn-focus-box-shadow-over-primary;
  }
  }
 
  &:hover {
  &::after {
- background: hsla(
- var(--dh-color-foreground-hsl),
- $hover-bg-transparency
- );
+ background: hsla(var(--dh-color-fg-hsl), $hover-bg-transparency);
  }
  }
 
  &:active {
  &::after {
  content: '';
- background: hsla(
- var(--dh-color-foreground-hsl),
- $active-bg-transparency
- );
+ background: hsla(var(--dh-color-fg-hsl), $active-bg-transparency);
  }
  }
  }
@@ -145,27 +136,18 @@ $settings-menu-z-index: $zindex-modal;
  padding: 0 $spacer-1;
 
  &:focus {
- background: hsla(
- var(--dh-color-foreground-hsl),
- $focus-bg-transparency
- );
- border: 1px solid var(--dh-color-foreground);
+ background: hsla(var(--dh-color-fg-hsl), $focus-bg-transparency);
+ border: 1px solid var(--dh-color-fg);
  box-shadow: $input-btn-focus-box-shadow-over-primary;
  }
 
  &:hover {
- background: hsla(
- var(--dh-color-foreground-hsl),
- $hover-bg-transparency
- );
+ background: hsla(var(--dh-color-fg-hsl), $hover-bg-transparency);
  }
 
  &:active {
  content: '';
- background: hsla(
- var(--dh-color-foreground-hsl),
- $active-bg-transparency
- );
+ background: hsla(var(--dh-color-fg-hsl), $active-bg-transparency);
  }
  }
  }

packages/components/scss/BaseStyleSheet.scss

@@ -6,7 +6,7 @@
 
 :root {
  --dh-svg-inline-icon-size: 16px;
- --scrollbar-color: #{var(--dh-color-foreground-hsl)};
+ --scrollbar-color: #{var(--dh-color-fg-hsl)};
 
  color: var(--dh-color-text);
 
@@ -710,10 +710,10 @@ input[type='number']::-webkit-inner-spin-button {
 
 // used in inverted color sections, like light modals
 .theme-bg-light {
- --scrollbar-color: #{var(--dh-color-background-hsl)};
+ --scrollbar-color: #{var(--dh-color-bg-hsl)};
 
- scrollbar-color: hsla(var(--dh-color-background-hsl), 0.5)
- hsla(var(--dh-color-background-hsl), 0.3); // firefox
+ scrollbar-color: hsla(var(--dh-color-bg-hsl), 0.5)
+ hsla(var(--dh-color-bg-hsl), 0.3); // firefox
 }
 
 /********** Monaco Overides *********/

packages/components/scss/bootstrap_overrides.scss

@@ -31,8 +31,8 @@ $interfaceblue: var(--dh-color-accent-default-bg);
 $interfacewhite: $white;
 $interfaceblack: $black;
 $content-bg: var(--dh-color-content-bg, #2d2a2e);
-$background: var(--dh-color-background);
-$foreground: var(--dh-color-foreground);
+$background: var(--dh-color-bg);
+$foreground: var(--dh-color-fg);
 
 // Extend default Bootstrap $grays map
 $grays-custom: (

packages/components/scss/util.scss

@@ -1,7 +1,7 @@
 // Setup a mask-image for an inline svg
 @mixin icon-image-mask($mask-image, $size: 16px) {
  background-size: $size;
- background-color: var(--dh-color-foreground);
+ background-color: var(--dh-color-fg);
  mask-image: $mask-image;
  mask-position: center center;
  mask-repeat: no-repeat;
@@ -52,4 +52,4 @@
 // where we need a solid background image layer.
 @function solid-gradient($color) {
  @return linear-gradient(0deg, $color, $color);
-}
+}

packages/components/src/theme/ThemeModel.ts

@@ -6,8 +6,8 @@ export type ThemeCssVariableName = `--dh-${string}`;
 export type ThemePreloadColorVariable =
  | '--dh-color-loading-spinner-primary'
  | '--dh-color-loading-spinner-secondary'
- | '--dh-color-background'
- | '--dh-color-foreground';
+ | '--dh-color-bg'
+ | '--dh-color-fg';
 
 export type ThemeIconsRequiringManualColorChanges =
  | '--dh-svg-icon-select-indicator'
@@ -25,8 +25,8 @@ export const DEFAULT_PRELOAD_DATA_VARIABLES: Record<
 > = {
  '--dh-color-loading-spinner-primary': '#3b6bda', // dark theme --dh-color-blue-600
  '--dh-color-loading-spinner-secondary': '#f0f0ee80', // dark theme --dh-color-gray-800 + 50% opacity
- '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50
- '--dh-color-foreground': '#f0f0ee', // dark theme --dh-color-gray-800
+ '--dh-color-bg': '#1a171a', // dark theme --dh-color-gray-50
+ '--dh-color-fg': '#f0f0ee', // dark theme --dh-color-gray-800
 };
 
 /**

packages/components/src/theme/ThemeUtils.test.ts

@@ -69,13 +69,13 @@ describe('calculatePreloadStyleContent', () => {
  '--dh-color-loading-spinner-primary',
  'pink'
  );
- document.body.style.setProperty('--dh-color-background', 'orange');
+ document.body.style.setProperty('--dh-color-bg', 'orange');
 
  expect(calculatePreloadStyleContent()).toEqual(
  expectedContent({
  ...DEFAULT_PRELOAD_DATA_VARIABLES,
  '--dh-color-loading-spinner-primary': 'pink',
- '--dh-color-background': 'orange',
+ '--dh-color-bg': 'orange',
  })
  );
  });

packages/components/src/theme/__snapshots__/ThemeUtils.test.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`DEFAULT_PRELOAD_DATA_VARIABLES should match snapshot 1`] = `
 {
- "--dh-color-background": "#1a171a",
- "--dh-color-foreground": "#f0f0ee",
+ "--dh-color-bg": "#1a171a",
+ "--dh-color-fg": "#f0f0ee",
  "--dh-color-loading-spinner-primary": "#3b6bda",
  "--dh-color-loading-spinner-secondary": "#f0f0ee80",
 }

packages/components/src/theme/theme-dark/theme-dark-components.css

@@ -7,7 +7,7 @@
  --dh-color-colorpicker-border: hsla(var(--dh-color-visual-gray-hsl), 0.1);
 
  /* Form Controls */
- --dh-color-search-icon: var(--dh-color-foreground);
+ --dh-color-search-icon: var(--dh-color-fg);
  --dh-color-form-control-error: hsl(var(--dh-color-visual-negative-hsl));
  --dh-color-form-control-error-shadow: hsla(
  var(--dh-color-visual-negative-hsl),

packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css

@@ -24,7 +24,7 @@
  /* Input */
  --dh-color-editor-focus-border: var(--dh-color-focus-border);
  --dh-color-editor-input-option-active-border: var(--dh-color-focus-ring);
- --dh-color-editor-input-bg: var(--dh-color-background);
+ --dh-color-editor-input-bg: var(--dh-color-bg);
  --dh-color-editor-input-fg: var(--dh-color-text);
  --dh-color-editor-input-border: var(--dh-color-border);
 

packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css

@@ -1,6 +1,6 @@
 :root {
  /* Grid */
- --dh-color-grid-bg: var(--dh-color-background);
+ --dh-color-grid-bg: var(--dh-color-bg);
 
  /* Header */
  --dh-color-grid-header-bg: var(--dh-color-gray-100);

packages/components/src/theme/theme-dark/theme-dark-semantic.css

@@ -2,8 +2,10 @@
 /* stylelint-disable alpha-value-notation */
 :root {
  /* HSL base colors */
- --dh-color-background-hsl: var(--dh-color-black-hsl);
- --dh-color-foreground-hsl: var(--dh-color-white-hsl);
+ --dh-color-bg-hsl: var(--dh-color-black-hsl);
+ --dh-color-fg-hsl: var(--dh-color-white-hsl);
+ --dh-color-border-hsl: var(--dh-color-gray-500-hsl);
+ --dh-color-content-bg-hsl: var(--dh-color-gray-100-hsl);
 
  --dh-color-action-hsl: var(--dh-color-gray-75-hsl);
  --dh-color-accent-hsl: var(--dh-color-blue-600-hsl);
@@ -55,10 +57,10 @@
  --dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);
 
  /* General */
- --dh-color-border: var(--dh-color-gray-500);
- --dh-color-background: hsl(var(--dh-color-background-hsl));
- --dh-color-foreground: hsl(var(--dh-color-foreground-hsl));
- --dh-color-content-bg: var(--dh-color-gray-100);
+ --dh-color-border: hsl(var(--dh-color-border-hsl));
+ --dh-color-bg: hsl(var(--dh-color-bg-hsl));
+ --dh-color-fg: hsl(var(--dh-color-fg-hsl));
+ --dh-color-content-bg: hsl(var(--dh-color-content-bg-hsl));
 
  /* Hover */
  --dh-color-hover-border: var(--dh-color-gray-600);

packages/components/src/theme/theme-light/theme-light-palette.css

@@ -47,7 +47,7 @@
  /* Semantic */
  --dh-color-black: var(--dh-color-gray-50);
  --dh-color-white: var(--dh-color-gray-75);
- --dh-color-background: var(--dh-color-white);
- --dh-color-foreground: var(--dh-color-black);
- --dh-color-grid-bg: var(--dh-color-background);
+ --dh-color-bg: var(--dh-color-white);
+ --dh-color-fg: var(--dh-color-black);
+ --dh-color-grid-bg: var(--dh-color-bg);
 }

packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css

@@ -2,7 +2,7 @@
 /* stylelint-disable alpha-value-notation */
 .dh-spectrum-alias {
  --spectrum-body-text-color: var(--dh-color-text);
- --spectrum-alias-background-color-default: var(--dh-color-background);
+ --spectrum-alias-background-color-default: var(--dh-color-bg);
 
  /* Shadows / Overlays */
  --spectrum-alias-dropshadow-color: var(--dh-color-dropshadow);